'2013/03'에 해당되는 글 2건

JSON 문법

카테고리 없음 2013. 3. 29. 09:55

JSON이란 무엇이고 어떻게 쓰이는지 알아보도록 하겠습니다.


1. JSON이란

JSON : JavaScript Object Notation


영어 그대로 해석하자면 자바스트립트를 객체형식으로 표현하는 것입니다.


JSON은 XML보다 빠르고 변환하기도 쉬워 많이 대체해서 쓰고 있습니다. 그리고  적은양의 데이터가 송수신 되므로 모바일쪽에서 쓰기에도 부담이 적습니다.


2. JSON 표기법


JSON의 표기법은 다음과 같습니다.


JSON 데이터는 key/value형식으로 구성되어 있습니다.

"firstName" : "김"


알아보기 쉽게 자바스크립트 문장으로 바꾸면 다음과 같습니다.

firstName = "김"


이중에서 value에는 다음과 같은 형식을 넣을 수 있습니다.

  •  a number(integer or float)
  •  a string(큰 따옴표 포함)
  •  a boolean(true or false)
  •  an object(중괄호 포함)
  •  an array(대괄호 포함)
  •  null


[a number]

integer형이나 float형을 넣을 수 있습니다.  

"clickNumber" : 1



[a string]

string형을 표현하고 싶을 때는 큰 따옴표로 묶어줍니다.

"name" : "홍길동"



[a boolean]

true 나 false를 넣을 수 있습니다.

"bResult" : true



[an object]

여러개의 key/value를 입력하여 중괄호로 둘러싸여집니다.

{"firstName" : "길동", "lastName" : "홍"}



[an array]

  여러개의 object를 대괄호를 통해 둘러싸여집니다.

{

  "employees" : [

    {"firstName" : "길동", "lastName" : "홍"},

    {"firstName" : "철수", "lastName" : "김"},

    {"firstName" : "영순", "lastName" : "박"}

  ]

}


JSON은 자바스크립트 문법을 사용하기 때문에, JSON으로 작업할 때 별도의 소프트웨어가 필요없습니다.

자바스크립트를 사용해서 다음과 같이 생성할 수 있습니다.


var employees = [

   {"firstName" : "길동", "lastName" : "홍"},

   {"firstName" : "철수", "lastName" : "김"},

   {"firstName" : "영순", "lastName" : "박"}

];



3. JSON 예제


<html>

  <header></header>

  <body>

Name: <span id="jname"></span><br /> 

Age: <span id="jage"></span><br /> 

Address: <span id="jstreet"></span><br /> 

Phone: <span id="jphone"></span><br /> 

  </body>


  <script type="text/javascript">

    var employees = {

"name":"홍길동",

"street":"서울시 서초구 서초동", 

"age":33,

"phone":"010-1234-5678"};


document.getElementById("jname").innerHTML=employees.name 

document.getElementById("jage").innerHTML=employees.age 

document.getElementById("jstreet").innerHTML=employees.street 

document.getElementById("jphone").innerHTML=employees.phone 

  </script>

블로그 이미지

스마트전

,

 

jQuery로 선택된 값 읽기

$("#select_box option:selected").val();
$("select[name=selectbox]").val();

jQuery로 선택된 내용 읽기
$("#selectbox option:selected").text();

선택된 위치
var index = $("#test option").index($("#test option:selected")); 



// 셀렉트 박스 옵션에 추가(기존 옵션 뒤쪽으로 추가)

$("#myselect").append("<option value='1'>Apples</option>");
$("#myselect").append("<option value='2'>After Apples</option>");

// 옵션 시작 부분(맨 앞에) 추가
$("#myselect").prepend("<option value='0'>Before Apples</option>");

// 옵션값을 새롭게 정의
$("#myselect").html("<option value='1'>Some oranges</option><option value='2'>More Oranges</option><option value='3'>Even more oranges</option>");

// 옵션값의 인덱스 번호를 변경
$("#myselect option:eq(1)").replaceWith("<option value='2'>Some apples</option>");
$("#myselect option:eq(2)").replaceWith("<option value='3'>Some bananas</option>");

// 2번 인덱스의 값을 선택된 상태로 변경
$("#myselect option:eq(2)").attr("selected", "selected");

// 텍스트 내용으로 선택된 상태로 변경
$("#myselect").val("Some oranges").attr("selected", "selected");

// 선택된 옵션의 값을 변경
$("#myselect").val("2");

// index번호가 0인것을 제거
$("#myselect option:eq(0)").remove();

// 첫번째 옵션 엘리먼트를 제거
$("#myselect option:first").remove();

// 마지막 옵션 엘리먼트를 제거
$("#myselect option:last").remove();

// 선택된 텍스트 알림으로 보이기
alert($("#myselect option:selected").text());

// 선택된 값 알림으로 보이기
alert($("#myselect option:selected").val());

// 선택된 옵션의 인덱스 번호 보이기
alert($("#myselect option").index($("#myselect option:selected")));

// Alternative way to get the selected item
alert($("#myselect option:selected").prevAll().size());

// 0번 인덱스 다음으로 옵션을 추가
$("#myselect option:eq(0)").after("<option value='4'>Some pears</option>");

// 3번 인덱스 이전에 옵션을 추가
$("#myselect option:eq(3)").before("<option value='5'>Some apricots</option>");

// select 박스의 값이 변경되었을 때 알링으로 값과 텍스트 보이기
$("#myselect").change(function() {
alert($(this).val());
alert($(this).children("option:selected").text());
});
블로그 이미지

스마트전

,