- 전체
- HTML
- Web Design (웹디자인)
- XE 응용 개발
- wordpress plugin dev
- Javascript & JavaScript Application
- MEAN Stack : full stack javascript
- angular js & ionic framework
- bootstrap
- WebGL, Three.js and Babylon.js
- restful api design
- mobile web
- node.js 응용
- Cloud Service 응용
- 웹 어셈블리 개발 [WASM, WebAssembly]
- 마이크로서비스, MSA (microservice architecture)
- WebGL / WebGPU
- next.js 개발
- micro frontend (마이크로프론트앤드)
- 전자상거래/쇼핑몰
- 서버 클라우드 (aws, azure, google)
JavaScript JSON - 자바스크립트 강좌 JS / CSE
2017.05.06 08:51
JSON - 자바스크립트 강좌 JS / CSE
JavaScript JSON
JSON은 데이터를저장하고 전송하는 형식입니다.
JSON은 서버에서 웹 페이지에 보내질때 주로 사용됩니다.
1. What is JSON?
JSON은 JavaScript Object Notation의 약자입니다.
JSON은 경량화 데이터 교환 형식입니다.
JSON은 언어 독립적입니다.
JSON은 자가 묘사(self-describing)적이고 쉽게 이해 할 수 있습니다.
2. JSON Example
아래 JSON 문법은 employee 객체를 선언한 것입니다: 3개의 employee 레코드에 대한 배열
|
1
2
3
4
5
|
{"employees":[
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]}
|
cs |
3. The JSON Format Evaluates to JavaScript Objects
JSON 형식은 자바스크립트 객체를 생성하는 코드와 동일한 문장구성을 통해 되어 있습니다.
이러한 유사성으로 인해, 자바스크립트 프로그램은 JSON 데이터를 자바스크립트 객체로 쉽게 변환 할 수 있습니다.
4. JSON Syntax Rules
- 데이터는 이름/값 쌍입니다.
- 데이터는 콤마로 구분됩니다.
- 중괄호가 객체를 담습니다.
- 꺽쇠괄호가 배열을 담습니다.
5. JSON Data - A Name and a Value
JSON 데이터는 이름.값 쌍으로 작성되어 있습니다. 자바스크립트 객체 속성처럼
이름/값 쌍은 필드 이름과 값으로 구성되어 있습니다.
6. JSON Objects
JSON 객체는 중괄호 안에 작성되어 있습니다.
자바스크립트처럼, 객체는 여러 이름/값 쌍으로 구성되어 있습니다.
7. JSON Arrays
JSON 배열은 대괄호 안에 작성되어 있습니다.
{"firstName":"John", "lastName":"Doe"},
{"firstName":"Anna", "lastName":"Smith"},
{"firstName":"Peter", "lastName":"Jones"}
]
8. Converting a JSON Text to a JavaScript Object
JSON의 일반적인 사용은 웹 서버로 부터 실 데이터를 읽어와서, 웹 페이지에 데이터를 표시합니다.
먼저, JSON 문법을 포함한 문자열을 만듭니다:
|
1
2
3
4
|
var text = '{ "employees" : [' +
'{ "firstName":"John" , "lastName":"Doe" },' +
'{ "firstName":"Anna" , "lastName":"Smith" },' +
'{ "firstName":"Peter" , "lastName":"Jones" } ]}';
|
cs |
그 다음, 자바스크립트 내장 함수 JSON.parse()를 사용하여 문자열을 자바스크립트 객체로 변환합니다.
|
1
2
|
var obj = JSON.parse(text);
|
cs |
예제:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
<!DOCTYPE html>
<html>
<body>
<h2>Create Object from JSON String</h2>
<p id="demo"></p>
<script>
var text = '{"employees":[' +
'{"firstName":"John","lastName":"Doe" },' +
'{"firstName":"Anna","lastName":"Smith" },' +
'{"firstName":"Peter","lastName":"Jones" }]}';
obj = JSON.parse(text);
document.getElementById("demo").innerHTML =
obj.employees[1].firstName + " " + obj.employees[1].lastName;
</script>
</body>
</html>
|
cs |
출처: http://palpit.tistory.com/402 [palpit's log-b]
광고 클릭에서 발생하는 수익금은 모두 웹사이트 서버의 유지 및 관리, 그리고 기술 콘텐츠 향상을 위해 쓰여집니다.
댓글 0
| 번호 | 제목 | 글쓴이 | 날짜 | 조회 수 |
|---|---|---|---|---|
| 4 | [Bootstrap3] Bootstrap 기본 | 졸리운_곰 | 2020.02.20 | 506 |
| 3 |
bootstrap 시작하기
 | 졸리운_곰 | 2017.01.29 | 718 |
| 2 |
Bootstrap 사용법
| 졸리운_곰 | 2017.01.29 | 716 |
| 1 |
Bootstrap
| 졸리운_곰 | 2017.01.29 | 365 |