javascript 세번째 도전

함수

함수는 코드를 간결하게 만들어 주는 것에 있어서 매우 중요하다

<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;

}

}

}

이를 함수화 시켜버리면

<input type="button" value="night" onclick="

nightdayhandler(this);

">

이런 코드로 버튼을 여러개 만들어도 더욱더 간결하고 쉽게 만들수 있다.

​

객체

객체를 사용하기 위해서 얘를들자면

<script>

var cowokers={

"programmer":"egoing",

"designer":"leezche"

};

document.write("programmer:"+cowokers.programmers+"<br>");

</script>

라고 하면 출력값은

programmer: egoing 이 나온다

새로 객체 추가를 하고 싶고 객체명을 띄어쓰기형태로 하고싶다면

cowokers["data scientist"]="taeho";

document.write("data scientist:"+cowokers["data scientist"]+"<br>");

이런식으로 하면 출력값 역시

data scientist : taeho 라고제대로 나온다.

​

반복문으로 객체의 모두를 사용하고 싶을때 for문을 사용하면 된다.

for(var key in cowokers(객체명)){

document.write(key+'<br>');

}

이 코드에서 출력은 객체에서의 모든 키 값이 출력이 된다. (여기서의 키는 programmers,designer같은 것이다)

그리고 값을 출력하고 싶으면

for(var key in cowokers(객체명)){

document.write(cowokers[key]+'<br>');

}

이렇게 하면된다 (여기서 값은 egoing, leezhe 같은 것들이다.)

추가로 객체의 값은 함수,배열 등등 다양한게 가능하다. 그리고 객체내의 함수는 메소드라고 한다.

메소드를 만드는 방법은

<script>

cowokers.showall -=function(){

for(var key in 객체명or this){

document.write(ke+':'+this[key]+'<br>');

}

}

cowoker.showall();

또는

var body={

setcolor:function(color){

document.querySelector('body').style.color=color;

}

}

이러면 cowokers의 객체안에 멤버로 showall()함수가 들어가고 body의 객체 안에는 setcolor()가 들어간다

​

그러면 이런 헤드파일에 있는 script의 내용들(객체나 함수 등등)을 따로 파일을

만든다 (ex, color.js)

하고 헤드파일에 <script src="color.js"></script> 를 붙이면 좀더 간략하고 다른 파일에서도 사용할 수 있게 해준다.

​

javascript를 마치며 생각보다 코딩해주는데에 있어서 편하게 해주기위해 제공해주는 라이브러리들이 많다는 것이다.

예를들어 jquery가 대표적이다 .