728x90
함수의 활용
- 리팩토링
- 3.html
<input> 태그 안의 JS 코드를 <head> 태그 안으로 옮긴 후 nightDayHandler 함수를 만든다.
그리고 <body> 태그의 <input> 태그 안에는 nightDayHandler( ); 를 붙여 넣는다.
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<script>
function nightDayHandler(){
var target = document.querySelector('body');
if(this.value === '开启'){
target.style.backgroundColor='black';
target.style.color='white';
this.value = '关闭';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'mediumspringgreen';
i = i + 1;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
this.value = '开启';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'limegreen';
i = i + 1;
}
}
}
</script>
</head>
<body>
<h1><a href="index.html" title="到百科">WEB网络</a></h1>
<input type="button" value="开启" onclick="
nightDayHandler();
">
<div id="grid">
<ol>
<h3>计算机语言-常见语言</h3>
<li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<div id="文章">
<h3>-JavaScript</h3>
<p style="margin-top:40px;">
<strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
</p>
<p>
<a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</div>
</div>
<input type="button" value="开启" onclick="
</body>
</html>그런데 开启 버튼을 클릭하면 야간모드와 주간 모드는 잘 작동하지만 关闭 버튼으로 변하지는 않는다.
- onclick 이라는 이벤트 안에서 this 가 문제라는 것.
이 this 는 event 가 소속되어 있는 <input> 태그를 가리키도록 약속되어 있는데 독립된 함수를 만들게 되면 this 는 더 이상 input 버튼이 아니고, 전역 객체를 가리키게 된다. (웹브라우저에서는 윈도우가 된다.)(이 부분은 이해하지 못할거라고 하신다.)
그래서 함수 안에 있는 if 문의 this 값을, <input> 을 가리키게 하기 위해서 nightDayHandler 가 실행될 때 여기에 this 값을 준다. 그리고 self 라는 매개변수를 주고 함수 안의 if 문에 있는 this 를 self 로 바꿔준다.
<!DOCTYPE html>
<html>
<head>
<title>WEB1 - JavaScript</title>
<meta charset="utf-8">
<script>
function nightDayHandler(self){
var target = document.querySelector('body');
if(self.value === '开启'){
target.style.backgroundColor='black';
target.style.color='white';
self.value = '关闭';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'mediumspringgreen';
i = i + 1;
}
} else {
target.style.backgroundColor='white';
target.style.color='black';
self.value = '开启';
var alist = document.querySelectorAll('a');
var i = 0;
while(i < alist.length){
alist[i].style.color = 'limegreen';
i = i + 1;
}
}
}
</script>
</head>
<body>
<h1><a href="index.html" title="到百科">WEB网络</a></h1>
<input type="button" value="开启" onclick="
nightDayHandler(this);
">
<div id="grid">
<ol>
<h3>计算机语言-常见语言</h3>
<li><a href="1.html" title="到HTML意义">HTML超文本标记语言</a></li>
<li><a href="2.html" title="到CSS意义">CSS层叠样式表</a></li>
<li><a href="3.html" title="到JavaScript意义">JavaScript</a></li>
</ol>
<div id="文章">
<h3>-JavaScript</h3>
<p style="margin-top:40px;">
<strong><u>JavaScript</u></strong>即全球广域网，也称为万维网，它是一种基于超文本和HTTP的、全球性的、动态交互的、跨平台的分布式图形信息系统。是建立在Internet上的一种网络服务，为浏览者在Internet上查找和浏览信息提供了图形化的、易于访问的直观界面，其中的文档及超级链接将Internet上的信息节点组织成一个互为关联的网状结构。
</p>
<p>
<a href="https://baike.baidu.com/item/JavaScript" target="_blank" title="到百科的JavaScript意义">更多>></a>
</p>
<img src="coding.jpg" width="50%">
</div>
</div>
<input type="button" value="开启" onclick="
</body>
</html>
'youtube.com|user|egoing2 > WEB2 - JavaScript' 카테고리의 다른 글
| WEB2 - JavaScript 30 (객체, object) (1) | 2021.09.28 |
|---|---|
| WEB2 - JavaScript 29 (객체 'object' 의 예고) (0) | 2021.09.27 |
| WEB2 - JavaScript 24 to 27 (함수, function) (4) | 2021.09.23 |
| WEB2 - JavaScript 23 (배열과 반복문의 활용) (5) | 2021.09.19 |
| WEB2 - JavaScript 19 to 22 (반복문, 배열) (8) | 2021.09.17 |