如何在HTML的body标签中正确调用JavaScript代码？

在body中调用JavaScript

在网页开发过程中，经常需要在HTML文档的<body>标签内调用JavaScript代码，这样做可以增强页面的交互性和动态效果，本文将详细介绍如何在<body>中调用JavaScript，并提供一些实用的示例和技巧。

1. JavaScript简介

JavaScript是一种轻量级、解释型的编程语言，主要用于网页开发，通过JavaScript可以实现客户端脚本编写，从而创建动态和互动性强的网页。

2. 在<body>中调用JavaScript的基本方法

2.1 直接在<script>标签中写JavaScript代码

这是最常见也是最简单的一种方式，你可以在HTML文档中的任意位置插入<script>标签来包含JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <button id="myButton">Click me</button>
    <script>
        document.getElementById("myButton").addEventListener("click", function() {
            alert("Button clicked!");
        });
    </script>
</body>
</html>

在这个例子中，当用户点击按钮时，会弹出一个警告框显示“Button clicked!”。

2 使用外部JavaScript文件

为了提高代码的可维护性，通常将JavaScript代码放在单独的文件中，然后在HTML文档中通过<script>标签引入。

<!-index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <button id="myButton">Click me</button>
    <!-引入外部JavaScript文件 -->
    <script src="script.js"></script>
</body>
</html>

// script.js
document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

这种方式使得HTML和JavaScript分离，更易于管理和调试。

2.3 在事件属性中调用JavaScript

你还可以直接在HTML标签的事件属性中调用JavaScript函数。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Hello World!</h1>
    <button id="myButton" onclick="showAlert()">Click me</button>
    <script>
        function showAlert() {
            alert("Button clicked!");
        }
    </script>
</body>
</html>

这种方法虽然简单，但不利于代码的可维护性和扩展性，因此不推荐在复杂项目中使用。

3. 动态修改DOM元素

JavaScript的强大之处在于它可以动态地修改DOM（文档对象模型），以下是一些常见的操作：

你可以使用innerText或textContent属性来修改元素的文本内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="header">Original Text</h1>
    <button id="changeTextButton">Change Text</button>
    <script>
        document.getElementById("changeTextButton").addEventListener("click", function() {
            document.getElementById("header").innerText = "Text has been changed!";
        });
    </script>
</body>
</html>

2 修改CSS样式

你可以通过修改元素的style属性来改变其CSS样式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1 id="header" style="color: black;">Original Text</h1>
    <button id="changeColorButton">Change Color</button>
    <script>
        document.getElementById("changeColorButton").addEventListener("click", function() {
            document.getElementById("header").style.color = "red";
        });
    </script>
</body>
</html>

3 添加或删除元素

你可以使用appendChild、insertBefore、removeChild等方法来添加或删除DOM元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="container">
        <p>Paragraph 1</p>
    </div>
    <button id="addParagraphButton">Add Paragraph</button>
    <button id="removeParagraphButton">Remove Paragraph</button>
    <script>
        document.getElementById("addParagraphButton").addEventListener("click", function() {
            const newParagraph = document.createElement("p");
            newParagraph.innerText = "New Paragraph";
            document.getElementById("container").appendChild(newParagraph);
        });
        document.getElementById("removeParagraphButton").addEventListener("click", function() {
            const container = document.getElementById("container");
            if (container.lastChild) {
                container.removeChild(container.lastChild);
            }
        });
    </script>
</body>
</html>

4. AJAX请求与数据交互

AJAX（Asynchronous JavaScript and XML）允许你在不重新加载整个页面的情况下与服务器进行数据交互，这在现代Web应用中非常常见，以下是一个简单的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>AJAX Example</h1>
    <button id="fetchDataButton">Fetch Data</button>
    <div id="dataContainer"></div>
    <script>
        document.getElementById("fetchDataButton").addEventListener("click", function() {
            const xhr = new XMLHttpRequest();
            xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    const response = JSON.parse(xhr.responseText);
                    document.getElementById("dataContainer").innerText =Title: ${response.title};
                }
            };
            xhr.send();
        });
    </script>
</body>
</html>

在这个例子中，当用户点击按钮时，会发送一个AJAX请求到指定的URL，并在页面上显示返回的数据。

5. 常见问题与解答栏目

问题1：如何在页面加载完成后立即执行JavaScript代码？

解答：你可以使用window.onload或DOMContentLoaded事件来确保在页面完全加载完成后再执行JavaScript代码。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Page Loaded!</h1>
    <script>
        window.onload = function() {
            alert("Page fully loaded!");
        };
    </script>
</body>
</html>

或者使用DOMContentLoaded：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Page Loaded!</h1>
    <script>
        document.addEventListener("DOMContentLoaded", function() {
            alert("DOM fully loaded and parsed!");
        });
    </script>
</body>
</html>

问题2：如何防止默认的表单提交行为？

解答：你可以在表单的submit事件处理程序中使用event.preventDefault()方法来防止默认的表单提交行为。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="myForm">
        <input type="text" name="username" required />
        <button type="submit">Submit</button>
    </form>
    <script>
        document.getElementById("myForm").addEventListener("submit", function(event) {
            event.preventDefault(); // 防止默认的表单提交行为
            alert("Form submitted!"); // 自定义行为，如显示提示信息或发送AJAX请求等。
        });
    </script>
</body>
</html>

到此，以上就是小编对于“body中调用js”的问题就介绍到这了，希望介绍的几点解答对大家有用，有任何问题和不懂的，欢迎各位朋友在评论区讨论，给我留言。

原创文章，作者：K-seo，如若转载，请注明出处：https://www.kdun.cn/ask/697503.html

如何在HTML的body标签中正确调用JavaScript代码？

2 使用外部JavaScript文件

2 修改CSS样式

3 添加或删除元素

问题2：如何防止默认的表单提交行为？

相关推荐

html怎么加入js

JavaScript常用的弹出广告及背投广告怎么实现

如何在HTML表单中使用formaction执行JavaScript函数？

html 保存json文件怎么打开

如何在JavaScript中拼接a标签URL与变量？

AtomJS语法检测插件，如何提升编码效率与代码质量？

发表回复