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.hqwc.cn/news/312884.html

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

相关文章

基于OpenCv的车道检测

项目背景和步骤 车道检测是自动驾驶领域不可或缺的一环 具体步骤如下&#xff1a; 一、将图像灰度化&#xff0c;并进行适度的高斯滤波&#xff0c;剔除干扰 二、利用Canny边缘检测&#xff0c;检测出车道和其它物体的边缘 三、使用ROI区域截取&#xff0c;截取需要的部分&a…

无监督学习(下)

1.高斯混合模型(GMM) (1)简单概念 高斯混合模型是一种概率模型&#xff0c;它假定实例是由多个参数未知的高斯分布的混合生成的。从单个高斯分布生成的所有实例都形成一个集群&#xff0c;通常看起来像一个椭圆。每个集群都可以由不同的椭圆形状&#xff0c;大小&#xff0c;密…

echarts 二分图布局_力向导图_关系图

Echarts 常用各类图表模板配置 注意&#xff1a; 这里主要就是基于各类图表&#xff0c;更多的使用 Echarts 的各类配置项&#xff1b; 以下代码都可以复制到 Echarts 官网&#xff0c;直接预览&#xff1b; 图标模板目录 Echarts 常用各类图表模板配置一、力向导图(二分图布局…

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

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

C++类和对象(中)

前言 我们前面已经介绍过了C类和对象的入门知识&#xff0c;例如面向过程和面向对象&#xff0c;类的概念以及this指针等~&#xff01;本期我们再来对类和对象介绍~&#xff01; 本内容介绍 类的6个默认成员函数 构造函数 析构函数 拷贝构造 赋值运算符重载 const成员函数 取…

《ORANGE’S:一个操作系统的实现》读书笔记(十九)输入输出系统(一)

我们刚刚实现了简单的进程&#xff0c;你现在可能很想把它做得更加完善&#xff0c;比如进一步改进调度算法、增加通信机制等。但是这些工作不但做起来没有尽头&#xff0c;而且有些也是难以实现的&#xff0c;因为进程必须与I/O、内存管理等其它模块一起工作。而且&#xff0c…

低成本设计一套防串号系统

问题 物联网设备接入服务器的鉴权&#xff0c;如何做到防止被串号。 举一个通俗的例子&#xff0c;群晖&#xff0c;与黑群晖洗白&#xff0c;通常是不知道哪里搞来的黑群晖的序列号和mac&#xff0c;刷到系统中系统就可以正常接入群晖的服务器。如果你的序列号和mac不小心被泄…

【C++】手撕 Vector类

目录 1&#xff0c;vector类框架 2&#xff0c;vector () 3&#xff0c;pinrt() 4&#xff0c;vector(int n, const T& value T()) 5&#xff0c;vector(const vector& v) 6&#xff0c;vector(InputIterator first, InputIterator last) 7&#xff0c;~vector…

HarmonyOS应用程序包快速修复

快速修复概述 快速修复是HarmonyOS系统提供给开发者的一种技术手段&#xff0c;支持开发者以远快于应用升级的方式对应用程序包进行缺陷修复。和全量应用升级软件版本相比&#xff0c;快速修复的主要优势在小、快和用户体验好。在较短的时间内不中断正在运行的应用的情况下&am…

【兔子王赠书第14期】《YOLO目标检测》涵盖众多目标检测框架,附赠源代码和全书彩图!

文章目录 写在前面YOLO目标检测推荐图书本书特色内容简介作者简介 推荐理由粉丝福利写在后面 写在前面 小伙伴们好久不见吖&#xff0c;本期博主给大家推荐一本关于YOLO目标检测的图书&#xff0c;该书侧重目标检测的基础知识&#xff0c;包含丰富的实践内容&#xff0c;是目标…

Qt+Opencv:人脸检测

话接上一篇&#xff0c;我们仍使用在上篇《QtOpencv&#xff1a;Qt中部署opencv》创建的Qt项目来测试opencv提供的sample。 在正式开始本篇之前&#xff0c;我们先说做一下准备工作&#xff1a; 一、opencv官方文档 学习最权威和最可靠的方式&#xff0c;就是阅读官方文档和…

QtitanRibbon 开始使用实例

新建一个界面程序&#xff1a; 修改项目里面的源码&#xff1a; 至此&#xff0c;一个简单界面就出来了&#xff0c;效果如下所示&#xff1a;