JavaScript基础知识1.JavaScript 基础语法 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. 节点类型

元素节点：例如 <div>、<p> 等。
属性节点：例如 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.718281828459045

7. `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)); // 0

9. `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` 和 `WeakMap`

Map 对象保存键值对，并且能够记住键的原始插入顺序。
WeakMap 对象同样保存键值对，但是键只能是对象，且不计入垃圾回收机制。

13. `Set` 和 `WeakSet`

Set 对象允许你存储任何类型的唯一值，无论是原始值或者是对象引用。
WeakSet 对象同样允许你存储对象引用，但是对象不会计入垃圾回收机制。

14. `Promise`

用于表示异步操作的最终完成（或失败）及其结果值。

15. `Symbol`

用于创建对象的唯一属性名。

16. `Reflect` 和 `Proxy`

Reflect 是一个内置对象，它提供拦截 JavaScript 操作的方法。
Proxy 对象用于定义基本操作的自定义行为（如属性查找、赋值、枚举、函数调用等）。这些内置对象为 JavaScript 提供了强大的功能，使得开发者能够轻松地处理各种编程任务。掌握这些对象的用法对于成为一名熟练的 JavaScript 开发者至关重要。

4.JavaScript 事件

在JavaScript中，事件是文档或浏览器窗口中发生的特定交互瞬间。事件可以是用户的操作，如点击按钮、在输入框中输入文本，也可以是浏览器自身的行为，如页面加载完成。以下是JavaScript事件的一些基本概念和用法：

事件流

事件流描述的是从页面中接收事件的顺序。IE和Netscape提出了两种相反的事件流概念：

事件冒泡：事件开始时由最具体的元素（文档中嵌套层次最深的节点）接收，然后逐级向上传播到较为不具体的节点（文档）。
事件捕获：事件开始时由不太具体的节点接收，然后逐级向下，直到最具体的节点。

事件处理程序

事件处理程序是响应某个事件的函数。将事件处理程序赋给元素的方法有几种：

HTML事件处理程序：直接在HTML元素中添加事件处理程序属性（如onclick）。
```
<button onclick="alert('Clicked!')">Click me</button>
```

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?"]

正则表达式非常强大，但也可以非常复杂。理解它们需要时间和实践。使用正则表达式时，建议尽可能使用精确的模式，避免过度匹配，同时注意性能问题。

JavaScript基础知识