JavaScript를 활용하여 웹브라우저와의 상호작용을 해보았다.
event에 대해 알아보고 활용방법에 대해서도 알아보자.
-Event
사용자가 웹브라우저에게 어떠한 행동(입력)을 했을 경우 그 행동에 대해 웹브라우저는 반응을 보여주는 것을 이벤트라 하고 한다. 서로 상호작용을 할 수 있게 가볍게 버튼을 만들어보았고 사용자가 생성된 버튼을 눌렀을 경우 웹브라우저에서는 내가 원하는 반응을 보여주도록 만들어보았다.
<body>
<input type="button" value="This">
</body>이렇게 되면 웹브라우저에 input type="button"으로 인해 상단에 작은 버튼이 생기고 value="This"로 인해 버튼 안에 This라는 단어가 들어가게 된다. 이렇게 만들어진 버튼을 눌러보면 눌리기만 할 뿐 아무런 반응이 없다. 여기서 alert이라는 코드를 이용하여 버튼을 눌렀을 경우 웹브라우저에서 경고창을 띄우도로 해보았다.
alert이라는 코드를 사용하기 위해서 사용 예제를 확인하기 위해 구글링을 통해 알아보았다.
alert('원하는 문장');찾아본 결과 위와 같은 코드를 사용하게 된다는 걸 알았고 적용해 보았다.
<body>
<input type="button" value="This" onclick="alert('hello world')">
</body>이런 식으로 onclick이라는 속성 안에 alert이라는 속성을 넣어줌으로써 활성화가 된다. 여기서 onclick이란 HTML의 속성이고 속성 값으로는 무조건 자바스크립트가 와야 한다. onclick속성을 부여하면 그 속성을 가지고 있는 태그에서 발생한다.
즉 버튼을 누를 경우 웹브라우저는 onclick의 속성 값을 기억하고 있다가 동작하게 된다.
물론 버튼만 있는 것은 아니다. 여러 가지 타입 중에 <input type="text">로 변경할 경우 웹브라우저에 텍스트를 입력할 수 있는 칸이 생긴다. 또 상황에 맞는 여러 가지 속성들이 있다. 여러 가지 속성들을 확인해볼 경우 구글에 javascript event attribute list라고 검색해보면 다양하게 나온다.
이번 공부를 통해 여러 가지 이벤트 속성에 대해 알아보았고 그 속성을 활용하여 사용자와 웹브라우저 간의 다양한 상호작용을 할 수 있다는 매우 유익한 시간이었다.
'TIL > Javascript' 카테고리의 다른 글
| /JavaScript/웹 브라우저 제어 (0) | 2021.12.19 |
|---|---|
| /JavaScript/변수,대입 연산자 (0) | 2021.12.18 |
| /JavaScript/Data Type (0) | 2021.12.17 |
| /JavaScript/Console (0) | 2021.12.17 |
| /JavaScript/JavaScript 와 HTML (0) | 2021.12.17 |
