JavaScript 零基础入门教程

全栈开发入门 管理员 2026年06月23日 168 次阅读 1525 字 约 6 分钟
视频链接：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);
}

学习路径

第1-2天          第3-4天            第5天+
变量+函数+流程 →  DOM+事件          →  对象+综合小项目
(语法基础)        (操作页面)           (TodoList)

阶段目标对应部分检验标准
1. 语法let/const、类型、函数、箭头函数A、B20道基础题全对
2. 流程控制if/switch/for/whileC写出FizzBuzz
3. DOM+事件querySelector、addEventListenerD做出点击变色/计数器
4. 对象与数组对象字面量、数组方法E用map/filter处理数据
5. 综合实战原生JS TodoList全部独立完成可增删改查的Todo

哔哩哔哩视频教程推荐

本文是B站「零基础AI全栈开发系列」的配套图文笔记：
搜索关键词备选：JavaScript 零基础入门 教程

学习建议

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