JavaScript高级程序设计：在HTML中使用JavaScript

时间 2021-08-15 标签 JavaScript 读书笔记

1.<script>元素

在HTML插入JavaScript代码的主要方法就是使用<script>元素。

1）<script>元素定义了下列6种属性：

async：表示应该立即下载脚本，但不应妨碍页面中的其他操作。只对外部脚本有效
charset：表示通过src属性指定的代码的字符集
defer：表示脚本可延迟到文档全部被解析和显示之后再执行。只对外部脚本有效
language：已废弃
src：表示包含要执行代码的外部文件
type:表示代码使用的脚本语言的内容类型。目前type属性的值依旧还是text/javascript。

2）两种使用<script>元素的方式

①可用<script>元素嵌入JavaScript代码，只需为<script>指定type类型。包含在<script>元素内部的JavaScript代码将被从上至下依次解释。

②通过<script>元素包含外部JavaScript文件，src属性必需的。这个属性的值是一个指向外部JavaScript文件的链接。带有src属性的<script>元素不应该在其<script></script>标签之间再包含额外的JavaScript代码。<script>元素的src属性可以包含外部域的JavaScript文件。但是这个文件最好是安全可靠的JavaScript文件。

3）标签的位置

①<script>元素可放在页面的<head>中。

但是，这样做意味着所有的JavaScript文件必须等到全部JavaScript代码下载、解析和执行完成之后，才能开始呈现页面的内容。

②于是，现代Web应用程序一般将quanbuJavaScript引用放在<body>元素页面内容的后面。

4）延迟脚本

defer属性：表明脚本在执行时不会影响页面的构造。就是脚本会被延迟到整个页面被解析完毕后再运行。因此设置defer属性相当于告诉浏览器立即下载，但延迟执行。且只适用于外部脚本文件。

在现实中，延迟脚本不一定会按顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。

同时，把defer属性放在页面底部仍然是最佳选择。

5）异步脚本

async属性：用于改变脚本，只适用于外部脚本，并告诉浏览立即下载文件。但与defer属性不同的是，标记为async的脚本并不按照指定它们的先后顺序执行。

建议异步脚本不要在加载时期修改DOM。异步脚本一定会在页面的load事件前执行，但可能在DOMContentLoaded事件触发之前或之后执行。

6）在XHTML中的用法

<在XHTML中被当做开始一个新标签来解析。

解决这个语法错误的方法有两种：

①用相应的HTML实体（<）替换代码中所有的小于号

②用一个CData片段来包含JavaScript代码。在XHTML中，CData片段是一个特殊区域，这个区域中可以包含不需要解析的任意格式的文本内容。引入CData片段后的JavaScript代码如下：

<script type="text/javascript"><![CDATA[
    function compare(a,b){
       if(a<b){
         alert("A is less than B");
       }else if(a>b){
         alert("A is greater than A");
       }else{
         alert("A is equal to B");
      }
 }
]]>
</script>

如果浏览器不兼容XHTML，因而不支持CData片段，怎么办？再使用JavaScript注释将CData片段注释掉就可以了。

<script type="text/javascript">
//<![CDATA[
    function compare(a,b){
       if(a<b){
         alert("A is less than B");
       }else if(a>b){
         alert("A is greater than A");
       }else{
         alert("A is equal to B");
      }
 }
//]]>
</script>

2.嵌入代码与外部文件

一般认为的最好做法就是尽可能使用外部文件来包含JavaScript代码。

3.文档模式

IE5.5引入了文档模式的概念，而这个概念是通过使用文档类型（doctype）切换实现的。

最初的两种文档模式是：混杂模式和标准模式。虽然这两种模式主要影响CSS内容的呈现，但在某些情况下也会影响到JavaScript的解释执行。

在此之后，IE又提出了一种所谓的准标准模式。这种模式下的浏览器特性很多都是符合标准的，但也不尽然。不标准的地方主要体现在处理图片间隙的时候。

如果文档开始没有发现文档类型声明，则所有浏览器都默认开启混杂模式。

①标准模式

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

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

②准标准模式：可使用过渡型或框架集型来触发。准标准模式与标准模式非常接近，它们的差异几乎可以忽略不计。

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

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

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

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

4.<noscript>元素

当浏览器不支持JavaScript时如何使页面平稳地退化。

这个问题的最终解决方案就是创造一个<script>元素，用以在不支持JavaScript的浏览器中显示替代的内容。这个元素可出现在<body>中的任何HTML元素——<script>元素除外。

包含在<noscript>元素中的内容只有在：浏览器不支持脚本或浏览器支持脚本，但脚本被禁用的情况下才会被显示出来。