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

时间：2025-03-22 19:15:40

引言

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

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

事件句柄

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

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

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

那么如何通过点击按钮这个事件弹出消息框呢？
      在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象；
      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=""></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文件
			// ("Test");
		</script>
		
		<script type="text/javascript">
			alert("hello jack!");
		</script>
	</body>
</html>

总结

汇总一下这三点：

  • 事件句柄
  • 脚本块
  • 引入外部独立的js文件

JS的内容相对CSS和HTML还有很多，这也只是一个起点，希望我们能一起加油！

欢迎大家的点评！

相关文章