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网站。