Pages

Subscribe:

2013年9月13日 星期五

Javascript同一般高階語言的學習順序


學任何一種程式語言,順序都是差不多的,從電腦五大部門來看,輸出與輸入都是最先要會的。而在JavaScript輸出方面就是先學:
  • alert() : 雖然這個函式只是跳出對話框顯示訊息,但設計手機App時也常用到,譬如提醒使用者網路沒開通所以無法上網。更重要的是,JavaScript的偵錯通常都要靠這招,確認程式執行到哪一行的中間執行結果顯示出來看看。


在JavaScript輸入方面,可以先學簡單的兩個函式:
  • confirm()prompt() : 是跳出對話框等待使用者按任意鍵或輸入資料,這也是在設計手機App會用到的,譬如使用者要離開App前詢問其是否確定要離開。


學會了基本輸入輸出,瞭解程式可以如何呈現資料與接受資料,那就可以開始學習一些基礎語法,像是:
  • 至於迴圈概念也與其他高階語言沒什麼差別,就是for迴圈while迴圈語法。舉例來說,可以練習設計一般網頁常見的主選單,這樣的程式大致上就是搭配陣列的使用,以表格語法安排選項顯示位置,再以onmouseoveronmouseout事件進行選項的背景色改變,就可做出選單效果了。當然,如果還要做出下拉子選單,還得要有CSS的positioning與overlapping的概念。如此搭配迴圈與陣列來產生選單顯示之HTML語法,可以讓選單顯示內容是依據陣列項目增刪自動調整而無需改寫程式碼。
  • 有些情況要設計重複執行的動作不能用迴圈概念來寫,因為用迴圈來寫就是讓程式在那一段迴圈程式裡面打轉,這樣就沒辦法做其他的事情。所以,有一種設計重複執行動作的概念是利用定時觸發的方式,這會用到SetTimeout、SetInterval這兩個函式設定觸發動作的時間間隔,而在這間隔還能執行其他動作。


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

沒有留言:

張貼留言