files/zh-tw/learn/javascript/building_blocks/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

---
title: JavaScript building blocks
slug: Learn/JavaScript/Building_blocks
tags:
  - JavaScript
  - TopicStub
  - 事件
  - 入門者
  - 函式
  - 指南
  - 模組
  - 評量
  - 迴圈
translation_of: Learn/JavaScript/Building_blocks
---
<div>{{LearnSidebar}}</div>

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

<h2 id="先決條件">先決條件</h2>

<p>開始這個模組之前，你應該已經熟悉 <a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">HTML</a> 和 <a href="/en-US/docs/Learn/CSS/Introduction_to_CSS">CSS</a> 的基礎知識了，你也應該閱讀完前一個模組 - <a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript 入門</a> - 的內容了。</p>

<div class="note">
<p><strong>注意</strong>: 假如你正使用平板、電腦或任何無法讓你可以建立檔案的裝置時，你可以試著透過線上程式碼工具 (像是 <a href="http://jsbin.com/">JSBin</a> 或 <a href="https://thimble.mozilla.org/">Thimble</a>) 測試文章的測試碼。</p>
</div>

<h2 id="指南">指南</h2>

<dl>
 <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks/%E6%A2%9D%E4%BB%B6">在代碼中做出決定 - 條件</a></dt>
 <dd>在任何編程語言中，代碼都需要根據不同的輸入做出決策並相應地執行操作。 例如，在遊戲中，如果玩家的生命數量為0，則遊戲結束。 在天氣應用程序中，如果在早上查看，則顯示日出圖形; 如果是夜晚，則顯示星星和月亮。 在本文中，我們將探討條件結構如何在JavaScript中工作。</dd>
 <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks/Looping_code" rel="nofollow">程式碼迴圈</a></dt>
 <dd>有時候你需要超過一行的程式碼完成一項任務，舉例來說：尋找一個擁有許多名字的清單。透過編輯程式，迴圈可以幫助你完美的完成這項工作，在本文中，我們將探討迴圈的結構如何在 JavaScript 中運作。</dd>
 <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks/Functions" rel="nofollow">函式 — 可重複使用的程式碼區塊</a></dt>
 <dd>撰寫程式的另一個基本概念是函式 (function)，它允許你在一個定義好的區塊內，存放一些程式碼。定義好的函式後，無論你需要在一個單一簡短的指令列用到它，或者是重複使用相同的片段程式碼，你都可以不段重複地呼叫這些函式執行對應的內容。在本文中，我們將探索函式的基本概念，像是基本語法、如何定義函式內容、以及函式將會使用的參數。</dd>
 <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks/Build_your_own_function" rel="nofollow">建立自己的函式</a></dt>
 <dd>前面許多文章已經提到大部分的基本理論基礎了，在本文中，我們將分享一個實際的經驗，你將學習到關於打造自定義函式的實務範例。透過這樣的學習方式，我們也進一步解釋一些函式相關的細節知識。</dd>
 <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks/Return_values" rel="nofollow">函式回傳值</a></dt>
 <dd>這堂課程中最後一個想要說明的基本概念就是函式的回傳值，一些函式執行完畢後，不會回傳一個數值；但有些函式則會。理解這些函式的回傳值是重要的概念，本文中，你將學會如何在自定義的函式中，回傳有用的數值提供給其他函式使用。</dd>
 <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks/Events" rel="nofollow">事件介紹</a></dt>
 <dd>事件代表你所撰寫的程式在一套系統內所產生的動作或發生的事情，舉例來說：假如一位使用者在網頁點擊一個按鈕時，你可能想要讓使用者點擊該按鈕後，在畫面呈現一個訊息方塊。在本課程最後一篇文章內，我們將討論一些與事件相關的重要概念、以及這些事件在瀏覽器中，如何呈現給使用者。</dd>
</dl>

<h2 id="評量">評量</h2>

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

<dl>
 <dt><a href="https://developer.mozilla.org/zh-TW/docs/Learn/JavaScript/Building_blocks/Image_gallery">圖庫</a></dt>
 <dd>我們已經看過許多 JavaScript 的基礎程式碼，我們將測驗你關於迴圈、函式、條件式迴圈與事件等相關的知識，測驗的方式是透過建立一個由 JavaScript 打造而成的圖庫應用程式。</dd>
</dl>