폼만들며 배워보는 if else

<form> 만들기 

 

<form>과 기능을 만들면서 if else 문법을 배워보도록 합시다. 

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

▲ 모달창 안에 폼 이렇게 만들어보십시오. 

그리고 전 닫기버튼도 폼 안으로 옮겼습니다.

그리고 success.html 파일도 같은 폴더에 하나 만들어두면 되겠습니다. 파일 내용은 아무 글자나 채웁시다. 

 

 

지금은 전송버튼 누르면 폼 전송이 되며 success.html로 이동합니다.

근데 여기에 제한을 걸어봅시다. 

첫 <input>에 입력한 값이 아무것도 없으면 전송버튼 누를 때 알림을 띄워봅시다. 

 

그럼 자바스크립트로 

전송버튼누르면
저기 <input>에 입력된 값이 공백이면 알림띄워주세요 

코드 짜면 되는데 "이런 경우에만 코드 실행해주세요~" 라는 표현법은 배우지 않았습니다.

이 경우엔 자바스크립트 if 문법쓰면 됩니다.

 

 

 

 

 

 

잠깐 문법수업 : if else 조건문

 

조건부로 코드를 실행하고 싶으면 if 문법을 쓰면 됩니다.

if (조건식){
  실행할코드
}

이렇게 적으면 됩니다.

조건식이 참일 때 중괄호 안에 있는 코드를 실행해줍니다. 

 

 

if (3 > 1){
  console.log('안녕')
}

그래서 이렇게 쓰면 된다는 소리입니다.

콘솔창 열어보면 '안녕'이 잘 뜹니다.

조건식란엔 대부분의 경우엔 등호, 부등호 이런거 넣으면 됩니다. 

 

비교연산자

 

 

 

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

"조건식이 참이 아니면 이거 실행해주세요~" 라고 코드 짜고 싶으면 

else 조건문 쓰면 됩니다. if 뒤에만 붙일 수 있습니다. 

그럼 위의 코드는 콘솔창에 뭐가 출력될까요 실험해보십시오. 

 

 

 

 

 

 

간편한 alert 함수

 

간단한 알림팝업 띄우고 싶으면 alert('어쩌구') 쓰면 됩니다. 

 

 

이런 화면으로 사용자에게 간단한 안내문을 간편하게 띄울 수 있습니다.

이걸 이용해서 오늘의 숙제를 해오도록 합시다. 

첫째 <input>에 입력한 값이 공백이면 alert('아이디입력하세요') 라고 안내문을 띄워보도록 합시다.

입력한 값이 공백인지 어떻게 알 수 있냐고요? 

자바스크립트 쓰면 html 내의 모든걸 찾고 조작할 수 있다고 했습니다.

<input>에 입력한 값 찾는 법도 있습니다. 

안배운 것은 당연히 생각해서 나오는게 아니라 검색해봐야합니다. 

 

 

오늘의 숙제 : 

전송버튼 클릭시 첫째 <input>에 입력된 값이 공백이면 아이디 입력하라고 알림을 띄워봅시다.