개발나라 스용공주

[생활코딩] JavaScript 왕기초 2장 - Visual Studio Code / 이벤트(event) 본문

WEB/JavaScript

[생활코딩] JavaScript 왕기초 2장 - Visual Studio Code / 이벤트(event)

스용공주 2024. 8. 9. 17:31
728x90
728x90

이번 글은 아래 강의 내용을 바탕으로 작성되었다.

(생활코딩)

https://www.youtube.com/watch?v=-hdtrReY9Zw&list=PLuHgQVnccGMBB348PWRN0fREzYcYgFybf&index=4

 

 

 

 

[ Event란? ]

이벤트는 JavaScript와 사용자가 상호작용하는데 사용되는 것으로

어떤 일이 발생했을 때 이후에 나오는 결과값을 이벤트(event)라고 한다.

 

 

 

 

[ Event의 종류 - onclick ]

아래 코드를 실행하면 실행결과 영상과 같이 버튼 클릭 시 알림창이 뜨게 된다.

우선 input type="button"으로 버튼을 만들어주고 value 속성을 통해 버튼 안에 들어가고자하는 글자를 넣는다.

그리고 onclick 속성을 통해 알림창을 만들어주는 alert()를 통해 알림창에 넣을 문구를 작성하여 버튼을 누르면 표시될 알림창을 만들어준다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <input type="button" value="Event" onclick="alert('Output Event!')">
</body>
</html>

 

 

 

 

[ Event의 종류 - onchange ]

아래 코드를 실행하면 실행결과 영상과 같이 text창의 내용 변경 시 알림창이 뜨게 된다.

우선 input type="button"으로 버튼을 만들어준다.

그리고 onchange 속성을 통해 text창의 변화가 감지되면 알림창을 만들어주는 alert()를 통해 알림창에 넣을 문구를 작성하여 버튼을 누르면 표시될 알림창을 만들어준다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <input type="text" onchange="alert('Changed!')">
</body>
</html>

 

 

 

[ Event의 종류 - onkeydown ]

아래 코드를 실행하면 실행결과 영상과 같이 키보드가 눌렸을 시 알림창이 뜨게 된다.

우선 input type="button"으로 버튼을 만들어준다.

그리고 onkeydown 속성을 통해 키보드가 눌린 것이 감지되면 알림창을 만들어주는 alert()를 통해 알림창에 넣을 문구를 작성하여 버튼을 누르면 표시될 알림창을 만들어준다.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
    </style>
</head>
<body>
    <input type="text" onkeydown="alert('Key Down!')">
</body>
</html>

 

728x90
728x90

'WEB > JavaScript' 카테고리의 다른 글

[생활코딩] JavaScript 왕기초 6장 - Visual Studio Code / 조건문 실습  (0) 2024.08.23
[생활코딩] JavaScript 왕기초 5장 - Visual Studio Code / 조건문  (0) 2024.08.22
[생활코딩] JavaScript 왕기초 4장 - Visual Studio Code / 비교연산자와 불리언(Boolean)  (0) 2024.08.22
[생활코딩] JavaScript 왕기초 3장 - Visual Studio Code / 야간모드 버튼 만들기 실습  (0) 2024.08.14
[생활코딩] JavaScript 왕기초 1장 - Visual Studio Code / html과 js 비교하기  (0) 2024.08.09
'WEB/JavaScript' Related Articles more
Comments