Gooday Note Scrap Source Android login
 
작성일 : 11-05-09 12:10
[JavaScript] Screen 객체
 글쓴이 : 기리 (123.♡.195.24)
조회 : 2,375  
   http://math88.com.ne.kr/computer/js/JSmanual/7-2-8.html [572]

화면의 해상도나 색상, 크기등에 관한 정보를 각종 제공해 주는 Screen 객체는 new 연산자를 사용하지 않고 객체를 직접 사용하여 속성에 접근합니다.

 screen.속성

 

availHeight

브라우저 화면에서 툴바,메뉴바 등을 제외한 순수한 화면의 높이

availWidth

순수한 화면의 너비

height

브라우저의 메뉴바 등을 포함한 전체 화면 높이

width

전체 화면의 너비

pixelDepth

픽셀당 비트수 (NC 에서만)

colorDepth

사용가능 색상수

screen 속성이 어떻게 사용되는지 예제를 통해 알아볼까요?

  1. <scRIPT LANGUAGE="Javascript">
  2. <!--
  3. document.write("screen.height ===> " + screen.height + "<br>");
  4. document.write("screen.width ===> " + screen.width + "<br>");
  5. document.write("screen.availHeight ===> " + screen.availHeight + "<br>");
  6. document.write("screen.availWidth ===> " + screen.availWidth + "<br>");
  7. document.write("screen.pixelDepth ===> " + screen.pixelDepth + "<br>");
  8. document.write("screen.colorDepth ===> " + screen.colorDepth + "<br>");
  9. //-->
  10. </scRIPT>

예문은 screen 객체의 속성을 사용해서 각각의 값을 구해보는 스크립트입니다.

단, 7번행에서 사용한 screen.pixelDepth 속성은 네츠케이프 용이므로 익스플로러에서는 undefined를 보여줍니다

이 속성을 이용하여 팝업 윈도우를 항상 화면의 가운데에 나타나게 하는 스크립트를 만들어 보도록 하겠습니다

  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
  2. <HTML>
  3. <HEAD>
  4. <META http-equiv="content-type" content="text/html; charset=euc-kr">
  5. <TITLE> Jasko Sample script </TITLE>
  6.  
  7. <scRIPT LANGUAGE="Javascript">
  8.  
  9. <!--
  10. function popWin(mypage, myname, w, h, scroll) {
  11. var winl = (screen.width - w) / 2;
  12. var wint = (screen.height - h) / 2;
  13. winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable'
  14. win = window.open(mypage, myname, winprops)
  15. }
  16. //-->
  17. </script>
  18.  
  19. </HEAD>
  20. <BODY>
  21.  
  22. <a href="#" onclick="popWin('http://www.yahoo.co.kr','name','400','400','yes');">야후! 홈페이지</a>
  23.  
  24. </BODY>
  25.  
  26. </HTML>

10번행에서 5개의 인수를 가진 popWin 이라는 함수를 만들었습니다. 이 함수는 22번행에서 팝업 윈도우를 뎔기위해 호출됩니다.

우리는 아직 window.open() 메소드에 대해서는 배우지 않았지만, 간단하게 설명을 하고 넘어가겠습니다.

이 메소드는 브라우저 객체들 중 최상위 객체인 window 객체의 메소드중 하나로 팝업창을 만들어 주는 아주 중요한 메소드중 하나입니다.

사용형식은 window.open('문서의경로 및 이름','팝업창의 이름','옵션들:크기,메뉴바표시여부, 등등') 처럼 3가지의 인수를 사용합니다.

13번행은 window.open() 메소드에서 3번째 인수로 사용할 옵션드을 미리 설정해둔 것이고, 14번 행은 이 window.open() 메소드를 사용하겠다는 뜻입니다.

중요한 것은 11번과 12번 행에서 사용한 수평, 수직 위치를 구하기 위해 screen 객체를 이용한 것인데,(screen.width - w) / 2 는 전체화면의 가로크기(예 ; 800 픽셀)에서 열고자 하는 팝업창의 가로크기(예 ; 400픽셀)를 뺀숫자(400픽셀)를 2 로 나누면(200픽셀) 그 숫자가 팝업창의 좌측 위치(화면의 왼쪽에서 떨어진 간격)가 되는 것이므로, 결과적으로 화면의 가로크기를 800 픽셀이라고 할 때, 팝업창은 왼쪽에서 200픽셀 오른쪽에서 200 픽셀 떨어진 위치에 400 픽셀의 크기로 나타나게 되는 것입니다.

수직위치를 구하는 방식도 위와 동일 합니다.

그림을 보고 완전히 이해한 후 넘어가도록 하세요.

22번 행에서는 10번행에서 선언한 함수의 형식에 따라 팝업창을 열기위해 사용된 링크 코드 입니다.


 
 

Total 121
번호 제   목 글쓴이 날짜 조회
46 [MySql] MySQL to PostgreSQL 기리 06-20 3581
45 [Test] 테스트 시나리오 템플릿 및 예제 최고관… 05-31 7293
44 [Linux] SVN(Subvision) 간단히 사용하기 기리 05-27 4146
43 [Linux] Subversion 사용법 (2) 기리 05-26 12945
42 [PHP] Ajax <--> PHP 한글 깨지는 현상 해결 기리 05-26 3846
41 [JavaScript] 영어,숫자,한글,이메일 확인 (1) 기리 05-23 3040
40 [Linux] find,rm (특정위치의 특정파일을 모두 찾아서 … 기리 05-23 4312
39 [Linux] readonly 에러로 파일 수정 안될때 기리 05-17 3782
38 [Linux] linux svn client 사용법 (1) 기리 05-16 5376
37 [Linux] 리눅스 마운트(mount) 명령어 기리 05-12 16903
36 [Linux] 리눅스 마운트강좌 mount 2편 기리 05-12 4678
35 [Linux] 리눅스 마운트강좌 mount 편 기리 05-12 9072
34 [JavaScript] Screen 객체 기리 05-09 2376
33 [Linux] Proftp 소개 (2) 기리 05-04 2504
32 [MySql] Mysql Error 기리 05-02 4221
 1  2  3  4  5  6  7  8  9