본문 바로가기

프론트앤드 수업

[Javascript] 삼항조건식 if문 Swich+ 예제

728x90


if문

if (표현식1){
표현식1이 true 실행하는 코드
}else if(표현식2) {
표현식 1이 false이고 표현식2가 true일때 실행되는 코드 
} else{
표현식 1과 2가 둘다 false일때 실행되는 코드
}

if(5>1) {
console.log ("5는 1보다 큽니다.")
} else {
console.log("5는 1보다 크지않습니다.")
}

let num = 10
if( num > 10 ) {
console.log("num은 10보다 크다")
} else if(num ===10) {
console.log("num은 10과 같습니다.")
} else{
console.log("num은 10보다 작습니다.")
}


자바스크립트 DOM
이벤트
click 클릭시
mouseenter 마우스를 올렸을때
mouseleave 마우스가 떠났을때
mousemove 마우스가 움직일때
resize 창의 크기가 조절될때


이벤트발생 방법
1. html 요소 태그안의 속성
<button onclick="myFunc()">
2.이벤트 리스너
addEventListener() 메서드를 이용
document.querySelector('button').addEventListener("이벤트명",myFunc)

       document.querySelector('#btn').onclick = eventOn;
       function eventOn(){
       console.log('이벤트가 발생했습니다.');
        }
btn이라는 ID를가진 버튼을 클릭시 onclick를 html에 적지않고 직접 JS에서 선택해서 사용가능

        document.querySelector('#btn').addEventListener('click',eventOn);
        function eventOn(){
            console.log('이벤트가 발생했습니다.');
        }

 


삼항조건식
구문 (조건) ? 참일때 실행 : 거짓일때 실행; // 괄호 생략 가능
(5<15) ? alert(true): alert(false);

(input == 'red' || input == 'green' || input == 'blue') ?    // 조건
document.querySelector('#color').style.background = input: // true
document.querySelector('#color').style.background = 'white';  // false

let result;
a + b < 4 ? result = '미만': result = '이상';
result = a + b < 4 ? '미만': '이상';


swich(매개변수) {
case '0': // 조건을 지정하는 위치
실행문;
break;  // case 0의 조건을 실행 후 종료
case '1'; // 0이 아닐경우 1인지 확인 후 실행
실행문;
break; // 종료
default: // 0과 1 둘다 아니라면 실행 if문의 else와 같음
실행문
}
ex)
 let num = prompt('1~5까지 숫자를 입력해 주세요.');
        switch(num){
            case '1':
                console.log('1입니다.');
                break;
            case '2':
                console.log('2입니다.');
                break;
            case '3':
                console.log('3입니다.');
                break;
            case '4':
                console.log('4입니다.');
                break;
            case '5':
                console.log('5입니다.');
                break;
            default:
                console.log('숫자가 아니거나 1~5의숫자가 아닙니다.')       
        }

            let today = new Date();
            let year = today.getFullYear();
            let month = today.getMonth();  // +1을 해줘야함
            let date = today.getDate();
            let day = today.getDay(); // 0 = 일요일 6 = 토요일 스위치문으로 변경 가능

 

 

 

728x90
댓글