【JS篇】JS基础要件

条件语句

✨if…else语句（最常见）

基本语法：
	if(condition){
		//条件为真的代码
	}else{
	//运行其他的代码
	}

🔮注意：

• 关键字 if，并且后面跟随括号

• 要测试的条件，放到括号里（通常是“这个值大于另一个值吗”或者“这个值存在吗”）

• 另一组花括号，在里面我们有一些代码——可以是任何我们喜欢的代码，并且当条件语句返回值不是 true（换句话说，这个返回值为 false）的话，它才会运行

• 不一定需要 else 和第二个花括号——下面的代码也是符合语法规则的

if (condition) {
  /* 条件为真时运行的代码 */
}

/* 运行其他的代码 */

✨else if

使用else if来让你的if…else连接你的额外的选择和结果

💍关于比较运算符

• === 和 !==——判断一个值是否严格等于，或不等于另一个

• < 和 >——判断一个值是否小于，或大于另一个

• <= 和 >=——判断一个值是否小于或等于，或者大于或等于另一个

💍逻辑运算符：与、或、非

如果要测试多个条件，而不需要编写嵌套 if…else 语句，就可以用逻辑运算符

1. &&——逻辑与。允许你把两个或多个表达式连在一起，这样所有的表达式都必须单独评估为 true，整个表达式才能返回 true
2. ||——逻辑或。允许你把两个或多个表达式连在一起，其中一个或多个表达式必须单独评估为 true，整个表达式才能返回 true

//一种
if ((x === 5 || y > 3 || z <= 10) && (loggedIn || userName === 'Steve')) {
  // 执行代码
}
//第二种
if (!(iceCreamVanOutside || houseStatus === 'on fire')) {
  console.log('或许你应该呆在这里。');
} else {
  console.log('你需要赶紧离开这间房子。);
}

✨switch语句

if...else语句能够很好的实现条件代码，但它们主要适用于几个选择的情况。对于只想将变量设置一系列为特定值的选项或格局条件打印特定语句的情况，语法会比较麻烦，特别是有大量选择的时候。而switch语句 就是以单个表达式/值作为输入查看多个选项，执行与之相关的代码。

switch (表达式) {
  case 选择1:
    运行这段代码
    break;

  case 选择2:
    否则，运行这段代码
    break;

  // 包含尽可能多的情况

  default:
    //实际上，仅仅运行这段代码
}

💍三元运算符

用于测试一个条件，并返回一个值或者表达式，如果是通过true/false来选择，比if…else需要的代码更少

//基本语法
condition ? 运行这段代码 : 否则，运行这段代码

循环语句

✨✨✨for循环

🖥️循环条件:

循环通常需要一个或多个条件

• 一个开始条件，它被初始化为一个特定的值 - 这是循环的起点

• 一个结束条件，这是循环停止的标准

• 一个迭代器，这通常在每个连续循环上递增少量的计数器，直到达到退出条件

🖥️循环标准:

for (initializer; exit-condition; final-expression) {
  // code to run
}

注意：

• 关键字for，后跟一些括号

• 在括号内，有三个条件，以分号分隔：

  • 一个初始化器 - 这通常是一个设置为一个数字的变量，它被递增来计算循环运行的次数。它也有时被称为计数变量

  • 一个退出条件 - 如前面提到的，这个定义循环何时停止循环

  • 一个最终条件 - 这总是被判断（或运行），每个循环已经通过一个完整的迭代消失时间

• 一些包含代码块的花括号 - 每次循环迭代时都会运行这个代码

🎞️🎞️🎞️使用 break 退出循环

如果要在所有迭代完成之前退出循环，可以使用 break 语句

---

当 switch 语句中符合输入表达式的情况满足时，break 语句立即退出 switch 语句并移动到代码之后

🎞️🎞️🎞️使用 continue 跳过迭代

continue 语句以类似的方式工作，而不是完全跳出循环，而是跳过当前循环而执行下一个循环

✨✨✨while 语句和 do … while 语句

//基本语法

while (exit-condition) {
  // code to run
  final-expression
}

do…while循环非常类似但在 while 后提供了终止条件：

do {
  // code to run

  final-expression
} while (exit-condition)

事件介绍

事件是您在编程时系统内发生的动作或者发生的事情——系统会在事件出现时产生或触发某种信号，并且会提供一个自动加载某种动作

在 Web 中，事件在浏览器窗口中被触发并且通常被绑定到窗口内部的特定部分 — 可能是一个元素、一系列元素、被加载到这个窗口的 HTML 代码或者是整个浏览器窗口

🎞️事件处理器属性

const btn = document.querySelector('button');

btn.onclick = function() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

🎞️内联事件处理器——请勿使用

function bgChange() {
  const rndCol = 'rgb(' + random(255) + ',' + random(255) + ',' + random(255) + ')';
  document.body.style.backgroundColor = rndCol;
}

🎞️addEventListener() 和 removeEventListener()

在 addEventListener()函数中，我们具体化了两个参数——我们想要将处理器应用上去的事件名称，和包含我们用来回应事件的函数的代码

🎞️ 事件对象

在事件处理函数内部，您可能会看到一个固定指定名称的参数，例如event，evt或简单的e。这被称为事件对象，它被自动传递给事件处理函数，以提供额外的功能和信息

🎞️事件冒泡及捕获

事件冒泡和捕捉是两种机制，主要描述当在一个元素上有两个相同类型的事件处理器被激活会发生什么
对事件冒泡和捕捉的解释

👉当一个事件发生在具有父元素的元素上 (例如，在我们的例子中是元素) 时，现代浏览器运行两个不同的阶段 - 捕获阶段和冒泡阶段。在捕获阶段：

• 浏览器检查元素的最外层祖先，是否在捕获阶段中注册了一个onclick事件处理程序，如果是，则可以运行

• 移动到中单击元素的下一个祖先元素，并执行相同的操作，然后是单击元素再下一个祖先元素，依此类推，直到到达实际点击的元素。

👉在冒泡阶段，恰恰相反：

• 浏览器检查实际点击的元素是否在冒泡阶段中注册了一个onclick事件处理程序，如果是，则运行它

• 然后它移动到下一个直接的祖先元素，并做同样的事情，然后是下一个，等等，直到它到达元素。