JavaScript高級程序設計第三版（第二章：在HTML中使用JavaScript）

時間 2019-11-20

標籤 javascript 高級程序設計第三第二 html 使用欄目 JavaScript 简体版

原文原文鏈接

1、script元素

HTML4.0.1爲script元素定義了下列6個屬性：javascript

async：可選。表示應該當即下載腳本，但不該妨礙頁面中的其餘操做，好比下載其餘資源或等待加載其餘腳本。（只對外部腳本文件有效）。
charset：可選。大多瀏覽器會忽略它的值，這個屬性不多有人用。
defer：可選。表示腳本能夠延遲到文檔徹底解析和顯示以後在執行。只對外部腳本有效。
language：已廢棄。
src：可選。表示包含要執行代碼的外部文件。
type：可選。這個屬性不是必須的，若是沒有指定，其值默認是text/javascript。

使用<script>的兩種方式：直接在頁面中嵌入腳本和包含外部腳本。html

<script type="text/javascript">
    function sayHi(){
        alert("Hi!");
    }
</script>

包含在script元素內部的JavaScript代碼將被從上到下依次解釋。在解釋器對<script>元素內部的全部代碼求值完畢之前，頁面中的其他內容都不會被瀏覽器加載或顯示。（在寫嵌入代碼時，不要在代碼中任何地方出現"</script>"標籤）java

引用外部腳本：<script type="text/javascript" src="example.js"></script>。與解析嵌入式JavaScript代碼同樣，在解析外部JavaScript文件（包括下載該文件）的時候，頁面的處理會暫時中止。在引用外部腳本的時候，<script >和</script>標籤之間的代碼將會被忽略。另外，<script>元素的src屬性還能夠包含來自外部域的JavaScript文件。不管如何包含代碼，只要不存在defer和async屬性，瀏覽器都會按照<script>元素在頁面中出現的前後順序對它們依次進行解析。瀏覽器

2、標籤的位置

放入<head>元素中服務器

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Example</title>
	<script type="text/javascript" src="js/example1.js" ></script>
	<script type="text/javascript" src="js/example2.js" ></script>
</head>
<body>
	<!-- 這裏放內容 -->
</body> 
</html>

把JavaScript文件放入<head>元素中，意味着必須等到所有JavaScript代碼都被下載，解析和執行完成以後，纔開始呈現頁面內容（瀏覽器在遇到body標籤時纔開始呈現內容）。這個問題會致使瀏覽器在呈現頁面時出現明顯延遲，致使瀏覽器窗口一片空白。如今Web程序通常都把JavaScript引用放在<body>元素頁面的內容後面。異步

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Example</title>
	
</head>
<body>
	<!-- 這裏放內容 -->
<script type="text/javascript" src="js/example1.js" ></script>
<script type="text/javascript" src="js/example2.js" ></script>
</body> 
</html>

3、延遲腳本

HTML4.0.1爲<script>標籤訂義了defer屬性（只適用外部腳本）。這個屬性是代表腳本在執行的時候不會影響頁面的構造。腳本會被延遲到整個頁面都解析完畢後在運行（當即下載，延遲執行）。IE四、FireFox3.五、Safari五、Chrome是最先支持defer屬性的瀏覽器。其餘瀏覽器會忽略這個屬性，像日常腳本同樣處理。async

4、異步腳本

HTML5爲<script>標籤訂義了async屬性（只適用外部腳本）。告訴瀏覽器當即下載文件。標記爲async的腳本並不保證它們的前後順序執行。spa

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Example</title>
	
</head>
<body>
	<!-- 這裏放內容 -->
<script type="text/javascript" async src="js/example1.js" ></script>
<script type="text/javascript" async src="js/example2.js" ></script>
</body> 
</html>

以上代碼中第二個腳本可能會在第一個腳本以前執行，因此要確保二者互不依賴。指定async屬性是爲了避免讓頁面等待兩個腳本下載和執行，從而異步加載頁面其餘內容。爲此，建議異步腳本不要在加載期間修改DOM。異步腳本必定會在頁面的load事件前執行。支持異步腳本的有、FireFox3.六、Safari五、Chrome。code

5、<noscript>元素

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>Example</title>
</head>
<body>
	<!-- 這裏放內容 -->
<noscript>
	本頁面須要瀏覽器支持JavaScript。
</noscript>
</body> 
</html>