JavaScript2_이벤트와 버튼 클릭
✔️이벤트 핸들링(Event Handling): 어떤 특별한 동작을 하도록 이벤트를 다루는 것.
const btn = document.querySelector('#myBtn');//html파일에 있는 id. btn.onclick = function () { //이벤트 핸들러(Event Handler)->구체적인 동작들을 코드로 표현한 함수 부분. console.log('Hello Codeit!'); //웹페이지에서 버튼 누르면 콘솔창에 출력됨. };
✔️이벤트(Event): 웹페이지에서 일어날 수 있는 대부분의 일.
❗웹 페이지의 구조를 결정하는 일은 HTML 파일에 그리고 동작을 담당하는 일은 js 파일에만 작성하는 것을 권장한다.
✍️실습과제
alert('message');
//alert라는 함수를 사용하면, 브라우저에 경고창을 띄울 수 있습니다.
주어진 코드를 실행했을 때 화면에 나타나는 채점이라고 적힌 button 태그를 클릭하면 정답입니다!👏🏻라는 경고창이 나타나도록 코드를 작성해 주세요.
(박수 이모지 만들기가 어렵다면 본문의 글을 복사해서 붙여넣어 보세요)단, HTML 태그에 직접 이벤트 핸들러를 등록하지 말고 자바스크립트 파일에서 코드를 작성해 주세요.
코드를 잘 작성하셨다면, 버튼을 클릭 했을 때 다음과 같은 경고창이 나타나야 합니다.
// 여기에 코드를 작성해 주세요.
const btn = document.querySelector('#grade')
btn.onclick = function (){
alert('정답입니다!');
};
Author And Source
이 문제에 관하여(JavaScript2_이벤트와 버튼 클릭), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@kimhyesu-_-/JavaScript2이벤트와-버튼-클릭저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)