🔑 코인 투자 추천 링크 🔑
자바스크립트 강의 목차
3. 자바스크립트를 크롬브라우저 콘솔에서 작성하고 실행해보기
18. 객체란 무엇인가?(객체 생성, 추가, 추출방법)
이번시간에는 자바스크립트 이벤트에 대해서 살펴보겠습니다.
먼저 HTML 문서를 열겠습니다.
1. onclick 이벤트
버튼을 하나 만들어볼께요 <input> 태그를 씁니다.
<input type="button" value="hi">버튼을 만드는 태그는 <input type="button"이고 value 안의 값은 버튼에 들어가는 내용을 의미합니다.
아래와 같이 hi 버튼이 만들어졌습니다.
이렇게 만들어진 버튼에 버튼을 클릭한다는 이벤트가 발생하는 경우,
새로운 알람창을 띄우도록 해볼께요!
아래와 같이 onclick에 alert()라는 자바스크립트를 입력해줍니다.
<input type="button" value="hi" onclick="alert('hi')">onclick는 마우스가 해당버튼을 클릭하였을때 이벤트가 발생하는 것이고,
onclick뒤에 있는 alert라는 자바스크립트 함수는 경고창을 발생시켜주는 자바스크립트입니다.
onclick뒤에는 자바스크립트 함수만 들어옵니다.
한번 적용해서 hi 버튼을 클릭해볼까요?
2. onchange 이벤트
이번에는 텍스트 입력창을 만들고 텍스트입력창에 문자가 입력되거나(있던 문자가 지워지거나, 변경되었을때)
changed라는 알람을 띄워주는걸 해보겠습니다.
아래와 같이 input 태그에 text속성을 넣으면 텍스트 입력창을 만들 수 있습니다.
그리고 onchange 이벤트라는걸 사용해서 알람을 띄어볼께요!
<input type="text" onchange="alert('changed')">아래와 같이 텍스트를 입력할 수 있습니다.
아래에 I'm writing라고 입력해볼께요
네, 입력을 하고 나면 changed라고 알람이 뜹니다.
텍스트 입력창에 변화가 생겼다는 이벤트를 발생시켰기때문에 이렇게 알람 메세지가 뜨는거죠~
3. key down 이벤트
onkeydown 이벤트를 통해서 텍스트창에 키보드에서 문자가 입력되면 이벤트가 발생하여 알람을 띄워주는걸 해보겠습니다. 아래와 같이 onkeydown 이벤트를 사용하시면 됩니다.
<input type="text" onkeydown="alert('key down!')">
한번 해볼까요?
네 새로운 입력창이 생겼고, 여기에 키보드로 키를 하나 누르면 누를때마다 이렇게 알람이 뜹니다.
키보드를 인식하는 이벤트를 발생하는거죠~
자, 그럼 정리하겠습니다.
아래 소스에 보시면 onclick, onchange, onkeydown 이벤트에 대해서 배웠습니다.
이벤트는 이것뿐만 아니라 더 많은 종류가 있으니 직접 한번 검색해보세요~
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
<input type="text" onkeydown="alert('key down!')">이벤트란, 사용자와 상호작용할 수 있도록 해준다! 라고 이해할 수 있어요!
첫 시간에 예제로 보여줬던, 아래 버튼부분을 이번시간에 배웠습니다.
소스를 보시면, 아래에 Onclick을 통해서 document....어쩌고 저쩌고 있죠?
실제 배경화면을 바꾸는 내용을 onclick이벤트를 통해서 발생시켰다는 이야기입니다.
네, 어렵지 않습니다.
그럼 이번 강의는 여기까지 하겠습니다.
생활코딩의 강의안을 바탕으로 재작성된 강의안입니다.
opentutorials.org/course/3085/18782
댓글