JavaScript 零基础入门指南

三、流程控制与数组

1. 流程控制语句 代码默认是顺序执行的，通过流程控制可以改变执行顺序，主要分三种：

分支结构：if-else 和 switch

// if-else 适合范围判断
var score = 85;
if (score >= 90) {
  console.log("优秀");
} else if (score >= 60) {
  console.log("及格");
} else {
  console.log("不及格");
}

// switch 适合固定值判断
var day = 3;
switch (day) {
  case 1: console.log("周一"); break;
  case 2: console.log("周二"); break;
  default: console.log("其他");
}

循环结构：for、while、do-while 最常用的是 for 循环，比如打印 1-10：

for (var i = 1; i <= 10; i++) {
  console.log(i);
}

跳转语句：break（跳出整个循环）和 continue（跳出本次循环）

2. 数组的使用 数组能把一组相关数据存放在一起，方便管理：

// 创建数组
var fruits = ["苹果", "香蕉", "橙子"]; // 推荐用这种字面量方式

// 获取元素（索引从 0 开始）
console.log(fruits[0]); // 输出"苹果"

// 遍历数组
for (var i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

// 新增元素
fruits[fruits.length] = "葡萄"; // 末尾添加

四、函数

函数就是封装一段可重复使用的代码块，比如计算两个数的和：

// 声明函数
function add(a, b) { // a 和 b 是形参
  return a + b; // 返回结果
}

// 调用函数
var result = add(3, 5); // 3 和 5 是实参
console.log(result); // 输出 8

注意事项： (1) 函数不调用不会执行，调用时别忘了加括号 (2) 形参和实参数量不匹配时，多余的形参会是 undefined (3) 用 return 返回结果，函数执行到 return 就会停止

五、DOM 操作：让网页动起来

DOM 就是文档对象模型，把网页上的元素都变成可操作的对象。学会 DOM，就能实现各种交互效果了。

1. 获取元素 要操作元素，首先得找到它：

// 根据 ID 获取（最常用）
var box = document.getElementById("box");

// 根据标签名获取
var lis = document.getElementsByTagName("li");

// H5 新增方式（推荐）
var box = document.querySelector(".box"); // 根据选择器获取第一个元素
var boxes = document.querySelectorAll(".box"); // 获取所有匹配元素

2. 事件处理 事件就是用户的操作（比如点击、鼠标经过），通过事件可以触发函数执行。事件三要素：事件源、事件类型、事件处理程序。

// 案例：点击按钮弹出提示
var btn = document.getElementById("btn");
btn.onclick = function() {
  alert("按钮被点击了！");
};

常用的鼠标事件有：onclick（点击）、onmouseover（鼠标经过）、onmouseout（鼠标离开）等。

3. 操作元素

• 改变内容：用 innerHTML（识别 HTML 标签）或 innerText（不识别标签）

var div = document.querySelector("div");
div.innerHTML = "<strong>Hello</strong>"; // 显示粗体的 Hello

• 操作属性：比如修改图片 src、链接 href
• 修改样式：通过 style 属性（行内样式）或 className（类名）

// 方式 1：style 属性
div.style.color = "red";
div.style.fontSize = "20px"; // 驼峰命名法

// 方式 2：className（适合多个样式）
div.className = "active";

六、BOM 操作：控制浏览器

BOM 是浏览器对象模型，主要操作浏览器窗口，核心对象是 window。

1. 定时器 定时器非常实用，比如倒计时、自动切换图片等，有两种：

• setTimeout()：延迟指定时间执行一次（炸弹定时器）
• setInterval()：每隔指定时间执行一次（闹钟定时器）

// 案例：5 秒后关闭广告
var ad = document.getElementById("ad");
var timer = setTimeout(function() {
  ad.style.display = "none";
}, 5000);

// 停止定时器
clearTimeout(timer);

2. 窗口事件

• 页面加载事件：window.onload（页面全部加载完成后执行）
• 窗口大小改变事件：window.onresize（适合响应式布局）

七、学习心得与建议

1. 多写代码：JS 是实践性很强的语言，光看理论没用，每个知识点都要动手敲代码验证
2. 从小案例入手：先做简单的效果（比如表单验证、倒计时），逐步积累信心
3. 善用控制台：console.log() 是调试神器，遇到问题多打印变量看值
4. 不要怕报错：新手遇到报错很正常，学会看错误信息，慢慢培养排错能力