오늘 배울 거: function 쓰는 이유 2
-> 함수 업그레이드하고 싶으면 파라미터
1. 함수에 구멍 뚫어놓으면
2. 앞으로 함수 쓸 때 (구멍) 안에 아무거나 입력 가능
파라미터의 장점
1. 함수 하나로 다양한 기능 만들기 가능!
2. 코드 양이 줄어듬
예시 1.
<!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>Alert 박스</p>
<button onclick="alertOpen('none')">닫기</button>
</div>
<button onclick="alertOpen('block')">버튼</button>
<!-- 이 버튼 클릭 시 안에 있는 자바스크립트 실행해주기 -->
<script>
// 긴 코드 축약=function
//alertbox 열기 function에 파라미터 사용
function alertOpen(구멍){
document.getElementById('alert').style.display=구멍;
}
</script>
</body>
</html>
예시 2.
function plus(n){
2 + n
}
plus(1);
plus(2);
plus(3);
Q. 구멍이 여러개 필요한 경우?
1. 콤마로 구분
2. 자유 작명
3. 구멍 타고 들어온 데이터는 어디에 들어갈지 표시하기
-오늘의 숙제-
alert 창 2개 만들기
(버튼1: 아이디를 입력, 버튼2: 비번을 입력)
방법 1.
<!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-box</p>
<button onclick="alertOpen1('none')">닫기</button>
</div>
<button onclick="alertOpen1()">버튼1</button>
<button onclick="alertOpen2()">버튼2</button>
<script>
// 긴 코드 축약=function
function alertOpen1(){
//1. 제목 바꾸기
document.getElementById('title').innerHTML="아이디 입력하세요";
//2.열기
document.getElementById('alert').style.display="block";
}
function alertOpen2(){
//1. 제목 바꾸기
document.getElementById('title').innerHTML="비번 입력하세요";
//2.열기
document.getElementById('alert').style.html="block";
}
</script>
</body>
</html>
방법2. 파라미터 사용
<!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-box</p>
<button onclick="alertOpen1('none')">닫기</button>
</div>
<button onclick="alertOpen('아이디 입력하세요')">버튼1</button>
<button onclick="alertOpen('비번 입력하세요')">버튼2</button>
<script>
// 긴 코드 축약=function
function alertOpen(구멍){
//1. 제목 바꾸기
document.getElementById('title').innerHTML=구멍;
//2.열기
document.getElementById('alert').style.display='block';
}
</script>
</body>
</html>
'STUDY > 진짜 웹 개발로 배우는 실용 JS' 카테고리의 다른 글
| 1-6강 : 서브메뉴 만들어보기와 classList 다루기 (0) | 2022.05.09 |
|---|---|
| 1-5강 : 이벤트리스너 EventListener (0) | 2022.05.08 |
| 1-3강 : function + 간단한 버그 찾기 (0) | 2022.05.08 |
| 1-2강 : Alert 만들어서 유저 위협하기 (0) | 2022.05.08 |
| 1-1강 : 셀렉터 selector (0) | 2022.05.02 |