지우의 우당탕탕 개발일지
1-3. HTML과 JS (이벤트) 본문
1) Javascript와 사용자의 상호작용, 이벤트(Event)
Javascript에서는 다음과 같은 코드를 통해서 alert 창을 만들 수 있다.
alert('hi')그렇다면 이제, 사용자가 어떤 버튼을 눌렀을 때 이 alert 창이 뜨도록 만들어봅시다. 먼저 빈 화면에 버튼을 만들고, 이 버튼을 눌렀을 때 어떤 동작이 실행되도록 하는지 지정하는 속성인 onclick에 이 javascript 코드를 넣어보았따.
<input type="button" value="hi" onclick="alert('hi')">
| onclick="alert('hi')" 은 1) 자바스크립트가 와야한다 2) 사용자가 클릭했을 때 자바스크립트 코드를 자바스크립트 문법에 따라 동작할 것입니다. 를 뜻함. |
- 예시1
(2) html 소스코드
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
</body>
</html>
- 예시 2
(1) 웹 화면
(2) 소스코드 (html)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<input type="button" value="hi" onclick="alert('hi')">
<input type="text" onchange="alert('changed')">
</body>
</html>
2) Onclick 속성
HTML 태그 안에서 onclick 속성은 javascript 코드를 가지게 된다.
그리고 onclick이 포함된 태그가 클릭되었을 때 이 javascript 코드에 따라서 웹 브라우저가 동작됩니다.
즉, 위의 코드에서 웹 브라우저는 alert('hi') 라는 코드를 기억하고 있다가, 사용자가 클릭하면 이를 실행해주는 것입니다.
이렇게 웹 브라우저에서 일어나는 유용한 사건을 이벤트(Event)라고 한다.
3) 이벤트(Event)
웹 브라우저에서 일어나는 사건을 이벤트라고 한다면, 이벤트에는 어떤 종류가 있을까요?
- onclick 이벤트 : 사용자가 어떤 것을 클릭하는 사건을 의미 (예시1)
- onchange : 입력창에서 사용자가 키보드를 이용해 무언가 입력하면, 그에 따라 내용이 바뀌는 사건을 의미. 이 때, 입력창에 입력한 후 바깥쪽을 클릭했을 때를 기준으로 그 전과 내용이 바뀌었는지 확인한다
이 외에도 총 10~20가지 정도의 이벤트가 존재합니다. 이를 이용해서 사용자와 상호작용하는 웹 사이트를 만들 수 있게 된다. 코딩을 하다가 필요한 이벤트들은 구글링을 통해서 쉽게 찾아볼 수 있다.
예를 들어서 키보드를 누르는 이벤트를 알아보고 싶다면, 구글에 "javascript keydown event"라고 검색하면 onkeydown 이라는 이벤트를 쉽게 찾을 수 있다.
'Front 공부 > Javascript' 카테고리의 다른 글
| 1-4. HTML과 JS : ③ 콘솔 (console) (1) | 2023.10.16 |
|---|---|
| 1장-2. HTML과 JS (script 태그) (0) | 2023.10.16 |
| 1장-1. Javascript의 역할 (0) | 2023.10.16 |
| 자바스크립트의 시작 (1) | 2023.10.16 |
