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 (Node.js)
JS Uses
DOM Manipulation
Form input validation
Changing element styles
Event listening
DOM Manipulation
x = document.getElementById(“demo”);
x.innerHTML = “Hello There!”;
Form input validation
if(isNaN(x)) {
alert(“Please enter a numeric value”);
}
Changing Element
Styles
x = document.getElementById(“demo”);
x.style.color = “#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 = document.getElementById(“demo”);
x.addEventListener(“dragstart”, function(e) {
e.dataTransfer.setData(“arbitrary”, “data”);
return true;
}, true);
</script>
Drag and Drop
Online Demo:
http://html5demos.com/drag
Offline Applications
Application Cache
Events: offline, online
navigator.onLine property
How to enable it?
<html manifest=”app.manifest”>
app.manifest
CACHE MANIFEST
assets/images/background.png
assets/images/logo.png
server-side
IMPORTANT: serve it as text/cache-manifest
use versioning
Use window.applicationCache.update()
whenever you introduce changes to the app.
app.manifest
CACHE MANIFEST
assets/images/background.png
assets/images/logo.png
VERSION 13
Cache events
window.addEventListener(‘offline’, iAmOffline, true);
and
window.addEventListener(‘online’, iAmOnline, true);
Cache events
function iAmOnline() {
if(navigator.onLine == false) {
// load data cached in LS or WebSQL
} else {
// use AJAX...
// then, cache retrieved data for next
offline cycle
}
Cache events
Online Demo:
http://html5demos.com/offline
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
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
Session Storage
Limited to only one session
Expires when you close the browser window
sessionStorage.setItem(key, value);
sessionStorage.getItem(key);
Local Storage
Available until deleted by the user or replaced
by your own application logic.
localStorage.setItem(key, value);
localStorage.getItem(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 = document.getElementByTagName(“div”);
for(i=0;i<divsToHide.length;i++) {
divsToHide[i].style.display = ‘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?
