[부스트코스]자바스크립트의 시작(객체 예고, 객체 쓰기와 읽기)

네이버 부스트코스/[부스트서포터즈3기]자바스크립트의 시작

[부스트코스]자바스크립트의 시작(객체 예고, 객체 쓰기와 읽기)

mmin.h 2021. 2. 11. 12:55

안녕하세요 부스터코스 3기 서포터즈 허브입니다. 🌿

부스터코스란?

커넥트재단은 네이버가 설립한 비영리 교육 재단입니다.
소프트웨어 개발자 양성 교육 프로그램, 부스트코스와 함께
당신의 개발 커리어를 업그레이드하세요!

제 포스팅은 강의 내 생각해보기와 수업에서 다루는 코드를 직접 크롬화면에서 확인 해볼 수 있도록 진행합니다. 관련된 개념과 강의는 함께 올려드리는 링크에서 확인해보실 수 있습니다.

www.boostcourse.org/cs124/joinLectures/52258

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

객체 예고

https://www.boostcourse.org/cs124/lecture/194638

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

우리는 코드의 정리정돈을 위해서 함수라는 개념을 사용했습니다. 객체 또한 이러한 목적을 가지고 사용되는 방법입니다. 객체는 함수의 기반 위에서 존재하는 개념입니다. 서로 연관된 함수와 변수가 아주 많아지면 이를 정리하기 위해서 사용하는 것이죠.

먼저 이전까지 했던 코드들을 다시 살펴봅시다. 이전에 배열과 반복문을 활용해서 하이퍼링크의 색깔을 바꾸어주는 코드를 썼었습니다. 이 부분을 함수로 만들어봅시다.

function LinksSetColor(color){
  var alist = document.querySelectorAll('a');
  var i = 0;
  while(i < alist.length) {
    alist[i].style.color = color;
    i = i + 1;
  }
}

그러면 이제 하이퍼링크의 색깔을 바꾸어야 하는 부분에서 다음과 같이 사용할 수 있겠죠.

setColor("powderblue");

같은 방법으로 배경과 글자의 색을 바꾸는 코드도 따로 함수로 만들어 봅시다. 이 때 함수 이름이 겹치지 않도록 하는데 주의하세요.

function BodySetColor(color){
  document.querySelector('body').style.color = color;
}

function BodySetBackgroundColor(color){
  document.querySelector('body').style.backgroundColor = color;
}

이렇게 다양한 함수들이 존재하는 상황에서 우리는 객체를 사용하면 됩니다. 예를 들어 함수의 종류가 아주 많아지게 되면 이 함수들끼리 이름이 중복되지 않도록 만들게 하기 위해서 굉장히 복잡한 이름을 사용해야 하겠죠.

이 때 객체를 사용하면 이 함수들을 비슷한 것들끼리 그룹으로 만들어 묶어줄 수 있습니다. 마치 여러분의 컴퓨터에서 폴더를 만들어서 정리하는 것과 비슷한 상황입니다. 이렇게 나뉜 함수들은 서로 다른 그룹끼리는 이름이 겹쳐도 괜찮습니다.

우리는 Javascript에서 이미 이러한 객체를 사용해본 경험이 있습니다. 바로 아래 코드에서죠.

document.querySelector('body');

여기에서 document가 바로 객체이고, querySelector가 document라는 객체에 속해 있는 함수라고 생각할 수 있는 것입니다. 이렇게 객체에 속해 있는 함수들은 메소드(Method)라는 별도의 이름으로 부르게 됩니다.

그렇다면 아래의 코드와 같이 작성을 할 수 있겠습니다.

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>WEB1 - javaScript</title>
    <script>
        function LinksSetColor(color) {
            var alist = document.querySelectorAll('a')
            var i = 1;
            while (i < alist.length) {
                alist[i].style.color = color;
                i++;
            }
        }
        function BodySetColor(color) {
            document.querySelector('body').style.color = color;
        }

        function BodySetBackgroundColor(color) {
            document.querySelector('body').style.backgroundColor = color;
        }

        function nightDayHandler(self) {
            var target = document.querySelector('body');
            if (self.value === 'night') { //night 모드
                BodySetColor('white'); //font
                BodySetBackgroundColor('black');
                LinksSetColor('powderblue');
                self.value = 'day'
            }
            else { //day 모드
                BodySetColor('black'); //font
                BodySetBackgroundColor('white');
                LinksSetColor('blue');
                self.value = 'night'
            }
        }
    </script>
</head>

<body style="">
    <a href="WEB.html" style="font-size: 30px;">WEB</a><br>
    <input type="button" value="night" onclick="
    nightDayHandler(this);
    ">
    <ol>
        <li><a href="1.html">HTML</a></li>
        <li><a href="2.html">CSS</a></li>
        <li><a href="3.html">JAVASCRIPT</a></li>
    </ol>
    <h2>JavaScript</h2>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente officia incidunt quas reprehenderit alias
        eveniet necessitatibus eligendi harum obcaecati temporibus, odit, dolor nulla adipisci tempore illum suscipit
        quod voluptatibus debitis quam atque nemo accusantium voluptatum voluptates voluptas. Laudantium labore,
        praesentium architecto perspiciatis enim totam! Magni fugit corporis iste ratione dolorem temporibus. Magni
        perferendis aspernatur mollitia! Eaque dolorem, exercitationem corrupti amet aliquid quis ab eligendi. Nam odio
        maxime quae explicabo repellat velit error fuga dolores quo quia. Quidem beatae iusto dolore eos, consequatur
        fuga magnam! Sed esse asperiores dolor et adipisci corrupti eveniet tempore deleniti rerum possimus natus,
        reiciendis accusantium ut reprehenderit! Animi quaerat ratione, facere saepe iusto eos, obcaecati, provident
        ius doloribus nam! Modi, hic! Est vel ipsam laborum placeat! Non nulla dolorum autem corrupti.
    </p>
    <input type="button" value="night" onclick="
    if(this.value === 'night'){
        document.querySelector('body').style.backgroundColor = 'black';
        document.querySelector('body').style.color = 'white';
        this.value = 'day'
    }
    else{
        document.querySelector('body').style.backgroundColor = 'white';
        document.querySelector('body').style.color = 'black';
        this.value = 'night'
    }
    ">
</body>

</html>

생각해보기

1) 다음 코드에서 객체와 메소드를 찾아보세요.

var fruits = ["apple", "banana"];
fruits.push("coconut");

여기에서 객체는 fruits가 되겠고 메서드는 push() 가 되겠네요.

객체(쓰기와 읽기)

https://www.boostcourse.org/cs124/lecture/194639/

자바스크립트의 시작

부스트코스 무료 강의

www.boostcourse.org

객체의 읽기와 쓰기

우리는 이전에 배열에 대해서 배운 적이 있었습니다. 어떤 값들을 순서를 가지도록 저장하는 구조였습니다. 그렇다면 순서 없이 저장하는 구조도 있어야겠죠? 그것이 바로 객체입니다.

객체에는 순서가 없는 대신 각각에 이름이 붙어 있습니다. 이름을 이용해서 값들을 꺼내고 넣는 것이죠.

그렇다면 지금부터 객체의 문법에 대해서 살펴보도록 하겠습니다.

var coworkers= {
  "programmer": "egoing",
  "designer": "leezche"
};

객체를 만들 때에는 배열과는 달리 중괄호를 사용합니다. 그리고 각 요소들은 각각 이름과 값으로 이루어져 있죠. 예를 들면 egoing이라는 값에는 programmer이라는 이름표가 붙어있는 것입니다.

그렇다면 이 요소들을 꺼낼 때에는 어떻게 해야 할까요? 다음과 같이 써주면 됩니다.

document.write(coworkers.programmer)
document.write(coworkers["programmer"])

이렇게 쓰면 coworkers라는 객체 안에서 programmer이라는 이름을 가진 값을 가져와서 출력하게 됩니다. 첫 번째 줄과 두 번째 줄의 코드 모두 같은 결과를 출력하게 됩니다.

다음으로는 객체에 요소를 추가해봅시다.

coworkers.bookkeeper = "duru";
coworkers["bookkeeper"] = "duru";

이런 코드를 실행하게 되면 coworkers라는 객체 안에 bookkeeper이라는 이름으로 duru라는 값을 넣는 것입니다. 두 줄 모두 같은 작업을 실행하게 됩니다. 하지만 만약에 이름 안에 공백이 있다면 첫 번째 줄의 코드처럼 쓰면 오류가 나기 때문에 두 번째 줄처럼 써 주어야 합니다.

그리고 아래와 같은 코드를 만들 수 있습니다.

<!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>
    <h1>Object</h1>
    <h2>Create</h2>
    <script>
        var coworkers = {
            "programmer": "egoing",
            "desiger": "leezche"
        };
        document.write("programmer : " + coworkers.programmer + "<br>");
        document.write("designer : " + coworkers.desiger + "<br>");
        coworkers.bookkeeper = "duru";
        document.write("bookkeeper : " + coworkers.bookkeeper + "<br>");
        coworkers["data scientist"] = "taeho";
        document.write(" data scientist: " + coworkers["data scientist"] + "<br>");


    </script>
</body>

</html>

생각해보기

countries라는 이름의 빈 객체를 만들고, asia라는 이름을 가진 korea라는 값과, europe이라는 이름을 가진 england라는 값을 추가해봅시다.

var countries = {
            "asia": "korea"
        };
        countries.europe = "england";
        document.write("asia : " + countries.asia + "<br>");
        document.write("europe  : " + countries.europe + "<br>");

www.boostcourse.org/

다 함께 배우고 성장하는 부스트코스

부스트코스(boostcourse)는 모두 함께 배우고 성장하는 비영리 SW 온라인 플랫폼입니다.

www.boostcourse.org

github.com/hhhminme

hhhminme - Overview

꾸준히 공부중인 초보 개발자지망생 hub@kakao.com. hhhminme has 12 repositories available. Follow their code on GitHub.

'네이버 부스트코스 > [부스트서포터즈3기]자바스크립트의 시작' 카테고리의 다른 글

[부스트코스]자바스크립트의 시작(파일로 쪼개서 정리 정돈, script의 src) (0)	2021.02.12
[부스트코스]자바스크립트의 시작(객체 순회, 프로퍼티와 메소드, 활용법) (0)	2021.02.11
[부스트코스]자바스크립트의 시작(배열과 반복문, 활용) (0)	2021.01.26
[부스트코스]자바스크립트의 시작(반복문,배열) (0)	2021.01.19
[부스트코스]자바스크립트의 시작(프로그래밍, 조건문, 비교연산자와 블리언, 조건문, 리팩토링) (0)	2021.01.15

현재글[부스트코스]자바스크립트의 시작(객체 예고, 객체 쓰기와 읽기)

반가워요 허브입니다.

💬hub@kakao.com

👍github.com/hhhminme

🤖한국산업기술대학교 AI 챗봇 산돌이

https://pf.kakao.com/_pRxlZxb

네이버커넥트, 부스트코스서포터즈, 생활코딩, 네이버, 백준, API, 퀴즈풀이, Linked list, 자바스크립트, 연결리스트, 선택정렬, 정렬, 문제풀이, c언어, 부스트코스, 자료구조, AWS, 배열, 자바스크립트의시작, 알고리즘,

Today :
Yesterday :

👨‍💻 ModernAlchemist 허브의 개발 일지