iT邦幫忙

DAY 16
4

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

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

上兩篇文章講到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]

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

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

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

[ul] [li]考過了,未必是真的會了[/li] [li]會的人(在業界工作),未必有通過考試[/li][/ul]

兩者的輕重,如何拿捏?要看自己囉!

2014鐵人賽也有一位前輩針對JavaScript做了全盤的介紹,推薦給您
http://ithelp.ithome.com.tw/ironman7/app/profile/20084198

下一篇文章:

http://ithelp.ithome.com.tw/question/10159485

===============================================
本系列文章已經集結出書
HTML5、CSS、JavaScript 網頁程式設計與 MCSD 70-480 認證教材

MIS2000 Lab. 周棟祥/吳進魯

出版商:碁峰
出版日期:2015-04-09

語言:繁體中文
ISBN:9863475750
ISBN-13:9789863475750

PChome http://24h.pchome.com.tw/books/prod/DJAV0S-A90060ASI
博客來 http://www.books.com.tw/products/0010671214
天瓏書局 https://www.tenlong.com.tw/items/9863475750?item\_id=1003110


上一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#15-- AJAX ( jQuery )
下一篇
MIS2000Lab.的「HTML5 認證考試,從零開始」#17--與檔案互動的HTML5 File API
系列文
MIS2000Lab.的「HTML5 認證考試,從零開始」--菜鳥的30天馬拉松30

尚未有邦友留言

立即登入留言