0%

ProJs

在HTML中使用js

要把js放进网页中就不得不涉及到html。最终web获得了统一的脚本支持。

使用script元素

这是在html中使用js的主要方法,这个元素有6个属性:

  • async: 可选,表示立即下载脚本,但不应妨碍页面其他操作,比如下载其他资源或者等待加载其他脚本,只对外部脚本文件有效。
  • charset: 可选,通过src属性,指定代码的字符集,大部分浏览器会忽略,几乎不用。
  • defer: 可选,表示可以到文档被完全解析后再执行,只对外部脚本文件有效
  • language: 已废弃,原来用来表示使用的编程语言。
  • src:可选,表示包含需要执行代码的外部文件。
  • type:可选,可以看成language的代替,表示MIME类型,其值一般为text/javascript,虽然这已经不被推荐。实际上,服务器传送js文件时使用的是,application/x-javascript,但在type中这样写会导致脚本被忽略。综合考虑,使用text/javascript,如果不指定会默认是这个。

使用script元素的方式有两种,直接嵌入和包含外部src文件。

  • 使用内嵌时,只要为元素指定type然后在标签里写js代码即可。在加载完之前不会显示页面其他内容。注意脚本中出现<\script>要转义。
  • 使用外部src时,又要指定src属性,,这个属性的值是一个指向外部js文件的链接,这同样会暂时停止其他元素的加载。在XHTML中可以略去结束标签。

注意使用外部代码时在同一元素中嵌入的代码无效。注意跨域使用代码时要保证安全。

标签的位置

按照惯例,应当全放在head元素中。浏览器在遇到body时才开始显示内容。
为了避免这种卡顿,现代一般放在body的最后。

延迟脚本

defer属性,立即下载,最后执行。标志着脚本的执行不会影响页面的构造。只对外部脚本文件有效
XHTML中,defer=”defer”

异步脚本

async,不用等待脚本的执行,异步加载其他内容即可。此类异步脚本不应修改DOM。
XHTML中, async=”async”

XHTML

xhtml是将html作为xml的应用重新定义的一种标准,规则十分严格。比如小于号会被当成标签的开始,并且标签开始不能接空格,就会报错,解决方法有两个:
用html实体&lt取代小于号这使得代码不易理解。
第二个方法是,是用一个CData包含js代码,CData中的文本不会被当做html解析:

1
2
3
<script type="text/javascript"><![CDATA[
...
]]></script>

如果浏览器不支持XHTML,怎么办?
将cdata的标志符写在一行然后注释掉即可

1
2
3
4
5
<script type="text/javascript">
//<![CDATA[
...
//]]>
</script>

保证了平稳退化。

标准模式

使用:

1
2
<!-- HTML 5 -->
<!DOCTYPE html>

可以开启标准模式。(混杂模式很乱)

noscript元素

如果浏览器不支持js或者被禁用,将显示noscript中的内容

1
2
3
4
5
..
<noscript>
<p>需要对js的支持</p>
</noscript>
..