❗HTML引入JavaScript的三种常用方式汇总❗

引言

JavaScript是一门脚本语言，虽然名字里有Java，但是和Java没有一点关系，它原名是LiveScript；现在的前端JavaScript可以说是异常火爆，但是博主本人并不准备向前端发展，但是对前端的一些基础知识还是必须有所了解的；
上一篇博客：❗HTML引入CSS的三种常用方式汇总❗ 已经介绍了HTML嵌入CSS的三种方式，这里就来介绍HTML如何嵌入JavaScript；

ps：由于作者规划以后往java后端发展，所以对于前端的知识只是了解了部分主要内容，以应用为主，所以如果有错误请各位及时指正！

事件句柄

JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序；

这里就拿鼠标点击（click）事件来举例子；
每个每个事件都会有对应的事件句柄，就比如这个click例子，事件句柄为：onclick
注：事件和事件句柄的区别是：事件句柄是在事件单词前添加一个on
而且事件句柄是以HTML标签的属性存在的；

所以我们这个例子要实现的功能就是：用户点击以下按钮，弹出消息框

那么如何通过点击按钮这个事件弹出消息框呢？
在JS中有一个内置的对象叫做window，全部小写，可以直接拿来使用，window代表的是浏览器对象；
window对象有一个函数叫做:alert，用法是：window.alert("消息");这样就可以弹窗了；

示例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML中嵌入JS代码的第一种方式</title></head><body><input type="button" value="hello" onclick="window.alert('hello zhangsan')window.alert('hello lis')window.alert('hello wangwu')"/><!-- window. 可以省略。--><input type="button" value="hello" onclick="alert('hello zhangsan')alert('hello lis')alert('hello wangwu')"/></body>
</html>

脚本块

这种方法和之前CSS总结中提到的内部CSS样式很像，也很简单
格式为：

<script type="text/javascript">
脚本块
</script>
<!--注意：这里的结束部分：‘</script>’一定要有-->

示例如下：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML中嵌入JS代码的第二种方式</title><!--脚本块可以出现在任何地方，这里就不一一示范了，感兴趣可以自己尝试--><script type="text/javascript">/*暴露在脚本块当中的程序，在页面打开的时候执行，并且遵守自上而下的顺序依次逐行执行。（这个代码的执行不需要事件）*/window.alert("head............");//alert函数会阻塞整个HTML页面的加载</script></head><body><!--注意观察按钮1，2的出现时机，可以直观体会到js自上而下执行效果--><input type="button" value="我是一个按钮对象1" /><script type="text/javascript">window.alert("Hello World!");window.alert("Hello JavaScript!");</script><input type="button" value="我是一个按钮对象2" /></body>
</html>

引入外部独立的js文件

为了让HTML页面和js脚本更好的分离，可以将js脚本单独保存到一个*.js的文件中，然后在HTML中导入即可，
导入的语法如下：<scrip type="text/javascript" src="test.js"></script>

再次强调：结束部分</script>一定要有，否则网页不会显示！

还有一点：一定要注意区分，在CSS中引入文件通过link，使用的是href="URL(统一资源定位器)"
而JS使用的是src="URL(统一资源定位器)"
千万不要弄混！

js代码：

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

html代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>HTML中嵌入JS代码的第三种方式：引入外部独立的js文件</title></head><body><!--这里就导入了js01文件，并运行--><script type="text/javascript" src="js01.js">// 这里写的代码不会执行，执行的是js01文件// window.alert("Test");</script><script type="text/javascript">alert("hello jack!");</script></body>
</html>

总结

汇总一下这三点：

事件句柄
脚本块
引入外部独立的js文件

JS的内容相对CSS和HTML还有很多，这也只是一个起点，希望我们能一起加油！

欢迎大家的点评！