<script>
function LinksSetColor(color) {
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
alist[i].style.color = color;
i++;
}
}
function BodySetColor(color) {
document.querySelector('body').style.color = color;
}
function BodySetBackgroundColor(color) {
document.querySelector('body').style.backgroundColor = color;
}
function nightDayHandler(self) {
// var target = document.querySelector('body');
if (self.value === 'night') {
BodySetBackgroundColor('black');
BodySetColor('white');
LinksSetColor('powderblue');
self.value = 'day';
} else {
BodySetBackgroundColor('white');
BodySetColor('black');
LinksSetColor('pink');
self.value = 'night';
}
}
</script>
<body>
<h1><a href="good.html">WEB</a></h1>
<input 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 style="color:powderblue; background-color:black;">JavaScript</h2>
<p>
<span style="font-weight:bold;">JavaScript</span> Hypertext Markup Language(HTML) is the standard markup language
for creating web pages and Web applications. Web browsers receive HTML documents from a web server or from local
storage and render them into multimedia web pages. HTML describes the structure of a web page semantically and
originally included cues for the appearance of the document.
</p>
</body>javascript로 html의 버튼을 조작하는 것이다.
button의 값은 night으로 되어잇고 onclick 클릭하였을 경우
nightDayHandler(this)에서 this는 value값을 가진다.
따라서 this = night가 되고
BodySetBackgroundColor('black');
BodySetColor('white');
LinksSetColor('powderblue');
self.value = 'day';위의 내용이 브라우저에 적용된다.
self.value = 'day'에 의해서 value값은 day로 바뀌고 night에서 바뀐 day를 클릭하게 되면 다시 night로 변하는 로직이다.
풀스택 개발자가 되고싶은 코린이 이한글