4.0~4.7

4. LOGIN

4.0 Input Values

사용자 입력값 가져오기_input value

▶️ 로그인 작업을 하려면 사용자가 입력한 값을JS로 가져오는 것부터
▶️ 버튼을 눌렀을때 입력값을 가져오기 위해 버튼에 click 이벤트를 설정
▶️ input 태그의 값을 가져오려면 value

Tip!

const loginForm = document.querySelector("#login-form")
const button = loginForm.querySelector("button")    
// 위아래의 결과는 같음
const button = document.querySelector("#login-form button")

---

4.1 Form Submission

Jn에서 구현을 할 수 있지만 될수 있으면 HTML의 기본 속성을 최대한 활용

사용자 입력값을 받아온 후

▶️if else if else를 통해 입력값의 상황에 따른 결과를 다르게 설정 가능.

• 하지만 조건문 보다는 input 태그 자체에 maxlength="15"등의 조건을 required 속성과 함께 넣어주는것 추천

▶️사용자입력값 submit

• input의 유효성 검사를 위해 꼭 <form></form> 안에서 작성할 것.
  • button type submit type상관없이 엔터를 치면 작성된 form이 submit됨. 유효성을 검사하기위해서는 꼭!! submit type 을 이용
  • submit 될 때마다 브라우저가 새로고침이 된다.

---

4.2 Events

form 이 submit 될때 브라우저가 새로고침 되지 않게 설정

▶️ form 에서 submit 되면 브라우저에 저장되어 있는 기본 설정에 의해 새로고침된다.

• 이를 방지하기 위해 함수에 preventDefault()를 추가

  const loginInput = document.querySelector('#login-form input')
  function onLoginSubmit(event){
    event.preventDefault();   // 
    console.log(loginInput.value)}
   loginForm.addEventlistener('submit',onLoginSubmit)

preventDefault() : 브라우저의 기본설정을 없애준다.

---

4.3 Events part Two

preventDefault()

▶️브라우저의 기본설정들을 막아준다.

• addEventListener안에 있는 함수는 JS가 직접 실행하지 않고 브라우저가 대신 실행.

• 브라우저가 해당이벤트에 대한 정보(object)를 가지게 되며 함수에 object가 들어갈 자리를 할당해 주면 함수를 실행시켰을때 모든 object 를 볼 수 있다.

• 해당 이벤트가 가진 기본 Default값을 발생시키지 않기 하게 위해서 preventDefault를 사용

  
  

  ---

  
  

4.4 Getting Username

User name 가져오기 / form 없애기 + 보이기

▶️ 사용자가 값을 입력하고 submit 한 후에 form 이 사라지게 한다.

• CSS로 class 속성 display:none을 지정후, classList.add('class명')으로 추가.

▶️ 사용자가 입력한 값을 변수에 담아준다.

▶️ 받은 값을 HTML로 다시 보내, 화면에 나타나게 한다.

1. html태그에 아이디를 추가
2. JS 로 태그가져와 변수에 담아주기
3. 변수.innerText = ''로 화면에 표시하기.
   - html 에 들어갈 텍스트 표기법
   : `hello ${변수이름} nice to meet you ` => 무조건 백틱
   ('hello!' + username + nice to meet you!; 와 같음)

▶️ 없어진 form을 다시 나타나게한다

• classList.remove(class명)을 추가.

---

4.5 ~ 4.6 Loading Username

저장되어 있던 username가져오기

▶️ local storage에 저장된 값이 있다면, login form을 다시 보여주지 않고 바로 저장되어 있던 문구를 보여주고 그렇지 않다면 login form을 보여주어 username을 입력받아 값을 저장한다

• localStorage.setItem("key","value") : 값을 저장
• localStorage.getItem("key") : 값을 불러옴
• localStorage.removeItem("key") : 데이터 삭제
  

---

(코드챌린지) 풀고 제출완료

헷갈렸던 부분들

1. <form>안에서 버튼을 눌렀을때, 함수가 실행되게 하려면
   addeventlister button 이 아닌 form 자체에 'submit'event wjrdyd.

2. 백틱을 사용하면 굳이 + 해주지 않아도 문자열을 합칠수 있음
   예 ) `You chose : ${secNum}, the machine chose : ${randomNum} `

3. event.preventDefault()를 사용하여 브라우저에 기본 내장되어있는 기능들을 제거할 수 있다.
   예)
   - a 링크를 클릭하면 링크로 바로 이동되지 않고 href로 console에 저장.
   - form에 submit되면 브라우저가 새로고침되지 않고 값을 저장.

4. 콜백함수들을 만들어두고 모든 과정들을 메인함수에 모두 연결시키는것이 보기 좋음.