JavaScript in Web Browser 靜宜大學資訊管理學系 蔡奇偉 副教授 2003
大綱 在網頁中加入 JavaScript 程式 window 全域物件 瀏覽器物件階層 網頁元件與物件的對應關係 使用名稱來存取網頁物件 存取網頁物件的屬性 事件的處理 插入網頁內容 alert() & confirm() 瀏覽器如何處理網頁程式？
在網頁中加入 JavaScript 程式 使用 script 標籤加入程式碼 <script> 的屬性 language & type src defer 用 JavaScript 運算式來設定元件的屬性值 JavaScript URL
使用 script 元件加入程式碼 <script> <!-- JavaScript statements //--> </script > JavaScript 程式碼裝在 HTML 註解中的原因，是為了讓不支援 JavaScript 的瀏覽器能跳過這些程式碼，而不致於造成網頁處理的錯誤。 //--> 最前面的兩個斜線是 JavaScript 的註解行符號。
<script> 的屬性 language= name_of_language 指定 script 元件中程式所使用的電腦程式語言種類或版本。 若未指定此屬性，則預設的電腦程式語言是 JavaScript。 HTML 4 規格書建議使用 type 屬性和 MIME 的格式來取代 language 屬性的設定，譬如： <script type=“text/javascript”>…</script> 此外，我們可以在 head 元件中用以下的標籤來設定網頁的的預設電腦程式語言： <meta http-equiv=“Content-Script-Type” content= “text/javascript”>
範例 以下三行都是加入 JavaScript 的程式碼 <script>……</script > <script language=“JAVASCRIPT”> ……</script > <script type=“text/javascript”> ……</script > 加入 JavaScript 1.3 版的程式碼 <script language=“JAVASCRIPT1.3”> ……</script > 加入 JScript 的程式碼 <script language=“JScript”> ……</script > 加入 VBScript 的程式碼 <script language=“VBScript”> ……</script >
src= url_of_script_source src 屬性用來加入存在外部檔案中的程式碼。JavaScript 程式檔通常以 .js 為副檔名。 插入與網頁同目錄的 JavaScript 程式檔 myscript.js <script src=“myscript.js”>…</script> 插入的 www.pu.edu.tw 伺服器中的 JavaScript 程式檔 lib.js <script src=“http://www.pu.edu.tw/lib.js”>…</script> 範例
使用外部 JavaScript 程式檔的好處 把大量的程式移到另外的檔案讓網頁的原始檔看起來比較清爽，也因此便利將來的網頁編修。 多個網頁可以很方便地共用相同的 JavaScript 程式。把這些相同功能的程式集中在一起也簡化了維護的工作。 當瀏覽使用相同外部 JavaScript 程式檔的多張網頁時，因為瀏覽器只需要下載這些程式檔一次，因此可以減少這些網頁下載所需的時間。 由於 src 屬性值是 URL，所以不同的 WWW 伺服器之間可以共享 JavaScript 程式。
由於程式碼不會插入網頁內容。瀏覽器因而不必等程式碼執行完成，就可以繼續處理後面的網頁內容。如此一來可以加速網頁的處理。 defer 屬性 由於 JavaScript 允許動態地插入網頁內容，因此瀏覽器碰到 JavaScript 程式碼時，必須先等它執行完後，才會繼續處理程式碼之後的網頁內容。但是，若一段 JavaScript 程式碼並不插入網頁內容，前述的瀏覽器等待動作就拖延了網頁的處理。基於這樣的緣故，HTML 4 增加 defer 屬性： <script defer> // 執行後不會插入網頁內容的程式碼 </script> 由於程式碼不會插入網頁內容。瀏覽器因而不必等程式碼執行完成，就可以繼續處理後面的網頁內容。如此一來可以加速網頁的處理。
用 JavaScript 運算式來設定元件的屬性值 （僅適用於 Netscape 4.x） attribute=“&{JavaScript Expression}” 範例 <script> <!-- var ruleWidth=100; //--> </script> …… <hr width=“&{ruleWidth+20}”> 等同於 <HR WIDTH=120>
JavaScript URL 我們可以用 javascript: 這個虛擬的 URL 通訊協定來加入 JavaScript 程式碼。當瀏覽器載入這樣的 URL 時，會執行其中的程式碼，然後把最後敘述所產生的字串顯示在新的畫面中，譬如底下的 URL 會產生一個顯示目前時間的網頁內容： javascript:var now = new Date(); “<h1>The time is:</h1>” + now.toLocaleString(); 若不希望離開目前的網頁，則最後一個敘述不可以產生任何的傳回值或只傳回 void 0。譬如： javascript:alert(“You are not a memeber”); javascript:window.open(“about:blank”); void 0; javascript:history.back();
window 全域物件 當瀏覽器載入網頁到視窗（或格框）時，內建的 JavaScript 執行器會先產生一個代表視窗（或格框）的全域物件，作為 JavaScript 程式碼與瀏覽器之間的溝通橋樑。在程式中，我們可以用 window 或 self 來指涉這個全域物件。window 物件具有底下的性質： 它作為瀏覽器物件階層的根結點（見後面的說明）。 把網頁中所有的全域變數納為它的屬性。 當使用它的屬性時，我們可以去掉前面的 window.， 譬如底下兩行程式碼作用完全相同： var answer = 12; window.answer = 12;
瀏覽器物件階層 瀏覽器會依據網頁內容建立下圖所示的物件階層，供 JavaScript 程式碼使用： elements[] window document frames[] location history screen navigator forms[] links[] images[] applets[] embeds[] anchors[] elements[] 包含以下表單元件物件的陣列： Button Checkbox FileUpload Hidden Password Radio Select Submit Text Texrarea options[]
window:. the top-level object; has properties that apply to the entire window: the top-level object; has properties that apply to the entire window. Each “child window” in a frames document also has a window object. navigator: has properties for the name and version of Navigator being used, for the MIME types supported by the client, and for the plug-ins installed on the client. document: contains properties based on the content of the document, such as title, background color, links, and forms. location: has properties based on the current URL. history: contains properties representing URLs the client has previously requested. screen: contains properties about the display.
網頁元件與物件的對應關係 瀏覽器會把同類的網頁元件按照出現的順序存在對應的物件陣列中。譬如： <body> document.links[0] <body> <a href=www.pu.edu.tw>靜宜大學</a> <a href=www.cs.pu.edu.tw>靜宜大學資管系</a> </body> document.links[1]
<form method="post"> <p>姓名：<input type="text"> <body> <form method="post"> <p>姓名：<input type="text"> </p> <p>性別：<input type="radio" value=“male">男 <input type=“radio” value=“female”>女 <p> <input type="submit" value="送出"> <input type="reset" value="重設"> </form> </body> document.forms[0] document.forms[0].elements[0] document.forms[0].elements[1] document.forms[0].elements[2] document.forms[0].elements[3] document.forms[0].elements[4]
使用名稱來存取網頁物件 我們可以使用元件的名稱來存取其對應的網頁物件。HTML 元件的名稱可以用 NAME 屬性來設定。譬如： <body> <img name=img1...> <form name=form1...> <input type=text name=text1...> <input type=button name=button1...> ... </form> </body> document.img1 document.form1 document.form1.text1 document.form1.button1
任何擺在表單之中的物件，不管是否為表單元件，都必須加上表單物件來指定。譬如： <img name=img1...> <form name=form1...> <img name=img2...> ... </form> document.img1 document.form1.img2
存取網頁物件的屬性 我們使用前面所述的方式來指定網頁物件，然後再用 .property 來指定物件的屬性。譬如： document.form1.text1.value = "Hello" 把表單 form1 文字欄 text1 的 value 屬性設定成字串 "Hello"。
事件的處理 許多 JavaScript 程式屬於事件驅動（event-driven）的形式。 JavaScript 有下列幾種事件型態： 使用者操作引發的事件， 如：按下滑鼠鍵、改變文字欄裏 的內容、移動滑鼠游標通過超連結、…、等等 瀏覽器狀態改變所引發的事件，如：載入新網頁和離開網頁 計時器（Timer）引發的事件 錯誤（ Error ）引發的事件
<tag eventHandler="JavaScript Code"> 譬如： <IMG SRC=image.gif onabort="alert('Are you really too busy to wait?')"> 指定事件處理碼: 當瀏覽者藉由選取另一個超連結、按下「停止」按鈕、或其他的方式來放棄圖片的載入時。
插入網頁內容 document 物件提供底下兩個方法讓我們可以動態地插入網頁內容： document.write(string) document.writeln(string) // 輸出 string 後再加一個跳行字元 範例 底下的程式產生顯示 Hello, world! 訊息的網頁 <body> <script> document.write(“<h1>Hello, world!</h1>”); </script> </body>
範例 底下的程式產生顯示今天日期的網頁 <body> <script> var now = new Date(); document.write(“<p>Today is: ”); document.write(now.toLocaleDateString()); document.write(“</p>”); </script> </body>
<!-- 以下的程式碼產生九九乘法表 --> 範例 <!-- 以下的程式碼產生九九乘法表 --> <table border=1 cellspcing=1 cellpadding=3 width=450> <caption>九九乘法表</caption> <script> document.write("<tr align=right>") document.write("<th width=40 align=center>*</th>") for (var i = 1; i < 10; i++) document.write("<th width=40>" + i + "</th>") document.writeln("</tr>") for (var i = 1; i < 10; i++) { document.write("<th width=40 align=center>" + i + "</th>") for (var j = 1; j < 10; j++) document.write("<td width=40>" + i*j + "</td>") } </script> </table>
alert 語法: alert (message) Displays an Alert dialog box with a message and an OK button. 語法: alert (message) 範例 alert("這是限制級網站，未成年的訪客請離開")
confirm 語法: confirm (message) Displays a Confirm dialog box with the specified message and OK and Cancel buttons. 語法: confirm (message) 範例 confirm("你滿 18 歲了嗎？")
範例 <html> <head> <meta http-equiv="Content-Type“ content="text/html; charset=big5"> <title>禁忌話題</title> <script> function verify_visitor () { if (confirm("你滿 18 歲了嗎？")) location.href = "http://sex.pu.edu.tw" else location.href = "http://www.disneyland.com" } </script> </head> <body onLoad="verify_visitor()"> <!-- 空白網頁 --> </body> </html>
瀏覽器如何處理網頁程式？ 1. 瀏覽器由上而下地依序處理網頁的元件「一遍」。 2. 瀏覽器也依序地執行 <script> 元件。 3. 在 <script> 元件中，瀏覽器依序地執行其中的敘述。 由於上述的處理順序，執行 JavaScript 程式碼時，不能存取目前尚未碰到的物件，譬如底下的兩行會造成網頁錯誤： <script>document.mylink.href=“http://www.pu.edu.tw”; </script> <a name=mylink>…</a> 因為在指定 document.mylink.href 時，mylink 這物件尚不存在。 4.
由於函式宣告只是定義函式，呼叫函式才真正執行它，所以上述的規則 4 並不適用於函式的宣告。譬如：底下的內容不會造成網頁錯誤： 5. <script> function set_mylink (url) { document.mylink.href=url; } </script> <a name=mylink>…</a> <script>set_mylink(“http://www.pu.edu.tw”); 5.
事件處理碼所指定的程式碼只有在對應的事件發生後才會被執行。譬如： 6. <script> function goto (place) { return confirm(“要連到“ + place + “嗎?”); } </script> <a href=“http://www.pu.edu.tw” onclick=“return goto(‘靜宜大學’);” >靜宜大學</a> 6. 只有在瀏覽者點了這個超連結之後才會執行這段程式
有時網頁延遲載入，當事件發生時，處理的程式碼所指涉的物件尚未建立，而造成網頁錯誤。譬如： <script> function show_time () { var now = new Date(); document.form1.elements.timebox.value = now.toLocaleTimeString(); } </script> <a href=“javascript:show_time(); void 0;”>更新時間</a> <script>for (k = 0; k < 100000000; k++) {}</script> <form name=form1> 目前時間：<input type=text name=timebox> </form> 按下此超連結時，瀏覽器可能還沒處理到表單 form1
JavaScript URL 中的程式碼只有在 URL 被瀏覽器載入後才會被執行。譬如： 7. <a href=“javascript:history.back();”>前一頁</a> 7. 只有在瀏覽者點了這個超連結之後才會執行這段程式