[JSON] JS - JSON - Syntax (구문) ★

1. JSON 구문
2. JSON Key (키)
3. JSON Value (값)
4. JS 객체의 속성 접근법 
5. JS 객체와 배열을 JSON으로 변환
6. 배열 안 JSON 출력
7. JSON 파일

JSON 구문

 

JSON 구문은 JS 구문의 하위 분야로, JS 객체 표기법 구문에서 파생.

---

1. 데이터는 키:값 (즉, Key:Value) 쌍으로 구성.

 

myJSON = '{"site":"홈짱닷컴", "year":2012, "code":[ "HTML", "CSS", "JS" ]}';

 

---

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

 

myJSON = '{"site":"홈짱닷컴", "year":2012, "code":[ "HTML", "CSS", "JS" ]}';

---

3. 중괄호({})는 객체 기호임.

 

myJSON = '{"site":"홈짱닷컴", "year":2012, "code":[ "HTML", "CSS", "JS" ]}';

---

4. 대괄호([])는 배열 기호임.

 

myJSON = '{"site":"홈짱닷컴", "year":2012, "code":[ "HTML", "CSS", "JS" ]}';

JSON Key (키)

 

키는 큰따옴표("...")로 묶어야 함. (예) {"site":"홈짱닷컴"}

cf. JS에서는 키를 큰따옴표로 안 묶어도 됨.

(∵ "문자열, 숫자, 식별자" 모두 키로 사용 가능.)

 

JSON Value (값)

1. 값(value)은 아래 형식 중 하나여야 함.

• 문자열 (string)
• 숫자 (number)
• 객체 (JSON object),
• 배열 (array)
• 참거짓 (boolean)
• 널 (null)

 

cf. JS는 추가로 아래 형식도 사용 가능.

• 함수 (function)
• 날짜 (date)
• 비정의 (undefined)

  

---

2.  문자열 값은 반드시 큰따옴표("...")로 묶어야 하고, 그외는 안 묶음.

(예) { "site":"홈짱닷컴" }

cf. 
JS에서 문자열 값은 큰따옴표, 작은따옴표 둘 다 사용해 묶을 수 있음.

(예) { "site":'홈짱닷컴' }

 

더 자세히 보기

JS 객체의 속성 접근법

[객체의 속성 접근법 1]  - 변수명.키

 

<p id="hz"></p>

<script>

var myObj, x;

myObj = { site: "홈짱닷컴", domain: "Homzzang.com", year:2012 }; // JS 객체 정의

x = myObj.site; // JS 객체 값 접근

document.getElementById("hz").innerHTML = x; // JS 객체 값 출력

</script>

 

결과보기

---

PS. 값 수정 방법

 

<p id="hz"></p>

<script>

var myObj, x;

myObj = { site: "홈짱닷컴", domain: "Homzzang.com", year:2012 }; // JS 객체 정의

myObj.site = "코딩무료학습사이트"; // JS 객체 값 접근

document.getElementById("hz").innerHTML = myObj.site; // JS 객체 값 출력

</script>

 

결과보기

---

[객체의 속성 접근법 2]  - 변수명["키"]

  

<p id="hz"></p>

<script>

var myObj, x;

myObj = { site: "홈짱닷컴", domain: "Homzzang.com", year:2012 }; // JS 객체 정의

x = myObj["site"]; // JS 객체 값 접근

document.getElementById("hz").innerHTML = x; // JS 객체 값 출력

</script>

 

결과보기

---

PS. 값 수정 방법

 

<p id="hz"></p>

<script>

var myObj, x;

myObj = { site: "홈짱닷컴", domain: "Homzzang.com", year:2012 }; // JS 객체 정의

myObj["site"] = "코딩무료학습사이트"; // JS 객체 값 수정

document.getElementById("hz").innerHTML = myObj["site"]; // JS 객체 값 출력

</script>

 

결과보기

JS 객체와 배열을 JSON으로 변환

JS 객체를 JSON으로 변환

https://homzzang.com/b/js-93

 

JS 배열을 JSON으로 변환

https://homzzang.com/b/js-94

 

배열 안 JSON 출력

<script>

var hz= [ {'site':"홈짱닷컴",'host' : "Homzzang.com", 'open': 2012} ];

// 방법1

document.write(hz[0].site+" "+hz[0].host+" "+hz[0].open);

// 방법2

document.write(hz[0]["site"]+" "+hz[0]["host"]+" "+hz[0].["open"]);

</script>

 

결과보기

JSON 파일

 

• JSON file type : .json
• JSON MIME type : application/json  (ex) header("Content-Type: application/json; charset=UTF-8");

 

※ MIME type : 브라우저가 올바른 동작을 하도록 알려주는 지침. 자세히 보기