728x90
반응형
이전시간에 정리정돈의 도구로 함수와 객체를 배웠는데, 그것보다 더 큰 가장 큰 정리도구의 기능에 대해서 배워보자
서로 연간된 코드들을 파일로 묶어서 그룹핑하는 것이다.
이것을 하면 아무리 많은 웹 페이지가 있어도 감당이 가능해진다.
지금까지 적용한 이 페이지를 다른 페이지에도 적용 가능할 수 있게끔 해보자
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
// 객체화
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;
}
}
}
// 객체화
var Body = {
setColor : function(color){
document.querySelector('body').style.color = color;
}
,
setBackgroundColor : function(color){
document.querySelector('body').style.backgroundColor = color;
}
}
function BodySetBackgroundColor(color){
document.querySelector('body').style.backgroundColor = color;
}
function nightDayHandler(self){
var target = document.querySelector('body');
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('blue');
}
}
</script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input id="night_day2" 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>
<p>
<span id="first" class="js">자바스크립트</span>는 느슨한 타입 (loosely typed) 언어, 혹은 동적 (dynamic) 언어이다.
그 말은, 변수의 타입을 미리 선언할 필요가 없다는 뜻이다. 타입은 프로그램이 처리되는 과정에서 자동으로 파악될 것이다.
또한 그 말은 같은 변수에 여러 타입의 값을 넣을 수 있다는 뜻이다. <span class="js">자바스크립트</span>
</p>
</body>
</html>
그러면 input태그를 다른 페이지에도 적용할 수 있게끔 배포해보자
728x90
반응형
'' 카테고리의 다른 글
| library 와 framework (0) | 2020.08.14 |
|---|---|
| 프로그램, 프로그래밍, 프로그래머 (0) | 2020.08.03 |
| 객체의 활용 (0) | 2020.08.02 |
| 객체 Property와 Method (0) | 2020.08.02 |
| 객체와 반복(Iterate)문 (0) | 2020.08.02 |