- onload : 문서를 모두 불러오고 나서 발생
- onunload : 문서를 종료할 때 발생
- ondbclick : 대상을 더블 클릭했을 때 발생
- onclick : 대상을 클릭했을 때 발생
- onkeypress : 키보드를 눌렀을 때 발생
- onkeydown : 키보드를 눌렀을 때 발생
- onkeyup : 키보드를 누르고 떼었을 때 발생
- onmouseover : 대상에 마우스를 올렸을 때 발생
- onfocus : 대상에 포커스가 생겼을 때 발생
- onmouseout : 대상에서 마우스가 벗어났을 때 발생
- onblur : 대상에서 포커스 잃었을 때 발생
- onsubmit : 전송 버튼을 눌렀을 때 발생
- onreset : 취소 버튼을 눌렀을 때 발생
- onchange : 입력요소의 값이 바뀌고 포커스가 옮겨졌을 때 발생
- onmousemove : 마우스를 움직일 때 발생
-
BOM(Browser Object Mode) : 브라우저에서 지원해주는 것들
-
window 객체
document, navigator, location, screan, histroy
open, alert, prompt, setinterval -
Ex_ popup
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
function popup() {
window.open("popup.html", "popup1", "width=300px, height=400px");
}
</script>
</head>
<body>
<button onclick="popup();">버튼</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="http://www.naver.com">
<img src="images/popup.jpg" alt="팝업 페이지"/></a>
</body>
</html>
- Ex_ navigator
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
function popup() {
window.open("popup.html", "popup1", "width=300px, height=400px");
}
function navigat() {
document.write("전체정보 : " +navigator.userAgent+"<br />");
}
</script>
</head>
<body>
<button onclick="popup();">버튼</button>
<button onclick="navigat();">navigator</button>
</body>
</html>
- Ex_ navigator2
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
var myAgent=navigator.userAgent.toLowerCase();
var mobile=["iphone","ipod","android","blackberry","window ce","nokia",
"webos","opera mini","sonyericsson","opera mobi","iemobile"];
for(var i=0; i<mobile.length; i++){
if(myAgent.indexOf(mobile[i]) >= 0){
location.href="http://m.naver.com";
break;
}
}
</script>
</head>
<body>
<!-- -->
</body>
</html>
- Ex_ histroy
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>첫 페이지</h1>
<a href="test10.html">두 번째 페이지 이동</a>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>두 번째 페이지</h1>
<p><a href="test11.html">마지막 페이지로 이동</a></p>
<p><button onclick="javascript:history.back();">이전 페이지로 이동</button></p>
<p><button onclick="javascript:history.go(1);">다음 페이지로 이동</button></p>
<p><button onclick="javascript:history.forward();">forward 페이지로 이동</button></p>
</body>
</html>
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1>마지막 페이지</h1>
<button onclick="javascript:history.back();">이전 페이지로 이동1</button>
<button onclick="javascript:history.go(-1);">이전 페이지로 이동2</button>
<button onclick="javascript:history.go(-2);">첫 페이지로 이동</button>
</body>
</html>
-
흐름제어 이용 3가지
html : a태그
javascript : location.href, histroy -
Ex_ prompt
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
<script>
function alt() {
alert("알림 창입니다.");
}
function conf() {
if(confirm("장바구니로 이동하시겠습니까?")){ // true 또는 false만 전달
location.href="http://naver.com";
}
}
function promp() {
var name=prompt("당신의 이름을 입력해주세요.");
document.write(name);
}
</script>
</head>
<body>
<button onclick="alt();">경고창</button>
<button onclick="conf();">확인</button>
<button onclick="promp();">prompt</button>
</body>
</html>
25. 컴퓨터학과 졸업 / SQLD, 정보처리기사 취득