什么是JavaScript

让网页"动起来"的语言

JavaScript（简称 JS） 是 Web 的编程语言。HTML 搭骨架，CSS 做装修，JavaScript 让网页拥有交互能力——按钮能点、表单能提交、数据能动态加载。

💡 类比：如果网页是一辆车，HTML 是车身骨架，CSS 是喷漆和内饰，JavaScript 就是发动机——让车能跑起来。

JavaScript 能做什么？

基础语法速览

变量

// 现代JS用 let 和 const 声明变量
let name = "张三";        // 可以修改的变量
const age = 25;           // 不可修改的常量
let isStudent = true;     // 布尔值

// 不要用 var（旧语法，容易出bug）

数据类型

函数

// 普通函数
function greet(name) {
  return `你好，${name}！`;
}

// 箭头函数（现代写法，更简洁）
const greet = (name) => `你好，${name}！`;

// 调用函数
console.log(greet("张三"));  // "你好，张三！"

条件判断

const score = 85;

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

循环

const fruits = ["苹果", "香蕉", "橙子"];

// for...of 循环（推荐）
for (const fruit of fruits) {
  console.log(fruit);
}

// 数组方法（更现代）
fruits.forEach((fruit) => {
  console.log(fruit);
});

// map — 转换数组
const upper = fruits.map((f) => f + "🍎");

操作网页：DOM

DOM（Document Object Model） 是 JavaScript 操作网页的接口。你可以用它来修改页面上的任何元素：

// 获取元素
const title = document.getElementById("title");
const buttons = document.querySelectorAll(".btn");

// 修改内容
title.textContent = "新标题";

// 修改样式
title.style.color = "#F97316";

// 添加事件监听
const btn = document.querySelector("#myBtn");
btn.addEventListener("click", () => {
  alert("你点击了按钮！");
});

异步编程：async/await

JavaScript 的一大特色是异步编程——可以在等待数据的同时做其他事情。

// async/await — 最现代、最易读的异步写法
async function loadArticles() {
  try {
    const response = await fetch("/api/articles");
    const data = await response.json();
    console.log("文章列表：", data);
  } catch (error) {
    console.error("加载失败：", error);
  }
}

JavaScript 的运行环境

JavaScript 不只能在浏览器里运行：

JavaScript vs TypeScript

TypeScript 是 JavaScript 的超集，增加了类型检查，让代码更安全：

// JavaScript — 没有类型，运行时才发现错误
function add(a, b) {
  return a + b;
}
add("1", 2);  // "12" — 字符串拼接，不是数字相加！

// TypeScript — 有类型，编码时就能发现错误
function add(a: number, b: number): number {
  return a + b;
}
add("1", 2);  // ❌ 编辑器直接报错：类型"string"不能赋给类型"number"

现代项目（如 Next.js）默认使用 TypeScript。写法和 JavaScript 几乎一样，只是多了类型标注。

ES6+ 常用特性

现代 JavaScript（ES6 及以上）引入了很多好用的语法：

// 解构赋值
const { name, age } = user;
const [first, second] = list;

// 模板字符串
const msg = `你好，${name}，你今年${age}岁`;

// 展开运算符
const newList = [...oldList, newItem];
const newObj = { ...oldObj, name: "新名字" };

// 可选链
const city = user?.address?.city;  // 不会因为 null 报错

// 空值合并
const value = input ?? "默认值";  // 只在 null/undefined 时用默认值

🎯 AI编程小贴士：JavaScript 语法不确定？直接问 AI"怎么用 JS 过滤数组中大于10的数"或"怎么用 async/await 调用多个API"，它会给你最佳实践的写法。

小结

• JavaScript 是让网页拥有交互能力的编程语言
• 通过 DOM 操作页面元素，通过事件响应用户操作
• async/await 是现代异步编程的标准写法
• JS 不只在浏览器运行，Node.js 让它也能跑在服务器端
• TypeScript 是带类型的 JavaScript，现代项目推荐使用
• ES6+ 的解构、模板字符串、可选链等特性让代码更简洁