JSON 개요

JSON(제이슨 , JavaScript Object Notation) 표기법은 인간이 읽을 수 있는 데이터 교환용으로 설계된 경량 텍스트 기반 개방형 표준 포멧이다. JSON 에서 사용되는 규칙은 프로그래머들에게 잘 알려진 C, C++, Java, Python, Perl 등 수많은 프로그래밍 언어에서 쉽게 이용할 수 있다. JSON 은 JavaScript 객체 표기법을 의미한다.

  • 이 포맷은 Douglas Crockford 에 의해 구체화되었다.
  • 인간이 읽을 수 있는 데이터 교환을 위해 설계되었다.
  • JavaScript에서 확장되었다.
  • 파일 이름 확장자는 .json 이다.
  • JSON 인터넷 미디어 타입은 application/json 이다.

JSON 사용

  • 브라우저 확장 프로그램 또는 웹 사이트를 포함하는 JavaScript 기반 응용 프로그램을 작성할 때 사용된다.
  • JSON 형식은 네트워크 연결을 통해 구조화 된 데이터를 직렬화 및 전송하는데 사용된다.
  • 주로 서버와 Web 응용 프로그램 간에 데이터를 전송 하는데 사용된다.
  • Web 서비스와 API.s 는 공개 데이터를 제공하기 위해 JSON 형식을 사용한다.
  • 여러 프로그래밍 언어에서 사용할 수 있다.

JSON 특징

  • JSON 을 읽고 쓰는 것은 간단하다.
  • 가벼운 텍스트 기반 교환 형식이다.
  • 언어에 의존하지 않는다.

JSON 문법

  • 데이터는 속성-값 쌍으로 표현된다.
  • 중괄호는 개체를 유지하고 각각의 이름이 계속되고있는 ':'(콜론), 속성-값 쌍으로 쉼표로 구분된다.
  • 대괄호는 배열과 값은 쉼표로 구분 된다.

JSON 데이터 타입

타입설명
NumberJavaScript에서 배정되는 정밀한 부동 소수점 형식
String큰 따옴표를 사용한 유니코드
Booleantrue 또는 false
Array연속된 값들의 정렬
Valuestring, number, true 또는 false, null 등
Object정렬되지 않은 key:value 콜렉션
Whitespace토큰쌍 사이에서 사용 가능
null비었음

숫자(Number)

  • JavaScript에서 배정되는 정밀한 부동 소수점 형식이다.
  • 진수와 16 진수는 사용되지 않는다.
  • N부호 또는 무한대는 숫자로 사용되지 않는다.

아래의 표는 숫자 타입들이다.

타입설명
정수숫자 1-9,0 및 양수 또는 음수
분수3, .9 같은 분수
지수e, e+, e-,E, E+, E- 같은 지수

문법

var json-object-name = { string : number_value, .......}

예제

Number 데이터 타입의 값은 따옴표를 사용하지 않아야 한다.

var obj = {marks: 97}

문자열(String)

  • 큰 따옴표로 묶인 Unicode 문자의 순서입니다.
  • 문자는 길이 1의 문자열, 즉 단일 문자열입니다.

아래의 표는 문자열의 형식이다.

타입설명
"큰 따옴표
\\역슬래쉬
\/슬래쉬
\b백스페이스
\f폼 피드(form feed)
\n새로운 줄
\ r리턴 키
\t탭 키
\ u16진수 4자리

문법

var json-object-name = { string : "string value", .......}

예제

String 데이터 타입의 값은 따옴표를 사용해야 합니다.

var obj = {name: "Amit"}

참/거짓(Boolean)

  • true 또는 false 값을 가지고 있습니다.

문법

var json-object-name = { string : true/false, .......}

예제

String 데이터 타입의 값은 따옴표를 사용해야 합니다.

var obj = {distinction: true}

배열(Array)

  • 정렬된 값의 컬렉션이다.
  • 대괄호를 둘러싸여 있으며, '[' 로 시작해서 ']' 로 끝난다.
  • 값은 쉼표로 구분된다.
  • 배열 인덱스는 0 으로 시작한다.
  • 키 이름이 연속하는 정수이면 배열을 사용해야 한다.

문법

[ value, .......]

예제

예제는 여러개의 오브젝트를 포함한 배열이다.

{
    "books": [{
        "language": "Java",
        "edition": "second"
    }, {
        "language": "C++",
        "lastName": "fifth"
    }, {
        "language": "C",
        "lastName": "third"
    }]
}

객체(Object)

  • 정렬되지 않은 이름과 값이 쌍(pairs)으로 이루어진 세트입니다.
  • 오브젝트는 중괄호로 둘러싸여 있으며, '{' 로 시작해서 '}' 로 끝난다.
  • 각각의 이름은 ':'(콜론) 그리고 ','(쉼표) 로 구분된 속성-값 쌍으로 되어 있다.
  • 키는 문자열이어야 하며, 서로 달라야 한다.
  • 오브젝트들은 키는 문자열이어야 한다.

문법

{ string : value, .......}

예제

예제는 1개의 오브젝트를 나타낸다.

{
    "id": "011A",
    "language": "JAVA",
    "price": 500
}

Null

이것은 비어있는 타입을 의미합니다.

예제

var i = null;

간단한 오브젝트 만들기

JSON 객체(Object)는 JavaScript를 사용하여 만들 수 있다.

빈 객체 만들기

var obj = {};

새 객체 만들기

var obj = new Object();

속성을 갖는 오브젝트를 생성

아래 코드는 string타입 bookname 와 숫자타입 price 를 속성을 갖는 오브젝트를 생성한다.
속성은 점(.) 연산자를 통해 접근가능하다.

var obj = { "bookname ":"VB BLACK BOOK", "price":500 };

간단한 JSON 예제

예제 1) 아래 JSON는 책 정보를 표현한 것이다.

{
    "book": [{
        "id": "01",
        "language": "Java",
        "edition": "third",
        "author": "Herbert Schildt"
    }, {
        "id": "07",
        "language": "C++",
        "edition": "second",
        "author": "E.Balagurusamy"
    }]
}

예제 2) JSON을 사용하여 JavaScript에서 객체를 생성하기

아래의 코드를 json_object.htm 로 저장한다.

<html>
<head>
<title>Creating Object JSON with JavaScript</title>
<script language="javascript">
    var JSONObj = {
        "name" : "tutorialspoint.com",
        "year" : 2005
    };
    document.write("<h1>JSON with JavaScript example</h1>");
    document.write("<br>");
    document.write("<h3>Website Name=" + JSONObj.name + "</h3>");
    document.write("<h3>Year=" + JSONObj.year + "</h3>");
</script>
</head>
<body>
</body>
</html>

Javascript의 실행을 지원하는 브라우저를 사용하여 json_object.html 열면, 다음과 같은 결과가 표시된다.

예제 3) JSON을 사용하여 JavaScript에서 Array 객체 만들기

아래의 코드를 json_array_object.htm 로 저장한다.

<html>
<head>
<title>Creation of array object in javascript using JSON</title>
<script language="javascript">
    document.writeln("<h2>JSON array object</h2>");
    var books = {
        "Pascal" : [ {
            "Name" : "Pascal Made Simple",
            "price" : 700
        }, {
            "Name" : "Guide to Pascal",
            "price" : 400
        } ],
        "Scala" : [ {
            "Name" : "Scala for the Impatient",
            "price" : 1000
        }, {
            "Name" : "Scala in Depth",
            "price" : 1300
        } ]
    }
    var i = 0
    document.writeln("<table border='2'><tr>");
    for (i = 0; i < books.Pascal.length; i++) {
        document.writeln("<td>");
        document.writeln("<table border='1' width=100 >");
        document.writeln("<tr><td><b>Name</b></td><td width=50>" + books.Pascal[i].Name + "</td></tr>");
        document.writeln("<tr><td><b>Price</b></td><td width=50>"   + books.Pascal[i].price + "</td></tr>");
        document.writeln("</table>");
        document.writeln("</td>");
    }
    for (i = 0; i < books.Scala.length; i++) {
        document.writeln("<td>");
        document.writeln("<table border='1' width=100 >");
        document.writeln("<tr><td><b>Name</b></td><td width=50>"    + books.Scala[i].Name + "</td></tr>");
        document.writeln("<tr><td><b>Price</b></td><td width=50>" + books.Scala[i].price + "</td></tr>");
        document.writeln("</table>");
        document.writeln("</td>");
    }
    document.writeln("</tr></table>");
</script>
</head>
<body>
</body>
</html>

Javascript의 실행을 지원하는 브라우저를 사용하여 json_object.html 열면, 다음과 같은 결과가 표시된다. 

참조


'기타' 카테고리의 다른 글

C/C++와 JAVA 비교  (0) 2018.01.10
REST API란?  (0) 2017.12.10
JSON이란?  (0) 2017.12.10
마크다운(Markdown) 이란?  (0) 2017.12.10
문자열 체크 예제  (0) 2016.04.18
아두이노 동영상 강의  (0) 2016.04.17

+ Recent posts