JavaScript(조건문, input 태그의 이벤트)

■ 조건문 문법

if 문

if (조건) {
  // 조건이 참일 때 실행되는 코드
}

'조건'이 참이면, 중괄호 내에 있는 코드 블록이 실행됩니다.

 

 

if - else 문

if (조건) {
  // 조건이 참일 때 실행되는 코드
} else {
  // 조건이 거짓일 때 실행되는 코드
}

조건이 참이면 첫 번째 if문 코드가 실행되고, 거짓이면 두 번째 else문 코드가 실행됩니다.

 

 

else if 문

if (조건1) {
  // 조건1이 참일 때 실행되는 코드
} else if (조건2) {
  // 조건2가 참일 때 실행되는 코드
} else {
  // 모든 조건이 거짓일 때 실행되는 코드
}

조건1이 참이면 첫 번째 if문 코드가 실행되고, 조건2가 참이면 두 번째 else if문 코드가 실행됩니다.

모든 조건이 거짓이면 마지막 else문 코드가 실행됩니다.

 

 

if문 중복

if (조건1) {
  // 조건이 참일 때 실행되는 코드
}
if (조건2) {
  // 조건이 참일 때 실행되는 코드
}

else if문과 if 문을 2개 썼을 때의 차이점은

else if 문은 처음 if 문이 참일 경우, else if 문을 실행하지 않습니다.

if문을 2번 쓸 경우에는 앞의 조건문이 참이여도, 2번째 if 문도 검사하여 참일 경우 실행합니다.

 

 

true와 false 자료

if (1 == 1) {
  // 조건이 참일 때 실행되는 코드
}
// 1 == 1 은 true

if (1 == 2) {
  // 조건이 참일 때 실행되는 코드
}
// 1 == 2 은 false

조건문은 true, false를 넣어야 작동이 잘 됩니다.

이때 true 나 false의 역할을 하는 자료들이 있습니다.

true의 역할을 하는 자료들 → 0, '', null, undefined, NaN

flase의 역할을 하는 자료들 → 0제외 모든 숫자, '아무문자', [], {}

 

 

연산자

if (1 == 1 && 2 == 3){
  console.log('안녕')
}
// false

if (1 == 1 || 2 == 3){
  console.log('안녕')
}
// true

조건식을 여러개 동시에 입력하고 싶을 때는 연산자를 사용할 수 있습니다.

&& 은 and 의 역할

|| 은 or 의 역할을 합니다.

 

 

■ input 태그의 이벤트

input, change, keydown 이벤트

$('input').on('input', function() {
  // 값이 변경될 때 실행되는 코드
});

$('input').on('change', function() {
  // 값이 변경되고 포커스를 잃었을 때 실행되는 코드
});

$('input').on('keydown', function(event) {
  // 키가 눌렸을 때 실행되는 코드
});

 

 

value() 함수와 length

<input id="username">

var 아이디 = $('#username').val();
console.log(아이디);

input 에서 자주 쓰이는 함수 중 하나로 val() 함수를 사용하여 요소의 값을 가져올 수 있습니다.

var 아이디길이 = $('#username').val().length;
console.log(아이디길이);

length를 사용하면 구한 값의 길이가 얼마나 되는지 숫자로 알려줍니다.