event / if, else

 

노마드코더 바닐라 JS로 크롬 앱 만들기 #2.3 ~ #2.7 강의 들으며 정리.

 

event / event handler

 

function handleResize(event){
  console.log(event);
  console.log('i have been resized');
}

window.addEventListener('resize', handleResize());
// event 인자 넣으면 이벤트 발생될 때 마다 event가 호출됨.



const title = document.querySelector('#title');
function handleClick(){
  title.style.color = 'red';
};

title.addEventListener('click', handleClick());

 

 

function handleResize(event){
  console.log(event);
};

window.addEventListener('resize', handleResize);

 

이벤트리스너에 함수를 어떻게 넣어주느냐에 따라 호출이 달라진다.

ex) handleResize(); 는 함수를 즉시 호출

       handleResize; 는 함수 이벤트가 실행될 때 호출

 

 

if / else / and / or

 

if("10" === 10) {
  console.log('hi');
}
else if('10' === '10') {
  console.log('lalala');
}
else {
  console.log('no');
}

if(20 > 5 && 'nicolas' === 'nicolas') {
  console.log('yes');
} else {
  console.log('no');
}

 

비교 연산자

 

&& 둘 다 참이어야함.
true && true = true;
false && false = false;
true && false = false;
false && true = false;

|| 둘 중 하나만 참이여도 참.
true || true = true;
false || false = false;
true || false = true;
false || true = true;

 

---

if / else practice

 

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

const BASE_COLOR = 'rgb(52, 73, 94)';
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();

 

=== : 무언가를 할당하지 않음. 조건이 맞는 지 체크만 함.

 

이렇게 자바스크립트에서 css를 수정할 수도 있지만 자바스크립트는 css를 수정하기 위해서만 존재하는 것은 아니기 때문에,

css는 css에서 작성하고, 자바스크립트에서는 로직을 작성해준다.

 

.btn {
  cursor: pointer;
}

.clicked {
  color: #7f8c8d;
}

 

css에서 위와 같은 클래스 이름을 가진 스타일을 하나 만들어준다.

그리고 아이디 title을 가진 요소에 클래스 btn을 붙여줬다.

 

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

const CLICKED_CLASS = '.clicked';

function handleClick() {
  const currentClass = title.className;

  if(currentClass !== CLICKED_CLASS){
    title.className = CLICKED_CLASS;
  }
  else {
    title.className = '';
  }
};

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

 

현재 title의 클래스 이름이 CLICKED_CLASS와 같지 않으면 CLICKED_CLASS를 붙여주고,

그렇지 않으면 붙이지 않는 동작이다.

근데 이렇게 하면 문제가 발생하는데, if가 실행되면서 CLICKED_CLASS가 부여되면

기존에 가지고 있던 클래스인 btn이 사라져버린다.

 

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

const CLICKED_CLASS = '.clicked';

function handleClick() {
  const hasClass = title.classList.contains(CLICKED_CLASS);
  if(!hasClass){
    title.classList.add(CLICKED_CLASS);
  }
  else {
    title.classList.remove(CLICKED_CLASS);
  }
};

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

 

contains는 value가 존재하는 지 체크해준다.

만약 hasClass와 같지 않으면 클래스를 붙여주고, 아니면 클래스를 제거하는 조건이다.

 

toggle을 이용해서 더 간단하게 작성할 수도 있다.

 

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

const CLICKED_CLASS = '.clicked';

function handleClick() {
  title.classList.toggle(CLICKED_CLASS);
};

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

 

toggle은 CLICKED_CLASS를 가지고 있으면 remove, 가지고 있지 않으면 add해준다.

 

 

하.. 슬슬 어려워진다 ㅋㅋㅋㅋㅋㅋ 하지만 재밌다

그래도 학원에서 자바스크립트 기초는 배워서 그런지 따라가는데 수월하다

다음주 챌린지 시작 전까지 공부 더 열심히 해야 할 것 같다,,