如何在html中调用js代码

人气:217 ℃/2023-07-28 00:44:56

我们编写html的时候经常需要调用JS的相关代码,那么如何在HTML中调用JS的代码呢?下面小编给大家分享一下。

工具/材料

Sublimetext

操作方法

首先打开Sublimetext软件编写一个html页面,如下图所示

然后我们在html页面中添加script标签,在script里简单的写一些JS的代码,如下图所示

接下来可以定义一个button按钮,通过其click事件来调用JS的代码,如下图所示

当然,如果调用的JS代码是外部的文件,则需要在开头的head标签内进行引入才可以使用,如下图所示

怎样在html中调用javascript方法

JavaScript代码怎样引入到HTML中?

JavaScript 程序不能独立运行,它需要被嵌入 HTML 中,然后浏览器才能执行 JavaScript 代码。通过 <script> 标签将 JavaScript 代码引入到 HTML 中,有两种方式:

1.内部方式

内部方式是通过<script>标签包裹JavaScript代码,从而引入HTML页面中,示例代码如下:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 引入方式</title> </head> <body> <!-- 内联形式:通过 script 标签包裹 JavaScript 代码 --> <script> alert('嗨,欢迎来传智播学习前端技术!') </script> </body> </html>

2.外部形式

一般将 JavaScript 代码写在独立的以 .js 结尾的文件中,然后通过 <script>标签的 <src>属性引入,示例代码如下:

// demo.jsdocument.write('嗨,欢迎来传智播学习前端技术!')

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 引入方式</title> </head> <body> <!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 --> <script src="demo.js"></script> </body> </html>

注意:如果 script 标签使用 src 属性引入了某 .js 文件,那么 标签的代码会被忽略!!!如下代码所示:

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JavaScript 基础 - 引入方式</title> </head> <body> <!-- 外部形式:通过 script 的 src 属性引入独立的 .js 文件 --> <script src="demo.js"> // 此处的代码会被忽略掉!!!! alert(666); </script> </body> </html>

推荐

首页/电脑版/网名
© 2025 NiBaKu.Com All Rights Reserved.