JavaScript

바닐라 JS) 11. 값 입력받기

송민경's avatar
송민경
Sep 02, 2024
바닐라 JS) 11. 값 입력받기
Contents

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>
      notion image
  • 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);
notion image
 

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);
    • input에서 입력받은 값은 value에 저장된 것을 확인
      • notion image
       
      notion image
  • 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>
      notion image
  • 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);
      notion image
  • 아무것도 입력 안 했을 때는 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);
notion image
  • 사용자가 볼 수 있게 창 띄우기
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);
notion image
  • String의 길이 확인하기
notion image
  • 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이야 지금은 아침이야
notion image
  • 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>
      • app.js
        • 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);
      • 아무 값도 입력하지 않았을 때
        • notion image
      • 15자 이상 입력 할 수 없음
        • notion image
    • 폼 데이터 제출 방식 (GET 메서드)
      • <form> 태그는 폼 데이터를 서버로 전송하는 역할
      • 폼을 제출할 때, 폼 데이터는 URL에 쿼리 문자열(query string) 형태로 붙어서 전송됩
      • 기본적으로 form 태그의 method 속성이 GET으로 설정
    • 쿼리 문자열 형식
      • URL에 ?가 붙고 그 뒤에 쿼리 문자열이 추가
      • 각 입력 필드의 이름(name)과 값(value) 쌍으로 구성
      • 각 필드의 쌍은 =로 연결되고, 여러 개의 필드 값은 &로 구분
      notion image
 

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);
    • 지금 막 벌어진 일들에 대한 정보
      • notion image
    • argument로 onLoginSubmit function에 대한 정보를 얻고 있음
      • 누군가 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);
      notion image
 
  • 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>
    • 클릭시 다른 페이지로 이동하는 것이 기본 설정
      • notion image
      notion image
  • 기본 설정 막아보기
    • 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);
      notion image
    • 확인을 누르면 이동 됨
      • notion image
      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);
    • PointerEvent나 MouseEvent 발생
      • notion image
  • 이동 자체를 막기
    • 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);
      notion image
    • 내부 확인하기
      • 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);
      notion image
 
Share article

More articles

See more posts

바닐라 JS) 13. local Storage에 저장하기

송민경's avatar
September 2, 2024
바닐라 JS) 13. local Storage에 저장하기

바닐라 JS) 12. 입력받은 값 가져오기

송민경's avatar
September 2, 2024
바닐라 JS) 12. 입력받은 값 가져오기

바닐라 JS) 10. CSS

송민경's avatar
September 1, 2024
바닐라 JS) 10. CSS

바닐라 JS) 9. Event Listner

송민경's avatar
September 1, 2024
바닐라 JS) 9. Event Listner
RSSPowered by inblog