4-2. 認識 JavaScript 程式語言
什麼是JavaScript
JavaScript 是一種高階程式語言，通過編釋執行，是一門動態型別、物件導向的直譯語言。
最初是 Netscape 公司在 Netscape Navigator 2.0 產品上設計並實現，原名LiveScript。
1997年已經由 ECMA（歐洲電腦製造商協會）通過 ECMAScript 實現語言的標準化。
它被世界上的絕大多數網站所使用，也被世界主流瀏覽器（Chrome、IE、FireFox、Safari、Opera）支援。
JavaScript 程式由 ASCII 字元（純文字）構成，可利用記事本等文書或程式的編輯軟體來開發完成。
一般程式語言必須經過編譯的手續才能執行程式，但 JavaScript 並不需要經過編譯，
只要透過適當的直譯器（browser網頁瀏覽器）即可即時轉譯執行。
※JavaScript 並不是 Java！ 也不是 JScript！
學習JS前加強：HTML、CSS
學習JS的參考網站：w3schools、runoob
留意 JS 版本：ECMAScript 定義標準化，2015「ES6」、2016「ES7」、2017「ES8」、2018「ES9」、2019「ES10」。
JS 程式寫在哪裡？
JavaScrip的程式碼必須被包在<script>及</script>標籤之間。
（一） 寫在 </head> 之前，
好處是可以保證在載入 <body> 內容之前已經載入 JavaScript 程式。
但如果不是為了確保載入內容之前得先載入JS執行，建議不放在這個位置。
（二） 寫在 </body> 之前 (也就是 body 區內的最後)，
當你要用 JavaScript 控制網頁元素物件時，JavaScript 可以寫在物件的後方，確保物件已存在。
大多數的 JS 程式第一優先考量的撰寫位置，建議在這個位置。
（三） 將 JavaScript 獨立儲存成 xxxx.js 檔案
在 xxxx.html 檔案中，在 </head> 之前或是在 </body> 之前，撰寫以下載入 JS 檔案的語法，
<script src="路徑/xxxx.js"></script> ,如果還有其他的 JavaScript 程式，請留意前後執行的順序。
第一個 JS 練習
JS 程式語法的 3 ＋ 3 ＋ Fn
基礎程式語法的組成，不外乎 3 ＋ 3 ＋ function。
第 1 個「３」 |
|
第 2 個「３」 |
|
「Fn」 |
自定函式 function |
程式的記憶能力：記憶體基本變數的使用
參考介紹：w3schools(英文版) 或 runoob(簡中版)
JavaScript 宣告變數的 4 種方式：
| 1、Automatically | 不使用關鍵字宣告, 直接自動地使用變數(不嚴謹, 不建議) |
| 2、使用 var | 傳統方式, 較不嚴謹, 可重複定義, 後定義的覆蓋先定義的 |
| 3、使用 let | 2015年ES6版本新增, 較嚴謹, 不能重複定義相同的變數名稱 |
| 4、使用 const | 2015年ES6版本新增, 定義常數，常數是不能再被改變的值 |
重要運算符號的比較：
| 一個等號 | 為「指派 / 指定」 |
| 二個等號 | 不判斷型別只判斷內容值的「等於」 |
| 三個等號 | 必須同時判斷型別與內容值的「等於」 |
認識運算符號參考介紹： w3schools(英文版) 或 runoob(簡中版)
範例練習：
進階的記憶能力：Array 陣列/數組 的使用
程式的重複能力：迴圈的使用
重複能力的迴圈使用方式有多種，建議先參考以下連結介紹，後續實例再練習。
| Class | Title | Link | Description |
|---|---|---|---|
| Not Timing | for | 英文版、 簡中版 | 計數型迴圈 |
| while do...while |
英文版、 簡中版 | 非計數型迴圈 | |
| Timing | setTimeout | 英文版、 簡中版 | 指定延遲時間後執行處理程序一次 |
| setInterval | 英文版、 簡中版 | 每隔指定的延遲時間後執行處理程序 |
範例小練習：for 迴圈
範例小練習：while 迴圈
範例小練習：do...while 迴圈
while 與 do...while 的差別
while( 判斷條件 ){ 執行的工作; }
先判斷條件, 如果條件不成立, { } 內的工作可能一次也沒執行。
do { 執行的工作; } while( 判斷條件 );
會先執行一次, 再由while判斷條件, 條件成立再進行do。
程式的 method 方法
object.method(value); 物件.方法（值）
object 是指物件，
可以是視窗(window)、文件(document)、變數(var)、日期/時間(date/time)、數學運算(math)、
字串(string)、圖片(picture)、影片(video)、聲音(sound)、表單(form)...等。
method 是指動作方法，
可以是視窗的開啟(open)、視窗的關閉(close)、文件的撰寫(write)、日期時間的取得子元素(get...) ...等。
value 是指傳入動作方法的值，例如：字串、數值、變數...等。
範例介紹：
DOM 網頁中元素物件的選取方法 Method
程式的 property 屬性
object.property = property value; 物件.屬性＝屬性值
object 是指物件。
property 是指屬性，例如：document.bgColor，bgColor是document的屬性
value 是指改變屬性的值，例如：document.bgColor = "black"，black就是改變文件背景顏色為黑色。
範例介紹：
程式的 event 事件
object.event = function(){ ... }; 物件.事件＝當事件發生時執行的工作寫在function函式中
object 是指物件。
event 是指事件，例如：onload, onclick, onmouseover, onchange。
function(){ ... }，是指當事件發生時要執行的工作寫在自定函式 function函式的 { } 中。
範例介紹：
function 的使用
需要重複執行的工作
當工作需要重複執行時，將工作程序的撰寫包在 function 的 { } 內，接著再重複呼叫執行。
常搭配 setInterval() 或 setTimeout() 函式重複呼叫執行 function。
需要先準備好但不是馬上執行的程式
當工作預想會執行但不是馬上執行的程式，撰寫包在 function 的 { } 內，需要執行時再呼叫 function 執行。
例如事件的註冊，例如滑鼠的滑入工作、滑鼠的點選工作....，當滑鼠滑入或點選時再呼叫 function 執行。
下載練習範例（請按右鍵再選【另存連結...】）
查看練習範例的結果
範例介紹：
第 1 階段： 顯示JS預設時間格式
第 2 階段： 隨時顯示目前時間
第 3 階段： 只有個位數時, 加以調整前面補 0
第 4 階段： 加以調整星期的顯示
第 5 階段： 控制 停止時間 / 啟動時間
第 6 階段： 倒數計時
