WEB2 - JavaScript

댓글

댓글 본문
작성자
비밀번호
  1. 승방이
    사랑해요 이고잉....코딩의 재미를 옴팡지게 느끼고 있습니다.. -이걸 들을때만은 코딩 천재가 되는 코린이 드림-
  2. Weini Jeon
    오아... 저는 빡데가린가 봐요.. 이해가 된거 같으면서도 이해안된 이느낌은 대체...;;;
  3. hyegineer
    완료!
    우왕 객체 활용까지 다 들었다
    재밌었땋ㅎㅎㅎ
    얼른 객체의 메소드와프로퍼티 등등 쓰임새 익숙해지고싶다
  4. Hyeon-Jun Ha
    완료
  5. 영미
    궁금한 부분이 있습니다.

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

      기존 코드에서 변수 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
                완료
              • 지미츄
                완료 감사합니다~~
              • 이수하
                완료
              • 어렵네요....
              • 김용범
                몰아쳐서 객채까지 공부를 완료했습니다. 속도가 정말 빠르네요! 뿌듯합니다
              • 막시무스
                전 코딩이 어디서 시작되었는지 몰라 직접 강의내용 보고 코딩 해봤습니다.
                처음부터 코딩하다 보니 setColor -> setcolor 이런 철자 오류로 인해 대부분 동작이안되더군요?
                밑 참조하시어 어디서 틀렸는지 함 대조해 보세요 ! 감사합니다.

                <!doctype html>
                <head>
                <title>생활코딩</title>
                <meta charset="utf-8">
                <link rel="stylesheet" href="style.css">
                <script>
                var Link = {
                setColor:function(color){
                var alist = document.queryselectorAll('a');
                var i = 0;
                while(i < alist.lenght){
                alist[i].style.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(self){
                var target = document.querySelector('body');
                if (self.value ==='night'){
                Body.setBackgroundColor('black');
                Body.setColor('white')
                self.value = 'day';

                Link.setColor('powerblue');
                } else {
                Body.setBackgroundColor('white');
                Body.setColor('black')
                self.value = 'night';

                Link.setColor('blue');
                }
                }

                </script>
                </head>
                <body>
                <a href="main.html"><h1>생활코딩</h1></a>
                <h2>object</h2>
                <h5>객체는 수납해서 꺼내쓸수있다</h5>
                <br>
                <input id="night_day" type="button" value="night"
                onclick="nightDayHandler(this); ">

                </body>
                </html>
              • 돼지천재
                감사합니다.
              • 카페산
                파일 전체 내용을 공유해주셔야 디버깅이 가능할 것 같아요^^;;
                대화보기
                • 김귀인
                  어렵네요 ㅋㅋ
                • 일단시작하고본다
                  Body 객체부분의 코드를 보여주셔야 디버깅이 가능할 듯 합니다.
                  대화보기
                  • 답변
                    var Body 부분에서 setBackgroundColor 을 변경해보니 저도 같은 에러가나네요 오타확인해보세요~

                    var Body = {
                    setColor: function(color) {document.querySelector('body').style.color = color;},
                    setBackgroundColor: function(color) {document.querySelector('body').style.backgroundColor = color;}
                    }
                    대화보기
                    • 안다
                      강의 잘보고 있습니다. 다름이 아니라, 이 전까지는 잘 따라오고 있었는데요.
                      var Body로 묶은 뒤에 실행해보았는데 아래처럼 에러가 납니다. (저 부분은 따로 손대지도 않았어요...)

                      function nightDayHandler(self){
                      var target = document.querySelector('body')
                      if(self.value === 'night'){
                      Body.setBackgroundColor('black'); --> 에러난 부분

                      Uncaught TypeError: Body.setBackgroundColor is not a function
                      at nightDayHandler (3.html:26)
                      구글링해보니 setBackgroundColor 이름을 바꿔보라고 해서 해봤는데도 안되네요. 도움 부탁 드립니다.
                    • 풀등
                      감사합니다.^^
                    • 몽고르스
                      변경사항 소스를 그대로 복사해서 실행 해봤는데 작동이 안되요 그래서 영상 보면서 쳤는데 실행이 안되네요
                      body 부분만 보입니다. 예제로 했던 전체적인 소스 올려주실 수 있나요?
                    • var target = document.querySelector('body');
                      은 없어도 되죠?
                    • 고수로가는길
                      여기까지 클리어
                    • Inyeong Gim
                      배열, ,함수, 객체 넘어오면서 스스로 한번 되새김질이 필요한 것 같네요. 감사합니다.
                    • 감사합니다^^
                      20180831
                    • flyhoon
                      감사합니다.
                    • SungWoon
                      잘봤습니다!!!
                    • 로버트한
                      감사합니다. ~~ 어렵지만 고고^^
                    버전 관리
                    egoing
                    현재 버전
                    선택 버전
                    graphittie 자세히 보기