JavaScript 零基础入门教程
作者：wcy
适用人群：已学过基础 HTML / CSS，或完全没有编程基础的初学者
目录
- [JavaScript 是什么](#JavaScript 是什么)
- [JS 的引入方式](#JS 的引入方式)
- 变量与常量
- 数据类型
- 运算符
- 字符串操作
- 流程控制
- 循环
- 函数
- 数组
- 对象
- [DOM 操作](#DOM 操作)
- 事件
- 定时器
- 本地存储
- 综合实战
- 小结与练习
1. JavaScript 是什么
复习一下前面学过的两种语言：
- HTML：负责网页的"内容与结构"（有什么）；
- CSS：负责网页的"样式"（长什么样）；
- JavaScript（简称 JS）：负责网页的"行为"（能做什么）。
用一句话概括三者关系：
HTML 是人的骨架，CSS 是衣服，JavaScript 是灵魂。之前写的网页全都是"死"的------点按钮没反应，数字不会算，内容不会变。有了 JavaScript，网页才能动起来：弹窗提示、表单校验、轮播图、倒计时、点赞数变化......这些交互全是 JS 干的。
JavaScript 能干什么
- 修改网页内容（比如点击按钮后让文字改变）；
- 响应浏览器事件（点击、鼠标移动、键盘输入）；
- 做数学计算、逻辑判断；
- 读写浏览器本地数据（记住你的设置）；
- 与服务器通信（提交表单、加载数据）。
和 Java 的区别
JavaScript 名字里带"Java"，但和 Java 毫无关系，纯属当年蹭热度的历史原因。学习时把 JS 当成一门全新的语言即可。
一句话总结：JavaScript 是让网页"活起来"的编程语言，是前端开发的三大支柱之一。
2. JS 的引入方式
和 CSS 类似，JS 也有三种引入方式。
2.1 行内事件（写在标签里）
html
<button onclick="alert('你好！')">点我</button>点击按钮会弹出一个提示框。这种方式只适合极简单的调用，不推荐大规模使用。
2.2 内部脚本（写在页面里）
用 <script> 标签包裹，一般放在 </body> 前：
html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JS 入门</title>
</head>
<body>
<p id="demo">原来的文字</p>
<script>
document.getElementById("demo").innerHTML = "被 JS 改过的文字";
</script>
</body>
</html>打开页面，你会看到原本的 <p> 内容变成了"被 JS 改过的文字"。
2.3 外部脚本（推荐）
把 JS 单独存成 .js 文件，再用 <script src> 引入：
html
<script src="script.js"></script>script.js 内容：
js
document.getElementById("demo").innerHTML = "被外部 JS 改过的文字";- 优点：代码分离、便于维护、一个 JS 文件全站复用；
- 注意 ：
<script src="...">标签中间不能再写代码，写了也不会执行。
2.4 写在哪个位置
<head>里写可能因为页面还没渲染完而取不到元素；- 通常把
<script>放在<body>最末尾，保证先有页面再有脚本。
查看调试信息的方法：在浏览器按
F12打开开发者工具，切到"Console（控制台）"标签，运行console.log("内容")可以打印调试信息。
3. 变量与常量
变量是"装数据的箱子"，JS 里用三个关键字声明。
3.1 var（旧语法，了解即可）
js
var name = "wcy";var 是老写法，存在作用域混乱的问题，新代码基本不用。
3.2 let（声明变量，推荐）
js
let age = 18;
age = 19; // 变量的值可以改- 用
let声明的变量可以重新赋值； - 同一个变量不能重复声明 （
let x = 1; let x = 2;会报错）。
3.3 const（声明常量，推荐）
js
const pi = 3.14;
pi = 3.1415; // 报错！常量不能重新赋值const声明的常量必须赋初值 ，且不能重新赋值；- 优先使用
const，确实需要改变量再改用let。
3.4 命名规则
js
let userName = "wcy"; // 驼峰命名法（推荐）
let user_name = "wcy"; // 下划线命名
let userName2 = "wcy2"; // 可以带数字（不能开头）- 只能由字母、数字、下划线
_、美元符$组成； - 不能以数字开头；
- 不能使用保留字 （如
if、for、let等）； - 区分大小写：
Name和name是两个变量。
4. 数据类型
JS 的变量可以装不同类型的数据，常见的有 6 种。
4.1 数字 number
js
let a = 100; // 整数
let b = 3.14; // 小数
let c = -5; // 负数4.2 字符串 string
用单引号、双引号或反引号包裹的文本：
js
let name = "wcy"; // 双引号
let greeting = '你好'; // 单引号
let msg = `我叫 ${name}`; // 反引号（模板字符串，可以嵌入变量）模板字符串里用 ${变量名} 直接拼变量，非常方便，推荐使用。
4.3 布尔值 boolean（真/假）
只有两个值：true 和 false，用于逻辑判断。
js
let isLogin = true;
let isAdmin = false;4.4 null 和 undefined（空值）
js
let x = null; // 明确表示"什么都没有"（人为设置的）
let y; // 声明了但没赋值 → undefinednull：程序员主动赋予的"空"；undefined：变量未初始化或访问不存在的属性。
4.5 对象 object（后面专讲）
js
let person = { name: "wcy", age: 18 };4.6 查看类型 typeof
js
console.log(typeof 100); // "number"
console.log(typeof "abc"); // "string"
console.log(typeof true); // "boolean"
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"（历史遗留的 bug，记住即可）5. 运算符
5.1 算术运算符
js
let a = 10;
let b = 3;
a + b; // 加：13
a - b; // 减：7
a * b; // 乘：30
a / b; // 除：3.333...
a % b; // 取余：1自增自减：
js
let n = 5;
n++; // 先返回 5 再变成 6（n++）
++n; // 先变成 6 再返回 6（++n）5.2 赋值运算符
js
let x = 10;
x += 5; // x = x + 5 → 15
x -= 3; // x = x - 3 → 12
x *= 2; // x = x * 2 → 24
x /= 4; // x = x / 4 → 65.3 比较运算符（结果都是布尔值）
js
5 == "5"; // true（只比较值，不比较类型）
5 === "5"; // false（值和类型都要一样）
5 != "5"; // false
5 !== "5"; // true
10 > 5; // true
10 >= 10; // true重要：工作中推荐一律用
===和!==（严格比较），避免==带来的类型转换陷阱。
5.4 逻辑运算符
js
true && false; // 与（and）：两边都真才是真 → false
true || false; // 或（or）：一边为真就是真 → true
!true; // 非（not）：取反 → false实际用途：
js
let age = 20;
let hasTicket = true;
if (age >= 18 && hasTicket) {
console.log("可以入场");
}5.5 字符串拼接
js
let name = "wcy";
console.log("你好，" + name + "！"); // 加号拼接
console.log(`你好，${name}！`); // 模板字符串拼接（推荐）6. 字符串操作
6.1 常用方法
| 方法 | 作用 | 示例 |
|---|---|---|
.length |
字符串长度 | "abc".length → 3 |
.toUpperCase() |
转大写 | |
.toLowerCase() |
转小写 | |
.trim() |
去掉首尾空格 | |
.split(分隔) |
按分隔符拆成数组 | "a,b".split(",") → ["a","b"] |
.includes(内容) |
是否包含某段文字 | 返回布尔值 |
.replace(旧, 新) |
替换 | |
.indexOf(内容) |
找位置（找不到是 -1） |
js
let str = " Hello World ";
str.trim(); // "Hello World"
str.toUpperCase(); // "HELLO WORLD"
str.includes("World"); // true
str.split(" "); // ["Hello", "World"]6.2 提取字符
js
let s = "hello";
s[0]; // "h"
s.charAt(0); // "h"
s.length; // 57. 流程控制
7.1 if / else if / else
最常见的判断结构：
js
let score = 85;
let level;
if (score >= 90) {
level = "优秀";
} else if (score >= 60) {
level = "及格";
} else {
level = "不及格";
}
console.log(level); // "及格"7.2 三元运算符（简写 if/else）
适合只有两种结果的简单判断：
js
let age = 20;
let result = age >= 18 ? "成年" : "未成年";
// 判断 ? 真值 : 假值7.3 switch（多分支判断）
适合精确匹配多个固定值：
js
let day = 3;
let dayName;
switch (day) {
case 1:
dayName = "星期一";
break;
case 2:
dayName = "星期二";
break;
case 3:
dayName = "星期三";
break;
default:
dayName = "未知";
}
console.log(dayName); // "星期三"注意：每个
case结尾的break;必须写，否则会"穿透"继续执行下面的 case。
8. 循环
8.1 for 循环（最常用）
js
for (let i = 1; i <= 5; i++) {
console.log(i); // 依次打印 1 2 3 4 5
}三个部分：
let i = 1：初始值；i <= 5：循环条件（满足才继续）；i++：每次循环后更新。
8.2 while 循环
适合"不知道要循环多少次"的情况：
js
let n = 1;
while (n <= 3) {
console.log(n);
n++;
}注意：别忘更新条件 （如 n++），否则会陷入死循环卡死浏览器。
8.3 do...while
先执行一次，再判断条件：
js
let i = 10;
do {
console.log(i); // 会执行一次
i++;
} while (i < 5); // 条件 false，但仍执行了上面的代码8.4 break 与 continue
js
for (let i = 1; i <= 5; i++) {
if (i === 3) {
break; // 立即结束整个循环（只会打印 1 2）
}
console.log(i);
}
js
for (let i = 1; i <= 5; i++) {
if (i === 3) {
continue; // 跳过本次，进入下一次（打印 1 2 4 5）
}
console.log(i);
}8.5 遍历数组
js
let fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
console.log(fruits[i]);
}
// for...of 更简洁（推荐）
for (let f of fruits) {
console.log(f);
}9. 函数
函数是"一段可重复使用的代码块"，类似数学里的公式。
9.1 定义与调用
js
// 定义函数
function greet() {
console.log("你好，欢迎！");
}
// 调用函数
greet();
greet();9.2 带参数
js
function greet(name) {
console.log(`你好，${name}！`);
}
greet("wcy"); // 你好，wcy！
greet("小明"); // 你好，小明！9.3 返回值
js
function add(a, b) {
return a + b; // return 把结果返回给调用者
}
let sum = add(3, 4);
console.log(sum); // 7注意：
return后面的代码不会执行；- 没有
return的函数默认返回undefined。
9.4 函数表达式与箭头函数
js
// 函数表达式：把函数赋给变量
const greet = function (name) {
console.log(`你好，${name}`);
};
// 箭头函数（现代写法，推荐）
const add = (a, b) => a + b;
// 只有一个参数时可省略括号，只有一条语句时可省略大括号和 return
const double = x => x * 2;
js
console.log(add(2, 3)); // 5
console.log(double(4)); // 89.5 作用域
js
let global = "我是全局变量"; // 全局作用域：到处都能访问
function test() {
let local = "我是局部变量"; // 函数内声明：只能在这个函数里用
console.log(global); // ✓ 可以访问全局的
}
test();
console.log(local); // 报错！外面访问不到函数内的局部变量基本原则：函数内能看全局，全局看不到函数内。优先把变量声明在需要的尽量小的作用域。
10. 数组
数组是"有序的一串数据"，用方括号 [] 定义。
10.1 创建与访问
js
let fruits = ["苹果", "香蕉", "橙子"];
fruits[0]; // "苹果"（下标从 0 开始）
fruits[1]; // "香蕉"
fruits.length; // 3（长度）10.2 增删元素
| 方法 | 作用 | 示例 |
|---|---|---|
push(元素) |
尾部添加 | arr.push("新") |
pop() |
删除尾部 | |
unshift(元素) |
头部添加 | |
shift() |
删除头部 | |
indexOf(元素) |
查找位置 | |
splice(位置, 个数) |
删除/替换 |
js
let nums = [1, 2, 3];
nums.push(4); // [1, 2, 3, 4]
nums.pop(); // [1, 2, 3]
nums.unshift(0); // [0, 1, 2, 3]
nums.shift(); // [1, 2, 3]10.3 遍历与处理
js
let scores = [85, 92, 78];
// forEach：遍历每一项
scores.forEach(function (s) {
console.log(s);
});
// map：把每一项处理后生成新数组
let doubled = scores.map(s => s * 2); // [170, 184, 156]
// filter：按条件筛选出新数组
let pass = scores.filter(s => s >= 80); // [85, 92]
// includes：判断是否包含
scores.includes(92); // true11. 对象
对象是"一组键值对的集合"，用大括号 {} 定义，用来描述一个事物的多种属性。
11.1 创建与访问
js
let person = {
name: "wcy",
age: 18,
city: "杭州"
};
// 访问属性（两种方式）
person.name; // "wcy"（点语法，最常用）
person["city"]; // "杭州"（方括号语法）
person.age = 19; // 修改属性11.2 对象的方法
属性值也可以是函数，这样的属性叫"方法"：
js
let person = {
name: "wcy",
greet: function () {
console.log(`你好，我是${this.name}`);
}
};
person.greet(); // 你好，我是wcy对象方法内部用
this指代"当前这个对象"。
11.3 遍历对象
js
let person = { name: "wcy", age: 18 };
for (let key in person) {
console.log(key, person[key]); // 打印每个键和值
}11.4 数组里放对象（非常常见）
js
let students = [
{ name: "张三", score: 90 },
{ name: "李四", score: 75 }
];
students[0].name; // "张三"
students[1].score; // 7512. DOM 操作
DOM（Document Object Model，文档对象模型）是 JS 操作网页内容的"接口"。简单理解：页面上的每个标签都是一个"对象"，JS 可以找到它、改它。
12.1 获取元素
js
// 通过 id 获取（最常用）
let demo = document.getElementById("demo");
// 通过 CSS 选择器获取（更灵活，推荐）
let demo2 = document.querySelector("#demo"); // id
let box = document.querySelector(".box"); // class
let first = document.querySelectorAll("p"); // 所有 <p>，返回类数组集合12.2 修改内容
js
// innerHTML：可以写 HTML 标签
document.getElementById("demo").innerHTML = "<b>加粗的新内容</b>";
// textContent：只是纯文本
document.getElementById("demo").textContent = "纯文本内容";注意：内容来自用户输入时优先用
textContent，innerHTML输入 HTML 可能引发安全问题。
12.3 修改样式
js
let box = document.getElementById("demo");
box.style.color = "red";
box.style.fontSize = "20px"; // CSS 属性用驼峰命名
box.style.display = "none";12.4 修改属性
js
let link = document.querySelector("a");
link.href = "https://blog.csdn.net/wangchunyu114";12.5 创建与删除元素
js
// 创建
let li = document.createElement("li");
li.textContent = "新项目";
document.getElementById("list").appendChild(li); // 挂到列表里
// 删除
li.remove();13. 事件
事件就是"用户操作触发的信号"：点击、悬停、按键、提交表单......JS 可以监听这些事件并做出反应。
13.1 常用事件
| 事件 | 触发时机 |
|---|---|
click |
鼠标点击 |
mouseover / mouseout |
鼠标移入 / 移出 |
keydown |
按下键盘键 |
submit |
提交表单 |
change |
select / input 值改变 |
load |
页面加载完成 |
13.2 绑定事件：addEventListener（推荐）
js
let btn = document.getElementById("btn");
btn.addEventListener("click", function () {
alert("按钮被点击了");
});优点：可以给同一元素绑定多个事件处理函数，且不会互相覆盖。
13.3 箭头函数写法
js
btn.addEventListener("click", () => {
document.getElementById("msg").textContent = "点击成功！";
});13.4 完整示例：点击计数
html
<button id="btn">点我</button>
<p id="count">0 次</p>
<script>
let num = 0;
let btn = document.getElementById("btn");
let count = document.getElementById("count");
btn.addEventListener("click", function () {
num++;
count.textContent = num + " 次";
});
</script>每点一次按钮，计数文字加一。这就是一个最基础的交互功能。
14. 定时器
让代码延时执行 或反复执行。
14.1 setTimeout（延时执行一次）
js
setTimeout(function () {
console.log("3 秒后打印");
}, 3000); // 单位是毫秒，3000 = 3 秒14.2 setInterval（每隔一段反复执行）
js
let timer = setInterval(function () {
console.log("每 1 秒执行一次");
}, 1000);
// 需要停止时：
clearInterval(timer);14.3 示例：每秒更新的时钟
js
let clock = document.getElementById("clock");
setInterval(function () {
let now = new Date();
clock.textContent = now.toLocaleTimeString();
}, 1000);new Date() 得到当前时间，toLocaleTimeString() 转成可读的时间字符串。
15. 本地存储
浏览器可以在本地"记住"数据，即使关掉页面再打开，数据还在。最常用的是 localStorage。
15.1 基本用法
js
// 保存
localStorage.setItem("name", "wcy");
// 读取
let name = localStorage.getItem("name"); // "wcy"
// 删除
localStorage.removeItem("name");
// 清空全部
localStorage.clear();15.2 存储对象需转 JSON
localStorage 只能存字符串，存对象/数组需要转换：
js
// 存：对象 → JSON 字符串
let user = { name: "wcy", age: 18 };
localStorage.setItem("user", JSON.stringify(user));
// 取：JSON 字符串 → 对象
let data = JSON.parse(localStorage.getItem("user"));
console.log(data.name); // "wcy"JSON.stringify()：把数据转成 JSON 字符串；JSON.parse()：把 JSON 字符串解析回数据。
15.3 示例：记住输入框内容
js
let input = document.getElementById("input");
// 页面打开时恢复上次输入
input.value = localStorage.getItem("draft") || "";
// 输入时自动保存
input.addEventListener("input", function () {
localStorage.setItem("draft", input.value);
});提示：本地存储每个网站独立，约 5MB 上限，不要用来存大文件。敏感信息不要存这里。
16. 综合实战
做一个"待办清单"小应用，综合运用本章知识：
html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="utf-8">
<title>待办清单</title>
</head>
<body>
<h1>我的待办清单</h1>
<input type="text" id="task" placeholder="输入新任务">
<button id="addBtn">添加</button>
<ul id="list"></ul>
<script>
// 1. 数据：从本地存储读取（第一次是空数组）
let tasks = JSON.parse(localStorage.getItem("tasks") || "[]");
// 2. 渲染列表
function render() {
let list = document.getElementById("list");
list.innerHTML = "";
tasks.forEach(function (task, index) {
let li = document.createElement("li");
li.textContent = task + " ";
let btn = document.createElement("button");
btn.textContent = "删除";
btn.addEventListener("click", function () {
tasks.splice(index, 1); // 删除该任务
localStorage.setItem("tasks", JSON.stringify(tasks));
render(); // 重新渲染
});
li.appendChild(btn);
list.appendChild(li);
});
}
// 3. 添加任务
document.getElementById("addBtn").addEventListener("click", function () {
let input = document.getElementById("task");
if (!input.value.trim()) {
alert("请输入内容");
return;
}
tasks.push(input.value.trim());
localStorage.setItem("tasks", JSON.stringify(tasks));
input.value = "";
render();
});
// 4. 首次渲染
render();
</script>
</body>
</html>将这个文件保存为 todo.html 用浏览器打开，就能体验：添加任务、删除任务、刷新页面数据不丢失。
17. 小结与练习
本章总结
| 分类 | 核心知识 |
|---|---|
| 引入方式 | <script> 内部脚本、<script src> 外部脚本 |
| 变量 | let（可变）、const（不可变）、var（废弃） |
| 数据类型 | number、string、boolean、null、undefined、object |
| 运算符 | 算术、赋值、比较（推荐 ===）、逻辑、拼接 |
| 流程控制 | if/else、三元、switch |
| 循环 | for、while、do...while、break、continue |
| 函数 | 声明、参数、返回值、箭头函数、作用域 |
| 数组 | push/pop、forEach、map、filter |
| 对象 | 字面量、属性、方法、this |
| DOM | getElementById、querySelector、innerHTML、style |
| 事件 | addEventListener 与 click 等 |
| 定时器 | setTimeout、setInterval |
| 存储 | localStorage + JSON.stringify/parse |
课后练习
- 写一段代码，用
for循环计算 1 到 100 的和，并打印结果。 - 定义一个对象数组（至少 3 个学生），遍历打印每个学生的姓名和分数，并用
filter筛出及格（≥60）的。 - 做一个按钮，每点一次就把页面上一个数字加 1，并改变它的颜色（单数红、双数蓝）。
- 做一个简单的表单：输入邮箱，点提交时校验是否是邮箱格式（包含
@和.），不对就弹窗提示。 - 做一个倒计时：显示"距离目标还有 N 秒"，每秒减一，到 0 停止并弹出"时间到"。
- 用 localStorage 实现一个"投票点赞"功能：刷新页面后点赞数不清零。
常见问题
问：var、let、const 到底用哪个？
答：优先 const ，需要重新赋值才用 let，var 不要用（老代码里见到能看懂就行）。
问：JS 写在前面为什么拿不到元素？
答：脚本放在 <body> 之前时，页面元素还没生成。把 <script> 放到 </body> 前面，或用 window.onload / DOMContentLoaded 等页面加载完再执行。
问：== 和 === 有什么区别？
答：=== 同时比较值和类型 ，== 只比较值（会做隐式转换，容易出 bug）。一律用 ===。
问：为什么 localStorage.getItem 直接取对象拿到的是字符串？
答：因为 localStorage 只能存字符串。存取数组/对象必须用 JSON.stringify / JSON.parse 转换。
至此，你已经掌握了前端三大支柱：HTML（结构）、CSS（样式）、JavaScript（行为）。学完本教程，你已经能把一个静态页面做成"有交互、有数据记忆"的网页。
下一步可以学习 DOM 实战（做更复杂的小项目），或者了解 ES6+ 新特性与大前端框架（React / Vue）。
如果觉得教程有帮助，欢迎关注我的博客