[JavaScript] 3. function(함수)

[function]

 

1. function(함수) : 코드 축약, 재사용 편리

 

2. 함수명 작명법 :

    1) 소문자로 시작,

    2) camelCase(첫 단어는 소문자, 그다음 단어는 대문자로 시작),

    3) 구체적인 의미 담기

 

3. 예

document.getElementById('alert'). style.display='block';라는 긴 코드를 '함수 이름()'만 적으면 쓸 수 있게 만들 수 있다.

<button onclick="알림창열기()">버튼</button>

<script>
	function 알림창열기(){
		document.getElementById('alert').style.display = 'block';
	}
</script>

 

4, 파라미터

    1) 파라미터란?

    function()의 괄호 사이에 어떠한 값(파라미터)을 넣으면 코드를 전부 조작하지 않고도 다양한 활용 가능

    예를 들어, 알림 창(열기), 알림 창(닫기) 등등

    비슷한 기능을 하는 함수의 괄호에 넣는 값(파라미터)에 따라 간단하게 원하는 기능을 바꿀 수 있음.

function 알림창(파라미터)
	document.getElementById('alert').style.display = 파라미터;
}

알림창('none'); // 알림창 닫기(display = 'none';)
알림창('block'); // 알림창 열기(display = 'block';)

    2) 파라미터의 작명 규칙 없음.

    3) 여러 개의 파라미터 만들 수 있음

function plus(a, b) {
	a + b
}
plus(2, 4); // 2 + 4

 

5. 함수 활용

버튼 1 누르면 '아이디 입력'이라는 alert박스 띄우기

버튼 2 누르면 '비번 입력'이라는 alert박스 띄우기

<div class="alert-box" id="alert">
	<p id="title"> 알림창임 </p>
</div>
      
<button onclick="아이디알림창()">버튼1</button>
<button onclick="비번알림창()">버튼2</button>
      
<script>
	function 아이디알림창(){ 
 		document.getElementById('title').innerHTML = '아이디입력'; 
		document.getElementById('alert').style.display = 'block'; 
	}
      
	function 비번알림창(){ 
		document.getElementById('title').innerHTML = '비번입력'; 
		document.getElementById('alert').style.display = 'block'; 
	}
</script>

파라미터로 함수 축약 하기

아이디 알림 창과 비번 알림 창은 '아이디 입력', '비번 입력'이라는 글자만 다르므로

함수를 1개만 남기고 '입력 내용'이라는 파라미터를 만들어 그 자리에 '아이디 입력', '비번 입력'만 바꿀 수 있도록 함.

<div class="alert-box" id="alert">
	<p id="title"> 알림창임 </p>
</div>
      
<button onclick="알림창('아이디입력')">버튼1</button>
<button onclick="알림창('비번입력')">버튼2</button>
      
<script>
	function 알림창(입력내용){ 
 		document.getElementById('title').innerHTML = 입력내용; 
		document.getElementById('alert').style.display = 'block'; 
	}
</script>