WEB2 - JavaScript

댓글

댓글 본문
작성자
비밀번호
  1. 육포
    20191103
  2. 은별
    완료
  3. jeje
    안녕하세요. 오류 해결하셨나요? 저도 아직 개발 입문자이지만 혹시나해서 댓글 달아봅니다.
    · 함수가 닫히지 않은 부분이 있습니다. LinksSetColor 함수와 BodySetBackgroundColor 함수를 중괄호를 이용해서 제대로 닫아주세요.
    ·변수 Link와 Body가 각각 LinksSetColor, BodySetColor 함수 속에 선언되어 있는데, 밖으로 꺼내주세요! (수업영상 1:35)
    대화보기
    • 민경
      이거만 보고 자야지했는데 다음거까지 보고 자게 만드시네여...참..ㅠㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
    • 답글
      그니까요 들으면 들을수록 매력적이예요
      대화보기
      • 굼벵이
        완료
      • ㄷㄷ
        목소리 너무 좋아여
      • 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
        완료
      • 에듀케이티드키드
        이렇게 해주는이유가 코드를 간단하게만들어줄려고 해주는건가요?
      • 성균관대학교
        절차지향 언어 프로그래밍을 주로 하다가 객체지향 언어를 하니 느낌이 다르네요..ㅎㅎㅎ
      • 승방이
        사랑해요 이고잉....코딩의 재미를 옴팡지게 느끼고 있습니다.. -이걸 들을때만은 코딩 천재가 되는 코린이 드림-
      • Weini Jeon
        오아... 저는 빡데가린가 봐요.. 이해가 된거 같으면서도 이해안된 이느낌은 대체...;;;
      • hyegineer
        완료!
        우왕 객체 활용까지 다 들었다
        재밌었땋ㅎㅎㅎ
        얼른 객체의 메소드와프로퍼티 등등 쓰임새 익숙해지고싶다
      • Hyeon-Jun Ha
        완료
      • 영미
        궁금한 부분이 있습니다.

        body.setcolor('black') 에서 setcolor는 프로퍼티라고 할수 있나요 메소드라고 해야하나요?
      • kumkum
        객체: 많은 함수와 프라퍼티를 정리할 수 있음.
      • 강기석
        감사합니다 !
        대화보기
        • 박아람
          안녕하세요 강기석님, 지나가던 학생입니다.

          기존 코드에서 변수 body 를 Body 로 수정하시면 정상적으로 됩니다.

          전체 소문자 body 는 변수 적용이 안되는것 같으세요 ( html 태그 라 그런게 아닐까 추정합니다. )



          <!DOCTYPE html>
          <html lang="en">
          <head>
          <meta charset="UTF-8" />
          <meta name="viewport" content="width=device-width, initial-scale=1.0" />
          <meta http-equiv="X-UA-Compatible" content="ie=edge" />
          <title>Document</title>
          </head>
          <body>
          <input
          type="button"
          value="click"
          onclick="
          Body.color('red');"
          />
          <script>
          var Body = {
          color: function(color) {
          document.querySelector("body").style.backgroundColor = color;
          }
          };
          </script>
          </body>
          </html>
          대화보기
          • 주워니
            완료!
          • 위준우
            완료
          • 허공
            190509 감사합니다.
          • 수오
            Body.SetBackgroundColor('black');
            의 코드에서
            SetBackgroundColor는 프로퍼티면서 매소드라고도 불리는건가요??

            반복해서 시청해도 정립이 잘 안되어서 우선 이렇게 이해하고 있는데
            아시는 분 계시면 혹시 제 이해가 틀렸다면 틀렸다라는 말 한마디라도 부탁드리겠습니다!
          • 최승윤
            완료!
          • Gimme_Gsuit
            var Body = {
            setColor:function (color){
            document.querySelector('body').style.color = color;
            },
            setBackgroundColor:function (color){
            document.querySelector('body').style.backgroundColor = color;
            }
            }
            강의에서는 이렇게 var Body = {} -<객체 생성을 하였구요. 그다음 Body안에
            { setColor:function (color){
            document.querySelector('body').style.color = color; } 요렇게 메소드(함수)를 생성하였습니다.
            Body자체를 객체로 만들어 준거구요. Body.메소드(객체안의 함수를 메소드)를 선언해서 코드의 가독성을 높이기 위해서 구조화 하였다고 보시면 될 것 같습니다.
            대화보기
            • Body 객체 안에, 중복되는 'document.querySelector('body).style'부분을 없애고 싶어서 해당 객체에 새로운 property(target) 로 넣어버리고 this로 호출했는데, 작동이 안되네요..ㅠ 혹시 왜 그런지 아시는분 ㅠㅠㅠ

              var Body = {

              target : document.querySelector('body').style,
              bodyBGColorChange : function() {
              this.target.backgroundColor = 'black';
              },
              bodyColorChange : function () {
              this.target.color = 'white';
              }

              }
            • SaeyanNarae
              var Links = { }
              var Body= { }

              위에 2개는 객체를 생성하는 명령어이고

              function Links = { }
              function Body = { }

              function이 들어간 2개는 함수를 생성하는 명령어를 말씀하시는 것 같습니다.
              함수를 저렇게 생성하는건 문법 오류이구요.

              만약 함수를 생성하고자 한다면

              function Links() { }
              function Body() { }

              혹은

              Links = function() { }
              Body = function() { }

              이렇게 선언하셔야 됩니다.
              대화보기
              • 김주성
                강의에서는
                function Links = {

                function Body = {

                이렇게 나와 있어서 따라하니까 안되더라구요? 근데 댓글에 보니까

                var Links = {

                var Body = {

                이렇게 선언 해서 그대로 하니까 됩니다. 왜 강의에서는 function으로 했는데 되고 저는 var 로 새로 선언해야 되는 건가요???
              • dudwn7504
                감사합니다~
                대화보기
                • 와이에스
                  객체의 메소드 사용할때는 '='을 빼고 '( )'만 사용해보세요
                  <수정전>
                  Body.setBackgroundColor = ('black');
                  Body.setColor = ('white');
                  <수정후>
                  Body.setBackgroundColor('black');
                  Body.setColor('white');
                  대화보기
                  • dudwn7504
                    버튼을 눌러도 버튼 이름만 바뀌고 나머지는 동작을 안해요 이유를 모르겠어요. 어디가 잘못되어 있는지 알려주세요 ㅠㅠ

                    <script>
                    var Body = {
                    setBackgroundColor:function (color){
                    document.querySelector('body').style.backgroundColor = color;
                    },
                    setColor:function (color){
                    document.querySelector('body').style.color = color;
                    }
                    }

                    function nightDayHandler(self){
                    var target = document.querySelector('body');
                    if(self.value === 'night'){
                    Body.setBackgroundColor = ('black');
                    Body.setColor = ('white');
                    self.value = 'day';
                    } else {
                    Body.setBackgroundColor = ('white');
                    Body.setColor = ('black');
                    self.value = 'night';
                    }
                    }
                    </script>
                    </head>
                    <body>
                    <input id="night_day" type="button" value="night" onclick="
                    nightDayHandler(this);
                    ">
                  • 완료!
                  • 2019-02-21 완료
                  • 우도순
                    완료
                  • 재래
                    어떻게 이렇게 쉽고 쏙쏙 이해되게 설명하실 수가 있죠. 어느새 여기까지 왔네요.
                  • 발헤
                    감사합니다.완료
                  • 호두
                    아 강의에 있네요 제가 실수 했습니다.
                  • 호두
                    What's “this” in JavaScript onclick?
                    Ask Question

                    <a onclick="javascript:func(this)" >here</a>

                    Answers


                    In the case you are asking about, this represents the HTML DOM element.

                    So it would be the <a> element that was clicked on.
                  • 호두
                    <input type="button" value="night" onClick="
                    nightDayHandler(value);
                    ">

                    에서
                    <input type="button" value="night" onClick="
                    nightDayHandler(this);
                    ">

                    로 변경하니까 제대로 동작하네요

                    이 차이점 알려주실 수 있나요?

                    onClick 이 HTML 의 DOM을 리턴한다는데

                    버튼을 클릭하는 순간 this값으로 input 태그의 value값이 전달되는건가요?
                  • 함가죠
                    완료 감사합니다:)
                  • gravity251
                    완료
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기