Java Script_반복문Loop

Java Script_반복문Loop

1. 반복문(Loop)

• 특정 코드를 반복적으로 사용하고 싶을 때, whil문 활용
• if문과 마찬가지로 while문 괄호에도 Boolean(true or false)타입이 들어간다
• 괄호 안이 true일 때 중괄호 안의 코드가 반복 실행(괄호 안이 false가 될 때까지)
• 조건문과 반복문은 프로그램 실행순서의 흐름을 제어하는 제어문이다

2. 리스트 내 특정 데이터 반복하기

• var i = 0이라는 변수를 지정하여 반복문 실행

👉 HTML

<ul>
<script>
 document.write(‘<li>1</li>’) ;
 document.write(‘<li>2</li>’) ;
 document.write(‘<li>3</li>’) ;
 document.write(‘<li>4</li>’) ;
</script>
</ul>

👉 Java Script 반복문 활용

<ul>
<script>
 document.write(‘<li>1</li>’) ;
  var i = 0;
  while (i < 3) {
  document.write(‘<li>2</li>’) ;
  document.write(‘<li>3</li>’) ;
                i=i+1;
                 } 
document.write(‘<li>4</li>’) ;
</script>
</ul>

3. 배열과 반복문

🧐목표 : HTML의 <ul>, <li> 와 같이 서로 연관된 데이터들에 대해 배열, 반복문을 이용하여 Java Scrip에서 활용한다

• HTML의 <ul>, <li>와 같이 서로 연관된 데이터들을 Java Script 배열에 담기

👉 HTML

<ul>
<li>egoing</li>
<li>leezche</li>
<li>duru</li>
<li>taeho</li>
</ul>

👉 Java Script

<script>
var coworkers = [‘egoing’, ‘leezche’, ‘duru’, ‘taeho’] ;
</script>

• Java Script 배열에 담긴 데이터를 반복문을 활용하여 순차적으로 추출
  • document.write('<li>+변수명[인덱스값]+</li>’)으로 배열에서 추출
  • 4개의 데이터 모두 추출해야하기 때문에 반복문을 활용하여 순차 추출

<script>
var i=0
while(i<4){
  document.write(‘<li>'+coworkers[i]+’</li>’) ;
                 i=i+1
                 }
</script>

• 로직의 탄력성 높여주기
  배열 내 데이터의 변화에 따라 유연하게 로직이 바뀌게 하기 위해
  while(i<4) --> while(i<coworkers.length)

<script>
var i=0
while(i< coworkers.length) { 
  document.write(‘<li>’+coworkers[i]+’</li>’) ;
                 i=i+1 ;
}
</script>

• +) 배열의 데이터가 순차적으로 나열된 리스트에 각각 링크 삽입

<script>
var i=0
while(i< coworkers.length) {
  document.write(‘<li><a href=”http://~~~.com/’+coworkers[i]+’”>’+coworkers[i]+’</a></li>’) ;
i=i+1 ;
}
</script>

4. 반복문의 활용

🧐목표 : 웹페이지에 있는 모든 <a>태그에 대해 Java Script 활용하여 속성값 주기

• night 버튼을 눌렀을 때 모든 a태그의 색상변화

  <input type=”button” value=”night” onclick=”
var target = document.querySelect(‘body’) ;
if(this.value === ‘night’) {
target.style.backgroundcolor = ‘black’ ;
target.style.color = ‘white’ ;
this.value = ‘day’;

var alist = document.querySelectorAll(‘a’) ;
var i = 0 ; 
while(i < alist.length) {
alist[ i ].style.color = ‘powderblue’ ;
i=i+1 ;
}

} else {
target.style.backgroundcolor = ‘white’ ;
target.style.color = ‘black’ ;
this.value = ‘night’;

var alist = document.querySelectorAll(‘a’) ;
var i = 0 ; 
while(i < alist.length) {
alist[ i ].style.color = ‘blue’ ;
i=i+1 ;
}