JavaScript

4. JavaScript 이벤트, 내장 객체

Event Handler

이벤트 (Event) : 특정 상황이 발생되었다는 신호,
- 예) 마우스 클릭, 페이지 로드, 마우스 움직임 등
이벤트 처리기 (Event Handler)
- "when <event> occurs when user < . . . >", 사용자가 ... 할 때

<태그 이벤트처리기 = "프로그램" >

예) <A Href = "#top" onClick = "today=new Date(); alert('현재시각 : '+today)"

onMouseOver = "window.status = '마우스가 위에'; return true"

onMouseOut = "window.status = '밖으로'; return true" > 현재시각 예제 </A>

예) <body onLoad=" ... " onUnload=" ... " > 앞 쪽 예제

JavaScript Events

주요 Event Handlers

Event Handler	Event	해당 event가 적용되는 form element
onClick	폼요소(form element)나 링크(link)를 클릭(click)할 때	button , radio button , checkbox , submit button , reset button , link
onMouseOver	마우스 커서가 위로 올 때 (move mouse cursor over ...)	all element , link
onSelect	폼의 입력 필드에서 선택할 때 (select form element’s input field)	text field , textarea
onChange	폼요소의 값을 바꿀 때 (change values of form element)	text field , textarea , selection
onFocus	폼요소에 촛점을 옮길 때/접근 가능 (give input focus to element)
onBlur	폼요소에서 촛점이 떠날 때 (remove input focus from element)
onSubmit	폼을 전송할 때 (submit a form)	submit button

JavaScript 내장 객체 (Core Object)

Array
- 배열의 선언 및 생성, 또는 초기화까지
  array1 = new Array(100)       // 인덱스는 0 번부터
  array2 = new Array("가", "나", "다", "라")      // 배열크기 4, 초기화
  int x = array2.length             // length 속성, 4
Date
- 시간 데이터 생성 (현재시각, 지정한 일자및 시각 등)
  today = new Date(); // Date(msec), Date(yy,mm,dd), Date(yy,mm,dd,h,m,s)
- 메소드 : getYear(), getMonth, getDay, getHours, ...
Math (수학식)

Math.cos(x), Math.sin(x), Math.PI

예 with (Math) {

a = cos(x); b = sin(x); y = PI*x;

}

String

str1 = new String("다양한 문자열 처리 메소드가 있다.")

주요 Browser 내장 객체

object	properties	methods	events
window	frames, parent, self, top, status, . . .	alert(), close(), confirm(), open(), prompt()	onLoad, onUnload, onBlur, onFocus
document	title, location, lastModified, ... bgColor, fgColor, linkColor, alinkColor, vlinkColor, ...	clear(), close(), open(), write(), writeln()	onLoad, onUnload, onBlur, onFocus
history	length	back(), forward(), go()
location	href, host, ...	reload(), replace()
text, textarea	defaultValue, name, value	blur(), focus(), select()	onChange, ... , onSelect
checkbox, radio	name, value, checked, defaultChecked	click()	onClick
button, submit, reset	name, value	click()	onClick
navigator	appName, appVersion, appCodeName, userAgent, mimeTypes, plugins	javaEnabled() // 현재 브라우저가 자바를 지원하는지 검사

예:
window.open("img.html", "welcome", width=195, height=238, left=550, top=100, scrollbars=no, resize=no)
navigator object
- 현재 사용하고 있는 브라우저에 대한 일반 정보

<form>

</form>

내장 객체 구조도 (Built-in Objects Hierarchy)

window

+--- frame

+--- location

+--- history

+--- document +--- link

+--- image

+--- form

+ +--- (elements) text, textarea, password,

+ +--- radio, select, checkbox, button, submit, reset

+--- area

+--- applet

+--- anchor

navigator

5. JavaScript 기초 예제 2

Function : Argument 전달 예1

새창에 원하는 페이지 열기

alert("...") no return, confirm("...") return true or false, prompt("...") return string

Function : Argument 전달 예2

Form Input 처리 예제

<Input type = "button" value = "결과보기1"

onClick = "alert ( eval(this.form.eq1.value) ) " >

<Input type = "button" value = "결과보기2"

onClick = "alert ( this.form.eq1.value +' = ' +eval(this.form.eq1.value) ) " >

</FORM>

<Input type = "button" value = " 결과 => "

onClick = "this.form.out2.value = eval(this.form.eq2.value)" >

</FORM>