Download presentation
Presentation is loading. Please wait.
1
JSON(JavaScript Object Notation)
인공지능 연구실
2
JSON 소개 JSON(제이슨, JavaScript Object Notation)은, 인터넷에서 자료를 주고받을 때 그 자료를 표현하는 방법이다. (경량의 데이터 교환 포맷) 형식은 자바스크립트의 구문 형식을 따르지만, 프로그래밍 언어나 플랫폼에 독립적이므로 C, C++, C#, 자바, 자바스크립트, 펄, 파이썬 등 많은 언어에서 이용할 수 있다. 표현할 수 있는 자료형에는 수, 문자열, 참/거짓이 있고, 또 배열과 객체도 표현할 수 있다. (XML 데이터는 모두 String 이다.)
3
JSON 구조 Object는 name/value 쌍으로 이루어져 있다.
Array는 대괄호로 구분, comma로 array의 값들을 구분한다.
4
Value는 큰따옴표 안에 String, number 등이 올 수 있다.
JSON 구조 Value는 큰따옴표 안에 String, number 등이 올 수 있다.
5
JSON 구조 예제 (1/3) 한 사람에 관한 정보를 갖는 JOSN 객체
6
JSON 구조 예제 (2/3) Daum 검색 API JSON (
7
JSON 구조 예제 (3/3) JSON 데이터를 정리해서 보여주는 웹사이트 (
8
JavaScript에서 JSON 만들기(1/3)
9
JavaScript에서 JSON 만들기(2/3)
10
jQuery Mobile 소개 jQuery Mobile은 Mobile Web Application 개발을 위한 JavaScript Framework 입니다. jQuery Mobile은 기존의 jQuery 진영에서 직접 개발한 Framework로 네이티브 수준의 모바일웹앱을 개발하기 위한 각종 UI 컨트롤과 Event 처리, 애니메이션 효과 및 자동 네비게이션, Ajax 통신 등 Mobile에 최적화된 기능을 포함
11
jQuery Mobile 추가 jquery.mobile-1.0.min.css : jQuery Mobile에서 사용 하는 CSS스타일 jquery min.js : jQuery Mobile 내부적으로는 Jqeury에 기반으로 작성 되어 있다. 따라서 jQuery 자체가 필요함 Jquery.mobile-1.0.min.js : jQuery Mobile 실제 자바스크립트 파일
12
뷰포트 설정하기 스마트폰이나 태블릿 PC 등으로 접속하면 화면 크기가 모두 달라진다.
뷰포트를 디바이스의 가로 크기에 맞춰서 설정 해줘야 된다.
13
jQuery Mobile 페이지 구성 data-role = “page” :하나의 웹 페이지 구분자
data-role = “header” :Header bar data-role = “content” :content data-role = “footer” :Footer bar
14
jQuery Mobile 페이지 구성 data-role = “page” :하나의 웹 페이지 구분자
data-role = “header” :Header bar data-role = “content” :content data-role = “footer” :Footer bar
15
한 페이지로 멀티 구성
16
한 페이지로 멀티 구성
17
화면 전환 효과 fade Flip Flow Pop Slide reverse
18
Create a collapsible Collapsible 옵션
19
Create a collapsible
20
Create a basic popup 호출되는 페이지를 popup 형태로 출력
21
Create a basic popup
22
실습 jQuery Mobile을 활용하여 3개의 링크를 만든다. 첫 번째 버튼 : collapsible 기능을 구현
두 번째 버튼 : turn 효과를 활용하여 화면 이동 기능 세 번째 버튼 : Popup창을 하나 띄운다.
23
실습 <!DOCTYPE html> <html> <head>
<meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href=" <script src=" <script src=" </head> <body> <div data-role="page" id="pageone"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <div data-role="collapsible"> <h1>Click me</h1> <p>Collapsibles</p> <a href="#pagetwo" data-transition="turn" class="ui-btn ui-corner-all ui-icon-check ui-btn-icon-left">Check Icon</a> <a href="#myPopup" data-rel="popup" class="ui-btn ui-corner-all ui-icon-star ui-btn-icon-left">Show Popup</a> <div data-role="popup" id="myPopup"> <p>This is a simple popup.</p> <div data-role="footer"> <h1>Footer</h1> <div data-role="page" id="pagetwo"> <h1>Welcome To My Homepage</h1> <div data-role="main" class="ui-content"> <p>Click on the link to go back.</p> <a href="#pageone">Go to Page One</a> <h1>Footer Text</h1> </body> </html>
Similar presentations
