📌  相关文章
📜  输入 javascript - Html (1)

📅  最后修改于: 2023-12-03 15:12:17.955000             🧑  作者: Mango

JavaScript 和 HTML

JavaScript 是一种编程语言，可用于创建动态交互性的网页和应用程序。 HTML 是一种标记语言，用于创建网页内容和结构。JavaScript 和 HTML 一起使用，可以让您创建丰富的交互性 Web 应用程序。

如何添加 JavaScript 到 HTML 页面

您可以通过将 JavaScript 代码嵌入到 HTML 中的 <script> 标签中来将 JavaScript 添加到 HTML 页面中。

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>My Webpage</h1>
    <p>Welcome to my webpage! This is a paragraph of text.</p>
    <script>
      // Your JavaScript code goes here
    </script>
  </body>
</html>

在 <script> 标签中，您可以添加任何 JavaScript 代码，例如处理 HTML 元素、访问 API 和创建动画等。

外部 JavaScript 文件

为了使代码更易于维护和重用，我们可以将 JavaScript 代码放在单独的外部文件中，并使用 <script> 标记的 src 属性将外部文件链接到 HTML 页面中。

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <script src="myScript.js"></script>
  </head>
  <body>
    <h1>My Webpage</h1>
    <p>Welcome to my webpage! This is a paragraph of text.</p>
  </body>
</html>

在 myScript.js 文件中，您可以添加与内联脚本相同的 JavaScript 代码。例如：

document.querySelector("h1").addEventListener("click", function() {
  alert("Hello, world!");
});
在 HTML 中使用 JavaScript 库和框架

除了编写自己的 JavaScript 代码之外，您还可以使用其他人编写的 JavaScript 库和框架。这些库和框架提供了许多可重用的功能和组件，以加快开发速度并提高代码质量。

使用外部库的方法与使用外部 JavaScript 文件类似。只需将库文件链接到 HTML 中并开始使用其中的函数和组件即可。

例如，要使用 jQuery 库：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <h1>My Webpage</h1>
    <p>Welcome to my webpage! This is a paragraph of text.</p>
    <script>
      $("p").css("color", "red");
    </script>
  </body>
</html>

在这个例子中，我们链接到 jQuery 库，并使用 $ 函数访问其中的 css() 函数，这个函数将 <p> 元素的颜色更改为红色。

HTML 和 JavaScript 交互

最后，HTML 和 JavaScript 之间的交互是非常重要的。您可以使用 JavaScript 访问 HTML 元素、更改 HTML 属性和样式、动态创建和删除 HTML 元素以及处理 HTML 事件。

例如，以下示例演示如何使用 JavaScript 为单元格创建表格：

<!DOCTYPE html>
<html>
  <head>
    <title>My Webpage</title>
  </head>
  <body>
    <h1>My Webpage</h1>
    <table>
      <tr>
        <td id="cell1"></td>
        <td id="cell2"></td>
      </tr>
    </table>
    <script>
      var cell1 = document.getElementById("cell1");
      var cell2 = document.getElementById("cell2");
      cell1.textContent = "Hello, world!";
      cell2.textContent = "How are you?";
    </script>
  </body>
</html>

在这个例子中，我们使用 JavaScript 访问 cell1 和 cell2 元素，并使用 textContent 属性将它们的内容更改为文本。这显示在上面的 HTML 表格中。这是一个简单的交互示例，但您可以使用相同的技术实现更复杂的交互功能和动态网站。