function의 파라미터 문법, 이벤트 리스너

파라미터 문법

• (): 파라미터(인자, 아규먼트)
• {}: 실행할 코드

[사용목적]
2개의 function(알림창 열고 닫기를)을 1개의 function으로 압축가능.
즉, 비슷한 함수가 여러개 있으면 굳이 여러개 만들 필요 없이 파라미터문법으로 하나의 함수로 다양한 기능 구현!

<script>
        function show(a) {
            document.getElementById('alert').style.display= a;
        }

        // function del(a) {
        //     document.getElementById('alert').style.display= a;
            
        // } 
    </script>

• 파라미터는 자유롭게 작명가능
• 파라미터 2개 이상 사용 가능(콤마로 구분)

💡함수를 만들때 할일을 할때는 영어부터 냅다 적지말고, 복잡하면 한글부터 짜고 코드를 옮기는 것이 좋다!

---

getElementsByClassName
: id가 아닌 class명으로 찾는 것.

• 클래스는 여러개이기 때문에 인덱스를 넣어줘야 함.
  getElementsByClassName 셀렉터는 일치하는 class가 들어있는 모든 html 요소를 찾아주기 때문! 그래서 그 중에 몇번째 요소를 바꿀지 [순서]를 꼭 뒤에 붙여줘야합니다. 하나여도 꼭 인덱싱을 붙여줘야 함!!

function textShow(params) {
     document.getElementsByClassName('title')[0].innerHTML = params;
     show('block');
        }

추가로 아래 두개정도도 알면 괜찮~
getElementsByTagName : 태그명<>으로 찾아줌
getElementsByName : 폼 name 속성으로 찾아줌

---

Event Listener

addEventListner('이벤트종류명, 콜백함수) - 파라미터 2개

버튼의 안에 자바스크립트를 길게 짰는데.. 그게 보기싫으면 이벤트리스너 문법 사용!

<button id="close">X</button>

document.getElementById('close').addEventListener('click', function(){
    //실행할 코드 
});

id가 close인 요소를 클릭하면 안의 코드를 실행해주세요~' 라는 뜻

여기서 Event란?

유저가 웹페이지 접속해서 클릭, 스크롤, 키보드입력, 드래그 등을 할 수 있는데 이걸 전문용어로 이벤트라고 부름.

어떤 요소 클릭시엔 click 이벤트
마우스갖다대면 mouseover 이벤트
스크롤하면 scroll 이벤트
키입력하면 keydown 이벤트
...
참고: https://jenny-daru.tistory.com/17

이벤트가 일어나길 기다리는 친구가 "이벤트 리스너(감시자)"

---

콜백함수란?

함수 파라미터자리에 들어가는 함수.
그냥 뭔가 순차적으로 실행하고 싶을 때 많이 보이는 함수형태.