2. JSON의 기본
기본적인 형태는 아래와 같이 사용이 가능하다.
1) 프로퍼티 <-> 값
var obj = {
"프로퍼티 이름" : "값",
}
2) 메소드
var obj = {
"메소드 이름" : function() {alert('This is method')}
}
3) 메소드(인수)
var obj = {
"메소드 이름" : function(인수) {alert('This is method')}
}
이것만으로 오브젝트 obj를 만드는 것이 가능하여, obj.프로퍼티이름 으로 값을 얻어 낼 수 있어, obj.메소드이름() 으로 "This is method"라는 대화창을 표시한다.
1) 프로퍼티 <-> 값
var obj = {
"프로퍼티 이름" : "값",
}
2) 메소드
var obj = {
"메소드 이름" : function() {alert('This is method')}
}
3) 메소드(인수)
var obj = {
"메소드 이름" : function(인수) {alert('This is method')}
}
이것만으로 오브젝트 obj를 만드는 것이 가능하여, obj.프로퍼티이름 으로 값을 얻어 낼 수 있어, obj.메소드이름() 으로 "This is method"라는 대화창을 표시한다.
■ 오브젝트
아래와 같이 myJSONObject를 만들어보고 이를 Javascript를 이용해 확인해보자.
<script language="JavaScript">
<!--
var myJSONObject = {
"test" : "hello"
}
//-->
</script>
<form>
<input type = "button" onclick="alert(typeof myJSONObject)" value="click">
</form>
<!--
var myJSONObject = {
"test" : "hello"
}
//-->
</script>
<form>
<input type = "button" onclick="alert(typeof myJSONObject)" value="click">
</form>
■ 프로퍼티
<script language = "JavaScript">
<!--
var myJSONObject2 = {
"test": "hello"
}
//-->
</script>
<form>
<input type = "button" onclick = "alert( myJSONObject2 )" value = "click">
<input type = "button" onclick = "alert( myJSONObject2.test )" value = "click">
<input type = "button" onclick = "myJSONObject2.test = 'new test' ; alert(myJSONObject2.test )" value = "click">
</form>
<!--
var myJSONObject2 = {
"test": "hello"
}
//-->
</script>
<form>
<input type = "button" onclick = "alert( myJSONObject2 )" value = "click">
<input type = "button" onclick = "alert( myJSONObject2.test )" value = "click">
<input type = "button" onclick = "myJSONObject2.test = 'new test' ; alert(myJSONObject2.test )" value = "click">
</form>
1) alert(myJSONObject2)는 myJSONObject2가 object임을 보여준다.
2) alert(myJSONObject2.test)는 myJSONObject2 오브젝트에서 test프로퍼티의 값 "hello"를 가져온다.
3) myJSONObject2.test = 'new test' ;에서 test 프로퍼티의 값을 "new test"로 변경한다.
alert(myJSONObject2.test)를 다시 수행하게되면 "hello"의 값이 "new test"로 변경되었음을 확인할 수 있다.
위의 예에서는 프로퍼티가 한개인 경우를 테스트하여 보았다. 그렇다면 프로퍼티가 2개이상일 경우에는 어떻게 사용하는지 확인해보자.
<script language="JavaScript">
<!--
var myJSONObject3 = {
"test1": "hello1", "test2": "hello2", "test3":"hello3"
}
//-->
</script>
<form>
<input type="button" onclick="alert(myJSONObject3.test1)" value="click">
<input type="button" onclick="alert(myJSONObject3.test2)" value="click">
<input type="button" onclick="alert(myJSONObject3.test3)" value="click">
</form>
<!--
var myJSONObject3 = {
"test1": "hello1", "test2": "hello2", "test3":"hello3"
}
//-->
</script>
<form>
<input type="button" onclick="alert(myJSONObject3.test1)" value="click">
<input type="button" onclick="alert(myJSONObject3.test2)" value="click">
<input type="button" onclick="alert(myJSONObject3.test3)" value="click">
</form>
부연 설명이 필요 없을정도로 깔끔하지 않은가?
myJSONObject3의 각 프로퍼티인 "test1", "test2", "test3"를 각각 호출하면 각 프로퍼티의 값인 "hello1", "hello2", "hello3"를 꺼내오게된다.
■ 메소드
<script language="JavaScript">
<!--
var myJSONObject4 = {
"test1" : "function() { alert('This is method test1') }"
}
//-->
</script>
<form>
<input type="button" onclick="eval('a=' + myJSONObject4.test1); a()" value="click">
</form>
※ eval()함수는 변수를 javascript의 함수처럼 쓰는 명령어임.<!--
var myJSONObject4 = {
"test1" : "function() { alert('This is method test1') }"
}
//-->
</script>
<form>
<input type="button" onclick="eval('a=' + myJSONObject4.test1); a()" value="click">
</form>
myJSONObject4의 메소드 test1을 실행하는 예를 보여주고 있다. 메소드 test1을 실행하면 "This is method test1"을 확인할 수 있다.
■ 메소드(인수)
마지막으로, 메소드에 인수(파라미터)가 있는 경우는 어떻게 해야하는지 살펴보도록 하자.
<script language="JavaScript">
<!--
var myJSONObject5 = {
"test2" : "function(arg) { alert('This is argument : ' + arg) } "
}
//-->
</script>
<form>
<input type="button" onclick="eval('var a=' + myJSONObject5.test2 + ''); a('hello');" value="click">
<input type="button" onclick="eval('(' + myJSONObject5.test2+')(\'hello\')');" value="click">
</form>
</form>
<!--
var myJSONObject5 = {
"test2" : "function(arg) { alert('This is argument : ' + arg) } "
}
//-->
</script>
<form>
<input type="button" onclick="eval('var a=' + myJSONObject5.test2 + ''); a('hello');" value="click">
<input type="button" onclick="eval('(' + myJSONObject5.test2+')(\'hello\')');" value="click">
</form>
</form>
1) eval('var a=' + myJSONObject5.test2 + ''); a('hello');
2) eval('(' + myJSONObject5.test2+')(\'hello\')');
두가지 모두 동일한 결과를 보여주고 있으므로 사용하기 편한 형태를 골라 사용하면 된다.
지금까지 간단하게 JSON의 형태에 대해서 알아보았다.
다음에는 JSON의 자료형(?)에 대해 알아보도록 하겠다.