Scribd
Upload
60 views

Javascript and HTML 5 API

This document provides an overview of JavaScript and HTML5 APIs. It discusses what JavaScript is and its uses including interactivity, animation, gaming, web servers, DOM manipulation, form validation, changing element styles, and event listening. It also covers specific HTML5 APIs such as Canvas, Drag and Drop, Messaging, Offline Apps, Video & Audio, Geolocation, Storage, Web Sockets, and Workers. jQuery is introduced as a way to simplify DOM manipulation and event handling.

Uploaded by

Nick Baker
Copyright
© © All Rights Reserved
Available Formats
Download as KEY, PDF, TXT or read online on Scribd
60 views

Javascript and HTML 5 API

This document provides an overview of JavaScript and HTML5 APIs. It discusses what JavaScript is and its uses including interactivity, animation, gaming, web servers, DOM manipulation, form validation, changing element styles, and event listening. It also covers specific HTML5 APIs such as Canvas, Drag and Drop, Messaging, Offline Apps, Video & Audio, Geolocation, Storage, Web Sockets, and Workers. jQuery is introduced as a way to simplify DOM manipulation and event handling.

Uploaded by

Nick Baker
Copyright
© © All Rights Reserved
Available Formats
Download as KEY, PDF, TXT or read online on Scribd
You are on page 1/ 46

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?

You might also like