本章内容
- 使用<script>元素
- 嵌入脚本与外部脚本
- 文档模式对JavaScript的影响
- 考虑禁用JavaScript的场景
1 <script>元素
<script>的一些属性:
- async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作。脚本相对于页面的其余部分异步地执行(当页面继续进行解析时,脚本将被执行),只对外部脚本文件有效。
- charset:可选。表示通过src属性制定的代码的字符集。由于大多数浏览器会忽略它的值,因此这个属性很少有人用。
- defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。
- language:可选。已废弃。
- src:可选。表时包含要执行代码的外部文件。
- type:可选。表示编写代码使用的脚本语言的内容类型(也曾MIME类型)。如果没有指定这个属性,则其默认值是text/javascript。
按照惯例,外部JavaScript文件都会带有.js扩展名。但是呢,这个扩展名其实不是必须的,因为浏览器不会检查包含JavaSrcipt文件的扩展名,很皮。这样一来,使用服务器端语言动态生成JavaScript代码也就成为了可能。但是,服务器端还需要确保返回正确的MIME类型。
1.1 标签的位置
如果把所有的外部文件都放在<head>中,且没有设置async或者defer属性,那么根据浏览器解析文档从上往下的机制,只有当<head>中的内容全部被下载、解析和执行后,才能开始呈现页面的内容(<body>)。但<head>标签中的多或者下载的慢,这个时候无疑会导致浏览器在呈现页面的时候出现明显的延迟(浏览器窗口是一片空白)。
怎么避免呢?
1,将js代码或者引用的文件都放在<body>的里面且放在最后;
2,<script>的async属性;
3,等等等。。。。
1.2 延迟脚本
<script>的defer属性。相当于告诉浏览器立刻下载,但是要等到页面出来后才会执行。
1.3 异步脚本
<script>的async属性。相当于告诉浏览器立刻下载,但是浏览器自己也不知道执行脚本的先后顺序。
2 <noscript>元素
顾名思义,用在浏览器不支持JavaScript的情况和JavaScript被禁用的情况。
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>
<p>Hello World!</p>
<noscript>
<p>本页面需要浏览器支持(启用)JavaScript。</p>
</noscript>
</body>
</html>
3 小结
把JavaScript插入到HTML页面中需要使用<script>元素。这个元素呢,可以把JavaScript嵌入到HTML页面中,让脚本与标记混合在一起;
需要注意的有:
- 在包含外部JavaScript文件的时候,必须将src属性设置为指向相应文件的URL。(不然找不到呀)
- 所有<script>元素都会按照他们在页面中出现的先后顺序来解析(在么有设置async和defer属性的情况下)
- 由于浏览器会先解析完不使用defer属性的<script>元素中的代码,然后在解析后面的内容,所以一般应该把<script>元素放在页面最后,即主要内容后面,</body>前面。(为了提高页面展现内容的速度)
- 使用defer属性可以让脚本在文档完全呈现后在执行。延迟脚本总是按照指定他们的顺序执行。
- 使用async属性可以表示当前脚本不必等待其他脚本,也不必阻塞文档呈现。不能保证异步脚本按照他们在页面中的顺序执行。
另外,使用<noscript>元素可以制定在不支持脚本的浏览器中显示替代内容。