让网页动起来：JavaScript 三种“插法”与一锅端基础

HTML 搭骨架，CSS 化彩妆，JavaScript 给网页装心脏。
想让按钮一点就蹦跶，有三种把 JS 塞进页面的办法：

1. 内联——图省事

   <button onclick="alert('点我干啥')">戳一下</button>

   直接写在标签里，应急可以，写多了像牛皮癣。

2. 内部块——先跑再说

   <script>
     console.log('页面正在加载中……');
   </script>

   丢在 HTML 里，打开就执行，适合小 demo， production 用就显得挤。

3. 外部文件——最干净

   <script src="main.js" defer></script>

   代码独立、缓存省流量、HTML 不臃肿；defer 让脚本等 DOM 解析完再跑，不堵渲染。

基础语法四件套，背完就能出门：

• 变量：let age = 18;
• 函数：function add(a,b){return a + b;}
• 判断：if (price < 100) console.log('买！');
• 循环：for (let i = 0; i < 5; i++) console.log(i);

想改页面？先抓 DOM：

const title = document.getElementById('title');
title.textContent = '标题被 JS 换了';

一句话：
JS 给网页加“行为”，心脏别放头顶（放底部或加 defer），写爽了记得外部化，后期维护少掉发。