JavaScript实用案例教程有哪些？-建站教程-锦华智联科技

准备工作：创建你的第一个HTML文件

在开始之前，请创建一个名为 index.html 的文件，并将以下基本代码粘贴进去，我们所有的JavaScript代码都将通过 <script> 标签插入到这个文件中。

（图片来源网络，侵删）

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">JavaScript 实用案例教程</title>
    <style>
        /* 一些基础样式，让页面看起来更舒服 */
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            line-height: 1.6;
            background-color: #f4f7f6;
            color: #333;
            margin: 0;
            padding: 20px;
        }
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: #fff;
            padding: 20px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        h1, h2 {
            color: #0056b3;
        }
        button {
            padding: 10px 15px;
            font-size: 16px;
            cursor: pointer;
            border: none;
            border-radius: 5px;
            background-color: #007bff;
            color: white;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #0056b3;
        }
        input[type="text"] {
            padding: 10px;
            font-size: 16px;
            border: 1px solid #ccc;
            border-radius: 5px;
            width: calc(100% - 120px);
        }
        .output {
            margin-top: 20px;
            padding: 15px;
            background-color: #e9ecef;
            border-left: 5px solid #007bff;
            border-radius: 3px;
            min-height: 20px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>JavaScript 实用案例教程</h1>
        <p>打开浏览器的开发者工具 (F12)，在 "Console" 标签页中查看输出信息。</p>
        <!-- 我们将在这里添加各个案例的HTML结构 -->
        <script>
            // 我们将在这里编写JavaScript代码
        </script>
    </div>
</body>
</html>

动态文本生成器

目标：创建一个输入框和一个按钮，当用户在输入框中输入文字并点击按钮后,这些文字会动态地显示在页面的指定区域。

核心知识点：

document.getElementById(): 获取页面中的元素。
addEventListener(): 为元素添加事件监听器（如点击）。
value: 获取或设置输入框的值。
textContent: 修改一个HTML元素的文本内容。

代码：将以下代码放入 <script> 标签内。

// 1. 获取页面上的元素
const textInput = document.getElementById('textInput');
const generateBtn = document.getElementById('generateBtn');
const outputDiv = document.getElementById('output');
// 2. 为按钮添加点击事件监听器
generateBtn.addEventListener('click', function() {
    // 3. 获取输入框中的值
    const userText = textInput.value;
    // 4. 检查用户是否输入了内容
    if (userText.trim() === '') {
        outputDiv.textContent = '请输入一些文字！';
        return; // 如果为空，则停止执行后续代码
    }
    // 5. 将获取到的文本设置到输出区域
    outputDiv.textContent = `你输入的文字是: "${userText}"`;
    // 6. (可选) 清空输入框，方便下一次输入
    textInput.value = '';
});
// (可选) 添加回车键触发的功能
textInput.addEventListener('keypress', function(event) {
    // 检查按下的键是否是 "Enter"
    if (event.key === 'Enter') {
        // 模拟按钮点击
        generateBtn.click();
    }
});

HTML 结构：在 <body> 的 <div class="container"> 内部添加以下代码。

（图片来源网络，侵删）

<h2>案例一：动态文本生成器</h2>
<input type="text" id="textInput" placeholder="在这里输入文字...">
<button id="generateBtn">生成文本</button>
<div id="output" class="output">结果将显示在这里...</div>
<hr>

代码解析：

我们首先通过 document.getElementById() 找到三个我们需要的HTML元素：输入框、按钮和输出区域。
addEventListener('click', ...) 的意思是：“嘿，浏览器，请帮我监听这个按钮的点击事件，一旦有人点击它，就执行我后面提供的这个函数。”
textInput.value 就是用户在输入框里输入的实际字符串。
outputDiv.textContent 是我们将要显示文本的地方，我们把 userText 赋值给它,页面就会立即更新。
我们还增加了一个小功能：在输入框里按回车键也能触发和点击按钮一样的效果,这提升了用户体验。

简单的待办事项列表

目标：用户可以输入任务，点击添加后，任务会出现在列表中，每个任务旁边都有一个删除按钮,点击后可以删除该任务。

核心知识点：

createElement(): 创建一个新的HTML元素。
appendChild(): 将一个元素添加到另一个元素内部。
removeChild(): 从父元素中移除一个子元素。
事件委托：利用事件冒泡机制,为动态生成的元素添加事件。

代码：在 <script> 标签内继续添加以下代码。

（图片来源网络，侵删）

// --- 待办事项列表 ---
// 获取元素
const todoInput = document.getElementById('todoInput');
const addTodoBtn = document.getElementById('addTodoBtn');
const todoList = document.getElementById('todoList');
// 添加待办事项
addTodoBtn.addEventListener('click', addTodo);
todoInput.addEventListener('keypress', function(event) {
    if (event.key === 'Enter') {
        addTodo();
    }
});
function addTodo() {
    const todoText = todoInput.value.trim();
    if (todoText === '') {
        alert('请输入待办事项！');
        return;
    }
    // 1. 创建 li 元素
    const li = document.createElement('li');
    li.className = 'todo-item';
    li.textContent = todoText;
    // 2. 创建删除按钮
    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.className = 'delete-btn';
    // 3. 将删除按钮添加到 li 中
    li.appendChild(deleteBtn);
    // 4. 将 li 添加到 ul 列表中
    todoList.appendChild(li);
    // 5. 清空输入框
    todoInput.value = '';
}
// 使用事件委托来处理删除操作
// 我们给父元素 'todoList' 添加点击事件
todoList.addEventListener('click', function(event) {
    // 检查点击的目标是否是 'delete-btn'
    if (event.target.classList.contains('delete-btn')) {
        // event.target 是被点击的按钮
        // event.target.parentNode 是按钮的父元素，也就是 li
        const li = event.target.parentNode;
        // 从 todoList 中移除 li
        todoList.removeChild(li);
    }
});

HTML 结构：在 <hr> 后面添加。

<h2>案例二：简单的待办事项列表</h2>
<input type="text" id="todoInput" placeholder="添加一个新的待办事项...">
<button id="addTodoBtn">添加</button>
<ul id="todoList"></ul>
<hr>

CSS 样式：在 <style> 标签内添加。

#todoList {
    list-style-type: none;
    padding: 0;
}
.todo-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #ddd;
    background-color: #fff;
}
.delete-btn {
    padding: 5px 10px;
    background-color: #dc3545;
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
}
.delete-btn:hover {
    background-color: #c82333;
}

代码解析：

createElement('li') 创建了一个新的 <li> 标签,但它还不在页面上。
appendChild() 是真正将它“挂”到页面上面的方法，我们先把按钮挂到 li 上，再把 li 挂到 ul 上。
事件委托 是这里的关键，我们没有为每一个“删除”按钮单独添加点击事件，因为任务列表是动态增加的，这样会很麻烦，我们改为给它的父容器 todoList 添加一个点击事件，当点击发生时，我们检查 event.target（也就是你真正点击的那个东西）是不是一个 delete-btn，如果是，我们就执行删除操作,这种方法非常高效且易于维护。

实时字符计数器

目标：创建一个文本域（<textarea>）,实时显示用户已经输入了多少个字符。

核心知识点：

input 事件：当输入框的值发生变化时触发（比 keyup 更全面）。
length 属性：获取字符串的长度。

代码：在 <script> 标签内继续添加。

// --- 实时字符计数器 ---
const textarea = document.getElementById('myTextarea');
const charCount = document.getElementById('charCount');
// 监听输入事件
textarea.addEventListener('input', function() {
    // 获取文本域中的文本长度
    const count = this.value.length;
    // 更新计数器的显示
    charCount.textContent = `已输入 ${count} 个字符`;
});

HTML 结构：在 <hr> 后面添加。

<h2>案例三：实时字符计数器</h2>
<p>在下面的框中输入文字，看看计数器如何变化：</p>
<textarea id="myTextarea" rows="5" cols="50"></textarea>
<p id="charCount">已输入 0 个字符</p>
<hr>

代码解析：

addEventListener('input', ...) 监听的是整个输入行为，包括键盘输入、粘贴、剪切等，比 keyup 或 keydown 更可靠。
this 在事件监听器的回调函数中，指向触发该事件的元素，this.value textarea 的值。
this.value.length 非常直观地给出了字符串的字符数。

动态主题切换器

目标：一个按钮，可以切换页面的亮色/暗色主题。

核心知识点：

document.body.classList: 获取或操作 <body> 元素的类名。
classList.toggle(): 如果类名存在则移除，不存在则添加,这是切换样式的完美工具。
CSS 变量：用于动态修改颜色主题。

代码：我们需要在 <head> 的 <style> 标签里加入 CSS 变量。

/* 在 <style> 标签内添加 */
:root {
    --bg-color: #f4f7f6;
    --text-color: #333;
    --card-bg: #fff;
    --border-color: #ddd;
}
body.dark-theme {
    --bg-color: #222;
    --text-color: #f4f7f6;
    --card-bg: #333;
    --border-color: #555;
}
/* 让 body 的背景色和文字颜色使用这些变量 */
body {
    background-color: var(--bg-color);
    color: var(--text-color);
    transition: background-color 0.3s, color 0.3s;
}
.container {
    background-color: var(--card-bg);
    border-left: 5px solid var(--border-color);
}

在 <script> 标签内添加JavaScript代码。

// --- 动态主题切换器 ---
const themeToggleBtn = document.getElementById('themeToggle');
themeToggleBtn.addEventListener('click', function() {
    // 切换 body 上的 'dark-theme' 类
    document.body.classList.toggle('dark-theme');
    // 根据当前主题改变按钮文本
    if (document.body.classList.contains('dark-theme')) {
        themeToggleBtn.textContent = '切换到亮色主题';
    } else {
        themeToggleBtn.textContent = '切换到暗色主题';
    }
});

HTML 结构：在 <hr> 后面添加。

<h2>案例四：动态主题切换器</h2>
<button id="themeToggle">切换到暗色主题</button>
<hr>

代码解析：

我们定义了两组CSS变量：一组是默认的亮色主题,另一组是暗色主题的值。
document.body.classList.toggle('dark-theme') 是核心。<body> 没有 dark-theme 这个类，就加上；如果有了,就移除。
当 dark-theme 类被添加到 <body> 上时，CSS 选择器 body.dark-theme 生效，覆盖了 root 中定义的变量,整个页面的颜色就随之改变了。
我们还根据主题的变化动态更新了按钮上的文字,让用户更清楚当前的状态。

总结与下一步

恭喜你！你已经通过这四个案例掌握了JavaScript中最核心、最实用的技能：

DOM操作：查找、创建、修改和删除页面元素。
事件处理：响应用户的交互，如点击、输入、按键等。
动态样式：通过JavaScript修改CSS,实现动态效果。

下一步你可以学习什么？

Fetch API：从服务器获取数据,实现一个天气查询应用或新闻阅读器。
本地存储：使用 localStorage 或 sessionStorage 保存用户的待办事项或主题偏好,这样刷新页面后数据还在。
表单验证：在用户提交表单前，检查输入是否合法（如邮箱格式、密码强度等）。
简单动画：使用 setInterval 或 CSS transitions 结合 JavaScript,创建平滑的动画效果。

希望这份教程能帮助你开启JavaScript的实用之旅！动手实践是学习编程最好的方式。