JavaScript中alert、prompt 和 confirm区别及使用【通俗易懂】

✨前言✨
  本篇文章主要在于,让我们看几个与用户交互的函数:alert,prompt 和confirm的使用及区别

🍒欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁
🍒博主将持续更新学习记录收获,友友们有任何问题可以在评论区留言


文章目录

  • 一,alert
  • 二,prompt
  • 三,confirm
  • 四,总结

一,alert

alert函数接受一个字符串作为参数,这个字符串将作为消息显示在警告框中。

例如:

alert("Hello");

弹出的这个带有信息的小窗口被称为 模态窗。 “modal” 意味着用户不能与页面的其他部分(例如点击其他按钮等)进行交互,直到他们处理完窗口。在上面示例这种情况下 —— 直到用户点击“确定”按钮。



二,prompt

prompt 函数接收两个参数:

result = prompt(title, [default]);

浏览器会显示一个带有文本消息的模态窗口,还有 input 框和确定/取消按钮。

title显示给用户的文本default可选的第二个参数,指定 input 框的初始值。

语法中的方括号 […]

上述语法中 default 周围的方括号表示该参数是可选的,不是必需的。

访问者可以在提示输入栏中输入一些内容,然后按“确定”键。然后我们在 result 中获取该文本。或者他们可以按取消键或按 Esc 键取消输入,然后我们得到 null 作为 result

prompt 将返回用户在 input 框内输入的文本,如果用户取消了输入,则返回 null

举个例子:

let age = prompt('How old are you?', 100);alert(`You are ${age} years old!`); // You are 100 years old!

IE 浏览器会提供默认值

第二个参数是可选的。但是如果我们不提供的话,Internet Explorer 会把 “undefined” 插入到 prompt

我们可以在 Internet Explorer 中运行下面这行代码来看看效果:

let test = prompt("Test");

所以,为了 prompt 在 IE 中有好的效果,我们建议始终提供第二个参数:

let test = prompt("Test", ''); // <-- 用于 IE 浏览器


三,confirm

语法:

result = confirm(question);

confirm 函数显示一个带有 question 以及确定和取消两个按钮的模态窗口。

点击确定返回 true,点击取消返回 false

例如:

let isBoss = confirm("Are you the boss?");alert( isBoss ); // 如果“确定”按钮被按下,则显示 true


四,总结

我们学习了与用户交互的 3 个浏览器的特定函数:

alert显示信息。prompt显示信息要求用户输入文本。点击确定返回文本,点击取消或按下 Esc 键返回 null。confirm显示信息等待用户点击确定或取消。点击确定返回 true,点击取消或按下 Esc 键返回 false

这些方法都是模态的:它们暂停脚本的执行,并且不允许用户与该页面的其余部分进行交互,直到窗口被解除。

上述所有方法共有两个限制:

  1. 模态窗口的确切位置由浏览器决定。通常在页面中心。
  2. 窗口的确切外观也取决于浏览器。我们不能修改它。

这就是简单的代价。还有其他一些方法可以显示更漂亮的窗口,并与用户进行更丰富的交互,但如果“花里胡哨”不是非常重要,那使用本节讲的这些方法也挺好。



任务

创建一个简单的页面

重要程度: 4

创建一个要求用户输入 name,并通过浏览器窗口对键入的内容进行输出的 web 页面。

解决方案

JavaScript 代码:

let name = prompt("What is your name?", "");
alert(name);

整个页面的代码:

<!DOCTYPE html>
<html>
<body><script>'use strict';let name = prompt("What is your name?", "");alert(name);</script></body>
</html>


✨最后✨

总结不易,希望uu们不要吝啬你们的👍哟(^U^)ノ~YO!!
如有问题,欢迎评论区批评指正😁

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/589132.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

PiflowX组件-WriteToUpsertKafka

WriteToUpsertKafka组件 组件说明 以upsert方式往Kafka topic中写数据。 计算引擎 flink 有界性 Streaming Upsert Mode 组件分组 kafka 端口 Inport&#xff1a;默认端口 outport&#xff1a;默认端口 组件属性 名称展示名称默认值允许值是否必填描述例子kafka_h…

阿里开源大模型 Qwen-72B 私有化部署

近期大家都知道阿里推出了自己的开源的大模型千问72B&#xff0c;据说对于中文非常友好&#xff0c;在开源模型里面&#xff0c;可谓是名列前茅。 千问拥有有强大的基础语言模型&#xff0c;已经针对多达 3 万亿个 token 的多语言数据进行了稳定的预训练&#xff0c;覆盖领域、…

【Java】JUC并发编程(重量锁、轻量锁、偏向锁)

JUC并发编程 预备&#xff1a; 创建一个maven工程&#xff0c;导入lombok和logback的依赖。 1、基础概念 1、进程与线程 **进程&#xff1a;**程序由指令和数据组成&#xff0c;但这些指令要运行&#xff0c;数据要读写&#xff0c;就必须将指令加载至 CPU &#xff0c;数…

Golang不可不知的7个并发概念

并发性支持是Golang最重要的原生特性之一&#xff0c;本文介绍了Golang中和并发性相关的7个概念。原文: Golang: 7 must-know concurrency related concepts 并发是Go编程语言的基本特性&#xff0c;意味着程序可以同时执行多个任务。Golang的并发独特而强大&#xff0c;其内置…

【Linux操作系统】探秘Linux奥秘:文件系统的管理与使用

&#x1f308;个人主页&#xff1a;Sarapines Programmer&#x1f525; 系列专栏&#xff1a;《操作系统实验室》&#x1f516;诗赋清音&#xff1a;柳垂轻絮拂人衣&#xff0c;心随风舞梦飞。 山川湖海皆可涉&#xff0c;勇者征途逐星辉。 目录 &#x1fa90;1 初识Linux OS &…

【数据结构】栈和队列(队列的基本操作和基础知识)

&#x1f308;个人主页&#xff1a;秦jh__https://blog.csdn.net/qinjh_?spm1010.2135.3001.5343&#x1f525; 系列专栏&#xff1a;《数据结构》https://blog.csdn.net/qinjh_/category_12536791.html?spm1001.2014.3001.5482 ​ 目录 前言 队列 队列的概念和结构 队列的…

二叉树详解(深度优先遍历、前序,中序,后序、广度优先遍历、二叉树所有节点的个数、叶节点的个数)

目录 一、树概念及结构(了解) 1.1树的概念 1.2树的表示 二、二叉树概念及结构 2.1概念 2.2现实中的二叉树&#xff1a; 2.3数据结构中的二叉树&#xff1a; 2.4特殊的二叉树&#xff1a; 2.5 二叉树的存储结构 2.51 顺序存储&#xff1a; 2.5.2 链式存储&…

CSS2_基础学习

CSS2_基础学习 一、css基础知识二、css选择器2.0 选择器的优先级2.1 CSS基本选择器2.2 复合选择器2.2.1. 交集选择器2.2.2. 并集选择器2.2.3. 后代选择器&#xff08;加空格&#xff09;2.2.4. 子代选择器2.2.5. 兄弟选择器2.2.6. 属性选择器2.2.7. 伪类选择器2.2.8. 伪元素选择…

微信小程序发送模板消息-详解【有图】

前言 在发送模板消息之前我们要首先搞清楚微信小程序的逻辑是什么&#xff0c;这只是前端的一个demo实现&#xff0c;建议大家在后端处理&#xff0c;前端具体实现&#xff1a;如下图 1.获取小程序Id和密钥 我们注册完微信小程序后&#xff0c;可以在开发设置中看到以下内容&a…

navicat premium历史版本下载及更新navicat premium15 永久(使用)有效期

1、navicat premium介绍 Navicat Premium 是一套可创建多个连接的数据库开发工具&#xff0c;让你从单一应用程序中同时连接 MySQL、Redis、MariaDB、MongoDB、SQL Server、Oracle、PostgreSQL 和 SQLite 。它与 GaussDB 、OceanBase 数据库及 Amazon RDS、Amazon Aurora、Amaz…

基于简化版python+VGG+MiniGoogLeNet的智能43类交通标志识别—深度学习算法应用(含全部python工程源码)+数据集+模型(一)

目录 前言总体设计系统整体结构图系统流程图 运行环境Python环境Anaconda环境 模块实现1. 数据预处理 相关其它博客工程源代码下载其它资料下载 前言 本项目专注于解决出国自驾游特定场景下的交通标志识别问题。借助Kaggle上的丰富交通标志数据集&#xff0c;我们采用了VGG和G…

推荐系统中 排序策略 CTR 动态加权平均法

CTR&#xff08;Click-Through Rate&#xff09;动态加权平均法是一种用于计算广告点击率的方法&#xff0c;其中每个点击率被赋予一个权重&#xff0c;这个权重可以随着时间、事件或其他因素而动态调整。这种方法旨在更灵活地反映广告点击率的变化&#xff0c;使得最近的数据更…

Mybatis 事务接口

当我们从数据源中得到一个可用的数据库连接之后&#xff0c;就可以开启一个数据库事务了&#xff0c;事务成功开启之后&#xff0c;我们才能修改数据库中的数据。 在修改完成之后&#xff0c;我们需要提交事务&#xff0c;完成整个事务内的全部修改操作&#xff0c;如果修改过…

JAVA:利用JUnit进行高效的单元测试

1、简述 在软件开发中&#xff0c;单元测试是确保代码质量和可维护性的关键步骤。JUnit作为Java领域最流行的单元测试框架之一&#xff0c;提供了简单而强大的测试工具&#xff0c;可以帮助开发者在项目开发过程中及时发现和修复代码中的问题。本文将介绍JUnit的基本用法以及一…

【每日一题】一周中的第几天

文章目录 Tag题目来源解题思路方法一&#xff1a;模拟 写在最后 Tag 【模拟】【数学】【2023-12-30】 题目来源 1185. 一周中的第几天 解题思路 方法一&#xff1a;模拟 思路 题目中的日期是在 1971 到 2100 年之间的有效日期&#xff0c;即 1971-01-01 到 2100-12-31 范围…

【c语言】飞机大战2

1.优化边界问题 之前视频中当使用drawAlpha函数时&#xff0c;是为了去除飞机后面变透明&#xff0c;当时当飞机到达边界的时候&#xff0c;会出现异常退出&#xff0c;这是因为drawAlpha函数不稳定&#xff0c;昨天试过制作掩码图&#xff0c;下载了一个ps,改的话&#xff0c…

易舟云财务软件使用教程【文章目录】

易舟云财务软件使用教程【文章目录】 1、财务软件导论2、易舟云财务软件3、财务软件原理4、账套5、会计凭证6、资金日记账7、发票8、员工工资9、固定资产10、期末处理(结转与结账)11、会计账簿12、财务报表13、财务软件设置 1、财务软件导论 财务软件导论 2、易舟云财务软件 …

Java循环高级(无限循环,break,continue,Random,逢七过,平方根,判断是否是质数,猜数字小游戏)

文章目录 1.无限循环概念&#xff1a;for格式&#xff1a;while格式&#xff1a;do...while格式&#xff1a;无限循环的注意事项&#xff1a; 2.条件控制语句break:continue: 3. Random使用步骤&#xff1a; 4. 逢七过5. 平方根6.判断是否为质数7. 猜数字小游戏 1.无限循环 概…

初识SpringBoot(2023最后一篇文章)

初识SpringBoot 1、SpringBoot概述 Spring是什么&#xff1f; Spring是一个于2003 年兴起的一个轻量级开源Java开发框架&#xff0c;由Rod Johnson 在其著作《Expert One-On-One J2EE Development and Design》。Spring是为了解决企业级应用开发的复杂性而创建的&#xff0c;使…

Linux系统安装DockerDocker-Compose

1、Docker安装 下载Docker依赖的组件 yum -y install yum-utils device-mapper-persistent-data lvm2 设置下载Docker服务的镜像源&#xff0c;设置为阿里云 yum-config-manager --add-repo http://mirrors.aliyun.com/docker-ce/linux/centos/docker-ce.repo 安装Docker服务 …