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

【JavaScript】alert的使用方法 | 超详细

news 2026/4/10 23:47:21

alert作用效果

alert（）方法用于显示带有一条指定消息和一个确认的按钮的警告框。

alert使用方法

方法一：直接写在script标签内 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript中alert的使用方式1</title><script type="text/javascript">alert(("这是一个警告！"));</script>
</head>
<body><p>alert（）方法用于显示带有一条指定消息和一个确认的按钮的警告框。</p>
</body>
</html>

注意：

  • 本应该执行主体部分的p标签，但是并没有执行；
  • 这是因为在script中直接定义alert标签，alert之后的脚本都不会运行；
  • 只有在点击确认之后，关闭警示框之后，才会执行；
  • 此类方法，虽然简单但是不建议使用，会影响用户体验。

方法二：写在body的某个标签内

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript中alert的使用方式1</title>
</head>
<body><!-- 将alert写在onclick属性中，单击后，会弹出警告框 --><button onclick="alert('点什么点！')">你点我一下</button><br><!-- 将alert写在超链接的herf属性中，点击超链接，会弹出警告框 --><a href="javascript:alert('叫你别点！点什么点')">别点我</a><br><p>来试试看</p>
</body>
</html>

注意：

  • 这种情况不会出现像方法一的问题；
  • 但是在一个页面中，可能会出现多个alert标签；
  • 不容易维护，所以也不建议使用。 

 

 

方法三：使用外部alert

// 定义一个alert_usage3_out.js文件，用于专门存放alert标签
alert("这是一个外部文件的警告");
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>JavaScript中alert的使用方式2</title>
</head>
<body><script type="text/javascript" src="alert_usage3_out.js">// 加入src=“路径”，就可以链接此文件alert(("这是一个警告！"));</script><script type="text/javascript" >// 加入src=“路径”，就可以链接此文件alert(("这是一个警告！"));</script>
</body>
</html>

注意： 

  • 使用这种方式，需要记住外部alert的路径，才能进行引用；
  • 最好写在同一个文件夹下；
  • 该方式不会出现第一种方式的问题，不会影响用户观感，也易于维护；
  • 但使用该方式后，这一个scrip标签下的内部alert就不能执行了，只能重新写一个script；
  • 推荐使用这种方式。 

alert使用实例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>head中定义JS函数</title><script type="text/JavaScript">function message(){alert("调用JS函数！sum(100+200) = " + sum(100,200));}function sum(x,y) {return x+y;}</script>
</head>
<body><h4>head标记内定义两个JS函数</h4><p>无返回值函数：message()</p><p>有返回值函数：sum(x,y)</p><form><input name="btnCallJS" type="button" onclick="message();" value="计算并显示两个数的和"></form>
</body>
</html>

相关文章：

【JavaScript】alert的使用方法 | 超详细

alert作用效果 alert&#xff08;&#xff09;方法用于显示带有一条指定消息和一个确认的按钮的警告框。 alert使用方法 方法一&#xff1a;直接写在script标签内 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"&…...

编程日记 2023/11/27 7:35:48

总结Vue3里一些常见的组合式api

一&#xff1a;前言 二&#xff1a;常见api 1、ref 和 reactive 这两个组合式 api 是在 Vue3 开发中最为常见的两个 api &#xff0c;主要是将一个非响应式的数据变为响应式数据。 ref作用: 定义一个数据的响应式 语法: const xxx ref(initValue):创建一个包含响应式数据的引…...

编程日记 2023/11/27 7:34:47

C_5练习题

一、单项选择题(本大题共20小题,每小题2分,共40分。在每小题给出的四个备选项中,选出一个正确的答案&#xff0c;并将所选项前的字母填写在答题纸的相应位置上。) 1.以下不正确的C语言标识符是(&#xff09; A. AB1 B._ab3 C. char D. a2_b 若 x、i、j、k都是 int型变量&#…...

编程日记 2023/11/27 7:33:46

【采坑分享】导出文件流responseType:“blob“如何提示报错信息

目录 前言&#xff1a; 采坑之路 总结&#xff1a; 前言&#xff1a; 近日&#xff0c;项目中踩了一个坑分享一下经验&#xff0c;也避免下次遇到方便解决。项目基于vue2axioselement-ui&#xff0c;业务中导出按钮需要直接下载接口中的文件流。正常是没有问题&#xff0c;但…...

编程日记 2023/11/27 7:32:45

机器学习算法——主成分分析（PCA）

目录 1. 主体思想2. 算法流程3. 代码实践 1. 主体思想 主成分分析&#xff08;Principal Component Analysis&#xff09;常用于实现数据降维&#xff0c;它通过线性变换将高维数据映射到低维空间&#xff0c;使得映射后的数据具有最大的方差。主成分可以理解成数据集中的特征…...

编程日记 2023/11/27 7:31:44

01、copilot+pycharm

之——free for student 目录 之——free for student 杂谈 正文 1.for student 2.pycharm 3.使用 杂谈 copilot是github推出的AI程序员&#xff0c;将chatgpt搬到了私人终端且无token限制&#xff0c;下面是使用方法。 GitHub Copilot 是由 GitHub 与 OpenAI 合作开发的…...

编程日记 2023/11/27 7:28:41

一般将来时

一般将来时 概念 表示将要发生的动作或打算、计划准备做某事 时间 tomorrow 明天 the day after tomorrow 后天 next week 下周 next weekend 下周末 next month 下个月 next year 明年 ...句子结构 主语 be&#xff08;am/is/are&#xff09;going to do … 计划,…...

编程日记 2023/11/27 7:27:40

【古诗生成AI实战】之四——模型包装器与模型的训练

在上一篇博客中&#xff0c;我们已经利用任务加载器task成功地从数据集文件中加载了文本数据&#xff0c;并通过预处理器processor构建了词典和编码器。在这一过程中&#xff0c;我们还完成了词向量的提取。 接下来的步骤涉及到定义模型、加载数据&#xff0c;并开始训练过程。…...

编程日记 2023/11/27 7:26:37

redis实现消息延迟队列

业务场景 在很多软件系统功能中都会出现定时任务的业务场景,比如提前点单,比如定时发布动态,文章等而出现这样的的定时的任务为延迟队任务 代码模块 任务的持久化一般都需要建立一个任务表和任务日志表,避免宕机导致任务失效,先新建立一个数据库,创建基本的任务表和任务日志表…...

编程日记 2023/11/27 7:25:36

keyof

// 在TypeScript中&#xff0c;keyof是一个操作符&#xff0c; // 它允许你从一个类型中提取所有的可枚举属性名&#xff0c;并将它们组成一个联合类型。 // 例如&#xff0c;假设你有这样一个类型&#xff1a; type Person { firstName: string; lastName: string; age: n…...

编程日记 2023/11/27 7:24:35

Centos 7 更改 PostgreSQL 14 默认存储路径

前言&#xff1a; 默认PostgreSQL数据存储路径为&#xff1a;/var/lib/pgsql/14/data 迁移到新的存储路径&#xff1a;/mnt/postgresql/data 1、关闭PostgreSQL服务 systemctl stop postgresql-142、创建目录 # 创建新目录 mkdir -p /mnt/postgresql/data# 更改目录权限 chow…...

编程日记 2023/11/27 7:23:34

深信服超融合一体机提示：内存ECC

PS&#xff1a;此事件分享主要来源于季度巡检时发现的超融合一体机红灯闪烁异常&#xff0c;接入IPMI端口查看日志发现持续提示内存ECC&#xff1b; 因为是只有3.05这一天发现了有这个告警的提示&#xff0c;所以当时清除了日志以后重启了BMC服务就解决了&#xff1b;但是如果清…...

编程日记 2023/11/27 7:21:32

STK Components 二次开发-地面站传感器

上一篇我们说了创建地面站&#xff0c;那么这次我们在地面站添加一些特效。 1. 创建地面站 var locationPoint1 new PointCartographic(m_earth, new Cartographic(Trig.DegreesToRadians(117.17066), Trig.DegreesToRadians(31.84056), 240.359)); m_facility new Platfor…...

编程日记 2023/11/27 7:20:31

基于springboot校园车辆管理系统

背景 伴随着社会经济的快速发展&#xff0c;机动车保有量不断增加。不断提高的大众生活水平以及人们不断增长的自主出行需求&#xff0c;人们对汽车的 依赖性在不断增强。汽车已经发展成为公众日常出行的一种重要的交通工具。在如此形势下&#xff0c;高校校园内的机动车数量也…...

编程日记 2023/11/27 7:19:30

通用电气调查网络攻击和数据盗窃指控

通用电气正在调查有关威胁行为者在网络攻击中破坏了公司开发环境并泄露据称被盗数据的指控。 通用电气 (GE) 是一家美国跨国公司&#xff0c;业务涉及电力、可再生能源和航空航天行业。 本月早些时候&#xff0c;一个名为 IntelBroker 的威胁行为者试图在黑客论坛上以 500 美…...

编程日记 2023/11/27 7:18:29

2023亚太赛数学建模A题：采果机器人的图像识别技术思路模型代码

亚太A题&#xff1a;采果机器人的图像识别技术 A题完整思路获取 &#xff1a;获取见文末名片&#xff0c;第一时间更新 中国是世界上最大的苹果生产国&#xff0c;年产量约为3500万吨。与此同时&#xff0c;中国也是世 界上最大的苹果出口国&#xff0c;全球每两个苹果中就有…...

编程日记 2023/11/27 7:17:27

C++ 协程

经典协程辅助入门代码&#xff1a; typedef cotask::task my_task_t; int main() { // create a task using factory function [with lambda expression] my_task_t::ptr_t task my_task_t::create([]() { //创建协程 std::cout ()->get_id() cotask::this_task::get…...

编程日记 2023/11/27 7:15:24

Flutter学习（六）EventBus的使用

背景 项目开发过程中&#xff0c;有些场景&#xff0c;需要跨页面进行数据传递。按照安卓开发的思路&#xff0c;在flutter实现一个事件总线EventBus&#xff0c;进行数据传递 原理 通过dart的签名函数&#xff0c;进行监听集合设置&#xff0c;然后post分发的时候&#xff…...

编程日记 2023/11/27 7:14:23

Linux系统---僵尸进程、孤儿进程

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C/C》 键盘敲烂&#xff0c;年薪百万&#xff01; 有了上一篇博客的学习&#xff0c;我们已经简单了解了进程的基础知识&#xff0c;今天我们再来学习两个特殊的进程&#xff0c;僵尸进程和孤儿进程。 …...

编程日记 2023/11/27 7:13:22

SpringBoot中如何优雅地使用重试

1 缘起 项目中使用了第三方的服务&#xff0c; 第三方服务偶尔会出现不稳定、连接不上的情况&#xff0c; 于是&#xff0c;在调用时为了保证服务的相对高可用&#xff0c;添加了超时连接重试&#xff0c; 当连接第三方服务超时时&#xff0c;多重试几次&#xff0c;比如3次&a…...

编程日记 2023/11/27 7:12:21

nomacs开发者指南：从源码编译到自定义构建的完整教程

nomacs开发者指南&#xff1a;从源码编译到自定义构建的完整教程 【免费下载链接】nomacs nomacs is a free image viewer for windows, linux, and mac systems. 项目地址: https://gitcode.com/gh_mirrors/no/nomacs 欢迎来到nomacs开发者指南&#xff01;nomacs是一款…...

编程新知 2026/4/10 23:09:47

告别重复劳作：基于ModelEngine Nexent与MCP构建通用数据可视化AI智能体

在数据驱动的时代&#xff0c;业务人员和分析师常常被困在重复的数据处理循环中&#xff1a;从数据库导出数据、用Excel或Python清洗、再选择合适的图表进行可视化。这个过程不仅耗时耗力&#xff0c;而且难以快速响应瞬息万变的业务需求。 现在&#xff0c;有一种更智能的解决…...

编程新知 2026/4/10 23:01:33

uniapp消息推送权限处理指南：如何优雅地引导用户开启通知权限

Uniapp消息推送权限优化实战&#xff1a;从检测到引导的全链路设计 移动应用的消息推送功能直接影响用户活跃度和留存率&#xff0c;但很多开发者忽略了权限引导这一关键环节。据统计&#xff0c;超过40%的用户首次安装应用时会默认关闭通知权限&#xff0c;导致重要消息无法触…...

编程新知 2026/4/10 21:16:21

安卓TV浏览器大屏适配终极方案：用Firefox+JS代码搞定全屏显示（附兼容性测试）

安卓TV浏览器大屏适配终极方案&#xff1a;用FirefoxJS代码搞定全屏显示&#xff08;附兼容性测试&#xff09; 在数字标牌、会议室展示等大屏应用场景中&#xff0c;安卓TV浏览器的适配问题一直是开发者的痛点。市面上常见的浏览器要么稳定性堪忧&#xff0c;要么缺乏对大屏显…...

编程新知 2026/4/10 20:43:11

告别定时器中断！用RTA-OS硬件计数器实现超低功耗任务调度（AUTOSAR OS实战）

汽车电子低功耗革命&#xff1a;基于RTA-OS硬件计数器的精准调度实战 在汽车电子控制单元&#xff08;ECU&#xff09;开发中&#xff0c;静态功耗优化一直是工程师面临的棘手难题。传统基于SysTick的周期性中断方案就像一盏永不熄灭的指示灯&#xff0c;即使系统处于空闲状态也…...

编程新知 2026/4/10 20:09:01

2026奇点大会AI部署白皮书深度解密（Kubernetes+LLM Runtime双栈融合架构首次公开）

第一章&#xff1a;2026奇点智能技术大会&#xff1a;AI原生容器化部署 2026奇点智能技术大会(https://ml-summit.org) AI原生容器化部署已成为大模型服务落地的核心范式。与传统微服务容器化不同&#xff0c;AI原生部署需同时满足GPU资源弹性调度、模型权重分片加载、推理请求…...

编程新知 2026/4/10 19:32:54

Windows风扇控制终极方案：FanControl让你的电脑散热与静音兼得

Windows风扇控制终极方案&#xff1a;FanControl让你的电脑散热与静音兼得 【免费下载链接】FanControl.Releases This is the release repository for Fan Control, a highly customizable fan controlling software for Windows. 项目地址: https://gitcode.com/GitHub_Tre…...

编程新知 2026/4/10 15:54:01

RV1126边缘设备性能实测：YOLOv8s vs YOLOv8m，谁才是性价比之王？

RV1126边缘设备性能实测&#xff1a;YOLOv8s与YOLOv8m的终极对决 在嵌入式AI领域&#xff0c;选择适合硬件平台的模型版本往往比模型本身更重要。当我们将目光投向Rockchip RV1126这类边缘计算设备时&#xff0c;YOLOv8系列中的s&#xff08;small&#xff09;和m&#xff08;m…...

编程新知 2026/4/10 14:52:06

若依ruoyi框架单点登录实战：从零到一接入统一认证系统

1. 业务场景与需求分析 在企业级应用开发中&#xff0c;多系统间的身份认证一直是痛点。想象一下&#xff0c;员工每天要在OA、CRM、ERP等不同系统间反复登录&#xff0c;既影响效率又增加密码管理负担。这就是统一认证系统&#xff08;单点登录&#xff09;要解决的核心问题—…...

编程新知 2026/4/10 14:41:52

Android 13 网络策略调优：实现以太网与WIFI的智能协同

1. 为什么需要以太网与WIFI智能协同&#xff1f; 在智能家居控制面板、工业手持终端这类设备上&#xff0c;我们经常遇到一个头疼的问题&#xff1a;插着网线时WIFI自动断连。Android系统默认的"以太网优先"策略&#xff0c;就像个非黑即白的直男——只要检测到网线插…...

编程新知 2026/4/10 14:39:45