1cm

자바 프로그래밍_Day_60_자바스크립트 내장객체, BOM, DOM 본문

국비지원_Java/Java Programming_1

자바 프로그래밍_Day_60_자바스크립트 내장객체, BOM, DOM

dev_1cm 2022. 7. 30. 17:18
반응형

 

2021. 11. 11

 

 

 

> 자바스크립트 내장객체 : Date 객체

   -> 날짜를 관리하는 객체

var date = new Date(); // 현재 날짜 시간
var date = new Date(‘월 일‘);
var date = new Date(‘월 일, 년도‘);
var date = new Date(‘월 일, 년도 시간(시:분:초)’);

 

메소드 내용
get/setFullYear()
년도 반환 / 년도 저장
get/setMonth()
월 (0:1월 ~ 11:12월)
get/setDate()
일(1일 ~ 31일)
get/setDay()
요일(0:일요일 ~ 6:토요일)
get/setHours()
시간(0~23시)
get/setMinutes()
분(0~59분)
get/setSeconds()
 초
get/setMilliseconds()
밀리세컨초(0~999)
getTimezoneOffset()
표준시와 현재지역 차이
get/setTime()
1970-01-01자정 기준으로 밀리세컨드

 

 

 

 

> 실습 코드와 출력 결과

 

   -> 06_내장객체.html

    <h2>Date 객체</h2>

    <button id="btn4">실행 확인</button>
    <div id="area3" class="area"></div>

 

 

 

   -> 06_내장객체.js

// Date 객체
let btn4 = document.getElementById('btn4');

btn4.addEventListener('click', () => {
    let area = document.getElementById('area3');

    // Date 객체를 생성하는 방법
    let date1 = new Date();
    let date2 = new Date(1636591312184);
    let date3 = new Date('2021/11/11/09:28:00');
    let date4 = new Date(2021, 10, 11, 9, 31, 59);  // 월은 0부터 시작

    console.log(date1);

    area.innerHTML = '';
    area.innerHTML += `date1 : ${date1}<br>`;
    area.innerHTML += `date2 : ${date2}<br>`;
    area.innerHTML += `date3 : ${date3}<br>`;
    area.innerHTML += `date4 : ${date4}<br><br>`;

    // Date 객체의 메소드 호출
    area.innerHTML += `${date1.getFullYear()}<br>`;
    area.innerHTML += `${date1.getMonth() + 1}<br>`;    // 월은 0부터 시작
    area.innerHTML += `${date1.getDate()}<br>`;
    area.innerHTML += `${date1.getDay()}<br>`;  // 0: 일요일 ~ 6: 토요일
    area.innerHTML += `${date1.getHours()}<br>`;
    area.innerHTML += `${date1.getMinutes()}<br>`;
    area.innerHTML += `${date1.getSeconds()}<br>`;
    area.innerHTML += `${date1.getMilliseconds()}<br><br>`;

    // 1970년 1월 1일 00시를 기준으로 현재 시간에 대한 밀리 세컨드 값을 반환한다.
    area.innerHTML += `${date1.getTime()}<br>`;
    // 표준시와 Date 객체에 지정된 로컬 시간과의 차이를 분 단위로 반환한다.
    area.innerHTML += `${date1.getTimezoneOffset() / 60}<br>`;
    area.innerHTML += `${date1.toDateString()}<br>`;
    area.innerHTML += `${date1.toTimeString()}<br>`;
    area.innerHTML += `${date1.toUTCString()}<br>`;
    area.innerHTML += `${date1.toISOString()}<br>`;
    area.innerHTML += `${date1.toLocaleString()}<br>`;
    area.innerHTML += `${date1.toLocaleDateString()}<br>`;
    area.innerHTML += `${date1.toLocaleTimeString()}<br>`;
    area.innerHTML += `${date1.toLocaleString('en-US')}<br>`;
    area.innerHTML += `${date1.toLocaleDateString('en-US')}<br>`;
    area.innerHTML += `${date1.toLocaleTimeString('en-US')}<br>`;
});

 

 

 

 

> 출력 결과

 

 

   -> Date 객체 '실행 확인' 버튼 누른 후 출력 결과

 

 

 

 

BOM

 

 

> BOM(Browser Object Model)

 

   -> 브라우저 모든 각종 요소들을 객체화 시킨 것

 

 

 

 

> window 객체

   -> 브라우저 창에 대한 설정을 하는 객체로 자바스크립트에서의 최상위 객체

   -> 생성되는 모든 객체는 window객체 하위에 존재

window.open(‘주소’, ‘이름 또는 open방식’, ‘형태‘);

 

   -> 형태 옵션

height
윈도우 높이
 값
width
윈도우 너비
 값
location
주소 입력 창
yes | no | 1 | 0
menubar
메뉴 유무
resizable
화면크기 조절
status
상태표시줄
toolbar
툴바 표시

 

 

 

> window 객체 메소드

메소드 내용
moveBy(x,y)
윈도우 위치조정(상대)
moveTo(x,y)
윈도우 위치조정(절대)
resizeBy(x,y)
윈도우 크기조정(상대)
resizeTo(x,y)
윈도우 크기조정(절대)
scrollBy(x,y)
스크롤 위치이동(상대)
scrollTo(x,y)
스크롤 위치이동(절대)
focus()
윈도우에 초점 맞춤
blur()
윈도우에 초점 제거
close()
윈도우 닫기
setTimeout(함수, 시간(ms))
일정시간 후 함수를 한번 실행 / id값 리턴
setInterval(함수, 시간(ms))
일정시간마다 함수를 반복 실행 / id값 리턴
clearTimeout(id)
setTimeout() 함수 실행 종료
clearInterval(id)
setInterval() 함수 종료

 

 

 

 

> window.onload 속성

   -> 윈도우 객체가 로드가 완료되면 자동으로 onload에 설정되어 있는 함수를 실행시키는 속성

* 윈도우 객체가 로드가 완료되었다는 건 모든 태그가 화면에 나타난 때를 말함

 

window.onload = function(){로직 구성};
또는
작성된 함수 호출;

 

 

 

 

> 실습 코드와 출력 결과

 

 

   -> 07_BrowserObjectModel.html

<!DOCTYPE html>
<html lang="ko">
<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>BOM(Browser Object Model)</title>
    <style>
        .area {
            border: 1px solid;
            margin-top: 5px;
            width: 500px;
            height: 300px;
            overflow: scroll;
        }

        #timer {
            font-size: 2em;
            color: brown;
        }

        #second {
            font-size: 3.5em;
            color: darkblue;
        }
    </style>
</head>
<body>
    <h1>BOM(Browser Object Model)</h1>

    <hr>

    <h2>window 객체</h2>
    <p>
        window 객체는 자바스크립트의 최상위 객체이며, 브라우저 내의 모든 요소들과 객체를 포함한다.<br>
        BOM : location 객체, navigator 객체, history 객체, screen 객체 <br>
        DOM : document 객체
    </p>

    <h3>[window.]open()</h3>

    <button id="btn1">실행 확인</button>
    
    <script src="./07_BrowserObjectModel.js"></script>
    
    <br><br><br><br><br>
</body>
</html>

 

 

 

   -> 07_BrowserObjectModel.js

// window 객체
// 1) window.open()
let btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
    // window.open();   // 새탭
    // window.open('https://www.naver.com');
    // window.open('https://www.naver.com', 'naver');

    // 특성의 경우 브라우저마다 다르게 동작하기 때문에 정상적으로 동작하는지는 꼭 확인해야 한다.
    window.open('https://www.naver.com', 'naver', 'width=500', 'height=600', 'resizable=no')
});

 

 

 

 

 

> 출력 결과

   -> window 객체 : window.open() '실행 확인' 버튼 눌렀을 시 새창으로 네이버가 뜨게 된다.

 

 

 

 

 

 

 

   -> 07_BrowserObjectModel.html

    <h3>
        window 객체의 타이머(timer) 관련 메소드
    </h3>
    <p>
        특정 함수를 일정시간이 경과된 이후에 호출할 수 있도록 제공되는 함수를 타이머라 한다.
    </p>

    <h4>window.setTimeout()</h4>
    <p>
        일정 시간이 경과된 이후에 매개값으로 전달된 콜백 함수를 단 한 번만 실행한다.
    </p>

    <button id="btn2">실행 확인</button>
    
    <h4>window.setInterval()</h4>
    <p>
        일정 시간이 경과된 이후에 매개값으로 전달된 콜백 함수를 반복해서 실행한다.
    </p>
    
    <button id="btnStart">실행</button>
    <button id="btnStop">종료</button>

    <div id="area1" class="area"></div>
    
    <hr>

 

 

 

   -> 07_BrowserObjectModel.js

// 2) window.setTimeout()
let btn2 = document.getElementById('btn2');

btn2.addEventListener('click', () => {
    let timerId = 0;
    let newWindow = window.open();
    
    // 새로운 창에서의 alert
    newWindow.alert('3초 후에 이 페이지는 종료됩니다.');

    // 일정 시간 후에 콜백 함수를 한 번 실행
    timerId = window.setTimeout(() => {
                newWindow.close()
            }, 3000);

    console.log(timerId);

    // 타이머 id를 전달하면 해당 id의 타이머를 취소할 수 있다.
    // clearTimeout(timeId);
});

// 3) window.setInterval()
let timerId = 0;
let btnStart = document.getElementById('btnStart');
let btnStop = document.getElementById('btnStop');

btnStart.addEventListener('click', () => {
    let area = document.getElementById('area1');

    // 일정 시간마다 콜백 함수를 반복 실행
    timerId = window.setInterval(() => {
        let date = new Date();

        area.innerHTML = `<span id='timer'>${date.getHours()} : ${date.getMinutes()} : <span id='second'>${date.getSeconds()}</span></span>`;
    }, 1000);
});

btnStop.addEventListener('click', () => {
    let area = document.getElementById('area1');

    console.log(timerId);

    window.clearInterval(timerId);
    area.innerHTML = '';
});

 

 

 

 

> 출력 결과

setTimeout() '실행 확인' 버튼 누르기 전

 

   -> setTimeout() 출력 결과

 : callback함수 적용으로 alert이 정상적으로 출력, 확인 버튼을 누르게 되면 3초 후 페이지가 종료된다.

 : console.log를 사용해 console에도 timerId기록될 수 있게 해주었다.

 

 

 

 

실행 버튼 눌렀을 시 왼쪽 화면처럼 시간 출력 / 종료 버튼 눌렀을 시 오른쪽 화면처럼 시간이 사라진다.

 

   -> setInterval() 출력 결과

 : 실행버튼을 누르면 콜백함수를 반복실행 해준다.

 

 

 

 

 

 

 

> BOM : screen 객체

  -> client 운영체제 화면에 대한 속성 값을 가지는 객체

  -> 속성

height
화면 높이
width
화면 너비
availWidth
실제 화면에서 사용 가능한 너비
availHeight
실제 화면에서 사용 가능한 높이
colorDepth
사용 가능한 색상수
pixelDepth
한 픽셀 당 비트 수

 

 

 

 

> BOM : location 객체

  -> 브라우저의 주소 표시줄(URL)과 관련된 객체로 프로토콜 종류, 호스트 이름, 문서 위치 등의 정보를 가짐

  -> 속성

 

hash
앵커 이름(#~)
host
호스트 이름과 포트번호
hostname
호스트 이름
href
문서 URL주소
origin
호스트이름, 프로토콜, 포트번호
pathname
디렉토리 경로
port
포트번호
protocol
프로토콜의 종류
search
요청 매개변수(?~~)

 

 

 

  -> 메소드

메소드 내용
assign(‘주소’)
 새로운 페이지 로드 * 뒤로 가기 가능
reload()
현재 문서를 다시 로드
replace(‘주소’)
현재페이지를 새 페이지로 교체 * 뒤로 가기 불가

 

 

 

 

 

> BOM : navigator 객체

  -> 브라우저에 대한 정보를 가지는 객체

  -> 속성

 

appCodeName
브라우저 코드명
appName
브라우저 이름
appVersion
브라우저 버전
platform
사용중인 운영체제
useAgent
브라우저 전체정보
cookieEnabled
쿠키가능성을 확인(true/false)
geolocation
위도와 경도를 출력
language
브라우저 언어
online
브라우저가 온라인/오프라인 환경인지 확인(true/false)
product
브라우저 엔진이름

 

 

 

 

 

 

 

> 실습 코드와 출력 결과

 

 

   -> 07_BrowserObjectModel.html

    <h2>BOM(Browser Object Model)</h2>
    <h3>location 객체</h3>
    <p>
        브라우저 주소 표시줄과 관련된 객체
    </p>
    
    <button id="btn3">실행 확인</button>
    <div id="area2" class="area"></div>

 

 

 

 

 

   -> 07_BrowserObjectModel.js

// BOM
// 1) location 객체
let btn3 = document.getElementById('btn3');

btn3.addEventListener('click', () => {
    let area = document.getElementById('area2');

    area.innerHTML = '<h4>location 객체</h4>';

    for (const key in location) {
        area.innerHTML += `<b>key</b> : ${key}<br><b>value</b> : ${location[key]}<br><br>`;
    }
});

 

 

 

 

 

> 출력 결과

 

 

브라우저의 정보를 한 번에 가지고 온다.

 

 

 

 

   -> 07_BrowserObjectModel.html

    <h4>location.reload()</h4>
    <p>
        페이지를 새로 고침하는 메소드
    </p>
    
    <!-- 크롬에서는 현재 위치에서 새로고침됨(브라우저 특성) -->
    <button onclick="location.reload()">새로고침</button>

    <!-- 현재 페이지의 주소값을 다시 대입하여 새로고침 -->
    <button onclick="location.href = location.href">새로고침</button>

    <!-- 현재 위치를 location으로 다시 대입하여 새로고침 -->
    <button onclick="location = location">새로고침</button>
    
    <h4>location.href</h4>
    <p>
        현재 페이지의 URL 주소를 가지고 있는 속성으로 <br>
        해당 속성의 값을 변경해서 페이지를 이동할 수 있다.
    </p>
    
    <button onclick="location.href = 'https://www.naver.com';">네이버로 이동</button>
    <button onclick="location = 'https://www.naver.com';">네이버로 이동</button>
    
    <h4>location.assign(), location.replace()</h4>
    <p>
        두 메소드 모두 페이지를 이동시키지만 replace()는 assign()과 다르게 history에 기록되지 않는다.
    </p>
    
    <button onclick="location.assign('https://www.google.com');">구글로 이동</button>
    <button onclick="location.replace('https://www.google.com');">구글로 이동</button>
    
    <h3>history 객체</h3>
    <p>
        브라우저의 방문 기록과 관련된 객체
    </p>
    <button onclick="history.back();">back()</button>
    <button onclick="history.forward();">forward()</button>
    
    <!-- 위 메소드의 기능을 go() 메소드로 구현 -->
    <button onclick="history.go(-1)">go(-1)</button>
    <button onclick="history.go(1)">go(1)</button>

 

 

 

 

> 출력 결과

 

 

 

 

 

 

 

 

   -> 07_BrowserObjectModel.html

    <h3>navigator 객체</h3>
    <p>
        웹 페이지를 실행하고 있는 브라우저에 대한 정보를 가지고 있는 객체
    </p>
    
    <button id="btn4">실행 확인</button>
    <div id="area3" class="area"></div>

 

 

 

   -> 07_BrowserObjectModel.js

// 3)navigator 객체
let btn4 = document.getElementById('btn4');

btn4.addEventListener('click', () => {
    let area = document.getElementById('area3');

    console.log(navigator);

    area.innerHTML = '<h4>navigator 객체</h4>';

    for (const key in navigator) {
        area.innerHTML += `<b>key</b> : ${key}<br><b>value</b> : ${navigator[key]}<br><br>`;
    }
});

 

 

 

> 출력 결과

(좌) 실행 확인 버튼 누르기 전 / (우) 실행 확인 버튼 누른 후 - console에도 입력될 수 있게 넣어줬다.

-> 브라우저 정보를 왜 갖고 있을까?

 : navigator 객체는 브라우저나 OS정보를 담고 있는데, 고객정보나 통계용, 브라우저별로 동작이 다른 경우 그에 맞춰 활용이 가능하다.

 

 

 

 

 

 

   -> 07_BrowserObjectModel.html

    <h3>screen 객체</h3>
    <p>
        운영체제의 화면(모니터)의 정보를 가지고 있는 객체
    </p>
    
    <button id="btn5">실행 확인</button>
    <div id="area4" class="area"></div>

 

 

 

   -> 07_BrowserObjectModel.js

// 4) screen 객체
let btn5 = document.getElementById('btn5');

btn5.addEventListener('click', () => {
    let area = document.getElementById('area4');

    console.log(screen);

    area.innerHTML = '<h4>screen 객체</h4>';

    for (const key in screen) {
        area.innerHTML += `<b>key</b> : ${key}<br><b>value</b> : ${screen[key]}<br><br>`;
    }
});

 

 

 

> 출력 결과

 

 

 

 

 

 

 

 

 

 

 

DOM

> DOM(Document Object Model)

   -> HTML에 있는 태그를 객체화하여 자바스크립트에서 다룰 수 있게 한 것으로 모든 노드 객체에 접근할 수 있는 요소와 메소드 제공

 

> 노드

   -> HTML에 있는 태그를 구조화(트리)하였을 때 각각의 태그가 노드

 

> 요소 노드와 텍스트 노드

 

   -> 요소 노드(Elements Node) : 태그 그 자체 의미

   -> 텍스트 노드(Text Node) : 태그에 기록되어 있는 문자

* 텍스트 노드를 가지는 태그(h?, p 등)와 가지지 않는 태그(img 등)가 있음

 

* Elements Node 관련 객체

 

HTML DOM Element Object

W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

www.w3schools.com

 

 

 

 

 

 

 

 

 

> 텍스트 노드 있는 문서 객체 작성

   -> 요소 노드와 텍스트 노드를 생성하고 이를 body노드의 자식으로 포함 가능

 : 요소노드 생성 -> 텍스트 노드 생성 -> 요소 노드에 텍스트 노드 추가 -> body객체에 요소 노드 추가

 

 

   -> 메소드

document.createElement(태그명)
요소노드 생성
document.createTextNode(내용)
텍스트노드 생성
객체명.appendChild(node)
태그에 자손으로 노드를 추가

 

 

 

> 텍스트 노드 없는 문서 객체 작성

   -> 요소 노드 생성하고 속성을 설정한 후 이를 body노드의 자식으로 포함 가능

 : 요소노드 생성 -> 생성된 노드 속성 설정 -> body객체에 요소 노드 추가

 

 

   -> 메소드

객체명(변수).속성=속성값
태그 속성값 설정
객체명.setAttribute(속성명, 속성값)
태그에 속성값 설정
객체명.getAttribute(속성명)
태그 속성확인
객체명.appendChild(node)
태그에 자손으로 노드를 추가

 

 

 

 

 

> 문서 스타일 수정

   -> style객체를 이용하여 문서의 스타일 변경

 

: 객체 명.style.속성 명 = 속성 값;

* 자바스크립트에서 식별자에 ‘-’를 쓰지 못하기 때문에 속성 명이 CSS에서 쓰는 것과 다른 부분이 있음(ex. background-color -> backgroundColor)

 

 

 

 

> 문서 객체 제거

   -> 페이지 내 작성된 문서의 객체(태그)를 제거하는 것

 

   -> 메소드

document.removeChild(객체명)
body태그 자손 태그 제거
객체명.parentNode.removeChild(객체명)
제거할 객체를 기준으로 그 상위 객체로 가서 해당객체를 삭제

 

 

 

 

 

 

> 실습 코드와 출력 결과

 

   -> 08_DocumentObjectModel.html

<!DOCTYPE html>
<html lang="ko">
<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>DOM(Document Object Model)</title>
    <style>
        .area {
            border: 1px solid;
            margin-top: 5px;
            width: 500px;
            height: 300px;
            overflow: scroll;
        }
    </style>
</head>
<body>
    <h1>DOM(Document Object Model)</h1>

    <hr>

    <h2>Node 객체</h2>
    <h3>텍스트 노드가 있는 요소 노드 생성</h3>

    <button id="btn1">실행 확인</button>
    <div id="area1" class="area"></div>
    
    <script src="./08_DocumentObjectModel.js"></script>
    <br><br><br><br><br>
</body>
</html>

 

 

 

 

   -> 08_DocumentObjectModel.js

// 텍스트 노드가 있는 요소 노드 생성
let btn1 = document.getElementById('btn1');

btn1.addEventListener('click', () => {
    // element 생성
    let title = document.createElement('h3');

    // 텍스트 노드 생성
    let textNode = document.createTextNode('안녕하세요.');

    title.appendChild(textNode);
    document.getElementById('area1').appendChild(title);

    // 아래 코드는 동일한 결과로 출력이 된다.
    // document.getElementById('area1').innerHTML = '<h3>안녕하세요.</h3>';
});

 

 

 

 

 

> 출력 결과

(좌) 실행 확인 전 / (우) 실행 확인 후 (실행 확인을 누르는 수 만큼 텍스트 노드가 추가된다.)

 : 텍스트 노드가 있는 요소 노드를 추가해줬다.

-> innerHTML과 동일한 출력 결과가 보여진다. but id 속성을 넣어주는 방식이 프로그래밍적으로 달라지는 것이 텍스트 노드와 innerHTML의 차이점이다.

 

 

 

 

 

반응형

'국비지원_Java > Java Programming_1' 카테고리의 다른 글

자바 프로그래밍_Day_59_자바스크립트 객체, 내장객체  (0) 2022.06.01
자바 프로그래밍_Day_58_자바스크립트 함수, 객체  (0) 2022.06.01
자바 프로그래밍_Day_57_자바스크립트 기본문법, 배열, 함수  (0) 2022.06.01
자바 프로그래밍_Day_56_자바스크립트 기본 문법  (0) 2022.06.01
자바 프로그래밍_Day_55_자바스크립트개요  (0) 2022.05.31
'국비지원_Java/Java Programming_1' Related Articles more
Comments