学习如何使用JavaScript为网页添加交互功能
JavaScript是一种脚本语言，用于为网页添加交互功能。它是Web开发中最重要的编程语言之一，可以用于：
// 使用let声明变量（推荐）
let name = "John";
let age = 25;
// 使用const声明常量
const PI = 3.14159;
// 使用var声明变量（旧方式，不推荐）
var oldWay = "不推荐使用";
// 字符串
let text = "Hello World";
// 数字
let number = 42;
let decimal = 3.14;
// 布尔值
let isTrue = true;
let isFalse = false;
// 数组
let fruits = ["苹果", "香蕉", "橙子"];
// 对象
let person = {
name: "张三",
age: 30,
city: "北京"
};
// null和undefined
let empty = null;
let notDefined = undefined;
// 算术运算符
let sum = 5 + 3; // 加法
let diff = 10 - 4; // 减法
let product = 6 * 2; // 乘法
let quotient = 15 / 3; // 除法
let remainder = 10 % 3; // 取余
// 比较运算符
let isEqual = 5 === 5; // 严格相等
let isNotEqual = 5 !== 3; // 不相等
let isGreater = 10 > 5; // 大于
let isLess = 3 < 7; // 小于
// 逻辑运算符
let and = true && false; // 逻辑与
let or = true || false; // 逻辑或
let not = !true; // 逻辑非
// 基本函数声明
function greet(name) {
return "Hello, " + name + "!";
}
// 箭头函数
const greetArrow = (name) => {
return "Hello, " + name + "!";
};
// 简写箭头函数
const greetShort = name => "Hello, " + name + "!";
// 默认参数
function greet(name = "Guest") {
return "Hello, " + name + "!";
}
// 剩余参数
function sum(...numbers) {
return numbers.reduce((total, num) => total + num, 0);
}
// 解构参数
function printPerson({name, age}) {
console.log(`${name} is ${age} years old`);
}
// if-else语句
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}
// switch语句
switch (day) {
case "Monday":
console.log("星期一");
break;
case "Tuesday":
console.log("星期二");
break;
default:
console.log("其他日期");
}
// 三元运算符
let status = age >= 18 ? "成年人" : "未成年人";
// for循环
for (let i = 0; i < 5; i++) {
console.log(i);
}
// while循环
let i = 0;
while (i < 5) {
console.log(i);
i++;
}
// for...of循环（遍历数组）
for (let fruit of fruits) {
console.log(fruit);
}
// for...in循环（遍历对象）
for (let key in person) {
console.log(key + ": " + person[key]);
}
// 通过ID选择
const element = document.getElementById("myId");
// 通过类名选择
const elements = document.getElementsByClassName("myClass");
// 通过标签名选择
const paragraphs = document.getElementsByTagName("p");
// 使用querySelector
const firstElement = document.querySelector(".myClass");
const allElements = document.querySelectorAll(".myClass");
// 修改内容
element.textContent = "新文本";
element.innerHTML = "HTML内容";
// 修改属性
element.setAttribute("class", "newClass");
element.style.color = "red";
// 添加/删除类
element.classList.add("newClass");
element.classList.remove("oldClass");
element.classList.toggle("active");
// 添加事件监听器
element.addEventListener("click", function(event) {
console.log("元素被点击");
});
// 移除事件监听器
element.removeEventListener("click", handler);
// 常见事件类型
// click - 点击
// mouseover - 鼠标悬停
// keydown - 按键按下
// submit - 表单提交
// load - 页面加载完成
// 创建Promise
const myPromise = new Promise((resolve, reject) => {
// 异步操作
setTimeout(() => {
const success = true;
if (success) {
resolve("操作成功");
} else {
reject("操作失败");
}
}, 1000);
});
// 使用Promise
myPromise
.then(result => console.log(result))
.catch(error => console.error(error));
// 异步函数
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
const data = await response.json();
return data;
} catch (error) {
console.error('Error:', error);
}
}
// 使用异步函数
fetchData().then(data => console.log(data));
try {
// 可能出错的代码
throw new Error("这是一个错误");
} catch (error) {
console.error("捕获到错误:", error.message);
} finally {
console.log("无论是否出错都会执行");
}
// 常见错误类型
try {
// TypeError
null.someMethod();
} catch (error) {
if (error instanceof TypeError) {
console.log("类型错误");
} else if (error instanceof ReferenceError) {
console.log("引用错误");
} else {
console.log("其他错误");
}
}