10. else if

fe.syhan·2023년 10월 31일

JS 기초

목록 보기
10/52
post-thumbnail

전송버튼 누르면 공백체크


// 1. 전송버튼을 누르면
$('form').on('submit', function() {
  // 2. 저기 <input>에 입력된 값이 공백이면 알림을 띄워주세요
});

버튼에 click 이벤트리스너를 달아도 되고

태그 찾아서 submit 이벤트리스너를 달아도 됩니다.

폼전송이 되면 태그에 submit 이벤트도 발생합니다.

// 1. 전송버튼을 누르면
$('form').on('submit', function() {
  // 2. 저기 <input>에 입력된 값이 공백이면 알림을 띄워주세요
	if (document.getElementById('input태그').value == '') {
	    alert('아이디 입력하쇼');
	  }
});

input에 입력한 값은 document.getElementById('input').value

공백은 ‘’ 따옴표 두 개로 표현이 된다.

jQuery로 짧게 쓰려면 $('input').val() == ''

폼 전송 막는 법


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

이벤트리스너 콜백함수에 e라는 파라미터를 추가해 주고

e.preventDefault() 라고 쓰면 폼전송이 안된다.

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')
}
if (1 == 3) {
  console.log('맞아요1')
} 
if (3 == 3){
  console.log('맞아요2')
}

굳이 else if 문을 안쓰고 if 문 2개만 써도 똑같은 기능을 합니다.

차이점은,

  • if문 2개 위에 있는 if문이 참이든 거짓이든 둘째 if문도 항상 실행됩니다.
  • else if else 덕분에 위의 조건식이 참이면 else 뒤는 스킵합니다.

그래서 조건식을 여러번 검사하는데 중간에 참이 나올 경우

코드 실행을 중단하고 싶으면 else if 를 사용

0개의 댓글