폼 / if else

javascript

목록 보기
7/8
post-thumbnail

<form>은 서버로 유저정보 전송하려고 쓰는 것.

if 조건문 쓰는 법

*참고)
1. <input> 에 입력한 값 찾는 법
       ex) document.getElementById('').value
2. 폼 기본이벤트 막기
e.preventDefault(); **콜백함수에 e 적어주기
3. 공백인 경우(제이쿼리로)
$('#email').val() == ''

if (조건식){
  실행할코드
}
$('form').on('submit', function (e) {
   if(document.getElementById('email').value == ''){
      e.preventDefault();
      alert("id 입력해주세요");
   }
});            

else if 문법

if조건문이 아니라면~

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

if문과 else-if문의 차이

  • if문만 2개 있으면
    : 위에 있는 if문이 참이든 아니든 둘째 if문도 항상 실행
  • if + else if가 있으면
    : else 덕분에 위의 조건식이 참이면 else 뒤는 스킵합니다.

그래서 조건식을 여러번 검사하는데 중간에 참이 나올 경우, 코드실행을 중단하고 싶으면 else if 사용하면 됨!

 $('form').on('submit', function (e) {
      if(document.getElementById('email').value == ''){
        e.preventDefault();
        alert("id 입력해주세요");
      } else if(document.getElementById('pwd').value == ''){
        e.preventDefault();
        alert("pw 입력해주세요");
      } else if(document.getElementById('pwd').value.length < 6){
        e.preventDefault();
        alert("pw 6자 이상 입력해주세요");
      }
    });

이벤트

<input> 태그에서 발생하는 이벤트: <input> 값이 변경되었을 때 뭔가 코드를 실행하고 싶으면, 아래의 이벤트로 활용해보기~

  1. input 이벤트: 값이 입력될 때마다
  2. change 이벤트: 입력된 값이 변경되고 커서를 다른 곳에 찍으면 change 이벤트가 발생

조건문

실은 if문 안에 true / false를 넣어야 잘 작동함
(=boolean타입)

if (true){
  console.log('진짜임')
}

Q. 그럼 1 == 1 이런거 넣어도 if문 잘 작동하는 이유?
A. 1 == 1 쓰면 그 자리에 true 아니면 false 가 자동으로 남아서!

콘솔창에 1 == 1 출력해보자~!

엄격한 비교 / 느슨한 비교

== 느슨한 비교: 자료의 타입변환을 알아서 해보고 동일하면 true라고 판정

=== 엄격한 비교: 자료의 타입까지 동일해야 true라고 판정해줍니다.

+if문 안에서 true / false 역할을 하는 자료

(기타)

  • 어떤 문자자료에 .length를 붙이면 몇 글자인지 출력해줌.
    진짜인지 확인하고 싶으면 언제나 콘솔창에 출력해보자!

  • <script>안에 쓴 것은 페이지가 새로고침할 때마다 한번씩 실행됨!

profile
정리하는게 공부가 될 지 모르겠지만, 정리를 하면 마음만큼은 편해

0개의 댓글