[JavaScript] 객체 반환

희원96 2022. 5. 17. 15:39

객체 실습

<!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>

        let pokemon1 ={
            name : '피카츄',
            age : '2살',
            skil : function(){alert('백만볼트!')}
        }

        let pokemon2 = {
            name : '꼬부기',
            age : '1살',
            skil : function(){console.log('물대포!')}
        }

        document.write(pokemon1.name+'<br>')
        document.write(pokemon1.age)

        pokemon1.skill()
        pokemon1.skil2()
        
        
        document.write('첫번째 포켓몬 이름 :',pokemon1.name )
        document.write('<br>')
        document.write('첫번째 포켓몬 나이 :',pokemon1.age )
        document.write('<br>')
        document.write('<br>')
        document.write('두번째 포켓몬 이름 :',pokemon2.name )
        document.write('<br>')
        document.write('두번째 포켓몬 나이 :',pokemon2.age )
        console.log(pokemon2.skil)
        </script>
</body>
</html>

DOM(Document Object Model)

-문서 객체 모델링

-서로 다른 언어가 소통할 수 있도록 쪼개서 '객체화'시켜주는 것!

-HTML요소지만 JavaScript를 이용할 수 있도록 해준다.

문서에서 = > document

접근 => .

가지고와줘 => get

요소 => Element

아이디를 통해 => ByID()

HTMLElement

-모든 종류의 HTML요소를 나타내는 인터페이스

-getElement 메소드를 통해서 원하는 객체를 조회

-조회된 객체들을 대상으로 구체적인 작업 처리

getElementByID()

-접근하고자 하는 HTML태그의 id값을 이용해 HTMLElement객체 조회

객체 반환 예제

<!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 id="text">Hello, World!</p> 
    <button onclick="innerFunc()">Click!</button>

    <script>
        //function innerFunc(){}
        let innerFunc = ()=>{
           let str = document.getElementById('text')
           //요소= 태그+콘텐츠

           //요소 안의 내용만 수정 or 접근 : innerText
           console.log(str.innerText)
        //    str.innerText = '<h1>Bye</h1>'

        //태그까지 적응하고 싶을때는? :innerHTML
           str.innerHTML = '<h1>Bye</h1>'
        }
    </script>
</body>
</html>

DOM예제
버튼을 누르면 1씩 증가하고 1씩 감소

<!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>
    <span id="span1">0</span>
    <br>
    <button onclick="plus()">+1 증가</button>
    <button onclick="minus()">-1 감소</button>

    <script>
        //1.수정해야하는 span태그의 글자 가져오기
        //2. plus(),minus()
        // => 단, 0밑으로는 minus()함수 사용x
        let span = document.getElementById('span1')
        
        let plus = () =>{
            let spanNum = Number(span.innerText)
            // console.log(span.innerText)
            span.innerText = spanNum+1
        }
        
        let minus = () =>{
            span.innerText= Number(span.innerText)
            // console.log(span.innerText)
            if(spanNum > 0){
            span.innerText = spanNum-1;
            }
        }
    </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>클릭 한번 해볼까요?</h1>
    <button onclick="mkH1()">h1태그 생성</button> 
    <button onclick="mkA()">a태그 생성</button>
    <button onclick="mkUl()">ul태그 생성</button>
    <!-- div는 생성한 태그를 누적할 공간-->
    <div id="div1"></div>

    <script>
        //1.글자를 누적해줄 공간인 div 가지고 오기
        let div = document.getElementById('div1')
        //2.함수별로 가지고 온 div태그 안에 태그를 생성하기

        let mkH1=()=>{
            let h1 = '<h1>DOM활용하기</h1>'
            div.innerHTML = div.innerHTML + h1
        }
        let mkA=()=>{
            let a = '<a href = "https://www.google.co.kr/">Google로 이동</a><br>'
            div.innerHTML = div.innerHTML + a
        }
        let mkUl=()=>{
            let ul = '<ul> <li>HTML</li> <li>CSS</li><li>JS</li> </ul>'
            div.innerHTML = div.innerHTML + ul
        }


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