本文详细介绍JavaScript在浏览器中实现弹窗的三种主要嵌入方式：HTML标签内联事件、内部脚本块以及外部JS文件引用。重点解析window.alert()函数的用法、onclick事件句柄的注册机制，以及不同嵌入方式下代码执行的顺序与阻塞特性，帮助开发者掌握基础JS交互技巧。
一、前言
完成HTML与CSS的基础学习后，我们将进入核心的JavaScript编程阶段。
二、什么是JavaScript，有什么用?
JavaScript（简称JS）是一种运行在浏览器端的脚本语言。
它的引入使原本静态的网页变得动态且生动，提升了用户体验。
三、HTML嵌入JavaScript的方式：
第一种方式：
1、要实现的功能:
用户点击指定按钮时，触发消息弹窗。
2、弹窗
JavaScript属于事件驱动型语言，通过事件触发执行相应逻辑。常见事件如鼠标单击（click），其对应的事件句柄为onclick。需注意，事件句柄是在事件名基础上添加前缀“on”形成的，且作为HTML标签的属性存在。
3、οnclick=js代码"，执行原理是什么?
页面加载时，JS代码并不会立即执行，而是将代码注册到按钮的click事件上。当用户触发click事件后，浏览器会自动调用注册在onclick属性中的JS代码。
4、 怎么使用JS代码弹出消息框?
JS提供了内置对象window，代表浏览器窗口。该对象包含alert()函数，调用方式为window.alert("消息内容")，即可实现弹窗效果。
5、window.可以省略
下面两个等价
<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick="alert('hello world')"/>6、设置多个alert可以一直弹窗
<input type="button" value="hello" onclick="alert(hello java")
alert(hello python')
alert('hello javaScript!)"/>JS字符串支持单引号和双引号。语句末尾的分号“;”可选，非强制要求。
<input type="button" value="hello" onclick="alert('hello world')"/>无分号，内单外双引号
<input type="button" value="hello" onclick= 'alert("hello jscode");'/> 有分号，内双外单引号整体代码：
<!doctype html>
<htm1>
<head>
<title>JavaScript第一种</title>
</head>
<body>
<input type="button" value="hello" onclick="window.alert('hello world')"/>
<input type="button" value="hello" onclick='window.alert("hello jscode")'/>
<input type="button" value="hello" onclick="alert('hello zhangsan');
alert('hello lisi');
alert('hello wangwu')"/>
</body>
</html>弹窗效果：
第二种方式：
脚本如：
<script type="text/javascript">
window.alert("Hello JavaScript")
</script>- JavaScript脚本块在单个页面中可多次出现。
- 脚本块的位置无严格限制。
如：
<script type="text/javascript">
window.alert("head ");
window.alert("Hello World!")
</script>
<!doctype html>
<html>
<head>
<title>HTML中嵌入JS代码的第二种方式</title>
</head>
<body>
<script type="text/javascript">
window.alert("min");
window.alert("Hello World!")
</script>
<input type="button"value="按钮"/>
</body>
</html>
<script type="text/javascript">
window.alert("last");
window.alert("Hello World!")
</script>alert()具有阻塞页面加载的特性，会暂停执行直至用户点击确定按钮。
脚本块内的代码在页面打开时立即执行，遵循自上而下的逐行执行顺序。此类代码无需事件触发，加载即运行。
第三种方式：
引入外部独立的js文件如，外部文件路径
<!doctype html>
<html>
<head>
<title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title>
</head>
<body>
<!--这个src表示路径，在text目录的1.js文件 -->
<script type="text/javascript" src="text/1.js"></script>
</body>
</html>在需要的位置引入js脚本文件
引入外部JS文件时，其中的代码同样遵循自上而下的逐行执行顺序。
①在引入的外部脚本中又加alert，则这个不会生效
②需要另外写一个才会生效
如：
<!doctype html>
<html>
<head>
<title>HTM中嵌入JS代码的第三种方式:引入外部独立的js文件。</title>
</head>
<body>
<!--这个src表示路径，在text目录的1.js文件 -->
<script type="text/javascript" src="text/1.js">
<!--下面这个不会起作用 -->
window.alert("hello");
</script>
<!--需要另外写一个脚本才会生效，如： -->
<script type="text/javascript">
window.alert("hello");
</script>
</body>
</html>总结
本文到此结束，希望能为读者提供有益帮助，欢迎持续关注本站获取更多技术内容！