배열과 반복문의 조합 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>
Last updated