#JavaScript学习#第二章：在HTML中使用JavaScript在页面插入JavaScript的方法就是使用<s

Tips: 内容为知识梳理

1.<script>元素

在页面插入JavaScript的方法就是使用<script>元素，使用<script>元素的方式有两种，在页面嵌入JavaScript代码和包含外部JavaScript文件。

在页面嵌入JavaScript代码只需为<script>指定type属性，再把JavaScript代码放入即可，如下图所示：

    <script type="text/javascript">   
    function sayHi(){        
	   alert("Hi!");   
    } 
    </script>

注意!

包含在<script>元素的JavaScript代码将被从上至下依次解释

在解释器对<script>元素内部的所有代码求值完以前，页面其余内容都不会被浏览器加载显示

在浏览器遇到</script>字符时，就会认定为是<script>元素的结束标签，所以尽量不要在JavaScript代码中出现</script>字符(必要时使用转义字符“/”解决)

通过<script>元素来包含外部JavaScript文件，就要设置src属性，其值为一个指向外部JavaScript文件的链接，如：

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

注意!

带有src的<script>元素不应再内嵌JavaScript代码，浏览器只会下载并执行外部脚本文件，内嵌代码会被忽略

src属性可以包含来自外部域的JavaScript文件

1.1<script>元素的属性

HTML 4.01为<script>定义了下列 6个属性

async:后面会详细说明，异步脚本
defer:后面会详细说明，延迟脚本
charset: 表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用
language:已废弃。
src:表示包含要执行代码的外部文件
type:表示编写代码使用的脚本语言的内容类型,其值通常为“text/javascript”

1.2<script>元素的位置

传统做法是将所有<script>元素放在<head>元素中，目的是将所有外部文件的引用都放在相同的地方。但是这样就要等到所有JavaScript代码下载、解析和执行完才能呈现<body>的内容，这就会导致显示页面有一个延迟，现在的做法一般是把<script>元素摆在<body>元素的最后面，即</body>之前，如下图所示：

<!DOCTYPE html>
 <html> 
   <head>    
   <title>Example HTML Page</title>  
    </head>  
   <body>   
   <!-- 这里放内容 -->   
   <script type="text/javascript" src="example1.js"></script>
   <script type="text/javascript" src="example2.js"</script>  
   </body>
 </html>

这样做会让用户感觉打开页面的速度加快了。

1.3延迟脚本: defer属性

defer="defer"

注意!

最好只包含一个延迟脚本，我都没看懂为什么

最好把延迟脚本放在页面底部

1.4异步脚本: async属性

这个属性和defer属性类似，不同的是，async属性只适用于外部脚本文件，并告诉浏览器立即下载文件，标记为async的脚本并不保证按照指定他们的先后顺序执行，如：

   <!DOCTYPE html> 
   <html>   
   <head>   
       <title>Example HTML Page</title>  
       <script type="text/javascript" async src="example1.js">
       </script>   
       <script type="text/javascript" async src="example2.js"></script> 
   </head>  
   <body>  
       <!-- 这里放内容 --> 
   </body> 
   </html>

以上代码中两个脚本都有可能先被执行，所以要保证两者互不依赖 指定async属性的目的是不让页面等待两个脚本下载和执行，从而异步加载页面其他内容

注意!

在 XHTML文档中，要把 async 属性设置为 async="async"。

1.5XHTML*

XHTML 编写XHTML的规则要比HTML严格很多，所以在编写JavaScript代码时，有些是无效的，例如下面代码

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

在XHTML是无效的，<号在XHTML会被当做成一个新标签来解析。

2.内嵌与外部文件

在HTML中，一般认为最好的做法是使用外部文件来包含JavaScript代码，支持使用外部文件的人多会强调如下优点：

可维护性：把所有JavaScript文件都放在一个文件夹便于维护，开发人员也能在不碰HTML的情况下集中精力编写JavaScript代码
可缓存：浏览器能够根据具体的设置缓存链接的所有外部 JavaScript文件。也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。能够加快页面加载速度
适应未来：无须对HTML和XHTML使用不同的规则来写JavaScript代码，两者对外部文件语法都是相同的。

3.文档模式

分为两种文档模式：

混杂模式

让 IE的行为与（包含非标准特性的）IE5相同

标准模式

让IE行为更接近标准行为

两种模式主要影响CSS的呈现，但在某些情况也会影响到JavaScript的解释执行。后来又新增了一种准标准模式。所有浏览器都默认开启混杂模式，但不值得推荐。开启标准模式和准标准模式方法如下：

标准模式：

准标准模式：

4.<noscript>元素

浏览器引用一个<noscript>元素来使不支持JavaScript的浏览器的页面平稳退化，这个元素可以包含能够出现在文档<body>中的任何 HTML元素——<script>元素除外。浏览器只要符合下面两个条件的其中一个，都会呈现<noscript>中的内容：

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

#JavaScript学习#第二章：在HTML中使用JavaScript

目录

1.<script>元素

1.1<script>元素的属性

1.2<script>元素的位置

1.3延迟脚本: defer属性

1.4异步脚本: async属性

1.5XHTML*

2.内嵌与外部文件

3.文档模式

4.<noscript>元素