웹 스터디

코스 전체목록

닫기

반복문

본 수업은 폐지 예정입니다. 자바스크립트 언어 수업웹브라우저 자바스크립트로 수업이 리뉴얼 되었기 때문에 이것을 이용해주세요.

반복문(loop, iteration)은

  • 반복적인 작업을 수행
  • 조건이 프로그램을 똑똑하게 만든다면, 반복은 프로그램을 강력하게 만듬
  • 종료되는 조건을 잘못 지정하면 무한반복에 빠짐 - 가장 심각한 오류 중의 하나
  • for, while 문이 있음

형식 - for

for( 초기화 ; 반복조건 ; 반복코드 ) {
     반복시 실행되는 로직
}

example1.html - (jsfiddle, github)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<script>
			for (var i = 0; i < 10; i++) {
				document.write(i);
				document.write('<br />');
			}
		</script>
	</body>
</html>

형식 - while

while(반복조건) {
    반복시 실행되는 로직
}

example2.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<script>
			var i = 0;
			while (i < 5) {
				document.write(i);
				document.write(',');
				i++;
			}
		</script>
	</body>
</html>

break : 반복을 종료한다.

example3.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<script>
			var i = 0;
			while(true) {
				if (i == 3) {
					break;
				}
				document.write("The number is " + i);
				document.write("<br />");
				i++;
			}
		</script>
	</body>
</html>

continue : 현재 로직을 종료하지만 반복은 유지한다

example4.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<script>
			for ( i = 0; i <= 10; i++) {
				if (i == 3) {
					continue;
				}
				document.write("The number is " + i);
				document.write("<br />");
			}
		</script>
	</body>
</html>

반복문의 중첩

example5.html - (jsfiddlegithub)

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
	</head>
	<body>
		<script>
			for ( i = 0; i < 10; i++) {
				for ( j = 0; j < 10; j++) {
					document.write(i + '' + j + '<br />');
				}
			}
		</script>
	</body>
</html>

참고

댓글

댓글 본문
  1. sarah
    안녕하세요. 자바스크립트를 배우고 있는 학생입니다. 숙제가 있는데, 통 모르겠어서
    선배님들의 도움을 받고자 여기 글 올립니다.

    제발 도와주세요.

    메모리 카드게임에 대한 프로그램을 만들어야 하거든요. values, variables, arrays, iteration, validation, sum, count, minimum, maximum plans, swapping, shuffling, cycle position plan, sorting, tallying, searching, recursion 기능을 사용해서 자바스크립트를 만드는 겁니다.


    카드는 세로4줄 가로13줄로 카드가 뒤집혀져 있고, 2명이서 하는 게임으로 카드는 각자 2장을 열어볼 수가 있고, 그 2장이 같은 rank와 color이면(예를 들어 하트 6과 다이아몬드 6, 클럽 퀸 과 스페이드 퀸 또는 둘다 조커) 그 2장은 다시 뒤집히지 않고 선택한 사람의 점수에 포함됩니다. 아니면 다시 카드는 덥히는 게임입니다. 같은 카드쌍을 가져간 사람은 한번 더 기회가 있고 실폐하면, 다음 사람으로 넘어갑니다. 카드를 많이 가진자가 승리하며, 마지막 카드쌍을 가져가게 되면 게임은 종료가 됩니다.
    각자 카드 선택에 60초의 시간이 주어지며 그 시간 동안 2카드를 선택해야 합니다.
    결과는 60초 동안 각각의 카드쌍 매칭수에 따라서 계산됩니다.

    브라우저에 표시되는 것은:
    Memory Game ( Time left: 60초에서 0까지 카운트 다운, seconds)--> 타이틀
    세로 4장 가로 13장의 카드 (총 52장)가 놓여있고,
    결과적으로 각자가 찾은 카드를 확인하라는 팝업창이 뜹니다. 그럼 OK를 누르게 되면 그 창은 사라집니다.

    이 메모리 게임은 3개의 콘트롤 버튼이 있습니다. Stop game/ Flip Cards/ Show cards
    60초에서 0까지 카운트다운되면 자동적으로 스탑됩니다.

    html 파일로 부탁드립니다. 소스는 이메일 주시면 보내드리겠습니다.
    sarah7122@naver.com
  2. leeta
    예제 1번
    document.write(i);
    이부분 강의 도중 0으로 바꾸시던데 0으로 바꾸면
    0
    0
    0
    0
    0
    0
    0
    .
    .
    .
    요렇게 되는데 그냥 i가 아닌가요?
  3. RainbowEyes
    그동안 C#을 해오다보니.. 혹시나 해서 foreach(var x in y) 를 해봤는데 안되더군요..
    그런데 for(var x in y)를 했더니 잘 돌아가더군요.. 혹시 이렇게 문법적으로 조금씩 발전된 부분들이 많이 존재하나요?
  4. Lee, Junghoon
    '+' 더하기 기호 하나만 잘 못 되어도 코드가 실행되지 않네요.
    잘 배웠습니다.
  5. Chris
    write(bla bla); 로 쓰시면 에러는 안날꺼에요
  6. egoing
    아 jsfiddle가 이 기능을 지원하지 않나봐요. 알려주셔서 고맙습니다 :)
    2013년 4월 24일 수요일에 Disqus님이 작성:
    대화보기
    • hazz
      document.write is disallowed in JSFiddle envioriment and might break your fiddle.-------------------------------------------------------------------------------------------------------위와 같은 오류문구가 뜨네영~
      대화보기
      • hazz
        이고잉님 질문이 있는데요~
        jsfiddle이 안되는거 같아서요 example1~5번 모두다요 동영상에는 활성화가 잘되는데한번 따라하다가 발견해서 글남겨요~
      • greente
        강좌 잘 보고 있어요.. 정리 잘 되어 있어서 좋네요
      • egoing
        어이쿠 고맙습니다 :)
        대화보기
        • DuRuKang
          강좌 잘 수강했습니다.^^문서 중간에 오타가 있습니다.형식 - whil
        버전 관리
        egoing@gmail.com
        현재 버전
        선택 버전
        graphittie 자세히 보기