1. input과 button 만들기
- input
- HTML에서 사용자로부터 데이터를 입력받기 위해 사용
- type : 입력받을 데이터 형태
text: 일반 텍스트 입력password: 비밀번호 입력 (입력된 텍스트가 마스킹됨)email: 이메일 주소 입력 (브라우저에서 이메일 형식인지 확인)number: 숫자 입력date: 날짜 입력checkbox: 체크박스radio: 라디오 버튼file: 파일 업로드submit: 폼 제출 버튼
- placeholder : 입력 필드가 비어 있을 때 표시되는 텍스트
- button
- 버튼을 만들 때 사용
- type : 버튼을 클릭했을 때 수행할 동작을 정의
button: 기본 버튼 (JavaScript로 동작을 정의)submit: 폼 제출 버튼 (폼의 데이터를 제출)reset: 폼 초기화 버튼 (폼의 모든 입력값을 초기 상태로 되돌림)
- index.html
- input과 button 추가하기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <input type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> <button>로그인</button><!--버튼--> <script src="app.js"></script> </body> </html>
- index.html
- className이나 id 추가하기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-form" id="login-form"> <input type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> <button>로그인</button><!--버튼--> <script src="app.js"></script> </div> </body> </html>
2. 요소 가져오기
- app.js
- div 내부를 정의해서 정의된 내부의 요소를 가져오기
const loginForm = document.getElementById("login-form"); // div 내부 가져오기 const loginInut = loginForm.querySelector("input"); // input 태그 가져오기 const loginButton = loginForm.querySelector("button"); // 버튼 가져오기
- 정의된 아이디와 요소를 이용해서 가져오기
const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const loginButton = document.querySelector("#login-form button"); // 버튼 가져오기
3. 클릭 이벤트 추가하기
- app.js
const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const loginButton = document.querySelector("#login-form button"); // 버튼 가져오기 function handleBtnClick() { console.log("클릭했어요"); } loginButton.addEventListener("click", handleBtnClick);
4. 입력받은 값 가져오기
- 저장되는 위치 확인하기
- app.js
const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const loginButton = document.querySelector("#login-form button"); // 버튼 가져오기 function handleBtnClick() { console.dir(loginInut); console.log("클릭했어요"); } loginButton.addEventListener("click", handleBtnClick);
- index.html의 value값 지정해보기
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-form" id="login-form"> <input value="이미 와봤어~" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> <button>로그인</button><!--버튼--> <script src="app.js"></script> </div> </body> </html>
- dir로 전체를 가져오는 것이 아니라 value 값만 가져오기
- app.js
const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const loginButton = document.querySelector("#login-form button"); // 버튼 가져오기 function handleBtnClick() { console.log(loginInut.value); console.log("클릭했어요"); } loginButton.addEventListener("click", handleBtnClick);
- 아무것도 입력 안 했을 때는 value 값이 비어있어 확인하는 작업이 필요함
5. 유효성 검사하기
- 입력 받은 값이 없을 때 알려주기
const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const loginButton = document.querySelector("#login-form button"); // 버튼 가져오기 function handleBtnClick() { const value = loginInut.value; if(value === ""){ console.log("이름을 입력해주세요~"); } } loginButton.addEventListener("click", handleBtnClick);
- 사용자가 볼 수 있게 창 띄우기
const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const loginButton = document.querySelector("#login-form button"); // 버튼 가져오기 function handleBtnClick() { const value = loginInut.value; if(value === ""){ alert("이름을 입력해주세요~"); } } loginButton.addEventListener("click", handleBtnClick);
- String의 길이 확인하기
- app.js
const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const loginButton = document.querySelector("#login-form button"); // 버튼 가져오기 function handleBtnClick() { const username = loginInut.value; if(username === ""){ alert("이름을 입력해주세요~"); } else if(username.length > 15){ // 이름(String)의 길이는 15자 이하여야 함 alert("이름이 너무 길어요ㅜㅠ") } } loginButton.addEventListener("click", handleBtnClick);
- 입력 받은 값 : 안녕 내 이름은 min이야 지금은 아침이야
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <div class="login-form" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> <button>로그인</button><!--버튼--> <script src="app.js"></script> </div> </body> </html>
- HTML 자체에서 기본적인 것은 제공해주지만 클릭 시 확인 작업을 안하고 있음
- 유효성 검사를 위해 form 태그를 사용해야 함
- form
- HTML에서 사용자가 입력한 데이터를 서버로 전송하기 위한 폼을 정의
- 폼 내부에
<input>,<textarea>,<select>등의 입력 요소를 포함하여 데이터를 수집 method속성을 통해 데이터를 서버로 전송하는 방식을 정의GET: 데이터를 URL의 쿼리 문자열로 전송 (기본값)POST: 데이터를 HTTP 요청의 본문(body)으로 전송action속성을 통해 데이터를 전송할 서버의 URL 지정- 버튼 없이 enter를 누르거나 click할 때 제출됨
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <form class="login-form" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> <button>로그인</button><!--버튼--> <script src="app.js"></script> </form> </body> </html>
const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const loginButton = document.querySelector("#login-form button"); // 버튼 가져오기 function handleBtnClick() { const username = loginInut.value; console.log(username); } loginButton.addEventListener("click", handleBtnClick);
<form>태그는 폼 데이터를 서버로 전송하는 역할- 폼을 제출할 때, 폼 데이터는 URL에 쿼리 문자열(query string) 형태로 붙어서 전송됩
- 기본적으로
form태그의method속성이GET으로 설정
- URL에
?가 붙고 그 뒤에 쿼리 문자열이 추가 - 각 입력 필드의 이름(name)과 값(value) 쌍으로 구성
- 각 필드의 쌍은
=로 연결되고, 여러 개의 필드 값은&로 구분
6. 새로고침 막기
- 새로고침 : form 태그 submit의 기본 동작
- 버튼 없이 값을 가져오기
const loginForm = document.querySelector("#login-form"); const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 function onLoginSubmit() { const username = loginInut.value; console.log(username); } loginForm.addEventListener("submit",onLoginSubmit);
- 브라우저가 onLoginSubmit function 호출 및 실행
- 브라우저 내에서 event로부터 정보를 받아서 onLoginSubmit function 실행 버튼을 누르고 있음
- app.js
const loginForm = document.querySelector("#login-form"); const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 function onLoginSubmit(hi) { hi.preventDefault(); // form 태그 submit의 기본 동작 막기 console.log(hi); } loginForm.addEventListener("submit",onLoginSubmit);
- 누군가 form을 submit하면 JS가 function을 호출
- JS가 argument로 발생한 일에 대해 우리가 필요할 만한 정보들을 제공
- 모든 EventListener function의 첫번째 argument는 지금 막 벌어진 일들에 대한 정보
- argument 자리 만들어주기
- app.js
const loginForm = document.querySelector("#login-form"); const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 function onLoginSubmit(event) { // 자리만 만들어주면 됨 event.preventDefault(); // form 태그 submit의 기본 동작(새로고침) 막기 console.log(loginInut.value); } loginForm.addEventListener("submit",onLoginSubmit);
7. Link 이동하기
- a 태그 이용하기
- index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="style.css"> </head> <body> <form class="login-form" id="login-form"> <input required maxlength="15" type="text" placeholder="What is your name?" /> <!--사용자로부터 값 입력받기--> </form> <a href="https://www.naver.com">Go to Naver</a> <script src="app.js"></script> </body> </html>
- 기본 설정 막아보기
- app.js
const loginForm = document.querySelector("#login-form"); const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const link = document.querySelector("a"); // a태그 가져오기 function handleLinkClick() { alert("클릭했어요!"); } link.addEventListener("click", handleLinkClick);
const loginForm = document.querySelector("#login-form"); const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const link = document.querySelector("a"); // a태그 가져오기 function handleLinkClick(event) { console.log(event); alert("클릭했어요!"); } link.addEventListener("click", handleLinkClick);
- 이동 자체를 막기
- app.js
const loginForm = document.querySelector("#login-form"); const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const link = document.querySelector("a"); // a태그 가져오기 function handleLinkClick(event) { event.preventDefault(); console.log(event); } link.addEventListener("click", handleLinkClick);
const loginForm = document.querySelector("#login-form"); const loginInut = document.querySelector("#login-form input"); // input 태그 가져오기 const link = document.querySelector("a"); // a태그 가져오기 function handleLinkClick(event) { event.preventDefault(); console.dir(event); } link.addEventListener("click", handleLinkClick);
Share article
