JavaScript

객체

내장 객체
브라우저 객체
문서 객체(DOM)
사용자 정의 객체

브라우저 객체 모델(Browser Object Model)

자바스크립트에서는 웹페이지를 구성하는 HTML 태그의 모든 요소와 웹 브라우저를 구성하는 요소들을 객체로 정의하여 제공
객체들을 계층구조로 분류

대표적인 브라우저 객체

웹 브라우저를 대상으로 이루어진 객체
new 연산자를 통해서 생성하지 않고 그냥 사용
- ex) document.write()
window: 창
document: 문서
history 객체: 웹 브라우저 기록 정보
location 객체: 주소 정보
navigation 객체: 웹 브라우저 정보(종류 판별 등)

브라우저 객체의 계층 구조

window객체

창에 대한 전반적인 상황을 제어하는 최상위 객체
자바스크립트에서 사용되는 모든 객체는 window 객체의 하위에 존재
navigator 객체만 제외하고 모든 객체는 window 객체를 통해서 접근하여 사용
window 객체는 생략 가능
- window.document.pic.src = "image.jpg";
- 문서 내에서 name 속성이 pic인 객체의 src 속성 변경
- <img name = "pic" src = "a.jpg">

window 객체의 주요 속성

yes/no로 지정
- toolbar: 도구 모음 표시 여부 설정
- location: URL 주소 표시줄 표시 여부 설정
- status: 상태 바 표시 여부 설정
- menubar: 메뉴 표시줄 표시 여부 설정
- scrollbars: 스크롤 바 표시 여부 설정
- directories: 디렉터리 바 표시 설정
- resizable: 창의 크기 조정 가능 여부 설정
픽셀수로 지정
- height: 창의 세로 길이를 필셀 단위로 설정
- width: 창의 가로 길이를 필셀 단위로 설정

window 객체의 주요 메소드

open() : 새로운 창을 만들어 화면에 출력하는 기능
close() : 열린 창을 닫는 기능
setTimeout() : 일정 시간이 지난 후에 함수 한 번 호출 기능
clearTimeout() : setTimeout()로 설정된 내용 정지 기능
setInterval() : 일정 시간 간격 후 명령 수행 기능(함수 여러 번 호출 가능 - 애니메이션 효과에 사용)
clearInterval() : setInterval()로 설정된 내용 정지 기능

windlow 객체의 open() 메소드

window.open("URL", "창이름", "창속성");
URL : 웹페이지 주소나 HTML 파일명. 빈 값이면 새로운 창을 만들어서 오픈
창 이름 : 새로 만들어지는 창 이름(임의로 작성)
창 속성 : 창의 모양이나 특징
window.open("test.html", "test", "width=200, height=200, status=yes, scrollbars=yes, resizable=yes"); // 기존의 test.html 문서 열기
window.open(“”, “newWin”, “width=400, height=150”); // 새로운 창을 만들어서 열기

window 객체의 open() 메소드 예제1

기존의 문서 열기

bigImage.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript">
    </script>
</head>
<body>
    <img src="image/고흐.jpg">
</body>
</html>

windowOpen.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript"> 
        function showBigImage() {
            window.open("bigImage.html", "bigWin", "width=600, height=800, left=200, top=50");
        }
    </script>
</head>
<body>
    <center>
        그림에 마우스를 올리면 <br>
        그림을 크게 볼 수 있습니다. <br> <br>
        <img src="image/고흐.jpg" widht="118" height="146" onmouseover="showBigImage()">
    </center>
</body>
</html>

수행 결과

windowOpen을 실행시키고, 그림 위에 마우스를 올리게 되면 bigImage 파일이 열리면서 큰 이미지를 볼 수 있다.

window 객체의 open() 메소드 예제1

새로운 창 만들어서 열기

windowopen2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript"> 
        // 새로운 창 만들어서 열기
        // 새로운 창에 문자열과 버튼 출력 / 버튼 클릭 시 창 닫는 기능 포함
        function openNewWindow() {
            var createWin = window.open("", "newWin", "width=400, height=150");
            createWin.document.write("새로 만든 윈도우 입니다.<br>");
            createWin.document.write("<button onClick='window.close()'>닫기</button>")
        }

        function openWindow() {
            window.open("windowOpen.html", "bigWin",
             "width=200, height=200, left=200, top=50, status=yes, scrollbars=yes, resizable=yes");
        }
    </script>
</head>
<body>
    <button onclick="openWindow()">Big Image 열기</button>
    <button onclick="openNewWindow()">새 창 열기</button>
</body>
</html>

수행 결과

새 창 열기

Big Image 열기

window 객체의 타이머 관련 함수

setTimeout() / clearTimeout()
setinterval() / clearinterval()

setTimeout()

setTimeout('호출함수', 지연시간);
시간 설정
일정 시간이 지난 후에 호출 함수를 1번만 실행
- setTimeout('winClose()', 1000); // 1초 후에 winClose() 함수 호출

clearTimeout()

clearTimeout(타이머ID);
시간 설정 해제
setTimeout() 메소드가 반환하는 타이머ID 받아서 타이머 ID에 해당되는 타이머 설정 해제
타이머 ID = setTimeout('호출함수', 지연시간);

timerID = setTimeout('showTime()', 1000); // 타이머 설정
clearTimeout(timerID); // 타이머 설정 해제

setTimeout() 예제1

시작할 때, msgWindow 창이 열리고,3초 후에 닫힘

setTimeout.html : msgWindow 열기

3초 후에 새 창이 닫히면
- 로드하자마자 열린 공지사항 창이 3초 내에 자동으로 닫혔다고 표기하기

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>JavaScript setTimeout() 메소드</title>
        <script type="text/javascript">
            function openInfo(){
                window.open("msgWindow.html", "setTimeout", "width=300, height=200");
            }

            // msgWindow 창이 닫히고 부모창이 setTimeout.html 창이 포커스를 받을 때 호출
            function showMsg() {
                document.write("로드 하자마자 열린 공지사항 창이 <br> 3초 내에 자동으로 닫혔습니다.");
            }
        </script>
    </head>
    <body onload="openInfo()" onfocus="showMsg()">
        부모창입니다. (opener에 해당)
    </body>
</html>

msgWindow.html : 3초 타임아웃 설정

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript"> 
        function winClose() {
            window.close();
            opener.focus(); // 현재 창을 연 부모 창에 포커스 주기
        }
    </script>
</head>
<body onload="setTimeout('winClose()',3000)">
    공지사항 <br>
    이 창은 3초 후에 자동으로 닫힘니다
</body>
</html>

setInterval()

setInterval('호출함수', 지연시간);
일정 시간 간격 안에 반복 실행 : 지연 시간으로 설정된 시간 간격으로 반복 호출
setInterval('showTime()', 1000)'

clearInterval()

clearInterval(타이머ID);
setInterval()로 시간 설정한 것 해제
타이머 ID = setInterval('호출함수', 지연시간);

timerID = setInterval('showTime()', 1000); // 반복 설정
clearInterval(timerID); // 반복 해제

SetInterval() 연습문제1

setInterval.html

[시간출력] 버튼 눌러서 1초 간격으로 시간 출력
[시간정지] 버튼 눌러서 정지
오전 11시 9분 42초~~ 형식으로

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript">
        function showTime(){
            var now = new Date();

            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var amPm;

            var amPm = "오전";

            if (hour == 24) {
                hour -= 24;
            } else if (hour >= 12) {
                amPm = "오후";
                if (hour > 12) {
                    hour -= 12;
                }
            }

            var time = amPm + " " + hour + "시 " + minute + "분 " +     second + "초";
            timeShow.innerHTML = time;
        }
    </script>
</head>
<body>
    <button onClick="timerID = setInterval('showTime()', 1000)">시간 출력</button>
    <button onClick="clearInterval(timerID)">시간 정지</button>
    <h2 id="timeShow">시간 출력</h2>
</body>
</html>

SetInterval() 연습문제2

1초 간격으로 이미지 1개씩 출력 (총 10개 출력) 프로그램 작성
start() 함수 : "이미지 10개 출력" 알림창
showImage()
- 이미지 10개 출력. 사과, 폭탄 번갈아가면서
- 10개 출력 후 정지

setInterval2.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <script type="text/javascript"> 
        var count = 0;

        function start() {
            alert("이미지 10개 출력");
            timerID = setInterval("showImage()", 1000);
        }

        function showImage() {
            count++;
            if(count % 2 == 0){
                document.write("<img src='image/apple.png'>");
            }else {
                document.write("<img src='image/bomb.png'>");
            }

            if(count==10){
                clearInterval(timerID);
                aler("이미지 출력 완료");
            }
        }
    </script>
</head>
<body onload="start()">
</body>
</html>

SetInterval() 연습문제3

[Count Down Start] 버튼 누르면 0.5초 간격으로 이미지 변경
- bomb1.jpg ~ bomb11.jpb
- 숫자도 10, 9, ... 로 변경

setInterval3.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JavaScript</title>
    <style>
        div {margin:0 auto; width:100%; text-align:center;}
    </style>
    <script type="text/javascript">
        var imgCount = 1;    
        var countNum = 10;

        function startCount() {
            timerID = setInterval('showImg()', 500);
        }

        function showImg() {
            countH1.innerHTML = countNum;
            bombImg.src = `image/bomb${imgCount}.jpg`;

            imgCount++;
            countNum--;                

            if(imgCount == 12) {
                clearInterval(timerID);
                imgCount = 1;
                countNum = 10;
            }
        }
    </script>
</head>
<body>
    <div>
        <h1 id="countH1">10</h1>
        <img id="bombImg" src="image/bomb1.jpg" ><br><br>    
        <button id="btn" onClick="startCount()">카운트다운 시작</button>
    </div>
</body>
</html>

저작자표시 비영리 동일조건 (새창열림)

'Front > JavaScript' 카테고리의 다른 글

JavaScript - 문서 객체 모델(DOM) (0)	2021.12.10
JavaScript - 브라우저 객체 모델(history, location, navigation) (0)	2021.12.10
JavaScript - 내장함수(Math, Spring) (0)	2021.12.09
JavaScript - 내장함수(Date, Array) (0)	2021.12.09
JavaScript - 화살표 함수, 디폴트 매개변수 (0)	2021.12.09

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

여행하는 개발자

JavaScript - 브라우저 객체 모델(window)

JavaScript

객체

브라우저 객체 모델(Browser Object Model)

대표적인 브라우저 객체

브라우저 객체의 계층 구조

window객체

window 객체의 주요 속성

window 객체의 주요 메소드

windlow 객체의 open() 메소드

window 객체의 open() 메소드 예제1

bigImage.html

windowOpen.html

수행 결과

window 객체의 open() 메소드 예제1

windowopen2.html

수행 결과

window 객체의 타이머 관련 함수

setTimeout()

clearTimeout()

setTimeout() 예제1

setTimeout.html : msgWindow 열기

msgWindow.html : 3초 타임아웃 설정

setInterval()

clearInterval()

SetInterval() 연습문제1

setInterval.html

SetInterval() 연습문제2

setInterval2.html

SetInterval() 연습문제3

setInterval3.html

'Front > JavaScript' 카테고리의 다른 글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역

JavaScript - 브라우저 객체 모델(window)

JavaScript

객체

브라우저 객체 모델(Browser Object Model)

대표적인 브라우저 객체

브라우저 객체의 계층 구조

window객체

window 객체의 주요 속성

window 객체의 주요 메소드

windlow 객체의 open() 메소드

window 객체의 open() 메소드 예제1

bigImage.html

windowOpen.html

수행 결과

window 객체의 open() 메소드 예제1

windowopen2.html

수행 결과

window 객체의 타이머 관련 함수

setTimeout()

clearTimeout()

setTimeout() 예제1

setTimeout.html : msgWindow 열기

msgWindow.html : 3초 타임아웃 설정

setInterval()

clearInterval()

SetInterval() 연습문제1

setInterval.html

SetInterval() 연습문제2

setInterval2.html

SetInterval() 연습문제3

setInterval3.html

'Front > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바

개인정보

단축키

내 블로그

블로그 게시글

모든 영역