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); // Tom
 person.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'; // 替换 class
 element.classList.add('newClassName'); // 添加 class
 element.classList.remove('oldClassName'); // 移除 class
 element.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
 });
 
 // 使用 Promise
 let 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/await
 function 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();