배열과 반복문의 조합 while

생활코딩 https://opentutorials.org/course/3085/18828

PreviousCSS 제어하는 자바스크립트 맛보기 Next객체와 순환문의 조합 for-in

Last updated 5 years ago

배열과 반복문의 조합 while

생활코딩 https://opentutorials.org/course/3085/18828

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

코드

<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>

출력값의 CSS 제어하기

코드

<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>

PreviousCSS 제어하는 자바스크립트 맛보기 Next객체와 순환문의 조합 for-in

Last updated 5 years ago