I'm Beauti

專題練習 15-1 學習重點：
1) 下載範例程式
2) 將程式拆分成：index.html、style.css 及 game.js 三個部分

講解少許的 HTML 及 CSS，供後續的專題使用。

說明如何找尋網頁上的元素。

教導 JavaScript 裡的回呼來處理點擊事件

回呼函式在 JavaScript 用在網頁前端時被非常頻繁的使用。

何謂「callback」？ 舉例：

上課鐘響後，老師還沒進教室前，你在桌子下面偷打電動。

並請同學在老師進教室時叫你。這就是 callback。

當然，你的同學可以主動叫你 ; 或者你請同學叫你。

許多人會把 this 誤認為包含目標函式的那個物件，其實這是錯的，
JavaScript 函式裡的 this 必須在程式執行的時候才知道是什麼。
大家可以把「this」想像成函式中的主角。

「可視範圍」：變數可以在哪裡被找到

「執行環境」：程式執行的時候到哪裡找變數。

只有「全域」、「函式」可以定義「可視範圍」的邊界。

 此筆記以「ECMAScript 5」為主，

「ECMAScript 6」對於「可視範圍」有新的標準，會再找時間補上筆記。

函式（function) 是 JavaScript 程式碼區塊，僅定義一次， 但可以被多次執行或調用（invoked)。 
使用 function，可避免重複寫一樣的程式碼， 是模組化程式架構時很重要的一個工具。

程式語言中的物件(object)通常會包含:
屬性 (properties)：代表這個物件所擁有的資料。
方法 (method)：也稱作函式，讓物件可以執行工作，也就是這個物件的功能。

宣告物件的方式：const obj = {};   // 一個空的物件

• Data Structure : 資料的結合體
• Array 使用 index 來管理
• 陣列(Array) 條狀(1維)容器
• 宣告陣列的方式：使用 [ ]

迴圈，用於重複做某些事情。
JavaScript 有四種迴圈述句：while、do/while、for 及 for/in 。  

條件語句用於基於不同的條件來執行不同的動作 :
 if 語句 :  只有當指定條件為真時，使用該語句來執行代碼
 if ... else語句 :  當條件為真時執行代碼，當條件為假時執行其他代碼
 if ... else if .... else語句 : 使用該語句來選擇多個代碼塊之一來執行