当前位置： 首页 > news >正文

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

news 2026/5/13 15:41:38

✨前言✨
  本篇文章主要在于，让我们看几个与用户交互的函数：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们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！
如有问题，欢迎评论区批评指正😁

在这里插入图片描述

相关文章：

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

✨前言✨   本篇文章主要在于&#xff0c;让我们看几个与用户交互的函数&#xff1a;alert&#xff0c;prompt 和confirm的使用及区别 &#x1f352;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f352;博主将持续更新学习记录收获&…...

编程日记 2024/1/4 7:59:18

【GoLang入门教程】Go语言几种标准库介绍(四)

编程语言的未来&#xff1f; 文章目录 编程语言的未来&#xff1f;前言几种库fmt库 (格式化操作)关键函数&#xff1a;示例 Go库标准库第三方库示例 html库(HTML 转义及模板系统)主要功能&#xff1a;示例 总结专栏集锦写在最后 前言 上一篇&#xff0c;我们介绍了debug、enco…...

编程日记 2024/1/4 7:57:16

面试算法：快速排序

题目 快速排序是一种非常高效的算法&#xff0c;从其名字可以看出这种排序算法最大的特点就是快。当表现良好时&#xff0c;快速排序的速度比其他主要对手&#xff08;如归并排序&#xff09;快2&#xff5e;3倍。 分析 快速排序的基本思想是分治法&#xff0c;排序过程如下…...

编程日记 2024/1/4 7:56:15

航空业数字化展翅高飞，开源网安专业服务保驾护航

​某知名航空公司是中国首批民营航空公司之一&#xff0c;运营国内外航线200多条&#xff0c;也是国内民航最高客座率的航空公司之一。在数字化发展中&#xff0c;该航空公司以数据驱动决策&#xff0c;通过精细化管理、数字创新和模式优化等方式&#xff0c;实现了精准营销和个…...

编程日记 2024/1/4 7:53:12

SpringBoot学习(三)-员工管理系统开发（重在理解）

注&#xff1a;此为笔者学习狂神说SpringBoot的笔记&#xff0c;其中包含个人的笔记和理解&#xff0c;仅做学习笔记之用&#xff0c;更多详细资讯请出门左拐B站&#xff1a;狂神说!!! 本文是基于狂神老师SpringBoot教程中的员工管理系统从0到1的实践和理解。该系统应用SpringB…...

编程日记 2024/1/4 7:52:11

2 Windows网络编程

1 基础概念 1.1 socket概念 Socket 的原意是“插座”&#xff0c;在计算机通信领域&#xff0c;socket 被翻译为“套接字”&#xff0c;它是计算机之间进行通信的一种约定或一种方式。Socket本质上是一个抽象层&#xff0c;它是一组用于网络通信的API&#xff0c;包括了一系列…...

编程日记 2024/1/4 7:49:08

uniapp选择android非图片文件的方案踩坑记录

这个简单的问题我遇到下面6大坑&#xff0c;原始需求是选择app如android的excel然后读取到页面并上传表格数据json 先看看效果 uniapp 选择app excel文件读取 1.uniapp自带不支持 uniapp选择图片和视频非常方便自带已经支持可以直接上传和读取 但是选择word excel的时候就出现…...

编程日记 2024/1/4 7:48:08

前端发开的性能优化 请求级：请求前（资源预加载和预读取）

预加载 预加载&#xff1a;是优化网页性能的重要技术&#xff0c;其目的就是在页面加载过程中先提前请求和获取相关的资源信息&#xff0c;减少用户的等待时间&#xff0c;提高用户的体验性。预加载的操作可以尝试去解决一些类似于减少首次内容渲染的时间&#xff0c;提升关键资…...

编程日记 2024/1/4 7:47:07

B01、类加载子系统-02

JVM架构图-英文版 中文版见下图&#xff1a; 1、概述类的加载器及类加载过程 1.1、类加载子系统的作用 类加载器子系统负责从文件系统或者网络中加载Class文件,class文件在文件开头有特定的文件标识。ClassLoader只负责class文件的加载,至于它是否可以运行,则由Execution Engi…...

编程日记 2024/1/4 7:46:06

用PHP搭建一个绘画API

【腾讯云AI绘画】用PHP搭建一个绘画API 大家好&#xff01;今天我要给大家推荐的是如何用PHP搭建一个绘画API&#xff0c;让你的网站或应用瞬间拥有强大的绘画能力&#xff01;无论你是想要让用户在网页上绘制自己的创意&#xff0c;还是想要实现自动绘画生成特效&#xff0c;这…...

编程日记 2024/1/4 7:45:05

西安人民检察院 | OLED翻页查询一体机

产品&#xff1a;55寸OLED柔性屏 项目时间&#xff1a;2023年12月 项目地点&#xff1a;西安 在2023年12月&#xff0c;西安人民检察院引入了OLED翻页查询一体机&#xff0c;为来访者提供了一种全新的信息查询方式。 这款一体机采用55寸OLED柔性屏&#xff0c;具有高清晰度、…...

编程日记 2024/1/4 7:44:04

superset利用mysql物化视图解决不同数据授权需要写好几次中文别名的问题

背景 在使用superset时&#xff0c;给不同的人授权不同的数据&#xff0c;需要不同的数据源&#xff0c;可视化字段希望是中文&#xff0c;所以导致不同的人需要都需要去改表的字段&#xff0c;因此引入视图&#xff0c;将视图中字段名称设置为中文 原表数据 select * from …...

编程日记 2024/1/4 7:41:01

输入输出流

1.输入输出流 输入/输出流类&#xff1a;iostream---------i input&#xff08;输入&#xff09; o output&#xff08;输出&#xff09; stream&#xff1a;流 iostream&#xff1a; istream类&#xff1a;输入流类-------------cin&#xff1a;输入流类的对象 ostream类…...

编程日记 2024/1/4 7:38:59

IOS：Safari无法播放MP4（H.264编码）

一、问题描述 MP4使用H.264编码通常具有良好的兼容性&#xff0c;因为H.264是一种广泛支持的视频编码标准。它可以在许多设备和平台上播放&#xff0c;包括电脑、移动设备和流媒体设备。 使用caniuse查询H.264兼容性&#xff0c;看似确实具有良好的兼容性&#xff1a; 然而…...

编程日记 2024/1/4 7:35:56

Pycharm恢复默认设置

window 系统 找到下方目录-->删除. 再重新打开Pycharm C:\Users\Administrator\.PyCharm2023.3 你的不一定和我名称一样 只要是.PyCharm*因为版本不同后缀可能不一样 mac 系统 请根据需要删除下方目录 # Configuration rm -rf ~/Library/Preferences/PyCharm* # Caches …...

编程日记 2024/1/4 7:34:54

简单计算器实现，包括两个数

正在加载中... 简单计算器实现&#xff0c;包括两个数 ❤ 厾罗 简单计算器实现&#xff0c;包括两个数 以下代码用于实现简单计算器实现&#xff0c;包括两个数基本的加减乘除运算&#xff1a; 实例(Python 3.0) # Filename : test.py # author by : www.dida100.com …...

编程日记 2024/1/4 7:33:53

竞赛保研 基于机器视觉的手势检测和识别算法

0 前言 &#x1f525; 优质竞赛项目系列&#xff0c;今天要分享的是 基于深度学习的手势检测与识别算法 该项目较为新颖&#xff0c;适合作为竞赛课题方向&#xff0c;学长非常推荐&#xff01; &#x1f9ff; 更多资料, 项目分享&#xff1a; https://gitee.com/dancheng…...

编程日记 2024/1/4 7:30:50

Android App从备案到上架全过程

不知道大家注意没有，最近几年来，新的移动App想要上架是会非常困难的，并且对于个人开发者和小企业几乎是难如登天，各种备案和审核。但是到底有多难，或许只有上架过的才会有所体会。 首先是目前各大应用市场陆续推出新的声明，各种备案截止日期到12月就要到最后期限责令整改…...

编程日记 2024/1/4 7:27:48

用邮件及时获取变更的公网IP--------python爬虫+打包成exe文件

参考获取PC机公网IP并发送至邮箱 零、找一个发送邮件的邮箱 本文用QQ邮箱为发送邮箱&#xff0c;网易等邮箱一般也有这个功能&#xff0c;代码也是通用的。 第一步&#xff1a;在设置中找到账户&#xff0c;找到POP3/IMAP/SMTP/Exchange/CardDAV/CalDAV服务&#xff0c;点击获…...

编程日记 2024/1/4 7:22:43

c++学习：函数模板+实战

目录 函数模板 思考 如果两个参数的类型不一样可以下面这么写 如果有指定返回参数可以下面这么写 实战 找出三个数中最大的一个 函数模板 实际上就是建立一个通用函数&#xff0c;其函数返回值类型和形参类型不具体指定&#xff0c;用一个虚拟的类型来代表template 是一个…...

编程日记 2024/1/4 7:19:40

手把手教你用Python/Node.js快速接入抖音开放平台，实现用户信息获取

Python/Node.js实战&#xff1a;抖音开放平台用户信息获取全流程解析 抖音开放平台为开发者提供了丰富的用户数据接口&#xff0c;但很多技术团队在对接过程中常因OAuth2.0流程复杂而卡在授权环节。本文将用两种主流技术栈演示如何快速完成从授权到获取用户信息的完整闭环。 1.…...

编程新知 2026/5/13 15:22:38

SAP ABAP开发避坑指南：NATIVE SQL里那个冒号和MANDT字段，你写对了吗？

SAP ABAP开发实战&#xff1a;NATIVE SQL高频陷阱与性能优化全解析 在SAP ABAP开发领域&#xff0c;NATIVE SQL就像一把双刃剑——它既能突破Open SQL的限制直接操作底层数据库&#xff0c;又隐藏着无数让开发者"踩坑"的语法细节。根据SAP官方统计&#xff0c;超过60…...

编程新知 2026/5/13 12:31:01

3大照片管理痛点，1个工具彻底解决：ExifToolGUI完全指南

3大照片管理痛点&#xff0c;1个工具彻底解决&#xff1a;ExifToolGUI完全指南 【免费下载链接】ExifToolGui A GUI for ExifTool 项目地址: https://gitcode.com/gh_mirrors/ex/ExifToolGui 你是否曾面对数百张旅行照片&#xff0c;需要统一修改拍摄时间却无从下手&…...

编程新知 2026/5/13 12:13:12

别再让电机烧了！聊聊工业设备中三相电源保护的两种经典电路设计与选型

工业三相电机保护电路设计实战&#xff1a;从原理到工程落地 在空压机房嘈杂的轰鸣声中&#xff0c;老王师傅正对着烧毁的电机摇头叹气——这已经是本月第三台因电源故障报废的设备。类似场景在工业现场屡见不鲜&#xff0c;统计显示超过40%的电机故障源于电源异常&#xff0c;…...

编程新知 2026/5/13 11:23:24

开源协作平台smouj：微内核插件化架构与全栈部署实战

1. 项目概述&#xff1a;一个开源协作平台的诞生与价值 最近在开源社区里&#xff0c;一个名为“smouj/smouj”的项目引起了我的注意。乍一看这个标题&#xff0c;你可能会有点摸不着头脑&#xff0c;这不像我们常见的“vue/vue”或“tensorflow/tensorflow”那样一目了然。但恰…...

编程新知 2026/5/13 10:32:23

多模型聚合平台在应对单一服务波动时的体验差异

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 多模型聚合平台在应对单一服务波动时的体验差异 在构建依赖大模型能力的应用时&#xff0c;开发者常常面临一个现实挑战&#xff1…...

编程新知 2026/5/13 9:54:04

智能体集成德国铁路实时信息：无需API的Node.js工具箱openclaw-bahn详解

1. 项目概述&#xff1a;一个为智能体打造的德国铁路工具箱如果你经常在德国乘坐火车&#xff0c;或者像我一样&#xff0c;需要为一些自动化流程&#xff08;比如智能体&#xff09;集成实时交通信息&#xff0c;那么你肯定对德国铁路&#xff08;Deutsche Bahn, DB&#xff0…...

编程新知 2026/5/13 7:36:54

C#初步认识/入门基础

一、注释/运行/项目介绍1.注释1.// 双斜杠是单行注释&#xff0c;注释代码不会被执行&#xff1b;/* */是多行注释格式。两种均不会被执行&#xff1b;.///三斜杠一般写在方法前//1111/*111*11*////11112.运行2.运行调试 &#xff1a; 实心三角&#xff08;运行控制台后会消失…...

编程新知 2026/5/13 6:29:43

汽车软件化演进：从原生应用到手机集成的技术路径与实战解析

1. 从机械到智能&#xff1a;汽车软件化的十字路口十年前&#xff0c;当福特和通用汽车开始在硅谷和南加州大肆招聘软件工程师时&#xff0c;很多人可能还没意识到&#xff0c;这不仅仅是一次普通的“招兵买马”&#xff0c;而是一场深刻改变汽车工业基因的序曲。2014年那会儿&…...

编程新知 2026/5/13 5:44:55

Hermes Agent：引爆企业AI革命！自进化智能体协作实战与落地指南

Hermes Agent 是一款自进化AI代理系统&#xff0c;具备完整学习循环、跨会话记忆、用户建模等核心特性。本文深入解析其架构、多智能体协作机制及自进化能力&#xff0c;并通过智能客服、DevOps自动化、数据分析等企业级案例&#xff0c;展示如何构建高效AI代理系统。同时提供性…...

编程新知 2026/5/13 4:01:52