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

Introduction to JSON JavaScript Object Notations Raghavendra Nayak M

Created by RaghavendraNayak M All sample codes in this slide are released under Public Domain. Contact me at http://twitter.com/MRNayak rnayak@hotmail.com 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 ,[object Object]

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. <imgsrc=“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 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(vari=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”,”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 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(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=“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=[ ]; 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="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

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

Recommended

Recommended

More Related Content

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

Similar to Introduction to JSON and Building Youtube, Twitter and Wikipedia Web Apps (20)

Recently uploaded

Recently uploaded (20)

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