JavaScript高级程序设计（二）在HTML中使用JavaScript

时间：2020-05-12 09:13:33 阅读：68 评论：0 收藏：0 [点我收藏+]

章节摘要

　　向HTML页面中插入JavaScript的主要方法就是使用<script>元素。

　　HTML 4.01为<script>定义的6个属性：

　　两种使用<script>的方式：直接在页面中嵌入JavaScript代码或引用外部JavaScript文件。

<script type="text/javascript">  /*直接嵌入JavaScript代码，不需要src*/
     function sayHi(){
          alert("Hi!");   
     }
<script>

　　元素内部的JavaScript代码将被从上至下依次解释。就拿前面这个例子来说，解释器会解释到一个函数的定义，然后将该定义保存在自己的环境当中。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。

　　注：代码中任何地方都不可出现"</script>"字符串。使用转义字符“\”后"<\/script>"就没问题了。

<script type-"text/javascript" src="example.js"></script> /*必须要src属性，指向外部js文件链接，如果在这里写JS代码不会被忽略*/

　　外部文件只需要包含JavaScript代码即可，不需<script></script>。外部文件一般用“,js”扩展名，但不是必须的。src还可以指向外部域的js文件。如：

<script type-"text/javascript" src="http://www,example.com/example.js"></script>

　　在XHML中可忽略</script>。例如：

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

　　惯例是将<script>放入<head>元素中。目的是把所有的外部文件（包括CSS和JS文件）的引用放在相同的地方。

位置	目的	影响
<head>中	把所有的外部文件（包括CSS和JavaScript文件）的引用放在相同的地方	必须等到全部JavaScript下载、解析、执行完后才会呈现页面的内容。会导致页面延迟，浏览器一片空白。
<body>后	在解析JavaScript代码前，页面的内容将完全呈现在浏览器中。	用户会觉得浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快。

注：浏览器在遇到<body>后才开始呈现内容。

　　defer属性相当于告诉浏览器立即下载，但延迟运行。（脚本在执行时不会影响页面的构造。）

技术分享图片

　　使用了defer属性后脚本会延迟到浏览器遇到</html>后执行。

　　defer只适用于外部脚本文件。这一点HTML5已明确规定，所以支持HTML5的实现会忽略给嵌入脚本设置的defer属性。有些浏览器会忽略这个属性，所以把需要延迟的脚本放入页面底端仍是最佳选择。

　　async属性于defer类似，都用于改变处理脚本的行为。async只适用于外部脚本文件，并告诉浏览器立即下载执行。与defer不同的是async不保证脚本的先后执行顺序，因此要确保脚本之间互不依赖。

　　建议异步脚本不要在加载期间修改DOM。异步脚本一定会在页面的load事件前执行。

注：在XHTML中要改为async=“async”。

　　XHTML（可扩展超文本标记语言）是将HTML作为XML的应用而重新定义的一个标准。规则比HTML严格，直接影响能否在嵌入JavaScript代码时使用<script />。

　　在XHTML里（<）会被解析成新标签，标签后又不能有空格，所以会报错。

　　技术分享图片

解决方法二：使用CData片段包含JavaScript代码。CData片段区域可以包含不需要解析的任意格式的文本内容。CData片段格式：<![CDATA[ ]]>

　　如果有浏览器不兼容XHTML而不支持CData片段，则将CData注释掉即可。

　　技术分享图片

　　最好使用外部文件来包含JavaScript代码。优点如下：

可维护性：遍及不同HTML页面的JavaScript会造成维护问题。但把所有JavaScnpt文件都放在一个文件夹中，维护起来就轻松多了。而且开发人员因此也能够在不触及HTML标记的情况下，集中精力编辑JavaScript代码。
可缓存：浏览器能够根据具体的设置缓存链接的所有外部JavaScript文件。
适应未来：通过外部文件来包含JavaScript无须使用前面提到XHTML或注释hack，HTML和XHTML包含外部文件的语法是相同的。

　　IE5.5 引入的文档模式是通过文档类型（doctype）切换实现的。不同的文档模式主要影响CSS内容的呈现，有些情况也会影响到JavaScript的解释执行。