Javascript

Size: px

Start display at page:

Download "Javascript"

혜리 방
5 years ago
Views:

1 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

2 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

3 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">  </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

opener.location.href=url; //<a href=javascript:gok

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

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

그러나, 흐르지않고그대로가만고여병든바다때로는바람이불어파도가세차게내가슴을후비고부서지지않으려안으로안으로끓어안던그숱한나날들쌓이는절망과분노속터져버리고싶은아픔이었음을벗들이여, 기억하는가굳게빗장을걸어놓은시간과모르는곳으로눈감고숨죽여버린내언어를싸늘히식어차돌처럼다져진내단단한고독을벗들이여,

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

Javascript

Javascript 1. 이벤트와이벤트핸들러의이해 이벤트 (Event) 는웹브라우저에서발생하는다양한사건을말합니다. 예를들면, 버튼을마우스로을했다거나브라우저를닫았다거나 Enter 키를눌렀다거나등등아주다양한사건들이있습니다. 그렇다면이벤트핸들러 (Event Handler) 는무엇일까요? 이다양한이벤트들을핸들링 ( 처리 ) 해주는것입니다. 예를들면, 어떤버튼을했을때메시지창이뜨게하는등을말합니다.