JavaScript 基础概述

JavaScript 是一种轻量级的脚本语言，被广泛用于为网页添加动态功能。作为前端开发的核心技术之一，JavaScript 使网页更具交互性和响应性。

JavaScript 的主要功能

  1. 动态内容：通过修改 DOM（文档对象模型）来更新网页内容。

  2. 事件处理：响应用户操作（如点击、输入、悬停）。

  3. 数据处理：支持逻辑运算、数据验证和 API 数据交互。

  4. 跨平台：JavaScript 可在浏览器、服务器（如 Node.js）等多种环境运行。

JavaScript 的引入方式

  1. 内联脚本：通过 onclick 等 HTML 属性直接嵌入。

  2. 内部脚本：在 HTML 文档的 <script> 标签中编写脚本。

  3. 外部脚本：通过外部 .js 文件加载代码。

示例：三种引入方式

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 引入方式</title>
    <script>
        // 内部脚本
        function showInternalMessage() {
            console.log("内部脚本运行");
        }
    </script>
</head>
<body>
    <button onclick="alert('内联脚本触发')">点击我</button> <!-- 内联脚本 -->
    <button onclick="showInternalMessage()">运行内部脚本</button>
    <script src="script.js"></script> <!-- 外部脚本 -->
</body>
</html>

JavaScript 的基本语法

JavaScript 使用动态类型，可以定义变量、函数、对象等。

示例：

// 定义变量
let name = "前端学习";
const version = 1.0;

// 定义函数
function greet() {
    console.log("欢迎学习 JavaScript!");
}

// 条件语句
if (version >= 1.0) {
    greet();
}

JavaScript 与 DOM

通过 JavaScript 操作 DOM，可以动态更新页面内容。

示例：动态更新内容

<!DOCTYPE html>
<html>
<head>
    <title>JavaScript 与 DOM 示例</title>
    <script>
        function changeText() {
            document.getElementById("message").innerText = "你点击了按钮!";
        }
    </script>
</head>
<body>
    <h1 id="message">点击按钮更新内容</h1>
    <button onclick="changeText()">点击我</button>
</body>
</html>

JavaScript 的事件处理

JavaScript 可以捕获用户的各种操作并响应。

示例：鼠标悬停事件

<!DOCTYPE html>
<html>
<head>
    <title>事件处理示例</title>
    <script>
        function highlight(element) {
            element.style.backgroundColor = "yellow";
        }

        function reset(element) {
            element.style.backgroundColor = "";
        }
    </script>
</head>
<body>
    <p onmouseover="highlight(this)" onmouseout="reset(this)">将鼠标悬停在这里。</p>
</body>
</html>

综合实例：计数器功能

通过 JavaScript 实现简单的计数功能。

示例：

<!DOCTYPE html>
<html>
<head>
    <title>计数器示例</title>
    <script>
        let count = 0;
        function increment() {
            count++;
            document.getElementById("counter").innerText = count;
        }

        function resetCounter() {
            count = 0;
            document.getElementById("counter").innerText = count;
        }
    </script>
</head>
<body>
    <h1>计数器</h1>
    <p id="counter">0</p>
    <button onclick="increment()">增加</button>
    <button onclick="resetCounter()">重置</button>
</body>
</html>

通过学习 JavaScript 的基本语法和实例操作，你可以为网页添加丰富的交互功能，提高用户体验。