목차
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
주소 복사
랜덤 이동