这是一段文字
` - 用JS找元素：`document.getElementById("info")`（通过id找元素，像“按学号找人”） - 动手练：在HTML里写一个带id的div，用JS找到它并打印（看控制台是否成功） ### 3.2 改内容：让文字变一变 - 找到元素后，用`innerHTML`改内容： ```js let infoElement = document.getElementById("info"); infoElement.innerHTML = "文字被我改掉啦！"; ``` - 效果：网页上的文字实时变化（直观看到结果，增强兴趣） - 动手练：改一段文字为自己的座右铭 ### 3.3 改样式：让元素“变样子” - 用`style`改样式：`infoElement.style.color = "red";`（文字变红） - 更多样式：`style.fontSize = "20px"`（字体变大）、`style.backgroundColor = "yellow"`（背景变黄） - 动手练：让文字先变红，再变大，再加黄色背景（一步步试，看实时变化） ### 3.4 实战小案例：点击按钮变样式 - 目标：点击按钮后，让一段文字变色+变粗 - 步骤： 1. HTML写一个按钮（``）和一段文字 2. JS找到按钮，用`onclick`绑定“点击事件”： ```js let btn = document.getElementById("btn"); let text = document.getElementById("text"); btn.onclick = function() { text.style.color = "blue"; text.style.fontWeight = "bold"; } ``` - 重点：让小白感受“交互”——自己的操作（点击）能触发变化 ## 第4章：流程控制——让JS“做判断、做循环” ### 4.1 为什么需要流程控制？ - 生活例子：如果下雨就带伞（判断）；每天背10个单词（循环） - 代码例子：根据分数判断“及格/不及格”，用循环打印1-10的数字 ### 4.2 条件判断：if语句 - 基本结构： ```js let score = 80; if (score >= 60) { console.log("及格了"); } else { console.log("不及格"); } ``` - 白话解释：`if`后面的括号是“条件”，满足就执行`{}`里的代码，否则执行`else`里的 - 动手练：输入自己的分数（改变量值），看控制台输出是否正确 ### 4.3 循环：重复做一件事（for循环） - 基本结构（打印1-5的数字）： ```js for (let i = 1; i 5`就停下，每次都打印`i` - 动手练：改循环条件，打印10-20的数字 ### 4.4 实战小案例：成绩评级器 - 目标：输入分数（变量），用if多分支判断评级（90+优秀，80-89良好，60-79及格，否则不及格） - 效果：控制台输出对应评级 - 进阶：把结果显示在网页上（用之前学的`innerHTML`） ## 第5章：函数——代码的“打包工具” ### 5.1 为什么需要函数？ - 问题：如果多次需要“计算两个数的和”，每次都写`a + b`太麻烦 - 解决：把代码打包成函数，要用时“调用”一下就行 ### 5.2 函数怎么写？ - 基本结构： ```js // 声明函数（打包代码） function add(a, b) { return a + b; // 返回计算结果 } // 调用函数（使用代码） let result = add(3, 5); console.log(result); // 输出8 ``` - 白话解释：`function`是“函数”的意思，`a`和`b`是“输入的原料”，`return`是“输出的结果” - 动手练：写一个函数，输入名字，返回“你好，XX！”（比如`greet("小明")`返回“你好，小明！”） ### 5.3 函数的实际用途：简化重复代码 - 例子：封装“修改文字样式”的函数，调用时传不同颜色参数 ```js function setTextColor(element, color) { element.style.color = color; } // 调用：让id为text1的元素变红，text2的元素变蓝 setTextColor(document.getElementById("text1"), "red"); setTextColor(document.getElementById("text2"), "blue"); ``` - 好处：改样式的逻辑只写一次，多次调用更方便 ### 5.4 实战小案例：多功能计算器 - 目标：写4个函数（加、减、乘、除），调用后在网页显示结果 - 进阶：加个输入框（HTML的``），让用户自己输入数字（用`value`获取输入值） ## 第6章：数组——批量存储数据 ### 6.1 为什么需要数组？ - 问题：存5个学生的名字，用变量`name1`到`name5`太繁琐 - 解决：用数组存，`let students = ["小明", "小红", "小刚", "小丽", "小芳"]` ### 6.2 数组的基本操作 - 访问元素：`students[0]`（取第一个元素，注意：数组从0开始数） - 长度：`students.length`（获取数组有多少个元素） - 遍历数组：用for循环依次取出每个元素 ```js for (let i = 0; i < students.length; i++) { console.log(students[i]); } ``` ### 6.3 实战小案例：班级名单展示 - 目标：用数组存5个名字，通过循环在网页上显示成列表（`- 名字
