❗HTML引入JavaScript的三种常用方式汇总❗

YXXYX

已于 2023-06-23 14:12:12 修改

阅读量7.3w

点赞数 62

分类专栏：前端学习文章标签： javascript html html5

于 2021-10-13 08:04:44 首次发布

本文链接：https://blog.csdn.net/YXXXYX/article/details/120619666

版权

前端学习专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了HTML中嵌入JavaScript的三种方式，包括事件句柄的使用（如点击事件触发警告框）、脚本块的编写位置及其执行顺序，以及引入外部JS文件的实践。适合前端开发者初学者了解基础概念。

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

引言

JavaScript是一门脚本语言，虽然名字里有Java，但是和Java没有一点关系，它原名是LiveScript；现在的前端JavaScript可以说是异常火爆，但是博主本人并不准备向前端发展，但是对前端的一些基础知识还是必须有所了解的；
上一篇博客：❗HTML引入CSS的三种常用方式汇总❗ 已经介绍了HTML嵌入CSS的三种方式，这里就来介绍HTML如何嵌入JavaScript；

ps：由于作者规划以后往java后端发展，所以对于前端的知识只是了解了部分主要内容，以应用为主，所以如果有错误请各位及时指正！

事件句柄

JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序；

这里就拿鼠标点击（click）事件来举例子；
每个每个事件都会有对应的事件句柄，就比如这个click例子，事件句柄为：onclick
注：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on
而且事件句柄是以HTML标签的属性存在的；

所以我们这个例子要实现的功能就是：用户点击以下按钮，弹出消息框

那么如何通过点击按钮这个事件弹出消息框呢？
在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象；
window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了；

示例如下：

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

脚本块

这种方法和之前CSS总结中提到的内部CSS样式很像，也很简单
格式为：

<script type="text/javascript">
脚本块
</script>
<!--注意：这里的结束部分：‘</script>’一定要有-->

示例如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入JS代码的第二种方式</title>
		<!--脚本块可以出现在任何地方，这里就不一一示范了，感兴趣可以自己尝试-->
		<script type="text/javascript">
			/*
				暴露在脚本块当中的程序，在页面打开的时候执行，
				并且遵守自上而下的顺序依次逐行执行。（这个代
				码的执行不需要事件）
			*/
			window.alert("head............");//alert函数会阻塞整个HTML页面的加载
		</script>
	</head>
	<body>
		<!--注意观察按钮1，2的出现时机，可以直观体会到js自上而下执行效果-->
		<input type="button" value="我是一个按钮对象1" />
		<script type="text/javascript">
			window.alert("Hello World!");
			window.alert("Hello JavaScript!");
		</script>
		<input type="button" value="我是一个按钮对象2" />
	</body>
</html>

引入外部独立的js文件

为了让HTML页面和js脚本更好的分离，可以将js脚本单独保存到一个*.js的文件中，然后在HTML中导入即可，
导入的语法如下：<script type="text/javascript" src="test.js"></script>

再次强调：结束部分</script>一定要有，否则网页不会显示！

还有一点：一定要注意区分，在CSS中引入文件通过link，使用的是href="URL(统一资源定位器)"
而JS使用的是src="URL(统一资源定位器)"
千万不要弄混！

js代码：

window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("hello js!");
window.alert("ending");

html代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件</title>
	</head>
	<body>
		<!--这里就导入了js01文件，并运行-->
		<script type="text/javascript" src="js01.js">
			// 这里写的代码不会执行，执行的是js01文件
			// window.alert("Test");
		</script>
		
		<script type="text/javascript">
			alert("hello jack!");
		</script>
	</body>
</html>