[Basic] JS - JSON (제이슨) - 데이터 전송 위한 가벼운 자료 형식.

1. JSON 정의
2. JSON 예제
3. JSON 형식은 JS 객체로 평가됨.
4. JSON 구문 규칙
5. JSON 데이터 - 이름:값
6. JSON 객체
7. JSON 배열
8. JSON 텍스트를 JS 객체로 변환.

JSON 정의

 

데이터 저장/전송 위한 형식임.

보통, 서버에서 웹페이지로 데이터 보내서 표시할 때 사용.

 

---

 

1.

JSON (JavaScript Object Notation)

2.

가벼운 데이터 교환 형식.

3.

언어 독립적임.

즉, 

JSON 구문은 JavaScript Object Notation 구문에서 파생되었지만, 

JSON 형식은 텍스트 전용임. 

JSON 데이터를 읽고 생성 위한 코드는 모든 프로그래밍 언어로 작성 가능함.

4.

 "자체 설명적'이며, 이해하기 쉬움.

 

JSON 예제

※ 3개 기록 갖은 배열. (객체 일종)

 

{

"codes":[

  {"lang":"HTML", "role":"구조"},

  {"lang":"CSS", "role":"다자인"},

  {"lang":"JS", "role":"동적기능"}

]

}

 

JSON 형식은 JS 객체로 평가됨.

 

JSON 형식은 JS 객체를 만드는 코드와 구문적으로 동일.

(∴ JS는 JSON 데이터를 순수 JS 객체로 쉽게 변환 가능.)

※ 맨 하단 예제 참고. 

 

JSON 구문 규칙

 

1.

데이트는 이름:값 쌍으로 형식.

 

2.

각 데이터는 쉼표(,)로 구분.

 

3. 

담긴 데이터 형식에 따라 괄호 모양 다름. ★

※ 중괄호( {} )는 객체를 품음.

※ 대괄호( [] )는 배열을 품음.

 

JSON 데이터 - 이름:값

 

1.

JS 객체와 마찬가지로, key:value 쌍으로 작성.

2.

JSON 경우, 이름, 값 모두 각각 큰따옴표로 묶음.

(예) "key":"value"

 

cf.

JS객체 경우, 이름은 따옴표로 안 묶음. 

(예) key:"value"

 

JSON 객체

 

JSON 객체는 중괄호 안에 작성.

JS처럼, 객체는 여러 이름:값 쌍을 쉼표(,)로 나열 가능.

 

---

[예제]

 

{"HTML":"구조", "CSS":"디자인"}

 

JSON 배열

 

JSON 배열은 대괄호 안에 작성.

JS처럼, 배열은 객체를 포함 가능.

 

---

[예제] codes 객체는 배열이며, 3개 객체가 포함되어 있음.

 

{

"codes":[

  {"lang":"HTML", "role":"구조"},

  {"lang":"CSS", "role":"다자인"},

  {"lang":"JS", "role":"동적기능"}

]

}

 

JSON 텍스트를 JS 객체로 변환.

 

JSON 텍스트를 JSON.parse() 함수 이용해 JS 객체로 변환 가능.

 

---

<p id="demo"></p>

<script>

var text = '{"codes":[' +

'{"lang":"HTML","role":"구조" },' +

'{"lang":"CSS","role":"디자인" },' +

'{"lang":"JS","role":"동적기능" }]}'; // JSON 문자열.

hz = JSON.parse(text); // (JSON 문자열 → JS 객체) 변환.

 

document.getElementById("demo").innerHTML =

hz.codes[1].lang + " " + hz.codes[1].role;

</script>

 

결과값: CSS 디자인