<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
#result{
width : 200px;
height : 100px;
background: yellow;
}
</style>
<script type="text/javascript">
function sumOfTwo(a,b){ /* 함수생성 function, 버튼에서 함수 호출 */
alert(a + ' ' + b + ' ' +'버튼을 클릭했습니다.')
myarea = document.getElementById("result")
if(a == null){
myarea.innerHTML = "변수a는 초기화 되지 않음<br> 변수 b는 "+b+ " 입니다."
}else if(b == undefined){
myarea.innerHTML = "변수b는 초기화 되지 않음<br> 변수 b는 "+a+ " 입니다."
}else{
myarea.innerHTML = "a + b의 값은 " + (a+b) + "입니다."
}
}
</script>
</head>
<body>
<form>
<input type="button" value="a=3, b=10" onClick="sumOfTwo(3,10)">
<input type="button" value="b=7" onClick="sumOfTwo(null,7)">
<input type="button" value="a=5" onClick="sumOfTwo(5)">
</form>
<br>
<div id = "result"></div>
</body>
</html>
✅ 정리
- 버튼에서 onClick 속성으로 함수 호출 가능
- 함수 파라미터가 없으면 → undefined
- 일부러 null을 전달할 수도 있음
- innerHTML을 사용해서 동적으로 화면 내용 변경
📌 주요 이벤트 속성 정리
1. 마우스 관련
- onclick : 클릭했을 때
- ondblclick : 더블 클릭했을 때
- onmousedown : 마우스 버튼 누를 때
- onmouseup : 마우스 버튼 뗄 때
- onmousemove : 마우스가 움직일 때
- onmouseover : 마우스를 올렸을 때 (hover)
- onmouseout : 마우스가 벗어났을 때
- onwheel : 마우스 휠 스크롤
2. 키보드 관련
- onkeydown : 키를 누를 때
- onkeypress : 키를 누르고 있을 때 (현재는 거의 안 씀, keydown/keyup 권장)
- onkeyup : 키에서 손 뗄 때
3. 폼(Form) 관련
- onfocus : 입력 요소에 포커스 들어왔을 때
- onblur : 포커스가 빠져나갔을 때
- onchange : 입력 값이 바뀌었을 때 (select, input 등)
- oninput : 입력할 때마다 실시간 반영
- onsubmit : 폼 제출될 때
- onreset : 폼 초기화될 때
4. 윈도우/문서 관련
- onload : 페이지 로딩 완료 시
- onunload : 페이지 닫을 때
- onresize : 창 크기 변경될 때
- onscroll : 스크롤할 때
5. 드래그 & 기타
- ondrag : 드래그할 때
- ondrop : 드롭할 때
- oncopy : 복사할 때 (Ctrl + C)
- oncut : 잘라내기 (Ctrl + X)
- onpaste : 붙여넣기 (Ctrl + V)
✅ 정리
- 마우스: click, dblclick, mouseover, mouseout …
- 키보드: keydown, keyup …
- 폼: focus, blur, change, submit …
- 윈도우: load, resize, scroll …
- 기타: drag, copy, paste …
자주 쓰이는 이벤트 속성:
- onclick (클릭했을 때)
- onmouseover (마우스 올렸을 때)
- onmouseout (마우스 벗어날 때)
- onchange (값이 바뀔 때, 예: select/입력창)
- onsubmit (폼 제출 시)
'기초 및 언어 > ▶ JavaScript&JQuery' 카테고리의 다른 글
| 4 JavaScript_prompt로 입력받아 합계/평균을 구하고 학점 판정 (1) | 2025.09.08 |
|---|---|
| 3. JavaScript_숫자변환 (1) | 2025.09.08 |
| 1. JavaScript_자바스크립트로 HTML 출력하는 방법 2가지 (0) | 2025.09.07 |
| 자바스크립트 dom (0) | 2024.02.07 |
| 자바스크립트 date (0) | 2024.02.07 |
