第二章:在HTML种使用JavaScript
①<script>元素:
- 使用<script>元素的方式有哪两种?
②标签的位置<script>
按照传统来说,标签位置应该放在<head>之前。
为避免过多的js文件等待时间耗时太久,现在把这个标签代码
<script type="text/javascript" src="easma.js"></script>
<script type="text/javascript" src="easma.js"></script>
<script type="text/javascript" src="easma.js"></script>
<script type="text/javascript" src="easma.js"></script>
<script type="text/javascript" src="easma.js"></script>
<script type="text/javascript" src="easma.js"></script>
<script type="text/javascript" src="easma.js"></script>
........
放在
<body>
...
...
...
<script type="text/javascript" src="easma.js"></script>
<script type="text/javascript" src="easma.js"></script>
<script type="text/javascript" src="easma.js"></script>
</body>
好处:在解析包含的js代码前,页面的内容将完全呈现在浏览器中,用户体验会觉得浏览器窗口显示空白页面的时间缩短而感到打开页面的速度加快了,特别对于我这种要对效率要求很高的偏执狂来说,是很fantastic的。
总之:记住把引用js的所有链接放在</body>的上方。
③延迟脚本:
<script>定义了defer属性。
属性用途:表明脚本在执行时不会影响页面的构造,换句话说是指脚本会被延迟到整个页面都解析完毕后再运行。
设置了这个属性就表明告诉浏览器请立即下载本个脚本但是延迟执行。
不同浏览器对于这个不同支持,其中Chrome和Safari5,等对于这个最早支持,其他几个浏览器会忽视这个属性,像平常一样处理脚本。
注意
总之:记住把延迟脚本放在页面底部还是最佳选择!
④异步脚本:
<script>定义了async属性。
属性用途:与defer类似,但只是适用于处理外部脚本文件,告知浏览器立即下载文件。
异步异步,所谓不同步,既然如此那几个js文件有放置顺序和执行顺序不同,所以确保两者之间
互不依赖
非常重要!
使用目的:不让页面等待两个脚本下载和执行,从而异步加载页面其他内容,
建议异步脚本不要再加载期间修改DOM。
异步脚本一定会在页面的load事件前执行,但可能会在DOMContentLoaded事件触发之前或之后执行。支持异步执行的浏览器有Firefox3.6,Safari5和Chrome。
总之:。。。。。。(有待更新)
⑤在XHTML中的用法(可跳过,H5正火爆)
⑥嵌入js代码与外部js代码文件
支持使用外部文件优点:
- 可维护性:在不触及HTML代码的情况下更改js打码
- 可缓存:两个页面使用同一个js文件,则文件被浏览器下载的次数=1》》最终 结果是能够加快页面加载速度!
- 适应未来:HTML和XHTML适应外部代码的规则一致,更好的适应各种浏览器和脚本语言!
⑦文档模式
⑧<noscript>元素
用处:可以包含出现在文档<body
>中的任何HTML元素--<script>元素除外。
包含此元素中的内容只有在以下的情况才会显示出来:
- 浏览器不支持脚本浏览器
- 支持脚本,但脚步被禁用
代码:
<script type="text/javascript">
function sayHi(){
alert("Hi!");
}
</script>
//代码中不能出现 </script>,不然浏览器加载时会错误,因为浏览器解析时会以为是结束标签,要加入转义字符‘\’
小结:
一周后回来总结。