JS - EVENT / TIL - 6

event

interaction은 HTML이나 CSS만으로 구현할 수 없고 자바스크립트 코딩이 필요

이렇게 특정 요소에 interactive한 반응을 할 수 있게 하는 것을 이벤트라고 한다.

이벤트의 종류 - 매우다양함

• 클릭 이벤트
• 마우스 이벤트
• 스크롤 이벤트
• 터치 이벤트
• resize(화면 크기 변화) 이벤트 등

addEventListener

이벤트를 달 때 사용하는 함수 이름은 addEventListener

addEventListener는 특정 이벤트가 언제 발생하는지 가만히 듣고 있다가, 발생하면 인자로 받은 함수를 실행

요소.addEventListener(이벤트종류, function() {
  //이벤트가 일어났을 때 실행할 내용
});

중요 포인트 - 함수도 인자로 전달

클릭이벤트

버튼, 사진, 글 등 웹사이트에서 이루어지는 이벤트 중 가장 많은 것이 클릭 이벤트

프론트앤드 개발자는 버튼, 사진, 글 등의 요소마다 클릭 이벤트를 달아서 각자 클릭이벤

트에 맞는 reaction을 프로그래밍!!!

• 로그인 버튼 클릭 -> 로그인 api 호출
• 상품 사진 클릭 -> 상품 상세 화면으로 이동
• 자세히 보기 버튼 클릭 -> 팝업화면 출력

const thisIsButton = document.getElementsByClassName('login-btn')[0];
/* login-btn라는 클래스 이름이 있는 요소를 찾아보자. 
class 이름은 여러 요소에 중복해서 이름을 줄 수 있습니다. 
그래서 getElementsByClassName 으로 요소를 찾으면 여러 요소가 담긴 배열이 반환 */



thisIsButton.addEventListener('click', function()/*click 했을 때 실행되어야할 기능*/{
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;

  if (!password) {
    alert('비밀번호를 입력해주세요!');
    return;
  }
  
  if (!rePassword) {
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
  
  if (password !== rePassword) {
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
  
  alert('회원가입 성공!!');
});

키이벤트

사람이 키보드를 누르면 발생하는 이벤트

• 키보드를 눌렀을 때 발생하는 keydown
• 키보드를 누르고 떼는 순간 발생하는 keyup
• 키보드를 눌러 어떤 텍스트가 작성되는 순간 발생하는 keypress

const thisIsPw = document.getElementById('password');

thisIsPw.addEventListener('keydown', function(e) {
  if (e.code === 'Enter') {
    //로그인 함수로 이동
  }
});

문제

문제 1 : 이벤트가 발생하면 실행될 함수에 아래의 기능을 만들어주세요.

input#re-password에 keyup 이벤트를 추가해주세요.

input#password 와 input#re-password의 value 속성을 통해 input에 작성된 값을 가져오고,

서로 같은지 아닌지 확인해서 같지 않다면

<p>태그의 .alert 클래스에 "비밀번호가 일치하지 않습니다" 라는 문구를 넣어주세요.

서로 비밀번호가 같다면 "" 빈 문구를 넣어주시면 됩니다.

풀이

const thisIsRePw = document.getElementById('re-password');
const thisIsAlert = document.getElementsByClassName('alert')[0];

thisIsRePw.addEventListener('keyup', function() {
  const password = document.getElementById('password').value;
  const rePassword = document.getElementById('re-password').value;
  
  if (password!== rePassword) {
    thisIsAlert.innerHTML = "비밀번호가 일치하지 않습니다"
    return;
  } else {
    thisIsAlert.innerHTML = ""
    return;
  }
});

자바스크립트 Replit 후기

JavaScipt 과제를 풀면서 후반부로 갈 수록 어려웠다. 특히 객체와 스코프 ES6가 나오면서 머릿속이 복잡해졌다. 내용정리를 하면서 문제를 푸니 문제 하나하나 1시간 이상의 시간이 나오면서 좌절의 시간을 맛보게 되었다. 하지만 못할 것 같다는 생각은 들지 않았다. 위코드에서의 생활이 점점 기대되고 앞으로 3개월 후엔 프론트엔드 개발자로서의 커리어를 밟아나가도록 열심히 해야겠다.