inblog logo
|
vosw1
    Script

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

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

    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
     

    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>
      • 클릭시 다른 페이지로 이동하는 것이 기본 설정
        • 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

    vosw1

    RSS·Powered by Inblog