윤여찬 | younyeochan

01. 브라우저 객체 : window.alert() : 알림창

{
    document.querySelector(".btn1-1").addEventListener("click", function(){
        alert("알림창");
}

02. 브라우저 객체 : window.confirm() : 확인창

여기는 텍스트 영역입니다.

클릭하면 알림창을 표시합니다.

{
    const text = confirm("오늘 공부할 준비가 되었나요?");

        if (text){
            document.querySelector(".text2").innerHTML = "오늘 공부할 준비가 되었습니다."
        } else {
            document.querySelector(".text2").innerHTML = "오늘 몸이 안 좋아요!!"
        }
    });
}

03. 브라우저 객체 : window.prompt() : 입력창

여기는 텍스트 영역입니다.

클릭하면 알림창을 표시합니다.

{
    document.querySelector(".btn3-1").addEventListener("click", function(){
        const text = prompt("오늘 공부할 준비가 되었나요?");

        document.querySelector(".text3").innerHTML = text; 
    });
}

04. innerWidth() / innerHeight()

클릭하면 브라우저 화면의 가로 값(innerWidth)을 가져옵니다. 클릭하면 브라우저 화면의 세로 값(innerHeight)을 가져옵니다. 클릭하면 브라우저 전체의 가로 값(outerWidth)을 가져옵니다. 클릭하면 브라우저 전체의 세로 값(outerHeight)을 가져옵니다. 클릭하면 브라우저 윗쪽의 위치 값(screenTop)을 가져옵니다. 클릭하면 브라우저 왼쪽의 위치 값(screenLeft)을 가져옵니다. 클릭하면 브라우저 윗쪽의 위치 값(screenY)을 가져옵니다. 클릭하면 브라우저 왼쪽의 위치 값(screenX)을 가져옵니다.

{
    const btn1 = document.querySelector(".btn4-1");
    const btn2 = document.querySelector(".btn4-2");
    const btn3 = document.querySelector(".btn4-3");
    const btn4 = document.querySelector(".btn4-4");
    const btn5 = document.querySelector(".btn4-5");
    const btn6 = document.querySelector(".btn4-6");
    const btn7 = document.querySelector(".btn4-7");
    const btn8 = document.querySelector(".btn4-8");

    const innerW = window.innerWidth;
    const innerH = window.innerHeight;
    const outerW = window.outerWidth;
    const outerH = window.outerHeight;
    const screenT = window.screenTop;
    const screenL = window.screenLeft;
    const screenY = window.screenY;
    const screenX = window.screenX;

    btn1.addEventListener("click", () => {
        document.querySelector(".text4-1").innerHTML = "당신이 보고 있는 브라우저의 화면 가로 값(innerWidth)은" + innerW + "px 입니다.";
    });
    btn2.addEventListener("click", () => {
        document.querySelector(".text4-2").innerHTML = "당신이 보고 있는 브라우저의 화면 세로 값(innerHeight)은" + innerH + "px 입니다.";
    });
    btn3.addEventListener("click", () => {
        document.querySelector(".text4-3").innerHTML = "당신이 보고 있는 브라우저의 전체 가로 값(outerWidth)은" + outerW + "px 입니다.";
    });
    btn4.addEventListener("click", () => {
        document.querySelector(".text4-4").innerHTML = "당신이 보고 있는 브라우저의 전체 세로 값(outerHeight)은" + outerH + "px 입니다.";
    });
    btn5.addEventListener("click", () => {
        document.querySelector(".text4-5").innerHTML = "당신이 보고 있는 브라우저의 윗쪽 위치 값(screenTop)은" + screenT + "px 입니다.";
    });
    btn6.addEventListener("click", () => {
        document.querySelector(".text4-6").innerHTML = "당신이 보고 있는 브라우저의 왼쪽 위치 값(screenLeft)은" + screenL + "px 입니다.";
    });
    btn7.addEventListener("click", () => {
        document.querySelector(".text4-7").innerHTML = "당신이 보고 있는 브라우저의 윗쪽의 가로 값(screenY)은" + screenY + "px 입니다.";
    });
    btn8.addEventListener("click", () => {
        document.querySelector(".text4-8").innerHTML = "당신이 보고 있는 브라우저의 왼쪽의 가로 값(screenX)은" + screenX + "px 입니다.";
    });

    window.addEventListener("resize", () => {
        const innerW = window.innerWidth;
        const innerH = window.innerHeight;
        const outerW = window.outerWidth;
        const outerH = window.outerHeight;
        const screenT = window.screenTop;
        const screenL = window.screenLeft;
        const screenY = window.screenY;
        const screenX = window.screenX;

        document.querySelector(".text4-1").innerHTML = "당신이 보고 있는 브라우저의 화면 가로 값(innerWidth)은" + innerW + "px 입니다.";
        document.querySelector(".text4-2").innerHTML = "당신이 보고 있는 브라우저의 화면 세로 값(innerHeight)은" + innerH + "px 입니다.";
        document.querySelector(".text4-3").innerHTML = "당신이 보고 있는 브라우저의 전체 가로 값(outerWidth)은" + outerW + "px 입니다.";
        document.querySelector(".text4-4").innerHTML = "당신이 보고 있는 브라우저의 전체 세로 값(outerHeight)은" + outerH + "px 입니다.";
        document.querySelector(".text4-5").innerHTML = "당신이 보고 있는 브라우저의 윗쪽 위치 값(screenTop)은" + screenT + "px 입니다.";
        document.querySelector(".text4-6").innerHTML = "당신이 보고 있는 브라우저의 왼쪽 위치 값(screenLeft)은" + screenL + "px 입니다.";
        document.querySelector(".text4-7").innerHTML = "당신이 보고 있는 브라우저의 윗쪽의 가로 값(screenY)은" + screenY + "px 입니다.";
        document.querySelector(".text4-8").innerHTML = "당신이 보고 있는 브라우저의 왼쪽의 가로 값(screenX)은" + screenX + "px 입니다.";
    });
}