노마드 코더님의 자바스크립트 강의를 보고 정리한 글입니다.

클릭할 때마다 텍스트의 색 변경하기

• 클릭할 때마다 타이틀 텍스트의 색깔이 번갈아가며 바뀌도록 설정.
• 자바스크립트는 이런 작업들을 수행하기 위해 만들어졌음(click, resize 등의 이벤트).
• 자바스크립트의 다양한 이벤트들에 대해 알고 싶다면, MDN을 참고

const title = document.querySelector("#title");

const BASE_COLOR = "#34495e";
const OTHER_COLOR = "#7f8c8d";

function handleClick(){
    const currentColor = title.style.color;
    if (currentColor === BASE_COLOR){
    	title.style.color = OTHER_COLOR;
    } else {
    	title.style.color = BASE_COLOR;
    }
}

function init(){
	title.style.color = BASE_COLOR;
	title.addEventListener("click", handleClick);
}
init();

Javascript가 아닌 CSS에서 스타일 수정하기

• 자바스크립트에서 스타일을 직접 수정하는 것은 별로 좋은 방법이 아니다.
• 스타일은 CSS에서 수정하고, 자바스크립트에선 로직을 정하는 게 좋은 방향이다.
• 따라서 아래와 같이 CSS 클래스별로 스타일을 미리 지정해둔 다음, 자바스크립트로 이벤트에 맞게 CSS 클래스를 변경해줌으로써 스타일을 변경하는 것이 좋다.
  • title.classList.add(CLICKED_CLASS);

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

// 만약 타이틀의 클래스가 CLICKED_CLASS와 다르면, CLICKED_CLASS로 변경해주고, 같다면 빈값을 할당
function handleClick(){
	const currentClass = title.className;
    if (currentClass !== CLICKED_CLASS){
        title.className = CLICKED_CLASS;
    } else {
        title.className = "";
    }
}
function init(){
    title.addEventListener("click", handleClick);
}
init();

• 위와 같이 해당 태그의 클래스 자체를 바꿔주지 않고, 클래스를 추가하는 방법도 있다.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";
function handleClick(){
    const hasClass = title.classList.contains(CLICKED_CLASS);
    if (hasClass){
        title.classList.remove(CLICKED_CLASS);
    } else {
        title.classList.add(CLICKED_CLASS);
    }
}
function init(){
    title.addEventListener("click", handleClick);
}
init();

• 그리고 toggle을 이용해 위 코드를 훨씬 더 간단하게 만들 수도 있다.

const title = document.querySelector("#title");
const CLICKED_CLASS = "clicked";

// toggle : 클래스가 있는지 체크하고, 있으면 remove, 없으면 add함.
function handleClick(){
    title.classList.toggle(CLICKED_CLASS);
}

function init(){
    title.addEventListener("click", handleClick);
}
init();

• CSS에서 아래 코드를 추가하면, 부드러운 트랜지션 효과를 줄 수 있음.

h1 {
    color : red;
    transition : color 0.5s ease-in-out;
}

device가 offline으로 변경되면, 메세지 출력하기

• 자바스크립트로 device의 online, offline을 체크해서 메세지를 출력할 수도 있음.

function handleOffline(){
    console.log("hey, it's offline");
}
window.addEventListener("offline", handleOffline);