javascript：html嵌入javascript代码的三种方式
一、概念javascript是运行在浏览器中的脚本语言，运行在浏览器的内存当中，不需要程序员手动编译，编写玩源代码之后，浏览器直接打开解释执行，简称JS。二、html嵌入javascript代码的三种方式JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。例如：在JS中有很多事件，其中有一个事件叫做：鼠标单击，click，并且任何事件都会对应一个事件句柄onclick。1.事件句柄
一、概念
javascript是运行在浏览器中的脚本语言，运行在浏览器的内存当中，不需要程序员手动编译，编写完源代码之后，浏览器直接打开解释执行，简称JS。
二、html嵌入javascript代码的三种方式
JS是一门事件驱动型的编程语言，依靠事件去驱动，然后执行对应的程序。
例如：在JS中有很多事件，其中有一个事件叫做：鼠标单击，click，并且任何事件都会对应一个事件句柄onclick。
1.事件句柄是以html标签的属性存在的。
在按钮标签中设置onclick属性值，则点击按钮发生click事件后，注册在onclick后面的js代码会被浏览器自动调用。
示例如下：
解释：（1）在JS中有一个内置的对象window,代表浏览器对象（窗口），window对象有一个函数alert，用法是window.alert(“消息”)，点击按钮后弹出带有消息的窗口，"window."可以省略不写直接写alert语句；
（2）java字符串可以使用双引号，也可以使用单引号；
（3）JS的一条语句结束之后可以使用分号也可以不用。
（4）window.alert()语句在显示窗口时并没有执行完，点击确认窗口消失后才执行完（alert有阻塞当前页面加载的作用）。
2.脚本块的方式
在body标记中嵌入script标记，JS代码写在script标记中。此时的代码在页面打开时执行，并且遵循自上而下的顺序依次执行（浏览器会按照< script >在页面中出现的顺序依次解释它们，即后一个< script >元素中的代码必须在前一个< script >元素中的代码解释完毕才开始解释），即代码的执行不需要事件。javascipt的脚本块可以有多个，可以出现在任意位置。javascript可以有//开头的单行注释和/**/包含的多行注释。
包含在< script > 内的代码会被从上到下解释，并且会被保存在解释器环境中。在< script >元素中的代码被计算完成之前，页面的其余内容不会被加载，也不会被显示。
示例如下：
效果如下：
刷新页面后一直在加载页面，也没有显示input标记，点击确定后页面加载完毕：
3.引入外部独立的.js文件
.js文件内容与脚本块的方式中script标记中的内容一致。代码也会按照顺序自上而下地执行。同一个.js文件可以被引入多次。
引入方式，在body 标记中加script标签：
< script type=“text/javascript” src=“.js文件的路径” ></ script >
注意不能写成：< script type=“text/javascript” src=“.js文件的路径” />
补充：
（1）defer属性
HTML4.01为< script >元素定义了一个叫defer的属性，这个属性表示脚本在执行时不会改变页面的结构。即脚本会被延迟到整个页面解析结束时再运行，因此，在< script >元素上设置defer属性，相当于告诉浏览器立即下载，但延迟执行。注意，defer属性只对外部脚本文件才有效。
例如：
<html>
<head>
<script defer src="example.js"></script>
</head>
<body>
<!-- 这里是页面的内容 -->
</body>
</html>
上述例子中的< script > 元素包含在页面的< head >，但它们会在浏览器到结束的< /html >标签才会执行。HTML5要求脚本应该按照它们出现的顺序执行，因此第一个推迟的脚本会在第二个推迟的脚本之前执行，而且两者会在DOMContentLoaded事件之前执行。
（2）async属性
HTML5为< script >元素定义了async属性，async属性与defer属性类似，两者都只适用于外部脚本，都会告诉浏览器立即开始下载。不过，与defer不同的是，标记为async的脚本并不保证能按照它们出现的次序执行。
科技之力与好奇之心，共建有温度的智能世界
更多推荐
9
0- 0
已为社区贡献1条内容
所有评论(0)