자바스크립트 function 문법
- function(일명 함수)라는 문법은 길고 더러운 코드를 한 단어로 축약하고 싶을 때 쓰는 문법.
- 특정 기능을 다음에도 쓰기 위해 모듈화해 놓은 문법.
function 함수명(){
축약하고 싶은 긴 코드
}1. function 키워드 쓰고 소괄호, 중괄호 붙인다.
2. 소괄호 왼쪽에 함수명은 작명한다.
3. 긴 코드를 중괄호 안에 담으면 코드 축약은 끝이다.
그러면 함수명() 쓸 때마다 그 자리에 긴 코드가 실행된다.
Alert 박스 코드 function으로 축약해 보기
지난 포스팅에 만들었던 Alert 박스 코드를 보자.
<div id="alert-box">
<p>알림창입니다.</p>
<button onclick="document.getElementById('alert-box').style.display='none';">닫기</button>
</div>
<button onclick="document.getElementById('alert-box').style.display = 'block';">열기</button>버튼의 onclick 안에 있는 긴 자바스크립트 코드를 함수 문법을 사용하면 짧게 축약해서 쓸 수 있다.
<div id="alert-box">
<p>알림창입니다.</p>
<button onclick="closeAlert()">닫기</button>
</div>
<button onclick="openAlert()">열기</button>
<script>
function openAlert(){
document.getElementById('alert-box').style.display = 'block';
}
function closeAlert(){
document.getElementById('alert-box').style.display='none';
}
</script>
(참고)
함수 이름을 영어로 작명할 때
- 영어 소문자로 시작
- open_alert() 안 됨, openAlert() 이렇게 붙여 쓰는 게 자바스크립트 관습 (일명 camelCase)
- 한글 작명도 상관없음
(자주 겪는 에러들)
1. JS 코드는 밑에 작성해야 한다.
- 컴퓨터가 HTML 파일 읽을 때 위에서부터 한줄씩 읽는데 미리 HTML을 읽어놔야 조작이 가능하다. 그래서 HTML이 위쪽에 있어야 조작이 잘 된다.
2. 오타주의
- 브라우저 개발자도구 Console 탭에서 오타가 났다고 알려주는 메시지를 확인할 수 있다.
function에 사용 가능한 파라미터 문법
함수 내에는 파라미터라는 구멍을 뚫어 줄 수 있다.
function openAlert(파라미터){
document.getElementById('alert-box').style.display = 파라미터;
}지금 함수 내에 구멍을 뚫었다.
구멍을 뚫는 방법은
1. ( ) 소괄호 내에 아무 글자나 적고
2. { } 중괄호 내에도 같은 글자를 아무데나 적으면 된다.
Q. 구멍을 뚫는 이유는?
A. 구멍을 뚫으면 함수를 업그레이드해서 사용할 수 있다. 구멍이 뚫려 있으면 함수를 쓸 때 소괄호 내에 문자, 숫자 등을 입력해서 사용 가능하다.
<div id="alert-box">
<p>알림창입니다.</p>
<button onclick="openAlert('none')">닫기</button>
</div>
<button onclick="openAlert('block')">열기</button>
<script>
function openAlert(파라미터){
document.getElementById('alert-box').style.display = 파라미터;
}
</script>위의 Alert 박스 코드를 파라미터 문법으로 수정해 보았다.
openAlert('block') 실행하면 document.getElementById('alert-box').style.display='block',
openAlert('none) 실행하면 document.getElementById('alert-box').style.display='none'
이런 코드가 실행된다.
이렇게 하면 아까처럼 함수를 openAlert(), closeAlert() 2개의 함수를 만드는 대신 openAlert(파라미터) 하나면 된다.
비슷한 함수가 여러개 있으면 굳이 여러개 만들 필요 없이 하나를 만들어 구멍을 뚫으면 된다.
함수 하나로 다양한 기능을 실행할 수 있게 된다.
파라미터 문법 특징
1. 파라미터는 자유롭게 작명 가능하다.
function plus(a) {
2 + a
}
plus(3)
2. 파라미터는 2개 이상 사용 가능하다.
function plus(a, b) {
a + b
}
plus(2, 5)콤마(,)로 구분하면 된다.
함수 사용할 때도 자료 2개 입력 가능하다.
Alert 박스 코드에 파라미터 문법 사용해 보자.
버튼을 2개 만들어 버튼1과 버튼2를 누르면 각각 다른 이름의 alert 박스가 나오도록 코드를 작성해 보자.
- 버튼1 누르면 '아이디 입력하세요'라는 Alert 박스가 나타나야 한다.
- 버튼2 누르면 '비밀번호 입력하세요'라는 Alert 박스가 나타나야 한다.
버튼1 누르면 박스1 띄우기
버튼2 누르면 박스2 띄우기
이렇게 해도 되지만 박스가 100개 필요하면 코드도 100개를 작성해야 한다..
기존에 있던 Alert 박스를 재사용하자.
<div id="alert-box">
<p id="title">알림창입니다.</p>
<button onclick="openAlert('none')">닫기</button>
</div>
<button onclick="openAlert('block');titleAlert('아이디를 입력하세요.');">버튼1</button>
<button onclick="openAlert('block');titleAlert('비밀번호를 입력하세요.');">버튼2</button>
<script>
function titleAlert(title){
document.getElementById('title').innerHTML = title;
}
function openAlert(state){
document.getElementById('alert-box').style.display = state;
}
</script>
* 이 포스팅은 코딩애플 강의를 토대로 작성하였습니다.
