JavaScript 入门：从第一个变量到 DOM 操作的第一课

JavaScript 是让网页动起来的语言。打开一个网页，按钮的点击、文字的变化、列表的增减，背后大多是 JavaScript 在工作。对初学者来说，不必一开始就记住所有语法，先从变量、函数和 DOM 操作这三块入手，就能写出第一个能交互的小页面。

一、第一个变量

变量是用来存放数据的盒子。声明变量用 let 和 const，let 声明的变量可以改，const 声明的常量不能重新赋值。

let userName = "小明";
let age = 18;
let isStudent = true;
const score = 100;
console.log(userName);
console.log(age);

上面的代码声明了四个变量，并把前两个打印到控制台。初学时建议多用 const，确实需要改动时再用 let，这样代码更不容易出错。数字、字符串和布尔值是最常用的三种数据，字符串要用引号包起来。

二、把重复的事交给函数

函数是一段可以反复执行的代码。把重复的逻辑写进函数，需要时调用它，就不用一遍遍复制粘贴。

function sayHello(name) {
  return "你好，" + name;
}
console.log(sayHello("小明"));
console.log(sayHello("小红"));

函数名要能看出它在做什么，参数是传进去的数据，返回值是算出来的结果。先写一个小函数并调用成功，是建立信心的最快办法。

三、条件与循环

程序需要做判断，也需要重复执行。条件用 if，重复用 for，两个都是入门必会的语句。

if (age >= 18) {
  console.log("已成年");
} else {
  console.log("未成年");
}
for (let i = 0; i < 3; i++) {
  console.log("第" + i + "次");
}

写循环时先想清楚三件事：从哪里开始，到哪里结束，每次变化多少。想清楚这三点，循环就很少写错。

四、DOM 操作的第一课

DOM 是浏览器把网页变成的一棵对象树，JavaScript 通过它找到页面元素并改动内容。先找到元素，再改内容或挂上事件。

const title = document.querySelector("h1");
title.textContent = "你好，JavaScript";
const button = document.querySelector("button");
button.addEventListener("click", function () {
  alert("你点击了按钮");
});

这段代码先找到标题并改掉文字，再给按钮绑定点击事件。点击之后弹出提示，页面就有了第一次交互。理解查找元素、修改内容、监听事件这三步，就掌握了 DOM 操作的基本套路。

五、新手常踩的坑

第一，字符串拼接时注意引号配对，缺一个引号就会报错。第二，变量名拼错是常见错误，控制台会提示找不到这个变量，顺着提示检查拼写即可。第三，代码要在页面元素加载之后执行，否则可能找不到元素。遇到报错不要慌，先看控制台的第一行提示，它往往直接指出问题所在的行。

小结与练习

今天学了变量、函数、条件循环和 DOM 操作。试着做一个计数器：页面上放一个数字和一个按钮，每点一次按钮数字加一。能独立写出这个小功能，就说明第一课已经过关了。接下来可以继续学习数组、对象和事件委托，把页面做得越来越丰富。