异常教程

JavaScript 教程（千字长文）

更新时间:

💡一则或许对你有用的小广告

欢迎加入小哈的星球 ，你将获得：专属的项目实战 / 1v1 提问 / Java 学习路线 / 学习打卡 / 每月赠书 / 社群讨论

  • 新项目:《从零手撸：仿小红书（微服务架构）》 正在持续爆肝中，基于 Spring Cloud Alibaba + Spring Boot 3.x + JDK 17...，点击查看项目介绍 ;
  • 《从零手撸：前后端分离博客项目（全栈开发）》 2 期已完结，演示链接： http://116.62.199.48/ ;

截止目前， 星球 内专栏累计输出 82w+ 字，讲解图 3441+ 张，还在持续爆肝中.. 后续还会上新更多项目，目标是将 Java 领域典型的项目都整一波，如秒杀系统, 在线商城, IM 即时通讯，权限管理，Spring Cloud Alibaba 微服务等等，已有 2900+ 小伙伴加入学习 ，欢迎点击围观

JavaScript 是现代 Web 开发的核心技术之一，它赋予网页动态交互能力，让静态内容“活”起来。无论是构建响应式用户界面、实现数据验证，还是开发复杂的单页应用，JavaScript 都是不可或缺的工具。本文以“JavaScript 教程”为线索，从基础语法到高级特性，逐步展开讲解，帮助编程初学者和中级开发者系统掌握这门语言的核心知识，并通过案例实践巩固理解。

JavaScript 基础语法入门

变量与数据类型

JavaScript 是一种动态类型语言，变量的类型由其值决定。通过 let 和 const 声明变量，区别在于 let 允许重新赋值，而 const 声明的变量一旦赋值便不可修改：

let count = 0; // 可变变量  
const PI = 3.1415; // 常量  

count = 1; // 合法  
// PI = 3.14; // 报错：Assignment to constant variable

JavaScript 的数据类型包括：

  • 原始类型：number、string、boolean、null、undefined、symbol（ES6 新增）
  • 引用类型：object、array、function

条件语句与循环

条件判断常用 if...else 或 switch：

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

循环结构有 for、while 和 do...while。例如遍历数组：

const numbers = [1, 2, 3];  
for (let i = 0; i < numbers.length; i++) {  
  console.log(numbers[i]); // 输出 1 2 3  
}

函数基础

函数是代码复用的核心。ES6 引入箭头函数（Arrow Function），语法更简洁：

// 传统函数  
function add(a, b) {  
  return a + b;  
}  

// 箭头函数  
const multiply = (a, b) => a * b;

函数参数可设置默认值：

function greet(name = "Guest") {  
  return `Hello, ${name}!`;  
}  
console.log(greet()); // 输出：Hello, Guest!

对象与面向对象编程

对象与数组

JavaScript 是基于对象的语言。对象由键值对组成，例如：

const person = {  
  name: "Alice",  
  age: 30,  
  sayHello() {  
    return `Hello, my name is ${this.name}`;  
  }  
};  
console.log(person.sayHello()); // 输出：Hello, my name is Alice

数组是对象的特殊形式，支持多种操作方法：

const fruits = ["apple", "banana", "orange"];  
fruits.push("grape"); // 添加元素  
fruits.pop(); // 移除最后一个元素  
console.log(fruits.length); // 输出：3

构造函数与原型链

JavaScript 的继承通过原型链实现。构造函数（Constructor）用于创建对象实例：

function Animal(name) {  
  this.name = name;  
}  
Animal.prototype.speak = function() {  
  return `I am ${this.name}`;  
};  

const cat = new Animal("Whiskers");  
console.log(cat.speak()); // 输出：I am Whiskers

原型链的比喻：
想象一个家族树，每个对象都有一个“父辈”（即原型对象），当访问属性或方法时，JavaScript 会从对象自身开始逐级向上查找，直到找到目标或到达原型链顶端的 null。

浏览器环境与DOM操作

DOM基础

DOM（文档对象模型）是浏览器解析 HTML 后生成的树形结构。通过 JavaScript 可以操作 DOM 元素：

// 选择元素  
const heading = document.getElementById("title");  
heading.textContent = "Welcome to JavaScript Tutorial";  

// 创建新元素  
const newParagraph = document.createElement("p");  
newParagraph.textContent = "This is a new paragraph.";  
document.body.appendChild(newParagraph);

事件处理

通过事件监听实现交互：

// 点击事件  
document.querySelector("button").addEventListener("click", function() {  
  alert("Button clicked!");  
});  

// 表单输入变化事件  
document.querySelector("input").addEventListener("input", function(e) {  
  console.log("Input value:", e.target.value);  
});

异步编程与高级主题

回调函数与Promise

JavaScript 是单线程语言，异步编程解决阻塞问题。传统回调模式可能导致“回调地狱”：

// 回调地狱示例  
function asyncTask1(callback) {  
  setTimeout(() => callback(null, "Result 1"), 1000);  
}  

asyncTask1((err, result) => {  
  if (err) throw err;  
  asyncTask2(result, (err2, result2) => {  
    if (err2) throw err2;  
    // ...  
  });  
});

ES6 引入 Promise 简化异步代码：

const asyncTaskPromise = () => {  
  return new Promise((resolve, reject) => {  
    setTimeout(() => resolve("Promise Result"), 1000);  
  });  
};  

asyncTaskPromise()  
  .then(result => console.log(result))  
  .catch(error => console.error(error));

异步/await

ES8 的 async/await 进一步优化异步代码的可读性：

async function fetchData() {  
  try {  
    const result = await asyncTaskPromise();  
    console.log(result); // 输出：Promise Result  
  } catch (error) {  
    console.error(error);  
  }  
}  

fetchData();

实战案例：构建一个简单的网页交互功能

需求：待办事项列表

实现功能：

  1. 用户输入内容后点击按钮，将新任务添加到列表
  2. 点击任务项可标记为已完成

HTML 结构

<input type="text" id="taskInput">  
<button id="addButton">Add Task</button>  
<ul id="taskList"></ul>

JavaScript 实现

document.getElementById("addButton").addEventListener("click", function() {  
  const input = document.getElementById("taskInput");  
  const taskText = input.value.trim();  

  if (taskText) {  
    const li = document.createElement("li");  
    li.textContent = taskText;  

    // 添加点击事件标记完成状态  
    li.addEventListener("click", function() {  
      this.classList.toggle("completed");  
    });  

    document.getElementById("taskList").appendChild(li);  
    input.value = ""; // 清空输入框  
  }  
});

CSS 样式（补充）

.completed {  
  text-decoration: line-through;  
  color: #888;  
}

结论

本文通过系统梳理 JavaScript 的基础语法、对象操作、DOM 操控及异步编程等内容，结合实例代码与比喻解释，帮助读者建立从入门到进阶的知识框架。对于编程初学者，建议从变量、函数、DOM 操作入手，逐步掌握核心概念；中级开发者可深入探索闭包、原型链、异步模式等高级特性。

JavaScript 的学习是一个循序渐进的过程，建议通过项目实践（如本文的待办事项案例）巩固理论，并关注最新的 ECMAScript 标准更新。掌握 JavaScript 不仅能提升 Web 开发能力，也为学习其他技术栈（如 Node.js、React）打下坚实基础。保持持续学习的态度，你将能逐步成长为一名熟练的 JavaScript 开发者。

最新发布

查看更多文章