js快速入門教程 js入門基礎教程

2025-12-17 小知識 js快速入門教程 js入門基礎教程

文章插圖

js快速入門教程 js入門基礎教程

文章插圖
這篇文章適合誰
這邊文章適合對于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="http://www.mnbkw.com/jxjc/190675/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;【js快速入門教程 js入門基礎教程】只跳出當前的回圈。
基本語法范例運算式分枝回圈函數陣列運算式范例

<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("及格"); elsedocument.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:GeorgeJavaScript 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="http://www.mnbkw.com/jxjc/190675/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 ，如果想看更多內容，可以到快樂學程式的官網逛逛，相信可以在你學程式的路上有所幫助。

上一篇：血糖高可以吃小米粥嗎？相關人群要看好了

下一篇：ppt怎樣統一字體 PPT怎么統一字體