04 | Code by Using JavaScript Christopher Harrison | Content Developer, Microsoft Rachel Jones| Microsoft Certified Trainer, SourceDev

JavaScript Fundamentals Understand how JavaScript is used to: –Update UI Elements –Create and Use Functions –Manipulate Graphics –Respond to Touch Interface Module Overview

JavaScript is: a loosely-typed scripting language an interpreted language Open Source

Accessing HTML5 APIs GeoLocation Captures geographic location WebWorkers Performs background work WebSockets A two-way messaging connections between server/client Further resource and review of HTML5 APIs

JavaScript Primer: Welcome to my Website! document.write("Hello World Wide Web");

Using JavaScript to Update the UI Get today's date and add it to an element on the page. document.getElementById("demo").innerHTML=Date();

DEMO Creating Inline JavaScript Using JavaScript to Update the UI

Separation of Concerns Add a new file: Script.js function writetext() { alert("hola from an external file!"); } Call the function. <input type="button" value="Click Me" onclick="writetext()"> Link the files

DEMO Creating and linking an external.js file Creating and Calling JavaScript Functions

Manipulate a Canvas with JavaScript Your browser does not support the canvas element. var c=document.getElementById("myCanvas"); var ctx=c.getContext("2d"); ctx.fillStyle="Blue"; ctx.fillRect(5,5,150,75); Example: Cut The Rope

DEMO Manipulate Graphics with JavaScript with JavaScript

Responding to Touch Interface TapA finger touches the screen and releases quickly. DoubleTapTwo taps in succession. HoldA finger touches the screen and holds it in place for a brief period of time. FlickA finger drags across the screen and is lifted up without stopping. PinchTwo fingers press on the screen and move around. PinchCompleteMarks the end of a Pinch gesture.

Develop for Touch Enabled Devices Graphic Placeholder

Responding Touch Interface Three Basic Touch Events: touchstart touchmove touchend Further resource and review for touch and mouse document.addEventListener("touchstart" { alert(event.touches.length); },false); mousedown mousemove mouseup

JavaScript Fundamentals Understand how JavaScript is used to: –Update UI Elements –Create and Use Functions –Manipulate Graphics –Respond to Touch Interface Module Overview

©2014 Microsoft Corporation. All rights reserved. Microsoft, Windows, Office, Azure, System Center, Dynamics and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.