本文详细介绍JavaScript中alert()函数的三种调用方式：直接在script标签内定义、嵌入HTML元素属性以及引入外部JS文件。重点分析各方法的执行机制与优缺点，指出直接定义会阻塞页面渲染，嵌入属性不利于维护，推荐使用外部引入方式，并说明其配合内部脚本使用的注意事项。
alert()函数的作用效果
alert()是JavaScript中用于显示警告框的方法，该警告框包含一条指定的消息以及一个确认按钮。
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()会阻塞后续脚本的执行；
- 只有当用户点击确认按钮并关闭警告框后，后续的脚本代码才会继续执行；
- 虽然这种方法实现简单，但由于会阻塞页面渲染并影响用户体验，因此不建议采用。
方式二：在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调用，会导致代码分散；
- 由于代码分散且难以统一维护，因此也不推荐使用此方式。
方式三：通过外部JS文件引入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文件的路径以便引用；
- 建议将外部JS文件放置在同一个文件夹下，以简化路径管理；
- 该方式不会引发第一种方式中的页面阻塞问题，不影响用户观感，且代码更易于维护；
- 但需注意，一旦script标签引入了外部文件（通过src属性），该标签内的内部alert代码将不会执行，必须另外编写一个新的script标签来放置内部alert；
- 综合考虑，推荐使用这种方式。
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的相关内容，请搜索本站往期文章或继续浏览后续文章，感谢大家的支持！