首頁 > 開發者 > JavaScript
我們接下來寫一個系列，關於JavaScript的學習。希望能跟大家一起來學習JavaScript，至於為什麼要學JavaScript呢?我們不用JavaScript也可以編程，對，但是學了會有什麼作用，我給大家百度一下：
Javascript是一種由Netscape的LiveScript發展而來的原型化繼承的物件導向的動態類型的區分大小寫用戶端指令碼語言，主要目的是為瞭解決伺服器端語言，比如Perl，遺留的速度問題，為客戶提供更流暢的瀏覽效果。當時服務端需要對資料進行驗證，由於網路速度相當緩慢，只有28.8kbps，驗證步驟浪費的時間太多。於是Netscape的瀏覽器Navigator加入了Javascript，提供了資料驗證的準系統。 簡而言之JavaScript就是一種提高使用者體驗的語言。
好了廢話不多說，我們接下來先瞭解一下JavaScript的常見的問題，以便在稍後的編寫代碼中我們能輕而易舉實現我們的代碼。這部分的內容我們主要講以下幾點：
區分大小寫：
其實這部分的內容主要是為了區分咱們用別的語言來編寫；咱們之前使用過的語言：vb就不區分大小寫，而咱們講的這個JavaScript就區分大小寫。
JS中方法和變數都是區分大小寫，因此function myFunction{}和function Myfunction()是不同的。
這一規則也適用於JavaScript核心對象例如:Array和Object.我們在定義一個數組的時候Array，就必須是大寫開頭，當你寫成小寫之後，你會發現array的字型顏色會發生變化。
單引號、雙引號：
單引號、雙引號在JS中沒有特殊的區別，都可以用來建立字串。但作為一般性規則，大多數Js開發人員喜歡使用單引號而不是雙引號，但是因為XHTML規範要求所有屬性值都必須使用雙引號括起來。這樣在JS中使用單引號，而對XHTML 屬性使用雙引號會使混合兩者代碼更方便也更清晰。
單引號中可以包含雙引號，反之雙引號也可以包含單引號。
我們看一個例子：
在這個程式碼片段裡邊，因為a是一個屬性值，所以用雙引號，然後我們的單引號可以包含雙引號，所以整個單引號括起了的地方就是一個字串，然後+是一個串連符，所以這一個整個部分也就串連了起來。那麼我們看到第二部分的代碼，由於a的旁邊多了一個轉移字元，要是沒有這個逸出字元，那麼當這個代碼運行到class=\的時候就結束了。我們很清楚的看到，下面這個代碼明顯沒有上面這個代碼清晰，舒服。
但是對於下面情況還是需要逸出字元的：
var temp='<p class="a"> What\'s this?';
如果一個單引號裡邊還有單引號的話，還是需要逸出字元的。
括弧：
首先需要說明的是：JS中括弧包含2種語義，可以是分隔字元也可以是運算式。
分隔字元大家非常熟悉，我們舉個例子來說明：（1+3）*3等於12。
運算式是這麼個類型，我們看一下：
(function(){})();
這裡邊，function之前的一對括弧作為分隔字元，後面的括弧表示立刻執行這個方法。舉個例子吧：
第一個：
<title>括弧的意義</title></head><script type="text/javascript">var a='123';function aa(){alert(a);}</script><body onload="aa();"></body>
第二個：
<title>括弧的意義</title></head><script type="text/javascript">var a='123';(function (){alert(a);})();</script><body ></body>
提前說明一下，這兩個結果一樣的；然後我們觀察發現這兩段代碼的區別。第一個代碼直接在onload裡邊就載入了；然而第二段代碼是使用了括弧表示立即執行的效果，而且我們乾脆用匿名的效果，立即就執行了這個function。所以達到了一樣的效果。還有另一種寫法：
<title>括弧的意義</title></head><script type="text/javascript">var a='123';function aa(){alert(a);};window.onload=aa;</script><body ></body>
這種寫法跟第一種寫法其實一樣，我在這裡想說的是：onload什麼時候開始載入呢？就是在整個頁面載入全部結束之後才會調用，整個頁面載入包括圖片載入；有時候當圖片非常多的時候，我們調用這個onload就會很慢。當然我們還有別的辦法，就是先載入文字部分，然後並行調用onload，同時我們再載入其他圖片。我們是可以這麼做的。我們簡單的提一下。
函數調用和引用：
我們剛才寫的兩個形式，一種是帶小括弧的，在body裡邊的。然後我們直接在window裡邊寫的就沒有小括弧；這就涉及到了我們函數調用和引用的問題。我們看一下：
var foo=example(); var foo1=example;
我們看得出來，前面的一個帶小括弧的，小括弧在這裡的意思就是立即執行的意思。這個的意思就是我們調用example並且把函數的傳回值付給foo。第二個就是我們把這個example的函數指標指給這個foo1。所以帶括弧的表示一個函數的傳回值；不帶括弧的表示一個函數的引用
換行：我們可以使用反斜線逸出字元來串連或者使用+來串連。
分號、大括弧可選：
JS中每行語句的最後並不是必須用分號結尾。因此我們看：
alert();
與
alert()
是沒有區別的。
但是對於一下代碼，如：
if(a==b)alert(b)alert(a)
不會翻譯為
if(a==b);alert(b);alert(a);
而是翻譯成：
if(a==b){alert(b)}alert(a);
重載:
JS中不支援重載因此這裡所說的重載其實更類似於替換。如：
function myFunction(a,b){}
function myFunction(a){}
由於沒有重載所以上面的聲明將導致下面的myFunction函數覆蓋上面的函數。如：
<title>重載</title></head><script type="text/javascript">var a='123';function aa(){alert(a);}function aa(){alert("這是第二個");}window.onload=aa;</script><body ></body>
我們看到的結果是：
其實就是替換了第一個了。還有一點需要注意的是，JavaScript裡邊調用只與function的名字有關，與function的參數無關。如：
<title>重載</title></head><script type="text/javascript">var a='123';function aa(){alert(a);}function aa(x,y,z){alert("這是第二個");}window.onload=aa;</script><body ></body>
顯示的結果還是和剛才一樣。
當我們寫JavaScript的方法的時候，一定要注意，名字不要使用保留字，除非你說我一定要覆蓋他的保留方法，否則將導致你的代碼覆蓋JS核心函數：如：
<title>重載</title></head><script type="text/javascript">var a='123';function aa(){alert(a);}function aa(x,y,z){alert("這是第二個");}function alert(){}window.onload=aa;</script><body ></body>
則將什麼也沒顯示，但是也不報錯。
範圍、閉包：
範圍指對某一屬性或方法具有存取權限的代碼空間。
function myFunction(){
var temp="abc";
}
上面的temp在函數外面無法訪問。
閉包是與範圍相關的一個概念，它指的是內建函式即使在外部函數執行完成並終止後仍然可以訪問其外部函數的屬性。如：
<title>閉包</title><script type="text/javascript">function newaa(){for(var i=1;i<=3;i++){var anchor=document.getElementById("anchor"+i);anchor.onclick=function(){alert("My anchor is anchor"+i);}}}window.onload=newaa;</script></head>http://write.blog.csdn.net/postedit/8200870<body ><a id="anchor1" href="#">abc</a><br /><a id="anchor2" href="#">abc</a><br /><a id="anchor3" href="#">abc</a><br /></body></html>
我們看一下效果：
無論我們點擊那個abc都會出現這種情況，這是為什嗎？我們看一下，當我們點擊事件發生後，我們的onload事件已經載入完了，所以i就變成了4了。所以就造成了這種情況。我們看一下應該如何來解決這個問題呢：
<title>閉包</title><script type="text/javascript">function newaa(){for(var i=1;i<=3;i++){var anchor=document.getElementById("anchor"+i);registerListener(anchor,i);}}function registerListener(anchor,i){anchor.onclick=function(){alert("My anchor is anchor"+i);}}window.onload=newaa;</script></head><body ><a id="anchor1" href="#">abc</a><br /><a id="anchor2" href="#">abc</a><br /><a id="anchor3" href="#">abc</a><br /></body></html>
這樣我們就能達到我們想要的結果了。這就是閉包的一個作用。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
