HTML中嵌入JavaScript
一、在标签中加入事件句柄方式
<input type="button" value="hello" onclick="alert('hello JS');alert('JavaScript')"/>
1. 事件与事件句柄
- 在JS中有很多事件,并且任何事件都会对应一个事件句柄,事件与事件句柄的区别是,事件句柄是在事件单词前添加一个on,事件句柄是以HTML标签的属性存在的
比如事件click,事件句柄onclick - οnclick="JS代码"执行原理:
页面打开的时候,JS代码并不会执行,只是把这段JS代码注册到按钮的click事件上了,等这个按钮发生click事件之后,注册在onclick后面的JS代码会被浏览器自动调用
二、脚本块方式
<script type="text/javascript">
alert("hello JS");
</script>
- 暴露在脚本块中的程序,在页面打开的时候遵循自上而下的顺序依次执行,并且不需要事件
- JavaScript脚本块在一个页面当中可以出现多次,另外出现位置不是固定的
即<script>…</script>可以包含在文档中的任何地方,只要保证这些代码在被使用前已读取并加载到内存即可
三、引入外部独立的JS脚本文件
<script type="text/javascript" src="js/xxx.js"></script>
<link rel="stylesheet" type="text/css" href="css/xxx.css"/>
- 在引入外部独立的JS文件的时候,JS文件中的代码会遵循自上而下的顺序依次执行
- 当然JS文件可以被引入多次,但实际开发中需求很少
- 结束的标签必须有
// 这种方式不行,因为没有结束的</script>标签
<script type="text/javascript" src="js/xxx.js"/>
<script type="text/javascript" src="js/xxx.js">
alert("不会执行");
</script>
// 但可以再写脚本块执行JS代码:
<script type="text/javascript">
alert("执行");
</script>