[JS] 폼 만들며 배워보는 if else 🧐

html 조작을 쉽게 바꿔주는 라이브러리에는 React, Vue, jQuery 등이 있는데..

React와 Vue는 자바스크립트 어느 정도 문법을 알아야 사용 가능하니🥲  jQuery를 먼저 알아보자!
(jQuery는 자바스크립트 querySelectorAll, classList.add 이런 것들을 이름만 훨씬 짧게 바꿔주는 라이브러리다)

 

 

( + 한참 전에 작성했는데 티스토리 오류로.. 이제서야 올린다 ㅎㅎ

나름 공들여 만든 블로그 스킨도 왜인지 깨져있고 .. ㅠㅠ 암튼 티스토리가 전반적으로 좀 이상하니 양해 부탁드립니닷)

 

---

 

form 만들기

 

<form>과 기능을 만들면서 if else 문법을 배워보자

<!-- html -->
<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>

 

모달창 안에 이렇게 폼을 만든다

- <form> 태그는 서버로 유저의 정보를 전송하려고 쓰는 것이다 (전송되게 하려면 action="전송할주소~" 속성 사용)

- 버튼 태그에 전송 버튼은 type="submit" 으로, 일반 버튼은 type="button" 으로 작성해서 오류 방지하기
- success.html 파일도 같은 폴더에 하나 만들어두기

지금은 전송버튼을 누르면 폼 전송이 되며 success.html로 이동한다
그런데 아무것도 누르지 않아도 전송이 되거나.. 하는 문제가 생기므로,

아래와 같이 제한 조건을 걸어보자

전송 버튼을 눌렀을 때,
<input>에 입력된 값이 공백이면 알림을 띄워주세요

 

이때 "이런 경우에 코드를 실행해주세요!" 라고 명령하는 표현법은 뭘까? 

정답은 if 문법이다..!

이 if 문법을 아래에서 배워보자

 

 

---

 

if else 조건문

 

if 사용하기

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

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

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

 

ex) 아래와 같이 작성할 경우, 콘솔창에 '안녕'이 잘 뜬다

- 조건식 부분에는 대체로 등호, 부등호 등이 들어간다

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

 

if else 사용하기

"조건식이 참이 아니면 이거 실행해주세요~" 라고 하려면 else 조건문을 사용하면 된다

(** else 조건문은 if 뒤에만 붙일 수 있음)

if (조건) {
	조건이 참일 때 실행할 코드
} else {
	조건이 참이 아닐 때 실행할 코드
}

 

ex) 1은 3보다 크다는 가정이 거짓이므로 콘솔창에 else 조건문의 '안녕2'가 뜬다

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

 

비교연산자

프로그래밍에서의 비교연산자는 아래와 같이 사용한다.

같다	== (혹은 ===, 나중에 추가학습)	다르다	!=
크다	>	작다	<
크거나 같다	>=	작거나 같다	<=

 

 

---

 

초간단! alert 함수 쓰기

 

간단한 알림 팝업을 띄우고 싶다면 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를 출력해준다 

 

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

이 코드는 콘솔창에 무엇이 출력될까?

else if 문의 경우 else 문의 특징도 가지고 있어서
조건식이 참이면 뒤에오는 else if 문은 실행하지 않는다 
귀찮으면 "그게 아니면 만약에" 라고 해석만 잘하면 된다

 

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

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 :  전송 시 공백 체크

문제 

첫째 <input>에 입력한 값이 공백이면 alert('경고 메시지') 알림창을 띄워보자

1. 전송 버튼 누르면
2. input에 입력한 값이 공백인 경우 알림 띄우기

 

풀이

- 아래와 같이 작성하면 submit 버튼을 눌렀을 때 input 입력값이 없을 경우 알림창이 뜬다

- input의 value를 가져오는 inputValue 변수를 만들고, 이 값이 null인 경우 alert를 통해 안내 팝업이 뜨게 했다

$('.btn-primary').on('click', function(){
     let inputValue = $('.form-control').value;
     if (inputValue == null) {
            alert('There is no data.');
     };
});

 

풀이

- class 찾아서 click 이벤트를 줄 필요 없이, form 이 전송될 때 발생하는 submit 이벤트를 찾으면 똑같이 잘 실행된다

   → 그나저나.. inputValue 를 선언하지 않고 그냥 if (여기) 에 js 코드를 작성해서 값을 찾아주기만 하면 되는 거였구나...!! 더 간단한 방법이 있는 줄 몰랐다 ㅎㅎ 앞으로는 이렇게도 해봐야겠다!

- 값이 없는 것은 단순히 ' ' 으로 표기함
   → null 이 아닌 다른 방법도 있었다!
- (추가) 폼 전송을 막으려면 e.preventDefault() 사용하기

파라미터 부분에 event 넣을 때 e 라고만 적어도 된다
   → 처음 배운 내용. 전송 막고 싶어서 알아봤었는데.. 이렇게 하는 거였구만!

 

$('form').on('submit', function(e){
	if ($('email').value == ''){
    	e.preventDefault();
        alert('아이디 입력 안하셨어요')
    }
});

 

 

---

 

문제 2 : else if

 

문제 2

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

제이쿼리만 계속 사용하면 자바스크립트 문법이 헷갈릴까봐 이번엔 그냥 적어봤다

 

풀이

이전 해답에서 새롭게 알게 된 preventDefault 를 사용해봤다

확실히 다음 화면으로 넘어가지 않으니 돌아올 필요도 없고 간편하다

인수로 e 넣는 것도 잊지 않기!

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

document.getElementsByClassName('btn-primary')[0].addEventListener('click', function(e){
            if( document.getElementById('login-email').value == '') {
                e.preventDefault();
                alert ('Please write ID');
            } else if ( document.getElementById('login-password').value == '') {
                e.preventDefault();
                alert ('Please write PW');
            } 
        });
});

 

해답

해답은 제이쿼리로 작성되어있다

다른 점은 else if 가 아니라 if 문을 두 번 작성했다는 것이다

그런데 이렇게 되면 앞의 조건문이 반드시 실행되고 뒤에 조건문이 또 실행되므로 비효율적이다

따라서 else if 문이 더 효율적인 것 같다고 생각해 참고만 하고 내 코드에 반영하지는 않았다

$('form').on('submit', function(e){
  if (document.getElementById('email').value == '') {
    alert('아이디 입력하쇼');
  } 
  if (document.getElementById('pw').value == ''){
    alert('비번 입력하쇼')
  }
});

 

---

 

문제 3

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

 

풀이

따로 구글링을 하기 전에.. 길이니까 뒤에 length 붙이면 되려나? 하고 해봤는데

바로 성공해서 오히려 놀랐다 ㅋㅋㅋ 생각보다 간단하게 해결!

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

document.getElementsByClassName('btn-primary')[0].addEventListener('click', function(e){
            if( document.getElementById('login-password').value.length < 6 ) {
                e.preventDefault();
                alert ('The PW has to be minimum 6 letters');
            }
});

 

해답

쉽게 풀었다고 좋아했는데 해답을 보고 띠용...

생각해보니 앞부분이 다 겹치잖아..?!

이전 문제에서 만든 코드에 간단하게 추가하면 되는 거였구나! 

( 문제를 풀기만 하는 데서 그치는 게 아니라 더 좋은 코드를 위해 더 고민해야겠다고 다짐하게 된 문제였다 👀 )

$('form').on('submit', function(e){
  if (document.getElementById('email').value == '') {
    alert('아이디 입력하쇼');
  } 
  if (document.getElementById('pw').value == ''){
    alert('비번 입력하쇼')
  }
  if (document.getElementById('pw').value.length < 6){
    alert('왜케 비번이 짧음?')
  }
});

 

그래서 다시 고쳐본 코드!

나는 전부 if 문으로 쓴 게 아니라 else if 도 썼기 때문에,

아래와 같이 비밀번호 값의 길이 검사는 별도의 if문으로 작성했다. 

else if 로 작성하면 위의 조건식이 거짓일 경우에만 실행되니 조심조심!

 

1. 이메일 값이 없을 경우 경고

2. 이메일 값은 있는데 비번 값이 없을 경우 경고

3. 위와 별개로 비번 값이 6자 미만일 경우 경고

document.getElementsByClassName('btn-primary')[0].addEventListener('click', function(e){
            if ( document.getElementById('login-email').value == '') {
                e.preventDefault();
                alert ('Please write ID');
            } else if ( document.getElementById('login-password').value == '') {
                e.preventDefault();
                alert ('Please write PW');
            } 
            if ( document.getElementById('login-password').value.length < 6 ) {
                e.preventDefault();
                alert ('The PW has to be minimum 6 letters');
            }
});

 

 

 

 

 

---

 

TIL 끝!