1. 경로 설정
.css file과 같이 별도 Javascript logic을 적용하기 위한 src 경로설정이 필요하다.
HTML - body
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="./desktop.css">
<script src="./desktop.js"></script>
</head>2. class의 정의
class를 외부파일(.js)을 통해 정의해준다.
desktop.js
class Desktop {
constructor(name) {
this.name = name;
}
sayHi() {
console.log('HELLO!')
}
};- class의 생성자(constructor)는 속성을 정의해주는 영역이다.
- 생성자를 제외한 부분은 class의 행동을 정의해주는 영역이다.
3. class 활용(behavior, method)
선언한 class의 활용은 HTML의 script에서 실행한다.
HTML - script
<script>
//Class 선언 및 정의는 outer source(desktop.js)에서 정의
let myDesktop = new Desktop('Kim');
console.log(myDesktop.name);
myDesktop.sayHi();
</script>4. 참고개념
Javascript class 생성하기
https://ko.javascript.info/class
