JS(Date, window, location, history 객체)

Date 내장 객체

Date 객체 만들기

// mydate에 현재 날짜 입력됨.
var mydate = new Date();

Date 객체의 주요 함수

함수명	설명
.getFullYear( )	현재 년도를 리턴
.getMonth( )	현재 월을 리턴(0=1월,1=2월…11=12월)
.getDate( )	현재 일을 리턴
.getDay( )	현재 요일을 리턴한다.(0=일,1=월…6=토)
.getHours( )	현재 시간을 리턴
.getMinutes( )	현재 분을 리턴
.getSeconds( )	현재 초를 리턴
.getTime( )	1970년1월1일0시0분0초부터현재까지의시간을1/1000초단위로 리턴한다.(TimeStamp)
.setYear(int);	1970년이상의년도를설정한다.
.setMonth(int);	월을 설정(0~11)
.setDate(int);	일을 설정
.setDay(int);	요일을 설정(0~6)
.setHours(int);	시를 설정
.setMinutes(int);	분을 설정
.setSeconds(int);	초를 설정
.setTime(int);	TimeStamp값으로시각을설정한다.

Date 객체활용(1) : 날짜, 시간 계산

• TimeStamp : 1970년 1월 1일 자정부터 지금까지 지난 시각을 초 단위로바꾼 값

// 날짜 객체생성
var theday = new Date(2020, 0, 1);    // 2020년 1월 1일
var today = new Date(2020, 6, 23);    // 2020년 7월 23일
var cnt = today.getTime() - theday.getTime();

// Math.floor은 소수점 이하를 절단하는 함수  
var day = Math.floor(cnt / (24 \* 60 \* 60 \* 1000));  
document.write("올해는 " + day + "일 지났습니다.");

/* 실행결과 */  
올해는 204일 지났습니다.

Date 객체활용(2) : 타이머 기능

• setInterval 함수는 다른 함수의 이름과 1/1000초 단위의 시간값을 파라미터로 설정하여
• 정해진 시간에 한번씩 파라미터로 전달된 함수를 반복적으로 호출.

function printTime() {
//현재시각
    var days = ["일", "월", "화", "수", "목", "금", "토"];
    var mydate = new Date();
    var yy = mydate.getFullYear();
    var mm = mydate.getMonth() + 1;
    var dd = mydate.getDate();
    var i = mydate.getDay();
    var day = days[i];
    var hh = mydate.getHours();
    var mi = mydate.getMinutes();
    var ss = mydate.getSeconds();

    // 한문장으로 병합
    var result = yy + "/" + mm + "/" + dd + "/" + day + "요일 " + hh + ":" + mi + ":" + ss;
    // id 속성값이 timer인 요소에게 결과 출력
    document.getElementById("timer").innerHTML = result;
}

function startTimer() {
    // printTime 함수를 1초에 한번씩 반복해서 자동 호출.
    setInterval(printTime, 1000);
}

Date 객체활용(3) : 남은 날짜 계산

/** 오늘부터 파라미터로 전달받은 날짜에 대한 d'day를 계산하여 리턴한다. */
function getDday(y, m, d) {
    // 오늘 날짜
    var today = new Date();
    // 파라미터로 받은 날짜
    var dday = new Date(y, m-1, d);
    // 두 날짜간의 차이를 구한다.
    var cnt = dday.getTime() - today.getTime();
    // 남은 날짜는 1시간이라도 1일로 계산해야 하므로, 연산결과를 올림한다.
    var n = Math.ceil(cnt / (24 * 60 * 60 * 1000));
    return n;
}
// 매년 12월 31일까지의 남은 날짜 계산하기
var date = new Date();
var y = date.getFullYear();
var dday = getDday(y, 12, 31);
document.write("<h1>올해는 앞으로 " + dday + "일 남았습니다.</h1>”);

---

Window 객체

window.open()함수

// 새로운 브라우저 창 열기(혹은 새로운 탭)
window.open("URL주소");

// 팝업창 형태로 열기
window.open("URL주소", "창이름", "옵션");

// 창 이름을 지정한 경우
// 창이름이 같기 때문에 여러번 눌러도 한 팝업창 안에서 새로고침 됨
window.open('http://www.naver.com','mywin','width=300, height=500, scrollbars=no, toolbar=no, menubar=no,status=no, location=no');

// 창 이름을 지정하지 않은 경우
// 클릭한 횟수만큼 팝업창이 열림
window.open('http://www.naver.com', '', 'width=300, height=500, scrollbars=no, toolbar=no, menubar=no, status=no, location=no');

href / onclick 속성의 충돌 방지

• href와 onclick이 동시에 작성하면 이벤트가 실행되기 전후에 href에 명시된 페이지로 이동하는 경우 발생.
• 이를 방지하기 위해 'return false;' 구문을 추가한다.

<a href="#" onclick= "open1(); return false;">새 창 열기 </a>

---

location 객체

• 웹 브라우저의 주소 표시줄을 제어
• 주소표시줄의 현재 주소 혹은 그 일부를 조회할 수 있으며, 변경도 가능.

document.write("<p>문서의 URL주소 : " + location.href + "</p>");
// 문서의 URL주소 : http://127.0.0.1:8080/07-JS/%EC%8B%A4%EC%8A%B5/js10/02-location.html
document.write("<p>호스트 이름과 포트 : " + location.host + "</p>");
// 호스트 이름과 포트 : 127.0.0.1:8080
document.write("<p>호스트 컴퓨터 이름 : " + location.hostname + "</p>");
// 호스트 컴퓨터 이름 : 127.0.0.1
document.write("<p>앵커 이름 : " + location.hash + "</p>");
// 앵커 이름 :
document.write("<p>디렉토리 이하 경로 : " + location.pathname + "</p>");
// 디렉토리 이하 경로 : /07-JS/%EC%8B%A4%EC%8A%B5/js10/02-location.html
document.write("<p>포트번호 부분 : " + location.port + "</p>");
// 포트번호 부분 : 8080
document.write("<p>프로토콜 종류 : " + location.protocol + "</p>");
// 프로토콜 종류 : http:
document.write("<p>URL 조회부분 : " + location.search + "</p>");
// URL 조회부분 :

location 객체활용(1) : 다른페이지로 이동

• 'location.href' 값에 다른 페이지의 URL을 대입하면 웹 브라우저의 페이지가 실제로 이동하게 된다.

// <script> 안에 입력
function goNaver() {
        if (confirm("네이버 ㄱㄱ?")) {
            location.href = "http://www.naver.com";
        }
    }

// <body> 안에 입력
<input type="button" value="네이버 ㄱㄱ" onclick="goNaver()" />

location 객체활용(2) : 페이지 새로고침

• location 객체 안에 포함된 reload()함수는 현재 페이지를 새로고침한다
• 페이지가 열리면서 onload()를 통해 5자리 일련번호를 생성 후, 재발급 버튼을 눌렀을때
• 새로고침처리를 하면 인증번호를 새로발급받는 효과

<script type="text/javascript">
    // 두 수 사이의 난수를 리턴하는 함수
    function random(n1, n2) {
        return parseInt(Math.random() * (n2 - n1 + 1)) + n1;
    }

    function authNo() {
        var value = "";
        for (var i = 0; i < 5; i++) { value += random(0, 9); } document.getElementById("auth").innerHTML = value;
    } // 페이지 새로고침 function refresh() { location.reload(); }
    </script>

<body onload="authNo()">
    <p>
        <!-- strong 태그 안이 자바스크립트 출력 부분 -->
        고객님의 인증번호는 <strong id="auth">00000</strong>입니다.
    </p>
    <!-- 페이지 새로고침 이벤트 호출 -->
    <input type="button" value="인증번호 새로 받기" onclick="refresh()" />
</body>

---

history 객체

// 이전 페이지로 이동
history.back();

// 다음 페이지로 이동
history.forward();

---

document 객체

특정 HTML요소를 객체 형태로 가져오기

document 객체는 HTML문서를 제어하기 위해서 특정 HTML태그 요소

var some_element = document.gerElementById("id이름");

// 객체화된 HTML요소의 속성을 사용하면 해당 태그에 속해있는
// 내용을 새롭게 설정하거나, 현재 내용을 읽어올 수 있음.
some_element.innerHTML = "<h1>Hello JavaScript</h1>";
var content = some_element.innerHTML;

Element 객체의 style 하위 객체

javascript안에서 객체화 된 HTML요소는 'style'이라는 하위 객체를 내장.
'style'객체를 이용해 javascript를 이용한 css제어 가능.

var some_element = document.getElementById("id이름");
some_element.style.(CSS속성)=("CSS적용값)";

// 구문단축
document.getElementById("id이름").style.(CSS속성)=("CSS적용값");

// 예)
// id가 "box1"인 요소의 width(넓이)를 "500px"로 지정
document.getElementById("box1").style.width="500px";

HTML요소의 CSS클레스 제어

var some_element = document.getElementById("id이름");
some_element.(class이름) = "CSS클래스이름";

// 구문단축
document.getElementById("id이름").(class이름) = "CSS클래스이름";

CSS제어 예제

<!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, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <title>Hello Javascript</title>
    <!-- javascript start -->
    <style type="text/css">
    .box1 {
        margin: 10px auto;
        border: 5px solid #ccc;
        padding: 30px;
        text-align: center;
    }

    .box2 {
        margin: 10px auto;
        border: 5px solid #ff00ff;
        background-color: #ff0;
        padding: 25px;
        text-align: left;
    }
    </style>
    <script type="text/javascript">
    function setFontColor(color) {
        // id값이 box인 요소
        var box = document.getElementById("box");
        // 글자 색생을 파라미터로 전달된 값으로 설정
        box.style.color = color;
    }

    function serBgColor(color) {
        // id값이 box인 요소의 CSS background-color 속성을 파라미터값으로 설정
        document.getElementById("box").style.backgroundColor = color;
    }

    function setWidth(width) {
        // id값이 box인 요소의 CSS width 속성을 파라미터값으로 설정
        document.getElementById("box").style.width = width;
    }

    function changeClass(cls) {
        // id값이 box인 요소의 클래스를 파라미터값으로 적용
        document.getElementById("box").className = cls;
    }
    </script>
    <!-- javascript end -->
</head>
<!-- 페이지 최초 로딩시, autoNo() 함수 호출 -->

<body>
    <h1>CSS 제어하기</h1>
    <div id="box" class="box1">
        <h1>테스트 영역.</h1>
    </div>
    <input type="button" value="(폰트) red" onclick="setFontColor('#f00')" />
    <input type="button" value="(폰트) green" onclick="setFontColor('#0f0')" />
    <input type="button" value="(폰트) blue" onclick="setFontColor('#00f')" />
    <input type="button" value="(배경) red" onclick="setBgColor('#f00')" />
    <input type="button" value="(배경) green" onclick="setBgColor('#0f0')" />
    <input type="button" value="(배경) blue" onclick="setBgColor('#00f')" />
    <input type="button" value="width=50%" onclick="setWidth('50%')" />
    <input type="button" value="width=auto" onclick="setWidth('auto')" />
    <input type="button" value="box1 클래스 적용" onclick="changeClass('on')" />
    <input type="button" value="box2 클래스 적용" onclick="changeClass('box2')" />
</body>

</html>