JavaScript入門練習 (重點如同其他高階語言)

「所有能用 JavaScript 編寫的程式，最終都會被寫成 JavaScript。（Any application that can be written in JavaScript, will eventually be written in JavaScript.）」





若你還對JavaScript存在著錯誤的印象，以為這是個不怎樣的程式語言，那你就錯了! 或許你應該先看看這篇「程式語言那麼多，為什麼 Google 偏愛 JS？」

學任何一種程式語言，順序都是差不多的，從電腦五大部門來看，輸出與輸入都是最先要會的。而在JavaScript輸出方面就是先學：

• alert() : 雖然這個函式只是跳出對話框顯示訊息，但設計手機App時也常用到，譬如提醒使用者網路沒開通所以無法上網。更重要的是，JavaScript的偵錯通常都要靠這招，確認程式執行到哪一行的中間執行結果顯示出來看看。

在JavaScript輸入方面，可以先學簡單的兩個函式：

• confirm()、prompt() : 是跳出對話框等待使用者按任意鍵或輸入資料，這也是在設計手機App會用到的，譬如使用者要離開App前詢問其是否確定要離開。

學會了基本輸入輸出，瞭解程式可以如何呈現資料與接受資料，那就可以開始學習一些基礎語法，像是：

• 變數、陣列、算數運算子、比較運算子、條件判斷、函式等(這些語法學位之後就可以舉例把前一單元的相片切換瀏覽功能以陣列改寫成更通用的版本)。再搭配前述用prompt()進行輸入，其實自己就可以練習寫寫看計算身體質量指數BMI這類的程式了。或者，也可以練習判斷閏平年而處理跨越日期的程式邏輯，而這個練習需要懂得語法有Date物件(example)、getDate() Method、getMonth() Method、getFullYear() Method等。

• 至於迴圈概念也與其他高階語言沒什麼差別，就是for迴圈與while迴圈語法。舉例來說，可以練習設計一般網頁常見的主選單，這樣的程式大致上就是搭配陣列的使用，以表格語法安排選項顯示位置，再以onmouseover、onmouseout事件進行選項的背景色改變，就可做出選單效果了。當然，如果還要做出下拉子選單，還得要有CSS的positioning與overlapping的概念。如此搭配迴圈與陣列來產生選單顯示之HTML語法，可以讓選單顯示內容是依據陣列項目增刪自動調整而無需改寫程式碼。

• 有些情況要設計重複執行的動作不能用迴圈概念來寫，因為用迴圈來寫就是讓程式在那一段迴圈程式裡面打轉，這樣就沒辦法做其他的事情。所以，有一種設計重複執行動作的概念是利用定時觸發的方式，這會用到SetTimeout、SetInterval這兩個函式設定觸發動作的時間間隔，而在這間隔還能執行其他動作。

在同一個HTML的函式參數傳遞是很簡單的，但如果是從一個HTML執行另一個HTML且必須傳遞參數的話，那要怎麼做呢？

• 首先，要能夠取得網址列的內容，那就是window.location.href。而且網址內的特殊符號與中文字碼在傳遞前後需要做一些處理，也就是decodeURIComponent()與encodeURIComponent()。
• 其次，應該瞭解什麼是正規表示式(Regular Expressions)?
• 最後，就是參考這個解析網址參數的例子(jsfiddle) (jsbin)，將這個範例程式複製到自己電腦上編輯存檔，然後在執行此HTML的網址最後加上 "?XXX=你要傳遞的字串" 。

對於初學者來說，下列顯示日曆的程式是我覺得可以逐步導引學生把程式越寫越好的一個例子：

• 第一個版本，就只是基本日曆樣式的顯示(jsfiddle) (jsbin)。
• 第二版(jsfiddle) (jsbin)將變數宣告為整體變數，加上兩個超連結可以切換顯示前一天或後一天。
• 第三版(jsfiddle) (jsbin)利用mod運算子來正確計算出星期幾。
• 第四版(jsfiddle) (jsbin)利用陣列來顯示中文的星期日、一、二、三、四、五、六。
• 第五版(jsfiddle) (jsbin)就要解決跨月的問題囉，但是先解決後一天(+1)的跨月吧。這裡要特別把大部分學生以一月、二月、三月...逐步判斷下去的例子先拿出來說明為何效率不佳，然後才能欣賞這個版本的漂亮之處。
• 第六版就再解決前一天(-1)的跨月吧。(留做學生練習，但會發現若依第五版的條件判斷概念不容易寫出簡潔俐落的程式碼。)
• 第七版(jsfiddle) (jsbin)再用一個陣列來做跨月處理的最佳化。
• 第八版套用style與css囉