JavaScript 基础教程1. JavaScript简介JavaScript是一种轻量级的解释型编程语言，主要用于网页开发，为网页添加交互功能。
JavaScript与Java无关，名称相似是历史原因。
JavaScript的特点：
客户端脚本语言基于对象和事件驱动解释性语言跨平台2. 如何使用JavaScriptJavaScript可以通过三种方式添加到HTML页面中：
2.1 内部JavaScript代码语言：javascript复制2.2 外部JavaScript代码语言：javascript复制2.3 行内JavaScript代码语言：javascript复制最佳实践： 推荐使用外部JavaScript文件，有利于代码组织和维护。
3. 变量与数据类型3.1 变量声明代码语言：javascript复制// ES5
var name = "张三";
// ES6
let age = 25;
const PI = 3.14159;3.2 数据类型JavaScript有7种基本数据类型：
String - 字符串Number - 数字Boolean - 布尔值Null - 空值Undefined - 未定义Symbol - 符号(ES6新增)BigInt - 大整数(ES2020新增)和1种复杂数据类型：
Object - 对象示例：
代码语言：javascript复制let name = "李四"; // 字符串
let age = 30; // 数字
let isStudent = false; // 布尔值
let car = null; // null
let test; // undefined4. 运算符4.1 算术运算符代码语言：javascript复制let sum = 5 + 3; // 8
let diff = 5 - 3; // 2
let product = 5 * 3; // 15
let quotient = 5 / 3; // 1.666...
let remainder = 5 % 3; // 2
let power = 5 ** 3; // 125 (ES6)4.2 比较运算符代码语言：javascript复制let a = 5, b = 3;
a == b; // false
a === b; // false (严格等于，值和类型都相同)
a != b; // true
a !== b; // true
a > b; // true
a < b; // false
a >= b; // true
a <= b; // false4.3 逻辑运算符代码语言：javascript复制let x = true, y = false;
x && y; // false (与)
x || y; // true (或)
!x; // false (非)5. 条件语句5.1 if语句代码语言：javascript复制let age = 18;
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}5.2 switch语句代码语言：javascript复制let day = 3;
let dayName;
switch (day) {
case 1:
dayName = "星期一";
break;
case 2:
dayName = "星期二";
break;
// ...其他情况
default:
dayName = "未知";
}5.3 三元运算符代码语言：javascript复制let age = 20;
let status = (age >= 18) ? "成年人" : "未成年人";6. 循环6.1 for循环代码语言：javascript复制for (let i = 0; i < 5; i++) {
console.log(i);
}6.2 while循环代码语言：javascript复制let i = 0;
while (i < 5) {
console.log(i);
i++;
}6.3 do...while循环代码语言：javascript复制let i = 0;
do {
console.log(i);
i++;
} while (i < 5);6.4 for...in循环代码语言：javascript复制let person = {name: "张三", age: 25};
for (let key in person) {
console.log(key + ": " + person[key]);
}6.5 for...of循环 (ES6)代码语言：javascript复制let colors = ["red", "green", "blue"];
for (let color of colors) {
console.log(color);
}7. 函数7.1 函数声明代码语言：javascript复制function greet(name) {
return "Hello, " + name + "!";
}
let message = greet("李四");7.2 函数表达式代码语言：javascript复制const greet = function(name) {
return "Hello, " + name + "!";
};7.3 箭头函数 (ES6)代码语言：javascript复制const greet = (name) => {
return "Hello, " + name + "!";
};
// 简写形式
const square = x => x * x;7.4 默认参数 (ES6)代码语言：javascript复制function greet(name = "Guest") {
return "Hello, " + name + "!";
}8. 对象8.1 对象创建代码语言：javascript复制// 对象字面量
let person = {
name: "张三",
age: 25,
greet: function() {
console.log("Hello, " + this.name);
}
};8.2 访问属性代码语言：javascript复制// 点表示法
console.log(person.name);
// 方括号表示法
console.log(person["age"]);8.3 构造函数代码语言：javascript复制function Person(name, age) {
this.name = name;
this.age = age;
this.greet = function() {
console.log("Hello, " + this.name);
};
}
let person1 = new Person("李四", 30);8.4 ES6类代码语言：javascript复制class Person {
constructor(name, age) {
this.name = name;
this.age = age;
}
greet() {
console.log(`Hello, ${this.name}`);
}
}
let person1 = new Person("王五", 35);9. 数组9.1 创建数组代码语言：javascript复制let fruits = ["Apple", "Banana", "Orange"];9.2 访问元素代码语言：javascript复制let first = fruits[0]; // "Apple"
let last = fruits[fruits.length - 1]; // "Orange"9.3 常用方法代码语言：javascript复制// 添加/删除元素
fruits.push("Mango"); // 末尾添加
fruits.pop(); // 末尾删除
fruits.unshift("Grape"); // 开头添加
fruits.shift(); // 开头删除
// 查找
fruits.indexOf("Banana"); // 返回索引或-1
// 遍历
fruits.forEach(function(item, index) {
console.log(index, item);
});
// 映射
let lengths = fruits.map(fruit => fruit.length);
// 过滤
let longFruits = fruits.filter(fruit => fruit.length > 5);10. DOM简介DOM (Document Object Model) 是HTML文档的编程接口，它将HTML文档表示为节点树。
DOM节点类型文档节点 - 整个文档元素节点 - HTML元素属性节点 - HTML元素的属性文本节点 - HTML元素中的文本注释节点 - HTML注释示例HTML：
代码语言：javascript复制
欢迎
这是一个段落
11. DOM操作11.1 选择元素代码语言：javascript复制// 通过ID
let title = document.getElementById("title");
// 通过类名
let contents = document.getElementsByClassName("content");
// 通过标签名
let paragraphs = document.getElementsByTagName("p");
// 通过CSS选择器
let firstPara = document.querySelector("p.content");
let allParas = document.querySelectorAll("p");11.2 修改元素代码语言：javascript复制// 修改内容
title.textContent = "新标题";
title.innerHTML = "强调标题";
// 修改样式
title.style.color = "red";
title.style.fontSize = "24px";
// 修改属性
title.setAttribute("data-id", "123");
let id = title.getAttribute("id");11.3 创建和添加元素代码语言：javascript复制// 创建新元素
let newPara = document.createElement("p");
newPara.textContent = "这是新段落";
// 添加到DOM
document.body.appendChild(newPara);
// 插入到特定位置
let referenceElement = document.querySelector("p.content");
document.body.insertBefore(newPara, referenceElement);11.4 删除元素代码语言：javascript复制let element = document.querySelector("p.content");
element.parentNode.removeChild(element);12. 事件处理12.1 添加事件监听器代码语言：javascript复制let button = document.querySelector("button");
// 传统方式
button.onclick = function() {
alert("按钮被点击了!");
};
// 推荐方式
button.addEventListener("click", function() {
alert("按钮被点击了!");
});12.2 常见事件click - 点击事件dblclick - 双击事件mouseover/mouseout - 鼠标移入/移出mousedown/mouseup - 鼠标按下/释放keydown/keyup - 键盘按下/释放focus/blur - 元素获得/失去焦点submit - 表单提交load - 页面或资源加载完成12.3 事件对象代码语言：javascript复制button.addEventListener("click", function(event) {
console.log("事件类型: " + event.type);
console.log("目标元素: " + event.target);
console.log("鼠标位置: " + event.clientX + ", " + event.clientY);
// 阻止默认行为
event.preventDefault();
// 停止事件冒泡
event.stopPropagation();
});13. ES6新特性13.1 let和const代码语言：javascript复制// 块级作用域变量
let x = 10;
// 常量
const PI = 3.14159;13.2 模板字符串代码语言：javascript复制let name = "张三";
let greeting = `Hello, ${name}!
今天是${new Date().toLocaleDateString()}.`;13.3 解构赋值代码语言：javascript复制// 数组解构
let [a, b] = [1, 2];
// 对象解构
let {name, age} = {name: "李四", age: 25};13.4 扩展运算符代码语言：javascript复制let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5]; // [1, 2, 3, 4, 5]
let obj1 = {a: 1, b: 2};
let obj2 = {...obj1, c: 3}; // {a: 1, b: 2, c: 3}13.5 Promise代码语言：javascript复制function fetchData() {
return new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
resolve("数据加载成功");
// 或 reject("加载失败");
}, 1000);
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));14. AJAX简介AJAX (Asynchronous JavaScript and XML) 允许网页异步与服务器通信，无需刷新页面。
14.1 XMLHttpRequest代码语言：javascript复制let xhr = new XMLHttpRequest();
xhr.open("GET", "https://api.example.com/data", true);
xhr.onload = function() {
if (xhr.status === 200) {
console.log(xhr.responseText);
} else {
console.error("请求失败: " + xhr.status);
}
};
xhr.send();14.2 Fetch API (ES6)代码语言：javascript复制fetch("https://api.example.com/data")
.then(response => {
if (!response.ok) {
throw new Error("网络响应不正常");
}
return response.json();
})
.then(data => console.log(data))
.catch(error => console.error("请求失败:", error));14.3 async/await (ES2017)代码语言：javascript复制async function fetchData() {
try {
let response = await fetch("https://api.example.com/data");
let data = await response.json();
console.log(data);
} catch (error) {
console.error("请求失败:", error);
}
}
fetchData();