从零开始学 JavaScript：小白友好的入门指南
目录
一、JavaScript 到底是什么？
二、基础语法
三、流程控制与数组
四、函数
五、DOM 操作：让网页动起来
六、BOM 操作：控制浏览器
七、学习心得与建议
一、JavaScript 到底是什么？
刚开始学的时候，我一直搞不懂 JS 到底是干嘛的。后来才明白，JavaScript 是一门运行在客户端的脚本语言，不需要编译，浏览器会逐行解释执行。它的创始人布兰登・艾奇只用了 10 天就完成了设计，最初叫 LiveScript，后来和 Sun 合作后改名为 JavaScript。
现在的 JS 用途可广了：不仅能做表单验证（比如密码强度检测）、网页特效，还能通过 Node.js 做服务端开发，甚至可以开发桌面程序、App 和游戏。简单说，HTML 决定网页的结构（像人的身体），CSS 负责样式（像穿衣服化妆），而 JS 就是让网页 “动起来” 的核心（像人的动作）。
二、基础语法
1. 书写方式
JS 有三种书写方式，新手建议从内嵌式开始：
行内式：写在 HTML 标签的事件属性中，比如，适合少量代码
内嵌式：写在引入，适合代码量多的情况
2. 变量与命名规范
变量就像一个存放数据的容器，用var关键字声明：
var age = 18; // 声明并赋值 var name; // 只声明不赋值，默认是undefined name = "小明"; // 后续赋值 命名变量有几个重要规则，一定要记牢：
(1)由字母、数字、下划线_、美元符号$组成
(2)不能以数字开头，严格区分大小写
(3)不能用关键字（比如var、for）
(4)遵守驼峰命名法，比如myUserName
3. 数据类型与转换
JS 是弱类型语言，不用提前声明变量类型，赋值后会自动确定类型。主要有 5 种基本数据类型：
数字型（Number）：整数、小数都算，比如21、3.14
字符串型（String）：必须用引号包裹，单双引号都可以，比如"你好"、‘JavaScript’
布尔型（Boolean）：只有true（真）和false（假）两个值，和数字相加时true=1、false=0
未定义型（Undefined）：声明了变量但没赋值
空值（Null）：变量的值为空
判断变量类型用typeof运算符，比如typeof age会返回number。实际开发中经常需要类型转换，重点记住这几种：
// 转字符串 var num = 123; num.toString(); // 方法1 String(num); // 方法2 num + "字符串"; // 方法3，最常用 // 转数字型（重点） parseInt("78"); // 转整数 parseFloat("78.21"); // 转小数 Number("123"); // 强制转换 "123" - 0; // 隐式转换，简单好用 三、流程控制与数组
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.不要怕报错：新手遇到报错很正常，学会看错误信息，慢慢培养排错能力
