Mã thời tiết HTML
Trong hướng dẫn này, chúng ta sẽ xây dựng ứng dụng thời tiết của riêng mình bằng HTML, CSS và JavaScript. Để truy xuất dữ liệu, chúng tôi sẽ sử dụng thứ gọi là API hoặc giao diện lập trình ứng dụng Show Chà, thực ra chúng ta sẽ sử dụng hai API. một để lấy vị trí của người dùng và một để lấy dữ liệu thời tiết dựa trên vị trí của người dùng Bắt đầuĐể truy xuất vị trí của người dùng, chúng tôi sẽ sử dụng API Web vị trí địa lý để tự động phát hiện vĩ độ và kinh độ của người dùng. Khi chúng tôi có thông tin này, chúng tôi có thể yêu cầu một nguồn thời tiết - như OpenWeatherMap - để nhận dữ liệu thời tiết dựa trên vị trí của người dùng Trước hết, hãy tiếp tục và đăng ký khóa API miễn phí trên OpenWeatherMap tại đây. Khi bạn đã đăng nhập, hãy nhấp vào 2 và tạo khóa. Nó sẽ trông giống như 3Bây giờ chúng tôi có khóa API, chúng tôi có thể tạo các tệp của mình
Như bạn có thể đã thấy trong bản xem trước ở hình trên, chúng tôi sẽ hiển thị nhiệt độ hiện tại, mô tả ngắn và tọa độ dựa trên vị trí của người dùng. Để làm điều này, chúng ta cần truy cập vào tài liệu 4 của mình và đảm bảo rằng trước tiên chúng ta đã liên kết biểu định kiểu 5 và tệp javascript 6Sau đó, trong thẻ 7 của chúng ta, hãy tạo ba phần tử với ba id duy nhất. Chúng ta có thể tạo thẻ 8 với id là 9, thẻ 0 với id là 1 và thẻ 2 với id là 3. Trong tương lai, bạn có thể thêm nhiều yếu tố hơn để đánh dấu và hiển thị dữ liệu chi tiết hơn nữa từ API thời tiết của chúng tôi tại đây 2Tuyệt, bây giờ chúng ta đã có phần đánh dấu của mình, hãy thực sự tìm nạp dữ liệu. Tệp của bạn — khi được xem trước trong trình duyệt — vẫn phải trống Tìm nạp dữ liệu vị trí địa lýTrước khi chúng tôi tìm nạp dữ liệu từ các API của mình, chúng tôi sẽ cần gán các biến cho mỗi 4 trong phần đánh dấu HTML của chúng tôi. Chúng ta có thể làm điều đó bằng cách sử dụng hàm 5. Hãy tiếp tục và viết một hàm 6 đặt mỗi 4 trong phần đánh dấu HTML của chúng ta bằng một biếnGiải pháp
Đáng kinh ngạc. Chúng tôi biết đã kết nối JavaScript của chúng tôi với đánh dấu HTML. Điều này sẽ cho phép chúng tôi chỉnh sửa 8 của các thẻ mà chúng tôi đã liên kết bởi 4Tiếp theo, hãy tiếp tục viết hàm 6 của chúng ta bằng cách thêm các biến cho điểm cuối API thời tiết (url) và apiKey________số 8Ngọt. Bây giờ, hãy gọi API web định vị địa lý của chúng tôi bằng cách sử dụng như sau 2Chính xác chức năng này là gì? . Bất cứ khi nào ai đó truy cập ứng dụng thời tiết của chúng tôi, ứng dụng sẽ hỏi liệu họ có được phép truy cập vị trí của họ không. Nếu đúng như vậy, thì nó sẽ nhận được vị trí hiện tại của một người về kinh độ và vĩ độ của họ. Để có công việc này, chúng ta sẽ cần chuyển vào hai chức năng. 21 và 22. Các hàm này sẽ được gọi tùy thuộc vào việc hàm 23 trả về dữ liệu vị trí hợp lệ hay đưa ra lỗi. Sau khi bạn gọi API định vị địa lý, hãy thử bảng điều khiển ghi lại dữ liệu bạn nhận được khi thành công và/hoặc khi gặp lỗi 6Để xem dữ liệu này, hãy đảm bảo rằng bạn gọi hàm 6 ở đâu đó bên ngoài hàm vì tất cả mã và lỗi của chúng tôi đều nằm trong đó 8Mở tệp 25 của bạn trong trình duyệt và điều hướng đến bảng điều khiển của bạn. Bạn sẽ thấy dữ liệu định vị địa lý như thế này 0Khá mát mẻ, phải không? . Hãy mở rộng chức năng 21 của chúng tôi để làm điều nàyBằng cách xem dữ liệu mà chúng tôi đã ghi lại, hãy đặt vĩ độ và kinh độ bằng các biến có tên là 27 và 28Giải pháp 4Tuyệt vời. Hãy chuyển sang thực hiện yêu cầu API của chúng tôi Trong JavaScript, chúng ta có thể sử dụng API tìm nạp, cung cấp giao diện để tìm nạp tài nguyên từ mọi nơi trên internet. Chúng tôi có thể nhấn url này để lấy dữ liệu của mình 5Nếu bạn tò mò, hãy thử tự xây dựng chuỗi này với vĩ độ và kinh độ mà bạn đã đăng nhập trước đó. Nếu truy cập liên kết đó trong trình duyệt của mình, bạn sẽ thấy dữ liệu thời tiết ở dạng JSON được xuất ra dựa trên vị trí bạn đã gửi trong URL. Đây chính xác là dữ liệu mà chúng tôi sẽ tìm nạp Chúng tôi có thể tìm nạp dữ liệu bằng cách chuyển 29 của mình vào API web 60. Sau đó, chúng ta có thể sử dụng một thứ gọi là lời hứa để thực thi một bộ mã sau khi chúng ta đã tìm nạp dữ liệu. Trong trường hợp này, chúng tôi muốn lấy dữ liệu mà chúng tôi đã tìm nạp và hiển thị dữ liệu đó trên trang web của mình, nghĩa là đặt 8 của các thẻ mà chúng tôi đã tạo trước đó theo nhiệt độ, mô tả và vị trí từ yêu cầu dữ liệu thời tiết của chúng tôi 9Ngọt. Dữ liệu bạn đã tìm nạp hiện được hiển thị trên trang web của bạn. Đây là giao diện JavaScript của bạn sau khi bạn hoàn thành. Tôi vừa thêm một số văn bản bất cứ khi nào không tìm thấy vị trí (khi có lỗi) và thêm văn bản bổ sung để cho người dùng biết rằng họ hiện đang được "định vị" và chúng tôi vẫn đang tải tất cả dữ liệu thời tiết. Thông báo này sau đó được ghi đè bằng dữ liệu thời tiết thực tế 0Ở đó bạn có nó. Bây giờ chúng tôi có một ứng dụng thời tiết chức năng. ) một số kiểu dángĐây là ý kiến của tôi về một số thay đổi phông chữ và căn giữa cơ bản trong CSS. Thoải mái tạo kiểu cho trang theo ý thích của bạn 1Thách đấuTôi hy vọng bạn tìm thấy hướng dẫn này hữu ích. Bạn có thể nghĩ ra những ý tưởng khác để cải thiện dự án này không? Bạn có thể thêm các biểu tượng tùy thuộc vào mô tả thời tiết (ví dụ:. mây, nắng, mưa, v.v. ), thêm dữ liệu thời tiết bổ sung (cảm giác như nhiệt độ, độ ẩm, dự báo 7 ngày, bình minh, hoàng hôn, tốc độ gió, v.v.). Hãy nhớ rằng, tất cả dữ liệu này đã có trong phản hồi yêu cầu của bạn đối với API OpenWeatherMap Làm cách nào để tạo một trang web thời tiết bằng HTML?Để tạo một ứng dụng thời tiết đơn giản chúng ta thực hiện các bước sau. . Step 1: Add HTML. HTML. .. . Bước 2. Thêm CSS. CSS (SCSS) * { lề. 0;. Bước 3. Thêm JavaScript. JavaScript. var inputval = tài liệu. querySelector('#cityinput'). Bước 4. Kết hợp HTML, CSS và JavaScript. đầu ra. THẺ LIÊN QUAN. html Làm cách nào để hiển thị nhiệt độ trong HTML?℃ - độ C (U+2103) - Biểu tượng HTML.
Làm cách nào để kiểm tra thời tiết trong JavaScript?Cách tải dữ liệu thời tiết trong JavaScript bằng Tìm nạp API, jQuery, d3 hoặc nút. . Bước 1 – thiết lập tài khoản API thời tiết. . Bước 2 – tạo yêu cầu API thời tiết. . Bước 2 – tạo tập lệnh JavaScript để truy xuất dữ liệu thời tiết. . Bước 3 – xử lý phản hồi. . Đóng nhận xét Làm cách nào để xây dựng API thời tiết?Cách tạo trang web thời tiết . Nhận khóa API cho API thời tiết trên RapidAPI. com. OpenWeatherMap là điểm khởi đầu tuyệt vời nếu bạn muốn tận dụng API để lấy dữ liệu cần thiết. . Thiết lập dự án. . Tạo máy chủ với Express. . Tạo phản hồi HTML. . Chạy mã của bạn |