在HTML中使用Javascript
<script>
元素:
向HTML页面中插入Javascript的主要方法,就是使用<script>
元素。
属性:
- async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作。只对外部脚本文件有效。(立即下载,但并不保证按照指定它们的先后顺序执行)
- charset:可选。表示通过src属性指定的代码的字符集。大多数浏览器会忽略这个值。
- defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。(立即下载,延迟执行,HTML5规范要求按照它们出现的先后顺序执行,但现实生活中,并不一定会按照它们出现的先后顺序执行)
- language:已废弃。原来用来表示编写代码使用的脚本语言。
- src:可选。表示包含要执行代码的外部文件。
- type:可选。可以看成是language的代替属性。表示编写代码使用的脚本语言的内容类型(也就是MIME类型)。
使用:
使用<script>
元素的方式有两种:直接在页面中嵌入javascript代码和包含外部javascript文件。
- 在使用
<script>
元素嵌入javascrit代码时,只需为<script>
指定type属性。
包含在<script>
元素内部的javascript代码将被从上到下依次解释。
解释器会解释一个函数的定义,然后将该定义保存在自己的环境当中。再解释器对
<script>
元素内部的所有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
在使用
<script>
嵌入javascript代码时,不要在代码的任何地方出现</script>
字符串,浏览器会报错。因为按照解析嵌入式代码的规则,当浏览器遇到字符串</script>
时,会认为是结束的标签。可以通过转义字符"/"解决(还可以通过拼接字符串的方式解决)。<script type="text/javascript"> function sayHi(){ alert("<\/script>"); } </script>
- 如果要通过
<script>
元素来包含外部javascript文件,那么src属性就是必须的,这个属性值是一个指向外部javascript文件的链接。
外部文件只需包含通常要放在开始和结束`
与解析嵌入式javascript代码一样,在解析外部javascript文件时(包括下载该文件),页面的处理也会暂时停止(所以提高性能的方法之一就是引入外部文件的
<script>
放在<body>
的最后)。
带有src属性的
<script>
元素不应该在<script>
标签之间再包含额外的javascript代码,嵌入的代码会被忽略。
通过
<script>
元素的src属性可以包含来自外部域的javascript文件,与<img>
元素相似。也就是src属性可以指向当前HTML页面所在域之外的某个域中的完整url(即可以跨域访问)。
<script type="text/javascript" src="example.js"/>
无论如何包含代码,只要不存在defer和async属性,浏览器都会按照<script>
元素在页面中出现的先后顺序对它们依次进行解析。也就是说,在第一个<script>
元素包含的代码解析完成后,第二个<script>
包含的代码才会被解析。
使用外部文件的优点:可维护性;可缓存(浏览器能够根据具体的设置缓存链接的所有外部javascript文件。也就是说,如果有两个页面都使用同一个文件,那么这个文件只需下载一次。因此,最终结果就是能够加快页面加载的速度);适应未来(通过外部文件来包含javascript无需使用XHTML或注释hack。HTML和XHTML包含外部文件的语法是相同的)
-
- 不支持Javascript的浏览器会把
<script>
元素的内容直接输出到页面中,可 以给脚本加上HTML注释,不支持的浏览器就会忽略标签中的内容;而支持的浏览器则必须进一步确认其中是否包含需要被解析的javascript代码。这种注释javascript代码的格式得到了所有浏览器的认可,但现在所有浏览器都已支持javascript,因此也就没必要再使用这种格式了。
<script><!-- function(){} //--></script>
- 对这个问题的最终解决方案是
<noscript>
元素,用以在不支持javascript的浏览器中显示替代的内容。这个元素可以包含能够出现在文档<body>
中的任何元素,<script>
元素除外。包含在<noacript>
元素中的内容只有在浏览器不支持脚本/浏览器支持脚本,但脚本被禁用的情况下才会显示出来。
<noscript> <p>本页面需要浏览器支持(启用)javascript!</p> </noscript>
- 不支持Javascript的浏览器会把
在XHTML中的用法
可扩展超文本标记语言,即XHTML,是将HTML作为XML的应用而重新定义的一个标准。编写XHTML代码的规则要比编写HTML严格得多。
例如<在XHTML中将被当做一个开始新标签来解析。
在将页面的MIME类型指定为"application/xhtml+xml"的情况下会出发XHTML模式。
避免在XHTML中出现类似语法错误的方法有两个:
- 用相应的HTML实体(<)替换代码中所有的<,但这样会导致代码不好理解。
- 用一个CData片段来包含javascript代码
在XHTML(XML)中,CData片段是文档中的一个特殊区域,这个区域中可以包含不需要解析的任意格式的文本内容。因此,在CData片段中就可以使用任意字符。
对于不兼容XHTML的浏览器,因而不支持CData片段,只要使用javascript注释掉就可以了。<script type="text/javascript"> //<![CDATA[ if(a<b){ alert("trur"); } //]]> </script>
文档模式:
文档模式是通过使用文档类型doctype切换实现的。
最初的两种文档模式是混杂模式和标准模式。这两种模式主要是影响CSS内容的呈现的,但在某些情况下也会影响到javascript的解析执行。
如果在文档开始处没有文档类型声明,则所有浏览器都会默认开启混在模式。
对于标准模式,在html5中可以通过<DOCTYPE html>
来开启