자바스크립트 6일차 - 함수의 매개변수

함수 실행 시 인자값을 통해 값을 전달 할 수 있다.

정의도니 함수 (매개변수)를 통해서 값을 받을 수 있다. 

매개변수는 정의된 함수 안에서만 사용 할 수 있다. 

 

먼저 div에 감소 버튼, 그리고 숫자와 증가 버튼을 만들어준다. 

<div class ="ex">

<button>감소</button>

<code> 0 </code>

<button>증가</button>

</div>

 

자 이렇게 만들어지겠죠?

그리고 나서 이번에는 저번시간에 배운 forEach를 사용해 볼 예정입니다. 

 

자 먼저 const로 각각의 버튼과 code값들을 받아줍니다. 

<script>

const elBtn = document.querySelectorAll('.ex button');

const elCode = document.querySelector('.ex code');

let count=0;

</script>

참고로 querySelectorAll로 받으면 elBtn은 리스트가 될테죠? 0번버튼, 1번 버튼의 정보를 담고 있을거에요.

그리고 count =0 이라는 정보를 담습니다. 

 

아래와 같이 적으면 완성 될껍니다. 

elBtn.forEach(function(value, index){

value.onclick = function(){

if(index==1)

elCode.innerHTML ++;

else

elCode.innerHTML --;

};

});

 

자 foreach문을 토대로 버튼들을 순회할껍니다. 

foreach문은 저번시간 포스팅에 올렸듯 자기 자신의 값들을 전부 순회하는 역할을 합니다. 

그러면 button 2개를 전부 수행하겠죠?

이때 index 값에 따라서 button들의 역할을 부여하면 됩니다. 

첫번째 버튼 (index =0)일 경우에는 elCode의 값을 ++ 시켜주고요. 

두번째 버튼 (index =1 )일 경우 elCode를 -- 시켜줍니다. 

이렇게 되면 감소 버튼, 증가버튼을 누를때마다 onclick 이벤트가 발생하며, elcode 즉 숫자 값이 변경됨을 알 수 있습니다. 

 

마지막으로 비슷한 예시를 들어보도록 하겠습니다. 

 

이번에는 이미지를 왼쪽, 오른쪽으로 이동시켜보는 예제를 해볼꺼에요

아래와 같이 figure태그와 img src태그를 사용합니다. 

<div class="self">

<figure><img src="img/04.png"></figure>

<button> < </button>

<button> > </button>

</div>

 

 

그리고 moveImage 함수를 이용해서 이미지 거리를 transform 을 해줄꺼에요.

여기서 파라미터 x가 있고, 이 파라미터를 넣어줘야하므로 우리 예전 포스팅에서 봤던 백틱 기호를 써주도록 합니다. 

백틱 기호 안에 ${ } 를 사용하면 변수를 자유자재로 사용할 수 있는 장점이 있습니다. 

<script>

const elSelf = document.querySelector('.self figure')

const elButton = document.querySelectorAll('.self button')

function moveImage(x){

elSelf.style = `transform:translateX(${x}px)`

}

elButton[0].onclick = function(){

moveImage(-50);

}

elButton[1].onclick = function(){

moveImage(50);

}

</script>

나머지는 쉬워요 

foreach를 쓸수도 잇지만 이번에는 그냥 elButton[0] 과 [1]에 각각 onclick이벤트를 걸어보았습니다. 

 

이런 반복이 싫은 경우 당연 반복문을 사용해서 코드 길이를 줄일 수 있습니다. 

아무튼 onclick이벤트를 통해 moveImage에 원하는 매개변수를 넣은후 실행하시면 됩니다. 

 

아마 불러온 이미지를 각각의 화살표로 위치조절을 할 수 있을꺼에요.

여기까지 작업한 내용 정리하도록 하겠습니다. 감사합니다.