簡(jiǎn)介
為了最終結(jié)束 Flatiron 學(xué)校軟件工程課程的第一階段，我們被分配只使用 HTML、CSS 和 JavaScript 創(chuàng)建一個(gè)單頁(yè) Web 應(yīng)用程序，并合并一個(gè)為我們的網(wǎng)頁(yè)提供數(shù)據(jù)的公共 API。

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

項(xiàng)目要求
該項(xiàng)目提出了多項(xiàng)要求，每項(xiàng)要求都強(qiáng)化了第一階段中教授的基本概念和課程：

應(yīng)用程序必須完全在單個(gè)頁(yè)面上運(yùn)行。不允許重定向或重新加載，數(shù)據(jù)必須來(lái)自公共 API 或 db.json 文件。
API 或 db.json 文件必須返回至少五個(gè)不同的對(duì)象，每個(gè)對(duì)象至少包含三個(gè)屬性。
所有客戶(hù)端和 API 交互都應(yīng)使用 JSON 作為通信格式異步處理。
該項(xiàng)目必須至少使用三個(gè)唯一的事件偵聽(tīng)器，每個(gè)偵聽(tīng)器偵聽(tīng)不同類(lèi)型的事件，并使用 addEventListener() 方法添加。每個(gè)事件監(jiān)聽(tīng)器必須有自己獨(dú)特的回調(diào)。
應(yīng)用程序必須至少實(shí)現(xiàn)一個(gè)數(shù)組迭代實(shí)例。

我個(gè)人發(fā)現(xiàn) API 的實(shí)現(xiàn)是最具挑戰(zhàn)性的，部分原因是我自己的優(yōu)柔寡斷，但也因?yàn)檫@個(gè)概念對(duì)我來(lái)說(shuō)是最陌生的。然而經(jīng)過(guò)一番探索，我發(fā)現(xiàn) API 實(shí)現(xiàn)實(shí)際上是這個(gè)項(xiàng)目更容易的方面之一。

“今日天氣預(yù)報(bào)”的功能：

實(shí)時(shí)天氣更新
當(dāng)用戶(hù)輸入城市名稱(chēng)時(shí)，應(yīng)用程序?qū)⒎祷靥囟ㄓ谠撐恢玫膶?shí)時(shí)天氣數(shù)據(jù)。首頁(yè)將顯示當(dāng)前溫度（攝氏度）、簡(jiǎn)短的天氣描述以及直觀地表示天氣預(yù)報(bào)的圖標(biāo)。

3 小時(shí)天氣預(yù)報(bào)：
該應(yīng)用程序還以 3 小時(shí)為間隔提供 24 小時(shí)天氣預(yù)報(bào)。此部分向用戶(hù)顯示當(dāng)前時(shí)間和預(yù)測(cè)溫度（以攝氏度為單位）。

動(dòng)態(tài)更新：
所有數(shù)據(jù)都是動(dòng)態(tài)獲取和顯示的，無(wú)需重新加載頁(yè)面，確保無(wú)縫的用戶(hù)體驗(yàn)。

我如何滿(mǎn)足要求

1. 單頁(yè)應(yīng)用程序
   該天氣應(yīng)用程序完全在單個(gè)頁(yè)面上運(yùn)行。當(dāng)用戶(hù)搜索城市時(shí)，JavaScript 會(huì)獲取所需的數(shù)據(jù)，清除舊內(nèi)容，并使用新信息動(dòng)態(tài)更新頁(yè)面 - 所有這些都無(wú)需重定向或重新加載。

2. 五個(gè)具有屬性的對(duì)象
   實(shí)現(xiàn)了以下對(duì)象：

1.) 城市對(duì)象：
屬性：包括名稱(chēng)、緯度和經(jīng)度。

2.) 天氣對(duì)象：
屬性：包括溫度、描述和圖標(biāo)。

3.) 預(yù)測(cè)對(duì)象：
屬性：包括時(shí)間、溫度、圖標(biāo)。

4.) 日期時(shí)間對(duì)象：
屬性：包括日期、時(shí)間和星期。

5.) DOM 元素對(duì)象：
屬性：包括 id、type 和 content。

每個(gè)對(duì)象都在構(gòu)建數(shù)據(jù)和確保模塊化方面發(fā)揮了作用。

1. 異步 API 處理
   使用 fetch API，應(yīng)用程序從 OpenWeather API 檢索實(shí)時(shí)天氣和預(yù)報(bào)數(shù)據(jù)。所有數(shù)據(jù)交互均使用JSON，滿(mǎn)足項(xiàng)目需求。

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

點(diǎn)擊事件：當(dāng)用戶(hù)點(diǎn)擊“搜索”按鈕時(shí)，它會(huì)獲取天氣數(shù)據(jù)。
按鍵事件：當(dāng)在輸入字段中按下“Enter”鍵時(shí)，會(huì)觸發(fā)相同的天氣獲取功能。
鼠標(biāo)懸停事件：當(dāng)用戶(hù)將鼠標(biāo)懸停在天氣圖標(biāo)上時(shí)，會(huì)動(dòng)態(tài)顯示附加信息（例如“OpenWeatherMap 提供的數(shù)據(jù)”）。

1. 數(shù)組迭代 預(yù)測(cè)部分使用 forEach 方法為每個(gè) 3 小時(shí)的預(yù)測(cè)動(dòng)態(tài)創(chuàng)建 HTML 元素。

挑戰(zhàn)與解決方案
我在這個(gè)項(xiàng)目中遇到的一些挑戰(zhàn)是了解如何在從 OpenWeather API 獲取數(shù)據(jù)時(shí)處理異步操作，以及了解 API 本身以及它與 db.json 文件的區(qū)別。
應(yīng)用程序的樣式對(duì)我來(lái)說(shuō)是另一個(gè)巨大的挑戰(zhàn)，因?yàn)?CSS 一直是一個(gè)弱點(diǎn)，我傾向于處理更令人畏懼的技術(shù)概念，而不會(huì)關(guān)注它。
然而，通過(guò)實(shí)踐，這些概念似乎并不那么可怕，雖然我知道我的代碼遠(yuǎn)非完美，但在應(yīng)對(duì)這些挑戰(zhàn)后，我對(duì)自己作為開(kāi)發(fā)人員的技能更有信心了。

結(jié)論
這個(gè)項(xiàng)目不僅鞏固了我對(duì) JavaScript 的理解，還教會(huì)了我關(guān)于堅(jiān)持、解決問(wèn)題以及干凈、模塊化代碼的重要性的寶貴經(jīng)驗(yàn)。

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

如果您想查看該項(xiàng)目的源代碼，可以在此存儲(chǔ)庫(kù)中訪問(wèn)它：https://github.com/CourtneyKerr19/Todays_Weather_Forecast

感謝您的閱讀！

以上是使用 JavaScript 構(gòu)建單頁(yè)天氣應(yīng)用程序的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！