Programming in HTML5 with JavaScript


Presentation Description

Real questions for Microsoft 70-480 Programming in HTML5 with JavaScript and CSS3 Exam from pass4sure with unlimited access of 2500+ Exams for Life time. Pass your 70-480 Microsoft Specialist Exam with 100% Guaranteed or we will refund your Money.


Presentation Transcript

New JavaScript HTML5:

New JavaScript HTML5 Canvas, SVG, Workers Windows Store Apps Certificationkey

Table of Contents:

Table of Contents New JavaScript APIs New Selectors Canvas JavaScript API Web Workers Drag and Drop HTML5 Storage HTML DOM Extensions Event Listeners

New JavaScript APIs:

New JavaScript APIs What a programmer must know? http://

New JavaScript APIs:

New JavaScript APIs New selectors Threading (Web Workers) UI APIs Canvas Drag and Drop Local and Session Storage Extension to HTMLDocument http://

New Selectors:

New Selectors http://

New Selectors:

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://

New Selectors (2):

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://

Canvas JavaScript API:

Canvas JavaScript API How to Manipulate Canvas Dynamically? http://


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);

Canvas Properties and Methods:

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://

Canvas Properties and Methods (2):

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://

Canvas Paths:

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://


Certificationkey Live Demo

Web Workers:

Web Workers Multithreading in JavaScript http://

What are Web Workers?:

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://

What are Web Workers? (2):

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) T hey’ll keep running after the browser has quit What are Web Workers? (2)

What are Web Workers? (3):

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://

What are Web Workers? (4):

Messages are send to all threads in our application : main.js: var worker = new Worker(‘extra_work.js'); worker.onmessage = function (event) { alert( ); }; 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://

Web Workers:

Web Workers Live Demo http://

Drag and Drop:

Drag and Drop Drag and Drop, Local and Session Storage http://

Drag and Drop:

Drag and Drop Drag and Drop <element> attribute draggable ="true" Events: dragstart , dragstop , dragenter , dragleave , dropend http://

Drag And Drop:

Drag And Drop Live Demo http://

HTML5 Storage:

HTML5 Storage Local and Session http://

Local Storage:

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://

PowerPoint Presentation:

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

Session Storage:

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://

PowerPoint Presentation:

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://

HTML5 Storages:

HTML5 Storages Live Demo http://

HTML DOM Extensions:

HTML DOM Extensions http://

HTML DOM Extensions:

HTML DOM Extensions HTML DOM Extensions: getElementsByClassName() innerHTML hasFocus getSelection() http://

HTML DOM Extensions:

HTML DOM Extensions Live Demo http://

Event Listeners:

Event Listeners How to Listen for Something to Happen? http://

Event Listeners:

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://

Registering Event Listener Example:

Registering Event Listener Example Adding a click event listener to a div element document.GetElementById(" someElement "). addEventListener ("click", function (e) { alert("element clicked"); }, false); http://

Event Listeners:

Event Listeners Live Demo http://

HTML5 New JavaScript APIs:

HTML5 New JavaScript APIs ? ? ? ? ? ? ? ? ? ? http://


Exercises 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://

Exercises (2):

Exercises (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://

authorStream Live Help