본문 바로가기
Frontend/Javascript

조건문과 반복문

olli2 2021. 12. 8. 17:03

조건문 - if

// if
if(조건식) {
  // 조건의 결과 참일 때 수행되는 문장;
  // 1줄인 경우 괄호({}) 생략 가능
}

// if - else
if(조건식){
  // 조건의 결과 참일 때 수행되는 문장;
} else {
  // 조건의 결과 거짓일 때 수행되는 문장;
}

// if - else if - else
if(조건식1){
  // 조건식1의 결과 참일 때 수행되는 문장;
} else if (조건식2){
  // 조건식1의 결과가 거짓이면서
  // 조건식2의 결과 참일 때 수행되는 문장;
} else {
  // 조건식1,2 모두 거짓인 경우 수행되는 문장;
}

// 중첩 if 문
if(조건식1){
  // 조건의 결과 참일 때 수행되는 문장;
  if(조건식2) {
    // 조건식1의 결과가 참이면서
    // 조건식2의 결과 또한 참일 때 수행되는 문장;
  }
} else {
  // 조건의 결과 거짓일 때 수행되는 문장;
}

 

예제 - 1

...

<script type="text/javascript">
  let max = 0;

  for (let i=1; i<=3; i++) {
  let num = parseInt(prompt(`숫자 ${i} 입력`));
  if (max < num) max = num;
  }
  document.write(`최대값 : ${max}`)
</script>

...

 

예제 - 2

...

<script type="text/javascript">
  let dbId = 'abcd';
  let dbPw = '1234';
  let inputId = prompt("아이디를 입력하세요.");
  let inputPw = prompt("비밀번호를 입력하세요.");
			
  if (inputId==dbId && inputPw==dbPw) document.write("로그인 성공")
  else {
    alert("아이디 또는 비밀번호가 일치하지 않습니다.")
    document.write("로그인 실패")
  }
</script>

...

 

예제 - 3

...

<script type="text/javascript">
  let dbId = 'abcd';
  let dbPw = '1234';
  let inputId = prompt("아이디를 입력하세요.");
  let inputPw = prompt("비밀번호를 입력하세요.");
			
  if (inputId==dbId && inputPw==dbPw){
    alert(`${inputId}님, 반갑습니다.`);
    let answer = prompt("대한민국의 수도는?");
    if (answer == '서울') document.write('정답입니다');
    else document.write('틀렸습니다. 대한민국의 수도는 서울입니다.');
    } else {
      alert("아이디 또는 비밀번호가 일치하지 않습니다.");
      document.write("종료합니다.");
    }
</script>
        
...

 

예제 - 4 : 천단위 구분 : toLocaleString() 함수 사용

...

<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>"); */
		
		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>

...

조건문 - switch

  • switch() 안의 값이 수식일 경우, 값의 결과가 정수, 실수, 문자열, 객체 값이어야 함
  • case 뒤의 value로는 반드시 하나의 값만 사용 
  • break 문이 없는 경우 해당 case에서 실행이 멈추지 않고 다음 case 까지 수행됨
  • break 없어도 되는 경우 : 여러 개 case 한꺼번에 처리할 경우
switch (수식) {
	case value1: 처리할 문장; break;
	case value2: 처리할 문장; break;
	case value3: 처리할 문장; break;
	...
	default: 처리할 문장;
}

 

예제

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>Javascript </title>
		<script type="text/javascript">
			let num = prompt("숫자를 입력하세요.");
			switch(num) {
			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>

반복문 - for / for in / forEach

for in 문

  • 배열이나 객체를 쉽게 탐색 가능
  • key값과 value 값을 뽑아내는데 유용
for(var 변수명 in 배열) {
  num = arr[i];
}

중첩 for 문

 

forEach() 함수

  • 오직 배열과 함께 사용 가능 -> 배열.forEach()
  • function()의 인수 3개 지정되어 있음
  • 3개의 인수 모두를 필수적으로 사용하지 않아도 됨
  • 사용하는 경우 순서를 잘 알고 사용
  • 첫 번째 인수 : 배열의 항목
  • 두 번째 인수 : 배열의 인덱스
  • 세 번째 인수 : 배열 그 자체
  • function(item)
  • function(item, index)
  • function(item, index, fruits)
  • 인수 이름은 상관 없음 : function(a, b, c)로 해도 됨
배열.forEach(function(){
  실행 문장
});

 

예제 - 1

...

<script type="text/javascript">
	let num = parseInt(prompt("숫자 입력"));
	let sum = 0;
	for (let i=1; i<=num; i++) {
		document.write(`i = ${i}<br>`);
		sum+=i;
	}
	document.write(`sum = ${sum}`);
</script>

...

 

예제 - 2

...

<script type="text/javascript">
	document.write('<ul><li>태그 반복 출력</li><ul>');
	
	for (let i=1; i<=10; i++) {
		document.write(`<li type="square">i = ${i}</li>`);
	}
	document.write('</ul></ul>');
</script>

...

 

예제 - 3

...

<style>
	th { background:yellow;}
	td {
		width:100px;
		text-align:center;
	}
</style>
<script type="text/javascript">
	let sum = 0;
	document.write('<table border="1"><tr><th>i</th><th>sum</th></tr>');
	for (let i=1; i<=10; i++) {
		sum+=i;
		document.write(`<tr><td>${i}</td><td>${sum}</td></tr>`);
	}
	document.write("</table>");
</script>

...

 

예제 - 4

...

<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>

...

 

예제 - 5

...

<script type="text/javascript">
	// 배열 선언 및 초기화	
	var fruits = ["사과", "포도", "복숭아"];
	
	// for in문 사용하여 배열 각 원소의 값 출력
	for (var i in fruits)
		document.write("fruits[" + i + "] = " + fruits[i] + "<br>");
</script>

...

반복문 - while / do while

 

whie 문

  • 조건식을 먼저 확인한 후 
  • 조건식이 참인 경우 문장 반복 수행
(초기값)
while(조건식) {
   // 조건식이 참일 때 반복 수행되는 문장;
   // (증감값)
}

do ~ while 문

  • 먼저 반복 수행되는 문장을 1번 수행한 후, 뒤에 있는 조건식이 참이면 계속 수행 / 거짓이면 반복문 종료
  • -> 최소 1번은 수행됨
do {
  // 반복 수행되는 문장 (최초 한 번 수행된 후, 이후로는 조건식의 결과 참일 때 수행)
} while (조건식);

 

예제 - 1

...

<script type="text/javascript">
	let img = ['<img src="image/cherry.png">', '<img src="image/bomb.png">', '<img src="image/apple.png">'];
	var i = 0;
	let num = prompt("숫자 입력");
	document.write(`<h2>총 ${num}개의 이미지 출력</h2>`);
	while(num>0) {
		if (i>=3) i=0;
		document.write(img[i]);
		i++;
		num--;
	}
</script>

...

 

예제 - 2

...

<script type="text/javascript">
let cnt = 0;
	do {
		cnt++;
		alert("경고" + cnt);
		var warning = confirm("경고창을 출력하시겠습니까?");
	} while(warning);
	
	document.write("경고창 출력 횟수 : " + cnt);
</script>

...
저작자표시 비영리 변경금지

'Frontend > Javascript' 카테고리의 다른 글

함수의 개념 / 함수 선언문과 함수 표현식  (0) 2021.12.08
배열  (0) 2021.12.08
[][][] 화살표함수 객체  (0) 2021.12.08
비교연산자와 논리연산자  (0) 2021.12.07
형변환  (0) 2021.12.07

'Frontend/Javascript' Related Articles

티스토리툴바