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 = 토요일 스위치문으로 변경 가능
'프론트앤드 수업' 카테고리의 다른 글
[JAVASCRIPT]반복문, 배열, 객체 (0) | 2022.05.03 |
---|---|
[Javascript] input으로 받아온 값 확인 후 배경색변경하기 (0) | 2022.04.28 |
자바스크립트 ID PW 확인 (0) | 2022.04.27 |
자바스크립트 형변환, 비교,논리연산자 (0) | 2022.04.27 |
자바스크립트 클릭이벤트로 class넣어서 호출하기 (0) | 2022.04.26 |