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('정답입니다!');
};

좋은 웹페이지 즐겨찾기