객체

[객체]
{key : value} 구조

js 는 객체 기반 언어

let person = { 내가 넣은 속성과 값이 들어감 } -> 사용자 정의 객체

1) 브라우저 객체 (문서 객체 모델)
2) 내장 객체
3) 사용자 정의 객체

문서객체 모델
DOM - HTML 의 요소를 가지고 올 수 있음
document.geElementById();

객체
- {key:value, key:valule ... }

let name = '미리';
let name = {
   "one" : "miri",
   "two" : "eunyoung",
   ....
     }

console.log(name.one);
--> miri

name.one = "수민";

객체
1. 내장객체 -> 자바스크립트 엔진에서 제공하는 객체
2. 브라우저객체 -> 브라우저에 내장된 객체 (document라고 하는 문서객체)
3. 사용자 정의 객체 -> 내가 만드는 객체

*DOM*
document : html문서
object : 객체(js)
modeling : 모델링

<body>
   <h1>안녕~</h1>
</body>

* DOM이라고 하는 객체는
HTML의 문서 내의 요소들을 전부 단일요소로 쪼개줌.
ex) <h1 id="h1Tag"> 안녕하세요 </h1>
      태그 : h1
      속성 : id
      속성에 대한 값 : h1Tag
      컨텐츠 : 안녕하세요

객체)

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        // 객체 구조 : {key:value, key:value, ...}
        // key : 객체의 property(속성) - 문자열로 표현하거나 생략
        // value : property의 값, 기본자료형, 객체타입의 데이터, 함수

        // 사용자 정의 객체
        let person = {
            "name":"Ggogi",
            "age":20,
            "genger":"woman",
            // 이 객체의 모든 정보를 출력하는 기능
            "info": function() {
                console.log(this.name, this.age);
            }
        }

        // person 객체의 내용을 출력
        console.log(person);

        // person 객체에서 이름 출력
        console.log(person.name);

        // person 객체의 모든 정보를 출력
        person.info();

        // person 객체의 나이를 변경
        person.age = 30;

        console.log(person.age);
        


    </script>
</body>
</html>

내장객체)

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        // 내장객체 : 자바스크립트에서 제공하는 객체
        // 종류 : Date, Array, Math, String

        let today = new Date();
        console.log(today);

        let t_year = today.getFullYear();
        console.log((t_year));

        let t_day = today.getDay();
        console.log(t_day); // 요일정보 : 0 ~ 6 으로 표현, 1: 월, 2: 화.......
        


    </script>
</body>
</html>

브라우저 객체)

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <script>
        // 브라우저 객체
        // : 브라우저에 내장된 객체

        // window() : 브라우저객체 중에 최상위
        window.open("https://www.naver.com", "naver창", "width=500; height=500");


    </script>
</body>
</html>

문서객체모델)

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <h1 id="tit">
        <a>문서객체모델(DOM)</a> 
    </h1>

    <h3 class="day">왜 아직도 수요일인디</h3>
    <h3 class="day">왜 아직도 화요일인디</h3>
    <h3 class="day">왜 아직도 월요일인디</h3>

    <div id="div1">
        1번
        <div>
            2번
            <div>3번</div>
        </div>

    </div>


    <script>
        // document : 현재 html문서에
        // .        : 접근해서
        // getElement : html요소를 가져올거야
        // ById("id 이름") : "id 이름"이라는 id값을 가진
        const tit = document.getElementById("tit");
        console.log(tit);

        // 내가 가지고 온 요소에서 컨텐츠만 추출
        // innerText : '값' => 단순 텍스트만
        // innerHTML : '값' => 내부 HTML태그 요소도 포함!

        console.log(tit.innerText); 
        tit.innerText = "즐거운 자바스크립트";

        console.log(tit.innerHTML);
        tit.innerHTML = '즐거운 자바스크립트!';

        // 클래스를 통해서 요소를 가져오기
        // 유사 배열 형태로 가져와진다 (HTMLCollection)
        let h3Tag = document.getElementsByClassName("day");
        console.log(h3Tag);
        console.log(h3Tag[0]);
        console.log(h3Tag[1]);
        console.log(h3Tag[2]);

        // 수요일을 목요일로 변경
        h3Tag[0].innerText = "왜 아직도 목요일인디";
        
        // 태그 이름을 통해서 요소를 가져오기
        let h1 = document.getElementsByTagName("h1");
        console.log(h1);

        console.log(document.getElementById('div1').innerHTML);
        console.log(document.getElementById('div1').innerText);

    </script>
</body>
</html>

예제) 숫자증감실습

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <p>
        🍗<span id="number">0</span>
    </p>

    <button id="like">좋아요</button>
    <button id="hate">싫어요</button>

    <script>
        
        
        // step 1. 좋아요 버튼 클릭하면 숫자가 1씩 증가
        // 1-1. 버튼 가져오기, 숫자값 가져오기
        let num = document.getElementById("number");
        let btn1 = document.getElementById("like");
        console.log(btn1.innerHTML);
        console.log(num.innerHTML);

        // 1-2. 클릭 이벤트 걸어주기
        // 1-3. 클릭을 할 때마다, id가 number인 span태그 안 값이 1씩 증가
        // btn1.onclick = () => {
        //     alert("좋아요 클릭");
        // }

        btn1.addEventListener("click", () => {
            num.innerText = Number(num.innerText)+1; 
            
        });

        // step 2. 싫어요 버튼 클릭하면 숫자가 1씩 감소
        let btn2 = document.getElementById("hate");

        btn2.addEventListener("click", () => {
            if(num.innerText > 0) {
                num.innerText = Number(num.innerText)-1;
            }
        });
    </script>
</body>
</html>

예제) DOM 속성실습

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <input type="text" id="inputText">
    <button id="inputBtn">input태그 값 가져오기</button>

    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQ9sdsER301OYkVqYBA8I73F6SsBJYYCUG7Qw&usqp=CAU" 
    id="imgTag" width="200px">

    <button id="getImgBtn">이미지 값 불러오기</button>
    <button id="setImgBtn">이미지 변경</button>

    <script>
        // https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSWQQfZODPFRzXGrqI0UWbvx2r1EFmqQCwng&usqp=CAU

        // 1. input태그 안에 사용자가 입력한 값을 가져오기
        document.getElementById("inputBtn").addEventListener("click", () => {
            let inputTag = document.getElementById("inputText");

            // innerText로는 가지고 오지 못한다.
            // 이유 : <input>에게는 컨텐츠(내용)이 없음.
            // 사용자가 입력한 글자를 가져오려면, .value
            console.log("input : ", inputTag.value); 

            // 초기화 시키기
            inputTag.value = '';
        });

        // 2. 이미지 태그에 접근해서 속성 다루기
        // 2-1. imgTag의 속성값을 출력
        let imgTag = document.getElementById("imgTag")
        console.log(imgTag);

        // src 속성만 가지고오기 첫 번째 방법 : .getAttribute()
        // console.log(imgTag.getAttribute('src'));
        // console.log(imgTag.getAttribute('width'));

        // src 속성만 가지고오기 두 번째 방법 : .속성이름
        console.log(imgTag.src);
        console.log(imgTag.width);

        // 2-2. imgTag에 접근해서 속성을 수정
        // 첫 번째 방법 : .setAttribute('속성이름', '바꿀값')
        imgTag.setAttribute('src', 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSWQQfZODPFRzXGrqI0UWbvx2r1EFmqQCwng&usqp=CAU');
        // 두 번째 방법 : .속성이름 = '바꿀값';
        imgTag.src = 'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRSWQQfZODPFRzXGrqI0UWbvx2r1EFmqQCwng&usqp=CAU';
        imgTag.width = 100;

    </script>
</body>
</html>

예제) DOM속성실습2

<!DOCTYPE html>
<html lang="en">
<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>Document</title>
</head>
<body>
    <div>

        <input type="text" id="data">
    
        <button id="inputBtn">출력</button>

    </div>

    <div id="result"></div>


    <script>
        // 버튼을 클릭하면, 유저가 입력한 값을 가져온 후
        // 웹 페이지에 출력
        // getElement, 속성가져오기

        // userInput : 유저가 입력한 값에 접근
        let userInput = document.getElementById("data");

        // result : 유저가 입력한 값을 웹 페이지에 출력하기 위한 변수
        let result = document.getElementById("result");

        // btnPrint : 유저가 입력한 값을 
        let btnPrint = document.getElementById("inputBtn");

        // btnPrint 요소에 클릭 이벤트를 추가
        document.getElementById("inputBtn").addEventListener("click", () => {
            result.innerText = userInput.value;
            console.log(userInput.value);
        });


    </script>
</body>
</html>