자바스크립트(JavaScript) 기초 - JS 문법 : 반복문과 배열(Array)

< 자바스크립트(JavaScript) 기초 - JS 문법 : 반복문과 배열(Array) >

1. 배열(Array)

 - 배열 만들기 ; 대괄호 [ ]와 콤마 , 사용

<script>

  var name = ["aaa", "bbb"];

</script>

 - 배열 꺼내서 활용하기 : 대괄호 [ ] 안에 index number 숫자(0부터 시작) 사용

<script>

  document.write(name[0]);

  document.write(name[1]);

</script>

 - 배열의 요소 갯수 확인 : document.write(name.length); --> 2

 - 배열에 요소 추가(마지막에 추가 push) : name.push('ccc')

2. 반복문

 - 반복문 기본구문

    while(i값을 이용한 조건문){

      조건문이 참인 동안 실행될 JS명령어1;

      조건문이 참인 동안 실행될 JS명령어2;

      i = i + 1;

    }

 - 반복문 샘플(2,3 출력을 3번 반복)

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

3. 배열과 반복문

<script>

      var name = ['aaa','bbb','ccc'];

</script>

<script>

        var i = 0;

        while(i < name.length){

          document.write('<li><a href="http://a.com/'+name[i]+'">'+name[i]+'</a></li>');

          i = i + 1;

        }

</script>

4. 배열과 반복문 활용 

(querySelectorAll()를 사용하여 모든 a tag 요소를 배열에 담아서 반복문으로 글자색 변경 처리)

<input id="night_day" type="button" value="night" onclick="

    var target = document.querySelector('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;

      }

    }

  ">