WEB2 - JavaScript

댓글

댓글 본문
작성자
비밀번호
  1. 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
      완료
    • 1d1c
      완료
    • 코딩하쟈
      완료
    • 규몽
      완료
    • 숩숩이
      완료
    • 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 하지 마시고 다른 이름으로 하세요..
      • 피닭씨
        완료
      • 현우
        완료
      • 정완료
        완료
      • 한조
        감사합니다!
      • 들국화
        잘봤습니다
      • JT_brand
        완료
      버전 관리
      egoing
      현재 버전
      선택 버전
      graphittie 자세히 보기