《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页面并输入一个新的名字,页面变化了。这正是一个好的变量应该起到的作用。
相关文章
|
3月前
|
JavaScript 前端开发 开发者
Nest.js控制器深度解析:路由与请求处理的高级特性
以上就是对 NestJS 控制层高级特性深度解析:从基本概念到异步支持再到更复杂场景下拦截其与管道等功能性组件运用都有所涉及,希望能够帮助开发者更好地理解和运用 NestJS 进行高效开发工作。
345 15
|
6月前
|
JavaScript 前端开发 API
Node.js中发起HTTP请求的五种方式
以上五种方式,尽管只是冰山一角,但已经足以让编写Node.js HTTP请求的你,在连接世界的舞台上演奏出华丽的乐章。从原生的 `http`到现代的 `fetch`,每种方式都有独特的风格和表现力,让你的代码随着项目的节奏自由地舞动。
653 65
|
9月前
|
JSON JavaScript 数据格式
jqtimeline.js-简单又好用的jquery时间轴插件
jqtimeline.js-简单又好用的jquery时间轴插件
|
9月前
|
JavaScript 前端开发 API
JavaScript中通过array.map()实现数据转换、创建派生数组、异步数据流处理、复杂API请求、DOM操作、搜索和过滤等,array.map()的使用详解(附实际应用代码)
array.map()可以用来数据转换、创建派生数组、应用函数、链式调用、异步数据流处理、复杂API请求梳理、提供DOM操作、用来搜索和过滤等,比for好用太多了,主要是写法简单,并且非常直观,并且能提升代码的可读性,也就提升了Long Term代码的可维护性。 只有锻炼思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
JavaScript 前端开发
js+jquery实现贪吃蛇经典小游戏
本项目采用HTML、CSS、JavaScript和jQuery技术,无需游戏框架支持。通过下载项目文件至本地,双击index.html即可启动贪吃蛇游戏。游戏界面简洁,支持方向键控制蛇移动,空格键实现游戏暂停与恢复功能。
308 14
|
JavaScript
Node.js GET/POST请求
10月更文挑战第6天
180 2
Node.js GET/POST请求
|
机器学习/深度学习 自然语言处理 JavaScript
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
在信息论、机器学习和统计学领域中,KL散度(Kullback-Leibler散度)是量化概率分布差异的关键概念。本文深入探讨了KL散度及其相关概念,包括Jensen-Shannon散度和Renyi散度。KL散度用于衡量两个概率分布之间的差异,而Jensen-Shannon散度则提供了一种对称的度量方式。Renyi散度通过可调参数α,提供了更灵活的散度度量。这些概念不仅在理论研究中至关重要,在实际应用中也广泛用于数据压缩、变分自编码器、强化学习等领域。通过分析电子商务中的数据漂移实例,展示了这些散度指标在捕捉数据分布变化方面的独特优势,为企业提供了数据驱动的决策支持。
1558 2
信息论、机器学习的核心概念:熵、KL散度、JS散度和Renyi散度的深度解析及应用
|
JavaScript 前端开发 开发者
jQuery:JavaScript库的瑰宝
jQuery:JavaScript库的瑰宝
297 3
|
缓存 JavaScript CDN
一次js请求一般情况下有哪些地方会有缓存处理?
一次js请求一般情况下有哪些地方会有缓存处理?
165 4
|
前端开发 JavaScript 数据处理
JQuery 拦截请求 | Ajax 请求拦截
【10月更文挑战第4天】
596 1