且构网

分享程序员开发的那些事...
且构网 - 分享程序员编程开发的那些事

《JavaScript和jQuery实战手册(原书第2版)》——2.7节教程:请求信息

更新时间:2022-09-28 14:26:56

2.7 教程:请求信息
在上面的脚本中,我们看到了如何创建变量,但是,对于变量如何响应用户并产生独特的、定制的内容,我们还没有太多经验。在本教程中,我们将学习如何使用prompt()命令收集来自用户的信息并根据该输入改变页面的显示。

  1. 在文本编辑器中打开chapter02目录下的prompt.html文件。
    为了让你可以更快地编程,< script>标签已经添加到这个文件了。你可能注意到这里有两对< script>标签,一个在前头,一个在正文。我们要添加的JavaScript将要做两件事情。首先,它会打开一个对话框,要求用户输入一个问题的答案;其次,在Web页面的正文中,显示使用用户响应的一条定制消息。
  2. 在文档前面的第一组< script>中输入如下粗体所示代码:
<script>
    var name = prompt('What is your name?', '');
    </script>

prompt()函数产生一个和alert()函数类似的对话框。然而,prompt()函数不仅显示一条消息,而且可以获取一个答案(如图2-3所示)。此外,要使用prompt()函数,可以在圆括号中提供以逗号分开的两个字符串。图2-3显示了对这两个字符串进行了什么操作:第一个字符串作为对话框的问题显示(在这个例子中,是“What is your name?”)。
注意: 如果没有在IE 7的浏览器设置中激活,IE 7不允许使用prompt()方法。好在IE 7的用户数量越来越少了。

第二个字符串显示访问者在字段中的输入。这个例子使用了所谓的空字符串,它只是两个单引号(' '),并且产生一个空白文本字段。然而,我们可以为第二个字符串提供一个有用的说明,例如"Please type both your first and last names",并且它将在字段中显示。遗憾的是,在输入自己的信息之前,访问者需要先删除文本字段中的文本。
prompt()函数返回包含访问者在对话框中输入的内容的一个字符串。在这一行JavaScript代码中,结果存储在一个名为name的新变量中。
注意: 很多函数会返回一个值。换句话说,这只是意味着函数在执行之后提供某些信息。我们可以选择忽略这些信息,或者将其存储在一个变量***随后使用。在这个例子中,prompt()函数返回一个字符串,这使我们可以将这个字符串存储在变量name中。

  1. 保存页面并在Web浏览器中预览。
    当载入页面的时候,我们将看到对话框。注意,在填写对话框并单击OK按钮之前,没有发生其他的事情,我们甚至不会看到Web页面。我们还会注意到,在单击了OK按钮之后,也没有发生什么更多的事情,这是因为此刻我们只是收集并存储了响应,还没有在页面上使用响应。接下来实现这点。
  2. 返回文本编辑器,找到第二组< script>标签并添加粗体所示的代码:
<script>
    document.write('<p>Welcome ' + name + '</p>');
    </script>

这里利用了访问者提供的信息。像本书2.6节中的脚本一样,我们组合了几个字符串(一个开始的段落标签和文本、变量的值以及一个结束的段落标签),并且在Web页面上显示结果。

  1. 保存页面并在Web浏览器中预览。
    当提示对话框出现的时候,输入一个名字并单击OK按钮。注意,输入的名字出现在Web页面中(如图2-4所示)。重新载入Web页面并输入一个新的名字,页面变化了。这正是一个好的变量应该起到的作用。