阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈

透過 DOM 專案提升您的前端技能:新手開發人員的遊樂場

透過DOM 專案改變您的學習體驗!深入研究 20 多個使用 HTML、CSS 和 JavaScript 建構的實用專案。非常適合新手和經驗豐富的開發人員,您會發現一些可以挑戰和激勵您的東西。

以下是 DOM 專案的與眾不同之處:

  • 邊做邊學: DOM 專案直接深入前端開發的實際面向。您將透過建立實際專案來學習,鞏固對核心概念的理解。

  • 漸進式學習: DOM 專案提供了按難度分類的精選專案。從適合初學者的專案開始,例如“計數器”或“滾動動畫”,並逐漸進展到更高級的專案,例如“高級待辦事項”或“REST 用戶端”。

  • 開源與協作: DOM 專案的美妙之處在於其開源特性。您不僅可以從現有專案中學習,還可以將您的創作貢獻給該平台,從而培養一個充滿活力的學習者和開發者社群。

  • 輕鬆設定:設定 DOM 專案輕而易舉。不涉及複雜的安裝過程。只需分叉存儲庫,將其克隆到本地計算機,然後在瀏覽器中打開 index.html 文件。您已準備好開始您的程式設計冒險!

深入研究專案:

DOM Projects擁有20 多個專案,每個專案都針對特定技能和概念精心設計。以下是一些激發您興趣的詳細範例:

計數器

櫃檯

描述:一個簡單的計數器專案,允許使用者增加和減少螢幕上顯示的數字。它還包括一個用於將計數器重置為零的按鈕。

學習理念:

  • DOM 操作:了解如何使用 JavaScript 存取和修改 HTML 元素。

  • 事件處理:了解如何擷取使用者互動(在本例中為點擊)並使用 JavaScript 觸發特定操作。

  • 基本 JavaScript 函數:探索如何寫函數來執行遞增、遞減和重置計數器值等任務。

爸爸笑話

爸爸笑話

描述:該專案使用 JavaScript 中的非同步技術從外部 API 獲取隨機爸爸笑話。一旦檢索到,笑話就會顯示在網頁上供您娛樂。

學習理念:

  • 非同步程式設計:了解如何處理需要時間才能完成的操作(例如從 API 取得資料)而不阻塞 JavaScript 中的主執行緒。

  • Fetch API:了解如何使用內建瀏覽器功能向 API 發出 HTTP 請求並擷取資料。

  • 使用 API:探索如何與外部 API 互動以存取這些服務提供的資料或功能。

表單驗證

表單驗證

描述:此專案示範了使用 JavaScript 進行客戶端表單驗證。它在提交之前驗證表單中的使用者輸入。此外,驗證成功後,它會顯示成功訊息並允許使用者以唯讀格式預覽提交的資料。

學習理念:

  • 表單驗證:了解如何使用 JavaScript 在提交之前驗證表單中的使用者輸入。這有助於確保資料完整性並防止處理無效資料。

  • DOM 操作:了解如何根據驗證結果存取和修改表單元素(例如顯示錯誤訊息或停用輸入欄位)。

  • 事件處理:使用 JavaScript 擷取表單提交事件並觸發驗證邏輯。

隨機用戶

隨機用戶

描述:此專案利用 API 產生隨機使用者資訊。它會取得姓名、電子郵件、頭像等資料,並將其顯示在網頁上,模擬隨機使用者設定檔。

學習理念:

  • 非同步程式設計:與專案 2 (DadJokes) 類似,此專案強化了 JavaScript 中的非同步操作。

  • Fetch API:繼續練習使用工具向 API 發出 HTTP 請求並檢索資料。

  • 使用 API:進一步探索與外部 API 互動以存取特定功能或資料。

摩斯電碼翻譯器

摩斯電碼翻譯器

描述:此專案允許使用者在摩斯電碼和文字之間進行翻譯。使用者可以鍵入文字並查看對應的摩斯電碼,也可以輸入摩斯電碼並查看翻譯後的文字。

學習理念

  • 字串操作:了解如何在 JavaScript 中使用字串,包括拆分、連接和字元操作的函數,這對於摩斯電碼翻譯至關重要。

  • 條件語句:學習如何在 JavaScript 中使用條件語句(if/else)來實現基於使用者輸入(文字或摩斯電碼)的翻譯邏輯。

基本計算機

基本計算機

描述:該專案使用 JavaScript 建立一個最基本的計算器應用程式。它允許使用者執行基本算術運算,例如加法、減法、乘法和除法。使用者可以輸入數字並使用螢幕上的按鈕選擇所需的操作。計算器顯示計算結果。

學習理念

  • 事件處理:與先前的專案類似,此專案練習捕捉使用者對計算器按鈕的點擊並觸發操作(更新計算和結果)。

  • DOM 操作:示範如何使用 JavaScript 更新計算器介面中顯示的數字和結果。

  • JavaScript 中的基本數學運算:探索使用 JavaScript 內建的數學運算子和函數來執行加法、減法、乘法和除法等計算。

普通計算機

普通計算機

描述:該專案建立在基本計算器的基礎上,為標準數學計算提供更全面的使用者體驗。它適合熟悉基本計算器功能的使用者。

學習理念:

  • 基於現有專案:示範對基本計算器概念的擴展,以建立更用戶友好且功能豐富的計算器。

  • 增強的使用者互動:引入改進使用者與計算器互動的技術,例如處理小數輸入或合併記憶體功能。

科學計算機

科學計算機

描述:此專案透過提供三角函數(正弦、餘弦、正切)、對數和指數等科學函數,將計算器功能提升到一個新的水平。它迎合需要高級數學計算的用戶。

學習理念:

  • 建立複雜的應用程式:示範如何建立具有先進科學功能的更複雜的應用程式。

  • JavaScript 中的數學函數:介紹使用 JavaScript 內建的數學函數進行高階計算

簡單的一切應用程式

簡單的一切應用程式

描述:該專案是一個基本的待辦事項清單應用程式。使用者可以新增任務、將其標記為已完成以及從清單中刪除它們。它演示了管理和追蹤任務。

**學習理念:

  • DOM 操作:此專案強化了使用 JavaScript 動態新增、刪除和修改 HTML 中的清單專案的實務。

  • 陣列:它演示了在 JavaScript 中使用陣列儲存和管理任務資料。

  • 使用者介面更新:探索如何根據使用者互動更新待辦事項清單的視覺表示(新增、完成、刪除任務)。

個人資料表和卡片

個人資料表和卡片

描述:此專案允許使用者使用表單建立動態個人資料卡。用戶可以輸入他們的訊息,提交後,將建立一個新的個人資料卡並顯示在頁面上。它還包括刪除現有個人資料卡的功能。

學習理念:

  • 表單處理:該專案基於表單驗證(專案 3)的概念,重點關注捕獲表單資料並將其用於進一步的操作。

  • DOM 建立和操作:它超越了基本的 DOM 操作,根據使用者輸入動態建立新的 HTML 元素(個人資料卡)。

  • 事件處理:繼續練習捕獲使用者與表單和刪除按鈕的互動並觸發適當的操作。

PC元件過濾

PC元件過濾

描述:該專案允許使用者根據他們的選擇過濾電腦部件。使用者可以從各種選項中進行選擇,例如 CPU 品牌、RAM 大小、顯示卡類型等,顯示的元件清單將動態更新以反映所選的篩選器。

學習理念:

  • DOM 操作:與先前的專案類似,此專案實踐根據使用者選擇動態更新顯示的元件清單。

  • 陣列和資料過濾:探索使用陣列來存儲計算機部件資料,並在 JavaScript 中實現過濾邏輯以匹配用戶選擇。

  • 使用者介面更新:重點是根據應用的過濾器更新元件列表的視覺表示。

天氣應用程式

天氣應用程式

描述:該專案是一個天氣應用程式,允許用戶透過城市名稱搜尋當前的天氣資訊。它利用外部天氣 API 來獲取資料並在螢幕上顯示溫度、濕度和天氣狀況等詳細資訊。

學習理念:

  • 非同步程式設計:與 DadJokes(專案 2)等專案類似,此專案強化了處理非同步操作以獲取天氣資料的概念。

  • Fetch API:繼續練習使用工具向 API 發出 HTTP 請求並檢索天氣資料。

  • 使用 API:進一步探索與外部 API 互動以存取天氣資訊。

感言滑塊

感言滑塊

描述:此專案建立一個具有滑桿功能的推薦部分。它顯示使用者的引言或推薦,使用者可以使用滑桿控制來瀏覽它們。

學習理念:

  • DOM 操作:示範如何根據滑桿位置操作建議元素的可見性。

  • 事件處理:捕捉使用者與滑桿控制項的互動並觸發滑動動畫。

滾動動畫

滾動動畫

描述:此專案包含向下捲動頁面時觸發的動畫。當使用者滾動時,網頁上的不同元素會變成動畫,增加視覺趣味和互動性。

學習理念:

  • CSS 動畫:探索使用 CSS 動畫來建立根據滾動位置啟動的視覺效果。

  • 用於捲動事件的 JavaScript:介紹使用 JavaScript 來偵測滾動事件並相應地觸發動畫。

搜尋字段顯示

搜尋字段顯示

描述:此專案利用動畫來增強使用者體驗。它會建立一個搜尋字段,在使用者互動(例如,點擊按鈕)時透過動畫顯示自身。

學習理念:

  • CSS 動畫:介紹使用 CSS 動畫為搜尋欄位顯示建立動態視覺效果。

  • 事件處理:涵蓋捕獲使用者互動(例如按鈕單擊)並使用 JavaScript 觸發動畫。

問題清單及進展

問題清單及進展

描述:此專案示範了 JavaScript 中常見的 DOM 操作技術。它具有問題清單和進度指示器,進度指示器會隨著使用者回答問題而更新。

學習理念:

  • DOM 操作:此專案強調根據使用者與問題的互動來操作進度指示器等元素。

  • 事件處理:捕捉使用者與問題元素的互動並觸發更新進度指示器等操作。

莫代爾

莫代爾

描述:該專案會建立一個模式窗口,它是一個覆蓋頁面主要內容的彈出元素。它通常用於登入表單、註冊提示或警報訊息等內容。

學習理念:

  • DOM 操作:重點是根據使用者互動顯示和隱藏模式視窗元素。

  • 事件處理:捕捉觸發元素和模式的關閉按鈕上的點擊以控制其可見性。

高級待辦事項

高級待辦事項

描述:該專案基於簡單的待辦事項應用程式(專案 8)建置,提供過濾、編輯和刪除任務等高級功能。使用者可以對任務進行分類、編輯現有任務以及從清單中刪除不需要的任務。

學習理念:

  • 基於現有專案:與科學計算器(專案 7)類似,該專案演示了對基本概念(待辦事項清單)的擴展以建立更高級的應用程式。

  • 使用者介面更新:擴展了更新待辦事項清單的概念,包括過濾、編輯任務內容和刪除任務等功能。

復古計算器

復古計算器

描述:該專案實現了經典的計算器設計,並支援實體鍵盤輸入。它允許用戶使用類似於傳統計算器的佈局輸入數字並執行計算。

學習理念:

  • 事件處理:與其他專案類似,該專案側重於捕獲用戶交互,但在本例中,它包括處理計算器按鈕上的點擊和鍵盤上的按鍵。

  • DOM 操作:根據使用者輸入和計算結果更新計算器顯示。

  • 物件導向程式設計:此專案引入了 JavaScript 中物件導向程式設計 (OOP) 的概念,用於建立更模組化且可重複使用的計算器功能。

簡單的測驗應用程式

簡單的測驗應用程式

描述:該專案建立一個簡單的測驗應用程式,用戶可以在其中回答問題並查看結果。它包括每個問題的計時器,以加入時間壓力元素。

學習理念:

  • DOM 操作:更新測驗介面以顯示問題、處理答案選擇並顯示最終結果

進階測驗應用程式

進階測驗應用程式

描述:該專案建立在簡單的測驗應用程式的基礎上,提供更多自訂選項。使用者可以在開始測驗之前設定問題數量、選擇主題並定義難度等級。

學習理念:

  • 基於現有專案:與其他專案(科學計算器、高級待辦事項清單)類似,該專案演示了透過附加功能擴展基本概念。

  • 使用者輸入驗證:它引入了驗證自訂選項的使用者輸入的概念(例如,確保選擇有效數量的問題)。

  • 條件語句:在此專案中發揮更重要的作用,因為 JavaScript 邏輯需要根據使用者定義的參數來調整測驗。

採取下一步:

準備好開始您的前端開發之旅了嗎?以下是如何開始使用 DOM 專案:

  1. 造訪 GitHub 上的 DOM 專案儲存庫: https://github.com/Jisan-mia/dom-projects

  2. 瀏覽專案清單並選擇一個符合您的技能水平和興趣的專案。

  3. 請按照設定說明進行操作並在瀏覽器中開啟專案。

  4. 深入研究程式碼、實驗並學習!

DOM 專案中的每個專案都可以讓您練習編碼技能,並幫助您理解前端開發中的關鍵概念。無論您是剛起步的初學者,還是希望提高技能的經驗豐富的開發人員,DOM 專案都能滿足每個人的需求。

請記住,最好的學習方法是實踐。所以,捲起袖子,選擇一個專案,然後開始編碼吧!快樂學習!


原文出處:https://dev.to/jisan/20-dom-projects-your-frontend-breakthrough-1h8a


共有 0 則留言


精選技術文章翻譯,幫助開發者持續吸收新知。

阿川私房教材:學程式,拿 offer!

63 個專案實戰,直接上手!
無需補習,按步驟打造你的面試作品。

立即解鎖你的轉職秘笈