JavaScript 高级程序设计第三版(二) script标签中的6个 属性async,charset,defer,language,src,type

向 HTML 页面中插入 JavaScript 的主要方法,就是使用<script>元素。这个元素由 Netscape 创造
并在 Netscape Navigator 2 中首先实现。后来,这个元素被加入到正式的 HTML 规范中。HTML 4.01 为
<script>定义了下列 6 个属性。

  • async:可选。表示应该立即下载脚本,但不应妨碍页面中的其他操作,比如下载其他资源或
    等待加载其他脚本。只对外部脚本文件有效。
  • charset:可选。表示通过 src 属性指定的代码的字符集。由于大多数浏览器会忽略它的值,
    因此这个属性很少有人用。
  • defer:可选。表示脚本可以延迟到文档完全被解析和显示之后再执行。只对外部脚本文件有
    效。IE7 及更早版本对嵌入脚本也支持这个属性。
  • language:已废弃。原来用于表示编写代码使用的脚本语言(如 JavaScript、JavaScript1.
    或 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>元素的方式有两种:直接在页面中嵌入 JavaScript 代码和包含外部 JavaScript
    文件。
    在使用<script>元素嵌入 JavaScript 代码时,只须为<script>指定 type 属性。然后,像下面这
    样把 JavaScript 代码直接放在元素内部即可

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


    包含在<script>元素内部的 JavaScript 代码将被从上至下依次解释。就拿前面这个例子来说,解释
    器会解释一个函数的定义,然后将该定义保存在自己的环境当中。在解释器对<script>元素内部的所
    有代码求值完毕以前,页面中的其余内容都不会被浏览器加载或显示。
    在使用<script>嵌入 JavaScript 代码时,记住不要在代码中的任何地方出现"</script>"字符串。
    例如,浏览器在加载下面所示的代码时就会产生一个错误:

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


    因为按照解析嵌入式代码的规则,当浏览器遇到字符串"</script>"时,就会认为那是结束的
    </script>标签。而通过转义字符“/”可以解决这个问题,例如:

    <script type="text/javascript"> 
      function sayScript(){ 
      alert("<\/script>"); 
      } 
    </script> 


    这样写代码浏览器可以接受,因而也就不会导致错误了。
    如果要通过<script>元素来包含外部 JavaScript 文件,那么 src 属性就是必需的。这个属性的值
    是一个指向外部 JavaScript 文件的链接,例如:

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


    在这个例子中,外部文件 example.js 将被加载到当前页面中。外部文件只须包含通常要放在开始
    的<script>和结束的</script>之间的那些 JavaScript 代码即可。与解析嵌入式 JavaScript 代码一样,
    在解析外部 JavaScript 文件(包括下载该文件)时,页面的处理也会暂时停止。如果是在 XHTML 文档
    中,也可以省略前面示例代码中结束的</script>标签,例如:

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


    但是,不能在 HTML 文档使用这种语法。原因是这种语法不符合 HTML 规范,而且也得不到某些
    浏览器(尤其是 IE)的正确解析。

    按照惯例,外部 JavaScript 文件带有.js 扩展名。但这个扩展名不是必需的,因为
    浏览器不会检查包含 JavaScript 的文件的扩展名。这样一来,使用 JSP、PHP 或其他
    服务器端语言动态生成 JavaScript 代码也就成为了可能。但是,服务器通常还是需要
    看扩展名决定为响应应用哪种 MIME 类型。如果不使用.js 扩展名,请确保服务器能
    返回正确的 MIME 类型。
    需要注意的是,带有 src 属性的<script>元素不应该在其<script>和</script>标签之间包含额外的 JavaScript 代码。如果包含了嵌入的代码,则只会下载并执行外部脚本文件,嵌入的代会被忽略。
    另外,通过<script>元素的 src 属性还可以包含来自外部域的 JavaScript 文件。这一点既<script>元素倍显强大,又让它备受争议。在这一点上,<script>与<img>元素非常相似,即它的 属性可以是指向当前 HTML 页面所在域之外的某个域中的完整 URL,例如:

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


    这样,位于外部域中的代码也会被加载和解析,就像这些代码位于加载它们的页面中一样。利用一点就可以在必要时通过不同的域来提供 JavaScript 文件。不过,在访问自己不能控制的服务器上JavaScript 文件时则要多加小心。如果不幸遇到了怀有恶意的程序员,那他们随时都可能替换该文件的代码。因此,如果想包含来自不同域的代码,则要么你是那个域的所有者,要么那个域的所有者值信赖。
    无论如何包含代码,只要不存在 defer 和 async 属性,浏览器都会按照<script>元素在页面出现的先后顺序对它们依次进行解析。换句话说,在第一个<script>元素包含的代码解析完成后,二个<script>包含的代码才会被解析,然后才是第三个、第四个……

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

安果移不动

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值