html代码中嵌入JavaScript的方式

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")运行一下就有结果啦~

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 游动-白 设计师:白松林 返回首页