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

简介: 本节书摘来自华章社区《JavaScript和jQuery实战手册(原书第2版)》一书中的第2章,第2.7节教程:请求信息,作者:David Sawyer McFarland,更多章节内容可以访问云栖社区“华章社区”公众号查看

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页面并输入一个新的名字,页面变化了。这正是一个好的变量应该起到的作用。
相关文章
|
1月前
|
JavaScript
鼠标事件(点击换色)分别使用js和jQuery代码实现
鼠标事件(点击换色)分别使用js和jQuery代码实现
28 1
|
1月前
|
存储 前端开发 JavaScript
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
javascript 异常问题之为自定义异常提供丰富的上下文信息如何实现
|
8天前
|
缓存 JavaScript 中间件
优化Express.js应用程序性能:缓存策略、请求压缩和路由匹配
在开发Express.js应用时,采用合理的缓存策略、请求压缩及优化路由匹配可大幅提升性能。本文介绍如何利用`express.static`实现缓存、`compression`中间件压缩响应数据,并通过精确匹配、模块化路由及参数化路由提高路由处理效率,从而打造高效应用。
29 5
|
24天前
|
JavaScript NoSQL 前端开发
|
28天前
|
JavaScript
分别用jquery和js修改页面元素
分别用jquery和js修改页面元素
27 2
|
27天前
|
JavaScript
Vue项目打包后都产生了哪些JS请求?
【8月更文挑战第19天】Vue项目打包后都产生了哪些JS请求?
64 0
Vue项目打包后都产生了哪些JS请求?
|
1月前
|
JavaScript 前端开发
JavaScript 地址信息与页面跳转及跳转传参
JavaScript 地址信息与页面跳转及跳转传参
26 1
|
1月前
|
JavaScript Java
点击按钮,向下添加目录。Java script+jQuery写法
点击按钮,向下添加目录。Java script+jQuery写法
14 1
|
1月前
|
JavaScript Java
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
分别使用js与jquery写 单击按钮时出现内容 点击删除按钮不会再向下出现
15 1
|
20天前
|
Devops 持续交付 测试技术
JSF遇上DevOps:开发流程将迎巨变?一篇文章带你领略高效协同的魅力!
【8月更文挑战第31天】本文探讨了如何在JavaServer Faces(JSF)开发中融入DevOps文化,通过持续集成与部署、自动化测试、监控与日志记录及反馈机制,提升软件交付速度与质量。文中详细介绍了使用Jenkins进行自动化部署、JUnit与Selenium进行自动化测试、ELK Stack进行日志监控的具体方法,并强调了持续改进的重要性。
28 0