如何在 HTML 中添加 JavaScript？

17 Mar 2025 | 4 分钟阅读

JavaScript，也称为 JS，是脚本（客户端脚本）语言之一，通常用于 Web 开发以创建现代、交互式的网页。术语“脚本”用于指代非独立性质的语言，这里指的是在客户端机器上运行的 JavaScript。

换句话说，我们可以说脚本这个术语用于需要另一门语言支持才能执行的语言。例如，JavaScript 程序在没有 HTML 的帮助或未集成到 HTML 代码中时，就无法执行。

JavaScript 在网页中的用途多种多样，例如生成警告消息、构建图像库、DOM 操作、表单验证等。

将 JavaScript 添加到 HTML 页面

用户可以通过以下三种方式将 JavaScript 添加到 HTML 页面：

嵌入代码
内联代码
外部文件

我们将一步一步地介绍这三种方法。

一、嵌入代码：

要将 JavaScript 代码添加到 HTML 页面，我们可以使用 HTML 的 <script>.....</script> 标签，该标签将 JavaScript 代码包裹在 HTML 程序中。用户也可以在 <body> 标签（或可以说 body 部分）或 <head> 标签中定义 JavaScript 代码，因为这完全取决于用户使用的网页结构。

我们可以通过一个示例更清楚地理解这一点，即如何将 JavaScript 添加到 HTML。

示例

<!DOCTYPE html >
<html>
<head>
<title> page title</title>
<script>
document.write("Welcome to TpointTech");
</script>
</head>
<body>
<p> In this example, we saw how to add JavaScript in the head section. </p>
</body>
</html>

输出

我们也可以在 <body> 标签或 body 部分定义 JavaScript 代码。

让我们通过一个例子来理解。

<!DOCTYPE html >
<html>
<head>
<title> page title</title>
</head>
<body>
<script>
document.write("Welcome to TpointTech");
</script>
<p> In this example, we saw how to add JavaScript in the body section. </p>
</body>
</html>

输出

二、内联代码：

通常，当我们需要在 HTML 事件属性中调用函数时，会使用此方法。在许多情况下（或事件）我们需要直接添加 JavaScript 代码，例如，OnMover 事件、OnClick 等。

让我们通过一个示例来看看，如何在不使用 <script>.... </script> 标签的情况下，直接在 HTML 中添加 JavaScript。

让我们看一个例子。

<!DOCTYPE html >
<html>
<head>
<title> page title</title>
</head>
<body>
<p>
<a href="#" onClick="alert('Welcome !');">Click Me</a>
</p>
<p> in this example we saw how to use inline JavaScript or directly in an HTML tag. </p>
</body>
</html>

输出

三、外部文件：

我们还可以创建一个单独的文件来保存 JavaScript 代码，并为其加上（.js）扩展名，然后使用 <script> 标签的 src 属性将其合并/包含到我们的 HTML 文档中。如果我们希望在多个 HTML 文档中使用相同的代码，这将非常有用。它还可以让我们免去一遍又一遍地编写相同代码的麻烦，并使维护网页更加容易。

在本例中，我们将看到如何将外部 JavaScript 文件包含到 HTML 文档中。

让我们通过一个简单的例子来理解。

<html>
<head>
<meta charset="utf-8">
<title>Including a External JavaScript File</title>
</head>
<body>
<form>
<input type="button" value="Result" onclick="display()"/>
</form>
<script src="hello.js">
</script>
</body>
</html>

现在让我们创建一个单独的 JavaScript 文件。

Hello.js

function display() {
alert("Hello World!");
}

输出

上面两个程序都保存在同一个文件夹中，但您也可以将 JavaScript 代码存储在单独的文件夹中，您只需要在 <script> 标签的 src 属性中提供（.js）文件的地址/路径。

要点

JavaScript 文件是具有（.js）扩展名的通用文本文件，就像我们在上面的程序中创建和使用的那样。

外部 JavaScript 文件只包含 JavaScript 代码，不包含其他任何内容，甚至连 <script>.... </script> 标签也不使用。

HTML noscript 元素

该元素可以包含除了 <script> 标签之外的任何可以包含在 <HTML> 元素中的 HTML 元素。

让我们通过一个例子更清楚地理解这一点。

程序

<!DOCTYPE html>  
<html>  
<body>  
<h1>The noscript element</h1>  
<p>If the user have a browser with JavaScript disabled will show the text inside the noscript element and "Hello World!" will not be displayed.</p>  
<script>  
document.write("Hello World!")  
</script>  
<noscript>Sorry, your browser may not support JavaScript! or JavaScript is disabled in your browser </noscript>  
  
</body>  
</html>    

在上面的程序中，我们使用了 JavaScript 来打印消息 "Hello World!"，还使用了 <noscript> 元素来打印消息 "抱歉，您的浏览器可能不支持 JavaScript！或者您的浏览器中已禁用 JavaScript"。仅当用户浏览器中禁用了 JavaScript 或其浏览器根本不支持 JavaScript 时，<noscript> 元素才会打印此消息。

让我们看看在启用 JavaScript 的浏览器中运行上述程序时会得到什么输出。

输出

现在，让我们看看在禁用 JavaScript 的浏览器（或不支持 JavaScript 的浏览器）中运行相同程序时会得到什么输出。

输出

示例 2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Noscript Demo</title>
</head>
<body>
<div id="greet"></div>
<script>
document.getElementById("greet").innerHTML = "Hello World!";
</script>
<noscript> //This element will print the given message only when the execution of the  <script> tags does not take place.
<p>Oops! This website requires a JavaScript-enabled browser.</p>
</noscript>
</body>
</html>

让我们在启用 JavaScript 的浏览器中运行上面给出的程序。

输出

现在，让我们在禁用 JavaScript 的浏览器上运行上面的程序。

输出

下一主题如何启用我的浏览器中的 JavaScript

如何在 HTML 中添加 JavaScript？

将 JavaScript 添加到 HTML 页面

一、嵌入代码：

二、内联代码：

三、外部文件：

要点

HTML noscript 元素

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

JavaScript 基础

JS 变量和数据类型

JS 控制语句

JavaScript 函数

JavaScript 对象

JS 高级函数

JS Promises & Async/Await

JavaScript DOM

JavaScript JSON 对象

JavaScript 验证

JavaScript Cookies

异常处理

JavaScript 集合

JavaScript 事件

JavaScript OOPs

JavaScript BOM

面试题

选择题

差异

JavaScript Map 方法

JavaScript Handler

JavaScript Number 方法

JavaScript Reflect

JavaScript Symbol

Symbol 属性

JavaScript Math 方法

JavaScript Date 方法

JavaScript DataView

JavaScript Object 方法

JavaScript Set 方法

JavaScript 字符串方法

JavaScript TypedArray 方法

JavaScript WeakMap 方法

JavaScript WeakSet 方法

JavaScript 数组方法

JavaScript RegExp 对象

JavaScript 附加内容

JavaScript 杂项

JavaScript 进阶

问题

Lodash

如何在 HTML 中添加 JavaScript？

将 JavaScript 添加到 HTML 页面

一、嵌入代码：

二、内联代码：

三、外部文件：

要点

HTML noscript 元素

相关帖子

使用 JavaScript 框架创建演示文稿

后端项目创意

JavaScript onmousewheel 事件

JavaScript 中的 Promise 是什么？

JavaScript String startsWith

Lodash_.chain() 方法

JavaScript 队列

如何在 javascript 中使用 mousedown 事件

Javascript Async Generator 函数

JavaScript 免费认证

订阅 Tpoint Tech