JavaScript（JS）基础

以下是关于 JavaScript（JS）基础的介绍：

一、JavaScript 简介

JavaScript 是一种广泛用于网页开发的编程语言，它可以为网页添加交互性和动态效果。它运行在浏览器环境中，也可以在服务器端（如 Node.js）使用。

二、语法基础

1. 变量声明
   • 使用 var、let 和 const 来声明变量。let 和 const 是在 ES6 中引入的，它们具有块级作用域，相比 var 更加安全和灵活。
   • 例如：

     let name = 'John';
     const age = 30;

1. 数据类型
   • JavaScript 有七种基本数据类型：number（数字）、string（字符串）、boolean（布尔值）、null、undefined、symbol（符号）和 bigint（大整数）。还有一种复杂数据类型 object（对象）。
   • 例如：

     let num = 10; // number
     let str = 'Hello'; // string
     let isTrue = true; // boolean
     let nothing = null;
     let undef; // undefined
     let sym = Symbol('description'); // symbol
     let bigIntValue = 10n; // bigint
     let obj = { name: 'John', age: 30 }; // object

1. 运算符
   • 算术运算符：如 +、-、*、/、% 等。
   • 比较运算符：如 ==、===、>、<、>=、<= 等。
   • 逻辑运算符：如 &&（与）、||（或）、!（非）。
   • 例如：

     let a = 10;
     let b = 5;
     console.log(a + b); // 15
     console.log(a > b); // true
     console.log(a === b); // false
     console.log(a > 0 && b > 0); // true

1. 控制流语句
   • if...else 语句用于条件判断。
   • for、while 和 do...while 循环用于重复执行代码块。
   • switch 语句用于多分支选择。
   • 例如：

     let num = 10;
     if (num > 5) {
       console.log('Number is greater than 5');
     } else {
       console.log('Number is less than or equal to 5');
     }

     for (let i = 0; i < 5; i++) {
       console.log(i);
     }

     let choice = 2;
     switch (choice) {
       case 1:
         console.log('Option 1');
         break;
       case 2:
         console.log('Option 2');
         break;
       default:
         console.log('Other option');
     }

三、函数

1. 函数定义
   • 使用 function 关键字定义函数。可以接受参数，并可以返回值。
   • 例如：

     function add(a, b) {
       return a + b;
     }
     let result = add(10, 5);
     console.log(result); // 15

1. 匿名函数和箭头函数
   • 匿名函数是没有名称的函数，可以作为参数传递给其他函数或立即执行。
   • 箭头函数是一种简洁的函数表达式，在 ES6 中引入。
   • 例如：

     // 匿名函数
     let multiply = function (a, b) {
       return a * b;
     };
     console.log(multiply(3, 4)); // 12

     // 箭头函数
     let square = (num) => num * num;
     console.log(square(5)); // 25

四、对象

1. 对象创建
   • 使用对象字面量或构造函数创建对象。
   • 例如：

     // 对象字面量
     let person = {
       name: 'John',
       age: 30,
       sayHello: function () {
         console.log('Hello!');
       },
     };

     // 构造函数
     function Person(name, age) {
       this.name = name;
       this.age = age;
       this.sayHello = function () {
         console.log('Hello! I am ' + this.name);
       };
     }
     let person2 = new Person('Jane', 25);

1. 属性和方法访问
   • 使用点表示法或方括号表示法访问对象的属性和方法。
   • 例如：

     console.log(person.name); // John
     person.sayHello(); // Hello!
     console.log(person['age']); // 30

五、数组

1. 数组创建
   • 使用数组字面量或构造函数创建数组。
   • 例如：

     let numbers = [1, 2, 3, 4, 5];
     let fruits = new Array('apple', 'banana', 'orange');

1. 数组操作
   • 可以通过索引访问数组元素，修改、添加或删除元素。
   • 例如：

     console.log(numbers[0]); // 1
     numbers[1] = 10;
     numbers.push(6);
     numbers.pop();

1. 数组遍历
   • 使用 for 循环、forEach 方法等遍历数组。
   • 例如：

     for (let i = 0; i < numbers.length; i++) {
       console.log(numbers[i]);
     }

     numbers.forEach((num) => console.log(num));

六、事件处理

在网页开发中，JavaScript 可以处理用户交互事件，如点击、鼠标移动、键盘输入等。

1. 事件绑定
   • 使用 addEventListener 方法或在 HTML 元素的属性中直接指定事件处理函数。
   • 例如：

     <button id="myButton">Click me</button>
     <script>
       let button = document.getElementById('myButton');
       button.addEventListener('click', function () {
         console.log('Button clicked');
       });
     </script>

七、DOM 操作

JavaScript 可以操作网页的文档对象模型（DOM），改变页面的内容和结构。

1. 查找元素
   • 使用 document.getElementById、document.getElementsByTagName、document.getElementsByClassName 等方法查找 HTML 元素。
   • 例如：

     let element = document.getElementById('myElement');
     let elements = document.getElementsByTagName('div');
     let elementsByClass = document.getElementsByClassName('myClass');

1. 修改元素内容和属性
   • 可以修改元素的文本内容、HTML 内容、属性值等。
   • 例如：

     let element = document.getElementById('myElement');
     element.textContent = 'New text';
     element.innerHTML = '<strong>New HTML</strong>';
     element.setAttribute('class', 'newClass');