[JavaScript] JavaScript Event 활용 - 기초(1)

[JavaScript] JavaScript의 기초

 

 

 

  JavaScript

 HTML과 같이 쓰는 친구로 객체 기반의 스트리트 언어이다.

 

정적인 HTML을 동적으로 변환시키고, 다양한 접근 방식으로 웹의 편의를 높여준다.

 

Java와 언어와 유사하여, Java를 할 줄 안다면 반은 먹고 들어가는 언어이다.다만 Java와는 다르게 JavaScript는 자동으로 개발자의 편의를 지원하다 보니 차이가 존재할 수 있다는 것은 꼭 명심해야 한다.

 

 

  JavaScript 사용 방법

 JavaScript는 보통 body 태그의 마지막에 위치한다.

 

JavaScript가 종종 HTML문구를 불러오지 못하는 경우가 발생하는데, 이를 해결하기 위해서 body 끝부분에 안착시킨다.

 

JavaScript 실행

html을 실행할 경우, JavaScript에 작성된 글이 실행된 모습을 볼 수 있다.

이 뜻은 html이 실행될 때 javascript 또한 html의 구성 중 하나로 읽어서 처리하는 것을 나타낸다.

 

 

 

  JavaScript

위에서 JavaScript가 html이 새로 열릴 때 실행되는 것을 알 수 있었다.

그렇다면, JavaScript는 실행 도중에 사용하는 방법은 무엇일까?

 

아래에 그 다양한 방법이 존재한다.

 

html과 javaScript 연결

결과 출력

button을 마우스로 클릭했을 때, html에는 '버튼을 눌렀습니다'가 출력된다.

 

html 화면

키보드 Event 실행

마찬가지로 키보드 입력창에 EnterKey를 눌렀을 때도 JavaScript 문구가 실행되게 설정할 수도 있다.

 

 

 

  JavaScript 동작 버튼, Event 종류

 위에서 확인한 것은 시작할 때도, 중간에도 실행할 수 있게 JavaScript가 도와주는 것을 확인할 수 있었다.

 

 

 

 ★ 마우스로 동작하는 Event

이벤트 명	설명
onclick	마우스 왼쪽버튼을 눌렀을 때 실행한다.
onauxclic	마우스 왼쪽을 제외한 버튼을 눌렀을 때 실행한다.
oncontextmenu	컨텍스트 메뉴를 열기 위해서 마우스 오른쪽 버튼을 눌렀을 때 이벤트 발생한다.
ondblclick	대상 위에서 마우스 더블클릭했을 때 실행된다.
onmousedown	대상 위에서 마우스 버튼을 누를 때 발생한다. <onclick과 onmousedown의 차이는 마우스 왼쪽 버튼이 눌러지는 순간에 실행된다.>
onmouseenter	포인터가 대상으로 들어올 때 실행된다.
onmouseleave	포인터가 대상 밖으로 나갈때 실행된다.
onmousemove	대상 위에서 포인터가 이동할때 실행된다.
onmouseover	포인터가 대상 위로 올라왔을 때, 자식 요소 위로 올라왔을 때 이벤트가 실행된다.
onmouseout	마우스 포인터가 대상 밖으로 나가거나 자식 요소 밖으로 나갔을 때 실행된다.
onmouseup	마우스 버튼에서 손가락을 떼었을 때 실행된다.
onselect	text가 선택됐을 때 작동된다. type가 text나 textarea만 작동된다.

 

 

★ 키보드로 동작하는 Event 

이벤트 명	설명
onkeydown	키보드를 누르고 있을 때
onkeypress	키보드를 지속적으로 누르고 있을 때
onkeyup	키보드를 누른직후 떼었을 때

 

 

★ 키보드 Event  메서드

이벤트 명	설명
altKey	ALT 키 눌렀는지 확인
ctrlKey	CTRL 키 눌렀는지 확인
shitKey	Shift키 눌렀는지 확인
CharCode	onkeypress이벤트 발생했을 때 유니코드를 구분한다. 숫자, 영어, 한글 지원된다.
key	이벤트로 표시되는 키 값
keyCode	onkeypress 이벤트 발생했을 때 유니코드를 구분 onkeydown 또는 onkeyup을 일으킨 유니코드를 구분
location	키보드 또는 디바이스 위의 키의 위치 리턴
metaKey	키보드 이벤트가 발생했을 때 META 키가 눌렀는지 확인

 

 

 

  마무리

 JavaScript의 시작, Event로 html을 꾸밀 수 있다는 것을 먼저 알아야 한다. 적어도 onclick가 실행시킬 줄 안다면 JavaScript의 입문 시작이다.