js高程读书笔记 第二章 在html中使用JavaScript

[TOC]

使用script元素

6种属性可选

  • async 表示立即下载脚本
  • charset 指定的代码的字符集
  • defer 表示脚本可以延迟到文档完全被解析和显示之后再执行。
  • src 包含要执行代码的外部文件
  • type 看成是language的替代属性。表示变写代码使用的脚本语言的内容类型(mime) 。实际上,服务器在传送JavaScript文件时使用的MIME类型通常是application/x-javascript,考虑到约定俗成和随最大限度的浏览器兼容性,依旧使用text/javascript。
  • language 已弃用

在引用外部文件的时候,如果是XHTML文档中可以省略,例如

1
<script type="text/javascript" src="example.js" />

当然这种语法不符合HTML规范。

如果在script标签种包含了嵌入代码,只会下载并执行外部脚本文件。

只要不存在defer和async属性,浏览器都会按照script元素在页面种出现的先后顺序对它们进行依次解析。

标签的位置

一般都把全部JavaScript引用放在元素页面内容的后面

延迟脚本

defer属性的用途是表明脚本在执行时不会影响页面的构造,就是说脚本会被延迟到整个页面都解析完毕后再运行

1
2
3
4
5
6
7
8
<!DOCUMENT html>
<html>
<head>
<script type="text/javascript" defer="defer" src="example1.js"></script>
</head>
<body>
</body>
</html>

defer属性只适用于外部脚本文件

async属性

同样只适用于外部脚本文件,不同点在于标记为async的脚本并不保证按指定它们的先后顺序执行。

在XHTML中的平稳退化

在XHTML中,<(小于)会被当做开始一个新标签来解析。有两种方法来避免类似的语法错误:

  1. 用相应的HTML实体(<)替代<(小于)
  2. CData片段来替代
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    <script>
    //<![CDATA[
    function compare(a, b) {
    if (a < b){
    alert("a比b小");
    } else if (a > b) {
    alert("a比b大");
    } else {
    alert("a和b一样大");
    }
    }
    //]]>
    </script>

noscript元素

noscript元素种的内容只有在下列情况下才会显示出来:

  • 浏览器不支持脚本
  • 浏览器支持脚本,但脚本被禁用