JSON 실습은 body 부분에 input 태그 아래 주석으로 달아둔 결과 값을 잘 관찰해보자!
💫 JsonTest01.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest01.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
var myJsonObject =
{
"test" : "hello"
}
/* var myJsonObject = { "test" : "hello" } */ // 위 코드랑 똑같지~
</script>
</head>
<body>
<form>
<input type="button" value="click1" onclick="alert(myJsonObject)">
<!-- [object Object] -->
<input type="button" value="click2" onclick="alert(typeof myJsonObject)"/>
<!-- object -->
</form>
</body>
</html>
💫 JsonTest02.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest02.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
var myJsonObject2 =
{
"test" : "hello"
}
</script>
</head>
<body>
<form>
<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>
</body>
</html>➰체크할 내용➰
- onclick="myJsonObject2.test='new test'; alert(myJsonObject2.test)"
: 클릭이 일어나면 myJsonObject2.test 속성의 값을 'new test'로 바꾸고,
바뀐 값으로 alert 창을 띄어주세요~!
💫 JsonTest03.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest03.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
var myJsonObject3 =
{
"test1" : "hello1"
, "test2" : "hello2"
, "test3" : "hello3"
}
</script>
</head>
<body>
<form>
<input type="button" value="click1" onclick="alert(myJsonObject3.test1)" />
<!-- hello1 -->
<input type="button" value="click2" onclick="alert(myJsonObject3.test2)" />
<!-- hello2 -->
<input type="button" value="click3" onclick="alert(myJsonObject3.test3)" />
<!-- hello3 -->
<input type="button" value="click4" onclick="alert(typeof myJsonObject3.test1)" />
<!-- string -->
<input type="button" value="click5" onclick="alert(typeof myJsonObject3.test2)" />
<!-- string -->
<input type="button" value="click6" onclick="alert(typeof myJsonObject3.test3)" />
<!-- string -->
</form>
</body>
</html>
💫 JsonTest04.html (『eval()』)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest04.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
var myJsonObject4 =
{
"test" : function()
{
alert("Method Test~!!!");
}
}
</script>
</head>
<body>
<form>
<input type="button" value="click1" onclick="myJsonObject4.test"/>
<!-- Ⅹ -->
<input type="button" value="click2" onclick="alert(myJsonObject4.test)"/>
<!-- →
function()
{
alert("Method Test~!!!");
}
-->
<input type="button" value="click3" onclick="alert(myJsonObject4.test())"/>
<!-- →
Method Test~!!!
↓
undefined
-->
<input type="button" value="click4" onclick="eval('a=' + myJsonObject4.test); a();" />
<!-- Method Test~!!! -->
</form>
</body>
</html>➰체크할 내용➰
· eval()
- 변수를 자바스크립트 함수처럼 사용할 수 있도록 해 주는 함수
- 즉, 정적인 문자열을 동적인 코드 형식으로 처리해 주는 함수
- but!! 보안성 이슈로 조심히~ 다루어야 할 함수
💫 JsonTest05.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest05.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
var myJsonObject5 =
{
"test" : function(args)
{
alert("Method Test : " + args);
}
}
var t = myJsonObject5.test;
/* JsonTest04.html → var a = myJsonObject5.test; a(); */
</script>
</head>
<body>
<form>
<input type="button" value="click1" onclick="t('happy')"/>
<!-- Method Test : happy -->
<input type="button" value="click2"
onclick="eval('var a=' + myJsonObject5.test); a('lucky')" />
<!-- Method Test : lucky -->
<input type="button" value="click3"
onclick="eval( '(' + myJsonObject5.test + ')(\'hello\')' )" />
<!-- myJsonObject5.test('hello') -->
<!-- Method Test : hello -->
</form>
</body>
</html>
💫 JsonTest06.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest06.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
// ①
/*
var myJsonObject6 =
{
"test" : 123
}
*/
// ②
/*
var myJsonObject6 =
{
"test" : 123.456
}
*/
// ③
/*
var myJsonObject6 =
{
"test" : true
}
*/
// ④
var myJsonObject6 =
{
"test" : null
}
</script>
</head>
<body>
<form>
<input type="button" value="click1" onclick="alert(myJsonObject6.test)" />
<!-- ① → 123 -->
<!-- ② → 123 -->
<!-- ③ → true -->
<!-- ④ → null -->
<input type="button" value="click2" onclick="alert(typeof myJsonObject6.test)" />
<!-- ① → number -->
<!-- ② → number -->
<!-- ③ → boolean -->
<!-- ④ → object --> <!-- check~!!! -->
<input type="button" value="click3"
onclick="myJsonObject6.test=false; alert(myJsonObject6.test)"/>
<!-- false -->
<input type="button" value="click4"
onclick="myJsonObject6.test=false; alert(typeof myJsonObject6.test)"/>
<!-- boolean -->
<input type="button" value="click5"
onclick="myJsonObject6.test=123; alert(myJsonObject6.test)"/>
<!-- 123 -->
<input type="button" value="click6"
onclick="myJsonObject6.test=123; alert(typeof myJsonObject6.test)"/>
<!-- number -->
<input type="button" value="click7"
onclick="myJsonObject6.test='123'; alert(myJsonObject6.test)"/>
<!-- 123 -->
<input type="button" value="click8"
onclick="myJsonObject6.test='123'; alert(typeof myJsonObject6.test)"/>
<!-- string -->
</form>
</body>
</html>
💫 JsonTest07.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest07.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
var myJsonObject7 =
[
"test"
]
var myJsonObject7_1 =
[
"test1", "test2"
]
var myJsonObject7_2 =
[
"test1", "test2", 123, 123+1
]
</script>
</head>
<body>
<form>
<input type="button" value="click1" onclick="alert(myJsonObject7)" />
<!-- → test -->
<input type="button" value="click2" onclick="alert(myJsonObject7_1)" />
<!-- → test1,test2 -->
<input type="button" value="click3" onclick="alert(myJsonObject7_2)" />
<!-- → test1,test2,123,124 -->
<input type="button" value="click4" onclick="alert(typeof myJsonObject7)" />
<!-- → object -->
<input type="button" value="click5" onclick="alert(typeof myJsonObject7_1)" />
<!-- → object -->
<input type="button" value="click6" onclick="alert(typeof myJsonObject7_2)" />
<!-- → object -->
<input type="button" value="click7" onclick="alert(myJsonObject7[0])" />
<!-- → test --> <!-- 요 test는 더미가 아니다! -->
<input type="button" value="click8" onclick="alert(typeof myJsonObject7[0])" />
<!-- → string -->
<input type="button" value="click9" onclick="alert(myJsonObject7[1])" />
<!-- → undefined -->
<input type="button" value="click10" onclick="alert(typeof myJsonObject7[1])" />
<!-- → undefined -->
<input type="button" value="click11"
onclick="alert(myJsonObject7_1[0] + myJsonObject7_1[1])"/>
<!-- → test1test2 -->
<input type="button" value="click12"
onclick="alert(typeof (myJsonObject7_1[0] + myJsonObject7_1[1]))"/>
<!-- → string -->
<input type="button" value="click13"
onclick="alert(myJsonObject7_2[2] + myJsonObject7_2[3])"/>
<!-- → 247 -->
<input type="button" value="click14"
onclick="alert(typeof (myJsonObject7_2[2] + myJsonObject7_2[3]))"/>
<!-- → number -->
<input type="button" value="click15"
onclick="alert(myJsonObject7_1[0] + myJsonObject7_1[2])"/>
<!-- → test1undefined -->
<input type="button" value="click16"
onclick="alert(typeof (myJsonObject7_1[0] + myJsonObject7_1[2]))"/>
<!-- → string -->
<!-- check~!!! -->
<input type="button" value="click17"
onclick="alert(myJsonObject7_2[3] + myJsonObject7_2[4])" />
<!-- → NaN(Not a Number) -->
<input type="button" value="click18"
onclick="alert(typeof (myJsonObject7_2[3] + myJsonObject7_2[4]))" />
<!-- → number -->
</form>
</body>
</html>➰체크할 내용➰
· undefined + 숫자
- '+'로 결합하면 NaN(Not a Number)가 결과값인데, typeof 를 찍어보면 number이다.
💫 JsonTest08.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest08.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
var myJsonObject8 =
{
"test" :
[
"ccc", "ddd"
]
, "exam" :
[
"kkk", "ppp"
]
}
/* var myJsomObject8 = { "test":["ccc", "ddd"], "exam":["kkk", "ppp"] } */
</script>
</head>
<body>
<form>
<input type="button" value="click1" onclick="alert(myJsonObject8)"/>
<!-- → [object Object] -->
<input type="button" value="click2" onclick="alert(typeof myJsonObject8)"/>
<!-- → object -->
<input type="button" value="click3" onclick="alert(myJsonObject8.test)"/>
<!-- → ccc,ddd -->
<input type="button" value="click4" onclick="alert(typeof myJsonObject8.test)"/>
<!-- → object --> <!-- type 찍으면 array 도 object로 취급 -->
<input type="button" value="click5" onclick="alert(myJsonObject8.test[0])" />
<!-- → ccc -->
<input type="button" value="click6" onclick="alert(typeof myJsonObject8.test[0])" />
<!-- → string -->
<!-- ※ 객체 구조상... 2차원 배열의 형태로 볼 수 있지만 -->
<!-- 다음과 같은 접근이나 처리는 불가능하다. -->
<!-- ccc -->
<input type="button" value="click7" onclick="alert(myJsonObject8.[0][0])"/>
<!-- Ⅹ -->
<!-- ppp -->
<input type="button" value="click8" onclick="alert(myJsonObject8.[1][1])"/>
<!-- Ⅹ -->
</form>
</body>
</html>
💫 JsonTest09.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest09.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
var myJsonObject9 =
{
"superman" :
{
"name" : "honggildong"
, "age" : 49
, "hobby" : ["song", "dance"]
}
}
</script>
</head>
<body>
<form>
<input type="button" value="click1" onclick="alert(typeof myJsonObject9)" />
<!-- → object -->
<input type="button" value="click2" onclick="alert(typeof myJsonObject9.superman)" />
<!-- → object -->
<input type="button" value="click3" onclick="alert(typeof myJsonObject9.superman.name)" />
<!-- → string -->
<input type="button" value="click4" onclick="alert(typeof myJsonObject9.superman.age)" />
<!-- → number -->
<input type="button" value="click5" onclick="alert(typeof myJsonObject9.superman.hobby)" />
<!-- → object -->
<input type="button" value="click6" onclick="alert(myJsonObject9.superman.hobby[0])" />
<!-- → song -->
<input type="button" value="click7" onclick="alert(typeof myJsonObject9.superman.hobby[0])" />
<!-- → string -->
</form>
</body>
</html>
💫 JsonTest10.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JsonTest10.html</title>
<link rel="stylesheet" type="text/css" href="css/main.css">
<script type="text/javascript">
function printString(cnt)
{
alert(cnt);
}
window.onload = function()
{
var temp = "printString('First')";
/* JSON */
var printList =
{
"1" : "printString('Hi JSON~!!!')"
, "2" : temp
, "3" : "alert('Second')"
, "4" : "printString('Third')"
}
for (var i=0; i<5; i++) // 1 2 3 4
{
eval(printList[i]);
}
};
</script>
</head>
<body>
</body>
</html>
