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中的一条语句结束之后可以使用分号“;”，也可以不用。

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

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

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

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

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

（4）语法格式：

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

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

（2）语法格式：

.JS文件

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

引入.JS文件的代码

总结：

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

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

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