JavaScript 简介
JavaScript 是 Web 开发中最流行的脚本语言。
什么是 JavaScript
JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 Web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是一种轻量级的编程语言，是可插入 HTML 页面的编程代码。
JavaScript 的作用
JavaScript 可以写入 HTML 输出、可以对事件作出反应、可以改变 HTML 内容、可以改变 HTML 样式、可以验证输入等。
JavaScript 用法
学习如何在 HTML 中使用 JavaScript。
script 标签
在 HTML 中，JavaScript 代码必须位于 script 标签之间。
<script>
document.getElementById("demo").innerHTML = "Hello World";
</script>外部 JavaScript
也可以把脚本保存到外部文件中，外部文件通常包含被多个网页使用的代码。
<script src="myScript.js"></script>
JavaScript 输出
JavaScript 显示数据的方式。
写入 HTML 元素
使用 innerHTML 写入 HTML 元素。
document.getElementById("demo").innerHTML = "Hello World";写入文档
使用 document.write() 写入 HTML 输出。
document.write("<h1>Hello World</h1>");弹出警告
使用 window.alert() 弹出警告框。
window.alert("Hello World");控制台输出
使用 console.log() 写入浏览器控制台。
console.log("Hello World");JavaScript 语法
JavaScript 语句和变量。
变量
JavaScript 使用 var、let、const 声明变量。
var x = 5; let y = 6; const z = x + y;
运算符
JavaScript 使用算术运算符来计算值。
// 算术运算符 let a = 5 + 6; // 11 let b = 5 * 6; // 30 // 赋值运算符 let c = 10; c += 5; // c = 15
JavaScript 数据类型
JavaScript 支持多种数据类型。
基本数据类型
JavaScript 的基本数据类型包括：字符串（String）、数字（Number）、布尔（Boolean）、空（Null）、未定义（Undefined）、Symbol、BigInt。
let name = "Tom"; // 字符串 let age = 25; // 数字 let isStudent = true; // 布尔
引用数据类型
对象（Object）、数组（Array）、函数（Function）。
let person = {name: "Tom", age: 25};
let fruits = ["Apple", "Banana", "Orange"];
function myFunction() {
return "Hello";
}JavaScript 函数
函数是一段可重复使用的代码块。
函数定义
使用 function 关键字定义函数。
function myFunction(param1, param2) {
return param1 * param2;
}箭头函数
ES6 引入的箭头函数语法。
const myFunction = (param1, param2) => param1 * param2;
// 等同于
function myFunction(param1, param2) {
return param1 * param2;
}JavaScript 对象
对象是包含属性和方法的容器。
对象创建
使用对象字面量创建对象。
let person = {
name: "Tom",
age: 25,
city: "Beijing",
sayHello: function() {
return "Hello, I am " + this.name;
}
};访问对象
使用点号或方括号访问对象属性。
console.log(person.name); // Tom console.log(person["age"]); // 25
JavaScript 数组
数组用于存储多个值。
创建数组
使用数组字面量创建数组。
let fruits = ["Apple", "Banana", "Orange"]; let numbers = [1, 2, 3, 4, 5];
数组方法
JavaScript 提供丰富的数组方法。
let fruits = ["Apple", "Banana"];
fruits.push("Orange"); // 添加元素
fruits.pop(); // 删除最后一个
fruits.length; // 数组长度
fruits.sort(); // 排序JavaScript 条件语句
根据条件执行不同代码。
if...else
根据条件执行代码块。
if (age >= 18) {
console.log("成年人");
} else {
console.log("未成年人");
}switch
根据多个条件选择执行。
switch(day) {
case 0:
console.log("星期日");
break;
case 1:
console.log("星期一");
break;
default:
console.log("其他");
}JavaScript 循环
重复执行代码块。
for 循环
使用 for 循环遍历代码块。
for (let i = 0; i < 5; i++) {
console.log(i);
}while 循环
当条件为真时重复执行。
let i = 0;
while (i < 5) {
console.log(i);
i++;
}forEach
遍历数组的简便方法。
fruits.forEach((fruit, index) => {
console.log(index + ": " + fruit);
});JavaScript DOM
DOM 是 HTML 和 XML 的编程接口。
获取元素
使用 DOM 方法获取 HTML 元素。
document.getElementById("demo");
document.getElementsByClassName("test");
document.getElementsByTagName("p");修改元素
修改 HTML 元素的内容和属性。
document.getElementById("demo").innerHTML = "New content";
document.getElementById("img").src = "new-image.jpg";修改样式
修改 HTML 元素的 CSS 样式。
document.getElementById("demo").style.color = "red";
document.getElementById("demo").style.fontSize = "20px";JavaScript 事件
事件是发生在 HTML 元素上的事情。
常用事件
HTML 事件可以是用户行为或浏览器行为，如点击、加载、输入等。
<button onclick="myFunction()">点击</button> <input onfocus="this.style.backgroundColor='yellow'">
添加事件监听器
使用 addEventListener 添加事件处理程序。
document.getElementById("btn").addEventListener("click", function() {
alert("Clicked!");
});JavaScript 异步
处理异步操作。
Promise
Promise 表示异步操作的最终结果。
const promise = new Promise((resolve, reject) => {
// 异步操作
resolve("Success!");
});
promise.then(result => console.log(result));async/await
async/await 是 Promise 的语法糖，使异步代码更简洁。
async function fetchData() {
const response = await fetch(url);
const data = await response.json();
return data;
}