5.1.3 object 표기방법인 {}을 이용한 객체 생성
객체(object) 표기에 사용되는 중괄호 { }을 이용하여 객체의 정적인 특성을 표현하는데 사용되는 속성(property)만을 포함하는 객체를 생성한다면 다음과 같은 형식으로 간단히 생성할 수 있습니다.
var 생성할객체이름 = {속성1:속성1값, 속성2:속성2값, …};
객체는 중괄호 안에는 “속성이름:속성값”을 한 쌍으로 콤마로 분리된 리스트의 형태로 생성할 수 있습니다. 그래서 예를
들어 책의 제목을 나타내는 title 속성과 저자를 나타내는
author 속성을 가진 book 객체를 {}를
이용하여 생성한다면 다음과 같이 간단하게 생성할 수 있습니다.
var book = {title:"부의 미래", author:"앨빈
토플러"};
물론 아무런 속성이 없는 형태로 “var book = { };”도 생성이 가능합니다. 그렇다면 이렇게 생성한 객체의 속성값에는 어떻게 접근할 수 있을까요?
앞에서와 마찬가지로 도트( . )를 이용하여 “객체이름.속성”의 형태로 접근이 가능합니다.
예제를 하나 해볼까요? 메모장을 열어서 다음과 같이 작성합니다.
<!DOCTYPE
HTML>
<html>
…
<script
type="text/javascript">
var book = { title:"부의 미래", author:"앨빈
토플러"};
document.write("book 제목 : "+ book.title + " 저자 : " +
book.author);
</script>
…
</html>
“objectInitializerEx.html”로 저장한 후 IE9를 통해 확인하면 다음과
같이 book 객체에 대하여 나타내게 됩니다.
다음으로 중괄호 { }을 이용하여 객체의 정적인 특성을 표현하는데 사용되는 속성(property)과 객체의 동적인 특성을 나타내는데 사용하는 메서드(method)를 포함하는 객체를 생성한다면 다음과 같은 형식으로 간단히 생성할 수 있습니다.
var 생성할객체이름 = { 속성1: 속성1값,
속성2:
속성2값,
…,
메서드1: function() {
처리할 코드들;
}
메서드2: function() {
처리할 코드들;
}
}
위의 형식에서
보는 것처럼 메서드 역시 속성과 마찬가지로 “메서드이름:function()
{ 처리할 코드들; } “이 한 쌍을 이루는 것을 알 수 있습니다.
이제 예제를 해볼까요? 이번 예제에서는 사진도 한 장 포함하여 만들어봅니다. 메모장을 열어서 다음과 같이 작성합니다.
<!DOCTYPE HTML>
<html>
…
<script
type="text/javascript">
var Amusement_park = {
name:"꽃밭",
rel_pic:"flower2.jpg",
display: function() {
document.write("<br />예전에 가본 놀이공원의 꽃밭에서");
},
displaywith:function(inperson) {
document.write("<br />"+inperson+"과 함께 꽃밭에서");
}
}
</script>..
<body>
</body>
</html>
위와 같이 놀이공원(Amusement park) 객체를 생성하는데 name속성에 속성값으로
“꽃밭”을 설정하고
rel_pic 속성에 속성값으로 나타낼 이미지의 이름을 명시합니다.
다음으로 display 메서드에 무명 함수를 연결하여 처리할 코드를 작성해주고 마지막으로
displaywith 메서드에 inperson 입력 파라미터를
가지는 무명 함수를 연결하여 처리할 코드를 작성해줍니다.
이제 생성한 Amusement_park) 객체를 이용하여 출력하기 위해서 <body> … </body> 블록 내에 다음과 같이 코드를 작성합니다.
<body>
<script type="text/javascript">
document.write("제목 : " + Amusement_park.name);
document.write("<br/><img src='"+Amusement_park.rel_pic+"'>");
Amusement_park.display();
</script>
</body>위와 같이 작성한
후 “objectliteralwithmethodEx.html”로 저장하고 IE9를 통해 보면 다음과 같이 나타납니다.
마지막으로
Amusement_park) 객체의 name 속성값을 변경하고
displaywith 메서드를 알아보기 위해서 위 코드 중에서 <script
type="text/javascript"> … </script> 블록 내의 코드를 모두 주석 처리 (/* … */)하고 그 밑에 다음과 같이 코드를 작성합니다.
Amusement_park.name="에버랜드에서";
document.write("제목 : " + Amusement_park.name);
document.write("<br /><img src='"+Amusement_park.rel_pic+"'>");
Amusement_park.displaywith("친구들");저장하고 IE9를 통해서 확인하면 속성값과 displaywith 메서드에 입력 파라미터값으로 넣은 “친구들”이 다음과 나타납니다.
- 본 저작물은 본인이 2011년 상반기부터 2012년 여름 즈음까지 도서 출판을 목적으로 약 470 페이지(A4, 폰트 10)으로 작성한 원본 중 JavaScript에 대한 부분을 그대로를 공개하는 것으로 본 저작물에 대한 모든 권리는 본인(원철연)에서 있음을 알립니다.
개인적인
학습 목적으로 사용을 허용하며 온오프라인의 베포나 펌, 상업적인 용도의 사용은 삼가해주시기
바랍니다. 끝으로 학교나 비영리 단체에서의 경우 본 저작물을 비상업적인 용도로 활용하고자 할 경우 연락처를
비밀댓글로 남겨주시면 연락드리겠습니다.
'제가 쓴 책 > HTML5, CSS3 and JavaScript' 카테고리의 다른 글
| 6. 배열(Array) (0) | 2013.08.06 |
|---|---|
| 5.2 대괄호(square bracket)를 이용한 속성(Property) 접근 및 디버깅 (2) | 2013.08.06 |
| 5.1.2 생성자 함수(constructor function)를 이용하여 객체 정의하고 생성하기 (0) | 2013.08.06 |
| 5. 객체(Object) (0) | 2013.08.06 |
| 4.3 다른 함수로부터 함수 호출 (0) | 2013.08.06 |