【Java 进阶篇】JavaScript 与 HTML 的结合方式

我不是女神ヾ 2024-02-23 08:17 59阅读 0赞

![在这里插入图片描述][ee6246a97e76456ea2a96231b3fde401.png]

JavaScript是一种广泛应用于Web开发中的脚本语言，它与HTML（Hypertext Markup Language）结合使用，使开发人员能够创建交互式和动态的网页。在这篇博客中，我们将深入探讨JavaScript与HTML的结合方式，包括如何将JavaScript嵌入HTML、HTML事件处理、DOM操作以及常见的示例和最佳实践。

### 1. JavaScript 的嵌入方式 ###

要在HTML中嵌入JavaScript代码，有几种方式可以选择：

#### 1.1 内联方式 ####

内联方式是将JavaScript代码直接嵌入到HTML文件中的方法。通常，你会将JavaScript代码放置在`<script>`标签中，并将其放在HTML文档的`<head>`或`<body>`部分。

<!DOCTYPE html>
    <html>
    <head>
      <title>JavaScript 内联方式</title>
      <script>
        function greet() {
          
          alert('Hello, World!');
        }
      </script>
    </head>
    <body>
      <button onclick="greet()">点击我</button>
    </body>
    </html>

在上面的示例中，我们在`<script>`标签内定义了一个JavaScript函数`greet()`，并在`<button>`元素的`onclick`属性中调用该函数。

#### 1.2 外部文件方式 ####

为了更好地组织代码并提高可维护性，你可以将JavaScript代码保存在外部文件中，并在HTML中引入这些文件。这样可以将JavaScript代码与HTML分离，使代码更清晰。

**index.html:**

<!DOCTYPE html>
    <html>
    <head>
      <title>JavaScript 外部文件方式</title>
      <script src="script.js"></script>
    </head>
    <body>
      <button onclick="greet()">点击我</button>
    </body>
    </html>

**script.js:**

function greet() {
        
      alert('Hello, World!');
    }

在这个例子中，我们将JavaScript代码放入了一个名为`script.js`的外部文件，并通过`<script>`标签的`src`属性引入该文件。

#### 1.3 异步和延迟加载 ####

可以通过添加`async`或`defer`属性来改变脚本的加载方式：

*  `async`：脚本将异步加载，不会阻止HTML解析。脚本将在下载完成后立即执行，不保证执行顺序。
 *  `defer`：脚本将异步加载，但会在HTML解析完毕后按顺序执行。

<!DOCTYPE html>
    <html>
    <head>
      <title>JavaScript 异步和延迟加载</title>
      <script src="script1.js" async></script>
      <script src="script2.js" defer></script>
    </head>
    <body>
      
    </body>
    </html>

在上面的示例中，`script1.js`将立即异步加载，而`script2.js`将在HTML解析完毕后按顺序执行。

### 2. HTML 事件处理 ###

JavaScript与HTML结合的一个关键方面是事件处理。事件处理使你能够对用户在网页上的交互作出响应。以下是一些常见的HTML事件：

*  `onclick`：单击（或触摸）元素时触发。
 *  `onmouseover`：鼠标悬停在元素上时触发。
 *  `onchange`：元素的值更改时触发。
 *  `onsubmit`：表单提交时触发。
 *  `onload`：文档加载完成时触发。

你可以使用内联方式或外部文件方式添加事件处理程序。以下是一个使用内联方式的示例：

<!DOCTYPE html>
    <html>
    <head>
      <title>HTML 事件处理</title>
    </head>
    <body>
      <button onclick="sayHello()">单击我</button>
      <script>
        function sayHello() {
          
          alert('Hello, World!');
        }
      </script>
    </body>
    </html>

在这个例子中，当用户单击按钮时，`sayHello()`函数将触发`onclick`事件。

你也可以使用外部文件方式添加事件处理程序，这样代码更容易维护：

**index.html:**

<!DOCTYPE html>
    <html>
    <head>
      <title>HTML 事件处理</title>
      <script src="script.js"></script>
    </head>
    <body>
      <button id="myButton">单击我</button>
    </body>
    </html>

**script.js:**

document.getElementById('myButton').addEventListener('click', function() {
        
      alert('Hello, World!');
    });

在上面的示例中，我们使用`addEventListener`方法来绑定单击事件处理程序。

### 3. DOM 操作 ###

文档对象模型（DOM）是HTML和XML文档的编程接口，它允许JavaScript通过操作文档的元素和属性来动态改变页面内容。以下是一些常见的DOM操作：

#### 3.1 获取元素 ####

你可以使用JavaScript来获取文档中的元素，以便进一步操作。

// 通过ID获取元素
    var elementById = document.getElementById('myElementId');
    
    // 通过标签名获取元素（返回元素数组）
    var elementsByTagName = document.getElementsByTagName('p');
    
    // 通过类名获取元素（返回元素数组）
    var elementsByClassName = document.getElementsByClassName('myClass');

#### 3.2 修改元素内容 ####

你可以使用DOM来修改元素的内容。

// 获取元素
    var myElement = document.getElementById('myElementId');
    
    // 修改元素的文本内容
    myElement.textContent = '新的文本内容';
    
    // 修改元素的HTML内容
    myElement.innerHTML = '<strong>加粗文本</strong>';

#### 3.3 创建和插入元素 ####

你可以使用DOM创建新的元素并将其插入到文档中。

// 创建新的元素
    var newElement = document.createElement('div');
    
    // 设置元素的属性
    newElement.id = 'newDiv';
    newElement.className = 'myClass';
    
    // 插入元素到文档
    document.body.appendChild(newElement);

#### 3.4 删除元素 ####

你可以使用DOM删除元素。

// 获取要删除的元素
    var elementToRemove = document.getElementById('elementToRemove');
    
    // 删除元素
    elementToRemove.parentNode.removeChild(elementToRemove);

### 4. JavaScript 与 HTML 示例 ###

以下是一个简单的示例，演示了JavaScript与HTML的结合方式、事件处理和DOM操作：

<!DOCTYPE html>
    <html>
    <head>
      <title>JavaScript 与 HTML 示例</title>
      <script>
        function sayHello() {
          
          var myElement = document.getElementById('myElementId');
          myElement.textContent = 'Hello, World!';
        }
      </script>
    </head>
    <body>
      <button onclick="sayHello()">单击我</button>
      <p id="myElementId">这是一个段落。</p>
    </body>
    </html>

在这个示例中，当用户单击按钮时，`sayHello()`函数将触发`onclick`事件，从而修改了段落的文本内容。

### 5. 最佳实践 ###

以下是一些最佳实践，以确保JavaScript与HTML结合的顺利工作：

*  将JavaScript代码放在文档的底部，以加快页面加载速度。
 *  使用外部文件方式组织和存储JavaScript代码。
 *  合理使用事件处理程序，不滥用内联事件处理。
 *  使用现代的DOM操作方法，避免过时的方法。
 *  测试你的代码以确保它在不同的浏览器中运行良好。

### 6. 结语 ###

JavaScript与HTML的结合使我们能够创建丰富的Web应用程序和网页。它允许我们添加交互性、动态性以及对用户行为的响应。通过了解JavaScript的嵌入方式、HTML事件处理和DOM操作，你可以更好地掌握这一强大的组合，为用户提供更好的在线体验。希望这篇博客对你有所帮助，祝你编写出出色的Web应用程序！

<table> 
 <tbody> 
  <tr> 
   <td> <strong><font>作者信息</font></strong><br> <br> <font> 作者 ： 繁依Fanyi</font><br> <font>CSDN：</font> <a href="https://blog.csdn.net/qq_21484461?spm=1000.2115.3001.5343" rel="nofollow"><font>https://techfanyi.blog.csdn.net</font></a><br> <font>掘金：</font><a href="https://juejin.cn/user/4154386571867191" rel="nofollow"><font>https://juejin.cn/user/4154386571867191</font></a> </td> 
  </tr> 
 </tbody> 
</table>

[ee6246a97e76456ea2a96231b3fde401.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/23/c002c9482b834611b849dec8f79dcc91.png