html页面中嵌入javascript有哪些方法（Web前端 | HTML嵌入JS代码的三种方式）
✅作者简介：一位材料转码农的选手 ，希望一起努力 ，一起进步！
📃个人主页：@每天都要敲代码的个人主页
🔥系列专栏：Web前端
目录
一：JavaScript概述
二： HTML嵌入JS代码的三种方式
第一种方式：事件句柄onclick
第二种方式：脚本块的方式
第三种方式：引入外部独立的JS文件
一：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>创心域SEO版权声明：以上内容作者已申请原创保护，未经允许不得转载，侵权必究！授权事宜、对本内容有异议或投诉，敬请联系网站管理员，我们将尽快回复您，谢谢合作！