자바스크립트 - 배열과 반복문

배열 (Array)

배열의 의미

집에도 물건 많아지면 수납공간이 필요해서 선반, 책장, 냉장고 등을 장만해서 필요한 곳에 넣고 그 다음부터는 물건이 아니라 수납해둔 수납공간만 생각하면 됨

배열도 비슷

데이터가 많아지면 그 데이터를 그냥 둘 수 없기에, 연관된 데이터끼리 정리정돈을 해서 정리해두는게 배열이다

배열 리터럴([ ])을 사용하여 배열을 생성하고(범주로 묶고) 추후 원하는 것에 활용이 가능하다.

(배열 [ ] 내부에 있는 각각의 항목들을 element(원소)라고 지칭)

아래 예시를 보면 friends 변수를 지정하고 배열을 만든 후 활용하는 것을 볼 수 있다.

• .write → 페이지 출력
• .push → 원소 추가 (원소 추가 전 후의 count 출력값이 다름)
  
  

<h1> Array </h1>
    <h2> Syntax </h2>
      <script>
        var friends = ["woojin", "jiho"];
      </script>

      <h2> script </h2>
      <script>
        document.write(friends[0]);
        document.write(friends[1]);
        document.write(friends[2]);
      </script>

      <h2> count1 </h2>
      <script>
        document.write(friends. length);
      </script>

      <h2> add </h2>
      <script>
        friends.push('jeongki');
        friends.push('jaehwan')
      </script>


      <h2> count2 </h2>
      <script>
        document.write(friends. length);
      </script>

반복문

while( ) { }

순서대로 실행되는 프로그램의 실행 순서의 흐름을 제어하는 제어문

while ( ) { } 실행 시, ( ) 안에 있는 값이 충족될 때 까지 { } 내부의 코드가 실행

이를 위해 변수 i 를 var로 지정

  <h1> Loop </h1>
    <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>

배열과 반복문

• 배열 → 순서대로 연관되어있는 데이터를 정리정돈
• 반복문 → 정리된 데이터를 꺼내서 자동화된 처리를 가능하게 함

<script>
var alist = document.querySelectorAll('a');
        var i = 0;
        while (i < alist.length) {
          alist[i].style.color = 'yellow';
          i = i + 1;
 </script>

• 코드 설명

var alist = document.querySelectorAll('a');

→ 페이지 내 a 태그를 가진 속성을 모두 지정 후 변수배열 지정

var i = 0;

→ 변수 시작점 지정

while (i < alist.length) {

→ alist 배열 내 원소 개수 지정 (true / false 지정)

alist[i].style.color = 'yellow';

→ 반복문을 통해 진행하고자 하는 속성 입력

i = i + 1;

→ 반복 입력

Take-Away

• 반복문의 적용
  내가 만들었던 홈페이지에 어떤 식으로 반복문을 적용할 지 스스로 고민을 해보았으나, 아직 명확한 해답을 찾지 못했다.
  검색 엔진을 통해 다른 사람들은 어떤 식으로 적용을 했는지 알아보는 것도 괜찮은 방법이 아닐까?