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

Slides:



Advertisements
Similar presentations
일정 관리 다이어리 제작 JSP Programming with a Workbook. 학습 목표  사용자의 일정을 관리할 수 있는 다이어리에 대하여 알아보자. JSP Programming with a Workbook2.
Advertisements

406 문서에 표를 작성하고 크기를 조절할 수 있다. 표에 서식을 적용하여 다양하게 표현할 수 있다. 표를 편집하여 다양한 형태로 나타낼 수 있다. 학습목표 5 부. HTML 의 기본 4 장. 표를 이용한 문서작성 - 17 주 차시 : 1/3 ∼ 3/3 배당시간 : 18.
목차 Contents 무선인터넷용 비밀번호 설정방법 Windows 7 Windows 8 Windows XP MAC OS.
Chapter05 HTML 홈페이지 만들기
대림대학교 2017년도 1학기 강의 왕보현 순서도와 스크래치 5주차 대림대학교 2017년도 1학기 강의 왕보현
Local Connection과 InkPresenter 학기, 소프트웨어 설계 및 실험(Ⅰ)
Chapter09 CSS3 애니메이션 HTML5 Programming.
149개의 실습예제로 배우는 Flash 8.
컴퓨터프로그래밍 1주차실습자료 Visual Studio 2005 사용법 익히기.
Excel 일차 강사 : 박영민.
5.2 애니메이션 Page 283 ~ 295.
윤 홍 란 다이알로그(대화상자) 윤 홍 란
기본학습 3: 자바스크립트 변수, 연산자, 사용자 정의 함수, 제어문과 내장 함수
Lesson 5. 레퍼런스 데이터형.
forms 객체 입력상자 체크상자, 라디오 버튼 목록상자
Chapter05 오디오와 비디오 HTML5 Programming.
SEOUL NATIONAL UNIVERSITY OF SCIENCE & TECHNOLOGY
마우스(Mouse) 다루기 컴퓨터응용 및 실습 I.
3.2 SQL Server 설치 및 수행(계속) 시스템 데이터베이스 master
07장. <TABLE> 태그로 표 디자인하기
SqlParameter 클래스 선문 비트 18기 발표자 : 박성한.
iframe 사용하기 Chapter 3 Part 2
홈페이지용 그림 활용법 그림 삽입 태그 <IMG> 배경 그림 다루기 그림과 문자열의 어울림
학습목표 학습목차 다른 홈페이지의 HTML 파일 코드를 보는 방법에 대해 알아봅니다.
컴퓨터 프로그래밍 : 실습3 2장 데이터와 식.
공학컴퓨터프로그래밍 Python 염익준 교수.
스크래치 언어 이해 스크래치 이용법 습득 고양이가 말을 하며 움직이는 예제 작성
인터넷응용프로그래밍 JavaScript(Intro).
Chapter10 드래그 앤 드롭 & 텍스트 편집 HTML5 Programming.
반응형 웹 프로젝트
10장 tkinter로 GUI 만들기.
Web & Internet [03] HTML5 다양한 태그
HTML CSS 자바스크립트 무작정 따라하기
13장. 테두리, 폼 양식 관련 스타일과 레이어 테두리 관련 스타일 폼 양식 관련 스타일 레이어.
CHAP 5. 레이아웃.
제 6 장 엑셀을 이용한 여러 가지 문서 만들기.
Lesson 2. 기본 데이터형.
Chapter6 : JVM과 메모리 6.1 JVM의 구조와 메모리 모델 6.2 프로그램 실행과 메모리 6.3 객체생성과 메모리
연산자 (Operator).
SEOUL NATIONAL UNIVERSITY OF SCIENCE & TECHNOLOGY
그래픽 모듈 편집.
인터넷응용프로그래밍 JavaScript(Intro).
Microsoft Word 2002 제4장 그리기와 그림 삽입하기.
웹디자인
1차시: 낮과 밤이 생기는 원리 지구과학
스위시 맥스2 이미지 갤러리 만들기 아래 그림이 스위시 맥스2로 만들 이미지 갤러리 이다.
8장. spss statistics 20의 데이터 변환
14장. 필터 효과와 CSS 활용하기 포토샵을 대신하는 필터 효과 CSS 활용하기.
SEOUL NATIONAL UNIVERSITY OF SCIENCE & TECHNOLOGY
Chapter05 HTML 홈페이지 만들기 HTML & JavaScript.
CAD 실습 2013년 2학기.
단축키 기능 1. 단축키 기능 설명 Alt + R 조회 S 저장 I 삽입 A 추가 D 삭제 P 출력 Q 닫기
암호학 응용 Applied cryptography
안드로이드 앱 개발과정 Step1. 기초과정 강사 : 정 훈 희.
DA :: 퀵 정렬 Quick Sort 퀵 정렬은 비교방식의 정렬 중 가장 빠른 정렬방법이다.
Chapter08 JavaScript 시작하기
가장 많이 사용 Accelerator 최상위 WM_COMMAND, OLE 메시지 관련 이벤트 처리만 가능 이 클래스를 상속받아서 다른 이벤트 처리 이벤트 처리 관련 윈도우(창) 최상위 클래스 멀티 테스킹(모듈) CFrameWnd, Cview,
1. 정투상법 정투상법 정투상도 (1) 정투상의 원리
메뉴(Menu) 컴퓨터응용 및 실습 I.
웹과 모바일 홈페이지의 이해와 제작 폰트_레이아웃
웹과 모바일 홈페이지의 이해와 제작 HTML태그와 CSS로 꾸미기
16장. 변수, 연산자, 사용자 정의 함수 변수 배열과 객체 연산자 함수.
9 브라우저 객체 모델.
Learning HTML5 Canvas #2 Jeon Yong ju.
Power Point 예제 디자인 적용 (서식) - (디자인적용) - (원하는 디자인 선택)
그래픽 컨트롤 (Graphic Control)
7 생성자 함수.
6 객체.
BoardGame 보드게임 따라가기.
20 XMLHttpRequest.
Presentation transcript:

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

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

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

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 - 왼쪽 메뉴 선택

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

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

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 좌표 값

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

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인 로그 값(약 1.442 ) LOG10E 밑이 10인 로그 값(약 0.434)

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) :제곱근 값

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에서 실행)

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

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

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 // 값으로 이동