JavaScript

一、JavaScript 核心语法

---

1. 引入方式

JavaScript 可以通过以下方式添加到 HTML 中：

✅ 行内引入（不推荐）

<button onclick="alert('Hi')">点击</button>

✅ 内部脚本

<script>
  console.log("Hello JS");
</script>

✅ 外部引入（推荐）

<script src="script.js"></script>

---

2. 变量和数据类型

✅ 声明变量

let name = "Tom";      // 可变变量
const age = 18;        // 常量
var city = "Beijing";  // 老语法（不推荐）

✅ 数据类型

类型	示例
字符串	"Hello"、'JS'
数字	123、3.14
布尔值	true、false
数组	[1, 2, 3]
对象	{ name: "Tom", age: 18 }
null	null（人为设置为空）
undefined	未赋值时的默认值

---

3. 函数

3.1 普通函数定义

function greet(name) {
  return "Hello, " + name;
}

---

3.2 匿名函数

匿名函数是没有名字的函数，常用于临时使用或作为参数传递：

const sayHi = function(name) {
  console.log("Hi, " + name);
};
sayHi("Alice");

✅ 常见场景：事件监听

document.getElementById("btn").addEventListener("click", function() {
  alert("点击了按钮");
});

---

3.3 箭头函数（简洁写法）

箭头函数是匿名函数的另一种语法，更简洁：

const greet = name => `Hello, ${name}`;

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

---

4. 自定义对象 和 JSON

✅ 创建对象

let person = {
  name: "Alice",
  age: 25,
  sayHi() {
    console.log("Hi, I'm " + this.name);
  }
};

✅ JSON：对象的字符串表示

let jsonStr = JSON.stringify(person);  // 对象 → JSON字符串
let obj = JSON.parse(jsonStr);         // JSON字符串 → 对象

---

5. DOM 操作（网页元素）

✅ 获取元素

document.getElementById("title");
document.querySelector(".box");

✅ 修改内容

document.getElementById("title").innerText = "新标题";

✅ 修改样式

document.querySelector("p").style.color = "blue";

✅ 创建新元素

let li = document.createElement("li");
li.innerText = "新项";
document.querySelector("ul").appendChild(li);

---

二、事件监听

---

1. 添加事件监听

✅ 常见语法

element.addEventListener("事件类型", 事件处理函数);

✅ 示例：按钮点击事件

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

---

2. 常见事件类型

事件类型	说明
click	点击
mouseover	鼠标移入
keydown	键盘按下
submit	表单提交
change	表单内容改变（如下拉）
input	文本框实时输入变化

---

3. JS 模块化优化（现代项目推荐）

使用模块化可以组织代码结构，提高可维护性。

✅ 创建模块 utils.js

export function add(a, b) {
  return a + b;
}

✅ 使用模块 main.js

import { add } from './utils.js';
console.log(add(2, 3));

👉 需在 <script> 中使用 type="module"：

<script type="module" src="main.js"></script>

---

总结结构图

JavaScript
├── 核心语法
│   ├── 引入方式（script）
│   ├── 变量（let、const）
│   ├── 数据类型（字符串、对象等）
│   ├── 函数（普通、匿名、箭头）
│   └── 自定义对象与 JSON
│
├── DOM 操作
│   ├── 获取元素
│   ├── 修改内容和样式
│   └── 新增元素
│
├── 事件监听
│   ├── 绑定事件（addEventListener）
│   └── 常见事件（click、keydown等）
│
└── 模块化（ES Modules）
    ├── export / import
    └── script type="module"