9강 / 폼만들며 배워보는 if else

<form> 만들기

form이란?

HTML의 Form (이하 폼) 은 정보를 제출하기 위한 문서 구획을 나타낸다.
더 자세하게 알아보려면 아래 사이트를 참고해서 알아보자!
form

모달창 안에 아래 코드를 집어넣어 form을 만들어보자.

<form action="success.html">
  <div class="my-3">
    <input type="text" class="form-control">
   </div>
   <div class="my-3">
     <input type="password" class="form-control">
   </div>
   <button type="submit" class="btn btn-primary">전송</button>
   <button type="button" class="btn btn-danger" id="close">닫기</button>
</form>

닫기 버튼을 폼 안에 집어넣었다.

이렇게 되면 모달창 전체 코드와 결과는 아래와 같다.

<button class="modal-btn">모달창 버튼</button>
<div class="black-bg">
  <div class="white-bg">
    <h4>로그인하세요</h4>
    <form action="success.html">
      <div class="my-3">
        <input type="text" class="form-control" id="modal-id" />
      </div>
      <div class="my-3">
        <input type="password" class="form-control" id="modal-password" />
      </div>
      <button type="submit" class="btn btn-primary">전송</button>
      <button type="button" class="btn btn-danger" id="close">닫기</button>
    </form>
  </div>
</div>

결과

현재 위 form은 전송 버튼을 누르면 success.html로 넘어가도록 해놓았다.
그렇기 때문에 같은 폴더 안에 success.html파일을 만들어 놓아야한다.

위 처럼 같은 폴더 안에 success.html를 만들어주고 안에는 아무 내용을 입력해 놓았다.
제대로 success.html로 이동되는지 전송버튼을 눌러 확인해보자.

제대로 success.html로 이동 되는 것을 볼 수 있다!

이제 우리가 할 것은 여기에 조건을 넣는 것이다.
현재 <input>에 아무것도 입력을 하지 않아도 success.html로 넘어간다. 우리가 처음으로 할 것은 <input>에 입력한 값이 아무것도 없으면 전송버튼 누를 때 알림을 띄워보는 것이다.

그러면 JS로 아래와 같은 조건을 입력해야한다.

전송버튼누르면
<input>에 입력된 값이 공백이면 알림띄워주세요

위와 같은 방식으로 코드를 짜면 되는데 이러한 조건을 입력해야 하는 경우에는 자바스크립트 if 문법쓰면 된다!

---

문법수업 : if else 조건문

조건부로 코드를 실행하고 싶으면 if 문법을 쓰면 된다.

if (조건식){
  조건식이 참일 때 실행될 코드
}

이렇게 적으면 된다.
조건식이 참일 때 중괄호 안에 있는 코드를 실행해준다.

예시를 봐보자

if (3 > 1){
  console.log('안녕')
}

3은 1보다 크기 때문에 참이다 그렇기 때문에 콘솔창에 '안녕'이라는 문구가 나오는 것을 볼 수 있다.
조건식란엔 대부분 비교연산자가 들어간다.
비교연산자

"조건식이 참이 아니면 이거 실행해주세요~" 라고 코드 짜고 싶으면
else 조건문 쓰면 된다. (if 뒤에만 붙일 수 있다!)

예시를 살펴보자

if (3 < 1){
  console.log('안녕')
} else {
  console.log('안녕2')
}

위의 코드 같은경우 3은 1보다 크기 때문에 거짓이다 그렇기 때문에 '안녕2'라는 문구가 콘솔창에 나오는 것을 알 수 있다.

---

간편한 alert 함수

간단한 알림팝업 띄우고 싶으면
alert('문구') 쓰면 된다.

alert 알림은 이런 화면으로 사용자에게 간단한 안내문을 간편하게 띄울 수 있다.
이걸 이용해서 오늘의 숙제를 해보자.

---

숙제

전송버튼 클릭시 첫째 <input>에 입력된 값이 공백이면 아이디 입력하라고 알림을 띄워봅시다.

입력한 값이 공백인지 어떻게 알 수 있을까?
자바스크립트 쓰면 html 내의 모든걸 찾고 조작할 수 있다고 했던 기억이 있다.
<input>에 입력한 값 찾는 법도 있지 않을까 검색해보자.

검색을 해보니 <input>의 속성에 value라는 속성을 이용해 <input>에 입력한 값을 찾을 수 있다고 한다.
실험을 해보자

<input> & 전송 버튼 요소 가져와 변수로 지정

const formIdInput = document.querySelector("#modal-id");
const formPassWordInput = document.querySelector("#modal-password");
const submitBtn = document.querySelector(".btn-primary");

id를 사용한 이유

전송 버튼에 이벤트 리스너 부착

submitBtn.addEventListener("click", showInput);

input창에 입력한 문구들이 콘솔에 나타나는 showInput함수 생성

function showInput() {
  console.log(formIdInput.value);
  console.log(formPassWordInput.value);
}

<input>창에 입력한 후 전송버튼을 눌러보니 <input>창에 입력한 문구들이 콘솔에 나오는 것을 볼 수 있다.

input에 입력한 값을 가져오는 방법을 알았으니 한번 숙제를 마무리 해보자

showInput함수를 <input>에 입력된 값이 공백이면 아이디 입력하라고 알림을 띄우는 checkInput함수로 변경

function checkInput() {
  if (formIdInput.value == "") {
    alert("아이디를 입력하세요");
  }
}

조건식으로는 modalIdInput의 값이 공백이라면
참이면 "아이디를 입력하세요"라는 문구알림이 나오고
거짓이라면 success.html로 넘어간다.

결과를 살펴보자

---

10강 공백검사 숙제와 else if 문법

폼 전송 막는 법

이벤트리스너 콜백함수에 e라는 파라미터 추가해주고
e.preventDefault() 라고 쓰면 폼전송이 안된다.
더 자세한건 아래 사이트를 참고하자
event.preventDefault()

그렇다면 이전에 했던 숙제에 checkInput함수를 어떻게 고칠 수 있을까?

function checkInput(event) {
  if (formIdInput.value == "") {
    event.preventDefault();
    alert("아이디를 입력하세요");
  }
}

위와 같이 바꾸 수 있을 것 같다.

---

else if 문법

else if 라는 키워드도 있다.
if문 뒤에 몇번이고 원하는 만큼 붙일 수 있다.

예시를 봐보자

if (1 == 3) {
  console.log('맞아요1')
} else if (3 == 3){
  console.log('맞아요2')
}

else if 뜻은 "그게아니면 만약에" 라는 뜻이다.
그래서 1 == 3 비교해보고 그게 아니면 3 == 3 비교해보고 이게 참이면 맞아요2를 출력해준다.

예시 1개 더 봐보자

if (1 == 3) {
  console.log('맞아요1')
} else if (3 == 3){
  console.log('맞아요2')
} else if (4 == 4){
  console.log('맞아요3')
}

1번째 조건식은 1과 3은 같지 않기 때문에 '맞아요1'은 실행이 되지 않는다.
2번째 조건식은 3과 3은 같기 때문에 '맞아요2'가 실행이 될 것이다.
이미 2번째 코드가 실행됐기 때문에 3번째 코드는 실행되지 않는다.

else if 문의 경우 else 문의 특징도 가지고 있어서
조건식이 참이면 뒤에오는 else if문은 실행하지 않는다.

그렇다면 왜 굳이 else if문을 사용할까?

if (1 == 3) {
  console.log('맞아요1')
} else if (3 == 3){
  console.log('맞아요2')
}

위 else if문을

if (1 == 3) {
  console.log('맞아요1')
}
if (3 == 3){
  console.log('맞아요2')
}

굳이 위처럼 else if 문 안쓰고도 if문 2개만 써도 똑같은 기능을 구현가능하다.
그러면 else if 문은 왜 있는 문법일까?

• if문만 2개 있으면
  위에 있는 if문이 참이든 아니든 둘째 if문도 항상 실행된다.
  
  

• if + else if가 있으면
  else 덕분에 위의 조건식이 참이면 else 뒤는 스킵한다.
  그래서 조건식을 여러번 검사하는데 중간에 참이 나올 경우
  코드실행을 중단하고 싶으면 else if 쓰면 된다.
  설명만 들으면 의미없기 때문에 오늘 숙제해보면서 한번 활용해보자.

---

숙제

1. 전송버튼 누를 때 아이디랑 패스워드 둘 다 공백검사하려면?
2. 전송버튼 누를 때 입력한 비번이 6자 미만이면 알림띄우기

1. 전송버튼 누를 때 아이디랑 패스워드 둘 다 공백검사하려면?

현재 사용하고 있는 checkInput함수의 코드를 변경해서 사용하면 될 것 같다!

function checkInput(event) {
  if (IDinput이 공백인지 체크 조건식) {
    event.preventDefault();
    공백이라면 아이디를 입력하세요 알람 문구 출력
  } else if (Passwordinput이 공백인지 체크 조건식) {
    event.preventDefault();
    공백이라면 비밀번호를 입력하세요 알람 문구 출력
  }
}

위 손코딩을 한번 바꾸어보자

function checkInput(event) {
  if (formIdInput.value == "") {
    event.preventDefault();
    alert("아이디를 입력하세요");
  } else if (formPassWordInput.value == "") {
    event.preventDefault();
    alert("비밀번호를 입력하세요");
  }
}

결과

---

2. 전송버튼 누를 때 입력한 비번이 6자 미만이면 알림띄우기

현재 사용하고 있는 checkInput함수에 코드를 추가하면 될 것 같다.

먼저 password에 치는 값을 value라는 속성을 통해서 가져오고 있다 이 값의 개수를 알려면 어떻게 해야할까?
length
length를 사용하면 될 것 같다. 자세한건 위 사이트를 참고하자!

function checkInput(event) {
  if (formIdInput.value == "") {
    event.preventDefault();
    alert("아이디를 입력하세요");
  } else if (formPassWordInput.value == "") {
    event.preventDefault();
    alert("비밀번호를 입력하세요");
  } else if (formPassWordInput.value.length <= 6) {
    event.preventDefault();
    alert("비밀번호 7자리 이상 입력하세요");
  }
}

결과

---

전체코드

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
      crossorigin="anonymous" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" type="text/css" href="./test.css" />
    <title>Coding Apple JavaScript</title>
  </head>
  <body>
    <!-- <div id="alert-box">
      알림창임
      <button id="alert-close-btn">❌</button>
    </div>
    <button id="alert-notification-btn">알림창 여는 버튼</button>
    <button id="alert-id-btn">
      로그인
    </button>
    <button
      id="alert-password-btn"
     >
      비밀번호
    </button> -->

    <!-- <nav class="navbar navbar-light bg-light">
      <div class="container-fluid">
        <span class="navbar-brand">Navbar</span>
        <button class="navbar-toggler" type="button">
          <span class="navbar-toggler-icon"></span>
        </button>
      </div>
    </nav>
    <ul class="list-group">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
      <li class="list-group-item">A fourth item</li>
      <li class="list-group-item">And a fifth one</li>
    </ul> -->

    <button class="modal-btn">모달창 버튼</button>
    <div class="black-bg">
      <div class="white-bg">
        <h4>로그인하세요</h4>
        <form action="success.html">
          <div class="my-3">
            <input type="text" class="form-control" id="modal-id" />
          </div>
          <div class="my-3">
            <input type="password" class="form-control" id="modal-password" />
          </div>
          <button type="submit" class="btn btn-primary">전송</button>
          <button type="button" class="btn btn-danger" id="close">닫기</button>
        </form>
      </div>
    </div>

    <script src="./test.js"></script>
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
      crossorigin="anonymous"></script>
  </body>
</html>

index.css

#alert-box {
  background-color: skyblue;
  padding: 20px;
  color: white;
  border-radius: 5px;
  display: none;
}
.list-group {
  display: none;
}
.black-bg {
  visibility: hidden;
  opacity: 0;
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 5;
  padding: 30px;
  transition: all 1s;
}
.white-bg {
  background: white;
  border-radius: 5px;
  padding: 30px;
}

.show {
  visibility: visible;
  opacity: 1;
}

index.js

// const notification = document.querySelector("#alert-box");
// const notificationBtn = document.querySelector("#alert-notification-btn");
// const closeBtn = document.querySelector("#alert-close-btn");
// const idBtn = document.querySelector("#alert-id-btn");
// const passwordBtn = document.querySelector("#alert-password-btn");
// const navbarBtn = document.querySelector(".navbar-toggler");
// const subMenu = document.querySelector(".list-group");
const modalBtn = document.querySelector(".modal-btn");
const modal = document.querySelector(".black-bg");
const modalCloseBtn = document.querySelector("#close");
const formIdInput = document.querySelector("#modal-id");
const formPassWordInput = document.querySelector("#modal-password");
const submitBtn = document.querySelector(".btn-primary");

// notificationBtn.addEventListener("click", showNotification);
// closeBtn.addEventListener("click", closeNotification);
// navbarBtn.addEventListener("click", showSubmenu);
// navbarBtn.addEventListener("click", closeSubmenu);
modalBtn.addEventListener("click", showModal);
modalCloseBtn.addEventListener("click", closeModal);
submitBtn.addEventListener("click", checkInput);

// function showNotification() {
//   notification.style.display = "block";
// }

// function closeNotification() {
//   notification.style.display = "none";
// }

// function handleIdBox(text) {
//   notification.style.display = "block";
//   notification.innerText = text;
// }

// function handlePassWordBox(text) {
//   notification.style.display = "block";
//   notification.innerText = text;
// }

// function toggleSubmenu() {
//   subMenu.classList.toggle("show");
// }

function showModal() {
  modal.classList.add("show");
}

function closeModal() {
  modal.classList.remove("show");
}

function checkInput(event) {
  if (formIdInput.value == "") {
    event.preventDefault();
    alert("아이디를 입력하세요");
  } else if (formPassWordInput.value == "") {
    event.preventDefault();
    alert("비밀번호를 입력하세요");
  } else if (formPassWordInput.value.length <= 6) {
    event.preventDefault();
    alert("비밀번호 7자리 이상 입력하세요");
  }
}