|
자바스크립트(Javascript) Objects 객체의 사용법 |
|
개발환경 : window 7 64bit |
Object 는 모든 객체들이 기본적으로 상속합니다.
오즈젝트는 속성과 함수로 구성됩니다.
아래는 document 객체의 속성과 함수
사용법에 대한 예제 입니다.
|
var str = document.title; // 속성사용 document.write("This is test"); // 함수 사용 |
그럼 Object 를 생성하는 방법에 대해서 알아봅니다.
new 라는 키워드와 생성자함수를 가지고 생성합니다.
생성자함수는 생성과 초기화를 하는 함수이며
기본적으로 Object() 라는 함수를 제공하고 있습니다.
여기에 속성도 셋팅이 가능한데 이렇게 셋팅한
예제가 아래와 같습니다.
Object 객체에 속성을 만들고 그 속성에 값을
셋팅할수 있습니다. 셋팅한 속성을 아래와 같에
콤마로 하나씩 꺼내 쓰는 것이죠.
|
<html> <head> <title>User-defined objects</title> <script type="text/javascript"> var book = new Object(); // Create the object book.subject = "녹두장군의일생"; // Assign properties to the object book.author = "대한민국"; book.address = "하동군" </script> </head> <body> <script type="text/javascript"> document.write("책이름 : " + book.subject + "<br>"); document.write("책저자 : " + book.author + "<br>"); document.write("주소 : " + book.address + "<br>"); </script> </body> </html> |
다음은 Object 생성자 함수를 만들어서 사용할수 있습니다.
기본 Object() 생성자가 아닌 사용자가 function 키워드를
사용해 인수가 있는 생성자 함수를 만든후 속성을
만들어서 저장합니다.
아래와 같이 book 라는 생성자 함수를 만들어서
new book() 으로 객체를 생성하네요. 그리고 인수로
넘어온 데이터를 저장한후 다시 꺼내서 표현을
해주었습니다.
|
<html> <head> <title>User-defined objects</title> <script type="text/javascript"> function book(title, author){ this.title = title; this.author = author; } </script> </head> <body> <script type="text/javascript"> var myBook = new book("Perl", "Mohtashim"); document.write("책제목 : " + myBook.title + "<br>"); document.write("책저자 : " + myBook.author + "<br>"); </script> </body> </html> |
또 다른 방법인데 생성자 함수를 속성에 저장해서
사용할수도 있습니다. addPrice 라는 함수를 만들어
Book 객체의 addPrice 속성에 저장하는 것입니다.
그리고 아래에서 addPrice 속성값을 꺼내서 보여줍니다.
|
<html> <head> <title>User-defined objects</title> <script type="text/javascript">
// Define a function which will work as a method function addPrice(amount){ this.price = amount; }
function book(title, author){ this.title = title; this.author = author; this.addPrice = addPrice; // Assign that method as property. }
</script> </head> <body> <script type="text/javascript"> var myBook = new book("Perl", "Mohtashim"); myBook.addPrice(100); document.write("책제목 : " + myBook.title + "<br>"); document.write("책저자 : " + myBook.author + "<br>"); document.write("책가격 : " + myBook.price + "<br>"); </script> </body> </html> |
이번에는 With 키워드에 대한 사용법입니다.
With 키워드는 간단하게 함수나 속성을 사용할수
있도록 기능을 제공합니다.
문법은 아래 예제와 같이 with(object) { } 로
되어있는데 블록안에는 콤마와 객체명을
쓰지 않아도 됩니다.
일반적으로 사용할떄 :
this.price = aa;
this.author = bb
with 로 변경하였을 때 :
with(this){
price = aa;
author = bb;
}
|
v<html> <head> <title>User-defined objects</title> <script type="text/javascript">
// Define a function which will work as a method function addPrice(amount){ with(this){ price = amount; } } function book(title, author){ this.title = title; this.author = author; this.price = 0; this.addPrice = addPrice; // Assign that method as property. } </script> </head> <body> <script type="text/javascript"> var myBook = new book("Perl", "Mohtashim"); myBook.addPrice(100); document.write("책제목 : " + myBook.title + "<br>"); document.write("책저자: " + myBook.author + "<br>"); document.write("책가격 : " + myBook.price + "<br>"); </script> </body> </html>ar str = document.title; // 속성사용 document.write("This is test"); // 함수 사용 |
'웹 프로그래밍 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트(Javascript) 멀티미디어 이용하기 (0) | 2014.12.30 |
|---|---|
| 자바스크립트(Javascript) 애니메니션 이용하기 (3) | 2014.11.18 |
| 자바스크립트(Javascript) 폼(Form) 에 입력된 값의 유효성 체크 (0) | 2014.11.15 |
| 자바스크립트(Javascript) 에러와 런타임오류 다루기 (0) | 2014.10.19 |
| 자바스크립트(Javascript) print 함수를 이용해 웹페이지 인쇄하기 (0) | 2014.10.14 |
| 자바스크립트(Javascript) 라벨기능을 사용하여 반복문의 흐름 제어하기 (0) | 2014.09.29 |
| 자바스크립트(Javascript) IF… Else 구분 사용하기 (0) | 2014.09.22 |
| 자바스크립트(javascript) for 반복문 사용법 (0) | 2014.09.20 |
