JavaScript能做什么？实战项目教程

JavaScript 是让网页真正“活起来”的唯一通用语言——它通过事件监听实现按钮点击变色、弹窗提示等基础交互，借助 fetch 发起异步请求达成无刷新数据更新，利用 Canvas 精确控制像素绘制动画与实时图表；但它的强大远不止语法本身，更在于深刻理解并驾驭浏览器的单线程模型、事件循环机制、同源策略与渲染帧率等底层约束，唯有如此，才能写出稳定、流畅、可维护的现代Web体验。

JavaScript 不是“需要”才用，而是网页动起来、用户能交互、数据能实时更新的唯一通用方式——没有它，现代网站基本是张静态海报。

让按钮点击后立刻变颜色或弹出提示

这是最基础但最典型的交互场景。HTML 只负责结构，CSS 负责样式，但“点击→响应”这个动作必须靠 JavaScript 完成。

常见错误是直接在 HTML 里写 onclick="alert('hi')"，看似能用，但一来逻辑和结构混在一起难维护，二来无法复用或动态绑定。

推荐做法是用 addEventListener 分离关注点：

const btn = document.querySelector('#my-btn');
btn.addEventListener('click', () => {
  btn.style.backgroundColor = 'blue';
  alert('已触发');
});

• 必须等 DOM 加载完再执行，否则 document.querySelector 找不到元素（可放