JavaScript是前端开发的事实标准，它使HTML和CSS具备交互能力，通过addEventListener、fetch等API实现用户行为响应与数据动态更新，现代框架底层均依赖其运行时特性。
JavaScript 不是“要不要学”的选项，而是前端开发的事实标准——没有它，页面就是一张不能响应、不能交互的静态图。
JavaScript 让 HTML 和 CSS “活起来”
HTML 定义结构，CSS 控制样式，但用户点击按钮、输入内容、切换标签页这些行为，全靠 JavaScript 捕获和响应。addEventListener 是最基础的入口，比如监听一个 submit 事件来校验表单，而不是直接把数据发给后端；fetch 可以在不刷新页面的情况下从 API 拿数据，再用 innerHTML 或 appendChild 更新局部 DOM。
常见错误现象：写了 HTML 表单，加了 CSS 样式，但点击提交没反应——大概率是忘了绑定 submit 事件或没写 event.preventDefault()，导致页面跳转清空了所有状态。
现代前端框架（React/Vue/Svelte）本质是 JavaScript 的封装
React 的 useState、Vue 的 ref、Svelte 的 $: 响应式声明，底层都依赖 JavaScript 的运行时能力。不理解 this 绑定、闭包、异步执行顺序（Promise / async/await），就很难调试组件状态更新异常或请求串行失败的问题。
使用场景举例：
- 用户在搜索框输入文字，想实时过滤列表 → 需要监听
input事件 + 节流setTimeout防抖 - 点击“加载更多”，追加数据到现有列表 → 调用
fetch后用Array.concat或展开运算符[...oldItems, ...newItems]合并数组 - 表单多个字段联动（如选城市后才显示区）→ 需要监听
change事件并动态操作disabled属性或innerHTML
浏览器环境里，JavaScript 是唯一能直接操作 DOM 和网络的脚本语言
服务端语言（如 Python、Node.js）无法直接读取用户当前滚动位置、访问摄像头、获取剪贴板内容，这些都必须通过浏览器暴露的 JavaScript API 实现：navigator.geolocation.getCurrentPosition、MediaDevices.getUserMedia、navigator.clipboard.readText。
性能影响注意点：
- 频繁修改 DOM（如循环中反复设
innerHTML）会触发多次重排重绘 → 改用DocumentFragment或批量更新 - 监听
scroll或resize事件不加节流 → 页面卡顿，CPU 占用飙升 - 用
eval或Function构造函数动态执行字符串代码 → 既慢又不安全，多数情况可用对象查找代替（如handlers[）
eventType ]()
真正卡住人的往往不是语法，而是对浏览器执行模型的理解：宏任务、微任务、事件循环怎么影响 setTimeout 和 Promise.then 的执行顺序；DOM 更新何时生效；async 函数返回的 Promise 怎么被链式消费。这些细节不摸清楚，debug 时就会反复陷入“我明明改了状态，为什么界面没变”的困境。
