1. 마우스 클릭 이벤트
2. 화면 사이즈 변경 이벤트
h1 tag 클릭시 글자색 변경
<body class="bd">
<div class="hello">
<h1 class="big-size">Click me!</h1>
</div>
<script src="index.js"></script>
</body>h1 {
color: cornflowerblue;
}
.clicked {
color: tomato;
}
.big-size {
font-size: 3rem;
}공통
먼저 HTML의 h1 tag를 JS에 가져와서 title이라는 변수에 담는다.
이 title에대한 이벤트와 함수를 addEventListener의 인자값에 넣는다.
const title = document.querySelector(".bd .hello h1");
title.addEventListener("click", handleTitleClick);함수 - Mouse click (handleTitleClick1)
function handleTitleClick1(){
const currentColor = title.style.color;
let newColor;
if (currentColor === "tomato") {
newColor = "cornflowerblue";
} else {
newColor = "tomato";
}
title.style.color = newColor;
}마우스 클릭에 대한 함수는 총 4가지이다.
4가지 함수 모두 클릭을 하면 색상이 tomato, cornflowerblue가 번갈아가며 바뀌는 동작을 구현하였다.
이 함수는 css 속성값을 직접 가져오는 것이 가장 큰 특징이다.
현재 색상을 currentColor 변수에 할당하고 if조건문을 활용하여 newColor 변수에 각각의 조건에 맞는 색상을 할당하였다.
해당 방법은 element의 style을 js파일에서 변경하는 것이 큰 특징이다.
하지만 다른언어들을 섞는 것은 별로 좋지 않기에 이 방법은 지양하도록 한다.
함수 - Mouse click (handleTitleClick2)
function handleTitleClick2(){
const clickedClass = "clicked";
if (title.className === clickedClass) {
title.className = "";
} else {
title.className = clickedClass;
}
}이 함수는 className을 이용하는 방법을 사용하였다.
먼저 css파일에 "clicked"라는 font 색상 스타일을 만든다.
if조건문을 활용하여 해당 태그에 이 clicked라는 className이 있으면 className값을 비우고, 없으면 className에 "clicked"를 할당한다.
이 방법은 첫번째방법처럼 CSS와 JS가 섞여있지 않았다. JS는 HTML을 변경시켰고, CSS는 HTML만을 바라보고 있기 때문이다.
하지만 치명적인 단점이 있다.
만약 이 태그에 다른 className이 존재하고 있다면 어떻게 될까?
위 HTML,CSS 코드를 보면 우리가 변경하고 있는 h1태그에 폰트크기를 키워주는 big-size className이 이미 존재한다.
위 조건문에 따라 className에 "clicked"라는 className이 존재하지 않기 때문에 비워지게 된다.
즉 big-size도 사라진다는 것이다.
때문에 이 방법은 지양해야할 것 같다.
함수 - Mouse click (handleTitleClick3)
function handleTitleClick3(){
const clickedClass = "clicked";
if (title.classList.contains(clickedClass)) {
title.classList.remove(clickedClass);
} else {
title.classList.add(clickedClass);
}
}이 함수는 classList를 활용하였다.
classList는 class들의 목록을 작업할수 있게 허용해준다.
여기에 contain함수는 내가 명시한 class가 HTML element의 class에 포함되어있는지 알려준다.
(포함되어있으면 true, 없으면 false)
조건문을 이용해 "clicked"가 있으면 remove함수를 이용해서 해당 "clicked" class만 삭제할 수 있다.
함수 - Mouse click (handleTitleClick4)
function handleTitleClick3(){
title.classList.toggle("clicked");
}이 함수는 classList의 toggle함수를 사용하였다.
이 toggle함수는 add나 remove함수 필요없이 해당 className이 없으면 알아서 추가하고 있으면 알아서 제거해준다. 3번째 방법과 동일하지만 코드를 1줄로 줄여서 제일 좋아보이는 방법이라고 생각한다.
화면사이즈 변경시 body 배경색 변경
<body class="bd">
<div class="hello">
<h1 class="big-size">Click me!</h1>
</div>
<script src="index.js"></script>
</body>.bigScreen {
background-color: orange;
}
.mediumScreen {
background-color: purple;
}
.smallScreen {
background-color: deepskyblue;
}공통
const bd = document.querySelector("body");
window.addEventListener("resize", superEventHandler.handleResize);공통적으로 화면 사이즈가 1200 이상이면 배경색이 orange, 900 ~ 1200 이면 purple, 900이하면 deepskyblue가 되도록 설정하였다.
함수 - 화면 size별 배경색 변경 (handleResize1)
function handleResize1(){
const size = window.innerWidth;
if (size >= 1200) {
bd.style.backgroundColor = "orange";
}
else if (size < 1200 && size > 900) {
bd.style.backgroundColor = "purple";
}
else {
bd.style.backgroundColor = "deepskyblue";
}
}HTML body태그를 bd라는 변수에 담았다.
조건문을 활용하여 해당 사이즈에 맞는 color값을 bd.style.background에 할당하여 배경색을 바꾼다.
이 방법은 element의 style을 js파일에서 변경하기 때문에 지양하도록 한다.
함수 - 화면 size별 배경색 변경 (handleResize1)
.bigScreen {
background-color: orange;
}
.mediumScreen {
background-color: purple;
}
.smallScreen {
background-color: deepskyblue;
}function handleResize1(){
const size = window.innerWidth;
const BIG_SCREEN = "bigScreen";
const MIDIUM_SCREEN = "mediumScreen";
const SMALL_SCREEN = "smallScreen";
if (size >= 1200) {
bd.classList.add(BIG_SCREEN);
bd.classList.remove(MIDIUM_SCREEN);
}
else if (size < 1200 && size > 900) {
bd.classList.add(MIDIUM_SCREEN);
bd.classList.remove(SMALL_SCREEN);
}
else {
bd.classList.add(SMALL_SCREEN);
bd.classList.remove(MIDIUM_SCREEN);
}
}먼저 css에 bigScreen, mediumScreen, smallScreen이라는 스타일을 추가하여 js파일에 상수값으로 할당하였다. 직접적인 문자열보다 이 상수값을 활용하는 것이 에러를 예방하기 좋다.
그리고 조건문에 classList의 add,remove를 넣어서 className을 변경하여 조건에 따라 배경색이 달라지게 설정하였다.
