JS도 역시 객체지향 언어이기 때문에 객체 기능을 지원한다.
선언 방법에는 다양한 방법이 존재하므로 예를 통해서 확인해보자.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
.area-big{
height: 400px;
background: lightgray;
border: 1px solid black;
}
.area{
background: lightgray;
height: 200px;
border:1px solid black;
}
</style>
</head>
<body>
<h1>객체</h1>
<h3>객체의 선언 및 호출</h3>
<p>객체는 키 값을 사용하여 속성을 식별한다.<br>
중괄호{}를 사용해서 객체를 생성하고, 속성에는 모든 자료형이 올 수 있다.</p>
<button onclick="test1();">실행확인</button>
<div id="area1" class="area-big"></div>
<script type="text/javascript">
function test1() {
var product = {
pName: 'Dry Mango',
type: 'Pickle',
ingredient:['mango', 'sugar'],
origin: 'Pilippines'
};
console.log(product);
var area1 = document.getElementById("area1");
area1.innerHTML += "product : " + product + "<br>";
area1.innerHTML += "<b>객체명.속성명으로 접근하기</b><br>";
area1.innerHTML += "product.pName : " + product.pName + "<br>";
area1.innerHTML += "product.type : " + product.type + "<br>";
area1.innerHTML += "product.ingredient : " + product.ingredient + "<br>";
area1.innerHTML += "product.ingredient[0] : " + product.ingredient[0] + "<br>";
area1.innerHTML += "product.ingredient[1] : " + product.ingredient[1] + "<br>";
area1.innerHTML += "product.origin : " + product.origin + "<br>";
area1.innerHTML += "<b>객체명['속성명']으로 접근하기</b><br>";
area1.innerHTML += "product['pName'] : " + product['pName'] + "<br>";
area1.innerHTML += "product['type'] : " + product['type'] + "<br>";
area1.innerHTML += "product['ingredient'] : " + product['ingredient'] + "<br>";
area1.innerHTML += "product['ingredient'][0] : " + product['ingredient'][0] + "<br>";
area1.innerHTML += "product['ingredient'][1] : " + product['ingredient'][1] + "<br>";
area1.innerHTML += "product['origin'] : " + product['origin'] + "<br>";
}
</script>
<hr>
<h3>객체의 키 식별자 테스트</h3>
<button onclick="test2();">실행확인</button>
<div id="area2" class="area"></div>
<script type="text/javascript">
function test2() {
var objTest = {
'I love':'poo',
'I hate !@#$%^%()':'asd'
}
var area2 = document.getElementById("area2");
console.log(objTest);
// 공백이나 특수문자가 key 값인 경우에는 이 방식으로 value를 가져올 수 없다.
/* area2.innerHTML += "I love : " + objTest.'I love' + "<br>";
area2.innerHTML += "I hate !@#$%^%() : " + objTest.'I hate !@#$%^%()' + "<br>"; */
area2.innerHTML += "I love : " + objTest['I love'] + "<br>";
area2.innerHTML += "I hate !@#$%^%() : " + objTest['I hate !@#$%^%()'] + "<br>";
}
</script>
<hr>
<h3>객체의 메소드 속성</h3>
<p>객체의 속성 중 함수 자료형인 속성을 메소드라고 부른다.</p>
<button onclick="test3();">실행확인</button>
<div id="area3" class="area"></div>
<script type="text/javascript">
function test3() {
var area3 = document.getElementById("area3");
var dog = {
name: '까미',
eat:function(food){
// 객체 내에서 자신의 속성을 호출할 때는 반드시 this.을 사용해야 한다.
area3.innerHTML += this.name + '가' + food + "을 먹고있네요~ 멍멍";
}
}
dog.eat('밥');
}
</script>
<hr>
<h3>객체와 반복문</h3>
<button onclick="test4();">실행확인</button>
<p>객체의 속성을 살펴볼 때에는 단순 for문으로 사용이 불가능하고<br>
for in 문을 사용해야 한다.</p>
<div id="area4" class="area"></div>
<script type="text/javascript">
function test4() {
var game = {
title:'DIABLO 3',
price:'35,000원',
language:'한국어지원',
supportOS:'window 32/64',
service:true
};
var area4 = document.getElementById("area4");
for(var key in game){
area4.innerHTML += key + " : " + game[key] + "<br>";
}
}
</script>
<hr>
<h3>in과 with 키워드</h3>
<p>in : 객체 내부에 해당 속성이 있는지 확인하는 키워드<br>
with : 코드를 줄여주는 키워드, 호출시 객체명 생략이 가능하다.</p>
<label>이름 : </label>
<input type="text" id="name"><br>
<label>국어 : </label>
<input type="text" id="kor"><br>
<label>영어 : </label>
<input type="text" id="eng"><br>
<label>수학 : </label>
<input type="text" id="math"><br>
<button onclick="test5();">실행확인</button>
<div id="area5" class="area-big"></div>
<script type="text/javascript">
function test5() {
var name = document.getElementById("name").value;
var kor = parseInt(document.getElementById("kor").value);
var eng = parseInt(document.getElementById("eng").value);
var math = parseInt(document.getElementById("math").value);
var student = {
name:name,
kor:kor,
eng:eng,
math:math
}
var student2 = {
name,
kor,
eng,
math
// 이와같이 key value 이름이 같으면 자동으로 넣어준다(최신버젼에서만 지원)
}
console.log(student);
console.log(student2);
var area5 = document.getElementById("area5");
area5.innerHTML += "<b>in 키워드 테스트</b>";
area5.innerHTML += "student 객체에 name이라는 속성이 있는지 확인 : " + ('name' in student) + "<br>";
area5.innerHTML += "student 객체에 sum이라는 속성이 있는지 확인 : " + ('sum' in student) + "<br>";
area5.innerHTML += "<b>그냥 출력</b><br>";
area5.innerHTML += "학생이름 : " + student.name + "<br>";
area5.innerHTML += "국어점수 : " + student.kor + "<br>";
area5.innerHTML += "영어점수 : " + student.eng + "<br>";
area5.innerHTML += "수학점수 : " + student.math + "<br>";
area5.innerHTML += "총점 : " + (student.kor + student.eng + student.math) + "<br>";
area5.innerHTML += "평균 : " + (student.kor + student.eng + student.math) / 3 + "<br>";
area5.innerHTML += "<b>with 키워드 테스트</b><br>";
with(student){
area5.innerHTML += "학생이름 : " + name + "<br>";
area5.innerHTML += "국어점수 : " + kor + "<br>";
area5.innerHTML += "영어점수 : " + eng + "<br>";
area5.innerHTML += "수학점수 : " + math + "<br>";
area5.innerHTML += "총점 : " + (kor + eng + math) + "<br>";
area5.innerHTML += "평균 : " + (kor + eng + math) / 3 + "<br>";
}
}
</script>
<hr>
<h3>객체의 속성 추가와 제거</h3>
<p>처음 객체 생성 이후 속성을 추가하거나 제거하는 것을 동적으로 속성을 추가한다 혹은
제거한다라고 한다.</p>
<button onclick="test6();">실행확인</button>
<div id="area6" class="area"></div>
<script type="text/javascript">
function test6() {
var student = {};
// 객체에 속성을 추가
student.name = "머키";
student.hobby = "철거";
student.strength = "아옳?";
student.dream = "아옳옳!";
console.log(student);
student.toString = function() {
var str = "";
for(var key in this){
if(key != 'toString'){
str += key + " : " + this[key] + "<br>";
}
}
return str;
}
var area6 = document.getElementById("area6");
area6.innerHTML = student.toString();
// 속성을 지울 때 delete
delete(student.dream);
area6.innerHTML = student;
}
</script>
</body>
</html>