# 함수의 활용

### 예시) 주/야간모드 토글버튼 : this & self

![](https://3193435092-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Miu1tqKdNPM-BV0usUx%2F-Mj8fWg-hsp_uaz_vhPS%2F-Mj8g2agLxGx3JvEYpDz%2F%EC%9D%B4%EB%AF%B8%EC%A7%80%20052.jpg?alt=media\&token=11ecb4de-0797-45cf-9b1b-3dd13150fead)

{% tabs %}
{% tab title="after" %}

```javascript
<head>
<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');
            var i = 0;
            while(i < alist.length){
                alist[i].style.color = 'powderblue';
                i = i + 1;
            }

        } else {
            target.style.backgroundColor = 'white';
            target.style.color = 'white';
            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>

<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);
    ">
```

{% endtab %}

{% tab title="전체코드" %}

```javascript
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <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');
            var i = 0;
            while(i < alist.length){
                alist[i].style.color = 'powderblue';
                i = i + 1;
            }

        } else {
            target.style.backgroundColor = 'white';
            target.style.color = 'white';
            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>
```

{% endtab %}

{% tab title="before" %}

```javascript
<h1><a href="index.html">WEB</a></h1>
    <input 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');
            var i = 0;
            while(i < alist.length){
                alist[i].style.color = 'powderblue';
                i = i + 1;
            }

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

            var alist = document.querySelectorAll('a');
            var i = 0;
            while(i < alist.length){
                alist[i].style.color = 'blue';
                i = i + 1;
            }
        }
    ">
```

{% endtab %}
{% endtabs %}

1. &#x20;\<head>안에 \<input>에 적용 될 **\<script>코드를 작성**한다.
2. &#x20;작성한 **script코드를 'function 함수명(){}'로 감싸준다**.
3. &#x20;\<input>에 **this**를 준다. ex) 함수명(this);
4. \<script>에 **매개변수**의 이름을 **self**로 정의한다. ex) function 함수명(self);&#x20;
5. \<script>의 **value값을 self로 전부 적용**한다. ex) self.value


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://westsilver.gitbook.io/study-script/javascript/basic/function/undefined.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
