What I did
- 바닐라 자바스크립트 #4.0~4.6 by. nomadcoder
- 코코아클론 챌린지 Day1
html : MarkUp Language
CSS : Design Language
JS : Programming Language
오늘의 한 걸음
⛳️ GOAL : Save a value(name) from user & say hi
1. input value
일단 유저네임 받을 input부터 생성
- html
<div id = login-form>
<input type = "text" placeholder = "type it here" >
<button> Log In </button>
</div>- js
const loginInput = document.queryselector("#login-form input")
const loginBtn = document.queryselecor("#login-form button")
function onClickBtn () {
console.log(loginInput.value)
}
loginBtn.addEventListener("click", onClickBtn);1.1 유효성 검사 with form
We can use input.value & if-else if to limit the length of name user writes or force to write value(in this case, name).
But form is way better than this.
- html
<form id = login-form>
<input
required
maxlength = "10"
type = "text"
placeholder = "type it here" >
<button> Log In </button>
</form>required, max/minlength already exist in the form so use it!
BUT it's automatically submit when user press btn or enter.
So,
- No need to function
click. - Rather than, keep information whenever
submit.
1.2 block default of event
div 대신
form활용(html 기본 속성 최대한 써먹기)하면서
Click Event에서Submit Event로 방향이 바뀜.
여기서 문제 :
submit에는refresh기능이 default로 존재.
그래서 값을 기껏 받았는데 쓸 수가 없음.
Actually, the one who presses function is JS not us. We just call the function, not press as we can see in a below code.
loginForm.addEventListener("submit", loginSubmit);
// cf. loginSubmit()When JS press function, it receives some information
if it has first parameter.
function loginSubmit(event) {
event.preventDefault();
console.log(event);
}
loginForm.addEventListener("submit", loginSubmit);- 코드 풀이
form에 submit 이벤트가 발생하면 loginSubmit이라는 function을 JS가 실행한다. (우리가 한 일은 JS에게 대신 실행해달라고 이름을 호출)
이때, loginSumbit은 event라는 첫번째 매개변수를 가지고 있다. 이는 form에서 발생한 submit 이벤트에 관한 정보를 담는 object.
submit의 default 기능인 refresh를 prevent하라.
- 다르게 표현하자면
event의 default 기능을 막고 싶을 때 :
function에 first parameter를 추가하여 그가 event에 관한 정보를 모두 갖게 하고, 그 정보 중에서 preventDefault를 실행하라.
1.3 change the screen (form hidden & h1 greeting)
Two ways
1) Delete html elements (form)
2) Use CSS
- CSS
.hidden {
display: none;
}- html
<h1 class="greeting"></h1>- JS
const loginForm = document.querySelector("#login-form");
const loginName = document.querySelector("#login-form input");
const greeting = document.querySelector("h1");
function loginSubmit(event) {
event.preventDefault();
//submit의 기본 기능(refresh) 막기
loginForm.classList.add("hidden");
//form에 "hidden" classname 추가
const username = loginName.value;
//유저가 input에 작성한 value 변수 지정
greeting.innerText = "hello " + username;
//작성한 username을 가져와 greeting
}
loginForm.addEventListener("submit", loginSubmit);
Tips
- Variable full of strings pratically name it
UPPERCASE.
const HIDDEN_CLASS = "hidden";- combined string with variable :
${variable name}
"hello " + username === `hello ${username}`1.4 Saving Value
Save value by using localstorage. Then browser remember the value and we can find it by console window.
localstorage.setItem("username", "une");
localstorage.getItem("username");
localstorage.removeItem("username");Question
<a>의 default는 특정 주소로 이동하는 것이라는데, 색이 바뀌면서 밑줄이 생기는 것도 default이지 않나? (1.2)
디자인은 CSS 파트라서 상호작용하는 JS와는 무관하기에 언급을 생략한 것 아닐까.
- 함수를 내가 직접 실행하면 preventDefault가 undefined된다. (1.2)
event라는 object가 아예 발생할 수 없어서구나. JS는 매개변수가 있어도 실행을 자신이 못하므로 event에 submit 정보 담는 행위를 할 수 없다.
loginForm.preventDefault();로 바꾸면?
form은 html 요소라서 JS에선 함수로 인식하지 못한다.
JS에게 실행권을 넘겨주더라도 위 경우엔 uncaught가 빠르게 떴다가 사라진다. submit 정보는 event라는 매개변수에 있다. form은 그저 form일 뿐 정보를 담는 등 기능을 하진 못하니까.
- 왜
username이function안에 들어가야 작동할까? (1.3)
const username = loginInput.value;
greeting.innerText = "hello " + username;username의 value는 submit 이벤트가 발생한 후에야 생긴다. 즉 function 이후의 일이므로, 그 안에 넣어줘야 제대로 변수로서 작동.
- 왜
h1에hiddenclass를 처음부터 넣었다가 function으로 없앨까?
<h1 class="greeting"></h1>입력 문구가 html에 없기에 위 코드처럼 hidden을 기입하지 않아도 문제 없이 구현은 된다. 그래서 gretting.classList.remove("hidden"); function 안 써도 되고..
classList.remove 연습 + string 변수명은 UPPERCASE란 걸 알려주기 위한 큰 그림인가.
뒷 강의 듣다가 알게 됨!
1) 유저 네임이 이미 존재하면 form을 지우고 h1만 보여주고
2) 유저 네임이 없으면(초기 화면 or storage에 없는 이름 작성) form을 보여주고 h1을 지운다.
결국 hidden이 된 상태에서 remove를 때에 맞춰 하기 위함이군..
What to do tomorrow
- 현재 4.6까지 들었는데 내일 6~7 다 듣고
TIL 작성 - 챌린지 제출
- OT 듣고 TIL에 추가
곁들이는 말
하고 싶은 게 있을 때 오히려 권한을 넘겨줌으로써 얻을 수 있다니 아이러니하다. 혼자 다 해먹으려 하면 종래엔 아무것도 할 수 없음을 코딩을 통해서도 배운다.
한 곳에서 배우기도 급급한데 이것저것 할 일이 참 많다.. 대중교통 이용하면서 책 읽기가 습관되어서인지 다른 것을 하려니 집중하기 어렵다. 대신 deep dive나 관련 도서 빌려다가 읽어야겠다.
오늘 강의 좀.. 재밌어서 당황. 왜 재밌지?
