직접 코딩하면서 실습하는 방법으로 코딩애플 JavScript 과정을 진행하고있다.
오늘은 if else 문을 이용하여 input에 공백 alert창 띄우는 방법을 공부했다.
어떠한 사이트를 방문하더라도 input 의 정보를 입력하지 않으면 전송이 되지않는다.
이러한 기본적인 조건을 만드는 방법을 JavaScript를 통해 경고창으로 제어하는 방법을 공부했다.
기본적인 css는 부트스트랩을 사용하였다.
<form action="success.html">
<div class="modal-body">
<h2>로그인</h2>
<div class="mb-3">
<input type="text" class="form-control" id="id">
</div>
<div class="mb-3">
<input type="password" class="form-control" id="password">
</div>
<div class="form-check">
<input type="checkbox" class="form-check-input" id="check">
<label class="form-check-label">아이디 저장</label>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-dark submit">전송</button>
<button type="button" class="btn btn-secondary close">닫기</button>
</div>
</form>
위 코드만으로는 input 에 아무정보를 입력하지않아도 혹은 아무것이나 입력하여도 submit 이 제약을 가지지 않는다.
JavaScript 를 이용한 submit 조건 생성
document.querySelector('.submit').addEventListener('click', function(e) {
if (document.querySelector('#id').value == '') { // id 라는 id 를 선택하고 해당 input이 공백일 경우
e.preventDefault() // 폼 전송을 막음
alert('아이디를 입력해주세요') // '아이디를 입력해주세요' 라는 경고창을 띄움
}
if (document.querySelector('#password').value == '') { // password 라는 id 를 선택하고 해당 input이 공백일 경우
e.preventDefault() // 폼 전송을 막음
alert('비밀번호를 입력해주세요') // '비밀번호를 입력해주세요' 라는 경고창을 띄움
}
if (document.querySelector('#password').value.length < 6){ // password 라는 id 를 선택하고 해당 input이 6자 미만일 경우
e.preventDefault() // 폼 전송을 막음
alert('비밀번호를 6자 이상 입력해주세요')} // '비밀번호를 입력해주세요' 라는 경고창을 띄움
});input,chnage 이벤트
document.querySelector('#id').addEventListener('input',function(){
console.log('오류')
}); // input 이벤트 - 입력한 값이 바뀌었을 경우 '오류' 라는 console log 를 출력
document.querySelector('#id').addEventListener('change',function(){
console.log('오류')
}); // change 이벤트 - 입력한 값이 바뀌었을 경우 마우스의 focus가 벗어났을 경우 '오류' 라는 console log 를 출력연산자
+ 더하기
- 빼기
* 곱하기
/ 나누기
% 나누고 남은 수
++값 + 1
--값 - 1
> ~ 보다 작다
< ~ 보다 크다
>= ~ 보다 크거나 같다
<= ~ 보다 작거나 같다
!= 같지 않다
= 우측값을 왼쪽에 치환하다
== 값이 같다 (결과값만 같다면 true)
=== 값이 같다 (결과값 / 데이터형식 true)
&& 모든 조건이 true 일 경우 (AND)
|| 최소 하나의 조건만 true 일 경우 (OR)
! 연산자 값을 반대로 바꿈 (NOT)
FrontEnd