第2章在HTML中使用JavaScript

时间:2022-12-18 21:00:44

2.1 <script>元素

         六个属性:

1)       Async 表示应立即下载脚本,不妨碍页面其他操作,只对外部脚本文件有效。

2)       Charset 表示通过src属性指定的代码的字符集。

3)       Defer 表示脚本可以延迟到文档完全被解析和显示后再执行。只对外部脚本文件有效。

4)       Language 已废弃。

5)       Src 表示包含要执行代码的外部文件。

6)       Type 表示编写代码使用的脚本语言的内容内型。

使用<script>元素方式:

1)       页面嵌入JavaScript代码

为<script>指定type属性,把JavaScript代码放在元素内部,如:

<script type=”text/javascript”>

         Function sayHi(){

alert(“Hi”);:

}

</ script>

a)       JavaScript代码从上至下依次解释。

b)       解释器对<script>元素内部所有代码求值完毕前,页面中的其余内容不会被浏览器加载或显示。

c)        代码中任何地方出现</ script>会认为是结束的</ script>标签。可用转义字符“\”解决<\/ script>

2)       包含外部JavaScript文件

Src属性是必须的,属性的值是一个指向外部JavaScript文件的链接,如:<script type=”text/javascript” src=”example.js”></ script>

a)       在解析外部JavaScript文件时,页面的处理也会暂时停止。

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

c)        <script>元素的src可包含来自外部域的JavaScript文件。即它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整的URL,如:<script type=”text/javascript” src=”http://www.somewhere.com/afile.js”></ script>

d)       如不存在defer、async属性,浏览器会按照<script>元素出现的先后顺序依次进行排序。

2.1.1标签的位置

1)       所有的<script>元素放在<head>元素中,如:

<head>

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

</ script>

                  </head>

                  全部的JavaScript代码都下载后,才呈现页面内容(浏览器遇到<body>标签才开始呈现内容),导致浏览器页面出现明显延迟。

2)       JavaScript引用放在<body>元素中页面内容的后面,如:

<head>

         </head>

         <body>

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

</ script>

         </body>

浏览器窗口显示空白页面时间缩短。

2.1.2延迟脚本

1)       defer属性的用途是表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行。在<script>元素中设置defer,即浏览器立即下载,但延迟执行。

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

</ script>

2)       延迟脚本不一定按顺序执行,最好只包含一个延迟脚本。

3)       Defer属性只适用于外部脚本文件,因此支持HTML5的实现会忽略嵌入脚本设置的defer属性

2.1.3异步脚本

1)       async属性只适用于外部脚本,并告诉浏览器立即下载文件,但标记为async的脚本并不保证按照指定顺序执行。

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

</ script>

2)       指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容,建议异步脚本不要在加载期间修改DOM。

3)       异步脚本一定会在页面的load事件前执行,可能会在DOMContentLoaded事件触发之前或之后执行。

2.2嵌入代码域外部文件

1)       尽可能使用外部文件来包含JavaScript代码。

2)       优点:  1.可维护性:能集中精力编辑JavaScript代码。

2.可缓存:加快页面加载速度。

3.适应未来。

2.3文档模式

2.4<noscript>元素

1)       1浏览器不支持JavaScript时让页面平稳地退化。

2)       显示条件:1.浏览器不支持脚本。

   2.浏览器支持脚本,但脚本被禁用。

3)       启用了脚本,浏览器不显示<noscript>元素中任何内容。