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