목차
- Object 예제 - 가능한 속성값 종류
- Object/Propery/Method 정의
- JS 일반변수 생성
- Object 구문
- Object 선언 줄바꿈
- Object Property(속성) 접근
- Object Method(메서드) 접근
- Object 변수 생성 - new 키워드 사용
- Object 선언 금지 유형
- Object 예제 - 중첩 Object 선언 (※ 반복문 이용)
Object 예제 - 가능한 속성값 종류
<script>
var hz = {
host:"Homzzang.com", // 문자열
year:2012, // 숫자
site: function() {return this.host + " " + this.year}, // 메서드
lang1: {"HTML":"뼈대","CSS":"의상", "JS":"동작"}, // 객체
lang2: {"PHP":"소통","SQL":"DB", "BS":"통합틀"} // 배열
};
document.write(hz.host); // 문자열
document.write("<br>");
document.write(hz.year); // 숫자
document.write("<br>");
document.write(hz.site()); // 메서드
document.write("<br>");
document.write(hz.lang1.HTML); // 객체
document.write("<br>");
document.write(hz.lang2['PHP']); // 배열
</script>
결과보기
[주의] 아래처럼, PHP 연관배열생성 방식 사용하면 작동 안 함.
lang2: array("PHP" =>"소통","SQL"=>"DB", "BS"=>"통합틀") // 배열
Object/Property/Method 정의
객체(Object), 속성(Properties), 메서드(Methods) 개념 이해하기
객체(Object)
|
속성(Property) = 객체의 정적외관측면 |
메서드(Methods) = 객체의 동적작동측면 |
컴퓨터
|
객체명.속성명 = 속성값
컴퓨터.이름 = 홈짱
컴퓨터.모델 = 2012
컴퓨터.무게 = 1kg
컴퓨터.색깔 = 파랑
|
객체명.메서드명()
컴퓨터.부팅() 컴퓨터.작동() 컴퓨터.다운() 컴퓨터.종료() |
※ 모든 컴퓨터는 동일한 속성 갖지만, 구체적인 속성값은 제각각 다름.※ 모든 컴퓨터는 동일한 작동 갖지만, 구체적인 작동법은 제각각 다름.
JS 일반변수 생성
<p id="homzzang"></p>
<script>
var computer = "홈짱";// 변수 하나에 데이터 값이 달랑 하나만 들어감
document.getElementById("homzzang").innerHTML = computer;
</script>
Object 구문
[변수만 먼저 선언]
var Object = new Object(); // 방법1 : (예제) var computer = new Object();
var Object = {}; // 방법2 : (예제) var computer = {};
[변수에 '속성/값'을 한번에 선언]
Object = {Property:value, Property:value, ..... }
객체명 = {속성명:속성값, 속성명:속성값, ........} ;
[예제]
var computer = {name:"homzzang", year:2012, weight:1, color:"blue"};
[예제]
<p id="homzzang"></p>
<script>
var com = {name:"Homzzang.com", year:2012}; // 선언
document.getElementById("homzzang").innerHTML = com.name + " " + com.year; // 출력
</script>
결과보기
1.
JS에서 객체는 속성:속성값 형식의 여러 데이터를 중괄호인 { }로 묶은 것을 말함.
(예) {name:"homzzang", year:2012, weight:"1", color:"blue"};
2.
JS 객체 활용하면 여러 데이터를 하나의 변수에 담을 수 있음.
3.
JS에서 객체가 할당된 변수를 객체이름 (= 객체명: Object Name)이라고 함. (예) var computer = {name:"homzzang", year:2012, weight:"1", color:"blue"};
4.
JS 객체에서 속성과 속성값은 콜론( : )으로 구분하며, 속성:속성값 세트들은 콤마( , )로 구분.
5.
JS 객체 안의 속성값이 문자이면 따옴표로 묶고, 숫자이면 따옴표로 묶지 않음.
6.
JS 객체 속성엔, 정적측면인 속성(Properties)과 동적측면인 메서드(methods) 존재.
7.
JS 객체의 메서드(Methods)는 함수 정의 형식으로 저장된 속성값을 말함.
<p id="homzzang"></p>
<script>
var hz = {
name : "홈짱",
year : "2012",
intro : function(c) { // c는 임의로 써넣은 것일 뿐 필수 아님.
return this.name + " " + this.year; // 같은 객체 내 다른 속성 접근 시, 객체명 대신 this 사용 가능.
}
};
document.getElementById("homzzang").innerHTML = hz.intro(); // 호출・출력
</script>
결과보기
PS. 아래처럼 함수 부분을 별도로 빼고, 함수명만 적어도 됨.
<p id="homzzang"></p>
<script>
var hz = {
name : "홈짱",
year : "2012",
intro : plus // 함수명만 적어야 함.
};
function plus(c) {
return this.name + " " + this.year;
}
document.getElementById("homzzang").innerHTML = hz.intro();
</script>
결과보기
8.
속성값엔 문자열, 숫자, 객체, 배열 등 다양한 데이터형식 올 수 있음. (맨 위 예제 참고)
Object 선언 줄바꿈
JS 객체 선언은 한줄로 써도 되고, 줄바꿔 써도 상관 없음. 공백 역시 무시함.
[한줄로 표현]
<p id="homzzang"></p>
<script>
var com = {name:"홈짱", year:2012}; // 한 줄 표현
document.getElementById("homzzang").innerHTML = com.name + " " + com.year;
</script>
[여러 줄로 표현]
<p id="homzzang"></p>
<script>
var com = {
name:"홈짱",
year:2012
};
document.getElementById("homzzang").innerHTML = com.name + " " + com.year;
</script>
Object Property(속성) 접근
방법1. Object.Property
방법2. Object['Property']
방법1. 객체이름.속성이름 (예) com.name , com.year
<p id="homzzang"></p>
<script>
var com = {
name : "홈짱",
year : 2012,
color : "blue"
};
document.getElementById("homzzang").innerHTML =
com.name + " " + com.year + " " + com.color; // 객체명.속성명 형식
</script>
결과보기
방법2. 객체이름['속성이름'] (예) com['name'] , com['year']
주의: 대괄호 묶고, 반드시 안에 따옴표로 묶음. 큰따옴표든 작은따옴표든 상관 없음.
<p id="homzzang"></p>
<script>
var com = {
name : "홈짱",
year : 2012,
color : "blue"
};
document.getElementById("homzzang").innerHTML =
com["name"] + " " + com["year"] + " " + com["color"]; // 객체명["속성명"] 형식
</script>
[주의] 아래처럼 대괄호 안의 속성명을 따옴표로 묶지 않으면 아무것도 출력 안 됨.
<p id="homzzang"></p>
<script>
var com = {
name : "홈짱",
year : 2012,
color : "blue"
};
document.getElementById("homzzang").innerHTML =
com[name] + " " + com[year] + " " + com[color]; // 속성명을 따옴표로 안 묶으면 출력 안 됨.
</script>
결과보기
Object Method(메서드) 접근
Object.Method()
[예제1]
<p id="homzzang"></p>
<script>
var com = {
name : "홈짱",
year : "2012",
model : function(c) { // c는 임의로 써넣은 것일 뿐 필수 아님.
return this.name + " " + this.year;
}
};
document.getElementById("homzzang").innerHTML = com.model();
</script>
결과보기 (결과값: 홈짱 2012)
PS. [주의] Object.Method() 에서 소괄호 () 빼면, 정상적으로 출력되지 않고 함수 정의 내용 출력.
<p id="homzzang"></p>
<script>
var com = {
name : "홈짱",
year : "2012",
model : function(c) {
return this.name + " " + this.year;
}
};
document.getElementById("homzzang").innerHTML = com.model; // ()이 빠지면 정상출력 안 됨.
</script>
[예제2] - 함수 정의를 객체 밖에 한 후, 해당 함수명만 지정해도 됨.
<p id="homzzang"></p>
<script>
var com = {
name : "홈짱",
year : "2012",
model : hz
};
function hz(c) { // c는 임의로 써넣은 것일 뿐 필수 아님.
return this.name + " " + this.year;
}
document.getElementById("homzzang").innerHTML = com.model();
</script>
결과보기 (결과값: 홈짱 2012)
Object 변수 생성 - new 키워드 사용
JS 변수가 키워드 new와 함께 선언되면, 그 변수는 객체로 생성됨.
var x = new String(); // 문자열객체
var y = new Number(); // 숫자객체
var z = new Boolean(); // 참거짓객체
Object 선언 금지 유형
문자열(Strings), 숫자(Numbers), 참거짓(Booleans)으로 객체 선언 금지.
왜냐하면, JS 코드를 복잡하게 만들어, 실행 처리 속도를 떨어뜨림.
Object 예제 - 중첩 Object 선언 (※ 반복문 이용)
※ 멤버1의 각 과목 점수와 멤버2 각 과목 점수 비교해 멤버1 이긴 줄 표시.
<script>
let members = {1:{},2:{}};
for(i=1; i<=9; i++){
members[1][i] = document.getElementById('a_mb'+i).textContent;
members[2][i] = document.getElementById('b_mb'+i).textContent;
if (members[1][i]>members[2][i]){
$('.tr_'+i+' .win').addClass('on');
}
}
</script>
깜봉 님 (221010) https://sir.kr/qa/475932