Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Introduction to JSON<br />JavaScript Object Notations<br />Raghavendra Nayak M<br />
Created by RaghavendraNayak M	<br />All sample codes in this slide are released under Public Domain.<br />Contact me at ht...
What we will learn today?<br />Basics of HTML<br />Basics of JavaScript<br />JSON<br />Building YouTube App<br /> Twitter ...
Why JSON?<br />JSON is an alternative to XML<br />Using JSON we can build various 3rd party applications.<br />It is easy ...
Basics about HTML<br /><ul><li>HTML 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.</li></ul>Raghavendra Nayak M<...
Simple HTML Page <br /><html><br /><head><br /><title>Hello Everyone</title><br /><link rel="stylesheet" type="text/css" h...
HTML Heading Tag<br /><h1>-<h6> Heading tags in HTML are defined from <h1> to <h6><br /><h1> Hello Everyone </h1><br /><h2...
Paragraph Tag	<br />In HTML paragraphs are defined using <p> tag.<br /><p> Hello </p><br /><p> A quick brown fox jumped ov...
Break Tag	<br /><br> tag in HTML adds a single line break.<br />If we want content to appear in new line then we must use ...
Anchor Tag	<br />In HTML we use <a> tag (Anchor Tag) to create links<br /><a href=“http://www.google.com”>Google</a><br />...
Image Tag<br />We use <img> tag to embed images in a webpage.<br /><imgsrc=“a.jpg”></img><br />Above tag will embed a imag...
Division Tag<br />A division tag or div tag (<div>) is used to create division in HTML<br /><div id=“one” class=“three”><b...
Link Tag	<br />Link Tag specifies link between existing document and external resources<br /><link rel="stylesheet" type="...
Script Tag<br />Script tag is used to include client side scripts like JavaScript.<br /><script type=“text/javascript”>ale...
Basics of Javascript<br />JavaScript is a client side Scripting Language.<br />It helps to add dynamic effect to web pages...
Variables in Javascript<br />In JavaScript we define Variables using ‘var’<br /><script type=“text/javascript”><br />var a...
Getting Client Side Date<br />Its is possible to get users date, browser, os etc using JavaScript<br /><script type=“text/...
Printing Variables in JS<br />Just like printf in C, In JavaScript we use document.write();<br /><script type=“text/javasc...
+ operator in JavaScript<br />+ operator is used to add integers.<br />+ operator is used to concatenate to strings<br /><...
JS and C<br />Syntax of if…else , for loop , while loop in JavaScript are same as that of C.<br />if(i==0)<br />{<br />for...
Arrays in JavaScript<br />Array is used to store multiple values in single variable.<br /><script type=“text/javascript”><...
Problems with array<br />It is difficult to handle large volume of data using Arrays.<br />This problem can be solved by u...
JSON<br />JSON is a human readable data interchange.<br />It is derived from JavaScript, But it is language independent.<b...
Simple JSON Format<br />{ <br />"id": 1, <br />"name": “Raghavendra", <br />“dept": “CSE”, <br />} <br />JSON starts with ...
Simple C Program<br />#include<stdio.h><br />void p(char a[])<br />{<br />printf(“%s”,a);<br />}<br />void main()<br />{<b...
Parsing JSON using JS<br />{"students":<br />[<br />{<br />"name":"Rahul",<br />"usn":"cs066"<br />},<br />{<br />"name":"...
Js Code for parsing<br />If we specify a callback to above student json and if call back url is MyJson then<br />MyJson({"...
Writing MyJson Function<br /><script type=“text/javascript”><br />Function MyJson(data)<br />{<br />For(vari=0;i<data.stud...
Complete Code<br /><script type=“text/javascript”><br />function MyJson(data)<br />{<br />For(vari=0;i<data.student.length...
Building A Simple YouTube App<br />YouTube is a video hosting service from Google.<br />YouTube Provides various API’s to ...
Youtube JSON Example<br />Constructing URL<br />Base URL is http://gdata.youtube.com/feeds/api/videos?v=2<br />Parameters<...
MyVideo Function<br /><script type="text/javascript">function myvideo(json)  {    for(i=0;i<6;i++)    {      var title=jso...
Embedding YouTube Video<br />YouTube Videos are Abobe flash content we can embed them using<br /><embed src=“FLASH URL” wi...
Full Source Code<br /><script type="text/javascript">function myvideo(json)  {    for(i=0;i<6;i++)    {      var title=jso...
Wikipedia API<br />Wikipedia is a free encyclopedia which anyone can edit.<br />Wikipedia uses a CMS(Content Management Sy...
URL Construction<br />Base URL is http://en.wikipedia.org/w/api.php<br />Parameters<br />action=parse<br />page=<Page Name...
MyWiki Function<br /><script type="text/javascript">function mywiki(json)            {           	var html=[ ];        	va...
Complete Source Code<br /><script type="text/javascript">      function mywiki(json)            {    			    var html=[ ]; ...
Twitter Public Timeline<br />Twitter is a micro blogging site.<br />A list of Public Tweets is called as Public Timeline.<...
Upcoming SlideShare
Loading in …5
×

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

8,112 views

Published on

JSON (JavaScript Object Notation) is a data interchange format. JSON is derived from Javascript but is platform independent. In this slide we shall concentrate on building web applications using JSON. This slide covers all the basics which are required to build JSON application.

Published in: Technology
  • Be the first to comment

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

  1. 1. Introduction to JSON<br />JavaScript Object Notations<br />Raghavendra Nayak M<br />
  2. 2. Created by RaghavendraNayak M <br />All sample codes in this slide are released under Public Domain.<br />Contact me at http://twitter.com/MRNayak<br />rnayak@hotmail.com<br />Raghavendra Nayak M<br />
  3. 3. What we will learn today?<br />Basics of HTML<br />Basics of JavaScript<br />JSON<br />Building YouTube App<br /> Twitter App<br /> Wikipedia App<br />Raghavendra Nayak M<br />
  4. 4. Why JSON?<br />JSON is an alternative to XML<br />Using JSON we can build various 3rd party applications.<br />It is easy to retrieve Tweets, YouTube Videos and many more using JSON.<br />Programming is simple and easy.<br />JSON data is easy to read.<br />JSON parsers are available in various JavaScript Framework like jQuery, Yahoo UI<br />Raghavendra Nayak M<br />
  5. 5. Basics about HTML<br /><ul><li>HTML is a language for describing web pages.
  6. 6. It is a markup language and not a programming language.
  7. 7. Markup language is set of various tags.
  8. 8. It uses markup language to describe a page.
  9. 9. A web page with .php, .py, .rb is a dynamically generated HTML page using backend languages.</li></ul>Raghavendra Nayak M<br />
  10. 10. Simple HTML Page <br /><html><br /><head><br /><title>Hello Everyone</title><br /><link rel="stylesheet" type="text/css" href="style.css" ><br /></link><br /></head><body><h1>My First Heading</h1><p>My first paragraph.</p></body></html> <br />Raghavendra Nayak M<br />
  11. 11. HTML Heading Tag<br /><h1>-<h6> Heading tags in HTML are defined from <h1> to <h6><br /><h1> Hello Everyone </h1><br /><h2> Hello Everyone </h1><br />….<br />…<br /><h6> Hello Everyone </h6><br />Raghavendra Nayak M<br />
  12. 12. Paragraph Tag <br />In HTML paragraphs are defined using <p> tag.<br /><p> Hello </p><br /><p> A quick brown fox jumped over a lazy village dog.</p><br />Raghavendra Nayak M<br />
  13. 13. Break Tag <br /><br> tag in HTML adds a single line break.<br />If we want content to appear in new line then we must use break tag.<br />Raghavendra Nayak M<br />
  14. 14. Anchor Tag <br />In HTML we use <a> tag (Anchor Tag) to create links<br /><a href=“http://www.google.com”>Google</a><br />Here href contains the link to another document.<br />We can also call JavaScript functions using anchor tag.<br /><a href=“#” onclick=“smefunc();”> Click Me</a> <br />Raghavendra Nayak M<br />
  15. 15. Image Tag<br />We use <img> tag to embed images in a webpage.<br /><imgsrc=“a.jpg”></img><br />Above tag will embed a image a.jpg.<br />We can use images for creating links.<br /><a href=“http://www.google.com” ><imgsrc=“a.png”/></a><br />We can specify height and width of image<br /><imgsrc=“a.jpg” width=“200px” height=“100px” alt=“goog”/><br />Raghavendra Nayak M<br />
  16. 16. Division Tag<br />A division tag or div tag (<div>) is used to create division in HTML<br /><div id=“one” class=“three”><br />id specify unique id for element.<br />class specify class name for an element.<br /> There can be two or more elements with same class name.<br />Raghavendra Nayak M<br />
  17. 17. Link Tag <br />Link Tag specifies link between existing document and external resources<br /><link rel="stylesheet" type="text/css" href=“style.css" /><br />We use link to specify external stylesheet.<br />Raghavendra Nayak M<br />
  18. 18. Script Tag<br />Script tag is used to include client side scripts like JavaScript.<br /><script type=“text/javascript”>alert(‘Msg”);</script><br />Script tag can also contain external scripts.<br /><script type=“text/javascript” src=“hme.js” /><br />Raghavendra Nayak M<br />
  19. 19. Basics of Javascript<br />JavaScript is a client side Scripting Language.<br />It helps to add dynamic effect to web pages.<br />JavaScript can be used to create image sliders, charts, AJAX Applications and many more.<br />JavaScripts are used as event handlers.<br />JavaScript are used to create and read cookie.<br />Various Javascript Frameworks like jQuery, MooTools, YUI make programming even more easier.<br />Raghavendra Nayak M<br />
  20. 20. Variables in Javascript<br />In JavaScript we define Variables using ‘var’<br /><script type=“text/javascript”><br />var a=10;//Integer<br />var b=‘Hello’;//Char<br />alert(b);//a dialogbox with contents of variable b<br />// Single line comment<br />/*<br />Multiline Comment<br />*/<br /></script><br />Raghavendra Nayak M<br />
  21. 21. Getting Client Side Date<br />Its is possible to get users date, browser, os etc using JavaScript<br /><script type=“text/javascript”><br />var d=new Date();<br />alert(d);<br /></script><br />Raghavendra Nayak M<br />
  22. 22. Printing Variables in JS<br />Just like printf in C, In JavaScript we use document.write();<br /><script type=“text/javascript”><br />document.write(“Hello Everyone”);<br /></script><br /><script type=“text/javascript”><br />var a=‘Hello World’;<br />document.write(a);<br /></script><br />Raghavendra Nayak M<br />
  23. 23. + operator in JavaScript<br />+ operator is used to add integers.<br />+ operator is used to concatenate to strings<br /><script type=“text/javascript”><br />var a=2; var b=3; document.write(a+b);<br />var c=‘Hello’; var d=‘everyone’; <br />document.write(c+d);<br /></script><br />Raghavendra Nayak M<br />
  24. 24. JS and C<br />Syntax of if…else , for loop , while loop in JavaScript are same as that of C.<br />if(i==0)<br />{<br />for(j=0;j<n;j++)<br />{<br />//sme code<br />}<br />else<br />alert(‘i !=0’);<br />Raghavendra Nayak M<br />
  25. 25. Arrays in JavaScript<br />Array is used to store multiple values in single variable.<br /><script type=“text/javascript”><br />var dept=new Array(4);<br />dept[0]=‘CSE’;<br />dept[1]=‘ISE’;<br />dept[2]=‘ECE’;<br />dept[4]=‘ME’;<br />for(vari=0;i<dept.length;i++)<br />document.write(dept[i]);<br /></script><br />Raghavendra Nayak M<br />
  26. 26. Problems with array<br />It is difficult to handle large volume of data using Arrays.<br />This problem can be solved by using JSON<br />Raghavendra Nayak M<br />
  27. 27. JSON<br />JSON is a human readable data interchange.<br />It is derived from JavaScript, But it is language independent.<br />JSON supports strings, numbers, objects, arrays and Boolean<br />It is primarily used to send data from web server to application.<br />There are inbuilt functions and libraries to parse JSON in many languages.<br />Raghavendra Nayak M<br />
  28. 28. Simple JSON Format<br />{ <br />"id": 1, <br />"name": “Raghavendra", <br />“dept": “CSE”, <br />} <br />JSON starts with ‘{‘ and ends with ‘}’<br />JSON has a optional callback<br />myJSON({“id”:1,”name”:”Raghavendra”,”dept”:”CSE”}); <br />Raghavendra Nayak M<br />
  29. 29. Simple C Program<br />#include<stdio.h><br />void p(char a[])<br />{<br />printf(“%s”,a);<br />}<br />void main()<br />{<br />char ab[4]={‘H’,’E’,’L’,’L’,’O’};<br />p(ab);<br />}<br />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.<br />Raghavendra Nayak M<br />
  30. 30. Parsing JSON using JS<br />{"students":<br />[<br />{<br />"name":"Rahul",<br />"usn":"cs066"<br />},<br />{<br />"name":"Rajiv",<br />"usn":"cs068"<br />},<br />{<br />"name":"Rudresh",<br />"usn":"cs072"<br />},<br />]<br />}<br />Raghavendra Nayak M<br />
  31. 31. Js Code for parsing<br />If we specify a callback to above student json and if call back url is MyJson then<br />MyJson({"students":[{"name":"Rahul","usn":"cs066"},{"name":"Rajiv","usn":"cs068"},{"name":"Rudresh","usn":"cs072"}]});<br />Raghavendra Nayak M<br />
  32. 32. Writing MyJson Function<br /><script type=“text/javascript”><br />Function MyJson(data)<br />{<br />For(vari=0;i<data.student.length;i++)<br />{<br />var name=data.student[i].name;<br />varusn=data.student[i].usn;<br />document.write(usn+” “+name);<br />}<br />}<br /></script><br />Raghavendra Nayak M<br />
  33. 33. Complete Code<br /><script type=“text/javascript”><br />function MyJson(data)<br />{<br />For(vari=0;i<data.student.length;i++)<br />{<br />var name=data.student[i].name;<br />varusn=data.student[i].usn;<br />document.write(usn+” “+name);<br />}<br />}<br /></script><br /><script type=“text/javascript” src=“student.json?callback=MyJson”></script><br />Raghavendra Nayak M<br />
  34. 34. Building A Simple YouTube App<br />YouTube is a video hosting service from Google.<br />YouTube Provides various API’s to access its data<br />It offers data in XML, JSONC format<br />Raghavendra Nayak M<br />
  35. 35. Youtube JSON Example<br />Constructing URL<br />Base URL is http://gdata.youtube.com/feeds/api/videos?v=2<br />Parameters<br />q=<search query><br />callback=<function name><br />http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=eminem&callback=myvideo<br />The first parameter to url should begin with ‘?’ and all other parameter should begin with ‘&’<br />Raghavendra Nayak M<br />
  36. 36. MyVideo Function<br /><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><br /><script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=eminem&callback=myvideo"></script><br />Raghavendra Nayak M<br />
  37. 37. Embedding YouTube Video<br />YouTube Videos are Abobe flash content we can embed them using<br /><embed src=“FLASH URL” width=“300px” height=“200px”></embed><br />Raghavendra Nayak M<br />
  38. 38. Full Source Code<br /><script type="text/javascript">function myvideo(json)  {    for(i=0;i<6;i++)    {      var title=json.data.items[i].title;      var video='<embed src="'+json.data.items[i].content[5]+'"/>';      document.write(title+'<br/>'+video+'</br>');    }  }</script><script type="text/javascript" src="http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=eminem&callback=myvideo"></script><br />Raghavendra Nayak M<br />
  39. 39. Wikipedia API<br />Wikipedia is a free encyclopedia which anyone can edit.<br />Wikipedia uses a CMS(Content Management System) know as Media Wiki.<br />We can perform use wikipedia suggest api, pages api and many more things<br />Raghavendra Nayak M<br />
  40. 40. URL Construction<br />Base URL is http://en.wikipedia.org/w/api.php<br />Parameters<br />action=parse<br />page=<Page Name><br />prop=text<br />format=json<br />callback=mywiki(callback function)<br />Raghavendra Nayak M<br />
  41. 41. MyWiki Function<br /><script type="text/javascript">function mywiki(json)            {        var html=[ ];         varind = json.parse.text.*;        html.push(ind);        document.write(html);            }<br /></script><br />Above function helps us to retrieve a wikipedia page.<br />Raghavendra Nayak M<br />
  42. 42. Complete Source Code<br /><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="http://en.wikipedia.org/w/api.php?action=parse&page=Bangalore&prop=text&format=json&callback=mywiki"></script> <br />Raghavendra Nayak M<br />
  43. 43. Twitter Public Timeline<br />Twitter is a micro blogging site.<br />A list of Public Tweets is called as Public Timeline.<br />Public Timeline doesn’t require Authentication to retrieve tweets.<br />Raghavendra Nayak M<br />
  44. 44. URL Construction <br />Base URL:-http://api.twitter.com/1/statuses/public_timeline.json<br />Callback=<Callback Function><br />Raghavendra Nayak M<br />
  45. 45. Pub Tweet Function<br /><script type="text/javascript">      function pubtweet(json)       {        for(i=0;i<6;i++)        {          varuname=json[i].user.name       varimg='<imgsrc="'+json[i].user.profile_image_url+'"/>';       vartwt=json[i].text;          document.write(img+uname+'</br>'+twt+'</br>');        }        }  </script><br />Raghavendra Nayak M<br />
  46. 46. Complete Source Code<br /><script type="text/javascript">      function pubtweet(json)       {        for(i=0;i<6;i++)        {          varuname=json[i].user.name       varimg='<imgsrc="'+json[i].user.profile_image_url+'"/>';       vartwt=json[i].text;          document.write(img+uname+'</br>'+twt+'</br>');        }        }  </script>  <script type="text/javascript" src="http://api.twitter.com/1/statuses/public_timeline.json?count=3&include_entities=true&callback=pubtweet"></script> <br />Raghavendra Nayak M<br />
  47. 47. Questions????<br />Mail me : rnayak@hotmail.com<br />Thank You<br />Raghavendra Nayak M<br />

×