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

在HTML 中使用JavaScript

程序员文章站 2022-06-30 20:47:27
...

要一提到把JavaScript 放到网页中，就不得不涉及Web 的核心语言—HTML。在当初开发JavaScript 的时候，Netscape 要解决的一个重要问题就是如何做到让JavaScript 既能与HTML页面共存，又不影响那些页面在其他浏览器中的呈现效果。经过尝试、纠错和争论，最终的决定就是为Web 增加统一的脚本支持。而Web 诞生早期的很多做法也都保留了下来，并被正式纳入HTML 规范当中。

一、<script>元素

向HTML 页面中插入JavaScript 的主要方法，就是使用<script>元素。这个元素由Netscape 创造并在Netscape Navigator 2 中首先实现。后来，这个元素被加入到正式的HTML 规范中。使用<script>元素的方式有两种：直接在页面中嵌入JavaScript 代码和包含外部JavaScript文件。包含在<script>元素内部的JavaScript 代码将被从上至下依次解释。在解释器对<script>元素内部的所有代码求值完毕以前，页面中的其余内容都不会被浏览器加载或显示。按照惯例，外部JavaScript 文件带有.js 扩展名。但这个扩展名不是必需的，因为浏览器不会检查包含JavaScript 的文件的扩展名。

  • 标签的位置
  • 按照传统的做法，所有<script>元素都应该放在页面的<head>元素中。
<!DOCTYPE html>
<html>
<head>
<title>Example HTML Page</title>
<script type="text/javascript" src="example1.js"></script>
<script type="text/javascript" src="example2.js"></script>
</head>
<body>
<!-- 这里放内容 -->
</body>
</html>
  • 这种做法的目的就是把所有外部文件（包括CSS 文件和JavaScript 文件）的引用都放在相同的地方。可是，在文档的<head>元素中包含所有JavaScript 文件，意味着必须等到全部JavaScript 代码都被下载、解析和执行完成以后，才能开始呈现页面的内容（浏览器在遇到<body>标签时才开始呈现内容）。对于那些需要很多JavaScript 代码的页面来说，这无疑会导致浏览器在呈现页面时出现明显的延迟，而延迟期间的浏览器窗口中将是一片空白。为了避免这个问题，现代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 中嵌入JavaScript 代码虽然没有问题，但一般认为最好的做法还是尽可能使用外部文件来包含JavaScript 代码。不过，并不存在必须使用外部文件的硬性规定，但支持使用外部文件的人多会强调如下优点。

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

把JavaScript 插入到HTML 页面中要使用<script>元素。使用这个元素可以把JavaScript 嵌入到HTML 页面中，让脚本与标记混合在一起；也可以包含外部的JavaScript 文件。而我们需要注意的地方有：

  • 在包含外部JavaScript 文件时，必须将src 属性设置为指向相应文件的URL。而这个文件既可以是与包含它的页面位于同一个服务器上的文件，也可以是其他任何域中的文件。
  • 所有<script>元素都会按照它们在页面中出现的先后顺序依次被解析。只有在解析完前面<script>元素中的代码之后，才会开始解析后面<script>元素中的代码。

上一篇： MapReduce框架原理之MapReduce工作流程

下一篇： 联想发布Yoga Tab 3 Plus：拿掉微型投影仪

推荐阅读