JavaScript的基本語法-字符編碼

avaScript的基本語法-字符編碼

JavaScript程序使用Unicode字符集編寫。Unicode字符集中每個字符

使用兩個字節來表示，這意味著用戶可以使用中文來命名JavaScript中的變量。

實例：試著運行下程序，可以看到程序運行正常。

<!DOCTYPE html>
<html lang="CN">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script>
    var 人名="老王";
    function 睡覺(誰)
    {
        alert(誰+" 快睡了!寶寶!");
    }

    睡覺(人名);
</script>

</body>
</html>

根據ECMAscript標準只允許Unicode字符出現注釋和引號中的字符串中，其他代碼必須用

ASCII字符集。所以考慮到兼容性，不建議使用漢字命名變量和函數名。

因為JavaScript代碼嵌入在網中一般嚴格考慮網頁字符編碼與JavaScript編碼保持一致，以避免

出現亂碼。

篇文章適合誰

這邊文章適合對于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事件。

結語

希望這篇文章能夠幫助你了解基本的JavaScript，如果想看更多內容，可以到快樂學程式的官網逛逛，相信可以在你學程式的路上有所幫助。

過 jQuery，您可以選取（查詢，query） HTML 元素，并對它們執行"操作"（actions）。

jQuery 語法

jQuery 語法是通過選取 HTML 元素，并對選取的元素執行某些操作。

基礎語法： $(selector).action()

美元符號定義 jQuery
選擇符（selector）"查詢"和"查找" HTML 元素
jQuery 的 action() 執行對元素的操作

實例:

$(this).hide() - 隱藏當前元素
$("p").hide() - 隱藏所有 <p> 元素
$("p.test").hide() - 隱藏所有 class="test" 的 <p> 元素
$("#test").hide() - 隱藏所有 id="test" 的元素

文檔就緒事件

您也許已經注意到在我們的實例中的所有 jQuery 函數位于一個 document ready 函數中：

$(document).ready(function(){// 開始寫 jQuery 代碼...});

這是為了防止文檔在完全加載（就緒）之前運行 jQuery 代碼，即在 DOM 加載完成后才可以對 DOM 進行操作。

如果在文檔沒有完全加載之前就運行函數，操作可能失敗。下面是兩個具體的例子：

試圖隱藏一個不存在的元素
獲得未完全加載的圖像的大小

提示：簡潔寫法（與以上寫法效果相同）:

$(function(){// 開始寫 jQuery 代碼...});

以上兩種方式你可以選擇你喜歡的方式實現文檔就緒后執行 jQuery 方法。

你對 CSS 選擇器熟悉嗎？

jQuery 使用的語法是 XPath 與 CSS 選擇器語法的組合。在本教程接下來的章節，您將學習到更多有關選擇器的語法。

在線咨詢

上一篇：Babel 插件：30分鐘從入門到實戰
下一篇：html5的盛況，flash的哀嚎

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

JavaScript的基本語法-字符編碼

avaScript的基本語法-字符編碼

篇文章適合誰

什么是JavaScript?

編寫基本的JavaScript

在HTML中加入JavaScript

注解

分號結尾

基本語法范例

運算式范例

JavaScript Event

JavaScript氣泡事件

結語

您的項目需求