2.6　教程：使用变量创建消息

在这个教程中，我们将使用变量在Web页面上显示一条消息。

注意：为了学习本章中的教程，你需要从本书配套Web站点http：//sawmac.com/js2e/下载教程文件。请参见1.3节中“注意”部分的详细说明。

1.在文本编辑器中打开chapter02目录下的文件use_variable.html。

这个页面只是一个基本的HTML文件，其中带有一些简单的使用CSS的设计。它还没有任何的JavaScript。我们可以使用变量在Web页面上显示消息。

2.找到＜h1＞标签（在文件中部略微偏下的位置），添加开始＜script＞标签和结束＜script＞标签，代码如下所示：

＜h1＞Using a Variable＜/h1＞

＜script＞

＜/script＞

现在，我们应该熟悉这段HTML了：它只是让页面准备好等待编写脚本。

注意：这个页面使用HTML5作为doctype。如果你使用XHTML 1.0或HTML 4.01，像下面这样把type=”javascript”添加到＜script＞标签：＜script type=”text/javascript”＞。这个步骤不是为了使脚本能够工作而必需的，只是为了让页面能够通过W3C验证器（参见本书“前言”部分以了解更多关于验证的内容）。

3.在＜script＞标签之间输入：

var firstName='Cookie'；

var lastName='Monster'；

这就创建了两个变量firstName和lastName，并且在其中存储了两个字符串值。接下来将把两个字符串加在一起，并且在Web页面上显示结果。

4.在两个变量声明下面输入：

document.write（'＜p＞'）；

第1章已介绍过，document.write（）命令直接把文本添加到Web页面。在这个例子中，我们使用它来把HTML标签显示在页面上。我们为该命令提供了一个字符串’＜p＞’，它输出的字符串正是我们在HTML代码中录入的内容。提供HTML标签作为document.write（）命令的部分也没问题。在这个例子中，JavaScript为段落添加了一个开始标签，以存储要在页面上显示的文本。

注意：有比document.write（）效率更高的方法可以把HTML添加到Web页面。我们将在本书4.7节学习。

5.按回车键后输入如下JavaScript代码：

document.write（firstName+’’+lastName）；

这里使用在步骤3中所创建的变量中所存储的值。+操作符允许把几个字符串组合到一起，产生一个较长的字符串，然后document.write（）命令把该字符串显示到页面。在这个例子中，对于存储在firstName中的值'Cookie'，先添加了一个空格字符，然后，再添加lastName的值'Monster'。结果就是字符串'Cookie Monster'。

6.再次按下回车键后输入document.write（'＜/p＞'）；。

完成后的脚本如下所示：

＜script type="text/javascript"＞

var firstName='Cookie'；

var lastName='Monster'；

document.write（'＜p＞'）；

document.write（firstName+’’+lastName）；document.write（'＜/p＞'）；

＜/script＞

7.在Web浏览器中预览页面，享受劳动成果（如图2-2所示）。

单词“Cookie Monster”应该出现在标题“Using a Variable”的下方。如果你没有看到任何内容，可能是由于代码存在录入错误。把你录入的脚本和上面的脚本进行比较，并参考1.6小节介绍的关于使用Firefox、Safari、Chrome或IE 9调试脚本的技巧。

8.返回文本编辑器，把脚本的第二行代码改为：

var lastName='Jar'；

保存页面并在We b浏览器中预览。瞧，现在的消息是CookieJar（文件complete_use_variable.html中有这段脚本的一个可工作的副本）。

图　2-2　虽然写出“Cookie Monster“可能并非我们挑选一本JavaScript图书的理由，但这段脚本确实展示了一个重要的概念：如何在JavaScript中创建和使用变量