JavaScript 入门从变量到事件，写一个会动的小页面

网页能点按钮、能弹窗、能实时变内容，靠的都是 JavaScript。它是浏览器里唯一原生的编程语言，不用装环境，打开浏览器就能练。本文从变量、函数、事件三块讲起，最后串一个点击计数器的小例子，照着敲一遍就能理解网页是怎么动起来的。

很多新手学网页开发，先学 HTML 搭骨架、CSS 做样式，到 JavaScript 就卡住了。其实它的作用很好理解：HTML 负责“有什么”，CSS 负责“长什么样”，JavaScript 负责“动起来、能互动”。按钮点了没反应、表单没填完就提交、数字不会自动变，这些都是 JavaScript 该管的事。

先从变量说起。变量就是给数据起个名字、存起来以后用。现代写法用 let 存会变的、用 const 存不会变的，比如：

let count = 0;const title = "点击计数器";

count 以后可以改，title 不应该再改。字符串、数字、布尔值是最常用的三种类型，写代码时先想清楚这个变量存的是什么、会不会变，代码就不会乱。

再说函数。函数就是把一段要反复做的事打包起来，起个名字，需要时调用它。比如下面的函数每次调用都把计数加一：

function addOne() {    count = count + 1;}

函数的好处是改一处就全改了，不用把同样的代码复制十遍。新手写函数时有个好习惯：一个函数只干一件事，名字写清楚它是干什么的，比如 addOne、showMessage，别写成 doSomething 这种过两天自己都看不懂的名字。

最后是事件，这是 JavaScript 和网页互动的核心。事件就是“用户做了什么”，比如点击、输入、鼠标移入。把函数绑到事件上，用户一点击，函数就执行。写在 HTML 里最直观的例子是：

<button onclick="addOne()">点我 +1</button>

点一次按钮，addOne 跑一次，count 加一。如果再把 count 显示到页面上，数字就会跟着变，这就是一个最简单的互动页面：HTML 负责画按钮，JavaScript 负责点一下发生什么。实际项目里更推荐用 addEventListener 来绑定事件，HTML 和 JavaScript 分开写，页面结构更干净，但入门先理解 onclick 的思路就够了。

新手最常踩的坑有三个。第一是分不清 = 和 ==：一个等号是赋值，两个等号是比较大小、判断相等，写反了逻辑全错。第二是变量名拼错，浏览器控制台会直接报错，按 F12 打开控制台看第一条报错，九成问题都能定位到行号。第三是脚本放错位置：JavaScript 要在页面元素加载完之后执行，放太早会找不到按钮，习惯上把 script 标签放在 body 末尾最稳妥。

总结一下：JavaScript 入门就是记住三个概念，变量存数据、函数打包重复做的事、事件把用户操作和函数连起来。今天动手写一个点击计数器，再加一个“点一下换一句提示语”的小功能，网页从静态变互动的感觉一出来，后面学表单验证、发请求、做动态列表，都是在这个基础上加东西。