프로그래머의 수치 : 데이터가 바뀌었다고 로직을 바꾸는 것. 유연하게 바뀌는 코드를 만들어보자.
이 곳에 적합한 코드를 넣는 것이 관건이다 . 그것은 바로바로
<body>
<h1>Loop & Array</h1>
<script>
var coworkers = ['egoing','leezche', 'duru'];
</script>
<h2>co workers</h2>
<ul>
<script>
var i = 0;
while(i <coworkers.length){
document.write('<li>'+coworkers[i]+'</li>');
i = i+1
}
</script>
</ul>
</body>
요것임. 태호 빠져도, 누굴 넣어도 잘 작동.
<똑같은 방식으로 링크 추가>
<script>
var i = 0;
while(i <coworkers.length){
document.write('<li><a href="ex7.html/'+coworkers[i]+'">'+coworkers[i]+
'</a></li>');
i = i+1
}
</script>
어떻게 하면 이 코드를 실용적이게 써먹을까?
-> 전에 만들었었던 주간모드, 야간모드 코드에 넣어보자. 야간모드일 때는 링크들이 밝게, 주간모드일 때엔 어둡게. (배경색에따라~) 만들어보자.
코드
<input id="night_day" 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=i+1;
}
} 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=i+1;
}
}
">
결과
낮
(빨간놈은 무시,, 전에 쓴 코드임)
밤
아유아유. 힘들어 중괄호 하나를 빼먹어서 또 한참찾았엉.
<함수>
함수 = 코드가 많아질 때 정리정돈 할 도구중 하나.
<함수를 이용해 위 밤낮 토글을 간단하게 만들어보자>
1. 일단 밑에 코드 잘라내기
2, 스크립트 태그 생성 후 안에 잘라놨던 코드 붙여넣기
3.
<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=i+1;
}
} 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=i+1;
}
}
}
</script>
함수 (function) , 이름, 셀프까지 넣어주고 this 였던 곳들 다 self로 바꾸어주고
