09_객체지향개념
객체 : 데이터와 메소드들로 구성
객체의 멤버 접근 방법
1) 객체의 메소드 호출 방법 :객체이름.메소드이름()
2) 객체의 프로퍼티 접근 방법 : 객체이름.프로퍼티이름
클래스 프로퍼티 : 해당 클래스에 속하는 모든 객체가 공유하는 값
인스턴스 프로퍼티 : 객체마다 별도의 저장 공간을 가지며, 객체마다 다른 값을 저장할 수 있음
실습예제
예제 09-1.html
배열 객체와 document 객체의 프로퍼티와 메소드를 사용하는 예제입니다.
.another_category {
border: 1px solid #E5E5E5;
padding: 10px 10px 5px;
margin: 10px 0;
clear: both;
}
.another_category h4 {
font-size: 12px !important;
margin: 0 !important;
border-bottom: 1px solid #E5E5E5 !important;
padding: 2px 0 6px !important;
}
.another_category h4 a {
font-weight: bold !important;
}
.another_category table {
table-layout: fixed;
border-collapse: collapse;
width: 100% !important;
margin-top: 10px !important;
}
* html .another_category table {
width: auto !important;
}
*:first-child + html .another_category table {
width: auto !important;
}
.another_category th, .another_category td {
padding: 0 0 4px !important;
}
.another_category th {
text-align: left;
font-size: 12px !important;
font-weight: normal;
word-break: break-all;
overflow: hidden;
line-height: 1.5;
}
.another_category td {
text-align: right;
width: 80px;
font-size: 11px;
}
.another_category th a {
font-weight: normal;
text-decoration: none;
border: none !important;
}
.another_category th a.current {
font-weight: bold;
text-decoration: none !important;
border-bottom: 1px solid !important;
}
.another_category th span {
font-weight: normal;
text-decoration: none;
font: 10px Tahoma, Sans-serif;
border: none !important;
}
.another_category_color_gray, .another_category_color_gray h4 {
border-color: #E5E5E5 !important;
}
.another_category_color_gray * {
color: #909090 !important;
}
.another_category_color_gray th a.current {
border-color: #909090 !important;
}
.another_category_color_gray h4, .another_category_color_gray h4 a {
color: #737373 !important;
}
.another_category_color_red, .another_category_color_red h4 {
border-color: #F6D4D3 !important;
}
.another_category_color_red * {
color: #E86869 !important;
}
.another_category_color_red th a.current {
border-color: #E86869 !important;
}
.another_category_color_red h4, .another_category_color_red h4 a {
color: #ED0908 !important;
}
.another_category_color_green, .another_category_color_green h4 {
border-color: #CCE7C8 !important;
}
.another_category_color_green * {
color: #64C05B !important;
}
.another_category_color_green th a.current {
border-color: #64C05B !important;
}
.another_category_color_green h4, .another_category_color_green h4 a {
color: #3EA731 !important;
}
.another_category_color_blue, .another_category_color_blue h4 {
border-color: #C8DAF2 !important;
}
.another_category_color_blue * {
color: #477FD6 !important;
}
.another_category_color_blue th a.current {
border-color: #477FD6 !important;
}
.another_category_color_blue h4, .another_category_color_blue h4 a {
color: #1960CA !important;
}
.another_category_color_violet, .another_category_color_violet h4 {
border-color: #E1CEEC !important;
}
.another_category_color_violet * {
color: #9D64C5 !important;
}
.another_category_color_violet th a.current {
border-color: #9D64C5 !important;
}
.another_category_color_violet h4, .another_category_color_violet h4 a {
color: #7E2CB5 !important;
}
\n\n"}}" data-ve-attributes="{"typeof":"mw:Extension/syntaxhighlight","about":"#mwt3"}">
<html>
<head>
<script type="text/javascript">
var data = [10, 20, 30]; // 자바스크립트에서 배열은 자동으로 객체가 됨
var length = data.length; // 모든 배열객체는 length 라는 인스턴스 프로퍼티가 있음
document.write(length); // 자바스크립트 인터프린터가 미리 민들어 둔
// document 내장 객체의 인스턴스 메소드인 write 메소드
</script>
</head>
</html>
'프로그래밍 > Javascript' 카테고리의 다른 글
| 10_이벤트와 이벤트 처리 (0) | 2018.02.27 |
|---|---|
| 08_함수(2) (0) | 2018.02.27 |
| 07_함수(1) (0) | 2018.02.27 |
| 06_배열 (0) | 2018.02.27 |
| 05_반복 (0) | 2018.02.27 |