옥수수와 식빵 그리고 코딩

28. 함수 활용 (실습) 본문

2023/생활코딩

28. 함수 활용 (실습)

옥식 2023. 9. 29. 01:43

전에 실습했던 버튼! 웹사이트를 함수를 이용해서 리팩토링 하겠다!

 

onlclik이라는 이벤트 안에서 this는 이 이벤트가 소속된 이 태그(<input>)를 가리키도록 약속되어 있는데 독립된 함수를 만들게 되면 여기서 this는 더이상 <input>태그를 가리키지 않고 전역객체를 가리키게 됨 (웹브라우저에서는 윈도우(지금은 이해 못함 ㄱㅊ))

그래서 함수 안에 있는 this가 input태그를 가리키게 하기 위해서 

<input id="night_day" type="button" value="night" onclick="
nightDayHandler(this);

">

nightDayHandler()함수를 실행할 때 괄호안에 this를 넣어줌. 이럼 이 this는 함수가 실행될 떄 인자가 됨

function nightDayHandler(self){

this를 받는 매개변수 이름은 self로 해줌.

그러면 원래 코드에서 this를 self로 바꿈

 

그러면 잘 동작함..!

버튼을 아무리 늘려도 각 버튼들은 각각 잘 움직이고, 수정해야 할 사항이 있으면 함수만 수정하면 됨

아주 cool하고 sexy하다.

 

<완성코드>

<!doctype html>
<html>
<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
  <script>
    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') ; //어두워지면 <a>태그 글자색 하늘색으로
        var i = 0;
        while (i<alist.length) {
            alist[i].style.color = 'powderblue';
            //console.log(alist[i]);
            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;
        }

      }
    }
  </script>

</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
    nightDayHandler(this);
    ">
    <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 (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
    내가해냄
  </p>
</body>
</html>

 

<기존 코드>

<!doctype html>
<html>
<head>
  <title>WEB1 - JavaScript</title>
  <meta charset="utf-8">
</head>
<body>
  <h1><a href="index.html">WEB</a></h1>
  <input id="night_day" type="button" value="night" onclick="
  var target = document.querySelector('body');
    if(this.value === 'night'){
      target.style.backgroundColor='black';
      target.style.color='white';
      this.value = 'day';

      var alist = document.querySelectorAll('a') ; //어두워지면 <a>태그 글자색 하늘색으로
      var i = 0;
      while (i<alist.length) {
          alist[i].style.color = 'powderblue';
          //console.log(alist[i]);
          i = i+1;
      }

    } else {
      target.style.backgroundColor='white';
      target.style.color='black';
      this.value = 'night';

      var alist = document.querySelectorAll('a') ; //밝아지면 파란색으로
      var i = 0;
      while (i<alist.length) {
          alist[i].style.color = 'blue';
          i = i+1;
      }

    }

    ">
  <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 (/ˈdʒɑːvəˌskrɪpt/[6]), often abbreviated as JS, is a high-level, dynamic, weakly typed, prototype-based, multi-paradigm, and interpreted programming language. Alongside HTML and CSS, JavaScript is one of the three core technologies of World Wide Web content production. It is used to make webpages interactive and provide online programs, including video games. The majority of websites employ it, and all modern web browsers support it without the need for plug-ins by means of a built-in JavaScript engine. Each of the many JavaScript engines represent a different implementation of JavaScript, all based on the ECMAScript specification, with some engines not supporting the spec fully, and with many engines supporting additional features beyond ECMA.
    내가해냄
  </p>
</body>
</html>

 

 

* 분명 4분짜리 강의였는데 40분이 지나간 기적을 보았따

 

저작자표시

'2023 > 생활코딩' 카테고리의 다른 글

About Github  (0) 2023.10.02
29. 객체(object)  (0) 2023.09.30
24. 함수..!  (0) 2023.09.29
23. 배열과 반복문의 활용  (1) 2023.09.28
22. 배열과 반복문 하이브리드  (0) 2023.09.28
'2023/생활코딩' Related Articles more
Comments