함수를 활용하여 코드 패키징하기

함수 정의 및 호출로 기능 재활용하기

• 함수란 자주 실행하는 코드를 function 키워드와 임의의 이름을 붙여서 정의한 코드

예시

1. plus 함수의 괄호 안에 num1, num2 라는 매개변수를 만듬 
   • 매개변수는 함수 외부에서 내부로 값을 전달하는 통로
   • 매개변수를 통해 실제 전달되는 값을 인수라고 함
2. plus함수는 외부에서 매개변수 num1,num2로부터 2개의 인수를 전달받고 내부의 해당값을 더함

 

See the Pen 코드패키징 by 신범식 (@ulqsqjpw-the-solid) on CodePen.

1. 버튼에 on 클래스가 붙으면 글자색이 검정으로 활성화되고,  박스는 y축으로 180˚회전하면서 투명도가 1이 되도록 함
   • 입체적으로 보이기 위하여 부모 요소 section에 perspective 로 원근감 설정
2. 버튼 그룹과 박스 그룹을 변수 btns 와 boxs 에 저장
3. for 문을 통해 btns 요소를 반복함며 클릭 이벤트와 연결
4. 클릭 이벤트 안에는 activation 함수를 2번 호출 
   • 첫번째 인수는 현재 클릭한 버튼의 순번
   • 두번째 인수는 활성화할 그룹을 전달
5. activation 함수에서 두번째 인수로 받은 list 를 for문으로 반복하면서 클래스에 on 을 지워 비활성화
6. activation 함수에서 첫번째 인수로 받은 index 를 이용하여 클릭한 버튼에 클래스 on 을 넣어 활성화