JavaScript and HTML5
APIs
What is JavaScript
An easy to learn object-oriented scripting
language that is used primarily to create
interactive web experiences.
Descendant of ECMA script definition
JS Uses
Interactivity
Animation
Gaming
Web-servers ([Link])
JS Uses
DOM Manipulation
Form input validation
Changing element styles
Event listening
DOM Manipulation
x = [Link](“demo”);
[Link] = “Hello There!”;
Form input validation
if(isNaN(x)) {
alert(“Please enter a numeric value”);
}
Changing Element
Styles
x = [Link](“demo”);
[Link] = “#FF0033”;
Event listening
<script>
function doSomething() {
alert(“Something is done...”);
</script>
<button type=”button” onclick=”doSomething();”>Click Here</button>
Canvas
JS HTML 5 API
Drag and Drop
Messaging
Offline Apps
Video & Audio
Geolocation
Storage
Web Sockets
Workers
Canvas
JS HTML 5 API
Drag and Drop
Messaging
Offline Apps
Video & Audio
Geolocation
Storage
Web Sockets
Workers
Drag and Drop
<div id=”demo” draggable=”true”>drag me</div>
<script>
x = [Link](“demo”);
[Link](“dragstart”, function(e) {
[Link](“arbitrary”, “data”);
return true;
}, true);
</script>
Drag and Drop
Online Demo:
[Link]
Offline Applications
Application Cache
Events: offline, online
[Link] property
How to enable it?
<html manifest=”[Link]”>
[Link]
CACHE MANIFEST
assets/images/[Link]
assets/images/[Link]
server-side
IMPORTANT: serve it as text/cache-manifest
use versioning
Use [Link]()
whenever you introduce changes to the app.
[Link]
CACHE MANIFEST
assets/images/[Link]
assets/images/[Link]
VERSION 13
Cache events
[Link](‘offline’, iAmOffline, true);
and
[Link](‘online’, iAmOnline, true);
Cache events
function iAmOnline() {
if([Link] == false) {
// load data cached in LS or WebSQL
} else {
// use AJAX...
// then, cache retrieved data for next
offline cycle
}
Cache events
Online Demo:
[Link]
Geolocation
Caveats:
Not always accurate (1km to 10m
accuracy)
May be disabled by the user
Geolocation Syntax
navigator
.geolocation
.getCurrentPosition(successCallback, errorCallback);
Data Returned
Storage
sessionStorage
localStorage
databaseStorage
Session Storage
Limited to only one session
Expires when you close the browser window
[Link](key, value);
[Link](key);
Session Storage
Limited to only one session
Expires when you close the browser window
[Link](key, value);
[Link](key);
Local Storage
Available until deleted by the user or replaced
by your own application logic.
[Link](key, value);
[Link](key);
jQuery
Takes care of cross-browser tweaking for us.
Easier syntax to write than pure JS.
Relies on CSS selectors to get most tasks done,
which is AWESOME.
Mobile-friendly.
Lots of readily available plugins.
No jQuery
Example:
divsToHide = [Link](“div”);
for(i=0;i<[Link];i++) {
divsToHide[i].[Link] = ‘none’;
}
With jQuery
$(“div”).hide();
:)
How does it work
Find some HTML
Do something to it
Find me all the
$(“div”) divs
How does it work
Find some HTML
Do something to it
hide
$(“div”).hide(); ‘em!
jQuery Selectors
The “query” part of jQuery
$(“div”)
$(“.myClass”)
$(“#myID”)
$(“li:first”)
$(“tr:odd”)
jQuery Selectors
The “query” part of jQuery
$(“a[target=_blank]”)
$(“form[id^=step]”)
$(“#myId, .myClass, table”)
Common use example
$(“.title”).addClass(“redbox”);
$(“.error-msg”).show().addClass(“error”);
$(“.error-
msg”).show().addClass(“error”).fadeIn();
$(“.error-msg”).html(“<p>Incorrect entry!</p>”);
jQuery methods
Moving Elements:
append(), appendTo(), before(), after()
Attributes:
css(), attr(), html(), val(), addClass()
Events:
bind(), trigger(), unbind(), live(),
Effects: jQuery methods
show(), fadeOut(), toggle(), animate()
Ajax:
get(), getJSON(), post(), ajax(), load()
Traversing:
find(), is(), prevAll(), next(), hasClass()
Page Load Event
$(function() {
//Code here will execute when DOM is in
a ready state....
});
Page Load Event
$(document).ready(function() {
// same thing...
});
GET / SET values
GET POST
.attr(‘id’) .attr(‘id’, ‘foo’)
.html() .html(‘<p>hi</p>’)
.val() .val(“new value”)
.css(‘top’) .css(‘top’, ‘80px’)
.width() .width(60)
Events
Click:
$(“#mybutton”).click(function() {
//do something here
});
Events
Custom events:
$(“#mybutton”).bind(“expand”, function() {
//do something here
});
$(“#mybutton”).trigger(“expand”); //to fire it
Events
Unbinding events:
$(“#mybutton”).unbind(“expand”);
DEMO
Q&A
What’s next?
