JS-01-在HTML中嵌入JavaScript代码的三种方式

最新推荐文章于 2023-12-28 09:39:49 发布

TSCCG

最新推荐文章于 2023-12-28 09:39:49 发布

阅读量2k

点赞数 1

分类专栏： Web前端文章标签： javascript

本文链接： https://blog.csdn.net/TSCCG/article/details/119282932

版权

Web前端专栏收录该内容

26 篇文章 0 订阅

订阅专栏

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>

思考：οnclick=“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>