HTML 腳本

HTML腳本

script元素可以包括您的頁面中的腳本，在文檔中內聯定義或引用外部文件。

最常用的腳本類型是JavaScript。

對每個腳本使用一個script元素。

script元素具有局部屬性:type，src，defer，async，charset。

script元素的開始和結束標記是必需的；即使引用外部JavaScript庫時，也不允許使用自關閉標記。

在HTML5中，type屬性是可選的。在HTML5中添加了async和defer屬性。

type -指定引用或定義的腳本的類型。對于JavaScript腳本，可以省略此屬性。
src -指定外部腳本文件的URL。
defer -指定如何執行腳本。這些屬性只能與src屬性結合使用。
async -指定如何執行腳本。這些屬性只能與src屬性結合使用。
charset -指定外部腳本文件的字符編碼。此屬性只能與src屬性結合使用。

內聯腳本

HTML頁面中的JavaScript語句包含內聯腳本。

<!DOCTYPE HTML>
<html>
<head>
<script>
    document.write("This is from the script");
</script>
</head>
<body>
   <p>This is a test.</p>
   <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>

默認情況下，腳本在頁面中遇到時立即執行。您通常使用head元素中的script元素，但您可以在HTML文檔中的任何位置使用它。

外部腳本

您可以將腳本分成單獨的文件，并使用script元素加載它們。

假設我們有一個名為simple.js的文件，其內容如下面代碼所示。

document.write("This is from  the   external script");

該文件包含單個語句。然后，我們可以使用script元素中的src屬性來引用此文件。

如果使用src屬性，則腳本元素必須為空。您不能使用相同的腳本元素來定義內聯腳本和外部腳本。

以下代碼顯示如何使用外部腳本。

<!DOCTYPE HTML>
<html>
<head>
   <script src="simple.js"></script>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>

src屬性的值是要加載的腳本文件的URL。simple.js文件與HTML文件位于同一目錄中。

需要腳本元素的結束標記，即使元素沒有內容。如果在引用外部腳本時使用自動關閉標記，瀏覽器將忽略該元素，而不加載文件。

延遲腳本

你可以通過使用async和defer屬性來控制腳本的執行。

defer屬性指示瀏覽器在頁面加載和解析之前不執行腳本。

要了解defer屬性的好處，讓我們看看它解決的問題。

假設simple2.js腳本文件具有如下所列的單個語句。

document.getElementById("myID").innerText = "myValue";

當此腳本運行時，它將找到一個id屬性值為myID的元素，并將該元素的內部文本更改為myValue。

以下HTML文檔使用script元素引用腳本文件。

<!DOCTYPE HTML>
<html>
<head>
   <script src="simple2.js"></script>
</head>
<body>
   <p id="myID">This is a test.</p>
</body>
</html>

瀏覽器遇到script元素時的默認行為是停止處理HTML文檔時，加載腳本文件并執行其內容。

這意味著瀏覽器在解析其余HTML之前加載并執行simple2.js中的語句，并發現了p元素。

腳本找不到所需的元素，因此不應用任何更改。

腳本完成后，瀏覽器繼續解析HTML，并找到p元素。

要解決這個問題，請將script元素放在文檔的末尾。

<!DOCTYPE HTML>
<html>
<body>
  <p id="myID">This is a test.</p>
  <a href="http://www.w3cschool.cn">Visit www.w3cschool.cn</a>
  <script src="simple2.js"></script>
</body>
</html>

defer屬性

在HTML5中，您可以通過使用defer屬性來實現相同的效果。當瀏覽器遇到具有defer屬性的腳本時，它會阻止加載和執行腳本，直到HTML文檔中的所有元素都已解析為止。

<!DOCTYPE HTML>
<html>
<head>
   <script defer src="simple2.js"></script>
</head>
<body>
   <p id="myID">This is a test.</p>
   <a href="http://www.w3cschool.cn">www.w3cschool.cn</a>
</body>
</html>

您可以僅對外部腳本文件使用defer屬性。它不工作的內聯腳本。

異步腳本

遇到script元素時的默認瀏覽器行為是在加載和執行腳本時停止處理頁面。

每個script元素按照它們定義的順序同步執行，當腳本加載和運行時，不會發生其他事情。

您可以使用async屬性來提高性能。例如，可以異步地執行不與HTML文檔中的元素交互的自包含腳本。

當您使用async屬性時，瀏覽器會異步加載和執行腳本，同時繼續解析HTML中的其他元素，包括其他腳本元素。

以下代碼顯示了應用于腳本元素的async屬性。

<!DOCTYPE HTML>
<html>
<head>
   <script async  src="simple2.js"></script>
</head>
<body>
    <p>This is a test.</p>
    <a href="http://www.w3cschool.cn">www.w3cschool.cn</a>
</body>
</html>

注意

具有async屬性的腳本可能不會按照它們的定義順序執行。

這使得async特性不適用于依賴于由其他腳本定義的函數或值的腳本。

noscript元素

noscript元素允許您向其顯示內容已禁用JavaScript或正在使用瀏覽器的用戶不支持它。

noscript元素顯示內容和說明，除非他們啟用JavaScript，否則他們不能使用您的網站或網頁。

以下代碼顯示了設置為顯示簡單消息的noscript元素。

<!DOCTYPE HTML>
<html>
<head>
<script defer src="simple2.js"></script>
<noscript>
    <h1>Javascript is required!</h1>
    <p>You  cannot use  this page  without Javascript</p>
</noscript>
</head>
<body>
   <p>This is a test.</p>
   <a href="http://www.w3cschool.cn">Visit  www.w3cschool.cn</a>
</body>
</html>

頁面的其余部分正常處理，內容元素仍然顯示。

您可以向頁面添加多個noscript元素。

如果不支持JavaScript，您還可以將用戶的瀏覽器重定向到其他網址，方法是將meta元素放在noscript元素中。

<!DOCTYPE HTML>
<html>
<head>
<script defer src="simple2.js"></script>
<noscript>
   <meta http-equiv="refresh"  content="0; http://www.www.w3cschool.cn"/>
</noscript>
</head>
<body>
   <p>This is a test.</p>
   <a href="http://www.w3cschool.cn">www.w3cschool.cn</a>
</body>
</html>

當不支持JavaScript或禁用JavaScript的瀏覽器時，這會將用戶重定向到www.w3cschool.cn網站。

? Previous Next ?

欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

HTML教程