這篇文章適合誰

這邊文章適合對於JavaScript有興趣也有一點基礎的開發者，以下除了介紹何謂JavaScript外，本篇將運用簡單的範例程式，讓大家可以初步認識JavaScript。

什麼是JavaScript?

如果您想讓網頁動起來，除了使用各種程式語言外，JavaScript 是最適合使用的語言之一。早期的網頁都是用HTML 語法，製作出一個個靜態網頁，向用戶顯示一些固定不變的資料。若想要讓網頁有更多的變化並且更加精緻，您就必須加上某些程式語言，如Script 語言。

Script language 是屬於使用前不需先編釋譯的程式語言，很適合網路學習，他將程式的文字直接放在網頁內。JavaScript 前名是Live Script，是Netscape 的產品。後因Netscape 支援JAVA(Sun Microsystems) 的產品， LiveScript 也就改名為JavaScript。最後提醒一個很多人搞錯的觀念：Java 和JavaScript 程式是完全不同的兩件事。

編寫基本的JavaScript

JavaScript最常使用在網頁上，所以基本上所有瀏覽器都可以用來執行JavaScript程式，我們簡單的建立一個網頁，例如hello.html，如下：

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <meta charset="utf-8">
    <title>Hello World!</title>
    <script>
      document.write('Hello world!');
    </script>
  </head>
  <body>
  </body>
</html>

document.write表示寫入資料到文件中(因為當前文件尚未關閉，所以會寫到文件未端，而瀏覽器會自動寫到<body>尾端，但如果<body>未建立，則會在建立後跑到<body>的開始處)，接着利用瀏覽器開啟網頁檔，就可以看到程式的結果。

在HTML中加入JavaScript

如前面的範例所示，在HTML中直接使用<script>…</script>的標籤來表示嵌入一段JavaScript程式，而嵌入的位置可以在<head>和<body>之中的任意位置(不建議放在<head>最前面，因為<head>第一個節點通常為編碼宣告)。

<html> 
<body> 
<script type="text/javascript"> 
var x =6, y=8; 
var s = "Hello! " 

t = s + x; 
z = x * y; 

document.write("< pre>x="+x+" n y="+y+" n s="+s+" n t="+t+" n z="+z+"</pre>"); 
</script > 
</body> 
</html>

結果：

x=6 
y=8 
s=Hello! 
t=Hello! 6 
z=48

另一種方式是將JavaScript程式獨立寫成別的檔案，不直接和HTML檔案寫在一起，JavaScript的檔案副檔名為js，例如我們建立一個hello.js檔，裡面寫入：

document.write('Hello world!');

然後HTML檔案則改為：

<!DOCTYPE html> 
  <html> 
  <head>  
  <meta http-equiv="content-type" content="text/html; charset=utf-8">  
  <meta charset="utf-8">  
  <title>Hello World!</title>   
  <script src="hello.js"></script>  
  </head>  
     <body>  
    </body>
</html>

如上所示，在<script>中使用src的屬性指出外部js的位置

註解

註解的部份不會執行，是給人看的，JavaScript中有兩種註解方式：

1. // 單行註解：兩個斜線後面的部份將不會處理。

2. /* … */ 多行註解：註解中間的部份將不會處理。

alert(“註解一”); //單行註解alert(“註解二”); /*多行註解

我們可以利用//* … //*/的寫法來作為區塊註解的開關，藉由刪除/加入開頭的斜線作為開啟或關閉區塊

alert("不會影響到");//*區塊註解開關if ($confition) {alert("要註解的區塊";}//*/alert("不會影響到");

分號結尾

JavaScript如一般程式語言，每段程式結尾都是以分號表示，但JavaScript能夠自動幫你在未加上分號的結尾加上分號，例如：

alert('Hello')alert('World');

第一行沒加上分號並不會造成解析錯誤，JavaScript容許這樣的錯誤發生。然而省略分號並不是一件正確的寫作習慣，因為有時候JavaScript會誤解你意思而造成程式錯誤，例如：

var func = function() {
return 42;
} // 省略分號
(function() {
// ...
})();

原本的意思是，建立一個函式變數，接着在Clousre中執行部分程式，但是瀏覽器以為你是要這樣：

var func = function() {return 42;} ( function() {} ) ();// 1 2 3// 1. 建立函式function() {return 42;}// 2. 將function() {} 作為參數代入1的函式執行// 3. 將回傳的結果(42)作為函式執行

然而42是數字，無法執行造成錯誤。

也因為這個特性，有時候如果在不正確的地方斷行，也會造成不如預期的結果，例如：

returntrue;

原本是要回傳true，卻被當成：

return;true;

另一個例子

breakloop;

原本是要跳出loop這個迴圈，卻被當成：

break;loop;

只跳出當前的迴圈。

基本語法範例

運算式
分枝
迴圈
函數
陣列

運算式範例

<html> 
<body> 
<script type="text/javascript"> 
var x =6, y=8; 
var s = "Hello! " 

t = s + x; 
z = x * y; 

document.write("< pre>x="+x+" n y="+y+" n s="+s+" n t="+t+" n z="+z+"</pre>"); 
</script > 
</body> 
</html>

執行結果

x=6 
y=8 
s=Hello! 
t=Hello! 6 
z=48

分枝範例

<html> 
<body> 
<script type="text/javascript"> 
var score = 70; 
if (score >= 60) 
  document.write("及格"); 
else 
  document.write("不及格"); 
</ script> 
</body> 
</html>

執行結果

及格

迴圈範例

<html> 
<body> 
<script type="text/javascript"> 
for (i=1;i<=10;i++) { 
  if (i == 3) continue; 
  if (i == 8) break; 
  document. write("i="+i+"<BR/>"); 
} 
</script> 
</body> 
</html>

執行結果

i=1 
i=2 
i=4 
i=5 
i=6 
i=7

函數範例

<html> 
<body> 

<script type="text/javascript"> 
var add = function(a,b) { //第一種寫法，將匿名函數指定給變數。
  return a+b; 
} 

function sub(a,b) { //第二種寫法，直接宣告函數，該函式是一個函數物件，
  return ab; 
} 

document.write("add(3,5)=" +add(3,5)+" sub(7,2)="+sub(7,2)); 
</script> 

</body> 
</html>

執行結果

add(3,5)=8 sub(7,2)=5

陣列範例

<html> 
<body> 
<script type="text/javascript"> 
var x; 
var friends = new Array(); 
friends[0] = "John"; 
friends[1] = "Mary"; 
friends[2] = "George"; 
for (p in friends) { 
  document.write(p + ":"+ friends[p] + "<br />"); 
} 
</script> 
</body> 
</html>

執行結果

0:John 
1:Mary 
2:George

JavaScript Event

事件流：描述的是從頁面中接受事件的順序，IE的事件流是事件冒泡流，Netscape的事件流是事件捕獲流。

事件冒泡：事件冒泡指的是「從啟動事件的元素節點開始，逐層往上傳遞」，直到整個網頁的根節點，也就是document。

舉例一個HTML如下：

<!DOCTYPE html> 
<html> 
<head> 
  <title>TITLE</title> 
</head> 
<body> 

  <div>CLICK</div> 

</body> 
</html>

假設我們點擊(click) 了<div>CLICK</div> 元素，那麼在「事件冒泡」的機制下，觸發事件的順序會是：

1.<div>CLICK</div>

2.<body>

3.<html>

4.document

像這樣click 事件逐層向上依序被觸發，就是「事件冒泡」機制。

事件捕獲：剛剛說過「事件冒泡」機制是由下往上來傳遞，那麼「事件捕獲」(Event Capturing) 機制則正好相反。

<!DOCTYPE html> 
<html> 
<head> 
  <title>TITLE</title> 
</head> 
<body> 

  <div>CLICK</div> 

</body> 
</html>

假設我們點擊(click) 了<div>CLICK</div> 元素，那麼在「事件捕獲」的機制下，觸發事件的順序會是：

1.document

2.<html>

3.<body>

4.<div>CLICK</div>

像這樣click 事件由上往下依序被觸發，就是「事件捕獲」機制。

JavaScript氣泡事件

首先，得先了解一個事件發生時，都會有一個事件源，因為事情不會憑空發生。當事件發生後，因為事件源本身沒有處理事件的能力，所以事件會開始傳播。舉例來說：當我點擊一個按鈕時，就會產生一個click事件，但按鈕本身無法處理這個事件，所以事件必須傳播出去，從而找到能處理這件事的函數，當找到了之後我們就會說這個函數捕捉到了這個事件。

那麼一個函數是如何捕捉事件的呢，其實就像是一杯水,但是這杯水是分層次的,最底下是當前觸發事件的物件。然後越往上範圍越大，最頂層是window，倒數第二層是document。氣泡在上浮過程中會判斷當前所到達的層有沒有相應的函數或是處理方法。有話就執行相應的處理，沒有的話就繼續向上起泡，直到到達最頂層的window視窗層。我們可以在任何一層做相應的處理以阻止事件繼續起泡，方法就是呼叫事件物件的阻止起泡的方法。以下是事件起泡的例子：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http ://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>sun</title > 
<script src="js/jquery-1.4.3.js" type="text/javascript"></script> 
<script language="javascript"> 
$(document).ready(function(){ 
    $(' .one').click(function(e){ 
        alert('one'); 
    }); 
    
    $('.two').click(function(e){ 
        alert('two');                                                  
    });                                                                           

    $('.three').click(function(e){
        alert('three'); 
       //阻止起泡取消下面的注釋
        //e.stopPropagation(); 

    }); 

});   
</script> 
</head> 
<body> 
<div class="one" style= "width:200px;height:200px;background:green;"> 
one 
    <div class="two" style="width:150px;height:150px;background:yellow;"> 
    two 
        <div class="three"> 
            three 
        </div> 
    </div> 
</div> 

</body> 
</html>

一個事件起泡對應觸發的是上層的同一事件，單擊two的時候就會起泡觸發one單擊的事件，單擊tree時,會同時觸發two,然後觸發one。
如果在click事件中，在你要處理的事件之前加上e.preventDefault()；那麼就取消了行為(通俗理解：相當於做了個return操作)，不執行之後的語句了。
e.stopPropagation()只要在click事件中，就不會觸發上層click事件。