1-9강 : 폼 만들며 배워보는 if else

모달창 안에 <form> 만들기

form 안의 <button>

전송=submit

type=button

 

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

 

    <div class="black-bg show-modal">
        <div class="white-bg">
          <h4>로그인하세요</h4>

          <form action="success.html">  <!-- 이 서버 url로 전송 -->
            <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">전송</button>
             <button type="button" class="btn btn-danger" id="close">닫기</button>
          
            </form> 
        </div>
    </div>

전송 버튼을 누르면 전송완료~~~~~로 작성해 둔 success.html로 이동한다.

 

조건 걸기

전송 버튼 누를 때 첫째 <input>에 입력된게 없으면 alert 띄우기

컴퓨터에게 명령할 내용

 

    <script>

      document.getElementById('submit').addEventListener('click',function(){

        var f=document.myform.id.value 
        //form 태그에 name="myform" 값을, input 태그에 name="id" 값을 부여해줌

        if(f==""){
          alert('값을 입력하세요.');
        }

      })

    </script>

실행결과

아무것도 입력하지 않고 전송 버튼을 누르면 위와 같이 alert 창이 뜬다!

반대로 값을 입력해준 후 전송을 누르면 success.html 페이지로 넘어간다.

 

 

조건문 쓰는 법

: 조건이 충족될 때 코드 실행하고 싶으면 사용

 

if(조건){ <-조건에는 거의 등호/부등호 들어감

조건이 참일 때 실행할 코드

}

else{위 조건이 참이 아닐 때 실행할 코드}

 

    <script>

      if(3==1){
       console.log('안녕')
      } else{
        console.log('안녕2')
      }

    </script>

 

조건문이 참이 아니기에 안녕2가 콘솔 창에 출력된다

 

비교연산자

== 

<

<=

>

>=