Changes between Initial Version and Version 1 of wade/ajax


Ignore:
Timestamp:
Aug 13, 2009, 3:36:33 PM (15 years ago)
Author:
wade
Comment:

--

Legend:

Unmodified
Added
Removed
Modified

  • wade/ajax

    v1 v1  
     1[[PageOutline]]
     2
     3== javascript ==
     4 1. 盡量包成一個 .js 檔，可以 HTML 保持精簡及易讀性。
     5 1. 引入方式為：
     6    {{{
     7    <head>
     8       <script type="text/javascript" src="xxx.js"></script>
     9    </head>
     10    }}}
     11 1. javascript 會在 HTML 載入後自動執行。
     12 1. javascript 執行的時間會早於 HTML 。
     13 1. 在 javascript 中的 document 會指向 <body> 這個元件。
     14 1. 以 DOM 建立以下架構
     15    {{{
     16    <body>--<div>--+--"test DOM"
     17                   |
     18                   +--<br>
     19                   |
     20                   +--<ul>--+--<li>--"one"
     21                            |
     22                            +--<li>--"tow"
     23    }}}
     24    程式碼：
     25    {{{
     26<html>
     27   <head>
     28      <meta content="text/html; charset=utf-8">
     29      <!--<script type="text/javascript" src="myJS.js">-->
     30   </head>
     31   <script language="javascript">
     32      function ex1()
     33      {
     34         // 取得 w_div 這 div 元件的 id 。
     35         my_div = document.getElementById("h_div");
     36         // 創造一個文字元件(節點)
     37         my_text = document.createTextNode("test DOM");
     38         // 將文字元件加到 div 元件內
     39         my_div.appendChild(my_text);
     40
     41         // 創造一個 <br> 元件
     42         my_element = document.createElement("br");
     43         // 將 <br> 元件加入 div 元件下
     44         my_div.appendChild(my_element);
     45
     46         // 創造一個 <ul> 元件
     47         my_element = document.createElement("ul");
     48         // 將 <ul> 元件加入 div 元件下
     49         my_div.appendChild(my_element);
     50
     51
     52         // 創造一個 <ui> 元件
     53         my_element1 = document.createElement("li");
     54         // 創造一個文字元件(節點)
     55         my_text = document.createTextNode("one");
     56         // 將文字元件加到 ui元件內下
     57         my_element1.appendChild(my_text);
     58         // 將 <ui> 元件加入 ul 元件下
     59         my_element.appendChild(my_element1);
     60
     61         // 創造一個 <ui> 元件
     62         my_element1 = document.createElement("li");
     63         // 創造一個文字元件(節點)
     64         my_text = document.createTextNode("two");
     65         // 將文字元件加到 ui元件內下
     66         my_element1.appendChild(my_text);
     67         // 將 <ui> 元件加入 ul 元件下
     68         my_element.appendChild(my_element1);
     69      }
     70      function ex2()
     71      {
     72         alert("ex2");
     73      }
     74   </script>
     75   <body>
     76      <input type="button" value="使用 DOM 範例 1 " onClick="ex1()">
     77      <input type="button" value="使用 DOM 範例 2 " onClick="ex2()">
     78      <br>
     79      ======== 以下為 div 結果 ========
     80      <div id="h_div">
     81   </body>
     82<html>
     83    }}}
     84 1. 使用 css 。
     85   * css 檔名 style.css：
     86     {{{
     87     .Table1
     88     {
     89       font-family:arial;
     90       border:2px;
     91     }
     92     }}}
     93   * javascript：
     94     {{{
     95<html>
     96   <head>
     97      <meta content="text/html; charset=utf-8">
     98      <!--<script type="text/javascript" src="myJS.js">-->
     99      <link href="style.css" type="text/css" rel="stylesheet"/>
     100   </head>
     101   <script language="javascript">
     102      function ex1()
     103      {
     104         // 取得 table 的 id
     105         my_table = document.getElementById("table");
     106         // 將 css 加入 table 中
     107         my_table.className = "Table1";
     108      }
     109
     110   </script>
     111   <body>
     112      <input type="button" value="使用 css 範例 1 " onClick="ex1()">
     113      <br>
     114      ======== 以下為 結果 ========
     115      <table id="table">
     116         <tr>
     117            <td>test</td>
     118         </tr>
     119      </table>
     120   </body>
     121<html>
     122
     123     }}}
     124== 筆記 ==
     125
     126=== typeof ===
     127顯示物件的類別。回傳值 undefined 表示此物件為 (未定義、null、false) ，或表示此瀏覽器不支援此物件，例如：
     128 * 一般 browser 所支援的 XMLHttpRequest() ，不被 IE 6 及其早期的 browser 支援，必需使用 new ActiveXObject("Microsoft.XMLHttp") 來產生物件。
     129   {{{
     130   if (typeof XMLHttpRequest != "undefined")
     131      xmlHttp = new XMLHttpRequest();
     132   else
     133      xmlHttp = new ActiveXObject("Microsoft.XMLHttp");
     134   }}}
     135   或
     136   {{{
     137   try
     138   {
     139      xmlhttp = new XMLHttpRequest();
     140   }
     141   cache(e)
     142   {
     143      try
     144      {
     145         xmlhttp = new ActiveXObject("Microsofr.XMLHttp");
     146      }
     147   }
     148   }}}
     149
     150=== onkeyPress ===
     151判斷鍵盤輸入的按鍵
     152{{{
     153<html>
     154   <head>
     155      <meta content="text/html; charset=utf-8">
     156   </head>
     157   <script language="javascript">
     158      document.write("test document");
     159      function press(e)
     160      {
     161         if (window.event)
     162         {
     163            e = event;
     164            e.which = e.keyCode;
     165         }
     166         if (e.which == 13)
     167         {
     168            myForm.submit();
     169         }
     170      }
     171   </script>
     172   <body>
     173      <form action="a.php" method="post" name="myForm">
     174         <input name="user" type="text" size="10" onKeyPress="press(event)">
     175         <INPUT TYPE="button" VALUE="登入">
     176      </form>
     177   </body>
     178<html>
     179}}}
     180
     181== reference ==
     182 1. [http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html http status, RFC 2616 Hypertext Transfer Protocol -- HTTP/1.1 ]
     183 1. http://blog.miniasp.com/?tag=/http+status+code