JavaScript Study Plan

JavaScript入门 的学习计划(从0到事件)

LEVEL-1 认识 JavaScript 与基础语法

目标：了解 JS 是什么，会写最简单的脚本。

学习内容

1. 在HTML中引入JS （<Script>标签）
2. 变量声明（let、const）
3. 数据类型（数字、字符串、布尔值）
4. 基础输出方法：console.log()、alert()、document.write()

练习题

1. 分别在控制台和页面内输出：“欢迎学习JavaScript!”
2. 声明变量name、age ，并输出：我的名字是xxx，今年xx岁
3. 用 typeof 检查几种数据类型。

LEVEL-2 条件循环与运算符

目标： 理解循环结构和逻辑，了解运算符作用

学习内容

1. if / else 条件判断；for / while循环
2. 算数运算符 (+,-,*,/)
3. 比较运算符 (==,===,>,<)
4. 逻辑运算符 (&&,||,!)

练习题

1. 输入两个数字a和b，输出较大的那个数

2. 输入一个数字，判断这个数是奇数还是偶数

3. 求1~100累加和

4. 输出九九乘法表:

//1×1=1 
//1×2=2 2×2=4 
//1×3=3 2×3=6 3×3=9 
//...
//1×9=9 2×9=18 ... 9×9=81

5. 拓展题目如下

//提示①   Math.sqrt(x);   表示计算x的平方根
//提示②   parseInt(x)；   表示直接截取x中的整数部分
//提示③   &nbsp    表示不间断空格，document.write("&nbsp") 网页生成空格会自动合并，一个空格代表一个&nbsp
//给定一个N整数，如下格式打印沙漏图案，并输出使用的'i'的个数和剩余的'i'的个数
//例子：N = 19, Used = 17, UnUsed = 2
//    iiiii
//     iii
//      i
//     iii
//    iiiii
//总数：19
//使用：17
//剩余：2
//层数：5

LEVEL-3 数组

目标： 熟练掌握数组

学习内容

1. 创建数组
2. 修改数组 (返回原数组和返回新数组)
3. 数组转换
4. 数组查找
5. 遍历数组
6. 数组计算
7. 静态数组

练习题

1. 建立一个数组 [1,2,3,4,5] ，删除开头和结尾，在开头添加0，在末尾添加6，输出修改后的数组 //[0,2,3,4,6]
2. 建立一个数组[1,2,3,4]，反转结果并输出 //[4,3,2,1]
3. 建立一个数组[85,92,78,91,88]，请分别进行以下操作：用forEach打印每个分数；用map把每个分数+5；用filter找出大于90的分数；用find找出第一个小于95的分数；用some判断是否有分数低于60；用every判断是否所有分数都几个(>=60)
4. 分别利用reduce()实现求和，数组扁平化(将多维数组转换成一维数组)，求最大值和最小值

//求和 num = [1,2,3,4,5];   //15
//数组扁平化 arr = [[1,2],[3,4],[5]];   //1,2,3,4,5
//求最大值、最小值 nums = [3, 7, 2, 9, 5];    //9 2

LEVEL-4 函数

目标： 会声明函数，理解函数，参数返回值，作用域

学习内容

1. 函数的定义方式

• 函数声明：function add(a, b) {}
• 函数表达式：const add = function(a, b) {}
• 箭头函数：const add = (a, b) => a + b

2. 函数（形参 vs 实参）

• 默认参数 function f(a = 10) {}

3. 返回值

• 有返回值，让函数产出一个结果
• 无返回值（通常是执行某个动作：打印、修改变量等）

4. 作用域与闭包概念(闭包初步了解即可)

• 局部变量只在函数里用
• 全局变量在任何地方用

练习题

1. 写一个求和函数

• 输入两个数字，返回他们的和 sum

2. 写一个判断是否为偶数的函数

• 输入一个数字，返回 true 或 false

3. 写一个求数组中最大值的函数

• 输入 [3, 1, 9, 2] 返回 9

4. 写一个函数，计算数组所有元素的总和

• 输入 [1,2,3,4] 返回 10

5. 写一个函数，反转字符串

• 输入 "hello" 返回 "olleh"。

LEVEL-5 对象

目标： 会创建，访问，遍历对象，理解对象方法和引用类型

学习内容

1. 对象的创建方式

const person = {
  name: "PyTs1n9",
  age: 20,
  singleStatus: true,
};

2. 访问/修改属性

person.name
person["age"]
person.age = 18

3. 删除属性

delete person.age

4. 对象的方法(对象里的函数)

const dog = {
  name: "QwQ",
  bark() {
    console.log(this.name + " is barking");
  }
};

5. 遍历函数

for (let key in person) {
  console.log(key, person[key]);
}
//for in 遍历

6. 对象数组(最常见的实际场景)

const users = [
  {name: "A", age: 10},
  {name: "B", age: 20}
];

练习题

1. 创建一个对象表示学生

• 属性包含：姓名、年龄、成绩
• 要求：写一个方法 showInfo() 输出自身信息。

2. 写一个函数，统计对象属性数量
   输入

{a:1, b:2, c:3}

返回 3

3. 创建一个对象数组
   例如：

[
  {name:"A", age:10},
  {name:"B", age:20}
]

要求：写一个函数找出 年龄最大的对象

4. 给对象添加新属性
   写函数:

addProp(obj, key, value)

把新属性加进去

5. 拓展：合并两个对象
   输入：

{a:1, b:2}
{b:3, c:4}

控制台输出：

{a:1, b:3, c:4}
//提示：{ ...a, ...b } 是对象合并最现代的写法

LEVEL-6 DOM与事件

作者给自己写晕了，事件的练习题自己也没做@@

目标： 理解DOM，学会查询方法，操作节点的属性和内容，新增和删除节点，理解事件模型，掌握常用事件类型

学习内容

1. DOM基础

• 属性：
  • textContent / innerHTML / innerText
  • style.color、classList.add/remove/toggle
  • value
• 查找节点：
  • document.getElementById
  • document.querySelector
  • document.querySelectorAl
• 操作节点：
  • createElement
  • appendChild
  • remove
  • setAttribute / getAttribute

2. 事件基础：

• 事件绑定：addEventListener()
• 事件对象：event.target
• 冒泡、捕获
• 阻止默认行为：event.preventDefault()

纯 JavaScript DOM / 事件练习题

DOM 练习题

以下为伪DOM结构，目的是不写HTML和CSS也能练习DOM

const mockDOM = {
  id: "root",
  children: [
    { id: "title", textContent: "Hello" },
    {
      id: "list",
      children: [
        { id: "item1", textContent: "A" },
        { id: "item2", textContent: "B" }
      ]
    }
  ]
};

你将通过JS函数操作这个对象结构

1. 查找节点，写一个函数 findNodeById(dom, id)，返回该节点对象
   示例调用：

findNodeById(mockDOM, "item2"); // 返回 { id: "item2", textContent:"B" }

2. 利用上题的查找函数，修改节点文字，写函数 setText(dom, id, newText)，找到节点并修改其 textContent
3. 新增节点，写函数 appendNode(dom, parentId, newNode),把新节点加入 parentId 对应的 children 中
   例如

appendNode(mockDOM, "list", { id:"item3", textContent:"C" });

4. 删除节点，写函数 removeNode(dom, id)，从 DOM 树中删除该 id 的节点。

事件 练习题

我们用一个“事件系统”模拟浏览器的事件：

const eventSystem = {
  listeners: {},

  addEventListener(id, handler) {
    if (!this.listeners[id]) this.listeners[id] = [];
    this.listeners[id].push(handler);
  },

  trigger(id, event) {
    const handlers = this.listeners[id] || [];
    handlers.forEach(fn => fn(event));
  }
};

5. 绑定事件,给title 节点绑定一个事件，用 trigger 触发调用，在控制台输出
6. 模拟点击列表项,给 list 下所有项绑定一个 "click" 模拟事件，循环注册事件
7. 模拟事件冒泡,如果触发子节点 item1 → 自动触发其父节点 list 的事件。
   你需要实现：

function triggerWithBubble(dom, id, event) {
  // 触发自己
  // 找到父节点，然后递归触发
}

8. 事件委托
   仅给 list 绑定事件：

eventSystem.addEventListener("list", (event) => {
  console.log("你点击了哪个子节点？", event.target);
});

模拟点击 item2 时触发：

triggerWithBubble(mockDOM, "item2", { target:"item2" });

要写出冒泡逻辑，使得父节点能收到事件。

LEVEL-7 小项目实战

目标： 用所学写出一个完整交互项目

项目：计数器(Counter)

功能要求：

• 页面上有一个数字、一个“+”按钮、一个“–”按钮
• 点击“+”数字加1，点击“–”数字减1
• 数字不能低于0

提示：

<button id="minus">-</button>
<span id="count">0</span>
<button id="plus">+</button>

let count = 0;
document.querySelector('#plus').addEventListener('click', ()=>{
  count++;
  document.querySelector('#count').textContent = count;
});

LEVEL-8+ 升级项目 + 巩固复习

目标： 独立完成项目

项目：点击按钮实现图片轮播，并实现图片鼠标移开自动播放，鼠标移动到图片停止自动播放

• 输入框输入任务内容，点击“添加”后任务出现在下方
• 每个任务后有“删除”按钮
• 可以动态新增 / 删除任务

学习点：

• DOM 创建与删除节点
• 事件委托
• 数组操作结合页面更新