브라우저내장객체 계층구조 ......................................................... |
|
|
|
|
|
|
위의 각각은 모두 객체이름이다. 일단 숫자에 한번 놀라고! |
window 객체 ......................................................... |
|
status |
브라우저의 상태바에 문자열을 출력하는 경우에 사용 |
defaultStatus |
브라우저의 상태바에 초기 문자열을 설정 |
length |
창안의 프레임 수 |
name |
창 이름 |
self |
현재 창 자신, window와 같음 |
window |
현재 창 자신, self와 같음 |
parent |
프레임에서 현재프레임의 상위프레임 |
top |
현재프레임의 최상위프레임 |
opener |
open()으로 열린 창에서 볼 때 자기를 연 창 |
document |
document 오브젝트 |
frames |
창안의 모든 프레임에 대한 배열정보 |
history |
history 오브젝트 및 배열 |
location |
location 오브젝트 |
closed |
창이 닫혀 있는 상태 |
locationbar |
location 바 |
menubar |
창 메뉴 바 |
innerHeight |
창 표시 영역의 높이(픽셀), 익스플로러 지원되지 않음 |
innerWidth |
창 표시 영역의 너비(픽셀), 익스플로러 지원되지 않음 |
outerHeight |
창 바깥쪽 둘레의 높이, 익스플로러 지원되지 않음 |
outerWidth |
창 바깥쪽 둘레의 너비, 익스플로러 지원되지 않음 |
pageXOffset |
현재 나타나는 페이지의 X위치, 익스플로러 지원되지 않음 |
pageYOffset |
현재 나타나는 페이지의 Y위치, 익스플로러 지원되지 않음 |
personalbar |
창의 퍼스널 바 |
scrollbar |
창의 스크롤 바 |
statusbar |
창의 상태 바 |
toolbar |
창의 툴 바 |
|
alert() |
경고용 대화상자를 보여줌 |
clearTimeout() |
setTimeout 메소드를 정지 |
confirm() |
확인, 취소를 선택할 수 있는 대화상자를 보여줌 |
open() |
새로운 창을 오픈 |
prompt() |
입력창이 있는 대화상자를 보여줌 |
setTimeout() |
일정 간격으로 함수를 호출하여 수행, millisecond 단위로 지정 |
eval() |
문자열을 숫자로 바꿈 |
toString() |
오브젝트를 문자열로 바꿈 |
blur() |
focus를 이동 |
focus() |
focus를 줌 |
scroll() |
창을 스크롤 함 |
valueOf() |
오브젝트 값을 반환 |
back() |
한 단계 전 URL(이전화면)로 돌아감. 익스플로러 지원 안함 |
find() |
창안에 지정된 문자열이 있는지 확인, 있다면 true 없으면 false. 익스플러러 지원 안함 |
forward() |
한 단계 뒤의 URL(다음화면)로 이동. 익스플로러 지원 안함 |
home() |
초기화 홈페이지로 이동. 익스플로러 지원 안함 |
moveby() |
창을 상대적인 좌표로 이동. 수평방향과 수직방향의 이동량을 픽셀로 지정 |
moveto() |
창을 절대적인 좌표로 이동. 창의 왼쪽 상단 모서리를 기준으로 픽셀을 지정 |
resizeby() |
창의 크기를 상대적인 좌표로 재설정. 밑변의 모서리를 기준으로 수평방향, 수직방향을 픽셀로 지정 |
resizeto() |
창의 크기를 절대적인 좌표로 재설정. 창 크기를 픽셀로 지정 |
scrollby() |
창을 상대적인 좌표로 스크롤. 창의 표시영역의 수평방향과 수직방향에 대해 픽셀로 지정 |
scrollto() |
창을 절대적인 좌표를 스크롤. 창의 왼쪽 상단 모서리를 기준으로 픽셀로 지정 |
stop() |
불러오기를 중지. 익스플로러는 지원 안함 |
captureEvents() |
모든 타입의 이벤트를 판단 |
setInterval() |
일정시간마다 지정된 처리를 반복 |
clearInterval() |
setInterval 메소드의 정지 |
handleEvent() |
이벤트 취급자를 정함 |
print() |
화면에 있는 내용을 프린터로 출력 |
releaseEvent() |
다른 계층의 이벤트로 이벤트를 넘김 |
routeEvent() |
판단한 이벤트와 같은 계층의 이벤트 |
toSource() |
오브젝트값을 문자열로 반환 |
|
onBlur |
브라우저가 포커스를 잃을 때 발생 |
onDragDrop |
사용자가 다른곳에서 객체를 브라우저 안에 넣으려고 할 때 발생. 익스플로러는 지원 안함 |
onError |
문서를 읽는 중에 에러가 생길 때 발생 |
onFocus |
브라우저에 포커스를 얻을 때 발생 |
onLoad |
문서를 읽을 때 발생 |
onMove |
브라우저의 위치를 변경했을 때 발생. 익스플로러는 지원 안함 |
onResize |
창의 크기를 변경했을 때 발생. 익스플로러는 지원 안함 |
onUnload |
현재 문서를 지울려고 할 때 발생 |
|
window.open("문서url","창이름","창의 특성") |
|
directories |
yes || no |
익스플로러 연결도구모음, 익스플로러 전용 |
location |
yes || no |
주소입력란 |
menubar |
yes || no |
메뉴표시줄 |
scrollbars |
yes || no |
스크롤바 |
status |
yes || no |
상태표시줄 |
toolbar |
yes || no |
도구모음 |
copyhistory |
yes || no |
히스토리정보를 복사 |
resizable |
yes || no |
창 크기 조절 가능여부 |
width |
픽셀 |
창의 너비 |
height |
픽셀 |
창의 높이 |
|
<script language="javascript"> <script language="javascript"> <script language="javascript"> <script language="javascript"> |
|
|
<script language="javascript"> |
|
|
<script language="javascript"> <script language="javascript"> |
|
|
<script language="javascript"> |
|
|
<script language="javascript"> |
window 객체에서 가장 많이 사용되는 필수 기능인 새창관련만 살펴보았다. |
document 객체 ......................................................... |
|
title |
문서의 제목을 설정하거나 반환 |
location |
현재 문서의 URL |
referer |
이전 문서의 URL |
cookie |
쿠키파일의 정보 |
bgColor |
창의 배경색을 설정 |
fgColor |
글자색을 설정 |
lastModified |
파일의 최종 변경 날짜를 알아냄 |
URL |
현재의 URL |
alinkColor |
누르고 있는 동안의 링크문자열의 색을 설정 |
vlinkColor |
이미 누른적이 있는 링크 문자열의 색을 설정 |
linkColor |
링크색을 설정 |
anchors |
anchor 오브젝트 및 배열 |
forms |
form 오브젝트 및 배열 |
links |
링크 오브젝트 및 배열 |
domain |
현재 도메인 이름(tainting 상태일때만 사용가능) |
applets |
applet 배열 |
area |
area 오브젝트 |
embeds |
plug in 배열정보 |
images |
이미지 오브젝트 및 배열 |
layers |
layer 오브젝트 및 배열 |
|
open() |
문서에 내용입력 준비됨, 기존 내용 삭제됨 |
close() |
문서에 내용입력이 끝났음 |
clear() |
문서의 내용을 삭제 |
write() |
문서에 내용을 출력 |
writeln() |
줄바꾸기를 포함 문서에 내용을 출력 |
eval() |
문자열을 수치로 변경 |
toString() |
오브젝트를 문자열로 변경 |
valueOf() |
오브젝트 값을 표시 |
getSelection() |
선택범위안에 포함되어 있는 문자열을 반환 |
captureEvent() |
모든 타입의 이벤트를 판단 |
releaseEvent() |
다른 계층의 이벤트로 이벤트를 넘김 |
routeEvent() |
판단한 이벤트와 같은 계층의 이벤트 |
toSource() |
오브젝트 값을 문자열로 표시 |
|
onBlur |
문서가 비활성화될 경우 |
onFocus |
문서가 활성화될 경우 |
onClick |
문서가 클릭될 때 |
onDBClick |
문서가 더블클릭될 때 |
onKeyDown |
키를 누를 때 발생 |
onKeyPress |
키를 누르고 있을 때 발생 |
onKeyUp |
키를 눌렀다 놓을 때 발생 |
onMouseDown |
아우스를 누를 때 발생 |
onMouseUp |
마우스를 눌렀다 놓을 때 발생 |
|
|
<script language="javascript"> |
|
|
<script language="javascript"> |
기타 : 문서를 구성하는 이미지,링크,폼태그,레이어의 배열정보를 얻을 수 있다. |
history 객체 ......................................................... |
|
length |
저장된 URL 개수 |
|
back() |
히스토리 목록에서 한 단계 뒤로 |
forward() |
히스토리 목록에서 한 단계 앞으로 |
go(정수) |
히스토리 목록에서 한 단계 앞으로,뒤로(음의 정수일 경우) |
|
back()는 go(-1) 과 같음 |
|
|
<script language="javascript"> <a href="javascript:history.back()">뒤로</a> |
location 객체 ......................................................... |
|
href |
문서의 URL 주소 |
위 주소 전체 |
host |
호스트 이름과 포트 |
|
hostname |
호스트 컴퓨터이름 |
|
hash |
앵커이름 |
#top |
pathname |
디렉토리 이하 경로 |
/column2/list.asp |
port |
포트번호 부분 |
80 |
protocol |
프로토콜 종류 |
http: |
search |
URL 조회부분 |
table=table30&page=2 |
|
eval() |
문자열을 숫자로 바꿈 |
toString() |
오브젝트를 문자열로 바꿈 |
reload() |
현재 문서를 다시 읽어옴 |
replace() |
현재 문서를 다른 URL 문서로 바꿈 |
valueOf() |
오브젝트 값을 표시 |
toSource() |
오브젝트 값을 문자열로 표시 |
|
|
<script language="javascript"> <script language="javascript"> <script language="javascript"> <script language="javascript"> <script language="javascript"> |
|
|
<a href="javascript:location.reload()"> 새로열기 </a> <script language="javascript"> |
image 객체 ......................................................... |
|
name |
이미지객체의 이름 |
src |
이미지 URL |
width |
너비 |
height |
높이 |
border |
테두리선 두께 |
hspace |
좌우여백 |
vspace |
상하여백 |
align |
텍스트 속의 정렬 |
|
onclick,onMouseOver,onMouseOut 정도를 이용하면 된다. |
|
|
<script language="javascript"> <script language="javascript"> <script language="javascript"> * 레이어및 새창과도 연결해 사용할 수 있다. |
frame 객체 ......................................................... |
|
<html> |
|
위와 같은 프레임구조에서 어느 프레임 파일에서 다른 프레임 파일에 접근하는 방법은 |
|
|
main.html 에 폼태그 form1 이 있고, 폼요소 address 가 있는데 어느 특정 프레임파일에서 위의 index.html같은 프레임셋파일을 창 전체에 어떤 문서를 로딩하려면 top 이란 속성을 사용해야 한다. 어느 특정 프레임파일에서 부모창의 URL을 바꾸는 방법 어느 특정 프레임파일에서 부모창의 URL을 리로딩 하기
|
form 객체 ......................................................... |
|
<form name="form1" action="ok.asp" method="post" target="_self" enctype="" > |
* 위의 폼태그에서 "tel" 에 접근하려면 아래처럼 배열 또는 이름을 이용할 수 있다. |
|
name |
<form> 태그의 name속성 값 |
위의 form1,form2 |
action |
<form> 태그의 action속성 값 |
ok.asp |
method |
<form> 태그의 method속성 값 |
post || get |
target |
<form> 태그의 target속성 값 |
_blank, _self, _top,_parent |
encoding |
<form> 태그의 enctype속성 값 |
첨부파일 유무에 따라 |
elements |
<form> 태그내의 폼요소를 배열로 저장 |
tel 은 form1.elements[0] |
|
|
submit() |
서버로 데이타 전송 |
submit 버튼을 누른 효과 |
reset() |
폼요소의 값을 모두 초기화 |
reset 버튼을 누른 효과 |
|
onSubmit() |
submit 버튼을 누르거나 submit() 메서드가 실행될 때 |
onReset() |
reset 버튼을 누르거나 reset() 메서드가 실행될 때 |
form 객체의 사용법은 하위객체인 폼요소를 마치고 종합하는 단원에서 실제 사용례를 보는게 순서에 맞을 것 같아서 여기서는 생략합니다. |
text, password, hidden, textarea .............................................. 사용자 입력값을 잘 콘트롤 하기 위해서는 HTML 태그의 속성, 객체의 속성,메서드,이벤트핸들러를 잘 이해하고 있어야겠다. |
|
|
1. size=20 이면 20문자 를 입력받을 수 있다.(공백도 1 한글도 1) |
text 는 한줄입력상자로 가장 많이 사용된다. |
|
name |
<input> 태그의 이름 설정 ,자바스크립트, asp 에서 이름을 사용함 |
value |
이 상자에 사용자가 입력한 값 |
defaultValue |
<input> 태그에 기본적으로 든 값 value="홍길동" 처럼 한 경우 |
type |
<input> 태그에 type에 설정한 값 (text 를 리턴) |
|
focus() |
지정한 입력상자에 커서를 둔다 (*자주 이용) |
blur() |
지정한 입력상자에 커서를 없앤다 |
select() |
지정한 입력상자에 든 모든 값을 선택한다 |
|
onFocus |
지정한 입력상자에 커서를 둔 경우 |
onBlur |
지정한 입력상자에 커서를 뺄 경우 |
onSelect |
지정한 입력상자에 든 값을 선택할 때 |
onChange |
지정한 입력상자에 든 값을 바꿀 때 |
<script language="javascript"> // 사용자 입력값 빈값인 경우 if (tel=="") {
<form name="form1" action="ok.asp" method="post" target="_self"> |
|
// 사용자 입력값 4자 미만인 경우 // 사용자 입력값 4자 미만이거나 8자 이상인 경우 |
radio, checkbox ........................................................... 사용자로 부터 입력을 받기도 하지만 어떤 데이타는 체크를 통해서 입력을 대신할 수 있다. 이것도 자주 사용하는 것으로 HTML이 가진 속성과 자바스크립트 객체가 가진 속성,메서드,이벤트 핸들러를 다줄 줄 알아야 한다 |
■ radio (HTML) |
|
<input type="radio" name="sex" value="남" checked>남자 |
radio 버튼은 여러개 중에서 하나만을 고를 수 있는 경우에 사용하여야 하며 |
|
|
<input type="checkbox" name="hoby" value="등산">등산 |
checkbox 버튼은 여러개 중에서 여러개를 고를 수 있는 경우에 사용할 수 있고 |
|
name |
<input> 태그의 이름 설정 ,자바스크립트, asp 에서 이름을 사용함 |
value |
태그안의 value 속성값 |
length |
버튼의 개수 |
checked |
체크된 경우 true, 안되면 false |
defaultChecked |
버튼이 기본으로 체크되어 있는지 true ,false 로 리턴 |
type |
<input> 태그에 type에 설정한 값 |
|
onClick |
버튼 클릭시 |
|
radio 버튼은 항목이 여러개이므로 배열로 다뤄야... |
|
<script language="javascript">
|
|
checkbox 는 배열로 다룰 수도, 아닐 수도 있다. |
|
<script language="javascript"> document.form1.agree.checked == true 버튼이 체크되었음 |
select ........................................................... 여러 항목중에 고를 수 있도록 한 목록 상자로 많이 사용된다. 보통 콤보 상자라고 많이 알고 있더라구. |
|
|
<select name="addr"> |
select 태그에서 size=정수 속성으로 보여줄 리스트수를 설정할 수 있다. |
|
name |
태그 name 속성값 (addr) |
length |
목록의 개수 (3) |
selectedIndex |
선택한 목록 인덱스 번호 (0 부터) |
options |
목록상자 값을 배열로 (익스플로러 지원안됨) |
options[0].text |
0번째 목록의 문자 (서울 마포구 드래곤아이) |
options[0].value |
0번째 목록의 value (서울 마포구 드래곤) |
options[0].selected |
0번째 목록이 선택되면 true 아니면 false |
options[0].defaultSelected |
0번째 목록이 기본으로 선택되어 있는지 |
|
onChange |
현재 선택된 목록이 아닌 다른 목록을 선택시 |
|
|
<script language="javascript"> document.form1.addr.selectedIndex 선택항목의 인덱스 번호 |
button, submit(image), reset, ................................................. 버튼 ! 흔히 보는 자주 보는 버튼이지만 기능은 다 다르다. 자바스크립트로 접근하는 |
|
<input type="button" name="button1" value="버튼"> |
|
<input type="submit" name="button2" value="전송버튼"> |
|
<input type="image" name="button3" value="이미지"src="123.gif"> |
|
<input type="reset" name="button4" value="초기화"> |
|
버튼 : 아무 기능을 내장하고 있지 않은 것으로 onClick 이벤트핸들러와 자바스크립트로 기능을 줘야한다. |
|
name |
위의 name 속성 |
value |
위의 vaule 속성 |
type |
위의 type 속성 |
|
onClick |
버튼을 누른 순간 발생 |
|
|
<script language="javascript"> |
|
|
<script language="javascript"> * 이미지버튼은 전송버튼과 자바스크립트 구문이 동일하다. |
|
|
<script language="javascript">
|
입력값 체크와 전송 예제 ................................................. * 게시판 입문자를 위한 내용입니다. |
|
|
<script language="javascript"> |
|
|
<script language="javascript"> |
|
|
<script language="javascript"> |
|
'Programing > JavaScript' 카테고리의 다른 글
[자바스크립트] javascript 정리 (0) | 2010.06.06 |
---|
태그 : | JavaScript, javaStudy, 웹프로그래밍, 자바스크립트 |