现代JavaScript入门到进阶（小白友好版）

第1章：先让代码“跑起来”——JavaScript初体验

1.1 为什么要学JavaScript？

用3个例子直观感受：网页弹窗提示、点击按钮变色、表单实时验证（只看效果，不看代码）
前端三巨头（HTML/CSS/JS）的分工：HTML搭结构、CSS美化、JS让页面“动起来”

1.2 准备工具：5分钟搞定开发环境

安装VS Code（附：官网下载+傻瓜式安装步骤）
必备基础配置：
- 新建第一个文件夹（比如“my-first-js”）
- 用VS Code打开文件夹，创建第一个HTML文件（index.html）
- 安装“Open in Browser”插件（点击右键就能在浏览器打开文件）
认识两个核心工具：
- VS Code：写代码的“笔记本”
- 浏览器（Chrome）：运行代码的“舞台”

1.3 写第一行JavaScript代码

在HTML里嵌入JS：用“标签写代码（最简单的方式，暂不引入外部文件）
第一个程序：弹出“你好，JS！”（alert("你好，JS！")）
第二个程序：在浏览器控制台打印内容（console.log("我在控制台哦")，附：Chrome控制台怎么打开）
动手练：改一改文字，看看效果变化（让小白感受“代码能被自己控制”）

1.4 本章小结与目标

能说出JS的作用：让网页有交互
能独立用VS Code创建文件、在浏览器运行
记住两个基础语法：alert()（弹窗）、console.log()（控制台输出）

第2章：变量与数据——JS的“储物箱”

2.1 为什么需要变量？

生活例子：用“杯子”装水（变量=杯子，数据=水）
代码例子：如果要多次使用一个名字，用变量存起来更方便

2.2 变量怎么用？

声明变量：用let（现代JS推荐），比如let name;（告诉JS：我要一个叫name的“杯子”）
赋值：name = "小明";（往杯子里装“小明”这个数据）
一步到位：let age = 18;（声明+赋值）
动手练：声明变量存自己的名字，用console.log()打印出来

2.3 数据有哪些类型？

简单分类（只讲最常用的4种，避免抽象）：
- 字符串（文字）：let message = "我爱学习";（必须用引号包裹）
- 数字（整数/小数）：let height = 1.75;（不用引号）
- 布尔值（对错）：let isStudent = true;（只有true/false两个值）
- 未定义（暂时没装东西）：let score;（变量声明了但没赋值）
怎么看类型？用typeof：console.log(typeof name)（让小白知道“怎么验证自己的判断”）
动手练：声明不同类型的变量，打印类型看结果

2.4 变量的“规矩”：命名与注意

命名规则：只能用字母、数字、_、$，且不能用数字开头（比如let 2name错误）
好习惯：见名知意（let studentName比let a好）
注意：JS区分大小写（let Name和let name是两个变量）
避坑：别用var（简单说“旧写法，有坑，现在都用let”）

2.5 实战小案例：个人信息卡片

目标：用变量存“姓名、年龄、是否学生”，最后用console.log()拼接成一句话输出
效果：控制台显示“姓名：小明，年龄：18，是否学生：true”

第3章：操作网页元素——让页面“有反应”

3.1 JS怎么找到网页里的元素？

回顾HTML：每个元素可以有id（唯一标识），比如<p id="info">这是一段文字</p>
用JS找元素：document.getElementById("info")（通过id找元素，像“按学号找人”）
动手练：在HTML里写一个带id的div，用JS找到它并打印（看控制台是否成功）

3.2 改内容：让文字变一变

找到元素后，用innerHTML改内容：

let infoElement = document.getElementById("info");
infoElement.innerHTML = "文字被我改掉啦！";

效果：网页上的文字实时变化（直观看到结果，增强兴趣）
动手练：改一段文字为自己的座右铭

3.3 改样式：让元素“变样子”

用style改样式：infoElement.style.color = "red";（文字变红）
更多样式：style.fontSize = "20px"（字体变大）、style.backgroundColor = "yellow"（背景变黄）
动手练：让文字先变红，再变大，再加黄色背景（一步步试，看实时变化）

3.4 实战小案例：点击按钮变样式

目标：点击按钮后，让一段文字变色+变粗

步骤：

HTML写一个按钮（<button id="btn">点我</button>）和一段文字

JS找到按钮，用onclick绑定“点击事件”：

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语句

基本结构：

let score = 80;
if (score &gt;= 60) {
  console.log("及格了");
} else {
  console.log("不及格");
}

白话解释：if后面的括号是“条件”，满足就执行{}里的代码，否则执行else里的
动手练：输入自己的分数（改变量值），看控制台输出是否正确

4.3 循环：重复做一件事（for循环）

基本结构（打印1-5的数字）：


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 函数怎么写？

基本结构：

// 声明函数（打包代码）
function add(a, b) {
  return a + b; // 返回计算结果
}
// 调用函数（使用代码）
let result = add(3, 5);
console.log(result); // 输出8

白话解释：function是“函数”的意思，a和b是“输入的原料”，return是“输出的结果”
动手练：写一个函数，输入名字，返回“你好，XX！”（比如greet("小明")返回“你好，小明！”）

5.3 函数的实际用途：简化重复代码

例子：封装“修改文字样式”的函数，调用时传不同颜色参数

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循环依次取出每个元素

for (let i = 0; i &lt; students.length; i++) {
  console.log(students[i]);
}

6.3 实战小案例：班级名单展示

目标：用数组存5个名字，通过循环在网页上显示成列表（`
- 名字
效果：网页上看到垂直排列的名单

第7章：入门进阶——从“能写”到“规范写”

7.1 更现代的变量：const

什么时候用const：变量的值不会变的时候（比如const PI = 3.14）
好处：避免不小心改了不该改的值，代码更安全
区分let和const：let是“可以变的变量”，const是“不变的常量”

7.2 简化代码：解构赋值（简单版）

数组解构：快速从数组取元素

let [a, b] = [10, 20]; // 等价于a=10，b=20

对象解构（简单提一下，为后续铺垫）

7.3 代码规范：为什么要注意格式？

基础规范：缩进（用空格对齐）、分号（语句结尾加;）
VS Code自动格式化：右键“格式化文档”（让工具帮我们规范）

7.4 第一个“完整”小项目：待办事项（Todo List）

功能：输入框输入内容，点击“添加”按钮，在下方显示待办项
技术点：
- 用input获取用户输入
- 用数组存待办项
- 用函数处理添加逻辑
- 用循环渲染待办列表到网页
步骤：分3天完成（每天实现一个子功能），附详细代码注释

第8章：走向深入——该学什么 next？

8.1 基础打牢后，下一步学什么？

原生JS进阶：对象、DOM深度操作、事件冒泡、异步（Promise）
工具链入门：npm（包管理）、简单用Vite创建项目（不用懂原理，会用就行）
框架选择：先学Vue（更贴近HTML，对新手友好）或React（生态强大）

8.2 推荐学习资源

免费文档：MDN Web Docs（最权威，查语法用）
视频教程：B站“JavaScript基础入门”（选播放量高、评论友好的）
练习平台：CodePen（在线写代码，看效果）

现代JavaScript入门到进阶（小白友好版）

第1章：先让代码“跑起来”——JavaScript初体验

1.1 为什么要学JavaScript？

1.2 准备工具：5分钟搞定开发环境

1.3 写第一行JavaScript代码

1.4 本章小结与目标

第2章：变量与数据——JS的“储物箱”

2.1 为什么需要变量？

2.2 变量怎么用？

2.3 数据有哪些类型？

2.4 变量的“规矩”：命名与注意

2.5 实战小案例：个人信息卡片

第3章：操作网页元素——让页面“有反应”

3.1 JS怎么找到网页里的元素？

3.2 改内容：让文字变一变

3.3 改样式：让元素“变样子”

3.4 实战小案例：点击按钮变样式

第4章：流程控制——让JS“做判断、做循环”

4.1 为什么需要流程控制？

4.2 条件判断：if语句

4.3 循环：重复做一件事（for循环）

4.4 实战小案例：成绩评级器

第5章：函数——代码的“打包工具”

5.1 为什么需要函数？

5.2 函数怎么写？

5.3 函数的实际用途：简化重复代码

5.4 实战小案例：多功能计算器

第6章：数组——批量存储数据

6.1 为什么需要数组？

6.2 数组的基本操作

6.3 实战小案例：班级名单展示

第7章：入门进阶——从“能写”到“规范写”

7.1 更现代的变量：const

7.2 简化代码：解构赋值（简单版）

7.3 代码规范：为什么要注意格式？

7.4 第一个“完整”小项目：待办事项（Todo List）

第8章：走向深入——该学什么 next？

8.1 基础打牢后，下一步学什么？

8.2 推荐学习资源

imadmin

相关文章

JavaScript变量名和函数名命名规则和命名规范：起个「好记又合法」的名字有多重要？

CSS3核心特性-第7章-7.3-伪元素与优先级计算

2.1 为什么需要变量

发表回复 取消回复

发表回复取消回复