JavaScript (Parameter)
function() 함수를 업그레이드 시킬 수 있는 바로 파라미터(parameter)입니다.
함수의 파라미터를 이해를 돕기 위해 "구멍"이라고 이야기를 하겠습니다.
앞서 사용했던 html을 parameter.html로 복사하여서 사용하였습니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">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>
</body>
</html>위에 코드를 보시면 Alert 박스를 열고 닫기 위해 자바스크립트 함수를 두 개를 작성하였습니다.
여기에서 파라미터(parameter)를 사용하면 한 줄로 Alert 박스를 열고 닫을 수 있습니다.
파라미터(parameter) 사용하는 방법
1. 함수를 만든다
2. 데이터를 넣어줄 부분에 구멍을 만들어 준다
구멍은 여러개 사용할 수 있으며 콤마로 구별을 지어주면 됩니다.
예) alertOpen(구멍, 구멍2, 구멍3, ...)
function alertOpen(구멍){
document.getElementById('alert').style.display=구멍;
}alertOpen() 함수를 호출 할 때는 구멍 자리에 입력해주면 됩니다.
예) alertOpen('안녕') -> document.getElementById('alert').styledisplay='안녕';
위와 같이 함수의 구멍에 입력한 요소가 자바스크립트 명령의 구멍에 들어가게 됩니다.
파라미터의 장점 : 함수 하나로 다양한 기능을 구현할 수 있습니다.
alertOpen('block'); -> alert 박스 보이게 하는 기능
alertOpen('none'); -> alert 박스 숨기는 기능
alertOpen 함수 하나로 alert 박스를 열고 닫는 기능을 구현할 수 있습니다.
파라미터 없이도 모든 모든 개발이 가능합니다.
본인이 편한 방식으로 하시면 됩니다.
** 연습문제 **
두 개의 Alert 박스 만들기
아이디를 입력안하셨어요 / 비번을 입력안하셨어요
버튼 두 개 만들어서 눌렀을 때 다른 Alert창을 뜨게 만들어 보세요
Hint!!
방법 1 무식한 방법 ;;;
Alert box 용 THML 두개 만들어서 하면 된다 -> 무식한 방법
하지만! Alert box 100개 만들어야 된다면??? 100개 다 만들건가요?
방법 2 JS 활용
버튼 1을 누르면 alert box를 띄워주는데 띄우기 전에 내부 글자를 "아이디 입력"으로 변경
버튼 2를 누르면 "" "비밀번호 입력"으로 변경 -> <p>태그 안의 내용을 바뀌게끔 해주면 됩니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="title">Alert 박스</p>
<button id="close"> X </button>
</div>
<button onclick="alertOpen('구멍')">버튼1</button>
<button onclick="alertOpen('구멍')">버튼2</button>
<script>
// 이 자리에 자바스크립트를 작성해 주세요~
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="alert-box" id="alert">
<p id="title">Alert 박스</p>
//1. p 태그에 아이디 값을 준다
<button id="close"> X </button>
</div>
// 5. 만들어둔 자바스크립트 함수를 호출해준다.
<button onclick="alertOpen('아이디를 입력해라')">버튼1</button>
<button onclick="alertOpen('비밀번호를 입력해라')">버튼2</button>
<script>
// 2. 함수를 작성
function alertOpen(구멍){
document.getElementById('title').innerHTML=구멍;
// 3. p 태그에 들어갈 내용을 정하는 명령
document.getElementById('alert').style.display='block';
// 4. Alert 박스를 보여줄지 말지를 정하는 명령
}
</script>
</body>
</html>
NEXT > JavaScript (EventListener)
'Programing > JavaScript' 카테고리의 다른 글
| JavaScript(document&DOM) (0) | 2021.09.09 |
|---|---|
| JavaScript (EventListener) (0) | 2021.08.06 |
| JavaScript (Function) (0) | 2021.08.04 |
| JavaScript (Alert) (0) | 2021.08.02 |
| JavaScript (Selector) (0) | 2021.08.01 |
