JavaScript 学习笔记

1. 介绍

JavaScript 是一种广泛用于 Web 开发的编程语言。它通常用于添加交互、动态更新内容、控制多媒体、动画等功能。它是三大前端技术之一，另外两个是 HTML 和 CSS。

2. 基础语法

2.1 变量

JavaScript 使用 var, let, 和 const 来声明变量。

var name = 'John'; // 全局或函数作用域
let age = 30; // 块级作用域
const pi = 3.14; // 常量，不可重新赋值

2.2 数据类型

JavaScript 有多种数据类型，包括原始类型和对象类型。

• 原始类型: Number, String, Boolean, Null, Undefined, Symbol, BigInt
• 对象类型: Object, Array, Function, Date, 等等。

2.3 操作符

算术操作符

let sum = 5 + 2; // 加法
let diff = 5 - 2; // 减法
let prod = 5 * 2; // 乘法
let quot = 5 / 2; // 除法
let mod = 5 % 2; // 取余

比较操作符

let isEqual = (5 == '5'); // true，值相等
let isStrictEqual = (5 === '5'); // false，值和类型都相等
let isNotEqual = (5 != '5'); // false，值不等
let isStrictNotEqual = (5 !== '5'); // true，值或类型不等

逻辑操作符

let and = true && false; // AND 操作
let or = true || false; // OR 操作
let not = !true; // NOT 操作

2.4 条件语句

let age = 18;

if (age >= 18) {
  console.log('Adult');
} else {
  console.log('Minor');
}

let status = (age >= 18) ? 'Adult' : 'Minor'; // 三元操作符

2.5 循环

for 循环

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

while 循环

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

do-while 循环

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

3. 函数

3.1 函数声明

function greet(name) {
  return `Hello, ${name}!`;
}

console.log(greet('Alice'));

3.2 函数表达式

const greet = function(name) {
  return `Hello, ${name}!`;
};

console.log(greet('Bob'));

3.3 箭头函数

const greet = (name) => `Hello, ${name}!`;

console.log(greet('Charlie'));

4. 对象与数组

4.1 对象

let person = {
  name: 'John',
  age: 30,
  greet: function() {
    console.log(`Hello, my name is ${this.name}`);
  }
};

console.log(person.name);
person.greet();

4.2 数组

let fruits = ['Apple', 'Banana', 'Cherry'];

console.log(fruits[0]); // 访问元素

fruits.push('Orange'); // 添加元素
console.log(fruits);

fruits.pop(); // 删除最后一个元素
console.log(fruits);

5. DOM 操作

5.1 选择元素

let element = document.getElementById('myId');
let elements = document.getElementsByClassName('myClass');
let elements = document.getElementsByTagName('div');
let element = document.querySelector('.myClass');
let elements = document.querySelectorAll('.myClass');

5.2 修改内容

let element = document.getElementById('myId');
element.innerHTML = 'New Content';
element.textContent = 'New Text';

5.3 修改样式

let element = document.getElementById('myId');
element.style.color = 'red';
element.style.backgroundColor = 'blue';

5.4 事件处理

let button = document.getElementById('myButton');
button.addEventListener('click', function() {
  alert('Button clicked!');
});

6. 异步编程

6.1 回调函数

function fetchData(callback) {
  setTimeout(() => {
    callback('Data received');
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

6.2 Promise

let promise = new Promise((resolve, reject) => {
  let success = true;

  if (success) {
    resolve('Promise resolved');
  } else {
    reject('Promise rejected');
  }
});

promise.then((message) => {
  console.log(message);
}).catch((error) => {
  console.log(error);
});

6.3 async/await

async function fetchData() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve('Data received'), 1000);
  });

  let result = await promise;
  console.log(result);
}

fetchData();

7. ES6+ 特性

7.1 模板字符串

let name = 'John';
let message = `Hello, ${name}!`;
console.log(message);

7.2 解构赋值

let person = { name: 'Alice', age: 25 };
let { name, age } = person;
console.log(name, age);

let arr = [1, 2, 3];
let [a, b, c] = arr;
console.log(a, b, c);

7.3 扩展运算符

let arr1 = [1, 2, 3];
let arr2 = [...arr1, 4, 5];
console.log(arr2);

let obj1 = { a: 1, b: 2 };
let obj2 = { ...obj1, c: 3 };
console.log(obj2);

7.4 模块化

导出

export const pi = 3.14;
export function add(a, b) {
  return a + b;
}

导入

import { pi, add } from './math.js';
console.log(pi);
console.log(add(2, 3));

确实，事件处理是JavaScript开发中的一个重要部分，尤其是在Web开发中。事件驱动的编程模型允许开发者响应用户交互和其他事件。以下是关于JavaScript事件的详细学习笔记。

8事件

8.1. 什么是事件

事件是浏览器或用户执行的动作，例如点击按钮、加载页面、提交表单等。事件驱动编程通过事件处理程序（函数）来响应这些事件。

8.2. 常见事件类型

• 鼠标事件：click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove
• 键盘事件：keydown, keyup, keypress
• 表单事件：submit, change, focus, blur
• 文档/窗口事件：load, resize, scroll, unload

8.3. 添加事件监听器

3.1 addEventListener 方法

推荐的现代方法是使用 addEventListener 来添加事件监听器，因为它提供了更强的灵活性和兼容性。

let button = document.getElementById('myButton');

button.addEventListener('click', function() {
  alert('Button clicked!');
});

3.2 直接在HTML标签中使用事件属性

不推荐使用这种方式，因为它会使HTML和JavaScript代码混在一起，降低代码的可维护性。

<button id="myButton" onclick="alert('Button clicked!')">Click Me</button>

8.4. 移除事件监听器

可以使用 removeEventListener 方法移除事件监听器。

let button = document.getElementById('myButton');
function handleClick() {
  alert('Button clicked!');
}

button.addEventListener('click', handleClick);

// 移除事件监听器
button.removeEventListener('click', handleClick);

8.5. 事件对象

当事件被触发时，会传递一个事件对象给事件处理函数，包含了有关事件的详细信息。

button.addEventListener('click', function(event) {
  console.log(event); // 打印事件对象
  console.log(event.type); // 事件类型
  console.log(event.target); // 事件目标元素
});

8.6. 阻止默认行为

可以使用 event.preventDefault() 方法来阻止默认行为，例如表单提交或链接跳转。

let link = document.getElementById('myLink');

link.addEventListener('click', function(event) {
  event.preventDefault(); // 阻止默认行为
  alert('Link clicked!');
});

8.7. 事件冒泡和捕获

####8. 7.1 事件冒泡

事件冒泡指的是事件从最具体的元素开始，逐级向上传播到最不具体的元素（通常是 document）。

let outer = document.getElementById('outer');
let inner = document.getElementById('inner');

outer.addEventListener('click', function() {
  alert('Outer clicked!');
});

inner.addEventListener('click', function() {
  alert('Inner clicked!');
});

点击 inner 会先触发 inner 的点击事件，然后冒泡触发 outer 的点击事件。

8.7.2 事件捕获

事件捕获是从最不具体的元素开始，逐级向下传播到最具体的元素。

outer.addEventListener('click', function() {
  alert('Outer clicked!');
}, true);

inner.addEventListener('click', function() {
  alert('Inner clicked!');
}, true);

通过传递 true 作为第三个参数，事件监听器将会在捕获阶段触发。

8.7.3 阻止事件传播

可以使用 event.stopPropagation() 来阻止事件的进一步传播。

inner.addEventListener('click', function(event) {
  event.stopPropagation(); // 阻止事件传播
  alert('Inner clicked!');
});

8.8. 事件委托

事件委托是一种通过利用事件冒泡来简化事件处理的技术。它允许你将单个事件监听器添加到父元素上，而不是为每个子元素添加事件监听器。

let list = document.getElementById('myList');

list.addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    alert('List item clicked!');
  }
});

在上述例子中，无论点击哪个 li 元素，都会触发父元素 ul 的点击事件。