◎ if문이란?
▷ 피연산자 2개의 값을 비교해서 true나 false로 결과 값을 반환합니다.
▷ 하나의 if ~ else문 안에 다른 if ~ else문을 넣을 수 있습니다.(중첩 if문)
자바에서 if 사용방와 동일하네요!!
◎ if문을 이용한 자바스크립트 예시1
<body>
<script>
var userNumber = prompt("숫자를 입력하세요.");
if(userNumber % 3 === 0){
alert("3의 배수입니다.");
} else{
alert("3의 배수가 아닙니다.");
}
</script>
</body>
◎ if문을 이용한 자바스크립트 예시2
<body>
<script>
var userNumber = prompt("숫자를 입력하세요.");
if(userNumber != null){
if(userNumber % 3 === 0){
alert("3의 배수입니다.");
} else{
alert("3의 배수가 아닙니다.");
}
} else{
alert("입력이 취소됐습니다.");
}
</script>
</body>
◎ if문을 이용한 자바스크립트 예시3
<body>
<script>
var userNumber = prompt("숫자를 입력하세요.");
if(userNumber != null){
(userNumber % 3 === 0 ) ? alert("3의 배수입니다.") : alert("3의 배수가 아닙니다.");
}
else{
alert("입력이 취소됐습니다.");
}
</script>
</body>
예시 2번과 3번은 똑같은 예문이지만 다르게 표현한 것입니다!
if문의 다른 사용법(조건 연산자) : 조건식 ? true일 때 실행 : false일 때 실행
조건 연산자로 사용해도 되지만 가독성이 좋으려면 if~ else문으로 사용하는 것이 더 좋네요!!
◎ if문을 이용한 자바스크립트 예시4
<body>
<script>
var numberOne = prompt("50미만인 숫자를 입력하세요");
var numberTwo = prompt("50미만인 숫자를 입력하세요");
if(numberOne < 10 || numberTwo < 10){
alert("숫자 2개 중에서 최소한 하나는 10미만입니다.");
} else{
alert("숫자 2개 중에서 10미만인 수가 없습니다.");
}
</script>
</body>
or 연산자를 사용해서 둘 중 하나가 참이면 결과가 출력되게끔 만들었습니다!
◎ if문을 이용한 자바스크립트 예시5
<body>
<script>
var numberOne = prompt("50미만인 숫자를 입력하세요");
var numberTwo = prompt("50미만인 숫자를 입력하세요");
if(numberOne < 50 && numberTwo < 50){
alert("숫자 2개 모두 50미만이군요.");
} else{
alert("조건에 맞지 않는 숫자가 있습니다.");
}
</script>
</body>
and 연산자를 사용해서 둘 다 참이면 결과가 출력되게끔 만들었습니다!
◎ switch문을 이용한 자바스크립트 예시1
switch문도 앞에서 다뤘던 자바의 switch문과 동일해서 별도로 설명하지 않겠습니다!!
<body>
<script>
var session = prompt("관심 세션을 선택해 주세요. 1-마케팅, 2-개발, 3-디자인")
switch(session){
case "1" : document.write("<p>마케팅 세션은 <strong>201호</strong>에서 진행됩니다.</p>");
break;
case "2" : document.write("<p>개발 세션은 <strong>203호</strong>에서 진행됩니다.</p>");
break;
case "3" : document.write("<p>디자인 세션은 <strong>205호</strong>에서 진행됩니다.</p>");
break;
default : alert("잘못 입력했습니다.");
}
</script>
</body>
◎ 실습 문제1
입장객 수와 한 줄에 몇 명씩 앉을 것인지 입력받고 총 몇 줄이 필요한지 계산하는 자리배치도를 만드세요.
입력할 값의 변수 : 입장객의 수(memNum), 한 줄에 앉은 사람 수(colNum)
계산할 값의 변수 : 필요한 줄의 개수(rowNum)
<body>
<script>
var memNum = prompt("입장객은 몇 명인가요?");
var colNum = prompt("한 줄에 몇 명씩 앉습니까?");
var rowNum;
if(memNum % colNum === 0){
rowNum = parseInt(memNum / colNum);
} else{
rowNum = parseInt(memNum / colNum) + 1;
}
document.write("모두 " + rowNum + "개의 줄이 필요합니다.");
</script>
</body>
prompt()문은 아래와 같이 입력값을 받을 수 있도록 합니다.
parseInt(prompt())는 입력받은 값을 숫자로 변환해서 값을 저장합니다.
◎ 실습 문제2
점수를 입력받으면 학점을 출력하는 코드를 작성하시오.
A학점 : 90점이상
B학점 : 80~89점
C학점 : 70~79점
D학점 : 60~69점
F학점 : 60점 미만
<body>
<script>
var name = prompt("이름을 입력하세요");
var score = parseInt(prompt("성적을 입력하세요(0~100)"));
var grade;
if(score > 100 || score < 0){
document.write("<p>잘못된 값이 입력되었습니다.</p>");
} else{
if(score >= 90){
grade = 'A';
} else if(score >= 80){
grade = 'B';
} else if(score >= 70){
grade = 'C';
} else if(score >= 60){
grade = 'D';
} else {
grade = 'F';
}
document.write("<p>" + name + " 학생의 점수는 <span id = des>" + score + "</span>점 입니다.</p>");
document.write("<p>따라서 ,<span id = des>"+ grade + "</span>등급입니다.</p>");
}
</script>
</body>
자바스크립트는 자바와 코드가 다른 부분이 조금씩 있는데요
조건문은 동일하게 사용하면 됩니다!!
많은 분들의 피드백은 언제나 환영합니다! 많은 댓글 부탁드려요~~
'FrontEnd > java script' 카테고리의 다른 글
| [java script] 객체 1(object, 내장 객체 Array) (0) | 2022.12.16 |
|---|---|
| [java script] 자바 스크립트 함수 2(function) (0) | 2022.12.16 |
| [java script] 자바 스크립트 함수 1(function) (0) | 2022.12.15 |
| [java script] 자바스크립트 반복문(for, while) (0) | 2022.12.15 |
| [java script] 자바스크립트 기본 문법(변수, 자료형 등) (2) | 2022.12.15 |
