Javascript & JQuery & CSS

객체(object) 표기에 사용되는 중괄호 { }을 이용하여 객체의 정적인 특성을 표현하는데 사용되는

속성(property)만을 포함하는 객체를 생성한다면 다음과 같은 형식으로 간단히 생성할 수 있습니다.

var 생성할객체이름 = {속성1:속성1값, 속성2:속성2값, …};

객체는 중괄호 안에는 “속성이름:속성값”을 한 쌍으로 콤마로 분리된 리스트의 형태로 생성할 수 있습니다.

그래서 예를 들어 책의 제목을 나타내는 title 속성과 저자를 나타내는 author 속성을 가진 book 객체를 {}를 이용하여 생성한다면

다음과 같이 간단하게 생성할 수 있습니다.

var book = {title:"부의 미래", author:"앨빈 토플러"};

물론 아무런 속성이 없는 형태로 “var book = { };”도 생성이 가능합니다.

그렇다면 이렇게 생성한 객체의 속성값에는 어떻게 접근할 수 있을까요?

앞에서와 마찬가지로 도트( . )를 이용하여 “객체이름.속성”의 형태로 접근이 가능합니다. 예제를 하나 해볼까요?
 

			var book = { title:"부의 미래", author:"앨빈 토플러"}; 
			alert("book 제목 : "+ book.title + " 저자 : " + book.author); 
		

테스트 해 보시면 아시겠지만, 간단히 접근이 가능 합니다.
다음으로 중괄호 { }을 이용하여 객체의 정적인 특성을 표현하는데 사용되는 속성(property)과  객체의 동적인 특성을 나타내는데
사용하는 메서드(method)를 포함하는 객체를 생성한다면 다음과 같은 형식으로 간단히 생성할 수 있습니다.
 

var 생성할객체이름 = { 속성1: 속성1값, 
	속성2: 속성2값,
	…,
	메서드1: function() {
		처리할 코드들;
	}
	메서드2: function() {
		처리할 코드들;
	}
}

 위의 형식에서 보는 것처럼 메서드 역시 속성과 마찬가지로 “메서드이름:function() { 처리할 코드들; } “이 한 쌍을 이루는 것을 알 수 있습니다.

이제 예제를 해볼까요? 이번 예제에서는 사진도 한 장 포함하여 만들어봅니다.
 

				var Amusement_park = {
					name:"꽃밭",
					rel_pic:"flower2.jpg",
					display: function() {
						alert("예전에 가본 놀이공원의 꽃밭에서");
					},
					displaywith:function(inperson) {
						alert(inperson+"과 함께 꽃밭에서");      
					}
				}

				alert("제목 : " + Amusement_park.name);
				alert("사진 : " + Amusement_park.rel_pic");
				Amusement_park.display();
				Amusement_park.displaywith("가족");

위와 같이 놀이공원(Amusement park) 객체를 생성하는데 name속성에 속성값으로 “꽃밭”을 설정하고 rel_pic 속성에 속성값으로 나타낼 이미지의 이름을 명시합니다.

다음으로 display 메서드에 무명 함수를 연결하여 처리할 코드를 작성해주고 마지막으로 displaywith 메서드에 inperson 입력 파라미터를 가지는

무명 함수를 연결하여 처리할 코드를 작성해줍니다.

버튼을 클릭해 보시면 아시겠지만, display() , displaywidth("가족") 두개의 메소드도 잘 동작하는걸 알 수 있습니다.