1 / 104

자바 스크립트 브라우저객체와 이벤트처리

자바 스크립트 브라우저객체와 이벤트처리. 류승택 2004. 6. 지난 주 정리. 실전예제. 객체. 내장객체. 브라우저 내장객체. Form 관련객체. 배열객체 String 객체 Date 객체 Math 객체 Function 객체 Number 객체 screen 객체. window 객체 document 객체 links 객체 images 객체 location 객체 history 객체 frame 객체. 객체의 개념 객체의 사용. Form 객체 이벤트 핸들러 text 객체

cyrah
Download Presentation

자바 스크립트 브라우저객체와 이벤트처리

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. 자바 스크립트 브라우저객체와 이벤트처리 류승택 2004. 6

  2. 지난 주 정리 실전예제 객체 내장객체 브라우저 내장객체 Form 관련객체 배열객체 String객체 Date객체 Math객체 Function객체 Number객체 screen객체 window객체 document객체 links객체 images객체 location객체 history객체 frame객체 객체의 개념 객체의 사용 Form객체 이벤트 핸들러 text객체 button객체 reset객체 password객체 radio객체 checkbox객체 select객체 textarea객체 submit객체 hidden객체

  3. 오늘 배울 내용 • 이벤트 핸들러 • 브라우저객체의 계층구조 • window객체 • document객체 • anchor객체 • links객체 • images객체 • location객체 • history객체 • frame객체

  4. 이벤트 핸들러 [1] • 이벤트(Event) • 사용자가 발생시키는 사건 • 키 입력, 마우스 클릭 등 • HTML문서의 동작에 의해 발생하는 사건 • Html문서 실행/종료 등 • 이벤트 핸들러(Event Handler) • 이벤트 발생시 이를 처리하기 위해 동작하는 프로그램

  5. 이벤트 핸들러 [2]

  6. 이벤트 핸들러 [3]

  7. 이벤트 핸들러 [4] • 이벤트핸들러의 동작 지정 • <TAG 이벤트핸들러=‘자바스크립트 명령이나 함수’> • <INPUT type=‘button’ value=‘더하기’ onClick=‘add()’> • <BODY onLoad=“window.defaultStatus=‘상태선의 초기메시지’;”>

  8. 브라우저 객체의 계층구조 Textarea Window Text Layer Frame Link FileUpload document Password Image Location Hidden Area Submit History Anchor Reset Applet Radio Plugin Checkbox Form Button Select Option

  9. window 객체 [1] • 웹 브라우저를 나타내는 최상위 객체

  10. window 객체 [2]

  11. window 객체 [3]

  12. window 객체 [4] • onLoad/onUnload 사용 예제 <HTML> <HEAD> <TITLE> 예제 10-1 </TITLE> </HEAD> <BODY onLoad="alert('홈페이지 방문을 환영합니다.')" onUnload="alert('안녕히가세요')” > onLoad시험 예제입니다. </BODY> </HTML>

  13. 실습 [10-1] • window객체의 onFocus와 onBlur 이벤트핸들러 발생시 메시지를 출력하는 프로그램을 작성하라.

  14. window 객체 [5] • defaultStatus/status 사용예제 <HTML> <HEAD> <TITLE> 예제 10-2 </TITLE> </HEAD> <BODY onLoad="window.defaultStatus='초기메시지입니다'"> <a href='http://kr.yahoo.com' onMouseOver="window.status='야후로 이동합니다.';return true;"> 야후</a> <br> <a href='http://www.naver.com' onMouseOver="window.status='네이버로 이동합니다.';return true;"> 네이버</a> </BODY> </HTML>

  15. window 객체 [6] • open() 메소드 사용방법 open(“URL”, “윈도우이름”, [“브라우저 구성요소”])

  16. window 객체 [7] <HTML> <HEAD> <TITLE> 예제 10-3 </TITLE> <script language='javascript'> function makeWin() { window.open(“http://www.chungkang.ac.kr", "subwin") } </script> </HEAD> <BODY> <form> <input type='button' value='subwin 생성' onClick='makeWin()'> </form> </BODY> </HTML>

  17. window 객체 [8] <HTML> <HEAD> <TITLE> 예제 10-4 </TITLE> <script language='javascript'> function makeWin() { window.open("http://www.chungkang.ac.kr", "subwin", "toolbar=no, menubar=no") } </script> </HEAD> <BODY> <form> <input type='button' value='subwin 생성2' onClick='makeWin()'> </form> </BODY> </HTML>

  18. 실습 [10-2] • 브라우저의 크기를 300*400 으로 지정하고 크기 조절이 안되도록 윈도를 생성하는 프로그램을 작성하라. • toolbar,menubar도 나오지 않는다.

  19. window 객체 [9] • close() 메소드 • open() 메소드의 리턴값을 사용하여 윈도우 제거 a = open(“URL”, “윈도우이름”, [“브라우저 구성요소”]) a.close()

  20. window 객체 [10] <HTML> <HEAD> <TITLE> 예제 10-4 </TITLE> <script language='javascript'> function makeWin() { a = window.open("http://www.chungkang.ac.kr", "subwin") } function closeWin() { a.close() } </script> </HEAD> <BODY> <form> <input type='button' value='subwin 생성' onClick='makeWin()'> <input type='button' value='subwin 닫기' onClick='closeWin()'> </form> </BODY> </HTML>

  21. document 객체[1] • window 객체의 자식 • 문서의 타이틀, 배경색, 폼, 링크, 애플릿 등과 같은 문서의 내용물들을 직접적으로 처리

  22. document 객체[2] <HTML> <HEAD> <TITLE> 예제 10-4 </TITLE> <script language='javascript'> function printDocu() { msg = "Title : " + document.title + "\n"; msg = msg + "URL : " + document.location; alert(msg); } </script> </HEAD> <BODY> <form> <input type='button' value='document 정보' onClick='printDocu()'> </form> </BODY> </HTML>

  23. 실습 [10-3] • document의 나머지 정보도 출력하도록 앞의 예제를 수정하여 작성하라. • 버튼을 선택하면 document의 배경색이 바뀌도록 프로그램을 작성하여라. • red, green, blue, yellow…

  24. document 객체[3] • document 객체의 자식 객체들

  25. anchors 객체[1] • <A> 태그의 name 속성 • String 객체의 anchor()메소드

  26. anchors 객체[2] <BODY> <li><a href='#yahoo'>야후 사이트</a><br> <li><a href='#naver'>네이버사이트</a> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <a name='yahoo'> 야후사이트<br> <br><br><br><br><br><br><br><br><br><br> <br><br><br><br><br><br><br><br><br><br> <a name='naver'> 네이버사이트<br> <script language='javascript'> msg = '책갈피 수 : ' + document.anchors.length + '\n'; for(a=0; a<document.anchors.length; a++) msg = msg + '책갈피 이름 : ' + document.anchors[a].name + '\n'; alert(msg); </script> </BODY>

  27. links 객체[1] • <A> 태그의 href 속성 • String 객체의 link()메소드

  28. links 객체[2] <BODY> <li><a href='http://kr.yahoo.com'>야후 사이트</a><br> <li><a href='http://www.naver.com'>네이버사이트</a> <script language='javascript'> msg = 'URL 수 : ' + document.links.length + '\n'; for(a=0; a<document.links.length; a++) msg = msg + 'URL이름 : ' + document.links[a] + '\n'; alert(msg); </script> </BODY>

  29. 실습 [10-4] • 다음 사이트를 하이퍼링크로 작성하고 links객체를 이용하여 하이퍼링크 정보를 출력하는 프로그램을 작성하라. • 청강문화산업대학 : www.chungkang.ac.kr • 문화방송 : www.imbc.com • 한국일보 : www.hankooki.com • 구글검색 : www.google.com • 다나와 : www.danawa.co.kr

  30. imges객체[1] • <IMG> 태그와 관련된 정보 및 동작

  31. imges객체[2] <HEAD> <TITLE> 예제 10-9 </TITLE> <script language='javascript'> function imgInfo() { msg = '이미지 수 : ' + document.images.length + '\n'; for(a=0; a<document.images.length; a++) { msg = msg + '이름 : ' + document.images[a].name + '\n'; msg = msg + 'URL : ' + document.images[a].src + '\n'; msg = msg + '너비 : ' + document.images[a].width + '\n'; msg = msg + '높이 : ' + document.images[a].height + '\n'; } alert(msg); } </script> </HEAD> <BODY> <img name='작은 딸1' src=lee4.gif>작은 딸 1<br> <img name='작은 딸2' src=lee5.gif>작은 딸 2<br> <form> <input type='button' value='이미지정보' onClick='imgInfo()'> </form> </BODY>

  32. 실습 [10-5] • 이미지에 마우스가 올라오면 다른 이미지로 바뀌고 마우스가 이미지를 벗어나면 원래의 이미지로 돌아오도록 프로그램을 작성하라. • onMouseOver, onMouseOut 이벤트 이용 • document.images[0].src=‘URL’

  33. location객체[1] • 현재 연결된 브라우저의 URL주소에 관한 정보 • 새로운 문서의 URL로`` 지정 가능

  34. location객체[2]

  35. location객체[3] <BODY> <H3>Location 객체의 값 출력</H3> <script language='javascript'> document.write('현재 URL : ' + location.href + '<br>'); document.write('Protocol : ' + location.protocol+ '<br>'); document.write('경로 : ' + location.pathname); </script> </BODY>

  36. 실습 [10-6] • 버튼을 3개 만들고, 각 버튼을 누르면 해당 사이트가 브라우저에 나타나도록 프로그램을 작성하라. • 야후 • 네이버 • 엠파스 • location.href=‘http://www.naver.com’을 사용

  37. history객체[1] • 최근에 방문한 브라우저의 URL주소들을 히스토리에 보관

  38. history객체[2] • 사용 예 • history.length • history.back() • history.forward() • history.go(2) • history.go(-3)

  39. 실습 [10-7] • ‘다음’과 ‘이전’을 나타내는 버튼을 만들고 이를 클릭하면 브라우저의 문서가 이전문서나 다음문서로 바뀌도록 히스토리 기능을 이용하여 프로그램을 작성하라.

  40. frame 객체[1] • window내에 포함된 프레임(자식윈도)에 대한 정보를 제공 • window객체와 동일한 속성과 메소드 제공

  41. frame 객체[2] • FRAME TAG사용법 <FRAMESET> … </FRAMESET> <FRAME> … </FRAME> <FRAMESET rows=‘n’ cols=‘n’ border=‘n’> <FRAME src=‘URL’ name=‘이름’ marginwidth=‘n’ marginheight=‘n’ scrolling=‘yes|no|auto’ noresize> • name 속성 예약어 _blank : 새 윈도우를 열고 결과를 표시 _self : 자신의 프레임에 결과 표시 _parent : 부모 프레임이나 윈도우에 결과 표시 _top : 프레임은 사라지고 전체 윈도우에 결과 표시

  42. frame 객체[3] <HTML> <HEAD> <TITLE> frameset </TITLE> </HEAD> <FRAMESET rows='30%,*' border='1'> <FRAME name='head' src='a.html'> <FRAMESET cols='50%,50%' border='1'> <FRAME name='left' src='b.html'> <FRAME name='right' src='c.html'> </FRAMESET> </FRAMESET> </HTML> <BODY bgColor='yellow'> <h3>a.html</h3> </BODY> <BODY bgColor=‘blue'> <h3>b.html</h3> </BODY> <BODY bgColor=‘green'> <h3>c.html</h3> </BODY>

  43. frame 객체[4] • frames 객체 • frames[0], frames[1], frames[2],…

  44. frame 객체[5] <BODY bgColor='yellow'> <h3>a.html</h3> <script language='javascript'> parent.document.write('메시지 from left'); </script> </BODY> <BODY bgColor='yellow'> <h3>a.html</h3> <script language='javascript'> parent.frames[2].document.write('메시지 from left'); </script> </BODY>

  45. 폼 관련 객체와 이벤트처리

  46. 오늘 배울 내용은? 사용자 정의객체 객체 내장객체 브라우저 내장객체 Form 관련객체 배열객체 String객체 Date객체 Math객체 Function객체 Number객체 screen객체 window객체 document객체 links객체 images객체 location객체 history객체 frame객체 객체의 개념 객체의 사용 Form객체 이벤트 핸들러 text객체 button객체 reset객체 password객체 radio객체 checkbox객체 select객체 textarea객체 submit객체 hidden객체 fileUpload객체 실전예제

  47. Form 관련 객체의 계층구조 Textarea Window Text Layer Frame Link FileUpload document Password Image Location Hidden Area Submit History Anchor Reset Applet Radio Plugin Checkbox Form Button Select Option

  48. <FORM> TAG • <FORM> Tag 형식 <FORM [name = “form name”] [target = “target window”] [action = “cgi_url” | “asp_url” | “php_url”] [method = “GET” | “POST”] [enctype = “MIME_type”] [onsubmit = “자바스크립트 명령이나 함수”] [onreset = “자바스크립트 명령이나 함수”] > … </FORM>

  49. FORM 객체 [1]

  50. FORM 객체 [2] <BODY> <form name="test" method="post"> </form> <script language='javascript'> document.write("document.test.name = " + document.test.name + "<br>"); document.write("document.test.method = " + document.test.method + "<br>"); </script> </BODY>

More Related