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

news2025/1/11 17:54:48

✨前言✨
  本篇文章主要在于,让我们看几个与用户交互的函数: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.coloradmin.cn/o/1349798.html

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

相关文章

【Shell编程练习】猜大小

系列文章目录 输出Hello World 通过位置变量创建 Linux 系统账户及密码 监控内存和磁盘容量&#xff0c;小于给定值时报警 系列文章目录脚本生成一个 100 以内的随机数,提示用户猜数字&#xff0c;根据用户的输入&#xff0c;提示用户猜对了&#xff0c;猜小了或猜大了&#x…

CMake入门教程【基础篇】CMake是什么?为什么学习CMake

文章目录 1.CMake简介2.为什么要学习CMake3.什么样的项目需要用CMake3.1大型或复杂项目3.2跨平台项目3.3需要高度定制化构建的项目3.4 研究和开源项目3.5小型或简单项目 4.CMake的作用5.支持的编译器5.1Windows平台5.2Unix/Linux平台5.3macOS平台5.4其他编译器5.5支持的平台 CM…

undefined reference to `pthread_create‘的另外一种解法

背景 编译带有thread的程序人&#xff0c;如果忘记-lpthread&#xff0c;那么就会报错 解决办法一&#xff1a;添加-lpthread 很简单添加-lpthread就行了 解决办法二&#xff1a;升级glibc 在高版本的glibc上&#xff0c;可能无需增加-lpthread Why glibc 2.34 removed li…

Web前端第9章思维导图

本章内容是关于CSS样式属性&#xff0c;包含CSS单位、CSS字体样式、CSS文本样式、CSS颜色与背景、CSS列表样式、CSS盒模型。重点在于CSS盒模型、CSS文本样式、CSS字体样式。 1. CSS单位 绝对单位 磅&#xff08;pt&#xff09;&#xff0c;pica&#xff08;pc&#xff09;、c…

HarmonyOS官网案例解析——保存应用数据

介绍 本篇Codelab将介绍如何使用基础组件Slider&#xff0c;通过拖动滑块调节应用内字体大小。要求完成以下功能&#xff1a; 实现两个页面的UX&#xff1a;主页面和字体大小调节页面。拖动滑块改变字体大小系数&#xff0c;列表页和调节页面字体大小同步变化。往右拖动滑块字体…

React学习计划-React16--React基础(八)react-redux使用与优化,纯函数介绍

笔记gitee地址 学习了 redux,为什么还要讲react-redux呢&#xff1f; redux不是专门为react所创建的,只不过在某一刻&#xff0c;react和redux看对眼了&#xff0c;所以俩人走到了一起&#xff0c;所以为了更好的支持redux,react官方出了react-redux来更好的支持redux 1. react…

向日葵远程工具的使用和MySQL安装与网络配置

文章目录 一、向日葵远程工具的使用二、MySQL安装与配置2.1MySQL简介&#xff1a;2.2MySQL5.7安装步骤 一、向日葵远程工具的使用 远程登录&#xff1a;向日葵可以帮助用户远程登录到其他计算机&#xff0c;无论它们在世界的哪个角落。这对于需要远程访问其他计算机的用户来说非…

如何去查看服务器的物理地址

1.打开控制面板&#xff0c;点击网络和共享中心 2.点击 以太网 3.点击详情信息 4.查看物理地址

动态规划:解决复杂问题的魔法武器

目录 &#x1f433;今日良言&#xff1a;天会晴&#xff0c;心会暖 &#x1f409;一、什么是动态规划 &#x1f409;二、如何使用动态规划 &#x1f409;三、典型例题 &#x1f433;今日良言&#xff1a;天会晴&#xff0c;心会暖 &#x1f409;一、什么是动态规划 动态规…

如何通过使用说明书的优化降低售后支持成本?

随着市场竞争的加剧&#xff0c;售后服务已成为企业保持竞争优势的关键因素之一。而使用说明书作为产品的重要组成部分&#xff0c;与售后服务之间存在着密切的关系。接下来就探讨一下如何通过优化使用说明书降低售后支持成本&#xff0c;提升售后服务质量。 一、使用说明书对售…

Valheim英灵神殿2456-2457-2458端口TCP和UDP开通

Valheim英灵神殿游戏需要开启云服务器2456、2457和2458三个端口&#xff0c;端口的TCP和UDP协议均要开通&#xff0c;云服务器吧yunfuwuqiba.com分享来详细说下Valheim英灵神殿游戏服务器端口说明&#xff1a; Valheim英灵神殿服务器端口 Valheim英灵神殿游戏要使用云服务器的…

java SSM拖拉机售后管理系统myeclipse开发mysql数据库springMVC模式java编程计算机网页设计

一、源码特点 java SSM拖拉机售后管理系统是一套完善的web设计系统&#xff08;系统采用SSM框架进行设计开发&#xff0c;springspringMVCmybatis&#xff09;&#xff0c;对理解JSP java编程开发语言有帮助&#xff0c;系统具有完整的源 代码和数据库&#xff0c;系统主要…

【前缀和】【分类讨论】【二分查找】2983:回文串重新排列查询

作者推荐 【动态规划】【字符串】C算法&#xff1a;正则表达式匹配 本文涉及的基础知识点 C算法&#xff1a;前缀和、前缀乘积、前缀异或的原理、源码及测试用例 包括课程视频 二分查找算法合集 回文串重新排列查询 给你一个长度为 偶数 n &#xff0c;下标从 0 开始的字符…

echarts 折线图根据x轴时间渲染不同颜色的折线

footIm 如上图所示一条折线多种颜色 后端数据返回"data": [ { “dateTime”: “2023-10-11 00:02:10”, “pos”: 6, “curr”: 104.6 }, { “dateTime”: “2023-10-11 00:02:39”, “pos”: 7, “curr”: 104.6 }&#xff0c; …] 我们拿到后端返回的res.data传递给…

SQLSERVER排查CPU占用高

操作系统是Windows2008R2 ,数据库是SQL2008R2 64位 64G内存,16核CPU 硬件配置还是比较高的,他说服务器运行的是金蝶K3软件,数据库实例里有多个数据库 现象 他说是这几天才出现的,而且在每天的某一个时间段才会出现CPU占用高的情况 内存占用不太高,只占用了30个G CPU…

逗号表达式与赋值表达式

逗号表达式和赋值表达式是C语言中常用的表达式类型。它们可以用于各种目的&#xff0c;包括计算和评估表达式、初始化变量、为函数调用提供参数以及将值分配给变量。 逗号表达式 逗号表达式允许在单个语句中计算和评估多个表达式。逗号分隔每个表达式&#xff0c;并且表达式从…

Gin 集成 prometheus 客户端实现注册和暴露指标

前言 当我们构建一个 Web 应用程序时&#xff0c;了解应用程序的性能和行为是非常重要的。Prometheus 是一个流行的开源监控系统&#xff0c;它提供了强大的指标收集和查询功能&#xff0c;可以帮助我们监控应用程序的各个方面。 在 Gin 中集成 Prometheus 可以让我们更方便地监…

Golang http包实战:构建RESTful API

Golang http包实战&#xff1a;构建RESTful API 引言简介目的 Go语言http包简介功能概述基本组件 搭建基础Web服务器步骤指导代码示例创建简单的HTTP文件服务器步骤说明代码示例 设计RESTful API结构设计原则路由设计 实现RESTful API处理请求代码示例 中间件应用代码示例 错误…

文章解读与仿真程序复现思路——中国电机工程学报EI\CSCD\北大核心《考虑用户禀赋效应和环保意识不确定性的微电网鲁棒优化调度方法》

本专栏栏目提供文章与程序复现思路&#xff0c;具体已有的论文与论文源程序可翻阅本博主的专栏栏目《论文与完整程序》 这个标题涉及到微电网系统的优化调度方法&#xff0c;特别考虑了两个重要方面&#xff1a;用户禀赋效应和环保意识的不确定性。以下是对标题中关键术语的解…

在升序的列表a中插入数值x插入后的列表仍然是升序的返回插入x后的整个列表插入操作使用二分查找方法bisect.insort_left(a, x)

【小白从小学Python、C、Java】 【计算机等考500强证书考研】 【Python-数据分析】 在升序的列表a中插入数值x 插入后的列表仍然是升序的 返回插入x后的整个列表 插入操作使用二分查找方法 bisect.insort_left(a, x) [太阳]选择题 请问以下代码输出的结果是&#xff1f; import…