자바스크립트 객체 : JSON 표기법

1. prototype을 사용한 자바스크립트 클래스 만들기

① 클래스 정의

 ○ function을 사용하여 클래스를 생성한다

   - 함수 끝에 ;(세미콜론)을 찍어주는 것이 정석

   - ;을 적지 않아도 괜찮다.

 ○ 자바에서는 생성자를 가지고 값을 초기화한 것

[member.js]

Member = function(id,name,addr){

this.id = id;

this.name = name;

this.addr = addr;

};

② 객체 생성 가능

 ○ 클래스 생성 후에는 객체를 생성할 수 있다.

 ○ new를 이용하여 객체 생성

[memberClass]

<script type="text/javascript" src="<%=cp%>/data/js/member.js"></script>

var member = new Member("songhee", "천송이", "서울");

var member2 = new Member("suzi", "배수지", "서울");

③ 클래스 안에 함수 정의

 ○ 새로운 함수를 추가할 때는 prototype을 사용한다

 ○ setter 생성

   - 자바에서는 메소드로 값을 초기화한 것

[member.js]

Member.prototype.setValue = function(id,name,addr){

this.id = id;

this.name = name;

this.addr = addr;

};

 ○ getter 생성

   - 값을 리턴하는 함수에서는 return을 사용

[member.js]

Member.prototype.getValue = function(){

return "[" + this.id + "]" + this.name + "(" + this.addr + ")";

};

④ 함수 사용하여 객체를 생성

 ○ 객체 사용

   - 변수명.파라미터

   - var member = new member("id","name","addr");

     member.id / member.name / member.addr

[memberClass]

var member = new Member("songhee", "천송이", "서울");

member.setValue("hyolee", "이효리", "제주도");

var memberInfo = member.getValue();

예제 1 자바스크립트로 객체를 만드는 방법

① log.js

 ○ 메모리에 객체 생성하기 위해 작성

function log(msg) {

var consolE = document.getElementById("console");

consolE.innerHTML += msg + "<br/>";

}

② member.js

//Member 클래스

Member = function(id,name,addr){

this.id = id;

this.name = name;

this.addr = addr;

};

//클래스 안에 함수 정의(setter)

Member.prototype.setValue = function(id,name,addr){

this.id = id;

this.name = name;

this.addr = addr;

};

//클래스 안에 함수 정의(getter)

Member.prototype.getValue = function(){

return "[" + this.id + "]" + this.name + "(" + this.addr + ")";

};

③ memberClass.jsp

<script type="text/javascript" src="<%=cp%>/data/js/log.js"></script>

<script type="text/javascript" src="<%=cp%>/data/js/member.js"></script>

<script type="text/javascript">

//자바스크립트로 객체를 만드는 방법

function memberClass(){

//1.member.js 없이 실행(메모리에 객체 생성)

//객체 생성

var object1 = {};

object1.id = "suzi";

object1.name = "배수지";

log("log1: " + object1.id + ", " + object1.name);

//2.member.js 없이 실행(메모리에 객체 생성)

var object2 = {};

object2.id = "aaa";

object2.name = "송지효";

log("log2: " + object2.id + ", " + object2.name);

//3.Member 클래스 객체 생성 후 변수명으로 호출

var member = new Member("songhee", "천송이", "서울");

log("member1: " + member.id + ", " + member.name + "," + member.addr );

//4.setter로 초기화하고 변수로 호출

member.setValue("hyolee", "이효리", "제주도");

log("member2: " + member.id + ", " + member.name + "," + member.addr );

//5.getter로 호출

var memberInfo = member.getValue();

log("member.getValue(): " + memberInfo);

}

window.onload = function(){

memberClass();

}

</script>

2. JSON 표기법

○ JSON(Javascript Object Noatation)

  - 서로 다른 프로그래밍 언어 간에 데이터를 교환하기 위한 표기법

① 표기법

  ○ [ {  }, {  }, {  } ]

  이름 : 값 → {이름1 : 값1, 이름2 : 값2, 이름3 : 값3}

  배열 표기 → [ {이름1 : 값1, 이름2 : 값2, 이름3 : 값3},

    {이름1 : 값1, 이름2 : 값2, 이름3 : 값3},

    {이름1 : 값1, 이름2 : 값2, 이름3 : 값3} ]

예제 2 JSON을 사용

① useJson.jsp

<style type="text/css">

#result {

border: 1px dotted #0000ff;

}

div {

margin: auto;

width: 600px;

height: 100%;

}

</style>

<script type="text/javascript">

function useJson(){

var userArray = [

            {userId:"suzi",

name:"배수지",

age:25,

phone:[{home:["031-111-1111","032-222-2222"]},

                         {office:["02-333-3333","051-444-4444"]}

]

}, //배열[0]       

{userId:"songhee",

name:"천송이",

age:38,

phone:[{},{}]

}, //배열[1]

{userId:"zhihyo",

name:"송지효",

age:37,

phone:[{},{}]

} //배열[2]

];

//한개의 데이터 읽기

var id = userArray[0].userId;

var name = userArray[0].name;

var age = userArray[0].age;

var homePhone1 = userArray[0].phone[0].home[0];

var homePhone2 = userArray[0].phone[0].home[1];

var officePhone1 = userArray[0].phone[1].office[0];

var officePhone2 = userArray[0].phone[1].office[1];

var printData = id + ", " + name + ", " + age + "<br/> ";

printData += "userArray[0].phone[0].home[0]:" + homePhone1 + "<br/>";

printData += "userArray[0].phone[0].home[1]:" + homePhone2 + "<br/>";

printData += "userArray[0].phone[1].office[0]:" + officePhone1 + "<br/>";

printData += "userArray[0].phone[1].office[1]:" + officePhone2 + "<br/>";

var resultDiv = document.getElementById("result");

resultDiv.innerHTML = printData;

}

window.onload = function(){

useJson();

}

</script>

</head>

<body>

<h1>JSON(Javascript Object Notation)</h1>

<hr/>

<div id="result"></div>

</body>

</html>