Javascript 高级编程 2章10页 【script元素】

温水小青蛙
351 阅读1分钟

<script>元素

  • Netscape创造
  • 后被加到HTML规范中，HTML 4.01定义了6个属性：
  • 浏览器按照<script>在页面中出现的先后顺序，对它们依次进行解析
属性说明
async立即下载脚本（外部脚本文件）。 可以和页面中的其他操作并行执行，例如：下载其他资源，加载其他脚本，等
defer脚本（外部脚本文件）的执行被延迟。延迟到 文档完全被解析和显式 之后。
src外部脚本文件
type脚本内容的类型(MIME类型)。默认值为text/javascript（不推荐但依然常用，因为约定俗成和最大限度考虑浏览器兼容性）。其他可能值：text/ecmascript, application/x-javascript(服务器传送javascript文件时，通常使用的MIME类型), application/javascript（非IE浏览器中可用）, application/ecmascript（非IE浏览器中可用）
charset很少用
language已废弃

嵌入代码和外部文件

建议尽可能使用外部文件 使用外部文件的优点：

  • 可维护性：javascript代码集中在一处，易于维护
  • 可缓存：如果多个页面使用同一个外部文件，可以设置为缓存, 只需下载一次，因此能够加快页面加载速度

在页面中嵌入javascript代码

  • 只需指定type属性
  • 解释器对嵌入的javascript代码解析完毕之前，页面中的其余内容都不会被浏览器加载或显示
<script type="text/javascript">
   
</script>

包含外部javascript文件

  • 必须指定src属性
  • 下载文件和解释器对文件解析完毕之前，页面中的其余内容都不会被浏览器加载或显示
<script type="text/javascript" src="example.js"></script>
  • XHTML文档中，<script> 可以写为自闭和的样子。HTML文档中，不行。
<script type="text/javascript" src="example.js" />
  • <script>和</script>之间，不应再包含嵌入的代码。如果包含了，会被忽略。

<script>元素的src属性：.js扩展名

  • 惯例，javascript文件，带有.js 扩展名。
  • 但.js扩展名不是必须的。因为有时候，这里引用的内容是JSP, PHP等服务端动态生成的javascript代码

服务器，需要看扩展名来决定响应那种MIME类型。

  • 如果不用.js扩展名, 需确保返回正确的MIME类型

<script>元素的src属性：指向外部域的javascript文件

  • src可以指向当前HTML页面所在域之外的某个域中的完整URL
  • 强大，但有争议
  • 最好是，要么你是那个域的所有者，要么那个域的所有者值得信赖
<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

<script>元素的位置

传统做法：位于<head>元素中：

  • 意味着，javascript代码被下载，解析，执行完毕后，才能开始呈现页面内容
  • 导致，延迟，浏览器窗口一段时间内空白一片 现代做法：位于<body>元素中，页面内容之后
  • 页面的内容先呈现在浏览器，然后再下载和解析javascript代码
  • 用户体验，页面打开得变快了

<script>元素的defer属性

  • defer="defer"
  • 立即下载，但延迟执行
  • 表明这段延迟脚本，执行时，不会影响页面的构造
  • 延迟到，浏览器遇到</html>后
  • 只适用于外部脚本。嵌入脚本会忽略defer属性
  • 如果有多个延迟脚本，HTML5要求，按这多个延迟脚本，出现的先后顺序执行。最好，只包含一个延迟脚本！

<script>元素的async属性

  • 立即下载
  • 下载和执行异步脚本时，可以同时加载页面中的其他内容, 因此建议异步脚本不要修改DOM
  • 异步脚本，会在load事件前执行。但可能会在DOMContentLoaded事件，触发前或触发后，执行
  • 只适用于外部脚本
  • 如果有多个异步脚本，不保证按它们的先后顺序执行。因此，确保它们之间，互不依赖非常重要
<script type="text/javascript" async src="example.js"></script>

//XHTML文档中，要这么写
<script type="text/javascript" async="async" src="example.js"></script>

XHTML

  • 可扩展，超文本标记语言。
  • XHTML的规则比HTML严很多
  • 将HTML作为XML的应用，而重新定义的一个标准

HTML5正在被采用，建议遵循 HTML5 标准，而不用太管 XHTML

文档模式

  • 由 IE 引入，其他浏览器纷纷效仿
  • 包括：
    • 混杂模式： 让IE的行为，与IE5相同
      • 不推荐，不同浏览器在这种模式下，行为差异非常大
      • 没有文档类型声明时，浏览器默认开启混杂模式
    • 标准模式： 让IE的行为，更接近标准行为
      • 严格型 （strict）
    • 准标准模式： 很多特性符合标准，但不尽然。不标准处：e.g. 图片间隙
      • 过渡型 （transitional）
      • 框架集型 （frameset）
  • 主要影响CSS内容的呈现。某些情况下，也影响javascript的解释执行

标准模式：

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

准标准模式：

<!-- HTML 4.01 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 过渡型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 框架集型 -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

<noscript>元素

下列任意情况，<noscript>元素内容会显示

  • 当浏览器不支持javascript时
  • 当浏览器支持javascript,但javascript被禁用
<body>
    <noscript>
        <p>本页面需要浏览器支持（启用）Javascript </p>
    </noscript>
</body>
avatar
文章
阅读
粉丝