객체(object)

: 데이터 자료들의 묶음. 순서는 없고 각 데이터마다 이름을 정할 수 있다.

 

- 데이터 ( value) , 이름 ( key ) 

- key는 마음대로 지을 수 있다. 변수명과 비슷

- 중괄호로 묶는다.

 

 

 

 

 

 

1. 객체 만들기

 

- 중괄호로 묶고, 데이터 마다 이름을 붙여준다.

 

 

 

 

 

 

 

2. 객체 안의 데이터 가져오기

객체명.key

. : 객체의 key값을 꺼낼 때 사용

 

 

 

 

* 아직 정의되지 않은 데이터

 

 

 

 

 

3. 객체안에 데이터 추가하기

 

 

* 순서가 없기 때문에 배열과 다르게 중간이 채워지지 않는다.

* 맨앞, 맨 뒤의 개념이 없기 때문에 push, pop, shift ... 기능이 없음

 

 

 

 

 

* 객체의 장점 : 데이터를 설명할 수 있는 key 사용. 정보를 다룰 때 많이 사용한다 *

 

 

 

 

 

 

4. 배열로 사용했을 때와 객체로 사용했을 때

 

 

 

 

 

 

 

 

5. 배열안에 객체 이용하기

 

 

ex) 출석부 - 학생 , 게시판 - 게시물 , 회원목록 - 회원

 

JASON과 연관이 있다

JASON : 배열과 객체를 이용하여 자료형태를 만든다.

 

 

 

 

 

 

5. 데이터를 받고 꺼내기

 

( 학생이름 꺼내기)

 

백엔드가 데이터를 JASON 형식으로 프론트엔드에게 보내면

프론트 엔드가 아래의 코드처럼 화면에 띄워준다.

( 백에늗와 프론트엔드의 통신 프로그램 : ajax 등 )

* 웹개발의 기본

 

 

 

1) 데이터

 

check_list라는 객체 안에 count와 student라는 배열

student라는 배열 안에 객체들

 

 

 

2) 데이터 꺼내기

 

-

 

 

 

 

- for 문 이용하여 꺼내기.

 

 

* .length 와 div형태로 나타내기

 

 

 

- ul에 li 추가하여 만들기

 

createElement : 태그(node) 만들기

createTextnode : text node 만들기

appendChild : 만든 node에 text node 붙이기 

 

 

'프론트엔드 > JavaScript' 카테고리의 다른 글

<JS> function 예제  (0) 2017.08.05
<JS> 함수 (function) (~es5)  (0) 2017.08.05
<JavaScript> 배열과 객체(1) 배열(array)  (0) 2017.08.04
<JS> 반복문 ( while & do.. while )  (0) 2017.08.04
<JavaScript> 반복문 for  (0) 2017.08.01

+ Recent posts