欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

JavaScript高级程序设计（第三版）第二章读书笔记

程序员文章站 2022-07-12 18:12:35
...

在HTML中使用JavaScript

导言

提到在网页中使用JavaScript，就不得不涉及到HTML。在开发JavaScript的时候，Netscape要解决的一个十分重要的问题就是使得JavaScript与HTML页面共存，最终Netscape决定为web增加统一的脚本支持。

script元素

该元素由Netscape所创造，后来被加入到HTML规范之中，HTML4.01为script元素定义了以下6个属性：

  • async：可选，表示应该立即下载脚本，但不应妨碍页面中的其他操作，比如下载其他资源或等待加载其他脚本，只对外部脚本文件有效。
  • charset：可选，字符集，一般不写
  • defer：可选，表示脚本可以延迟到文档完全被解析和显示之后再执行，只对外部脚本文件有效。
  • language：已废弃
  • src：可选，表示包含要执行代码的外部文件
  • type：可选，language的替代属性，表示编写代码使用的脚本语言的内容类型，默认为text/javascript。

简单的例子：

<script>
    function sayHi() {
        alert("Hello World")
    }
</script>

应注意，解析嵌入式代码时，不能在代码内部出现"</script>"，否则将被认为是结束的script标签，应该进行转义处理。

<script>
    function sayHi() {
        alert("</script>") // 错误
        alert("<\/script>") // 正确
    }
</script>

src跨域问题：

使用script标签的src属性可以包含来自外部域的JavaScript文件，这使得script十分强大又备受争议。

如果你了解跨域，使用script的src属性可以跨域的特点，jsonp得以诞生。

但相对的，也会出现安全性问题，一般而言，只有绝对信任外部域，才能引用其中的代码，否则该域的代码拥有者随时可以改变代码，窃取你的隐私。

传统做法中将JavaScript代码放在head元素之中，但这意味着必须等到全部JavaScript代码都被下载、解析和执行完成以后，才能开始显示页面的内容，这会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口将一片空白，因此现代web应用程序一般把全部JavaScript引用放在body元素之后，这样在解析JavaScript代码之前，页面的内容即被呈现在浏览器中，提升了用户的体验。

嵌入代码与外部文件

在HTML中嵌入代码不会出现问题，但一般认为最好的做法是尽可能的使用外部文件来包含JavaScript代码。认为有如下优点：

  • 可维护性：遍及不同HTML页面的JavaScript代码会造成维护问题。但把所有的JavaScript文件都放在一个文件夹中，维护起来就十分的轻松，开发人员也能够在不触及HTML标记的情况下，集中精力编辑JavaScript代码。
  • 可缓存：浏览器能够根据具体的设置缓存链接的所有JavaScript文件，也就是说，如果有两个页面都使用同一个文件，那么这个文件只需下载一次。最终能够加快页面加载的速度。
  • 适应性：通过外部文件包含JavaScript代码无须使用注释hack，HTML和XHTML包含外部文件的语法是相同的。

文档模式

IE5.5引入文档模式的概念，由文档类型关键字doctype控制。最初的两种文档模式是混杂模式(quirks mode)和标准模式(standards mode)。这两种模式主要影响的是CSS内容的呈现，但在某些情况下也会影响到JavaScript的解释执行。

后来，其它浏览器纷纷效仿，IE又提出一种所谓的准标准模式(almost standards mode)，这种模式下的浏览器特性大多都符合标准，不标准的地方主要体现在图片间隙的处理方面。

如果没有文档类型即doctype声明，默认开启混杂模式(不推荐，因为各个浏览器在该模式下行为差异大，跨浏览器难以实现)。

开启标准模式：

<!-- HTML 4.0.1 严格型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1//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.0.1 过渡型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.0.1 框架集型 -->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0.1 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的浏览器中显示替代的内容，这个元素可以包含能够出现在文档body中的任何HTML元素(除了script元素)，包含在noscript元素的内容只有在下列情况下才会显示出来：

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

除了以上两个条件，浏览器不会呈现noscript中的内容。

例子：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>noscript</title>
</head>

<body>
    <noscript>
        noscript test
    </noscript>
</body>

</html>

在一个启用了脚本的浏览器中，永远无法看到这条消息。

小结

对于script元素，需要注意：

  1. 在包含外部JavaScript文件时，src可以是同域也可以是不同域。
  2. 在不使用defer和async属性时，只有解析完前面script元素中的代码之后，才会解析后面的。
  3. 一般把script元素放置在页面最后，使得页面内容优先加载。
  4. defer元素可以让脚本在文档完全呈现之后再执行。
  5. async元素可以让当前脚本不必等待其他脚本，也不必阻塞文档呈现。不能保证异步脚本按照它们在页面中出现的顺序执行。

noscript元素可以指定在不支持或禁用脚本的浏览器中显示替代内容，可以合理的使用。

相关标签： JavaScript高级程序设计（第三版） javascript html script noscript

上一篇： Struts2.0初步

下一篇： 《JavaScript高级程序设计 第三版》第6章 面向对象的程序设计

推荐阅读