HTML嵌入JS代码的三种方式

姓蔡小朋友

已于 2022-10-12 21:01:48 修改

阅读量7.5k

点赞数 5

分类专栏： JavaScript 文章标签： javascript html 前端

于 2022-08-26 10:52:11 首次发布

本文链接：https://blog.csdn.net/m0_53881899/article/details/126538351

版权

JavaScript 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

一、HTML嵌入JS代码的第一种方式：直接加一个事件句柄跟表达式

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML嵌入JS代码的第一种方式</title>
	</head>
	<body>
		<input type="button" value="hello" onclick="window.alert('hello ')" />
	</body>
</html>

用户点击按钮，弹出消息框。
任何一个事件都会对应一个事件句柄叫做：onclick ，以属性方式存在。
鼠标单击事件：click。
JS中有个内置对象叫windows,windows有个函数叫alert，就是用于消息弹窗的。

二、HTML嵌入JS代码的第二种方式：脚本块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML嵌入JS代码的第二种方式</title>
	</head>
	<body>
		<script type="text/javascript">
			window.alert("hello");
		</script>
		<input type="button"/>
	</body>
</html>

脚本块中的代码不需要事件就能执行。
脚本块中的代码，在页面打开时按自上而下顺序逐行执行。
写在脚本块中的alert()会阻塞html后续代码的执行
脚本块出现位置没有要求，在html代码中可以出现多个脚本块。

三、HTML嵌入JS代码的第三种方式：外部引入js文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script type="text/javascript" src="js/1.js"></script>
	</body>
</html>