分类
文章

如何将javascript添加到html

介绍

JavaScript,也缩写为JS,是Web开发中使用的一种编程语言。作为HTML和CSS之外的Web核心技术之一,JavaScript用于使网页具有交互性并构建Web应用程序。遵循通用显示标准的现代Web浏览器通过内置引擎支持JavaScript,而无需其他插件。

使用网络文件时,需要加载JavaScript并与HTML标记一起运行。可以在HTML文档中内联或在浏览器将与HTML文档一起下载的单独文件中完成此操作。

本教程将介绍如何将JavaScript内嵌到HTML文档中以及作为单独的文件合并到Web文件中。

将JavaScript添加到HTML文档中

您可以通过使用环绕JavaScript代码的专用HTML标签<script>在HTML文档中添加JavaScript代码。

可以将<script>标记放在HTML的<head>部分, <body>部分或</body>关闭标记之后,具体取决于您希望加载JavaScript的时间。

通常,JavaScript代码可以放在文档的<head>部分中,以使它们包含在HTML文档的主要内容之内。

但是,如果您的脚本需要在页面布局中的某个点(例如,使用document.write生成内容时)运行,则应将其放置在应调用的位置,通常在<body>部分中。

让我们考虑以下空白HTML文档,其浏览器标题为Today's Date of Today's Date :

index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
<body>
</body>
</html>

目前,该文件仅包含HTML标记。假设我们要在文档中添加以下JavaScript代码:

let d = new Date();
alert("Today's date is " + d);

这将使网页能够显示带有当前日期的警报,而不管用户何时加载网站。

为了实现这一点,我们将<script>标记以及一些JavaScript代码添加到HTML文件中。

首先,我们将在<head>标记之间添加JavaScript代码,向浏览器发出信号,要求其在加载页面的其余部分之前运行JavaScript脚本。例如,我们可以在<title>标记下添加JavaScript,如下所示:

index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <script>
        let d = new Date();
        alert("Today's date is " + d);
    </script>
</head>
<body>
</body>
</html>

加载页面后,您将收到类似于以下内容的警报:

JavaScript警报示例

您也可以尝试将脚本放在<body>标记之内或之外,然后重新加载页面。由于这不是一个功能强大的HTML文档,因此您可能不会注意到页面加载方面的任何差异。

如果要修改HTML正文中显示的内容,则需要在<head>部分之后实现该功能,以使其显示在页面上,如下例所示:

index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
<body>
  <script>
      let d = new Date();
      document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"
  </script>
</body>
</html>

通过网络浏览器加载的上述HTML文档的输出类似于以下内容:

JavaScript日期示例

较小的脚本或仅在一页上运行的脚本可以在HTML文件中正常工作,但是对于较大的脚本或将在许多页面上使用的脚本,这不是一个非常有效的解决方案,因为包括在内可能会变得笨拙或难以阅读并了解。在下一节中,我们将介绍如何在HTML文档中处理单独的JavaScript文件。

使用单独的JavaScript文件

为了适应较大的脚本或将在多个页面上使用的脚本,JavaScript代码通常位于HTML文档中引用的一个或多个js文件中,类似于引用外部资源(如CSS)的方式。

使用单独的JavaScript文件的好处包括:

  • 分离HTML标记和JavaScript代码以使两者更加直接
  • 单独的文件使维护更加容易
  • 缓存JavaScript文件时,页面加载速度更快

为了演示如何将JavaScript文档连接到HTML文档,让我们创建一个小型Web项目。它由js/目录中的script.jscss/目录中的style.css以及项目根目录中的main index.html

project/
├── css/
|   └── style.css
├── js/
|   └── script.js
└── index.html

我们可以从上面的部分开始使用之前的HTML模板:

index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
<body>
</body>
</html>

现在,让我们将将日期显示为<h1>标头的JavaScript代码移至script.js文件:

script.js
let d = new Date();
document.body.innerHTML = "<h1>Today's date is " + d + "</h1>"

我们可以使用以下代码行在<body>部分或以下添加对该脚本的引用:

<script src="js/script.js"></script>

<script>标记指向Web项目的js/目录中的script.js文件。

让我们在<body>部分下面的HTML文件上下文中查看这一行:

index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
</head>
<body>
</body>
<script src="js/script.js"></script>
</html>

最后,我们还通过在<h1>标头中添加背景颜色和样式来编辑style.css文件:

style.css
body {
    background-color: #0080ff;
}
h1 {
    color: #fff;
    font-family: Arial, Helvetica, sans-serif;
}

我们可以在HTML文档的<head>部分中引用该CSS文件:

index.html
<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Today's Date</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
</body>
<script src="js/script.js"></script>
</html>

现在,有了JavaScript和CSS,我们可以将index.html页面加载到我们选择的Web浏览器中。我们应该看到一个类似于以下内容的页面:

JavaScript日期与CSS示例

现在,我们已经将JavaScript放在了文件中,我们可以从其他网页中以相同的方式调用它,并在一个位置更新它们

结论

本教程介绍了如何将JavaScript内嵌到HTML文档中以及作为单独的.js文件并入Web文件中。

从这里,您可以学习如何使用JavaScript开发者控制台以及如何在JavaScript中编写注释

发表评论

电子邮件地址不会被公开。 必填项已用*标注