JS-01-在HTML中嵌入JavaScript代码的三种方式
JS-01-在HTML中嵌入JavaScript代码的三种方式
1.JavaScript概述
Web的组成有HTML、CSS还有即将要学习的JavaScript(简称JS)。
CSS和JS主要是服务于HTML，前者让HTML更加美观，后者能够让HTML动起来。
如果把HTML比作一只光秃秃的鸟的话，那么CSS就是鸟的羽毛，JS就是让鸟能够飞起来的肌肉。
2.在HTML中嵌入JavaScript代码的第一种方式
JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
在JS中有很多事件，其中有一个事件就叫做：鼠标单击，click。并且任何事件都会对应一个事件句柄，onclick。
注意：事件和事件句柄的区别是：事件句柄是在事件单词前面加一个on，且事件句柄是以HTML标签的属性存在的。
第一种方式：以事件句柄的方式。
2.1通过事件句柄的方式嵌入JS代码
下面编写程序，实现一个按钮，当点击时，弹出一个对话框，显示“Hello JS!”
在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用。【window代表的是浏览器对象】
window对象有一个函数叫做alert，可以实现弹窗，用法是：window.alert("message");
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在HTML中嵌入JavaScript的第一种方式</title>
</head>
<body>
<input type="button" value="点击" onclick="window.alert('Hello JS')">
<-- JS中的字符串可以使用单引号，也可以使用双引号 -->
<-- <input type="button" value="点击" onclick='window.alert("Hello JS")'> -->
</body>
</html>
思考：onclick="JS代码"，执行原理是什么？
- 当页面打开时，js代码不会执行执行，只是把这段JS代码注册到按钮的click事件上去了，当这个按钮发生click事件后，注册在onclick后面的JS代码会被浏览器自动调用。
注意：JS中的一条语句结束之后可以使用分号“；”，也可以不使用。
<input type="button" value="点击" onclick="window.alert('Hello JS');">
<input type="button" value="点击" onclick="window.alert('Hello JS')">
2.2可以在一个事件句柄中写多条JS语句
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在HTML中嵌入JavaScript的第一种方式</title>
</head>
<body>
<input type="button" value="点击" onclick="window.alert('Hello JS')
window.alert('Hello Web')
window.alert('Hello World')">
<!-- window可以省略不写 -->
<input type="button" value="点击" onclick="alert('Hello JS')
alert('Hello Web')
alert('Hello World')">
</body>
</html>
3.在HTML中嵌入JavaScript代码的第二种方式
3.1通过内部脚本块的方式嵌入JS代码
类似于CSS中的内部样式表，JavaScript也可以在HTML代码中编写脚本代码块。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第二种方式</title>
</head>
<body>
<input type="button" value="点击打开" />
<!-- 第二种方式：内部脚本块的方式 -->
<!-- 暴露在脚本块中的JS程序，不需要触发事件，打开页面的同时执行JS代码，且遵循自上而下的顺序。-->
<script type="text/javascript">
window.alert("Hello World")
window.alert("Hello JS")
</script>
<input type="button" value="打开" />
</body>
</html>
3.2脚本块可以出现多次且位置随意
另外，javascript的脚本块在一个页面中可以出现多次，且出现位置也没有要求。
<script type="text/javascript">
window.alert("顶部脚本块")
</script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第二种方式</title>
<script type="text/javascript">
window.alert("头部脚本块")
</script>
</head>
<body>
<input type="button" value="点击打开" />
<!-- 第二种方式：内部脚本块的方式 -->
<!-- 不需要事件触发，打开页面的同时执行JS代码，且遵循自上而下的顺序。-->
<script type="text/javascript">
window.alert("Hello World")
window.alert("Hello JS")
</script>
<input type="button" value="打开" />
</body>
</html>
<script type="text/javascript">
window.alert("脚部脚本块")
</script>
3.3alert函数会阻塞整个HTML页面的加载
alert函数会阻塞整个HTML页面的加载，直到点击确定。
3.4JavaScript的注释书写格式
JS的注释书写格式与java一样。
<script type="text/javascript">
//单行注释
/*
多行注释
*/
window.alert("Hello World")
window.alert("Hello JS")
</script>
而java有独特的javadoc注释。
这里的注释信息会被javadoc.exe工具解析提取生成帮助文档。
/**
*
* @return 返回值
*/
public static int dosome(){
return 3;
}
4.在HTML中嵌入JavaScript代码的第三种方式
类似于CSS的外部样式表，我们也可以将JavaScript的代码放到一个外部的后缀名为.js的文件中去。
这种方式也是推荐使用的。
4.1通过引入外部js文件的方式嵌入JS代码
js文件：
alert("Hello JS")
alert("Hello World")
html文件:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第三种方式</title>
</head>
<body>
<!-- 在需要的地方引入js脚本文件 -->
<script type="text/javascript" src="js/1.js"></script>
</body>
</html>
引入外部独立的js文件时，js文件中的代码会遵循自上而下的顺序逐行执行：
4.2同一个js文件可以被引入多次。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第三种方式</title>
</head>
<body>
<!-- 在需要的地方引入js文件 -->
<script type="text/javascript" src="js/1.js"></script>
<script type="text/javascript" src="js/1.js"></script>
</body>
</html>
但实际开发中这种需求很少。
4.3引入js文件时，能否在script标签内再编写js代码，会执行吗？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第三种方式</title>
</head>
<body>
<!-- 在需要的地方引入js文件 -->
<script type="text/javascript" src="js/1.js">
alert("内部代码块")
</script>
</body>
</html>
由结果来看，不会执行。
4.4引入js文件后，能否再编写另外的js脚本块呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>嵌入JS的第三种方式</title>
</head>
<body>
<!-- 在需要的地方引入js文件 -->
<script type="text/javascript" src="js/1.js"></script>
<!-- <script type="text/javascript" src="js/1.js">
alert("内部代码块")
</script> -->
<script type="text/javascript">
alert("内部代码块2")
</script>
</body>
</html>
由结果来看，可以。
