while문 괄호 ( ) 안에 있는 값이 true이면 반복해서 코드를 실행합니다.
false가 될 때까지 while문 안의 내용이 반복되며, false가 되면 while문 다음 코드가 실행됩니다. while문의 괄호에는 if 조건문을 사용할 수 있으며 if조건문의 값이 true 이면 반복해서 실행하고, 반복을 거쳐 false에 이르면 멈추게 됩니다.
while 반복문을 작성하여 테스트하기 위해 예시를 만들겠습니다. ul 태그로 숫자를 갖지 않는 리스트를 만듭니다. Apple, Banana, Cats, Dogs를 값으로 입력합니다. 값을 입력할 때 자바스크립트를 사용합니다. <script> 태그에 document.write( ); 형식으로 작성합니다. 이때, write( )에 들어가는 값은 리스트를 만드는 ul 태그의 요소로 사용될 수 있도록 li태그로 적어야 합니다.
<! DOCTYPE>
<html>
<head>
<title> While </title>
<charset="utf-8">
</head>
<body>
<ul>
<script>
document.write('<li> Apple </li>');
document.write('<li> Banana </li>');
document.write('<li> Cats </li>');
document.write('<li> Dogs </li>');
</script>
</ul>
</body>
</html>
while문이 반복될 때마다 그 횟수를 기록하고 제어할 수 있습니다.
i=0;으로 임의의 변수를 하나 지정하고 값을 0으로 정합니다. while문의 끝 부분에 변수로 지정한 i에 1을 더한 결괏값을 새로운 i의 값으로 가지게 합니다. while ( )에 반복하고 싶은 횟수를 조건문으로 작성합니다. while(i < 2) 일 때, 최초 0이었던 i의 값은 1번 반복되면서 1이 됩니다. while의 조건 i < 2를 기준으로 참이기 때문에 1번 더 반복됩니다. 이제 총 2번 반복이 되고 0에서 1로 바뀌었던 i의 값에 1이 더 더해져 2가 됩니다. 이때, i < 2를 기준으로 false가 됩니다. 2보다 작지 않고 같기 때문입니다. 이제 while문의 반복은 종료됩니다.
Cats를 3번 반복해보겠습니다. 변수 i를 최초 0으로 설정합니다. while문으로 반복하고 싶은 태그를 지정합니다. 괄호 ( )에 조건문을 작성합니다. 0으로 정해놓은 변수가 3이 될 때까지 반복하도록 i <3의 조건을 작성합니다. 중괄호 { }에 반복할 태그를 포함하고, while문이 반복될 때마다 i에 1이 더해지도록 i = i+1을 적어줍니다. 최초 1번 while 문이 반복되면 변수 i의 값은 0에서 1로 바뀝니다. i < 3의 조건을 기준으로 true이므로 2번째 반복을 실행합니다. 2번째 반복 후 1로 바뀌었던 변수 i에 1이 더해져 2가 되었습니다. i < 3의 조건을 기준으로 true이기 때문에 또 반복합니다. 이제 3번째 반복이 실행되고 2로 변한 변수 i에 1이 더해져 3이 됩니다. 이미 총 3번 반복되어 리스트에 cats가 3개 출력되었습니다.
이제 while 문이 반복되지 않아야 하는데요. 3으로 변한 변수 i는 3과 동일하기 때문에, i < 3이라는 조건을 기준으로 false가 되고 더 이상 while의 내용은 반복되지 않습니다. 이제 while문 다음 코드가 있다면, 그 코드가 실행됩니다. while 문 다음의 내용인 document.write('<li> Dogs </li>');가 실행됩니다.
<! DOCTYPE>
<html>
<head>
<title> While </title>
<charset="utf-8">
</head>
<body>
<ul>
<script>
document.write('<li> Apple </li>');
document.write('<li> Banana </li>');
var i = 0;
while (i <3){
document.write('<li> Cats </li>');
i = i + 1;
}
document.write('<li> Dogs </li>');
</script>
</ul>
</body>
</html>
'코딩' 카테고리의 다른 글
| while 반복문 사용해서 본문 글자색 (0) | 2020.09.10 |
|---|---|
| 자바스크립트 JavaScript 배열 array 이용해 반복문 Loop 만들기 (0) | 2020.09.10 |
| 자바스크립트 JavaScript 배열 array 만들기, 값 불러오기, 값 개수 세기, 값 추가하기 (0) | 2020.09.08 |
| 리팩토링 - 중복 제거하여 코드 효율화하기 - this , var 키워드 활용 (0) | 2020.09.06 |
| html onclick 속성과 자바스크립트를 활용해 서식 변경 버튼 만들기 (0) | 2020.09.06 |
댓글