在HTML中使用JavaScript_html 使用 script 中的值-优快云博客

本文链接：https://blog.youkuaiyun.com/y935072878/article/details/86631434

在HTML中使用JavaScript

script元素
嵌入代码和外部文件
文档模式
noscript元素

script元素

HTML4.0为script定义了下列6个属性：

async:可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。
charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。
defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。
language：已废弃。原来用于表示编写代码使用的脚本语言（如JavaScript、JavaScript1.2或VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。
src：可选。表示包含要执行代码的外部文件。
type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。
在非IE浏览器中还可以使用以下值：application/javascript和application/ecmascript。考虑到约定俗称和最大限度的浏览器兼容性，目前type属性的值依旧还是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

使用script 元素的方式有两种：直接在页面中嵌入JavaScript代码和包含外部JavaScript文件
在使用scrip元素嵌入JavaScript代码时，只须为scrip指定type属性。然后，像下面这样把JavaScript代码直接放在元素内部即可：

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

注意：在使用script嵌入JavaScript代码时，不要在代码中的任何地方出现"</script .>“字符串，因为按照解析嵌入式代码的规则，当浏览器遇到字符串</script.>时，会认为是结束的标签，可以通过转义字符”/"解决这个问题。例如：

<script typr="text/javascript">
	function sayScript(){
		alert("<\/script>");
	}
</script>

如果要通过script元素来包含外部JavaScript文件，那么src属性就是必需的。这个属性的值是一个指向外部JavaScript文件的链接，例如：

<script type="text/javascript" src="example.js"></script>

如果是在XHTML文档中，也可以省略前面实例代码中结束的/script标签，例如：

<script type="text/javascript" src="example.js"/>

但是，不能在HTML文档使用这种语法。原因是这种语法不符合HTML规范，也得不到某些浏览器（尤其是IE）的正确解析。

另外，通过script元素的src属性还可以包含来自外部域的JavaScript文件，这一点既让script元素倍显强大，又让它备受争议。在这一点上，script与img元素非常相似，即它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整URL，例如：

<script type="text/javascript" src="hhtp://www.somewhere.com/afile.js"></script>

无论如何包含代码，只要不存在defer和async属性，浏览器都会按照script元素在页面中出现的顺序对它们依次进行解析，换句话说，在第一个script元素包含的代码解析完成后，第二个<script包含的代码才会被解析，然后才是第三个，第四个。。。

标签的位置

按照传统的做法，所有scrip元素都应该放在页面的head元素中，例如：

<!DOCTYPE html>
<html>
	<head>
		<title>Example HTML Page</title>
		<script type="text/javascript" src="example1.js"></script>
		<script type="text/javascript" src="example2.js"></script>
	</head>
	<body>
		<!--这里放内容-->
	</body>
</html>

这种写法，对于那些需要很多JavaScript代码的页面来说，会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代web应用程序一般都会把全部JavaScript引用放在<body.>元素中页面内容的后面，如下列所示：

<!DOCTYPE html>
<html>
	<head>
		<title>Example HTML Page</title>
	</head>
	<body>
		<!--这里放内容-->
		<script type="text/javascript" src="example1.ja"></script>
		<script type="text/javascript" src="example2.js"></script>
	</body>
</html>

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。而用户也会因为浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快。

延迟脚本

HTML4.01为scrip标签定义了defer属性，这个属性的用途是表明脚本在执行时不会影响页面的构造，也就是，脚本会被延迟到整个页面都解析完毕后再运行，因此，在scrip元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行

<!DOCTYPE html>
<html>
	<head>
		<title>Example HTML Page</title>
		<script type="text/javascript" defer="defer" src="example1.ja"></script>
		<script type="text/javascript" defer="defer" src="example2.js"></script>
	</head>
	<body>
		<!--这里放内容-->
	</body>
</html>

在这里，虽然把scrip元素放在了文档的head元素中，但其中包含的脚本将延迟到浏览器遇到</html.>标签后面再执行。前面提到过，defer属性只适用于外部脚本文件。这一点在HTML5中已经明确规定，因此支持HTML5的视线会忽略给嵌入脚本设置的defer属性。IE4~IE7还支持对嵌入脚本的defer属性，但IE8及之后版本则完全支持HTML5规定的行为。
IE4、Firefox3.5、Safari5和Chrome是最早支持defer属性的浏览器。其他浏览器会忽略这个属性，像平常一样处理脚本。因此，把拖延脚本放在页面底部仍然是最佳选择。

在XHTML文档中，要把defer属性设置为defer=“defer”。

异步脚步

HTML5为scrip元素定义了async属性。这个属性与defer属性类似，都用于改变处理脚本的行为。同样与defer类似，async只适用于外部脚本文件，并告诉浏览器立即下载文件，但与defer不同的是，标记为async的脚本并不保证按照指定它们的先后顺序执行。例如：

<!DOCTYPE html>
<html>
	<head>
		<title>Example HTML Page</title>
		<script type="text/javascript" async src="example1.ja"></script>
		<script type="text/javascript" async src="example2.js"></script>
	</head>
	<body>
		<!--这里放内容-->
	</body>
</html>

在以上代码中，第二个脚本文件可能会在第一个脚本文件之前执行。因此，确保两者之间互不依赖非常重要。指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载到页面其他内容。因此，建议异步脚本不要在加载期间修改DOM。
异步脚本一定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步脚本的浏览器有Firefox3.6、Safari5和Chrome.

在XHTML文档中，要把async属性设置为async=“async”。

不推荐使用的语法

在最早引入scrip元素时，有些不支持JavaScript的浏览器（最典型的是Mosaic）中就会导致问题，会把scrip元素的内容直接输出到页面中，因而会破坏页面的布局和外观。下面的解决方案会让不支持scrip元素的浏览器能够隐藏嵌入的JavaScript代码，就是把JavaScript代码包含在一个HTML注释中：

<scripte><!--
	function sayHi(){
		alert("Hi!");
	}
//--></script>

给脚本加上HTML注释后，Mosaic等浏览器就会忽略scrip标签中的内容；而那些支持的浏览器，则必须进一步确认其中是否包含需要解析的JavaScript代码。

嵌入代码和外部文件

使用外部文件的优点：
可维护性：遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScript文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标记的情况下集中精力编辑JavaScript代码。
可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。因此，最终结果就是能够加快页面加载的速度。
适应未来：通过外部文件来包含JavaScript无须使用前面提到的XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。

文档模式

IE5.5引入了文档模式的概念，而这个概念是通过使用文档类型（doctype）切换实现的。最初的两种文档模式是：混杂模式（quirks mode）和标准模式（standards mode）。混杂模式会让IE的行为与（包含非标准特性的）IE5相同，而标准模式则让IE的行为更接近标准行为。
如果在文档开始处没有发现文档类型声明，则所有浏览器都会默认开启混杂模式。但采用混杂模式不是什么值得推荐的做法，因为不同浏览器在这种模式下的行为差异非常大，如果不使用某些hack技术，跨浏览器的行为根本没有一致性可言。
对于标准模式，可以通过使用下面任何一种文档类型来开启：

<!--HTML 4.01 严格型-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!--XHTML 1.0 严格型-->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/xhtml1-strict.dtd">

<!--HTML 5-->
<!DOCTYPE html>

而对于标准模式，则可以通过使用过渡型（transitional）或框架集型（frameset）文档类型来触发，如下所示：

<!--XHTML 4.01 过渡型-->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!--XHTML 4.01 框架集型-->
<!DOCTYPE HTML PUBLIC
"-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd">

<!--XHTML 1.0 过渡型-->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!--XHTML 1.0 框架集型-->
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。因此，当有人提档“标准模式”时，有可能是指这两种模式中的任何一种。而且，检测文档模式时也不会发现什么不同。

noscript元素

早期浏览器都会面临一个特殊的问题，即当浏览器不支持JavaScript时如何让页面平稳地退化。对这个问题的解决方案就是创造一个<noscript.>元素，用以在不支持JavaScript的浏览器中显示替代的内容，这个元素可以包含能够出现在文档body中的任何HTML元素——scrip元素除外，包含在noscript元素中的内容只有在下列情况下才会显示出来：
1.浏览器不支持脚本；
2.浏览器支持脚本，但脚本被禁用。
符合上述任何一个条件，浏览器都会显示noscript中的内容。而在除此之外的其他情况下，浏览器不会呈现noscript中的内容。

<html>
	<head>
		<title>Example HTML Page</title>
		<script type="text/javascript" defer="defer" src="example1.js"></script>
		<script type="text/javascript" defer="defer" src="example2.js"></script>
	</head>
	<body>
		<noscript>
			<p>本页面需要浏览器支持JavaScript。</p>
		</noscript>
	</body>
</html>