第二章: 在HTML中使用JavaScript

1、<script>元素

    1.1、 向HTML中插入JavaScript的主要方法,就是使用<script>元素。HTML 4.01为script定义了6个属性:

a)async:可选。表示脚本应该立即下载,但不应妨碍页面中其他操作(下载其他资源)。只对外部文件有效。

标记为async的脚本并不保证按照指定他们的先后属性执行。确保两者之间互不依赖,同时建议异步脚本不要在加载期间修改DOM。

b)charset :可选。表示通过src属性指定代码的字符集。由于浏览器会忽略它的值,因此现在很少使用。

c)defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行(立即下载,延迟直到遇见</html>执行)。只对外部脚本有效。HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会优先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件执行。在现实当中,延迟脚本并不一定会按照顺序执行,也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。

d)language:已废弃。原来用于表示编写代码使用的脚本语言(JavaScript,JavaScript1.2或VBScript)。大多数浏览器会忽略这个属性,因此现在很少使用。

e)src:可选。表示包含要执行代码的外部文件。

f)type:可选。可以看成是language的替代属性;表示编写代码使用的脚本语言的内容类型(MIME)。

1.2、使用<script>元素的方式有两种:内嵌式和外链式。注:在解释器对<script>元素内部的所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。

a)内嵌式

<script>

       function sayScript(){

                  alert("</script>");

}

</script>

注意:嵌入的JavaScript代码中不能出现</script>,要使用转义字符“”;

b)外链式

<script src="example.js"></script>

如果带有src属性的<script>元素不应该在其<script>和<script>标签之间再包含额外的JavaScript代码。如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代码会被忽略。

<img>和<script>他们的src属性可以指向当前HTML页面所在域之外的某个域中的完整URL。

无论如何包含代码,只要不存在defer和async属性,浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次解析。

1.3、script标签位置

放到</body>之前,为什么?

答:浏览器解析是从上到下,如果放到<head>元素中意味着要等到全部JavaScript代码都被下载,解析和执行完后,才能开始呈现页面内容。明显会影响到用户体验(不要让用户等你)。浏览器在遇到<body>标签时才开始呈现内容,所以就考虑将<script>放到<body>元素中页面内容的后面。

2、外链式优点

a)可维护性。结构同行为分离,可集中编辑JavaScript代码。

b)可缓存。多个页面使用同一文件,只需下载一次,加快页面加载速度。

c)适应未来。通过外部文件来包含JavaScript无须使用前面提到的XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。

 3、文档模式

IE5.5引入文档模式概念,通过使用文档类型(doctype)切换实现。以下两种模式会影响CSS内容呈现,某些情况下也会影响JavaScript解释执行。包含两种文档模式:

a)混杂模式(quirks mode): 会让IE的行为(包含非标准特性的)IE5相同

b)标准模式(standards mode):   让IE行为更接近标准模式。

                   

4、<noscript>元素

该元素能够出现在文档<body>中任何HTML元素,<script>除外。

包含在<noscript>元素中的内容只有在以下情况才会显示:

a)浏览器不支持脚本

b)浏览器支持脚本,但脚本被禁用

                 

思维导图

原文地址:https://www.cnblogs.com/sunqq/p/7513495.html