CallBack 함수
<body>
<h2>onclick</h2>
<input type="button" valule="hello World" onclick="alert('hello world')" />
<!--
onclick: 자바스크립트의 함수를 속성값으로 요구
alert(메시지): 메시지를 포함하는 알림창을 출력
-->
<hr />
<h2>ElementById</h2>
<input type="button" id="SolDesk1" value="Hello world " />
<script type="text/javascript">
let soldesk = document.getElementById('SolDesk1');
/*document: 현재 HTML 문서를 나타내는 전역 객체
getElementById: 태그 ID로부터 오브젝트에 접근*/
function callback(){
alert('Hello World!!!!');
}
soldesk.addEventListener('click',callback);
//addEventListener: 이벤트와 함수를 매개변수로 필요로 하는 함수
//콜백함수: 다른 함수의 인자로 전달되어, 특정 작업이 완료된 후 호출되는 함수
</script>
<hr />
<h2>ElementById</h2>
<input type="button" id="SolDesk2" value="Hello world " />
<script src="../java_script/soldesk.js">
</script>
</body>실행결과
input 버튼 생성 후 ID=Soldesk1 생성한다
그리고 <스크립트> 열어서
let soldesk에 = D=Soldesk1 넣고
솔데스트.이벤트 열어서 (chick,callback)
클릭을 하게되면 콜백 함수를 실행 그 콜백함수는
"Hello World!!!!"를 창을 띄우는 것.
외부 스크립트 보내기
! HTML
<title>2.soldesk</title>
<script src="../Java_script/soldesk.js"></script> <!-- 스크립트 위치를 헤더에 넣으면 아무 일 없다 -->
</head>
<body>
<h2>외부 ElementById</h2>
<input type="button" id="SolDesk2" value="Hello World" />
<!-- 외부에서 id=Soldesk1을 일곡 진입하므로 null이 들어옴 -->
</body>! CSS
let soldesk2 = document.getElementById('SolDesk2');
soldesk2.addEventListener('click',function(){
alert('Hello World!!!!!!')
});
솔데스크 2를 가져와서 솔데스크2 엔더테이먼트에 담는다
이벤트 리스너가 매개변수 2개를 요구하니까 click이랑 콜백을 불러온다
콜백은 콜백함수를 새로 만들어 줘야한다.
콜백 자리에 자바에서 익명클래스 쓰듯이 이름이 없는 함수 -> 헬로우월드 알림창을 띄워주는 어떤 해동을 하는지는 지정 할 수 있다.
나를 한줄로 소개하자