■ JSON 기본개념

JSON#1_ JSON 은 오브젝트이다.

<script type="text/javascript">

/* 구분자는 『,』 종결자 세미클론은 사용하지 않는다. */

var myJSONObject =

{

"test" : "hello"

}

</script>

<form action="">

<input type="button" value="click1 onclick="alert(myJSONObject)"">

<!-- ① [object Object] -->

<input type="button" value="click2" onclick="alert(typeof myJSONObject)">

<!-- ③ object  -->

</form>

① 생성된 JSON 을 alert() 로 확인해보면 [object Object] 라고 뜬다.

② 생성된 JSON 을 typeof 로 확인해보면 object 라고 뜬다.

이를 통해 JSON 는 객체(object)임을 확인할 수 있다.

JSON#2_ key값 변경, value값 호출

<script type="text/javascript">

var myJSONObject2 =

{

"test" : "hello"

}

</script>

<form action="">

<input type="button" value="click1" onclick="alert(myJSONObject2.test)">

<!-- ① hello -->

<input type="button" value="click2" onclick="myJSONObject2.test='new test'; alert(myJSONObject2.test)">

<!-- ② new test -->

</form>

① JSON 의 key값으로 호출하면 value값이 나온다.

② JSON 의 key값으로 호출된 값은 변경이 가능하다.

JSON#3_ 함수로 구성된 경우의 value값 함수호출

<script type="text/javascript">

var myJSONObject4 =

{

"test" : function(){ alert("메소드 테스트~!!!"); }

}

</script>

<form action="">

<!-- <input type="button" value="click" onclick="myJSONObject4.test"> --><!-- ① 아무 변화 없음 -->

<!-- <input type="button" value="click" onclick="alert(myJSONObject4.test)"> --><!-- ② 함수가 문자열로 읽힘 -->

<!-- <input type="button" value="click" onclick="alert(myJSONObject4.test())"> --><!-- ③ 함수 정상작동, 그러나 undefine이 한번더 뜸 -->

<!-- 『eval()』 : 변수를 자바스크립트의 함수처럼 사용하게 해 주는 함수 (정적인 코드를 동적인 코드 형식으로 처리) -->

<input type="button" value="click" onclick="eval('a=' + myJSONObject4.test); a();">

</form>

① JSON 의 value 가 함수로 구성된 경우 키값 호출로 인한 함수호출은 이루어지지 않는다.

② 함수로 구성된 value값을 alert()로 확인해보면 문자열로 출력된다.

③ 함수로 구성된 value값에 ()괄호를 붙여 alert()로 확인해보면 함수호출이 이루어진다.

④ 『eval()』 을 이용하여 함수로 구성된 value값을 옮겨담고 호출하면 함수호출이 이루어진다.

JSON#4_ 문자열함수로 이루어진 경우의 value값 함수호출

<script type="text/javascript">

var myJSONObject5 = { "test" : "function(arg) { alert('메소드테스트 : ' + arg) }" }

var t = myJSONObject5.test;

</script>

<form action="">

<!-- ① 첫 번째 방법 -->

<input type="button" value="click1" onclick="eval('a=' + myJSONObject5.test); a('hello World');">

<!-- ② 두 번째 방법 -->

<input type="button" value="click2" onclick="eval( '(' + myJSONObject5.test + ')(\'hello World\')' );">

</form>

① 첫 번째 방법 : 『eval('a=' + myJSONObject5.test); a('hello World');』

② 두 번째 방법 : 『eval( '(' + myJSONObject5.test + ')(\'hello World\')' );』

JSON#5_ value값 타입

<script type="text/javascript">

var obj1 = { "test" : "abc" }

</script>

<form action="">

<input type="button" value="click" onclick="alert(obj1.test)">

<!-- abc -->

<input type="button" value="click" onclick="alert(typeof obj1.test)">

<!-- ① sting -->

</form>

① 문자열은 string 타입이다.

JSON#6_ 배열 value값 타입

<script type="text/javascript">

var obj6 = [ "test" ] // value값 타입 : string

var obj6_1 =  [ "test1", "test2" ] // value값 타입 : string, string

var obj6_2 = [ "test1", "test2", 123, 123+1 ] // value값 타입 : string, string, number, number

</script>

<form action="">

<!-- ① 데이터에 제대로 접근해서 확인하는 것이 아닌 더미 데이터를 확인함 -->

<input type="button" value="click1" onclick="alert(obj6)"><!-- test -->

<input type="button" value="click2" onclick="alert(obj6_1)"><!-- test1, test2 -->

<input type="button" value="click3" onclick="alert(obj6_2)">!-- test1,test2,123,124 -->

<br><br>

<!-- ② 인덱스로 접근하여 데이터를 확인함 -->

<input type="button" value="click7" onclick="alert(obj6[0])"><!-- test -->

<input type="button" value="click8" onclick="alert(typeof obj6[0])"><!-- string -->

<input type="button" value="click9" onclick="alert(obj6[1])"><!-- undefined ★-->

<br><br>

<input type="button" value="click10" onclick="alert(obj6_1[0])"><!-- test1 -->

<input type="button" value="click11" onclick="alert(obj6_1[1])"><!-- test2 -->

<input type="button" value="click12" onclick="alert(typeof obj6_1[0])"><!-- string -->

<input type="button" value="click13" onclick="alert(typeof obj6_1[1])"><!-- string -->

<br><br>

<input type="button" value="click14" onclick="alert(obj6_2[0])"><!-- test1 -->

<input type="button" value="click15" onclick="alert(obj6_2[1])"><!-- test2 -->

<input type="button" value="click16" onclick="alert(obj6_2[2])"><!-- 123 -->

<input type="button" value="click17" onclick="alert(typeof obj6_2[0])"><!-- string -->

<input type="button" value="click18" onclick="alert(typeof obj6_2[1])"><!-- string -->

<input type="button" value="click19" onclick="alert(typeof obj6_2[2])"><!-- number -->

<br><br>

<!-- ③ 결합가능 -->

<input type="button" value="click20" onclick="alert(obj6_1[0] + obj6_1[1])"><!-- test1test2 -->

<input type="button" value="click21" onclick="alert(obj6_2[1] + obj6_2[2])"><!-- test2123 -->

<input type="button" value="click22" onclick="alert(obj6_2[2] + obj6_2[3])"><!-- 247 -->

<br><br>

<!-- ④ undefine 와 number 간의 결합 시 undefine 은 숫자가 아니기 때문에 NaN이 뜬다 -->

<input type="button" value="click23" onclick="alert(obj6_2[3] + obj6_2[4])"><!-- NaN -->

</form>

※ JSON 에서 실수는 정수와 같이 number 타입을 가진다.

※ 더미데이터 : 제대로 접근해서 가져온 데이터가 아니다.

① JSON 의 배열을 인덱스가 아닌 JSON 객체 이름으로 호출할 경우 더미 데이터로 출력된다.

② JSON 의 배열을 인덱스로 접근할 경우 값이 확인되며, index number 가 over 될 시 오류가 아닌 undefined가 뜬다.

③ 배열 데이터간 결합이 가능하다.

④ undefine 와 number 간의 결합 시 undefine 은 숫자가 아니기 때문에 NaN이 뜬다.

JSON#7_ 배열

<script type="text/javascript">

var obj7 = 

{

"test" : [ "ccc", "ddd"]

               , "exam" : [ "kkk", "ppp"]

}

</script>

<form action="">

  <!-- ① JSON 배열의 타입 또한 object -->

<input type="button" value="click1" onclick="alert(typeof obj7)"><!-- object -->

<input type="button" value="click2" onclick="alert(typeof obj7.test)"><!-- object -->

<input type="button" value="click3" onclick="alert(typeof obj7.exam)"><!-- object -->

<br><br>

<input type="button" value="click4" onclick="alert(obj7.test[0])"><!-- ccc -->

<input type="button" value="click5" onclick="alert(obj7.test[1])"><!-- ddd -->

<input type="button" value="click6" onclick="alert(obj7.exam[0])"><!-- kkk -->

<input type="button" value="click7" onclick="alert(obj7.exam[1])"><!-- ppp -->

<br><br>

<!-- ② 객체 구조상 2차원 배열의 형태로 볼 수 있지만 다음과 같은 접근은 불가능하다. -->

<input type="button" value="click8" onclick="alert(obj7.[0][0])"><!-- 조회결과없음 -->

<input type="button" value="click9" onclick="alert(obj7.[1][1])"><!-- 조회결과없음 -->

</form>

① JSON 배열의 타입 또한 object 이다.

② 객체 구조상 2차원 배열의 형태로 볼 수 있지만 다음과 같은 접근은 불가능하다. 

JSON#8_ value 값을 변수로 지정

<script type="text/javascript">

function printString(cnt)

{

alert(cnt);

}

window.onload = function()

{

var temp = "printString('First')";   // ① 매개변수가 적용된 함수를 담고

var printList = 

{

"1" : "printString('Hi JSON')"

, "2" : temp   // ② value 값으로 적용

, "3" : "alert('Second')"

, "4" : "printString('Third')"

}

for (var i=1; i<5; i++)

{

eval(printList[i]);

}

}

</script>

① 매개변수가 적용된 함수를 담고

② value 값으로 적용