第二章节的内容和第一章节比起来,同样不是很多。在第二章节中,主要讲述了在HTML中使用JavaScript的一些事项。栗如script的位置,属性,嵌入式和外链式的区别(其实我觉得区别应该很容易就能猜到)和维护的便利性,还有一个新的名词,平稳退化,以及文档模式。
目录
script的位置和属性
首先,讲述了<script>的使用,以及HTML4.0W为他定义的六个属性:defer——也就是延迟脚本,这个属性表示,当调用时,延迟到页面内容(body)显示完毕后才会运行,只用于引用外部文件时,可选;async——可理解为异步处理,只用于引用外部文件时,可选;src——需要执行的外部文件的路径,可选;charset——与src属性同时使用,表达:当使用src属性调用的外部文件所指定的字符集,可选(由于大多数浏览器会忽略他的值,因此这个属性很少有人使用。——摘自书本原文);language——已废弃,不谈它;type——可看做是language的替代属性,表达编写代码使用的脚本语言的内容类型。
<script>的摆放位置,一般应该放置在<head>里面,可一旦script的代码量过于庞大,会将页面的加载速度拉慢很多,用户将在页面上面临长时间的加载中的白页面。为了避免这种情况的发生,当script的代码量过大时,可以将其放在<body>之中,</body>之前,也就是页面的最底部。这样,当页面的内容加载完成后,才会加载script的内容,用户可以不必面临白页面过长时间,以提高用户体验。
第二段里,有说道<script>的六大属性,其中有一项是defer,延迟脚本运行暨延迟脚本。defer只能用于外部文件引用,外部文件的路径属性是src,作为script的属性之一,他也可以放在head里或者body里,也就是说defer也可以放在这两个位置。(IE4、Firefox 3.5、Safari 5和Chrome是最早支持defer属性的浏览器。其他浏览器会忽略这个属性,像平常一样处理脚本。为此,把延迟脚本放在页面底部仍然是最佳选择。——摘自书本原文)添加defer属性外部文件,会在页面全部解析之后再进行加载。页面全部解析,也就是页面的内容显示完毕,但是点击事件等需要操作的,用户交互响应的事件不会加载。使用defer属性,可以使我们想要达到的效果,呈现在页面内容完全显示之后。
<script>async属性。异步处理其实不只是async属性,defer也是异步处理的一种。都是改变外部文件的加载,但是不同的是async属性的外部文件可以有多个,而且执行的顺序不一定会按照编辑顺序来实现。也就是说,第二个async属性文件可能会比第一个async属性文件先执行。同时,defer属性的文件,是在页面解析完成之后再进行加载,但是async属性的文件是相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行)。这两个属性的使用相对来说,确实挺少的,因为在页面加载中很多的JS文件都会使用上,一般不会使用这两个属性,但是和异步扯上关系,又很重要。
<script>src属性。src属性后接URL路径,添加该属性后,表明该<script>为引用文件,<script>标签中的代码将不会被执行。src后接的URL路径,可以是绝对路径,也可以是相对路径。可以是网站内的一个文件的路径,也可以指向另一个网站。这里顺带说一下src路径的问题。当所编辑的文件和所引用的文件是同级的时候,可以直接在src后面引用文件名;若非同级的时候,可以返回到与所需文件的同级。以src图片路径举例:
<script>charset属性。charset属性,用来规定外部文件中代码所使用的字符集,现在主流浏览器全部支持charset,但一般来说,浏览器会忽略他的值,所以使用频率很低。但是当引用的外部文件代码的字符集与文档中的代码字符集不同时,会用上charset属性。
<script>language属性。已废弃,不管他。
<script>type属性。他,可以看做是language属性的替代值。他一共有五个常用的值,分别是:text/javascript (默认),text/ecmascript,application/ecmascript,application/javascript和text/vbscript。这里面的最常用的,大概就数text/javascript 和application/javascript了。ecmascript在第一章的时候书中有谈到过,他是构成JavaScript的基础。其次的vbscript(Microsoft Visual Basic Scripting Edition)则是程序开发语言 Visual Basic 家族的最新成员。application/javascript,感觉处于一个比尴尬的位置吧。因为text/javascript和text/ecmascript已经是属于不被推荐使用了,但是因为长期人们的习惯使然,还是在使用text/javascript。实际上服务器在传送javascript文件的时候使用的MIME类型通常是application/x-javascript,但在type中设置这个值却可能导致脚本被忽略。考虑到约定俗成和最大限度的浏览器兼容性,目前type属性的值依旧还是text/javascript。不过,这个属性并不是必需的,如果没有指定这个属性,则其默认值仍为text/javascript。——摘自原文
script嵌入式和外链式的区别
总体来说,并没有任何地方要求说一定要嵌入式或者外链式,但是一般来说,企业都会要求使用外链式,因为后期维护会比较容易一些。嵌入式我一般用在准备代码期间,也就是没有定稿的时候进行调试,这样不用来回切换编辑器窗口了。等到确定了样式和事件之后,再转存到外部文件进行引用,是挺麻烦的,但是,编辑器看着会很舒服。原文中提到的的外链式的优点有:可维护性、可缓存、适应未来。可维护性前面有提到过,可缓存是指,两个不同的页面使用到了同一个js文件,那么这个文件只需要下载一次即可;适应未来,我不是很理解这句话的含义,我先贴出原文。
适应未来:通过外部文件来包含JavaScript无须使用前面提到XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的。
我的理解是,应该是表述在不同的浏览器中,可能需要做兼容处理(我百度的hack,理解的hack是兼容处理的意思),引用外部文件的时候,和HTML以及XHTML的语法是相同的,所以不必再来一次兼容的处理。
文档模式
IE5.5引入了文档模式这个概念,使用时通过文档类型切换切换。文档模式,主要使用的是标准模式和混杂模式。混杂模式会让IE的行为与(包含非标准特性的)IE5相同,而标准模式则让IE的行为更接近标准行为。虽然这两种模式主要影响CSS内容的呈现,但在某些情况下也会影响到JavaScript的解释执行。——摘自原文 标准模式有两种,一种是准标准模式,一种是标准模式,一般的标准模式代指这两种的其中一种,区别不是很大。
平稳退化
在低版本浏览器中,部分浏览器并不支持JavaScript代码,所以编写代码时也要考虑用户群体的情况。平稳退化,就是指用户使用低版本浏览器时,不能使用所编写的JavaScript代码,而进行的一种预防手段。<noscript>应运而生。<noscript>元素可以包含HTML中的所有元素,除了<script>。包含在<noscript>元素中的内容,只有在浏览器不支持脚本,或者是脚本被禁用的情况下才会被触发。因此,为了使用户获得良好的用户体验,可以使用<noscript>来提示用户,换用高版本的浏览器或者是启用脚本浏览网页。