1.반복문의 기본문법-while
반복문(loop ,iterate)
인간은 반복적인 작업을 잘하지 못한다. 실수하고, 지루해한다. 컴퓨터는 이런 반복적인 작업을 대행하기 위해서
만들어진 기계다. 반복문은 컴퓨터에게 반복적인 작업을 지시하는 방법이다.
반복문은 while과 for 가 있다 둘 다 머머 하는 동안이라는 뜻을 갖고 있다
-반복문의 문법
while (조건(블린 데이터타입이 true인 동안 )){
반복해서 실행할 코드
}
다음 예제는 무한반복을 발생시킨다. 저장되지 않은 작업이 있다면 모두 정리한 후에 이 명령을 실행하자.
웹브라우저는 무한반복을 허용하지 않기 때문에 어느 정도 시간이 흐르면 스크립트를 종료할 것인지 물어볼 것이다.
document.write는 자바스크립트를 이용해서 웹페이지에 텍스트를 출력한다. 이것은 웹브라우저에서만 동작할 것이다.
node.js 콘솔과 같은 환경에서 실습을 한다면 console.log와 같은 메소드를 대신 사용한다.
<body> 이것 참고 하고 알아 두세용!
<!-- //1번 -->
kim<br/>
kim<br/>
kim<br/>
<script type="text/javascript">
//2번
document.write("sun young <br/>");
//1번문과 2번문은 깉다 document.write=웹페이지 출력 명령 코드이다
</script>
</body>
<script type="text/javascript">
whlie(true){
document.write("sun young <br/>");
}
<script/>
// 이렇게 하면 무한 루프 가되어 버린다
/*while문은 while문 뒤에 따라오는 괄호 안의 조건이 참(true)면 중괄호 안의 코드 구간을 반복적으로 실행한다. 조건이 false면 반복문이 실행되지 않는다. 여기서 true와 false는 종료조건이 되는데, 이 값을 변경하는 것을 통해서 반복문을 종료시킬 수 있다. 반복문에서 종료조건을 잘못 지정하면 무한반복이 되거나, 반복문이 실행되지 않는다.*/
/*컴퓨터가 sun young 이값을 출력하고자 최선을 다할 것이다
컴퓨터 입장에서는 이작업이 끝나지 않는 것 그래서 사용자가 브라우져를
사용할 수 없는 상황을 초래한다 그러므로 강제로 실행 종료한다
*/
2.반복조건
반복문의 문법을 해석해보자.아래의 반복문은 i의 값을 1씩 순차적으로 증가시킴으로서 반복의 지속 여부를 결정하고 있다.
주석으로 첨부한 설명을 주의깊게 살펴보자.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script type="text/javascript"> var i = 0; // 종료조건으로 i의 값이 10보다 작다면 true, 같거나 크다면 false가 된다. while(i < 10){//boolean값 결정 // 반복이 실행될 때마다 coding everybody <br />이 출력된다. <br /> 줄바꿈을 의미하는 HTML 태그 document.write('coding everybody'+i+' <br />'); // i의 값이 1씩 증가한다. i++ //i=i+1; } </script> </body> </html> | cs |
// 프로그램을 숫자 카운팅할 때 0부터 시작한다
3.for문
형식
for(초기화; 반복조건; 반복이 될 때마다 실행되는 코드){
반복해서 실행될 코드
}
while과 for문의 비교
var i = 0
while(i < 10){
document.write('coding everybody'+i+' <br />');
i++
}
while= 1. 언제 까지 반복할것인지의 초기화 시키는 기준이있고
2.값을 갱신해주는 반복실행부분
3. 반복을 진행 할것인지의 반복조건
while은 이 세가지 부분이 다떨어 져있다 코드가 저그을 때는 상관없지만 많아지면 찾기도 힘들지만
변수 이름 또한 겹칠 수 가 있다
이패턴을 하나의 문법 적인 요소로 합쳐놓은 것이 for문이다 .
for문 이해 하는 그림
for문은 제일 먼저 '초기화'를 한다. 위의 예제에서 초기화는 var i = 0;이다. 즉 변수 i의 값을 0으로 설정한 것이다. 그 다음에는 '반복조건'인 i < 10이 실행된다. 현재 i의 값은 0이다. 그렇기 때문에 이 조건은 참이다. 반복조건이 참이면 중괄호 안의 내용이 실행된다. i의 값이 0이기 때문에 'coding everybody0<br />'이라는 텍스트가 출력된다. '반복해서 실행될 코드'의 실행이 끝나면 '반복이 될 때마다 실행되는 코드'가 실행된다. i++는 현재 i의 값에 1을 더하라는 의미다. 현재 i의 값은 0이다. 따라서 i++의 결과로 i는 1이 되었다. 그리고 '반복조건'이 실행된다. 현재 i의 값은 1이기 때문에 i < 10은 참이다. 다시 '반복해서 실행될 코드'가 실행된다. 그렇게 반복해서 작업이 실행된다. 이 과정에서 i의 값은 반복 할 때마다 1씩 증가한다. 결국 i의 값이 10이 되는 순간 i < 10을 충족시키지 못하게 되고 반복문은 종료된다.
4.반복문의 효용성(반복문이 없다면)
coding everybody를 10번 반복해서 출력하고 싶다고 한다면 아래와 같이 코드를 작성하면 된다.
document.write('coding everybody');document.write('coding everybody');document.write('coding everybody');document.write('coding everybody');document.write('coding everybody');document.write('coding everybody');document.write('coding everybody');document.write('coding everybody');document.write('coding everybody');document.write('coding everybody');document.write('coding everybody');이 정도의 작업은 복사&붙여넣기를 이용해서도 할만하다. 하지만 좀 더 큰 규모의 데이터를 다뤄야 한다면 반복문의 효용이 부각되기 시작한다.
예를들어서 'coding everybody'를 1천번 출력해야 한다면 위의 예제와 아래 예제의 코드 분량에 큰 차이가 생길 것이다.
var i = 0;while(i < 10){
document.write('coding everybody <br />');
i++;
}
만약 반복문 없이 coding everybody 뒤에 숫자를 1부터 10까지 붙이고 싶다면 아래와 같이 코드를 작성해야 할 것이다.
행마다 숫자를 바꿔야 하기 때문에 Copy & Paste도 할 수 없다.
document.write('coding everybody 1<br />')
document.write('coding everybody 2<br />')
//중략
document.write('coding everybody 9<br />')
document.write('coding everybody 10<br />')
반복문에서는 아래와 같이 하면 된다.
var i = 0;
while(i < 10){
document.write('coding everybody '+i+'<br />');
i++;
}
coding everybody 뒤에 붙는 숫자를 2의 배수하고 싶다면 어떻게 해야할까? 반복문이 없다면 한줄 한줄 수정해야 할 것이다.
반복문에서는 아래와 같이 내용을 조금만 변경하면 된다.
var i = 0;
while(i < 10){
document.write('coding everybody '+(i*2)+'<br />');
i++;
}
5.반복문의 제어
break(강제로 종료하고 싶을때)
continue
6.반복문의 중첩사용과 디버거
반복문 안에는 다시 반복문이 나타날 수 있다. 다음 예제를 보자. 다음 예제는 00, 01, 02....99 까지를 화면에 출력한다.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | </html> <!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <script type="text/javascript"> // 0부터 9까지 변수 i에 순차적으로 값을 할당 for(var i = 0; i < 10; i++){ // 0부터 9까지의 변수를 j의 값에 순차적으로 할당 for(var j = 0; j < 10; j++){ // i와 j의 값을 더한 후에 출력 // String은 숫자인 i와 j의 데이터 타입을 문자로 형태를 변환하는 명령이다. // String()을 제거하고 실행해보면 의미가 좀 더 분명하게 드러날 것이다. document.write(String(i)+String(j)+'<br />'); //i+j를 하면 안된다! 숫자+숫자이기때문 문자로 타입을 변환시킨다 } } </script> </body> </html> |
단순히 글자를 반복적으로 출력하기 위해서 반복문을 사용한다고 생각 할 수도 있다. 하지만 반복문의 진가는 배열과 결합했을 때 나타난다.
다음 토픽인 배열에서 반복문의 진가를 살펴보자.
위코드를 그림으로 표현
디버그(크롬 개발자도구에있음)오류를 제거하는 행위 버그=오류
디버거는 그것을 도와주는 도구
디버거 사용 방법
개발 자 도구(f12)에 들어가서 Source 누르시고 드렁가서 f5를 누르거나 파일 이름을 클릭 하시면 우리가 작성한 코드를 볼 수 있다
그다음 (번호)라인번호를 클리가하시면 Brakpoint가 걸리는데 그상태에서 5를 누르면 밑에 그림의 화면이 보인다 보충 설명 참고 하시면 된다
'생활코딩 JavaScript' 카테고리의 다른 글
| 배열-1.배열의 문법 2.배열의 효용성 3.배열의 사용-배열과 반복문 4.배열의 조작-추가 5.배열의 조작-제거 ,정렬 (0) | 2018.11.19 |
|---|---|
| 함수-1함수란? 2.함수의 효용성 3.함수 입력4.함수쳘력5.다양한 함수 (0) | 2018.11.18 |
| 조건문-4.논리연산 5.Booklean의 대체재 (0) | 2018.11.17 |
| 조건문-1.조건 문이란?(if,else)2.else,else if 3.조건문의 응용 (0) | 2018.11.16 |
| 비교 -1.연간자 2.비교연산자(== 과 ===) 3.===를 사용하자 4.부정과 부등호 (0) | 2018.11.16 |
