WEB2 - JavaScript

함수의 활용

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. 완료!
  2. 빅스퀘어
    parameter와 argument라는 이해 안되는 영어 때문에...
    매개변수와 인자라는 말도 안되는 번역된 단어 때문에 저도 한 동안 헷갈렸죠..^^

    일단 전자는 함수를 정의할 때 나오고 후자는 함수를 사용할 때 나옵니다.

    연극에 비유하면 대본은 연극의 정의이고, 실제 연극은 대본의 사용입니다.
    대본에는 경찰1, 행인 1로 설정하고 이야기가 전개 되지만
    실제 무대는 경찰1 행동을 하는 장동건, 행인1의 행동을 하는 유준열처럼 구체적인 대상을 넣어야 하잖아요.

    위 처럼, 함수를 정의할 때는 상징적인 것을, 사용할 때는 구체적인 값을 줘야 합니다.

    <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
    "> -> 여기에서는 미리 정의된 nightDayHandler()함수를 사용하는 것입니다.
    따라서 구체적인 값인 this를 줘야 합니다.

    this는 nightDayHandler(self)라는 대본에서 self의 역할을 하게 됩니다.

    사용하는 시점에 this 자리에 self를 넣으려면, self는 구체적인 값이어야 합니다.
    예를 들면 var self = (특정 id를 갖는 버튼); 라는 형태로 구체적으로 정의를 해줘야 합니다.

    그럼 이 self는 대본에 있는 self의 역할을 하게 되는 것이죠.

    개인적으로는 매개 변수를 전달 변수, 인자를 전달값으로 기억하고 있습니다.
    대화보기
    • danielkim2554@gmail.com
      다봤음
    • Hyeon-Jun Ha
      완료
    • 영미
      function nightDayHandler(self){
      ㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡㅡ
      <input id="night_day" type="button" value="night" onclick="
      nightDayHandler(this);

      이 두식에서 self(파라미터) 와 this(인자) 의 역할을 보자면
      this는 input태그를 의미하게 됩니다. 그래서 this(인자)는 self(파라미터)에 입력되는데
      그렇게 되면 self = this = input태그 가 됩니다.
      즉 우리는 input태그를 function nightDayHandler(self) 함수에 self로 넣음으로서 self.value 값에 (input태그).value 로 만들수 있는것입니다.

      제가 제대로 이해한건지 모르지만 댓글들을 종합해보고 제가 이해한방식으로 설명해봤습니다. 잘못된 부분이 있다면 지적해주세요!
    • 태그안에서 this사용은 그 태그를 지칭할때 사용됩니다.

      질문하신대로 <input id="night_day" type="button" value="night" onclick="nightDayHandler(this);">의 this를 self로 써버리게 되면 self라는 변수를 함수로 전달해줘라 라는 뜻이되는데 애초에 self라는 변수가 없어서 에러가 뜨게됩니다.

      function nightDayHandler(self)에서 괄호 안에 있는 self는 매개변수인거구요.

      함수를 '호출'할때 self를 쓰게되면 self라는 '변수'의 값을 사용하겠다가 됩니다.

      this를 써서 input태그 자체를 함수로 넘겨주고 그 넘긴값을 self라는 매개변수로 받아서 사용하는거죠
      결국 함수안에서는 self가 함수로 바꾸기전 this역할을 하는거구요.

      저도 배우는 입장이고 설명은 영 꽝이여서 잘 이해되실지 모르겠네요 ㅠㅠ;
      대화보기
      • Leo Kim
        5/13 완료!
      • 주워니
        완료 !!
      • 위준우
        완료
      • 허공
        190509 감사합니다.
      • 최승윤
        완료!
      • 끝가지간다
        완료~
      • 끝가지간다
        완료~
      • 양갱호우
        function에서의 this는 다른 뜻으로 나타나기 때문에 사용을 못하므로 대체할 수 있는 변수를 주어 적용시키는 것 같습니다.
        input에서 this값을 사용하여 nightDayHandler 적용시킨 후 이 값을 function에서 nightDayHandler에 this값을 다른 매개체인 self로 받아 출력하는 방식인 것 같습니다.

        저는 이렇게 이해 됐는데 잘못된 부분이 있으면 알려주세요!
      • 개발하는 공대생
        단순히 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 강의 감사합니다!
              graphittie 자세히 보기