js_02在 HTML 中使用 JavaScript-CSDN博客

本文链接：https://blog.csdn.net/socaicaicaicai/article/details/122808014

在 HTML 中使用 JavaScript

在 HTML 中使用 JavaScript
- script元素
- - script属性
  - 使用

在 HTML 中使用 JavaScript

script元素

向 HTML 页面中插入 JavaScript 的主要方法，就是使用

script属性

async ：可选应该立即下载脚本，但不妨碍也页面中其他的操作进行，如下载次元或者等待加载其他脚本，仅对外部脚本文件有效
charset ：可选。通过src属性指定代码的字符集
defer 可选表示脚本可以延迟到文档完全被解析和显示之后再执行，仅对外部脚本文件有效 IE7以及更早版本对嵌入脚本也支持该属性
language：已废弃原用于表示编写代码使用的脚本语言，浏览器会忽略该属性，现已废弃
src：可选。表示包含要执行代码的外部文件
type：可选。language属性的替代，表示编写代码使用的脚本语言的内容类型。虽然text/javascript 和text/ecmascript 都不被推荐使用，但是一直有使用text/javascript。实际上服务器传送javascript文件时使用的MIME类型通常是application/x-javascript，但type中设置值可能导致脚本被忽略。不设置默认值仍为text/javascript

使用

直接在页面中嵌入 JavaScript 代码

设置type type=“text/javascript”
代码将被从上至下依次解释

**在使用"字符串。如果一定需要在前面加一个/转译字符

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

包含外部 JavaScript文件

src 属性就是必需的，这个属性的值是一个指向外部 JavaScript 文件的链接
需要注意的是，带有 src 属性的标签之间再包含额外的 JavaScript 代码。如果包含了嵌入的代码，则只会下载并执行外部脚本文件，嵌入的代码会被忽略。

只要不存在 defer 和 async 属性，浏览器都会按照

标签的位置

传统

<!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>

如果外部引用文件都放在head里，意味全部js文件代码都下载解析以及执行完毕后才可以继续渲染body里面的内容，会造成页面延迟。
2. 部 JavaScript 引用放在元素中页面内容的后面
在解析包含的 JavaScript 代码之前，页面的内容将完全呈现在浏览器中，代码如下：

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

延迟脚本

HTML 4.01 为

<!DOCTYPE html> 
<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> 
 <!-- 这里放内容 --> 
 </body> 
</html>

说明：上面代码script元素放在head中，但是其中包含的脚本将延迟到浏览器遇到html结束标签后再执行。html5规范要求脚本按照出现的先后顺序执行，理论第一个脚本文件会先执行。脚本会先于DOMContentLoaded 事件前执行。但是实际脚本并不一定按照顺序执行，也不一定在DOMContentLoaded 事件触发前执行，所以最好只包含一个延迟脚本，避免因执行顺序引发的错误。

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

异步脚本

html5为script元素定义了async属性。作用：改变脚本的处理行为，类似defer属性async只适用于外部脚本文件，并告诉浏览器立即下载文件。不同的是标记为async脚本并不保证按照指定先后顺序去执行。

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

以上代码，第二个脚本文件可能会在第一个脚本文件执行前执行，因此要确保外部脚本文件之间无依赖关系。最大的目的是不让页面等待两个脚本的下载和执行，从而异步加载其他内容。建议在加载脚本期间不要修改DOM。
异步脚本一定会在页面的load事件前执行，但是可以再在 DOMContentLoaded 事件触发之前活之后执行。支持异步脚本的浏览器有Firefox3.6 safari chrome
在 XHTML 文档中，要把 async 属性设置为 async=“async”。

在XHTML中的用法

XML 可扩展超文本标记语言。是将html作为xml的应用而重新定义的一个标准。编写xhtml代码的规则要比编写html严格，且直接影响能否嵌入javascript代码时使用script标签，以下代码在html中有效，在xhtml中无效。

<script type="text/javascript"> 
 function compare(a, b) { 
 if (a < b) { 
 alert("A is less than B"); 
 } else if (a > b) { 
 alert("A is greater than B"); 
 } else { 
 alert("A is equal to B"); 
 } 
 } 
</script>

在html中，有特殊规则用以确定script标签元素中的那些内容可以被解析，但这些特殊标志规则在xhtml中不适用，比较语句<在xhtml中会被当做开始一个新标签来解析。会导致语法错误。避免在xhtml中出现类似语法错误的方法有两个。一是用相应html实体替换代码中所有的小于号，替换后如下：

<script type="text/javascript"> 
 function compare(a, b) { 
 if (a &lt; b) { 
 alert("A is less than B"); 
 } else if (a > b) { 
 alert("A is greater than B"); 
 } else { 
 alert("A is equal to B"); 
 } 
 } 
</script>

这样的代码可以运行但是不易读，另一种方法报错让相同代码再xhtml中运行，用一个CData片段来包含js代码。在xhtml中CData片段是文档中一个特殊区域。这个区域中可以包含不需要解析的任意格式的文本内容。代码：

<script type="text/javascript"><![CDATA[ 
 function compare(a, b) { 
 if (a < b) { 
 alert("A is less than B"); 
 } else if (a > b) { 
 alert("A is greater than B"); 
 } else { 
 alert("A is equal to B"); 
 } 
 } 
]]></script>

在兼容xhtml的浏览器中，这个方法可以解决问题。实际有些浏览器不兼容xhtml。再使用js注释将CData标记注释就可以了

<script type="text/javascript"> 
//<![CDATA[ 
 function compare(a, b) { 
 if (a < b) { 
 alert("A is less than B"); 
 } else if (a > b) { 
 alert("A is greater than B"); 
 } else { 
 alert("A is equal to B"); 
 } 
 } 
//]]> 
</script>

这种格式在所有浏览器中可以正常使用

在将页面的MIME的类型指定为’application/xhtml+xml’情况下回出发XHTML模式。并不是所有浏览器都支持以这种方式提供XHTML文档

不推荐使用的语法

最早引入script元素的时候，元素与html的解析是有冲突的，不支持js的浏览器（最典型的是 Mosaic）会把script标签的内容直接输出到页面中，因而破坏页面的结构。

Netscape与Mosaic协商让不支持script元素的浏览器能隐藏嵌入的js代码。解决办法为把js代码包含在html注释中如下：

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

给脚本加html注释后，支持js的浏览器需进一步确认其中是否包含js代码。虽然注释代码得到所有浏览器的认可，也能被正确解析，但是所有浏览器有已支持js，所以这种格式也不会再使用，在XHTML模式下，脚本包含在XMl注释中，所以会被脚本忽略。

嵌入代码与外部文件

在html中嵌入js代码虽可执行，但一般认为最好的做法还是尽可能使用外部文件。优点：

可维护性遍及不同html页面的js会造成维护问题。所以把js代码都放在一个文件夹中维护比较合理。可以分离html和js让开发代码更专注。
可缓存浏览器能够根据具体的设置缓存连接的所有外部js文件，如果两个页面同时使用一个文件，这个文件只需要下载一次。从而加快页面的加载速度。
可延展性通过外部文件来包含js代码无须使用前面提到的XHTML或者注释hack。HTML和XHTML包含外部文件的语法是相同的。

文档模式

IE5.5引入了文档模式的概念。通过使用文档类型切换来实现。最初文档模式：混杂模式和标准模式

混杂模式会让IE的行为与IE5相同，而标准模式让IE的行为更接近标准行为。两种行为主要影响的是css的内容，但是某些情况也会影响js的执行。

如果文档在开始处没有声明文档类型，则所有的浏览器都会默认开启混杂模式。采用混杂模式不是值得推荐的做法。因为不同浏览器下的行为差异很大，如果不适用某些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/DTD/xhtml1-strict.dtd"> 
<!-- HTML 5 --> 
<!DOCTYPE html> 
而对于准标准模式，则可以通过使用过渡型（transitional）或框架集型（frameset）文档类型来触发，
如下所示：
<!-- HTML 4.01 过渡型 --> 
<!DOCTYPE HTML PUBLIC 
"-//W3C//DTD HTML 4.01 Transitional//EN" 
"http://www.w3.org/TR/html4/loose.dtd"> 
<!-- HTML 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">

准标准模式与标准模式非常接近，几乎没有什么差异

元素

当浏览器不支持js时如何让页面平稳地退化。对这个问题的最终解决方案是元素，用以在不支持js的浏览器中显示替代的内容。这个元素的位置可以出现在body元素中除了script元素中的的其他任意位置上。包含在元素中的内容只有在下列情况才显示出来：

浏览器不支持脚本
浏览器支持脚本，但脚本被禁用

<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。
 </noscript> 
 </body> 
</html>

这个页面会在脚本无效的情况下向永不显示一条消息，而在启用了脚本的浏览器中，用户永远也看到不到脚本。

小结

把js插入到html页面中使用script元素，使用这个元素可以把js嵌入到html页面中可以让脚本和标记混合。也可以包含外部文件需要注意的是：

在包含js外文件时。src属性需要指向相应文件的url。而这个文件既可以是包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件
所有script元素都会按照它们在页面中出现的先后顺序依次被解析。在不使用defer和async属性的情况下，只有在解析完前面的script元素中的代码后，才会开始解析后面script元素中的代码。
由于浏览器会先解析完不使用defer属性的script元素中的代码，然后再解析后面的内容，所以一般应该会把script元素放在页面最后，body结束标签前。
使用defer属性可以让脚本在文档完全呈现之后再执行。延迟及哦啊本总是按照指定顺序执行。
使用async属性可以标识当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

另外，使用noscript元素可以指定在不支持脚本的浏览器中显示替代内容，但在启动了脚本的情况下浏览器不会显示noscript的任何内容。