[JS] 13. 배열과 반복문의 활용

🔑 코인 투자 추천 링크 🔑

자바스크립트 강의 목차

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

1. Script 태그 (document.write)

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

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

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

5. 변수와 대입연산자

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

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

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

16. 함수의 활용

17. 객체는 왜 필요한가?

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

19. 객체의 활용

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

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

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

배웠던 배열과 반복문을 활용해서,

기존에 만들었던 주간모드, 야간모드를 바꾸는걸 한번 작성해볼께요!!

기존에 작성된게 아래와 같은데요.

night모드일때 배열과 반복문을 활용해서 조금 더 보기 좋게 바꿔보도록 하겠습니다.

1) 먼저 만든 웹페이지에서 개발자모드로 들어갑니다.

콘솔창에서 document.querySelectorAll('a') 를 입력해봅니다.

a 태그로 작성된걸 모두 불러오는 명령입니다.

그리고 콘솔창에 아래와 같이 입력해봅니다.

alist에 a 태그관련 문장이 배열에 저장된걸 확인 할 수 있습니다. 1,2,3 계속 있겠죠?

그리고 아래와 같이 입력해봅니다.

전체 alist 배열이 6개인걸 확인할 수 있네요!

이번에는 반복문을 활용해서 전체 alist를 출력해보겠습니다.

아래와 같이 작성하시고 결과를 보시면 전체 alist에 담겨진 a 태그관련 문장들을 보실 수 있습니다.

이전에 작성한 코드를 다시 불러오려면, 키보드의 위쪽 화살표 (↑)를 누르면 됩니다.

코드를 불러와서,

alist[i].style.color='powderblue'; 를 추가합니다.

결과를 보면 오른쪽과 같이 링크태그가 powderblue로 변한걸 확인할 수 있습니다.

위 코드를 가져와서 야간모드일때 powderblue로, 주간모드일때 blue로 변경되는걸 아래와 같이 작성했습니다.

  <input 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;
      }

    }
  ">

결과를 보시면, 주, 야간모드시 아래와 같이 변경되는걸 확인할 수 있네요!!