함수
2023. 1. 26. 13:44
자바스크립트에서 함수는 다른 언어에서의 함수와 거의 동일하게 사용된다.
function name(){
...
}
가장 쉬운 예로 매개변수 x, y를 갖는 sum 함수를 만들어 보자.
인자로 받아온 값을 더해서 반환하는 함수이다.
function sum(x, y){
return x+y;
}
앞서 포스트에서 사용한 예제에서 함수를 사용해본다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>while</title>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input type="button" value="night" onclick="
var target = document.querySelector('body');
if(this.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
this.value = 'day'
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i++;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
this.value = 'night'
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
alist[i].style.color = 'blue';
i++;
}
}
">
<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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
</p>
</body>
</html>이전에 night 모드와 day 모드를 변경해주는 버튼을 만들었다.
버튼 동작을 나타내는 onclick 내부 코드를 함수를 이용해서 간단하게하면 아래와 같은 코드가 된다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>function</title>
<script>
function nightdayhandler(self){
var target = document.querySelector('body');
if(self.value === 'night') {
target.style.backgroundColor = 'black';
target.style.color = 'white';
self.value = 'day'
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
alist[i].style.color = 'powderblue';
i++;
}
} else {
target.style.backgroundColor = 'white';
target.style.color = 'black';
self.value = 'night'
var alist = document.querySelectorAll('a');
var i = 0;
while (i < alist.length) {
alist[i].style.color = 'blue';
i++;
}
}
}
</script>
</head>
<body>
<h1><a href="index.html">WEB</a></h1>
<input 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>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae et delectus, voluptates facere eaque architecto consequatur perferendis. Quas exercitationem, iusto voluptatem delectus minima quibusdam rem quis. Magnam error dolore inventore?
</p>
</body>
</html>
코드의 동작은 동일하지만 함수를 사용한 아래 코드가 더 깔끔하다.
부스트코스의 강의 내용을 정리한 포스트입니다.
https://www.boostcourse.org/cs124
자바스크립트의 시작
부스트코스 무료 강의
www.boostcourse.org
'공부 > JavaScript' 카테고리의 다른 글
| 자바스크립트 파일 생성 후 연결 (0) | 2023.01.27 |
|---|---|
| 객체 (0) | 2023.01.26 |
| 반복문 (0) | 2023.01.12 |
| this와 리팩토링 (0) | 2023.01.12 |
| 조건문 (0) | 2023.01.12 |
