JavaScript是实现网页交互、实时数据更新和动态图形的唯一通用方式；它通过addEventListener处理事件、fetch进行异步请求、Canvas绘制动画，且必须遵循浏览器单线程与事件循环等约束。
JavaScript 不是“需要”才用，而是网页动起来、用户能交互、数据能实时更新的唯一通用方式——没有它，现代网站基本是张静态海报。
让按钮点击后立刻变颜色或弹出提示
这是最基础但最典型的交互场景。HTML 只负责结构，CSS 负责样式，但“点击→响应”这个动作必须靠 JavaScript 完成。
常见错误是直接在 HTML 里写 onclick="alert('hi')"，看似能用，但一来逻辑和结构混在一起难维护，二来无法复用或动态绑定。
推荐做法是用 addEventListener 分离关注点：
立即学习“Java免费学习笔记（深入）”；
const btn = document.querySelector('#my-btn');
btn.addEventListener('click', () => {
btn.style.backgroundColor = 'blue';
alert('已触发');
});
- 必须等 DOM 加载完再执行，否则
document.querySelector找不到元素（可放<script>标签在</body>前，或监听DOMContentLoaded） - 别用
onclick属性赋值，一个元素只能绑定一个，而addEventListener可多次调用 - 箭头函数里用
this会出问题，建议显式用变量（如btn）操作
不用刷新页面就从服务器拿新数据（AJAX / Fetch）
用户点“加载更多”，列表追加内容；输入框打字，下方实时显示搜索建议——这些都不是靠跳转新页面实现的，全靠 JavaScript 发起异步请求。
过去用 XMLHttpRequest，现在主流是 fetch()，但它默认不带 cookie，且 4xx/5xx 状态码不会自动抛错，容易误以为“成功了”。
一个健壮的请求示例：
async function loadPosts() {
try {
const res = await fetch('/api/posts', {
credentials: 'same-origin' // 需要登录态时必须加
});
if (!res.ok) throw new Error(`HTTP ${res.status}`);
const data = await res.json();
renderList(data);
} catch (err) {
console.error('加载失败：', err.message);
}
}
-
fetch()返回 Promise，必须await或用.then()处理，否则拿不到数据 -
res.ok只判断状态码是否在 200–299，401、500 这类错误需手动检查 - 跨域请求时，后端必须设置
Access-Control-Allow-Origin，否则浏览器直接拦截
用 Canvas 绘制动画或实时图表
不是所有图形都靠 CSS 或图片。比如游戏、粒子效果、自定义折线图，得用 <canvas> + JavaScript 控制每个像素。
Canvas 是“画布”，本身不记图形，只记像素点——所以清屏、重绘、计算坐标都得自己写，不像 SVG 那样改属性就能动。
一个最小动画循环：
const canvas = document.getElementById('my-canvas');
const ctx = canvas.getContext('2d');
let x = 0;
function animate() {
ctx.clearRect(0, 0, canvas.width, canvas.height); // 必须清屏
ctx.fillStyle = 'red';
ctx.fillRect(x, 50, 20, 20); // 画方块
x += 2;
if (x > canvas.width) x = 0;
requestAnimationFrame(animate); // 用这个，别用 setTimeout
}
animate();
-
requestAnimationFrame比setTimeout更准，且页面切到后台时自动暂停 - 每次画之前必须
clearRect，否则旧图像残留（除非故意做拖尾效果） - Canvas 坐标系原点在左上角，Y 轴向下增长，和数学习惯相反
真正难的不是语法，而是理解“JavaScript 在浏览器里跑，受制于单线程、事件循环、同源策略、渲染帧率”这些约束——写出来的代码能不能稳、快、不卡、不崩，取决于对这些边界的感知，而不是会不会写 for 循环。
