70-480 programming in html5 with javascript
DESCRIPTION
Prepare for Microsoft's exam 70-480, Programming in HTML5 with JavaScript and CSS3 with this list of courses.http://www.certificationkey.com/70-480.htmlTRANSCRIPT
![Page 1: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/1.jpg)
New JavaScript HTML5
Canvas, SVG, Workers
Windows Store AppsCertificationkeywww.Certificationkey.com
![Page 2: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/2.jpg)
Table of Contents New JavaScript APIs New Selectors Canvas JavaScript API Web Workers Drag and Drop HTML5 Storage HTML DOM Extensions Event Listeners
![Page 3: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/3.jpg)
New JavaScript APIsWhat a programmer must know?
http://www.certificationkey.com/70-480.html
![Page 4: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/4.jpg)
New JavaScript APIs New selectors Threading (Web Workers) UI APIs
Canvas Drag and Drop Local and Session Storage
Extension to HTMLDocument
http://www.certificationkey.com/70-480.html
![Page 5: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/5.jpg)
New Selectors
http://www.certificationkey.com/70-480.html
![Page 6: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/6.jpg)
New Selectors In HTML5 we can select elements by ClassName
Moreover there’s now possibility to fetch elements that match provided CSS syntax
var elements = document.getElementsByClassName('entry');
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
![Page 7: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/7.jpg)
New Selectors (2) Selecting the first div met
Selecting the first item with class SomeClass
Selecting the first item with id someID
Selecting all the divs in the current container
var elements = document.querySelector("div");
var elements = document.querySelectorAll("div");
var elements = document.querySelector(".SomeClass");
var elements = document.querySelector("#someID");
http://www.certificationkey.com/70-480.html
![Page 8: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/8.jpg)
Canvas JavaScript
APIHow to Manipulate
Canvas Dynamically?
http://www.certificationkey.com/70-480.html
![Page 9: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/9.jpg)
Canvas Canvas
Dynamic, Scriptable rendering of 2D images
Uses JavaScript to draw Resolution-dependent bitmap Can draw text as well<canvas id="ExampleCanvas" width="200" height="200"> This text is displayed if your browser does not support HTML5 Canvas. </canvas>
var example = document.getElementById('ExampleCanvas'); var context = example.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(30, 30, 50, 50);
![Page 10: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/10.jpg)
Canvas Properties and Methods
fillStyle Sets the drawing color Default fillStyle is solid black
But you can set it to whatever you like
fillRect(x, y, width, height) Draws a rectangle Filled with the current fillStyle
http://www.certificationkey.com/70-480.html
![Page 11: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/11.jpg)
Canvas Properties and Methods (2)
strokeStyle Sets the stroke color
strokeRect(x, y, width, height) Draws an rectangle with the
current strokeStyle strokeRect doesn’t fill in the
middle It just draws the edges
clearRect(x, y, width, height) clears the pixels in the specified rectangle
http://www.certificationkey.com/70-480.html
![Page 12: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/12.jpg)
Canvas Paths What is a Path?
Something that is about to be drawn It is not drawn yet
context.beginPath();context.moveTo(0, 40);context.lineTo(240, 40);context.moveTo(260, 40);context.lineTo(500, 40);context.moveTo(495, 35);context.lineTo(500, 40);context.lineTo(495, 45);
http://www.certificationkey.com/70-480.html
![Page 13: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/13.jpg)
CertificationkeyLive Demo
![Page 14: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/14.jpg)
Web WorkersMultithreading in JavaScript
http://www.certificationkey.com/70-480.html
![Page 15: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/15.jpg)
What are Web Workers?
API for running scripts in the background Independently of any user interface
scripts Workers are expected to be long-lived Have a high start-up performance
cost and a high per-instance memory cost
Might be partially replaced by Window.setTimeout() function
http://www.certificationkey.com/70-480.html
![Page 16: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/16.jpg)
Workers are separate JavaScript processes running in separate threads Workers execute concurrently Workers don’t block the UI Workers allow you to extract up to
the last drop of juice from a multicore CPU
Workers can be dedicated (single tab) or shared among tabs/windows
Workers will be persistent too (coming soon) They’ll keep running after the
browser has quit
What are Web Workers? (2)
![Page 17: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/17.jpg)
If we call function by setTimeout, the execution of script and UI are suspended When we call function in worker, it
doesn’t affect UI and execution flow in any way
To create Worker, we put JavaScript in separate file and create new Worker instance:
We can communicate with worker using postMessage function and onmessage listener
var worker = new Worker(‘extra_work.js');
What are Web Workers? (3)
http://www.certificationkey.com/70-480.html
![Page 18: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/18.jpg)
Messages are send to all 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);
What are Web Workers? (4)
http://www.certificationkey.com/70-480.html
![Page 19: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/19.jpg)
Web WorkersLive Demo
http://www.certificationkey.com/70-480.html
![Page 20: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/20.jpg)
Drag and DropDrag and Drop, Local and Session
Storage
http://www.certificationkey.com/70-480.html
![Page 21: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/21.jpg)
Drag and Drop Drag and Drop
<element> attribute draggable="true"
Events: dragstart, dragstop, dragenter, dragleave, dropend
http://www.certificationkey.com/70-480.html
![Page 22: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/22.jpg)
Drag And DropLive Demo
http://www.certificationkey.com/70-480.html
![Page 23: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/23.jpg)
HTML5 Storage
Local and Session
http://www.certificationkey.com/70-480.html
![Page 24: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/24.jpg)
Local Storage Local Storage
Store data locally Similar to cookies, but can store
much larger amount of data Same Origin Restrictions localStorage.setItem(key, value) localStorage.getItem(key)
Local and Session Storages can only store strings!
http://www.certificationkey.com/70-480.html
![Page 25: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/25.jpg)
Local Storage Example
function saveState(text){ localStorage["text"] = text;}function restoreState(){ return localStorage["text"];}
Local Storage
function saveState(text){ localStorage.setValue("text", text);}function restoreState(){ return localStorage.getValue("text");}
Same as
![Page 26: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/26.jpg)
Session Storage Session Storage
Similar to Local Storage Lasts as long as browser is open Opening page in new window or tab
starts new sessions Great for sensitive data (e.g.
banking sessions)
http://www.certificationkey.com/70-480.html
![Page 27: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/27.jpg)
Session Storage Example
function incrementLoads() { if (!sessionStorage.loadCounter) { sessionStorage["loadCounter"] = 0; } var currentCount = parseInt(sessionStorage["loadCounter"]); currentCount++; sessionStorage["loadCounter"] = currentCount; document.getElementById("countDiv").innerHTML = currentCount;}
Session Storage
http://www.certificationkey.com/70-480.html
![Page 28: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/28.jpg)
HTML5 StoragesLive Demo
http://www.certificationkey.com/70-480.html
![Page 29: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/29.jpg)
HTML DOM Extensions
http://www.certificationkey.com/70-480.html
![Page 30: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/30.jpg)
HTML DOM Extensions HTML DOM Extensions:
getElementsByClassName() innerHTML hasFocus getSelection()
http://www.certificationkey.com/70-480.html
![Page 31: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/31.jpg)
HTML DOM Extensions
Live Demo
http://www.certificationkey.com/70-480.html
![Page 32: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/32.jpg)
Event ListenersHow to Listen for
Something to Happen?
http://www.certificationkey.com/70-480.html
![Page 33: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/33.jpg)
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
addEventListener() registers a single event listener on a single target
The event target may be A single node in a document The document itself A window http://www.certificationkey.com/70-480.html
![Page 34: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/34.jpg)
Registering Event Listener Example
Adding a click event listener to a div elementdocument.GetElementById("someElement"). addEventListener("click", function (e) { alert("element clicked"); }, false);
http://www.certificationkey.com/70-480.html
![Page 35: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/35.jpg)
Event ListenersLive Demo
http://www.certificationkey.com/70-480.html
![Page 36: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/36.jpg)
Questions?
HTML5 New JavaScript APIs
??
? ? ??
??
?http://www.certificationkey.com/70-480.html
![Page 37: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/37.jpg)
Exercises
1. Write wrapper function as follows: $(ID) to return either a single
element, whose ID is the one passed or null
$$(selector) to return an array of elements or empty array with results;
Use mapping to existing DOM methods e.g. getElementByClassName, querySelectorAll
http://www.certificationkey.com/70-480.html
![Page 38: 70-480 Programming in html5 with javascript](https://reader035.vdocuments.net/reader035/viewer/2022062306/568ca67f1a28ab186d9190cf/html5/thumbnails/38.jpg)
Exercises (2)
2. Write an event delegate function member of the Event global object e.g. Event.delegate("selector", "eventName", handlerName) using the previously written functions to match selectors.
Map the global listeners to the document or body element;
Use w3c style events.http://www.certificationkey.com/70-480.html