JavaScript - function의 파라미터 문법

function에 사용가능한 파라미터 문법

function 알림창열기(구멍){
  document.getElementById('alert').style.display = 구멍;
}

여기 적혀있는 "구멍 = 파라미터" 라고 한다

구멍 뚫는 이유
-> 함수를 업그레이드해서 사용 가능하기 때문!

function 알림창열기(구멍){
  document.getElementById('alert').style.display = 구멍;
}

알림창열기('none'); //이거 실행하면 알림창열림
알림창열기('block');  //얘는 닫힘

구멍문법을 어디에 쓰는가?

문법만 외우고 땡 하면 ❌❌

전 시간에는 알림창열기() 알림창닫기() 두 개의 함수를 만들어 썼지만
지금은 알림창열기(구멍) 하나면 다 해결 가능
-> 비슷한 함수 여러 개 있으면 굳이 여러개 만들필요없이 하나로 파라미터 문법 만들기

파라미터 문법 특징

1. 파라미터는 자유롭게 작명 가능하다.

function plus(a){ 
  2 + a
}

2. 파라미터는 2개 이상 사용 가능하다.

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

---

📒 오늘의 숙제

버튼 2개를 만들어놓고
버튼 1과 버튼 2를 누르면 각각 다른 이름의 alert 박스가 나오도록 코드짜기

-버튼1을 누르면 '아이디를 입력하세요' 라는 alert 박스가 등장해야한다
-버튼2를 누르면 '비밀번호를 입력하세요' 라는 alert 박스가 등장해야한다

✅방법1. 미리 html로 알림창 여러개 만들어두기
✅방법2. 알림창을 띄우는데 제목만 바꿔서 띄우기

방법1은 만약 알림창이 100개면 100개 만들어야하니까..
방법2 사용해보기!

복잡하면 한글부터 짜고 코드로 옮기기

<button onclick="1. p태그 내용을 아이디 입력으로 바꿈 2. 띄움">버튼1</button>

버튼에 적어보고

<script>
// 1. p태그 내용을 아이디 입력으로 바꿈
      document.getElementById("title").innerHTML = 아이디입력하세요;
// 2. 띄움
      document.getElementById("alert").style.display = "block";
</script>

이렇게 쓴걸 함수로 축약하기

<button onclick="아이디알림창()">버튼1</button>
...
<script>
function 아이디알림창() {
	document.getElementById("title").innerHTML = "아이디를입력하세요";
	document.getElementById("alert").style.display = "block";
}
</script>

비밀번호도 똑같이 만들면 된당