JavaScript第二章 HTML中嵌入JavaScript

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">
		// JS代码
		alert("hello JS")；
</script>

• 暴露在脚本块中的程序，在页面打开的时候遵循自上而下的顺序依次执行，并且不需要事件
• JavaScript脚本块在一个页面当中可以出现多次，另外出现位置不是固定的
  即<script>…</script>可以包含在文档中的任何地方，只要保证这些代码在被使用前已读取并加载到内存即可

三、引入外部独立的JS脚本文件

<script type="text/javascript" src="js/xxx.js"></script>

• 区别CSS的引入方式（使用href）

<link rel="stylesheet" type="text/css" href="css/xxx.css"/>

• 在引入外部独立的JS文件的时候，JS文件中的代码会遵循自上而下的顺序依次执行
• 当然JS文件可以被引入多次，但实际开发中需求很少
• 结束的标签必须有

// 这种方式不行，因为没有结束的</script>标签
<script type="text/javascript" src="js/xxx.js"/>

• 引入JS脚本文件当中写的代码不会执行

<script type="text/javascript" src="js/xxx.js">
	// 这里的代码不会执行
	alert("不会执行");
</script>
// 但可以再写脚本块执行JS代码：
<script type="text/javascript">
	// 执行JS代码
	alert("执行")；
</script>