简单的Javascript笔记入门

🤖 Assistant

# 🚀 JavaScript 零基础全面指南

## 🌟 JavaScript 是什么？
- **JS** 是一种运行在浏览器的脚本语言
- 为网页添加**交互行为**（点击效果、数据验证、动态内容）
- **三要素分工**：HTML（结构）、CSS（样式）、JS（行为）
- 文件扩展名 `.js`（如 `script.js`）

---

## 📦 引入方式

### 1. 内部脚本（直接写在HTML中）
```html
<script>
  alert("Hello World!");
</script>

2. 外部脚本（推荐）

1	<script src="script.js"></script> <!-- 放在body末尾 -->

3. 行内脚本（少用）

1	<button onclick="alert('点击成功!')">按钮</button>

🔧 基础语法

1. 变量声明

1
2
3

let age = 25;           // 可重新赋值
const PI = 3.14;        // 常量（不可变）
var oldVar = "不推荐";  // 旧方式（存在作用域问题）

2. 数据类型

类型	示例	说明
String	`"Hello"`, `'你好'`	文本型数据
Number	`12`, `3.14`	所有数字统一为Number
Boolean	`true`, `false`	布尔值
Array	`[1, 2, 3]`	数组
Object	`{name: "小明"}`	对象
Undefined	`let a;`	未定义的变量
Null	`let b = null;`	空值

3. 运算符

// 算术运算符
let sum = 10 + 5;   // + - * / %

// 比较运算符
console.log(5 > 3); // > < >= <= == ===（全等）

// 逻辑运算符
isValid && showAlert(); // &&（与）||（或）!（非）

🧩 流程控制

1. 条件判断

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

// 三元运算符
let result = (age >= 18) ? "成年" : "未成年";

2. 循环结构

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

// while循环
let count = 3;
while (count > 0) {
  console.log(count--);
}

// for...of（遍历数组）
let fruits = ["苹果", "香蕉"];
for (let fruit of fruits) {
  console.log(fruit);
}

🛠 函数与作用域

1. 函数定义

function greet(name) {
  return `你好，${name}!`;
}

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

2. 作用域原理（快递柜比喻）

let global = "全局快递柜"; // 全局变量

function demo() {
  let local = "本地快递柜"; // 局部变量
  console.log(global); // ✔️ 可以使用
}

console.log(local);    // ❌ 无法访问

🎯 DOM 操作（网页操控）

1. 获取元素

// 常用选择器
document.getElementById("header");   // ID选择
document.querySelector(".btn");      // CSS选择器选中第一个
document.querySelectorAll("p");      // 选中所有p标签

2. 修改内容

let title = document.querySelector("#title");
title.textContent = "新标题";      // 修改文本
title.style.color = "red";         // 修改样式
title.classList.add("active");     // 添加类名

3. 创建/删除元素

// 创建新元素
let newDiv = document.createElement("div");
newDiv.textContent = "我是新增的";
document.body.appendChild(newDiv);

// 删除元素
let oldDiv = document.querySelector("#old");
oldDiv.remove();

🎮 事件监听（交互核心）

// 点击事件
document.querySelector("#btn").addEventListener("click", function() {
  alert("按钮被点击了！");
});

// 表单提交
document.querySelector("#form").addEventListener("submit", function(e) {
  e.preventDefault(); // 阻止默认提交
  processFormData();
});

// 常见事件类型：mouseover, keydown, scroll 等

🔄 异步编程

1. 回调函数（Callback）

1
2
3

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

2. Promise（承诺模式）

let promise = new Promise((resolve, reject) => {
  if (success) {
    resolve("成功的数据");
  } else {
    reject("失败原因");
  }
});

promise.then(data => {
  console.log(data);
}).catch(err => {
  console.error(err);
});

3. async/await（终极方案）

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

🌈 ES6+ 重要特性

1. 模板字符串

1 2	let name = "小明"; console.log(`大家好，我是${name}`); // 支持换行和变量

2. 解构赋值

// 数组解构
let [a, b] = [10, 20];

// 对象解构
let {name, age} = {name: "小明", age: 20};

3. 模块化

// math.js
export const PI = 3.14;

// main.js
import { PI } from './math.js';

📱 综合案例：TODO 清单

// HTML需配合有输入框和列表
const input = document.querySelector("#todo-input");
const addBtn = document.querySelector("#add-btn");
const list = document.querySelector("#todo-list");

addBtn.addEventListener("click", () => {
  if (input.value.trim() === "") return;
  
  const li = document.createElement("li");
  li.textContent = input.value;
  li.addEventListener("click", () => {
    li.classList.toggle("completed");
  });
  
  const deleteBtn = document.createElement("button");
  deleteBtn.textContent = "移除";
  deleteBtn.addEventListener("click", () => li.remove());
  
  li.appendChild(deleteBtn);
  list.appendChild(li);
  input.value = "";
});