-
평점
-
작성일 2006-10-31 16:30:51
-
추천
-
조회수 106
HTML에 JavaScript 삽입
<script language="javascript"> JavaScript Statements </script>
HTML에 JavaScript 코드 파일 삽입
<script language="javascipt" src="src.js"> </script>
변수의 대소문자 구분
변수에 포함된 데이터의 형을 지정하지 않고,JavaScript 인터프리터가 변수에 포함된 데이터 형을 추적하고 변환.
JavaScript 데이터 형
- 숫 자 형 : 정수와 부동 소수
- BOOLEAN : true,false
- STRING : 작은 따옴표나 큰 따옴표에 들어가 있는 값으로,특수문자 포맷 사용시에는 '\\\\'와 함께 사용.
- null : 아무런 값도 없는 것으로,변수를 초기화 시키거나 어떤 값이나 이벤트를 지울 때 사용됨
- undefined : 변수만 만들고,값을 할당하지 않은 상태
유형간의 변환
- 스트링 피연산자가 비스트링 연산자와 사용된 경우 다른 연산자를 모두 스트링으로 변환
- BOOLEAN값은 1과 0으로 변환되어 수치 연산을 지원
- null값은 스트링 연산에 대해서는 "null",논리 연산에서는 false,그리고 수치 연산에서는 0으로 각각 변환
- 변환 함수
- eval() : 스트링 표현식을 수치값으로 변환하고,파라미터가 수치형태가 아닌 스트링 값이면 에러 발생
- parseInt() : 스트링에 포함된 첫번째 정수를 리턴하고,스트링이 정수로 시작되지 않으면 0을 리턴
- parseFloat() : 스트링에 포함된 첫번째 부동 소수를 리턴하거나 스트링이 적절한 부동 소수로 시작되지 않으면 0을 리턴
배열 : 값의 시퀀스를 정렬할 수 있는 객체로,JavaScript의 특수형으로 배열 사용 전엔 반드시 선언해야 한다.
- 배열 선언 예
arrayName = new Array(arrayLength) arrayName = new Array() arrayName = new Array(value0,value1,...,valuen)
JavaScript만의 특수 연산자
- comma(,) 연산자 : 두 표현식을 계산하고,두 번째 표현식의 값 리턴
- delete 연산자 : 객체의 프로퍼티나 배열 인덱스의 요소 삭제하고,항상 undefined 값 리턴
- new 연산자 : 객체 형의 인스턴스를 만들기 위해 사용
- typeof 연산자 : 연산자의 형을 식별하는 스트링 값을 리턴
- void 연산자 : 값을 리턴하지 않는다
지역 변수와 전역 변수 : 함수 안에서만 사용되는 것을 지역 변수라 하고,프로그램 내에서 사용되는 변수를 전역 변수라 하는 데,지역 변수 사용시 반드시 var 키워드와 함께 선언해야 함
이벤트 정의와 사용
- 이벤트 : 사용자가 웹페이지나 기타 다른 브라우저에 수행한 작업으로 인한 결과
- 이벤트 처리 : 이벤트로 인해 수행되는 프로세스
- 이벤트 핸들러 : 프로세스를 수행하는 코드
- 사용 예 : 사용자가 링크 위로 마우스를 갖다 대면 다이얼로그 박스를 표시한다거나,폼에 입력한 데이터를 검증한다거나,버튼을 클릭할 때 애니메이션을 나타내거나,Java 애플릿과 브라우저 플러그인이 상호작용을 하도록 한다.
HTML 태그 |
JavaScript 이벤트 |
설명 |
---|
다양 |
mouseMove |
마우스 이동 |
<A>..</A> |
Click |
마우스로 링크를 클릭 |
dbClick |
마우스를 링크위에서 더블클릭 |
mouseDown |
마우스 버튼을 누름 |
mouseUp |
마우스 버튼을 놓음 |
mouseOver |
마우스를 링크위로 이동 |
mouseOut |
링크 위에 있던 마우스를 링크 밖으로 이동 |
keyDown |
사용자가 키를 누름 |
keyUp |
사용자가 키를 놓음 |
keyPress |
사용자가 키를 눌렀다가 놓음 |
<IMG> |
abort |
사용자 액션으로 인해 이미지 로딩 작업을 중단함 |
error |
이미지 로딩하는 동안 에러 발생 |
load |
이미지가 로드되고 화면에 나타남 |
keyDown |
사용자가 키를 누름 |
keyUp |
사용자가 키를 놓음 |
keyPress |
사용자가 키를 눌렀다가 놓음 |
<AREA> |
mouseOver |
마우스가 클라이언트측 이미지맵의 한 영역으로 이동함 |
mouseOut |
마우스가 이미지맵 영역 밖으로 이동 |
dbClick |
사용자가 이미지맵의 한 영역을 더블클릭함 |
<BODY>..</BODY> |
Click |
사용자가 문서의 본문을 클릭 |
dbClick |
문서의 본문을 더블 클릭함 |
keyDown |
키를 누름 |
keyUp |
키를 놓음 |
keyPress |
키를 눌렀다가 놓음 |
mouseDown |
마우스 버튼을 누름 |
mouseUp |
마우스 버튼을 놓음 |
<BODY>..</BODY> <FRAMESET>..</FRAMESET> <FRAME>..</FRAME> |
blur |
윈도우에서 현재 입력 포커스가 사라짐 |
error |
윈도우가 로드되는 동안 에러 발생 |
focus |
입력 포커스가 현재 윈도우로 이동 |
load |
윈도우 로딩이 완료됨 |
unload |
윈도우를 종료함 |
move |
윈도우가 이동됨 |
resize |
윈도우의 크기가 바뀜 |
dragDrop |
윈도우에 객체를 드롭 |
<FORM>..</FORM> |
submit |
사용자가 폼을 제출 |
reset |
사용자가 폼을 재설정 |
<INPUT TYPE="text"> |
blur |
현재 입력 포커스가 텍스트 필드에서 사라짐 |
focus |
현재 입력 포커스가 텍스트 필드로 이동 |
change |
텍스트 필드가 변경되어 현재 입력 포커스가 사라짐 |
select |
텍스트 필드에 있는 텍스트가 선택됨 |
<INPUT TYPE="password"> |
blur |
패스워드 필드에서 입력 포커스가 사라짐 |
focus |
패스워드 필드에 입력 포커스 생김 |
<TEXTAREA>..</TEXTAREA> |
blur |
텍스트 영역이 현재 입력 포커스가 사람짐 |
focus |
텍스트 영역에 입력 포커스 생김 |
change |
텍스트 영역이 변경되어 입력 포커스가 사라짐 |
select |
텍스트 영역에서 텍스트가 선택됨 |
keyDown |
키를 누름 |
keyUp |
키를 놓음 |
keyPress |
키를 눌렀다 놓음 |
<INPUT TYPE="button"> |
Click |
버튼이 클릭됨 |
blur |
입력할 수 없도록 버튼이 흐려짐 |
focus |
입력할 수 있도록 포커스 생김 |
mouseDown |
버튼 위에서 왼쪽 마우스 버튼 누름 |
mouseUp |
버튼 위에서 왼쪽 마우스 버튼 놓음 |
<INPUT TYPE="submit"> |
Click |
제출 버튼이 클릭됨 |
blur |
제출 버튼에서 입력 포커스가 사라짐 |
focus |
제출 버튼에 입력 포커스 생김 |
<INPUT TYPE="reset"> |
Click |
리셋 버튼이 클릭됨 |
blur |
리셋 버튼에서 포커스가 사라짐 |
focus |
리셋 버튼에서 포터스가 놓임 |
<INPUT TYPE="radio"> |
Click |
라디오 버튼이 클릭 |
blur |
라디오 버튼에서 입력 포커스가 사라짐 |
focus |
라디오 버튼에 입력 포커스 생김 |
<INPUT TYPE="checkbox"> |
Click |
체크 박스가 클릭 |
blur |
체크 박스에서 입력 포커스가 사라짐 |
focus |
체크 박스에 입력 포커스 놓임 |
<INPUT TYPE="file"> |
blur |
파일 업로드 폼 요소에서 입력 포커스 사라짐 |
change |
사용자가 업로드될 파일을 선택 |
focus |
파일 업로드 폼 요소에 입력 포커스 놓임 |
<SELECT>..</SELECT> |
blur |
선택 요소가 현재 입력 포커스 잃음 |
change |
선택 요소가 변경되어 입력 포커스가 사라짐 |
focus |
선택 요소에 현재 입력 포커스가 놓임 |
이벤트 처리 속성
이벤트핸들링속성 |
실행되는 상황 |
---|
onAbort |
이미지를 로딩하는 작업이 사용자의 한 행동으로 인해 취소되었음 |
onBlur |
문서나 윈도우,프레임세트,폼 요소에서 현재 입력 포커스가 사라짐 |
onChange |
텍스트 필드나 텍스트 영역,파일 업로드 필드,선택 항목이 변경되어 현재 입력 포커스가 사라짐 |
onClick |
링크나 클라이언트측 이미지맵 영역,폼 요소가 클릭됨 |
onDbClick |
링크나 클라이언트측 이미지맵 영역,문서가 더블 클릭됨 |
onDragDrop |
드래그된 객체가 윈도우나 프레임에 드롭됨 |
onError |
이미지나 윈도우,프레임을 로딩하는 동안 에러가 발생함 |
onFocus |
문서나 윈도우,프레임 세트,폼 요소에 입력 포커스 놓임 |
onKeyDown |
키를 누름 |
onKeyPress |
키를 눌렀다 놓음 |
onKeyUp |
키를 놓음 |
onLoad |
이미지나 문서,프레임이 로드됨 |
onMouseDown |
마우스 버튼 누름 |
onMouseMove |
마우스를 이동함 |
onMouseOut |
링크나 클라이언트측 이미지맵에서 마우스를 옮김 |
onMouseOver |
마우스를 링크나 클라이언트측 이미지맵으로 옮김 |
onMouseUp |
마우스 버튼을 놓음 |
onMove |
사용자가 윈도우나 프레임을 이동함 |
onReset |
폼의 리셋 버튼을 클릭하여 폼을 리셋시킴 |
onResize |
사용자가 윈도우나 프레임의 크기를 조절 |
onSelect |
텍스트는 텍스트 필드나 영역에서 선택됨 |
onSubmit |
폼이 제출됨 |
onUnload |
사용자가 문서나 프레임 세트를 종료함 |
객체 정의하기
- 객체 유형 정의
- 프로퍼티 : 객체에 들어 있는 데이터 값에 액세스할 때 사용.
- 메소드 : 객체에 어떤 작업을 할 때 사용하는 함수.
- 객체 유형 만들기
사용자가 직접 객체 유형을 정의하고 특정 객체 인스턴스를 만들 수 있 는데 이렇게 만들려면 객체 유형의 특정 인스턴스를 만들 때 사용되는 함수를 정의하기만 하면 된다. 본래 이러한 생성자 함수는 다음과 같은 일을 한다.
- 객체 유형의 프로퍼티에 값을 할당한다.
- 객체 유형의 메소드로 사용할 수 있는 다른 함수를 지정한다.
- 객체 사용 예
- table 객체의 정의 (table.js)
function table_getValue(row,col){ return this.data[row* this.columns+col ]; } function table_setValue(row,col,value){ this.data[row* this.columns+col ]=value; } function table_set(contents){ var n=contents.length; for(var j=0;jthis.data[j]=contents[j]; } function table_isHeader(row,col){ return this.header[row* this.columns+col ]; } function table_makeHeader(row,col){ this.header[row* this.columns+col ]=true; } function table_makeNormal(row,col){ this.header[row* this.columns+col ]=false; } function table_makeHeaderRow(row){ for(var j=0;j< this.columns+j) this.header[row* this.columns+col ]=true; } function table_makeHeaderColumn(col){ for(var i=0;i< this.rows;++i) this.header[i* this.columns+col ]=true; } function table_write(doc){ doc.write("<TABLE BORDER="+ this.border+">"); for(var i=0;i< this.rows;++i) { doc.write("<TR>"); for(var j=0;j< this.columns;++j) { if( this.header[i* this.columns+j ]) { doc.write("<TH>"); doc.write( this.data[i* this.columns+j ]); doc.write("</TH>"); } else { doc.write("<TD>"); doc.write( this.data[i* this.columns+j ]); doc.write("</TD>"); } } doc.writeln("</TR>"); } doc.writeln("</TABLE>"); } funtion table(rows,columns) { this.rows=rows this.columns=columns this.border=0 this.data=new Array(rows*columns) this.header=new Array(rows*columns) this.getValue=table_getValue this.setValue=table_setValue this.set=table_set this.isHeader=table_isHeader this.makeHeader=table_makeHeader this.makeNormal=table_makeNormal this.makeHeaderRow=table_makeHeaderRow this.makeHeaderColumn=table_makeHeaderColumn this.write=table_write }
- table 객체 사용하기
<HTML> <HEAD> <TITLE>Defining Object Types</TITLE <SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!- //-></SCRIPT> </HEAD> <BODY> <H1>Defining Object Types</H1> <SCRIPT LANGUAGE="JavaScript"><!- t=new table(3,4) contents=new Array("This","is","a","test","of","the","table","object.","Let's","see","it","work") t.set(contents) t.border=4 t.makeHeaderColumn(0) t.write(document) //-></SCRIPT> </BODY> </HTML>
- 객체 유형에 프로퍼티와 메소드 추가
: prototype 프로퍼티를 통해서 인스턴스화할 수 있는 미리 정의된 객체 유형에 프로퍼티와 메소드 추가 사용 예 <HTML> <HEAD> <TITLE>Updating Object Types </TITLE> <SCRIPT LANGUAGE="JavaScript" SRC="table.js"><!- //-></SCRIPT> </HEAD> <BODY> <H1>Updating Object Types</H1> <SCRIPT LANGUAGE="JavaScript"><!- function table_colorWrite(doc){ ........ 함수 정의 ........ ........ } t=new table(3,4) table.prototype.bgColor="Cyan" table.prototype.colorWrite=table_colorWrite ............. ............. t.colorWrite(document) //-></SCRIPT> </BODY> </HTML>
- 프로퍼티와 메소드 삭제
delete objectName.propertyName delete objectName.methodName
브라우저 객체
객 체 |
용 도 |
---|
window 객체 |
브라우저 윈도우나 윈도우 안에 있는 프레임에 액세스할 때 사용한다. 프로퍼티와 메소드를 참조할 때,window 객체가 존재하는 경우에는 "window."접두사를 붙일 필요가 없다 |
document 객체 |
현재 윈도우에 로드되어 있는 문서에 액세스할 때 사용한다. document 객체는 컨텐트를 제공하는 HTML 문서,즉 HEAD와 BODY 태그가 있는 문서를 의미한다. |
location 객체 |
URL을 나타낼 때 사용한다. 이 객체는 URL객체를 만들거나 URL의 일부분에 액세스하거나 기존의 URL을 수정할 때 사용할 수 있다. |
history 객체 |
한 윈도우 안에서 액세스된 URL의 히스토리를 유지할 때 사용 |
frame 객체,frames 배열 |
HTML 프레임에 액세스할 때 사용 frames 배열은 윈도우안에 있는 모든 프레임에 액세스할 때 사용 |
link 객체,links 배열 |
하이퍼텍스트 링크의 텍스트 기반이나 이미지 기반 소스 앵커(anchor)에 액세스할 때 사용 links배열은 문서 안에 있는 모든 link 객체에 액세스할 때 사용한다. I.E.는 link 객체의 anchor객체를 결합한다. |
anchor 객체,anchors 배열 |
하이퍼텍스트 링크의 타켓에 액세스할 때 사용 anchors 배열은 문서 안에 있는 모든 anchor 객체에 액세스할 때 사용 |
image객체,images 배열 |
HTML 문서에 삽입되어 있는 이미지에 액세스할 때 사용 images 배열은 문서 안에 있는 모든 image 객체에 액세스할 때 사용 |
area 객체 |
클라이언트측 이미지맵 안에 있는 영역에 액세스할 때 사용 |
applet 객체,applets 배열 |
Java 애플릿에 액세스할 때 사용 애플릿 배열은 문서 안에 있는 모든 애플릿에 액세스할 때 사용 |
event 객체,Event 객체 |
이벤트 발생에 대한 정보에 액세스할 때 사용 event 객체는 특정 이벤트에 대한 정보 제공 Event 객체는 이벤트를 식별하는 데 사용하는 상수 제공 |
form 객체,forms 배열 |
HTML 폼에 액세스시 사용 forms 배열은 문서 안에 있는 모든 폼에 액세스시 사용 |
element 객체 |
폼 안에 들어있는 모든 폼 요소에 액세스시 사용 |
text 객체 |
폼의 텍스트 필드에 액세스시 사용 |
textarea 객체 |
폼의 텍스트 영역 필드에 액세스시 사용 |
radio 객체 |
폼의 라디오 버튼 세트에 액세스하거나 세트 안에 있는 각각의 버튼에 액세스할 때 사용 |
checkbox 객체 |
폼의 체크 박스에 액세스할 때 사용 |
button 객체 |
Submit나 Reset 버튼이 아닌 폼 버튼에 액세스시 사용 |
reset 객체 |
폼의 Reset 버튼에 액세스시 사용 |
selet 객체 |
폼의 선택 리스트에 액세스시 사용 |
option 객체 |
option 객체는 선택 리스트의 요소에 액세스시 사용 |
password 객체 |
폼의 패스워드 필드에 액세스시 사용 |
hidden 객체 |
폼의 숨겨진 필드에 액세스시 사용 |
FileUpload 객체 |
폼의 파일 업로드 요소에 액세스시 사용 |
navigator 객체 |
스크립트를 실행하고 있는 브라우저에 대한 정보에 액세스시 사용 |
screen 객체 |
사용자의 화면의 색상 깊이와 크기에 대한 정보에 액세스시 사용 |
embed 객체,embeds 배열 |
삽입된 객체에 액세스시 사용 embeds 배열은 문서 안에 삽입된 모든 객체에 대한 액세스 제공 |
mimeType 객체,mimeTypes 배열 |
브라우저가 제공하는 특징 MIME 유형에 대한 정보에 액세스시 사용 mimeTypes 배열은 제공하는 모든 mimeType 객체의 배열 I.E.는 빈 배열을 리턴하면서 mimeTypes에 대해서 임시적으로 지원 |
plugin 객체,plugins 배열 |
특정 브라우저 플러그인에 대한 정보에 액세스시 사용 plugins 배열은 브라우저가 지원하는 모든 플러그인의 배열 I.E.는 빈 배열을 리턴하면서 plugins에 대해서 임시적으로 지원 |
window 객체
- 모든 브라우저 스크립트의 기본적인 것으로,브라우저가 자동으로 정의하는 최상위 레벨의 객체이다. 현재 열려 있는 각 윈도우에 대해 별도의 window 객체가 정의된다.
window 객체의 프로퍼티
프로퍼티 |
설 명 |
---|
closed |
윈도우가 닫혀 있는지 식별 |
defaultStatus |
브라우저 윈도우의 하단의 상태바에 나타나는 디폴트 상대 메시지를 지정 |
document |
윈도우에 표시되어 있는 현재 문서를 지정하는 객체 |
frames |
윈도우 객체에 들어 있는 모든 프레임 객체로 구성된 배열 |
history |
마지막으로 윈도우로 로드된 URL의 리스트를 포함하는 윈도우의 히스토리 객체 |
length |
window에 들어 있는 프레임의 수 식별 |
location |
window 객체와 관련된 URL을 지정하는 객체 |
name |
윈도우의 이름 지정 |
offscreenBuffering |
윈도우 정보의 오프스크린 버퍼링이 사용될 것인지를 지정하는 부울값 오프스크린 버퍼링은 윈도우를 나타내기 전에 윈도우의 모든 요소를 로드할 때 사용 |
opener |
윈도우를 만들거나 열 수 있도록 해주는 window 객체 지정 |
parent |
특정 윈도우를 포함하는 윈도우를 지정하는 시너님 |
self |
참조될 현재 윈도우를 지정하는 시너님 |
status |
브라우저 윈도의 하단의 상태 표시줄에 나타날 임시 메시지를 지정 |
top |
중첩된 일련의 윈도우에서 맨 위에 있는 브라우저 윈도우를 의미하는 시너님 |
window |
참조될 현재 윈도우를 식별하는 시너님 |
window 객체의 메소드
메 소 드 |
설 명 |
---|
alert(text) |
경고 다이얼로그 박스를 표시 |
blur() |
포커스를 윈도우에서 옮긴다 |
setInterval(expression,milliseconds) |
지정된 타임아웃 인터벌이 지난 이후에 표현식을 반복해서 평가하거나 함수를 불러온다. |
clearInterval(interval) |
이전에 설정된 인터벌 타이머를 클리어 |
setTimeout(expression,milliseconds) |
타임아웃 기간이 지난 이후에 표현식을 평가하거나 함수를 호출한다. |
clearTimeout(timer) |
이전에 설정된 타임아웃을 클리어 |
close() |
지정된 윈도우를 닫는다. |
confirm(text) |
확인 다이얼로그 박스를 나타낸다. |
focus() |
윈도우로 포커스를 가져간다. |
open(url,name,[options]) |
새로운 윈도우를 열고 새로운 window 객체를 만듬 |
prompt(text,defaultInput) |
프롬프트 다이얼로그 박스를 나타낸다. |
scroll(x,y) |
윈도우를 특정 위치까지 스크롤한다. |
open() 메소드의 옵션
옵 션 |
값 |
설 명 |
---|
toolbar |
yes no |
윈도우에 툴바 제공 |
location |
yes no |
윈도우에 위치 필드 제공 |
directories |
yes no |
디렉토리 버튼 제공 |
status |
yes no |
상태 표시줄 제공 |
menubar |
yes no |
메뉴바 제공 |
scrollbars |
yes no |
스크롤 바 제공 |
resizable |
yes no |
윈도우 크기 조절 가능 |
width |
정수 |
윈도우의 폭(픽셀) |
height |
정수 |
윈도우의 높이(픽셀) |
frame 객체
- 프레임은 윈도우를 독립된 표시 영역들로 분할한 후,이 영역들에 표시되는 정보들을 강력하게 컨트롤 할 수 있게 해준다.
- 프레임 객체의 프로퍼티와 메소드는 window 객체와 같지만,close() 메소드는 지원하지 않는다.
- JavaScript 에서 아주 중요한 객체로,이 객체를 사용하면 로드될 문서를 업데이트하고 로드된 문서 안에 있는 HTML 요소에 액세스할 수 있다.
프로퍼티 |
설 명 |
---|
alinkColor |
<BODY> 태그의 alink 속성의 값 지정 |
anchor |
문서에 들어 있는 배열을 참조하는 객체 |
anchors |
문서에 들어 있는 모든 앵커의 배열 |
applet |
문서에 들어 있는 애플릿을 참조하는 객체 |
applets |
문서에 들어 있는 모든 애플릿의 배열 |
area |
문서 안의 이미지맵 영역을 참조하는 객체 |
bgColor |
<BODY> 태그의 bgColor 속성의 값 식별 |
cookie |
쿠키의 값 식별 |
domain |
문서가 로드되는 서버의 도메인 이름 식별 |
embeds |
문서안의 모든 플러그인의 배열 |
fgColor |
<BODY> 태그의 text 속성값 지정 |
form |
문서 안의 폼을 참조하는 객체 |
Forms[] |
문서 안의 모든 폼의 배열 |
image |
문서 안의 이미지를 참조하는 객체 |
Images[] |
문서 안의 모든 이미지의 배열 |
lastModified |
문서가 마지막으로 수정된 날짜 |
link |
문서 안의 링크를 참조하는 객체 |
links |
문서 안의 모든 링크의 배열 |
linkColor |
<BODY> 태그의 link 속성의 값 식별 |
plugin |
문서 안의 플러그인을 참조하는 객체 |
plugins[] |
브라우저가 지원하는 플러그인을 나타내는 객체의 배열 |
referrer |
문서에 대한 링크를 제공하는 문서의 URL |
title |
문서의 타이틀 |
URL |
문서의 URL |
vlinkColor |
<BODY> 태그의 vlink 속성의 값 식별 |
메 소 드 |
설 명 |
---|
close() |
문서의 객체를 만드는 데 사용된 스트림 |
open([mimeType][,"replace"]) |
선택적인 MIME 유형으로 문서 객체를 만들 때 사용되는 흐름을 개시한다. "replace" 파라미터는 text/html MIME 유형과 함께 사용되어 히스토리 리스트에 있는 현재 문서를 대체 |
write(expr1[,expr2...,exprN]) |
문서에 표현식의 값을 기록 |
write(expr1[,expr2...,exprN]) |
개행 문자가 다음에 따라오는 문서에 표현식의 값 기록 |
- navigator 객체는 window 객체와 마찬가지로 브라우저 객체 모델에서 최상위 레벨의 객체이며,스크립트를 실행할 때 사용되는 브라우저의 종류와 버전에 대한 정보 제공한다.
프로퍼티 |
브라우저 지원 |
설 명 |
---|
appCodeName |
N2,I.E3 |
브라우저 색상 이름 |
AppMinorVersion |
I.E4 |
브라우저 버전 번호 |
appName |
N2,I.E3 |
브라우저 이름 |
appVersion |
N2,I.E3 |
브라우저의 버전 |
browserLanguage |
I.E4 |
브라우저에 설정되어 있는 언어 |
connectionSpeed |
I.E4 |
브라우저가 네트워크에 연결되는 속도 |
cookieEnabled |
I.E4 |
브라우저가 쿠키를 허용하도록 설정되어 있는지의 여부 |
cpuClass |
I.E4 |
브라우저 실행시 사용되는 마이크로프로세서의 유형 |
onLine |
I.E4 |
브라우저가 현재 온라인 연결을 가지고 있는지 여부 |
Language |
N4,I.E4 |
브라우저에 설정되어 있는 언어 |
mimeTypes |
N3,I.E4 |
현재 브라우저가 지원하는 모든 MIME 유형의 배열 |
platform |
N4,I.E4 |
브라우저가 실행되는 운영체제 플랫폼 |
plugins |
N3,I.E4 |
현재 브라우저에 설치된 모든 플러그인의 배열 |
systemLanguage |
I.E4 |
운영체제의 디폴트 언어 |
userAgent |
N2,I.E3 |
브라우저에서 서버로 전송된 HTTP 프로토콜의 사용자 에이전트 헤더 |
userLanguage |
I.E4 |
사용자가 사용하는 언어 |
userProfile |
I.E4 |
사용자 프로파일 정보에 대한 액세스를 제공하는 객체 |
navigator 객체의 메소드
메 소 드 |
설 명 |
---|
javaEnabled() |
사용자가 브라우저의 Java 기능을 켜두었는지의 여부를 나타내는 부울값 리턴 |
taintEnabled() |
사용자가 data tainting(보안 메커니즘)을 활성화했는지 여부를 나타내는 부울값 리턴 |
preference |
서명이 되지 않은 스크립트가 보안 관련 프로퍼티를 얻고 설정할 때 사용 |
event 객체의 프로퍼티
프로퍼티 |
브라우저 |
설 명 |
---|
data |
N |
DragDrop 이벤트로 인해 드롭된 객체의 URL이 들어있는 스트링 배열 |
height,width |
N |
윈도우나 프레인의 길이와 너비(픽셀표시) |
pageX,pageY |
N |
픽셀로 나타낸 커서의 수평/수직 위치(페이지에서의 상대적위치) |
screenX,screenY |
N,I.E |
픽셀로 나타낸 커서의 수평/수직 위치(화면에서의 상대적 위치) |
layerX,layerY |
N |
픽셀로 나타낸 커서의 수평/수직 위치,이벤트가 발생한 레이어에 대한 상대적 위치. Resize 이벤트와 함께 사용하면 layerX와 layerY가 이벤트가 타겟으로 하는 객체의 길이와 너비 지정 |
clientX와 clientY |
I.E |
픽셀로 나타낸 커서의 수평/수직 위치,이벤트가 발생한 웹페이지에서의 상대적 위치 |
offsetX,offsetY |
I.E |
픽셀로 나타낸 커서의 수평/수직 위치,이벤트가 발생한 컨테이너에 대한 상대적 위치 |
X,Y |
I.E |
픽셀로 나타낸 커서의 수평/수직 위치,이벤트가 발생한 문서에 대한 상대적 위치 |
target |
N |
이벤트가 전송된 원래 객체 |
srcElement |
I.E |
이벤트가 전송된 원래 객체 |
type |
N,I.E |
발생한 이벤트 유형 |
which |
N |
눌려진 마우스 버튼(왼:1,가:2,오:3)이나 눌려진 키의 ASCII값 |
keyCode |
I.E |
키 누름과 연관된 Unicode 키 코드를 식별 |
button |
I.E |
이벤트가 발생했을 때 눌려진 마우스 버튼 식별(0:눌려진버튼없음,1:왼,2:오,4:가) |
modifiers |
N |
마우스나 키 이벤트와 연관된 수정자 키(ALT_MASK,CONTROL_MASK,SHIFT_MASK,META_MASK)를 식별 |
altkey,ctrlkey,shiftkey |
I.E |
true나 false로 설정하여 이벤트가 발생했을 때 Alt키와 Control키,Shift 키 중에 어떤 것이 눌려졌는지 알려준다. |
cancelBubble |
I.E |
true나 false로 설정하여 이벤트 버블링을 취소하거나 활성화한다. |
fromElement,toElement |
I.E |
이동 중인 HTML 요소 지정 |
reason |
I.E |
데이터 소스 객체에 대한 데이터 전송 상태를 나타내는데 사용 |
returnValue |
I.E |
true나 false로 설정하여 이벤트 핸들러의 리턴값을 나타낸다. 이벤트 핸들러에서 true나 false를 리턴하는 것과 같다. |
srcFilter |
I.E |
onfilterchange 이벤트를 시작하는 filter객체 지정 |
screen 객체의 프로퍼티
- height : 사용자의 화면의 현재 높이(픽셀)
- width : 사용자의 화면의 현재 너비(픽셀)
- colorDepth : 사용자의 화면/비디오 카드에서 현재 지원하는 색상당 바이트 수
- document 객체의 프로퍼티로 액세스되고,form 객체는 문서 안의 폼에 액세스할 수 있도록 해주고,폼 관련 이벤트에 응답을 할 수 있도록 해주기 때문에 중요하다.
form 객체의 프로퍼티
프로퍼티 |
설 명 |
---|
action |
<FORM> 태그의 HTML action 속성에 대한 액세스 제공 |
button |
GUI 컨트롤 버튼을 나타내는 객체 |
checkbox |
체크 박스 필드를 나타내는 객체 |
elements |
폼 안에 포함되어 있는 모든 필드와 GUI 컨트롤을 포함하는 배열 |
encoding |
<FORM> 태그의 HTML enctype 속성에 대한 액세스 제공 |
FileUpload |
파일 업로드 폼 필드를 나타내는 객체 |
hidden |
숨겨진 폼 필드를 나타내는 객체 |
length |
elements 배열의 길이에 대한 액세스 제공 |
method |
<FORM> 태그의 HTML method 속성에 대한 액세스 제공 |
name |
폼의 이름 식별 |
password |
패스워드 필드를 나타내는 객체 |
radio |
라디오 버튼 필드를 나타내는 객체 |
reset |
reset 버튼을 나타내는 객체 |
select |
선택 항목 리스트를 나타내는 객체 |
submit |
submit 버튼을 나타내는 객체 |
target |
<FORM> 태그의 HTML target 속성에 대한 액세스 제공 |
text |
텍스트 필드를 나타내는 객체 |
textarea |
텍스트 영역 필드를 나타내는 객체 |
form 객체의 메소드
메 소 드 |
설 명 |
---|
handleEvent() |
지정된 이벤트에 대한 폼의 이벤트 핸들러를 호출할 때 사용 |
submit() |
폼을 제출시 사용 |
reset |
폼의 엔트리를 디폴트 값으로 재설정시 사용 |
form 요소 객체의 프로퍼티
객 체 |
프로퍼티 |
설 명 |
---|
button |
name |
버튼의 name 속성에 대한 액세스 제공 |
type |
객체의 유형 지정 |
value |
객체의 값 지정 |
checkbox |
checked |
체크박스가 현재 체크되어 있는지를 식별 |
defaultChecked |
체크박스가 디폴트로 체크되어 있는지 식별 |
name |
체크박스의 HTML name 속성에 대한 액세스 제공 |
type |
객체의 유형 식별 |
value |
객체의 값 식별 |
FileUpload |
name |
객체의 name 속성에 대한 액세스 제공 |
type |
객체의 type 속성에 대한 액세스 제공 |
value |
객체의 값 식별 |
hidden |
name |
객체의 name 속성에 대한 액세스 제공 |
type |
객체의 유형 식별 |
value |
객체의 값 식별 |
password |
defaultChecked |
객체의 디폴트 값 식별 |
name |
객체의 name 속성에 대한 액세스 제공 |
type |
객체의 유형 식별 |
value |
객체의 값 식별 |
radio |
checked |
라디오 버튼이 체크되어 있는지 식별 |
defaultChecked |
라디오 버튼이 디폴트로 체크되어 있는지 식별 |
name |
객체의 name 속성에 대한 액세스 제공 |
type |
객체의 유형 식별 |
value |
객체의 값 식별 |
reset |
name |
객체의 name 속성에 대한 액세스 제공 |
type |
객체의 유형 식별 |
value |
객체의 값 식별 |
select |
length |
선택 리스트의 길이 식별 |
name |
객체의 name 속성에 대한 액세스 제공 |
option |
선택 리스트가 제공하는 옵션 식별하는 배열 |
selectedIndex |
선택 리스트 안에서 처음 선택된 옵션 식별 |
type |
객체의 유형 식별 |
submit |
name |
객체의 name 속서에 대한 액세스 제공 |
type |
객체의 유형 식별 |
value |
객체의 값 식별 |
text |
defaultValue |
텍스트 필드에 나타나는 디폴트 텍스트를 식별 |
name |
객체의 name 속성에 대한 액세스 제공 |
type |
객체의 유형 식별 |
value |
객체의 값 식별 |
textarea |
defaultValue |
텍스트 영역 필드에 나타나게 되는 디폴트 텍스트 식별 |
name |
객체의 name 속성에 대한 액세스 제공 |
type |
객체의 유형 식별 |
value |
객체의 값 식별 |
form 요소 객체의 메소드
객 체 |
메 소 드 |
설 명 |
---|
button |
Click() |
클릭된 버튼 시뮬레이트 |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
checkbox |
Click() |
클릭된 체크 박스 시뮬레이트 |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
FileUpload |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
select() |
입력 영역을 선택 |
hidden |
없음 |
|
password |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
select() |
패스워드 필드에 나타나는 텍스트를 하이라이트 |
radio |
Click() |
라디오 버튼 클릭 시뮬레이트 |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
reset |
Click() |
리셋 버튼 클릭 시뮬레이트 |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
select |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
submit |
Click() |
제출 버튼 클릭 시뮬레이트 |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
text |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
select() |
텍스트 필드에 있는 텍스트 하이라이트 |
textarea |
blur() |
포커스 잃음 |
focus() |
포커스 맞춤 |
select() |
텍스트 영역에 있는 텍스트 하이라이트 |
- 윈도우에 로드되어 있는 현재 문서의 URL에 액세스하거나 새로운 문서를 로드할 때 사용
location 객체의 프로퍼티
프로퍼티 |
설 명 |
---|
hash |
URL의 앵커 부분(존재하는 경우) |
host |
URL의 hostname:port 부분 |
hostname |
URL의 host부분 |
href |
전체 URL |
pathname |
URL의 경로명 부분 |
port |
URL의 포트 부분 |
protocol |
URL의 프로토콜 부분 |
search |
URL의 쿼리 스트링 부분 |
location 객체의 메소드
- reload() : 윈도우의 현재 문서를 브라우저의 Reload 버튼에서 사용하는 정책에 따라 다시 로드
- Every time : 문서는 매번 서버에서 다시 로드
- Once per session : 서버의 문서의 날짜가 캐시에 저장되어 있는 문서보다 더 최신 날짜라는 것을 나타내면 문서는 세션당 한 번씩 서버에서 다시 로드된다. 문서가 캐시에 없는 경우에는 서버에서 로드
- Never : 문서는 가능하면 캐시에서 다시 로드,그렇지 않으면 서버에서 로드
- replace() : URL을 파라미터로 취하여,현재 문서 히스토리 목록에 있는 현재 문서위로 그 URL의 문서를 로드,그러면 브라우저의 Back버튼을 클릭하여 이전 문서로 돌아갈 수 없음
- link 객체는 document 객체의 프로퍼티로,문서에 들어있는 텍스트나 이미지 링크를 캡슐화
- links 배열은 문서에 들어있는 모든 링크의 배열
- link 객체의 메소드
handleEvent() : event 객체를 인자로 취하며 그 이벤트에 대해 적당한 이벤트 핸들러 호출
link 객체의 프로퍼티
프로퍼티 |
설 명 |
---|
hash |
URL의 앵커 부분(존재하는 경우) |
host |
URL의 hostname:port 부분 |
hostname |
URL의 host부분 |
href |
전체 URL |
pathname |
URL의 경로명 부분 |
port |
URL의 포트 부분 |
protocol |
URL의 프로토콜 부분 |
search |
URL의 쿼리 스트링 부분 |
target |
링크의 HTML,target 속성 |
- HTML 문서 안에서 이름이 지정된 오프셋으로 사용되는 앵커 의미
- anchors 배열에는 문서의 모든 앵커가 들어있음
- 프로퍼티나 메소드 또는 이벤트를 전혀 가지고 있지 않음
- HTML 문서와 관련하여 정의된 이름이 지정된 오프셋을 추적할 때 사용
- anchor 객체는 HREF 속성을 포함하는 경우에 link 객체가 된다.
- history 객체의 프로퍼티
- current : 윈도우에 나타나는 현재 문서의 URL
- length : History 리스트의 길이
- next : History 리스트에서의 다음 URL
- previous : History 리스트에서의 이전 URL
- history 객체의 메소드
- back() : History 리스트에 이전 문서를 로드. 브라우저의 Back 버튼을 클릭하는 것과 같은 효과
- forward() : History 리스트에 다음 문서를 로드. 브라우저의 Forward 버튼을 클릭하는 것과 같은 효과
- go() : History 리스트에 있는 특정 문서로 감
- go(n) : n>0인 경우,이 메소드는 History 리스트에서 n개의 엔트리가 앞에 있는 문서를 로드,n=0인 경우에는 현재 문서가 다시 로드되고,n<0인 경우엔 History 리스트에서 n개의 엔트리 뒤에 있는 문서를 로드
- go(string) : go()는 이 스트링을 서브스트링으로 갖고 있는 URL의 History 리스트에서 가장 가까운 문서를 로드
- document 객체의 프로퍼티
- 문서와 함께 로드된 이미지에 대한 액세스 제공
- images 배열은 문서 안에 지정되어 있는 각각의 <IMG>태그에 대한 엔트리가 들어있음
- image 객체 유형을 사용하면 키워드와 생성자로 새로운 image 객체를 명시적으로 만들 수 있다. Image() 생성자는 웹페이지의 일부로서 처음에 나타나지 않는 이미지를 만들고 미리 로드할 때 사용한다. 이러한 image 객체는 브라우저의 캐시에 저장되면 이미 나타난 이미지를 대체할 때 사용
* Image() 생성자를 사용하여 캐시된 이미지 만드는 예 cachedImage=new Image() cachedImage.src="myImage.gif" = > 첫번째 문장은 새로운 image 객체를 만들고 그것을 cachedImage 변수에 대입하고,두번째 문장은 image 객체의 src프로퍼티를 myImage.gif 이미지 파일로 설정한다. 이 경우 myImage.gif는 브라우저 캐시로 로드된다. 그러면 로드된 이미지는 cachedImage 변수를 사용하여 참조 가능하다.
image 객체의 프로퍼티
프로퍼티 |
설 명 |
---|
border |
<:IMG> 태그의 BORDER 속성의 값 |
complete |
이미지가 완전히 로드되었는지 식별 |
height |
<:IMG> 태그의 HEIGHT 속성의 값 |
hspace |
<IMG> 태그의 HSPACE 속성의 값 |
lowsrc |
<IMG> 태그의 LOWSRC 속성의 값 |
name |
<IMG> 태그의 NAME 속성의 값 |
prototype |
image 객체에 사용자 지정 프로퍼티를 추가할 때 사용 |
src |
<IMG> 태그의 SRC 속성의 값 |
vspace |
<IMG> 태그의 VSPACE 속성의 값 |
width |
<IMG> 태그의 WIDTH 속성의 값 |
- 이미지맵은 여러 가지 다른 영역으로 나누어져 있는 이미지로서 각각의 영역은 자체
|
첨부파일 |
|
비밀번호 |
수정 및 삭제하려면 비밀번호를 입력하세요.
|
본 결제 창은 결제완료 후 자동으로 닫히며,결제 진행 중에 본 결제 창을 닫으시면
주문이 되지 않으니 결제 완료 될 때 까지 닫지 마시기 바랍니다.
|