-
Notifications
You must be signed in to change notification settings - Fork 0
/
3refactoring.html
74 lines (66 loc) · 2.8 KB
/
3refactoring.html
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
<!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">
<title>3 - JavaScript refactoring</title>
</head>
<!-- 3.html을 리팩토링하는 작업 -->
<!-- 코드를 간결하고 효율적으로 만드는 작업 -->
<body>
<h1><a href="">WEB</a></h1>
<input type="button" value="night" onclick="
// target이라는 변수를 만들어 간결하게 만든다.
var target = document.querySelector('body');
// 자기 자신을 가리키는 문법이라서 this를 쓰면 간결해진다
if(this.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day';
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.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</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>
<!-- 자기 자신을 가리키는 문법이라서 this를 쓰면 간결해진다 -->
<input type="button" value="night" onclick="
if(this.value === 'night') {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
this.value = 'night';
}
">
<input type="button" value="night" onclick="
if(this.value === 'night') {
document.querySelector('body').style.backgroundColor = 'black';
document.querySelector('body').style.color = 'white';
this.value = 'day';
} else {
document.querySelector('body').style.backgroundColor = 'white';
document.querySelector('body').style.color = 'black';
this.value = 'night';
}
">
</body>
</html>