클래스와 아이디
.hahaha : 클래스 class : 그룹핑
#hoho : 아이디 id : 1개 식별자
hehe : 태그 tag
<span> : 해당 구문 묶음 *줄바꿈 x
<div> : 해당 구문 포함한 전체를 묶음 *줄바꿈 o
<form> : 내용을 서버에 제출
서브밋과 버튼
<input type ="submit"> : 버튼과 동일하게 사용, '폼'을 서버에 자동 제출함 (enter키 적용)
<input type = "button"> : 버튼을 생성하는 하나의 방법인데, 이도 마찬가지로 서버에 제출이 되는 형식임
<button> : 버튼 태그 사용으로 다양한 태그 기능 추가 가능, 서버에 제출되지 않는 형식임, form 안에 있다면 제출됨!
미션1. submit form으로 인해 화면이 리프레쉬되지 않도록 하기
1. 더이상 이벤트 리스너의 click 이벤트는 필요치 않다. submit 이벤트로 바꿔주자
- submit 이벤트가 발생할 때 function의 첫번째 arguement가 그 이벤트 정보를 알려줌
- 보통 function의 arguement에 event 라고 넣어주는 것이 관행임
2. 따라서 submit의 기본속성이 창을 reflesh 새로고침하는 것인데, 이를 하지 않도록 할 수 있음
.html
<form id="login-form">
<input
required
maxlength="20"
type="text"
placeholder="What is your name?"
/>
<input type="submit" value = "Log in">
</form>
<script src="app.js"></script>
html에 form내에 input type을 submit이라고 바꿔줬고,
.js
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function handleLoginSubmit(event){
event.prventDefault();
console.log(loginInput.value);
}
loginButton.addEventListener("submit", handleLoginSubmit);
js에서 login-form을 불러오도록 하며,
function의 argument에 event라 넣어주고, 그 이벤트에 무엇이 발생하면 그 때 발생하는 브라우저 기본 동작을 멈추도록 하는 것으로 event.preventDefault()를 넣어주어 기본설정인 reflesh를 실행하지 않도록 함
미션2. 로그인 버튼을 눌렀을 때, <로그인 폼>을 사라지게 만들기
이를 만들기 위해서는 .css에서 히든이라는 클래스를 하나 만들어 적용한 후, 이를 .js에서 form내부에 추가되도록 함
.css
.hidden{
display: none;
}
.js
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
function handleLoginSubmit(event){
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add("hidden");
console.log(username);
}
loginForm.addEventListener("submit", handleLoginSubmit);
event 라는 변수를 argument에 넣어주고, 이것에 무언가든 입력이 되면 기본설정값인 리프레쉬가 실행되지 않도록 한다.
css에 만들어놓은 hidden이라는 클래스를 form에 추가하여 감춰지도록 한다.
입력한 값은 콘솔에 표시되도록한다.
주의할 점은
1. 이벤트 리스너를 loginForm에 submit 형태로 붙여준다는 것
2. 함수의 매개변수에 무언가 입력되면 이라는 조건을 위와 같이 event라는 변수를 이용해서 관용적으로 작성한다는 것
3. form 태그안에 hidden 클래스를 추가해주는 형식으로 내용을 감출 수 있다는 것
미션3. 입력한 값이 화면에 출력되게 하기
1. html에서 출력할 값을 변수로 지정하고 js에서 불러오기
2. 출력할 문구를 작성하고 값을 보이게 안보이게 설정하기
.html
<h1 id = greeting class = "hidden"></h1>
id를 정해주고, class는 css에 있는 hidden을 추가해준 상태를 초기값으로 함
즉 인사말은 감춰져있다가, submit 후에 보여지도록 할 것임
.js
const greeting = document.querySelector("#greeting");
id = greeting을 불러와서 변수로 할당해주고
greeting.innerText = "Hello " + username;
greeting.classList.remove("hidden");
innerText로 문구를 작성한 후
hidden으로 설정되어있는 class 값을 삭제하여 인사말이 보이도록 해줌
즉, 처음에는 form이 보이고, greeting이 숨겨진 상태 < html에 초기 설정
함수가 실행되면 form이 감춰지고, greeting이 보여지는 상태 < js에서 함수안에 설정
이것을 만든 것임
function handleLoginSubmit(event){
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add("hidden");
greeting.innerText = "Hello " + username;
greeting.classList.remove("hidden");
}
.js파일을 정리해보자
1. 중복되는 hidden을 변수로 할당해서 교체
2. string 출력방식을 교체
const loginForm = document.querySelector("#login-form");
const loginInput = document.querySelector("#login-form input");
const greeting = document.querySelector("#greeting");
const HIDDEN_CLASSNAME = "hidden";
function handleLoginSubmit(event){
event.preventDefault();
const username = loginInput.value;
loginForm.classList.add(HIDDEN_CLASSNAME);
greeting.innerText = `Hello ${username}`;
greeting.classList.remove(HIDDEN_CLASSNAME);
}
loginForm.addEventListener("submit", handleLoginSubmit);
string의 조합 작성방식(동일한 표현, 후자가 최신 방식)
"Hello " + username
`Hello ${username}`
BR.h