ㅤㅤㅤ

JSON 튜토리얼 본문

プログラミング/JavaScript JQuery

JSON 튜토리얼

ㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤㅤ 2017. 6. 27. 10:35

■ JSON 개요

JSON 또는 JavaScript 객체 표기법은 인간이 읽을 수 있는 데이터 교환용으로 설계된 경량 텍스트 기반 개방형 표준입니다. JSON 에서 사용되는 규칙은 프로그래머들에게 잘 알려진 C, C++, Java, Python, Perl 등을 포함합니다.

  • JSON 은 JavaScript 객체 표기법을 의미합니다.

  • 이 포맷은 Douglas Crockford 에 의해 구체화되었습니다.

  • 이것은 인간이 읽을 수 있는 데이터 교환을 위해 설계되었습니다

  • 이것은 JavaScript에서 확장되었습니다 .

  • 파일 이름 확장자는 .JSON 입니다

  • JSON 인터넷 미디어 타입은 응용 프로그램/JSON 입니다.

  • 통일된 유형 식별자 public.json 입니다


■ JSON 의 사용

  • 브라우저 확장 프로그램 또는 웹 사이트를 포함하는 JavaScript 기반 응용 프로그램을 작성할 때 사용됩니다.

  • JSON 형식은 네트워크 연결을 통해 구조화 된 데이터를 직렬화 및 전송하는데 사용된다.

  • 이것은 주로 서버와 Web 응용 프로그램 간에 데이터를 전송 하는데 사용된다.

  • Web 서비스와 API.s 는 공개 데이터를 제공하기 위해 JSON 형식을 사용합니다.

  • 그것은 현대의 프로그래밍 언어로 사용할 수 있습니다.


■ JSON 의 특징

  • JSON 을 읽고 쓰는 것은 간단하다.

  • 가벼운 텍스트 기반 교환 형식

  • 언어에 의존하지 않는다.


■ 간단한 JSON 예제

예제는 JSON을 사용하여 책 정보를 저장하고 있는 것을 보여줍니다.

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

위의 프로그램을 이해 한 후에, 또 다른 예제를 해보겠습니다. 아래의 코드를 json.htm 로 저장해보자.

<html>
<head>
<title>JSON example</title>
<script language="javascript" >
   
  var object1 = { "language" : "Java", "author"  : "herbert schildt" };
  document.write("<h1>JSON with JavaScript example</h1>");
  document.write("<br>");
  document.write("<h3>Language = " + object1.language+"</h3>"); 
  document.write("<h3>Author = " + object1.author+"</h3>");  
 
  var object2 = { "language" : "C++", "author"  : "E-Balagurusamy" };
  document.write("<br>");
  document.write("<h3>Language = " + object2.language+"</h3>"); 
  document.write("<h3>Author = " + object2.author+"</h3>");  
   
  document.write("<hr />");
  document.write(object2.language + " programming language can be studied " +
  "from book written by " + object2.author);
  document.write("<hr />");
   
</script>
</head>
<body>
</body>
</html>

이제 json.html 을 javascript 가 사용가능한 브라우저에서 실행해봅시다. 아래와 같은 결과가 나올 것입니다.

JSON 객체에 대한 자세한 내용은 JSON 객체 튜토리얼을 참조하세요.



출처: http://dpug.tistory.com/67#.WVG1tmiLTIU [퍼그의 전초기지]






■ JSON 문법

JSON의 기본적인 구문 간단히 살펴보겠습니다. JSON 구문은 기본적으로 JavaScript 구문의 하위 집합으로 간주됩니다, 그것은 다음과 같습니다.

  • 데이터는 이름 / 값 쌍으로 표현된다.
  • 중괄호는 개체를 유지하고 각각의 이름이 계속되고있는 ':'(콜론), 이름 / 값 쌍은 쉼표로 구분됩니다.
  • 대괄호는 배열과 값은 쉼표로 구분 된 둡니다.
  • 아래의 간단한 예는 다음과 같습니다.

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

JSON은 다음과 같은 2가지 데이터 구조를 지원합니다.

  • 이름 / 값 쌍의 컬렉션 : 이 데이터 구조는 다른 프로그래밍 언어에서 지원됩니다.
  • 값 목록을 명령 : 배열, 목록, 벡터 및 시퀀스 등이 포함되어 있습니다.


출처: http://dpug.tistory.com/71#.WVG2IGiLTIU [퍼그의 전초기지]





■ 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 = {name: 'Amit', marks: 97, distinction: true}


■ Array

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

예제:

예제는 여러개의 오브젝트를 포함한 배열을 보여줍니다.

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


■ Object

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

문법:

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

예제:

예제는 오브젝트를 보여줍니다.

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


■ Null

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

문법:
null

예제:

예제는 여러개의 오브젝트를 포함한 배열을 보여줍니다.

var i = null;

if(i==1) 
{
   document.write("value is 1");	
}
else
{
   document.write("value is null");
}


■ JSON 값

이것이 포함할 수 있는 것은 다음과 같습니다:

  • number (integer 또는 float)
  • string
  • boolean
  • array
  • object
  • null

문법:

String | Number | Object | Array | TRUE | FALSE | NULL

예제:

예제는 오브젝트를 보여줍니다.

var i =1;
var j = "sachin";
var k = null;


출처: http://dpug.tistory.com/72#.WVG2PWiLTIU [퍼그의 전초기지]





■ 간단한 오브젝트 만들기

JSON 객체(Object)는 Javascript를 사용하여 만들 수 있습니다. Javascript를 사용하여 JSON 객체를 만드는 여러 가지 방법을 살펴 봅시다 :

빈 객체 만들기 :

var JSONObj = {};

새 객체 만들기 :

var JSONObj = new Object();

string타입 bookname 와 숫자타입 price 를 속성을 갖는 오브젝트를 생성. 이 속성은 '.' 연산자를 통해 접근합니다.

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

다음은 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>

IE와 다른 Javascript의 실행을 지원하는 브라우저를 사용하여 json_object.htm 열면, 다음과 같은 결과가 생성됩니다.

■ Array 객체 만들기

다음은 JSON을 사용하여 JavaScript에서 객체를 생성한 예제입니다. 아래의 코드를 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>

IE와 다른 Javascript의 실행을 지원하는 브라우저를 사용하여 열면, 다음과 같은 결과가 생성됩니다.



출처: http://dpug.tistory.com/77#.WVG2YGiLTIU [퍼그의 전초기지]

'プログラミング > JavaScript JQuery' 카테고리의 다른 글

JavaScript에서 json을 Parse하는 방식입니다.  (0) 2017.06.27
JavaScript에서 json을 생성 하는 방식입니다.  (0) 2017.06.27
JSON 은 무엇인가? 개요 알아보기  (0) 2017.06.23
자바스크립트 셀렉트박스 날짜 선택!  (0) 2017.06.23
JQuery를 이용한 달력 datepicker  (1) 2017.06.22
공유하기 링크
'プログラミング/JavaScript JQuery' Related Articles more
Comments