function의 매개변수
: 함수에 변수값이 전달되어 처리해야 하는 경우가 있는데, 이렇게 함수에 전달되는 변수 '매개변수'라 한다.
함수의 매개변수 값으로는 함수, 객체, 배열로 전달할 수 있다.
function 파라미터문법
<script>
function 함수이름(매개변수1, 매개변수2,...) {
함수가 호출되었을 때 실행하고자 하는 실행문;
}
</script>함수 괄호 안에 작성된 '매개변수'를 파라미터라고 한다.
- 예제 Code
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.alert-box {display:none;padding:20px;color:#FFF;border-radius:5px;background-color:#000;}
</style>
</head>
<body>
<div id="alert-box" class="alert-box">
알림창이다.
<button onclick="alertBtn('none');">닫기</button>
</div>
<!--매개변수에 'block'을 넣어서 alertBtn()안의 코드를 실행해라 -->
<button onclick="alertBtn('block');">버튼이다</button>
<script>
function alertBtn(r){
document.getElementById("alert-box").style.display = r;
}
</script>
</body>
</html>함수를 작성하여 기능을 작성할 때, 비슷한 기능을 가지고 있는 함수를
여러 개로 작업하지않고 파라미터 값을 추가해서 만들어주면 된다.
- 예시 Code
<script>
//파라미터 예시
function plus(num){
//여러 숫자를 가지고 더하기를 하고싶을 때(비슷한 기능)
//2 + 1
2 + num
}
//파라미터 값을 더해 여러가지 숫자로 더하기 가능하다.
plus(1);
</script>파라미터 값은 1개만 작성하는 것이 필수는 아니며, 여러 개도 가능하다.
//파라미터 예시
function plus(num,num2){
num + num2
}
plus(1,3);
[오늘의 과제]
- Code
<div id="alert-box" class="alert-box">
<p>알림창이다.</p>
<button onclick="alertBtn('none');">닫기</button>
</div>
<button onclick="alertBtn('block');">버튼1</button>
<button onclick="alertBtn('block');">버튼2</button>
<script>
function alertBtn(r){
document.getElementById("alert-box").style.display = r;
}
</script>- '버튼1'을 클릭할 경우, '아이디 입력하세요'창이 나올 것
- '버튼2'를 클릭할 경우, '비밀번호 입력하세요'창이 나올 것
- 과제 Code
<div id="idBox" class="alert-box">
<p>아이디를 입력하세요.</p>
<button onclick="alertBtn('idBox','none');">닫기</button>
</div>
<div id="passBox" class="alert-box">
<p>비밀번호를 입력하세요.</p>
<button onclick="alertBtn('passBox','none');">닫기</button>
</div>
<button onclick="alertBtn('idBox','block');">버튼1</button>
<button onclick="alertBtn('passBox','block');">버튼2</button>
<script>
function alertBtn(r,n){
document.getElementById(r).style.display = n;
}
</script>- 다른방식 Code
<div id="alertBox" class="alert-box">
<p id="title">아이디를 입력하세요.</p>
<button onclick="alertBtn('alertBox','none');">닫기</button>
</div>
<script>
function passAlert(r,n){
document.getElementById('title').innerHTML = '비밀번호를 입력하세요.';
document.getElementById('alertBox').style.display = 'block';
}
function idAlert(){
document.getElementById('title').innerHTML = '아이디를 입력하세요.';
document.getElementById('alertBox').style.display = 'block';
}
</script>
3년차 퍼블리셔의 스터디