영벨롭 개발 일지

[JavaScript]Form에 이름을 입력 한 뒤, 웹 페이지에 표시하기 본문

Programming Language/JavaScript

[JavaScript]Form에 이름을 입력 한 뒤, 웹 페이지에 표시하기

영벨롭 2022. 3. 17. 16:20

 오늘은 form 에 이름을 입력하고 나면 웹 페이지에서 form 은 사라지고 Hello 이름이 표시되는 과정을 공부하겠습니다. 코드를 작성하고 나서 웹 페이지에 다음과 같이 나타나면 성공입니다!

<입력 전>
<입력 후>

 

1. HTML, CSS, JS 파일 만들고 연결하기

 

 우선 각 파일들을 생성하고 연결해야겠죠? index.html, app.js, style.css 파일을 만들고 연결하겠습니다. 

<!DOCTYPE html>
<html lang="ko">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Momentum</title>
    <link rel="stylesheet" href="./style.css">  <!--css 파일-->
</head>

<body>

    <script src="./app.js"></script> <!--js 파일-->
</body>

</html>

 

 

2. HTML 작성하기 

 

 <form> 부터 작성할까요? id는 login-form 으로 하겠습니다. 

 

 "text" 타입의 <input> 태그를 작성할 건데 속성으로 최대 길이 15, 필수 입력, 안내 문구 What is your name?을 설정하겠습니다. 

 입력란이 있으면 서버로 제출할 수 있는 버튼도 있어야 겠죠? Log In 이름의 버튼도 같이 만들어 줍니다. 

<body>
    <form id="login-form">
        <input type="text" maxlength="15" required placeholder="What is your name?">
        <input type="submit" value="Log In">
    </form>
    <script src="./app.js"></script> 
</body>

 

 다음으로 Hello 이름 을 나타낼 수 있도록 <h1> 태그도 추가하겠습니다. id는 greeting으로 할게요.

<body>
    <form id="login-form">
        <input type="text" maxlength="15" required placeholder="What is your name?">
        <input type="submit" value="Log In">
    </form>
    <h1 id="greeting"></h1>   <!-- new -->
    <script src="./app.js"></script> 
</body>

잘 만들어졌네요!

 

 

 

2. CSS 작성하기

 

 우리의 목표는 이름을 입력하기 전엔 form 만 보이고, 입력하고 난 후엔 Hello 이름만 보이게 하는 것입니다.

 

 때문에 상황에 따라 form 또는 h1 태그를 가려야겠죠?

 

 클래스 이름을 hidden 으로 지정하여 클래스 이름이 hidden 이라면 웹 페이지에 표시하지 않도록 작성할게요.

 

.hidden { /*클래스 이름*/
    /*요소 숨기기*/
    display: none;
}

 

 

3. JS 작성하기

 

 먼저 우리가 조작해야할 요소 객체들을 가져올게요.

const loginForm = document.getElementById("login-form");
const loginInput = loginForm.querySelector("input");
const greeting = document.querySelector("h1");

console.log(loginForm);
console.log(loginInput);
console.log(greeting);

 개발자 도구에서 확인하니 잘 가져왔네요!

 

 이제 index.html 로 다시 돌아가 <form>과 <h1> 에 hidden 클래스를 추가할게요. 

<body>
    <form id="login-form" class="hidden"> 
        <input required maxlength="15"
         type="text" placeholder="What is your name?">
         <input type="submit" value="Log In">
    </form>
    <h1 id="greeting" class="hidden"></h1>
    <script src="./app.js"></script> 
</body>

 

 본격적으로 event를 추가해보겠습니다. form에 이름을 입력하고 제출하면 form을 웹 페이지에서 숨긴 뒤 localStorage에 이름을 추가하고 greeting을 웹 페이지에 표시해야합니다.

 

function onLoginSubmit(event) {
    event.preventDefault(); //브라우저가 기본 동작을 실행하지 못하게 막기
	
    //form 숨기기
    loginForm.classList.add("hidden");
    const username = loginInput.value;

	//localStorage에 이름 추가
    localStorage.setItem("username", username);

	//greeting 표시 
    paintGreetings(username);
}

function paintGreetings(username){
	//greeting 나타내기
    greeting.classList.remove("hidden");
    //텍스트 추가
    greeting.innerText = "Hello " + username;
}

 

 이 함수들을 어떻게 사용해야 할까요?

 

 만약 localStorage에 "username" 키 값이 있다면 greeting을 나타내면 될 것이고, 그렇지 않다면 form 을 나타내면 되겠죠!

 

const savedUsername = localStorage.getItem("username");

if (savedUsername === null) {
    //show the form
    loginForm.classList.remove("hidden");
    loginForm.addEventListener("submit", onLoginSubmit);
} else {
    //show the greetings
    paintGreetings(savedUsername);
}

 

 여기까지 작성하시면 기능도 정상적으로 작동하교 local storage에 username 값도 잘 들어가있는 것을 확인하실 수 있습니다. 

 

반응형
저작자표시 비영리 변경금지

'Programming Language > JavaScript' 카테고리의 다른 글

[JavaScript]Math 객체 다루기: min, max, random, round, ceil, floor  (0) 2022.03.20
[JavaScript]Date 객체, setInterval, setTimeout: 시간 나타내기  (0) 2022.03.20
[JavaScript]실행환경, 개발자 도구, 변수 호이스팅  (0) 2022.03.17
[JavaScript]자바스크립트의 데이터 타입 Data Type  (0) 2022.03.15
[JavaScript]자바스크립트란? - 자바스크립트 들어가기  (0) 2022.02.24
'Programming Language/JavaScript' Related Articles more