[JavaScript] 자바스크립트

728x90

1. 객체(object)

■ 객체 기초

객체란 여러 데이터를 하나의 변수에 저장할 수 있는 데이터타입입니다. 객체의 구조는 다음과 같습니다.

let object = {
    key1 : value1,
    key2 : value2,
    ...
}

객체는 객체의 속성(property)인 key값과 속성 값인 value값을 가지고 있으며 value에 접근할 때는 key를 이용해 접근합니다. 그렇기 때문에 객체를 생성한 후 value값을 불러오거나 수정, 추가할 때 key값을 사용합니다.

객체명.key값 == value값

# 객체 생성

// 객체 생성
let person = {
    'name' : '군순이',  // key값은 따옴표를 써도 되고 안써도 됨
    age : 16,
    favorite : {
        food : '피자',
        drink : '소주'
    },
    team : ['이대섭','서희주','김한주']
}

# 속성값 변경 및 추가

# 객체 속성값 변경
person.name = '김군순이';

# 객체 속성값 추가
person.height = 181;

■ 내장 객체

객체에는 내장 객체 브라우저 객체 모델, 사용자 정의객체 등이 있습니다. 위에서 생성해 보았던 객체는 사용자 정의 객체입니다.

내장 객체란 JavaScript에서 제공하는 객체로 자체적으로 내장되어 있기 때문에 내장 객체입니다. Math, Date, Array 등 여러 내장 객체가 있습니다.

■ BOM(Browser Object Model)

BOM은 브라우저를 다루기 위한 객체입니다. 브라우저에 관한 정보를 제공하거나 브라우저의 모양을 제어하는 객체입니다.

window는 브라우저 객체 최상위로 브라우저 창 관련 기능을 합니다. window.open을 사용하면 아래 그림과 같이 입력한 주소의 창이 뜨는 것을 볼 수 있습니다.

window.open('https://soonart.tistory.com/entry/JavaScript-%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%ED%95%A8%EC%88%98',
'순이 블로그','width = 500; height=500')

■ DOM(Document Object Model)

DOM은 문서 객체 모델로 자바스크립트를 이용하여 웹 문서에 접근하고 제어할 수 있도록 객체를 사용해 웹 문서를 체계적으로 정리하는 방법입니다. DOM은 웹 문서를 하나의 객체로 정의하며 웹 문서를 이루는 텍스트 또는 이미지 등 모든 요소 또한 각각 객체로 인식하고 처리합니다.

DOM요소에 접근할 때도 CSS에서 처럼 id, class, 태그 등등으로 접근할 수 있습니다.

document.getElementById()

getElemetBy를 사용해 id로 접근할 땐 getElemetById(), class로 접근할 땐 getElemetByClassName() 등을 사용해 접근할 수 있습니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DOM</title>
</head>
<body>
    <h1 id="h1Tag">DOM 시작하기</h1>

    <script>
        let h1Element = document.getElementById('h1Tag');
        console.log(h1Element)
    </script>
</body>
</html>

방금 살펴본 getElementById(), getElementByClassName() 등 메소드의 반환값은 HTMLElement객체입니다. 이는 HTML요소만 저장되기 때문에 속성 등 까지 제어하기 위해서는 querySelector(), querySelectorAll() 메소드를 사용해야 합니다.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <span id="spanId" class="spanClass">
        김군순 김군순 김군순</span>
    <br>
    <button onclick="clickFunc()">클릭</button>

    <script>
        let spanElement = document.getElementById('spanId');
        spanElement = document.getElementsByClassName('spanClass')[0];
        spanElement = document.querySelector('#spanId');
        spanElement = document.querySelectorAll('.spanClass')[0];
        
        console.log(spanElement);
        
        const clickFunc = () =>{
            spanElement.style.color='tomato';
            spanElement.style.fontSize = '25px';
            spanElement.style.fontWeight = 900;
        }
    </script>
</body>
</html>

위의 코드와 같이 querySelector()를 사용했을 때, 스타일 또한 제어할 수 있는 것을 볼 수 있습니다.

querySlector()는 id처럼 한 가지 요소를 선택할 때 사용하고, class 또는 태그를 선택할 때는 여러 요소를 선택하는 것이기 때문에 querySeletorAll()을 사용해야 합니다. 이때 반환값은 리스트 형태로 반환됩니다. 그렇기 때문에 가져온 값을 통해 제어하려고 할 때, 인덱싱을 사용해 제어해야 합니다.

자바스크립트에서는 웹 요소의 내용도 수정할 수 있는데 여기서 innerText, innerHTML을 사용합니다. Text는 텍스트 내용만 반영하고 HTML은 태그까지 반영할 수 있습니다.

■ Callback 함수

callback 함수는 어떤 이벤트가 발생하거나, 특정 시점에 도달했을 때 시스템에서 호출하는 함수를 말합니다. 먼저 어떤 이벤트가 발생했을 때 사용하는 callback함수는 addEventListener()입니다. 아래와 같이 버튼을 클릭했을 때, 콘솔창에 하트를 출력하는 기능을 넣을 수 있습니다.

        document.querySelector('button').addEventListener('click',()=>{
            console.log('🧡');
        })

다음으로 setTimeout()은 특정 시점에 도달했을 때 함수를 호출하기 위해 사용합니다. 여기서는 실행할 문장과 시간을 넣을 수 있습니다. 1000은 1s로 여기서는 2s후에 '🚗'이모티콘이 콘솔창에 출력되도록 했습니다.

        setTimeout(()=>{
            console.log('🚗')
        }, 2000);

※ callback 실습

10초 동안 1초마다 지나간 시간이 누적 출력되고 버튼 클릭 시 이모티콘 출력하기

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>callback practice</title>
</head>

<body>
    <button>클릭</button>
    <br><br>
    <div></div>

    <script>
        let divVal = document.querySelector('div');
        console.log(divVal)
        
        // 10초동안 1초마다 누적된 시간 출력
        for (let i = 1; i <= 10; i++) {
            setTimeout(() => {
                divVal.innerHTML += i+'초'+'<br>';
            }, Number(i+'000'));
        }
        
        // 클릭할때마다 이모티콘 출력
        document.querySelector('button').addEventListener('click',()=>{
            divVal.innerHTML += '😆'+'<br>'
        })

    </script>
</body>

</html>

728x90

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

'순이코딩 > Web' 카테고리의 다른 글

[JavaScript] 자바스크립트 - 함수 (0)	2023.08.03
[JavaScript] 자바스크립트 - 배열 (0)	2023.08.02
[Web] CSS 태그(5) - flex / animation / transition / transform (0)	2023.08.01
[Web] CSS 태그(4) - box 모델 / margin, padding / radius / background / position / z-index / overflow / float (0)	2023.07.31
[Web] CSS 태그(2) - 계층선택자, 사이즈, hover와active, display (0)	2023.07.29

순상생활(순이의 일상)

[JavaScript] 자바스크립트 - 객체

1. 객체(object)

■ 객체 기초

# 객체 생성

# 속성값 변경 및 추가

■ 내장 객체

■ BOM(Browser Object Model)

■ DOM(Document Object Model)

■ Callback 함수

※ callback 실습

'순이코딩 > Web' 카테고리의 다른 글

티스토리툴바

[JavaScript] 자바스크립트 - 객체

1. 객체(object)

■ 객체 기초

# 객체 생성

# 속성값 변경 및 추가

■ 내장 객체

■ BOM(Browser Object Model)

■ DOM(Document Object Model)

■ Callback 함수

※ callback 실습

'순이코딩 > Web' 카테고리의 다른 글

'순이코딩/Web' Related Articles

티스토리툴바