JavaScript代码执行方式详解-优快云博客

本文链接：https://blog.youkuaiyun.com/LYN_1217/article/details/125171611

1.内嵌式

在html文件内使用标签包裹起来,页面打开自动执行。

使用方便,但是大篇幅的JS代码不要用。

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<script>
			// 1、内嵌式
			console.log("输出控制台!");
		</script>
	</body>
</html>

效果展示：
在这里插入图片描述

2.行内式

在html标签的属性内填写,通过行为触发执行(几乎不用)

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 2、行内式 -->
		<button type="button" onclick="console.log('行内式!');">点击</button>
	</body>
</html>

效果展示：
在这里插入图片描述

3.外链式

外链式:写在独立的js文件内,在html文件中使用script标签的src属性引入,页面打开自动执行。(推荐使用,因为有各种优化方法)

js代码多的情况下使用外链式，使用外链式时需要先新建一个.js文件

代码展示：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- 3、外链式，中间不能写js代码 -->
		<script src="js/test.js"></script>
	</body>
</html>