devil cat everdevel character

프로그래머가 아니던 시절 만들기 시작한 에버디벨 !
첫 오픈 한달과 최근 한달의 방문자수를 비교해보니 무려 190배 이상 증가했습니다.
그 사이 어느새 1년 9개월의 경력을 갖고 있는 프로그래머가 되었습니다.
실무의 경험을 담아 더 많은 내용으로 올해 언젠가 에버디벨이 책으로 나옵니다.
{HTML5, CSS3, jQuery, MySQL5, PHP7(PDO, OOP, MVC)}
아무것도 몰라도 컴퓨터만 있다면 하나부터 학습하며 발전해 나가는 자신을 보는 감동을 드리겠습니다.

disney Teyon kin

for 문

이번 시간에는 for 문에 대해서 알아봅시다.

for문도 while문처럼 반복문입니다.

for문은 조건식 안에서 (변수 선언 및 초기값 설정; 조건식; 증감식)으로 이루어져 있으며 초기값이 조건식에 참인 동안 명령문을 실행 합니다.

구조는 다음과 같습니다.

for문의 구조

for(변수 선언 초기값 설정;조건식;증감식){
  조건이 참인 동안 실행할 명령문;
}

그럼 실제 소스로 구조를 보겠습니다. 다음 소스는 1부터 10까지를 출력하는 것입니다.

for(a = 1; a <= 10; a++){
  document.write(a);
}

for문의 실행 순서

1. (a = 1) 변수 선언 및 초기값 설정, 변수 a 선언 및 값을 1로 선언.

2. (a <= 10) 조건 실행, a가 10과 같거나 작을 동안에 명령문을 실행

3. (document.write(a)) 2번에서 명령문을 실행 하므로 document.write(a)에 의해 화면에 1출력

4. (a++) 증감식 실행 하므로 a값은 1에서 2로 변경

5. (a <= 10) 조건 실행, a가 10과 같거나 작을 동안에 명령문을 실행

6. (document.write(a)) 2번에서 명령문을 실행 하므로 document.write(a)에 의해 화면에 2출력

7. (a++) 증감식 실행 하므로 a값은 2에서 3로 변경

8. (a <= 10) 조건 실행, a가 10과 같거나 작을 동안에 명령문을 실행

6. (document.write(a)) 2번에서 명령문을 실행 하므로 document.write(a)에 의해 화면에 3출력

7. (a++) 증감식 실행 하므로 a값은 3에서 4로 변경

.

.

.

.

(a++) 증감식 실행 하므로 a값은 9에서 10로 변경

10 이므로 이제 for문에서 빠져 나옴.

혹시 이해 안가시는 분을 위해 그림으로 설명

그림으로 보는 for문 순서

for

아이패드를 통해서 그려보았는데요. 번호 순 대로 for문은 작동합니다.

실제 예문을 통해서 테스트 해봅시다.

<!DOCTYPE html>
<html>
<head>
<title> 웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
for(a = 1; a <= 10; a++){
  document.write(a);
}
</script>
</head>
<body>
</body>
</html>

for문 속의 for문 = 이중 포문

이중포문이라 하면 괜히 어렵게 들릴수도 있지만 그냥 포문 안에서 또 포문을 선언하는 것입니다. ^^

즉 for문의 조건이 만족하여 명령문을 실행하는데 그 명령문이 for문 인거죠^^

구조는 다음과 같습니다.

이중포문 구조

for(변수 선언 및 초기값 설정; 조건식; 증감식){
  for(변수 선언 및 초기값 설정; 조건식; 증감식){
  }
}

첫 번째 포문에서 조건에 맞으면 두번째 포문이 작동하며 두번째 포문이 조건을 만족하는 동안 두번째 조건의 명령문을 실행하며 두번째 포문의 조건이 끝나면 다시 첫번째 포문으로 돌아가서 명령을 실행하여 두번째 포문이 실행을 합니다. 이렇게 쓰니 저도 무슨 소리인지 모르겠네요.

이해 가능한 간단한 소스를 작성해보겠습니다.

for(a = 1; a<= 3; a++){
document.write("<br />"+a+"첫번째 포문에 의해 출력 되었습니다. <br /><br />");

for(b = 1; b<=3;b++){


document.write(b+"두번째 포문에 의해 출력 되었습니다. <br />");

}

}

위의 소스에서 파란색은 첫번째 포문이고, 빨간색은 두번째 포문입니다. 파란색 박스는 첫번째 포문이 작동을 할때의 명령문이구요.

빨간색 박스는 두번째 포문이 작동할때의 명령문 입니다.

첫 번째 for문의 a가 1이고, 조건식에 의해 a가 3보다 같거나 작으면, 파란색 박스를 실행합니다.

그럼 지금 a가 1이기 때문에 현재 조건에 만족을 하고 있으므로 파란색 박스를 실행 합니다.

파란색 박스를 보면 첫번째 포문에 의해 출력 되었습니다 라는 문구가 출력문에 의해 출력 되고 그 후 두번째 포문으로 들어 갑니다.

두번째 포문에 보면 b는1이고 b가3보다 작을 동안 이라고 쓰여져 있습니다.

그러므로 조건에 만족하므로 빨간색 박스를 실행합니다.

빨간색 박스를 실행을 한다면 두번째 포문에 의해 출력 되었습니다. 라는 문구를 출력문에 의해 실행을 합니다.

그 다음 실행 해야 하는 것은 증감식 입니다. b++를 실행하면

b는 1에서 2가 되어 다시 두번째 포문에 의해 출력 되었습니다.라는 문구를 출력 하며 증감식에 의해 b는 3이 됩니다.

조건은 3보다 같거나 작을 동안 이기 때문에 3은 3과 같거나 작으므로

다시 두번째 포문에 의해 출력 되었습니다.라는 문구를 출력합니다.

다시 증감식에 의해서 b는 3에서 4가 됩니다. 조건에 만족하지 않으므로 수행중이던for문에서 빠져 나가게 됩니다.

그럼 첫번째 포문의 a가 1일때의 실행문을 모두 실행을 한것 입니다.

그러므로 첫번째 실행문을 실행했으므로 증감식 a++가 대입 됩니다. 그럼 a값이 1이기 때문에 2로 변환되고

첫번째 포문의 조건인 a가 3보다 작거나 같으면에 만족하므로 다시 두번째 포문이 작동을 하게 됩니다.

그렇게 위와 같이 두번째 포문은 또 다시 처음부터 작동하여 b의 값은 다시 1이 되며

출력문을 출력 하고 증감식 의해 b는 2가 되고 조건에 참이므로 실행문을 실행 후 증감식에 의해 3이 되고

조건에 만족하므로 출력문을 출력하고 증감식에 의해 다시 4가 되어서 조건에 만족하지 않으므로 두번째 포문에서 빠져 나가게 되고

첫번째 조건문으로 돌아오게 되며 첫번째 포문에서 a 는 2이기 때문에 증감식에 의해서 a는 3이 되고 3이 된후 조건에 만족하므로

실행문을 실행하여 두번째 포문을 다시 작동하게 됩니다.

아 설명하기 힘드네요.^^

이제 실제 소스를 타이핑해서 결과물을 봅시다.

<!DOCTYPE html>
<html>
<head>
<title> 웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<style type="text/css">
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
for(a = 1; a<= 3; a++){
  document.write("<br />"+a+"저는 첫번째 포문에 의해 출력 되었습니다. <br  /><br />");
  for(b = 1; b<=3;b++){
    document.write(b+"저는 두번째 포문에 의해 출력 되었습니다. <br />");
  }
}
</script>
</head>
<body>
</body>
</html>

제가 처음에 for문을 겪을때 무슨 말인지 못알아 먹어서 모르시는 분께서 아시도록 최대한 설명을 해봤는데 잘 되었는지 모르겟네요. ㅜㅜ

그럼 이중 포문을 응용하는 구구단 소스가 있는데요. 한번 보면서 이해해 보시기 바랍니다.

이문 포문을 이용한 구구단

<!DOCTYPE html>
<html>
<head>
<title>웹 에디터에서 제이쿼리 예제가 구동이 안될시에는 파이어폭스(권장) 또는 인터넷 익스플로러를 이용해주세요.</title>
<style type="text/css">

</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.0.min.js" ></script>
<script type="text/javascript">
for(a = 2; a<=9; a++){
document.write(a+"단 <br />");
for(b = 1; b<=9;b++){
document.write(a+"*"+b+"="+(a*b)+"<br />");
}
document.write(a+"단 끝<br />");
}
</script>
</head>
<body>

</body>
</html>

이걸로 이중포문에 대한 설명을 마치겠습니다.

다음강좌는 11강.continue문과 break문 입니다. 클릭하면 다음 강좌로 이동합니다.