본문 바로가기
CS Study/Javascript

8. Window 객체

Ryannn 2022. 4. 8. 20:49

1. 윈도우 열기 - window.open()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>window.open()으로 윈도우 열기</h1>
    <hr>
    <a href = "javascript:load('http://www.graceland.com')">엘비스프레슬리</a>
    <a href = "javascript:load('http://www.universalorlando.com')">유니버설 올랜도</a>
    <a href = "javascript:load('http://www.disneyworld.com')">디즈니월드 홈페이지</a>
    <script>
        function load(url){
            window.open(url,'myWin',"top=300,left=300,width=300,height=300");
        }
    </script>
</body>
</html>

2. 윈도우 닫기 - window.close()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>window의 close()로 윈도우 닫기</h1>
    <hr>
    <a href = "javascript:load('http://www.disneyworld.com')">새 윈도우</a>
    <a href = "javascript:close()">현재윈도우 닫기</a>
    <a href = "javascript:closeNew()">새윈도우 닫기</a>
    <script>
        let newWin = null;
        function load(url){
            newWin = window.open(url,'myWin');
        }
        function closed(){
            window.close();
        }
        function closeNew(){
            newWin.close();
        }
    </script>
</body>
</html>

3. 5초 후 링크 접속 - window 타이머 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>이미지에 마우스를 올리고 5초간 그대로 있을 때 사이트로 이동합니다.</h1>
    <hr>
    <img onmouseover = "goNaver()" onmouseout = "cancel()"src = "naver.gif">
    <script>
        let timerID;
        function goNaver(){
            timerID = setTimeout("open('http://www.naver.com')",5000);
        }
        function cancel(){
            clearTimeout(timerID);
        }
    </script>
</body>
</html>

4. 텍스트 자동회전

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background: yellowgreen;
            width : 210px;
        }
    </style>
</head>
<body>
    <h1>텍스트가 자동 회전하며, 마우스로 클릭하면 중단합니다.</h1>
    <hr>
    <div onmouseover = "stop()">회전하는 텍스트입니다. 자동</div>
    <script>
        let text = document.getElementsByTagName("div");
        let timerID = setInterval("rotation()", 300);
        function rotation(){
            let string = text[0].innerHTML;
            string = string.substr(1) + string[0];
            text[0].innerHTML = string;
        }
        function stop(){
            clearInterval(timerID);
        }

    </script>
</body>
</html>

5. 윈도우 크기 조절 - window.moveBy(), window.resizeBy()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        button{
            margin-right : 10px;
        }
    </style>
</head>
<body>
    <h1>윈도우의 위치와 크기 조절</h1>
    <hr>
    <button onclick = "newWindow.moveBy(-10,0)">left</button><button onclick = "newWindow.moveBy(10,0)">right</button>
    <button onclick = "newWindow.moveBy(0,-10)">up</button><button onclick = "newWindow.moveBy(0,10)">down</button>
    <button onclick = "newWindow.resizeBy(10,10)">+</button><button onclick = "newWindow.resizeBy(-10,-10)">-</button>
    <script>
        newWindow = window.open('test10-4.html');
    </script>
</body>
</html>

6. 윈도우 자동 스크롤 - window.scrollBy()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width : 100px;
        }
    </style>
</head>
<body onload = "scrollUp()">
    <div>이러지도 못하는데 저러지도 못하네
        그저 바라보며 ba-ba-ba-baby
        매일 상상만 해 이름과 함께
        쓱 말을 놨네 baby
        아직 우린 모르는 사인데
        아무거나 걸쳐도 아름다워
        거울 속 단 둘이서 하는
        fashion show show
        이번에 정말 꼭꼭 내가 먼저 talk talk
        다짐 뿐인걸 매번 다짐 뿐인걸
        나나나나나나나
        콧노래가 나오다가 나도 몰래
        눈물 날 것 같애
        아닌 것 같애 내가 아닌 것 같애
        I love you so much
        이미 난 다 컸다고 생각하는데
        어쩌면 내 맘인데 왜
        내 맘대로 할 수 없는 건 왜
        밀어내려고 하면 할수록
        자꾸 끌려 왜 자꾸 자꾸 끌려 baby
        I'm like TT
        Just like TT
        이런 내 맘 모르고 너무해 너무해
        I'm like TT
        Just like TT
        Tell me that you'd be my baby
        어처구니 없다고 해
        얼굴 값을 못한대
        전혀 위로 안돼 ba-ba-ba-baby
        미칠 것 같애
        이 와중에 왜
        배는 또 고픈 건데
        하루 종일 먹기만 하는데
        맴매매매 아무 죄도 없는 인형만 때찌
        종일 앉아있다가 엎드렸다
        시간이 획획획
        피부는 왜 이렇게 또 칙칙
        자꾸 틱틱 거리고 만 싶지
        엄만 귀찮게 계속 왜왜왜왜왜
        나나나나나나나
        콧노래가 나오다가 나도 몰래
        짜증날 것 같애 화날 것 같애
        이런 애가 아닌데
        I love you so much
        이미 난 다 컸다고 생각하는데
        어쩌면 내 맘인데 왜
        내 맘대로 할 수 없는 건 왜
        밀어내려고 하면 할수록
        자꾸 끌려 왜 자꾸 자꾸 끌려 baby
        I'm like TT
        Just like TT
        이런 내 맘 모르고 너무해 너무해
        I'm like TT
        Just like TT
        Tell me that you'd be my baby
        혹시 이런 나를 알까요
        이대로 사라져 버리면 안돼요
        이번엔 정말 꼭꼭 내가 먼저 talk talk
        다짐 뿐인걸 매번 다짐 뿐인걸
        이미 난 다 컸다고 생각하는데
        어쩌면 내 맘인데 왜
        내 맘대로 할 수 없는 건 왜
        밀어내려고 하면 할수록
        자꾸 끌려 왜 자꾸 자꾸 끌려 baby
        I'm like TT
        Just like TT
        이런 내 맘 모르고 너무해 너무해
        I'm like TT
        Just like TT
        Tell me that you'd be my baby
        </div>
        <script>
            function scrollUp(){
                let timerID = setInterval("window.scrollBy(0,10)",1000);
            }
        </script>
</body>
</html>

7. 웹 페이지 프린트하기 - window.print()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>웹 페이지 프린트</h1>
    <hr>
    <p>window 객체의 print() 메소드를 호출하면 
        window객체에 담겨있는 웹페이지가 프린트 뒵니다.</p>
    <p onclick = "window.print()">이곳을 누르면 프린트 됩니다.</p>
</body>
</html>

8. 프린트 미리보기 - window.onbeforeprint(), window.onafterprint()

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        img {
            display : none;
        }
    </style>
</head>
<body>
    <h3>onberforeprint, onafterprint 이벤트 예</h3>
    <hr>
    <p>안녕하세요. 브라우저 윈도우에서는 보이지 않지만, 프린트시에는
        회사 로고가 출력되는 예제를 보입니다. 마우스 오른쪽 버튼을 
        눌러 미리보기 메뉴를 선택해보세요.
    </p>
    <div><img src = "logo.png"></div>
    <script>
        window.onbeforeprint = function(e){
            let logodiv = document.getElementsByTagName("img");
            logodiv[0].style.display = "block";
        }
        window.onafterprint = function() {
            let logodiv = document.getElementsByTagName("img");
            logodiv.style.display = "none";
        }
    </script>
</body>
</html>

9. 멈추는 시계 만들기 - setInterval(), clearInterval() 활용

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            background-color: lightblue;
            border : 1px solid lightgrey;
            width : 150px;
            height : 20px;
        }
    </style>
</head>
<body>
    <h1>div 태그에 시계 만들기</h1>
    <hr>
    <div id = "clock"></div>
    <script>
        let timerID;
        let div = document.getElementById("clock");
        function setDate(){
            let date = new Date();
            div.style.color = "black";
            let text = "";
            if(date.getHours()>11){
                text+="오후" + (date.getHours()-12) + ":";
            }
            else{
                text+="오전" + date.getHours()+ ":";
            }
            text+=date.getMinutes()+":" + date.getSeconds();
            div.innerHTML = text;
            div.onclick = stopDate;
        }
        function continueDate(){
            setDate();
            timerID = setInterval("setDate()",1000);
            div.onclick = stopDate;
        }
        function stopDate(){
            clearInterval(timerID);
            div.style.color = "grey";
            div.onclick = continueDate;
        }
        setDate();
        timerID = setInterval("setDate()",1000);
        
    </script>
</body>
</html>

10. 자동 채점기 - setTimeout() 활용

for(let i = 0;i<4;i++){
    question[i].innerHTML = makeQuestion();
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <style>
            p,input{
                display : inline-block;
            }
            p{
                width : 70px;
            }
            button{
                margin-right : 30px;
            }
        </style>
    </head>
    <body>
        <h1>산수 문제를 풀어봅시다.</h1>
        수식을 계산하여 답을 입력하고 채점 버튼을 누르세요.
        <hr>
        <div><p></p><input type = "text" value=""></div>
        <div><p></p><input type = "text" value=""></div>
        <div><p></p><input type = "text" value=""></div>
        <div><p></p><input type = "text" value=""></div>
        <button onclick = allQuestion()>다시</button><p id = "score">0</p>
        <script>
            let question = document.getElementsByTagName("p");
            let answer = document.getElementsByTagName("input");
            let scoreBoard = document.getElementById("score");
            let score = 0;
            function makeQuestion(){
                let text = "";
                let n1 = Math.floor(Math.random()*20);
                let n2 = Math.floor(Math.random()*20);
                let oper = Math.floor(Math.random()*4);
                let operator;
                if(oper == 1){
                    operator = "+";
                }
                else if(oper == 2){
                    operator = "-";
                }
                else if(oper == 3){
                    operator = "*";
                }
                else{
                    operator = "/";
                }
                text = n1 + operator + n2;
                return text;
            }
            function allQuestion(){
                for(let i = 0;i<4;i++){
                    answer[i].value = "";
                    question[i].style.textDecoration = "none";
                    question[i].innerHTML = makeQuestion();
                }
            }
            function grade(){
                for(let i = 0;i<4;i++){
                    if(eval(question[i].innerHTML) == parseInt(answer[i].value)){
                        score++;
                    }
                    else{
                        question[i].style.textDecoration = "line-through";
                    }
                }
                scoreBoard.innerHTML = score + "점";
            }
            allQuestion();
            let timerID = setTimeout("grade()",10000);
        </script>
    </body>
    </html>

11. 눈 내리는 풍경

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            background-image: url("swiss.jpg");
            background-size : 100%;
            background-repeat: no-repeat;
        }
        img{
            display : inline-block;
            position : absolute;
            width : 10px;
            height : 10px;
        }
    </style>
</head>
<body>
    <script>
        let snows = document.getElementsByTagName("img");
        let seroArray = new Array();
        for(let i = 0;i<30;i++){
            seroArray[i] = Math.floor(Math.random()*1000)
        }
        for(let i = 0;i<30;i++){
            document.write("<img src = \"snow.jpg\">");
        }
        function randomPosition(){
            for(let i = 0;i<30;i++){
                snows[i].style.left = Math.floor(Math.random()*1600) + "px";
                snows[i].style.top = seroArray[i] + "px";
            }
        }
        function fall(){
            for(let i = 0;i<30;i++){
                seroArray[i] +=10;
            }
            for(let i =0;i<30;i++){
                snows[i].style.top = seroArray[i] + "px";
                if(seroArray[i]>=1030){
                    seroArray[i] = 0;
                }
            }
        }
        randomPosition();
        let timerID = setInterval("fall()",500);
    </script>
</body>
</html>
저작자표시

'CS Study > Javascript' 카테고리의 다른 글

10. 캔버스 그래픽  (0) 2022.04.08
9. Window 객체 (2)  (0) 2022.04.08
7. 이벤트 객체(2) - 문서, 이미지 로딩 / 폼 이벤트  (0) 2022.04.08
6. 이벤트 객체 (1) - 마우스 핸들링  (0) 2022.04.08
5. DOM / document 객체  (0) 2022.04.08

'CS Study/Javascript' Related Articles

티스토리툴바