第2章 在HTML中使用JavaScript
2018-04-13 本文已影响0人
meiqiuyang
本章内容
- 使用<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>元素可以制定在不支持脚本的浏览器中显示替代内容。
