前端学习回顾-04

1、JS 定义

JS (JavaScript)。
JavaScript 是一种编程语言。
JavaScript 可以为网站添加交互特性。

2、基于 JS 核心的工具

基于 JavaScript 核心编写的工具，分为以下三类：
（1）浏览器应用程序接口（Application Programming Interface API）：浏览器内置的 API 提供了丰富的功能。比如：动态创建 HTML 和设置 CSS样式、从用户的摄像头采集并处理视频流、生成3D图像以及音频样本等。
（2）第三方 API：使开发者可以在自己的站点中整合其他内容提供者（Twiiter、Facebook等）提供的功能。
（3）第三方框架和库：用于快速构建网站和应用。

3、变量（Variable）

变量使存储值的容器。
声明变量：声明变量需要先输入关键字 let 或 var（不推荐使用），然后输入你给定的合适的名称，这样一个变量就声明成功了，注意嗷，有些名称不能用于声明变量（变量声明规则）。
声明变量示例：

let variable; // 注意空格和分号；
variable = '花期'; // 声明变量后可以进行赋值
let huaqi = 'florescence'; // 可以将变量的声明与赋值写在同一行
huaqi; // 可以直接通过变量名获取变量的值
huaqi = '花七'; // 变量在赋值后可以进行更改

变量的数据类型：

变量	解释
undefined	没有被赋值的已声明变量的默认值为 undefined。
Boolean	表示一个逻辑实体，拥有两个值：true / false。
Number	可以表示（-（253- 1）到 253）之间的数值。
String	表示文本数据。
BigInt	可以表示任意精度的整数。
Symbol	表示唯一且不可更改的原始值。
null	特指未设置对象的值，在布尔运算中被判断为falsy。
Object	JavaScript 里一切皆对象，一切皆可储存在变量里。

4、注释（comment）

注释是可以与代码一起添加的文本片段。浏览器会忽略标记为注释的文本。
示例（两种注释方式）：

/*
这里的所有内容
都是注释。
*/

// 这是一条注释。

5、运算符（operator）

运算符是一种数学符号，可以根据变量（一个或多个）产生相应的结果。（笔者自主解释，具体参考MDN-JS基础-operators）
示例（只列举基础，详情请见MDN-表达式和运算符）：

运算符	解释	符号	示例
加（addition）	将两个数字相加，或拼接两个字符串。	+	6 + 9 "Hello " + “world!”
减（subtraction） 乘（multiplication） 除（division）	这些运算符操作与基础算术一致，只是乘法写作星号，除法写作斜杠。	- * /	9 - 3 8 * 2; //乘法在JS中是一个星号 9 / 3
赋值（assignment）	为变量赋值。	=	let myVariable = ‘花七’
等于（equality）	测试两个值是否相等，并返回一个 true/false （布尔）值。	===	let myVariable = 7 myVariable === 4; // false
不等于（does-not-equal）	和等于运算符相反，测试两个值是否不相等，并返回一个 true/false （布尔）值。	!==	let myVariable = 7 myVariable !== 7; // false
取非（not）	返回逻辑相反的值，比如当前值为真，则返回 false。	!	原式为真，但经取非后值为 false： let myVariable = 3 !(myVariable === 3); // false

6、条件语句（conditionals）

条件语句是用来测试表达式为真或为假的一种代码结构。
常见的条件语句结构为 if…else 。示例：

let iceCream = 'chocolate';
if (iceCream === 'chocolate' ) {
    alert('I love chocolate ice cream!');
} else {
    alerrt('but chocolate is my favorite...');
}

if（…）中的表达式进行测试。用（上文所提到的）等于运算符”===“来比较 iceCream 与字符串 ‘chocolate’ 是否相等。如果返回 true ，则运行第一个代码块；如果返回 false ，则直接运行 else 之后的代码块。

7、函数（function）

函数用于封装可复用的功能。
以下是浏览器已内置的函数，示例：

let myVariable = document.querySelector('h1'); // 查找 HTML 文档中的 h1 元素，并将它们赋值给变量 myVariable
alert('hello!'); // 提示框输出 hello 文本

以下是自定义函数，示例：

function multiply(num1,num2) {
  let result = num1 * num2;
  return result;
};

multiply(4, 7); // expected result 28
multiply(20, 20); // expected result 400
multiply(0.5, 3); // expected result 1.5

8、事件（event）

事件能为网页添加真实的交互能力。它可以捕捉浏览器并运行一些代码作为相应。
最简单点击事件，鼠标的点击操作会触发该事件。示例：

document.querySelector('html').onclick = function() {
    alert('别戳我，我怕痒。');
}

将事件与元素绑定有许多方法。这里选用了将一个匿名函数（即未命名函数）赋值给 html 的 onclick 属性。
其他写法，示例：

document.querySelector('html').onclick = function() {};
// 等价于
let myHTML = document.querySelector('html');
myHTML.onclick = function() {};