【JavaScript高级程序设计】第二章-在 HTML 中使用 JavaScript第二章：在 HTML 中使用 J

第二章：在 HTML 中使用 JavaScript

1. <script>元素

1.1 <script>元素的属性

以下均为可选属性:

async：立即下载，异步延迟执行；但不保证按照先后顺序执行；只适用于外部脚本。
defer：立即下载，延迟执行；按出现的先后顺序依次执行。（但现实当中，延迟脚本可能并不一定按照顺序执行，因此最好只包含一个延迟脚本）。
src：引用外部脚本的URI
type：表示代码块中脚本语言的内容类型(也称MIME类型)。没有指定改属性时默认text/javascript。如果这个值是module，则代码会被当成ES6模块，而且只有这时候代码中才能出现import和export关键字
charset (使用src属性指定的代码字符集。这个属性很少使用)
language （已弃用）

1.2 内嵌方式

<script type="text/javascript"> 
 function sayScript(){ 
     alert("<\/script>"); 
 } 
</script>
// 使用注意事项
// 1. 内嵌的内容尽量不包含</script>  如要包含 请加转义符号

1.3 外链方式

<script type="text/javascript" src="example.js"></script> 
// 注意事项
// 1. 使用外链方式后  两个script标签内部不要加其他代码内容，会被忽略
// 2. XHTML中可以省略结束标签 <script type="text/javascript" src="example.js" /> 但HTML中不能省略

外链的优点：

可维护性高。
可缓存：比如如果有两个页面都使用同一个文件，那么这个文件只需下载一次

1.4 标签位置

推荐做法：

<!DOCTYPE html> 
<html> 
 <head> 
 <title>Example HTML Page</title> 
 </head> 
 <body> 
    <h1>hello world !</h1>
    <!-- 这里放内容 --> 
    <script type="text/javascript" src="example1.js"></script> 
    <script type="text/javascript" src="example2.js"></script> 
 </body> 
</html>
// 其他情况：
// 1. 放在<head>中，则会等待所有js代码都被下载解析执行完，才能显示body内容，会导致出现明显的延迟
// 2. 使用defer属性 延迟脚本；IE4、Firefox 3.5、Safari 5 和 Chrome 是最早支持 defer 属性的浏览器。其他    浏览器会忽略这个属性，像平常一样处理脚本。为此，把延迟脚本放在页面底部仍然是最佳选择。
// 3. 使用async异步脚本，不会按照顺序执行，多个脚本之间不能互相依赖

1.5 在XHTML中的用法

可扩展超文本标记语言(XHTML)是将 HTML作为XML的应用重新包装的结果。与HTML不同，在XHTML中使用 JavaScript必须指定type属性且值为text/javascript，HTML中则可以没有这个属性。

XHTML与HTML 4.01标准没有太多的不同, XHTML是更为严格版的HTML。
- XHTML 元素必须被正确地嵌套。
- XHTML 元素必须被关闭。
- 标签名必须用小写字母。
- XHTML 文档必须拥有根元素。

对于内嵌的js代码在XHTML与HTML的区别

// HTML中
<script type="text/javascript"> 
 function compare(a, b) { 
   if (a < b) { 
     alert("A is less than B"); 
   }
 } 
</script>
// XHTML中： 方式1
<script type="text/javascript"> 
 function compare(a, b) { 
   if (a &lt; b) { 
      alert("A is less than B"); 
   }
 }
</script>
// // XHTML中： 方式2使用CData片段
<script type="text/javascript"> 
//<![CDATA[ 
 function compare(a, b) { 
    if (a < b) { 
       alert("A is less than B"); 
    } 
 } 
//]]> 
</script>

2. 文档模式

可以使用doctype切换文档模式，三种模式：混杂模式、标准模式、(准标准模式)，

混杂模式：在所有的浏览器中以省略文档开头的doctype声明作为开关

标准模式

<!-- html 4.0.1 strict严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict严格型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 -->
<!DOCTYPE html>

准标准模式（对于准标准模式，则可以通过使用过渡型（transitional）或框架集型（frameset）文档类型来触发；准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。

<!-- html 4.0.1 transitional过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- html 4.0.1 Frameset 框架型-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 Transitional过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 Frameset框架型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

4. <noscript>元素

针对早期浏览器不支持JavaScript的解决方案。

符合下面任何一个条件，浏览器都会显示<noscript>中的内容。

浏览器不支持脚本；
浏览器支持脚本，但脚本被禁用。

   <noscript> 
     <p>显示内容</p>
   </noscript>

[相关内容]

[1] 著者．JavaScript高级程序设计[M]．人民邮电出版社，（美）泽卡斯（ZAkas,N.C.) , 李松峰，曹力译，2012.3

【JavaScript高级程序设计】第二章-在 HTML 中使用 JavaScript

第二章： 在 HTML 中使用 JavaScript