《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页面并输入一个新的名字,页面变化了。这正是一个好的变量应该起到的作用。
相关文章
|
8月前
|
机器学习/深度学习 JavaScript 前端开发
JS进阶教程:递归函数原理与篇例解析
通过对这些代码示例的学习,我们已经了解了递归的原理以及递归在JS中的应用方法。递归虽然有着理论升华,但弄清它的核心思想并不难。举个随手可见的例子,火影鸣人做的影分身,你看到的都是同一个鸣人,但他们的行为却能在全局产生影响,这不就是递归吗?雾里看花,透过其间你或许已经深入了递归的魅力之中。
335 19
|
11月前
|
资源调度 JavaScript 前端开发
前端开发必备!Node.js 18.x LTS保姆级安装教程(附国内镜像源配置)
本文详细介绍了Node.js的安装与配置流程,涵盖环境准备、版本选择(推荐LTS版v18.x)、安装步骤(路径设置、组件选择)、环境验证(命令测试、镜像加速)及常见问题解决方法。同时推荐开发工具链,如VS Code、Yarn等,并提供常用全局包安装指南,帮助开发者快速搭建高效稳定的JavaScript开发环境。内容基于官方正版软件,确保合规性与安全性。
10647 23
|
11月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
Web App开发 JavaScript 前端开发
2024年5月node.js安装(winmac系统)保姆级教程
本篇博客为2024年5月版Node.js安装教程,适用于Windows和Mac系统。作者是一名熟悉JavaScript与Vue的大一学生,分享了Node.js的基本介绍、下载链接及简单安装步骤。安装完成后,通过终端命令`node -v`验证版本即可确认安装成功。欢迎关注作者,获取更多技术文章。
624 2
2024年5月node.js安装(winmac系统)保姆级教程
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
397 14
|
JavaScript 前端开发
js教程——函数
js教程——函数
328 4
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
319 3
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
649 1
|
JavaScript 前端开发
JavaScript - 测试 jQuery
JavaScript - 测试 jQuery
108 1
|
JavaScript 前端开发 API
深入了解jQuery:快速、高效的JavaScript库
【10月更文挑战第11天深入了解jQuery:快速、高效的JavaScript库
198 0

热门文章

最新文章