Java Script n script n script q language

在網頁中加入 Java. Script 程式 n 使用 script 標籤加入程式碼 n <script> 的屬性 q language &

範例以下三行都是加入 Java. Script 的程式碼 <script>……</script > <script language=“JAVASCRIPT”> ……</script > <script type=“text/javascript”> ……</script

src= url_of_script_source src 屬性用來加入存在外部檔案中的程式碼。Java. Script 程式檔通常以. js 為副檔名。範例插入與網頁同目錄的 Java. Script 程式檔 myscript.

用 Java. Script 運算式來設定元件的屬性值（僅適用於 Netscape 4. x） attribute=“&{Java. Script Expression}” 範例 <script> <!-var

瀏覽器物件階層瀏覽器會依據網頁內容建立下圖所示的物件階層，供 Java. Script 程式碼使用： navigator frames[] forms[] location window anchors[] history links[]

window: navigator: document: location: the top-level object; has properties that apply to the entire

<body> document. forms[0]. elements[0] <form method="post"> <p>姓名：<input type="text"> </p> document. forms[0]. elements[1] <p>性別：<input type="radio"

使用名稱來存取網頁物件我們可以使用元件的名稱來存取其對應的網頁物件。 HTML 元件的名稱可以用 NAME 屬性來設定。譬如： document. img 1 <body> <img name=img 1. .

插入網頁內容 document 物件提供底下兩個方法讓我們可以動態地插入網頁內容： document. write(string) document. writeln(string) // 輸出 string 後再加一個跳行字元範例底下的程式產生顯示

範例底下的程式產生顯示今天日期的網頁 <body> <script> var now = new Date(); document. write(“<p>Today is: ”); document.

範例 <!-- 以下的程式碼產生九九乘法表 --> <table border=1 cellspcing=1 cellpadding=3 width=450> <caption>九九乘法表</caption> <script> document. write("<tr align=right>")

alert Displays an Alert dialog box with a message and an OK button. 語法:

confirm Displays a Confirm dialog box with the specified message and OK and Cancel

$範例 <html> <head> <meta http-equiv="Content-Type“ content="text/html; charset=big 5"> <title>禁忌話題</title> <script> function verify_visitor () {$

$有時網頁延遲載入，當事件發生時，處理的程式碼所指涉的物件尚未建立，而造成網頁錯誤。譬如： <script> function show_time () { var now = new Date(); document. form$

Slides: 33

Download presentation

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

範例以下三行都是加入 Java. Script 的程式碼 <script>……</script > <script language=“JAVASCRIPT”> ……</script > <script type=“text/javascript”> ……</script > 加入 Java. Script 1. 3 版的程式碼 <script language=“JAVASCRIPT 1. 3”> ……</script > 加入 JScript 的程式碼 <script language=“JScript”> ……</script > 加入 VBScript 的程式碼 <script language=“VBScript”> ……</script >

src= url_of_script_source src 屬性用來加入存在外部檔案中的程式碼。Java. Script 程式檔通常以. js 為副檔名。範例插入與網頁同目錄的 Java. Script 程式檔 myscript. js <script src=“myscript. js”>…</script> 插入的 www. pu. edu. tw 伺服器中的 Java. Script 程式檔 lib. js <script src=“http: //www. pu. edu. tw/lib. js”>…</script>

用 Java. Script 運算式來設定元件的屬性值（僅適用於 Netscape 4. x） attribute=“&{Java. Script Expression}” 範例 <script> <!-var rule. Width=100; //--> </script> 等同於 <HR WIDTH=120> …… <hr width=“&{rule. Width+20}”>

瀏覽器物件階層瀏覽器會依據網頁內容建立下圖所示的物件階層，供 Java. Script 程式碼使用： navigator frames[] forms[] location window anchors[] history links[] document images[] screen applets[] embeds[] elements[] 包含以下表單元件物件的陣列： Button Checkbox File. Upload Hidden Password Radio Select Submit 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.

<body> document. forms[0]. elements[0] <form method="post"> <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. img 1 <body> <img name=img 1. . . > document. form 1 <form name=form 1. . . > document. form 1. text 1 <input type=text name=text 1. . . > <input type=button name=button 1. . . >. . . </form> </body> document. form 1. button 1

插入網頁內容 document 物件提供底下兩個方法讓我們可以動態地插入網頁內容： document. write(string) document. writeln(string) // 輸出 string 後再加一個跳行字元範例底下的程式產生顯示 Hello, world! 訊息的網頁 <body> <script> document. write(“<h 1>Hello, world!</h 1>”); </script> </body>

範例底下的程式產生顯示今天日期的網頁 <body> <script> var now = new Date(); document. write(“<p>Today is: ”); document. write(now. to. Locale. Date. String()); 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=big 5"> <title>禁忌話題</title> <script> function verify_visitor () {$

範例 <html> <head> <meta http-equiv="Content-Type“ content="text/html; charset=big 5"> <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 on. Load="verify_visitor()">  </body> </html>

有時網頁延遲載入，當事件發生時，處理的程式碼所指涉的物件尚未建立，而造成網頁錯誤。譬如： <script> function show_time () { var now = new Date(); document. form 1. elements. timebox. value = now. to. Locale. Time. String(); } </script> <a href=“javascript: show_time(); void 0; ”>更新時間</a> <script>for (k = 0; k < 10000; k++) {}</script> <form name=form 1> 目前時間：<input type=text name=timebox> </form> 按下此超連結時，瀏覽器可能還沒處理到表單 form 1