HTML嵌入JS的三种方式-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_53126056/article/details/111338061

本文介绍了HTML中嵌入JavaScript的三种常见方式：第一种是通过句柄事件如onclick实现交互；第二种是利用脚本块<script>直接编写JS代码；第三种是外部引用JS文件，提高代码组织和复用性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

第一种句柄事件 onclick
怎么使用js代码弹窗

 在js中有一个内置的BOM对象，可以直接使用，全部小写：window

 window对象有一个函数 alert，这个函数专门用来弹出对话框
 js中的字符串可以使用双引号也可以使用单引号
            可以使用分号结尾也可以不用

<body>
		<input type="button" value="hello1"  onclick="window.alert('hello world')"/>
	</body>

第二种脚本块方式

<script type="text/javascript">
alert("先加载我");
 </script>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 先加载这个按钮 -->
		<input type="button"  value="按钮1" />
		<!-- 脚本块 -->
		<script type="text/javascript">
			alert("123");
			alert("456");
		</script>
		<!-- 最后加载这个按钮 -->
		<input type="button" name="" id="" value="按钮2" />
	</body>

第三种引用外部js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 引入外部的js文件 -->
		<script src="第三种方式.js" type="text/javascript" charset="utf-8">
			//alert("111")写在这里的代码不会被执行
		</script>
		<!-- 单独的脚本块   这里的可以执行-->
		<script type="text/javascript">
			alert("222")
		</script>
	</body>
</html>