JSON 입문 강좌 기초편 json 입문 학습 노트

7262 단어 json 강좌json학습 노트
JSON: JavaScript Object Notation(JavaScript 객체 표현)
JSON은 텍스트 정보를 저장하고 교환하는 문법입니다.XML과 유사합니다.
JSON은 XML보다 작고 빠르며 해석하기 쉽습니다.
JSON 인스턴스

{
 "sites": [
 { "name":" " , "url":"www.jb51.net" }, 
 { "name":"google" , "url":"www.google.com" }, 
 { "name":" " , "url":"www.weibo.com" }
 ]
}
이 사이트 대상은 3개의 사이트 기록 (대상) 을 포함하는 그룹입니다.

JSON이란 무엇입니까?


JSON은 JavaScript 객체 표현(JavaScript Object Notation)을 말합니다.
JSON은 경량급 텍스트 데이터 교환 형식입니다.
JSON은 언어에 독립적: JSON은 Javascript 문법을 사용하여 데이터 대상을 설명하지만 JSON은 언어와 플랫폼에 독립적입니다.JSON 해상도와 JSON 라이브러리는 다양한 프로그래밍 언어를 지원합니다.현재 매우 많은 동적(PHP, JSP,.NET) 프로그래밍 언어가 JSON을 지원합니다.
JSON은 이해하기 쉬운 자기 묘사성을 가지고 있다
JSON - JavaScript 객체로 변환
JSON 텍스트 형식은 JavaScript 객체를 작성하는 것과 문법적으로 동일합니다.
이러한 유사성 때문에 해석기가 필요 없기 때문에 자바스크립트 프로그램은 내장된 eval() 함수를 사용하여 JSON 데이터로 원본 자바스크립트 대상을 생성할 수 있다.
온라인 인스턴스
저희 편집기를 통해 JavaScript 코드를 온라인으로 편집하고 단추를 누르면 결과를 볼 수 있습니다.

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> (jb51.net)</title>
</head>
<body>
<h2>JavaScript   JSON  </h2>
<p>
 : <span id="jname"></span><br /> 
 : <span id="jurl"></span><br /> 
  slogan: <span id="jslogan"></span><br /> 
</p>
<script>
var JSONObject= {
 "name":" ",
 "url":"www.jb51.net", 
 "slogan":" ， ！"
};
document.getElementById("jname").innerHTML=JSONObject.name 
document.getElementById("jurl").innerHTML=JSONObject.url 
document.getElementById("jslogan").innerHTML=JSONObject.slogan
</script> 
</body>
</html>

XML과 동일한 점


JSON은 텍스트입니다.
JSON의 "자기 설명"(인간 읽기 가능)
JSON에는 계층 구조가 있습니다(값에 있는 값).
JSON은 JavaScript를 통해 확인 가능
JSON 데이터는 AJAX를 사용하여 전송 가능

XML과 다른 점


종료 태그 없음
더 짧다
읽기 및 쓰기 속도 향상
내장된 JavaScript eval() 메서드를 사용하여 확인 가능
배열 사용
보류자 사용 안 함

왜 JSON을 사용합니까?


AJAX 응용 프로그램의 경우 JSON이 XML보다 빠르고 사용하기 쉽습니다.
XML 사용
XML 문서 읽기
XML DOM을 사용하여 문서 반복
값을 읽고 변수에 저장합니다.
JSON 사용
JSON 문자열 읽기
eval()로 JSON 문자열 처리

JSON 구문


JSON 구문은 JavaScript 구문의 하위 집합입니다.

JSON 구문 규칙


JSON 구문은 JavaScript 객체가 구문을 나타내는 서브셋입니다.
데이터 이름/값 쌍
데이터는 쉼표로 구분된다
괄호로 객체 저장
중괄호 저장 그룹

JSON 이름/값 쌍


JSON 데이터의 쓰기 형식은 이름/값 쌍입니다.
이름/값 쌍은 필드 이름 (이중 따옴표) 을 포함하고 뒤에 콜론 기호를 쓴 다음 값을 포함합니다.
"name": "우리"
이것은 이 JavaScript 문장과 동일합니다.
name = "우리"

JSON 값


JSON 값은 다음과 같습니다.
숫자(정수 또는 부동 소수점)
문자열 (큰따옴표에서)
논리적 값 (true 또는false)
배열 (중괄호 중)
객체(대괄호 중)
null

JSON 숫자


JSON 숫자는 정형 또는 부동점형일 수 있습니다.
{ "age":30 }

JSON 객체


JSON 객체는 대괄호({})에 다음과 같이 표시됩니다.
객체에는 여러 이름/값 쌍이 포함될 수 있습니다.
{"name": "우리", "url": "www.jb51.net"}
이 JavaScript 문과 같은 가격으로 이해하기 쉽습니다.
name = "우리"
url = "www.jb51.net"

JSON 배열


중괄호 안에 JSON 배열 쓰기:
배열에는 여러 객체가 포함될 수 있습니다.
{
"sites": [
{"name": "우리", "url": "www.jb51.net"},
{ "name":"google", "url":"www.google.com"},
{"name": "Microbo", "url": "www.weibo.com"}
]
}
위의 예에서 대상'sites'는 세 개의 대상을 포함하는 수조이다.모든 대상은 특정한 사이트(name, url)에 대한 기록을 대표한다.

JSON 부울 값


JSON 부울 값은 true 또는 false일 수 있습니다.
{ "flag":true }

JSON null


JSON은 null 값을 설정할 수 있습니다.
{ "jb51":null }

JSON은 JavaScript 구문을 사용합니다.


JSON은 JavaScript 구문을 사용하기 때문에 별도의 소프트웨어 없이 JavaScript의 JSON을 처리할 수 있습니다.
JavaScript를 사용하여 객체 배열을 생성하고 다음과 같이 값을 지정할 수 있습니다.
var sites = [
{ "name":"jb51", "url":"www.jb51.com"},
{ "name":"google", "url":"www.google.com"},
{"name": "Microbo", "url": "www.weibo.com"}
];
이렇게 하면 JavaScript 객체 배열의 첫 번째 항목에 액세스할 수 있습니다(색인은 0부터 시작).
sites[0].name;
반환된 내용은 다음과 같습니다.
jb51
다음과 같이 데이터를 수정할 수 있습니다.
sites[0].name="우리";

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title> (jb51.com)</title>
</head>
<body>
<h2>JavaScript   JSON  </h2>
<p> : <span id="name1"></span></p> 
<p> : <span id="name2"></span></p> 

<script>
var sites = [
	{ "name":"jb51" , "url":"www.jb51.com" }, 
	{ "name":"google" , "url":"www.google.com" }, 
	{ "name":" " , "url":"www.weibo.com" }
];

document.getElementById("name1").innerHTML=sites[0].name;
//  
sites[0].name=" ";
document.getElementById("name2").innerHTML=sites[0].name;
</script>

</body>
</html>
다음 단원에서는 JSON 텍스트를 JavaScript 객체로 변환하는 방법을 학습합니다.

JSON 파일


JSON 파일의 파일 형식은 ".json"입니다.
JSON 텍스트의 MIME 유형은 "application/json"입니다.

JSON vs XML


JSON과 XML은 웹 서버의 데이터를 수신하는 데 사용됩니다.
JSON과 XML은 다음과 같이 쓰기 방법에 따라 다릅니다.
JSON 인스턴스
{
"sites": [
{"name": "우리", "url": "www.jb51.com"},
{ "name":"google", "url":"www.google.com"},
{"name": "Microbo", "url": "www.weibo.com"}
]
}
XML 인스턴스

<sites>
 <site>
 <name> </name> <url>www.jb51.com</url>
 </site>
 <site>
 <name>google</name> <url>www.google.com</url>
 </site>
 <site>
 <name> </name> <url>www.weibo.com</url>
 </site>
</sites>
JSON과 XML의 차이점:
JSON과 XML 데이터는 모두 "자기 설명"으로 이해하기 쉽다.
JSON과 XML 데이터는 모두 차원이 있는 구조이다
대부분의 프로그래밍 언어에서 JSON 및 XML 데이터 사용 가능
JSON과 XML의 차이점:
JSON은 태그를 끝낼 필요가 없습니다.
JSON이 더 짧아졌어요.
JSON 읽기 및 쓰기 속도 향상
JSON은 배열을 사용할 수 있습니다.
가장 큰 차이점은 XML은 XML 해석기를 사용해야 하고 JSON은 표준 자바스크립트 함수를 사용해서 해석할 수 있다는 것이다.
JSON.parse(): JSON 문자열을 JavaScript 객체로 변환합니다.
JSON.stringify (): JavaScript 값을 JSON 문자열로 변환합니다.
왜 JSON이 XML보다 더 좋아요?
XML은 JSON보다 더 까다롭습니다.
JSON은 기존 JavaScript 객체를 사용하여 직접 해석할 수 있습니다.
JSON은 AJAX 애플리케이션을 위해 XML 데이터보다 빠르고 간단하게 로드됩니다.
XML 사용
XML 문서 가져오기
XML DOM을 사용하여 문서 반복
데이터를 받아서 변수에 복사하다
JSON 사용
JSON 문자열 가져오기
JSON.Parse 해석 JSON 문자열
JS - 메모리 사용 관련
TIL.Webpack 초기세팅

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage