공백검사 숙제와 else if 문법

전송버튼 누르면 공백체크하라던 숙제

 

1. 전송버튼누르면

2. 저기 input에 입력한 값이 공백인 경우 알림 띄우기

 

$('form').on('submit', function(){
  input에 입력한 값이 공백인 경우 알림 띄우기~~
});

▲ 1번은 이렇게 했는데

버튼에 click 이벤트리스너 달아도 되고 <form>태그 찾아서 submit 이벤트리스너 달아도 됩니다.

똑같이 동작합니다. 왜냐면 폼전송이 되면 <form> 태그에서 submit 이벤트도 발생해서 그렇습니다. 

원하는 html을 태그명으로 찾고 싶으면 마침표나 # 없이 $('태그명')만 적으면 됩니다.

 

 

 

 

 

 

$('form').on('submit', function(){
  if (input에 입력한 값이 공백) {
    alert('아이디 입력하쇼');
  }
});

▲ 2번은 이렇게 했는데

근데 input에 입력한 값을 어떻게 찾는지는 배운 적이 없어서 구글찾아봤습니다.

그랬더니 document.getElementById('인풋태그찾고').value 쓰면 된다는군요. 

진짜 유저가 입력한 값이 나오나 콘솔창에 한번 실험해보십시오. 

 

 

 

 

<input> 태그에 id="email" 좀 주고 저렇게 출력해봤더니 

진짜로 입력된 값이 나옵니다. 

 

 

 

 

<input> 태그에 아무것도 안썼을 땐

따옴표 2개만 나오는군요 이게 공백이라는 뜻인가봅니다. 

 

 

$('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')
}

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

생각해보고 직접 확인해봅시다. 

 

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. 전송버튼 누를 때 아이디랑 패스워드 둘 다 공백검사하려면?

이건 답인데 누르면 안됩니다

 

컴퓨터에게 "둘다 공백검사해줘~" 라고 할겁니까

컴퓨터는 공백검사 그런 단어 모릅니다.

기능을 최대한 상세히 설명부터하십시오

 

1. 전송버튼누르면

2. 첫째 input에 입력한 값이 공백인 경우 알림 띄워

3. 둘째 input에 입력한 값이 공백인 경우 알림 띄워

이러면 되겠군요 if문이 2개 필요할듯 보입니다. 

 

 

 

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

1번 2번은 아까 한거고 3번만 추가해봤습니다.

그러기 위해서 둘째 <input>에 id="pw" 도 추가했습니다.

아니면 else if 쓰는 것도 좋겠군요

 

 

[collapse]

 

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

글자가 몇자인지 출력하는건 구글이 압니다

 

$('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문을 추가했습니다 끝

어떤 문자자료에 .length를 붙이면 몇 글자인지 출력해줍니다.

진짜인지 확인하고 싶으면 언제나 콘솔창에 출력해봅시다.