第六章：JavaScript——网页的“动起来”魔法-CSDN博客

本文链接：https://blog.csdn.net/Kkyyssyyds/article/details/147433497

HTML，CSS以及JavaScript都是网页组成的基本内容，前几章已经介绍HTML和CSS的内容，本章将介绍JavaScript的内容，了解好网页的代码基础组成可以轻松看懂代码组成，为学习爬虫打好基础

目标：学会用JavaScript让网页“活过来”，从“静态海报”变身“交互大片”！
学习目标：掌握变量、函数、DOM操作、事件处理，从此告别“点击不动”的尴尬！

6.1 JavaScript是什么？能吃吗？

（温馨提示：虽然名字里有“JS”，但建议搭配辣条食用更佳）

JavaScript的核心作用：

网页动起来：控制动画、表单验证、实时搜索（比如输入关键词自动提示）
数据交互：通过AJAX从服务器偷数据（哦不，是“请求数据”）
操作HTML/CSS：动态修改页面内容（比如点击按钮切换主题颜色）

举个栗子🌰：

html

<!-- HTML静态内容 -->
<button id="btn">点我！</button>
<p id="msg">还没点击</p>

<!-- JS动态效果 -->
<script>
    document.getElementById("btn").onclick = function() {
        document.getElementById("msg").innerHTML = "你点了我！"; // 文字变啦！
    };
</script>

6.2 JavaScript基础语法：从“小白”到“魔法师”

6.2.1 变量与数据类型

javascript

// 变量声明（就像给变量起名字）
let age = 25;           // 数字
let name = "咸鱼";       // 字符串
let isStudent = true;   // 布尔值
let hobbies = ["编程", "泡面"]; // 数组
let person = {          // 对象
    name: "咸鱼",
    age: 25
};

// 动态修改变量（比如“变魔术”）
age = 26; // 咸鱼突然年轻了一岁！

6.2.2 函数：代码的“复读机”

javascript

// 定义函数（比如“自动卖萌”）
function sayHello(name) {
    return `你好，${name}！我是JS小可爱~`;
}

// 调用函数
console.log(sayHello("咸鱼")); // 输出：你好，咸鱼！我是JS小可爱~

6.3 DOM操作：把HTML当“积木”玩

6.3.1 获取元素（像找对象一样找标签）

javascript

// 按ID找元素（一对一）
const btn = document.getElementById("myButton");

// 按类名找元素（一对多）
const items = document.getElementsByClassName("list-item");

// 按标签名找元素（比如所有段落）
const paragraphs = document.getElementsByTagName("p");

6.3.2 修改内容与样式（给HTML“整容”）

javascript

// 修改文本内容
document.getElementById("msg").textContent = "内容被JS改啦！";

// 修改样式（比如“一键换装”）
document.querySelector(".btn").style.backgroundColor = "pink";
document.querySelector(".btn").classList.add("active"); // 添加CSS类

6.4 事件处理：让用户“点哪动哪”

6.4.1 常见事件类型

事件类型	触发条件	代码示例（点击按钮弹窗）
`click`	鼠标点击	`button.onclick = function() {...}`
`mouseover`	鼠标悬停	`div.onmouseover = function() {...}`
`submit`	表单提交	`form.onsubmit = function(e) {...}`

代码示例：动态搜索框

html

<input type="text" id="searchInput" placeholder="输入关键词...">
<ul id="resultList"></ul>

<script>
    const input = document.getElementById("searchInput");
    const list = document.getElementById("resultList");

    input.onkeyup = function() {
        const keyword = input.value;
        // 模拟搜索结果（实际开发需调用API）
        list.innerHTML = `
            <li>搜索结果1：${keyword}</li>
            <li>搜索结果2：${keyword}</li>
        `;
    };
</script>

6.5 JS与HTML/CSS联动：三位一体

6.5.1 动态创建元素（像搭乐高一样造页面）

javascript

// 创建新元素
const newDiv = document.createElement("div");
newDiv.textContent = "我是新来的！";
newDiv.className = "new-box"; // 添加CSS类

// 插入到页面中
document.body.appendChild(newDiv);

6.5.2 修改CSS样式（动态换肤）

javascript

// 点击按钮切换主题颜色
function toggleTheme() {
    const body = document.body;
    body.style.backgroundColor = body.style.backgroundColor === "black" 
        ? "white" 
        : "black";
    body.style.color = body.style.color === "white" 
        ? "black" 
        : "white";
}

6.6 AJAX入门：偷偷获取数据（不刷新页面）

6.6.1 XMLHttpRequest基础

javascript

// 创建请求对象
const xhr = new XMLHttpRequest();

// 配置请求（GET方法，请求API数据）
xhr.open("GET", "https://api.example.com/data", true);

// 设置回调函数（数据返回后执行）
xhr.onload = function() {
    if (xhr.status === 200) {
        const data = JSON.parse(xhr.responseText);
        console.log(data); // 输出服务器返回的数据
    }
};

// 发送请求
xhr.send();

6.6.2 Fetch API（更现代的写法）

javascript

// 使用Fetch获取数据（更简洁）
fetch("https://api.example.com/data")
    .then(response => response.json())
    .then(data => {
        console.log(data); // 处理数据
    })
    .catch(error => {
        console.error("请求失败：", error);
    });

6.7 实战项目：简易待办事项清单

功能需求：

添加任务（输入框 + 按钮）
删除任务（点击任务项）
本地存储（数据保存到浏览器）

代码实现：

html

<input type="text" id="taskInput" placeholder="输入任务...">
<button onclick="addTask()">添加</button>
<ul id="taskList"></ul>

<script>
    // 从本地存储加载数据
    let tasks = JSON.parse(localStorage.getItem("tasks")) || [];

    // 渲染任务列表
    function renderTasks() {
        const list = document.getElementById("taskList");
        list.innerHTML = tasks.map((task, index) => `
            <li>
                ${task}
                <button onclick="deleteTask(${index})">删除</button>
            </li>
        `).join("");
    }

    // 添加任务
    function addTask() {
        const input = document.getElementById("taskInput");
        tasks.push(input.value);
        input.value = "";
        localStorage.setItem("tasks", JSON.stringify(tasks));
        renderTasks();
    }

    // 删除任务
    function deleteTask(index) {
        tasks.splice(index, 1);
        localStorage.setItem("tasks", JSON.stringify(tasks));
        renderTasks();
    }

    // 页面加载时渲染
    renderTasks();
</script>