WEB2 - JavaScript

제어할 태그 선택하기

소스코드

변경사항

 

댓글

댓글 본문
작성자
비밀번호
  1. 돼지천재
    감사합니다.
  2. 연습생
    안녕하세요. 일단 좋은 강의를 보게되어서 영광입니다.
    질문이 하나 있는데요.
    위와 같이 a tag의 color도 전부 바꾸고 싶은데 querySelector('a')사용시 아래와 같이 두개중에 첫 번째꺼만 바뀌네요..
    검색을 해봐도 querySelectorAll을 사용한 여러개의 tag만 선택하는 것만 나오는 거 같은데. 어떻게 해야 할까요

    코드는 아래와 같고 a tag는 css파일에서 기본 color:black으로 지정해놨습니다.~

    <div id="AA">
    <ol>
    <li> <a href="somethingA .html" target="_self"> somethingA </a> </li>
    <li> <a href="somethingB .html" target="_self"> somethingB </a> </li>
    </ol>
    </div>

    좋은 강의 감사합니다!
    ===========================================================
    아! 아래 해결법은 celine님이 달아놓으셨네요 감사합니다.
    복수개일 경우 for문을 사용해야 하나 보군요 .
  3. 늦었지만 지금이라도
    감사하게 잘 듣고있습니다.
    실습하다가 궁금한점이 있어서 좀 문의 드립니다.
    이 부분도 CS처럼 묶어서 다른 . html로 한번에 적용 하는 방법이 있나요 ?
    <input type="button" value="night" onclick="
    document.querySelector('body').style.backgroundColor = 'black';
    document.querySelector('body').style.color = 'white';
    ">
    <input type="button" value="day" onclick="
    document.querySelector('body').style.backgroundColor = 'white';
    document.querySelector('body').style.color = 'black';
    ">

    이부분만 따로 ?파일명으로 묶어서 html로 간단하게링크 하는 문장이 알고 싶습니다.
  4. 키보드치는남자
    잘들었습니다
  5. 아직은걱정이많은나
    javascript select tag by css selector
    자바스크립트 문법에 따라서 웹브라우저에게
    바디 태그를 선택하도록 명령하기.
    자바스크립트에서 선택합니다. 무엇을? css의
    선택자를 이용해서

    이제 선택을 했으니깐 body에 'style'이라는
    속성을 어떻게 자바스크립트로 넣을 수 있는 가를 알아봐야합니다.


    body태그에 style은 background-color:black을 하고 싶습니다.
    javascript style background-color
  6. 아직은걱정이많은나
    input즉 입력이라는 것은 누가 입력하냐면 그 웹을 사용하는 사용자가 하는 것이고.
    만약에 사용자가 버튼을 클릭하면 css에서 선택자를 불러오는 기능을 자바스크립트로 표현한건가 생각이 됩니다.
    사용자(User)의 입력으로 인해 화면에서 출력되는것이 바뀌는것이 움직여지는 것이니 동적이라고 말하는 것이고.
    사용자의 의지로 움직일 수 없이 정지 되어 있는 것을 정적이라고 말하는 것 이라고 이해했습니다.

    사용자가 무엇을 입력 (클릭하는 행위)으로 인해 바뀌는것(출력)이 바로 자바스크립트의 역할인가 생각하고 있습니다.
  7. 아직은걱정이많은나
    크롬으로 하셨나요?

    혹은 큰따옴표/겹따옴표 ""랑 '' 작은따옴표/홀따옴표랑 오타를 내지는 않으셨는지?
    저도 한번 시도해봤는데, 제 생각에는 ""로 치면 문자열처리 되서 안되는거 같네요.
    대화보기
    • 나현
      똑같이했는데 적용이 안되네요ㅠㅠ 코드적어두신거 복사해서 붙이니까 작동을 하긴하는데 토시하나 틀린게 없는데 왜 그런거죠ㅠㅠ
    • Jung Ik
      잘 배우고 있어요 !
    • icdoit
      감사합니다!
    • 에델
      에델 웅 카렌 완료
    • Lee Sangjun
      사용자와 상호작용,..엄..청.. 어렵다.. ㅋㅋㅋ
    • Lee Sangjun
      ㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
    • celine
      style.css 내용을 변경할 필요없이

      <input type="button" value="night" onclick="
      document.querySelector('body').style.backgroundColor = 'black';
      document.querySelector('body').style.color = 'white';
      var as = document.getElementsByTagName('a');
      for(var i=0; i<as.length; i++){
      as[i].style.color = 'white';
      }
      document.getElementsByTagName('ol')[0].style.color = 'white';
      ">

      이렇게 하면 되더라구요 !
      대화보기
      • 안녕하세요~

        강의를 통해서 코딩을 배워가는 학생입니다!

        강의영상에서 h1태그가 걸려있는 web과 ol태그가 걸려있는 리스트에 대해서는

        어떻게 해야 night모드를 했을때 하얗게 적용을 할 수 있을까요?


        + ( night 모드를 했을때 web과 옆에 리스트가 검은색으로 나타나서 보이지 않아, style.css에 있던

        a { color:black; } 부분은 삭제했습니다.)
      • 감사합니다!!
      • 감사합니다.
      • 임재현천재
        완료!감사합니다!
      • 내이름은이한샘
        영상 잘 봤습니다. 항상 감사합니다^^.!
      • 로버트한
        감사히 잘 보았습니다. ^^
      • <input type="button" value="night" onclick="
        document.querySelector('body').style.backgroundColor = 'black'; //night버튼 누를시 body의 백그라운드 컬러 black
        document.querySelector('body').style.color = 'white'; //night 버튼 누를시 body의 폰트컬러 white
        // ' ' " " 주의!
        ">
        <input type="button" value="day" onclick="
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        ">
      • 반자동
        쉽네요
      • " '도 확실히 구분해서 써야하는군요!
      • 원스팩토리
        고잉님이 night를 누르면서 까맣게 만들면서 신나죠~했을때 까맣게 안되서 맨붕된 1인...ㅋㅋㅋ
        결국 까맣게 만들었답니다...
        감사해요..ㅎㅎ
      • 스페이스몽키
        감사합니다~!
      • jayxwoo
        오늘도 잘 봤습니다.
      • 대문자 소문자 실수가 있으면 안되는군요 ㅜㅜ!! 잘배웠습니다 감사합니다 ^^
      • 옥슬이
        ㄳㄳ 저도 궁금
        대화보기
        • 상상예찬
          김예찬 배재영
        • 이성준
          슈퍼 프로그래머 성준이 완료!
        • 키썬
          이고잉님 존멋
        • daaawnstar
          감사합니다.
        • Dreaming_Joyy
          오호!! 재밌어요!!!
        • 감사합니다
        • darong
          180320 끝! 감사해요!
        • 제갈량
          잘 봤습니다. 감사합니다 ^^
        • 조선
          Egoing님 강의가 초심자가 프로그래밍에 접근하는데 큰 도움이 되네요. 진입장벽을 낮추어 주시는 강의입니다. 고맙습니다..
        • Mingi Son
          180213 강의 감사합니다!
        • 180210 감사합니다
        • BY Chin
          감사합니다
        • 꼬맹파파
          backgroundColor에서 C를 대문자로 하는 것을 camelCase라고 하는거 같습니다.
          - javascript conventions.
          https://www.w3schools.com......asp
        • 멋진노무시키
          <<2018-01-22 - ??일차_?? 번째 강의>> --> 엉엉엉ㅠㅠㅠ!
          겁나 유익한 강의를 겁나 게을러서 겁나 미루면서 겁나 후회하면서 듣고 있습니다 ㅠㅠ 마음 다잡고 열심히 다시 달려보렵니다
        • PassionOfStudy
          << 2018-01-20 - 1일차 _아홉 번째 강의 >> --> 완료!


          검색하는 방법을 차근차근 알려주셔서 감사합니다. ㅎㅎ
          정보화시대에 구글링하는 능력을 키워야 겠습니다. 다양한 자바스크립트 함수들이 있네요 ^_^
        • yingying
          설명 감사합니다 :)
          대화보기
          • YAMAPSYCHO
            <input type="button" value="night" onclick="
            document.querySelector('body').style.backgroundColor = "black";
            ">
            위에 코드를 보시면 onclick = 하고 쌍따옴표 시작하고있기 때문에 black에 쌍따옴표가 붙으면 onclick에 들어간 쌍따옴표가 끝나는걸로 컴퓨터는 인식하여 black을 인식하지 못하는것입니다.

            쉽게 onclick="document.querySelector('body').style.backgroundColor = "까지 onclick이벤트가 인지를 하는것이고 그뒤에 black는 input에 적용된 존재하지않는 속성어로 컴퓨터가 인식한것 입니다.
            대화보기
            • yingying
              document.querySelector('body').style.backgroundColor='black';
              document.querySelector('body').style.backgroundColor="black";

              위의 'black' 작은 따옴표는 동작하는데
              아래의 "black" 큰 따옴표는 동작하지 않네요.
              작은따옴표와 큰 따옴표를 사용하는데 정해진 게 있나요? 저는 둘 다 같은 역할을 하는줄 알고있었습니다.
            • 감사합니다~
            • <input type = "button" value = "night" onclick = "document.querySelector( ).style.color = 'blue';">
              위의 코드에서 괄호안에 태그를 넣고 싶으면 그냥 '태그이름'을 넣으면 되고,
              만약에 응용해서 클래스나 아이디를 넣고 싶으면 '.클래스이름'이나 '#아이디이름'을 넣으면 되겠네요~!
            • 이유리
              감사합니다.
            • 저도 css부터 이어서 듣고 있는 학생입니다.
              아래 학우분과 같은 문제가 발생하였습니다.
              버튼을 클릭하였을시 <a>태그 의 첫번째인 맨위의 제목 WEB만 변경이 적용되었습니다.

              그래서 해결방법을 알아보다가 querySelectorAll()[]~ querySelectorAll()[] 배열을 사용하여
              해결이 되었습니다. 이후에 반복문을 배우고나면 더 깔끔하게 처리할 수 있을것같습니다.

              하지만 이보다 더 깔끔한 해결 방법이 있을것 같은데 무엇인가요
            버전 관리
            egoing
            현재 버전
            선택 버전
            graphittie 자세히 보기