1) object 출력
<script language="JavaScript">
<!--
var myJSONObject = {
"test" : "hello"
}
//-->
</script>
<form>
<input type = "button" onclick="alert(typeof myJSONObject)" value="click">
</form>
출력결과 : object형태이기 때문에 "object" 가 출력된다.
2) property 출력
<script language = "JavaScript">
<!--
var myJSONObject2 = {
"test": "hello"
}
//-->
</script>
<form>
<input type = "button" onclick = "alert( myJSONObject2 )" value = "click"> <!-- 출력결과 : object Object -->
<input type = "button" onclick = "alert( myJSONObject2.test )" value = "click"> <!-- 출력결과 : hello -->
<input type = "button" onclick = "myJSONObject2.test = 'new test' ; alert(myJSONObject2.test )" value = "click"> <!--출력결과 : new test -->
<input type = "button" onclick="alert(myJSONObject2.test)" value="click"/> <!-- 출력결과 : hello -->
</form>
세번째줄과 같이 myJSONObject2.test에 새로운 문자열 new test를 입력하고 출력하면 new test가 출력 되지만 다시 출력하면 JSON에서 선언한 기본 데이터인 hello가 출력된다.
3) property가 두개 이상인 경우
<script language="JavaScript">
<!--
var myJSONObject3 = {
"test1": "hello1",
"test2": "hello2",
"test3":"hello3"
}
//-->
</script>
<form>
<input type="button" onclick="alert(myJSONObject3.test1)" value="click"> <!-- 출력결과 : hello1 -->
<input type="button" onclick="alert(myJSONObject3.test2)" value="click"> <!-- 출력결과 : hello2 -->
<input type="button" onclick="alert(myJSONObject3.test3)" value="click"> <!-- 출력결과 : hello3 -->
</form>
각각의 property들은 ,(콤마) 로 구분한다.
4) 메소드 방식
<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"> <!-- 출력결과 : This is method test1 -->
</form>
eval은 javascript 메소드로서 전달인자를 function 으로 사용할 수 있게 한다. a= 에 test1의 메소드가 대입되고 a(); 란 명령으로 json의 test1 function을 호출한다.
5) 메소드 방식(전달 인자가 있을 때)
<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>
둘다 모두 hello가 출력된다.
6) 중첩된 object
<script language="JavaScript">
var obj7 = {
"test" : {
"name" : "k2club",
"id" : 123
}
}
</script>
<input type="button" onclick="alert(typeof obj7.test)" value="click">
<input type="button" onclick="alert(obj7.test.name)" value="click"> <!-- 출력결과 : k2club -->
<input type="button" onclick="alert(obj6.test.id)" value="click"> <!-- 출력결과 : 123 -->
object는 name/value 쌍들의 비순서화된 SET이다. object는 { (좌 중괄호)로 시작하고 } (우 중괄호)로 끝내어 표현한다. 각 name 뒤에 : (colon)을 붙이고 , (comma)로 name/value 쌍들 간을 구분한다.
2. Array 방식
1)1차원 배열
<script language="JavaScript">
<!--
var obj5 = [
"test"
]
//-->
</script>
<input type="button" onclick="alert(typeof obj5[0])" value="click">
<input type="button" onclick="alert(obj5[0])" value="click">
2) 2차원 배열
<script language="JavaScript">
<!--
var obj6 = {
"test" : [
"ccc", "ddd"
]
}
//-->
</script>
<input type="button" onclick="alert(obj6.test[0])" value="click"> <!-- 출력결과 : ccc -->
<input type="button" onclick="alert(obj6.test[1])" value="click"> <!-- 출력결과 : ddd -->