JavaScript入门知识

一、JavaScript 的基本概念

1. 什么是 JavaScript

2. JavaScript的发展历史

3. JavaScript的特点

4. JavaScript 的用途

二、JavaScript 的基础语法

1. 注释

2. 变量声明

3. 数据类型

4. 运算符

5. 控制流语句

6. 输出语句

7. 函数

9. 数组

10. 对象

三、DOM操作

1. DOM 概念

2. DOM 操作的基本方法

（1）获取元素

通过 ID 获取元素

通过类名获取元素（返回 HTMLCollection）

通过标签名获取元素（返回 HTMLCollection）

通过选择器获取元素（返回 NodeList）

（2）修改元素内容

修改文本内容

修改 HTML 内容

（3）修改元素属性

（4）修改元素样式

通过 style 对象修改样式

通过 className 修改样式

（5）创建和插入元素

创建新元素

插入元素

（6）删除元素

（7）事件处理

添加事件监听器

移除事件监听器

3. DOM 的性能优化

四、事件处理

五、ES6 新特性

六、异步编程

JavaScript 是一种广泛应用于网页开发的编程语言，它能够为网页添加交互性和动态功能。

一、JavaScript 的基本概念

1. 什么是 JavaScript

JavaScript 是一种轻量级的脚本语言，主要用于网页开发，通过与 HTML 和 CSS 结合，实现网页的动态效果和用户交互功能。

2. JavaScript的发展历史

JavaScript起源于1995年，由Netscape公司的Brendan Eich设计并实现，最初名为Mocha，后更名为LiveScript，最终定名为JavaScript以借助Java的流行度。1997年，ECMA国际组织发布了ECMAScript标准，使JavaScript成为标准化的脚本语言。随后，JavaScript经历了多个版本的更新和改进，如ES3引入正则表达式和异常处理，ES5增加严格模式和JSON支持，而ES6则带来了块级作用域、箭头函数、类等现代化特性。如今，JavaScript已成为Web开发中不可或缺的一部分，广泛应用于前端开发、服务器端编程、游戏开发等多个领域。

3. JavaScript的特点

解释性语言：JavaScript 是一种解释型语言，不需要编译，可以直接在浏览器中运行。这使得JavaScript的开发效率较高，同时降低了部署的复杂性，但也可能导致运行效率相对较低。不过，现代JavaScript引擎采用了即时编译（JIT）技术，大幅提高了运行效率。

弱类型、动态类型语言：JavaScript是一种弱类型或动态类型语言，这意味着在声明变量时不需要指定数据类型，且变量的数据类型可以在运行时更改。这为开发者提供了极大的灵活性，但也增加了出错的可能性。
面向对象：JavaScript 是一种基于对象的语言，支持面向对象编程（OOP）的三大特性：封装、继承和多态。然而，它并不完全遵循传统的类继承模式，而是通过原型链实现继承。
事件驱动：JavaScript 是一种事件驱动的语言，能够响应用户的交互操作（如点击、拖拽等）或浏览器事件（如页面加载完成），这种事件驱动的机制使得JavaScript非常适合用于开发交互式网页应用。
跨平台：JavaScript 可以在多种操作系统和设备上运行，包括桌面浏览器、移动设备和服务器端（通过 Node.js）。这种跨平台特性使得 JavaScript 成为一种非常通用的编程语言。

轻量级：JavaScript 是一种轻量级的编程语言，其代码规模较小，运行速度快，不会对系统造成过多负担，这使得它非常适合用于网页开发。

安全性：JavaScript 运行在沙盒环境中，限制了对本地文件和系统资源的访问，从而提高了安全性。但需要注意的是，JavaScript 无法直接访问本地硬盘或修改服务器数据。

易用性：JavaScript 的语法简洁明了，可以直接嵌入到 HTML 页面中，与 HTML 和 CSS 协同工作，实现动态网页效果。

丰富的库和框架：JavaScript拥有大量的第三方库和框架，如jQuery、React、Vue.js等，这些库和框架提供了丰富的功能和组件，极大地简化了开发过程，提高了开发效率。
异步事件处理：JavaScript支持异步事件处理，允许程序在没有阻塞的情况下响应用户交互、网络请求等。这一点通过它的事件循环和回调机制得以实现，可以有效提升用户界面的响应速度和性能。

4. JavaScript 的用途

前端开发：实现网页的动态效果（如动画、表单验证等）。
后端开发：借助 Node.js，JavaScript 可以用于服务器端编程。
移动应用开发：通过框架如 React Native 和 Ionic 开发跨平台移动应用。

二、JavaScript 的基础语法

1. 注释

注释用于提高代码的可读性和维护性，分为单行注释和多行注释：

单行注释：以 // 开头。
多行注释：以 /* 开始，以 */ 结束。

2. 变量声明

变量用于存储数据，JavaScript 中使用 var、let 或 const 关键字声明变量：

var：变量作用域为函数作用域，可以重新声明。
let：变量作用域为块级作用域，不能重复声明。
const：声明常量，值不可更改。

命名规则：变量名只能包含字母（a-z, A-Z）、数字（0-9）、下划线（_）和美元符号（$），第一个字符不能是数字，区分大小写。

3. 数据类型

JavaScript 提供多种数据类型，分为基本类型和引用类型：

基本类型：Number、String、Boolean、Null、Undefined、Symbol。
引用类型：Object、Array、Function。

4. 运算符

JavaScript 支持多种运算符，包括算术运算符、比较运算符、逻辑运算符等：

 let a = 10;let b = 20;// 算术运算符let sum = a + b; // 加法let diff = a - b; // 减法let product = a * b; // 乘法let quotient = a / b; // 除法let remainder = a % b; // 取余let exponent = Math.pow(a, 2); // 指数// 赋值运算符a += 5; // 等同于 a = a + 5// 比较运算符let isEqual = a == b; // 等于（值比较，类型转换）let isStrictlyEqual = a === b; // 严格等于（值和类型都相同）// 逻辑运算符let andResult = true && false; // 与let orResult = true || false; // 或let notResult = !true; // 非

5. 控制流语句

控制流语句用于控制程序的执行流程：

条件语句：if...else 和 switch。
循环语句：for、while 和 do...while。

 // if...else 示例let score = 85;if (score >= 90) {console.log("优秀");} else if (score >= 60) {console.log("及格");} else {console.log("不及格");}// for 循环示例for (let i = 0; i < 5; i++) {console.log(i);}// while 循环示例let j = 0;while (j < 5) {console.log(j);j++;}// do...while 循环示例let k = 0;do {console.log(k);k++;} while (k < 5);

6. 输出语句

JavaScript 提供多种输出方式：

console.log()：控制台输出。
alert()：弹出警告框。
document.write()：在 HTML 文档中写入内容。

7. 函数

函数是代码复用的重要方式：

 // 函数声明function greet(name) {console.log("Hello, " + name);}// 函数调用greet("Tom"); // 输出 "Hello, Tom"

9. 数组

数组是一种特殊的对象类型，用于存储一系列的值。

 let arr = [1, 2, 3, 4, 5];// 访问数组元素console.log(arr[0]); // 1// 遍历数组for (let i = 0; i < arr.length; i++) {console.log(arr[i]);}// 数组方法arr.push(6); // 添加元素到数组末尾arr.pop(); // 移除数组末尾的元素let firstElement = arr.shift(); // 移除数组开头的元素并返回arr.unshift(0); // 在数组开头添加元素console.log(arr); // [0, 2, 3, 4, 5, 6]

10. 对象

对象是 JavaScript 中的核心数据结构，由键值对组成。

 let person = {name: "Tom",age: 18,greet: function() {console.log("Hello, " + this.name);}};console.log(person.name); // Tomperson.greet(); // Hello, Tom// 添加属性person.gender = "female";// 删除属性delete person.age;

三、DOM操作

1. DOM 概念

JavaScript 的 DOM（文档对象模型）操作是前端开发中非常重要的技术，它允许开发者通过编程方式动态地修改网页的内容、结构和样式。DOM 是一种标准的编程接口，用于描述 HTML 或 XML 文档的结构。文档被表示为树形结构，每个节点代表文档中的一个元素、属性或文本内容。通过 DOM，开发者可以访问和操作这些节点，从而实现动态网页效果。

2. DOM 操作的基本方法

DOM 提供了多种方法来操作文档，包括获取元素、修改元素内容、添加/删除元素以及操作样式等。

（1）获取元素

通过 ID 获取元素

 var element = document.getElementById('myElementId');

通过类名获取元素（返回 HTMLCollection）

 var elements = document.getElementsByClassName('myClassName');

通过标签名获取元素（返回 HTMLCollection）

 var elements = document.getElementsByTagName('div');

通过选择器获取元素（返回 NodeList）

 var element = document.querySelector('.myClassName'); // 第一个匹配的元素var elements = document.querySelectorAll('.myClassName'); // 所有匹配的元素

（2）修改元素内容

修改文本内容

 element.textContent = '新的文本内容';

修改 HTML 内容

 element.innerHTML = '<p>新的 HTML 内容</p>';

（3）修改元素属性

 element.setAttribute('title', '新的标题');var title = element.getAttribute('title'); // 获取属性值element.removeAttribute('title'); // 移除属性

（4）修改元素样式

通过 style 对象修改样式

 element.style.color = 'red';element.style.fontSize = '20px';

通过 className 修改样式

 element.className = 'newClassName'; // 替换 classelement.classList.add('newClassName'); // 添加 classelement.classList.remove('oldClassName'); // 移除 classelement.classList.toggle('className'); // 切换 class

（5）创建和插入元素

创建新元素

 var newElement = document.createElement('div');newElement.textContent = '我是一个新元素';

插入元素

 // 在父元素的末尾插入新元素parentElement.appendChild(newElement);// 在父元素的指定子元素之前插入新元素parentElement.insertBefore(newElement, existingChild);

（6）删除元素

 javascript复制代码parentElement.removeChild(element);

（7）事件处理

添加事件监听器

 element.addEventListener('click', function() {alert('元素被点击了！');});

移除事件监听器

 function handleClick() {alert('元素被点击了！');}element.addEventListener('click', handleClick);element.removeEventListener('click', handleClick);

3. DOM 的性能优化

频繁的 DOM 操作可能会导致页面渲染性能下降。为了优化性能，可以采取以下措施：

减少不必要的 DOM 操作：尽量避免频繁修改 DOM，可以先将修改后的数据存储在变量中，最后一次性更新。
使用事件委托：通过父级元素监听子元素的事件，减少事件监听器的数量。
批量操作：将多个 DOM 操作合并为一次操作，避免多次触发浏览器的重排和重绘。

四、事件处理

JavaScript 通常用于处理用户事件，如点击、输入等。

 <!DOCTYPE html><html><head><title>Event Handling</title><script>function handleClick() {alert("Button clicked!");}window.onload = function() {document.getElementById("myButton").onclick = handleClick;};</script></head><body><button id="myButton">Click Me!</button></body></html>

五、ES6 新特性

ES6（ECMAScript 2015）引入了许多新特性，如箭头函数、模板字符串、解构赋值、类、模块等。

 // 模板字符串let name = "Alice";let greeting = `Hello, ${name}!`;console.log(greeting);// 解构赋值let person = { name: "Bob", age: 40 };let { name: personName, age: personAge } = person;console.log(personName, personAge);// 类class Rectangle {constructor(width, height) {this.width = width;this.height = height;}getArea() {return this.width * this.height;}}let rect = new Rectangle(5, 10);console.log(rect.getArea());

六、异步编程

JavaScript 支持多种异步编程方式，如回调函数、Promise 和 async/await。

 // 使用回调函数function fetchData(callback) {setTimeout(() => {let data = "Data fetched";callback(data);}, 1000);}fetchData((data) => {console.log(data); // Data fetched});// 使用 Promiselet promise = new Promise((resolve, reject) => {setTimeout(() => {let success = true;if (success) {resolve("Data fetched successfully");} else {reject("Failed to fetch data");}}, 1000);});promise.then((data) => {console.log(data); // Data fetched successfully}).catch((error) => {console.error(error);});// 使用 async/awaitfunction fetchData() {return new Promise((resolve, reject) => {setTimeout(() => {let success = true;if (success) {resolve("Data fetched successfully");} else {reject("Failed to fetch data");}}, 1000);});}async function getData() {try {let data = await fetchData();console.log(data); // Data fetched successfully} catch (error) {console.error(error);}}getData();