2.1 <script>元素
六个属性:
1) Async 表示应立即下载脚本,不妨碍页面其他操作,只对外部脚本文件有效。
2) Charset 表示通过src属性指定的代码的字符集。
3) Defer 表示脚本可以延迟到文档完全被解析和显示后再执行。只对外部脚本文件有效。
4) Language 已废弃。
5) Src 表示包含要执行代码的外部文件。
6) Type 表示编写代码使用的脚本语言的内容内型。
使用<script>元素方式:
1) 页面嵌入JavaScript代码
为<script>指定type属性,把JavaScript代码放在元素内部,如:
<script type=”text/javascript”>
Function sayHi(){
alert(“Hi”);:
}
</ script>
a) JavaScript代码从上至下依次解释。
b) 解释器对<script>元素内部所有代码求值完毕前,页面中的其余内容不会被浏览器加载或显示。
c) 代码中任何地方出现</ script>会认为是结束的</ script>标签。可用转义字符“\”解决<\/ script>
2) 包含外部JavaScript文件
Src属性是必须的,属性的值是一个指向外部JavaScript文件的链接,如:<script type=”text/javascript” src=”example.js”></ script>
a) 在解析外部JavaScript文件时,页面的处理也会暂时停止。
b) 带有src属性的<script>元素不应在<script>和</script>标签之间包含额外的JavaScript代码。若包含嵌入的代码,只会下载并执行外部脚本文件,嵌入的代码会被忽略。
c) <script>元素的src可包含来自外部域的JavaScript文件。即它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整的URL,如:<script type=”text/javascript” src=”http://www.somewhere.com/afile.js”></ script>
d) 如不存在defer、async属性,浏览器会按照<script>元素出现的先后顺序依次进行排序。
2.1.1标签的位置
1) 所有的<script>元素放在<head>元素中,如:
<head>
<script type=”text/javascript” src=”example.js”>
</ script>
</head>
全部的JavaScript代码都下载后,才呈现页面内容(浏览器遇到<body>标签才开始呈现内容),导致浏览器页面出现明显延迟。
2) JavaScript引用放在<body>元素中页面内容的后面,如:
<head>
</head>
<body>
<script type=”text/javascript” src=”example.js”>
</ script>
</body>
浏览器窗口显示空白页面时间缩短。
2.1.2延迟脚本
1) defer属性的用途是表明脚本在执行时不会影响页面的构造。脚本会被延迟到整个页面都解析完毕后再运行。在<script>元素中设置defer,即浏览器立即下载,但延迟执行。
<script type=”text/javascript” src=”example.js” defer=”defer”>
</ script>
2) 延迟脚本不一定按顺序执行,最好只包含一个延迟脚本。
3) Defer属性只适用于外部脚本文件,因此支持HTML5的实现会忽略嵌入脚本设置的defer属性
2.1.3异步脚本
1) async属性只适用于外部脚本,并告诉浏览器立即下载文件,但标记为async的脚本并不保证按照指定顺序执行。
<script type=”text/javascript” async src=”example.js” >
</ script>
2) 指定async属性的目的是不让页面等待两个脚本下载和执行,从而异步加载页面其他内容,建议异步脚本不要在加载期间修改DOM。
3) 异步脚本一定会在页面的load事件前执行,可能会在DOMContentLoaded事件触发之前或之后执行。
2.2嵌入代码域外部文件
1) 尽可能使用外部文件来包含JavaScript代码。
2) 优点: 1.可维护性:能集中精力编辑JavaScript代码。
2.可缓存:加快页面加载速度。
3.适应未来。
2.3文档模式
2.4<noscript>元素
1) 1浏览器不支持JavaScript时让页面平稳地退化。
2) 显示条件:1.浏览器不支持脚本。
2.浏览器支持脚本,但脚本被禁用。
3) 启用了脚本,浏览器不显示<noscript>元素中任何内容。