MIS2000Lab.的「HTML5 認證考試，從零開始」#16--使用JavaScript建構物件與方法

DAY 16

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

javascript html 微軟網頁認證考試鐵人賽 html5 mis2000lab moc html

mis2000lab

2014-10-11 19:24:42

3400 瀏覽

分享至

上兩篇文章講到AJAX -- http://ithelp.ithome.com.tw/question/10159099

==== 全域變數與區域變數、Hoisting與Scoping ====

JavaScript的基礎語法看起來可能類似C#、C++與Java，但在細節上仍有差異。其中最特別的就是「Scoping」與「Hoisting」兩者。

當您建立一個JavaScript變數以後，可能是這兩種情況之一：

[ul] [li]建立在function「以外」的變數，視同「全域變數（Global Scope）」。[/li] [li]建立在function「裡面」的變數，視同「區域變數（Function Scope）」。[/li][/ul]

JavaScript的規範比較鬆散，並不支援「block-scope variables」也就是說：

傳統（較嚴謹）的程式在function的 {...}裡面建立的變數，只有在這個區塊裡面可使用。

但是，JavaScript會把function「外面」的「全域變數」當成

在function的「第一列」宣告（建立）的變數來用，這就是Hoisting（提升、調升）。

<script>
        var num = 7;  //全域變數

        function ScopingAndHoisting() {
            if (true) {
                var num = 42;
                // 您以為是「區域」變數
// 與外面「同名的」全域變數不相關，對嗎？
// 為Scoping的觀念。
            }
            window.alert("變數num：  " + num);
}

        ScopingAndHoisting();
        //執行之後的成果，並「不是」num為42。
        //正確答案是 num為7，很驚訝吧？！
</script>

==== 立即調用的函數（Immediately invoked functions） ====

下面的作法可以把這段JavaScript與宣告的變數隔離在這個網頁內，不至於跟其他網頁的JavaScript發生同名衝突。

(function() {
//當函數結束的時候，此函數內部定義的「變數」立即消失了。因此他們不會與其他Script中定義的變數發生同名的衝突。
var localVar = ... ;
var localVar2 = ...;

function localFunc() {
localVar = 99;
...
}
...
localFunc() ; // 立即執行localFunc函數
...
}) ();

==== Singleton Objects與全域函數（Global Functions） ====

JavaScript也提供了全域函數（global function）隸屬於「全域物件（Global objects）」，

例如：parseInt()方法、parseFloat()方法與 isNan()方法。使用前不需要強調Global.parseInt()，直接使用即可。

var ageEnteredByUser;
var heightEnteredByUser;
...
var age = parseInt(ageEnteredByUser);   //轉成整數。
var height = parseFloat(heightEnteredByUser);  //轉成浮點數。

if (isNan(age) || isNan(height))
alert("Invalid input");

//註解：.isNaN()通常用於檢測 .parseFloat()和 .parseInt()的結果，以判斷它們表示的是否是合法的數字。
當然也可以用 .isNaN()來檢測算數錯誤，例如除以零的錯誤情況。

==== 創建自訂物件（Custom Objects）====

內建的JavaScript物件還有String、Data、Math、JSON與RegExp（正規表達式，正則運算式，Regular Expression）。

本節要介紹的是：自己創建一個物件（Custom Objects）。

底下就是一個完整範例。
上半部是「屬性」，下半部則是「方法」。當屬性參考一個函數（function）的時候，就是一個方法（method）。

var emp1 = {};   //建立一個自訂物件。

emp1.FirstName = "MIS2000 Lab.";  
// 設定這個物件的「屬性」，員工姓名、年紀、薪資等等。
emp1.age = 33;
emp1.salary = 22000;

emp1.payRise = function(amount) {
  // 當屬性參考一個函數（function）時，就是一個方法（method）。
// 在這個方法裡面，關鍵字 "this"代表目前正在用的物件。
this.salary += amount;

return this.salary;     //此方法有傳回值。
}

下面兩張圖片就是一個範例，請您參考

[img=415,450]http://ithelp.ithome.com.tw/upload/images/20141011/201410111919575439125d53628_resize_600.jpg[/img]

[img=415,306]http://ithelp.ithome.com.tw/upload/images/20141011/2014101119200754391267e27b9_resize_600.jpg[/img]

==== Object Literal Notation ====

我們直接看看下面這張圖片（這個範例）

[img=415,468]http://ithelp.ithome.com.tw/upload/images/20141011/2014101119204054391288a95b0_resize_600.jpg[/img]

JavaScript的東西著實不少

如果以一本「HTML5考試認證書籍」來說，

[ul] [li]講多了，可能偏離主題變成JavaScript為主，而不是HTML5為主[/li] [li]講少了，不痛不癢[/li][/ul]

我的建議是：當書上提示了這個重點，您必須**買一本「專門書籍」**深入了解他

如果您沒有「真正的能力」，就算這次考試過了
你拿到一張認證（不管國內或是國外的）

但您自己心知肚明，自己「實力」是零