낮밤 전환 버튼
1.낮 버튼, 밤 버튼(two button)
<input type="button" value="night" onclick="
document.querySelector('body').style.color='white'
document.querySelector('body').style.backgroundColor='black'"
>
<input
type="button" value="day" onclick="
document.querySelector('body').style.color='black'
document.querySelector('body').style.backgroundColor='white'">2.낮밤 버튼(one button)
<html>
<input type="button" value="night" id="button" onclick="
if(document.querySelector('#button').value==='night'){
document.querySelector('body').style.color='white';
document.querySelector('body').style.backgroundColor='black';
document.querySelector('#button').value='day';
}
else {
document.querySelector('body').style.backgroundColor='white';
document.querySelector('#button').value='night';
}">3.var 사용
<input type="button" value="night" id="button" onclick="
var target=document.querySelector('body');
if(document.querySelector('#button').value==='night'){
target.style.color='white';
target.style.backgroundColor='black';
document.querySelector('#button').value='day';
}
else{
target.style.color='black';
target.style.backgroundColor='white';
document.querySelector('#button').value='night';
}">4.반복문의 활용
이러한 버튼의 단점은 a엘리먼트를 두 개 이상 쓰면서 나타날 수 있다.
<script>
document.querySelector('a').style.color='powderblue';
</script>이 구문은 최상단의 a만 적용된다는 문제가 있고,
<script>
aocument.querySelectorAll('a').style.color='powderblue';
</script>이 구문은 아예 적용조차 안 된다는 문제가 있다. 그러므로
<script>
var alist = document.querySelectorAll('a');
var i = 0;
while( i < alist.length){
alist[i].style.color = 'powderblue';
i = i+1;
}
</script>이러한 반복문(while)을 삽입하여야 한다.
<input type="button" value="night" id="button" onclick="
var target=document.querySelector('body');
if(document.querySelector('#button').value==='night'){
target.style.color='white';
target.style.backgroundColor='black';
document.querySelector('#button').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.color='black';
target.style.backgroundColor='white';
document.querySelector('#button').value='night';
var alist = document.querySelectorAll('a');
var i = 0;
while( i < alist.length){
alist[i].style.color = 'green';
i = i+1;
}
}">5.함수와 self의 활용
<script>
var target = document.querySelector("body");
function LinksSetColor(color) {
var alist = document.querySelectorAll("a");
var i = 0;
while (i < alist.length) {
alist[i].style.color = color;
i = i + 1;
}}
function BodySetColor(color) {
target.style.color = color;
}
function BodySetBackgroundColor(color) {
target.style.backgroundColor = color;
}
function dayswitch(self) {
if (self.value === "night") {
BodySetBackgroundColor("black");
BodySetColor("white");
self.value = "day";
LinksSetColor("powderblue");
}
else {
BodySetBackgroundColor("white");
BodySetColor("black");
self.value = "night";
LinksSetColor("green");
}
}
</script>
<input type="button" value="night" onclick="dayswitch(this)">여기서 주의할 점은 input문에 보이는 대로 function문에 쓰였던 self 말고 this가 쓰인다는 점이다.
6.객체 활용
<script>
var target = document.querySelector("body");
var Body = {
setColor: function (color) {
target.style.color = color;
},
setBackgroundColor: function (color) {
target.style.backgroundColor = color;
}
};
var Links = {
setColor: function (color) {
var alist = document.querySelectorAll("a");
var i = 0;
while (i < alist.length) {
alist[i].style.color = color;
i = i + 1;
}}
};
function dayswitch(self) {
if (self.value === "night") {
Body.setBackgroundColor("black");
Body.setColor("white");
self.value = "day";
Links.setColor("powderblue");
}
else {
Body.setBackgroundColor("white");
Body.setColor("black");
self.value = "night";
Links.setColor("green");
}
}
</script>
<input type="button" value="night" onclick="dayswitch(this)">7.jQuery 활용
<script>
var target = document.querySelector("body");
var Body = {
setColor: function (color) {
$("body").css("color", color);
},
setBackgroundColor: function (color) {
$("body").css("backgroundColor", color);
}
};
var Links = {
setColor: function (color) {
$("a").css("color", color);
}
};
function dayswitch(self) {
if (self.value === "night") {
Body.setBackgroundColor("black");
Body.setColor("white");
self.value = "day";
Links.setColor("powderblue");
}
else {
Body.setBackgroundColor("white");
Body.setColor("black");
self.value = "night";
Links.setColor("green");
}
}
</script>