JavaScript in Web Browser

JavaScript in Web Browser
靜宜大學資訊管理學系蔡奇偉副教授 2003

大綱在網頁中加入 JavaScript 程式 window 全域物件瀏覽器物件階層網頁元件與物件的對應關係使用名稱來存取網頁物件
存取網頁物件的屬性事件的處理插入網頁內容 alert() & confirm() 瀏覽器如何處理網頁程式？

在網頁中加入 JavaScript 程式使用 script 標籤加入程式碼 <script> 的屬性
language & type src defer 用 JavaScript 運算式來設定元件的屬性值 JavaScript URL

使用 script 元件加入程式碼 <script>  </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> 插入的伺服器中的 JavaScript 程式檔 lib.js <script src=“ 範例

使用外部 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>  </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= <a href= </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 = " else location.href = " } </script> </head> <body onLoad="verify_visitor()">  </body> </html>

瀏覽器如何處理網頁程式？ 1. 瀏覽器由上而下地依序處理網頁的元件「一遍」。 2. 瀏覽器也依序地執行 <script> 元件。
3. 在 <script> 元件中，瀏覽器依序地執行其中的敘述。由於上述的處理順序，執行 JavaScript 程式碼時，不能存取目前尚未碰到的物件，譬如底下的兩行會造成網頁錯誤： <script>document.mylink.href=“ </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(“ 5.

事件處理碼所指定的程式碼只有在對應的事件發生後才會被執行。譬如： 6.
<script> function goto (place) { return confirm(“要連到“ + place + “嗎?”); } </script> <a href=“ 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 < ; k++) {}</script> <form name=form1> 目前時間：<input type=text name=timebox> </form> 按下此超連結時，瀏覽器可能還沒處理到表單 form1

JavaScript URL 中的程式碼只有在 URL 被瀏覽器載入後才會被執行。譬如： 7.
<a href=“javascript:history.back();”>前一頁</a> 7. 只有在瀏覽者點了這個超連結之後才會執行這段程式

JavaScript in Web Browser

Similar presentations

Presentation on theme: "JavaScript in Web Browser"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

JavaScript in Web Browser

Similar presentations

Presentation on theme: "JavaScript in Web Browser"— Presentation transcript:

Similar presentations

About project

反馈