<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>에 입력한 값 찾는 법도 있습니다.
안배운 것은 당연히 생각해서 나오는게 아니라 검색해봐야합니다.
전송버튼 누르면 공백체크하라던 숙제
1. 전송버튼누르면
2. 저기 input에 입력한 값이 공백인 경우 알림 띄우기
$('form').on('submit', function(){
input에 입력한 값이 공백인 경우 알림 띄우기~~
});▲ 1번은 이렇게 했는데
버튼에 click 이벤트리스너 달아도 되고 <form>태그 찾아서 submit 이벤트리스너 달아도 됩니다.
똑같이 동작합니다. 왜냐면 폼전송이 되면 <form> 태그에서 submit 이벤트도 발생해서 그렇습니다.
원하는 html을 태그명으로 찾고 싶으면 마침표나 # 없이 $('태그명')만 적으면 됩니다.
$('form').on('submit', function(){
if (input에 입력한 값이 공백) {
alert('아이디 입력하쇼');
}
});▲ 2번은 이렇게 했는데
근데 input에 입력한 값을 어떻게 찾는지는 배운 적이 없어서 구글찾아봤습니다.
그랬더니 document.getElementById('인풋태그찾고').value 쓰면 된다는군요.
진짜 유저가 입력한 값이 나오나 콘솔창에 한번 실험해보십시오.
<input> 태그에 id="email" 좀 주고 저렇게 출력해봤더니
진짜로 입력된 값이 나옵니다.
<input> 태그에 아무것도 안썼을 땐
따옴표 2개만 나오는군요 이게 공백이라는 뜻인가봅니다.
$('form').on('submit', function(){
if (document.getElementById('email').value == '') {
alert('아이디 입력하쇼');
}
});그래서 이렇게 코드짰더니 의도대로 잘 동작합니다.
jQuery로 짧게 쓰려면 $('#email').val() == '' 쓰면 됩니다.
폼 전송 막는 법
$('form').on('submit', function(e){
if (document.getElementById('email').value == '') {
e.preventDefault();
alert('아이디 입력하쇼');
}
});나중에 배울 것인데
이벤트리스너 콜백함수에 e라는 파라미터 추가해주고
e.preventDefault() 라고 쓰면 폼전송이 안됩니다.
else if 문법
else if 라는 키워드도 있습니다.
if문 뒤에 몇번이고 원하는 만큼 붙일 수 있습니다.
if (1 == 3) {
console.log('맞아요1')
} else if (3 == 3){
console.log('맞아요2')
}else if 뜻은 "그게아니면 만약에" 라는 뜻입니다.
그래서 1 == 3 비교해보고 그게 아니면 3 == 3 비교해보고 이게 참이면 맞아요2를 출력해줍니다.
if (1 == 3) {
console.log('맞아요1')
} else if (3 == 3){
console.log('맞아요2')
} else if (4 == 4){
console.log('맞아요3')
}이 코드는 콘솔창에 무엇이 출력될까요?
생각해보고 직접 확인해봅시다.
else if 문의 경우 else 문의 특징도 가지고 있어서
조건식이 참이면 뒤에오는 else if문은 실행하지 않습니다.
귀찮으면 "그게아니면 만약에" 라고 해석만 잘하면 됩니다.
if (1 == 3) {
console.log('맞아요1')
} else if (3 == 3){
console.log('맞아요2')
} if (1 == 3) {
console.log('맞아요1')
}
if (3 == 3){
console.log('맞아요2')
} 굳이 위처럼 else if 문 안쓰고도 if문 2개만 써도 똑같은 기능을 구현가능합니다.
그러면 else if 문은 왜 있는 문법임?
if문만 2개 있으면
-> 위에 있는 if문이 참이든 아니든 둘째 if문도 항상 실행됩니다.
if + else if가 있으면
-> else 덕분에 위의 조건식이 참이면 else 뒤는 스킵합니다.
그래서 조건식을 여러번 검사하는데 중간에 참이 나올 경우
코드실행을 중단하고 싶으면 else if 쓰시면 되겠습니다.
설명만 들으면 의미없기 때문에 오늘 숙제해보면서 한번 활용해보시길 바랍니다.
오늘의 숙제 :
1. 전송버튼 누를 때 아이디랑 패스워드 둘 다 공백검사하려면?
컴퓨터에게 "둘다 공백검사해줘~" 라고 할겁니까
컴퓨터는 공백검사 그런 단어 모릅니다.
기능을 최대한 상세히 설명부터하십시오
1. 전송버튼누르면
2. 첫째 input에 입력한 값이 공백인 경우 알림 띄워
3. 둘째 input에 입력한 값이 공백인 경우 알림 띄워
이러면 되겠군요 if문이 2개 필요할듯 보입니다.
$('form').on('submit', function(e){
if (document.getElementById('email').value == '') {
alert('아이디 입력하쇼');
}
if (document.getElementById('pw').value == ''){
alert('비번 입력하쇼')
}
});1번 2번은 아까 한거고 3번만 추가해봤습니다.
그러기 위해서 둘째 <input>에 id="pw" 도 추가했습니다.
아니면 else if 쓰는 것도 좋겠군요
2. 전송버튼 누를 때 입력한 비번이 6자 미만이면 알림띄우기
$('form').on('submit', function(e){
if (document.getElementById('email').value == '') {
alert('아이디 입력하쇼');
}
if (document.getElementById('pw').value == ''){
alert('비번 입력하쇼')
}
if (document.getElementById('pw').value.length < 6){
alert('왜케 비번이 짧음?')
}
});밑에 if문을 추가했습니다 끝
어떤 문자자료에 .length를 붙이면 몇 글자인지 출력해줍니다.
진짜인지 확인하고 싶으면 언제나 콘솔창에 출력해봅시다.
input 이벤트와 change 이벤트
<input> 태그에서 발생하는 이벤트들이 있습니다.
input이벤트와 change 이벤트인데 <input> 안에 뭔가 입력할 때 발생합니다.
진짜인지 확인하려면 <input> 하나 찾아서 이벤트리스너 장착해봅시다.
document.getElementById('email').addEventListener('input', function(){
console.log('안녕')
});▲ <input>에 입력된 값이 변경될 때 input 이벤트가 발생합니다.
<input>에 뭐 입력해보십시오 그 때마다 콘솔창에 안녕이 출력되는군요.
document.getElementById('email').addEventListener('change', function(){
console.log('안녕')
});▲ <input>에 입력된 값이 변경되고 커서를 다른 곳에 찍으면 change 이벤트가 발생합니다.
<input>에 뭐 입력하고 커서를 다른데 찍어보십시오. 안녕이 출력됩니다.
그래서 <input> 값이 변경되었을 때 뭔가 코드를 실행하고 싶으면
input, change 이벤트리스너를 활용해보면 되겠습니다.
true/false 자료
실은 if 조건문 자리에는 == 등호 이런게 아니라 true, false를 넣어야 잘 작동합니다.
if (true){
console.log('진짜임')
}진짜로 true 넣으면 if문이 실행 잘됩니다.
true는 참, false는 거짓을 뜻하는 자료형입니다.
멋진 개발자말로 boolean 타입이라고 부릅니다.
Q. 그럼 1 == 1 이런거 넣어도 if문 잘 작동하는 이유는 뭐임?
A. 1 == 1 쓰면 그 자리에 true 아니면 false 가 자동으로 남아서 그렇습니다.
콘솔창에 1 == 1 출력해보셈
Q. 타입이 뭐임
자료가 무슨 형식을 가지고 있는지 구분하기 위한 용어입니다.
123은 숫자타입 '123'은 문자타입 true는 boolean타입 이렇게 부르고
포켓몬으로 비유하면 불타입 비행타입 그런거랑 비슷합니다.
다른지 같은지 비교하고 싶으면
console.log(2 != 1)다름을 비교하고 싶으면 != 쓰면 됩니다.
위 코드는 그래서 true가 콘솔창에 출력됩니다.
console.log(2 == '2') //true 나옴
console.log(2 === '2') //false 나옴같다고 비교하려면 == 쓰면 된다고 했는데 실은 === 이것도 있음
== 이건 느슨한 비교
=== 이건 엄격한 비교입니다.
== 느슨한 비교는 자료의 타입변환을 지가 알아서 해보고 동일하면 true라고 판정해줍니다.
=== 엄격한 비교는 자료의 타입까지 동일해야 true라고 판정해줍니다.
실은 if문 안에서 true, false 역할을 하는 자료들도 있음
0
''
null
undefined
NaN이런 것들은 if문 소괄호 안에서 false랑 같은 역할을 합니다.
0제외 모든 숫자
'아무문자'
[]
{}이런 것들은 if문 소괄호 안에서 true랑 같은 역할을 합니다.
첨보는 것들은 지금은 몰라도 됩니다.
'자바스크립트' 카테고리의 다른 글
| 자바스크립트>변수 심화 & 버튼 클릭 횟수로 바꾸기 (0) | 2024.07.07 |
|---|---|
| 자바스크립트> 연산자 & 함수 테스트 (0) | 2024.07.07 |
| 자바스크립트>모달창과 간단한 애니메이션 (0) | 2024.07.07 |
| 자바스크립트> 부트스트랩 서브메뉴& jQuery (0) | 2024.07.07 |
| 자바스크립트>함수 기초(아이디,비번) & 이벤트리스너 (0) | 2024.07.07 |