JavaScript JSON - 자바스크립트 강좌 JS / CSE

2017.05.06 08:51

졸리운_곰 조회 수:499

JSON - 자바스크립트 강좌 JS / CSE

 

JavaScript JSON

 JSON은 데이터를저장하고 전송하는 형식입니다.

 

 JSON은 서버에서 웹 페이지에 보내질때 주로 사용됩니다.

 

 

 

 

1. What is JSON?

 JSON은 JavaScript Object Notation의 약자입니다.

 JSON은 경량화 데이터 교환 형식입니다.

 JSON은 언어 독립적입니다.

 JSON은 자가 묘사(self-describing)적이고 쉽게 이해 할 수 있습니다.

 

 

 

 

2. JSON Example

 아래 JSON 문법은 employee 객체를 선언한 것입니다: 3개의 employee 레코드에 대한 배열

 
1
2
3
4
5
{"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"
 

 

경축! 아무것도 안하여 에스천사게임즈가 새로운 모습으로 재오픈 하였습니다.
어린이용이며, 설치가 필요없는 브라우저 게임입니다.
https://s1004games.com

 

 

 

 

 

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 문법을 포함한 문자열을 만듭니다:

 

 
1
2
3
4
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
 cs

 

 

 

 그 다음, 자바스크립트 내장 함수 JSON.parse()를 사용하여 문자열을 자바스크립트 객체로 변환합니다.

 
1
2
var obj = JSON.parse(text);
 
 cs
 

 

 

 

 

 예제:

 

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
<!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

 

 

 

  

 



출처: http://palpit.tistory.com/402 [palpit's log-b]

 

본 웹사이트는 광고를 포함하고 있습니다.
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
이 게시물을
목록
목록
쓰기
태그
대표 김성준 주소 : 경기 용인 분당수지 U타워 등록번호 : 142-07-27414
통신판매업 신고 : 제2012-용인수지-0185호 출판업 신고 : 수지구청 제 123호 개인정보보호최고책임자 : 김성준 sjkim70@stechstar.com
대표전화 : 010-4589-2193 [fax] 02-6280-1294 COPYRIGHT(C) stechstar.com ALL RIGHTS RESERVED