객체(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 |