[JavaScript] Login창 만들기

✔️ 원하는 바

- Login 창 만들기

- input에 text를 넣고, button 클릭 시 text 내용을 submit하기

- submit한 후 저장소에 저장이 돼있다면 새로 입력하지 않아도 동기화될 수 있게 하기

- header 더블클릭 시 이름 수정 가능하게 하기

 

---

▪️ input의 값은 value로 확인 가능

▪️ input에 값을 넣지 않았을 경우 어떻게 할 것인가? + 값(userName)이 너무 길 경우는?

• Js에서 if-else로 처리해주기 ⇨ str.length : 길이 확인 메소드 ✡︎ ==, === 구분하기!
• HTML에 이미 있는 속성 활용하기 ⇨ input Tag의 required, max/minlength 등
  • 하지만, input의 유효성 검사를 하기 위해선 input Tag가 form의 하위태그에 있어야 한다.
  • 또한 이런 기능을 활용하려면, button Tag에서 type = 'button'이 아닌 기본값인 'submit'이어야 required, min/maxlength alert창이 뜬다. 
    • JS의 발달로 submit 이외 용도의 button이 필요해 type='button'이 존재하게 되었다.

▪️ form이 submit되면 자동으로 페이지가 새로고침된다. 그렇다면 form을 어떻게 submit할까?

• form을 submit하면 새로고침되는 것은 default이다.
• addEventListener에 들어가는 함수는, argument로 event를 제공해준다. 관행적으로 function funcName(event){}로 쓰고 event에 대한 정보가 필요없다면, argument로 받지 않아도 된다
• event 종류는 다양하고, 종류에 따라 다른 정보를 제공한다.
  • 'click' ⇨ PointerEvent
  • 'submit' ⇨ SubmitEvent
• 따라서, event.preventDefault() 로 event의 default값을 차단할 수 있다. 
  • submit의 경우 - 새로고침 X
  • link의 경우 - 이동 X 등 .

▪️ 특정 요소를 숨기고 싶다면? ⇨ CSS에서 display : none 으로 지정해주기

 

const userForm = document.querySelector('#userform')
const userInput = userForm.querySelector('input')
const h1 = document.querySelector('h1')

// Submitting the login form
function submituser(event){
    event.preventDefault()
    const userValue = userInput.value;
    formMade(userValue)
    localStorage.setItem('username',userValue)
}

// Hide a form & Show the greeting
function formMade(username){
    userForm.classList.add('hidden')
    h1.innerHTML = `Hello, ${username}`
    h1.classList.remove('hidden')
}

// When there is no saved username, call the form. Else, just show the header
const userSaved = localStorage.getItem('username')

if (userSaved === null){
    userForm.addEventListener('submit',submituser)
} else {
    formMade(userSaved)
}

// Rename a username when the header is doubleclicked
function userRename(){
    h1.classList.add('hidden')
    userForm.classList.remove('hidden')
    userForm.addEventListener('submit',submituser)
}

h1.addEventListener('dblclick',userRename)

 

 

✔️ 배운 함수/문법

• event.preventDefault() : event의 default값을 차단https://developer.mozilla.org/ko/docs/Web/API/Event/preventDefault
• localStorage : 브라우저에서 제공해주는 저장소 https://developer.mozilla.org/ko/docs/Web/API/Window/localStorage 
  • localStorage.setItem(name,value) 
  • localStorage.getItem(name)
  • localStorage.removeItem(name)
  • localStorage.clear() : 모든 저장값 제거
• string안에 변수 넣기 ⇨ backtick(`) 활용! ex) `Hello, my name is ${name}` (파이썬 f-string과 유사)
• str.length: 문자열의 길이를 구하는 함수 ⇨ 문자열 이외에 array, function(필요한 argument개수) length도 구할 수 있다. https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/length
• typeof(operand) : type확인 함수 https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/typeof