JavaScript building blocks

在本單元中,我們繼續介紹所有 JavaScript 的關鍵基本功能,將注意力轉向常見的代碼塊類型,如條件語句,循環,函數和事件。 你已經在課程中看到了這些東西,但只是順便說一下 - 在這裡我們將明確地討論它。

先決條件

開始這個模組之前,你應該已經熟悉 HTMLCSS 的基礎知識了,你也應該閱讀完前一個模組 - JavaScript 入門 - 的內容了。

備註:假如你正使用平板、電腦或任何無法讓你可以建立檔案的裝置時,你可以試著透過線上程式碼工具(像是 JSBinGlitch)測試文章的測試碼。

指南

在代碼中做出決定 - 條件

在任何編程語言中,代碼都需要根據不同的輸入做出決策並相應地執行操作。 例如,在遊戲中,如果玩家的生命數量為 0,則遊戲結束。 在天氣應用程序中,如果在早上查看,則顯示日出圖形; 如果是夜晚,則顯示星星和月亮。 在本文中,我們將探討條件結構如何在 JavaScript 中工作。

程式碼迴圈

有時候你需要超過一行的程式碼完成一項任務,舉例來說:尋找一個擁有許多名字的清單。透過編輯程式,迴圈可以幫助你完美的完成這項工作,在本文中,我們將探討迴圈的結構如何在 JavaScript 中運作。

函式 — 可重複使用的程式碼區塊

撰寫程式的另一個基本概念是函式 (function),它允許你在一個定義好的區塊內,存放一些程式碼。定義好的函式後,無論你需要在一個單一簡短的指令列用到它,或者是重複使用相同的片段程式碼,你都可以不段重複地呼叫這些函式執行對應的內容。在本文中,我們將探索函式的基本概念,像是基本語法、如何定義函式內容、以及函式將會使用的參數。

建立自己的函式

前面許多文章已經提到大部分的基本理論基礎了,在本文中,我們將分享一個實際的經驗,你將學習到關於打造自定義函式的實務範例。透過這樣的學習方式,我們也進一步解釋一些函式相關的細節知識。

函式回傳值

這堂課程中最後一個想要說明的基本概念就是函式的回傳值,一些函式執行完畢後,不會回傳一個數值;但有些函式則會。理解這些函式的回傳值是重要的概念,本文中,你將學會如何在自定義的函式中,回傳有用的數值提供給其他函式使用。

事件介紹

事件代表你所撰寫的程式在一套系統內所產生的動作或發生的事情,舉例來說:假如一位使用者在網頁點擊一個按鈕時,你可能想要讓使用者點擊該按鈕後,在畫面呈現一個訊息方塊。在本課程最後一篇文章內,我們將討論一些與事件相關的重要概念、以及這些事件在瀏覽器中,如何呈現給使用者。

評量

下方的試題將會測驗你對於上述幾項概念的 JavaScript 基本知識。

圖庫

我們已經看過許多 JavaScript 的基礎程式碼,我們將測驗你關於迴圈、函式、條件式迴圈與事件等相關的知識,測驗的方式是透過建立一個由 JavaScript 打造而成的圖庫應用程式。