JavaScript 如何添加到HTML

JavaScript，也被称为JS，是一种脚本（客户端脚本）语言之一，通常用于网页开发以创建现代和互动的网页。术语“脚本”用来指代那些不是独立的语言，这里指的是运行在客户机上的JavaScript。

换句话说，我们可以说脚本这个术语用于需要另一种语言的支持才能执行的语言。例如，JavaScript程序在没有 <HTML> 或者没有集成到HTML代码中的情况下无法执行。

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

将JavaScript添加到HTML页面中

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

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

我们将逐步介绍其中的三种方式。

I. 嵌入代码

要将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 Javatpoint");
</script>
</head>
<body>
<p>Inthis example we saw how to add JavaScript in the head section </p>
</body>
</html>

输出：

JavaScript 如何添加到HTML

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

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

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

输出

JavaScript 如何添加到HTML

II. 内联代码

通常，当我们需要在HTML事件属性中调用一个函数时，会使用这种方法。有很多情况（或事件）需要直接添加JavaScript代码，例如：OnMover事件，在<a>OnClcik</a>等。

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

让我们看看这个示例。

<!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 如何添加到HTML

III. 外部文件

我们还可以创建一个单独的文件，使用(.js)扩展名来存放JavaScript代码，并在后续的HTML文档中通过使用 src 属性来包含/引用它。如果我们想要在多个HTML文档中使用相同的代码，这将非常有帮助。它还可以避免我们重复编写相同的代码，并使网页维护更容易。

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

通过一个简单的示例来理解。

<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 如何添加到HTML

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

重要点

JavaScript文件是普通的文本文件，拓展名为(.js)，就像我们在上述程序中创建和使用的那样。

外部JavaScript文件只包含JavaScript代码，没有其他内容，甚至没有使用<script>....</script>标签。

HTML noscript元素

<noscript>元素为我们提供了一种替代方法，用于为那些不支持JavaScript的用户或已在浏览器中禁用JavaScript的用户创建内容。

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

让我们通过一个示例更清楚地理解它：

程序

<!DOCTYPE html>
<html>
<body>
<h1>Thenoscript 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! orJavaScript is disabled in your browser </noscript>

</body>
</html>

在上面的程序中，我们使用了javascript来打印信息 “Hello World!” 还使用<nonscript>元素来打印信息 “抱歉，您的浏览器可能不支持JavaScript！或者JavaScript在您的浏览器中被禁用” 。如果用户的浏览器禁用了JavaScript或者根本不支持JavaScript，则<nonscript>元素将打印此信息。

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

输出

JavaScript 如何添加到HTML

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

输出

JavaScript 如何添加到HTML

示例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 如何添加到HTML