이진욱의코딩

HTML과 JS의 만남: 이벤트 본문

JS

HTML과 JS의 만남: 이벤트

Crucifi 2019. 7. 19. 23:23

이번 시간에는 이벤트라는 것을 알아봅시다

이벤트는 자바스크립트가 사용자와 상호작용하는 데 핵심적인 역할을 합니다.

 

먼저 코드를 살펴보도록 하겠습니다.

 

<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
       <input type="button" onclick="alert('hello world')" value="push"/>
       <input type="text" onchange="alert('changed')"/>
       <input type="text" onkeydown="alert('key down')"/>
    </body>
</html>

우리가 이번시간에 할 내용은 push버튼을 눌렀을 때 hello world라는 경고창이 뜨게 만드는 것을 할 것입니다.

 

<input> 태그에 type을 button으로 지정하면 버튼모양이 되고, 버튼에 글자를 넣고 싶으면 value라는 속성을 이용하면 됩니다.

onclick이라는 속성은 특별한 속성으로, onclick다음에는 반드시 자바스크립트 코드가 와야 합니다. 이처럼 웹 브라우저에서 일어나는 일들을 사건, 영어로는 이벤트(event)라고 합니다. 어떤 이벤트가 일어났을 때 어떠한 자바스크립트 코드를 실행하게 하는 것이 onclick이라는 것입니다.

 

<input type="button" onclick="alert('hello world')" value="push"/>

 

코드를 보면 onchange가 있는데 마우스 커서를 바깥쪽으로 빼서 클릭하면 실행되는 이벤트입니다.

 

<input type="text" onchange="alert('changed')"/>

 

마지막으로 위 텍스트 박스 안에서 아무 키를 눌렀을 때 나타나는 경고창에 대해 살펴봅시다.

 

<input type="text" onkeydown="alert('key down')"/>

이번 시간에는 'on으로 시작하는 속성들이었습니다. 속성들을 자바스크립트에서는 이벤트라고 하며 이것들을 이용해 사용자와 상호작용할 수 있는 코드를 작성할 수 있습니다.

'JS' 카테고리의 다른 글

조건문  (0) 2019.07.24
비교연산자와 블리언  (0) 2019.07.24
복습차 응용  (0) 2019.07.20
HTML과 JS의 만남  (0) 2019.07.19
JavaScript  (0) 2019.07.19
'JS' Related Articles more