input 이벤트와 change 이벤트
<input> 태그에서 발생하는 input 이벤트와 change 이벤트가 있다.
<input> 안에 입력할 때 발생하는 이벤트들이다.
document.getElementById('email').addEventListener('input', function(){
console.log('안녕')
});▲ <input>에 입력된 값이 변경될 때 input 이벤트가 발생한다.
<input>에 값을 입력할 때마다 콘솔창에 안녕이 출력된다.
document.getElementById('email').addEventListener('change', function(){
console.log('안녕');
});▲ <input>에 입력된 값이 변경되고 커서를 다른 곳에 찍으면 change 이벤트가 발생한다.
<input>에 값을 입력하고 커서를 다른 곳에 찍으면 콘솔창에 안녕이 출력된다.
true/false(boolean) 자료
if 조건문 자리에는 == 같은 등호가 아니라 true, false를 넣어야 잘 작동한다.
true는 참, false는 거짓을 뜻하는 자료형이다. boolean 타입이라고 부른다.
(123은 숫자 타입, '123'은 문자타입, true/false는 boolean 타입)
if (true){
console.log('참이다.')
}
같은지 다른지 비교하고 싶으면
console.log(2 != 1)같음을 비교하고 싶으면 ==, 다름을 비교하고 싶으면 != 사용하면 된다.
그래서 위 코드는 true가 콘솔창에 출력된다
console.log(1 == '1') //true 나옴
console.log(1 === '1') //false 나옴사실 같다고 비교하려면 ==, === 둘 다 사용할 수 있다.
== : 느슨한 비교, === : 엄격한 비교이다.
== 느슨한 비교는 자료의 타입 변환은 알아서 하고 동일하면 true로 판정해 주고,
=== 엄격한 비교는 자료의 타입까지 동일해야 true라고 판정해 준다.
if문에서 true/false로 인식하는 자료도 있다.
| true로 인식하는 자료들(truthy 자료들) | false로 인식하는 자료들(falsy 자료들) |
| 0을 제외한 숫자 | 0 |
| '문자' | '' |
| [ ] | null |
| { } | undefined |
| NaN |
and/or 연산자
if문 소괄호 안에 조건식을 여러개 동시에 입력하고 비교하고 싶을 때는 and/or 기호와 함께 적으면 된다.
if (1 == 1 && 2 == 2){
console.log('안녕')
}&& 기호는 논리학의 and 역할을 한다.
왼쪽, 오른쪽이 둘 다 true면 전체를 true로 바꿔 준다.
if (1 == 1 || 2 == 3){
console.log('안녕')
}|| 기호는 논리학의 or 역할을 한다.
왼쪽, 오른쪽 둘 중 ture가 적어도 1개가 있으면 전체를 true로 바꿔 준다.
if (1 == 1 && 2 == 3){
console.log('안녕') //'안녕' 출력되지 않음
}
if (1 == 1 || 2 == 3){
console.log('안녕') //'안녕' 출력됨
}
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
