更新时间:2022-09-28 14:31:40
2.6 教程:使用变量创建消息
在这个教程中,我们将使用变量在Web页面上显示一条消息。
注意: 为了学习本章中的教程,你需要从本书配套Web站点http://sawmac.com/js2e/下载教程文件。请参见1.3节中 “注意”部分的详细说明。
<h1>Using a Variable</h1>
<script>
</script>
现在,我们应该熟悉这段HTML了:它只是让页面准备好等待编写脚本。
注意: 这个页面使用HTML5作为doctype。如果你使用XHTML 1.0或HTML 4.01,像下面这样把type=”javascript”添加到< script>标签:< script type=”text/javascript”>。这个步骤不是为了使脚本能够工作而必需的,只是为了让页面能够通过W3C验证器(参见本书“前言”部分以了解更多关于验证的内容)。
var firstName = 'Cookie';
var lastName = 'Monster';
这就创建了两个变量firstName和lastName,并且在其中存储了两个字符串值。接下来将把两个字符串加在一起,并且在Web页面上显示结果。
document.write('<p>');
第1章已介绍过,document.write()命令直接把文本添加到Web页面。在这个例子中,我们使用它来把HTML标签显示在页面上。我们为该命令提供了一个字符串'
',它输出的字符串正是我们在HTML代码中录入的内容。提供HTML标签作为document.write()命令的部分也没问题。在这个例子中,JavaScript为段落添加了一个开始标签,以存储要在页面上显示的文本。
注意: 有比document.write()效率更高的方法可以把HTML添加到Web页面。我们将在本书4.7节学习。
document.write(firstName + ' ' + lastName);
这里使用在步骤3中所创建的变量中所存储的值。+操作符允许把几个字符串组合到一起,产生一个较长的字符串,然后document.write()命令把该字符串显示到页面。在这个例子中,对于存储在firstName中的值'Cookie',先添加了一个空格字符,然后,再添加lastName的值'Monster'。结果就是字符串'Cookie Monster'。
<script type="text/javascript">
var firstName = 'Cookie';
var lastName = 'Monster';
document.write('<p>');
document.write(firstName + ' ' + lastName);
document.write('</p>');
</script>
var lastName = 'Jar';
保存页面并在Web浏览器中预览。瞧,现在的消息是Cookie Jar(文件complete_use_variable.html中有这段脚本的一个可工作的副本)。