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

最新推荐文章于 2021-06-05 14:53:10 发布

yyanliqi

最新推荐文章于 2021-06-05 14:53:10 发布

阅读量214

点赞数

分类专栏： JavaScript高级程序设计文章标签： JavaScript 读书笔记

本文链接：https://blog.csdn.net/rachel9798/article/details/83019228

版权

JavaScript高级程序设计专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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">