理順 JavaScript (3) – 把 JavaScript 嵌入網頁的方法

JS 代碼可以在 head 區或 body 區, 但有些區別.
JS 隨網頁的其他元素順序載入, 載入後先經過一次語法檢查, 然後順序執行;
如果 JS 中不包含 document.write 或 document.writeln 語句, 寫在 head 區比較好, 會先執行. 示範區別:

網頁中可以有多個 JS 代碼塊, 代碼塊的寫法是:
<script type="text/javascript"></script> (目前常用的)
<script type="application/javascript"></script> (較新的規定, 舊瀏覽器未必支援)

<script language="JavaScript1.5"></script> (已淘汰的方法, 其中指定的版本號碼也基本沒被支援過)

其實目前的用戶端指令碼也只有 JavaScript 和 VBScript, 好像瀏覽器會先假定是 JS, 所以可簡寫為:
<script></script>

但如果網頁提前指定了頁面的預設指令碼, 如:
<meta http-equiv:="Content-Script-Type" content="text/javascript">
如果預設指令碼不一致, 那給 script 指定 type 就是必要的了.

使用更多的還是連結外部指令碼, 這樣可以實現代碼與頁面分離:
<script src ="xxx.js"></script>
<script type="text/javascript" src ="xxx.js"></script>

JS 還可以直接寫在網頁標籤所支援的事件中, 也可以寫在標籤 A 的 href 和 標籤 FORM 的 action 屬性中;
另外, 標籤事件中的 JS 代碼可以省略 "javascript:" 的首碼. 舉例:

JS 代碼一般是寫在函數裡等待調用, 調用時可用 return 關鍵字也可省略;
在 href 和 action 屬性中調用時還是要冠上 "JavaScript:". 示範:

也可以將這些代碼分離, 這在調用外部 js 時特別需要, 但這要注意順序, 在使用對象時得確保對象已經存在. 舉例:

從上個例子中看出, 如果在 JS 代碼中使用網頁中的對象, 必須要等對象建立以後, 這有點不方便.
如果在 <script> 標籤中加入關鍵字 defer 即可讓該段代碼最後執行, 像這樣: <script defer></script>
所謂最後執行, 是在所有網頁代碼載入完畢之後, 但並不是網頁所有元素(譬如 src 指向的圖片)都載入完成之後;
其最遲也會發生在 onload 事件之前.
另外, 識別網頁中的元素可以用 ID 或 name 屬性, 以後會有更多手段. 樣本: