6일은 추가 진도 없이 퀴즈만,
그리고 일요일은 휴일이었습니다.
드디어 2주차 진입!
2주차 첫 번째 Assignment는 월요일, 화요일 이틀에 걸쳐 진행한다.
4.0에서 4.7을 듣고 제출하기.
🗓 진행일: 3월 14일
📎 4.0 ~ 4.4 (오늘은)
4.0 Input Values
- 로그인 기능을 '정말' 간단하게 지원하기!
- input에 기입한 이름 값을 가져오기
app.js
const loginInput = document.querySelector("#login-form input");
const loginButton = document.querySelector("#login-form button");
function handleLoginBtnClick() {
console.log(loginInput.value);
}
loginButton.addEventListener("click", handleLoginBtnClick);index.html
<body>
<div id="login-form">
<input type="text" placeholder="What is your name?" />
<button>Log In</button>
</div>
<script src="app.js"></script>
</body>4.1 Form Submission
- form은 submit을 하는 순간 창을 reload 시켜버림
- 굳이 버튼을 클릭으로 받지 않아도 엔터를 누르면 'submit'을 한다
- 입력하는 값에 제한을 두고 싶다면?
--> input에 maxlength, required 등의 값을 준다
index.html
<body>
<!-- 코코아톡 클론 강의 안 들었는데 알지... form으로 하면 submti을 해서, 페이지를 재시작 한다 -->
<!-- form이 submit 하니까 굳이 click 이벤트를 생각할 필요가 없대 -->
<form id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?" />
<button>Log In</button>
</div>
<script src="app.js"></script>
</body>4.2 Events
- ‘브라우저'는 form에서 엔터를 치거나 submit 타입의 input 혹은 버튼을 클릭할 때,
웹 페이지를 재실행 하도록 되어있어 (기본 동작이야) - submit 이벤트가 발생하면 onLoginSubmit function을 실행해줘
근데 알고보니 니콜라스가 거짓말쟁이여서...(?) 브라우저가 onLoginSubmit()을 이렇게 하는 게 아니라,
브라우저가 onLoginSubmit을 미리 호출하고 실행을 하긴 하는데 나한테 어떤 정보를 준대 - 첫 번째 인수로 어떤 정보를 받고 있대, 그 정보에서 제공하는 함수로
브라우저의 기본 동작을 막을 수 있다는 거야
app.js
function onLoginSubmit(event) {
event.preventDefault(); // 어떤 event의 기본 행동이든지 발생되지 않도록 막기
}4.3 Events part Two
a태그를 클릭해서 mouseEvent가 발생하게 된다는데,
나는 왜 PointerEvent가 발생하는 걸까...
index.html
<body>
<script src="app.js"></script>
</body>app.js
const link = document.querySelector("a");
function handleLinkClick(event) {
event.preventDefault();
console.dir(event);
}
link.addEventListener("click", handleLinkClick);4.4 Getting Username
이름을 입력 받았을 때 form을 없애고 싶다면?
우선, 안 보이게 처리해주는 내용을 css에 추가하기
style.css
.hidden {
display: none;
}index.html
<body>
<form id="login-form">
<input required maxlength="15" type="text" placeholder="What is your name?" />
<button>Log In</button>
</form>
<h1 id="greeting" class="hidden"></h1>
<script src="app.js"></script>
</body>이름을 넣고, 클래스 리스트에 css에 만들었던 클래스 넣어주기
app.js
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden"; // string만 포함된 변수는 대문자로 표기
function onLoginSubmit(event) {
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME); // form
greeting.innerText = `Hello ${username}`; // 백틱
greeting.classList.remove(HIDDEN_CLASSNAME);
}
자존감은 일상의 성실함으로부터 온다