이 글은 작성자의 개인 공부를 위해 작성한 글입니다.
실제 이론, 실습과 다른 부분이 있을 수 있습니다.
JavaScript는 웹 페이지의 동적인 부분을 담당하는 스크립트 언어로, HTML 문서 내에서 사용된다.
HTML에서 JavaScript를 사용하기 위해서는 <script> 태그를 사용한다.
1. 기본 문법과 차이점
기본적인 문법으로 1+1을 적었을 때는 정적으로 동작하여 페이지에서 1+1이 뜨지만,
JavaScript에서는 동적으로 동작하기 때문에 1+1으로 적었을 때 2로 뜨게 된다.
-> 웹페이지에 글씨를 출력할 때는 document.write()를 사용한다.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script>
document.write(1+1);
</script>
</body>
</html>
JavaScript에서 이벤트(event)는 웹 페이지에서 발생하는 사용자의 행동이나 브라우저 자체의 상태 변화와 관련된 동작을 나타낸다. 주로 사용자와 상호작용하거나 웹 페이지의 상태 변화에 대응하는 데 사용된다.
2. 이벤트의 종류
- 마우스 이벤트
- click : 요소를 클릭할 때 발생.
- mouseover : 요소 위로 마우스가 올라갈 때 발생.
- mouseout : 요소에서 마우스가 벗어날 때 발생.
- 키보드 이벤트
- keydown : 키보드의 키를 누를 때 발생.
- keyup : 키보드의 키를 뗄 때 발생.
- keypress : 실제 문자가 입력될 때 발생.
- 폼 이벤트
- submit : 폼을 제출할 때 발생.
- change : 입력 요소의 값이 변경될 때 발생.
- 윈도우 이벤트
- load : 문서나 이미지 등이 완전히 로드될 때 발생.
- resize : 브라우저 창의 크기가 변경될 때 발생.
- scroll : 페이지를 스크롤할 때 발생.
- 기타 이벤트
- focus : 요소가 포커스를 받을 때 발생.
- blur : 요소가 포커스를 잃을 때 발생.
- DOMContentLoaded : DOM 트리가 완전히 로드되고 파싱될 때 발생.
3. 이벤트 예제 (Button)
- <input type = "button" value = "버튼의 이름">을 통하여 버튼을 만들 수 있다.
-> 경고창을 만들 때 <input type = "button" value = "버튼의 이름" obclick = "alert('경고창 문구')"> 를 사용한다.
'JavaScript' 카테고리의 다른 글
| JavaScript 객체 정리 (0) | 2024.01.18 |
|---|---|
| JavaScript 함수, 매개변수 정리 (0) | 2024.01.18 |
| JavaScript 배열, 반복문 정리 (0) | 2024.01.18 |
| JavaScript 조건문, 비교 연산자 정리 (this, target 포함) (0) | 2024.01.14 |
| JavaScript 데이터 타입(문자열과 숫자), 변수와 대입 연산자 정리 (0) | 2024.01.11 |