JavaScript in Web Browser

Transcript 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>
<!-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=120>
……
<hr width=“&{ruleWidth+20}”>
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 程式碼
使用：
navigator
frames[]
forms[]
location
window
anchors[]
history
links[]
document
images[]
screen
applets[]
embeds[]
elements[]
包含以下表單
元件物件的陣
列：
Button
Checkbox
FileUpload
Hidden
Password
Radio
Select
Submit
Text
Texrarea
options[]
window:
navigator:
document:
location:
the top-level object; has properties that apply to the entire
window. Each “child window” in a frames document also
has a window object.
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.
contains properties based on the content of the
document, such as title, background color, links, and
forms.
has properties based on the current URL.
history:
contains properties representing URLs the client has
previously requested.
screen:
contains properties about the display.
網頁元件與物件的對應關係
瀏覽器會把同類的網頁元件按照出現的順序存在對應的物件
陣列中。譬如：
document.links[0]
<body>
<a href=www.pu.edu.tw>靜宜大學</a>
<a href=www.cs.pu.edu.tw>靜宜大學資管系</a>
</body>
document.links[1]
<body>
document.forms[0]
<form method="post">
document.forms[0].elements[0]
<p>姓名：<input type="text">
</p>
document.forms[0].elements[1]
<p>性別：<input type="radio" value=“male">男
<input type=“radio” value=“female”>女
</p>
<p>
document.forms[0].elements[2]
document.forms[0].elements[3]
<input type="submit" value="送出">
<input type="reset" value="重設">
</p>
</form>
</body>
document.forms[0].elements[4]
使用名稱來存取網頁物件
我們可以使用元件的名稱來存取其對應的網頁物件。
HTML 元件的名稱可以用 NAME 屬性來設定。譬如：
document.img1
<body>
<img name=img1...>
document.form1
<form name=form1...>
document.form1.text1
<input type=text name=text1...>
<input type=button name=button1...>
...
</form>
</body>
document.form1.button1
任何擺在表單之中的物件，不管是否為表單元件，都必須
加上表單物件來指定。譬如：
document.img1
<img name=img1...>
<form name=form1...>
<img name=img2...>
...
</form>
document.form1.img2
存取網頁物件的屬性
我們使用前面所述的方式來指定網頁物件，然後再
用 .property 來指定物件的屬性。譬如：
document.form1.text1.value = "Hello"
把表單 form1 文字欄 text1 的 value 屬性設定成字串
"Hello"。
事件的處理
許多 JavaScript 程式屬於事件驅動（event-driven）的形式。
JavaScript 有下列幾種事件型態：
 使用者操作引發的事件，如：按下滑鼠鍵、改變文字欄裏
的內容、移動滑鼠游標通過超連結、…、等等
 瀏覽器狀態改變所引發的事件，如：載入新網頁和離開網頁
 計時器（Timer）引發的事件
 錯誤（ Error ）引發的事件
事件處理碼（Event Handler）
若要處理某特定事件，你可以在處理該事件的元件標籤中，
設定代表該事件的處理碼（event handler）屬性；此屬性的
值是一段處理該事件的 JavaScript 程式。指定的方式如下：
<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("<tr align=right>")
document.write("<th width=40 align=center>" + i + "</th>")
for (var j = 1; j < 10; j++)
document.write("<td width=40>" + i*j + "</td>")
document.writeln("</tr>")
}
</script>
</table>
alert
Displays an Alert dialog box with a message and an OK button.
語法: alert (message)
範例
alert("這是限制級網站，未成年的訪客請離開")
confirm
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> 元件中，瀏覽器依序地執行其中的敘述。
4. 由於上述的處理順序，執行 JavaScript 程式碼時，不能存取
目前尚未碰到的物件，譬如底下的兩行會造成網頁錯誤：
<script>document.mylink.href=“http://www.pu.edu.tw”;
</script>
<a name=mylink>…</a>
因為在指定 document.mylink.href 時，mylink 這物件尚
不存在。
5. 由於函式宣告只是定義函式，呼叫函式才真正執行它，所
以上述的規則 4 並不適用於函式的宣告。譬如：底下的內
容不會造成網頁錯誤：
<script>
function set_mylink (url)
{
document.mylink.href=url;
}
</script>
<a name=mylink>…</a>
<script>set_mylink(“http://www.pu.edu.tw”);
</script>
6. 事件處理碼所指定的程式碼只有在對應的事件發生後才會被
執行。譬如：
<script>
function goto (place)
{
return confirm(“要連到“ + place + “嗎?”);
}
</script>
<a href=“http://www.pu.edu.tw”
onclick=“return goto(‘靜宜大學’);” >靜宜大學</a>
只有在瀏覽者點了這個超連結
之後才會執行這段程式
有時網頁延遲載入，當事件發生時，處理的程式碼所指涉的物
件尚未建立，而造成網頁錯誤。譬如：
<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
7. JavaScript URL 中的程式碼只有在 URL 被瀏覽器載入後才
會被執行。譬如：
<a href=“javascript:history.back();”>前一頁</a>
只有在瀏覽者點了這個超連結
之後才會執行這段程式

JavaScript in Web Browser

Transcript JavaScript in Web Browser

Directory