INTP의 멋대로 개발 세상

[생활코딩 JavaScript] 4강. 이벤트(Event) 본문

JavaScript

[생활코딩 JavaScript] 4강. 이벤트(Event)

인팁구름 2023. 4. 7. 17:17

저번 포스트에 이어,

HTML과 JavaScript가 만나는 방법을 계속 알아볼 것이다 😎

 

바로바로 ⭐이벤트⭐ 를 배워볼 것이다!

이벤트는 아주 중요함!!! 🙄 모르면 나중에 피를 보게 된다(내 얘기)

 

 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
 
    <input type="button" value="hi">
 
</body>

</html>

 

HTML 의 input 태그를 이용해서 버튼을 하나 만들어 보자!

(input 태그의 type을 button으로 하면 버튼이 만들어 진다. value는 버튼 안에 적힐 값을 넣는다)

ㅎㅇ 난 버튼!

 

근데 hi 버튼을 클릭하면 경고창을 뜨게 하고 싶어졌다🤔

경고창은 alert 라는 기능을 사용한다.

 

w3schools에 가면 JavaScript 튜토리얼이 있음! alert는 이런 식으로 사용한다

 

 

Window alert() Method

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

버튼에 onclick 속성을 추가해서 alert 기능을 추가해보자.

hi  버튼을 누르면 'hi' 라고 적힌 alert 창이 실행될 것이다.

 

짜잔

 

코드에 대해서 다시 한 번 설명하자면,

 

  • onclick 속성의 값으로는 반드시 자바스크립트가 와야한다. (HTML 설명서에 그렇게 적혀있다. 왜인지 궁금해하지 말자)
  • onclick 속성 값은 웹 브라우저가 기억하고 있다가 이 onclick 속성이 위치하고 있는 태그 (지금 코드에서는 input 태그) 를 클릭했을 때, 기억하고 있던 자바스크립트 코드를 자바스크립트 문법에 따라 해석해서 거기에 적혀있는대로 웹 브라우저가 동작할 것이다.
    🤔 조금 더 요약하자면,
    input 태그 안에 onclick 속성이 있으니,  input 태그가 실행될 때! onclick의 자바스크립트도 실행되는 것

 

 

💡 이렇게, 웹 브라우저 위에서 일어나는 일들을 이벤트(Event) 라고 한다

 

 

 

이벤트 갯수는 정말 많지만, 그 중에 많이 사용하는 것은 10~20개 정도 된다고 한다.

 

1. onclick (무언가를 클릭했을 때)

2. onchange (무언가 값이 변했을 때)

3. onkeydown Event Attribute (키보드 키를 누를 때마다)

 

이렇게 있다. 이거 말고도 뭐가 있지? 궁금하다면 위의 w3schools 사이트를 방문해 보자😏

 

 

 

이해를 돕기 위한 onchange 예시

 

아까 코드 밑에 input 태그를 추가해 보자! 아까와 다른 점은 타입이 text이다.

hi 버튼 옆에 텍스트를 입력할 수 있는 창이 생겼다

 

이제 onchange 속성을 추가하고, onchange가 실행될 때 changed! 라는 문구가 나오는 경고창을 하나 띄워보자

 

아무 값이나 입력하고 텍스트 창 밖 아무곳이나 클릭하면,

 

 

빈 칸에서 값이 입력된 변경을 감지한 자바스크립트가 alert 경고창을 띄우게 되는 것!

 

 

onchange 이벤트 실행 후 추가로 더 적다가 다시 원상태로 돌아왔다면 따로 alert 창이 뜨지 않는다!

(123123...을 뒤에 더 적고 빠져나왔다면 당연히 값이 바뀐 것이므로 alert 창이 다시 뜰 것이다)

 

 

이해를 돕기 위한 onkeydown Event Attribute 예시

 

마찬가지로 w3schools 에 onkeydown을 검색하면 사용방법이 나온다

 

 

HTML onkeydown Event Attribute

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

새로운 input 태그를 추가해서 onkeydown 이벤트가 실행될 때 'key down!' 문구가 나오는 alert 창을 띄워보자!

 

새로운 input 태그가 생김!

 

input 태그에 글자를 적을 때 마다(키보드 키 누름) alert 창이 뜰 것이다 (지울 때도)

 

 

저작자표시

'JavaScript' 카테고리의 다른 글

[생활코딩 JavaScript] 7강. 변수와 대입연산자  (0) 2023.04.09
[생활코딩 JavaScript] 6강. 데이터 타입(String, Number)  (0) 2023.04.07
[생활코딩 JavaScript] 5강. Console  (0) 2023.04.07
[생활코딩 JavaScript] 3강. HTML에서 자바스크립트 사용하기  (0) 2023.04.07
[생활코딩 JavaScript] 시작  (0) 2023.04.07
'JavaScript' Related Articles more
Comments