21장. frame, image, event, math, layer 객체

Presentation on theme: "21장. frame, image, event, math, layer 객체"— Presentation transcript:

1 21장. frame, image, event, math, layer 객체

2 Frame – frame 객체의 기본 사용법 Frame은 한 개의 창을 여러 화면으로 나누어 문서 여러 개를 한 눈에 볼 수 있게 함 (chap 8) 두 개 이상의 프레임에 서로 다른 문서를 불러옴 e.g., 상단/좌측/우측 프레임 Frame 객체는 프레임 정보를 제공하고 프레임으로 구성된 문서를 제어하고 관리함 p.442 [그림 21-1]: 순서 - 위에서 아래로/좌측에서 우측으로 e.g., frames[0],, ~ frames[4] 방법 #1: window.frames[인덱스].속성 frames[인덱스].메소드 방법 #2: window.프레임명.속성 프레임명.메소드

3 Frame – frame 객체의 기본 사용법 화면을 수직으로 분할하는 경우: (p.191 표 8-2)
(순서 - 좌측에서 우측으로) parent | 왼쪽창 | 오른쪽 창 | | frames[0] | frames[1] | <frameset cols=“왼쪽 창의 크기, 오른쪽 창 크기”> //pixel, % <frame src=“왼쪽 창 문서 경로”> <frame src=“오른쪽 창 문서 경로”> </frameset>

4 Frame 객체 – frame 객체의 속성 속성 설명 length 프레임 개수를 알려줌 name 해당 프레임의 이름을 알려줌
parent 해당 프레임을 포함하고 있는 상위 프레임을 가리킴 self 해당 프레임 자신을 의미 window self와 같이 자신의 창을 의미 e.g., window.parent.frames[1].document.bgColor=“yellow” 두번째 프레임의 배경색 변경: 상위 parent frame을 거쳐서 인식 Section4/Chap21/2101end/f1frame.htm /f1menu.htm - 왼쪽 메뉴 선택

5 Image 객체 – image 객체의 기본 사용법
문서에 삽입된 그림 정보를 알려주는 객체 <img> 태그로 삽입한 그림의 경우 <img> 태그의 속성을 img 객체에서 제어함 방법 #1: window.document.images[배열 번호].속성 방법 #2: 그림이름.속성

6 Image 객체 – image 객체의 기본 속성
name:그림에 설정된 name 속성 값을 알려줌 length:문서에 삽입된 그림의 개수를 알려줌 src :그림의 src 속성에 설정된 경로를 알려줌 lowsrc:그림의 lowsrc 속성에 설정된 저해상도 그림의 경로를 알려줌 hspace:그림의 hspace 속성에 설정된 좌우 여백 값을 알려줌 vspace:그림의 vspace 속성에 설정된 상하 여백 값을 알려줌 width:그림의 width 속성에 설정된 너비 값을 알려줌 height:그림의 height 속성에 설정된 길이 값을 알려줌 border:그림의 border 속성에 설정된 테두리 두께를 알려줌 complete:그림 전송이 완료되면 true, 그렇지 않으면 false 값을 반환 Section4/Chap21/2102/2102end.htm

7 event 객체 – event 객체의 속성(1)
마우스를 제어하거나 키보드를 누르는 등의 이벤트를 관리하는 객체 window의 하위 객체 altKey :alt 키를 누르면 true값 발생 altleft:왼쪽 alt 키를 누른 경우 이벤트 발생 button:마우스 버튼을 누른 경우 이벤트 발생 (선택한 마우스 버튼의 종류에 따라 다른 값 전달 (왼쪽=1, 오른쪽=2, 왼쪽+오른쪽=3, 가운데=4, 왼쪽+가운데=5, 가운데+오른쪽=6, 모두 누른 경우=7) ) clientX:윈도우 영역에서 마우스의 x 좌표 값 clientY :윈도우 영역에서 마우스의 y 좌표 값 ctrlKey :ctrl 키를 누르면 true값 발생 ctrlLeft:왼쪽 ctrl 키를 누른 경우 이벤트 발생 fromElement:onmouseover나 onmouseout 이벤트를 사용하는 경우의 마우스 객체를 가리킴 key :Code 키를 눌렀을 경우의 키의 유니코드 값을 설정 keyCode:키보드의 키 값을 전달받음 offSetX :이벤트가 발생한 객체에서 마우스의 x 좌표 값 offSetY :이벤트가 발생한 객체에서 마우스의 y 좌표 값

8 Event 객체 – event 객체의 속성(2)
propertyName:이벤트를 발생한 객체에서 변경된 속성 이름을 설정 repeaton:keydown 이벤트의 반복 횟수 설정 reason :데이터의 전송 상태 returnValue :이벤트에서 발생한 값을 true 또는false로 설정 screenX :전체 화면에서 마우스의 x 좌표 값 설정 screenY :전체 화면에서 마우스의 y 좌표 값 설정 shiftKey :shift 키를 누르면 true 값을 발생 shiftLeft:왼쪽 shift 키를 누른 경우 이벤트 발생 srcElement:이벤트를 발생한 객체를 가리킴 srcFilter:onfilterchange 이벤트를 발생시킨 filter객체를 설정 toElement:마우스 포인터가 위치해 있는 객체를 설정 type :이벤트객체의 이벤트 종류를 설정 X :선택한 객체의 상대적인 x좌표 값을 설정 Y :선택한 객체의 상대적인 y좌표 값을 설정 Section4/Chap21/2103/2103end.htm

9 math객체 – math 객체의 속성 - 복잡한 수학 계산을 처리하여 주는 객체
- Math 객체는 new로 선언하지 않고 직접 브라우저에서 수행 - 속성은 상수값으로 그 값이 정해져 있으므로 변경할 수 없음 속성명 설명 E 오일러 상수(약2.718) PI 원주율 값(약3.1415) LN2 2의 자연로그 값(약0.693) LN10 10의 자연로그 값(약2.302) SQRT2 2의 제곱근 값(약1.414) SQRT1_2 1/2 제곱근 값(약0.707) LOG2E 밑이 2인 로그 값(약 ) LOG10E 밑이 10인 로그 값(약 0.434)

10 math객체 – math 객체의 메소드(1) sin(x) :사인 값 cos(x) :코사인 값 tan(x) :탄젠트 값
acos(x) :역코사인(아크코사인) 값 asin(x) :역사인(아크사인) 값 atan(x) :역탄젠트(아크탄젠트) 값 atan2(x,y) :역탄젠트 exp(x) :X의 지수함수 log(x) :X의 로그함수 pow(x,y) :지수함수 f(x,y)=xy sqrt(x) :제곱근 값

11 math 객체 – math 객체의 메소드(2) round(x) :x 반올림 abs(x) :절대 값
ceil(x) :x보다 같거나 큰 수 중에서 가장 적은 정수 floor(x) :x보다 같거나 작은 수 중에서 가장 큰 정수 random() :0~1 사이의 난수 발생 min(x,y) :x, y 중 큰 수 max(x,y) :x, y 중 작은 수 Section4/Chap21/2104/2104end.htm Section4/Chap21/2100math/math.htm 0MyJavaScript\Chap21\Mathtest.html (Chrome에서 실행)

12 layer 객체 – 레이어 다루기 Chap13: layer 기본 사용법
문서에 떠 있는 투명창: 그림/문단/표 등은 문서 안에 붙어 있어 움직일 수 없지만 레이어 안에 포함시키면 떠 있으므로 움직일 수 있음 레이어를 사용하면 문자/그림/표를 원하는 위치에 겹쳐 놓거나 배치시킬 수 있으며 레이어에 자바스크립트를 사용하여 애니메이션을 구현할 수 있음. e.g., 떨어지는 꽃잎, 날아오는 그림 등 화면에서 움직이는 물체들은 대 부분 레이어로 표현이 가능 <div>태그: IE, <layer>태그: 네비게이터 <div id=“id명” style=“position:absolute”>레이어안에 들어갈 문자/그림/표 </div> position:absolute – 절대좌표값 p.303, p.305 (<p>,<span>태그 등에 레이어 속성을 지정해도 상관없지만 대부분 <div> 태그 사용함.)

13 layer 객체 – 레이어 다루기 레이어의 스타일 속성 사용법 <div style=“스타일속성”>
p.302 [표 13-2] 400*600 크기의 레이어를 화면의 100,0 위치에 배치 <div id=“layer1” style=“width:400px; height:600px; position:absolute; left:100px; top:0px;”> <img src=“city.jpg” width=“400” height=“600”> </div> Section3/Chap13/1304/layer.htm Section3/Chap13/1304/1304end.htm

14 layer 객체 – 레이어 다루기 레이어를 자바스크립트에서 사용할 때에는 스타일 속성 이용
레이어를 자바스크립트에서 사용할 때에는 스타일 속성 이용 document.all[id명].style.스타일속성 e.g., 레이어 보이거나 감추게 하기 document.all[id명].style.visibility=visible/hidden Section4/Chap21/2105/2105end.htm // not JavaScript 레이어 이동하기: 주로 애니메이션 효과를 줄 때 사용 레이어의 좌표값을 변경하여 레이어가 담고 있는 문자/그림 등을 움직이게 할 수 있음 document.all[id명].style.left=값 document.all[id명].style.top=값 e.g., document.all[id명].style.left=event.clientX // 마우스 좌표 document.all[id명].style.top=event.clientY // 값으로 이동