CODE KATA #2

CODE KATA 🧗‍♂️

오늘은 Javascript를 활용하여 요구되는 간단한 코드를 작성해보는 연습을 해보았다. 요구된 조건은 다음과 같다.

요구조건

✅ The text of the title should change when the mouse is on top of it.
✅ The text of the title should change when the mouse is leaves it.
✅ When the window is resized the title should change.
✅ On right click the title should also change.
✅ The colors of the title should come from a color from the colors array.
✅ DO NOT CHANGE .css, or .html files.
✅ ALL function handlers should be INSIDE of "superEventHandler"

해결 과정

해당 조건을 만족시키는 결과물을 도출하기 위하여, event handler들을 한곳에 저장할 object인 superEventHandler를 선언해주고, 색상들을 저장할 colors array를 선언해 주었다. 또한, 이벤트 발생에 따라 텍스트의 변화가 주어질 <h2>는 document.querySelector("h2")를 통해 title이라는 이름으로 선언해주었고, 각각의 이벤트는 MDN Javascript Event를 참조하였다.

mouse enter, mouse leave

가장 먼저 구현한 것은 "mouseenter" 이벤트 발생시, title의 색상과 텍스트를 바꾸도록 하는 eventHandler이다.

const superEventHandler = {};

로 구성되어있는 현재의 superEventHandler 객체의 하위 함수로, handleMouseEnter를 선언하고, 내용을 아래와 같이 지정해주었다.

const superEventHandler = {
  handleMouseEnter: function (event) {
    title.innerText = "The mouse is here!";
    title.style.color = colors[0];
  }
};

이후 이 event handler를 원하는 객체에 추가해주면 간단히 해결되는데, 마우스가 올라왔는지 여부를 확인하고 싶은 객체는 title이기 때문에, 이 객체에 추가했다.

title.addEventListener("mouseenter", superEventHandler.handleMouseEnter);

addEventListener의 특성은 두번째 인자로 와야하는 함수에, 인자로서 발생한 event를 자동으로 넘겨주기 때문에, superEventHandler의 handleMouseEnter에 따로 인자를 정해주지 않아도 전달된다.

"mouseleave"의 경우도 같은 방식으로 진행해주면 정상적으로 작동한다.

resize, context menu

지금까지의 event listener들은 title에 추가되어, title에서 해당 이벤트가 발생하는 경우에 반응하였다. 하지만 사이즈를 변경할때 발생하는 event인 "resize"는 window에 event listener를 추가해주어야 정상적으로 반응한다. 따라서,

handleResize: function (event) {
  title.innerText = "You just resized!";
  title.style.color = colors[2];
},

를 superEventHandler에 추가해주고,

window.addEventListener("resize", superEventHandler.handleResize);

위와 같이 event listener를 추가해주면, 사이즈를 변환할 때마다 이벤트가 발생한다.

반면에 우클릭시 발생하는 "contextmenu"는 element 마다 지정할 수 있고, 대표적인 사용 예시로 우클릭을 못하게 하는 기능이 있다. 하지만, 이 사이트의 특정 element에 contextmenu를 설정하면, 해당 element에서만 이벤트가 발생하지만, window에 해당 이벤트를 추가해주면, 창의 어느곳에서 우클릭을 하더라도 이벤트가 발생한다.

최종 결과