LifeCoding/JsRefactoring.html at master · kuku-kun/LifeCoding · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>

    </style>
    <title>Document</title>
</head>
<body>
    <h1><a href="index.html">WEB</a></h1>
    <input id="night_day" type="button" value="night"/>
    <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_Refactoring-중복제거</h2>
    <a href="JsFor.html"><p>반복문</p></a>
    <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>
    <script>
        const button = document.querySelector('#night_day');
        const target = document.querySelector('body'); // 사용 목적: 중복 제거
        function LightOnOff(){
            if(this.value === 'night'){
                target.style.background = 'black';
                target.style.color = 'white';
                this.value = 'day';
            } else {
                target.style.background = 'white';
                target.style.color = 'black';
                this.value = 'night';
            }
        }
        /*
        this - 자동으로 id를 찾아 들어간다
        */
       button.addEventListener('click',LightOnOff);
    </script>
</body>
</html>