• Q&A
  • 회원가입
  • 로그인

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

355  

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 (키)

 

1-1.

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

cf.
JS에서는 키를 큰따옴표로 안 묶어도 됨. (∵ 
"문자열, 숫자, 식별자" 모두 키로 사용 가능)

 

 

JSON Value (값)

 

1,

값은 아래 형식 중 하나여야 함.

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

 

cf.
JS에서는 위 형식에 추가해서 아래 형식도 값으로 가능.
함수 (function)
날짜 (date)
비정의 (undefined)

 

 

2.
문자열 값은 반드시 큰따옴표로 묶어야 하고, 그외는 안 묶음.
(예) { "site":"홈짱닷컴" }


cf.
JS에서 값은 큰따옴표 또는 작은따옴표로 묶을 수 있음.

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

 

더 자세히 보기


 

 

JSON은 JS 객체 구문 차용 (※ 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>

 

결과보기

 

[값 수정]

 

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

 

결과보기

 

[값 수정]

 

<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 파일

 

JSON file type : .json
JSON MIME type : application/json

(ex) header("Content-Type: application/json; charset=UTF-8");

 

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

 


찾아주셔서 감사합니다. Since 2012