WEB2 - JavaScript

함수의 활용

소스코드

변경사항

댓글

댓글 본문
작성자
비밀번호
  1. moon
    항상 감사합니다.!!
  2. thsths
    완료
  3. 춤춤
    완료! 감사합니다~
  4. 스티븐잡숴
    완료
  5. 펜펜
    감사합니다!
  6. Jeremy Jo
    봤어요.
  7. 암말
    매개변수에서 아무 값도 주지 않으면 script안의 this는 전역개체 windows를 가리키게 된다.
    함수의 매개변수에 값을 부여하고 로직 안의 this를 매개변수의 값(ex.self)으로 바꾸면 기존의 this(현재 매개변수의 값)는 전역개체가 아닌 함수를 가리키게 된다.
    그리고 내가 버튼에 함수를 적용시키고 싶다면 함수 이름만 써준다음에 함수가 버튼을 가리킬 수 있도록 인자 값에 this를 적어준다. 그러면 로직 안의 매개변수의 값(self)이 다시 this로 바뀌어 버튼을 올바르게 가리킬 수 있게된다.
    함수를 사용함으로써 수 많은 개체의 값을 동시에 바꿀 수 있으며 그 수 많은 개체에 적용된 공식이 같다는 사실을 확신 할 수 있다.
  8. 샬롬
    완료
  9. 함수에서는 this대신 self로 바꾸기
    function handler(self){
    ~~~~self.~~~~;}

    handler(this);
    >>>self대신 this로 출력
  10. 자바스크립트
    어떤 부분이 이해가 안되시나요?
    대화보기
    • 오틀아이셔
      아 함수 개념은 이해하겠는데 활용부분은 이해가 안되네 ㅜㅜ
      이해하신분 팁좀....주실 수 있을까요?
    • 딥허브
      2019.12.21
    • 아빠늑대
      핸들러는 관습적인 이름.
      코드를 <head>에 붙여넣고 함수를 선언하고 실행해보면 처음에만 잘 동작한다.
      함수가 전역객체를 가리키게 되므로(?)
      <body>로 돌아가 argument로 this를, <head>로 돌아가 parameter값들을 self로 변경하면 제대로 동작한다.
    • 연구쟁이
      감사합니다.
    • 홍주호
      20191110 완료
    • 육포
      20191101
    • 완료
    • 굼벵이
      완료
    • 박창신
      완료
    • 감자
      완료
    • 20191001 Ted 완료!
    • 20191001 Ted 완료!
    • Min Sang Shin
      감사합니다.
    • 코딩만이 살길이다
      완료
    • 쑤우
      수강완료.감사합니다~
    • 현우
      완료
    • 정완료
      완료
    • 한조
      감사합니다!
    • 들국화
      감사합니다
    • JT_brand
      완료
    • pangse88@gmail.com
      할렐루야
    • this를 매개변수로 넘겨서 함수가 받게되면 함수에서는 self로 받자.
    • 완료!
    • 빅스퀘어
      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>로 변경하시고 시도해 보세요~
              제가 이렇게 변경해서 해보니 잘 작동하네요...
              건승하세요~
              대화보기
              graphittie 자세히 보기