JavaScript中alert的使用方法超详细介绍

更新时间：2024年01月09日 09:47:23 作者：安心学编程

JS中的alert作用是在浏览器中弹出一个警告框,而使用alert有三种方式,不同的方式所呈现的效果也不相同,这篇文章主要给大家介绍了关于JavaScript中alert使用方法的相关资料,需要的朋友可以参考下

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('叫你别点！点什么点')" rel="external nofollow" >别点我</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的使用方法的文章就介绍到这了,更多相关JS中alert的使用内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

BootStrap入门学习第一篇
这篇文章主要为大家详细介绍了BootStrap入门学习第一篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2017-08-08
原生JS实现日历组件的示例代码
本篇文章主要介绍了原生JS实现日历组件的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2017-09-09
JS验证IP，子网掩码，网关和MAC的方法
这篇文章主要介绍了JS验证IP，子网掩码，网关和MAC的方法,涉及javascript正则表达式的相关使用技巧,需要的朋友可以参考下
2015-07-07
JavaScript常用事件介绍
今天小编就为大家分享一篇关于JavaScript常用事件介绍，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
关于微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题
这篇文章主要介绍了微信小程序使用echarts/数据刷新重新渲染/图层遮挡问题,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
2022-07-07
kindeditor编辑器点中图片滚动条往上顶的bug
这篇文章主要介绍了kindeditor编辑器点中图片滚动条往上顶的bug的相关资料,需要的朋友可以参考下
2015-07-07
echarts数据可视化实现多个柱状堆叠图顶部显示总数示例
这篇文章主要为大家介绍了echarts实现多个柱状堆叠图顶部显示总数示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪
2023-07-07
JavaScript双问号(??)操作符用法详解
在现代JavaScript开发中,处理变量默认值是一个常见但容易引发bug的操作,很多开发者可能都遇到过这样的问题：使用||设置默认值时,意外覆盖了0、''等合法值,这时候,ES2020引入的双问号操作符（??）就能完美解决这类问题,本文将带您全面掌握这个操作符的使用场景和高级技巧
2025-04-04
js HTML5多媒体影音播放
这篇文章主要为大家详细介绍了js HTML5多媒体影音播放,具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2016-10-10
Bootstrap中的Panel和Table全面解析
这篇文章主要介绍了Bootstrap中的Panel和Table全面解析的相关资料,非常不错具有参考借鉴价值，需要的朋友可以参考下
2016-06-06