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语句包含内联脚本。

		

			This is a test.
		
Visit  www.sxiaw.com 

默认情况下，脚本在页面中遇到时立即执行。您通常使用head元素中的script元素，但您可以在HTML文档中的任何位置使用它。

外部脚本

您可以将脚本分成单独的文件，并使用script元素加载它们。

假设我们有一个名为simple.js的文件，其内容如下面代码所示。

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

该文件包含单个语句。然后，我们可以使用script元素中的src属性来引用此文件。

如果使用src属性，则脚本元素必须为空。您不能使用相同的脚本元素来定义内联脚本和外部脚本。

以下代码显示如何使用外部脚本。

		

			This is a test.
		
Visit  www.sxiaw.com 

src属性的值是要加载的脚本文件的URL。simple.js文件与HTML文件位于同一目录中。

需要脚本元素的结束标记，即使元素没有内容。如果在引用外部脚本时使用自动关闭标记，浏览器将忽略该元素，而不加载文件。

延迟脚本

你可以通过使用async和defer属性来控制脚本的执行。

defer属性指示浏览器在页面加载和解析之前不执行脚本。

要了解defer属性的好处，让我们看看它解决的问题。

假设simple2.js脚本文件具有如下所列的单个语句。

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

当此脚本运行时，它将找到一个id属性值为myID的元素，并将该元素的内部文本更改为myValue。

以下HTML文档使用script元素引用脚本文件。

		

			This is a test.
		

浏览器遇到script元素时的默认行为是停止处理HTML文档时，加载脚本文件并执行其内容。

这意味着浏览器在解析其余HTML之前加载并执行simple2.js中的语句，并发现了p元素。

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

脚本完成后，浏览器继续解析HTML，并找到p元素。

要解决这个问题，请将script元素放在文档的末尾。

		

			This is a test.
		
Visit www.sxiaw.com 

defer属性

在HTML5中，您可以通过使用defer属性来实现相同的效果。当浏览器遇到具有defer属性的脚本时，它会阻止加载和执行脚本，直到HTML文档中的所有元素都已解析为止。

		

			This is a test.
		
www.sxiaw.com 

您可以仅对外部脚本文件使用defer属性。它不工作的内联脚本。

异步脚本

遇到script元素时的默认浏览器行为是在加载和执行脚本时停止处理页面。

每个script元素按照它们定义的顺序同步执行，当脚本加载和运行时，不会发生其他事情。

您可以使用async属性来提高性能。例如，可以异步地执行不与HTML文档中的元素交互的自包含脚本。

当您使用async属性时，浏览器会异步加载和执行脚本，同时继续解析HTML中的其他元素，包括其他脚本元素。

以下代码显示了应用于脚本元素的async属性。

		

			This is a test.
		
www.sxiaw.com 

注意

具有async属性的脚本可能不会按照它们的定义顺序执行。

这使得async特性不适用于依赖于由其他脚本定义的函数或值的脚本。

noscript元素

noscript元素允许您向其显示内容已禁用JavaScript或正在使用浏览器的用户不支持它。

noscript元素显示内容和说明，除非他们启用JavaScript，否则他们不能使用您的网站或网页。

以下代码显示了设置为显示简单消息的noscript元素。

		

			Javascript is required!
		

		

			You  cannot use  this page  without Javascript
		

		

			This is a test.
		
Visit  www.sxiaw.com 

页面的其余部分正常处理，内容元素仍然显示。

您可以向页面添加多个noscript元素。

如果不支持JavaScript，您还可以将用户的浏览器重定向到其他网址，方法是将meta元素放在noscript元素中。

		

			This is a test.
		
www.sxiaw.com 

当不支持JavaScript或禁用JavaScript的浏览器时，这会将用户重定向到www.sxiaw.com网站。