Javascript

Similar documents
Javascript

PowerPoint Template

Javascript.pages

var answer = confirm(" 확인이나취소를누르세요."); // 확인창은사용자의의사를묻는데사용합니다. if(answer == true){ document.write(" 확인을눌렀습니다."); else { document.write(" 취소를눌렀습니다.");

Microsoft PowerPoint - web-part01-ch09-브라우저객체모델.pptx

제이쿼리 (JQuery) 정의 자바스크립트함수를쉽게사용하기위해만든자바스크립트라이브러리. 웹페이지를즉석에서변경하는기능에특화된자바스크립트라이브러리. 사용법 $( 제이쿼리객체 ) 혹은 $( 엘리먼트 ) 참고 ) $() 이기호를제이쿼리래퍼라고한다. 즉, 제이쿼리를호출하는기호

쉽게 풀어쓴 C 프로그래밍

PowerPoint 프레젠테이션

Javascript

HTML5

Javascript

1

쉽게 풀어쓴 C 프로그래밍

XSS Attack - Real-World XSS Attacks, Chaining XSS and Other Attacks, Payloads for XSS Attacks

다른 JSP 페이지호출 forward() 메서드 - 하나의 JSP 페이지실행이끝나고다른 JSP 페이지를호출할때사용한다. 예 ) <% RequestDispatcher dispatcher = request.getrequestdispatcher(" 실행할페이지.jsp");

PowerPoint 프레젠테이션

쉽게 풀어쓴 C 프로그래밍

Ext JS À¥¾ÖÇø®ÄÉÀ̼ǰ³¹ß-³¹Àå.PDF

1

Microsoft PowerPoint - web-part03-ch20-XMLHttpRequest기본.pptx

Microsoft PowerPoint - web-part02-ch16-이벤트.pptx

Microsoft PowerPoint - web-part02-ch15-문서객체조작.pptx

API - Notification 메크로를통하여어느특정상황이되었을때 SolidWorks 및보낸경로를통하여알림메시지를보낼수있습니다. 이번기술자료에서는메크로에서이벤트처리기를통하여진행할예정이며, 메크로에서작업을수행하는데유용할것입니다. 알림이벤트핸들러는응용프로그램구현하는데있어

HTML5

PHP & ASP

Microsoft PowerPoint - web-part01-ch10-문서객체모델.pptx

PowerPoint 프레젠테이션

C H A P T E R 2

목차 1. 시스템요구사항 암호및힌트설정 ( 윈도우 ) JetFlash Vault 시작하기 ( 윈도우 ) JetFlash Vault 옵션 ( 윈도우 )... 9 JetFlash Vault 설정... 9 JetFlash Vault

SK Telecom Platform NATE

(Microsoft PowerPoint - 9\300\345.ppt [\310\243\310\257 \270\360\265\345])

Microsoft PowerPoint 세션.ppt

쉽게 풀어쓴 C 프로그래밍

UNIST_교원 홈페이지 관리자_Manual_V1.0

쉽게 풀어쓴 C 프로그래밍


- 이벤트의처리 <input type= button id= button1 value= 확인 /> <input type= button id= button2 value= 확인 /> 자바스크립트인경우 : document.getelementbyid( button1 ).oncl

jQuery.docx

INDEX 들어가기 고민하기 HTML(TABLE/FORM) CSS JS

Microsoft Word - ntasFrameBuilderInstallGuide2.5.doc

Microsoft PowerPoint - ÀÚ¹Ù08Àå-2.ppt

로거 자료실

쉽게 풀어쓴 C 프로그래밍

Modal Window

Cookie Spoofing.hwp

iii. Design Tab 을 Click 하여 WindowBuilder 가자동으로생성한 GUI 프로그래밍환경을확인한다.

Microsoft PowerPoint 자바스크립트(1).pptx

PHP & ASP

Orcad Capture 9.x

Eclipse 와 Firefox 를이용한 Javascript 개발 발표자 : 문경대 11 년 10 월 26 일수요일

Microsoft PowerPoint - Java7.pptx

오버라이딩 (Overriding)

PowerPoint Presentation

Microsoft Word - windows server 2003 수동설치_non pro support_.doc

tiawPlot ac 사용방법

Chapter 1

PowerPoint Presentation

SIGIL 완벽입문

Microsoft PowerPoint - web-part02-ch13-기본.pptx

HTML5 웹프로그래밍 입문-개정판

PowerPoint 프레젠테이션

HTML5 웹프로그래밍 입문-개정판

Microsoft Word - PLC제어응용-2차시.doc

Microsoft PowerPoint - HTML-CSS3.pptx

2009년 상반기 사업계획

Endpoint Protector - Active Directory Deployment Guide

Microsoft PowerPoint - aj-lecture1-HTML-CSS-JS.ppt [호환 모드]

미쓰리 파워포인트

untitled

PowerPoint 프레젠테이션

Microsoft PowerPoint - ÀÚ¹Ù08Àå-1.ppt

Microsoft PowerPoint - IP11.pptx

구축환경 OS : Windows 7 그외 OS 의경우교재 p26-40 참조 Windows 의다른버전은조금다르게나타날수있음 Browser : Google Chrome 다른브라우저를사용해도별차이없으나추후수업의모든과정은크롬사용 한

슬라이드 1

2014밝고고운동요부르기-수정3

2005프로그램표지

윈도우시스템프로그래밍

하둡을이용한파일분산시스템 보안관리체제구현

Dialog Box 실행파일을 Web에 포함시키는 방법

MAX+plus II Getting Started - 무작정따라하기

Microsoft PowerPoint 웹 연동 기술.pptx

혼자서일을다하는 JSP. 이젠일을 Servlet 과나눠서한다. JSP와서블릿의표현적인차이 - JSP는 <html> 내에서자바를사용할수있는수단을제공한다. - 서블릿은자바내에서 <html> 을작성할수있는수단을제공한다. - JSP나서블릿으로만웹페이지를작성하면자바와다양한코드가

NATE CP 가이드 1. WML 페이지에서줄바꿈문제 개요 WML 페이지에서줄바꿈은명시적으로 <br/> 태그를사용하여야한다. 설명그림 2 의의도로제작된페이지에서 Card Styles 텍스트와 Select 박스사이에명시적인 <br/> 태그가없어, 그림 1 과같이줄바꿈이되

PowerPoint 프레젠테이션

학습목표 함수프로시저, 서브프로시저의의미를안다. 매개변수전달방식을학습한다. 함수를이용한프로그래밍한다. 2

LCD Display

NTD36HD Manual

기존에 Windchill Program 이 설치된 Home Directory 를 선택해준다. 프로그램설치후설치내역을확인해보면 Adobe Acrobat 6.0 Support 내역을확인할수 있다.

슬라이드 1

HTML5

Ver 1.0 마감하루전 Category Partitioning Testing Tool Project Team T1 Date Team Information 김강욱 김진욱 김동권

한국에너지기술연구원 통합정보시스템설치방법설명서 한국에너지기술연구원 지식정보실 - 1 -

Web Scraper in 30 Minutes 강철

Microsoft PowerPoint - 07-Data Manipulation.pptx

PowerPoint Presentation

MVVM 패턴의 이해

Windows 8에서 BioStar 1 설치하기

Lab10

gnu-lee-oop-kor-lec10-1-chap10

SOFTBASE XFRAME DEVELOPMENT GUIDE SERIES HTML 연동가이드 서울특별시구로구구로 3 동한신 IT 타워 1215 호 Phone Fax Co

Transcription:

1. 브라우저내장객체의종류와계층구조 4일차에서잠시다루었던것처럼자바스크립트는자바스크립트자신이가지고있는내장객체와브라우저가지니고있는브라우저내장객체가있습니다. 브라우저내장객체는현재브라우저로출력된문서에대한여러가지정보, 윈도우정보, 히스토리정보, 위치정보등을제공합니다. 이브라우저내장객체는계층구조라는것을가지고있는상위객체안에하위객체가존재하는구조를말합니다. 예를들면, Windows 탐색기로파일을관리할때 C: 드라이브루트안에 Program Files가있고 Program Files 안에시스템에서사용할프로그램들이존재합니다. 이렇듯상위객체아래에하위객체들이존재한다고보면됩니다. 최상위객체가 Window, Window 의하위객체로 Frame, Document, Location, History 등이 다시 Document 객체의하위객체로 Image, Area, Link, Form 등이 Form 의하위개체로 Textarea, Text, Password, Submit, Reset, Radio, Button 등이제공됩니다. 특정객체를사용하려면상위계층부터순서대로 ". " 으로구분해서지정하면됩니다. 예를들어, Windows 에서파일의경로를지정할때 C: My Documents index.html 과같이 를사용하여상위폴더부터파일까지를지정하는것처럼 Javascript에서는상위에서하위객체를지정할때 ". " 을사용하게됩니다. 모든객체들은 Window 객체의하위객체이므로제일앞에오는 "Window." 은생략해도됩니다. Window.document.write(" 안녕하세요?") 브라우저의종류가넷스케이프냐익스플로러냐따라다른객체들이제공됩니다. 아래자료는구조는익스플로러의계층구조입니다. 1 / 6

Window All Textarea Frame Script Body Text FileUpload Document Selection Password Location History Visual Image Area Link Applet Hidden Submit Reset Radio Event Form Checkbox Navigator Button Select Option 2. Window 객체? Window 객체는브라우저내장객체중최상위객체로 Window 단어의미그대로열린창즉, 브라우저자신이나 alert, confirm, prompt 등각종대화상자의정보를제공하거나, 조작할때사용하는객체입니다. 3. Window 객체의속성 속성 status defaultstatus self parent top frames opener locationbar menubar personalbar scrollbars statusbar toolbar tags classes 설명브라우저의상태표시줄에표시할문자열 status에지정된문자열이없을때상태표시줄에기본적으로표시할문자열 window 객체, 자기자신을의미함 window 안프레임의부모프레임프레임이설정되기이전의창 window 객체에있는프레임들 open() 메소드로열린윈도우에서이전창을참조윈도우의 location bar를나타낼지의여부윈도우의 menu를표시할지의여부윈도우의 personal bar를표시할지의여부윈도우의 scroll bar를표시할지의여부윈도우의 status bar를표시할지의여부윈도우의 tool bar를표시할지의여부 html 문서에서사용된모든태그들 html 문서에서사용된모든 style sheet class 들 4. Window 객체의메소드 메소드 open() close() alert() confirm() 설명새로운윈도우열기, window.open("url","name","options") * 옵션 - menubar, toolbar, location, scrollbars, status, resizable : yes/no - width, height, left, top : pixel 윈도우닫기간단한메시지를표시하는대화상자사용자로부터확인을받기위한대화상자 2 / 6

prompt() settimeout() cleartimeout() setinterval() moveby() moveto() resizeby() resizeto() scrollby() scrollto() stop() print() 사용자로부터문자열을입력받기위한대화상자지정한시간동안기다린후명령실행 settimeout 메소드를해제시킴주기적으로작업을실행하게함윈도우상대이동윈도우절대이동윈도우의상대적크기변경윈도우의절대적크기변경윈도우에보여지는부분을상대적으로스크롤윈도우에보여지는부분을절대적으로스크롤 html 문서전송을중지시킴윈도우에포함된 html 문서의내용출력 1) 상태표시줄에메시지표시 (status 속성 ) 상태표시줄에 " 안녕하세요? 방문해주셔서감사합니다." 표시하기 2) 팝업창띄우기 (open 메소드 ) [exam2 열기 ] 버튼을클릭하면 exam14_02.html 을 toolbar, location, status, menubar, scrollbar 모두표시하지않고새로운창에열기 3) 창닫기 (close 메소드 ) [Close] 버튼을누르면창닫기 <exam14_01.html> <html> <head> <title></title> <script language="javascript"> <!-- function Status_msg() { window.status=" 안녕하세요? 방문해주셔서감사합니다."; function exam2_open(){ window.open("exam14_02.html", "", "width=300, height=200, left=10, top=10, toolbar=no, location=no, status=no, menubar=no, scrollbars=no"); --> </script> </head> <body onload="status_msg()"> <form> <input type="button" value="exam2 열기 " onclick="exam2_open()"> <input type="button" value="close" onclick="window.close()"> </form> </body> </html> <14_01.jpg> 3 / 6

4) 이전 Window 에사이트열기 (opener 속성 ) " 대한민국공식사이트 " 를클릭하면 exam14_02.html 을열어준이전창에사이트열기 <exam14_02.html> <html> <head> <title>go Korea</title> <script language="javascript"> <!-- function gokorea(url){ window.opener.location.href=url; //<a href=javascript:gokorea("http://www.korea.go.kr")> 대한민국공식사이트 </a> --> </script> </head> <body> <a href="#" onclick="gokorea('http://www.korea.go.kr')"> 대한민국공식사이트 </a> </body> </html> <14_02.jpg> <14_03.jpg> 4 / 6

5) 자동으로화면스크롤하기 (scrollto, settimeout 메소드 ) <exam14_03.html> <html> <head> <title> 좋은시 </title> <script language="javascript"> <!-- var i=0; function AutoScroll() { if(i<500) { i=i+1; window.scrollto(0,i); settimeout("autoscroll()", 10) else {i=0; --> </script> </head> <body> <form> <input type="button" value=" 자동스크롤 " onclick="autoscroll()"> </form> <pre> 단풍속으로 박명숙 드디어산빛은가속을내고폭풍처럼불길이들이닥칠때티끌도흠집도죄다태우며미친하늘이덤벼들때맞습니다. 길은보이지않고 바람이우리몸뚱이통째로말아버리면어디선가어둠도저린발가락피가나도록긁고있겠지요. 접었던시간의소매를내리며먼기억들이박쥐처럼날개를펴고휘몰아치는단풍속으로, 속으로마구날아드는것이겠지요. 끝도없이서로얼굴을부딪치며세상의구비마다떨어져쌓일때 서둘러낭떠러지가올라오고있는것이겠지요, 지금 ****************************************************** 이름없는섬이었음을 김선태 그저잠시머물다떠나고싶은섬이었음을아무에게도무게지움이없이그저있는듯없는듯떠있고싶은섬이었음을 5 / 6

그러나, 흐르지않고그대로가만고여병든바다때로는바람이불어파도가세차게내가슴을후비고부서지지않으려안으로안으로끓어안던그숱한나날들쌓이는절망과분노속터져버리고싶은아픔이었음을벗들이여, 기억하는가굳게빗장을걸어놓은시간과모르는곳으로눈감고숨죽여버린내언어를싸늘히식어차돌처럼다져진내단단한고독을벗들이여, 용서하라방향없이부유하는바닷새와물고기떼함께어울려이겨내지못한내비굴을그리고뜨겁게껴안지못한내사랑의짧은입맞춤을또는비애를 </pre> </body> </html> <14_04.jpg> 5. Window 객체의이벤트핸들러 Window 객체에서사용할수있는이벤트핸들러는다음과같습니다. 이벤트핸들러에대한자세한내용은 9 일차학습에서자세히다루었으므로본차시에서는 자세한내용은다루지않도록하겠습니다. 이벤트핸들러 설명 onblur 브라우저가포커스를잃을때발생 ondragdrop 사용자가다른곳에서객체를브라우저안에넣으려고할때발생. 익스플로러는지원안함 onerror 문서를읽는중에에러가생길때발생 onfocus 브라우저에포커스를얻을때발생 onload 문서를읽을때발생 onmove 브라우저의위치를변경했을때발생. 익스플로러는지원안함 onresize 창의크기를변경했을때발생. 익스플로러는지원안함 onunload 현재문서를지울려고할때발생 6 / 6