WEB2 - JavaScript

배열과 반복문의 활용

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 니르
    결과화면을 아니까 멈춰놓고 배운 것을 토대로 혼자서 변수값을 정하고 쓰여있는 CSS문법을 참고해 반복문을 작성하고 돌려보았는데 문제없이 잘 돌아가서 뿌듯하네요! 영상을 돌려보니 이고잉쌤과 거의 같은 코드가 나와서 기분좋아요 ㅎㅎ 기분좋은 기념으로 댓글하나 남기고갑니다~
  2. 홍주호
    20191110 완료
  3. 미옹이
  4. 육포
    20191031
  5. 콘솔창에서 한번 실행해보며 확인을 하기위해서입니다.
    빼고 실행하여도 별문제없고 그저 원하는 값을 얻었는지 확인하는 단계입니다.
    대화보기
    • 혹시 중간 부분에 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 자세히 보기