[WebDevCurriculum] Javascript class 활용

1. 경로 설정

.css file과 같이 별도 javascript logic을 적용하기 위한 src 경로설정이 필요하다.

HTML - body

<script src="./desktop.js"></script>

2-1. class 변수 선언

Class에서 반복적으로 사용해야 할 변수를 HTML script 상에서 정의해주고, 이를 Class로 전달한다.

HTML - body, 변수 선언

let isClicked = false;
			let offsetX = 0;
			let offsetY = 0;
			let currentObject = null;

let icon = new Icon(isClicked, offsetX, offsetY, currentObject)

2-2. class 생성자를 통한 변수 선언

script 변수를 class로 받아와 생성자에서 변수를 선언해 준다.

이 단계는 사실상 객체를 생성한다는 것에 가깝지만, 변수를 선언해준다는 과정이 더 이해가 쉬울 수 있다.

.js, class 생성자 선언

class Icon {
	constructor(isClicked, offsetX, offsetY, currentObject){
		this.isClicked = isClicked;
		this.offsetX = offsetX;
		this.offsetY = offsetY;
		this.currentObject = currentObject;
	}

3. class 행동 정의

반복적으로 활용할 class 행동을 정의한다.

아래의 class 행동을 통해 mousedown event가 발생하였을때 event target 인자를 받아오고, 해당 정보들을 class 변수에 저장한다.

.js, class 행동 정의

class Icon {
	constructor(isClicked, offsetX, offsetY, currentObject){
		this.isClicked = isClicked;
		this.offsetX = offsetX;
		this.offsetY = offsetY;
		this.currentObject = currentObject;
	}
  
  //class behavior

	mousedown(e){
		if(e.target.classList.contains('box')){
			this.isClicked = true
			this.offsetX = e.offsetX;
			this.offsetY = e.offsetY;
			this.currentObject = e.target
		}	
	}

4. HTML

정의한 class 행동을 javascript script에서 그대로 활용한다.

script에서는 반복적으로 기술하거나, 자주 사용하는 변수를 선언한다.

그 이후 class를 통해 정의한 행동을 반복적으로 사용하여, 비교적 간결한 코드를 작성할 수 있다.

container.onmousedown = function(e){
				icon.mousedown(e);
			}