BLOG

1. `<script>` 태그

자바스크립트 코드를 넣을때 웹 브라우저에 HTML-Javascript 코드가 시작된다고 알릴때 사용하는 태그 !!

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <script>
        document.write('Dozzing World');
        </script>
        <h1>Dozzing World</h1>
        <script>
        document.write(1+1);
        </script>
        <h5>1+1</h5>
    </body>
</html>

결과

2. Event

웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것

1) onclick

onclick의 속성 값은 웹브라우저가 기억하고 있다가 사용자가 이벤트를 발생시키면 자바스크립트 코드를 실행하게하는 역할

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="UTF-8">
    </head>
    <body>
        <input type="button" value="click here" onclick="alert('Dozzing World')">
    </body>
</html>

결과
<input type="button">은 버튼을 생성, value는 버튼 텍스트, onclick="alert('Dozzing World')"는 Dozzing World라는 경고창 발생

2) onchange

사용자가 텍스트박스에 글자를 입력하여 내용이 변경되었을 때를 체크

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

결과

3. Event 종류

1) 마우스 이벤트

Event	설명
click	요소에 마우스를 클릭했을 때 이벤트가 발생
dbclick	요소에 마우스를 더블클릭했을 때 이벤트가 발생
mouseover	요소에 마우스를 오버했을 때 이벤트가 발생
mouseout	요소에 마우스를 아웃했을 때 이벤트가 발생
mousedown	요소에 마우스를 눌렀을 때 이벤트가 발생
mouseup	요소에 마우스를 떼었을 때 이벤트가 발생
mousemove	요소에 마우스를 움직였을 때 이벤트가 발생
contextmenu	context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

2) 키 이벤트

Event	설명
keydown	키를 눌렀을 때 이벤트가 발생
keyup	키를 떼었을 때 이벤트가 발생
keypress	키를 누른 상태에서 이벤트가 발생

3) 폼 이벤트

Event	설명
focus	요소에 포커스가 이동되었을 때 이벤트 발생
blur	요소에 포커스가 벗어났을 때 이벤트 발생
change	요소에 값이 변경 되었을 때 이벤트 발생
submit	submit 버튼을 눌렀을 때 이벤트 발생
reset	reset 버튼을 눌렀을 때 이벤트 발생
select	input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

4) 로드 및 기타 이벤트

Event	설명
load	페이지의 로딩이 완료되었을 때 이벤트 발생
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
unload	페이지가 다른 곳으로 이동될 때 이벤트 발생
resize	요소에 사이즈가 변경되었을 때 이벤트 발생
scroll	스크롤바를 움직였을 때 이벤트 발생

참고1
참고2

👻Dozzing World👻

[JavaScript] HTML에서 자바스크립트 사용 (script 태그) & Event

1. `<script>` 태그

2. Event

1) onclick

2) onchange

3. Event 종류

1) 마우스 이벤트

2) 키 이벤트

3) 폼 이벤트

4) 로드 및 기타 이벤트

By Dozzing

Related Post

답글 남기기 응답 취소

[JavaScript] HTML에서 자바스크립트 사용 (script 태그) & Event

1. <script> 태그

2. Event

1) onclick

2) onchange

3. Event 종류

1) 마우스 이벤트

2) 키 이벤트

3) 폼 이벤트

4) 로드 및 기타 이벤트

By Dozzing

Related Post

test

[JavaScript] 자바스크립트 타이머

[JavaScript] 자바스크립트 정규표현식(regular expression)

답글 남기기 응답 취소

1. `<script>` 태그