https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Building_blocks/Build_your_own_function
나만의 기능 구축
능동적 학습: 함수를 만들어보자
기본 기능
https://github.com/2taesung/JSOfficialDoc
마지막으로 GlobalEventHandlers.onclick이벤트 핸들러를 사용하여 버튼을 클릭하면 일부 코드가 실행되어 페이지에서 전체 패널을 삭제하여 메시지 상자를 닫습니다.
=> GlobalEventHandlers.onclick 어떤 원리로 onclick이 실행되는지 궁금했는데 다음 포스팅은 이 문서로 해야겠다!
간단히 말해서 onclick핸들러는 버튼(또는 실제로 페이지의 모든 요소)에서 사용할 수 있는 속성으로, 버튼을 클릭할 때 실행할 코드를 지정하는 함수로 설정할 수 있습니다.
=>모든 요소에 설정 가능
수 내부의 행은 Node.removeChild() DOM API 함수를 사용하여 HTML 요소의 특정 자식 요소(이 경우 패널)를 제거하도록 지정합니다
=> Node.removeChild() DOM API 함수 해당 내용도 다다음 포스팅으로
노드를 넘어가고 넘어가고 또는 자식 노드에대한 처리들을 할 수 있다.
함수 호출
- addEventlistener를 이용한 호출
var dis_b = document.getElementById("dis-b")
dis_b.addEventListener("click", displayMessage)- script안에 함수 호출(디폴트로 실행)
displayMessage();- querySelector로 찝어와 실행
const btn = document.querySelector('button');
btn.onclick = displayMessage;=> 함수 뒤에 ()을 포함하지 않는 이유
버튼을 클릭한 후 실행을 원하지 즉시 실행을 원치 않기 때문에
btn.onclick = displayMessage();=> "함수 호출 연산자"라고 불리우며 현재 범위에서 즉시 함수가 실행된다.
매개변수로 기능 개선
매번 동일한 기본 메시지를 표시하고 싶지는 않습니다.
=> 매개변수를 지정하고 해당 매개변수를 이용해 내용물을 바꿔줄 수 있다.
호출하는 함수의 괄호 안에 매개변수를 지정하려면 직접 호출할 수 없습니다. 즉각적인 범위에 있지 않으므로 즉시 호출되지 않도록 익명 함수 안에 넣어야 합니다.
=> 매개변수를 넣으려면 ()를 만들어주야한다.
더 복잡한 매개변수
msgType매개변수가 무엇 으로 설정 되었는지에 따라 함수가 다른 아이콘과 다른 배경색을 표시하도록 설정할 것입니다.
