728x90
반응형
//객체 생성
document.getElementById("btn1").addEventListener("click",function(){
const div1 = document.getElementById("div1");
// {} 객체 리터럴 표기법으로 객체 생성
// **(중요) **
// 자바스크립트 객체의 Key는 무조건 string
// "key" 또는 'key'
// 또는 key(따옴표가 없어도 string으로 인식)
const brand = "할리스"
const product = {
"pName" : "케이크",
'brand' : "스타벅스",
flavor : ["초코","딸기", "치즈"],
price : 3500,
// 기능(메소드)
mix : function(){
console.log("음료를 섞는다.");
},
information : function(){
//같은 객체 내부의 다른 속성을 호출하고 싶은 경우
//현재 객체를 뜻하는 this를 앞에 붙여야 된다!
console.log(this.brand);
console.log(this.pName);
console.log(this.flavor);
console.log(this.price);
//this 미작성 시 객체 외부 변수 호출
console.log(brand);
}
};
//결과 출력
div1.innerHTML = "product.pName : " + product.pName + "<br>";
div1.innerHTML += "product.brand : " + product.brand + "<br>";
div1.innerHTML += "product.flavor : " + product.flavor + "<br>";
div1.innerHTML += "product.price : " + product.price + "<br>";
div1.innerHTML += "<hr>";
//자바스크립트 객체용 향상된 for문(for ...in)
// -> 객체 내부에 작성된 key를 순서대로 하나씩 꺼내옴
for(let key in product ){
div1.innerHTML += "product."+key +":"+product[key]+"<br>";
//배열의 인덱스 선택하듯이
}
//객체 메소드 호출
product.mix();
product.information();
})
//----------------------------------------------
// 생성자 함수(자바의 생성자를 함수로 작성하는 모양)
// 1. 생성자 함수 정의(생성자 함수명은 대문자로 시작 !)
function Student(name,grade,ban){
// 속성
// this == 생성되는 객체
this.name = name; //생성되는 객체의 name에 매개변수 name 대입
this.grade = grade;//생성되는 객체의 grade에 매개변수 grade 대입
this.ban = ban;//생성되는 객체의 ban에 매개변수 ban 대입
// 기능
this.intro = function(){
console.log(grade + "학년" + ban + "반" + name + "입니다");
}
}
// 2. 생성자 함수 호출(new 연산자)
document.getElementById("btn2").addEventListener("click",function(){
const std1 = new Student("홍길동",3, 5);
const std2 = new Student("김길동",2, 9);
const std3 = new Student("오길동",1, 2);
console.log(std1);
console.log(std2);
console.log(std3);
//생성자 함수 사용 이유 : 같은 형태의 객체가 다수 필요한 경우에 사용
// (코드길이 감소, 재사용성 증가)
console.log(std1.name);
std1.intro();
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>11_객체</title>
<style>
.area{
width:400px;
height: 400px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>자바스크립트 객체</h1>
<pre>
자바스크립트 객체는 {} 내에 key : Value가 모여있는 형태로 작성
(Map 형식)
{K:V, K:V, K:V} // 자바스크립트 객체
(참고) 자바스크립트 객체 모양의 문자열
== JSON(JavaScript Object Notation, 자바스크립트 객체 표기법)
"{K:V, K:V, K:V}"
- 자바스크립트에 객체를 생성하는 방법
1. {} : 객체 리터럴 표기법을 이용한 생성
2. 생성자 + new 생성자를 이용한 생성
</pre>
<button id="btn1">객체 생성1</button>
<div class="area" id="div1"></div>
<hr>
<button id="btn2">객체 생성2(생성자 함수)</button>
<script src="js/11_객체.js"></script>
</body>
</html>
728x90
반응형
'괴발개발 > js' 카테고리의 다른 글
| 요소 추가 제거 (0) | 2024.06.20 |
|---|---|
| DOM (2) | 2024.06.20 |
| window 내장객체 (0) | 2024.06.19 |
| 배열 (0) | 2024.06.18 |
| 문자열 숫자형 변환 (0) | 2024.06.18 |