JS레플릿 33.Event_10.21

송철진·2022년 10월 21일

Assignment

이벤트가 발생하면 실행될 함수에 아래의 기능을 만들어주세요.
input#re-password에 keyup 이벤트를 추가해주세요.
input#password 와 input#re-password의 value 속성을 통해 input에 작성된 값을 가져오고,
서로 같은지 아닌지 확인해서 같지 않다면
<p>태그의 .alert 클래스에 "비밀번호가 일치하지 않습니다" 라는 문구를 넣어주세요.
서로 비밀번호가 같다면 "" 빈 문구를 넣어주시면 됩니다.

👉 style.css

* {
  box-sizing: border-box;
}

.login-container {
  width: 200px;
  margin: 20px auto;
}

.login-container input {
  width: 100%;
  height: 30px;
  margin-bottom: 5px;
  padding-left: 10px;
}

.login-btn {
  width: 100%;
  height: 30px;
  text-align: center;
  font-size: 14px;
  background-color: #659672;
  color: white;
}

.login-btn:hover {
  cursor: pointer;
  opacity: 0.85;
}

👉 index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>repl.it</title>
    <link href="index.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <div class="login-container">
      <input type="password" id="password" placeholder="비밀번호" />
      <input type="password" id="re-password" placeholder="비밀번호 확인" />
      <button class="login-btn">로그인</button>
      <p class="alert"></p>
      <p>key code: <span id="code"></span></p>
    </div>
    
    <script src="index.js"></script>
  </body>
</html>

로직 생각해보기

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

const thisIsRePw = document.getElementById('re-password');

thisIsRePW.addEventListener('keyup', function(){
	// 이벤트 실행할 내용
});

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

const thisIsRePW = document.getElementById('re-password');
const thisIsPw = document.getElementById('password');

thisIsRePW.addEventListener('keyup', function(){
  thisIsPw.value
  thisIsRePW.value
});

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

const thisIsRePW = document.getElementById('re-password');
const thisIsPw = document.getElementById('password');

thisIsRePW.addEventListener('keyup', function(){
  if(thisIsPw.value !== thisIsRePW.value){
  }  
});

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

const thisIsRePW = document.getElementById('re-password');
const thisIsPw = document.getElementById('password');
const pAlert = document.getElementsByClassName('alert')[0];

thisIsRePW.addEventListener('keyup', function(){
  if(thisIsPw.value !== thisIsRePW.value){
    pAlert.innerHTML = "비밀번호가 일치하지 않습니다";
  }  
});

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

const thisIsPw = document.getElementById('password');
// id='password'인 태그
const thisIsButton = document.getElementsByClassName('login-btn')[0];
// class='login-btn'인 요소. 현 과제에 불필요한 부분.
const thisIsRePW = document.getElementById('re-password');
const pAlert = document.getElementsByClassName('alert')[0];

thisIsRePW.addEventListener('keyup', function(){
  if(thisIsPw.value !== thisIsRePW.value){
    pAlert.innerHTML = "비밀번호가 일치하지 않습니다";
  }else{
    pAlert.innerHTML = "";
  }
});

결과

const thisIsPw = document.getElementById('password');
// id='password'인 태그
const thisIsButton = document.getElementsByClassName('login-btn')[0];
// class='login-btn'인 요소. 현 과제에 불필요한 부분.
const thisIsRePW = document.getElementById('re-password');
const pAlert = document.getElementsByClassName('alert')[0];

thisIsRePW.addEventListener('keyup', function(){
  if(thisIsPw.value !== thisIsRePW.value){
    pAlert.innerHTML = "비밀번호가 일치하지 않습니다";
  }else{
    pAlert.innerHTML = "";
  }
});

Today I Learn

1. Event

Event: 자바스크립트 코딩으로 특정 요소에 interactive한 반응을 할 수 있게 하는 것

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

2. addEventListener

addEventListener: 특정 이벤트가 발생하면 인자로 받은 함수를 실행시켜 주는 함수

인자로 전달된 함수를 콜백함수라고 한다

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

3. 클릭 이벤트

예)

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

3-1. 로그인 버튼

getElementsByClassName()을 써줄 때는 뒤에 꼭 [0]을 써주도록 하자!
(그 요소의 순서에 따라 0이 아닐 수 있음)

const thisIsButton = document.getElementsByClassName('login-btn')[0];
// HTML문서에서 첫번째 값[0]이 class="login-btn"인 요소를 찾는다
/* class는 여러 요소에 중복으로 이름을 줄 수 있어  
   [0]이 없으면 동일 클래스의 여러요소가 담긴 배열을 반환한다 */
thisIsButton.addEventListener('click', function() { // 클릭하면 function을 실행
  const password = document.getElementById('password').value;
  // id="password"인 요소의 값
  const rePassword = document.getElementById('re-password').value;
  // id="re-password"인 요소의 값
  if (!password) { // password에 입력하지 않았을 때
    alert('비밀번호를 입력해주세요!');	// alert창을 띄운다
    return;
  }
  if (!rePassword) { // re-password에 입력하지 않았을 때
    alert('비밀번호 확인을 입력해주세요!');
    return;
  }
  if (password !== rePassword) { // 입력한 값이 서로 다를 때
    alert('비밀번호가 맞지 않습니다!');
    return;
  }
  alert('회원가입 성공!!'); 
});

4. 키 이벤트

예)

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

4-1. keydown

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

thisIsPw.addEventListener('keydown', function(event) {
//키보드를 눌렀을 때 
  thisIsCode.innerHTML = event.code; 
  // id="code"인 요소에 대해 event.code로 텍스트 내용을 바꾼다
  // .code: 입력된 키의 이름 정보
});

'Enter'키를 누르면 로그인 되는 이벤트:

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

송철진

검색하고 기록하며 학습하는 백엔드 개발자

이전 포스트

[공통]개발자도구_10.21~

다음 포스트