【JQuery】《第二回》JQuery變數宣告與型態及變數生命週期

不管是哪一種程式語言「變數」都是很基礎、很基礎、很基礎(因為很重要所以說三次)
一定要了解的部分，因為老師說的好
「變數用的好程式跑的順，變數用的糟BUG除不完」

為什麼會這樣說呢?
因為若不小心宣告相同的變數名稱可能會導致傳遞的資料錯誤(或是互相覆蓋參數)
進而造成回傳的值或是顯示的值都變成錯誤的
而且因為變數是合法的宣告使用系統也不會報錯
這樣會讓我們花費很多時間在除錯上 為了避免發生類似情況
所以接下來就讓我們好好了解一下一些變數的相關知識
變數宣告方式

JQuery跟Javascript的變數宣告方式一樣
一般來說變數宣告最基礎的方式有以下兩種

var 變數名稱;//無參數變數宣告方式
var 變數名稱 = 變數值;//代參數變數宣告方式

另外也可以在一個敘述句中宣告多個變數或是多個帶變數值的變數
使用上彈性還蠻大的 也可以減少要一直重複打var的麻煩

var a, b, c;//同一敘述宣告多個變數名稱
var a=1, b=2, c=3;//同一敘述宣告多個帶值的變數

如果使用到了未賦予值的變數，會因瀏覽器不同而出現不同的錯誤訊息唷
一般還說都會如果是用alert()來顯示未賦予值的變數
都會出現「undefined」的訊息

var a;
alert(a);//因為位賦予值所以執行時會出現錯誤

變數名稱設定注意事項

1.字首不能使用數字

2.變數名稱不能包含非法字元(如特殊符號)

3.不可使用內建關鍵字或是類別名稱..等

變數型態

從上述的「變數宣告方式」教學中可以發現
JavaScript與JQuery一樣，在一開始宣告變數時
是不需要預先宣告變數型態的，他會根據你輸入的資料
自動預設一個型態給變數，當然這樣的方式有好有壞
有時候將變數作為判斷條件做比對時，忘記轉型就會發生悲劇

一般來說常見的JQuery型態大約有以下四種

1.數值(int)
2.字串(String)
3.布林(boolean)
4.物件(Object)

我們可以利用「typeof()」函式來做驗證，請參考下述程式碼~!

alert(typeof(1)); //顯示number 代表數值
alert(typeof("1"));//顯示string 代表字串
alert(typeof(true));//顯示boolean 代表布林
alert(typeof(new Array()));//顯示Object 代表物件

這其中有兩個比較特別的變數屬性那就是「NULL」跟「undefined」
(有些人會說是型態但是我覺得說是屬性合適一點，因為每個型態都可能會出現這兩個屬性)
這兩個差異在於哪裡呢?
首先「NULL」代表的是空值，而「undefined」代表的則是未定義
接著讓我們看看兩者間的不同，這是根據我個人目前為止遇到的狀況，
所整理出來的結果，若有其它情況也歡迎分享給我

var aa=null;
var bb;
typeof(a);//顯示結果為 NULL
typeof(b);//顯示結果為 undefined

從上面程式碼測出的結果我們可以發現，在變數尚未給值的狀況下
顯示出來的結果會是「undefined」，而要成為空值的話則需要賦予變數「null」值
如果沒有賦予「NULL」值基本上都會顯示「undefined」，
所以在做判斷條件時要多注意這兩者個差異，不然可能會造成判斷錯誤。

變數生命週期

JavaScript與JQuery的變數也是有區分「全域」與「區域」變數兩種
接下來讓我們直接用程式碼分別來看看「全域變數」跟「區域變數」的差別

區域變數的宣告

以下述這個例子來說，因為在Global_variables的function中
變數a有設定var所以並不會去覆蓋到function外的變數a
因此在最後alert的時候會抓到全域變數的參數，而不是顯示區域變數的參數

a = "全域變數";//全域變數
function Global_variables(){
    var a = "區域變數";//有var關鍵字 -> 區域變數
}
Global_variables();//呼叫function設定a變數
alert(a);//alert的是全域變數，結果是「全域變數」

全域變數的宣告

在JavaScript與JQuery中有兩種情況會讓變數被視為全域變數

1.變數宣告在function外面，不管有沒有加上var都是全域變數
2.變數宣告在function之內，沒有加上var就會成為全域變數

下述範例設定了兩個全域變數分別是「var a」跟「b」
而在Global_variables的function中設定的a跟b變數都是區域變數
因此在這裡可以忽略不看，所以最後alert的值都會是全域變數的值。

var a = "全域變數a";//全域變數a
b = "全域變數b";//全域變數b
function Global_variables(){
    var a = "區域變數a";//有var關鍵字 -> 區域變數
    var b = "區域變數b";//有var關鍵字 -> 區域變數
}
Global_variables();//呼叫function設定a跟b變數
alert(a + "--" + b); //alert的是全域變數，結果是「全域變數a--全域變數b」

在下例中我們宣告var a跟b兩個變數為全域變數
另外再Global_variables的function中再次宣告全域變數，
a跟b(這邊不要加var才會是全域變數)，我們可以發現在最後alert的值
是在Global_variables的function中所宣告的a值跟b值，
而不是宣告在function外的a值跟b值，

var a = "全域變數a";//全域變數a
var b = "全域變數b";//全域變數b
function Global_variables(){
    a = "function中的全域變數a";//無var關鍵字 -> 全域變數
    b = "function中的全域變數b";//無var關鍵字 -> 全域變數
}
Global_variables();//呼叫function設定a跟b變數
alert(a + "--" + b); 
//alert的是全域變數，結果是「function中的區域變數a--function中的區域變數b」

今天的教學到此結束，最近有些忙亂，寫教學的進度落後呀(目遠)

其他JQuery相關教學請參考 【JQuery系列文章介紹清單】