Web前端 | HTML嵌入JS代码的三种方式_html引入js文件

作者：我家小花儿 | 2024-02-18 21:00:14

踩

html引入js文件

tips：前些天突然发现了一个巨牛的人工智能学习网站，通俗易懂，风趣幽默，忍不住分享一下给大家，感兴趣的同学可以点击网站进行学习人工智能学习网站

一：JavaScript概述

（1）JavaScript是运行在浏览器上的脚本语言，简称JS。

（2）JavaScript是网景公司的布兰登艾奇（JavaScript之父）开发的，最初叫做LiveScript
（3）LiveScript的出现让浏览器更加的生动了，不再是单纯的静态页面，页面更具有交互性
（4）在历史的某个阶段，SUN公司和网景公司他们之间有合作关系，SUN公司把LiveScript的名字修改为JavaScript
（5）JavaScript这个名字中虽然带有“Java”但是和Java没有任何关系，只是语法上优点类似！他们运行的位置不同：Java运行在JVM当中，JavaScript运行在浏览器的内存当中！

（6）JavaScript程序不需要手动编译，编写完源代码之后，浏览器直接打开解释执行
（7）JavaScript的“目标程序”以普通文本形式保存，这种语言都叫做“脚本语言”。

Java的目标程序已.class形式存在，不能使用文本编辑器打开，不是脚本语言。
（8）ECMA根据JavaScript制定了ECMA-262号标准，叫做ECMA-Script。

   现代的javascript和jscript都实现了ECMA-Script规范。（javascript和jscript统一了）

（9）以后我们会学习一个叫做JSP的技术，JSP和JS的区别
       JSP : JavaServer Pages（隶属于Java语言的，运行在JVM当中）
       JS : JavaScript（运行在浏览器上）

二： HTML嵌入JS代码的三种方式

第一种方式：事件句柄onclick

（1）JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序！
在JS中有很多事件，其中有一个事件叫做：鼠标单击，单词：click。并且任何事件都会对应一个事件句柄叫做：onclick。而事件句柄是以HTML标签的属性存在的！

（2）οnclick="js代码"，执行原理是什么？
页面打开的时候，js代码并不会执行，只是把这段JS代码注册到按钮的click事件上了。等这个按钮发生click事件之后，注册在onclick后面的js代码会被浏览器自动调用！

（3）怎么使用JS代码弹出消息框？
在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象。window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了！window也可以省略！

（4）JS中的字符串可以使用双引号，也可以使用单引号。JS中的一条语句结束之后可以使用分号“;”，也可以不用。

实现的功能：用户点击以下按钮，弹出消息框


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HTML引入CSS代码的第一种方式</title>
	</head>
	<body>
		
		<!--在onclick里面嵌入JS代码,然后点击“按钮”,做到动态效果-->
		<input type="button" value="按钮" onclick="window.alert('Hello');">
		</input> <br>
		
		<!--当输入多条window.alert语句时，不会一下输出所有的内容，点击一下输出一条-->
		<input type="button" value="按钮" onclick="window.alert('Hello zhangsan')
												   alert('Hello lisi')
											       alert('Hello wangwu');">
		</input>
	</body>
</html>

第二种方式：脚本块的方式

（1）javascript的脚本块在一个页面当中可以出现多次，没有要求。
javascript的脚本块出现位置也没有要求，随意。

（2）暴露在脚本块当中的程序，在页面打开的时候直接就执行，并且遵守自上而下的顺序依次逐行执行。（这个代码的执行不需要事件）

（3）alert有阻塞当前页面加载的作用。（阻挡，直到用户点击确定按钮）

（4）语法格式：

<script type="text/javascript">JS代码</script>


<!--代码块在最上面-->
<script type="text/javascript">
	window.alert("first.......");
</script>
 
<!doctype html>
<html>
	<head>
		<title>HTML中嵌入JS代码的第二种方式</title>
		
		<!--代码块出现在head里-->
		<script type="text/javascript">
			window.alert("head............");
		</script>
 
	</head>
	<body>
		<!--按照顺序执行，上面两个脚本块执行完了，才会显示这个按钮1-->
		<input type="button" value="按钮对象1" />
		
		<!--第二种方式：脚本块的方式-->
		<!--代码块出现在body里-->
		<script type="text/javascript">
			// alert函数会阻塞整个HTML页面的加载。
			window.alert("Hello World!"); 
			window.alert("Hello JavaScript!");
		</script>
		<!-- 刚开始不会直接显示这个按钮，当上面脚本块都结束，按顺序才会执行到这里---->
		<input type="button" value="按钮对象2" />
	</body>
</html>
<!--代码块在最下面-->
<script type="text/javascript">
	window.alert("last.......");
</script>

第三种方式：引入外部独立的JS文件

（1）和引入css的方式是类似的，也是页面一打开就会执行JS代码，但是注意在script标签中间写入代码是无效的

（2）语法格式：

<script type="text/javascript" src="路径"></script>

.JS文件


window.alert("hello js!");
window.alert("hello js test!");

引入.JS文件的代码


<!doctype html>
<html>
	<head>
		<title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件。</title>
	</head>
	<body>
		
		<!--在需要的位置引入js脚本文件-->
		<!--引入外部独立的js文件的时候，js文件中的代码会遵循自上而下的顺序依次逐行执行。-->
		<script type="text/javascript" src="js/1.js"></script>
 
		<!--同一个js文件可以被引入多次，但实际开发中这种需求很少-->
		<script type="text/javascript" src="js/1.js"></script>
 
		<!--这种方式不行，结束的script标签必须有。-->
		<script type="text/javascript" src="js/1.js" />
	    
        <!--在<script>中间写代码不会执行-->
		<script type="text/javascript" src="js/1.js">
			// 这里写的代码不会执行。
			// window.alert("Test");
		</script>       
 
	</body>
</html>

总结：

（1）采用事件句柄的方式，浏览器打开时不会执行JS代码，当事件发生时才会执行JS代码，比如点击按钮。

（2）采用脚本块的方式，位置是任意，浏览器一代开JS代码就会执行。

（3）引入外部的.JS文件也是浏览器一打开就执行对应的JS代码。


<!--事件的方式-->
<input type="button"  value="按钮" onclick="window.alert('Hello World')"/>
<!--脚本块的方式-->
<script type="text/javascript">
	window.alert("HeHe");
</script>
<!--引入外部的.js文件方式-->
<script type="text/javascript" src="1.js"></script>

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/我家小花儿/article/detail/110539