WEB2 - JavaScript

댓글

댓글 본문
  1. seung
    2020/04/03

    이번 강의를 통해 객체의 의미, 객체 선언 방법과 호출, 객체안에 함수를 만들어 사용하는 방법까지 잘 배우고 갑니다!
  2. 질문왕
    질문이 있습니다.

    document.querySelectior('body').style.color 에서 document는 객체인 것 같습니다. "." 앞에 있으니까요
    querySelector()는 document 객체 안에 정의된 method인 것 같습니다.
    근데 그 이후에 나오는 style은 무엇인가요? querySelector이라는 함수 안에 정의된 프로퍼티나 메쏘드인가요?
    프로퍼티나 메쏘드는 객체 안에서 존재하는 것 아닌가요?..

    Object.property 혹은 Object.method() 까지는 이해가 되는 문법인데 그 이후로 점이 찍혀서 표현되는 style이나 color는 도대체 어떤 녀석들일까요.. property라면 어떤 객체의 property인 건지..

    혹시 queryselector prototype object에 내장되어 있는 property일까요? 잘 모르겠습니다..
  3. ㅇㅇ
    자바스크립트는 세미콜론을 생략가능하다고 해요.
    표준 스타일 가이드에서는 세미콜론을 사용하지 말라고 하네요ㅇㅅㅇ!
    https://standardjs.com......tml
    대화보기
    • OneJae EE
      1.
      객체를 담는 변수 값(예.var Body)은
      미리 작성하신 조건문(If /else) 안에 만들어 두신 객체들(폴더들)과
      이름이 통일 되어야 합니다.

      조건문 안에 객체들을 Body.setColor / Body.setbackgroundColor 등
      Body.라는 폴더로 설정 하셨다면
      이것들을 담을 변수 값 또한 Body로 통일 하셔야 합니다.
      고로 var Body.



      2. 변수값과 객체의 값이 동일한데 문제가 있으시다면
      다른 설정값 오류일 수 있습니다.

      아래 작성한 제 글을 참조해 보시고요,
      잘 해결 되시길 바랍니다.
      대화보기
      • OneJae EE
        위 예제 JS 코드 소스 공유 및 발견한 유의사항들.

        <script>

        var Links = {
        setColor (color)
        {var kk= document.querySelectorAll('a');
        i = 0;
        while(i < kk.length)
        {kk[i].style.color= color; /* "color";이렇게 따옴표 붙이면 작동 안함 */
        i = i + 1;}
        }
        }

        var Body = {
        setColor: function (color)
        {document.querySelector('body').style.color=color;},

        setBackgroundColor : function (color)
        {document.querySelector('body').style.backgroundColor=color;}
        }


        function nightdayHandler(here)
        {var gg= document.querySelector('body');

        if(here.value === 'night')
        {Body.setBackgroundColor('black');
        Body.setColor('white');
        here.value='day';
        Links.setColor('powderblue');
        }

        else{
        Body.setBackgroundColor('white');
        Body.setColor('black');
        here.value='night';
        Links.setColor('blue');
        }

        }
        </script>



        - 작동 안되시는 분을 위한 확인 사항 -


        1. set과 .style.타입 의 동일화
        2. 대소문자 체크의 중요성


        예를 들어,

        var Body = {
        setColor: function (color)
        {document.querySelector('body').style.color=color;},

        setBackgroundColor : function (color)
        {document.querySelector('body').style.backgroundColor=color;}


        위 코드를 보시면 확인 하셔야 할 중요한 부분이
        setColor 부분과 다음 줄에 나오는 .style.color 부분인데요.


        1.
        set은 말그대로 설정한다는 말인데 무엇을 설정 하냐면
        다음줄에 나오는 스타일 타입을 설정하는 것입니다.

        고로 스타일 타입을 style.color 로 입력 하셨는데
        set 값을 color외 다른 이름으로 하시는 경우
        작동하지 않습니다. (setwhy X / setColor O)

        즉, 스타일 값이 백그라운드컬러 라면(style.backgroundColor)
        set값 또한 setBackgroundColor가 되어야 합니다.


        2. set 뒤에 붙는 스타일 타입의 첫글자는 반드시 대문자로 입력 하셔야 작동합니다.
        setColor 이렇게 말이죠. color의 첫글자 C를 소문자로 작성하셔서 setcolor 입력하시면
        작동하지 않습니다.

        그 아래 setBackgroundColor 도 마찬가지.
        set 뒤에 붙는 스타일 타입 BackgroundColor의 첫글자 B와 Color의 첫글자 C가
        둘다 대문자가 아니면 작동하지 않습니다.

        또 B는 대문자, 컬러의 C는 소문자인 경우도 작동하지 않습니다.



        입력값들 이름을 마음대로 바꿔 하다가 안되길래
        다 갈아 엎고 처음부터 차근차근 다시 해보면서 알게 되었는데요.
        근 세시간 정도 씨름 했습니다.


        그래도 재미있네요 화이팅!
      • 혹등고래
        완료!
      • OneJae EE
        20.03.27 금 / 37세 비전공자 / 완료
      • 0cddo
        완료!
      • Yohanesty
        완료
      • 뿡뿡이
        vscode를 사용중인데요, 객체이름을 Body로 지정하니 초록 글씨로 뜨면서 적용이 안되네요
        밑에 댓글에서도 다른 이름을 사용하라해서 body나 Bodys, Body1 등 이름을 바꿔보았지만
        적용이 안되는군요..
        어찌해야 하나요... 도와줘요 코딩히어로들!
      • 뿡뿡팡야
        완료
      • Useok
        완료
      • 앞에 객체 수업에서는
        var coworkers= {
        "num1" : "1",
        "num2" : "2"
        };
        객체 쓰고 마지막에 ; 를 붙이던데

        왜 이번에는 ;를 붙이지 않나요?
      • Always
        객체..확실히 완전히 이해하긴 쉽지 않네요 ㅜㅜ
      • 완료
      • 완료
      • daniellee123456
        완료
      • 완료
      • 코딩하쟈
        완료
      • 규몽
        완료
      • 숩숩이
        완료
      • eddylee123456
        완료
      • 감사합니다.완료
      • 감사해요!
      • 항상 감사합니다.!!
      • 춤춤
        완료
      • thsths
        완료
      • 스티븐잡숴
        완료
      • Jeremy Jo
        완료
      • 문병민
        완료!!
      • 샬롬
        완료
      • var Body = {
        setColor:function(color){
        document.querySelector('body').style.color=color;
        },
        setBackgroundColor:function(color){
        document.querySelector('body').style.backgroundColor=color;
        }
        }
        >>>>>>
        Body.setColor('black');
      • 딥허브
        2019.12.21
      • codinginpain
        완료쓰
      • 홍주호
        20191116 완료
      • 우유병
        다솜 화이팅
      • 육포
        20191103
      • 은별
        완료
      • 민경
        이거만 보고 자야지했는데 다음거까지 보고 자게 만드시네여...참..ㅠㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
      • 답글
        그니까요 들으면 들을수록 매력적이예요
        대화보기
        • 굼벵이
          완료
        • ㄷㄷ
          목소리 너무 좋아여
        • 20191001 Ted 완료!
        • 난뀨
          안녕하세요 개발공부 입문자입니다!
          질문이 있어서요!
          오류코드가 두개가 뜨는데 도대체 무엇이 틀렸는지 궁금합니다 도와주세요ㅠㅠ
          Uncaught SyntaxError: Unexpected end of input
          객체답안.HTML:54 Uncaught ReferenceError: nightDayHandler is not defined
          at HTMLInputElement.onclick


          <!doctype html>
          <html>
          <head>
          <title>WEB1 - JavaScript</title>
          <meta charset="utf-8">
          <script>
          function LinksSetColor(color){
          var alist = document.querySelectorAll('a');
          var i = 0;
          while(i < alist.length){
          alist[i].style.color = color;
          i = i + 1;
          var Links = {
          setColor:function(color){
          var alist = document.querySelectorAll('a');
          var i = 0;
          while(i < alist.length){
          alist[i].style.color = color;
          i = i + 1;
          }
          }
          }
          function BodySetColor(color){
          document.querySelector('body').style.color = color;
          }
          function BodySetBackgroundColor(color){
          document.querySelector('body').style.backgroundColor = color;
          var Body = {
          setColor:function (color){
          document.querySelector('body').style.color = color;
          },
          setBackgroundColor:function (color){
          document.querySelector('body').style.backgroundColor = color;
          }
          }
          function nightDayHandler(self){
          var target = document.querySelector('body');
          if(self.value === 'night'){
          Body.setBackgroundColor('black');
          Body.setColor('white');
          self.value = 'day';
          Links.setColor('powderblue');
          } else {
          Body.setBackgroundColor('white');
          Body.setColor('black');
          self.value = 'night';
          Links.setColor('blue');
          }
          }
          </script>
          </head>
          <body>
          <h1>객체연습</h1>
          <input type="button"value="night" onclick="nightDayHandler(this);">
          </body>
          </html>
        • 코딩만이 살길이다
          완료
        • 쑤우
          수강완료. 감사합니다.
        • 신입인생 30대충분
          vscode로 하시는분들은 var Body 하지 마시고 다른 이름으로 하세요..
        • 피닭씨
          완료
        • 현우
          완료
        • 정완료
          완료
        버전 관리
        egoing
        현재 버전
        선택 버전
        graphittie 자세히 보기