02 - JavaScript 零基础入门教程

全栈开发入门 管理员 2026年06月23日 151 次阅读 1610 字 约 6 分钟

视频教程：BV18M4m1C7tD

视频链接：BV18M4m1C7tD
发布日期：2024-05-15
视频时长：17:25
播放量：6.7万
所属合集：零基础AI全栈开发系列

视频概要

讲解JavaScript基础语法，面向零基础小白。覆盖变量声明、数据类型、函数、条件判断、循环、DOM操作、事件处理、对象与类等核心概念。这是从"静态页面"到"动态交互"的关键转折点。

知识点清单

A. 变量与数据类型

A1. 变量声明

关键字作用域可修改使用场景
var函数作用域可修改旧语法，存在变量提升，不推荐
let块级作用域可修改需要变化的变量，推荐使用
const块级作用域不可修改常量、不希望被修改的值，推荐使用
let name = "Hello";      // 可变变量
const PI = 3.14;          // 不可变常量
var old = "旧语法";       // 不推荐使用，存在变量提升问题

A2. 数据类型

类型示例说明
String"hello", 'world'字符串，用引号包裹
Number42, 3.14, -10数字（整数和浮点数不区分）
Booleantrue, false布尔值（真/假）
Array[1, 2, 3]数组，有序数据集合
Object{name: "张三"}对象，键值对集合
nullnull空值（主动赋值为空）
undefinedundefined未定义（变量声明但未赋值）
SymbolSymbol('id')唯一标识符（高级用法）
let str = "字符串";
let num = 42;
let bool = true;
let arr = [1, 2, 3];
let obj = { name: "张三", age: 18 };

A3. 类型检查

typeof "hello"     // "string"
typeof 42          // "number"
typeof true        // "boolean"
typeof [1,2,3]     // "object" (数组也是对象)
typeof null        // "object" (历史遗留bug)

B. 函数

// 函数声明
function greet(name) {
    return "Hello, " + name;
}

// 箭头函数（ES6推荐写法）
const add = (a, b) => a + b;

// 带默认参数
function power(base, exponent = 2) {
    return Math.pow(base, exponent);
}

// 匿名函数
const sayHi = function(name) {
    console.log("Hi, " + name);
};

// 调用
console.log(greet("World"));  // Hello, World
console.log(add(3, 5));       // 8
console.log(power(3));        // 9 (默认平方)
console.log(power(2, 3));     // 8 (2的3次方)

C. 条件判断

let score = 85;

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

// 三目运算符：条件 ? 真值 : 假值
let result = score >= 60 ? "及格" : "不及格";

// switch
switch (true) {
    case score >= 90: console.log("优秀"); break;
    case score >= 60: console.log("及格"); break;
    default: console.log("不及格");
}

D. 循环

// for循环
for (let i = 0; i < 5; i++) {
    console.log(i);  // 0, 1, 2, 3, 4
}

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

// forEach（更简洁的遍历方式）
fruits.forEach((item, index) => {
    console.log(index, item);
});

// for...of（遍历值）
for (let fruit of fruits) {
    console.log(fruit);
}

// while
let count = 0;
while (count < 5) {
    console.log(count++);
}

E. 逻辑运算

运算符名称规则示例
&&与(AND)两个都为true才为truetrue && false → false
\|\|或(OR)有一个true就为truetrue \|\| false → true
!非(NOT)取反!true → false
===严格相等值和类型都相同1 === "1" → false
!==严格不等值或类型不同1 !== "1" → true
与或逻辑是计算机底层基础（数字电路的与或非门），JS中的逻辑运算符与C/Java等语言完全一致。

F. DOM操作（重点）

方法作用示例
getElementById()通过ID获取元素document.getElementById("app")
querySelector()CSS选择器获取元素document.querySelector(".class")
querySelectorAll()获取所有匹配元素document.querySelectorAll("li")
innerHTML修改元素HTML内容el.innerHTML = "<b>新内容</b>"
textContent修改元素纯文本el.textContent = "纯文本"
style修改元素样式el.style.color = "red"
classList操作CSS类el.classList.add("active")
addEventListener()添加事件监听el.addEventListener("click", fn)
// 获取元素
let el = document.getElementById("app");
let btn = document.querySelector("button");

// 修改内容
el.innerHTML = "<h1>新标题</h1>";

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

// 事件监听
btn.addEventListener("click", function() {
    alert("被点击了！");
});

// 键盘事件
document.addEventListener("keydown", function(e) {
    console.log("按下了:", e.key);
});

// 鼠标事件
el.addEventListener("mouseenter", function() {
    el.style.background = "#f0f0f0";
});

G. 对象与类

// 对象字面量
let person = {
    name: "张三",
    age: 18,
    sayHello: function() {
        console.log("我是" + this.name);
    }
};
person.sayHello();        // 我是张三
console.log(person.name); // 张三
console.log(person["age"]); // 18（方括号访问）

// 类（面向对象）
class Animal {
    constructor(name) {
        this.name = name;
    }
    speak() {
        console.log(this.name + "发出声音");
    }
}

let cat = new Animal("猫");
cat.speak();  // 猫发出声音

// 继承
class Dog extends Animal {
    constructor(name) {
        super(name);
    }
    speak() {
        console.log(this.name + "汪汪叫");
    }
}

let dog = new Dog("旺财");
dog.speak();  // 旺财汪汪叫

JS的对象/类概念与其他语言（C结构体、Python字典、Java类）类似，都是把多个相关数据组织在一起。

H. 异步基础

// 回调函数
setTimeout(() => {
    console.log("2秒后执行");
}, 2000);

// Promise
const fetchData = new Promise((resolve, reject) => {
    setTimeout(() => resolve("数据获取成功"), 1000);
});
fetchData.then(data => console.log(data));

// async/await（推荐）
async function getData() {
    const result = await fetchData;
    console.log(result);
}

常见问题

问题解答
JS和其他语言有什么共同点？所有主流语言都以C语言为基础，数据类型和控制结构类似，只是语法规则不同
对象/类是什么？类似C语言的结构体，把多个相关数据和方法组织在一起
var和let的区别？let有块级作用域更安全，推荐使用let和const，避免使用var
可以先使用后声明吗？var可以（变量提升），let/const不行（暂时性死区）
报错怎么办？打开浏览器F12控制台，看红色错误信息，通常是拼写或语法错误
JS和Java有关系吗？没有直接关系，名字相似是历史原因（当年Java火，JS蹭热度）
==和===区别？==会自动类型转换，===严格比较（推荐用===）
什么是异步？代码不会等一个操作完成就继续执行后面的代码，回调/Promise/async-await是处理方式

前置知识检查

  • [x] HTML标签的基本用法
  • [x] CSS选择器和盒模型
  • [x] 能创建一个简单的HTML页面

学习建议

  • JavaScript是从「静态页面」到「动态交互」的桥梁，务必重视
  • 不需要死记所有语法，理解变量、函数、DOM操作三个核心即可
  • 多在浏览器控制台(F12)中练习，即时看到结果
  • 可以暂停视频反复练习，不需要跟上视频的节奏
返回首页