JavaScript
1.JavaScript 基础语法
JavaScript 是一种轻量级的编程语言，它是网页开发中不可或缺的一部分，用于实现网页的动态效果和用户交互。以下是 JavaScript 的基础语法概览：
1. 变量声明
在 JavaScript 中，你可以使用 var、let 和 const 来声明变量。
var是 ES5 中的变量声明方式，它的作用域是函数级别的。let和const是 ES6 中新增的声明方式，它们的作用域是块级别的。
var variable1 = "Hello";
let variable2 = "World";
const variable3 = "!";
2. 数据类型
JavaScript 有几种基本数据类型：Undefined、Null、Boolean、Number、String 和 Symbol（ES6 新增）以及对象类型。
Undefined类型只有一个值，即undefined。Null类型也只有一个值，即null。Boolean类型有两个值：true和false。Number类型用于表示整数和浮点数。String类型用于表示文本数据。Symbol类型是独一无二的值。- 对象可以是
Object、Array、Function等。
3. 运算符
JavaScript 支持各种运算符，包括算术运算符、比较运算符、赋值运算符、逻辑运算符等。
let a = 10;
let b = 20;
console.log(a + b); // 加法
console.log(a - b); // 减法
console.log(a * b); // 乘法
console.log(a / b); // 除法
console.log(a % b); // 取模
console.log(a === b); // 绝对等于
console.log(a !== b); // 不绝对等于
4. 控制结构
JavaScript 中的控制结构包括条件语句和循环语句。
- 条件语句：
if、else if、else - 循环语句：
for、while、do...while
if (a > b) {
console.log("a is greater than b");
} else {
console.log("a is not greater than b");
}
for (let i = 0; i < 5; i++) {
console.log(i);
}
5. 函数
函数是 JavaScript 中的基本构建块，用于封装可重复使用的代码块。
function greet(name) {
return "Hello, " + name;
}
console.log(greet("World"));
6. 事件处理
JavaScript 可以通过事件监听器来响应用户的操作，如点击、按键等。
document.getElementById("myButton").addEventListener("click", function() {
console.log("Button was clicked");
});
7. 对象和数组
对象和数组是存储复杂数据结构的方式。
let obj = {
name: "Alice",
age: 25
};
let arr = [1, 2, 3, 4, 5];
console.log(obj.name); // 输出 "Alice"
console.log(arr[2]); // 输出 3
以上是 JavaScript 的基础语法概览，要深入学习 JavaScript，还需要掌握闭包、原型链、异步编程等更高级的概念。
2.DOM 与BOM
在 Web 开发中，DOM（文档对象模型）和 BOM（浏览器对象模型）是两个核心概念，它们分别代表浏览器中的不同部分和功能。
DOM（文档对象模型）
DOM 是 HTML 和 XML 文档的编程接口。它将网页内容表示为树形结构，每个节点都是文档中的对象，例如元素、属性和文本。通过 DOM，开发者可以添加、删除和修改页面上的元素。
以下是 DOM 的一些基本概念和用法：
1. 节点类型
- 元素节点：例如 、
等。- 属性节点：例如
href、src等。- 文本节点：元素内的文本内容。
- 注释节点：HTML 中的注释。
2. 访问 DOM 节点
document.getElementById(id)：通过 ID 获取元素。document.getElementsByClassName(className)：通过类名获取元素列表。document.getElementsByTagName(tagName)：通过标签名获取元素列表。document.querySelector(selector)：通过 CSS 选择器获取第一个匹配的元素。document.querySelectorAll(selector)：通过 CSS 选择器获取所有匹配的元素列表。
3. 操作 DOM 节点
createElement(tagName)：创建一个新的元素节点。appendChild(child)：将一个子节点添加到父节点的末尾。insertBefore(newNode, referenceNode)：在参考节点之前插入一个新节点。removeChild(child)：从父节点中移除一个子节点。replaceChild(newNode, oldNode)：替换一个子节点。getAttribute(attributeName)：获取元素的属性值。setAttribute(attributeName, value)：设置元素的属性值。
4. 事件处理
addEventListener(type, listener)：为元素添加事件监听器。removeEventListener(type, listener)：移除元素的事件监听器。
// 示例：点击按钮时改变文本 document.getElementById("myButton").addEventListener("click", function() { document.getElementById("myText").textContent = "Clicked!"; });BOM（浏览器对象模型）
BOM 提供了与浏览器窗口进行交互的对象和方法。它没有标准规范，但是大多数浏览器都实现了类似的特性。
以下是 BOM 的一些主要对象：1. window 对象
window对象是 BOM 的核心，表示浏览器窗口，并作为全局对象。window.innerHeight和window.innerWidth：浏览器窗口的内部宽度和高度。window.open(url, [name], [specs], [replace])：打开一个新的浏览器窗口或查找一个已命名的窗口。window.close()：关闭浏览器窗口。
2. navigator 对象
navigator.userAgent：包含浏览器类型、版本和操作系统等信息的字符串。
3. location 对象
location.href：当前页面的 URL。location.hostname：当前页面的主机名。location.pathname：当前页面的路径和文件名。location.search：URL 中的查询字符串。location.assign(url)：加载新的文档。
4. history 对象
history.length：历史记录中的页面数。history.back()：加载历史记录中的前一个页面。history.forward()：加载历史记录中的下一个页面。
5. screen 对象
screen.width和screen.height：屏幕的宽度和高度。
DOM 和 BOM 是 Web 开发中的基础，理解它们是创建动态和交互式网页的关键。通过 DOM，你可以操作网页的结构和内容；通过 BOM，你可以与浏览器窗口及其环境进行交互。
3.JavaScript 内置对象
JavaScript 有许多内置对象，这些对象提供了用于处理常见任务的属性和方法。以下是一些主要的内置对象及其用途：
1.
Object- 用于创建自定义对象。
- 提供了对象的通用方法和属性。
2.
Array-
用于存储和管理一组有序的数据。
-
方法包括
push(),pop(),shift(),unshift(),slice(),splice(),map(),filter(),reduce()等。// 创建一个数组 let fruits = ['Apple', 'Banana', 'Cherry']; // push() - 添加元素到数组的末尾 fruits.push('Durian'); console.log(fruits); // ['Apple', 'Banana', 'Cherry', 'Durian'] // pop() - 移除数组的最后一个元素 fruits.pop(); console.log(fruits); // ['Apple', 'Banana', 'Cherry'] // shift() - 移除数组的第一个元素 fruits.shift(); console.log(fruits); // ['Banana', 'Cherry'] // unshift() - 在数组的开头添加元素 fruits.unshift('Apple', 'Apricot'); console.log(fruits); // ['Apple', 'Apricot', 'Banana', 'Cherry'] // slice() - 返回数组的一部分 let citrus = fruits.slice(1, 3); console.log(citrus); // ['Apricot', 'Banana'] // splice() - 从数组中添加/删除元素 fruits.splice(1, 1, 'Avocado'); console.log(fruits); // ['Apple', 'Avocado', 'Banana', 'Cherry'] // map() - 对数组中的每个元素执行一个函数 let lengths = fruits.map(fruit => fruit.length); console.log(lengths); // [5, 7, 6, 6] // filter() - 创建一个新数组，包含通过测试的元素 let longNameFruits = fruits.filter(fruit => fruit.length > 6); console.log(longNameFruits); // ['Avocado', 'Cherry'] // reduce() - 对数组中的每个元素执行一个由您提供的reducer函数(从左到右) let sumLengths = lengths.reduce((acc, length) => acc + length, 0); console.log(sumLengths); // 24
3.
String-
用于处理文本数据。
-
方法包括
charAt(),concat(),indexOf(),lastIndexOf(),match(),replace(),slice(),split(),toLowerCase(),toUpperCase()等。let str = "Hello, World!"; // charAt() - 返回在指定位置的字符 console.log(str.charAt(7)); // W // concat() - 连接两个或多个字符串 let greeting = "Hello, ".concat("World!"); console.log(greeting); // Hello, World! // indexOf() - 返回指定值第一次出现的索引 console.log(str.indexOf("World")); // 7 // lastIndexOf() - 返回指定值最后一次出现的索引 console.log(str.lastIndexOf("l")); // 9 // match() - 使用正则表达式与字符串进行匹配 console.log(str.match(/World/)); // ['World'] // replace() - 在字符串中用一些字符替换另一些字符 console.log(str.replace("World", "JavaScript")); // Hello, JavaScript! // slice() - 提取字符串的某个部分，并返回一个新的字符串 console.log(str.slice(7, 12)); // World // split() - 把字符串分割成字符串数组 console.log(str.split(", ")); // ['Hello', 'World!'] // toLowerCase() - 把字符串转换为小写 console.log(str.toLowerCase()); // hello, world! // toUpperCase() - 把字符串转换为大写 console.log(str.toUpperCase()); // HELLO, WORLD!
4.
Number- 用于表示数值。
- 属性包括
MAX_VALUE,MIN_VALUE,NaN,NEGATIVE_INFINITY,POSITIVE_INFINITY等。
5.
Boolean- 用于表示逻辑值
true或false。
6.
Math- 提供数学计算功能。
- 方法包括
min(),max(),ceil(),floor(),round(),random()等。 - 常量包括
PI,E,LN2,LN10,LOG2E,LOG10E等。
// min() - 返回两个或更多个数值的最小值 console.log(Math.min(1, 3, 2)); // 1 // max() - 返回两个或更多个数值的最大值 console.log(Math.max(1, 3, 2)); // 3 // ceil() - 返回大于或等于一个给定数字的最小整数 console.log(Math.ceil(4.4)); // 5 // floor() - 返回小于或等于一个给定数字的最大整数 console.log(Math.floor(4.7)); // 4 // round() - 返回一个数字四舍五入后最接近的整数 console.log(Math.round(4.4)); // 4 // random() - 返回一个浮点, 伪随机数在范围从0到小于1，也就是说，从0（包括0）往上，但是不包括1（排除1） console.log(Math.random()); // 一个随机数，例如 0.12345678901234568 // 常量 console.log(Math.PI); // 3.141592653589793 console.log(Math.E); // 2.7182818284590457.
Date- 用于处理日期和时间。
- 方法包括
now(),parse(),UTC(),getDate(),getDay(),getFullYear(),getHours(),getMinutes(),getSeconds()等。
// 创建当前日期和时间 let now = new Date(); console.log(now); // 当前日期和时间，例如：Mon Nov 08 2021 15:30:00 GMT+0800 (中国标准时间) // now() - 返回当前时间的时间戳 console.log(Date.now()); // 当前时间的时间戳，例如：1636351005501 // parse() - 解析一个表示某个日期的字符串，并返回那个日期自1970年1月1日以来的毫秒数 console.log(Date.parse("Aug 9, 1995")); // 807897600000 // UTC() - 接受和 parse() 相同的参数，并返回1970年1月1日以来的毫秒数 console.log(Date.UTC(2021, 10, 8)); // 1636350800000 // 使用Date对象的方法获取日期和时间组件 let today = new Date(); console.log(today.getDate()); // 8（月份中的某一天） console.log(today.getDay()); // 1（星期中的某一天，0表示星期日） console.log(today.getFullYear());// 2021（四位数字年份） console.log(today.getHours()); // 15（小时） console.log(today.getMinutes());// 30（分钟） console.log(today.getSeconds());// 0（秒）8.
RegExp- 用于处理正则表达式。
- 方法包括
test(),exec(),match(),replace(),search()等。
// 创建正则表达式 let pattern = /hello/i; // 不区分大小写的"hello"模式 // test() - 检测字符串是否匹配某个模式 console.log(pattern.test("Hello World!")); // true // exec() - 对一个字符串执行搜索，并返回一个匹配的数组，如果没有匹配则返回null console.log(pattern.exec("Hello World!")); // ['Hello'] // match() - 返回一个字符串中所有匹配的子串组成的数组，如果没有匹配则返回null let str = "Hello there, Hello!"; console.log(str.match(pattern)); // ['Hello', 'Hello'] // replace() - 在字符串中用一些字符替换另一些字符，或者替换一个与正则表达式匹配的子串 console.log(str.replace(pattern, "Hi")); // "Hi there, Hello!" // search() - 对正则表达式和指定的字符串进行匹配搜索，返回第一个匹配的结果的索引，如果没有匹配则返回-1 console.log(str.search(pattern)); // 09.
Function- 用于创建函数。
- 方法包括
apply(),call(),bind()等。
// 创建一个简单的函数 function greet(name) { return "Hello, " + name + "!"; } // apply() - 调用一个函数，并用指定对象替换函数的this值，同时提供一个数组作为参数 let person = { name: "Alice" }; console.log(greet.apply(person, ["Alice"])); // "Hello, Alice!" // call() - 调用一个函数，并用指定对象替换函数的this值，同时提供一个参数列表 console.log(greet.call(person, "Bob")); // "Hello, Bob!" // bind() - 创建一个新的函数，在 bind() 被调用时，这个新函数的 this 被指定为 bind() 的第一个参数，其余参数作为新函数的参数 let greetAlice = greet.bind(person); console.log(greetAlice()); // "Hello, Alice!"10.
Error- 用于处理错误。
- 包括多种错误类型，如
EvalError,RangeError,ReferenceError,SyntaxError,TypeError,URIError等。
11.
JSON- 用于处理 JSON 数据。
- 方法包括
parse(),stringify()等。
12.
Map和WeakMapMap对象保存键值对，并且能够记住键的原始插入顺序。WeakMap对象同样保存键值对，但是键只能是对象，且不计入垃圾回收机制。
13.
Set和WeakSetSet对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。WeakSet对象同样允许你存储对象引用，但是对象不会计入垃圾回收机制。
14.
Promise- 用于表示异步操作的最终完成（或失败）及其结果值。
15.
Symbol- 用于创建对象的唯一属性名。
16.
Reflect和ProxyReflect是一个内置对象，它提供拦截 JavaScript 操作的方法。Proxy对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。
这些内置对象为 JavaScript 提供了强大的功能，使得开发者能够轻松地处理各种编程任务。掌握这些对象的用法对于成为一名熟练的 JavaScript 开发者至关重要。
4.JavaScript 事件
在JavaScript中，事件是文档或浏览器窗口中发生的特定交互瞬间。事件可以是用户的操作，如点击按钮、在输入框中输入文本，也可以是浏览器自身的行为，如页面加载完成。以下是JavaScript事件的一些基本概念和用法：
事件流
事件流描述的是从页面中接收事件的顺序。IE和Netscape提出了两种相反的事件流概念：
- 事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
- 事件捕获：事件开始时由不太具体的节点接收，然后逐级向下，直到最具体的节点。
事件处理程序
事件处理程序是响应某个事件的函数。将事件处理程序赋给元素的方法有几种：
- HTML事件处理程序：直接在HTML元素中添加事件处理程序属性（如
onclick）。<button onclick="alert('Clicked!')">Click mebutton> - DOM0级事件处理程序：将一个函数赋值给一个事件的处理程序属性。
var btn = document.getElementById("myButton"); btn.onclick = function() { alert("Clicked!"); }; - DOM2级事件处理程序：使用
addEventListener()或removeEventListener()方法来绑定和移除事件处理程序。var btn = document.getElementById("myButton"); btn.addEventListener("click", function() { alert("Clicked!"); }, false); // false表示在冒泡阶段调用事件处理程序
事件对象
在事件处理程序执行期间，会有一个事件对象作为参数传入，这个对象包含与事件有关的所有信息。
type：事件的类型，如"click"。target：事件的目标（触发事件的元素）。currentTarget：事件处理程序当前正在处理的元素。preventDefault()：取消事件的默认行为。stopPropagation()：停止事件的进一步传播（冒泡或捕获）。
常见事件
以下是一些常见的事件类型：
- 鼠标事件：
click：鼠标点击元素时触发。dblclick：鼠标双击元素时触发。mousedown：鼠标按钮被按下时触发。mouseup：鼠标按钮被释放时触发。mouseover：鼠标移入元素时触发。mouseout：鼠标移出元素时触发。mousemove：鼠标在元素上移动时触发。
- 键盘事件：
keydown：键盘按键被按下时触发。keyup：键盘按键被释放时触发。keypress：键盘按键被按下并释放时触发。
- 表单事件：
submit：表单被提交时触发。change：表单元素值被改变时触发。focus：元素获得焦点时触发。blur：元素失去焦点时触发。
- 文档/窗口事件：
load：页面完全加载后在window对象上触发。unload：页面完全卸载后在window对象上触发。resize：窗口或框架被调整大小时在window对象上触发。scroll：用户滚动带滚动条的元素时触发。
了解和熟练使用JavaScript事件是前端开发中非常重要的技能，它们是实现页面交互和动态内容的关键。
5.JavaScript AJAX
AJAX（Asynchronous JavaScript and XML）是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换，实现了页面的异步更新。以下是关于JavaScript中实现AJAX的一些基础知识和步骤：
步骤：
- 创建XMLHttpRequest对象：
XMLHttpRequest对象用于在后台与服务器交换数据。这是AJAX的基础。var xhr = new XMLHttpRequest(); - 配置XMLHttpRequest对象：
使用open()方法初始化一个请求，并指定请求类型（GET、POST等）、URL以及是否异步执行。xhr.open("GET", "example.php", true); - 设置请求头（可选）：
如果需要设置请求头（例如在POST请求中设置Content-Type），可以在调用send()方法之前使用setRequestHeader()。xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); - 发送请求：
使用send()方法发送请求。如果是POST请求，需要在send()方法中传递要发送的数据。xhr.send(null); // 对于GET请求，这里通常为null // 对于POST请求，可以发送字符串或FormData对象，例如：xhr.send("name=value"); - 处理响应：
通过监听XMLHttpRequest对象的onreadystatechange事件来处理响应。xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 当请求完成并且服务器成功响应时执行的代码 console.log(xhr.responseText); // 获取响应文本 } };
XMLHttpRequest对象的属性和方法：
readyState：请求的状态，从0（未初始化）到4（完成）。status：服务器的HTTP状态码（例如200表示成功）。responseText：从服务器接收到的响应文本。responseXML：如果响应的内容类型是"text/xml"或"application/xml"，这个属性将包含响应数据的XML DOM文档。statusText：HTTP状态的说明。onreadystatechange：当readyState属性改变时会调用的事件处理程序。
简单的AJAX示例：
以下是一个使用AJAX进行GET请求的简单示例：
// 创建XMLHttpRequest对象 var xhr = new XMLHttpRequest(); // 配置请求类型、URL以及是否异步 xhr.open("GET", "example.txt", true); // 设置当请求完成时要执行的函数 xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { // 请求成功，处理服务器响应的内容 document.getElementById("demo").innerHTML = xhr.responseText; } }; // 发送请求 xhr.send();在这个例子中，当
example.txt文件的内容被成功加载后，它将被插入到ID为demo的HTML元素中。注意：
- 在现代Web开发中，通常会使用更高级的API，如
fetch，来处理网络请求，因为它提供了一个更现代、更强大的接口，并且基于Promise，使得异步操作更加简洁和易于管理。 - 使用AJAX时，需要考虑跨域资源共享（CORS）的问题，因为这可能会限制从不同源（协议、域名或端口不同）的网页请求资源。
6.正则表达式
正则表达式（Regular Expression）是用于匹配字符串中字符组合的模式。在JavaScript中，正则表达式是非常强大的工具，可以用于字符串的搜索、替换、分割和验证等操作。
基础语法：
- 字符匹配：
.匹配除换行符之外的任何单个字符；[abc]匹配方括号内的任意字符（a、b 或 c）；[^abc]匹配不在方括号内的任意字符。 - 量词：
*匹配前面的子表达式零次或多次；+匹配前面的子表达式一次或多次；?匹配前面的子表达式零次或一次；{n}精确匹配前面的子表达式 n 次；{n,}至少匹配 n 次；{n,m}至少匹配 n 次且最多匹配 m 次。 - 定位符：
^匹配输入字符串的开始位置；$匹配输入字符串的结束位置；\b匹配单词边界；\B匹配非单词边界。 - 分组和引用：
(和)用于分组；\n引用第 n 个分组。 - 选择符：
|用于选择匹配多个规则之一。
在JavaScript中使用正则表达式：
创建正则表达式：
- 使用正则表达式字面量：
/pattern/flags - 使用
RegExp构造函数：new RegExp("pattern", "flags")
其中，flags是可选的参数，可以包含以下值： g：全局匹配，找到所有匹配而非在第一个匹配后停止。i：不区分大小写匹配。m：多行匹配，使^和$能够匹配字符串中每一行的开始和结束。
方法：
test()：用于测试字符串是否匹配某个模式，返回布尔值。exec()：用于检索字符串中的正则表达式的匹配，返回一个数组或null。match()：字符串方法，用于找到一个或多个正则表达式的匹配。search()：字符串方法，用于检索与正则表达式相匹配的子字符串。replace()：字符串方法，用于替换与正则表达式匹配的子串。split()：字符串方法，用于把一个字符串分割成字符串数组。
示例：
匹配字符串：
var pattern = /hello/i; // 不区分大小写的正则表达式 var str = "Hello World!"; console.log(pattern.test(str)); // 输出：true替换字符串：
var str = "Visit Microsoft!"; var res = str.replace(/microsoft/i, "W3Schools"); console.log(res); // 输出：Visit W3Schools!使用全局匹配和捕获组：
var str = "Is this all there is?"; var pattern = /is/gi; // 全局不区分大小写匹配 var matches = str.match(pattern); console.log(matches); // 输出：["Is", "is"]使用
exec()：var str = "Hello world!"; var pattern = /Hello/g; var result = pattern.exec(str); console.log(result); // 输出：["Hello"]使用
split()：var str = "How are you doing today?"; var res = str.split(" "); console.log(res); // 输出：["How", "are", "you", "doing", "today?"]正则表达式非常强大，但也可以非常复杂。理解它们需要时间和实践。使用正则表达式时，建议尽可能使用精确的模式，避免过度匹配，同时注意性能问题。
- 属性节点：例如