【前端入门】后端开发的JavaScript入门指南：你应该了解的核心知识点-CSDN博客

本文链接：https://blog.csdn.net/tang_is_learning/article/details/147538580

作者：唐叔在学习
专栏：唐叔学前端
更新时间：2025-04-26
关键词：JavaScript入门、DOM操作、异步编程、前端基础

各位小伙伴们好呀，我是你们的老朋友唐叔！今天咱们不聊人生理想，来点实在的干货——前端JavaScript从入门到放弃…啊不是，从入门到上手的保姆级教程！（手动狗头）

一、为什么说JS是前端的灵魂？

先给萌新们科普下，JavaScript（简称JS）是Web开发的三大基石之一（HTML+CSS+JS三件套）。它能让你写的网页从"静态PPT"变成"动态APP"！比如：

点击按钮弹出对话框
无刷新加载新内容
表单实时验证
酷炫的动画效果

接下来就跟着唐叔的节奏，咱们一步步拆解JS的核心知识点！

二、JS基础语法入门

1. 变量声明

// 老派写法（唐叔年轻时用的）
var name = "唐叔";

// 新时代写法（推荐）
let age = 18; // 可变变量
const PI = 3.14; // 不可变常量

2. 数据类型

// 基本类型
let str = "字符串";
let num = 123;
let bool = true;
let nothing = null;
let undef = undefined;

// 引用类型
let obj = { name: "唐叔", age: 18 };
let arr = [1, 2, 3];

3. 运算符与流程控制

// 算术运算
let sum = 1 + 1; // 2

// 比较运算
1 == '1' // true (值相等)
1 === '1' // false (类型不同)

// 条件判断
if (age > 18) {
    console.log("成年人");
} else {
    console.log("小盆友");
}

// 循环语句
for (let i = 0; i < 5; i++) {
    console.log("第"+i+"次循环");
}

三、DOM操作 - 让网页动起来

DOM（Document Object Model）文档对象模型，是浏览器将HTML文档解析成的树状结构。通过JavaScript操作DOM，我们可以动态地：

改变页面内容
修改元素样式
响应用户交互
动态添加/删除元素

1. 获取DOM元素

获取DOM元素是操作的第一步，常用方法有：

// 通过ID获取
let header = document.getElementById('header');

// 通过类名获取（返回数组）
let buttons = document.getElementsByClassName('btn');

// 新时代选择器（推荐）
let box = document.querySelector('.container');
let allImgs = document.querySelectorAll('img');

选择器性能建议：

ID选择器最快
复杂查询优先用querySelector
批量操作使用querySelectorAll

2. 修改DOM内容

获取到DOM元素后，像普通变量操作一样进行修改DOM内容。

// 修改文本
box.textContent = "新内容";

// 修改HTML
box.innerHTML = "<strong>加粗文本</strong>";

// 修改样式
box.style.color = "red";
box.style.backgroundColor = "#eee";

3. 动态增删DOM

// 创建新元素
let newDiv = document.createElement('div');

// 添加到页面
document.body.appendChild(newDiv);

// 删除元素
let oldEl = document.querySelector('#old');
oldEl.parentNode.removeChild(oldEl);

四、函数 - JS的瑞士军刀

和其他编程语言一样，JavaScript也有函数。

1. 函数定义与调用

// 传统函数
function sayHello(name) {
    return "你好, " + name;
}

// 箭头函数（ES6新特性）
const add = (a, b) => a + b;

调用方式：

sayHello("唐叔");  // 直接调用
obj.method();     // 作为方法调用
setTimeout(func, 1000); // 作为回调调用

2. 函数参数

// 默认参数
function greet(name = "访客") {
    console.log(`欢迎${name}`);
}

// 剩余参数
function sum(...numbers) {
    return numbers.reduce((a, b) => a + b);
}

// 参数解构
function showUser({name, age}) {
    console.log(`${name}, ${age}岁`);
}

3. 作用域与闭包

理解作用域是JS进阶的关键：

// 块级作用域（let/const）
if (true) {
    let x = 10;
    console.log(x); // 10
}
console.log(x); // 报错

// 闭包示例
function createCounter() {
    let count = 0;
    return function() {
        return ++count;
    };
}
const counter = createCounter();
counter(); // 1
counter(); // 2

五、事件监听 - 让网页有交互

当用户与网页交互时（点击、滚动、输入等），浏览器会生成对应的事件。JS通过事件监听来捕获并响应这些事件，这是实现交互的基础。

事件传播的三个阶段：

捕获阶段（从window向下传播）
目标阶段（到达事件目标）
冒泡阶段（从目标向上冒泡）

1. 常用事件类型

// 点击事件
button.addEventListener('click', () => {
    alert("按钮被点了！");
});

// 表单事件
input.addEventListener('change', (e) => {
    console.log("输入内容：", e.target.value);
});

// 鼠标事件
div.addEventListener('mouseover', () => {
    console.log("鼠标移入");
});

2. 事件对象

document.addEventListener('click', (event) => {
    console.log("点击位置：", event.clientX, event.clientY);
    event.preventDefault(); // 阻止默认行为
});

3. 常用事件类型大全

事件类型	描述	典型应用场景
click	鼠标点击	按钮操作
dblclick	双击	编辑确认
mouseover	鼠标移入	悬浮提示
mouseout	鼠标移出	隐藏悬浮内容
keydown	键盘按下	快捷键操作
input	输入框值变化	实时搜索
change	表单值变化	表单验证
submit	表单提交	数据提交前验证
scroll	页面滚动	无限滚动加载
load	资源加载完成	初始化操作

六、JSON - 前后端沟通的桥梁

1. JSON基本使用

// JS对象转JSON字符串
let user = { name: "唐叔", age: 18 };
let jsonStr = JSON.stringify(user);

// JSON字符串转JS对象
let obj = JSON.parse('{"name":"唐叔","age":18}');

注意事项：

JSON字符串必须使用双引号
不支持函数、undefined等特殊类型
可以添加第二个参数实现过滤和格式化

2. 配合AJAX使用

fetch('/api/user')
    .then(response => response.json())
    .then(data => {
        console.log("获取的用户数据：", data);
    });

七、异步编程 - 避免界面卡死

JavaScript是单线程语言，如果所有操作都同步执行，遇到网络请求等耗时操作时，页面就会"假死"。异步机制让耗时操作在后台执行，完成后通过回调通知主线程。

1. 回调函数（传统方式）

setTimeout(() => {
    console.log("1秒后执行");
}, 1000);

2. Promise（推荐）

new Promise((resolve, reject) => {
    // 异步操作
    if (success) {
        resolve("成功结果");
    } else {
        reject("失败原因");
    }
}).then(result => {
    console.log(result);
}).catch(error => {
    console.error(error);
});

3. async/await（更优雅的写法）

async function fetchData() {
    try {
        let response = await fetch('/api/data');
        let data = await response.json();
        console.log(data);
    } catch (error) {
        console.error("请求出错：", error);
    }
}

4. 三种异步方式对比

方式	优点	缺点
回调函数	兼容性好	容易产生回调地狱
Promise	链式调用，避免嵌套	仍需使用.then()
async/await	代码最简洁，类似同步写法	需要ES2017+环境支持