JavaScript ep.3

이번에는 function을 알아봤다.

function은 긴 코드에 이름을 붙혀줘서 보기좋게하는 하는 역활을 한다.
그럼 ep.2에서 길게 적은 보기안좋은 걸 쉽게 정리할 수 있지 않을까?

function 사용법은 생각보다 간단했다.

function 이름(){
	JavaScript 코드
}

위 처럼 사용 이름을 정하고 "이름()"으로 사용하면 {}안에 있는 JavaScript 코드가 실행된다.

그렇다면 !?

<div class = "alert-box" id = "alert">
  알림! 
<button onclick = "document.getElementById('alert').style.display = 'none';">닫기</button>
</div>
<button onclick = "document.getElementById('alert').style.display = 'block';">열기</button>

위 코드를 좀더 보기 좋게 바꿔보자.

<div class = "alert-box" id = "alert">
  알림! 
<button onclick = "alertClose()">닫기</button>
</div>
<button onclick = "alertOpen()">열기</button>

<script>
function alertOpen(){
	document.getElementById('alert').style.display = 'block';
}
function alertClose(){
	document.getElementById('alert').style.display = 'none';
}
</script>

뭔가 보기가 더 편해졌다.

그리고 function을 사용하는 이유는 여러번 재사용하려고 만든다고 한다. 어떻게 재사용 할지는 모르겠다.

function에는 파라미터라는 문법이 있는데 function에 내가 원하는 값을 넣는 방식이라고 한다.

사용법은 간단했다.

<script>
function 이름(a){
	JavaScript 코드 = a;
}
</script>

()안에 아무렇게나 작명을하고 코드에 작명한 이름을 적으면 된다고한다.

직접 해봐야 이해가 좀 될것같다.

파라미터를 활용하면 alert "열기","닫기"를 하나로 쓸 수 있다고 한다.

한번 해보자!

<div class = "alert-box" id = "alert">
  알림! 
<button onclick = "alert('none')">닫기</button>
</div>
<button onclick = "alert('block')">열기</button>

<script>
function alert(a){
	document.getElementById('alert').style.display = a;
}
</script>

일단 "열기","단기"가 1개로 된다고 했으니까. 1개를 지워버렷!
그리고 이름이 alertOpen은 이상하니까 Open도 지워버렸다.

마지막으로 a 라는 곳에 내가 원하는 것을 넣을 수 있다고 하였으니 내가 원하는 'block'과 'none'을 상황에 맞게 넣어줬다.

이제 새로운걸 배웠으니 또 하나씩 뜯어보자!
위에서는 function에 이름을 정해주고 앞에()를 붙혀서 사용했다.

파라미터라는 것을 배우고 ()안에 무언가 적기 시작했다.
그것은 ()안에 적은 것에 원하는 것을 넣을 수 있는 빈공간이라고 생각해보자.

그렇다면!? function에 alert이라는 이름을 붙혀주고 그 안에 "(a)"라는 빈공간을 만들었다.
그리고 그 "a"라는 공간을 우리는 "=" 뒤에 붙혀줬다.

빈공간을 만들었으니까 한번 빈공간을 채워보자!
우리가 지금 필요한건? "열기" 눌렀을 때 style.display에 'block'을 "닫기"는 'none'이 필요하다 이걸 빈공안에 넣어준다면 1개로 2개 효과를 만들 수 있다!

참고로 저 빈공간은 function 이름(a, b)처럼 여러개를 만들 수 있다고 한다.
뭔가 엄청 자주 쓰일 거 같은 느낌이 든다...

3줄 요약
1. function을 통해 긴 코드에 이름을 붙혀주는 방법을 배웠다.
2. function에 파라미터를 써서 더 효율적인 기능을 만들 수 있도록 배웠다.
3. 뭔가 자주 사용할 것 같은 느낌이 든다.

끝!