1. 程式人生 > >輕鬆拿下JavaScript(一)——JavaScript常見問題

輕鬆拿下JavaScript(一)——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>
    這樣我們就能達到我們想要的結果了。這就是閉包的一個作用。