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

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

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

4. 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 http://docs.webplatform.org/wiki/apis

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

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

7. DEMO Creating Inline JavaScript Using JavaScript to Update the UI

8. 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. 1 2 3

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

10. 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

11. DEMO Manipulate Graphics with JavaScript http://msdn.microsoft.com/en-us/library/ie/ff975062(v=vs.85).aspxGraphics with JavaScript http://msdn.microsoft.com/en-us/library/ie/ff975062(v=vs.85).aspx

12. 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.

13. Develop for Touch Enabled Devices Graphic Placeholder

14. Responding Touch Interface Three Basic Touch Events: touchstart touchmove touchend Further resource and review for touch and mouse http://www.html5rocks.com/en/mobile/touchandmouse/#toc-pointers document.addEventListener("touchstart" { alert(event.touches.length); },false); mousedown mousemove mouseup

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

16. ©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.