javascript - script를 js 파일로 저장하여 불러오기
코드
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>make a web site</title>
<link rel='stylesheet' href='style.css'>
<script src = 'colors.js'></script>
</head>
<body>
<h1><a href="1_site.html" class="color">My Europe Trips</a></h1>
<input class = 'day_night' type='button' value = 'night' onclick = "
daynight_controll(this);
">
<div id="grid">
<ul>
<li><a href="2_nederland.html" class="color">Nederland</a></li>
<li><a href="3_germany.html" class="color">Germany</a></li>
<li><a href="4_czech.html" class="color">Czech</a></li>
</ul>
<div class="grid">
<a>
<p>
<h2>GO to Belgium</h2>
<img src="flight.jpg" width="30%"><br>
I flight to Belgium.
<br>Live in Leuven in belgium.
<br>It's very small but safe country to live.
<br>Many students live in Leuven and many dorms in there.
</p>
</a>
<a>
<p class="even">
<img src="belgium_horse.jpg" width="30%"><br>
This is what I see first in Belgium<br>
It makes me feel like I'm real in europe<br>
Because in korea It's not that usual<br>
And gentlemen'smile who on the wagons make me smile
</p>
</a>
</div>
</div>
</body>
</html>
- colors.js 코드
var Body = {
setbackgroundcolor:function(color){
document.querySelector('body').style.backgroundColor = color;
},
setcolor : function(color){
document.querySelector('body').style.color = color;
}
}
var Link = {
setcolor:function (color){
var a_list = document.querySelectorAll('.color');
var i = 0;
while(i < a_list.length){
a_list[i].style.color = color;
i += 1;}
}
}
function daynight_controll(self){
if(self.value === 'night'){
Body.setbackgroundcolor('gray');
Body.setcolor('white');
self.value = 'day';
Link.setcolor('powderblue');
}
else{
Body.setbackgroundcolor('white');
Body.setcolor('black');
self.value = 'night';
Link.setcolor('green');
}}
결과
'특강 > javascript' 카테고리의 다른 글
| javascript - 실습 (0) | 2022.08.01 |
|---|---|
| javascript - jquery 사용해보기_기초 (0) | 2022.08.01 |
| javascript - 객체와 함수 (0) | 2022.08.01 |
| javascript - 함수화 (0) | 2022.08.01 |
| javascript - 반복문(while) (0) | 2022.08.01 |
