(사용예) 산술계산을 해주는 eval()함수
<script language="JavaScript">
<!--
document.write(eval(3+6-4+8))
//-->
</script>
(사용예) 계산기 만들어 보기
<head>
<title>math</title>
<script language="JavaScript">
<!--
x=prompt("수식을 입력하세요")
y=eval(x)
//-->
</script>
</head>
<body>
<img src="math.gif" width="302" height="266" style="display: block; margin: 0 auto; border:0;" />
<script language="JavaScript">
<!--
document.write("<p style='text-align: center;'>")
document.write(x,"=",y)
document.write("</p>")
//-->
</script>
</body>
(사용예) 숫자인지를 확인해 주는 isNaN()함수
<body>
<script language="JavaScript">
<!--
x=isNaN(123456)
y=isNaN("haha")
document.write(x ,"<br />", y)
//-->
</script>
</body>
(사용예) 숫자를 입력하면 다음 페이지로 이동하게 만들기
<head>
<title>password</title>
<script language="JavaScript">
<!--
x=prompt("암호를 입력하세요")
y=isNaN(x)
if(y==true){
function password()
{
document.write("<p style='text-align: center;'>")
document.write("숫자만 입력이 가능합니다.")
document.write("</p>")
}
}
else window.open("a.htm")
//-->
</script>
</head>
<body style="margin-top: 50px;">
<img src="pass.gif" width="203" height="216" style="display: block; margin: 0 auto; border: 0;" />
<script language="JavaScript">
<!--
password()
//-->
</script>
</body>
(사용예) 함수의 재규적 호출
<body>
<script language="JavaScript">
<!--
hakjum(); // 학점 함수호출
function hakjum(){
jumsu=window.prompt("당신의 점수는", "점수입력");
if(jumsu>100){
alert("100보다 큰 수입니다. 다시 입력해주세요.");
hakjum(); // 함수 내부에서 해당 함수를 다시 호출: 재귀적 호출기법
}else if(jumsu>=90){
alert("A학점");
}else if(jumsu>=80){
alert("B학점");
}else if(jumsu>=70){
alert("C학점");
}else if(jumsu>=60){
alert("D학점");
}else if(jumsu>=0){
}else if(jumsu>=0){
alert("F학점");
}else{
alert("잘못된 값입니다. 다시 입력해주세요.");
hakjum();
}
}
//-->
</script>
</body>
이벤트 핸들러의 종류
OnAbort 이미지를 읽다가 중지했을 경우
OnBlur 대상에서 포커스가 이동되었을 경우
OnChange 대상에 입력되어 있는 값이 바뀌었을 경우
OnClick 대상을 클릭했을 경우
OnDbclick 대상을 더블 클릭했을 경우
OnDragDrop 대상을 클릭한 상태에서 이동했을 경우
OnError 에러가 발생했을 경우
OnFocus 대상에 포커스가 들어 왔을 경우
OnKeyDown 키를 입력했을 경우
OnKeyPress 키를 눌렀을 경우
OnKeyUp 키를 누른 후 놓았을 경우
OnLoad 대상을 열었을 경우
OnMouseDown 마우스 단추를 눌렀을 경우
OnMouseMove 마우스를 움직였을 경우
OnMouseOut 대상에서 마우스 포인터가 벗어났을 경우
OnMouseOver 대상에 마우스 포인터가 위치했을 경우
OnMouseUp 마우스 포인터를 누른 후 놓았을 경우
OnMove 윈도우나 프레임을 움직였을 경우
OnReset 대상을 재시작 시켰을 경우
OnResize 윈도우나 프레임의 크기를 변경했을 경우
OnSelect 입력 양식의 한 필드를 선택했을 경우
OnSubmit 입력 양식을 서버로 보냈을 경우
OnUnload 대상을 종료했을 경우
(사용예) 인사 메세지 나타나게 하기 (onunload)
<body style="background-color: #ff9326;" onload="alert('안녕하세요.')" onunload="alert('또 오세요')"> <img src="girl.png" width="1400" style="display: block; margin: 0 auto; border:0;" > </body>
(사용예) 퀴즈 만들기 (onclick)
<head> <title>QUIZ QUIZ</title> <script language="JavaScript"> <!-- function memo() { document.write("6월 6일") } //--> </script> </head><body> <br /><br /><br /> <table align="center" border="1" cellspacing="0" width="400" bordercolordark="black" bordercolorlight="black"> <tr> <td width="740" height="41" bgcolor="green"> <p><font color="white"><b> QUIZ QUIZ</b></font></p> </td> </tr> <tr> <td width="740" height="45" bgcolor="#a0e862"> <p>[Q]2002 년 월드컵은 몇 월 몇일날 개장하나요?</p> </td> </tr> <tr> <td width="740" height="46" bgcolor="#f4bcf3"> <p onclick="memo()">[정답보기]</p> </td> </tr> </table> </body>
(사용예) 롤오버 효과 (onMouseOver/onMouseOut)
<!DOCTYPE HTML>
<html lang="ko-KR">
<head>
<meta charset="UTF-8">
<title>button</title>
<style>
*{border:0px; padding:0px; margin:0px;}
.fl{float:left;}
ul{list-style: none;}
ul li{list-style: none; line-height:0px;}
#menu{height:210px; width:140px; background: #ffffff; border: 1px solid #666666;}
</style>
</head>
<body>
<div id="menu" class="fl">
<ul>
<li>
<img src="button/menu_click.gif" alt="click" />
</li>
<li><a href="#">
<img src="button/home_b1.gif" onmouseover="this.src='button/home_b2.gif'"
onmouseout="this.src='button/home_b1.gif'" alt="home" />
</a></li>
<li><a href="#">
<img src="button/now_b1.gif" onmouseover="this.src='button/now_b2.gif'" onmouseout="this.src='button/now_b1.gif'" alt="now" />
</a></li>
<li><a href="#">
<img src="button/exhibition_b1.gif" onmouseover="this.src='button/exhibition_b2.gif'" onmouseout="this.src='button/exhibition_b1.gif'" alt="exhibition" />
</a></li>
<li><a href="#">
<img src="button/director_b1.gif" onmouseover="this.src='button/director_b2.gif'" onmouseout="this.src='button/director_b1.gif'" alt="director" />
</a></li>
<li><a href="#">
<img src="button/aboutus_b1.gif" onmouseover="this.src='button/aboutus_b2.gif'" onmouseout="this.src='button/aboutus_b1.gif'" alt="aboutus" />
</a></li>
<li><a href="#">
<img src="button/sitemap_b1.gif" onmouseover="this.src='button/sitemap_b2.gif'" onmouseout="this.src='button/sitemap_b1.gif'" alt="sitemap" />
</a></li>
<li><a href="#">
<img src="button/guestbook_b1.gif" onmouseover="this.src='button/guestbook_b2.gif'" onmouseout="this.src='button/guestbook_b1.gif'" alt="guestbook" />
</a></li>
</ul>
</div>
</body>
</html>