생활코딩

Coding Everybody

코스 전체목록

닫기

배열과 반복문의 활용

소스코드

변경사항

 

댓글

댓글 본문
  1. 헤밍웨이
    220810 배열 반목문의 활용 완료
  2. robert
    2022.08.02
  3. 코드만다
    22.07.27
  4. RAHE
    220724_
  5. 진진리
    0712
  6. 220709 완료
    var alist = document.querySelectorAll('a');
    var i = 0;
    while(i < alist.length)
    {
    alist[i].style.color='powderblue';
    i = i + 1;
    }
  7. toonfac
    220703 오후 7시 11분 완료
  8. ichenny
    2022.06.26
  9. 양빵
    220615
  10. onehae
    220614
  11. 탕탕
    220607
  12. 진진리
    22.05.23
  13. 울랄라
    220519
  14. 220518
  15. 주파랑
    분명히 야간 모드에서 잘 작동해서 코드 복사해서 else 뒤에 있는 주간 모드에 붙여 넣기해서 색깔만 바꿔서 브라우저에서 해보니 주간/야간 모드가 작동하질 않았다. 한 5분 정도 헤매다가 발견한 문제의 원인은 바로 코드를 복사할 때 닫는 중괄호( } )까지 복사하지 않아서 작동하질 않았던 거였다. 하하하.
  16. 고배배
    220424
  17. 220406
  18. 이윤
    220405
  19. DH니스
    2022.04.03
  20. 너구리기린
    2022.03.30
  21. 유끼끼
    버튼을 위 아래 두개 만들어 놓고
    코드는 아래꺼만 수정함
    그래놓고 위쪽 버튼 계속 눌러도 안바껴서 눈빠지게 찾았는데
    알고 보니 아래쪽 버튼 정상 작동...ㅋㅋㅋㅋㅋㅋ
  22. 지구
    2022.03.15 재수강 필수
  23. new 개발자
    20220315
  24. 저도 궁금해서 구글링 해봤는데 이렇게 나오네요! 참고하시면 될 것 같아요!!

    The NodeList object returned by the querySelectorAll() method must be static, not live ([DOM-LEVEL-3-CORE], section 1.1.1). Subsequent changes to the structure of the underlying document must not be reflected in the NodeList object. This means that the object will instead contain a list of matching Element nodes that were in the document at the time the list was created.
    대화보기
    • 2022.02.24 완료
    • develobit
      단순히 배열과 반복문을 사용하지 않고 버튼에 document.querySelectorAll('a').style.color = 'powderblue'; 를 추가하면 되지 않을까 생각했는데 안되더군요...

      document.querySelector('a').style.color = 'powderblue'를 할 경우에는 첫번째 태그에만 적용이 되었는데, querySelectorAll('a')은 왜 안되는지 알 수 있을까요? 콘솔을 통해서 보아도 문제의 원인을 모르겠네요

      단순히 링크색상을 바꾸려면 document.linkColor = 'red';을 쓰면 되지만

      querySelectorAll의 명령은 왜 안되었는지 궁금합니다.
    • 드림보이
      2022.02.17. WEB2 - JavaScript - 배열과 반복문의 활용 파트 수강완료
    • 무접점키보드
      2022.02.13
    • 미래에 후회안할 자신있어?
      와,, 존경합니다 리팩토링을 어떻게 해야할지 고민했는데 와,,,
      대화보기
      • 미래에 후회안할 자신있어?
        2022-02-10 완료
      • aristia
        2022.02.04
      • 20220126
      • 임앤강
        2022-01-22 감사합니다 ~~
      • 아까그애
        2022-01-21 완료
      • 맛없는콩두유
        22.10.20 감사합니다!
      • 열정jk
        220117 감사합니다
      • 지원이아빠
        이번회에서 배운 배열을 이용해보면 좀더 쉬울것 같습니다.

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

        // 변수는 if/else문 앞에 미리 지정합니다.
        var target = document.querySelector('body');
        var alist = document.querySelectorAll('a');
        var i = 0;

        // if/else문에서는 변수에 배경색,글자색,버튼내용,링크색을 지정합니다.
        if(this.value === 'night'){
        // 배경색,글자색,버튼내용,링크색
        var pageStyle = ['black', 'white', 'day', 'powderblue'];
        } else {
        // 배경색,글자색,버튼내용,링크색
        var pageStyle = ['white', 'black', 'night', 'blue'];
        }

        // if/else문 밖에서 변수값으로 실제 스타일을 지정합니다.
        target.style.backgroundColor = pageStyle[0];
        target.style.color = pageStyle[1];
        this.value = pageStyle[2];

        while(i < alist.length){
        alist[i].style.color = pageStyle[3];
        i = i + 1;
        }

        ">
        대화보기
        • 지원이아빠
          질문의 의도와 다른 답인것 같아 내용 추가해봅니다.

          alist를 else문에도 또 선언하는 이유가 있느냐 는게 요지인데 아래 문장이 if문에도 있는데 else문에도 있어서 그런거죠.
          var alist = document.querySelectorAll('a');

          이 자바스크립트 코드는 메모리에 상주해 있는게 아닙니다.
          참고 : https://developer.mozilla.org......ent

          사용자가 버튼을 클릭할때 onclick= 에 있는 내용이 실행되죠. 그래서 if 또는 else 에 맞는 구문이 실행되고 나면 변수는 전부 없어집니다. 다음번 클릭때 다시 생성되는거죠.

          코드를 단순하게 하기 위해서는 중복되는 부분을 if/else 문 밖으로 빼면 됩니다.


          <input id="night_day" type="button" value="night" onclick="
          var target = document.querySelector('body');
          var alist = document.querySelectorAll('a'); // 이부분을 if/else문 앞으로 뺐습니다.
          var i = 0; // 이부분을 if/else문 앞으로 뺐습니다.

          if(this.value === 'night'){
          target.style.backgroundColor = 'black';
          target.style.color = 'white';
          this.value = 'day';

          while(i < alist.length){
          alist[i].style.color = 'powderblue';
          i = i + 1;
          }

          } else {
          target.style.backgroundColor = 'white';
          target.style.color = 'black';
          this.value = 'night';

          while(i < alist.length){
          alist[i].style.color = 'blue';
          i = i + 1;
          }

          }
          ">
          대화보기
          • 이거왤케어려워
            220103 완료 감사합니다.
          • 빡효
            21.12.28 완료
          • commonerd
            2021-12-23
            <h1><a href="index.html">WEB</a></h1>
            <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;
            }
            }
            ">
            <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
            </ol>
          • 소설가
            2021-12-19 완료
            고맙습니다.
          • 완료...계속 정주행
          • 롤링
            오후 2:31 2021-12-14
          • 민택기
            21.12.5 완료
          • survive
            21.11.23
          • 난 코딩이 좋아
            감사합니다.
          • 개발맨
            완료
          • 21-10-30. 3타.
          • 21-10-28. 2타.
          버전 관리
          egoing
          현재 버전
          선택 버전
          graphittie 자세히 보기