JavaScript入门

来源：互联网发布：阳光下的星星知乎编辑：程序博客网时间：2024/05/21 10:27

本书主要讲述JavaScript脚本语言以及如何在实际开发中使用它。在读完本书之后，你就能够：

l 理解JavaScript的语法和结构。

l 创建容易理解和维护的脚本。

l 编写不与其他JavaScript冲突的脚本。

l 编写使网站更加容易使用，且不排斥非JavaScript用户的脚本。

l 编写独立于浏览器或用户代理需要处理的脚本—也就是在未来许多年中它们仍然是有用的，不会依赖于会过时的技术。

l 使用JavaScript增强网站，可以让不了解任何脚本知识的开发者也可以改变网站的风格。

l 使用JavaScript增强网站，可以让HTML开发者在网页中给某个元素简单地添加一个CSS类来使用你开发的功能

l 在用户代理允许的时候，可以使用渐进增强来使网页文档变得更好。

l 使用Ajax来弥补客户端和服务端之间的间隙，因而创建站点更易维护，而且使用户感觉更加平滑流畅。

l 将JavaScript作为Web方法学的一部分，使你能够独立地维护它而不与其他的开发流程冲突。

在这里你不会发现：

l 如何创建华丽的特效但对访问者没有任何价值的教程。

l 特定于浏览器的JavaScript应用。

l 只是为了证明它可以被使用但不能提高访问者体验的JavaScript代码。

l 提供一些用户不想要内容的JavaScript脚本，如弹出窗口或其他一些展示动画效果的小技巧或动画等华丽的技术

我坚信JavaScript在主流的Web开发中占有重要的地位，但我们无法保证访问者能够使用或体验用JavaScript所能达到的所有的特效和功能。JavaScript允许我们通过添加、删除或显示隐藏元素来完全地改变网页效果。我们可以提供丰富的界面，如拖放式的应用或是多层下拉菜单。但是，一些访问者并不能使用拖放式的界面，因为他们只能使用键盘或是声音来访问我们的站点，还有一些用户可能是通过听而不是看来访问（通过屏幕阅读），所以不能够察觉由JavaScript带来的变化。不仅如此，有的用户不能启用JavaScript功能,如在银行等安全级别高的环境中。因此，在服务端用JavaScript来解决问题时还有很多东西需要考虑。

遗憾的是，JavaScript也有一段被用作给用户弹出强制信息的历史，这些信息并不是用户所请求的（弹出窗口就是最好的例子）。这种行为对于我，还有其它的专业网站设计者都感觉很头疼。我希望你不要使用从本书中获得的知识去做这样的事情。

n 注解：网页设计经过这些年的发展已经成熟——我们已经不直接使用Font标签，且屏蔽了一些视觉属性,例如bgcolor。我们推荐把所有的格式化和界面表示的属性放到CSS文件中。发生在JavaScript上的演化过程同样是Web开发的一部分。我们已把内容、结构和表示分离开了，现在是把网站的行为也从其它层分离出来的时候了。Web开发现在主要考虑的是业务需求和用户体验，而不是把一些程序放到那里，然后让它在更多的平台环境下都可以使用。

现在应该把JavaScript看作整个开发技术的一部分，这意味着我们开发JavaScript程序与其它的类似HTML、CSS的技术并不相冲突，相反是和它们配合使用或弥补它们的不足。现在，我们看到出现了一种新的技术（或者至少是一种对现有技术的新的使用方式），它叫Ajax。我们将会在第8章中讨论它。

在20世纪90年代，Web开发得到了飞速发展，现在创建静态或者固定大小的网站已经意义不大了。任何主流的网页设计都必须考虑未来的扩展需求。同样，它对每个人来说都应该是可访问的（这并不意味每个人都会得到相同的显示效果：一个好的多层布局。举个例子，它可能在高分辨率的显示器上显示很好却很难在手机或者PDA上使用），并且是可以国际化的。我们不可能花更多的时间来做个永远都好用的产品。因为Web是与内容相关的，且需要不断地变化，如果我们不经常更新网络产品并让其它数据源为其添加新数据或从中获取数据，那么它很快就会过时。

简介已经不少了——你拿这本书是来学习JavaScript的。在正式探讨它之前，让我们先来快速介绍一下JavaScript的历史和渊源。

在这一章你会学到：

l JavaScript是什么以及你能拿它来做什么

l JavaScript的优缺点

l 如何把JavaScript添加到一个网页中以及它的基本语法

l 面向对象编程(OOP)与JavaScript的关系

l 如何编写并运行一个简单的JavaScript程序

现在的情况是你已接触到了JavaScript,并且会有一个想法，它到底是什么以及用它能干什么呢？所以我们先快速了解一下这种语言的一些基础和用途。如果你对JavaScript已经有了一定的了解，想简单了解一下更多新的特性和概念，你可以直接跳到第三章。不用在这占用你太多的时间---不过也有可能一些信息你已经遗忘了，复习一下也不会有坏处。

1.1. 为什么要用JavaScript

在Web发展的初期，主要有HTML和通用网关接口(CGI)。HTML定义了大部分的文本文档并指示用户代理（通常是网页浏览器）如何来显示——举个例子，标签<p></p>之间的文字就变成一个段落。在这个段落中你可以使用标签<h1></h1>来定义最主要的页面标题。注意大多数开始标签，都会有对应的以</开头的结束标签。

HTML有个缺点—它的状态是固定不变的。如果你想改变一些东西或者使用用户输入的数据，你需要和服务器进行一个回合的请求。使用动态技术(如ColdFusion, ASP, ASP.NET, PHP,或 JSP) 你从表单或者参数中把信息发送到服务器，服务器然后来完成计算/测试/数据库查找等。应用服务器会使用相应的这些技术来写一个HTML文档来显示结果，然后把处理的结果以HTML文档的形式返回到浏览器来供用户查看。

这样做的问题在于任何时候只要有变化，这整个过程都需要再重复一边（并且重新加载网页）。这样显得比较笨重缓慢，并且没有新媒介“Internet”承诺我们的那么美好。现在呢，至少是西方世界已经从快速的Internet连接中获得了好处。但是显示一个页面仍然意味着重新加载，这是一个比较慢且经常失败的过程（甚至会得到一个404错误提示）。

我们需要更加灵活的东西——允许web开发者可以快速对用户给出反馈信息并且不用从服务器来重新加载页面来改变HTML。可以想象一个表单每次需要重新加载，且它都有一个文本字段中都包含一个错误，与快速的获得错误提示且不用重新从服务器加载页面，哪个更方便使用呢？这就是一个JavaScript可以为你完成的一个例子。

一些信息并不需要依靠服务器，比如一些计算和校验表单信息。JavaScript可以被客户代理（通常是一个浏览器）在用户的电脑上执行。我们把这叫做客户端代码。这样可以减少与服务器的交互成本并且使网站变得更加快速。

1.2. JavaScript是什么

JavaScript的前身是LiveScript, 但是网景公司后来把名字改成了JavaScript，很可能是由于Java所带来的兴奋。这个名字经常会迷惑人，因为尽管Java与JavaScript有些语法比较相近，但它们之间并没有必然的联系。

Java相对于JavaScript就好比汽车（Car）相对于地毯（Carpet）。

——来自Usenet（一个世界性的新闻组网络系统）上的JavaScript讨论组

网景公司在1996年创造了JavaScript，它包含在Netscape Navigator(NN) 2.0浏览器中，用解释器来读取和执行添加到.html页面的JavaScript代码。从此，这种语言稳步增长变得越来越普及，现在大多数的浏览器都支持它。

好的消息是这意味着使用JavaScript的网页可以被所有主流的浏览器解析。另一个消息就不那么美好了，就是不同的浏览器在实现JavaScript的方式上有所不同，尽管JavaScript语言是一样的。但是，JavaScript可以被用户关闭掉——并且一些公司和机构从安全角度考虑也要求他们的用户这样做。这个我们会简短的作进一步的讨论，同样也是贯穿全书的。

关于JavaScript最大的特点就是你一旦学会了如何在浏览器编程中使用它，你就可以把它应用到其它领域中。微软的服务器-IIS-使用JavaScript去做服务端编程（ASP），PDF文件现在也使用JavaScript，甚至Windows的任务管理也可以使用JavaScript来自动运行。许多应用程序，如Dreamweaver和Photoshop，都是使用JavaScript来实现脚本化的。操作系统上的许多插件，如苹果公司的Dashboard或者Linux和Windows平台的Konfabulator，甚至允许你使用JavaScript编写小的帮助程序。

最近许多大公司也提供了你可以在自己网页中使用JavaScript对象和方法的APIs（应用程序编程接口），Google 地图就是其中的一种。你只需要使用几行代码就可以在你的网站中提供可缩放和滚动的地图。

另一个更好的特点就是JavaScript比高级编程语言和服务端编程语言更容易开发。它不需要像Java和C++那样需要编译，也不需要像Perl， PHP或Ruby语言那样运行在服务器上或需要在命令行执行。所有你需要做的就是使用文本编辑器和浏览器来编写，执行，调试和应用JavaScript脚本，而这两个在所有的操作系统中都是已提供的。当然，也有工具可以使你做这些更加方便，例如就有Mozilla Venkman， Microsoft Script Debugger, 和kjscmd JavaScript这样的调试器。

1.3. JavaScript的问题和法律权利

就如我在这一章的开始提到的，JavaScript在过去的几年里已经成了web开发的一个完整部分，但它也被用作不正当的用途。结果，它就落了一个不好的名声。导致这个结果的原因是蛮横的JavaScript特效，如移动页面元素和弹出窗口。这种情况你也许印象比较深刻，第一次你看到他们但很快就转变成另一个网页，甚至有的情况下弹出许多窗口，以至于你不希望再打开窗口了。许多类似的效果都来自DHTML (在第三章中有更多介绍)。

术语用户代理和对用户代理是什么的缺乏理解同样也是个问题。通常，用户代理是指一个浏览器，如微软的Internet Explorer（MSIE），Netscape，Mozilla（Moz），Firefox（Fx），Opera或Safari。但是浏览器不是Web上唯一的用户代理。其它的包括：

l 辅助技术，用来帮助用户克服它们的缺陷—如文本阅读软件或者盲人显示器

l 纯文字网页浏览器，像Lynx

l Web激活的应用程序

l 游戏控制台

l 手机/蜂窝电话

l 掌上手机（PDAs）

l 交互式的电视机顶盒

l 搜索引擎和其它检索程序

l 更多其他的

这么多类用户代理，使用了不同的技术手段（一些旧的用户代理没有更新），对于JavaScript也是一个非常大的危险。

并不是你网站所有的访问者都能体验你应用的特效，许多人都会出于安全的考虑把JavaScript功能关闭。JavaScript既可以被用来做好事，也可以用来做坏事。如果操作系统（如没有打补丁的Windows）允许，你可以通过JavaScript来在一台电脑上安装病毒或木马或者读取用户的信息，然后发到另一个服务器上。

注解：没有办法知道访问者在使用什么工具或者它的电脑的功能。再者，你永远不知道访问者的经验和能力如何。这也是网络很好的一个方面---每个人都可以参与。然后，这样会给JavaScript程序员带来意外的结果。

在大多情况下，你可能想要一种服务端的替代方案。它可以测试用户代理是否支持需要的功能，如果不支持，服务器会使用其替代方案。

独立的脚本语言对于网站是个法定的要求，在英联邦的数字歧视法，美国法律的508节和世界上其它的地区法律中都有定义。这意味着如果你开发的站点没有JavaScript

就不能使用，或你的JavaScript特效需要用户具有一定的能力或者他们的用户代理没有起作用，你的客户就可以控告你歧视。

然而，JavaScript既不是邪恶的也不是没用的，它是一个伟大的工具，可以帮助在你网站上冲浪的用户，感觉更加平滑流畅和花费更少的时间。

JavaScript不可靠为什么我们还要用它？

正如我提到的，JavaScript可能不是一直好用的不意味着它一点都不能用。它不应该只是简单的作为用户交互的方式。

使用JavaScript的优点是：

l 较少的服务器交互：你可以在提交页面到服务器前对用户输入的内容进行校验。这样减少了服务器的通信量，就意味着节约了金钱。

l 对访客快速反馈：他们不用等待页面重新加载才可以看到是否忘了输入某些东西。

l 自动修正小错误：举个例子，如果你有一个数据库系统，预期的日期格式是dd-mm-yyyy，用户输入的格式是dd/mm/yyyy, 一个聪明的JavaScript脚本可以在提交表单前纠正这个错误。如果那是访客唯一的错误，你可以保留她的错误信息，这样可以使她对使用这个站点少点沮丧。

l 允许访客不用重新加载页面就可以改变用户界面或与用户界面进行互动增强的实用性：例如，使用JavaScript收缩或展开页面的某部分或为访客提供额外的选择。这有个典型的例子，就是选择复选框来快速过滤，例如只显示某个机场的可到达的目的地，不用你重新加载页面，然后等待结果。

l 增强的互动性：你可以创建界面，在用户鼠标滑过的时候或使用键盘激活他们的时候做出反应。这个使用CSS和HTML也可以做到，但是JavaScript为你提供了更多的支持和选择范围。

l 丰富的界面：如果你的用户允许，你可以使用JavaScript包含一些拖放式的模块和进度条——一些原来只可以出现在你的用户安装的胖客户程序中，例如Java applets或者像Flash的浏览器插件。

轻量级的环境：不用像Java applet或者Flash影片需要下载一个大文件，脚本的文件大小是比较小的并且一旦被加载就会被缓存起来（保存在内存中）。JavaScript还使用浏览器按钮而不是它自己的界面来操作其功能，像Flash或Java applet 那样处理。这样使用户操作起来更容易，因为他们知道这些控制按钮以及如何使用他们。流行的 Flash 和Macromedia Flex应用程序有流媒体的选项——基于矢量——在是视觉上可调节的，JavaScript和 HTML 的控制是不可以这样的。另一方面，他们需要安装插件。

网页中的JavaScript和基本语法

应用JavaScript到一个网页中是非常容易的；所有你要做的就是使用这个标本标签：

// Your code here

</script>

对于老版本的浏览器，或如果你想使用严格的 XHTML ( HTML的最新版本) 代替过渡的XHTML，

你需要把这段代码加上注释，确保用户代理不在网页中显示它或试着把它当作HTML标示来解析。给代码加注释有两种不同的语法。对于 HTML 文档和过渡的XHTML，你使用标准的HTML注释：

<!--

// Your code here

-->

</script>

在严格的XHTML中，你需要使用CDATA注释语法为你的代码加注释——然而，最好不要在严格的XHTML文档中添加任何JavaScript，而是把它放到自己的文档中。在第三章有更多关于这方面的说明。

// Your code here

//--><!]]></script>

技术上讲，在HTML文档的任何地方加入JavaScript都是做得到的，然后浏览器就会解释它。可是，在流行的脚本中，有许多理由说明为什么这样做是个非常糟糕的主意。尽管到目前为止,我们会在文档的主体中加入JavaScript例子使你直接地可以看到你的第一个脚本在干什么。这样会比第三章中等待你的流行和高级技术更容易帮助你的熟悉JavaScript。

■注解：也有一个与script“相反”的标签—noscript，它允许你添加一些只有在JavaScript不可用的情况下才会显示的内容。然而，noscript在XHTML 和严格的HTML中是不赞成使用的。如果你创建的JavaScript是友好的，就没有必要使用它。

JavaScript语法

在我们进一步探讨之前，先来讨论一下JavaScript基本语法：

l // 表示当前行的其它部分是注释并且代码是不会执行的，所以解释器不会试着运行它。注释是一个把注解放到代码中的一个便捷方式，它可以提示我们这段代码打算作什么，或者帮助其它人阅读代码以理解代码是干什么的。

l /* 表示一个多行注释的开始。

l */ 表示一个多行注释的结束。多行注释同样是有用的，如果你想阻止某段代码被执行但是又不想永久的删除它。如果你对一个代码段有疑问，例如，你不能确定哪些行有问题，那么你可以每次注释掉它的一部分，从而分离出问题来。

l 大括号（{和}）被用来表示一个代码段。它们确保大括号中间的所有行都被当作一个代码段来看待。当我们在讨论像if或for这样的结构语句和函数时，你会看到大括号更多相关的应用。

l 分号或换行定义了语句的结束，一条语句就是一个单行命令。在实际应用中，分号是可以选择的。但是在语句结束的时候，使用它们来使代码更清晰条理是个好主意，因为这样做可以使你的代码更容易读和调试（尽管你可以把许多语句放到一行中，但是最好还是把它们放到独立的行中以使代码更容易读）。在大括号的后面不需要使用分号。

我们来把这个语句加到运行的代码段中：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<body>

// One-line comments are useful for reminding us what the code is doing

This is a multiline comment. It's useful for longer comments and

also to block out segments of code when you're testing

Script starts here. We're declaring a variable myName, and assigning to it the

value of whatever the user puts in the prompt box (more on that in Chapter

2), finishing the instruction with a semicolon because it is a statement

var myName = prompt ("Enter your name","");

// If the name the user enters is Chris Heilmann

if (myName == "Chris Heilmann")

{

// then a new window pops up saying hello

alert("Hello Me");

}

// If the name entered isn't Chris Heilmann

else

{

// say hello to someone else

alert("hello someone else");

}

</script>

</body>

</html>

依据以前的JavaScript经验，你会发现一些代码不起作用了。现在所有的事情就是要弄清楚注释是怎么使用的、代码段是什么和为什么一些语句的结尾有个分号。如果你喜欢，你可以运行这段代码：只要把它复制到HTML网页中，使用.html后缀保存文档，按后在你的浏览器中打开它。

尽管一些像if和else的语句跨越不止一行而且包含其它语句，但它们让被看成是一个语句，它们的后面不需要加分号。JavaScript解释器知道在if语句后面的哪几行语句应该被当作一个代码块来处理，因为有大括号{}。虽不是强制的，但是把大括号内面的代码进行缩进处理是个很不错的注意。这可以使阅读和调试更容易。我们会在下一章中讨论变量和条件语句（if和else）。

执行代码

浏览器从上到下来读取页面，所以代码执行的顺序取决于脚本块的顺序。一个脚本块是指 <script> 和</script>之间的代码。（同样需要注意到，不只是浏览器可以阅读我们的代码，一个网站的用户也可以查看你的代码，所以不要把一些保密的信息或者敏感的内容放到内面。）

在下面的例子中有三个脚本块。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

alert( 'First script Block ');

alert( 'First script Block - Second Line ');

</script>

</head>

<body>

alert( 'Second script Block' );

</script>

alert( 'Third script Block' );

function doSomething() {

alert( 'Function in Third script Block' );

}

</script>

</body>

</html>

如果你试着运行一下它，你会首先看到第一个脚本块中的alert()窗口，显示着消息：

First script Block

紧跟着的是第二行中的下一个alert（）窗口，显示着消息：

First script Block - Second Line.

解释其会继续往下执行来到第二个脚本块，在这里alert函数会显示这样一个窗口：

Second script Block

接着其后包括alert（）语句的第三个脚本块会显示：

Third script Block

尽管最下面几行的函数中存在另一个alert语句，但是它不会执行并显示消息。这是因为它在函数定义的内面（function doSomething()）, 函数内面的代码只有在函数被调用的时候才会执行。

函数

我们会在第三章中对函数进行深入的讨论，但我在这里介绍它们是因为不了解函数很难对JavaScript做更深入进一步的了解。一个函数就是一个被命名的、可重用的代码块，它被成对的大括号括起来，你可以用来完成一个特定的任务。 JavaScript包含许多函数，我们可以直接使用来完成一些任务如显示消息给用户。合理的使用函数可以避免一个程序员重复代码的编写。

我们同样可以创建自己的函数，在前面的代码段中我们就已经创建了一个。假定我们创建了一些代码，它们可以在某个元素里向网页中写一个消息。我们可能需要在不同的情况下重复的使用它。当然我们可以在需要使用它们的地方通过复制粘贴代码段来实现，但是这种方法使代码过于冗长；如果同样的代码段在一个页面中出现三四次，那么它同样很难理解和调试。我们可以把这段打印消息的代码封装到一个函数中来替代，然后使用参数来给函数传递运行需要的消息。一个函数也可以为调用它的代码返回一个值。

调用函数，你可以简单的在它的名字后写个括号：（）。（注——你可以使用括号来传递参数。但是在没有参数的时候，你仍然必须使用括号。）但是你不能调用你想象的函数，必须是脚本已经创建的。我们可以如下的方式，通过把它添加到第三个代码块中来调用它：

alert( 'Third script Block ');

function doSomething(){

alert( 'Function in Third script Block ');

}

// Call the function doSomething

doSomething();

</script>

</body>

</html>

到目前为止，在这章中我们已经从JavaScript语言的正反两方面讨论了它，明白了一些语法规则，学习了这种语言的一些主要组成部分（虽然只是简要地），并运行了一些JavaScript代码。你已经接触到了相当多的东西。在我们在下一章中继续对JavaScript语言作更详细的讲解前，让我们先来讨论一下成功的JavaScript开发的关键点：对象

对象

对象是我们使用JavaScript的核心。JavaScript中的对象在许多方面和编程外的现实世界中的对象是相似的（它并不存在，我只是做个设想）。在现实的世界中，一个对象就是一个“事物”（许多关于面向对象编程的书中把对象比喻成名词）：一个汽车，一个桌子，一个椅子，还有我敲打的键盘。对象拥有：

属性（可比作形容词）：这个汽车是红色的。

方法（像一个句子里的动词）：启动汽车的方法可能是拧动点火器。

事件：拧动点火器导致了汽车启动事件。

面向对象的编程（OOP）试着通过给真实世界中的对象建模来使编程更加容易。让我们来创建一个汽车模拟器。首先，我们会创建一个汽车对象，给它一些属性，如颜色和当前速度。接着我们需要创建方法：可能一个start方法来启动汽车，一个break方法来给汽车减速，在其中我们需要传递刹车的需要按得力度大小消息来决定减速的效果。最后，我们需要一些事件，例如，汽油过低的事件提醒我们去给汽车加油。

面向对象的编程涉及这些概念。这种设计软件的方式现在在许多的编程领域都非常通用和流行——但对我们最重要的就是，它是JavaScript和网页编程的核心。

我们使用的一些对象是JavaScript这种语言规范提供的一部分：String对象，Date对象，以及Math对象等等。同样的JavaScript对象会在一个PDF文件或者一个网页服务器中提供。这些对象提供了许多有用的功能，可以节省我们大量的编程时间。举例来说，Date对象，允许你从客户端获取当前的日期和时间（如一个用户的PC）。它保存着日期，还提供了许多与日期相关的许多有用的函数，如，把一个时区的日期/时间转换为另一个时区的。这些对象通常被称作核心对象，因为它们是独立于实现的。浏览器它自己同样也提供通过对象来编程，它允许我们获取浏览器的相关信息，并改变应用的视觉效果。举个例子，浏览器提供Document对象，它在JavaScript中代表一个网页。我们可以在JavaScript中使用这个来为被浏览器的用户查看的页面添加新的HTML元素。如果你曾在不同的主机中使用JavaScript, 假设使用一个Windows服务器, 你会发现JavaScript主机提供了一组非常不同的主机对象集合，它们的功能是与你在服务器上所作的事情相关的。

你会在第三章中发现，JavaScript允许我们创建自己的对象。这是一个非常强大的特性，允许我们使用JavaScript为现实世界的问题进行建模。创建一个新的对象，我们需要使用一个模版来制定它的属性和方法，它叫做类（class）。一个类与建筑师的图纸有点类似，它指定了什么东西应该到什么地方去做什么事情，但是它实际上并没有创建对象。

n 注解：JavaScript是基于对象的语言还是面向对象的语言，这个问题存在一些争论。不同之处在于基于对象的语言使用对象来编程但是不允许编码者在他们的代码设计中使用面向对象编程。面向对象的语言不只使用对象，也允许使用面向对象的方法来简化开发和代码设计。 JavaScript允许我们创建我们自己的对象，但是与Java、C#等基于类的语言实现方式不同。无论如何，我们在这里不要集中在争论什么是或不是面向对象的，而应该关注实际在这本书上对象是如何应用的，我们会在需要的地方关注一些基本的面向对象编程。

当你通读完本书后，你会对对象有个更深的认识：JavaScript的核心对象、浏览器提供的使用JavaScript进行访问和操作的对象和创建自己定义的对象。到目前为止，所有你需要知道的就是JavaScript中的对象就是你可以用来给网页中添加功能的“实体”，他们可以拥有属性和方法。Math对象，举例来说，在它的属性中有一个是表示pi的值，在它的方法中有一个可以产生随机数。

一个简单的JavaScript例子

我们会使用一个简单的脚本来结束本章。它首先会测量访问者的屏幕宽度，然后来应用一种合适的样式（通过在页面中添加一个额外的LINK元素）。我们会使用Screen对象，它是用户屏幕的一种表示。这个对象有一个availWidth 属性，我们可以得到它，由它来决定该加载那种样式。

下面是这段代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<head>

<title>CSS Resolution Demo</title>

<!--

Extra style (applied via JavaScript) to override default settings

according to the screen resolution

-->

// Define a variable called cssName and a message

// called resolutionInfo

var cssName;

var resolutionInfo;

// If the width of the screen is less than 650 pixels

if( screen.availWidth < 650 ) {

// define the style Variable as the low-resolution style

cssName = 'lowres.css';

resolutionInfo = 'low resolution';

// Or if the width of the screen is less than 1000 pixels

} else {

if( screen.availWidth > 1000 ) {

// define the style Variable as the high-resolution style

cssName = 'highres.css';

resolutionInfo = 'high resolution';

// Otherwise

} else {

// define the style Variable as the mid-resolution style

cssName = 'lowres.css';

resolutionInfo = 'medium resolution';

}

document.write( '<link rel="StyleSheet" href="' +

cssName + '" type="text/css" />' );

</script>

</head>

<body>

document.write( '<p>Applied Style:' +

resolutionInfo + '</p>' );

</script>

</body>

</html>

尽管我们会在下章中看到if语句和循环的详细讲解，但你已经能够大概明白它是如何工作的。第一行的if语句来判断screen.availWidth 是否小于650:

if ( screen.availWidth < 650 )

如果用户的屏幕是640*480,那么它的宽度小于650, 所以大括号里的代码会被执行，low-resolution和消息会得到定义。

if ( screen.availWidth < 650 ) {

// define the style Variable as the low-resolution style

cssName = ‘lowres.css';

resolutionInfo = 'low resolution';

}

代码使用else语句继续检查屏幕的大小。最后的else语句只有在其他的判断语句都不执行的时候才会发生，所以我们假定屏幕的大小是800*600，对应的定义一个medium样式和消息。

else {

// define the style Variable as the mid-resolution style

cssName = 'lowres.css';

resolutionInfo = 'medium resolution';

}

这样也有可能是徒劳的，因为我们在这里测量用户的屏幕大小，用户可能拥有一个800*600的屏幕，但是那不意味着他们的浏览器窗口是最大化的。我们可能应用一种并不是很合适的样式。

我们使用了另一个对象：document，用它来往网页（HTML文档）中写入数据。Document对象的write（）方法允许我们在页面中插入HTML。注意document.write() 实际上并没有改变HTML源文件的内容，只是改变了用户在他自己电脑上看到的网页。

n 注解: 实际上，在你看完本书的前几章后，你就会发现document.write() 非常有用。它非常适合于来展示脚本是如何工作的小例子、与用户进行交互、甚至对一个你不太确定的程序段进行调试，以明白它没有按你预期那样运行的原因。它还在所有支持JavaScript的浏览器上都可以运行。许多主流的浏览器提供了更好的工具和方法来进行调试，我们会在第三章中会做更多介绍。

我们使用document.write()来在文件头中写一个使用了我们已定义好的样式的link元素：

document.write( '<link rel="StyleSheet" href="' +

cssName + '" type="text/css" />' );

并在文档的主体部分，我们会写出信息来说明那种样式被应用了：

document.write( '<p>Applied Style: '+ resolutionInfo + '</p>' );

</script>

稍后，我们会接触更复杂的例子，它使用JavaScript来测试用户代理和用户界面的类型。现在，我希望这个简单例子可以给你一个大致的了解，你可以使用JavaScript在你的网页中加入有弹性的元素。

小结

在这一章中，我们学习了什么是JavaScript、它是如何工作的以及它的优缺点。它最大的缺点是我们不能信任获得的信息是否可靠，对此我做了注解，但是我同样也提到，使用JavaScirpt可以使网站获得更好更流畅的体验。

你已经运行了一些JavaScript代码，看到了如何在代码中添加注释，如何使用分号把JavaScript语句分开。你也明白了使用大括号可以让JavaScript把一组的多行代码看作一个独立的块。紧接着是一个if语句的例子。你已学习了JavaScript执行通常是自上而下，从第一脚本块到最后一个脚本块，函数是一个例外，它只有在你调用的时候让它们执行，它们才会执行。

我们也学习了对象，它是编写JavaScript的核心。不止JavaScript本身以来对象，浏览器也使用对象和方法来使它自己和文档脚本化，最后，我们看了一个简单的小例子，它读取用户的屏幕分辨率，并应用一种是和的样式。

在下一章中，我会覆盖JavaScript语言的基础。你会看到JavaScript如何存储和操纵数据，以及如何在计算中使用它。我们还会看到使用决策语句来创建“智能的”JavaScript程序。它允许我们对数据进行求值，计算，并选择一个合适的动作分支。在你熟练掌握了下章后，你就拥有了可以继续学习更多令人兴奋和有用的网页编程的大部分基础知识。

0 0