JavaScript 基本语法

JavaScript 是网页的”行为语言”，让网页动起来、响应用户操作。以下是核心语法，从零开始：

---

📝 1. 语句和分号

JavaScript 程序由一系列语句组成，每条语句以分号 ; 结尾（虽然不是强制，但强烈建议加上）。

javascript

// 声明变量
let name = "小明";

// 执行操作
console.log("你好，" + name);

// 多个语句
let x = 5;
let y = 10;
let z = x + y;

---

🏷️ 2. 注释

注释不会被执行，用来解释代码。

javascript

// 这是单行注释

/*
  这是多行注释
  可以写很多行
  用来详细说明
*/

/**
 * 这也是多行注释
 * 通常用来描述函数
 */

---

📦 3. 变量

变量用来存储数据。

声明变量的三种方式

关键字	特点	使用场景
let	可以修改，块级作用域	现代写法，大多数情况用这个
const	不能修改（常量），块级作用域	值不会变的变量（如圆周率、配置）
var	可以修改，函数作用域	老式写法，现在尽量少用

javascript

// let - 可以重新赋值
let age = 18;
age = 19;  // 没问题

// const - 不能重新赋值
const PI = 3.14159;
// PI = 3.14;  // 报错！不能修改

// var - 老式写法（了解即可）
var oldWay = "不要用我";

变量命名规则

• 只能包含字母、数字、下划线 _、美元符号 $
• 不能以数字开头
• 区分大小写（myName 和 MyName 是两个不同的变量）
• 使用驼峰命名法：firstName、userAge、isLoggedIn

---

🔢 4. 数据类型

JavaScript 有几种基本数据类型：

javascript

// 数字（整数和浮点数都用 Number）
let count = 10;
let price = 19.99;
let temperature = -5;

// 字符串（文本）
let name = "张三";
let message = '你好';
let template = `我的名字是${name}`;  // 模板字符串，可以嵌入变量

// 布尔值（true/false）
let isLoggedIn = true;
let isDeleted = false;

// undefined（未定义）
let futureValue;  // 没有赋值，值就是 undefined

// null（空值，主动设置为空）
let empty = null;

// 对象（复杂数据）
let person = {
    name: "李四",
    age: 25,
    isStudent: false
};

// 数组（列表）
let colors = ["红色", "蓝色", "绿色"];
let mixed = [1, "文字", true, null];

---

➕ 5. 运算符

算术运算符

javascript

let a = 10;
let b = 3;

console.log(a + b);   // 13 加法
console.log(a - b);   // 7  减法
console.log(a * b);   // 30 乘法
console.log(a / b);   // 3.333... 除法
console.log(a % b);   // 1  取余（10除以3余1）
console.log(a ** b);  // 1000 幂运算（10的3次方）

// 自增自减
let count = 5;
count++;  // count 变成 6（先使用后加1）
++count;  // count 变成 7（先加1后使用）
count--;  // count 变成 6

赋值运算符

javascript

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 → 6

比较运算符

javascript

console.log(5 == "5");    // true  相等（只比较值，不比较类型）
console.log(5 === "5");   // false 严格相等（比较值和类型）✅ 推荐用这个
console.log(5 != "5");    // false 不等
console.log(5 !== "5");   // true  严格不等

console.log(5 > 3);       // true
console.log(5 >= 5);      // true
console.log(3 < 5);       // true
console.log(3 <= 5);      // true

逻辑运算符

javascript

let a = true;
let b = false;

console.log(a && b);  // false  AND（与）：两边都 true 才 true
console.log(a || b);  // true   OR（或）：一边 true 就 true
console.log(!a);      // false  NOT（非）：取反

// 实际应用
let age = 20;
let hasTicket = true;

// 可以进场吗？必须年满18岁且有票
let canEnter = age >= 18 && hasTicket;  // true

// 可以打折吗？要么是学生，要么是老人
let isStudent = false;
let isSenior = true;
let canDiscount = isStudent || isSenior;  // true

---

🔀 6. 条件语句

if…else

javascript

let age = 18;

if (age >= 18) {
    console.log("你是成年人");
} else {
    console.log("你是未成年人");
}

// 多条件
let score = 85;

if (score >= 90) {
    console.log("优秀");
} else if (score >= 80) {
    console.log("良好");
} else if (score >= 60) {
    console.log("及格");
} else {
    console.log("不及格");
}

switch 语句

javascript

let day = "周一";

switch (day) {
    case "周一":
        console.log("开始工作");
        break;
    case "周五":
        console.log("马上周末");
        break;
    case "周六":
    case "周日":
        console.log("周末休息");
        break;
    default:
        console.log("普通工作日");
}

---

🔁 7. 循环

for 循环（知道循环次数时用）

javascript

// 打印 1 到 5
for (let i = 1; i <= 5; i++) {
    console.log(i);
}
// 输出：1 2 3 4 5

// 遍历数组
let fruits = ["苹果", "香蕉", "橙子"];
for (let i = 0; i < fruits.length; i++) {
    console.log(fruits[i]);
}

while 循环（不知道循环次数时用）

javascript

let count = 0;

while (count < 5) {
    console.log("当前计数：" + count);
    count++;
}

// do...while（至少执行一次）
let i = 0;
do {
    console.log("至少执行一次：" + i);
    i++;
} while (i < 3);

for…of（遍历数组）

javascript

let colors = ["红", "绿", "蓝"];

for (let color of colors) {
    console.log(color);
}
// 输出：红 绿 蓝

---

🎯 8. 函数

函数是封装一段代码的”小工具”，可以重复使用。

javascript

// 定义函数
function sayHello() {
    console.log("你好！");
}

// 调用函数
sayHello();  // 输出：你好！

// 带参数的函数
function greet(name) {
    console.log("你好，" + name + "！");
}

greet("张三");  // 输出：你好，张三！
greet("李四");  // 输出：你好，李四！

// 带返回值的函数
function add(a, b) {
    return a + b;  // 返回结果
}

let result = add(5, 3);
console.log(result);  // 8

// 箭头函数（ES6新写法）
const multiply = (a, b) => {
    return a * b;
};

// 如果只有一行，可以更简洁
const square = x => x * x;

console.log(multiply(4, 5));  // 20
console.log(square(6));       // 36

---

🧩 9. 对象和数组

对象（键值对集合）

javascript

// 创建对象
let user = {
    name: "王五",
    age: 28,
    email: "wang@example.com",
    isAdmin: false,
    
    // 对象的方法
    sayHi: function() {
        console.log("你好，我是" + this.name);
    }
};

// 访问属性
console.log(user.name);      // 王五（点号语法）
console.log(user["age"]);    // 28（方括号语法）

// 修改属性
user.age = 29;
user["email"] = "new@example.com";

// 调用方法
user.sayHi();  // 输出：你好，我是王五

数组（有序列表）

javascript

// 创建数组
let numbers = [1, 2, 3, 4, 5];
let mixed = ["文本", 42, true, null];

// 访问元素（索引从0开始）
console.log(numbers[0]);  // 1
console.log(numbers[2]);  // 3

// 修改元素
numbers[1] = 99;
console.log(numbers);  // [1, 99, 3, 4, 5]

// 常用方法
numbers.push(6);        // 末尾添加 → [1, 99, 3, 4, 5, 6]
numbers.pop();          // 删除末尾 → [1, 99, 3, 4, 5]
numbers.unshift(0);     // 开头添加 → [0, 1, 99, 3, 4, 5]
numbers.shift();        // 删除开头 → [1, 99, 3, 4, 5]

console.log(numbers.length);  // 5（数组长度）

---

🖥️ 10. 与网页交互

弹窗

javascript

alert("这是一条警告消息");        // 普通提示
let name = prompt("请输入名字");   // 输入框
let confirm = confirm("确定吗？"); // 确认框（返回 true/false）

操作网页元素（DOM操作）

javascript

// 获取元素
let title = document.getElementById("title");
let buttons = document.getElementsByClassName("btn");
let firstBtn = document.querySelector(".btn");  // 第一个匹配的元素
let allBtns = document.querySelectorAll(".btn"); // 所有匹配的元素

// 修改内容
title.textContent = "新标题";
title.innerHTML = "<span>带HTML的标题</span>";

// 修改样式
title.style.color = "red";
title.style.fontSize = "20px";

// 添加/删除类名
title.classList.add("active");
title.classList.remove("hidden");
title.classList.toggle("visible");  // 有就删，没有就加

事件监听

javascript

// 点击事件
let button = document.getElementById("myButton");
button.addEventListener("click", function() {
    alert("按钮被点击了！");
});

// 鼠标移入/移出
let box = document.querySelector(".box");
box.addEventListener("mouseenter", function() {
    this.style.backgroundColor = "yellow";
});
box.addEventListener("mouseleave", function() {
    this.style.backgroundColor = "white";
});

// 表单提交
let form = document.querySelector("form");
form.addEventListener("submit", function(event) {
    event.preventDefault();  // 阻止表单默认提交
    console.log("表单被提交了，但我阻止了刷新");
});

---

🎯 完整示例：一个简单的计数器

html

<button id="decrease">-</button>
<span id="count">0</span>
<button id="increase">+</button>

<script>
    // 获取元素
    let countDisplay = document.getElementById("count");
    let decreaseBtn = document.getElementById("decrease");
    let increaseBtn = document.getElementById("increase");
    
    let count = 0;
    
    // 增加
    increaseBtn.addEventListener("click", function() {
        count++;
        countDisplay.textContent = count;
        
        // 根据数值改变颜色
        if (count > 0) {
            countDisplay.style.color = "green";
        } else if (count < 0) {
            countDisplay.style.color = "red";
        } else {
            countDisplay.style.color = "black";
        }
    });
    
    // 减少
    decreaseBtn.addEventListener("click", function() {
        count--;
        countDisplay.textContent = count;
        
        if (count > 0) {
            countDisplay.style.color = "green";
        } else if (count < 0) {
            countDisplay.style.color = "red";
        } else {
            countDisplay.style.color = "black";
        }
    });
</script>

---

📚 学习建议

1. 多动手写：只看不写永远学不会
2. 从简单开始：先学会变量、函数、条件判断
3. 善用 console.log()：随时打印变量，看代码执行到哪里
4. 遇到错误不要慌：看控制台的错误提示，慢慢学会调试
5. 循序渐进：先学基础语法，再学 DOM 操作，最后学 Ajax、框架