-
[javascript] 42. JSON - 자바스크립트 강좌 JS / CSEWeb/JavaScript 2015. 6. 13. 15:28
JavaScript JSON
JSON은 데이터를저장하고 전송하는 형식입니다.
JSON은 서버에서 웹 페이지에 보내질때 주로 사용됩니다.
1. What is JSON?
JSON은 JavaScript Object Notation의 약자입니다.
JSON은 경량화 데이터 교환 형식입니다.
JSON은 언어 독립적입니다.
JSON은 자가 묘사(self-describing)적이고 쉽게 이해 할 수 있습니다.
2. JSON Example
아래 JSON 문법은 employee 객체를 선언한 것입니다: 3개의 employee 레코드에 대한 배열
12345{"employees":[{"firstName":"John", "lastName":"Doe"},{"firstName":"Anna", "lastName":"Smith"},{"firstName":"Peter", "lastName":"Jones"}]}cs 3. The JSON Format Evaluates to JavaScript Objects
JSON 형식은 자바스크립트 객체를 생성하는 코드와 동일한 문장구성을 통해 되어 있습니다.
이러한 유사성으로 인해, 자바스크립트 프로그램은 JSON 데이터를 자바스크립트 객체로 쉽게 변환 할 수 있습니다.
4. JSON Syntax Rules
- 데이터는 이름/값 쌍입니다.
- 데이터는 콤마로 구분됩니다.
- 중괄호가 객체를 담습니다.
- 꺽쇠괄호가 배열을 담습니다.
5. JSON Data - A Name and a Value
JSON 데이터는 이름.값 쌍으로 작성되어 있습니다. 자바스크립트 객체 속성처럼
이름/값 쌍은 필드 이름과 값으로 구성되어 있습니다.
"firstName":"John"6. JSON Objects
JSON 객체는 중괄호 안에 작성되어 있습니다.
자바스크립트처럼, 객체는 여러 이름/값 쌍으로 구성되어 있습니다.
{"firstName":"John", "lastName":"Doe"}7. JSON Arrays
JSON 배열은 대괄호 안에 작성되어 있습니다.
"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]8. Converting a JSON Text to a JavaScript Object
JSON의 일반적인 사용은 웹 서버로 부터 실 데이터를 읽어와서, 웹 페이지에 데이터를 표시합니다.
먼저, JSON 문법을 포함한 문자열을 만듭니다:
1234var text = '{ "employees" : [' +'{ "firstName":"John" , "lastName":"Doe" },' +'{ "firstName":"Anna" , "lastName":"Smith" },' +'{ "firstName":"Peter" , "lastName":"Jones" } ]}';cs 그 다음, 자바스크립트 내장 함수 JSON.parse()를 사용하여 문자열을 자바스크립트 객체로 변환합니다.
12var obj = JSON.parse(text);cs 예제:
1234567891011121314151617181920212223<!DOCTYPE html><html><body><h2>Create Object from JSON String</h2><p id="demo"></p><script>var text = '{"employees":[' +'{"firstName":"John","lastName":"Doe" },' +'{"firstName":"Anna","lastName":"Smith" },' +'{"firstName":"Peter","lastName":"Jones" }]}';obj = JSON.parse(text);document.getElementById("demo").innerHTML =obj.employees[1].firstName + " " + obj.employees[1].lastName;</script></body></html>cs 'Web > JavaScript' 카테고리의 다른 글
[javascript] 45. 객체 선언(Object defination) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 44. 서식 API(Forms API) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 43. 서식 검사(Forms validation) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 41. 예약어(Reserved Keywords) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 40. 성능(Performance) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13 [javascript] 39. 실수(Mistakes) - 자바스크립트 강좌 JS / CSE (0) 2015.06.13
