HTML嵌入JavaScript的三种方式详解

一、概念

JavaScript是一种在浏览器环境中运行的脚本语言，代码直接在浏览器内存中执行。开发者无需手动进行编译操作，只需编写源代码，浏览器即可直接打开并解释执行，通常简称为JS。

二、HTML嵌入JavaScript代码的三种方式

JavaScript属于事件驱动型编程语言，其执行依赖于事件的触发。例如，鼠标单击事件（click）会触发对应的事件句柄（onclick），从而执行绑定的JavaScript代码。

1. 事件句柄方式：以HTML标签属性的形式存在。

在按钮标签中设置onclick属性，当用户点击按钮触发click事件时，浏览器会自动调用注册在onclick属性值中的JavaScript代码。

示例如下：

解释说明：（1）JavaScript内置对象window代表浏览器窗口，其提供的alert函数用于弹出消息窗口，调用格式为window.alert(“消息”)；实际使用中可省略“window.”前缀直接调用alert；（2）JavaScript字符串既可使用双引号也可使用单引号；（3）JavaScript语句末尾的分号可选，有或无均可。

（4）window.alert()语句在执行时会阻塞当前页面的加载，只有用户点击确认使窗口关闭后，后续代码才会继续执行。

2. 脚本块方式

在body标签内嵌入script标签，将JavaScript代码写入其中。此类代码在页面加载时自上而下依次执行，无需依赖事件触发。JavaScript脚本块可以有多个，且可放置在文档的任意位置。代码支持以//开头的单行注释和以/**/包裹的多行注释。

示例如下：

效果如下：

刷新页面后，页面会一直处于加载状态且input标记未显示，直到用户点击确认按钮，页面加载才会完成。

3. 引入外部独立的.js文件

外部.js文件的内容与脚本块中script标签内的内容一致，代码同样按照自上而下的顺序执行。同一个.js文件可以被多次引入。引入方法是在body标签中添加script标签，并指定src属性指向.js文件路径。

到此这篇关于HTML嵌入JavaScript代码的三种方式的文章就介绍到这了，更多相关HTML嵌入JavaScript内容请搜索本站以前的文章或继续浏览下面的相关文章，希望大家以后多多支持本站！