2.6 教程:使用变量创建消息
在这个教程中,我们将使用变量在web页面上显示一条消息。
在文本编辑器中打开chapter02目录下的文件use_variable.html。
这个页面只是一个基本的html文件,其中带有一些简单的使用css的设计。它还没有任何的javascript。我们可以使用变量在web页面上显示消息。
找到< h1>标签(在文件中部略微偏下的位置),添加开始< script>标签和结束< script>标签,代码如下所示:
现在,我们应该熟悉这段html了:它只是让页面准备好等待编写脚本。
注意: 这个页面使用html5作为doctype。如果你使用xhtml 1.0或html 4.01,像下面这样把type=”javascript”添加到< script>标签:< script type=”text/javascript”>。这个步骤不是为了使脚本能够工作而必需的,只是为了让页面能够通过w3c验证器(参见本书“前言”部分以了解更多关于验证的内容)。
在< script>标签之间输入:
这就创建了两个变量firstname和lastname,并且在其中存储了两个字符串值。接下来将把两个字符串加在一起,并且在web页面上显示结果。
在两个变量声明下面输入:
第1章已介绍过,document.write()命令直接把文本添加到web页面。在这个例子中,我们使用它来把html标签显示在页面上。我们为该命令提供了一个字符串'
',它输出的字符串正是我们在html代码中录入的内容。提供html标签作为document.write()命令的部分也没问题。在这个例子中,javascript为段落添加了一个开始标签,以存储要在页面上显示的文本。
注意: 有比document.write()效率更高的方法可以把html添加到web页面。我们将在本书4.7节学习。
按回车键后输入如下javascript代码:
这里使用在步骤3中所创建的变量中所存储的值。+操作符允许把几个字符串组合到一起,产生一个较长的字符串,然后document.write()命令把该字符串显示到页面。在这个例子中,对于存储在firstname中的值'cookie',先添加了一个空格字符,然后,再添加lastname的值'monster'。结果就是字符串'cookie monster'。
再次按下回车键后输入document.write('');。
完成后的脚本如下所示:
在web浏览器中预览页面,享受劳动成果(如图2-2所示)。
单词“cookie monster”应该出现在标题 “using a variable”的下方。如果你没有看到任何内容,可能是由于代码存在录入错误。把你录入的脚本和上面的脚本进行比较,并参考1.6小节介绍的关于使用firefox、safari、chrome或ie 9调试脚本的技巧。
返回文本编辑器,把脚本的第二行代码改为:
保存页面并在web浏览器中预览。瞧,现在的消息是cookie jar(文件complete_use_variable.html中有这段脚本的一个可工作的副本)。