📜  ajouter javascript dans html - Javascript (1)

📅  最后修改于: 2023-12-03 14:39:04.241000             🧑  作者: Mango

在HTML中添加JavaScript

JavaScript是一种用于网页交互的编程语言。通过在HTML文件中添加JavaScript代码,您可以为网页添加各种交互功能和动态效果。以下是如何在HTML中添加JavaScript的示例:

内联方式

您可以使用<script>标签在HTML文件中直接嵌入JavaScript代码。以下是一个简单的示例:

<!DOCTYPE html>
<html>
<head>
  <title>添加JavaScript示例</title>
</head>
<body>

  <h1>使用JavaScript改变文本内容</h1>

  <p id="demo">这是一个段落。</p>

  <script>
    // 修改文本内容
    document.getElementById("demo").innerHTML = "这是修改后的文本。";
  </script>

</body>
</html>

在这个示例中,通过将JavaScript代码嵌入到<script>标签中,我们可以使用document.getElementById()函数选取具有指定id的元素,并使用innerHTML属性修改其内容。

外部文件

另一种添加JavaScript的方式是将代码存储在外部文件中,并通过src属性链接到HTML文件中。以下是示例:

<!DOCTYPE html>
<html>
<head>
  <title>添加JavaScript示例</title>
  <script src="script.js"></script>
</head>
<body>

  <h1>使用外部JavaScript文件改变文本内容</h1>

  <p id="demo">这是一个段落。</p>

</body>
</html>

在这个示例中,我们将JavaScript代码保存在名为script.js的外部文件中,并使用<script>标签中的src属性链接到HTML文件中。代码将在页面加载时执行。

尾部加载

通常,开发人员更倾向于将JavaScript代码放置在HTML文件的末尾,以允许页面的其他内容先加载。以下是示例:

<!DOCTYPE html>
<html>
<head>
  <title>添加JavaScript示例</title>
</head>
<body>

  <h1>在尾部加载JavaScript脚本</h1>

  <p id="demo">这是一个段落。</p>

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

</body>
</html>

与外部文件方式类似,代码将在页面加载时执行,但在其他页面内容加载完成后。

以上是向HTML中添加JavaScript的三种常用方法。您可以根据需求选择其中之一,并开始为您的网页添加交互功能和动态效果。