# 배열과 반복문의 조합 while

## 반복문으로 배열의 값 출력하기

### 코드

```markup
<h1>배열과 반복문의 쓰임알기</h1>
<script>
const izOne = ['은비', '사쿠라', '혜원', '예나', '채연', '채원', '민주', '나코', '히토미', '유리', '유진', '원영'];
</script>
<h2>아이즈원 멤버를 알아봅시다</h2>
  <ul>
    <script>
      let i = 0;
      while(i < izOne.length){
  document.write('<li>'+ izOne[i] +'</li>');
        i = i + 1 ;
      }
      </script>
  </ul>

```

{% embed url="<https://codepen.io/j1hwan/pen/QeWZja>" %}

## 출력값의 CSS 제어하기

### 코드

```markup
<html>
<head>
<title>반환한 배열 with CSS</title>
</head>
<script>
const game = ['임진록', '스타크래프트', '천년의 신화', '하얀마음 백구'];
</script> 

<!--ul태그 안에 li태그로 game으로 선언한 배열 값들을 출력하는 반복문-->
<body>
    <h1>요즘 핫한 게임</h1>
    <ul>
    <script>
        let i = 0;
        while(i < game.length){
        document.write('<li>'+game[i]+'</li>');
            i = i + 1;
        };
        </script>
        </ul>
        
<!--위에선 반복문으로 생성한 li들을 모두 gamelist라는 변수에 담는다 
    반복문을 이용해 모든 gamelist 안에 담긴 li값의 색상을 칠한다
    console.log(gamelist[j]); 는 콘솔창에서 작업을 진행을 확인하기 위해서 삽입함
-->

<script>
const gamelist = document.querySelectorAll('li');
let j = 0 ;
while( j < gamelist.length){
    console.log(gamelist[j]);
    gamelist[j].style.color= "red";
    j = j + 1;
}
</script>
</body>
</html>

```

{% embed url="<https://codepen.io/j1hwan/pen/OKPyjB>" %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://jihwan.gitbook.io/life101/javascript/basic-javascript/undefined-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
