首页 > 代码库 > 《JavaScript高级程序设计》笔记（2）

《JavaScript高级程序设计》笔记（2）

2024-07-07 18:36:31   234人阅读

1. <script>元素

在HTML中使用JavaScript脚本时需要使用<script>元素。

 

<script>主要有6个属性：

1. async：可选，表示应该立即下载脚本，但不应该妨碍页面中的其他操作。只对外部脚本文件有效。

2. charset: 可选，比较少用。

3. defer: 可选，表示脚本可以延迟到文档完全被解析或显示后才执行。只对外部脚本文件有效。

4. language: 已废弃。

5. src: 可选，表示包含要执行代码的外部文件。

6. type: 可选，表示编写代码使用的脚本语言的内容类型（MIME类型）。

 

使用<script>元素的方式有两种：

1. 直接在页面中插入JavaScript代码，例如：

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

2. 外部链接JavaScript文件，例如：

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

需要注意的是，带有src属性的<script>元素不应该在<script>和</script>间包含额外的JavaScript代码，否则在加载时会被忽略。

另外，src指定的URL地址不仅可以指向HTML页面所在域，也可以是其他域的完整URL，例如：

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

 

<script>元素的位置

<script>元素如果放在<head>元素中，对于需要很多JavaScript代码的页面而言，会导致浏览器在呈现页面内容时有明显的延迟，而延迟期间的浏览器窗口将是一片空白。所以采用将<script>元素放在</body>标签前，这样浏览器会先呈现页面内容，然后再解析和执行JavaScript代码。

2. 嵌入代码与外部文件

外部文件链接较嵌入代码主要有以下优点：

1. 可维护性：JavaScript代码（行为层）与HTML（结构层）分离，可以使开发人员集中处理JavaScript代码，而不用触及HTML文件。

2. 可缓存性：当两个及以上HTML文件共用相同的JavaScript文件时，当打开第一个HTML文件时，浏览器可以缓存所有的JavaScript文件，当打开其他HTML文件时可以快速加载，节约了流量。

3. 文档模式

在HTML文件的<head>元素中要声明文档类型（DOCTYPE）。因为文档模式有混杂模式和标准模式之分，在未声明文档类型时，浏览器会默认开启混杂模式，在这种情况下，各个浏览器会产生很大的行为差异。

对于标准模式，可以通过以下任意一种文档类型来开启：

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

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

   <!-- HTML 5 –>
   <!DOCTYPE html>

显而易见，HTML5标准下的文档模式更简单，其他两种声明较复杂。

4. <noscript>元素

使用JavaScript要秉持两个基本原则：渐进增强和平稳退化。对于不支持JavaScript或禁用JavaScript的浏览器可以使用<noscript>元素做到平稳退化，例如：

<html>
     <head>
      <title>Example</title>
      <script type="text/javascript" src="example.js"></script>
     </head>
     <body>
       <noscript>
        <p>本页面需要浏览器支持（启用）JavaScript。</p>
       </noscript>
     </body>
    </html>

这个页面在不支持JavaScript或禁用JavaScript脚本的情况下，会显示一条提示。如果启用脚本，就不会看到<noscript>里的内容。


联系
我们