一、概念
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的脚本并不保证能按照它们出现的次序执行。

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐