introduction to json and building youtube, twitter and wikipedia web apps
DESCRIPTION
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.TRANSCRIPT
INTRODUCTION TO JSONJavaScript Object Notations
Raghavendra
Nayak M
CREATED BY RAGHAVENDRA NAYAK M
All sample codes in this slide are released under Public Domain.
Contact me at http://twitter.com/MRNayak [email protected]
Raghavendra
Nayak M
WHAT WE WILL LEARN TODAY?
Basics of HTML Basics of JavaScript JSON Building YouTube App Twitter App Wikipedia App
Raghavendra
Nayak M
WHY JSON?
JSON is an alternative to XML Using 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 UI
Raghavendra
Nayak M
BASICS ABOUT HTML
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.
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 TAG
We use <img> tag to embed images in a webpage.
<img src=“a.jpg”></img> Above tag will embed a image a.jpg. We can use images for creating links. <a href=“http://www.google.com” ><img
src=“a.png”/></a> We can specify height and width of image <img src=“a.jpg” width=“200px”
height=“100px” alt=“goog”/>
Raghavendra
Nayak M
DIVISION TAG
A 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 TAG
Script 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=“hme.js” />
Raghavendra
Nayak M
BASICS OF JAVASCRIPT
JavaScript 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 JAVASCRIPT
In JavaScript we define Variables using ‘var’ <script type=“text/javascript”> var a=10;//Integer var b=‘Hello’;//Char alert(b);//a dialogbox with contents of
variable b // Single line comment /* Multiline Comment */ </script>
Raghavendra
Nayak M
GETTING CLIENT SIDE DATE
Its 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 JS
Just 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 C
Syntax 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 } else alert(‘i !=0’);
Raghavendra
Nayak M
ARRAYS IN JAVASCRIPT
Array 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(var i=0;i<dept.length;i++) document.write(dept[i]); </script>
Raghavendra
Nayak M
PROBLEMS WITH ARRAY
It is difficult to handle large volume of data using Arrays.
This problem can be solved by using JSON
Raghavendra
Nayak M
JSON
JSON is a human readable data interchange. It is derived from JavaScript, But it is
language independent. JSON supports strings, numbers, objects,
arrays and Boolean It 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 callback myJSON({“id”:1,”name”:”Raghavendra”,”dep
t”:”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 PARSING
If we specify a callback to above student json and if call back url is MyJson then
MyJson({"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(var i=0;i<data.student.length;i++) { var name=data.student[i].name; var usn=data.student[i].usn; document.write(usn+” “+name); } } </script>
Raghavendra
Nayak M
COMPLETE CODE <script type=“text/javascript”> function MyJson(data) { For(var i=0;i<data.student.length;i++) { var name=data.student[i].name; var usn=data.student[i].usn; document.write(usn+” “+name); } } </script> <script type=“text/javascript” src=“student.json?
callback=MyJson”></script>
Raghavendra
Nayak M
BUILDING A SIMPLE YOUTUBE APP
YouTube is a video hosting service from Google.
YouTube Provides various API’s to access its data
It offers data in XML, JSONC format
Raghavendra
Nayak M
YOUTUBE JSON EXAMPLE
Constructing URL Base URL is
http://gdata.youtube.com/feeds/api/videos?v=2
Parameters q=<search query> callback=<function name> http://gdata.youtube.com/feeds/api/videos?v
=2&alt=jsonc&q=eminem&callback=myvideo
The 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="http://gdata.youtube.com/feeds/api/videos?v=2&alt=jsonc&q=eminem&callback=myvideo"></script>
Raghavendra
Nayak M
EMBEDDING YOUTUBE VIDEO
YouTube Videos are Abobe flash content we can embed them using
<embed src=“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="'+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>
Raghavendra
Nayak M
WIKIPEDIA API
Wikipedia 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 things
Raghavendra
Nayak M
URL CONSTRUCTION
Base URL is http://en.wikipedia.org/w/api.php Parameters action=parse page=<Page Name> prop=text format=json callback=mywiki(callback function)
Raghavendra
Nayak M
MYWIKI FUNCTION
<script type="text/javascript">function mywiki(json) { var html=[ ]; var ind = 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=[ ]; var ind = 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>
Raghavendra
Nayak M
TWITTER PUBLIC TIMELINE
Twitter 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
URL CONSTRUCTION
Base URL:-http://api.twitter.com/1/statuses/public_timeline.json
Callback=<Callback Function>
Raghavendra
Nayak M
PUB TWEET FUNCTION
<script type="text/javascript"> function pubtweet(json) { for(i=0;i<6;i++) { var uname=json[i].user.name var img='<img src="'+json[i].user.profile_image_url+'"/>'; var twt=json[i].text; document.write(img+uname+'</br>'+twt+'</br>'); } } </script>
Raghavendra
Nayak M
COMPLETE SOURCE CODE <script type="text/javascript">
function pubtweet(json) { for(i=0;i<6;i++) { var uname=json[i].user.name var img='<img src="'+json[i].user.profile_image_url+'"/>'; var twt=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>
Raghavendra
Nayak M
