html代码中嵌入JavaScript的方式_本关任务:使用内置代码的方式将下面的 javascript 代码嵌入到 html 中。-CSDN博客

本文链接：https://blog.csdn.net/aaa1173942686/article/details/105320315

html中嵌入JavaScript

方式1：通过事件句柄

JavaScript是一门驱动型语言，通过事件去驱动然后执行程序，事件句柄是以html标签属性的形式存在的。下面例子是点击按钮弹出一个对话框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>点击按钮弹出对话框</title>
		<!--
			下面要实现的功能是点击按钮弹出一个对话框
			这里要用到的事件就是鼠标点击：click，并且任何一个事件都会对应一个事件句柄onclick
			onclick并不是浏览器时自动执行的，而是把事件注册到按钮的click事件上了，等这个按钮
			发生click事件后，注册在onclick后面的JS代码会被浏览器自动调用
			弹窗：JS内置的对象window，可以直接拿来使用  windows.alert("消息"); 而且window可以省略
		-->
		<input type="button" value="按钮" οnclick="alert('HelloJS')" />
		<input type="button" value="你点啥？" οnclick="alert('点你咋的')
			  alert('再点一下试试') 
			  alert('试试就试试')" />
	</head>
	<body>
	</body>
</html>

方式2：通过script代码块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第二种嵌入方式</title>
	</head>
	<body>
		<!--脚本块方式嵌入js代码-->
		<input type="button" value="点就完了" />
		<script type="text/javascript">
			/*
			 js的脚本块可以在一个页面出现多次没有要求
			 出现的位置也没有要求
			 * */
		alert("Helloworld1")   //alert函数会阻塞整个html页面的加载
		alert("Helloworld2")
		alert("Helloworld3")</script>
	</body>
</html>

方式3：引入一个独立的JavaScript文件

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>第三种嵌入方式</title>
		<!--html引入外部js的时候，js文件也会自上而下的执行-->
		<!--下面这种方式引入的时候，结束的script标签必须有-->
		
	</head>
	<body>
		<!--如果采用下面这种引入js文件的方式，那再在script代码块里写代码是不会执行的-->
		<script type="text/javascript" src="js/HelloJS.js"></script>
	</body>
</html>

JavaScript文件随便写点什么比如window.alert("HelloJavaScript")运行一下就有结果啦~