Login form

form tag

<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" id="send">전송</button>
   <button type="button" class="btn btn-danger" id="close">닫기</button>
</form> 

• form tag를 이용해 login form 등을 만들 수 있다
• form tag의 특징은 submit 시 action 속성에 지정한 html로 이동한다는 것이다
  - (참고) 버튼은 각 submit, button 등 type을 명확히 지정해주어야 후에 에러를 방지할 수 있다
  

input tag

document.getElementById('email').addEventListener('input', function(){
    console.log('안녕')
})

document.getElementById('email').addEventListener('change', function(){
    console.log('안녕')
})

• input tag에서 사용할 수 있는 이벤트 중에는 input, change가 있다
  - input: 입력 창에 값이 변경될 때마다 내부 코드를 실행해준다
  - change: 입력 창에 값이 변경되고 포커스를 읽었을 때 내부 코드를 실행해준다
  

if else 조건문

$('form').on('submit', function(e){
    if ($('.form-id').val().trim() == '') {
        e.preventDefault();
        alert('아이디를 입력하세요');
    } if ($('.form-pw').val().trim() == '') {
        e.preventDefault();
        alert('패스워드를 입력하세요');
    } else {
        alert('기다려주세요');
    }
})

• if (조건) {실행 코드} 와 같은 문법으로 조건문을 실행할 수 있다
  - 조건이 참일 경우 안의 코드가 실행
• 위에서 input의 공백을 체크하기 위해 각 input의 value(.val())를 불러왔으며, trim()을 통해 공백을 제거해주어 공백 입력도 방지해주었다
• Event listener 설정 시 button id인 #send 'click' 으로 설정해도 되고, form tag 'submit' 으로 설정해도 동일하다
• 조건문 안에 alert만 실행한다면 form submit action은 그대로 진행된다 > 이를 막기 위해서는 function parameter로 event(=e)를 받아와 e.preventDefault() 실행해주면 된다
  - event 객체에 대해서는 이후 자세히 설명
  

else if

if (3 == 3) {
    console.log('참1')
} else if (3 > 1) {
    console.log ('참2')
}

if (3 == 3) {
    console.log('참3')
} if (3 > 1) {
    console.log('참4')
}

• else if 문을 붙여 다중 조건식을 사용할 수 있다
• if - else if 문과 if - if 문의 차이점
  - if - else if 문의 경우 if 가 참이어서 내부 코드가 실행되면 따라오는 else if 문은 실행되지 않는다 > 출력 결과: 참1
  - if - if 문의 경우 선행 if 가 참이어서 내부 코드가 실행되어도 후행 if 문도 실행된다 > 출력 결과: 참3 참4
  - (참고) 모든 조건을 탐색하지 않아도 될 경우 if - else if가 효율을 높여줄 수 있다