함수 ( function )
코드가 많아지면 그 코드를 잘 정리 정돈하기 위한 도구가 필요하다
이때 생각할 수 있는 아주 간단하면서 강력한 도구가 함수 이다.
<h1>자바스크립트</h1>
<h2>조건문</h2>
<input type="button" id="night_day" 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 = 'red';
i +=1;
}
}else{
target.style.backgroundColor='white';
target.style.color ='black';
this.value= 'night';
document.querySelectorAll('a')
var alist = document.querySelectorAll('a')
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i +=1;
}
}
">
<p>코딩하는 코린이</p>
<ul>
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
<li><a href="#">Java</a></li>
</ul>
위에 <input> 태그가 100개 있다고 가정하자
onclick 속성안에 있는 반복문 style.color = 'red';를
다른 색으로 바꿔야 한다면 100개 모두 바꿔야한다.
그러면 100개 input 은 중복된 코드가 된다.
이런 중복된 코드르 제거해주는 것이 함수 이다.
중복된 코드를 함수 안에 만들기
<script>
function nightDayHandler(){
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 = 'red';
i +=1;
}
}else{
target.style.backgroundColor='white';
target.style.color ='black';
this.value= 'night';
document.querySelectorAll('a')
var alist = document.querySelectorAll('a')
var i = 0;
while(i < alist.length){
alist[i].style.color = 'blue';
i +=1;
}
}
}
</script>script 태그 안에 함수를 선언하고 코드를 넣어주었다.
<input type="button" id="night_day" value="night" onclick="nightDayHandler()" >
onclick에 선언한 함수를 넣어주면
훨씬 코드가 간결하고 유지보수 하기가 쉽다.
매개변수와 인자
<script>
function sum(left ,right){
document.write(left + right+ '<br>');
}
sum(10,2); //12
sum(2,4); //6
sum(1,6); //7
</script>
sum 이라는 함수에 첫번째 자리에는 left , 두번째 자리에는 right라는 변수를 정의 하였다.
이러한 변수를 매개하는 변수라 해서 매개변수(parmeter) 라고 한다.
sum(10,2) 에서 10은 left의 값으로 가게 되고 2는 right의 값으로 가게 되어있다.
이때 함수로 전달되는 10,2라는 값을 인자(argument) 라고 한다.
'JavaScript' 카테고리의 다른 글
| 리팩토링(refactoring) 이란? (0) | 2020.12.06 |
|---|---|
| 조건문 활용- 토글(toggle) (0) | 2020.12.06 |
| JS의 이벤트 (0) | 2020.12.06 |
| script 태그 (0) | 2020.12.06 |
| JavaScript 란? (0) | 2020.12.06 |
