· JSON: JavaScript Object Notation.
· 자바스크립트를 위한 것이며, 객체 형식으로 자료를 표현 하는 것이다.
· JSON은 쉽고 간결하게 XML을 대체 할 수 있다.
＊ 이 글은 w3schools.com 를 참조하여 작성하였습니다.
JSON과 XML의 차이점
1) JSON 끝내는 태그가 필요하지 않다.
2) 상대적으로 코드의 길이가 짧다.
3) 빠르게 쓰고 읽을 수 있다.
4) 배열을 사용할 수 있다.
XML 로 표현 시
<employees>
<employee>
<firstName>John</firstName> <lastName>Doe</lastName>
</employee>
<employee>
<firstName>Anna</firstName> <lastName>Smith</lastName>
</employee>
<employee>
<firstName>Peter</firstName> <lastName>Jones</lastName>
</employee>
</employees>
하지만 JSON으로 표현을 한다면,
JSON 으로 표현 시
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
JSON은 자체가 데이터 포멧일 뿐이지, 프로그래밍언어는 아니다. 또한 XML과 같이 TEXT 형태이기 때문에, 어떠한 프로그램 언어로 읽을 수 있는 장점이 있다.
또한 이미 자바스크립트의 표준으로 채택되어 있기 때문에 기본적으로 JSON을 지원한다. 그렇기 때문에 단순히 사용하기 위해서 별도의 라이브러리가 필요하진 않다.
간단한 JSON 사용법
<!DOCTYPE html>
<html>
<body>
<p id="demo"></p>
</body>
<script>
var employee= '{"name":"John Johnson","street":"Oslo West 16","phone":"555 1234567"}';
var obj = JSON.parse(employee); // eval( "("+ employee +")" );
document.getElementById("demo").innerHTML = obj.name + "<br>" + obj.street + "<br>" + obj.phone;
</script>
</html>
================================================================
· Result
employee 라는 변수에 이름, 거리, 전화번호를 JSON 형태의 TEXT 로 만들어 주었다.
JSON.parse(employee); 함수의 역할은 employee 변수에 담겨져 있는 JSON 형태의 TEXT를 객체 로 파싱해주도록 하는 함수이다.
이제 만들어진 JSON 객체(obj 변수) 에서 선언하였던 이름, 거리, 전화번호를 각각 접근할 수 있는 것이다.
eval() 함수
TEXT를 JSON 객체로 만들어 주는 함수는 앞서 살펴보았듯이 JSON.parse() 가 있지만, eval()이라는 함수도 존재한다.
var employee = '{"firstName":"John","lastName":"Doe" }' //이 형태의 JSON 데이터라면
var obj = eval("("+employee+")"); //이런 식으로 JSON 객체를 만들 수 있다.
alert(obj.firstName); // John 처럼 사용을 하게 되면 JSON 객체를 만들어 준다.
또한 JSON TEXT가 다음과 같이 배열로 되어 있을 때에도 사용이 가능하다.
var employee = [' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }] // 다음과 같이 배열로 JSON TEXT가 되어 있다면
var obj = eval(employee); // 이렇게 하는 것만으로도 JSON객체를 만들 수 있다.
alert(obj[1].firstName); // Anna 하지만 eval()은 빠르기는 하지만 단순히 그 안의 내용을 실행하기 때문에 악의적인 사용자가 자바스크립트 명령문 을 담는다면,
그것을 그대로 실행시켜 보안에 취약 할 수가 있다.
그렇기 때문에 리턴받는 데이터를 신뢰하기 어려울 때에는 JSON parser 를 사용하도록 해야한다.
JSON.org에서 제공하며, 오직 JSON text 만 받아들이고 다른 스크립트는 차단하기 때문에 보안에 안전하다.
되도록이면 eval()의 사용은 지양하도록 한다.
JSON 문법
1) JSON 데이터는 항상 이름/값이 한 쌍
2) 데이터끼리는 콤마(,)로 구분
3) 중괄호 { } 는 객체를 표현
4) 대괄호 [ ] 는 배열을 표현
{"firstName":"John", "lastName":"Doe"}var employees = [
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter","lastName": "Jones"}
];JSON의 값(value)에 사용 가능한 형태
1) 숫자 (Number) (int형 or float형 )
2) 문자 (String) (쌍따옴표(")로 감싸서 사용)
3) 참/거짓 (Boolean) (true or false)
4) 배열 (array) (대괄호([ ])로 감싸서 사용)
5) 객체 (object) (중괄호({ })로 감싸서 사용)
6) 빈 값 (null)
<!DOCTYPE html>
<html>
<body>
<p id="demo2"></p>
</body>
<script>
var employees = [
{
"firstName":"John",
"lastName":"Doe"
},
{
"firstName":"Anna",
"lastName":"Smith"
},
{
"firstName":"Peter",
"lastName":"Jones"
}
];
document.getElementById("demo2").innerHTML = employees[0].firstName + " " + employees[0].lastName;
</script>
</html>
==========================================================
Result
배열(employees)에서 접근할 객체의 index(예제에선 0) 를 대괄호로 감싼 후 객체에 접근하는 방법(.firstName)으로 값에 접근
'컴퓨터 > 자바스크립트' 카테고리의 다른 글
| alert창 줄바꿈 (2줄로 만들기) (0) | 2016.08.11 |
|---|---|
| 현재시각 표시하는 시계 만들기 (date 객체) (8) | 2016.06.20 |
| .substring()과 .substr() (0) | 2016.06.15 |
| .toUpperCase(), .toLowerCase() (0) | 2016.06.15 |
| 소수점 반올림, 올림, 버림, .0채우기 (0) | 2016.06.11 |
