簡介
為了最終結(jié)束 Flatiron 學(xué)校軟體工程課程的第一階段，我們被指派只使用 HTML、CSS 和 JavaScript 創(chuàng)建一個單頁 Web 應(yīng)用程序，並合併一個為我們的網(wǎng)頁提供資料的公共 API。

對於我的項目，我決定創(chuàng)建自己的天氣應(yīng)用程序，名為“今天的天氣預(yù)報”。雖然該專案本身確實有點基礎(chǔ)，但這是一個有趣的挑戰(zhàn)。我們的目標(biāo)是建立一個用戶友好的響應(yīng)式應(yīng)用程序，為世界上任何城市提供即時天氣更新和詳細(xì)預(yù)報。

專案要求
此計畫提出了多項要求，每項要求都強化了第一階段中教授的基本概念和課程：

應(yīng)用程式必須完全在單一頁面上運行。不允許重定向或重新加載，資料必須來自公共 API 或 db.json 檔案。
API 或 db.json 檔案必須傳回至少五個不同的對象，每個對象至少包含三個屬性。
所有客戶端和 API 互動都應(yīng)使用 JSON 作為通訊格式非同步處理。
此項目必須至少使用三個唯一的事件偵聽器，每個偵聽器偵聽不同類型的事件，並使用 addEventListener() 方法新增。每個事件監(jiān)聽器必須有自己獨特的回調(diào)。
應(yīng)用程式必須至少實作一個數(shù)組迭代實例。

我個人發(fā)現(xiàn) API 的實作是最具挑戰(zhàn)性的，部分原因是我自己的優(yōu)柔寡斷，但也因為這個概念對我來說是最陌生的。然而經(jīng)過一番探索，我發(fā)現(xiàn) API 實作實際上是這個專案更容易的方面之一。

「今日天氣預(yù)報」的功能：

即時天氣更新
當(dāng)使用者輸入城市名稱時，應(yīng)用程式將返回特定於該位置的即時天氣資料。首頁將顯示當(dāng)前溫度（攝氏度）、簡短的天氣預(yù)報以及直觀地表示天氣預(yù)報的圖示。

3 小時天氣預(yù)報：
該應(yīng)用程式還以 3 小時為間隔提供 24 小時天氣預(yù)報。此部分向使用者顯示當(dāng)前時間和預(yù)測溫度（以攝氏度為單位）。

動態(tài)更新：
所有資料都是動態(tài)取得和顯示的，無需重新載入頁面，確保無縫的使用者體驗。

我如何滿足要求

1. 單頁應(yīng)用程式
   該天氣應(yīng)用程式完全在單一頁面上運行。當(dāng)使用者搜尋城市時，JavaScript 會取得所需的數(shù)據(jù)，清除舊內(nèi)容，並使用新資訊動態(tài)更新頁面 - 所有這些都無需重定向或重新載入。

2. 五個具有屬性的物件
   實作了以下物件：

1.) 都市物件：
屬性：包括名稱、緯度和經(jīng)度。

2.) 天氣對象：
屬性：包括溫度、描述和圖示。

3.) 預(yù)測對象：
屬性：包括時間、溫度、圖示。

4.) 日期時間對象：
屬性：包括日期、時間和星期。

5.) DOM 元素物件：
屬性：包括 id、type 和 content。

每個物件都在建立資料和確保模組化方面發(fā)揮了作用。

1. 非同步 API 處理
   使用 fetch API，應(yīng)用程式從 OpenWeather API 檢索即時天氣和預(yù)報資料。所有資料互動均使用JSON，滿足專案需求。

2. 三個獨特的事件監(jiān)聽器
   該應(yīng)用程式包含三個不同的事件偵聽器：

點擊事件：當(dāng)使用者點擊「搜尋」按鈕時，它會取得天氣資料。
按鍵事件：當(dāng)在輸入欄位中按下「Enter」鍵時，會觸發(fā)相同的天氣獲取功能。
滑鼠懸停事件：當(dāng)使用者將滑鼠懸停在天氣圖示上時，會動態(tài)顯示附加資訊（例如「OpenWeatherMap 提供的資料」）。

1. 數(shù)組迭代 預(yù)測部分使用 forEach 方法為每個 3 小時的預(yù)測動態(tài)建立 HTML 元素。

挑戰(zhàn)與解決方案
我在這個專案中遇到的一些挑戰(zhàn)是了解如何在從 OpenWeather API 獲取資料時處理非同步操作，以及了解 API 本身以及它與 db.json 檔案的區(qū)別。
應(yīng)用程式的樣式對我來說是另一個巨大的挑戰(zhàn)，因為 CSS 一直是一個弱點，我傾向於處理更令人畏懼的技術(shù)概念，而不會關(guān)注它。
然而，透過實踐，這些概念似乎不那麼可怕，雖然我知道我的程式碼遠(yuǎn)非完美，但在應(yīng)對這些挑戰(zhàn)後，我對自己作為開發(fā)人員的技能更有信心了。

結(jié)論
這個專案不僅鞏固了我對 JavaScript 的理解，也教會了我關(guān)於堅持、解決問題以及乾淨(jìng)、模組化程式碼的重要性的寶貴經(jīng)驗。

我希望您喜歡探索該應(yīng)用程序，就像我喜歡構(gòu)建它一樣。請隨時分享您的回饋或改進(jìn)建議—我很想聽聽您的想法！

如果您想查看該專案的原始程式碼，可以在此儲存庫中存取它：https://github.com/CourtneyKerr19/Todays_Weather_Forecast

感謝您的閱讀！

以上是使用 JavaScript 建立單頁天氣應(yīng)用程式的詳細(xì)內(nèi)容。更多資訊請關(guān)注PHP中文網(wǎng)其他相關(guān)文章！