지난 포스팅에서 자바스크립트의 함수에 대해서 알아보았습니다. 보통 함수를 넘어가면 연산이나 데이타타입과 같은 부분들의 심화된 부분에 대한 내용들을 많이 다루곤 합니다.
저는 개인적으로 많이 사용되는 요소들 위주로 배운 뒤에 심화가 필요한 부분은 그때그때 보충을 하는 방식을 선호하는 편이라 비슷한 부분들은 그냥 넘어가고 많이 사용되는 부분들만 다루도록 하겠습니다.
그래서 오늘 다룰 주제는 이벤트입니다. SW뿐만아니라 HW의 펌웨어등의 거의 모든 프로그래밍에서 가장 흥미있고 중요한 부분이 바로 이 이벤트입니다.
프로그래밍에서 "이벤트(event)"란 무엇일까요?
외부에서 특정한 '상태'나 '일'이 발생하였을 때, 그것을 프로그래밍에서 인식하는 것을 의미합니다. 자바스크립트는 html환경에서 구현되기 때문에 html에서 발생하는 이벤트에는 어떤 것이 있는지를 아는 것 역시 중요합니다.
html에서 발생할 수 있는 이벤트를 예로 들어보겠습니다.
1. html 웹페이지의 로딩이 끝났을 때
2. html 입력란에 변화가 있을 때
3. html 버튼이 클릭이 되었을 때
위와 같은 일들이 발생하였을 때, 자바스크립트를 통한 무언가를 실행할 수 있습니다.
아래 코드는 버튼을 눌렀을 때, 시간이 표시되는 코드입니다. 여기서 Date()는 시간을 불러내는 함수입니다.(자바스크립트에서 지정된 함수라 선언 없이 사용이 가능합니다)
<html>
<body>
<button onclick="document.getElementById('demo').innerHTML=Date()">The time is?</button>
<p id="demo"></p>
</body>
</html>
위의 예시에서는 click이 발생 하였을 때, demo의 내용을 변경하는 코드입니다.
아래는 click이 있을 경우 버튼 자체의 내용이 바뀌는 코드입니다.
<html>
<body>
<button onclick="this.innerHTML=Date()">The time is?</button>
</body>
</html>
버튼을 클릭하는 것 이외에도 아래 처럼 마우스가 움직이거나 특정부분이 변경되는 것을 인지해서 자바스크립트를 실행하는 것이 가능합니다.
onchange html의 요소가 바뀜
onclick html의 요소를 클릭
onmouseover 마우스를 html의 요소 위에 올림
onmouseout 마우스를 html의 요소에서 내림
onkeydown 키보드를 누름
onload 브라우저가 페이지로드를 마침
이벤트와 관련된 간단한 퀴즈입니다.
1. 아래의 코드에서 dosomething부분을 수정하여 click me 글자를 눌렀을 때, 실행이 되도록 하시오.
<html>
<body>
<p dosomething="this.innerHTML='Great!!'">Click me.</p>
</body>
</html>
2. 버튼을 눌렀을 때, 함수 f_test()가 실행되도록 수정하시오.
<html>
<body>
<button>Click Me</button>
<p id="demo"></p>
<script>
function f_test() {
document.getElementById("demo").innerHTML = "Hello World"; }
</script>
</body>
</html>
3. someevent를 수정하여 마우스를 올렸을 때, <span>이 실행되도록 하시오.
<html>
<body>
<span someevent="this.style.color='red'">Mouse over me!</span>
</body>
</html>
정답
1. 버튼이 없더라도 클릭시에 실행이 된다.
<p onclick="this.innerHTML='Great!!'">Click me.</p>
2.
<button onclick="f_test()">Click Me</button>
3.
<span onmouseover="this.style.color='red'">Mouse over me!</span>
'IT 지식정리 > 자바스크립트' 카테고리의 다른 글
| 자바스크립트 퀴즈 - 함수(functions) (0) | 2017.11.22 |
|---|---|
| 자바스크립트 : 함수(functions) (0) | 2017.11.22 |
| 자바스크립트 : 데이타 타입 (0) | 2017.11.22 |
| 자바스크립트 연산자 우선순위값 목록 (0) | 2017.11.21 |
| 자바스크립트 : 연산자(operators) (0) | 2017.11.21 |