讓我們開(kāi)門(mén)見(jiàn)山 - 通過(guò)閱讀無(wú)休止的教程和文檔來(lái)學(xué)習(xí) JavaScript 可能會(huì)讓人感到無(wú)聊。

相信我，我從經(jīng)驗(yàn)中知道。我花了很多時(shí)間復(fù)制和粘貼代碼片段，但沒(méi)有掌握發(fā)生了什么。

然后我發(fā)現(xiàn)了一些改變一切的事情：構(gòu)建真實(shí)的項(xiàng)目是提高 JavaScript 技能的最快方法。

事情是這樣的 - 您無(wú)需成為編碼高手即可開(kāi)始。

我將分享的五個(gè)項(xiàng)目旨在幫助您擺脫“什么是函數(shù)？”到“我可以創(chuàng)造東西！”

每個(gè)項(xiàng)目都建立在上一個(gè)項(xiàng)目的基礎(chǔ)上，教授新想法，同時(shí)強(qiáng)化您已經(jīng)知道的知識(shí)。

還有什么更好的嗎？您將構(gòu)建實(shí)際的功能應(yīng)用程序 - 而不僅僅是您永遠(yuǎn)不會(huì)再使用的隨機(jī)編碼練習(xí)。

無(wú)論您是 JavaScript 新手還是只是想加強(qiáng)基礎(chǔ)知識(shí)，這些項(xiàng)目都會(huì)為您提供實(shí)踐經(jīng)驗(yàn)。

想開(kāi)始嗎？讓我們開(kāi)始第一個(gè)項(xiàng)目。

項(xiàng)目1：交互式待辦事項(xiàng)列表

您可能會(huì)想，“另一個(gè)待辦事項(xiàng)清單？？”但這個(gè)項(xiàng)目作為一個(gè)基本起點(diǎn)是有原因的——它在一個(gè)緊湊的包中教你關(guān)鍵的 JavaScript 概念。

這就是為什么它對(duì)初學(xué)者如此有效：

首先，您將獲得 DOM 操作的實(shí)踐經(jīng)驗(yàn) - 這意味著使用 JavaScript 更改您的網(wǎng)頁(yè)。

您將添加新任務(wù)，勾選它們，然后通過(guò)單擊鼠標(biāo)刪除它們。這意味著您將使用事件偵聽(tīng)器、創(chuàng)建新元素并隨時(shí)更新頁(yè)面。

您將創(chuàng)建的主要功能：

• 使用輸入框添加新任務(wù)
• 將項(xiàng)目標(biāo)記為已完成
• 刪除您不再需要的任務(wù)
• 保存您的任務(wù)，以便在您重新加載頁(yè)面時(shí)它們保持原樣
• 為成品添加炫酷的刪除線效果。

當(dāng)您添加本地存儲(chǔ)來(lái)保存任務(wù)時(shí)，真正的奇跡就會(huì)發(fā)生。

突然之間，您的基本待辦事項(xiàng)列表變成了一個(gè)持久的應(yīng)用程序，可以記住您放入的內(nèi)容。

這與大型應(yīng)用程序中用于存儲(chǔ)用戶信息的想法相同。

提示：從基礎(chǔ)開(kāi)始。首先，確保您可以添加和刪除項(xiàng)目。然后，您可以在此基礎(chǔ)上添加額外的功能。這種方法使整個(gè)過(guò)程不再那么令人畏懼。

想要激勵(lì)自己?jiǎn)幔靠紤]添加任務(wù)類(lèi)別或截止日期。這些額外的小東西將提高您的技能并使您的項(xiàng)目更加實(shí)用。

項(xiàng)目2：天氣儀表板

該項(xiàng)目將向您介紹現(xiàn)代 Web 開(kāi)發(fā)中的一個(gè)關(guān)鍵概念——使用 API，從而提高您的技能。

您還將構(gòu)建一些您可能想自己使用的有用的東西。

這個(gè)項(xiàng)目的酷之處在于，您將從互聯(lián)網(wǎng)上獲取實(shí)時(shí)天氣數(shù)據(jù)并以引人注目的方式顯示出來(lái)。

您將學(xué)習(xí)處理不是立即可用的數(shù)據(jù)（異步 JavaScript）并使用真實(shí)世界的 API 響應(yīng)。

您將構(gòu)建的主要功能：

• 搜索全球任何城市
• 顯示當(dāng)前溫度、濕度和風(fēng)速
• 顯示未來(lái)幾天的天氣預(yù)報(bào)
• 包括根據(jù)情況變化的天氣圖標(biāo)
• 保留喜愛(ài)的城市以便快速訪問(wèn)

最好的部分？您將了解 fetch 和 Promise——任何 JavaScript 開(kāi)發(fā)人員的關(guān)鍵概念：

async function getWeatherData(city) {
    const response = await fetch(`https://api.weatherapi.com/v1/forecast.json?q=${city}`);
    const data = await response.json();
    updateWeatherDisplay(data);
}

您還將解決：

• 找不到城市時(shí)的處理錯(cuò)誤
• 獲取數(shù)據(jù)時(shí)顯示加載狀態(tài)
• 將 API 響應(yīng)轉(zhuǎn)變?yōu)橐子陂喿x的顯示
• 使用環(huán)境變量來(lái)保證 API 密鑰的安全

這里有一個(gè)提示：從 OpenWeather API 開(kāi)始 – 它是免費(fèi)的，有很好的文檔，非常適合學(xué)習(xí)。一旦掌握了基礎(chǔ)知識(shí)，請(qǐng)嘗試添加更改溫度單位或天氣警報(bào)等功能。

這個(gè)項(xiàng)目可以幫助您從基本的 DOM 工作轉(zhuǎn)向更復(fù)雜的 JavaScript 想法。它在你的作品集中看起來(lái)也很酷！

項(xiàng)目3：?jiǎn)柎鹩螒?

問(wèn)答游戲教您關(guān)鍵的 JavaScript 概念，同時(shí)創(chuàng)造起來(lái)很有趣。您將學(xué)習(xí)如何跟蹤分?jǐn)?shù)和問(wèn)題、處理用戶操作以及使用計(jì)時(shí)器。

要構(gòu)建的主要功能：

• 提供快速反饋的多項(xiàng)選擇題
• 每個(gè)問(wèn)題或整個(gè)問(wèn)題的倒計(jì)時(shí)
• 分?jǐn)?shù)追蹤器會(huì)在您玩游戲時(shí)更新
• 結(jié)束屏幕，顯示您的結(jié)果以及再次玩的機(jī)會(huì)
• 顯示您在測(cè)驗(yàn)中取得多少成績(jī)的欄

真正的學(xué)習(xí)發(fā)生在您設(shè)置測(cè)驗(yàn)數(shù)據(jù)時(shí)。您將使用這樣的數(shù)組和對(duì)象：

const quizQuestions = [
    {
        question: "What method adds an element to the end of an array?",
        options: ["push()", "pop()", "shift()", "unshift()"],
        correct: 0
    },
    // More questions...
];

這個(gè)項(xiàng)目因其適應(yīng)性強(qiáng)而脫穎而出。從基礎(chǔ)開(kāi)始，然后添加額外的內(nèi)容，例如：

• 各種問(wèn)題類(lèi)型
• 改變得分方式的挑戰(zhàn)級(jí)別
• 快速回復(fù)可加分
• 在問(wèn)題之間移動(dòng)時(shí)平滑過(guò)渡

提示：首先構(gòu)建主要的測(cè)驗(yàn)功能，不要有任何花哨的外觀或額外的功能。一旦啟動(dòng)并運(yùn)行，就開(kāi)始添加很酷的東西。這可以讓您不會(huì)感到不知所措，并有助于保持代碼整潔。

項(xiàng)目4：個(gè)人作品集網(wǎng)站

別擔(dān)心 - 這不是通常的靜態(tài)投資組合。我們正在構(gòu)建一個(gè)實(shí)踐組合，讓您的 JavaScript 技能成為眾人矚目的焦點(diǎn)。我的意思是動(dòng)態(tài)加載的流暢動(dòng)畫(huà)內(nèi)容，以及可以讓您的作品集流行起來(lái)的元素。

我們將制作很酷的互動(dòng)內(nèi)容：

• 單擊時(shí)會(huì)翻轉(zhuǎn)并顯示詳細(xì)信息的項(xiàng)目卡片
• 滾動(dòng)時(shí)滑動(dòng)的導(dǎo)航
• 在深色和淺色主題之間切換的開(kāi)關(guān)
• 一種對(duì)項(xiàng)目進(jìn)行排序的方法
• 聯(lián)系表格（檢查您是否填寫(xiě)正確）
• 為您的內(nèi)容提供精美的加載效果

以下是項(xiàng)目排序的大概樣子：

async function getWeatherData(city) {
    const response = await fetch(`https://api.weatherapi.com/v1/forecast.json?q=${city}`);
    const data = await response.json();
    updateWeatherDisplay(data);
}

您將練習(xí)：

• 滾動(dòng)動(dòng)畫(huà)的交叉點(diǎn)觀察器
• 由 JavaScript 觸發(fā)的 CSS 轉(zhuǎn)換
• 表單驗(yàn)證和處理
• 大規(guī)模 DOM 操作
• 事件委托以獲得更好的表現(xiàn)

它的酷之處在于它是一個(gè)雙重項(xiàng)目：您學(xué)習(xí)高級(jí) JavaScript 概念并獲得一個(gè)空白的專(zhuān)業(yè)作品集來(lái)向您的潛在雇主展示。

一些提示：

• 保持簡(jiǎn)單，然后逐步增強(qiáng)
• 建立 JavaScript 的參與規(guī)則
• 添加敷衍的加載狀態(tài)
• 保持動(dòng)畫(huà)簡(jiǎn)單而有意義

這個(gè)項(xiàng)目將您所學(xué)到的所有知識(shí)結(jié)合在一起，同時(shí)引入新概念。您可以在學(xué)習(xí)新事物時(shí)不斷開(kāi)發(fā)它。

項(xiàng)目5：筆記應(yīng)用程序

這就像一切的總和。我們正在創(chuàng)建一個(gè)簡(jiǎn)單、即用型筆記應(yīng)用程序，讓您熟悉 CRUD（創(chuàng)建、讀取、更新、刪除）——大多數(shù) Web 應(yīng)用程序的基本構(gòu)建塊。

要實(shí)現(xiàn)的主要功能包括：

• 實(shí)時(shí)創(chuàng)建和編輯筆記
• 富文本格式選項(xiàng)
• 即時(shí)搜索您的筆記
• 使用標(biāo)簽組織筆記
• 將重要筆記置頂
• 打字時(shí)自動(dòng)備份

搜索功能如何工作的概述：

您將學(xué)到：

• 使用 localStorage 進(jìn)行實(shí)時(shí)數(shù)據(jù)持久化
• 去抖動(dòng)以獲得更好的性能
• 動(dòng)態(tài)內(nèi)容過(guò)濾
• 復(fù)雜的 DOM 更新
• 大規(guī)模事件處理

具有挑戰(zhàn)性（但有趣）的部分：

• 撤消/重做功能的實(shí)現(xiàn)
• 標(biāo)記支持
• 標(biāo)記功能
• 響應(yīng)式布局
• 鍵盤(pán)快捷鍵

專(zhuān)業(yè)提示：

• 首先創(chuàng)建并存儲(chǔ)簡(jiǎn)單的筆記。
• 一次僅添加一項(xiàng)功能。
• 在繼續(xù)之前徹底測(cè)試每個(gè)功能。
• 關(guān)注讓用戶興奮或煩惱的細(xì)節(jié)。

這個(gè)項(xiàng)目可以讓您未來(lái)的潛在雇主看到您作為才華橫溢的開(kāi)發(fā)人員和絕對(duì)可以構(gòu)建交互式應(yīng)用程序的人的能力。并涵蓋了整個(gè)軌跡：從基本的 DOM 操作到高級(jí)的 JavaScript 概念。

結(jié)論

這里有五個(gè)項(xiàng)目，它們肯定會(huì)教您如何通過(guò)構(gòu)建有形的東西來(lái)使用 JavaScript。重要的是要記住，會(huì)議障礙和修復(fù)錯(cuò)誤是任何學(xué)習(xí)過(guò)程的一部分。最重要的是先簡(jiǎn)單，然后逐漸復(fù)雜。

不要覺(jué)得您必須立即添加每個(gè)項(xiàng)目功能，先建立并運(yùn)行基礎(chǔ)知識(shí)，然后在學(xué)習(xí)過(guò)程中進(jìn)一步開(kāi)發(fā)每個(gè)項(xiàng)目。在不知不覺(jué)中，您將擁有一個(gè)可靠的 JavaScript 項(xiàng)目組合，以及展示它的技能。

選擇一個(gè)項(xiàng)目并投入其中。未來(lái)的自己會(huì)很高興你今天就開(kāi)始了！

以上是更快學(xué)習(xí) JavaScript 的項(xiàng)目（即使您是初學(xué)者）的詳細(xì)內(nèi)容。更多信息請(qǐng)關(guān)注PHP中文網(wǎng)其他相關(guān)文章！