alert(), confirm(), prompt() 메서드
alert () 메서드
- 경고 메시지를 나타내는 대화상자를 보여주는 메서드 - alert(" 보여주고 싶은 정보나 경고 메시지 문자열 ") confirm() 메서드
- 메시지와 확인 / 취소 ( 또는 OK/Cancel) 버튼을 포함한 확인 대화상 자를 보여주는 메서드 - 확인버튼을 누르면 true, 취소버튼을 누르면 false 를 반환 - confirm(" 묻고자 하는 문자열 ") prompt() 메서드
- 메시지와 입력필드를 가진 대화상자를 보여주는 메서드 - 사용자로부터 직접 숫자나 문자열을 입력 받아야 할 때 사용 - prompt(" 묻고자 하는 메시지 문자열 ", " 초기 값 ")자주 쓰이는 윈도우 객체의 메서드
alert() 메서드 사용 예 1
<html>
<head><title> 경고 메시지 </title></head>
<body bgcolor="white">
<b> 경고 메시지 나타내기 </b>
<script language="javascript">
alert(" 환영합니다 . -- 주인백 --")
</script>
</body></html>
alert(" 저의 홈페이지에 오신 걸 환영합니다
.\n\n
-- 주인백 --")
confirm() 메서드 사용 예 1
<html> <head><title> 확인 대화상자 나타내기 </title></head> <body bgcolor="yellow"><b> <script language="javascript"> var answer=confirm (" 지금 확인 대화상자를 배우고 있는지 아시죠 ?") document.write(" 지금 선택한 것은 ?<br>") if (answer == true)document.write("<p><font color='red' size=5> 확인을 선택하 셨습니다 .")
else
document.write("<p><font color='red' size=5> 취소를 선택하 였습니다 .")
</script></b> </body></html>
confirm() 메서드 사용 예 1
<html> <head><title> 확인 대화상자 나타내기 </title></head> <body bgcolor="yellow"><b> <script language="javascript"> var answer=confirm (" 지금 확인 대화상자를 배우고 있는지 아시죠 ?") document.write(" 지금 선택한 것은 ?<br>") if (answer == true)document.write("<p><font color='red' size=5> 확인을 선택하 셨습니다 .")
else
document.write("<p><font color='red' size=5> 취소를 선택하 였습니다 .")
</script></b> </body></html>
prompt() 메서드 사용 예
<html> <head><title> 나이를 확인하는 페이지 </title> <script language="javascript"> function Out(Value) { if (Value >=20) alert(' 홈페이지에 오신 것을 환영합니다 !') else alert(' 당신은 미성년자이군요 . 죄송합니다 . 나가 주세요 !') } </script></head> <body> <b> 이 홈페이지는 미성년자 출입금지 입니다 .</b> <script language="javascript"> var age=prompt(" 당신의 나이는 몇 살입니까 ?") Out(age) </script> </body></html> prompt() 메서드 사용 예
<html> <head><title> 나이를 확인하는 페이지 </title> <script language="javascript"> function Out(Value) { if (Value >=20) alert(' 홈페이지에 오신 것을 환영합니다 !') else alert(' 당신은 미성년자이군요 . 죄송합니다 . 나가 주세요 !') } </script></head> <body> <b> 이 홈페이지는 미성년자 출입금지 입니다 .</b> <script language="javascript"> var age=prompt(" 당신의 나이는 몇 살입니까 ?") Out(age) </script> </body></html>이벤트와 이벤트 처리기
이벤트 (event) 란
사용자로부터 특정 조작이 행해졌을 때 컴퓨터로부터 발생되는 일종의
신호
방문자가 웹 브라우저 상에서 일으키는 동작
click, focus, load, mouseover, unload 등
이벤트 처리기 (event handler) 란
발생한 이벤트를 감지해서 이에 대한 조치 내용을 담은 코드를 서로 연
결해주는 매개체 역할을 하는 명령
보통 이벤트 이름 앞에 "on" 이라는 접두어를 붙여서 사용
이벤트 처리기 작성방법
HTML 태그 내에 이벤트 처리기 코드를 작성
객체의 이벤트 처리기 속성에 직접 코드를 대입
<script> 태그에 직접사용
이벤트 종류
이벤트 발생 시점 이벤트 처리기
load 처음으로 웹 페이지를 읽었을 때 onLoad
unload 창을 닫을 때 , 웹 페이지에서 벗어날 때 onUnload
click From 요소나 링크 또는 창의 아무곳을 클릭할 때 onClick
mouseout 마우스가 링크나 특정 영역 안에 있다가 나갔을 때 onMouseOut
mouseove
r 마우스를 옮겼을 때 onMouseOver
focus 창에 포커스를 주었을 때 onFocus
이벤트 처리기는 특정 객체와 긴밀한 관계를 갖고 있다
.
객체 별 이벤트 처리기 목록
객체 별 이벤트 처리기
대 상 객 체 사용 가능한 이벤트 처리기 선택목록(Select list) onBlur, onChange, onFocus
문자필드(Text element) onBlur, onChange, onFocus, onSelect 문자영역(Textarea element) onBlur, onChange, onFocus, onSelect 버튼(Button element) onClick
체크박스(Checkbox) onClick 라디오 버튼 (Radio button) onClick
하이퍼 텍스트 링크 (Hypertext link) onClick, onMouseOver, onMouseOut 리셋 버튼(Reset Button) onClick
전송 버튼(Submit Button) onClick
도큐먼트(Document) onLoad, onUnload
윈도우(Window) onLoad, onUnload, omError 폼 (Form) onSubmit, onReset
주로 <body> 태그에서 사용하는 이벤트 처리기
사용 예
<html>
<head><title>load 연습 </title></head>
<body text = "black" onload="alert(' 안녕하세
요 .')">
onload 는 <body> 태그에서 사용하는 이벤트 처리기이며 문
서를 열었을 때 실행된다
.
</body>
</html>
onload
form 요소나 링크를 클릭할 때
사용 예
<html>
<head><title>onclick 이벤트 </title>
<script language="JavaScript">
function hello() {
alert("Hello, who are you?")
}
</script></head>
<body> <b> 클릭하세요 </b><hr>
<input type="button" onClick="hello()" value
=" 클릭하세요 ">
</body></html>
onclick 사용 예
<html>
<head><title> click 이벤트 </title> </head>
<body onClick="window.open('http://www.naver.com')"> 창의 아무곳이나 클릭만 하면 네이버 사이트가 나타난다 .
onclick 사용 예
<html>
<head><title> 이벤트의 반환값 </title> </head> <body>
<b> 이벤트의 반환값 <b> <hr>
<a href = "http://www.daum.net"
onClick = "return confirm(' 다음 사이트로 이동할까요 ?')"> 다음사 이트 </a>
사용 예
<html>
<head><title>onmouseover & out </title></head> <body>
<b> 색이 변하는 문자열 <b>
<p style ="cursor:hand; font-size:12pt; color:red" onMouseOver="this.style.color='orange'"
onMouseout= "this.style.color='blue'"> 마우스를 올리거나 내리면 색이 변하는 글씨 </p>
</body></html>
