티스토리 뷰
2주차 시작!
1주차에 우수혼공족에 선정되어 매우 기쁘고 감사한 마음입니다. 😃
이 기쁨을 원동력 삼아 2주차도 열심히 공부하겠습니다!
Chapter 03. 조건문
학습 목표
- if 조건문의 사용법
- switch 조건문의 사용법
- 조건부 연산자와 짧은 조건문
1. if 조건문
-if 조건문
자바스크립트에서 가장 기본적인 조건문으로, 특정 조건이 참일 경우 실행된다.
if (조건) {
// 조건이 참일 때 실행할 문장
}-if else 조건문
조건문이 참일 때와 거짓일 때 각각 다른 문장르 실행할 수 있다.
if (조건) {
// 조건이 참일 때 실행
} else {
// 조건이 거짓일 때 실행
}
-중첩 조건문
조건문 안에 조건문을 삽입하여 더욱 복잡한 조건을 처리한다.
if (조건1) {
if (조건2) {
// 조건1과 조건2가 모두 참일 때 실행
} else {
// 조건1이 참, 조건2가 거짓일 때 실행
}
} else {
// 조건1이 거짓일 때 실행
}위 코드를 보고 실행 순서를 생각해볼 수 있다.
-if else if 조건문
여러 조건을 처리할 때 사용한다.
if (조건1) {
// 조건1이 참일 때 실행
} else if (조건2) {
// 조건2가 참일 때 실행
} else {
// 모든 조건이 거짓일 때 실행
}
02. switch 조건문과 짧은 조건문
구조: 값에 따라 실행할 문장을 선택하며, case와 default로 구성된다.
-switch 조건문
switch (값) {
case 조건A:
// 조건A에 해당할 때 실행
break;
case 조건B:
// 조건B에 해당할 때 실행
break;
default:
// 모든 조건이 거짓일 때 실행 (생략 가능)
}예제: switch 조건문 사용하여 홀수,짝수 판별하기 예제 코드
<!DOCTYPE html>
<html>
<head>
<title></title>
<script>
//변수를 사용
const input=Number(prompt('숫자를 입력하세요.','숫자'))
//조건문
switch(input%2){
case 0:
alert('짝수입니다.');
break
case 1:
alert('홀수입니다.');
break;
default:
alert('숫자가 아닙니다.')
break
}
</script>
</head>
<body>
</body>
</html>
3. 조건부 연산자와 짧은 조건문
-조건부 연산자(삼항 연산자)
: 간단한 조건을 처리할 때 유용하며, ?와 :를 사용한다.
const result = (number >= 0) ? '0 이상의 숫자입니다.' : '0보다 작은 숫자입니다.';-짧은 조건문
:논리 연산자를 활용한 간단한 조건문이다.
논리합(||): 좌변이 거짓일 경우 우변 실행
const result = condition || '조건이 거짓일 때 실행';
논리곱(&&):좌변이 참일 경우 우변 실행
const result = condition && '조건이 참일 때 실행';
-split로 문자열을 잘라 사용하기 예제 코드
<!DOCTYPE html>
<html>
<head>
<title>띠 계산기</title>
<script>
const rawInput = prompt('태어난 해를 입력해주세요.', '');
const year = Number(rawInput);
if (isNaN(year)) {
alert('유효한 숫자를 입력해주세요.');
} else {
const tti = '원숭이,닭,개,돼지,쥐,소,호랑이,토끼,용,뱀,말,양'.split(',');
alert(`${year}년에 태어났다면 ${tti[year % 12]} 띠입니다.`);
}
</script>
</head>
<body>
</body>
</html>위 코드는 태어난 해를 입력받아 무슨 띠인지 알려준다.
설명
-split(): 문자열을 특정 문자를 기준으로 잘라 배열로 만든다.
-isNaN(): 입력값이 숫자가 아닌 경우를 판별한다.
-템플릿 리터럴: 백틱(`)을 사용해 문자열에 변수 값을 삽입하거나 줄바꿈을 허용한다.
alert(`${year}년은 ${tti[year % 12]} 띠입니다.`);
<기본숙제>
p.139의 확인 문제 3번 문제 풀고 완전한 코드 만들어 비쥬얼 스튜디오 코드에서 실행결과 인증하기
<!DOCTYPE html>
<html>
<head>
<title>숫자 판별하기</title>
<script>
const x=Number(prompt('x를 입력하시오.',''))
if(x>10 && x<20){
alert('조건에 맞습니다.')
}
else{
alert('조건에 맞지 않습니다.')
}
</script>
</head>
<body>
</body>
</html>
반대로 조건에 맞지 않으면 조건에 맞지 않습니다.가 출력된다.
<추가숙제>
p.152의 <태어난 연도를 입력받아 띠 출력하기> 예제 실행하여 본인의 띠 출력한 화면 캡처하기
코드는 윗부분에 있음
