1. form 의 기본 동작은 submit 이다. 2. 링크의 기본동작은 클릭시 다른 페이지로 이동하는것. 3. preventDefault가 콜백함수를 멈추는 것이 아니라 발생한 해당 이벤트를 작동하지 않도록 하는 것
* 이벤트 작동원리? JS 링크를 클릭시! handleLinkClick 함수가 실행되게 만들었다.
함수실행은 우리가 하는게 아니라 js 즉 브라우저 가 하는일임.
만약 link.addEventListener("click",handleLinkClick) 를 link.addEventListener("click",handleLinkClick()) 로 바꾸면 이 함수는 한번만 실행되고 그걸로 끝이다.
JS / HTML
1. 변수 loginForm 에 할당해줄거야. 무엇을? =>document(기능: HTML 에 있는). querySelector (기능: 요소 선택 해줌) 아이디 login-form 에 있는 모든것을!!
2. 변수 loginInput 에 할당해줄거야. 무엇을? => 1번줄에서 만든 loginForm 변수에 querySelector(기능: 요소 선택) 을 이용하여, 아이디 login-form 에 속한 input 이하 요소 모든것을 loginInput에 저장
3. 변수 link 에 할당해줄거야. 무엇을? => document(html 문서에 있는) querySelector(기능: 요소 선택) 을 이용하여, 요소 a 를
4. 변수 greeting 에 할당해줄거야. 무엇을? => document(html 문서에 있는) querySelector(기능: 요소 선택) 을 이용하여, 아이디 greeting 인 요소 모든 것저장.
5. 변수 hidden_classname 에 html에 있는 클래스 hidden 부분을 꾸며주는 CSS에 있는 "hidden" 을 저장. * 아래 css 사진 참조.
7. 함수 onLoginSubit 에 인수 event { 8. event.preventDefault ( event 의 기본값을 막아주는 기능) 9. loginForm. classList.add("hidden") 로그인폼에다 클래스이름에 hidden 추가는 (css 에 있는 hidden 기능을 추가함: css에 보면 화면에 아무것도 나타내지 않게 함)
10. 변수username 에 할당해줄거야. 무엇을? =>변수 loginInput <이 변수는 2번줄의 변수! 참고> 에 입력된 value값을 저장함
12. greeting 변수에(*3번줄 참고) innerText(기능: 스트링값 추가) hello ${변수 username *10번줄 참고} 13. greeting 변수에(*3번줄 참고) hidden (css에 있는 화면에 아무것도 안보이게 하는거)를 제거함.
17. loginForm 에 submit 이벤트. submit(제출) 하는순간 함수 onLoginSubmit 가 실행됨. 18. 지워도 상관없음.
CSS
1. html에 있는 클래스 이름이 hidden 을 꾸며줌. 2. 기능은 화면에 아무것도 나타내지 않게 함
