JavaScript 是一门广泛应用于Web开发的脚本语言,它可以用于处理网页交互、动态更新页面内容、与服务器通信等。以下是一些简单的 JavaScript 实例,涵盖了常见的用法:

1. Hello World:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hello World Example</title>
</head>
<body>

    <script>
        // 在浏览器控制台输出 Hello World
        console.log("Hello World");
    </script>

</body>
</html>

2. 简单的计算器:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Simple Calculator</title>
</head>
<body>

    <script>
        // 简单的计算器函数
        function add(a, b) {
            return a + b;
        }

        function subtract(a, b) {
            return a - b;
        }

        // 使用计算器函数
        var result1 = add(5, 3);
        var result2 = subtract(10, 4);

        // 在浏览器控制台输出结果
        console.log("Addition result:", result1);
        console.log("Subtraction result:", result2);
    </script>

</body>
</html>

3. 操作DOM元素:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM Manipulation</title>
</head>
<body>

    <h1 id="heading">Hello, World!</h1>

    <script>
        // 获取元素并修改其内容
        var headingElement = document.getElementById("heading");
        headingElement.innerHTML = "Hello, JavaScript!";
    </script>

</body>
</html>

4. 事件处理:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event Handling</title>
</head>
<body>

    <button id="myButton">Click me!</button>

    <script>
        // 添加点击事件处理程序
        document.getElementById("myButton").addEventListener("click", function() {
            alert("Button clicked!");
        });
    </script>

</body>
</html>

这些示例展示了一些基本的 JavaScript 用法,包括在控制台输出信息、进行简单的计算、操作DOM元素以及处理事件。在实际的Web开发中,JavaScript通常与HTML和CSS一起使用,以创建交互性更强的用户界面。


转载请注明出处:http://www.pingtaimeng.com/article/detail/12846/JavaScript