Escolar Documentos
Profissional Documentos
Cultura Documentos
Table of Contents
New JavaScript APIs
New Selectors
Canvas JavaScript API
Web Workers
http://www.certificationkey.com/70-480.html
Canvas
http://www.certificationkey.com/70-480.html
New Selectors
http://www.certificationkey.com/70-480.html
New Selectors
In HTML5 we can select elements by
ClassName
var elements = document.getElementsByClassName('entry');
to fetch
elements that match provided CSS syntax
var elements =
document.querySelectorAll("ul li:nth-child(odd)");
var first_td =
document.querySelector("table.test > tr > td");
http://www.certificationkey.com/70-480.html
div met
SomeClass
Canvas
JavaScript API
How to Manipulate
Canvas Dynamically?
http://www.certificationkey.com/70-480.html
Canvas
Canvas
Draws a rectangle
Filled with the current fillStyle
http://www.certificationkey.com/70-480.html
Canvas Paths
What is a Path?
http://www.certificationkey.com/70-480.html
Certificationkey
Live Demo
Web Workers
Multithreading in JavaScript
http://www.certificationkey.com/70-480.html
replaced by
Window.setTimeout() function
http://www.certificationkey.com/70-480.html
processes
setTimeout, the
execution of script and UI are suspended
When we call function in worker, it doesnt
affect UI and execution flow in any way
in
separate file and create new Worker instance:
var worker = new Worker(extra_work.js');
threads in our
application:
main.js:
var worker = new Worker(extra_work.js');
worker.onmessage = function (event) { alert(event.data); };
extra_work.js:
//do some work; when done post message.
// some_data could be string, array, object etc.
postMessage(some_data);
http://www.certificationkey.com/70-480.html
Web Workers
Live Demo
http://www.certificationkey.com/70-480.html
http://www.certificationkey.com/70-480.html
http://www.certificationkey.com/70-480.html
http://www.certificationkey.com/70-480.html
HTML5 Storage
Local and Session
http://www.certificationkey.com/70-480.html
Local Storage
Local Storage
strings!
http://www.certificationkey.com/70-480.html
function saveState(text){
localStorage["text"] = text;
}
function restoreState(){
return localStorage["text"];
}
Same as
function saveState(text){
localStorage.setValue("text", text);
}
function restoreState(){
return localStorage.getValue("text");
}
Session Storage
Session Storage
http://www.certificationkey.com/70-480.html
function incrementLoads() {
if (!sessionStorage.loadCounter) {
sessionStorage["loadCounter"] = 0;
}
var currentCount =
parseInt(sessionStorage["loadCounter"]);
currentCount++;
sessionStorage["loadCounter"] = currentCount;
document.getElementById("countDiv").innerHTML =
currentCount;
}
http://www.certificationkey.com/70-480.html
HTML5 Storages
Live Demo
http://www.certificationkey.com/70-480.html
http://www.certificationkey.com/70-480.html
getElementsByClassName()
innerHTML
hasFocus
getSelection()
http://www.certificationkey.com/70-480.html
http://www.certificationkey.com/70-480.html
Event Listeners
How to Listen for
Something to Happen?
http://www.certificationkey.com/70-480.html
Event Listeners
Event Listener is an event that tracks for
something to happen
i.e. a key to be pressed, a mouse click, etc.
Available
in JavaScript
http://www.certificationkey.com/70-480.html
http://www.certificationkey.com/70-480.html
Event Listeners
Live Demo
http://www.certificationkey.com/70-480.html
Questions?
http://www.certificationkey.com/70-480.html
Exercises
1.
Exercises (2)
2.