Front-End - Main Menu/html5 + CSS3 + JavaScript (종합 예제)

ex10 - class

ITRecipe 2023. 2. 28. 12:50
<!DOCTYPE html>
<!-- 국쌤예제(추가설명) -->
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>ES6 class</title>
</head>
<body>

<h3>자바스크립트 class사용</h3>
<hr/>

<p id="demo"></p>
<p id="demo1"></p>

<script>
//class정의
class Car {
	//생성자 메서드 constructor(객체의 속성들)
	constructor(name, year) {
		this.name = name;
		this.year = year;
	}
	//class는 메서드도 정의 가능하다.
	age() {
		//function 키워드 없이 "메서드명(파라미터)" 형식으로 생성한다.
		let date = new Date(); //객체생성
		alert(date);
		return date.getFullYear() - this.year;
	}
}
/* - class사용은 코어객체나 생성자 함수 사용 처럼 사용한다.(생성자를 class명의 생성자를 사용한다)
   - 생성자의 파라미터는 constructor의 파라미터를 사용한다.
   - 객체 생성은 자바와 유사하며 객체를 생성하면 자동으로 constructor메서드를 호출하여 초기화 한다.
*/
let myCar = new Car("Ford", 2018);

document.getElementById("demo").innerHTML = myCar.name + " " + myCar.year + " "
+ " " +  myCar.age();


let yourCar = new Car("Benz", 2022);
document.getElementById("demo1").innerHTML = yourCar.name + " " + yourCar.year;
</script>
</body>
</html>

'Front-End - Main Menu > html5 + CSS3 + JavaScript (종합 예제)' 카테고리의 다른 글

ex10 - for of 문법  (0) 2023.03.02
ex10 - arrowFunction  (0) 2023.03.02
ex10 - constObject  (0) 2023.02.28
ex10 - constArray  (0) 2023.02.28
ex10 - const 변수  (0) 2023.02.28