<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>객체</title>
<style>
.area {border: 1px solid;}
.small {width: 200px;}
.big {width: 400px;}
</style>
</head>
<body>
<h1>객체</h1>
<h3>* 객체의 선언과 사용</h3>
<p>
객체는 중괄호 { }를 이용하여 생성하고,<br>
중괄호 안에 이 객체에 필요한 속성들을 정의함<br>
속성명:속성값의 형태로 정의(key:value)<br>
속성값으로는 모든 자료형을 담을 수 있음
</p>
<pre>
변수 = {
속성명:속성값,
속성명:속성값,
속성명:속성값,
...
}
</pre>
<button onclick="test1()">실행확인</button>
<div class="area big" id="area1"></div>
<script>
function test1() {
const area1 = document.getElementById('area1');
const product = {
pName : 'Mango',
Price : 4000,
'kind' : 'fruit',
fruitKind : ['Lime', "Peach", 'berry']
};
console.log(product);
console.log(typeof product);
area1.innerHTML += `product : ${product}<br><br>`; // 결과값이 object로만 나온다.
// 객체의 속성에 접근하는 방법
// 방법1. 대괄호를 이용하는 방법 : 객체명['속성명'] -> 속성명은 반드시 문자열로 넣어줘야 됨
area1.innerHTML += "<b>객체명['속성명'] 으로 접근하기</b><br>";
area1.innerHTML += `<b>pName</b> : ${product['pName']}<br>`;
area1.innerHTML += `<b>Price</b> : ${product['Price']}<br>`;
area1.innerHTML += `<b>kind</b> : ${product['kind']}<br>`;
area1.innerHTML += `<b>fruitKind</b> : ${product['fruitKind']}<br>`;
area1.innerHTML += `<b>fruitKind</b> : ${product['fruitKind'][1]}<br>`; // 배열에서 peach만 갖고오고 싶을 때
area1.innerHTML += "--------------------------------------------------<br>";
// 방법2. 점(.)을 이용하는 방법 : 객체명.속성명
area1.innerHTML += "<b>객체명.속성명 으로 접근하기</b><br>";
area1.innerHTML += `<b>pName</b> : ${product.pName}<br>`;
area1.innerHTML += `<b>Price</b> : ${product.Price}<br>`;
area1.innerHTML += `<b>kind</b> : ${product.kind}<br>`;
area1.innerHTML += `<b>fruitKind</b> : ${product.fruitKind}<br>`;
area1.innerHTML += `<b>fruitKind</b> : ${product.fruitKind[1]}<br>`;
}
</script>
<h3>* 객체 생성시 특이케이스(속성명 제시시 반드시 문자열 형태로 해야되는 경우)</h3>
<button onclick="test2();">실행확인</button>
<div class="area small" id="area2"></div>
<script>
// 빈칸이나 특수기호가 들어가면 반드시 " " or ' '로 감싸야 된다
function test2() {
const area2 = document.getElementById('area2');
const user = {
"user name" : '홍길동',
'age!!' : 20
};
console.log(user);
// .이용은 불가
// area2.innerHTML += `<b>user name</b> : ${product.uer name}<br>`; // 정보를 가지고 올 수 없음(띄어쓰기 때문)
// 반드시 대괄호 이용해야 됨
area2.innerHTML += `<b>pName</b> : ${user['user name']}<br>`;
area2.innerHTML += `<b>age!!</b> : ${user['age!!']}<br>`;
}
</script>
<h3>* 객체에서의 반복문</h3>
<p>
객체가 가지고 있는 모든 속성들에 순차적으로 접근하고자 한다면 반복문 사용<br>
단, 일반 for문으로는 불가능. 'for in' 사용
</p>
<button onclick="test3()">실행확인</button>
<div class="area small" id="area3"></div>
<script>
function test3() {
let area3 = document.getElementById('area3');
const game = {
title : '의료용 디지털 영상',
Price : 9000000,
tool : 'javascript',
company : '더조은'
};
for(key in game) {
console.log('key : ', key);
// game.key를 찾으면 key에 들어있는 값을 찾는게 아니라 속성명이 key인 것을 찾는다. 따라서 undefined가 결과값으로 나온다.
// console.log('game.key : ', game.key);
// console.log(game['game.key : ', 'key']); // 위와 같음
console.log('game[key] : ', game[key]); // 변수의 값을 넣어야 됨. key는 변수.
area3.innerHTML += `${key} : ${game[key]}<br>`;
}
}
</script>
</body>
</html>