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

JavaScript中alert、confrim、prompt的使用及区别【精选】

Hi i,m JinXiang


⭐ 前言 ⭐

本篇文章主要介绍JavaScript中alert、confrim、prompt的区别及使用以及部分理论知识


🍉欢迎点赞 👍 收藏 ⭐留言评论 📝私信必回哟😁

🍉博主收将持续更新学习记录获,友友们有任何问题可以在评论区留言


目录

⭐一、alert

1、什么是alert?

2、使用alert

alert的定义和用法

alert的语法

alert的代码示例

3、总结alert

⭐二、confrim

1、什么是confrim?

2、使用confrim

confrim的定义和用法

confrim的语法

confrim的代码示例

3、总结confrim

⭐三、prompt

1、什么是prompt?

2、使用prompt

prompt的定义和用法

prompt的语法

prompt的代码示例

3、总结prompt

⭐alert、confrim和prompt的区别


一、alert

1、什么是alert?

在JavaScript中,alert是一个内置函数,用于显示一个警告框,向用户显示一条消息。它是一种简单的弹出窗口,常用于给用户提供提示或警告信息。

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

alert("Hello, World!");

以上代码将在网页上弹出一个警告框,其中显示的消息是"Hello, World!"。用户需要点击"确定"按钮才能关闭警告框。

alert函数在JavaScript开发中的使用相对较少,因为它会阻塞代码执行,直到用户关闭警告框。通常,开发者更倾向于使用其他更灵活的方式来与用户进行交互,比如使用模态框或自定义弹窗组件。

2、使用alert

alert的定义和用法:alert() 方法用于显示带有一条指定消息和一个 确认 按钮的警告框。
alert的语法:alert(message)

使用alert函数的基本语法如下:

alert("你好,我是一个警告框!");

提示框一般用于在网页中向用户显示一些提示或警告信息。例如,在表单验证时,如果用户输入的内容不符合要求,可以使用alert函数弹出一个提示框,告知用户输入有误。

alert的代码示例:显示一个按钮 弹出警告框
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function myFunction(){alert("你好,我是一个警告框!");
}
</script>
</head>
<body><input type="button" onclick="myFunction()" value="显示警告框" /></body>
</html>

alert是JavaScript中的一个内置函数,用于在网页上显示简单的警告框。它的使用方法是调用alert函数并传入要显示的消息作为参数。警告框会以模态的形式弹出并显示指定的消息,用户需要点击确定按钮才能关闭警告框。

3、总结alert

在使用alert函数时,需要注意以下几点:

  1. alert函数会阻塞代码执行:当alert函数被调用时,代码的执行会暂停,直到用户点击提示框上的确定按钮。这意味着,在用户关闭提示框之前,代码不会继续执行。

  2. 提示框的样式和外观不可自定义alert函数生成的提示框的样式和外观是由浏览器决定的,无法通过代码进行定制。不同浏览器可能有不同的提示框样式,且不支持自定义添加样式或图标。

  3. 提示框中只能显示文本信息alert函数只能展示纯文本信息,不支持在提示框中添加HTML或其他富文本格式。如果需要展示复杂的内容,可以考虑使用其他方式,如弹出自定义模态窗口。

  4. 不支持用户输入或反馈alert函数只能用于向用户展示信息,无法获取用户的输入或反馈。用户无法在提示框中输入任何内容或进行选择操作,只能通过点击确定按钮关闭提示框。

  5. 警惕滥用alert函数:过多使用alert函数可能会影响用户体验,因为频繁的提示框会打断用户的工作流程。应该适度使用alert函数,只在必要的情况下向用户展示重要的信息或警告。

需要注意的是,alert函数没有返回值,所以不能将alert函数的执行结果赋给一个变量或进行其他操作。它只是单纯地用于展示提示信息。

二、confrim

1、什么是confrim?

confirm是JavaScript中的一个内置函数,用于在网页上显示一个确认框。与alert不同的是,confirm会显示一个包含确定和取消按钮的对话框,用于询问用户是否执行某个操作。

使用confirm函数时,需要传入一个字符串作为参数,作为对话框中显示的消息。当用户点击确定按钮时,confirm函数会返回true,表示用户确认执行操作;当用户点击取消按钮时,confirm函数会返回false,表示用户取消了操作。

var result = confirm("确认要删除该数据吗?");
if (result) {// 执行删除操作
} else {// 取消删除操作
}

confirm函数通常用于需要用户确认的重要操作,例如删除数据、提交表单等。通过询问用户是否确认执行操作,可以预防用户误操作或不正确的操作。

需要注意的是,confirm函数是阻塞的,即在用户作出选择之前,页面中的其他操作会被暂停。因此,在使用confirm函数时,应谨慎考虑对用户体验的影响,并在必要时使用其他异步的交互方式来代替。

2、使用confrim

confrim的定义和用法:confirm()方法用于显示一个带有指定消息和确认及取消按钮的对话框。
confrim的语法:confirm(message)

使用confirm函数的基本语法如下:

var result = confirm("确认要执行操作吗?");

在确认框中,会显示一个包含确认和取消按钮的对话框,并显示传入的消息字符串。用户点击确认按钮时,confirm函数会返回true,表示用户确认执行操作;用户点击取消按钮时,confirm函数会返回false,表示用户取消了操作。

confrim的代码示例:显示一个确认框,提醒访客点击什么:
function myFunction(){var x;var r=confirm("按下按钮!");if (r==true){//执行操作x="你按下了\"确定\"按钮!";}else{//取消操作x="你按下了\"取消\"按钮!";}document.getElementById("demo").innerHTML=x;
}

在上述示例中,如果用户确认要按下按钮,则执行“按下了确定按钮”的动作;如果用户取消了按下按钮操作,则执行“按下了取消按钮”的动作。 

需要注意的是,confirm函数返回的是一个布尔值,可以直接在if语句中使用。如果用户关闭了对话框而没有点击确认或取消按钮,则confirm函数将返回undefined。因此,在使用confirm函数时,最好在if语句中添加一个判断条件来处理这种情况。

3、总结confrim

confirm是JavaScript中一种常用的交互函数,用于显示一个确认对话框并获取用户的确认或取消操作。其基本语法为confirm(message),其中message是一个字符串参数,用于显示在确认对话框中的消息。

使用confirm函数时,会显示一个带有确认和取消按钮的对话框,用户可以点击其中一个按钮来确定或取消操作。当用户点击确认按钮时,confirm函数返回true,表示确认操作;当用户点击取消按钮时,confirm函数返回false,表示取消操作。

我们可以根据confirm函数的返回值来进行相应的操作。常见的用法是将confirm函数的返回值存储在一个变量中,然后使用条件语句来根据用户的选择执行不同的操作。

总结confirm函数的使用方法:

  1. 使用confirm函数来显示一个确认对话框,并获取用户的确认或取消操作。
  2. 根据confirm函数的返回值来确定用户的选择。
  3. 可以将confirm函数的返回值存储在一个变量中,然后使用条件语句来根据用户的选择执行不同的操作。
  4. 需要注意在条件语句中处理用户关闭对话框的情况。

需要注意的是,如果用户关闭了对话框而没有点击确认或取消按钮,confirm函数将返回undefined。因此,在使用confirm函数时,最好在条件语句中添加一个判断条件来处理这种情况。

三、prompt

1、什么是prompt?

prompt是JavaScript中一种常用的交互函数,用于显示一个提示框并获取用户的输入数据。其基本语法为prompt(message, defaultValue),其中message是一个字符串参数,用于显示在提示框中的消息,defaultValue是一个可选参数,用于设置提示框中输入框的默认值。

使用prompt函数时需要注意以下几点:

  1. 默认值的设置defaultValue参数是可选的,如果不提供默认值,则输入框将为空。如果需要在输入框中显示一个默认值,可以通过设置defaultValue参数来实现。请注意,即使设置了默认值,用户仍然可以编辑输入框中的内容。

  2. 返回值的处理:prompt函数返回用户输入的内容作为一个字符串。在后续处理用户输入的值时,可能需要进行类型转换,因为返回的值始终是字符串类型。如果用户点击取消按钮,返回值将为null,需要进行判断确保返回的值不为null再进行后续操作。

  3. 安全性考虑:由于输入框是由用户输入的,因此在处理用户输入时需要进行安全性考虑。用户可能输入恶意代码或非预期的内容,需要对输入进行验证、过滤或转义,以确保应用程序的安全性。

  4. 用户体验的优化:prompt函数会阻塞页面的执行,直到用户关闭提示框。这可能会影响用户体验,特别是在WEB应用中。因此,在使用prompt函数时,应考虑是否有更好的方式来实现用户交互,以提升用户体验。

使用prompt注意事项:

  • 提示信息要明确、清晰。
  • 默认值是可选的,可以设置一个默认值。
  • 返回的值始终是字符串类型,可能需要进行类型转换。
  • 返回值可能为null,需要进行判断。
  • 需要对用户输入进行安全性处理。
  • 考虑使用更好的方式提升用户体验。

2、使用prompt

prompt的定义和用法:prompt()方法用于显示可提示用户进行输入的对话框。

这个方法返回用户输入的字符串。

prompt的语法:prompt(messagedefaultValue);

使用prompt函数的基本语法如下:

prompt(message, defaultValue)

其中,message是一个字符串,用于提示用户输入的信息。defaultValue是一个可选参数,用于设置输入框中的默认值。当用户点击提示框上的确定按钮时,prompt函数将返回用户输入的内容作为一个字符串。 

参数描述
message可选。要在对话框中显示的纯文本(而不是 HTML 格式的文本)。
defaultValue可选。默认的输入文本。
prompt的代码示例:显示一个提示框,询问她/他的名字,然后编写一个页面的问候:
function myFunction(){ var person=prompt("请输入你的名字","Harry Potter"); if (person!=null && person!=""){ var x="你好 " + person + "! 今天感觉如何?"; document.getElementById("demo").innerHTML=x; } 
}

3、总结prompt

使用prompt函数时,会显示一个带有输入框、确认和取消按钮的提示框,用户可以在输入框中输入数据并点击确认或取消按钮来确定或取消操作。当用户点击确认按钮时,prompt函数返回输入框中的数据,表示用户的输入;当用户点击取消按钮时,prompt函数返回null,表示取消操作。

prompt函数返回的是一个字符串,即使用户输入的是数字或其他类型的值,也会被转换为字符串类型。因此,在后续处理用户输入时,可能需要进行类型转换或其他操作。

总结prompt函数的使用方法:

  1. 使用prompt函数来显示一个提示框,并获取用户的输入数据。
  2. 根据prompt函数的返回值来获取用户的输入数据。
  3. 可以将prompt函数的返回值存储在一个变量中,然后使用条件语句或其他操作来处理用户的输入数据。
  4. 需要注意对用户输入数据的有效性进行验证或处理。

需要注意的是,用户可以在输入框中输入任何数据,包括空字符串或无效数据。因此,在使用prompt函数获取用户输入数据时,最好进行一些验证或处理,以确保输入数据的有效性。

alert、confrim和prompt的区别

alert、confirm和prompt是JavaScript中常用的弹出框函数,它们的区别如下:

1、alert函数:alert函数用于显示一个消息框,通常用于向用户显示一些提示或警告信息。它只有一个参数,即要显示的消息内容。用户无法更改或输入任何值,只能关闭消息框。alert函数返回值为undefined。

2、confirm函数:confirm函数用于显示一个确认框,通常用于让用户做出确认或取消的选择。它有一个参数,即要显示的确认消息内容。确认框中有两个按钮,分别是确定和取消。用户可以点击确定或取消按钮,点击确定按钮返回值为true,点击取消按钮返回值为false。

3、prompt函数:prompt函数用于显示一个输入框的消息框,通常用于获取用户输入的值。它有两个参数,第一个参数是要显示的消息内容,第二个参数是输入框的默认值。用户可以在输入框中输入值,并点击确定或取消按钮。点击确定按钮返回用户输入的值作为一个字符串,点击取消按钮返回值为null。

综上所述,alert用于显示提示信息、confirm用于确认或取消选择、prompt用于获取用户输入。它们在用户交互和返回值上有区别。

alert、confrim和prompt的区别总结:

  • alert用于显示一条消息,没有返回值。
  • confirm用于确认或取消某个操作,返回一个布尔值。
  • prompt用于输入信息,返回用户输入的内容或null

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

相关文章:

JavaScript中alert、confrim、prompt的使用及区别【精选】

Hi i,m JinXiang ⭐ 前言 ⭐ 本篇文章主要介绍JavaScript中alert、confrim、prompt的区别及使用以及部分理论知识 &#x1f349;欢迎点赞 &#x1f44d; 收藏 ⭐留言评论 &#x1f4dd;私信必回哟&#x1f601; &#x1f349;博主收将持续更新学习记录获&#xff0c;友友们有任…...

Docker Compose容器编排实战

介绍 Docker Compose 是 Docker 官方提供的一种工具&#xff0c;用于定义和运行多个 Docker 容器的应用。它使用简单的 YAML 文件&#xff08;通常称为 docker-compose.yml&#xff09;来配置应用的服务&#xff0c;并使用单个命令即可创建、启动和停止整个应用。 官方文档&am…...

科技创新实验室数据管理优选:高效企业网盘推荐

科技创新实验室建设是国家加强科技创新基本能力建设的重要措施&#xff0c;企业网盘等高效办公工具的应用是保证科技创新实验室正常运行、提高科研项目团队合作效率的重要手段。 本文将介绍企业网盘Zoho WorkDrive提供的解决方案&#xff1a; 行业痛点1&#xff1a;分散的数据…...

记录一次云服务器使用docker搭建kafka的过程

创建网络 一定要将zookeeper注册中心与kafka建在一个network中&#xff0c;不然在springboot 集成 kakfa的demo测试代码中进行消息发送时会超时&#xff0c;报错&#xff1a; E x c e p t i o n t h r o w n w h e n s e n d i n g a m e s s a g e w i t h k e y ‘ n u l l…...

微信小程序与vue区别

微信小程序和Vue是两个完全不同的东西&#xff0c;虽然它们都是前端技术&#xff0c;但是有以下几点区别&#xff1a; 技术栈不同&#xff1a; 微信小程序使用WXML、WXSS和JavaScript进行开发&#xff0c;而Vue使用HTML、CSS和JavaScript进行开发。微信小程序是一种基于微信平台…...

GIT提交、回滚等基本操作记录

1、add文件时warning: LF will be replaced by CRLF in .idea/workspace.xml. 原因&#xff1a;windows中的换行符为 CRLF&#xff0c; 而在Linux下的换行符为LF&#xff0c;所以在执行add . 时会出现以下提示 解决&#xff1a;git config core.autocrlf false 2、GIT命令&…...

Apollo自动驾驶:从概念到现实的里程碑

前言 「作者主页」&#xff1a;雪碧有白泡泡 「个人网站」&#xff1a;雪碧的个人网站 ChatGPT体验地址 文章目录 前言1. Apollo Client2. Apollo Server3. Apollo Federation4. Apollo Tracing5. Apollo Codegen6. Apollo Link7. 其他工具和框架结论 &#x1f680;&#x1f…...

再看promise

第一次学的时候没学牢固 后面意识到promise的重要性之后 陆陆续续的看、查&#xff0c;终于在今天 感觉好像明白点了 把自己敲的理解分享给大家 <!DOCTYPE html> <html lang"en"> <head> <meta charset"UTF-8"> <meta name&…...

Redis 分布式锁总结

在一个分布式系统中,由于涉及到多个实例同时对同一个资源加锁的问题,像传统的synchronized、ReentrantLock等单进程情况加锁的api就不再适用,需要使用分布式锁来保证多服务实例之间加锁的安全性。常见的分布式锁的实现方式有zookeeper和redis等。而由于redis分布式锁相对于比…...

Vue懒加载深度解析:提升性能、优化用户体验的完整指南

文章目录 &#x1f333;引言&#x1f333;Vue懒加载基础&#x1f332;什么是懒加载&#xff1f;&#x1f332;组件级懒加载&#x1f332;图片懒加载 &#x1f333;懒加载的原理与优势&#x1f332;组件懒加载原理&#x1f332;图片懒加载原理&#x1f332;懒加载的优势 &#x…...

“图解C语言:一维数组的声明、创建与初始化艺术“

各位少年&#xff1a; 标题&#xff1a;《C语言一维数组的探索之旅&#xff1a;从声明到初始化&#xff0c;及如何避免常见误区》 引言 在编程世界中&#xff0c;数组无疑是最基础且重要的数据结构之一&#xff0c;尤其在C语言中&#xff0c;它以其简洁明了的特性为各类数据处…...

Unity坦克大战开发全流程——开始场景——场景装饰

开始场景——场景装饰 step1&#xff1a;先创建两个场景 step2&#xff1a;将地板拖拽到场景上 step3&#xff1a;将方块拖拽到场景上&#xff0c;并设置其参数 step4&#xff1a;将坦克拖拽到场景上 step5&#xff1a;创建点光源 step6&#xff1a;旋转炮塔 将该脚本挂载到炮…...

【链表OJ—链表的回文结构】

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 提示&#xff1a;这里可以添加本文要记录的大概内容&#xff1a; 例如&#xff1a;…...

关键字:try-catch关键字

在 Java 中&#xff0c;try-catch关键字用于异常处理。它们允许编写代码来捕获和处理异常&#xff0c;以确保程序能够在出现问题时合理地处理它们而不会崩溃。 以下是try-catch关键字的基本语法&#xff1a; 在try块中编写可能会抛出异常的代码。如果在try块中的任何代码抛出…...

双指针算法

目录 双指针算法 最长连续不重复子序列 数组元素的目标和 双指针算法 常见的两种样式&#xff1a; 双指针指向两个不同的区间 双指针指向一个区间的左右两端&#xff0c;这种方式更加常见 双指针算法思想 for(int i0;i<n;i)for(int j0;j<n;j)O(n^2) 时间复杂度 …...

Cucumber-JVM的示例和运行解析

Cucumber-JVM 是一个支持 Behavior-Driven Development (BDD) 的 Java 框架。在 BDD 中&#xff0c;可以编写可读的描述来表达软件功能的行为&#xff0c;而这些描述也可以作为自动化测试。 Cucumber-JVM 的最小化环境 Cucumber-JVM是BDD的框架&#xff0c; 提供了GWT语法的相…...

OSPF ROUTER-ID-新版(15)

目录 整体拓扑 操作步骤 1.INT 验证Router-ID选举规则 1.1 查看路由器Router-ID 1.2 配置R1地址 1.3 查看R1接口信息 1.4 查看R1Router-ID 1.5 删除接口IP并查看Router-ID 1.6 手工配置Router-ID 2.基本配置 2.1 配置R1的IP 2.2 配置R2的IP 2.3 配置R3的IP 2.4 配…...

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

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

ubuntu下编译obs-studio遇到的问题记录

参考的是这篇文档&#xff1a;Build Instructions For Linux obsproject/obs-studio Wiki GitHub 在安装OBS dependencies时&#xff0c; sudo apt install libavcodec-dev libavdevice-dev libavfilter-dev libavformat-dev libavutil-dev libswresample-dev libswscale-d…...

C++的一些知识

一. 语法 move怎么用 https://blog.csdn.net/zhangmiaoping23/article/details/126051520 这个文章讲的很好&#xff0c;其中有一些疑惑的点 (1) 左值引用不能接右值 class T1{int a; }; int main(){T1 t1 T1();T1 && t1_temp T1(); //T1()是一个临时对象&#xf…...

黑马Mybatis

Mybatis 表现层&#xff1a;页面展示 业务层&#xff1a;逻辑处理 持久层&#xff1a;持久数据化保存 在这里插入图片描述 Mybatis快速入门 ![在这里插入图片描述](https://i-blog.csdnimg.cn/direct/6501c2109c4442118ceb6014725e48e4.png //logback.xml <?xml ver…...

Java 8 Stream API 入门到实践详解

一、告别 for 循环&#xff01; 传统痛点&#xff1a; Java 8 之前&#xff0c;集合操作离不开冗长的 for 循环和匿名类。例如&#xff0c;过滤列表中的偶数&#xff1a; List<Integer> list Arrays.asList(1, 2, 3, 4, 5); List<Integer> evens new ArrayList…...

376. Wiggle Subsequence

376. Wiggle Subsequence 代码 class Solution { public:int wiggleMaxLength(vector<int>& nums) {int n nums.size();int res 1;int prediff 0;int curdiff 0;for(int i 0;i < n-1;i){curdiff nums[i1] - nums[i];if( (prediff > 0 && curdif…...

数据链路层的主要功能是什么

数据链路层&#xff08;OSI模型第2层&#xff09;的核心功能是在相邻网络节点&#xff08;如交换机、主机&#xff09;间提供可靠的数据帧传输服务&#xff0c;主要职责包括&#xff1a; &#x1f511; 核心功能详解&#xff1a; 帧封装与解封装 封装&#xff1a; 将网络层下发…...

【HTML-16】深入理解HTML中的块元素与行内元素

HTML元素根据其显示特性可以分为两大类&#xff1a;块元素(Block-level Elements)和行内元素(Inline Elements)。理解这两者的区别对于构建良好的网页布局至关重要。本文将全面解析这两种元素的特性、区别以及实际应用场景。 1. 块元素(Block-level Elements) 1.1 基本特性 …...

AI编程--插件对比分析:CodeRider、GitHub Copilot及其他

AI编程插件对比分析&#xff1a;CodeRider、GitHub Copilot及其他 随着人工智能技术的快速发展&#xff0c;AI编程插件已成为提升开发者生产力的重要工具。CodeRider和GitHub Copilot作为市场上的领先者&#xff0c;分别以其独特的特性和生态系统吸引了大量开发者。本文将从功…...

C++ Visual Studio 2017厂商给的源码没有.sln文件 易兆微芯片下载工具加开机动画下载。

1.先用Visual Studio 2017打开Yichip YC31xx loader.vcxproj&#xff0c;再用Visual Studio 2022打开。再保侟就有.sln文件了。 易兆微芯片下载工具加开机动画下载 ExtraDownloadFile1Info.\logo.bin|0|0|10D2000|0 MFC应用兼容CMD 在BOOL CYichipYC31xxloaderDlg::OnIni…...

分布式增量爬虫实现方案

之前我们在讨论的是分布式爬虫如何实现增量爬取。增量爬虫的目标是只爬取新产生或发生变化的页面&#xff0c;避免重复抓取&#xff0c;以节省资源和时间。 在分布式环境下&#xff0c;增量爬虫的实现需要考虑多个爬虫节点之间的协调和去重。 另一种思路&#xff1a;将增量判…...

小木的算法日记-多叉树的递归/层序遍历

&#x1f332; 从二叉树到森林&#xff1a;一文彻底搞懂多叉树遍历的艺术 &#x1f680; 引言 你好&#xff0c;未来的算法大神&#xff01; 在数据结构的世界里&#xff0c;“树”无疑是最核心、最迷人的概念之一。我们中的大多数人都是从 二叉树 开始入门的&#xff0c;它…...

6个月Python学习计划 Day 16 - 面向对象编程(OOP)基础

第三周 Day 3 &#x1f3af; 今日目标 理解类&#xff08;class&#xff09;和对象&#xff08;object&#xff09;的关系学会定义类的属性、方法和构造函数&#xff08;init&#xff09;掌握对象的创建与使用初识封装、继承和多态的基本概念&#xff08;预告&#xff09; &a…...