3월 14일 (2) JavaScript - 객체 date, DOM

유용한 내장 객체 : 라이브러리에 포함되어 기본적으로 제공되는 객체, Math, Data, String 등

Date 객체

날짜와 시간 정보 및 활용 방안을 제공하는 객체

Date 객체의 주요 메소드

1) 연도 : getFullYear();

2) 월 : getMonth(); - 1년 중 몇 번째 월 0 ~ 11 -1을 해주어야 내가 원하는 달이 나온다.

사용 시 +1을 해야 함.

3) 일 : getDate(); - 1달 중 몇 번째 일(날짜)

getDay(); - 1주 중 몇번째 일(요일) 일요일 0부터 시작

4) 시 : getHours(); - 0~23(24시간 주기)

5) 분 : getMinutes(); - 0 ~ 59분

5) 초 : getSeconds(); - 0 ~ 59초

6) 밀리초 : getMilliseconds(); - 0 ~ 999밀리초 개발할 때 많이 사용함

get은 꺼내올 때, set은 지정할 때?

날짜 객체의 생성 p 566

1) 기본 생성 방식 - 현재의 날짜로 Date객체 생성

const 변수 = new Date();

2) 특정 날짜로 Date를 생성할 수 있음.

const 변수 = new Date(연도, 월[, 일, 시, 분, 초, 밀리초]); 두 값을 넣어주어야 한다. 연과 월로 인식

책처럼 처리하는 방식도 있음. 복습하기!

3) 특정 밀리초로 Date를 생성할 수 있음

const 변수 = new Date(밀리초); 값을 하나만 넣으면 밀리초로 인식

1970년 1월 1일 0시부터 현재까지의 시간을 밀리초 단위로 계산하여 작성

<!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>날짜와 시간</title>
</head>

<body>
    <h2>오늘의 날짜</h2>
    <h3 id="today"></h3>
    <h2>현재 시간</h2>
    <h3 id="time"></h3>
</body>
<script>
    const td = document.querySelector("#today");
    const ti = document.querySelector("#time");

    const now = new Date();//날짜와 시간으로 나누어져 있다.
    // td.innerHTML = now;
    // td.innerHTML = now.getFullYear();
    // td.innerHTML = now.getMonth();
    // td.innerHTML = `1: ${now.getDate()}, 2:${now.getDay()}`;
    // td.innerHTML = now.getHours();
    // td.innerHTML = now.getMinutes();
    // td.innerHTML = now.getSeconds();
    // td.innerHTML = now.getMilliseconds();
    td.innerHTML = `${now.getFullYear()}년 ${now.getMonth() + 1}월 ${now.getDate()}일`;

    ti.innerHTML = `${now.getHours()-12}시 ${now.getMinutes()}분 ${now.getSeconds()}초`;
</script>

</html>

DOM(Document Object Model)

HTML 문서의 요소(태그)를 제어하자.

문서 객체 모델이란 문서상의 모든 요소가 화면에 출력되기 전에 객체화하여 메모리에 저장된 것(상태)

DOM을 사용하여 요소의 내용(contents), 모양(style)을 변경 및 요소의 삭제, 새로운 요소를 생성할 수 있다.

('새로고침'하면 없어짐)

1. HTML 요소 선택자

1) getElementById("id속성값")

요소의 id 속성값으로 해당 요소를 선택, 하나의 요소만 선택(id를 하나만 사용하자!)

2) getElementsByTagName("태그명")

태그명으로 해당 요소들을 선택, 선택된 같은 태그 요소들은 배열로 저장.

3) getElementsByClassName("클래스속성값")

태그의 class 속성값으로 해당 요소들을 선택. 선택된 같은 태그 요소들은 배열로 저장.

4) querySelector("선택키워드")

CSS의 요소 선택 방식으로 선택,

id - #

class - .

tag - 태그명

무조건 첫 번째 요소만 선택(단일 선택)

5) querySelectorAlll("선택키워드")

CSS의 요소 선택 방식으로 선택, 동일한 모든 요소를 선택하며, 배열로 저장,

일반적으로 id 속성값으로 선택할 때는 사용하지 않음.

<!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>HTML 요소 선택</title>
</head>

<body>
    <h1 onclick="alert('h1')">H1 tag1</h1>
    <h1>H1 tag2</h1>
    <h1>H1 tag3</h1>
    <h1>H1 tag4</h1>
    <h2 class="head2">h2 tag1</h2>
    <h2 class="head2">h2 tag2</h2>
    <h2 class="head2">h2 tag3</h2>
    <h3 id="head3">h3 tag1</h3> <!-- 이 값만 제어 가능-->
    <h3 id="head3">h3 tag2</h3>
    <ul>
        <li>1번항목</li>
        <li>1번항목</li>
        <li>1번항목</li>
    </ul>
</body>
<script>
    const elemTags = document.getElementsByTagName("h1");//배열
    console.log(elemTags);

    const ulTag = document.getElementsByTagName("ul");//배열
    console.log(ulTag);

    const elemClass = document.getElementsByClassName("head2");//배열
    console.log(elemClass);

    const elemId = document.getElementById("head3"); //하나만 찾음, 첫번째껏
    console.log(elemId);

    const qsTag = document.querySelector("h1"); // 무조건 하나만
    console.log(qsTag);

    const qsClass = document.querySelectorAll(".head2"); //배열
    console.log(qsClass);

    const qsIds = document.querySelectorAll("#head3"); //되긴 하지만 하나만 사용해야 한다. 다른 곳에서의 오류 방지
    console.log(qsIds);
</script>

</html>

요소의 내용과 모양을 바꿔보자

DOM 속성값 변경

1) 객체변수.속성 = "새속성값";

너비/높이 변경 (2배 확대)

const imgElem = document.getElementById("m");

imgElem.width = 1200;

imgElem height = 800;

2) 객체변수.setAttribute("속성명", "변경값");

이미지 변경(슬라이드는 안 됨)

imgElem.setAttribute("src", "yyy.jpg");

imgElem.setAttribute("width", 800);

요소의 속성값 가져오기(get)

1) 속성값 바로 가져오기

let imgw = imgElem.width;

2) 객체변수.getAttribute("속성명");

let imgh = imgElem.getAttribute("heigth");

<!DOCTYPE html>
<html lang="keyCode">

<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>이미지변경하기</title>
</head>

<body>
    <img id="imgge" src="https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_960_720.jpg"><br>
    <button id="chbtn">변경</button>
</body>
<script>
    const img = document.querySelector("#imgge");
    const cb = document.getElementById("chbtn");

    let sw = true;
    cb.addEventListener("click", () => {

        // img.src = "변경할 이미지 파일";
        if (sw) {
            img.setAttribute("src", "https://cdn.pixabay.com/photo/2014/02/27/16/10/flowers-276014_960_720.jpg");
            sw = false;
        }
        else {
            img.setAttribute("src", "https://cdn.pixabay.com/photo/2016/01/09/18/27/camera-1130731_960_720.jpg");
            sw = true;
        }
    });
</script>

</html>

저작자표시 비영리 변경금지

'공부기록 > JavaScript' 카테고리의 다른 글

3월 16일 (1) JavaScript - node 활용 제어 (0)	2023.03.16
3월 15일 JavaScript - 객체(Object) (0)	2023.03.15
3월 14일 (1) JavaScript - 함수 파라미터, 객체 (0)	2023.03.14
3월 13일 (2) JavaScript - 변수 범위, 함수 표현식, 이벤트 (0)	2023.03.13
3월 13일 (1) JavaScript - 함수 (0)	2023.03.13

새롭게 공부시작하기

3월 14일 (2) JavaScript - 객체 date, DOM

'공부기록 > JavaScript' 카테고리의 다른 글

티스토리툴바

3월 14일 (2) JavaScript - 객체 date, DOM

'공부기록 > JavaScript' 카테고리의 다른 글

관련글

티스토리툴바