<form>과 기능을 만들면서 조건문을 배워 보자.
<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="email">
</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>
</div>
</div>Bootstrap을 이용해서 모달창 안에 <form>을 만들었다.
그리고 같은 폴더에 success.html 파일을 하나 만들어 '전송 완료' 이라는 내용을 넣었다.
(주의) <form>안의 <button>은 전송 버튼은 type="submit"으로 그 외에 버튼은 type="button"으로 만들어야 한다.
💡 첫 <input>에 입력한 값이 아무것도 없으면 전송 버튼 누를 때 알림창을 띄워 보자.
전송 버튼 눌렀을 때 <input>에 입력된 값이 공백이면 알림창 띄워 주세요그러면 자바스크립트로 코드를 작성하면 되는데 "이런 경우에만 코드를 실행해라"라는 표현법은 배우지 않았다.
이 경우네는 자바 스크립트 if 문법을 사용하면 된다.
if문
if (조건식){
실행할 코드
}조건식이 참일 때 중괄호 안에 코드를 실행한다.
if (3>1){
console.log('안녕');
}조건식란에는 대부분의 경우 비교연산자를 넣는다.
== : 같다
>, < : 크거나 작다
>=, <= : 크거나 같다, 작거나 같다
!= : 같지 않다, 다르다
if else문
if (조건식){
조건식이 참일 때 실행할 코드
} else {
조건식이 거짓일 때 실행할 코드
}조건식이 참이 아닐 경우 실행해 달라는 코드를 작성하고 싶으면 else절을 사용하면 된다.
if (3 > 1){
console.log('안녕');
} else{
console.log('반가워');
}
다시 돌아와서 첫 <input>에 입력한 값이 아무것도 없으면 전송 버튼 누를 때 알림창이 뜨도록 코드를 작성해 보자.
1. 전송 버튼을 누르면
$('form').on('submit', function(){
input에 입력한 값이 공백인 경우 알림 띄위기
});버튼에 click 이벤트 리스너를 달아도 되고, <form>태그 찾아서 submbit 이벤트 리스너를 달아도 똑같이 동작한다.
폼 전송이 되면 <form> 태그에서 submit 이벤트도 발생하기 때문이다.
원하는 html을 태그명으로 찾고 싶으면 마침표나 # 없이 $('태그명')만 적으면 된다.
2. input에 입력한 값이 공백인 경우 알림창 띄위기
$('form').on('submit', function(){
if(document.getElementById('email').value == ''){
alert('아이디를 입력하세요.');
}
});이렇게 작성했떠니 의도대로 잘 동작한다.
jQuery로 짧게 쓰려면 $('#email').val() == ''쓰면 된다.
(+) 폼 전송 막는 법
$('form').on('submit', function(e){
if(document.getElementById('email').value == ''){
e.preventDefault();
alert('아이디를 입력하세요.');
}
});이벤트 리스너 콜백함수에 e라는 파라미터를 추가하고 e.preventDefault()라고 쓰면 폼 전송이 되지 않는다.
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');이 코드는 콘솔창에 무엇이 출력될까?
'맞아요2'다.
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를 사용하면 된다.
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
