[!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]+
设计个人首页作为 HTML 和 CSS 的实战，主要设计以下的几个部分，导航栏，侧边栏，logo，页脚，背景，以及一个简单的个人介绍页面，首先不考虑使用框架和库，仅对整体流程做熟悉，使用纯 HTML 和 CSS 进行基础实现。后续考虑使用框架和组件库进行重写。

CheckList for Web Design : Using this website to checkout those element u missed in your design. Prepare for those elements. Get Ready and Start.

Nav-Bar 页眉的导航栏设计

Buger 下拉菜单(侧边菜单)

https://alvarotrigo.com/blog/hamburger-menu-css/

flex 布局设计

使用 html css 进行布局时，如果计划使用 flex 等布局，避免无谓的划分子集的 div 等 box，避免多余的额外对齐工作，原型和草稿确认布局是很重要的。例如上述的导航栏，分成左右两个 div 即可，如果将搜索框等独立出来，在后续对齐和确认间距的时候会多出很多麻烦。

可以缩减为仅使用一个 div，使用 flex 的布局技巧来使得元素一半左对齐一半右对齐即可，下面时具体说明。可以参考文献 1 的《使用自动的外边距在主轴上对齐》章节。

如果希望让 flex 子元素靠右显示，可以在子元素中定义 margin-left: auto; (auto 也可使用其他数值单位替代)，参考 👍MDN弹性盒子容器中的对齐方式 | flex子元素靠右 | Flex的最后一个元素靠右 | Flexbox

• align-items 如果没有设置正确的话，所有的元素会按照撑满 flex 容器的高度去对齐。
• 使用 margin:auto 可以实现元素的居中
• 使用 align-self 可以实现单个 flex 子项的不同对齐方式。

可能接着阅读更多布局相关的资料，加深对布局的认识，以及正确选择合适的布局：Mdn Layout Cookbook

[!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

[!summary]+
Familiar with the pipeline of how to build a website, how to organize the files, etc…

Start Design

开始设计一个网站的时候，可以从以下三个方面入手来启动整个开发设计过程：网站的主题->基础的一些内容->整体的外观设计（草稿）

更具体一些：确定完要制作的网页，可以绘制草图有一个粗浅的整体效果，然后指定文本、图像、色彩、字体等资源，就可以开始制作了。

File Structure

关于项目中的文件命名，需要注意的是以下的三点，建议养成这样的规范去建立网页文件夹。

• 建议使用完全小写来命名文件，webserver 是大小写敏感的，所以复杂的大小写关系容易导致访问不到文件。
• 尽量不要使用空格，空格可能会破坏链接被视为两个文件等，如果没有被区分很多服务器也需要使用 %20 对空格进行替换
• 尽量使用连字符代替下划线进行文件命名，google 搜索引擎将连字符作为单词的分割符，而不会识别下划线

而文件存储结构部分，通常而言，有以下的关键文件和文件夹结构，在很多场景下也会将 image 等文件夹放到 static 文件夹中。

• index.html
• styles: 存放 css 文件
• images: 存放图片等媒体资源文件
• scripts: 存放 js 等脚本代码文件

资源的文件路径一般而言以 html 为 Basepath，然后根据上下级关系确认索引地址即可。

[!summary]+
Web 前端开发者路线学习，基本的目的是能够为自己想做的项目搭建前端界面，从 web 开始再到各个移动设备的前端 UI，基于 Mdn 课程，Roadmap 具体项目逐步推进对各个知识点的学习。

根据下面的课程、Roadmap、搭建自己的知识架构，在搭建过程中结合具体的项目，包括自己部署的界面去逐步实践，完善和熟悉整个知识体系和技术栈，并通过和现代 AI 辅助工具的合作，建立自己独立的前端开发流。

• Roadmap For Beginner
• Roadmap For All
• Mdn Web Tutor

Be Ready 准备以及基础了解

• 基础：开发环境准备、页面设计、文件架构规划（由于网站需要包含多种代码、文本、素材、因此如何组织文件是相当重要的）
• 语言：HTML 、CSS、JS 三驾马车为一个网页必不可少的要素，通过结合各自不同的功能来实现多样化的页面设计。

What’s WEB

What’s WEB? 通过 URL 统一资源定位符向服务器请求 HTML，HTML 通过包含的信息告诉 Browse 需要额外的信息来呈现该页面，因此基于 HTML 提供的信息 web browser 继续请求资源、CSS、JS 等文件，并将这些文件按照 HTML 的描述进行组合最终呈现完整的页面。

@AikenH 2022 Node-JS-Chapter1

参考：包管理工具npm、yarn以及nvm简介及简单使用

Concept 概念

对 Node，NPM，JS，Yarn，NVM 的概念和作用进行一个辨析和介绍，了解各自的含义和职责，进而理解我们使用的到底是什么，环境怎么管理，怎么自定义和进行改动等。