WEB2 - JavaScript

댓글

댓글 본문
작성자
비밀번호
  1. 홍주호
    20191116 완료
  2. 우유병
    다솜 화이팅
  3. 육포
    20191103
  4. 은별
    완료
  5. 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값이 전달되는건가요?
                  버전 관리
                  egoing
                  현재 버전
                  선택 버전
                  graphittie 자세히 보기