[TIL-44] 노마드코더 크롬앱(JS) 클론코딩 #4.0~#4.3

#4 로그인

 

input values

• input과 button 생성
  • 일단 html에 작성하고 js에서 가져와야함.
  • 이 앱에는 인풋과 버튼 많음. 구분을 위해 div로 묶어서 클래스나 id 추가해줌.
  • 요소 가져오기.
    • loginForm(div)를 정의하고 나면, 이 변수를 이용해서 그 안의 input과 button도 검색할 수 있음. loginForm은 HTML element이기 때문.
    • 혹은 loginForm 변수 없이 input과 button 각각을 쿼리셀렉터로 검색해서 정의.
• button 클릭 이벤트 발생 시, input의 값 출력
  • console.dir(loginInput)으로 확인해보면 값 property의 이름은 value.
  • 따라서 function {} 안에 console.log(loginInput.value); 쓰면 나옴.

 

form submission ~ events

• username 유효성 확인 : 제대로 입력되었을 때 클릭 가능하게 함.
  
  • if else 사용
    • function handleBtnClick() {
        const username = loginInput.value;
        if (username === "") {
          alert("Please write your name.");
        } else if (username.length > 15) {
          alert("Your name is too long.");
        } else {
          console.log(username);
        }
      }
    • 여러번 쓸 거니까 loginInput.value를 username 변수로 정의.
    • if - username이 공백이라면 경고창 띄움.
    • else if - username이 15자 초과면 경고창 띄움.
      • string의 길이를 구하는 방법 : ".length"
  • 하지만 input 자체 기능으로 필수 입력 설정, 글자수 제한 가능.
    • html에서 input에 required, maxlength="15" 추가.
    • input이 form 안에 있어야 기능 작동.
      • 하지만 form은 버튼을 클릭하면 submit하기 때문에 페이지를 새로고침시킴.
      • 심지어 버튼 클릭 아니라 input 입력 후 엔터 눌러도 submit됨.
    • 따라서 클릭에 신경쓸 필요 없음.
• form 제출하기
  • 목표 : submit할 때 브라우저가 새로고침하지 않고 username 정보를 저장해야 함.
    • submit 이벤트 발생을 막거나, 중간에 개입해서 새로고침을 막아야함.
    • form이 submit할 때 새로고침되는 건 디폴트 설정.
      
      • .preventDefault() : 어떤 함수에 대해 브라우저가 기본적으로 수행하는 동작 막음.
  • 사실은 addEventListener("이벤트", 함수)를 썼을 때, 이벤트가 발생하면 브라우저가 함수를 호출하는데, 알아서 js가 함수의 () 안에 첫번째 argument에 추가 정보를 가진 채 호출함.
    • 즉, 방금 실행된 event에 대한 정보. 이 object에는 방금 일어난 이벤트에 대한 정보들 담겨있음.
    • 함수 만들 때 () 비워두지만 JS가 알아서 채워줄 공간을 만들어준 것. 직접 채울 땐 보통 (event)라고 해줌.
    • function onLoginSubmit(event) {
        const username = loginInput.value;
        event.preventDefault();
        console.log(username);
      }
      loginForm.addEventListener("submit", onLoginSubmit);
  • [예제] 링크의 페이지 이동 막기
    • 클릭 이벤트 시 alert 뜨는 함수 실행
      • 확인 눌러서 경고창 닫을 때까지 브라우저가 멈춰있기 때문에 기본 동작이 실행되지 않음.
      • event 객체를 콘솔로그해서 확인해보면 "MouseEvent"라고 나오고, 클릭 위치를 x y 좌표로 알려줌.
    • const link = document.querySelector("a");
      function onLinkClick(event) {
        event.preventDefault();
      }
      link.addEventListener("click", onLinkClick);
      • preventDefault 때문에 페이지 이동 실행되지 않음.
      • console.dir(event) 해서 확인해보면 마우스이벤트의 x y 좌표와 timestamp, type(클릭) 등 있음. defaultPrevented는 true.