WEB2 - JavaScript

배열과 반복문의 활용

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 홍주호
    20191110 완료
  2. 미옹이
  3. 육포
    20191031
  4. 콘솔창에서 한번 실행해보며 확인을 하기위해서입니다.
    빼고 실행하여도 별문제없고 그저 원하는 값을 얻었는지 확인하는 단계입니다.
    대화보기
    • 혹시 중간 부분에 console.log(alist[i]);를 왜 넣을까요?
      빼고 실행하여도 별 문제 없이 실행되는 것 같아서 궁금합니다.
    • 완료
    • 굼벵이
      완료
    • 박창신
      완료
    • 감자
      완료
    • 20191001 Ted 완료!
    • 코딩만이 살길이다
      완료
    • 쑤우
      수강완료. 감사합니다~
    • 현우
      완료
    • 정완료
      완료
    • 두벅
      감사합니다.
    • 한조
      감사합니다!
    • JT_brand
      완료
    • 한상윤
      완료
    • 코딩가즈아
      감사합니다
    • 최영오
      제 홈페이지를 1억명이 방문한다고 생각하면...어려워도 밤새야겠어요 진짜루
    • eventme
      완료
    • hyegineer
      완료!!
      queryselectorAll로 갖고오면 노드리스트 갖고오지만 배열과 비슷함 ㅎㅎㅎ
      재밌군...
      검색지향 프로그래밍이 인상깊었습니당
    • Hyeon-Jun Ha
      완료
    • 코돌이
      5/12 완료!
    • 주워니
      완료!
    • 이리스
      아래에 친절하게 설명해주신 분이 계신데요,
      조금 더 안내드리자면, F12를 누르셔서 console창에서
      document.querySelector('a') 를 입력해보시면 가장 위에있는 WEB를 표시해줄겁니다.
      결국 document.querySelector('a') 값만 본다면 가장 위에있는 WEB을 둘러싼 a태그만을 지정해주는 것이죠.
      반복문을 빼고 document.querySelector('a').style.color = 'powderblue'; 값을 넣어보면 WEB만 powderblue로 변하는 것을 볼 수 있습니다.

      그러면 이번에는 콘솔창에서 document.querySelector('body')를 입력해봅시다. 그럼 아마 모든 body태그 안의 모든 속성들이 잡혀있을겁니다. 그렇기에 document.querySelector('body').style.color = 'white'; 을 출력하면 body안의 모든 폰트색이 흰색으로 변하게 되는겁니다.

      추가로 document.querySelector('ol').style.color='powderblue' 을 하게되면 ol 태그안의 1,2,3번의 색상이 변경될겁니다. 고로 querySelector 함수가 지정해주는 위치의 차이인 것이죠.

      그렇다면 All을 붙이는 document.querySelectorAll('a').style.color = 'powderblue'; 은 왜 안되는지 콘솔창에
      document.querySelectorAll('a').style.color 을 입력해보시면 아실겁니다. 모든 태그들을 잡아주는 것이 아니라, 해당 태그들을 배열형태로 반환해주기 때문이죠. 고로 우리는 이 배열을 풀어서 적용시켜주어야하기에 반복문을 사용하는겁니다.
      대화보기
      • 윤혜인
        저도 같은 내용이 궁금하네요!
        대화보기
        • 위준우
          완료
        • 허공
          190509 감사합니다.
        • 최승윤
          완료!
        • 김한주
          완료
        • 끝가지간다
          완료~
        • Gimme_Gsuit
          querySelectorAll('a')은 html의 a태그를 js의 배열형태로 값을 가져옵니다. 그렇기 떄문에 js에서 가져온 배열형태의 a태그를 사용하려면 반복문을 주어서 []모든 배열에 속성을 적용해준다고 보면 될겁니다. ㅎㅎㅎ
          대화보기
          • Gimme_Gsuit
            js기준으로 학습하는 과정이기 떄문이지 않을까요?ㅎㅎ js로 html과 css를 활용할 수 있는? ㅎㅎ
            대화보기
            • 저도 이거 궁금했어요
              대화보기
              • 1억이란 숫자를 너무 좋아하는 스승님.....
              • 궁금한게 있는데 haed 부분에서 a 태그에 대한 css style 설정을 바꿔주지 않고 일일이 querySelectorAll()을 통해서 style을 지정해주는 이유가 무엇인가요??
              • 완료!
              • meanyMina
                저도 초보입니다만,,, document.querySelectorAll('a')는 4개의 a tag를 나열하고 있는 배열이라서 반복문을 사용해야 합니다. 전체 배열에 "powderblue"값을 지정하는 것이 아닌, 하나 하나의 a tag를 불러와서 색을 지정해야해서 그런 것 같아요. :)
                대화보기
                • 2019-02-19 완료
                • 우도순
                  완료
                • 발헤
                  감사합니다.완료
                • 호두
                  감사합니다.
                  제어문, 반복문의 개념은 알고있지만
                  html에서 적용하는 방법에 대해 잘 몰랐는데

                  강의를 보고 쉽게 이해할 수 있었습니다.
                • Juyeon Heo
                  저도 같은 내용이 궁금했는데, 덕분에 해결됐습니다. 감사합니다 서주부님 :)
                  대화보기
                  • whynitz
                    감사합니다! 궁금한게 있는데

                    document.querySelector('a').style.color = 'powderblue';

                    이걸 추가하면 night 모드에서 자동으로 a tag 텍스트가 파우더블루로 바뀌지 않을까 했는데 안되네요.

                    document.querySelector('body').style.color = 'white';

                    이건 되고 a tag 는 안되는 이유가 뭔가요?
                  • 지미츄
                    완료 감사합니다 ~!
                  • 이수하
                    완료
                  • gravity251
                    완료
                  • Aimhee
                    완료
                  • 한강
                    파우더 블루 색상이 이쁘네요. 감사합니다. ^^!
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기