日期:2014-05-16  浏览次数:20354 次

什么是 JavaScript?你该如何执行它

什么是 JavaScript?你该如何执行它?

JavaScript 是一种基于文本的程序设计语言,在被执行之前不需要进行任何转换。其它程序设计语言比如 Java 和 C++ 都需要先进行编译,才能成为可执行文件,而 JavaScript 可以通过一种用来解释代码的程序立即被执行,这种程序叫做解析器(几乎所有的 web 浏览器都包含有 JavaScript 解析器)。

为了在浏览器中执行 JavaScript,你有两个选择——要么将其放在 HTML 文档中任意位置的 script 元素内部,要么将其放在一个外部 JavaScript 文件(其扩展名为 .js)中,然后在 HTM L文档内部用一个带有 src 属性的空的 script 元素来引用该外部文件。本文对这两种方法都有讨论。

将你的 JavaScript 代码包含在 HTML 文档内

最简单的在 HTML 页面中包含 JavaScript 的方法可能如下:

<script>
  var x = 3;
  alert('hello there, I am JavaScript - x is '+x);
</script>

你可以将这段代码放在你的文档内的任意位置,这样就可以执行这段代码了。但有的地方比起其它地方来明显要好得多——关于这一点的具体建议请参见 JavaScript 该放在哪儿部分。

在未来的 web 页面上可能会有若干不同类型的脚本,所以最好为你的脚本添加一个 MIME 类型:

<script type="text/javascript">
  var x = 3;
  alert('hello there, I am JavaScript - x is '+x);
</script>

注意:你会发现在网上有些脚本带有 language="javascript" 属性。这种使用方法不属于任何标准,而且完全不起任何效果的;你要是能删的话就把它们都删掉好了。这种用法是过去的做法,那时 VBScript 在 web 页面上的使用还很流行。然而现在 VBScript 的使用已经销声匿迹了,因为它只在 IE 中才能起效。

过去我们需要把 JavaScript 写成 HTML 注释形式,以防止浏览器直接将 JavaScript 代码作为 HTML 显示出来。不过现在你不用再为此费心了,因为现在只有那些非常老旧的浏览器才会这么做。如果你的 DOCTYPE 用的是严格型的 XHTML ,那么任何 JavaScript 就都得放在 CDATA 数据块中,这样它才能生效(不必操心这是为什么——在你目前的学习阶段中,这个原因并不是很重要):

<script type="text/javascript">
/* <![CDATA[ */
  var x = 3;
  alert('hello there, I am JavaScript - x is '+x);
/* ]]> */
</script>

不过,对于严格型的 XHTML 文档来说,最好还是不要在其中嵌入任何 JavaScript ,而应该将它们放在一个外部文档中。

链接到外部 JavaScript 文件

要链接到一个外部 JavaScript 文件(该文件可以是在同一台服务器上,也可以是在互联网上任意之处),你只需在你的 script 元素中加入一个 src 属性即可:

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

当浏览器在某个页面中遇到该元素时,就会加载并执行 myscript.js 文件。如果你设置了 src 属性,那么在该 script 元素内部的任何内容都将被忽略。下面的示例将加载 myscript.js 文件,并执行该文件内部的代码,但却根本不会执行 script 元素内的 alert 。

<script type="text/javascript" src="myscript.js">
alert('I am pointless as I won\'t be executed');
</script>

将你的代码放在外部 JavaScript 文件中有很多好处:

  • 你可以将同一个 JavaScript 功能应用到若干 HTML 文档中去,而维护却依然十分容易:如果需要改变该功能的话,你只需修改一个文件就可以了。
  • 你的 JavaScript 可以被浏览器缓存。缓存的意思是指浏览器将复制一份你的 JavaScript ,并将其保存在浏览你网站的访问者的计算机里。下次该用户加载该脚本的时候就不再需要从你的服务器下载了,他可以直接从自己的计算机中获取——因此载入速度会快得多。
  • 如果你要修改自己的脚本的话,很容易就能找到它,从而避免了扫描长长的 HTML 文档来查找需要修改的地方。
  • 由于调试工具或错误控制台会告诉你哪个文件中包含错误,而且还可以准确地报告出错的代码行号,错误调试也变得更容易了。

你可以往一个文档中添加任意数目的 JavaScript 文件,但在你开始这么干之前还有几件事情要考虑。

JavaScript 和浏览器性能

将大量的 JavaScript 分成不同的文件,每份文件每次处理一项任务,对于保持功能维护的简便和快速漏洞修复来说这是一个极好的办法。比如说你可能会有像下面这样的若干脚本块:

<script type="text/javascript" src="config.js"></script>
<script type="text/javascript" src="base.js"></script>
<script type="text/javascript" src="effects.js"></script>
<script type="text/javascript" src="validation.js"></script>
<script type="text/javascript" src="widgets.js"></script>

这种做法在开发方面的优点却被它在性能方面的负面影响削弱了。虽然这种情况在不同的浏览器上有轻微的差别,但在最坏的情况中(令人遗憾的是这种情况发生在最常用的浏览器中)会发生下面的情况:

  • 浏览器每遇到一个 script 元素,都会停止渲染(显示)该文档。
  • 然后浏览器会加载在 src 属性中定义的 JavaScript 文件(如果你要用的脚本位于另一台服务器上的话,你还得等待浏览器找到那台服务器)。
  • 然后浏览器将在访问下一个脚本之前先执行这一脚本。

以上种种意味着你网站的显示将变得缓慢,直到你页面中包含的所有脚本都经历完上述步骤为止。对于你的访客来说,这可是会非常糟糕的。

解决这个问题的办法之一是使用后端脚本,根据你所使用的所有文件来创建一个单独的文件。通过这种办法你就既可以保持维护的简便性,同时又可以减少自己网页在显示时的延迟。网上有许多完成此任务的后端脚本——其中有一个是用PHP写的,可从 Ed Eliot 获取此脚本。

显示上的延迟还限定了你该将自己的JavaScript放在文档中的什么地方。

JavaScript 该放在哪儿

从技术上来讲,你可以将 JavaScript 放在文档内的任意地方。你要做的决定就是,在性能与开发方便之间进行权衡,并确保你用来增强页面功能的 JavaScript 能够立刻产生效果。

传统的脚本放置最优方法是放在文档的 head 之内:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en-en"> 
<head>
?<meta http-equiv="Content-Type" content