-
제어문 (if, switch, for, while...)프론트엔드 프로그래밍/JavaScript 2022. 1. 27. 21:33
제어문
- 프로그램의 흐름을 제어
- 자바 언어와 완전 동일
if(조건식) {
조건의 결과 참일 때 수행되는 문장;
1줄인 경우 괄호({}) 없어도 됨
2줄 이상인 경우 반드시 괄호 있어야 함
}
if(조건식){
조건의 결과 참일 때 수행되는 문장;
} else {
조건의 결과 거짓일 때 수행되는 문장;
}
if(조건식1){
조건식1의 결과 참일 때 수행되는 문장;
} else if (조건식2){ // else로 넘어 왔다는 것은 조건식1에 해당이 안 된다는 의미
조건식1의 결과가 거짓이면서
조건식2의 결과 참일 때 수행되는 문장;
} else { // 주의!!!! 여기에 조건식 없음 (조건식은 if 다음에만 적음)
조건식1,2 모두 거짓인 경우 수행되는 문장;
}
중첩 if 문 : if문 안에 if문 사용
if(조건식1){
if(조건식2) {
}
} else {
}
if 문 연습문제1 : ifEx1.html
- 숫자 3개를 입력 받아서 최대값 출력
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 </title> <script type = "text/javascript"> var num1 = prompt("숫자 1 입력"); var num2 = prompt("숫자 2 입력"); var num3 = prompt("숫자 3 입력"); /* if(num1>num2 && num1>num3) max= num1; else if (num2>num3) max= num2; else max= num3; */ var max = num1; if (num2>max) max= num2; if (num3>max) max= num3; document.write("최대값 : "+ max); </script> </head> <body> </body> </html>if 문 연습문제2 : ifEx2.html
- 아이디를 “abcd”, 비밀번호를 “1234”로 입력하면 “로그인 성공” 화면에 출력
- 다른 값 입력하면 “아이디 또는 비밀번호가 일치하지 않습니다” 알림창 출력하고 “로그인 실패” 화면에 출력
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>조건문 연습문제2</title> <script type="text/javaScript"> var id='abcd'; var pwd='1234'; var id2=prompt("아이디 입력"); var pwd2=prompt("비밀번호 입력"); if(id==id2 && pwd==pwd2){ document.write("로그인 성공"); } else{ document.write("로그인 실패"); } </script> </head> <body> </body> </html>중첩 if 문 연습문제3 : ifEx3.html
- ifEx2에 추가
- 아이디와 비밀번호 일치할 경우에
- “~(id)님 반갑습니다” 알림창 출력
- 수도 알아맞히는 문제 및 결과 출력
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>중첩 if문 연습문제</title> <script type="text/javascript"> var id='abcd'; var pwd='1234'; var id2=prompt("아이디 입력"); var pwd2=prompt("비밀번호 입력"); var sudo='서울'; if(id==id2 && pwd==pwd2){ alert(id+"님 반갑습니다"); var sudo2=prompt("대한민국의 수도는?"); if(sudo==sudo2){ document.write("정답입니다"); } else{ document.write("틀렸습니다. 대한민국의 수도는 서울입니다") } } else{ alert("아이디 또는 비밀번호가 일치하지 않습니다") document.write("종료합니다"); } </script> </head> <body> </body> </html>
if 문 연습문제4 : ifEx4.html
- 상품번호와 주문수량을 입력받아서 주문액, 할인액, 총지불액을 구하여 출력하는 프로그램 작성
- 1 노트북 1200000
- 2 운동화 100000
- 할인액
- 주문액이 백만원 이상이면 주문액의 10%
- 5십만원 이상 백만원 미만이면 5%
- 5십만원 미만 0%
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 if문 연습문제 </title> <script type="text/javascript"> var prdNum = prompt("상품번호 입력", "1 또는 2 입력"); //1 또는 2 입력한 경우 if(prdNum == 1 || prdNum == 2){ let prdName, prdPrice, prdQty, amount, discount, total; // 입력한 상품번호에 따라 상품명, 가격 지정 if(prdNum == 1){ prdName = "노트북"; prdPrice = 1200000; } else { prdName = "운동화"; prdPrice = 100000; } // 주문수량 입력 prdQty = prompt("주문수량 입력"); // 주문액 구하기 amount = prdPrice * prdQty; // 할인액 구하기 if(amount >= 1000000) discount = amount * 0.1; else if(amount >= 500000) discount = amount * 0.05; else discount = 0; // discount=0으로 초기화 했으면 이 문장 필요 없음 // 총지불액 구하기 total = amount - discount; // 결과 출력 /* document.write("상품명 : " + prdName + "<br>"); document.write("가격 : " + prdPrice + "원<br>"); document.write("주문수량 : " + prdQty + "개<br>"); document.write("주문액 : " + amount + "원<br>"); document.write("할인액 : " + discount + "원<br>"); document.write("총지불액 : " + total + "원<br>"); */ // 천단위 구분 : toLocaleString() 사용 document.write("상품명 : " + prdName + "<br>"); document.write("가격 : " + prdPrice.toLocaleString() + "원<br>"); document.write("주문수량 : " + prdQty.toLocaleString() + "개<br>"); document.write("주문액 : " + amount.toLocaleString() + "원<br>"); document.write("할인액 : " + discount.toLocaleString() + "원<br>"); document.write("총지불액 : " + total.toLocaleString() + "원<br>"); } else { alert("질못 입력하였습니다"); document.write("종료합니다"); } </script> </head> <body> </body> </html>
상품번호 입력
유효성 검사
ok - 주문수량 입력 받고 / 계산/출력
no - 잘못 / 종료
상품번호 입력
if(){
주문수량 입력
계산
출력
}else{
잘못 / 종료
}
입력된 상품번호 유효성 검사 방법
방법1
// 1 또는 2입력한 경우
if(prdNum == “1” || prdNum ==” 2”){
주문수량 입력
계산
출력
} else {
//잘못 입력
// 종료
}
// 1도 아니고 2도 아닌 경우
if(prdNum != “1” && prdNum != “2”){
//잘못 입력
// 종료
} else {
주문수량 입력
계산
출력
}
천단위 구분 : toLocaleString() 함수 사용
prdPrice.toLocaleString()
switch 문
- 형식
주의
- 수식으로는 값의 결과가 정수, 실수, 문자열, 객체 값이어야 함
- case 뒤의 value로는 반드시 하나의 값만 사용
- case 다음에는 콜론(:) 사용 (세미콜론 아님)
- break 문이 없는 경우 해당 case에서 실행이 멈추지 않고 다음 case 까지 수행됨
- break 없어도 되는 경우 : 여러 개 case 한꺼번에 처리할 경우
- case 100:
- case 95; grade = “A+”; break;
switch 문 연습문제 : switchEx.html
- 숫자 입력 받아서 해당 이미지 출력
- “다음의 숫자를 입력하세요”, “1 또는 2 또는 3”
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 switch 문</title> <script type="text/javascript"> var input = prompt('다음의 숫자를 입력하세요.', '1 또는 2 또는 3'); switch(input) { case '1' : document.write('<img src="image/lizard.png">'); break; case '2' : document.write('<img src="image/lizardon.png">'); break; case '3' : document.write('<img src="image/megalizardon.png">'); break; default : alert('잘못 입력했습니다.'); } </script> </head> <body> </body> </html>
정수 (숫자)로 형변환
prompt() 대화상자에서 입력된 숫자는 문자로 인식
- 더하기 연산을 할 경우 문자 연산으로 처리
- 숫자 연산 : 5 + 10 = 15
- 문자 연산 : 5 + 10 = 510 (문자 연결)
숫자로 연산하기 위해서는 숫자로 형 변환이 필요
- Number() : 숫자형으로 변환
- parseInt() : 정수형으로 변환
- 예제 : typeConversion.html
반복문
- for 문 / for in 문 / forEach()
- while 문
- do ~ while 문
for 문 연습문제1 - forEx1.html
- 다음과 같이 출력
- sum = 55
for 문 연습문제2 - forEx2.html
- 태그 반복 출력
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 for 문 - 태그 반복 출력</title> <script type="text/javascript"> document.write('<ul><li>태그 반복 출력</li><ul><br>'); for(let i = 1; i <= 10; i++) { // document.write('<li type="square"> i =' + i + '</li>'); //document.write("<li type='square'> i =" + i + '</li>'); document.write("<li type=\"square\"> i =" + i + '</li>'); } document.write('</li></ul></ul>'); </script> </head> <body> </body> </html>따옴표 특수 문자
- 문자열에 사용하는 경우 큰따옴표, 작은따옴표 구별 없이 사용 가능
- document.write(“”);
- document.write(““””); //동일한 따옴표를 중첩해서 사용할 경우 오류
- document.write(“‘’”);
- document.write(‘“”’);
- 큰따옴표로 사용할 경우 특수문자로 사용 : \”
- document.write(“\”문자열\””);
- HTML : <ul type=”square”>
- “<ul type=\”square\”>”
특수 문자
- \” : 큰 따옴표 (“)
- \’ : 작은 따옴표 (‘)
- \\ : 역슬래시 (\)
- \n : 줄바꿈
- \t : 탭
for 문 연습문제3 - forEx3.html
- i 값과 sum값을 테이블 형태로 출력
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트</title> <style> th{ background: yellow;} td{ width:100px; text-align: center; }</style> <script type="text/javascript"> var sum = 0; document.write("<table border=\"1\">"); document.write("<tr><th>i</th><th>sum</th></tr>") for(var i = 1;i<=10; i++){ sum+=i; document.write("<tr><td>"+i+"</td><td>"+sum+"</td></tr>"); } document.write("</table>"); </script> </head> <body> </body> </html>for in 문
- 배열이나 객체를 쉽게 탐색 가능
- for(var 변수명 in 배열) {
num = arr[i];
}
- 예제 : forIn.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 for in 문</title> <script type="text/javascript"> // 배열 선언 및 초기화 var fruits = ["사과","포도","복숭아"]; //for in문 사용해서 배열의 각 초기화 for(var i in fruits) document.write("fruits["+i+"]="+fruits[i]+"<br>"); </script> </head> <body> </body> </html>forEach() 함수
- 배열.forEach()
- 배열.forEach(function(){
실행 문장
- });
- function()의 인수 3개 지정되어 있는데 사용안 해도 되고
- 사용하는 경우 순서를 잘 알고 사용
- 첫 번째 인수 : 배열의 항목
- 두 번째 인수 : 배열의 인덱스
- 세 번째 인수 : 배열 그 자체
- function(item)
- function(item, index)
- function(item, index, fruits)
- 인수 이름은 상관 없음 : function(a, b, c)로 해도 됨
- 예제 : forEach.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 forEach()</title> <script type="text/javascript"> var fruits = ["사과", "포도", "복숭아"]; fruits.forEach(function(item){ document.write(item + "<br>"); }); document.write("<hr>"); fruits.forEach(function(item, index){ document.write(index + " " + item + "<br>"); }); document.write("<hr>"); fruits.forEach(function(item, index, fruits){ document.write(index + " " + item + " " + fruits + "<br>"); }); fruits.forEach(function(item, index, fruits){ console.log(index, item, fruits); }); </script> </head> <body> </body> </html>중첩 for 문
중첩 for문 연습문제 : nestedForEx.html
- apple.png 사용
- 그림과 같이 이미지 출력
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 중첩 for 문</title> <script type="text/javascript"> for(var i =0; i<4; i++){ for(var j=0; j<7;j++){ document.write('<img src =\"image/apple.png\">'); // \" 특수문자 사용 } document.write("<br>"); } document.write("<hr>"); document.write("<br>"); for(var i = 1 ; i<=4 ; i++) { for(var j=1 ; j<=7 ; j++) { if(j%2==1) document.write('<img src = \"image/apple.png\">'); else document.write('<img src = \"image/bomb.png\">'); } document.write("<br>"); } </script> </head> <body> </body> </html>- bomb.png 사용
whie 문
- 조건식을 먼저 확인한 후
- 조건식이 참인 경우 문장 반복 수행
(초기값)
while(조건식) {
조건식이 참일 때 반복 수행되는 문장;
(증감값)
}
while 문 연습문제 : whileEx.html
- 입력한 수만큼 이미지 출력
- 이미지 출력 순서 : cherry bomb apple
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 while 문</title> <script type="text/javascript"> var num = parseInt(prompt("숫자 입력")); var x = 1; document.write("<h2>총 " + num + "개의 이미지 출력 <h2>") while(x<=num) { if(x % 3 == 1) document.write("<img src = 'image/cherry.png'>"); else if(x % 3 == 2) document.write("<img src = 'image/bomb.png'>"); else document.write("<img src = 'image/apple.png'>"); x++; } </script> </head> <body> </body> </html>do ~ while 문
형식
do {
반복 수행되는 문장 (조건식의 결과 참일 때 수행)
} while (조건식);
- 먼저 반복 수행되는 문장을 1번 수행한 후
- 뒤에 있는 조건식을 보고서 참이면 계속 수행하고
- 거짓이면 반복문 종료
- 따라서, 최소 1번은 수행됨
do ~ while 문 연습문제 : doWhileEx.html
- [취소] 버튼 누를 때까지 경고창 출력
- 경고창 출력 횟수 출력
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>자바스크립트 do ~ while 문</title> <script type="text/javascript"> var count = 0, answer; do { count++; alert('경고' + count); answer= confirm('계속 경고창을 보시겠습니까?'); }while(answer); document.write('경고창 출력 횟수: '+ count); </script> </head> <body> </body> </html>'프론트엔드 프로그래밍 > JavaScript' 카테고리의 다른 글
브라우저 객체 모델 (window, history, location, navigator) (0) 2022.01.27 자바스크립트 객체 (Object) > 내장 객체 (Date, Array, Math, String) (0) 2022.01.27 변수 (var, let, const) + 연산자 + 데이터 타입 (0) 2022.01.27 데이터 출력(alert, console.log, write), 입력 방법(confirm, prompt) (0) 2022.01.26 자바 스크립트 (JavaScript)란? + 기본구조 및 사용법 (0) 2022.01.26