JavaScript 是一种通用动态编程语言，运行于浏览器和Node.js，以事件驱动、原型链和单线程事件循环为核心；它与Java无关，class是语法糖，异步依赖Promise/async-await，首个项目应纯HTML+JS实现本地待办列表。
JavaScript 不是“网页的装饰脚本”——它是运行在浏览器和服务器（通过 Node.js）上的通用编程语言，核心在于动态性、事件驱动和基于原型的对象模型。
JavaScript 是什么：别被名字骗了
名字里带 “Java”，但和 Java 没有继承或语法关系。它最初叫 LiveScript，1995 年为 Netscape 浏览器设计，目标很实际：document.getElementById 能取到元素，onclick 能响应点击，fetch() 能发请求——这些能力今天依然构成前端交互的基座。
关键事实：
- 不是编译型语言，而是由 JS 引擎（V8、SpiderMonkey 等）即时编译执行
- 单线程 + 事件循环（
Event Loop）决定它必须靠Promise、async/await处理异步，不能靠多线程“硬扛” - 没有类（
class）的原生概念，只有函数和原型链；class是 ES6 的语法糖，底层仍是prototype
第一个项目：用纯 HTML + JS 实现一个本地待办列表
跳过构建工具（Webpack/Vite）、不装任何依赖，直接在浏览器里跑通逻辑闭环。这是验证理解最有效的起点。
立即学习“Java免费学习笔记（深入）”；
实操建议：
- 新建一个
index.html文件，用<script></script>标签内联写 JS（避免模块解析失败） - DOM 操作优先用现代 API：
document.querySelector比document.getElementById更灵活，element.addEventListener('click', handler)比onclick="..."更可控 - 数据暂存用
localStorage，而不是每次刷新就清空；注意localStorage.setItem只接受字符串，得手动JSON.stringify/JSON.parse
<!DOCTYPE html>
<html>
<body>
<input id="new-todo" placeholder="输入任务">
<button id="add-btn">添加</button>
<ul id="todo-list"></ul>
<script>
const input = document.querySelector('#new-todo');
const btn = document.querySelector('#add-btn');
const list = document.querySelector('#todo-list');
function renderTodos() {
const todos = JSON.parse(localStorage.getItem('todos') || '[]');
list.innerHTML = todos.map(t =>
<li><span>${t.text}</span><button data-id="${t.id}">×</button></li>
).join('');
}
btn.addEventListener('click', () => {
const text = input.value.trim();
if (!text) return;
const todos = JSON.parse(localStorage.getItem('todos') || '[]');
todos.push({ id: Date.now(), text });
localStorage.setItem('todos', JSON.stringify(todos));
input.value = '';
renderTodos();
});
list.addEventListener('click', e => {
if (e.target.tagName === 'BUTTON') {
const id = Number(e.target.dataset.id);
const todos = JSON.parse(localStorage.getItem('todos') || '[]');
const filtered = todos.filter(t => t.id !== id);
localStorage.setItem('todos', JSON.stringify(filtered));
renderTodos();
}
});
renderTodos();
</script>
</body>
</html>
容易踩的坑：从第一个项目就能暴露的认知偏差
新手常把“能跑起来”等同于“懂了”，但下面这些点往往在调试时才浮现：
-
==和===的区别不是“多写两个等号”，而是前者会隐式转换类型：0 == false为true，但0 === false为false；生产环境一律用=== -
this的指向完全取决于函数**如何被调用**，不是定义位置。箭头函数不绑定this，所以事件回调里用() => {...}通常比function() {...}更安全 -
let和const有块级作用域，而var是函数作用域——这意味着for (var i = 0; i console.log(i), 0)输出的是三个3，换成let i就输出0,1,2
真正卡住人的，从来不是语法记不住，而是对执行上下文、原型链查找、闭包生命周期这些底层机制缺乏直觉。写完第一个待办列表后，试着把 renderTodos() 改成返回一个闭包函数，再传给 setTimeout，你就会开始注意到“变量什么时候被释放”。
