介绍
JavaScript,也缩写为 JS,是一种用于 Web 开发的编程语言。 作为与 HTML 和 CSS 并列的 Web 核心技术之一,JavaScript 用于使网页具有交互性并构建 Web 应用程序。 遵循通用显示标准的现代 Web 浏览器通过内置引擎支持 JavaScript,无需额外的插件。
处理 Web 文件时,需要加载 JavaScript 并与 HTML 标记一起运行。 这可以在 HTML 文档中内联或在浏览器将与 HTML 文档一起下载的单独文件中完成。
本教程将介绍如何将 JavaScript 合并到您的 Web 文件中,既可以内嵌到 HTML 文档中,也可以作为单独的文件。
将 JavaScript 添加到 HTML 文档中
您可以通过使用包裹 JavaScript 代码的专用 HTML 标签 <script>
在 HTML 文档中添加 JavaScript 代码。
<script>
标记可以放置在 HTML 的 <head>
部分或 <body>
部分中,具体取决于您希望何时加载 JavaScript。
通常,JavaScript 代码可以进入文档 <head>
部分,以保持它们包含在 HTML 文档的主要内容之外。
然而,如果你的脚本需要在页面布局中的某个点运行——比如使用 document.write
生成内容时——你应该把它放在应该调用它的点,通常在 [ X210X] 部分。
让我们考虑以下浏览器标题为 Today's Date
的空白 HTML 文档:
索引.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);
这将使网页能够显示带有当前日期的警报,而不管用户何时加载站点。
为了实现这一点,我们将在 HTML 文件中添加一个 <script>
标记以及一些 JavaScript 代码。
首先,我们将在 <head>
标记之间添加 JavaScript 代码,指示浏览器在加载页面的其余部分之前运行 JavaScript 脚本。 我们可以在 <title>
标签下面添加 JavaScript,例如,如下所示:
索引.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>
加载页面后,您将收到类似于以下内容的警报:
如果我们要修改 HTML 正文中显示的内容,我们需要在 <head>
部分之后实现它,以便它显示在页面上,如下例所示:
索引.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>
通过 Web 浏览器加载的上述 HTML 文档的输出类似于以下内容:
较小的脚本或仅在一个页面上运行的脚本可以在 HTML 文件中正常工作,但对于较大的脚本或将在许多页面上使用的脚本,这不是一个非常有效的解决方案,因为包含它可能会变得笨拙或难以阅读并理解。 在下一节中,我们将讨论如何处理 HTML 文档中的单独 JavaScript 文件。
使用单独的 JavaScript 文件
为了适应更大的脚本或将在多个页面中使用的脚本,JavaScript 代码通常存在于一个或多个 js
文件中,这些文件在 HTML 文档中被引用,类似于引用 CSS 等外部资产的方式。
使用单独的 JavaScript 文件的好处包括:
- 分离 HTML 标记和 JavaScript 代码,使两者更直接
- 单独的文件使维护更容易
- 缓存 JavaScript 文件后,页面加载速度更快
为了演示如何将 JavaScript 文档连接到 HTML 文档,让我们创建一个小型 Web 项目。 它将由 js/
目录中的 script.js
、css/
目录中的 style.css
和根目录中的主 index.html
组成。项目。
project/ ├── css/ | └── style.css ├── js/ | └── script.js └── index.html
我们可以从上一节中的之前的 HTML 模板开始:
索引.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
文件中:
脚本.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
文件。
让我们在 HTML 文件的上下文中考虑这一行,在这种情况下,在 <body>
部分中:
索引.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 src="js/script.js"></script> </body> </html>
最后,让我们通过在 <h1>
标题中添加背景颜色和样式来编辑 style.css
文件:
样式.css
body { background-color: #0080ff; } h1 { color: #fff; font-family: Arial, Helvetica, sans-serif; }
我们可以在 HTML 文档的 <head>
部分中引用该 CSS 文件:
索引.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> <script src="js/script.js"></script> </body> </html>
现在,有了 JavaScript 和 CSS,我们可以将 index.html
页面加载到我们选择的 Web 浏览器中。 我们应该看到一个类似于以下内容的页面:
现在我们已经将 JavaScript 放在了一个文件中,我们可以从其他网页以相同的方式调用它,并在一个位置更新它们
结论
本教程介绍了如何将 JavaScript 合并到您的 Web 文件中,既可以内嵌到 HTML 文档中,也可以作为单独的 .js
文件。
从这里,您可以了解如何使用 JavaScript 开发者控制台 和 如何在 JavaScript 中编写注释。