位置: IT常识 - 正文
Web前端 | HTML嵌入JS代码的三种方式(嵌入html)
编辑：rootadmin推荐整理分享Web前端 | HTML嵌入JS代码的三种方式(嵌入html)，希望有所帮助，仅作参考，欢迎阅读内容。
文章相关热门搜索词:嵌入html,html嵌入javascript,html嵌入html,前端页面嵌入,html嵌入javascript,前端页面嵌入,前端嵌入页面的几种方法,前端嵌套页面,内容如对您有帮助，希望把文章链接给更多的朋友！
✅作者简介：一位材料转码农的选手，希望一起努力，一起进步！
📃个人主页：@每天都要敲代码的个人主页
🔥系列专栏：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>上一篇：微信小程序完整项目实战(前端+后端)(微信小程序完整授权)
下一篇：有反爬机制就爬不了吗？那是你还不知道反反爬，道高一尺魔高一丈啊(常见反爬策略)
