【筆記】網頁開發的常見名詞：JSON－Mr. W 電腦村莊

前言

這次要來聊網頁開發當中常見的名詞：JSON (JavaScript Object Notation) 格式

JSON 就是由 JavaScript 語法所組成的資料交換格式，可以在前、後端進行資料的傳遞。

但這不是說，JSON 只能在 JavaScript 這個程式語言使用，

像是 ASP.NET (C#) 也有辦法解析 JSON 格式。

如果能夠了解 JSON 格式的組成，以後將資料進行傳遞時，就比較能夠上手！

現在我就來整理 JSON 的常見用法～

貼心提醒：如果圖片看不清楚，可以點開看大圖喔～

我在 JSON 的學習上，大部分都是參考 MDN 的官方文件。

我個人是蠻推薦閱讀的，因為官網寫得很清楚！

1. JSON 全名是 JavaScript Object Notation，是一種在網路上很常見的

「資料交換格式」。

就像剛才我有提到「網頁前後端」使用 RESTful API 傳遞資料，

所謂的資料可能就是「JSON」格式。

這麼做有一個好處，就是前後端都有「共同語言」，工程師們彼此知道自己在說什麼。

2. JSON 本身以 JavaScript 的語法構成的資料格式，可被視為「物件」或「字串」：

物件：從後端 API 拋回資料給前端。

字串：提交前端的表單，送到後端 API 處理商業邏輯。

3. JSON 本身可以是陣列、物件、字串等元素所構成。

一般來說，我會把 JSON 叫做「物件格式」，雖然它不一定是物件。

等一下我會給大家看 JSON 的長相，到時候你就會知道 JSON 可以有很多變形。

這次我用 GitHub Gist 把 Source Code 放到文章裡面，應該會比上次我拿 Carbon 還要好。

我就直接叫 GitHub Copilot 幫我產生 JSON 物件，當然我還是有修改一下：

	const studentInfo = [
	{
	name: "Andy",
	age: 18,
	isMarried: false,
	scores: {
	math: 90,
	english: 85,
	},
	},
	{
	name: "Bella",
	age: 20,
	isMarried: true,
	scores: {
	math: 95,
	english: 90,
	},
	}
	];
	let student = document.getElementById("result1");
	//第一位學生(陣列元素)的姓名(屬性)
	student.textContent += "姓名: " + studentInfo[0].name + "\t";
	//student.textContent = "name: " + studentInfo[0]["name"] + "\t";
	//第一位學生(陣列元素)的數學成績(屬性)
	student.textContent += "數學成績: " + studentInfo[0].scores.math + "\t";
	//student.textContent += "數學成績: " + studentInfo[0]["scores"]["math"] + "\t";

	//第二位學生(陣列元素)的姓名(屬性)

	//第二位學生(陣列元素)的數學成績(屬性)

	// JSON 轉字串
	let jsonString = JSON.stringify(studentInfo);
	let result3 = document.getElementById("result3");
	result3.textContent = jsonString;