[!summary]+
本篇是 Mdn 使用 JSON 一文的阅读笔记，对 web 开发中的 JSON 进行了介绍

JSON 简介

JavaScript Object Notation(JSON)是将结构化数据表示为 JavaScript 对象的标准格式，通常用于网页上的表示和传输数据（服务端，客户端），熟悉 JSON 对象的创建，传输，解析，对于 JS 来说也是一门基本功了。

JSON 可以存在单独的文件中，后缀为 .json，同时在进行网络传输时，MIME 类型为 application/json

基本操作介绍

对 JSON 这类标记语言进行的操作通常就是下面的两种：

• 将字符串转换为原生对象的过程称为反序列化(deserialization)
• 将原生对象转换为字符串进行网络传输的字符串的过程则成为序列化(serialization)

因此可以理解为这就是一个 object-string 的相互转换过程，因此在一个语言中如何使用 json 这种标记语言，最核心的就是上述的这两个操作，随着后续的发展，JSON 在除了 js 的其他语言中也被广泛的使用到。

JSON 结构和“语法”

整个 JSON 是一个字符串，其非常类似于 JS 对象字面量的写法（无需命名对象名），且其中仅包含要传输的数据（属性）而不包含方法；

一般而言有两种方法来编写 JSON 文件，一种是类似对象字面量（字典），存储一个单体对象的方式；另一种则是 JSON 数组，最外层用数组的形式，在数组里面可以存储多个单独对象。下面分别给出示例：

单对象形式，对象字面量（like 字典），js 中反序列化获取之后就会得到一个对象，使用对象的方法去调用其中的属性即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

{
	"squadName": "Super hero squad",
 	"homeTown": "Metro City",
 	"formed": 2016,
 	"menbers": [
	 	{
	 		"name": "Molecule Man",
	      	"age": 29,
	      	"secretIdentity": "Dan Jukes",
	      	"powers": [
	      		"Radiation resistance", "Turning tiny", "Radiation blast"
	      	]
	 	},
	 	{
	 		"name": "Madame Uppercut",
	   		"age": 39,
	   		"secretIdentity": "Jane Wilson",
	   		"powers": [
	     		"Million tonne punch","Damage resistance", "Superhuman reflexes"
	  		]
	 	}
 	]
}

数组多对象形式,下面这种写法也是一种合法的 JSON，js 中反序列化获取后则会得到一个数组对象，使用下标去索引即可。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

[
	{
	   "name": "Molecule Man",
	   "age": 29,
	   "secretIdentity": "Dan Jukes",
	   "powers": ["Radiation resistance", "Turning tiny", "Radiation blast"]
	 },
	 {
	   "name": "Madame Uppercut",
	   "age": 39,
	   "secretIdentity": "Jane Wilson",
	   "powers": [
	     "Million tonne punch",
	     "Damage resistance",
	     "Superhuman reflexes"
	   ]
	 }
]

同时 JSON 还有以下的一些编写规范：

1. 纯数据，只包含属性不包含方法；
2. 要求字符串和属性名称使用双引号，单引号无效；
3. 错位的 , 和 ; 都可能导致 json 文件出错，要做好检查，可以使用JSONLint 这样的程序来验证；
4. JSON 实际上可以使任何可以有效包含在 JSON 中的数据类型的形式，例如，单个字符串或者单个数字也是一个有效的 JSON 对象；

[!summary]+
JS 中的一切变量皆为对象，可以将对象理解为一个包含相关数据和方法的集合（变量 & 函数）我们也将其称之为属性和方法，就像我们在 python 里做的那样，本篇为 mdn_JS对象基础，mdn_JS对象原型 的阅读笔记

如果 面向对象编程基本概念 不太清楚的话，可以看一下这个链接，了解一下下面这些基本概念：derive 派生 | oriented 面向 | polymorphism 多态 | override 重写/重载 | encapsulation 封装 | private 私有 | delegation 委派 |

从声明对象开始

手动声明对象（字面量）

在 JS 中声明一个对象实际上和声明一个字典一样，使用 {} 就可以声明一个对象，{}中可以包含属性甚至函数，下面给出一个例子：

1
2
3
4
5
6
7
8
9
10

const person = {
	name: ["aiken", "metis"],
	age: 26,
	bio: function () {
		console.log(`${this.name[0]} ${this.name[1]} now is ${this.age} years old`);
	}
	introduce() {
		console.log(`hello! i'm ${this.name[0]}.`);
	}
}

可以看出该声明的对象中，不仅包含属性: name, age, 还包含方法 bio, introduce,可以看出方法存在两种不同的写法，更常用的是第二种简写。

这种手动写出对象的内容来创建的特定对象叫做对象字面量(object literal)，与从定义好的类实例化出来的对象不同。

基于函数来批量声明对象

当我们需要批量创建多个同类对象的时候，按照上面的方法来定义就会显得十分麻烦，这个时候我们可以使用函数来批量声明对象。

1
2
3
4
5
6
7
8
9
10
11
12

function createPerson(name, age)
{
	const obj = {};
	obj.name = name;
	obj.age = age;
	obj.bio = function(){
		console.log(`${this.name} now is ${this.age} years old`);
	};
	return obj;
}
const aiken = createPerson('aiken','26');
const metisy = createPerson('metis', '25');

通过函数来声明对象的时候：用首先定义一个空对象，然后去修改对象属性和对象的方法，实现批量处理。

“this” 使用和含义

this 指代代码运行时调用 this 的对象本身，这在定义单个对象字面量的时候可能没什么用，但是当我们有多个对象，这样这种时候通过使用 this，就可以使得函数定义是更通用的，就像上面的例子中，aiken.bio 和 metisy.bio 都能正确的打印出其年纪和名称。

使用类(构造函数)来声明对象

使用类来声明对象是各种编程语言中最通用的一种声明对象的方式，JS 一切皆为对象的设计思想，使得 JS 中定义类的方式和定义函数的方式实际上是十分相似的，这里主要的区分在于用构造函数声明新对象的时候，我们使用 new 关键字。下面给出一个例子：

1
2
3
4
5
6
7
8
9
10
11
12

function Person(name, age)
{
	// 命名类的时候和其他语言一样，使用大写字母开头。
	this.name = name;
	this.age = age;
	this.bio = function(){
		console.log(`${this.name} now is ${this.age} years old`);
	};
}

const aiken = new Person('aiken', 26);
const metis = new Person('metis', 25);

可以看出，使用构造函数的方式的时候，我们无需指定返回值，但需要使用 new 关键词去声明新的对象。

[!summary]+
web-js 中主要的编程方式就是需要结合browser 的事件和属性来实现对页面的动态控制，事件章节可以说是web 动态编程中的核心部分了，了解主要存在和需要被控制的事件是相当重要的。

常见的浏览器事件

下面列出一些常见的事件类型和具体事件，更多的事件可以参考Mdn，在设计页面的时候可以考虑我们希望获得什么效果来找寻是否有对应的事件来构建对应的动态响应。

在确定了事件之后，就需要对事件附加一个事件处理器（监听器），当事件触发的时候，运行指定的js 代码对该事件做出相应。

事件处理器

[!summary]+
通常而言，我们使用特定的 element 调用 addEventListener(event, function) 添加一个事件监听器，当参数中指定的事件 event 在对应元素上发生，就调用对应的 function 执行相应的变动，如果不是通用的函数，这里经常可以看到使用匿名函数去定义对应的操作。

添加事件处理器

因此对于一个事件而言，实际上包含的操作有以下的几个：找到 DOM 中要操作的对应元素、添加事件监听器、选择对应的事件、定义对应的操作函数；

1

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

1
2
3
4
5
6
7
8

function random(number) {
  return Math.floor(Math.random() * (number + 1));
}

function changeBackground() {
  const rndCol = `rgb(${random(255)}, ${random(255)}, ${random(255)})`;
  document.body.style.backgroundColor = rndCol;
}

1

btn.addEventListener("click", changeBackground);

可以为同一个事件设置多个处理器，也就是添加多个 function，对于添加事件来说其中 addEventListener 是最为通用的，可以绑定多种事件，不过除了 addEventListener 之外，还有一些特殊事件的添加监听的方法，例如 click 事件有一个内联的监听器：onclick。

1

btn.onlick = changeBackground;

虽然有一些示例在 html 中绑定事件内联，但是最好还是分开在 js 中绑定更好。

JS 基础语法

该部分的学习除了 MDN 的相关知识，会结合数据结构的内容来进行学。

语言的第一印象和 python 有许多相似的地方。语法上可能大差不差，在循环和其他一些变量上又有一些和 C#,CPP 相似的地方。

Basic Rules 基础规则简介

首先介绍基本的编写规则:如注释、缩进规则、变量规则等…

• 注释：CPP 相同使用 // 和 /* */ 进行行/块注释。
• 句尾 ; ：单行单条语句结束可以无需 ; (但为了规范和明确可以加上)，同行多个语句可以用 ; 进行语句的区分。

变量

声明变量使用：var, let, const 三个关键词；其中 let 和 const 是相似的，用于声明块级作用域的局部变量，只有在声明的位置之后才能使用，唯一的区别在于 const 声明的常量不能用赋值运算符直接更改，（但如果是个对象，它的属性可以被添加、更新、删除）

变量定义：(另起一个 Paragraph 表示尊重) JS 为非强类型语言(即类似 python 而非 cpp)，为动态类型语言，变量声明无需指定类型。但有以下几个注意的事项：

• （不推荐）不带关键字的变量声明会默认为全局变量。
• （推荐）可以使用 let 或 var 关键字定义变量。
• （最推荐）最推荐使用 let 进行变量的声明，var 对变量定义位置的要求更低，使用 var 编写可能会方便，但是在后续维护和阅读中可能会体验很差。使用 let 然后和别的语言一样声明和使用变量。
• 可以使用 typeof 来检查变量类型

其中对于变量的定义上，Var 和 let 的详细差别可以参考 var与let的区别，var变量提升，简单的讲 var 的定义会先于所有的语句执行，声明一个全局的变量。下面简单介绍一下各种不同的数据类型：

对象：JavaScript 里一切皆对象，一切皆可储存在变量里。这一点要牢记于心，字典也是一种对象，定义方式和 Python 一致：

1
2

let dog = { name: "Spot", breed: "Dalmatian" };
dog.name // 访问name属性。

数值： JS 只有一种数值类型 Number，不需要像 cpp 执行 int 和 float 之类的转换，说到数值类型，就需要对基本的运算符进行说明，这里简单列一下支持的一些运算符类型

基本运算符：和大多数语言的基本运算符保持一致，这里需要特殊说明的只有相等的判断符，区别于其他语言，JS 中使用三个等号来判断相等；

1
2

if a == b:
	print("a is equal to b")

1
2
3
4

if (a === b)
{
	console.log("a is equal to b");
}

这里的函数定义和条件判断都更接近 cpp，使用{}将代码块来区分，而非单纯使用缩进。

[!summary]+
JS 除了 WEB 在现代还有很多 NodeJS 的应用也会使用 JS，这里只介绍 web 相关的 JS 代码编写的部分。

ref: mdn JS 快速入门 | 《数据结构与算法 JavaScript 描述》

Intro

JavaScript 是一门完备的动态编程语言，可以借由诸多开发者编写的大量工具，为网站提供动态交互的特性（结合浏览器应用程序接口 API）主要用到的包括：

• 浏览器应用程序接口（API）：浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS 样式、从用户的摄像头采集处理视频流、生成 3D 图像与音频样本等等。
• 第三方 API：让开发者可以在自己的站点中整合其他内容提供者（Twitter、Facebook 等）提供的功能。
• 第三方框架和库：用来快速构建网站和应用。

HTML 引入 JS 代码

为了使得代码更清晰且好组织，本文依然使用引入外部 JS 的办法进行代码结构组织，HTML 中引入相关 JS 的方法和 CSS 的方法类似但略有不同。具体代码如下：

1

<script src="scripts/main.js" defer></script>

这一段代码可以加在 Head 部分，其中的 defer 属性，及 deferred 延迟，是为了让元素都加载完成后再加载 JS 部分代码，否则最好将 JS 的引入放在 HTML 快要结束的部分（</body> 的前一行）。避免 JS 元素对 HTML 提前进行修改导致 HTML 加载失效。

参考资料：async-defer | Medium