본문 바로가기
웹프로그래밍

[JS] 12. 배열과 반복문

by kimsfamily 2020. 10. 13.

자바스크립트 강의 목차

0. 자바스크립트란 무엇인가?

1. Script 태그 (document.write)

2. 자바스크립트 이벤트란 무엇인가?

3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기

4. 데이터 타입 문자열과 숫자

5. 변수와 대입연산자

6. 자바스크립트로 웹브라우저 제어하기

7. 비교연산자, Boolean 데이터타입

8. 자바스크립트 조건문 및 활용법

9. 리팩토링(refactoring)

10. 배열에 대한 이해

11. 반복문에 대하여

12. 배열과 반복문

13. 배열과 반복문의 활용

14. 함수란 무엇이고 왜 필요한가?

15. 함수의 기본사용법, 매개변수, 인자, 리턴

16. 함수의 활용

17. 객체는 왜 필요한가?

18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)

19. 객체의 활용

20. 파일로 쪼개어 관리하기

21. 라이브러리와 프레임워크

22. API & UI 그리고 프로젝트 활용도구

 


 

이번시간에는 배열과 반복문을 써서 어떤 역할을 할 수 있는지 알아보도록 하겠습니다.

 

먼저 아래와 같은 코드를 작성하였습니다.

    <h1> Loop & Array </h1>
    <h2> Co Workers</h2>
    <ul>
        <li>david</li>
        <li>daniel</li>
        <li>paul</li>
        <li>kim</li>
      </ul>

결과는 이렇겠죠.

 

배열과 반복문을 활용해서 아래와 같이 바꿔보았습니다.

    <h1> Loop & Array </h1>
    <script>
      var coworkers = ['david','daniel','paul','kim'];
    </script>
    <h2> Co Workers</h2>
    <ul>
      <script>
        var i = 0;
        while(i<4){
            document.write('<li></li>');
            i = i + 1;
        }
      </script>
    </ul>

위와 같이 작성하고 화면을 보면 아래와 같이 된걸 볼 수 있는데요.

 

위와 같이 작성된 상태에서, 한줄만 추가하여 처음과 같은 결과가 출력되게 해볼께요

아래의 한줄로 바꿔줍니다.

스크립트 안에 <li></li> 사이에 +coworkers[i] +를 추가해줍니다.

i=0부터 하나씩 증가하니깐, coworkers[0], coworkers[1], coworkers[2], coworkers[3]이 차례로 출력되겠죠.

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

한번 결과를 볼까요?

이런 결과가 나왔습니다.

아마도 4명의 이름은 구지 반복문을 사용할 필요가 없겠지만,

이름이 1,000명, 혹은 10,000명, 혹은 그 이상이 된다면 반드시!!! 필요하겠죠?

 

그런데, 위 코드에 문제가 있습니다.

위 배열에서 마지막 kim을 빼고 코드를 실행했더니 아래와 같이 undefined라고 뜹니다.

이러한건 우리가 원하는게 아니죠. 그리고 배열이 추가가 되어도 위 코드는 추가된 코드를 실행시키지 못합니다.

 

이를 해결하기 위해서, 반복문을 아래와 같이 조금 수정해보겠습니다.

반복문 안에 조건을 coworkers의 배열수만큼 반복하도록 수정했습니다.

i<4  에서 coworkers.length로 변경했죠.

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

이렇게 수정하고 결과를 확인했더니, 정상적으로 우리가 원하는 결과를 출력해주네요.

배열을 더 추가해도 자동으로 등록된 배열, 즉 데이터가 변경함에 따라서 동일한 결과를 출력하게 됩니다.

그럼 이걸 실전에서 어떻게 적용할까요?

사이트별 링크를 걸고, 해당 링크를 이름별로 자동으로 지정하게 하는걸 생각한다면, 아래와 같이 할 수 있겠죠.

 

아래와 같이 a 태그에 홈페이지 주소를 입력하고 그 뒤에 따라오는 주소를 해당 이름별로 지정해놓으면, 인원이 추가도리때마다(이름이 추가될때마다) 자동으로 링크를 홈페이지에서 업데이트 됩니다.

      <script>
        var i = 0;
        while(i < coworkers.length){
            document.write('<li><a href="https://kimsfamily.kr/'+coworkers[i]+'">'+coworkers[i]+'</li>');
            i = i + 1;
        }
      </script>

 

이런식으로 말이죠.

마우스를 david에 클릭하면, 홈페이지/david 이런식으로 연결이 됩니다.

배열과 반복문을 잘활용하시면 많은 작업을 줄일 수 있겠죠?

 

 

본 강의안은 생활코딩 강의안을 바탕으로 재작성된 강의안입니다.

opentutorials.org/course/3085/18828

 

반응형

댓글0