Intro to Javascript/Using API

Hack U Again Kunal Bhalla http://kunal-b.in

Outline

Tangent overview
Tools
Javascript basics
AJAX
JSON
Javascript Libraries
Playing with jQuery
Playing with APIs
Tangent Deconstructed

Tangent

Why A different browsing experience. Reading more with lesser clicks.
What A bookmarklet (a bookmark on steroids); works across browsers with a single click install.
How (Currently) Yahoo! BOSS, YUI, Yahoo! Context Extractor, Yahoo! Pipes, Twitter API; served on javascript with a small dash of CSS.

Tangent - Demo

http://kunal-b.in/Tangent
Bookmark the link.
Go to some content rich page (for example, an entry in Wikipedia)
Select text.
Click the bookmarklet.
Browse on!

Tools

Plain text editors.

Crimson Editor
Notetab (light)
Notepad
Vim

Environments: http://www.aptana.com/studio/download

Aptana (javascript library support, etc. etc.)
Eclipse
Dreamweaver (slow and pirated)
Netbeans (to some extent)

Development: Browser tools

Firebug (FF)
Web developer toolbar (FF)
JSONview (FF)
Chrome
Debugging with Firebug:

console.log( <expression> ); quick way to see results

Testing Server

Xampp. (Windows)
Or Lampp (Linux), as the case may be.

Problem Statements

Machine Learning .

Javascript

Finding the shortest distance between 2 points in a city.

Yahoo! & Google Maps API
Canvas

Face recognition used for attendance.

(x)HTML

Extensible Hypertext mark-up language.
You probably already know it.
If you don't, spend an hour at w3schools.

Javascript

Not java. Just a lightweight programming language.
“ J avaScript is a scripting language used to enable programmatic access to objects within other applications. It is primarily used in the form of client-side JavaScript for the development of dynamic websites. JavaScript is a dialect of the ECMAScript standard and is characterized as a dynamic, weakly typed, prototype-based language with first-class functions. JavaScript was influenced by many languages and was designed to look like Java, but be easier for non-programmers to work with.
JavaScript, despite the name, is essentially unrelated to the Java programming language, although both have the common C syntax, and JavaScript copies many Java names and naming conventions. The language's name is the result of a co-marketing deal between Netscape and Sun, in exchange for Netscape bundling Sun's Java runtime with their then-dominant browser. The key design principles within JavaScript are inherited from the Self and Scheme programming languages.
"JavaScript" is a trademark of Sun Microsystems. It was used under license for technology invented and implemented by Netscape Communications and current entities such as the Mozilla Foundation. ”

Javascript basics

Adding javascript
Getting javascript from an external file
Place withing <head></head> sections of the document.

Javascript basics

Variables are defined without data types Explicitly stating “var” before a variable makes it local; otherwise global.
Functions:

var i = 10; a = i; Var i = new Array(); function helloWorld() { alert(“Hello World!”); }

Javascript basics

Comparisons.
Comments.
if...else; switch
While(); for(); do...while();
break; continue;
For...in

for ( i in pplattending ) document.write(pplattending[i] + “, welcome!”);

Javascript basics

Pop-up boxes

alert(“Hi there!”);
confirm(“Are you sure you still want to attend my talk?”)
prompt(“Are you still awake”, “No”);

Detour – the DOM tree

“ The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated. In the DOM specification, the term "document" is used in the broad sense - increasingly, XML is being used as a way of representing many different kinds of information that may be stored in diverse systems, and much of this would traditionally be seen as data rather than as documents. Nevertheless, XML presents this data as documents, and the DOM may be used to manage this data.”

<TABLE> <TBODY> <TR> <TD>Shady Grove</TD> <TD>Aeolian</TD> </TR> <TR> <TD>Over the River, Charlie</TD> <TD>Dorian</TD> </TR> </TBODY> </TABLE>

Detour: ID

Can define an id for elements in html

<img id = 'someID' ... > <div id = 'tangentConsole'> Stuff </div>

Javascript basics

Accessing elements

Define the path: document.form[0]
document.getElementById(“Id”);
document.getElementsByTagName[x]

Javascript basics

document.write(); //Output
Adding/removing an HTML node
Defining the nodes
element.innerHTML() : Read/write inside the specified element

parent.appendChild(element) parent.removeChild(element) var d = document.createElement(“...”); d.innerHTML = “something”; ...

Javascript basics

Events:

onClick
onMouseOver
onMouseOut
OnLoad

<span onmouseover = 'alert(“Stop hovering on me!”);'>

Javascript Objects

Built in: String, Date, Array, Math, Boolean, RegExp, Dom objects. http://www.w3schools.com/js/js_obj_intro.asp
Creating objects:

Temp = new Object(); Temp.prop1 = “a”; . . . Temp.meth = function() { ... } function obj_template ( aa, bb, cc) { this.aa = aa; this.bb = bb; this.cc = cc; this.meth = fn() {...} } Test = new obj_template (“123”, “234”, “345”);

AJAX

Asynchronous JavaScript and XML
“web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page”

Ajax

var xmlHttp;
try {
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e) {
// Internet Explorer
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {
alert("Your browser does not support AJAX!");
return false;
}
}
}
}

http://www.w3schools.com/ajax/ajax_browsers.asp

Ajax

xmlHttp.onreadystatechange=function()
{
if(xmlHttp.readyState==4) //4=The request is complete
{
/* do something with */ xmlHttp.responseText;
}
}

AJAX

same origin policy prevents some Ajax techniques from being used across domains
Use libraries which provide the hack (using different headers) allowing you to use GET across domains.

Javascript Object Notation

JSON (JavaScript Object Notation) is a lightweight data-interchange format. It is easy for humans to read and write. It is easy for machines to parse and generate. It is based on a subset of the JavaScript Programming Language, Standard ECMA-262 3rd Edition - December 1999. JSON is a text format that is completely language independent but uses conventions that are familiar to programmers of the C-family of languages, including C, C++, C#, Java, JavaScript, Perl, Python, and many others. These properties make JSON an ideal data-interchange language.
JSON is built on two structures:
* A collection of name/value pairs. In various languages, this is realized as an object, record, struct, dictionary, hash table, keyed list, or associative array.
* An ordered list of values. In most languages, this is realized as an array, vector, list, or sequence.

Actually?