WEB2 - JavaScript

댓글

댓글 본문
  1. 코딩하는렌즈쟁이
    2020-05-27
    객체 활용
  2. HanLee
    쉽지 않았어요. 감사합니다.
  3. 이서연
    완료
  4. 호야
    완료
  5. green diseny
    5/10완료
  6. hhyun
    완료
  7. 솔솔
    4/28 완료
  8. 코딩꿈나뮤
    생코로 코딩입문 9일차
    html
    css
    web2 자바스크립트
    유튜브 생코 자바스크립트 입문수업 (48/102) 카아---앗----!ㅇㅅㅇ!
    var target = document.querySelector('body');도 캇ㅇㅅㅇ

    <script>
    var Links = {
    setColor:function(color){
    var alist = document.querySelectorAll('a');
    for( i = 0 ; i < alist.length ; ++i){
    alist[i].style.color = color;
    }
    }
    }

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

    function nightDayHandler(self){
    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>
  9. done
  10. 이희수
    정말 고맙습니다... 저는 아무리 봐도 못 찾았는데.. 감사합니다. 덕분에 해결했네요.
    정말 감사합니다~~~!!!
    대화보기
    • 하나해요
      완료!
    • 3rd-big
      희수님코드기준 30, 37번째줄 수정하면 되네요
      30번째줄
      희수님 코드: Body.setBackgoundColor('black');
      수정 코드 : Body.setBackgroundColor('black');

      r << 빼먹으심
      비주얼코드로 저도 공부중인데 함수 더블클릭했을때 바디객체쪽에 안나오는거 보고 찾았네요
      대화보기
      • 이희수
        예. 오늘 다시 켜봤지만 실행이 안 되네요... 도대체 뭐가 잘못된 건지 모르겠네요.. 문제가 뭘까요??
        대화보기
        • 아자요
          콘솔에 오류가 안뜨는데 실행이 안되나요??
          대화보기
          • 이희수
            <!DOCTYPE html>
            <html>
            <head>
            <title>WEB - JavaScript</title>
            <meta charset="utf-8">
            <script>
            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;
            }
            }
            }

            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.setBackgoundColor('black');
            Body.setColor('white');
            self.value = 'day';

            Links.setColor('powderblue');

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

            Links.setColor('blue');
            }
            }

            </script>
            </head>
            <body>
            <h1><a href="index.html">WEB</a></h1>

            <input id="night_day" type="button" value="night" onclick="
            nightDayHandler(this);
            ">
            <ol>
            <li><a href="1.html">HTML</a></li>
            <li><a href="2.html">CSS</a></li>
            <li><a href="3.html">JavaScript</a></li>
            </ol>
            <h2>JavaScript</h2>
            <p>
            자바스크립트(영어: JavaScript)는 객체 기반의 스크립트 프로그래밍 언어이다.
            이 언어는 웹 브라우저 내에서 주로 사용하며, 다른 응용 프로그램의 내장 객체에도
            접근할 수 있는 기능을 가지고 있다. 또한 Node.js와 같은 런타임 환경과 같이
            서버 사이드 네트워크 프로그래밍에도 사용되고 있다. 자바스크립트는 본래
            넷스케이프 커뮤니케이션즈 코퍼레이션의 브렌던 아이크(Brendan Eich)가 처음에는
            모카(Mocha)라는 이름으로, 나중에는 라이브스크립트(LiveScript)라는 이름으로
            개발하였으며, 최종적으로 자바스크립트가 되었다. 자바스크립트가 썬 마이크로시스템즈의
            자바와 구문이 유사한 점도 있지만, 이는 사실 두 언어 모두 C 언어의 기본 구문에
            바탕을 뒀기 때문이고, 자바와 자바스크립트는 직접적인 관련성이 없다. 이름과
            구문 외에는 자바보다 셀프나 스킴과 유사성이 많다.
            </p>


            </body>
            </html>

            이 부분을 다시 한번 들으면서 차근차근 해가고 있는데 오류 뜬 것도 없고 전에 했던 것과 비교를 해봤는데
            당최 뭐가 다른지도 모르겠고 완전 틀린그림찾기네요...
            도대체 뭐가 틀렸는지 봐주세요... ㅜㅜ
          • OneJae EE
            에고, 따뜻한 격려에 진심으로 감사드려요. 평화로운 주말 보내시길 바라고 thumbpark님과 thumbpark님 주변 분들 모두모두 건강하시길 바랍니다! 고맙습니다 :)
            대화보기
            • thumbpark
              죄송하긴요. 이렇게 함께 배우라고 공동공부 기능도 있고 댓글 기능도 있다고 생각합니다. 매수업 원재님 댓글 볼 때마다 기운 받아 저도 열심히 공부 중입니다. 좋은 주말 보내세요 :)
              대화보기
              • OneJae EE
                그렇군요~ 에고, 다른 분들께 혼란을 드린 것 같아 죄송하네요. 가르쳐 주셔서 감사드리고 앞으로도 잘못된 부분 있다면 지도 부탁드립니다! 고맙습니다 :)
                대화보기
                • thumbpark
                  안녕하세요 원재님. 여러가지 수업을 듣고 있는데 원재님의 댓글을 볼 때마다 같이 공부하는 거 같아서 힘이 나네요. 공부하고 의문이 있는 부분 혹은 본인이 겪었던 문제점과 배움을 나눠주시는 부분 감사해요. 아래에 예제 관련 말씀주신 부분에서 정정할 부분이 있어 댓글 남깁니다 :)

                  1. set과 .style.타입 의 동일화
                  2. 대소문자 체크의 중요성 에 대해서 댓글 남겨주셨어요.

                  1. 본론부터 말씀드리자면 set과 .style. 뒤의 오는 단어는 같을 필요가 없습니다. 위의 예제에서 쓰인 set은 통상적으로 프로그래밍에서 자주 쓰이는 단어일 뿐 다른 단어로 대체 가능합니다. 많은 함수를 만들었을 때 특정함수가 어떤 역할을 하는지 기억하기 위해 역할을 나타내는 이름을 주로 부여하고 그런 의미해서 setColor는 색상을 설정한다라는 의미를 부여하기 위한 것이지 다른 단어로 바뀌어도 됩니다.
                  style.xxx 에 나오는 것은 이미 설정되어 있는 것을 가져다 쓰는 것이라 정해진 대로 이름을 써야하고 우리가 만드는 함수는 그 어떤 이름이 되어도 쓰이는 곳에서 통일성있게 쓰이면 상관없습니다.

                  즉, style 뒤에 나오는 단어와 메소드(함수)의 단어는 일치할 필요가 없습니다.

                  2. 위와 같은 이유로 메소드의 이름은 setColor일 필요가 없으며, 대문자 소문자 또한 상관 없습니다. 다만 특정 이름으로 지정했을 경우 그 메소드를 사용할 때 일관성 있게 해당 이름 그대로 대문자와 소문자를 사용해주셔야 합니다. setwhy 일 경우 setwhy로, Colorwhy일 때는 Colorwhy로, colorwhy일 때는 역시 소문자인 colorwhy로 사용해주셔야합니다. 첨부하는 예시로 위의 설명이 명확해졌으면 합니다.
                  모두 좋은 하루되세요 :)

                  예시)

                  <!doctype html>
                  <html>

                  <head>
                  <title>WEB1 - JavaScript</title>
                  <meta charset="utf-8">
                  <script>

                  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;
                  }
                  }
                  }

                  var Body = {
                  hamburgerwhy: function (color) { // set이 아니라 다른 단어로 시작해도 상관없습니다.
                  document.querySelector('body').style.color = color;
                  },
                  setwhatIwant: function (color) { // style의 내용과 메소드 이름이 일치할 필요없습니다.
                  document.querySelector('body').style.backgroundColor = color;
                  }
                  }
                  function nightDayHandler(self) {
                  var target = document.querySelector('body');
                  if (self.value === 'night') {
                  Body.setwhatIwant('black');
                  Body.hamburgerwhy('white');
                  self.value = 'day';
                  Links.setcolor('powderblue');
                  } else {
                  Body.setwhatIwant('white');
                  Body.hamburgerwhy('black');
                  self.value = 'night';
                  Links.setcolor('blue');
                  }
                  }
                  </script>
                  </head>

                  <body>
                  <h1><a href="index.html">WEB</a></h1>

                  <ol>
                  <li><a href="1.html">HTML</a></li>
                  <li><a href="2.html">CSS</a></li>
                  <li><a href="3.html">JavaScript</a></li>
                  </ol>

                  <br>

                  <input type="button" value="night" onclick="nightDayHandler(this);">
                  </body>

                  </html>
                  대화보기
                  • thumbpark
                    난뀨님이 남겨주신 코드에서

                    function LinksSetColor(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 Links 와 Body를 만드시기때문에 기존에 있던 함수를 쓸 필요가 없어요. 사실 함수가 있어도 예제 안에서 함수 사용을 안할 뿐 작동은 해야하는데 각 함수를 닫는 } 가 빠져 있어서 작동 안 하네요. 만드신 예제에 link 즉 <a></a> 태그가 없어 사실 var Links는 님의 예제 파일의 경우 필요없는 부분입니다. :) 6개월 전에 남기신 질문이지만 혹시 비슷한 문제로 고민 중이신 분에게 도움이 되었으면 해서 답글 남겨요.
                    대화보기
                    • 점점익숙해지면 직관적으로 받아들여질 날이 오겠죠? 완전처음 접했을때보단 아 이게이런말이구나 조금 더 이해돼요
                    • 2020/04/03

                      이번 강의를 통해 객체의 의미, 객체 선언 방법과 호출, 객체안에 함수를 만들어 사용하는 방법까지 잘 배우고 갑니다!
                    • ㅇㅇ
                      자바스크립트는 세미콜론을 생략가능하다고 해요.
                      표준 스타일 가이드에서는 세미콜론을 사용하지 말라고 하네요ㅇㅅㅇ!
                      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세 비전공자 / 완료
                        • 완료!
                        • Yohanesty
                          완료
                        • 뿡뿡이
                          vscode를 사용중인데요, 객체이름을 Body로 지정하니 초록 글씨로 뜨면서 적용이 안되네요
                          밑에 댓글에서도 다른 이름을 사용하라해서 body나 Bodys, Body1 등 이름을 바꿔보았지만
                          적용이 안되는군요..
                          어찌해야 하나요... 도와줘요 코딩히어로들!
                        • 뿡뿡팡야
                          완료
                        • 완료
                        • 앞에 객체 수업에서는
                          var coworkers= {
                          "num1" : "1",
                          "num2" : "2"
                          };
                          객체 쓰고 마지막에 ; 를 붙이던데

                          왜 이번에는 ;를 붙이지 않나요?
                        • Always
                          객체..확실히 완전히 이해하긴 쉽지 않네요 ㅜㅜ
                        • 완료
                        • 완료
                        • daniellee123456
                          완료
                        • 완료
                        • 코딩하쟈
                          완료
                        • 규몽
                          완료
                        • 숩숩이
                          완료
                        • eddylee123456
                          완료
                        • 감사합니다.완료
                        • 감사해요!
                        • 항상 감사합니다.!!
                        • 춤춤
                          완료
                        • thsths
                          완료
                        • 스티븐잡숴
                          완료
                        • Jeremy Jo
                          완료
                        • 문병민
                          완료!!
                        버전 관리
                        egoing
                        현재 버전
                        선택 버전
                        graphittie 자세히 보기