728x90
브라우져 내장객체 - Window
  1 Window객체의 속성
    1.1 예제[Status]
  2 Window객체의 메소드
    2.1 예제[alert()]
    2.2 예제[open(), close()]
    2.3 예제[setTimeout(), clearTimeout()]
    2.4 예제[resizeBy(), resizeTo()]
    2.5 예제[moveBy(), moveTo()]
    2.6 예제[print()]
    2.7 예제[scrollBy(), scrollTo()]
  3 Window객체의 이벤트

브라우져 내장객체가 무었인지... 왜 이것을 알아야 하는지... 궁금하시죠...^^*

사실 처음 배울때는 그냥 배운답니다...^^* ㅋㄷㅋㄷ
아마 위에있는 자바스크립트를 공부하셨다면 조금 이해가 되시겠지만 처음 보시는 분들이라면 조금 거리낌이 있겠네요...--,.--;;

자!~~~ 그러면 오늘도 설명 들어갑니다.

브라우저의 객체들은 계층구조로 되어져 있답니다...
제일 위에 Window와 독립적 객체인 Navigator...^^*
Window객체 아래로는 Document, History, Location객체가 있으며,
Document객체의 아래로는 Anchor, Applet, Area, Form, Image, Link가 있고
Form객체의 아래로는 Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Select, Submit, Text, Textarea가 있답니다.

옆의 브라우져내장객체 메뉴구조를 보시면 이해하기 쉽겠네요...
그러나 인포카페에서는 위에 분홍색바탕으로 되어진 부분만을 강좌토록 하겠습니다.


       1 Window객체의 속성

이제 이번장에서 배우게될 Window객체의 속성에 대하여 알아볼까요...^^*

 Window 객체의 속성
속 성 설 명
  classes   문서안에 있는 모든 CSS들의 정보를 가지고 있습니다.
  defaultStatus   브라우저의 상태바에 초기문자열을 설정하는 경우에 사용됩니다.
  frames   Window객체안의 프레임들의 배열 정보를 가지고 있습니다.
  innerHeight   브라우져 내용의 높이 값을 반환합니다. [넷스케이프 전용]
  innerWidth   브라우져 내용의 너비 값을 반환합니다. [넷스케이프 전용]
  opener   open() 메소드를 이용하여 연 문서를 말합니다.
  outerHeight   브라우져의 높이 값을 반환합니다. [넷스케이프 전용]
  outerWidth   브라우져의 너비 값을 반환합니다. [넷스케이프 전용]
  pageXOffset   현재 나타나는 페이지의 X위치를 반환합니다. [넷스케이프 전용]
  pageYOffset   현재 나타나는 페이지의 Y위치를 반환합니다. [넷스케이프 전용]
  parent   계층구조가 생길때 바로 상위의 Window객체
  self   현재 활성중인 창의 자신 객체
  status   브라우져의 상태바에 문자열을 출력하는 경우 사용
  tags   문서안에 정의된 모든 태그들의 정보를 가지고 있슴
  top   계층구조가 생길때 최상위의 Window객체



       1.1 예제[Status]


위 Window객체의 속성을 살펴보면 주로 브라우저화면 상태를 제어하는 기능과 화면의 특정부분에 표시될 내용을 지정하는 기능들로 구성되어 있는것을 보실 수 있습니다.

아직까지는 아니 앞으로도 언제가 되어질지는 모르겠지만 익스플로러와 넷스케이프등 동시에 호환되지 않는 속성및 메소드가 많이 존재하니 홈페이지 제작시 참조하여 사용하시기 바랍니다.

자!~~~ 그럼 예제를 한번 만들어 볼까요...^^*
상태바를 제어하는 예를 들어 보겠습니다.

[ Window 객체의 속성 예제 ] - 실행화면 보기 ... [ TOP ]

  <html>
  <head>
  <title>자바스크립트 예제</title>
  <script>
  <!--
  function statusTest(Num) {
    switch(Num) {
    case 1 : window.status="[1]번을 클릭하셨습니다...^^*"; break;
    case 2 : window.status="[2]번을 클릭하셨습니다...^^*"; break;
    case 3 : window.status="[3]번을 클릭하셨습니다...^^*"; break;
    }
  }
  //-->
  </script>
  </head>
  <body onLoad="window.defaultStatus='상태바를 테스트 합니다.'">
  <center>
  <br><br><br>
  하단의 상태바를 참조하세요...^^*
  <br><br>
  <input type="button" value="클릭1"   onClick="statusTest(1)"><br><br>
  <input type="button" value="클릭2"   onClick="statusTest(2)"><br><br>
  <input type="button" value="클릭3" onClick="statusTest(3)">
  </center>
  </body>
  </html>

위의 예제는 브라우저가 실행되면서 onLoad이벤트에 의하여 상태바에 "상태바를 테스트 합니다."라는 메세시가 출력이 되며 버튼을 클릭할때마다 해당된 메세지가 출력되는 내용입니다.
window.defaultStatus는 defaultStatus로도 사용이 가능하다는것도 참고로 알아두세요.
우리가 사용하는 모든 속성및 메소드는 window객체에서 파생되었기에 "window"는 생략해도 괜챦답니다.


       2 Window객체의 메소드

음!~~~ 다음은 ... window객체의 메소드 부분을 살펴볼까요!~~~^^*

 Window 객체의 메소드
속 성 설 명
  alert()   메세지를 대화상자에 보여줍니다.
  open()   새로운 창을 열어 줍니다.
  close()   open()메소드로 열린 창을 닫습니다.
  confirm()   확인,취소를 할 수 있는 대화상자를 열어 줍니다.
  find()   문자열에서 특정문자열을 찾습니다. [익스를로로 지원하지 않음]
  back()   이전화면으로 이동합니다.
  forward()   다음 화면으로 이동합니다. [익스플로로 지원하지 않음]
  home()   초기화된 홈페이지를 보여줍니다. [익스플로로 지원하지 않음]
  moveBy()   상대적인 좌표로 이동합니다.
  moveTo()   절대적인 좌표로 이동합니다.
  print()   프린터창을 활성화 시켜 줍니다.
  prompt()   문자열을 입력받을수 있는 대화상자를 열어줍니다.
  resizeBy()   상대적인 좌표로 창의 크기를 설정합니다.
  resizeTo()   절대적인 좌표로 창의 크기를 설정합니다.
  scrollBy()   상대적인 좌표로 스크롤 위치값을 설정합니다.
  scrollTo()   절대적인 좌표로 스크롤 위치값을 설정합니다.
  setInterval()   일정간격으로 함수를 호출하여 수행합니다.
  setTimeout()   일정간격으로 함수를 호출합니다.
  stop()   문서 전송을 중지시킵니다. [익스플로로 지원하지 않음]


       2.1 예제 - alert()


window객체의 메소드를 보았으니...^^*
예제로 들기 쉬운 몇몇가지를 직접 작성해 보도록 하겠습니다.

[ Window 객체의 메소드 - alert() ] - 실행화면 보기 ... [ TOP ]

  <html>
  <head>
  <meta http-equiv="CONTENT-TYPE" content="text/html;charset=euc-kr">
  <title>인포카페 - 자바스크립트 예제</title>
  <script>
  <!--
  function alertTest() {
  alert("음!~~~ 경고창이 뜨죠... 줄을 바꾸워 볼까요...\n줄이 바뀌었죠...^^*");
  }
  //-->
  </script>
  </head>
  <body>
  <center>
  <br><br><br><br><br>
  <input type='button' value='클릭' onClick='alertTest()'>
  </center>
  </body>
  </html>

       2.2 예제 - open(), close()


이번에는 새로운창을 열수 있는 open()메소드에 대해서 알아보도록 하겠습니다.
새로운 창이라 함은 예를들어 웹서핑을 다니다 보면 주로 공지사항 또는 이벤트를 알리기 위하여 몇몇개의 창이 뜨는 경우가 있죠...^^*
바로 그것을 말합니다.
물론 버튼으로도 제어가 가능하며, 이 메소드에는 여러가지의 속성들이 있는데 먼저 예제를 한번 살펴보고 그 속성에 대한 설명을 살펴보기로 하겠습니다.

[ Window 객체의 메소드 - open(), close(); ] - 실행화면 보기 ... [ TOP ]

  <html>
  <head>
  <meta http-equiv="CONTENT-TYPE" content="text/html;charset=euc-kr">
  <title>인포카페 - 자바스크립트 예제</title>
  <script>
  <!--
  function newOpen(Num) {
    var myText="";
    if(Num==1) {
      window.open("","newWin1","menubar=no, scrollbars=no, status=no, toolbar=no, resizable=no,       width=200, height=200, top=10, left=10");
    }
    else if(Num==2) {
      window.open("","newWin2","menubar=yes, scrollbars=yes, status=yes, toolbar=yes, resizable=yes,       width=200, height=200, top=10, left=250");
    }
    else if(Num==3) {
      newObj=window.open("","newWin3","menubar=no, scrollbars=no, status=no, toolbar=no,       resizable=no, width=200, height=200, top=210, left=10");
      if(newObj != null) {
        myText += "<html><head><title>새로운창</title></head><body>";
        myText += "<center><br><br>";
        myText += "새로운 창입니다.<br><br>";
        myText += "<input type='button' value='새창닫기' onClick='window.self.close();'>";
        myText += "</body></html>";
        newObj.document.write(myText);
      }
    }
  }
  //-->
  </script>
  </head>
  <body>
  <center>
  <br><br><br><br><br>
  첫번째 버튼은 새창을 열지만 툴바 상태바등의 속성지정을 "No"로 한 상태입니다.<br>
  <input type='button' value='새로운창열기[1]' onClick="newOpen('1')"><br><br>
  두번째 버튼은 새창을 열지만 툴바 상태바등의 속성지정을 "Yes"로 한 상태입니다.<br>
  <input type='button' value='새로운창열기[2]' onClick='newOpen(2)'><br><br>
  세번째 버튼은 새창을 열면서 객체를 이용하여 텍스트를 출력하는 예제입니다.<br>
  또한 창닫기 버튼도 만들어 보았습니다.<br>
  <input type='button' value='새로운창열기[3]' onClick='newOpen(3)'><br><br>
  </center>
  </body>
  </html>

예제가 조금 길었나요...^^*
window.open("문서주소(location)","창이름","open()메소드의 속성")와 같은 방법으로 새로운창을 띄울때 설정하는 예를 보았습니다.
(단, 위 예제에서는 주소를 사용하지 않고 예를 들었답니다.)
자!~~~ 그러면 그 속성들에 대한 설명들을 하나하나 살펴볼까요.
(참조 : 새로 띄운창(자식창)은 Window객체의 속성인 opener속성을 이용하여 새로운창을 띄우게한(부모창) 창을 컨트롤 할 수 있답니다.)

 open()메소드의 속성
속 성 설 명 변 수
  location   주소를 말합니다. yes(1) 또는 no(0)
  menubar   디렉토리 메뉴 yes(1) 또는 no(0)
  scrollbars   스크롤바 yes(1) 또는 no(0)
  status   상태바 yes(1) 또는 no(0)
  toolbar   툴바메뉴(앞,뒤,중지등) yes(1) 또는 no(0)
  resizable   브라우져 창의 크기 조절 yes(1) 또는 no(0)
  width   창의 너비 설정 픽셀단위
  height   창의 높이 설정 픽셀단위
  top   창의 세로방향 위치 지정 픽셀단위
  left   창의 가로방향 위치 지정. 픽셀단위


       2.3 예제 - setTimeout(), clearTimeout()


흔히들 재귀호출이라고 하죠...^^*
setTimeout(), clearTimeout() 메소드는 일정한 간격으로 함수를 호출하고 중지하는 역활을 한답니다.
주로 윈도우창 또는 이미지등을 동적으로 움직이는데 많이들 사용하는것 같더군요...^^*
위에서 일정한 간격이라 함은 setTimeout()메소드에 호출한 함수와 파라미터값 그리고 1000 또는 10000등 정수를 이용하여 간격을 정의할 수 있는데 그 방법은 아래와 같습니다.
예) setTimeout("test('1')",1000)
     test('1')은 test란 함수에 인자값으로 1을 정의한 것이며,
    1000은 1초를 의미합니다. 참고로 10000은 10초, 100은 0.1초를 의미한답니다...^^*

자 그럼 예제를 볼까요...^^*

[ Window 객체의 메소드 - setTimeout(), clearTimeout(); ] - 실행화면 보기 ... [ TOP ]

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":22755,"name":"marga","title":"margalog","isDormancy":false,"nickName":"marga","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=http://marga.tistory.com/57","DEFAULT_URL":"https://marga.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":57,"isAuthor":false,"categoryId":50889,"categoryLabel":"Information"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://marga.tistory.com", tistoryUrl: "https://marga.tistory.com", manageUrl: "https://marga.tistory.com/manage", token: "iiYEtL2w82FyklmKXudeKVUEEpzJP6SvdzfhusxAUWmeA8TizvBOQk+St97aIB0j" }; var servicePath = ""; var blogURL = "";</script> <!-- badtag filtered --><meta> <title>인포카페 - 자바스크립트 예제</title> <!-- script var fime_flag = false; window.status = "시작버튼을 클릭하세요."; function display(boolean_) { var today = new Date(); var screen_view = ""; switch(boolean_) { case 1 : screen_view += today.getHours() + "시 "; screen_view += today.getMinutes() + "분 "; screen_view += today.getSeconds() + "초 "; window.status = screen_view; s_time = true; v_time = setTimeout("display(1)",100); break; case 0 : window.status = "중지"; if(s_time == true) clearTimeout(v_time); s_time = false; break; } } // :script --> <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/revenue.css"/> <link rel="canonical" href="https://marga.tistory.com/57"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://marga.tistory.com/57","name":null},"url":"https://marga.tistory.com/57","headline":"Window객체의 속성","description":"브라우져 내장객체 - Window 1 Window객체의 속성 1.1 예제[Status] 2 Window객체의 메소드 2.1 예제[alert()] 2.2 예제[open(), close()] 2.3 예제[setTimeout(), clearTimeout()] 2.4 예제[resizeBy(), resizeTo()] 2.5 예제[moveBy(), moveTo()] 2.6 예제[print()] 2.7 예제[scrollBy(), scrollTo()] 3 Window객체의 이벤트 브라우져 내장객체가 무었인지... 왜 이것을 알아야 하는지... 궁금하시죠...^^* 사실 처음 배울때는 그냥 배운답니다...^^* ㅋㄷㅋㄷ 아마 위에있는 자바스크립트를 공부하셨다면 조금 이해가 되시겠지만 처음 보시는 분들이라면 조금 거리낌이..","author":{"@type":"Person","name":"marga","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"20070304T00:38:50","dateModified":"20190102T14:06:57","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/comment.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/comment.js" defer=""></script> </head> <body> <center> <br /><br /><br /><br /><br /> <input type="button" value="시작" onClick="display(1)">&nbsp; &nbsp;&nbsp; <input type="button" value="중지" onClick="display(0)"> </center> <script type="text/javascript">(function($) { $(document).ready(function() { lightbox.options.fadeDuration = 200; lightbox.options.resizeDuration = 200; lightbox.options.wrapAround = false; lightbox.options.albumLabel = "%1 / %2"; }) })(tjQuery);</script> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/menubar.min.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"22755-57","customProps":{"userId":"0","blogId":"22755","entryId":"57","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"57","categoryName":"Information","categoryId":"50889","author":"26561","image":"","plink":"/57","tags":["JavaScript"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/polyfills-legacy.min.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>

       2.4 예제 - resizeBy(), resizeTo()


이번에 배울 메소드는 말그대로 창(윈도우)의 크기를 변형하는 함수입니다.

위 두 메소드의 사용방법은...

resizeBy()의 경우 상대적인 길이를 입력하게 되는데 예를 들어 현재의 창이 가로 100PX 세로 100PX이었을때 resizeBy(40,20);으로 설정하였을 경우 가로가 140PX가 되고 세로가 120PX가되는 결과가 나올 것입니다.

그러나...

가로 세로 100PX에서 resizeTo(40,20);설정하였을 경우에는 절대적인 값이 적용되어 가로 40PX와 세로 20PX 크기의 윈도우창이 된답니다.

[참조] resizeBy()메소드는 인자값에 음수표기가 가능합니다...^^*

이해하시겠죠...

자 그럼 예제를 볼까요...^^*

[ Window 객체의 메소드 - resizeBy(), resizeTo(); ] - 실행화면 보기 ... [ TOP ]

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":22755,"name":"marga","title":"margalog","isDormancy":false,"nickName":"marga","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=http://marga.tistory.com/57","DEFAULT_URL":"https://marga.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":57,"isAuthor":false,"categoryId":50889,"categoryLabel":"Information"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://marga.tistory.com", tistoryUrl: "https://marga.tistory.com", manageUrl: "https://marga.tistory.com/manage", token: "iiYEtL2w82FyklmKXudeKVUEEpzJP6SvdzfhusxAUWmeA8TizvBOQk+St97aIB0j" }; var servicePath = ""; var blogURL = "";</script> <!-- badtag filtered --><meta> <title>인포카페</title><!-- % &ltscript&gt function resizeTo_(nWidth, nheight) { newWin = window.open("","new_open","menubar=no, scrollbars=no, status=no, toolbar=no, resizable=no, width=100, height=100, top=10, left=10"); newWin.window.focus(); //리사이즈되는 부분 ... ^^* newWin.window.resizeTo(nWidth, nheight); } function resizeBy_(nWidth, nheight) { newWin = window.open("","new_open","menubar=no, scrollbars=no, status=no, toolbar=no, resizable=no, width=100, height=100, top=10, left=10"); newWin.window.focus(); //리사이즈되는 부분 ... ^^* newWin.window.resizeBy(nWidth, nheight); } &lt/script&gt % --> <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/revenue.css"/> <link rel="canonical" href="https://marga.tistory.com/57"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://marga.tistory.com/57","name":null},"url":"https://marga.tistory.com/57","headline":"Window객체의 속성","description":"브라우져 내장객체 - Window 1 Window객체의 속성 1.1 예제[Status] 2 Window객체의 메소드 2.1 예제[alert()] 2.2 예제[open(), close()] 2.3 예제[setTimeout(), clearTimeout()] 2.4 예제[resizeBy(), resizeTo()] 2.5 예제[moveBy(), moveTo()] 2.6 예제[print()] 2.7 예제[scrollBy(), scrollTo()] 3 Window객체의 이벤트 브라우져 내장객체가 무었인지... 왜 이것을 알아야 하는지... 궁금하시죠...^^* 사실 처음 배울때는 그냥 배운답니다...^^* ㅋㄷㅋㄷ 아마 위에있는 자바스크립트를 공부하셨다면 조금 이해가 되시겠지만 처음 보시는 분들이라면 조금 거리낌이..","author":{"@type":"Person","name":"marga","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"20070304T00:38:50","dateModified":"20190102T14:06:57","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/comment.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/comment.js" defer=""></script> </head> <body onLoad='resizeTo_(100, 100);'> <center><br /><br /><br /><br /><br /> <input type="button" value="resizeBy : 100 * 100" onClick="resizeBy_(100, 100)"><br /><br /> <input type="button" value="resizeBy : 200 * 200" onClick="resizeBy_(200, 200)"><br /><br /> <input type="button" value="resizeBy : 300 * 300" onClick="resizeBy_(300, 300)"><br /><br /> <input type="button" value="resizeBy : 400 * 400" onClick="resizeBy_(400, 400)"><br /><br /> <input type="button" value="resizeBy : -100 * -100" onClick="resizeBy_(-100, -100)"><br /><br /> <br /><br /><br /> <input type="button" value="resizeTo : 100 * 100" onClick="resizeTo_(100, 100)"><br /><br /> <input type="button" value="resizeTo : 200 * 200" onClick="resizeTo_(200, 200)"><br /><br /> <input type="button" value="resizeTo : 300 * 300" onClick="resizeTo_(300, 300)"><br /><br /> <input type="button" value="resizeTo : 400 * 400" onClick="resizeTo_(400, 400)"><br /><br /> <script type="text/javascript">(function($) { $(document).ready(function() { lightbox.options.fadeDuration = 200; lightbox.options.resizeDuration = 200; lightbox.options.wrapAround = false; lightbox.options.albumLabel = "%1 / %2"; }) })(tjQuery);</script> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/menubar.min.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"22755-57","customProps":{"userId":"0","blogId":"22755","entryId":"57","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"57","categoryName":"Information","categoryId":"50889","author":"26561","image":"","plink":"/57","tags":["JavaScript"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/polyfills-legacy.min.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>
       2.5 예제 - moveBy(), moveTo()


moveBy, moveTo메소드 역시 브라우저의 위치를 변경하는데 사용되는 메소드 입니다.
위에서 배운 resize메소드와 같이 moveBy메소드는 상대적인 위치를 정의하고 moveTo메소드는 절대적인 위치를 정의하게 되죠...^^*

사용방법역시 크게 틀릴바는 없구요... 아래와 같습니다.

moveBy(상대적인x위치값, 상대적인y위치값);
moveTo(절대적인x위치값, 절대적인y위치값);

어때요... 쉽죠... 아래 예제를 보시면 더욱 이해하시는데 도움이 될듯 하네요.

[ Window 객체의 메소드 - moveBy(), moveTo(); ] - 실행화면 보기 ... [ TOP ]

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":22755,"name":"marga","title":"margalog","isDormancy":false,"nickName":"marga","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=http://marga.tistory.com/57","DEFAULT_URL":"https://marga.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":57,"isAuthor":false,"categoryId":50889,"categoryLabel":"Information"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://marga.tistory.com", tistoryUrl: "https://marga.tistory.com", manageUrl: "https://marga.tistory.com/manage", token: "iiYEtL2w82FyklmKXudeKVUEEpzJP6SvdzfhusxAUWmeA8TizvBOQk+St97aIB0j" }; var servicePath = ""; var blogURL = "";</script> <!-- badtag filtered --><meta> <title>인포카페</title> <!-- % &ltstyle&gt body {font-size:9pt;color:#555555;font-family:굴림;} &lt/style&gt % --> <!-- % &ltscript&gt function winSize(choice) { switch(choice) { case 'up' : window.moveBy(0,-50); break; case 'down' : window.moveBy(0,50); break; case 'left' : window.moveBy(-50,0); break; case 'right' : window.moveBy(50,0); break; } } &lt/script&gt % --> <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/revenue.css"/> <link rel="canonical" href="https://marga.tistory.com/57"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://marga.tistory.com/57","name":null},"url":"https://marga.tistory.com/57","headline":"Window객체의 속성","description":"브라우져 내장객체 - Window 1 Window객체의 속성 1.1 예제[Status] 2 Window객체의 메소드 2.1 예제[alert()] 2.2 예제[open(), close()] 2.3 예제[setTimeout(), clearTimeout()] 2.4 예제[resizeBy(), resizeTo()] 2.5 예제[moveBy(), moveTo()] 2.6 예제[print()] 2.7 예제[scrollBy(), scrollTo()] 3 Window객체의 이벤트 브라우져 내장객체가 무었인지... 왜 이것을 알아야 하는지... 궁금하시죠...^^* 사실 처음 배울때는 그냥 배운답니다...^^* ㅋㄷㅋㄷ 아마 위에있는 자바스크립트를 공부하셨다면 조금 이해가 되시겠지만 처음 보시는 분들이라면 조금 거리낌이..","author":{"@type":"Person","name":"marga","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"20070304T00:38:50","dateModified":"20190102T14:06:57","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/comment.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/comment.js" defer=""></script> </head> <body> <center><br /><br /><br /><br /><br /><br /> <!-- badtag filtered -->상 &nbsp; <!-- badtag filtered -->하 &nbsp; <!-- badtag filtered -->좌 &nbsp; <!-- badtag filtered -->우 <script type="text/javascript">(function($) { $(document).ready(function() { lightbox.options.fadeDuration = 200; lightbox.options.resizeDuration = 200; lightbox.options.wrapAround = false; lightbox.options.albumLabel = "%1 / %2"; }) })(tjQuery);</script> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/menubar.min.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"22755-57","customProps":{"userId":"0","blogId":"22755","entryId":"57","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"57","categoryName":"Information","categoryId":"50889","author":"26561","image":"","plink":"/57","tags":["JavaScript"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/polyfills-legacy.min.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>

       2.6 예제 - print()


이번에는 print()메소드입니다...^^*
크게 설명드릴것이 없을것 같아 바로 예제로 넘어갑니다...^^* ㅋㅋㅋ

[ Window 객체의 메소드 - print(); ] - 실행화면 보기 ... [ TOP ]

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":22755,"name":"marga","title":"margalog","isDormancy":false,"nickName":"marga","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=http://marga.tistory.com/57","DEFAULT_URL":"https://marga.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":57,"isAuthor":false,"categoryId":50889,"categoryLabel":"Information"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://marga.tistory.com", tistoryUrl: "https://marga.tistory.com", manageUrl: "https://marga.tistory.com/manage", token: "iiYEtL2w82FyklmKXudeKVUEEpzJP6SvdzfhusxAUWmeA8TizvBOQk+St97aIB0j" }; var servicePath = ""; var blogURL = "";</script> <!-- badtag filtered --> <meta> <title>인포카페</title> <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/revenue.css"/> <link rel="canonical" href="https://marga.tistory.com/57"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://marga.tistory.com/57","name":null},"url":"https://marga.tistory.com/57","headline":"Window객체의 속성","description":"브라우져 내장객체 - Window 1 Window객체의 속성 1.1 예제[Status] 2 Window객체의 메소드 2.1 예제[alert()] 2.2 예제[open(), close()] 2.3 예제[setTimeout(), clearTimeout()] 2.4 예제[resizeBy(), resizeTo()] 2.5 예제[moveBy(), moveTo()] 2.6 예제[print()] 2.7 예제[scrollBy(), scrollTo()] 3 Window객체의 이벤트 브라우져 내장객체가 무었인지... 왜 이것을 알아야 하는지... 궁금하시죠...^^* 사실 처음 배울때는 그냥 배운답니다...^^* ㅋㄷㅋㄷ 아마 위에있는 자바스크립트를 공부하셨다면 조금 이해가 되시겠지만 처음 보시는 분들이라면 조금 거리낌이..","author":{"@type":"Person","name":"marga","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"20070304T00:38:50","dateModified":"20190102T14:06:57","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/comment.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/comment.js" defer=""></script> </head> <body> <center><br /><br /><br /><br /><br /><br /> <!-- badtag filtered --> 인쇄하기 <script type="text/javascript">(function($) { $(document).ready(function() { lightbox.options.fadeDuration = 200; lightbox.options.resizeDuration = 200; lightbox.options.wrapAround = false; lightbox.options.albumLabel = "%1 / %2"; }) })(tjQuery);</script> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/menubar.min.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"22755-57","customProps":{"userId":"0","blogId":"22755","entryId":"57","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"57","categoryName":"Information","categoryId":"50889","author":"26561","image":"","plink":"/57","tags":["JavaScript"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/polyfills-legacy.min.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>

       2.7 예제 - scrollBy(); scrollTo();


상대적인 설정과 절대적인 설정방법에 대한 메소드들이 계속하여 강좌가 이루어지고 있는것 같네요...^^*
스크롤을 컨트롤하는 메소드인 scrollBy()메소드 역시 상대적인 위치값을 설정할 수 있으며 scrollTo()메소드는 절대적인 위치값을 설정할 수 있답니다.

그럼 사용방법을 볼까요^^*

scrollBy(상대적인x위치값, 상대적인y위치값);

scrollTo(절대적인x위치값, 절대적인y위치값);

사용방법을 보았으니 항상하는것 처럼 예제를 보도록하죠...^^*
예제가 너무 어렵지 않을까 모르겠네요...^^* ㅋㅋㅋ

[ Window 객체의 메소드 - scrollTo(); scrollTo(); ] - 실행화면 보기 ... [ TOP ]

<html> <head> <script type="text/javascript">if (!window.T) { window.T = {} } window.T.config = {"TOP_SSL_URL":"https://www.tistory.com","PREVIEW":false,"ROLE":"guest","PREV_PAGE":"","NEXT_PAGE":"","BLOG":{"id":22755,"name":"marga","title":"margalog","isDormancy":false,"nickName":"marga","status":"open","profileStatus":"normal"},"NEED_COMMENT_LOGIN":false,"COMMENT_LOGIN_CONFIRM_MESSAGE":"","LOGIN_URL":"https://www.tistory.com/auth/login/?redirectUrl=http://marga.tistory.com/57","DEFAULT_URL":"https://marga.tistory.com","USER":{"name":null,"homepage":null,"id":0,"profileImage":null},"SUBSCRIPTION":{"status":"none","isConnected":false,"isPending":false,"isWait":false,"isProcessing":false,"isNone":true},"IS_LOGIN":false,"HAS_BLOG":false,"IS_SUPPORT":false,"TOP_URL":"http://www.tistory.com","JOIN_URL":"https://www.tistory.com/member/join","ROLE_GROUP":"visitor"}; window.T.entryInfo = {"entryId":57,"isAuthor":false,"categoryId":50889,"categoryLabel":"Information"}; window.appInfo = {"domain":"tistory.com","topUrl":"https://www.tistory.com","loginUrl":"https://www.tistory.com/auth/login","logoutUrl":"https://www.tistory.com/auth/logout"}; window.initData = {}; window.TistoryBlog = { basePath: "", url: "https://marga.tistory.com", tistoryUrl: "https://marga.tistory.com", manageUrl: "https://marga.tistory.com/manage", token: "iiYEtL2w82FyklmKXudeKVUEEpzJP6SvdzfhusxAUWmeA8TizvBOQk+St97aIB0j" }; var servicePath = ""; var blogURL = "";</script> <!-- badtag filtered --><meta> <title>인포카페</title> <!-- % &ltscript&gt var tScroll; function runTimer(x, y, z) { if(z) window.scrollTo(x, y); else window.scrollBy(x, y); tScroll = window.setTimeout("runTimer("+x+", "+y+", "+z+");", 100); } window.onunload = new Function("clearTimeout(tScroll)"); &lt/script&gt % --> <style type="text/css">.another_category { border: 1px solid #E5E5E5; padding: 10px 10px 5px; margin: 10px 0; clear: both; } .another_category h4 { font-size: 12px !important; margin: 0 !important; border-bottom: 1px solid #E5E5E5 !important; padding: 2px 0 6px !important; } .another_category h4 a { font-weight: bold !important; } .another_category table { table-layout: fixed; border-collapse: collapse; width: 100% !important; margin-top: 10px !important; } * html .another_category table { width: auto !important; } *:first-child + html .another_category table { width: auto !important; } .another_category th, .another_category td { padding: 0 0 4px !important; } .another_category th { text-align: left; font-size: 12px !important; font-weight: normal; word-break: break-all; overflow: hidden; line-height: 1.5; } .another_category td { text-align: right; width: 80px; font-size: 11px; } .another_category th a { font-weight: normal; text-decoration: none; border: none !important; } .another_category th a.current { font-weight: bold; text-decoration: none !important; border-bottom: 1px solid !important; } .another_category th span { font-weight: normal; text-decoration: none; font: 10px Tahoma, Sans-serif; border: none !important; } .another_category_color_gray, .another_category_color_gray h4 { border-color: #E5E5E5 !important; } .another_category_color_gray * { color: #909090 !important; } .another_category_color_gray th a.current { border-color: #909090 !important; } .another_category_color_gray h4, .another_category_color_gray h4 a { color: #737373 !important; } .another_category_color_red, .another_category_color_red h4 { border-color: #F6D4D3 !important; } .another_category_color_red * { color: #E86869 !important; } .another_category_color_red th a.current { border-color: #E86869 !important; } .another_category_color_red h4, .another_category_color_red h4 a { color: #ED0908 !important; } .another_category_color_green, .another_category_color_green h4 { border-color: #CCE7C8 !important; } .another_category_color_green * { color: #64C05B !important; } .another_category_color_green th a.current { border-color: #64C05B !important; } .another_category_color_green h4, .another_category_color_green h4 a { color: #3EA731 !important; } .another_category_color_blue, .another_category_color_blue h4 { border-color: #C8DAF2 !important; } .another_category_color_blue * { color: #477FD6 !important; } .another_category_color_blue th a.current { border-color: #477FD6 !important; } .another_category_color_blue h4, .another_category_color_blue h4 a { color: #1960CA !important; } .another_category_color_violet, .another_category_color_violet h4 { border-color: #E1CEEC !important; } .another_category_color_violet * { color: #9D64C5 !important; } .another_category_color_violet th a.current { border-color: #9D64C5 !important; } .another_category_color_violet h4, .another_category_color_violet h4 a { color: #7E2CB5 !important; } </style> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/revenue.css"/> <link rel="canonical" href="https://marga.tistory.com/57"/> <!-- BEGIN STRUCTURED_DATA --> <script type="application/ld+json"> {"@context":"http://schema.org","@type":"BlogPosting","mainEntityOfPage":{"@id":"https://marga.tistory.com/57","name":null},"url":"https://marga.tistory.com/57","headline":"Window객체의 속성","description":"브라우져 내장객체 - Window 1 Window객체의 속성 1.1 예제[Status] 2 Window객체의 메소드 2.1 예제[alert()] 2.2 예제[open(), close()] 2.3 예제[setTimeout(), clearTimeout()] 2.4 예제[resizeBy(), resizeTo()] 2.5 예제[moveBy(), moveTo()] 2.6 예제[print()] 2.7 예제[scrollBy(), scrollTo()] 3 Window객체의 이벤트 브라우져 내장객체가 무었인지... 왜 이것을 알아야 하는지... 궁금하시죠...^^* 사실 처음 배울때는 그냥 배운답니다...^^* ㅋㄷㅋㄷ 아마 위에있는 자바스크립트를 공부하셨다면 조금 이해가 되시겠지만 처음 보시는 분들이라면 조금 거리낌이..","author":{"@type":"Person","name":"marga","logo":null},"image":{"@type":"ImageObject","url":"https://img1.daumcdn.net/thumb/R800x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Ftistory_admin%2Fstatic%2Fimages%2FopenGraph%2Fopengraph.png","width":"800px","height":"800px"},"datePublished":"20070304T00:38:50","dateModified":"20190102T14:06:57","publisher":{"@type":"Organization","name":"TISTORY","logo":{"@type":"ImageObject","url":"https://t1.daumcdn.net/tistory_admin/static/images/openGraph/opengraph.png","width":"800px","height":"800px"}}} </script> <!-- END STRUCTURED_DATA --> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/dialog.css"/> <link rel="stylesheet" type="text/css" href="//t1.daumcdn.net/tistory_admin/www/style/top/font.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/postBtn.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/comment.css"/> <link rel="stylesheet" type="text/css" href="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/style/tistory.css"/> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/comment.js" defer=""></script> </head> <body> <center> <br /><br /><br /> 새로 테스트 하시려면 새로고침을 하세요...^^* <br /><br /><br /> <a href='#' onclick="runTimer(0, 10, 0)">scrollBy ==> y == 10</a><br /><br /> <a href='#' onclick="runTimer(0, 500, 1)">scrollTo ==> y == 500</a><br /><br /> 0<br />1<br />2<br />3<br />4<br />5<br />6<br />7<br />8<br />9<br />10<br /> 11<br />12<br />13<br />14<br />15<br />16<br />17<br />18<br />19<br /> 20<br /> 21<br />22<br />23<br />24<br />25<br />26<br />27<br />28<br /> 29<br />30<br /> 31<br />32<br />33<br />34<br />35<br />36<br />37<br /> 38<br />39<br />40<br /> 41<br />42<br />43<br />44<br />45<br />46<br /> 47<br />48<br />49<br />50<br /> 51<br />52<br />53<br />54<br />55<br /> 56<br />57<br />58<br />59<br />60<br /> 61<br />62<br />63<br />64<br /> 65<br />66<br />67<br />68<br />69<br />70<br /> 71<br />72<br />73<br /> 74<br />75<br />76<br />77<br />78<br />79<br />80<br /> 81<br />82<br /> 83<br />84<br />85<br />86<br />87<br />88<br />89<br />90<br /> 91<br /> 92<br />93<br />94<br />95<br />96<br />97<br />98<br />99<br />100<br /> <script type="text/javascript">(function($) { $(document).ready(function() { lightbox.options.fadeDuration = 200; lightbox.options.resizeDuration = 200; lightbox.options.wrapAround = false; lightbox.options.albumLabel = "%1 / %2"; }) })(tjQuery);</script> <div style="margin:0; padding:0; border:none; background:none; float:none; clear:none; z-index:0"></div> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/common.js"></script> <script type="text/javascript">window.roosevelt_params_queue = window.roosevelt_params_queue || [{channel_id: 'dk', channel_label: '{tistory}'}]</script> <script type="text/javascript" src="//t1.daumcdn.net/midas/rt/dk_bt/roosevelt_dk_bt.js" async="async"></script> <script type="text/javascript" src="https://tistory1.daumcdn.net/tistory_admin/userblog/tistory-dcd72a92cfa46d05916d7729aa74e508c9f6ce4f/static/script/menubar.min.js"></script> <script>window.tiara = {"svcDomain":"user.tistory.com","section":"글뷰","trackPage":"글뷰_보기","page":"글뷰","key":"22755-57","customProps":{"userId":"0","blogId":"22755","entryId":"57","role":"guest","trackPage":"글뷰_보기","filterTarget":false},"entry":{"entryId":"57","categoryName":"Information","categoryId":"50889","author":"26561","image":"","plink":"/57","tags":["JavaScript"]},"kakaoAppKey":"3e6ddd834b023f24221217e370daed18","appUserId":"null"}</script> <script type="module" src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index.js"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/polyfills-legacy.min.js" nomodule="true" defer="true"></script> <script src="https://t1.daumcdn.net/tistory_admin/frontend/tiara/v1.0.0/index-legacy.js" nomodule="true" defer="true"></script> </body> </html>

자!~~~^^* 이것으로 window객체의 메소드 강좌는 마무리 하구요 다음시간에는 window객체의 이벤트에 대하여 알아보도록 하겠습니다...^^*

이번 window내장객체의 강좌는 너무 긴것 같네요...^^* 헉헉헉^^*


       3 Window객체의 이벤트

 Window 객체의 이벤트
속 성 설 명
  onBlur   브라우져에서 포커스를 잃을 때 발생합니다.
  onDragDrop   사용자가 다른곳에서 객체를 브라우져 안에 넣으려고 할 때 발생합니다.
  [익스플로러 지원 않함]
  onError   문서를 읽는중 에러가 있을때 발생합니다.
  onFocus   브라우져에서 포커스를 얻을때 발생합니다.
  onLoad   브라우져가 실행될 때 발생합니다.
  onUnLoad   브라우져를 닫으려고 할때 발생합니다.
  onMove   브라우져의 위치를 변경했을때 발생합니다. [익스플로러 지원 않함]
  onResize
728x90

'Information' 카테고리의 다른 글

주민번호 체크 검사  (0) 2007.03.04
하룻동안 창 띄우지 않기  (0) 2007.03.04
세로식 배열 테이블 메뉴  (0) 2007.03.04

+ Recent posts

티스토리툴바