목차
- JSON 구문
- JSON Key (키)
- JSON Value (값)
- JS 객체의 속성 접근법
- JS 객체와 배열을 JSON으로 변환
- 배열 안 JSON 출력
- 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 : 브라우저가 올바른 동작을 하도록 알려주는 지침. 자세히 보기
