18장. window, screen, document, link, anchor 객체

Presentation on theme: "18장. window, screen, document, link, anchor 객체"— Presentation transcript:

1 18장. window, screen, document, link, anchor 객체

2 프로그래밍의 기본 어떠한 변수/자료구조를 사용할 것인가? 어떠한 알고리듬으로 변수/자료구조의 데이터를 처리할 것인가?
어떠한 함수/객체를 사용할 것인가? 사용자 정의 시스템(컴파일러/인터프리터/OS) 제공 e.g., Object-oriented language: 내장객체들 제공 Java - JSP/JavaScript 0MyJavaScript/Chap18-Object/Javascript2.html

3 Object-oriented Model
House: a group of geometrical ‘objects’ house - room - furniture - rectangle/ ellipse/circle/line/curve e.g., house.room1 house.room1.funiture1 e.g., Java 기초 실습 – JDK, javac, java

4 자바스크립트 – 브라우저 내장 객체의 계층 구조 - DOM: 브라우저가 내장하고 있는 객체들을 JavaScript에서 사용할 수 있음

5 window객체 객체의 계층구조에서 최상위에 존재함
창열기, 창닫기, 창크기 조절 등 브라우저에서 사용하는 창을 제어하는 다양한 작업들이 가능 window.status=“환영합니다” // 상태표시줄에 문자열 표시 window.close() // 창을 닫는다 window.open(“ ”, “ ”, “ “) // 새창을 연다

6 Window – window객체의 속성 속성 설명 defaultStatus
브라우저 상태 표시줄에 표시할 문자열의 초기 값 설정 status 상태 표시줄에 표시할 문자열 지정 window 창 자신을 가리킴 frames 창에 포함된 프레임을 배열 형태로 지정 opener open( ) 메소드를 사용해서 새 창을 열었을 경우, 새 창을 열도록 한 문서를 가리킴 parent 주종 관계를 이루고 있는 프레임 문서에서 상위 프레임을 가리킴 self 현재 작업 중인 창, 즉 자기자신을 가리킴 top 프레임이 설정되기 전의 상태로 돌아감, 프레임을 모두 무시하고 창 하나만 남음 classes 문서 안에 정의된 모든 스타일시트의 정보를 갖음 tags 문서 안에 정의된 모든 태그의 정보를 나타냄 screenX 창의 x 좌표 반환 screenY 창의 y 좌표 반환 closed 창이 닫혀 있는지 확인한 후 true, false 반환 name 창의 이름 반환 length 창 안에 프레임 수 반환

7 window 객체의 메소드(1) 사용자의 응답을 요구하는 다이얼로그 상자를 생성하는 메소드
alert("메시지") : 경고창 띄움 prompt("메시지","기본 문구") : 입력창 띄움 confirm("메시지") : 확인/취소창 띄움 창 생성 및 제거 메소드 open("문서명","창이름", "속성") : 새 창을 염 close( ) : 창을 닫음

8 Window객체 – window 객체의 메소드(2)
브라우저 창 크기, 위치 설정 moveBy(x,y) :브라우저를 상대적인 좌표로 지정한 픽셀만큼 이동 moveTo(x,y) :브라우저를 절대적인 좌표로 지정한 위치로 이동 resizeBy(x,y) :브라우저의 크기를 상대적으로 지정한 픽셀만큼 설정 resizeTo(x,y) :브라우저의 크기를 절대 값으로 지정한 픽셀만큼 설정 scroll(x,y) :창이나 프레임 안의 내용을 스크롤함 scrollBy(x,y) :스크롤을 상대좌표로 이동 scrollTo(x,y) :스크롤을 절대좌표로 이동

9 window 객체의 메소드(3) 창의 동작 시간 간격을 조절하는 메소드 : 애니메이션/시뮬레이션에서 사용
- setTimeout("명령문",시간간격) :일정한 시간 간격으로 명령문을 반 복 실행 (시간은 1/1000초 단위) clearTimeout( ) : setTimeout( )으로 동작되는 타이머를 해제 0MyJavaScript/Chap18-Object/ex2.html Section4/Chap18/1804/city1end.htm 기타 print( ) :현재 창 문서 출력

10 window.open()메소드로 창 열기 window.open("문서명", "창이름","옵션 설정");
옵션을 다양하게 설정하여 다양한 모양의 새 창을 열 수 있음. 인자값은 반드시 세 개를 포함하여야 함 window.open(“문서명“, “창이름“, “속성 설정 “) - 아무런 속성을 지정하지 않는 경우 window.open(“ “, “ “, “ “) Section4/Chap18/1801/1801end.htm - IE: undefined screenX, screenY, Chrome: screenX, screenY - Section4/Chap18/1801/allim1.htm Section4/Chap18/1802/1802end.htm

11 window.open ()메소드에 설정할 수 있는 창 옵션
값 설명 directories yes/no 연결 등 디렉토리 메뉴 표시 여부 menubar 메뉴 바 표시 여부 toolbar 툴 바 표시 여부 location 주소 입력줄 표시 여부 resizable 크기 재설정 버튼 표시 여부 status 상태 표시줄 표시 여부 scrollbars 스크롤 바 표시 여부 copyhistory 히스토리 정보를 저장할지 여부 channelmode 전체화면 모드 fullscreen 전체화면으로 표시 width pixel 창 넓이 height 창 높이 left 창의 좌측 좌표 값 top 창의 위쪽 좌표 값

12 Screen – screen 객체의 속성 Screen 객체는 window 안에서 사용하는 화면부분의 정보를 알려줌:
window.screen.속성 / screen.속성 section4/Chap18/1800screen/screen.htm 속성 설명 availHeight 작업 표시줄을 제외한 화면의 높이를 픽셀 값으로 표시 availWidth 작업 표시줄을 제외한 화면의 너비를 픽셀 값으로 표시 availTop 화면 표시 영역의 y 좌표 표시 availLeft 화면 표시 영역의 x 좌표 표시 height 화면의 높이를 픽셀 값으로 표시 width 화면의 너비를 픽셀 값으로 표시 colorDepth 컴퓨터에서 사용하고 있는 컬러 수를 표시 pixelDepth 화면의 컬러 해상도(bits/pixel)를 표시(넷스케이프 네비게이터용

13 document 객체의 속성(1) 가장 많이 사용하는 객체로 window(screen)에 나타난 ‘HTML 문서’에 대한 정보와 문서에 지정/포함된 객체들에 대한 정보를 가짐 document.속성 색상 지정 속성 bgcolor :문서의 배경색 지정 fgcolor :문서의 글자색, 선색 지정 linkcolor :링크 문자색 지정 vlinkcolor :방문한 링크 문자색 지정 alinkcolor :선택 중인 링크 문자색 지정

14 document – document 객체의 속성(2)
웹 문서와 관련된 정보 lastModifed :홈페이지가 마지막으로 갱신된 날짜 저장 location :웹 문서의 URL 주소 저장 URL :문서의 URL 주소 값 반환 domain :서버의 도메인 이름을 지정하거나 반환 title :<title> 태그 사이의 문서 제목을 제공 cookie :쿠키 파일의 정보를 읽고 쓸 수 있음

15 Document – document 객체의 속성(3)
웹 문서에 포함된 배열 객체 images :문서에 삽입된 그림을 배열로 제공 links :문서에 포함된 모든 링크의 이름을 배열로 제공 forms :<form> 태그 입력순서대로 배열로 제공 anchors :문서에 포함된 책갈피의 이름을 배열로 제공 (anchor: 책갈피 위치를 지정하여 문서의 특정위치로 이동하게 함, <a name=“책갈피명”>으로 설정) Applets :문서에 포함된 배열들의 배열을 설정 Embeds :문서에 포함된 플러그인을 배열로 제공 layers :레이어의 배열 정보를 제공

16 Document 객체 – document 객체의 메소드
clear( ) :문서의 모든 내용을 지움 open( ) :문서의 내용을 보여줌 close( ) :open( )으로 보여준 문서를 닫음 write( ) :태그를 포함하는 문자열을 출력 writeln( ) : <pre> 태그와 함께 사용하면 행 마지막에서 자동 개행 자동 개행을 제외하면 write( )와 동일한 기능을 함 getSelection( ) :마우스로 선택한 문자열을 반환 (넷스케이프 네비게이터에서 동작) Section4/Chap18/1805/1805end.htm document 속성으로 배경색, 글자색 등을 지정하면 <body> 태그에서 지정한 문서 속서보다 우선으로 적용됨. 단 <font> 태그는 우선 적용.

17 link, anchor 객체 – link 객체와 anchor 객체
link 객체: 문서내의 URL 링크 정보 객체로서 문자/그림 등에 설정한 하이퍼링크 정보를 얻을 수 있음 <a href=“URL” > document.links.length : 링크 개수 document.링크이름.속성 document.links[인덱스 번호].속성 anchor 객체: 문서에 사용된 anchor 정보를 제공 <a name=“책갈피명”> document.anchors.length : 앵커 개수 document.anchors[책갈피명] 또는 document.all[책갈피명] Document.anchors[인덱스 번호]. 속성 Section4/Chap18/1800LinksAnchors/LinksAnchors.htm