5/10 생활코딩

오늘의 진도:

 WEB2 - JavaScript

  객체 예고~객체 활용

 

1. 객체(object) 예고

객체는 함수라는 기반 위에서 존재하는 것이다.

객체의 다면적인 얼굴 중 딱 하나만 볼 것이다.

 

객체 또한 정리정돈의 수단이다.

서로 연관된 함수와 서로 연관된 변수를

같은 이름으로 그룹핑해서 잘 정리정돈하기 위한 도구이다.

 

night 버튼 코드에서 회색으로 표시한 두 부분이

파우더블루와 블루만 다르고 중복되는 것을 볼 수 있다.

 

해당 부분을 setColor라는 함수로 만들고

color라는 매개변수를 정한 후,

코드 안의 파우더블루를 color로 바꿨다.

 

그리고 원래 코드가 있던 자리로 가서

원래 코드를 지우고

setColor라는 함수를 쓰고

파우더블루와 블루를 각각 써준다.

→ 완성

 

target.style.color = 'white' 부분도 함수로 만들어보자.

이것도 setColor로 이름을 붙이면 문제가 생긴다.

위에 있던 setColor 함수가 이것으로 덮어쓰기되어버리기 때문이다.

 

따라서 충돌이 나지 않게 이름을 더 세분화시켜서

LinksSetColor와 BodySetColor로 해준다.

 

LinksSetColor와 BodySetColor 함수를 만들어주고,

밑에 원래 있던 코드를 지우고 대신 이 함수로 바꿔주었다.

 

※ 이렇게 하면 실행이 안 되는데,

target이라는 변수의 값이 아래 함수에서 지정되기 때문이다.

그러므로 아래 함수의 var target =  뒷부분을 복사해서

위의 함수의 target을 지우고 대신 붙여넣었다.

이번에는 배경화면 색깔을 지정하는 코드도

BodySetBackgroundColor라는 함수로 지정하고

target 변수 값을 붙여넣고

아래 함수에서 BodySetBackgroundColor를 사용하도록 바꿔보았다.

 

이 때, 서로 연관된 함수와

서로 연관된 변수들을 그룹핑해서

정리정돈하기 위한 수납상자로서 객체가 존재한다.

 

Body와 Links라는 객체를 만들어 보았다.

이 때 뒤에 점을 찍고, 점 뒤는 소문자로 바꾼다.

 

이렇게 객체는 컴퓨터 저장장치의 디렉토리 또는 폴더와 같은 역할을 한다.

 

또한 지금까지 우리가 사용했던

document.querySelector에서 document가 객체였다는 것을 알 수 있다.

 

그리고 객체에 속해있는 함수는 함수라고 하지 않고

메소드(method)라고 부른다.

 

지금 우리가 작성한 코드는 동작하지 않는 코드이다.

다다음시간에 진짜 객체로 만들어볼 것이다.

 

2. 객체

(1) 객체의 쓰기와 읽기

정보의 양이 많아졌을 때 서로 연관된 정보를 정리정돈하기 위한 도구

① 배열 - 순서에 따라서 정보를 정리정돈 [0, 1, 2..]

② 객체 - 순서 없이 정보를 저장. 대신 이름이 있다.

 

※ 객체란 이름(key)과 값(value)으로 구성된 프로퍼티(property)의 정렬되지 않은 집합.

 

1) 정보를 저장하는 방법

중괄호(object literal)를 쓴다. cf) 배열은 대괄호[]

"딱지(key)":"정보"

 

2) 정보를 가져오는 방법

document.write(변수이름.딱지(key))

※ 중간의 점은 object access operator라고 부른다.

 객체에 접근하는 오퍼레이터라는 뜻.

 

3) 정보를 추가하는 방법

변수이름.딱지(key) = "정보"

 

※ 딱지 이름에 빈칸을 추가하고 싶다면

. 대신에 []를 쓰고 ""하면 된다.

(2) 객체와 반복문

객체의 모든 데이터를 가져오는 방법 - 반복문 사용

검색어: javascript object iterate(순회하다, 반복적으로가져오다)

 

for는 coworkers라는 변수가 가리키는 객체에 있는 key 값들을 가져오는 반복문 (순서는 보장하지 않는다.)

cf) 배열에서는 key 대신 index라고 한다.

→ coworkers에 있는 key 값들 하나하나를 변수값으로 세팅해 준다

 

그렇다면 위와 같이 입력하면

key 자리에 programmer, designer, bookkeeper, data scientist가 차례로 들어가면서

정보들이 나올 것이다.

 

(3) 프로퍼티와 메소드

객체에는 데이터를 담을 수 있다.

문자, 배열, 숫자, 함수 등

 

※ 객체에 속해있는 함수는 함수라고 하지 않고
메소드(method)라고 부른다.

 

coworkers라는 객체에 메소드를 추가해보자. 

 

이렇게 하면 된다.

 

※ 아래 두 가지도 같은 것이다.

(2)에서 만들었던 코드를 넣었다.

 

실행시키면 이렇게 된다.

※ 밑에 showAll이 표시된 것은

showAll 자체도 coworkers에 소속된 데이터이기 때문이다.

이것을 없애기 위해서는 for문 안에서 if문으로  showAll을 제외한다는 코딩을 하면 되지만

지금 중요한 것은 아니다.

 

그런데 이것은 좋은 방법이 아니다.

∵  coworkers라는 이름이

여기에 박혀있기 때문에,

만약에 이 객체의 이름이 바뀐다면 데이터를 못 가져올 수 있다.

∴ 아래 표시된 coworkers를 this(이 함수가 소속된 객체를 가리키는 약속된 기호)로 바꾼다.

3. 객체 활용

위의 두 함수를 지우고 아래 화면처럼 만든다.

※ 아래 화면에서 } 뒤에 콤마가 있어야 작동한다.

 

위의 함수도 아래와 같이 바꾼다.