�ݺ�ߣ

Introduction to JSONJavaScript Object NotationsRaghavendra Nayak M

Created by RaghavendraNayak M All sample codes in this slide are released under Public Domain.Contact me at http://twitter.com/MRNayakrnayak@hotmail.comRaghavendra Nayak M

What we will learn today?Basics of HTMLBasics of JavaScriptJSONBuilding YouTube App Twitter App Wikipedia AppRaghavendra Nayak M

Why JSON?JSON is an alternative to XMLUsing JSON we can build various 3rd party applications.It is easy to retrieve Tweets, YouTube Videos and many more using JSON.Programming is simple and easy.JSON data is easy to read.JSON parsers are available in various JavaScript Framework like jQuery, Yahoo UIRaghavendra Nayak M

Basics about HTMLHTML is a language for describing web pages.

It is a markup language and not a programming language.

Markup language is set of various tags.

It uses markup language to describe a page.

A web page with .php, .py, .rb is a dynamically generated HTML page using backend languages.Raghavendra Nayak M

Simple HTML Page <html><head><title>Hello Everyone</title><link rel="stylesheet" type="text/css" href="style.css" ></link></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> Raghavendra Nayak M

HTML Heading Tag<h1>-<h6> Heading tags in HTML are defined from <h1> to <h6><h1> Hello Everyone </h1><h2> Hello Everyone </h1>….…<h6> Hello Everyone </h6>Raghavendra Nayak M

Paragraph Tag In HTML paragraphs are defined using <p> tag.<p> Hello </p><p> A quick brown fox jumped over a lazy village dog.</p>Raghavendra Nayak M

Break Tag <br> tag in HTML adds a single line break.If we want content to appear in new line then we must use break tag.Raghavendra Nayak M

Anchor Tag In HTML we use <a> tag (Anchor Tag) to create links<a href=“http://www.google.com”>Google</a>Here href contains the link to another document.We can also call JavaScript functions using anchor tag.<a href=“#” onclick=“smefunc();”> Click Me</a> Raghavendra Nayak M

Image TagWe use <img> tag to embed images in a webpage.<imgsrc=/slideshow/introduction-to-json-and-buildin/9411642/“a.jpg”></img>Above tag will embed a image a.jpg.We can use images for creating links.<a href=“http://www.google.com” ><imgsrc=“a.png”/></a>We can specify height and width of image<imgsrc=“a.jpg” width=“200px” height=“100px” alt=“goog”/>Raghavendra Nayak M

Division TagA division tag or div tag (<div>) is used to create division in HTML<div id=“one” class=“three”>id specify unique id for element.class specify class name for an element. There can be two or more elements with same class name.Raghavendra Nayak M

Link Tag Link Tag specifies link between existing document and external resources<link rel="stylesheet" type="text/css" href=“style.css" />We use link to specify external stylesheet.Raghavendra Nayak M

Script TagScript tag is used to include client side scripts like JavaScript.<script type=“text/javascript”>alert(‘Msg”);</script>Script tag can also contain external scripts.<script type=“text/javascript” src=/slideshow/introduction-to-json-and-buildin/9411642/“hme.js” />Raghavendra Nayak M

Basics of JavascriptJavaScript is a client side Scripting Language.It helps to add dynamic effect to web pages.JavaScript can be used to create image sliders, charts, AJAX Applications and many more.JavaScripts are used as event handlers.JavaScript are used to create and read cookie.Various Javascript Frameworks like jQuery, MooTools, YUI make programming even more easier.Raghavendra Nayak M

Variables in JavascriptIn JavaScript we define Variables using ‘var’<script type=“text/javascript”>var a=10;//Integervar b=‘Hello’;//Charalert(b);//a dialogbox with contents of variable b// Single line comment/*Multiline Comment*/</script>Raghavendra Nayak M

Getting Client Side DateIts is possible to get users date, browser, os etc using JavaScript<script type=“text/javascript”>var d=new Date();alert(d);</script>Raghavendra Nayak M

Printing Variables in JSJust like printf in C, In JavaScript we use document.write();<script type=“text/javascript”>document.write(“Hello Everyone”);</script><script type=“text/javascript”>var a=‘Hello World’;document.write(a);</script>Raghavendra Nayak M

+ operator in JavaScript+ operator is used to add integers.+ operator is used to concatenate to strings<script type=“text/javascript”>var a=2; var b=3; document.write(a+b);var c=‘Hello’; var d=‘everyone’; document.write(c+d);</script>Raghavendra Nayak M

JS and CSyntax of if…else , for loop , while loop in JavaScript are same as that of C.if(i==0){for(j=0;j<n;j++){//sme code}elsealert(‘i !=0’);Raghavendra Nayak M

Arrays in JavaScriptArray is used to store multiple values in single variable.<script type=“text/javascript”>var dept=new Array(4);dept[0]=‘CSE’;dept[1]=‘ISE’;dept[2]=‘ECE’;dept[4]=‘ME’;for(vari=0;i<dept.length;i++)document.write(dept[i]);</script>Raghavendra Nayak M

Problems with arrayIt is difficult to handle large volume of data using Arrays.This problem can be solved by using JSONRaghavendra Nayak M

JSONJSON is a human readable data interchange.It is derived from JavaScript, But it is language independent.JSON supports strings, numbers, objects, arrays and BooleanIt is primarily used to send data from web server to application.There are inbuilt functions and libraries to parse JSON in many languages.Raghavendra Nayak M

Simple JSON Format{ "id": 1, "name": “Raghavendra", “dept": “CSE”, } JSON starts with ‘{‘ and ends with ‘}’JSON has a optional callbackmyJSON({“id”:1,”name”:”Raghavendra”,”dept”:”CSE”}); Raghavendra Nayak M

Simple C Program#include<stdio.h>void p(char a[]){printf(“%s”,a);}void main(){char ab[4]={‘H’,’E’,’L’,’L’,’O’};p(ab);}When we run above program, it will print HELLO, Similarly we build a json parser and then call parsing function with JSON as an argument.Raghavendra Nayak M

Parsing JSON using JS{"students":[{"name":"Rahul","usn":"cs066"},{"name":"Rajiv","usn":"cs068"},{"name":"Rudresh","usn":"cs072"},]}Raghavendra Nayak M

Js Code for parsingIf we specify a callback to above student json and if call back url is MyJson thenMyJson({"students":[{"name":"Rahul","usn":"cs066"},{"name":"Rajiv","usn":"cs068"},{"name":"Rudresh","usn":"cs072"}]});Raghavendra Nayak M

Writing MyJson Function<script type=“text/javascript”>Function MyJson(data){For(vari=0;i<data.student.length;i++){var name=data.student[i].name;varusn=data.student[i].usn;document.write(usn+” “+name);}}</script>Raghavendra Nayak M

Complete Code<script type=“text/javascript”>function MyJson(data){For(vari=0;i<data.student.length;i++){var name=data.student[i].name;varusn=data.student[i].usn;document.write(usn+” “+name);}}</script><script type=“text/javascript” src=/slideshow/introduction-to-json-and-buildin/9411642/“student.json?callback=MyJson”></script>Raghavendra Nayak M

Building A Simple YouTube AppYouTube is a video hosting service from Google.YouTube Provides various API’s to access its dataIt offers data in XML, JSONC formatRaghavendra Nayak M

Youtube JSON ExampleConstructing URLBase URL is http://gdata.youtube.com/feeds/api/videos?v=2Parametersq=<search query>callback=<function name>http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=eminem&callback=myvideoThe first parameter to url should begin with ‘?’ and all other parameter should begin with ‘&’Raghavendra Nayak M

MyVideo Function<script type="text/javascript">function myvideo(json) { for(i=0;i<6;i++) { var title=json.data.items[i].title; document.write(title+'<br/>'); } }</script><script type="text/javascript" src=/slideshow/introduction-to-json-and-buildin/9411642/"http:/gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=eminem&callback=myvideo"></script>Raghavendra Nayak M

Embedding YouTube VideoYouTube Videos are Abobe flash content we can embed them using<embed src=/slideshow/introduction-to-json-and-buildin/9411642/“FLASH URL” width=“300px” height=“200px”></embed>Raghavendra Nayak M

Full Source Code<script type="text/javascript">function myvideo(json) { for(i=0;i<6;i++) { var title=json.data.items[i].title; var video='<embed src=/slideshow/introduction-to-json-and-buildin/9411642/"& document.write(title+'<br/>'+video+'</br>'); } }</script><script type="text/javascript" src=/slideshow/introduction-to-json-and-buildin/9411642/"http:/gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=eminem&callback=myvideo"></script>Raghavendra Nayak M

Wikipedia APIWikipedia is a free encyclopedia which anyone can edit.Wikipedia uses a CMS(Content Management System) know as Media Wiki.We can perform use wikipedia suggest api, pages api and many more thingsRaghavendra Nayak M

URL ConstructionBase URL is http://en.wikipedia.org/w/api.phpParametersaction=parsepage=<Page Name>prop=textformat=jsoncallback=mywiki(callback function)Raghavendra Nayak M

MyWiki Function<script type="text/javascript">function mywiki(json) { var html=[ ]; varind = json.parse.text.*; html.push(ind); document.write(html); }</script>Above function helps us to retrieve a wikipedia page.Raghavendra Nayak M

Complete Source Code<script type="text/javascript"> function mywiki(json) { var html=[ ]; varind = json.parse.text.*; html.push(ind); document.write(html); } </script> <script type="text/javascript" src=/slideshow/introduction-to-json-and-buildin/9411642/"http:/en.wikipedia.org/w/api.php?action=parse&page=Bangalore&prop=text&format=json&callback=mywiki"></script> Raghavendra Nayak M

Twitter Public TimelineTwitter is a micro blogging site.A list of Public Tweets is called as Public Timeline.Public Timeline doesn’t require Authentication to retrieve tweets.Raghavendra Nayak M

�ݺ�ߣ

Introduction to JSON and Building Youtube, Twitter and Wikipedia Web Apps

More Related Content

Introduction to JSON and Building Youtube, Twitter and Wikipedia Web Apps