웹페이지를 만들 때 자바스크립트의 역할은 화면을 동적으로 움직이도록 하는 것이다. 사용자와 메세지를 주고 받거나 데이터를 화면에 보여준다. 텍스트의 효과나 마우스 효과 등 여러가지가 있다. 정적인 웹페이지보다는 조금씩 움직이거나 반응이 있는 홈페이지는 흥미와 재미를 주기도 한다.
자바스크립트 이벤트 종류
마우스 또는 키보드를 클릭하면 동작을 하는 것
웹페이지를 동적으로 움직이게 하거나 메세지를 보여주는 등은 자바스크립트의 역할이다.
반응이 없는 웹페이지는 흥미도 없고 사용자로 하여금 의구심만 생기게 한다.
버튼을 눌렀을 때 텍스트를 입력했을 때 등 여러가지가 있겠지만 마우스나 키보드를 클릭했을 때 화면에서 뭔가 동작하고 메세지를 보여주면서 사용자가 올바르게 웹페이지를 사용하도록 유도할 수도 있다.
자바스크립트 이벤트
자바스크립트는 정적인 웹페이지에 동작을 담당한다.
마우스를 클릭하고 키보드를 클릭하고 웹페이지에서 반응이 있는 것들을 이벤트라고 한다.
자바스크립트 이벤트란 사용자가 마우스나 키보드 등을 어떤 작업을 했을 때 메세지창을 보여주거나 데이터를 불러오는 일련의 작업 등을 말한다.
버튼을 눌렀을 떄 웹페이지가 뭔가 동작을 한다면 이것 또한 자바스크립트 이벤트이다.
자바스크립트 이벤트는 html 태그와 함께 사용된다.
이벤트 종류
자바스크립트 이벤트의 종류가 몇 가지 있다.
자주 사용하는 것들이기에 알아두면 좋다.
찾아보면 이 외에도 정말 많은 이벤트가 있다.
- onchange
html 태그에 변화가 생길 때 동작한다. - onclick
html 태그를 클릭했을 때 동작한다. - onmouseover
html 태그에 마우스 커서가 도달했을 때 동작한다. - onmouseout
html 태그에서 마우스 커서가 벗어날 때 동작한다. - onkeydown
선택된 html 태그에서 키보드가 눌렸을 때 동작한다. - onload
html 페이지의 로딩이 끝났을 때 동작한다.
사용법
자바스크립트 이벤트는 html 태그와 함께 사용한다.
html 태그의 속성으로 입력되고 함수명을 같이 작성해 주면 된다.
아래는 자바스크립트의 클릭이벤트를 발생시키는 코드이다.
input 박스에 마우스를 클릭하면 경고창이 나타나도록 하였다.
<!DOCTYPE html>
<html>
<body>
<h1>자바스크립트 클릭이벤트 onClick</h1>
<p id="display">
<input type="text" placeholder="클릭해 보세요" onclick="return fnEvtClick();"/>
</p>
<script>
function fnEvtClick(){
alert("클릭 이벤트 발생");
}
</script>
</body>
</html>결과화면을 보면 이해가 된다.
입력박스에서 마우스를 클릭하면 아래와 같이 메세지창이 나타난다.
'programming > javascript' 카테고리의 다른 글
| 자바스크립트 체인지 이벤트 사용하기 javascript onchange event (0) | 2021.10.30 |
|---|---|
| 자바스크립트 마우스 클릭 이벤트 만들기 javascript mouse onclick event (0) | 2021.10.29 |
| 자바스크립트 객체 구성 요소 프로퍼티 메서드 javascript object property method (0) | 2021.10.27 |
| 자바스크립트 객체 란 의미와 종류 javascript object (0) | 2021.10.27 |
| 자바스크립트 함수 리턴 사용하기 javascript function return (0) | 2021.10.26 |
댓글