코딩을 할 때 효과적인 방식은 html은 html파일에만 쓰고 css로 처리할 수 있는 것은 css로 처리하고 JavaScript는 최소한의 로직만 처리하게끔 분리하는것이다.
반응속도.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>반응속도</title>
<style>
#screen{
width: 300px;
height: 200px;
text-align: center;
}
#screen.waiting{
background-color: aqua;
}
#screen.ready{
background-color: red;
color: white;
}
#screen.now{
background-color: red;
}
</style>
</head>
<body>
<script src="반응속도.js">
</script>
</body>
</html>html에 이렇게 style을 여러개의 class형태로 여러 속성을 적용을 해놓았다.
반응속도.js
var 스크린 = document.querySelector('#screen');
var 상태 = {
};
스크린.addEventListener('click', function(){
if(스크린.classList.contains('waiting')){ // classList.contains: 현재클래스를 파악가능하다
스크린.classList.remove('waiting'); // class는 여러 스타일을 한번에 적용할 수 있어서 좋다. 클래스가 여러개 일때 한번에 적용하기 쉽다
스크린.classList.add('ready');
스크린.textContent = '초록색이 되면 클릭하세요'
}else if(스크린.classList.contains('ready')){
스크린.classList.remove('ready');
스크린.classList.add('now');
스크린.textContent = '클릭하세요!'
}else if(스크린.classList.contains('now')){
스크린.classList.remove('ready');
스크린.classList.add('now');
스크린.textContent = '클릭해서 시작하세요'
}
})만약 이때, class에 새로운 class 값을 준다면, 문제가 생긴다.
이때 이용할 수 있는 것이, classList이다.
classList
classList를 이용하면 클래스를 조작하는 다양한 메서드들을 쓸 수 있다.
classList.add : 클래스를 필요에 따라 삽입한다.
classList.remove : 클래스를 필요에 따라 제거한다.
classList.contains('class명') : 클래스의 값이 존재하는지 체크한다. (true/false)
이 메서드를 사용해서 타이틀 클래스에 값을 체크해서
없으면 waiting을 삽입하고, waiting이 있다면 'ready'로 추가하는 로직을 만든다.
이 classList를 통해 얻을 수 있는 것은 클래스가 변경이 되더라도 추가하거나 제거하기 때문에, 공존이 가능하고
classList를 통해 style이 수백 수천줄이 있더라도 classList 하나를 통해 여러 스타일을 한번에 적용할 수 있어서 좋다.
참고
- 인프런 - 제로초 강의
'Language > JavaScript' 카테고리의 다른 글
| [JavaScript] 객체를 복사하는 방법 (0) | 2020.09.08 |
|---|---|
| [JavaScript] 참조와 복사 (0) | 2020.09.07 |
| [JavaScript] 렉시컬 스코프, 클로저 (0) | 2020.09.03 |
| [JavaScript] 이벤트 리스너, 이벤트 버블링, 이벤트 객체 (0) | 2020.09.02 |
| [JavaScript] 이미지 스프라이트 (0) | 2020.08.31 |
댓글