Chapter 08. 위치/크기 관련 기능 다루기. Lesson 04. 윈도우의 위치 및 크기 관련 기능

Chapter 08. 위치/크기 관련 기능 다루기. 

Lesson 04. 윈도우의 위치 및 크기 관련 기능

02. 핵심 내용

핵심 01: 윈도우 크기 구하기

핵심 02: 윈도우 크기 설정하기

핵심 03: 윈도우 리사이징 이벤트 ㅊ러ㅣ

핵심 04: 윈도우 위치 다루기

핵심 05: 윈도우 스크롤 다루기

핵심 01: 윈도우 크기 구하기

1. 기본 크기 구하기

사용법 : 

window.innerWidth

window.innerHeight

2. 기본 크기 + 메뉴바 + 툴바 영역이 포함된 크기 구하기

사용법 :

$(window).width()

$(window).height()

3. 기본 크기 + 메뉴바 + 툴바 + 스크롤바 영역이 포함된 크기 구하기

사용법 : 

window.outerWidth

window.outerHeight

예제 01. 앞에서 배운 윈도우 크기를 구하는 세 가지 방법을 활용해 윈도우의 크기를 구한 값을 실행화면처럼 #info 영역에 출력해 주세요

<script>
$(document).ready(function()
{
    // 윈도우 크기 출력
    var strInfo = "";
    // 내부 너비,높이 구하기
    strInfo += "window.innerWidth = "+window.innerWidth+"<br>";
    strInfo += "window.innerHeight = "+window.innerHeight+"<br>";
    // 외부 너비,높이 구하기
    strInfo += "window.outerWidth = "+window.outerWidth+"<br>";
    strInfo += "window.outerHeight = "+window.outerHeight+"<br>";
 
    // 일반 너비,높이 구하기
    strInfo += "$(window).width() = "+$(window).width()+"<br>";
    strInfo += "$(window).height() = "+$(window).height()+"<br>";
 
    // 정보 출력
    $("#info").html(strInfo);
})
</script>

핵심 02. 윈도우 크기 설정하기

사용법 : window.resizeTo(width,height)

* 이 메서드는 window.open() 메서드에 의해만들어진 윈도우만이 크기를 변경할 수 있습니다.

즉, 다음과 같이 현재 윈도우 크기를 변경하려 하면 전혀 변경되질 않습니다

예제 02. 현재 윈도우 크기 변경 테스트

<script>
$(document).ready(function()
{
    // 현재 윈도우 크기를 300,300으로 변경
    window.resize(300,300); // 현재 윈도우 크기가 변경되지 않습니다.
})
</script>

예제 03. 실행화면처럼 크기변경(#resize) 버튼을 누르면 새롭게 만든 윈도우 크기가 다음과 같이 랜덤하게 되게끔 만들어주세요

- 너비영역 : 200 ~ 600

- 높이영역 : 200 ~ 500

<script>
$(document).ready(function()
{
// newWindow변수 선언
    var newWindow =null;
    // #create에 클릭 이벤트 등록
    $("#create").click(function()
    {
    // open()메서드를 활용해 새로운 윈도우 생성
    newWindow = window.open("", "newWindow", "width=200, height=200");
    });
 
    // 여기에 코드를 입력해주세요.
    // #resize에 클릭 이벤트 등록
    $("#resize").click(function()
    {
    // 신규 윈도우 존재유무 판단
        if(newWindow)
        {
            // Math 클래스에서 제공하는 random() 메서드를 활용해 크기를 랜덤하게 구합니다
            var width = 200+Math.floor(Math.random()*400); 
            var height = 200+Math.floor(Math.random()*300);
 
            // window 객체의 resizeTo() 메서드를 활용해 윈도우 크기 변경하기
            newWindow.resizeTo(width,height);
        }
    })
})
</script>

핵심 03. 윈도우 리사이징 이벤트 처리

사용법 : $(window).on("resize",function(e) {} );

* resize 이벤트는 윈도우 크기가 변경되면 Window 객체에서 발생하는 이벤트입니다.

예제 04. 윈도우 크기가 변경되는 경우 윈도우 크기를 실행화면처럼 #info에 출력해 주세요

<script>
$(document).ready(function()
{
    // resize 이벤트 리스너 등록
    $(window).on("resize",function()
    {
    // 윈도우 크기 구하기
    var strInfo="";
    strInfo += "window.outerWidth = "+window.outerWidth+"<br>";
    strInfo += "window.outerHeight = "+window.outerHeight+"<br>";
 
    // 윈도우 정보 출력
    $('#info').html(strInfo);
    })
})
</script>

핵심 04. 윈도우 위치 다루기

1. 윈도우 위치 구하기

사용법 :

window.screenLeft

window.screenTop

화면(모니터)에서 윈도우(웹브라우저) 위치 값을 구할 수 있습니다

2. 윈도우 위치 설정하기

사용법 :

window.moveTo(dx,dy) // 화면에서 윈도우를 dx, dy 위치로 움직이기

window.moveBy(dx,dy) // 현재 윈도우 위치에서 dx, dy 만큼 윈도우를 움직이기

* 주의할점 

moveTo() 메서드와 moveBy() 메서드 역시 resizeTo() 메서드 처럼 window.open() 메서드에 의해 만들어진 윈도우만 이동할 수 있습니다.

예제 05. 이동(#move) 버튼을 누르면 새롭게 만든 윈도우 위치를 화면 오른쪽에 정렬해 주세요

<script>
$(document).ready(function()
{
    var newWindow =null;
    $("#create").click(function()
    {
        // open()메서드를 활용해 새로운 윈도우 생성
        newWindow = window.open("", "newWindow", "width=200, height=200");
    })
 
    // 여기에 코드를 입력해주세요.
    $("#move").click(function()
    {
        // 신규 윈도우 존재 유무 판단
        if(newWindow)
        {
        // 이동 위치 계산하기
        var left = screen.availWidth- newWindow.outerWidth;
        var top = newWindow.screenTop;
 
        // 신규 윈도우 위치 이동 시키기
        newWindow.moveTo(left,top);
        }
    })
})
</script>

핵심 05: 윈도우 스크롤 다루기

1. 스크롤 위치 구하기

사용법 : 

window.pageXoffset

window.pageYoffset

2. 스크롤 위치 설정하기

사용법 :

window.scrollTo(x,y)

window.scrollBy(x,y)

3. 스크롤 이벤트 처리하기

사용법 : 

$(window).on("scroll",function() {} );

윈도우 영역에서 스크롤이 될 때마다 scroll 이벤트가 발생합니다.

예제 06. 웹브라우저의 스크롤이 일어날 때 스크롤 위치 값을 #info에 출력해 주세요.

그리고 TOP 버튼을 누르면 화면 최상위로 이동하게 해주세요.

<script>
$(document).ready(function()
{
    // 여기에 풀이를 입력해주세요.            
    // scroll 이벤트 리스너 등록
    $(window).on("scroll",function()
    {
        // 윈도우 스크롤 위치 구하기
        var strInfo="";
        strInfo += "window.pageXOffset = "+window.pageXOffset+"<br>";
        strInfo += "window.pageYOffset = "+window.pageYOffset+"<br>";
                
        // 스크롤 정보 출력
        $('#info').html(strInfo);
    })
            
        // #gotoTop 버튼에 클릭 이벤트 등록
        $("#gotoTop").click(function()
        {
        // 스크롤 위치를 최 상단으로 이동
        window.scrollTo(0,0);
        })    
})
</script>