【Asynchronous JavaScript and XML】
- 盡量包成一個 .js 檔，可以 HTML 保持精簡及易讀性。
- 引入方式為：
<head> <script type="text/javascript" src="xxx.js"></script> </head>
- javascript 會在 HTML 載入後自動執行。
- javascript 執行的時間會早於 HTML 。
- 在 javascript 中的 document 會指向 <body> 這個元件。
- 以 DOM 建立以下架構
<body>--<div>--+--"test DOM" | +--<br> | +--<ul>--+--<li>--"one" | +--<li>--"tow"程式碼：<html> <head> <meta content="text/html; charset=utf-8"> <!--<script type="text/javascript" src="myJS.js">--> </head> <script language="javascript"> function ex1() { // 取得 w_div 這 div 元件的 id 。 my_div = document.getElementById("h_div"); // 創造一個文字元件(節點) my_text = document.createTextNode("test DOM"); // 將文字元件加到 div 元件內 my_div.appendChild(my_text); // 創造一個 <br> 元件 my_element = document.createElement("br"); // 將 <br> 元件加入 div 元件下 my_div.appendChild(my_element); // 創造一個 <ul> 元件 my_element = document.createElement("ul"); // 將 <ul> 元件加入 div 元件下 my_div.appendChild(my_element); // 創造一個 <ui> 元件 my_element1 = document.createElement("li"); // 創造一個文字元件(節點) my_text = document.createTextNode("one"); // 將文字元件加到 ui元件內下 my_element1.appendChild(my_text); // 將 <ui> 元件加入 ul 元件下 my_element.appendChild(my_element1); // 創造一個 <ui> 元件 my_element1 = document.createElement("li"); // 創造一個文字元件(節點) my_text = document.createTextNode("two"); // 將文字元件加到 ui元件內下 my_element1.appendChild(my_text); // 將 <ui> 元件加入 ul 元件下 my_element.appendChild(my_element1); } function ex2() { alert("ex2"); } </script> <body> <input type="button" value="使用 DOM 範例 1 " onClick="ex1()"> <input type="button" value="使用 DOM 範例 2 " onClick="ex2()"> <br> ======== 以下為 div 結果 ======== <div id="h_div"> </body> <html> - 使用 css 。
- css 檔名 style.css：
.Table1 { font-family:arial; border:2px; } - javascript：
<html> <head> <meta content="text/html; charset=utf-8"> <!--<script type="text/javascript" src="myJS.js">--> <link href="style.css" type="text/css" rel="stylesheet"/> </head> <script language="javascript"> function ex1() { // 取得 table 的 id my_table = document.getElementById("table"); // 將 css 加入 table 中 my_table.className = "Table1"; } </script> <body> <input type="button" value="使用 css 範例 1 " onClick="ex1()"> <br> ======== 以下為 結果 ======== <table id="table"> <tr> <td>test</td> </tr> </table> </body> <html>
- css 檔名 style.css：
【AJAX XMLHttpRequest】
XMLHttpRequest
- 檢查瀏覽器所支援的 XMLHttpRequest 物件：wade/ajax/xmlHttpRequest/example/001。
【筆記】
typeof
顯示物件的類別。回傳值 undefined 表示此物件為 (未定義、null、false) ，或表示此瀏覽器不支援此物件，例如：
- 一般 browser 所支援的 XMLHttpRequest() ，不被 IE 6 及其早期的 browser 支援，必需使用 new ActiveXObject("Microsoft.XMLHttp") 來產生物件。
if (typeof XMLHttpRequest != "undefined") xmlHttp = new XMLHttpRequest(); else xmlHttp = new ActiveXObject("Microsoft.XMLHttp");或try { xmlhttp = new XMLHttpRequest(); } cache(e) { try { xmlhttp = new ActiveXObject("Microsofr.XMLHttp"); } }
onkeyPress
判斷鍵盤輸入的按鍵
<html>
<head>
<meta content="text/html; charset=utf-8">
</head>
<script language="javascript">
document.write("test document");
function press(e)
{
if (window.event)
{
e = event;
e.which = e.keyCode;
}
if (e.which == 13)
{
myForm.submit();
}
}
</script>
<body>
<form action="a.php" method="post" name="myForm">
<input name="user" type="text" size="10" onKeyPress="press(event)">
<INPUT TYPE="button" VALUE="登入">
</form>
</body>
<html>
【Reference】
Last modified 15 years ago
Last modified on Aug 13, 2009, 4:23:20 PM
