하이브리드앱

본문 바로가기
사이트 내 전체검색


하이브리드앱
하이브리드앱

17. JSON

페이지 정보

작성자 관리자 댓글 0건 조회 1,063회 작성일 22-01-12 18:52

본문

17. JSON

JSON(Javascript Object Notation : 기존에 사용하던 데이터 표현 방식인 XML을 조금 가볍게(경량화)해서 사용하기 위하여 고안된 표현방식이다.


- JSON데이터의 표현형식

 var 객체명 = {이름1: 값, 이름2: 값, 이름3: 값}  

=====>{키(key): 값(value), 키: 값, 키: 값}

 사용예 1>

 var countries ={ko:"대한민국", us:"미국", jp:"일본"}

 

 var kor = countries.ko;

 var japan = countries["jp"];

 

 var member={

name:"김말똥",

age:"20",

hobby:["운동", "영화감상", "독서"],

company:{name:"kkk.com", team:"디자인"}

 }

 

 var memInfo = member.name+"님은 나이가 "+member.age+"세 이며, 취미는 "+member.hobby.length+"개 이고, 직장은 "+member.company.name+"의 "+member.company.team+"부서 입니다.";


memInfo를 출력한다면 >>>>>>


"김말똥님은 나이가 20세 이며, 취미는 3개 이고, 직장은 kkk.com의 디자인부서 입니다."


var jsonFunction ={

msg1:function(){

alert("안녕 JSON");

},

msg2:function(){

alert("헬로!! JSON");

}

}


//함수호출

jsonFunction.msg1();


실습 : jMobile39.html


<!doctype html>

<html>

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

<title>제이쿼리 모바일 연습</title>

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css"/>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>

<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<script type="text/javascript">

$(function(){

var jsonData ={

name:"김말똥",

age:28,

hobby:["음악감상", "독서"]

};

$("#list1 li:eq(0) span").text(jsonData['name']);

$("#list1 li:eq(1) span").text(jsonData.age);

$("#list1 li:eq(2) span").text(jsonData.hobby[0]+"/"+jsonData.hobby[1]);

var jsonFunction ={

msg1:function(){

alert("안녕 JSON");

},

msg2:function(){

alert("헬로!! JSON");

}

}

$('#btn1').click(function(){

jsonFunction.msg1();

});

$('#btn2').click(function(){

jsonFunction.msg2();

});

});

</script>

</head>

<body>

<div data-role="page" id="page1">

<div data-role="header" data-position="fixed" id="header">

<h3>JSON</h3>

</div>

<div role="main" class="ui-content">

<ul id="list1" data-role="listview" data-inset="true">

<li>이름:<span></span></li>

<li>나이:<span></span></li>

<li>취미:<span></span></li>

</ul>

<input type="button" id="btn1" value="json함수호출1">

<input type="button" id="btn2" value="json함수호출2">

</div>

<div data-role="footer" data-position="fixed">

<h3>jQuery</h3>

</div>

</div><!-- page1 -->

</body>

</html>



5.PNG


댓글목록

등록된 댓글이 없습니다.


개인정보취급방침 서비스이용약관 모바일 버전으로 보기 상단으로

TEL. 063-469-4551 FAX. 063-469-4560 전북 군산시 대학로 558
군산대학교 컴퓨터정보공학과

Copyright © www.leelab.co.kr. All rights reserved.