얼레벌레
[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
'JavaScript > Chrome - NomadCoder' 카테고리의 다른 글
[JavaScript] Quote, Background 만들기 (0) | 2022.02.20 |
---|---|
[JavaScript] Clock 만들기 (0) | 2022.02.20 |
Comments