Pages

系列文章

2015/03/24

【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系列文章介紹清單】

2 則留言:

  1. 請問如何開啟筆電的wifi?
    謝謝

    回覆刪除
    回覆
    1. 要看比電型號ㄟ 一般來說在筆店旁邊會有一個wifi的開關
      關掉的話就完全抓不到無線網路了 但是也有可能因為驅動沒安裝好所以抓不到

      刪除