引言:在学习JavaScript之前,我们要先学习如何在HTML中引用JavaScript,此篇总结将会详细介绍<script>元素的用法及其属性,并分析几种引用方式的优劣,以及延迟脚本和异步脚本的区别。
<script>的介绍及其属性:
向HTML中插入JavaScript的只要方法使用<script>元素,这个元素由Netscape (网景公司)创造,并在Netscape Navigator 2中首先实现,后来这个元素被加入到正式的HTML规范中。HTML4.01
为<script>定义了六个属性:
1、async [ə'zɪŋk](异步) :可选,表示应该立即下载脚本,当时不妨碍页面中的其他操作,比如下载其他资源或者等待其他脚本,只对外部脚本文件有效
2、charset (字符集): 可选,表示通过src 属性指定的代码的字符集,由于太多浏览器会忽略它的值,所以平时很少有用到。
3、defer(延迟) :可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部文件有效,IE7以及更早的版本对嵌入脚本也支持这个属性。
4、langage :已废弃的属性,原先用于表示编写代码使用的脚本语言,比如:JavaScript、JavaScript1.2 或者VBScript ,大多数浏览器忽略这个属性。就不用了。
5、src :可选,表示包含要执行的文件。
6、type :可选,可以看成是 langage 的替代,表示编写代码使用的脚本语言的内容的类型(也称为MIME类型),这个属性不是必要的,如果没有指定这个属性,那么其默认为:text/javascript.。
<script>的使用:
最简单的方式直接嵌入代码:在使用<script>嵌入JavaScript时 ,只需要指定type 即可 :<script type="text/javascript"> ...代码段...</script> , 这里注意的是代码是从上到下执行,在碰到"</script>"
的时候就停止,所以代码中慎重不要随意出现这个代码段,比如 “alert (“</script>”)”这样会造成代码停止,但是如果非得使用的话,可以这样:“alert (“< /script>”)”。
外部引用方式:使用 src 属性标出URL,从外部引用:<script type="text/javascript" src="脚本文件的URL"></script> 这种方式平时我们用的比较多,平时我们不指定 defer 与async 属性的话,
那么脚本文件会按照它在页面中的出现顺序来执行。
嵌入代码与外部文件的两种方式的优劣:虽然两种方式都可以让页面使用到JavaScript ,但是一般认为最好的方式是采用外部文件引用的方式(虽然这不是硬性要求),但是相对于直接在页面中
嵌入代码让页面看起来更 “臃肿”,不得不说外部引用其优点也是和明显的,而且不仅如此,外部引用的好处还有:
1、可维护性:遍及不同HTML 页面的JavaScript 会造成维护问题(如果采用嵌入式,碰到每个页面都用一个JavaScript代码,那么如果这个JavaScript代码需要修改就得每个页面都改一次,会增加维护难度)。
而如果采用外部引用,直接修改一次玩不文件就行了。
2、可缓存:浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件,也就是说如果两个页面都采用一个文件,那么这个文件只需要下载一次就可以了。
3、适应未来:HTML与XHTML包含外部文件的语法是相同的。(XHTML真的是很严格)
页面中<script>的位置:
按照惯例我们可能会把 <script>放到<head>标签里面,这种方式就是希望把外部引用的文件放到一起,让页面看起来更规范,但是不好的地方是页面加载到<head>时会停止然后等待
JavaScript加载结束才继续执行,这样一来页面的加载速度性能会大打折扣(因为网页加载到body 时才开始呈现页面内容,所以如果在head加载JavaScript造成页面延迟的话,那么在延迟期间
页面将是以一片空白)。为了避免这样的情况,一般我们会将JavaScript文件的引用放到body 元素中页面的内容后面:
<body>
页面内容》》》》》》》》》》》》》》》》》》
页面内容》》》》》》》》》》》》》》》》》》
页面内容》》》》》》》》》》》》》》》》》》
<script src="demo.js" type="text/javascript"></script>
</body>
延迟脚本 defer:
这个属性的用途是表明脚本在执行时不会影响页面构造,也就是说,脚本会延迟到整个页面都解析完后在再运行,因此使用这个元素就是告诉
浏览器“ 立即下载,但是请延迟执行”,(一般来说就是延迟到浏览器碰到 </html>标签后再执行,就算我们将<script>放到<head>中也是如此)。
HTML5规范要求脚本按照它们出现的先后顺序执行,因此第一个延迟脚本会先于第二个延迟脚本执行,而这两个脚本会先于DOMContentLoaded事件。在现实当中,延迟脚本并不一定会按照顺序执行,
也不一定会在DOMContentLoaded事件触发前执行,因此最好只包含一个延迟脚本。
IE4~IE7还支持对嵌入脚本的defer属性,但IE8以及之后的版本则完全支持HTML5规定的行为。
IE4,Firefox 3.5,Safari 5和Chrome是最早支持defer属性的浏览器。其他浏览器胡忽略这个属性,像平常一样处理脚本,为此,把延迟脚本放在页面底部仍然是最佳选择。
defer属性的脚本是在页面解析完成后,按照顺序执行,同时会在document的DOMContentLoaded之前执行。
异步脚本 async:
这个属性的作用不让页面等待脚本下载和执行,从异步加载页面和其他内容。为此,建议异步脚本不要在加载期间修改DOM .
async属性的脚本会在下载结束后立刻执行,同时会在window的load事件之前执行,所以就会出现顺序被打乱的情况;
没有defer 与async:
浏览器会立即加载并执行指定的脚本,“立即”指的是在渲染该 script 标签之下的文档元素之前,也就是说不等待后续载入的文档元素,读到就加载并执行。
<noscript>:
早期的浏览器面临一个问题,即当浏览器不支持javascript 的时候,如何考虑 “平稳退化” ,此时就有了<noscript>的作用了。这个标签的作用是:当浏览器不支持javascript,或者是支持但是被
停止使用JavaScript 的时候用来替代内容所用。
例如:
<body>
<noscript> <p>本页面需要启用javascript功能</p> </noscript>
</body>
---------------------------------------------------------------------------
本章完,下一章"预告“:JavaScript的语法,数据类型,控制语句。