함수의 활용

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

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

<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>

<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;
            }
        }
    ">

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

Previous함수 Next객체 { }

Last updated 3 years ago

Was this helpful?