1 / 76

JavaScript( 웹브라우저 내장객체 )

JavaScript( 웹브라우저 내장객체 ). 문서객체모델 : DOM (Document Object Model). HTML 과 XML 문서를 위한 API (Application Programming Interface) . 문서에 접근하거나 조작하는 일련의 인터페이스와 논리적 구조를 정의 . Document 는 다수의 정보를 포함한다 . 곧 Document 는 정보 . Programming like Documentation!. 문서객체모델 : DOM. windows. Navigator. frame.

ace
Download Presentation

JavaScript( 웹브라우저 내장객체 )

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. JavaScript : Web Programming JavaScript(웹브라우저 내장객체)

  2. JavaScript : Web Programming 문서객체모델 : DOM (Document Object Model) • HTML과 XML 문서를 위한 API (Application Programming Interface). • 문서에 접근하거나 조작하는 일련의 인터페이스와 논리적 구조를 정의. • Document는 다수의 정보를 포함한다. 곧 Document는 정보. • Programming like Documentation!

  3. JavaScript : Web Programming 문서객체모델 : DOM windows Navigator frame self top parent history document location Toolbar,etc.. link anchor layer form applet image area text radio button fileUpload select textarea checkbox reset option submit password

  4. JavaScript : Web Programming 브라우저 객체 • 브라우저에 종속된 객체 • window : 자바스크립트 객체 계층의 최상위 레벨. • document : 현재 HTML문서에 반영되어 있는 속성들을 가짐. • location : 현재 문서의 위치와 관련된 속성들(예를들면, URL)이 있음. • navigator : 브라우저에대한 자세한 정보들이 있음. • history : 브라우저의 세션에서 사용자가 검색한 모든 URL항목들이 있음.

  5. JavaScript : Web Programming 자바 스크립트 내장 객체 • 문자열, 배열, 수학적 상수들과 같은 근본적 타입과 날짜 객체와 같은 내부적 포맷들 • Array • Date • Math • Object • String • 내장객체는 브라우저나 현재 읽혀진 HTML문서와는 아무 관련이 없다. • 즉, 스크립트의 향상된 작업을 지원한다.

  6. JavaScript : Web Programming HTML 대응(HTML-relected) 객체 • : 현재 문서를 작성하는 HTML 태그와 관련이 있는 객체 (하이퍼링크나 폼과 같은 아이템들을 가지고 있다.) • anchor(anchors array) • button • checkbox • elements array • form(forms array) • frames(frames array) • hidden

  7. JavaScript : Web Programming HTML 대응(HTML-relected) 객체 • images(images array) • link • password • radio • reset • select(options array) • submit • text • textarea

  8. JavaScript : Web Programming Windows Object • 웹브라우저에서 창이란 가장 중요한 인터페이스 요소이고,자바스크립트는 창을 제어할수 잇는 많은 툴을 제공한다. • 윈도 객체는 사용자가 브라우저에서 보고 있는 현재 문서가 서버로부터 가져온 문서를 의미한다.윈도 속성과 메소드 관련하여 객체 이름 생략가능. • Method - open,close,alert,confirm...

  9. JavaScript : Web Programming Windows Object menubar toolbar location scrollbar status

  10. JavaScript : Web Programming Windows Object windowVar=windows.open(“URL”, “windowName”, “windowFeatures”); windowVar:새롭게 생성되는 윈도우의 이름.윈도우 속성과 메소드 관련하여 사용되는 기능  windowName:HTML<a>태그 사용시 target을 주는 경우에 필요하다.  windowFeatures:다음과 같은 성격들을 각각 콤마로 나열한다. toolbar=yes|no, location= yes|no, directions= yes|no status= yes|no, menubar= yes|no, scrollbar= yes|no resizeable= yes|no, width=pixels, height=pixels

  11. JavaScript : Web Programming Windows Object • Method - open,close,alert,confirm • window.alert(“메시지”);-다이얼로그 박스에 메세지출력 • window.confirm(“메시지”);-확인,취소여부를 묻는 다이얼로그박스 • window.prompt(“메시지”);-사용자의 피드백을 포함 • window.close( )-윈도우를 닫는 메소드,현재의 윈도우나 다른 윈도우 • Properties • window.status -브라우저의 윈도 하단 status bar 에 문자열을 보여줄수 있다. Ex> <a href=http://www.naver.com/ onMouseOver=“window.status=‘네이버로 갑니다’;return true”>NAVER</a> • window.defaltStatus

  12. JavaScript : Web Programming Windows Object-Opening a new window function newWindow() { catWindow = window.open('pixel2.jpg', 'catWin', 'width=330,height=250') } <BODY BGCOLOR=WHITE> <H1>The Master of the House</H1> <H3>Click on His name to behold He Who Must Be Adored <P><A HREF="javascript:newWindow()">Pixel</A> </H3> </BODY> 변수 catWindow는 열린 창이라는 객체를 가지게 되는데,이 창은 pixel2.jpg라는 이미지 파일을 담고 있다.이 새창의 이름은 catWin이다.이름은 꼭 필요한데,이 창을 나중에 링크나 다른 스크립트에서 다룰수도 있기 때문이다. 너비와 높이 매개변수 사이에는 절대 스페이스를 둘수 없다.만일 스페이스를 두면,어떤 브라우저에서는 그 스크립트가 실행되지 않을것이다. 링크태그에서,링크를 클릭하면 자바스크립트가 함수 newWindow를 실행하도록 하는 것이다.

  13. JavaScript : Web Programming Windows Object-Loading different contents into a window

  14. JavaScript : Web Programming Windows Object-Loading different contents into a window function newWindow(bookgif) { bookWindow = window.open(bookgif, 'bookWin', width=140,height=200') bookWindow.focus() } 해야할 첫번째 일은 newWindow라고 불리는 새로운 함수를 정의 하는 것이다.하지만 이 스크립트에서의 다른 점은 함수의 매개변수 즉 변수 bookgif를 선언하는 것이다. 변수 bookWindow로 창의 매개변수들이 따르는 창이라는 객체를 열게 된다.창의 내용은 bookgif에 있다.새창의 이름은 bookWin이고,너비와 높이 매개변수에 의해서 창의 크기사 정해진다. Focus()라는 메소드를 사용하여 지금 막 연 창이 맨앞으로 오도록 한다.창이 보일 필요가 있을때는 언제나 focus()를 사용할수 있다.여러 개의 창이 열려 있을때,focus()를 사용하면 그 창을 맨 위로 불러올 것이다.

  15. JavaScript : Web Programming Windows Object-Loading different contents into a window <BODY BGCOLOR=WHITE> <H1>My Favourite books</H1> <H3>Click on the name to see a picture of the cover<P> <A HREF="javascript:newWindow('haruki.gif')">Murakami Haruki: Short story</A> <P> <A HREF="javascript:newWindow('bird.jpg')">Eun Hee Kyoung: The present of Bird</A><P> <A HREF="javascript:newWindow('beep.jpg')">Kim Young Ha: Beep</A></H3> </BODY>

  16. JavaScript : Web Programming Opening a new window using an image link

  17. JavaScript : Web Programming Opening a new window using an image link function newWindow(bookgif) { bookWindow = window.open(bookgif, 'bookWin', 'width=400,height=500') bookWindow.focus() } 우선 newWindow라는 새 함수를 정의 하는데,변수 bookif가 이 함수에 전달된다.변수 bookWindow는 그 매개변수들과 함께 열린 창이라는 객체를 얻게 된다. bookWindow가 focus() 메소드에 의해서 제일 앞으로 불려 나온다.

  18. JavaScript : Web Programming Opening a new window using an image link <BODY BGCOLOR=WHITE> <H1>My Favourite Books</H1> <H3>Click on a book to see the full-size cover</H3> <TABLE CELLPADDING=10> <TR> <TD> <A HREF="javascript:newWindow('haruki-big.gif')"><IMG SRC="haruki-sm.gif" WIDTH=108 HEIGHT=140 VSPACE=10></A><BR> Murakami Haruki:<BR> Short story </TD> 이 코드는 먼저 newWindow 라는 함수를 호출하고,이 링크에서는 haruki-big.gif 라는 GIF의 큰 그림이 되는 이미지 값을 그 함수에 전달한다.

  19. JavaScript : Web Programming Windows Object

  20. JavaScript : Web Programming Document Object • 현재 문서에 대한 정보를 포함하고 있으며 사용자들에게 HTML 결과물에 대한 메소드 제공 • Method • document.write() ,document.writeln() • documet.clear(),document.open(),document.close() • Properties • document.title -웹페이지에 타이틀을 보여줄때 • document.lastModified-문서가 마지막으로 변경된 날짜 제공 • document.bgColor-문서의 배경색 • document.fgColor-문서의 전경색 • document.linkColor-하이퍼링크 색상 지정

  21. JavaScript : Web Programming Document Object

  22. JavaScript : Web Programming Form Object • 문서내의 <form>태그를 이용하여 form object 를 만든다. <form name=“myform”> <input type=“text” name=“quantity” onChange=“ 명령이나 함수 호출”> …. </form> Notation: document.myform.xxx document.myform.yyy() document.forms[“myform”}.xxx document.form[“myform”].yyy() ( xxx는 properties,yyy는 method) document.myform.quantity Document.myform.quanty.value

  23. onClick=“SearchFunction() document.myform.searchbutton.value=“search” JavaScript : Web Programming Form Object - button • HTML문서에서는 submit와 reset버튼만이 사용되었다.CGI에서 입력받은 내용을 전송하기 위한 용도다.하지만 자바 스크립트의 이벤트와 연결하기 위해서 다른 용도의 버튼도 필요하게 된다. • Method-click() • Event Handler -onclick <input name=“searchbutton” type=“button” value=“search’ onClick=“SearchFunction()”>

  24. JavaScript : Web Programming Form Object-checkbox input name=“mychechbox” type=“checkbox” value=“checkboxValue”[checked]>보여주고 싶은 문자열 • Properties • checked-checkbox 구성요소의 현재상태 • defaultChecked- checkbox 구성요소의 최초상태 • name-input 태그에서 설정된 checkbox 구성요소의 이름 • value-input 태그에서 설정된 checkbox 구성요소의 초기값 • Method • click() • Event Handler • onclick

  25. JavaScript : Web Programming Form Object-radio button • 각각의 라디오 버튼에 접근하기 위해서는 0부터 시작하는 인덱스를 가지고 있는 객체 이름을 따른다.각각의 버튼들은 다음과 같은 형태의 배열을 사용하여 접근 할수 있다. document.form.radioName[0] 가 첫번째 document.form.radioName[1] 가 두번째 • Properties • checked-radio button 구성요소의 현재 상태 • index-그룹내에서 현재 선택되어 있는 radio button의 index 번호 • length-그룹내의 radio button의 갯수 • name-input 태그에서 설정된 radio button 구성 요소의 이름 • value- input 태그에서 설정된 radio button 구성 요소의 초기값 • Method-click() • Event Handler-onClick

  26. JavaScript : Web Programming Form Object-radio button <form name=“myform”> <input name=“job” type=“radio” value=“st”>student <input name=“job” type=“radio” value=“pro”>professor <input name=“job” type=“radio” value=“law”>lawyer Notation: document.myform.job[i].xxx document.myform.job[i].yyy() i=0,1,2,3,…여기서 0은 그룹의 첫번째 버튼

  27. JavaScript : Web Programming Form Object-select • 선택목록을 만든다. • (multiple 옵션을 이용하면 scrolling list 아니면 selection list) • 라디오버튼과 마찬가지로 하나의 배열로 유지되며 배열은 option 이라는 선택 목록 객체의 속성이다.(사용가능한 메소드 없음)

  28. JavaScript : Web Programming Form Object-select <form name=“myform”> <select name =“myselect”[size=숫자] [mutiple] <option value=“option value1”[selected]>선택사항1 <option value=“option value2”[selected]>선택사항2 : </select> • Notation document.myform.myselect.xxx document.myform.myselect.yyy() document.myform.myselect.option[i].selected

  29. JavaScript : Web Programming Form Object-select • Properties • option - 선택목록들이 하나의 배열로 유지되는데 option을 이용 • selectedIndex - 현재 선택된 항목의 인덱스 번호를 그 값으로 가진다. • Selected - 현재 선택된 항목의 상태를 그 값으로 가진다. • defaultSelected - option태그에서 선언된 최초 선택되는 항목의 인덱스 번호를 그 값으로 가진다. • Index - 현재 option 속성은 현재 option 배열의 항목의 최고 인덱스 값을 그 값으로 가진다. • text - 특정 선택 항목을 위해 메뉴에 나타나는 문자열을 그 값으로 한다. • value - option 태그에서 선언된 특정 값을 그 값으로 가진다. • Event Handler-onBlur,onFocus,onChange

  30. JavaScript : Web Programming Location Object • location 객체는 현재 문서의 위치를 확인하여 전체 URL로 구성 • Properties • protocol://hostname:port/pathname • protocol:현재 사용되고 잇는 transport protocol을 정의 • hostname:현재 접속하고 있는 컴퓨터의 이름 • port:컴퓨터에 접속된 주소 • pathname:경로와 파일 이름 • host:hostname과 port의 조합 • href:전체 URL이다. • Method-reload() • location.reload()

  31. JavaScript : Web Programming Location Object • 현재 URL에 관련된 정보를 얻으려면 document.write(“Protocol-”+location.protocol+<“br>”); document.write(“Hostname-”+location.hostname+<“br>”); • 현재 HTML 문서를 reload 하려면 location.reload() • 다른 HTML 문서를 열려면 window.location.href=http://www.naver.com • 다른 프레임에 다른 HTML문서를 열려면 parent.frames[“frame_name”].location.href=http://www.naver.com

  32. JavaScript : Web Programming History Object • history 객체는 브라우저에 의해서 정리되는 방문했던 URL들의 리스트와 브라우저 Go 메뉴와의 인터페이스이다. • history 객체는 history list들을 왔다갔다 할수 있는 go(),back(),forward()메소드들을 갖는다. • Properties • length-전체 history list의 숫자를 반환하는 속성이다 • Method • go()-history list에서 특정 URL로 이동하는 메소드 • history.go(target) target(0이면 현재 페이지) • history.go(-2) list에서 두개 이전으로 이동 • back()-한번에 하나의 URL list 만큼 뒤로 이동한다. • forward()- 한번에 하나의 URL list 만큼 앞으로 이동한다

  33. JavaScript : Web Programming Navigator Object • 네비게이터 객체는 웹브라우저에 대한 정보를 제공한다. • Properties • appName-사용자 브라우저의 이름을 반환 • appVersion-브라우저와 OS의 버전값을 반환 document.write(“This browser is”,navigator.appName); document.write(“Version of browser is”,navigator.appVersion); • Method • javaEnabled() • 브라우저가 자바가 가능한지 알아본다. if(!navigator.javaEnable()){ alert(“자바스크립이 지원되는 브라우저가 필요합니다”); }

  34. JavaScript : Web Programming Frames Object • 프레임은 HTML의 가장 강력한 특징 중 하나이다. • 자바스크립트의 힘을 이용하면 프레임을 훨씬 더 강력하게 만들 수 있다. • 프레임은 적어도 세 페이지의 HTML로 구성된다. • 첫째는 프레임셋이라고 불리는 것으로 ,각각의 자식 프레임의 디멘션을 설정한다. • 프레임셋은 자바스크립트에서 top 혹은 parent 로 참조된다. • 페이지의 나머지들은 프레임 셋이 만들어 낸 틀 내로 들어가는 자식 페이지들이다.

  35. Frameset (top 또는 parent라고 불린다) Left Frame Content Frame JavaScript : Web Programming Frames Object

  36. JavaScript : Web Programming Frames Object-Loading a frame

  37. JavaScript : Web Programming Frames Object-Loading a frame <HTML> <HEAD> <TITLE>Setting one frame from another</TITLE> </HEAD> <FRAMESET COLS="30%,70%"> <FRAME SRC="left4.html" NAME="left" SCROLLING=AUTO> <FRAME SRC="frame4a.html" NAME="content" SCROLLING=AUTO> </FRAMESET> </HTML> Name 속성을 이용하여 두개의 자식 프레임에 이름을 부여한다.

  38. JavaScript : Web Programming Frames Object-Loading a frame pageArray = new Array ("","frame4a.html","frame4b.html","frame4c.html") function setContent(thisPage) { parent.content.document.location.href = pageArray[thisPage] } pageArray라는 이름의 배열을 생성하는데,이것은 네비게이션 바 안에 있는 사용 가능한 URL들이다. content 프레임에 디스플레이 할수 잇는 페이지가 세개 있으므로,URL이 세개 필요하다.배열상의 첫번째 위치는 위치 0이 되는데, 이것을 비워놓음으로써 페이지 1,2,3과 맞게 할수 있도록 위치 1,2,3을 가질수 있다. setContent 라는 새로운 함수를 만드는데,페이지 번호가 주어지면,요청된 페이지를 Content 프레임안에 로드한다.현재 도큐먼트의 부모를 찾고, 그후에 그 프레임 도큐먼트를 위한 location.href,즉 URL소스를 설정함으로써 프레임안에 새로운 페이지를 로드하면 된다.

  39. JavaScript : Web Programming Frames Object-Loading a frame <BODY BGCOLOR=WHITE> <H1>Navigation Bar</H1> <H2><A HREF="javascript:setContent(1)">Page 1</A><BR> <A HREF="javascript:setContent(2)">Page 2</A><BR> <A HREF="javascript:setContent(3)">Page 3</A></H2> </BODY> 메인 창에 로드 하고자 하는 페이지들의 링크를 페이지 본문에 단다.링크가 클릭되면,자바스크립트 함수인 setContent가 호출되고 로드하고자 하는 페이지 번호가 전달된다.Content 프레임안에 보여주고자 하는 각각의 페이지마다,새로운 페이지 번호로 이 라인을 반복한다.

  40. JavaScript : Web Programming Frames Object- Creating and loading a dynamic frame writeContent()라는 이름의 새로운 함수를 만드는데,이 함수에 페이지 번호가 주어지면 역동적 페이지를 만들고,Content프레임에 그 페이지를 로드한다. function writeContent(thisPage) { parent.content.document.write("<HTML><HEAD><\/HEAD><BODY BGCOLOR=WHITE><H1>") parent.content.document.write("You are now looking at page "+thisPage+".")parent.content.document.write("<\/H1><\/BODY><\/HTML>") parent.content.document.close() } 현재 도큐먼트의 부모를 찾고,그 부모 도큐먼트의 Content프레임을 찾고,그 후에 Content 도큐먼트에 새 페이지를 작성하면 된다. 질문>왜 슬래시(“/”)앞에 백슬래시(“\”)가 있는가? 작성한 모든것이 확실히 디스플레이 되도록 document.close()로 끝마쳐야 한다

  41. JavaScript : Web Programming Frames Object- Creating and loading a dynamic frame <BODY BGCOLOR=WHITE> <H1>Navigation Bar</H1> <H2><A HREF="javascript:writeContent(1)">Page 1</A><BR> <A HREF="javascript:writeContent(2)">Page 2</A><BR> <A HREF="javascript:writeContent(3)">Page 3</A></H2> </BODY> </HTML> 메인 창에 로드 하고자 하는 페이지들의 링크를 페이지 본문에 단다.링크가 클릭되면,자바스크립트 함수인 writeContent가 호출되고 로드하고자 하는 페이지 번호가 전달된다.Content 프레임안에 보여주고자 하는 각각의 페이지마다,새로운 페이지 번호로 이 라인을 반복한다. 정답>왜 슬래시(“/”)앞에 백슬래시(“\”)가 있는가? HTML표준에 따르면,브라우저는 document.write()내의 끝태그앞부분(“</”)을 그 라인의 끝이라고 해석할 가능성이 잇다.백슬래시는 오류 발생없이 HTML을 작성할수 있도록 하면서,슬래시에 대한 오해의 여지를 ‘제거’한다.

  42. JavaScript : Web Programming Layer Object • layer 객체는 자바스크립트를 이용해서 레이어와 비슷하게 만들기 위해서 만들어진 객체이다. • Properties • name-레이어의 이름 • left-레이어의 좌측위치 • top-레이어의 상단위치 • pageX-레이어의 좌측위치를 페이지의 x축을 기준으로 나타낸다. • pageY- 레이어의 좌측위치를 페이지의 y축을 기준으로 나타낸다. • width-레이어의 폭 • height-레이어의 높이 • background-레이어의 배경이미지 • bgColor-레이어의 배경색

  43. JavaScript : Web Programming Layer Object • Method • moveAbove()-매개변수가 가리키는 레이어 위로 이동 • moveBelow()- 매개변수가 가리키는 레이어 아래로 이동 • moveBy()-레이어 위치의 기준이 되는 지점을 이용해서 상대적으로 이동할때 사용 • moveTo()-레이어 위치의 지정되어 있는 위치를 이용해서 이동할때 사용 • moveToAbsolute()-레이어의 위치를 절대적으로 이동 • resizeBy()-레이어의 크기를 상대적으로 변경할때 사용 • resizeTo()- 레이어의 크기를 절대적으로 변경할때 사용

  44. JavaScript : Web Programming Image Object • document object의 하위 객체 • 이미지에 관한 속성을 제어 • image객체는 웹 검색기의 이미지 정보를 배열로 저장한다. • document.images[i](I=0,1,2,3…) • Properties • name-이미지 객체의 이름 • src-이미지의 URL • lowsrc-이미지의 URL주소로 해상도가 낮은 이미지 전송에 사용 • height-이미지의 높이 • width-이미지의 너비 • border-이미지 테두리

  45. JavaScript : Web Programming Image Object-Creating rollovers • 롤오버는 원래의 이미지가 유저에 의해 로드되어 웹페이지상에 나타날때 유저가 마우스를 첫번째 이미지위로 올리면브라우저는 빠르게 첫번째 이미지를 두번째 이미지로 대체 • <A HREF=”menu1.html" onMouseover="document.button.src='images/button2.gif'" onMouseout="document.button.src='images/button1.gif'"> <IMG SRC="images/button1.gif" WIDTH=147 HEIGHT=82 BORDER=0 NAME=”button"></A> • 단점-구버전에서 에러메세지 발생,이미지교체 느리다. 유저가 이미지위로 마우스를 움직일때 대체이미지가 화면에 나타난다. NAME 속성을 이용하여 이미지 객체 이름을 키워드로 만든다.

  46. JavaScript : Web Programming Image Object - Creating more effective rollovers • 모든 이미지를 브라우저의 캐쉬에 미리 로드해 놓고 그 이미지들이 스크립트의 변수가 되어 교체하게 하면 움직임이 부드러워진다. • if (document.images) { button1 = new Image button2 = new Image button1.src = "images/button1.gif" button2.src = "images/button2.gif" } -->이 코드는 브라우저가 이미지객체를 인식하고 있는지 체크 ’브라우저가 이미지객체를 인식하는가?’ -->인식한다면 두개의 이미지 객체를 각각 배정 -->.src속성을 이용하여 두개의 버튼 이미지를 두 객체에 설정한다.

  47. JavaScript : Web Programming Image Object - Creating more effective rollovers • else { button1 = "" button2 = "" document.button = "" } • <A HREF="next.html” onMouseover= onMouseout= <IMG SRC="images/button1.gif" WIDTH=147 HEIGHT=82 BORDER=0 NAME=”button"></A> -->브라우저가 이미지 객체를 인식하지 못할 경우 즉,구버전의 브라우저에게 할일을 정해주는 코드.에러메세지가 뜨지 않도록 "document.button.src=button1.src" "document.button.src=button2.src”>

  48. JavaScript : Web Programming Image Object-Triggering rollovers from a link • Trigger n.방아쇠 v.촉발시키다 • 이 기술은 유저가 링크를 클릭하기전 마우스를 링크에 가져가기만 하면 미리 보기 할 수 있다. • <A HREF="next.html" onMouseover="document.arrow.src=arrowRed.src" onMouseout="document.arrow.src=arrowBlue.src"><H1>Next page</H1></A><BR> • <IMG SRC="images/blueArrow.gif" WIDTH=147 HEIGHT=82 NAME="arrow">

  49. JavaScript : Web Programming Image Object - Multiple images changing a single rollover • 여러 개의 다른 이미지들이 하나의 롤오버를 트리거하게할수 있다. • 주석을 달고 싶은 이미지가 여러개인 경우 각각의 이미지를 롤오버하면 그 이미지에 대한 설명이 나타나도록 트리거한다.

  50. JavaScript : Web Programming Image Object - Multiple images changing a single rollover textField bgText tankText flyText heliText

More Related