WEB2 - JavaScript

함수의 활용

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. 양갱호우
    function에서의 this는 다른 뜻으로 나타나기 때문에 사용을 못하므로 대체할 수 있는 변수를 주어 적용시키는 것 같습니다.
    input에서 this값을 사용하여 nightDayHandler 적용시킨 후 이 값을 function에서 nightDayHandler에 this값을 다른 매개체인 self로 받아 출력하는 방식인 것 같습니다.

    저는 이렇게 이해 됐는데 잘못된 부분이 있으면 알려주세요!
  2. 개발하는 공대생
    단순히 true와 false 값을 보기 위함이라면 조건문을 쓸 필요가 없고 비교 값을 통해서 서로 다른 결과를 보기 위함이라면 조건문을 사용한다고 생각합니다.
    대화보기
    • 달려라늙은이
      초짜가 뜬금없는 질문드립니다.
      제가 문제를 풀었는데 제대로 풀었는지 몰라 고수님들의 의견을 여쭤보려구요^^;;
      저 문제의 답을 제가 제대로 이해하고 적었는지 의견 부탁드리고 다른 좋은 방법있으시면
      말씀해주시면 감사드리겠습니다.ㅎㅎ
      그리고 혹시 여기서 조건문을 넣어 할 수 있는 방법도 있을까요??

      문제) areSameLength 함수를 작성하세요.

      2개의 문자열이 주어졌을 때, areSameLength는 문자열들의 길이가 같으면 true를,
      아니면 false를 반환해야 합니다.

      제가 적은 답안)
      function areSameLength(){
      var a = 'cup';
      var b = 'land';
      console.log(a.length === b.length);
      }

      areSameLength('a','b');

      이렇게 답을 내서 변수의 글자수를 맞추면 'true', 다르게 하면 'false'로 나오기는 하는데
      제대로 한게 맞을까요??ㅎㅎ
    • 김미일
      앗 감사합니다!!! 제대로 작동하네요!!
      대화보기
      • 사차원
        저도 초보이지만 님의 코드를 보니... 함수를 감싸고 있는게 Javascript가 아니고 CSS(style)로 되어 있어서 그런것 같네요.

        네번째 줄의 <style>을 <script>
        그리고 닫는 태그도 </style> 에서 </script>로 변경하시고 시도해 보세요~
        제가 이렇게 변경해서 해보니 잘 작동하네요...
        건승하세요~
        대화보기
        • 밀찡
          함수활용에서 계속 막히는데요ㅠㅠ
          console에서 보면
          Uncaught ReferenceError: nightDayHandler is not defined at HTMLInputElement.onclick (ex3.html:39)

          여기서 39는 ~~~ nightDayHandler(this);">
          이후에 <ol>이 시작되는 곳입니다.ㅜㅜㅜ
          코드를 살짝살짝 바꿔보니까 <ol>~</ol>이 문제가 아니라 nightDayHandler함수 다음 줄이 정의가 안돼서 문제가 발생한 것 같습니다ㅜㅠㅠㅠㅠㅠㅠㅠㅠㅠㅠ
          저만 이렇게 에러가 뜨나요ㅠㅠㅠㅠㅠ

          [원문]
          <!DOCTYPE HTML>
          <html>
          <head>
          <style>
          function nightDayHandler(self) {
          var target =
          document.querySelector('body');
          if(self.value === 'night'){
          target.style.backgroundColor = 'black';
          target.style.color = 'white';
          self.value = 'day';
          var alist = document.querySelectorAll('a');
          var i = 0;
          while(i < alist.length){
          alist[i].style.color = 'powderblue';
          i = i +1;
          }
          } else {
          target.style.backgroundColor = 'white';
          target.style.color = 'black';
          self.value = 'night';
          var alist =
          document.querySelectorAll('a');
          var i = 0;
          while(i < alist.length)
          {
          alist[i].style.color = 'blue';
          i = i +1;
          }
          }
          }
          </style>
          </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>
          <input id="night_day" type="button" value="night" onclick="
          nightDayHandler(this);
          ">
          <p>(/ˈdʒɑːvəˌskrɪpt/),[8] often abbreviated as JS, is a high-level, interpreted programming language that conforms to the ECMAScript specification. It is a programming language that is characterized as dynamic, weakly typed, prototype-based and multi-paradigm.
          Alongside HTML and CSS, is one of the core technologies of the World Wide Web.[9] enables interactive web pages and is an essential part of web applications. The vast majority of websites use it,[10] and major web browsers have a dedicated engine to execute it.
          As a multi-paradigm language,supports event-driven, functional, and imperative (including object-oriented and prototype-based) programming styles. It has APIs for working with text, arrays, dates, regular expressions, and the DOM, but the language itself does not include any I/O, such as networking, storage, or graphics facilities. It relies upon the host environment in which it is embedded to provide these features.
          Initially only implemented client-side in web browsers, JavaScript engines are now embedded in many other types of host software, including server-side in web servers and databases, and in non-web programs such as word processors and PDF software, and in runtime environments that make JavaScript available for writing mobile and desktop applications, including desktop widgets.
          The terms Vanilla and Vanilla JS refer to JavaScript not extended by any frameworks or additional libraries. Scripts written in Vanilla JS are plain JavaScript code.[11][12]
          Although there are similarities between JavaScript and Java, including language name, syntax, and respective standard libraries, the two languages are distinct and differ greatly in design. JavaScript was influenced by programming languages such as Self and Scheme.[13]</p>
          </body>
          </html>
        • 완료!
        • 2019-02-20 완료
        • 우도순
          완료
        • 발헤
          감사합니다. 완료
        • 호두
          고맙습니다.
        • 함가죠
          완료 감사합니다:)
        • gravity251
          완료
        • 지미츄
          완료
        • Aimhee
          완료
        • 흠.... 이번 강의는 지난번과 같이 이해가 안 되는 부분이 같네요...
          this와 self 부분....
          매개변수 부분...
          일단 진도는 나가면서 더 고민을 해봐야 할거같아요.
        • 돼지천재
          감사합니다.
        • CMD +D 누르시면 반전 되는거 보실 수 있어요
          대화보기
          • Koogwanmo
            CTRL + D
          • leesj020925@naver.com
            아랫분처럼 저도 같은 단어를 한꺼번에 선택하는 단축키가 궁금합니다.
          • 이하빛
            3분 36초에 this 를 여러개 잡을 때 사용하는 키가 무엇인가요?
            다다다 하고 쉽게 this라는 영역을 찾아 잡아내는 단축키를 알고싶어요!
          • 아직은걱정이많은나
            예전에 사전에 '매개'라는 단어의 뜻을 국어사전에 찾아보지도 않았으면서 도대체 매개변수가 뭐야라고 머리를 꽁꽁 싸맸던 것이 생각나네요.
            제 생각에는 질문이 곧 답이 될 수도 있을거 같습니다.

            매개: 어떤 두개가 관계가 있다는 것일까? 이 매개(변수)는 누구하고 관계 되어 있다는 것일까?
            인자: 어떤 것으로 부터 원인이 된다는 것일까? 누가 원인이 된다는 것인가?

            매개 (媒介) [명사] 1. 둘 사이에서 양편의 관계를 맺어 줌.
            인자7因子 1 .어떤 사물의 원인이 되는 낱낱의 요소나 물질.

            컴퓨터 공학에서 (예전 일본이나 중국이나 한국이나) 한자는 영어를 번역했겠지만 최대한 비슷하게 해석했을거라고 생각합니다.
          • 함수예고 영상과 같은 거 같은데... 저만 그런건가요????
          • harowaroi
            한 번 봤는데...오잉...이게 왜 이렇게 되는 거지...하는 생각이 드네요.(한 번 더 봐야겠어여..)
          • 감사합니다^^
          • flyhoon
            함수 내용을 <head>에 쓰는 것도 그렇고, 점점 궁금해 지는것이 많은 강의 였던것 같아요!
          • naninem
            오잉? 이 내용 어디서 본거 같은 느낌은 뭐죠 위에서본거같은데.
          • 코딩배우는초딩
            감사합니다
























































































            !!!!!!!!!!!!!!!!!!!!!!!






























































            !!!!!!!!!!!!!





































            !!!!!!!!!!!!!!!!!!!!!!















































































            !!!!!!!!!!!!!!!!!!!!!


























































































            !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!







































































            !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!1
          • metallsk
            매개변수와 input태크의 this개념 덕분에 잘 정리해보았습니다. 감사드려요~
          • 한상문
            어려운데... 왜 재미있는 걸까요? ^^
          • 김영찬
            오늘은 여기까지!
          • 소금돌
            this에 대한 개념이 필요한 코드 내용
          • 스페이스몽키
            감사합니다!!
          • jayxwoo
            잘봤습니다. 감사합니다.
          • 옥슬이
            이해하기가 어렵네요
          • 라울
            감사합니다!
          • Mingi Son
            180214 강의 감사합니다!
          • JN87
            180211 감사합니다!
          • PassionOfStudy
            << 2018-01-20 - 3일차 _세 번째 강의 >> --> 완료!


            Question)
            여기서 이해 못한다고 넘어가라고 하시니 넘어갑니다.
            그런데 왜 그런지 궁금합니다. ㅠㅠ 궁금궁금~ 검색해서 찾아보겠습니다.
          • 박서chris
            아 왠지 모르겠는데 저한테만 에러가ㅠㅠㅠㅠㅠㅠㅠㅠㅠ
          • Fiat
            감사합니다~
          • 이유리
            감사합니다.
          • SanFrancisco
            설명 감사해요. 이해하기 쉽네요 ^^
            대화보기
            • 박신우
              함수를 호출할때 인자로 this를 주면 해당 함수호출문이 포함되어 있는 input 태그 자체가 인자로 함수에 전달됩니다. 함수는 self라는 파라메터로 그 인자를 전달받게 되고, 그 self라는 값은 함수를 호출한 input 태그라고 볼 수 있기 때문에 클릭하는것에 따라서 value 값이 night에서 day로 계속 바뀌게 되는 겁니다. 파라메터로 self가 아닌 다른 것을 이름으로 해도 되지만 함수를 호출할때의 인자는 this를 유지해야 합니다
            • Jupi
              -정리-
              - 함수는 리펙토링에서 아주 중요한 역할을 한다.
              - 함수안에 this는 객체와 관련이 있다.

              - test해보니, parameter로 self말고 다른 걸 줘도 움직이긴 하던데, self를 쓰는건 관습인지..?

              - 스크립트 태그의 적절한 위치가 궁금해서 찾아 보았습니다.
              참고 하셔요~
              http://hmmim.tistory.com/8
            graphittie 자세히 보기