2021.7.4 TIL : [JavaScript] 자바스크립트 기초-2

아아주 기본 부분을 넘어서 이제 조금 기본 부분을 배워볼 수 있을 것 같다.

 

이벤트 (Event)

자바스크립트가 웹의 활동성?을 보여줄 수 있는 언어라고 배웠는데, 그 부분들을 조금씩 배워가는 것 같다. 먼저, 이벤트는 사용자가 어떤 행동을 했을 때 보여지는 웹 부분을 어떻게 바꿔갈 수 있는지에 관한 것이다. 코드를 예를 들어 보여주자면 다음과 같다.

//html 파일은 지난 번에 이용한 것과 똑같다. 
const title = document.querySelector(".hello h1");
function clicked(){
    const currentColor = title.style.color;
    let newColor;
    if (currentColor === "blue"){
        newColor = "purple";
    }
    else{
        newColor = "blue";
    }
    title.style.color = newColor;
}

title.addEventListener("click", clicked);

 

위의 코드를 보면, addEventListener이라는 함수를 사용한다. 이는 사용자가 해당 항목에 특정한 액션을 취했을 때, 다음과 같이 행동하라와 같은 의미이다. (= title에 클릭이 행해지면, clicked 함수를 수행해라.) clicked 함수를 보면, 현재 글씨 색이 파란색일때는 보라색으로, 파란색 외의 다른 색일때는 파란색으로 바꿔주는 역할을 하고 있다. 

하지만 이 코드는 css 요소를 js 파일에서 바꾸게 되면서 썩 좋은 코드라고 할 수는 없다. 아무래도 두 언어가 섞여서 존재하다 보니, 혼선이 생기기도 쉽고 하나의 파일에 하나의 언어만 유지하는 것이 더 이해하기도 쉽고 좋기 때문! 

 

그래서 같은 코드를 다음과 같이 바꿔 줄 수도 있다. 우선 css 파일에 아래 코드를 추가해준다.

.active{
  color : purple;
}

그리고 js 파일을 다음과 같이 바꿔준다. title의 class에 active를 추가하여 css를 직접 바꾸지 않고 class만 바꿔주는 것이다. 

//html 파일은 지난 번에 이용한 것과 똑같다. 
const title = document.querySelector(".hello h1");

/*function clicked(){
    if (title.classList.contains("active")){
        title.classList.remove("active");
    } else{
        title.classList.add("active");
    }
}*/

function clicked(){
    title.classList.toggle("active");
}

title.addEventListener("click", clicked);

사실 주석으로 처리한 부분과 clicked 함수 내에서 toggle로 처리한 것은 같은 함수이다. toggle로도 쉽게 처리할 수 있지만, 가끔 또 내장 함수가 어떻게 처리하는 건지 궁금할 때도 있으니 알아두면 좋을 것 같다. active 외에 title 이 가지고 있는 다른 class 에 영향을 주고 싶지 않아서 classList에 add, remove, toggle을 사용하지만, 만약 해당하는 class가 하나밖에 없다면 title.className === "active" 이런 식으로 구성해도 된다. 하지만 무슨 클래스를 추가할 지 모르는 상황에서 굳이 이걸 사용할 일은 많지 않을 것 같다.

 

이 외에도 훨씬 많은 이벤트들이 존재하는데, 어떤 이벤트가 존재하는 지 궁금하다면 구글링해봐도 되고, 혹은 inspect 했을 때 나오는 속성들 중에 on~~이라고 적힌 속성들을 보고 이름을 먼저 파악할 수도 있다. (ex. onclick. oncopy ...)

 

단순한 요소 뿐만 아니라 윈도우 전체도 사용자의 행동을 감지하여 변화를 줄 수 있다. 

function windowResized(){
    document.body.style.backgroundColor = "tomato";
}
function windowCopied(){
    alert("Content is copied!");
}
function windowOfflined(){
    alert("SOS! NO WIFI");
}
function windowOnlined(){
    alert("Yes! ALL GOOD");
}
window.addEventListener("resize", windowResized);
window.addEventListener("copy", windowCopied);
window.addEventListener("offline", windowOfflined);
window.addEventListener("online", windowOnlined);

dnl위의 예를 확인해보면 좀 더 쉽게 이해할 수 있을 것이다. 가장 쉽게 내가 주변에서 봤던 예들은, 와이파이 연결이 안된 상태에서 크롬 브라우저를 열면 공룡 게임 나오는 거가 이걸 사용했겠구나 하는 것이다. 또 다른 예로 생각나는 건, 모바일에서 네이버 웹툰 보다가 스크린샷 하게 되면 지적 재산권 침해에 유의하라는 안내 문구가 나오는 거? 그건 아마도 앱 제작에 사용되는 언어를 이용하지 않았을까 싶긴 하지만, 베이스는 똑같을 것 같다.