[TIL-116] 위코드 15일차: 위스타그램 - 로그인 페이지

HTML

 

<img alt=" " />

개념

<img> 태그에는 alt 속성이 있는데, 이미지가 로딩되지 않을 때 alt에 적어둔 값이 표시된다. 시각장애인의 경우 alt의 내용을 통해 이미지가 어떤 것인지 알 수 있다. 따라서 alt가 매우 중요하므로 src보다 먼저 작성한다.

 

 

Javascript

 

삼항 조건 연산자

개념

조건부 삼항 연산자는 세 개의 피연산자를 취할 수 있는 유일한 연산자이다. ?(물음표)와 :(콜론)을 사용하여, 조건문 ? 참일 때 : 거짓일 때 의 형태로 작성한다. 조건을 제시하고 이 조건이 참일 때, 거짓일 때 실행할 코드를 뒤이어 씀으로써, if를 사용한 조건문을 줄여서 쓸 수 있다.

 

사용법

function inactiveBtn() {
  btnLogin.style.backgroundColor = "#c5e1fb";
  btnLogin.disabled = true;
}

function activeBtn() {
  btnLogin.style.backgroundColor = "#0084ff";
  btnLogin.disabled = false;
}

window.addEventListener("keyup", () => {
  inputId.value && inputPw.value ? activeBtn() : inactiveBtn();
});

inputId와 inputPw에 모두 값이 있을 때 activeBtn() 함수를 실행하고, 그렇지 않을 때 inactiveBtn() 함수를 실행한다.

 

 

keydown 이벤트

개념

키보드 입력에 관한 이벤트는 어떤 키든 누를 때 발생하는 keydown, 키를 눌렀다가 떼는 순간 발생하는 keyup, 값이 있는 키를 눌러 입력될 때 발생하는 keypress가 있다.

 

오답노트

function activeBtn() {
  if (!inputId.value || !inputPw.value) {
    btnLogin.style.backgroundColor = "#c5e1fb";
  } else {
    btnLogin.style.backgroundColor = "#0084ff";
  }
}

window.addEventListener("keyup", activeBtn);

input의 값이 있는지 확인하는 함수를 실행할 때 keydown 이벤트를 감지하면, keydown 이벤트가 일어났을 때 input에 아직 입력이 완료되지 않은 시점이기 때문에 해당 함수 실행 결과 값이 없는 것으로 확인된다. 따라서 keydown 대신 keyup 이벤트를 사용해야 한다.

 

 

<button disabled>

개념

<button> 태그에 disabled 속성을 주면 비활성화된다. 자바스크립트에서 비활성화된 버튼을 활성화로 바꾸고 싶을 땐, btn.disabled = false; 하면 된다. 다시 비활성화로 할 때는 true로 값을 바꾸면 된다.

 

 

---

 

오답노트

const inputId = document.querySelector("#loginId");
const inputPw = document.querySelector("#loginPassword");
const btnLogin = document.querySelector("#loginButton");

function activeBtn() {
  if (!inputId.value || !inputPw.value) {
    btnLogin.style.backgroundColor = "#c5e1fb";
    btnLogin.disabled = true;
  } else {
    btnLogin.style.backgroundColor = "#0084ff";
    btnLogin.disabled = false;
  }
}

btnLogin.addEventListener("keyup", activeBtn);

함수는 맞게 썼지만 keyup 이벤트리스너를 버튼에 붙였다. <button> 태그는 키 이벤트가 일어날 수 없으므로 해당 이벤트리스너가 작동할 수 없다. 키 이벤트를 감지할 수 있는 window나 input에 붙여야 한다.

 

 

오답노트

const inputId = document.getElementsByClassName("loginId");
const inputPw = document.getElementsByClassName("loginPassword");
const btnLogin = document.body.querySelector("#loginButton");

function activeBtn() {
  if (!inputId.value || !inputPw.value) {
    btnLogin.style.backgroundColor = "#c5e1fb";
    btnLogin.disabled = true;
  } else {
    btnLogin.style.backgroundColor = "#0084ff";
    btnLogin.disabled = false;
  }
}

window.addEventListener("keyup", activeBtn);

• getElementsByClassName : 해당되는 모든 태그를 가져오기 때문에 해당 클래스명이 한 개라도 HTML Collection이 반환된다. 따라서 1,2번째 줄에서 [index]를 붙여주어야 변수에 특정한 태그가 할당된다.
• document.body.querySelector : DOM을 사용하여 자바스크립트에서 html의 요소에 접근할 때, html 문서를 나타내는 document 객체에서 곧바로 querySelecotr나 getElementsByClassName, getElementById 등의 메서드를 사용해야 한다. document 하위에 body가 있고 그 안에 불러오고 싶은 요소들이 있지만 body를 끼워넣으면 안 된다.