컴퓨터/JavaScript
[JavaScript] 객체 메소드
peridott
2024. 7. 5. 16:33
<!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>객체의 속성 중 함수 자료형인 속성을 메소드라고 부름</p>
<button onclick="test1();">실행확인</button>
<div class="area small" id="area1"></div>
<script>
function test1() {
let area1 = document.getElementById('area1');
let name = '이고잉';
const dog = {
name : '귀요미',
kind : '요크셔테리어',
eat : function(food) {
area1.innerHTML += 'eat 메소드가 호출됨<br>';
area1.innerHTML += food + '<br>';
area1.innerHTML += `${this.kind}종류인 ${this.name}가 ${food}를 먹고 있어요<br>`;
}
}
dog.eat('사과');
area1.innerHTML += '----------------------------<br>'
name = 'hong';
let age = 25;
// ES4
const p1 = {
name : name,
age : age,
fun1 : function() {
const result = this.name.toUpperCase();
area1.innerHTML += result + `!!!<br>`;
},
setAge : function(vAge) {
this.age = vAge;
area1.innerHTML += `나이 : ${this.age}<br>`;
}
};
// ES6(2015)
const p2 = {
name,
age,
fun1() {
const result = this.name.toUpperCase();
area1.innerHTML += result + `!!!<br>`;
},
setAge(vAge) {
this.age = vAge;
area1.innerHTML += `나이 : ${this.age}<br>`;
}
};
p1.fun1();
p1.setAge(30);
p2.fun1();
p2.setAge(30);
}
</script>
<hr>
<h3>* in과 with 키워드</h3>
<p>
in : 객체 내에 해당 속성이 있는지 확인해 주는 키워드(존재하면 true, 아니면 false)<br>
with : 객체의 속성에 접근시 객체명을 제시하는 걸 생략할 수 있음(코드를 줄여주는 키워드)
</p>
이름 : <input id="name"><br>
국어점수 : <input type="number" id="kor"><br>
수학점수 : <input type="number" id="math"><br>
영어점수 : <input type="number" id="eng"><br>
<button onclick="test2();">실행확인</button><br>
<div class="area big" id="area2"></div>
<script>
function test2() {
let area2 = document.getElementById('area2');
const student = {
name : document.getElementById('name').value,
kor : Number(document.getElementById('kor').value),
math : document.getElementById('math').value,
eng : document.getElementById('eng').value,
toString : function() {
return `${this.name}, ${this.kor}, ${this.math}, ${this.eng}`;
},
getSum : function() {
return this.kor + Number(this.math) + parseInt(this.eng);
},
getAvg : function() {
// return Math.round(this.getSum() / 3);
return Math.round((this.getSum() / 3)*100)/100; // 소수점 둘째자리까지 출력
}
};
console.log(student);
area2.innerHTML += student; // 결과값이 object만 나온다.
// 객체 student 호출 시 toString()메소드 호출
// toString()을 재정의하여 재정의한 값 출력
area2.innerHTML += `student : ${student}<br>`;
area2.innerHTML += `name속성이 있는가? ${'name' in student}<br>`; // true
area2.innerHTML += `age속성이 있는가? ${'age' in student}<br>`; // false
area2.innerHTML += `학생이름 : ${student.name}<br>`;
area2.innerHTML += `국어점수 : ${student.kor}<br>`;
area2.innerHTML += `수학점수 : ${student.math}<br>`;
area2.innerHTML += `영어점수 : ${student.eng}<br>`;
area2.innerHTML += `총점 : ${student.getSum()}<br>`;
area2.innerHTML += `평균 : ${student.getAvg()}<br>`;
area2.innerHTML += '----------------------------<br>'
with(student) {
area2.innerHTML += `학생이름 : ${name}<br>`;
area2.innerHTML += `국어점수 : ${kor}<br>`;
area2.innerHTML += `수학점수 : ${math}<br>`;
area2.innerHTML += `영어점수 : ${eng}<br>`;
area2.innerHTML += `총점 : ${getSum()}<br>`;
area2.innerHTML += `평균 : ${getAvg()}<br>`;
}
}
</script>
</body>
</html>