MIS2000Lab.的「HTML5 認證考試，從零開始」#8-- JavaScript入門 (II)

DAY 8

MIS2000Lab.的「HTML5 認證考試，從零開始」--菜鳥的30天馬拉松系列第 8 篇

javascript html 網頁設計入門鐵人賽網頁程式 html5 初學者 mis2000lab html

mis2000lab

2014-10-03 00:52:51

3120 瀏覽

分享至

上一篇文章 http://ithelp.ithome.com.tw/question/10157539
是很粗淺的入門

如果真要學習 JavaScript
手邊一定要有書本，隨時備查！

不可能用這種網路上的簡單文章，就能學會（更別說精通了！不可能）

這是初學者最容易犯的「迷思」：
*****************************************
經典好文 -- 讀書與上課
http://www.dotblogs.com.tw/billchung/archive/2010/11/28/19767.aspx

或許是網際網路太發達且資訊已經多到爆炸，
也許有人覺得要對一門電腦技術精通只要上網查查資料、看看別人的部落格就有機會達成這樣的目標。

我不否認應該有少數這樣具有特別天份的人，這類的人多半對於知識的組織與吸收是有獨到之處，
不過這也意味著大部份的人走這條路通常都會進到死胡同，
很快地將會遭遇許多技術瓶頸的挑戰。....詳見全文
*****************************************

本文開始：

====JavaScript變數的命名規則：====

必須是「英文字」或是「底線（ _符號）」作為開頭字元。
變數名稱的英文大小寫有差別，不要混用。
不要使用類似的字來命名，例如valueOfAPPLE與ValueOfApple這兩個變數不同（大小寫有差別），但意思容易混淆。
良好的命名有助你將來為程式除錯，有意義的名字並用”大寫子母”區隔兩個單字（一目了然）。

==== 資料型態 規則：====

不像 .NET的C#或是VB語法有那麼多資料型態，JavaScript比較簡單，除了var之外只有三種資料型態。
 String（字串）
 Number（數值）
 Boolean（布林）

要提醒您：

明確的定義有助於將來的除錯，不然的話，JavaScript幫您（自動）轉換資料型態有可能出現「您想不到」的成果。
定義了變數卻”不”給予預設值，可能會造成「undefined（未定義）」錯誤訊息。
您可以設定這個變數為null。但請您認真釐清null的定義，null表示這個值「不存在」而不是「沒有給予預設值」

（微軟認證教材的原文說明：Setting a variable to null indicates that a value does not exist, rather than that a variable has not been given a value.）。

==== 全域變數（Global Variable）與區域變數（Local Variable） ====

這裡是JavaScript跟我們常用的 Java / VB /C#差異比較大的地方，要小心

區域變數（local variable）：
 在函數裡面（內部）進行宣告，”不”可以在函數”以外”的地方使用它。請在函數內部使用var幫變數命名。請看下圖範例的變數var_L1。
 只能在宣告的函數裡面（內部）使用（這稱為local scope）。
 在”不同的函數”裡面，可以用var宣告”相同名稱”的區域變數。因為用var宣告的區域變數只有在函數內有效，所以不怕互相干擾。
 在宣告變數的函數運作完畢時，區域變數將被消失。

全域變數（global variable）：
 在函數外面進行宣告，使用var幫變數命名。請看下圖範例的變數var_G3。
 整個網頁中的的程式都可以存取全域變數（global scope）。
 在“同一個網頁”裡面，”不能”宣告相同的全域變數名稱，不然的話，後面（新的）那個全域變數的值將會覆蓋掉前面（舊）那個的「值」。請看下圖範例最後的第二個「同名」全域變數var_G3。
 在網頁關閉時，全域變數將被消失。

下面的範例與執行成果，一看就清楚囉！
（所以，學習軟體、程式，沒範例又不動手做，真的只是紙上談兵！）

[img=415,252]http://ithelp.ithome.com.tw/upload/images/20141003/20141003004921542d821106d62_resize_600.jpg[/img]

==== 條件式（Conditional Statement）====

一圖解千言
我用下面這張圖片，讓大家知道 if 與 switch...case，其實在某些地方是一體兩面
互可替代的寫法

[img=415,396]http://ithelp.ithome.com.tw/upload/images/20141003/20141003004953542d823156e3f_resize_600.jpg[/img]

==== 迴圈 / 物件（Object）型態 ====

我用下面這張圖片，讓大家知道 for（數字型的迴圈）與 while（條件型的迴圈），其實在某些地方是一體兩面
互可替代的寫法

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20141003/20141003005010542d8242c71e0_resize_600.jpg[/img]

........................

........................
............鐵人賽 30天，

如果真要講 JavaScript，搞不好可以講到一百天喔
講多了也枯燥

更何況這系列是要做 HTML5與相關技術的，我暫時在此打住