HTML中使用JavaScript

<script>标签

六个属性：

async：可选。表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本。只对外部脚本文件有效。

charset：可选。表示通过src属性指定的代码的字符集。由于大多数浏览器会忽略它的值，因此这个属性很少有人用。

defer：可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有效。IE7及更早版本对嵌入脚本也支持这个属性。

language：已废弃。原来用于表示编写代码使用的脚本语言（如JavaScript、JavaScript1.2或VBScript）。大多数浏览器会忽略这个属性，因此也没有必要再用了。

src：可选。表示包含要执行代码的外部文件。

type：可选。可以看成是language的替代属性；表示编写代码使用的脚本语言的内容类型（也称为MIME类型）。虽然text/javascript和text/ecmascript都已经不被推荐使用，但人们一直以来使用的都还是text/javascript。实际上，服务器在传送JavaScript文件时使用的MIME类型通常是application/x–javascript，但在type中设置这个值却可能导致脚本被忽略。另外，在非IE浏览器中还可以使用以下值：application/javascript和application/ecmascript。考虑到约定俗成和最大限度的浏览器兼容性，目前type属性的值依旧还是text/javascript。不过，这个属性并不是必需的，如果没有指定这个属性，则其默认值仍为text/javascript。

标签的使用：

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

包含在<script>元素内部的JavaScript代码将被从上至下依次解释。就拿前面这个例子来说，解释器会解释一个函数的定义，然后将该定义保存在自己的环境当中。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。

注意：在script标签内嵌入JavaScript代码时，若需要嵌入"</script>" 字符串，需要用反斜杠进行转义，避免标签闭合：＜\/script>

嵌入外部脚本：<script type="text/javascript" src="example.js"></script> 　　*若两标签间包含嵌入代码，代码将被忽略

与解析嵌入式JavaScript代码一样，在解析外部JavaScript文件（包括下载该文件）时，页面的处理也会暂时停止。

另外，通过<script>元素的src属性还可以包含来自外部域的JavaScript文件。这一点既让<script>元素倍显强大，又让它备受争议。在这一点上，<script>与<img>元素非常相似，即它的src属性可以是指向当前HTML页面所在域之外的某个域中的完整URL，例如：

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

无论如何包含代码，只要不存在defer和async属性，浏览器都会按照<script>元素在页面中出现的先后顺序对它们依次进行解析。换句话说，在第一个<script>元素包含的代码解析完成后，第二个<script>包含的代码才会被解析，然后才是第三个、第四个……

标签位置

传统的做法，<script>元素位于<head>元素中，但这意味着<body>中的内容需要等待所有JS代码被下载、解析、执行完成后，才能被呈现。若JS代码过多，加载页面会出现明显延迟，期间窗口将是一片空白。为了避免这个问题，现代Web应用程序一般都把全部JavaScript引用放在<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>

这样，在解析包含的JavaScript代码之前，页面的内容将完全呈现在浏览器中。

延迟脚本（最好不使用此属性）

HTML 4.01为<script>标签定义了defer属性。这个属性的用途是表明脚本在执行时不会影响面的构造。也就是说，脚本会被延迟到整个页面都解析完毕后再运行。因此，在<script>元素中设置defer属性，相当于告诉浏览器立即下载，但延迟执行。

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

在这个例子中，虽然我们把<script>元素放在了文档的<head>元素中，但其中包含的脚本将延迟到浏览器遇到</html>标签后再执行。HTML5规范要求脚本按照它们出现的先后顺序执行，因此第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件执行。在现实当中，延迟脚本并不一定会按照顺序执行，也不一定会在DOMContentLoaded事件触发前执行，因此最好只包含一个延迟脚本。

*注：以上内容来源：JavaScript高级程序设计（第3版）

posted @ 2017-09-18 11:38 Exps幻想阅读(80) 评论(0) 收藏举报

刷新页面返回顶部

Exps幻想

HTML中使用JavaScript

<script>标签

六个属性：

标签位置

延迟脚本（最好不使用此属性）

公告