자바스크립트 객체로 함수를 저장한 후 별도 파일에 저장할 수 있습니다.
확장자가. js인 파일에 별도 저장한 코드를 불러와서 사용하게 되면, 복잡한 코드를 모두 적지 않아도 됩니다. 단순 명료하게 코드 작업을 할 수 있습니다.
객체를 만들고 함수를 저장한 후 버튼을 클릭하면 서식이 변경되는 예시를 만들겠습니다.
nightdaytrans를 이름으로 하는 함수를 만듭니다. 버튼을 클릭하면 글자색과 배경색이 바뀌도록 하는 함수입니다. 본문의 텍스트는 임의로 작성하였습니다.
Body라는 객체를 만듭니다. { } 중괄호에 함수를 저장할 수 있습니다.
setColor: 는 property를 뜻합니다.
document. 는 객체를 의미합니다.
querySelector는 함수이면서 객체에 소속되어 있으므로 메서드라 칭합니다.
객체 Body의 property로 setColor:를 지정한 후 본문의 글자 색을 바꾸는 함수를 작성합니다. 또 다른 propety를 추가할 때는 comma 콤마를 찍어 구분합니다. 콤마를 찍은 후 property로서 setBackgroundColor:를 지정한 후 배경의 색상을 바꾸는 함수를 입력합니다.
<html>
<head>
<meta charset="utf-8">
<script>
var Body = {
setColor:function (color){
document.querySelector('body').style.color = color;
},
setBackgroundColor:function (color) {
document.querySelector('body').style.backgroundColor = color;
}
}
function nightdaytrans(self){
var target = document.querySelector('body');
if(self.value === 'night'){
Body.setBackgroundColor('navy');
Body.setColor('yellow');
self.value = 'day';
}else {
Body.setBackgroundColor('skyblue');
Body.setColor('purple');
self.value = 'night';
}
}
</script>
</head>
<body>
<input id="click_here" type = "button" value="night" onclick="
nightdaytrans(this);
">
<ul>
<li>text.01</li>
<li> text.02 </li>
<li> text.03 </li>
</ul>
</body>
자바스크립트로 만든 서식을 변경하는 코드를 복사해서 별도의 파일로 저장합니다. 이때 스크립트 태그 <script> </script>는 제외하고 내용만 복사해야 합니다. 파일 이름과 확장명은 colorstyle.js로 합니다. 이제 다른 웹페이지에서 이 서식을 사용하고 싶을 때 colorstyle.js 파일을 불러와서 사용하는 코드를 작성합니다.
<script src="colorstyle.js"></script>
'코딩' 카테고리의 다른 글
| 자바스크립트 객체 object 에 값 넣는 방법과 가져오는 방법, 반복문으로 객체의 값 모두 가져오는 방법 (0) | 2020.09.15 |
|---|---|
| 자바스크립트 함수 Function, 매개변수 Parameter, 인자 Argument, 반환 Return (0) | 2020.09.11 |
| while 반복문 사용해서 본문 글자색 (0) | 2020.09.10 |
| 자바스크립트 JavaScript 배열 array 이용해 반복문 Loop 만들기 (0) | 2020.09.10 |
| 자바스크립트 JavaScript 반복문을 위한 while , var 변수 i = 0 선언 (0) | 2020.09.09 |
댓글