JSON 표기법이란 ?
JavaScript Object Notation 의 약자로 서로 다른 프로그래밍 언어 간에 데이터를 교환하기 위한 표기법으로 읽고 쓰기 쉽도록 고안해낸 데이터 표기법중 하나.
간단한 데이터를 표현하기 하는데는 XML 보다도 더 간단해 질 수 있어 모바일용으로 적극 권장되고 있음.
XML 보다는 기능이 적고 간단하기 때문에 파싱하는데 필요한 시간이 단축될 수 있음.
표현 방법
대부분의 언어에서 친숙하게 사용되고 있는 구조로서 3가지 형태로 표현 할 수 있다.
1) {변수:값, ...} 형태
2) [배열]
3) 혼합형
1. { 변수:값, ...} 형태
{}를 사용하여 변수명과 값을 나열하는 행태. 과일이름을 정의해 보자.
| var fruits = { apple:'사과' , banana: '바나나' , melon:'메론' , watermelon:'수박' } |
위와 같이 정의된 형태는 객체명.이름 형태로 불러올 수 있으며 배열의 요소명으로 사용하여 불러 올 수 있다.
| fruits.apple; // 사과 fruits.banana; // 바나나 fruits['apple']; // 사과 fruits['watermelon']; // 수박 |
2. 배열 형태
자바스크립트에서는 배열의 초기값을 지정할 때 {}기호를 사용하여 정의하였지만 json은 []를 사용하여 배열의 초기값을 정의 한다.
| var mountine = ['백두산', '지리산', '한라산', '금강산', ' 설악산' ]; |
접근 방법은 일반 배열과 같이 첨자를 사용하여 접근하며 length를 사용하여 배열의 개수를 구할 수 있다.
mountine[0]; // 백두산
mountine.length; // 배열의 개수 5
3. 혼합형(1)
{변수:값} 형태와 배열 형태를 혼합한 형태로 정의하여 사용하는 방법이며, 전체적인 구조는 "변수:값" 형태는 유지하고 배열형만 배열명:[값, ...] 형태로 변경하면 된다.
아래의 간단 예를 살펴 보도록 하자.
| var complex = { apple:'사과', banana:'바나나', melon:'메론', mnt:['백두산','금강산', '한라산'] }; |
apple, banana, melon은 complex 객체를 통해 바로 접근할 수 있다.
complex.apple; // 사과
complex.banana; // 바나나
complex.melon; // 메론
complex안에 있는 mnt 배열은 complex.mnt를 통해 접근 가능하다.
complex.mnt[0]; // 백두산
complex.mnt[1]; // 금강산
complex.mnt[2]; // 한라산
complex.mnt의 길이를 구하려면 complex.mnt.length 로 구할 수 있다.
4. 혼합형(2)
2차원 배열 형태로 선언하는 방법이다.
| var arry = [ { name:'park', id:'1111'}, { name:'kim', id:'2222' } ]; |
위와 같이 선언되었다면 접근 방법은 다음과 같다.
arry[0].name; // park
arry[0].id; // 1111
arry[1].name; // kim
arry[1].id; // 2222
선언되는 유형이나 방법은 프로그램 내에서 어떤 조건으로 쓰여지는지에 따라 다양하게 구현 될 수 있다.
5. 혼합형(3)
배열안에 배열 형태로 선언하여 사용 한다. 예제 소스를 살펴 보도록 하자.
[실행소스]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script language="javascript">
var array = [{ name:'명산', id: 1234,
method:[ {name:'백두산', position:'양강도 삼지연군', height:'2,750m'},
{name:'한라산', position:'제두도 서귀포시', height:'1,950m'}]
},
{ name:'강', id: 4567,
method:[ {name:'두만강', position:'연해주 국경', length:'547.8Km'},
{name:'섬진강', position:'전남/전북', length:'212.3Km'}]
} ];
window.onload = function(){
rs = document.getElementById("result");
str = "Name : " + array[0].name;
str += "<br/>ID : " + array[0].id;
str += "<br/>name : " + array[0].method[0].name;
str += "<br/>position : " + array[0].method[0].position;
str += "<br/>height : " + array[0].method[0].height;
str += "<p/>name : " + array[0].method[1].name;
str += "<br/>position : " + array[0].method[1].position;
str += "<br/>height : " + array[0].method[1].height;
rs.innerHTML =str;
}
</script>
</head>
<body>
<div id='result'></div>
</body>
</html>
[실행결과]
클래스 정의하기
Java나 C++처럼 객체에 대한 모든 특징을 갖고 있지는 않지만 자바스크립트를 통하여 객체 지향언어의 일반적인 형식으로 사용할 수 있다.
자바스크립트 또한 클래스를 정의 할때 필드(멤버변수)와 메서드(멤버함수)로 나뉘어 정의 할 수 있다.
1. prototype으로 정의하기(객체 생성후 사용)
[실행소스]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSON class Define</title>
<script>
MyClass = function(){};
MyClass.prototype={
// 필드가 정의 되는 부분
// 나열연산자 사용함.
name:'park',
id:'1111',
address:'seoul',
phone:'010-1111-2222',
// 메서드가 정의되는 부분
// 메서드 부분 역시 나열...
getName:function(){
return this.name;
},
setName:function(n){
this.name = n;
}
}
//객체 생성
mc = new MyClass();
//getter 사용
document.write(mc.getName());
document.write("<br/>");
//setter 사용
mc.setName("kim");
document.write(mc.getName());
</script>
</head>
<body>
</body>
</html>
[실행결과]
2. prototype 없이 정의(객체 생성하지 않고 바로 사용 방법)
new MyClass()와 같은 명령을 사용하여 객체를 생성하지 않고 바로 사용할 수 있도록 만드는 방법이다. 객체를 정의 할 때 약간의 편리한 점은 있지만 동일한 구조의 객체를 여러개 생성하여 사용할 수는 없다는 단점이 있다.
[실행예제]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>JSON class define2</title>
</head>
<body>
<script>
var mc = {
name:'park',
id:'1111',
setName:function(n){
this.name = n;
},
getName:function(){
return this.name;
}
}
document.write('before : ' + mc.getName());
mc.setName('kim');
document.write('<br/>atfer : ' + mc.getName());
</script>
</body>
</html>
[실행결과]
'BOOK > 자바스크립트' 카테고리의 다른 글
| 응용예제(앨범만들기) (0) | 2021.07.30 |
|---|---|
| 응용예제 - 시계만들기 (0) | 2021.07.30 |
| 이벤트란? (0) | 2021.07.30 |
| Screen 객체 (0) | 2021.07.30 |
| Math 객체 (0) | 2021.07.30 |
댓글