MTA java script coding for the touch interface

  • 862 views
Uploaded on

Microsoft Examination for HTML 5

Microsoft Examination for HTML 5

More in: Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
862
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.

Transcript

  • 1. JavaScript Coding for the Touch Interface, Device and Operating System Resources, and More Lesson 10
  • 2. Exam Objective Matrix Skills/Concepts MTA Exam Objectives Responding to the Touch Interface Coding Additional HTML5 APIs Accessing Device and Operating System Resources Respond to the touch interface. (4.5) Code additional HTML5 APIs. (4.6) Access device and operating system resources. (4.7) 2
  • 3. Touch Screens • Resistive: Made up of several layers; topmost layer flexes when pressed; sensors detect the pressure • Capacitive: Uses electrodes to sense objects touching the screen; object must have conductive properties – A finger works but something like a stylus does not 3
  • 4. Overview of Touch Gestures Gesture Tap Mouse Equivalent Left-click Double tap Left double-click Two-finger tap N/A Press and tap Right-click Press and hold Right-click Description Tap a finger on the screen Quickly tap a finger twice on the screen Tap two fingers on the screen simultaneously Press and hold one finger while tapping another Press and hold a finger on the screen, then release 4
  • 5. Overview of Touch Gestures (Continued) Gesture Selection/drag Panning with inertia Flick Rotate Zoom Mouse Equivalent Mouse drag (selection) Scrolling Move back or forward Pan up or down N/A CTRL + mouse wheel forward or backward Description Drag a finger to the left or right Press and hold a finger on the screen and then drag the finger Press a finger on the screen, move it in any direction, and then lift the finger to scroll Move two fingers over an object on the screen in a circular motion Pinch an object inwards or outwards 5
  • 6. Primary JavaScript Touch Events • Every new finger touch triggers a touchstart event. • When a finger moves around the surface of the screen, a touchmove event occurs, which tracks the finger movement. • Lifting the finger from the screen triggers a touchend event. • The touchcancel event is triggered when the device launches another application. 6
  • 7. Touch Object and Touchlist • In JavaScript, the touch object detects input from touch-enabled devices. You reference touch objects in the touchlist, which includes all of the points of contact with a touch screen. • A single tap has one entry in the touchlist, whereas a three-finger gesture would have a total of three entries. 7
  • 8. Touchlists • touches: A list of all touch points currently in contact with the screen • targetTouches: A list of touch points currently in contact with the screen and whose touchstart event occurred within the same node (inside the same target element as the current target element) • changedTouches: A list of touch points that caused the current event to be fired; for example, in a touchend event, this is the finger that was removed 8
  • 9. addEventListener method • Used to attach an event handler to an HTML element – Can be a div, link, or anything you want. • General syntax: object.addEventListener(event, eventListenerFunction); 9
  • 10. startup() Function Example 10
  • 11. handleStart Function Example 11
  • 12. Gesture Events • Every new two-finger gesture triggers a gesturestart event. • When both fingers move around the screen, a gesturechange event occurs. • Lifting both fingers from the screen triggers a gestureend event. 12
  • 13. Scale and Rotation Properties • scale: Indicates the amount of two-finger pinch zooming that occurred • rotation: Indicates the amount of twofinger rotation that occurred 13
  • 14. WHATWG • Web Hypertext Application Technology Working Group (WHATWG) • Formed by Apple, the Mozilla Foundation, and Opera Software to define and document the HTML5 specification • http://developers.whatwg.org/ 14
  • 15. Geolocation API • Defines an interface that provides a device’s location, usually using latitude and longitude coordinates • API exposes the latitude and longitude to JavaScript in a Web page using the geolocation object 15
  • 16. Geolocation Methods • getCurrentPosition: Gets the device’s current geographic position • watchPosition: Watches the device’s position as it changes over time and generates an event if a change occurs – Calling clearWatch stops the watch 16
  • 17. Example of a Call to getCurrentPosition 17
  • 18. Geodetic and Civic Data • You can present location data to users in two ways: – Geodetic data provides raw location data, such as longitude and latitude, or meters. – Civic data is location data that’s more easily understood by humans, such as a map or an address like 637 Park Street. 18
  • 19. Web Workers • Web Workers are scripts that run in the background, performing calculations or other actions that allow for a more responsive user interface. • Uses: – Fetch real-time data like stock updates – Make network requests – Access local storage while the main HTML document responds to the user input like tapping, scrolling, and typing. 19
  • 20. Web Workers (Continued) • Web Worker objects run in isolated threads— they do not act directly on the main HTML document or the DOM. • You don’t use getElementById in your script. (You can use setTimeout, setInterval, and XMLHttpRequest.) • Instead, Web Workers pass information through messages, executing code from a JavaScript file separate from the main HTML document. 20
  • 21. Web Workers Example • Main HTML document: • doWork.js file: 21
  • 22. WebSockets • WebSockets is an API that offers fullduplex communication through a single socket over the Internet. • Uses: – Real-time Web applications like chat, multiplayer online gaming, and stock quotes 22
  • 23. WebSockets (Continued) • Primary events associated with WebSocket communications: – onopen: When a socket opens – onmessage: When a message has been received from the Web server – onclose: When a socket closes 23
  • 24. WebSockets (Continued) • The JavaScript that opens a WebSocket connection is: var host = 'ws://example.com'; • ws replaces http in the URL • wss for secure WebSocket connections, just like https for secure HTTP connections 24
  • 25. WebSockets (Continued) • Test an initialized Web connection using one of these methods – Opens an alert box: socket.onopen = function(){ alert("Socket open"); } – Displays a message: socket.onopen = function (openEvent) { document.getElementById("serverStatus"). innerHTML = 'Socket open'; }; 25
  • 26. WebSockets (Continued) • The code for sending a text-based message: socket.send('message'); • A Blob is a data type that can store binary data, like images or multimedia files. To send a file as a Blob: var file = document.querySelector('input[type="fi le"]').files[0]; socket.send(file); 26
  • 27. WebSockets (Continued) • To receive messages from the server, you could use the onmessage callback: socket.onmessage = function(msg){ alert(msg); //Received! } • To close a connection, use the onclose event handler: socket.onclose = function() { alert("Connection closed."); }; 27
  • 28. File API • Allows a browser or application to upload files from local storage to a remote server without the need for a plug-in 28
  • 29. File API Interfaces • File: Includes read-only informational attributes about an individual file, such as its name and media type, and reads in the file as a URL • FileList: An array-like sequence of File objects; includes dragging a folder of files from local storage • Blob: Provides access to raw binary data • FileReader: Provides methods to read and display a file 29
  • 30. File API Interfaces • Use the input type="file" element to get the list of selected File objects as a FileList 30
  • 31. Web Storage API • Provides a client-side method for saving session information locally within the browser or device memory • localStorage method allows users to save larger amounts of data from session to session (persistent data) • sessionStorage method keeps data only for one session (until the browser is closed) • Data stored in key/value pairs for both types of Web storage 31
  • 32. Web Storage API (Continued) • sessionStorage is isolated to a specific window or browser tab. • Stores temporary data during an HTTP session that occurs in a single window or tab • Multiple windows or tabs can maintain their own session data • Ideal for user with multiple open browser tabs, can have different shopping carts open in each tab (for example) 32
  • 33. Platform Independence • Describes an application that can run on different desktop and mobile device operating systems, such as Microsoft Windows, Internet Explorer, Windows Phone, Mac OS X, Android, iOS, and Blackberry OS 33
  • 34. Global Positioning System (GPS) • Hardware, which is usually a chip or circuit board, is a receiver that communicates with satellites to provide a device’s precise location in longitude and latitude coordinates • Found in most modern phones and laptops with WiFi and/or cellular broadband • Geolocation API works with the GPS chip to gather raw geolocation data 34
  • 35. Accelerometer • A device that measures acceleration • Accelerometer sensor detects forces applied to the device, such as movement (up, down, sideways) and gravity • Specific APIs retrieve raw motion data from Accelerometer sensors, and then the Motion API combines the data from those sensors and crunches the numbers that result in easy-to-use values 35
  • 36. Accelerometer (Continued) • devicemotion event provides the acceleration of the device, in Cartesian coordinates, and the rotation rate • JavaScript that receives devicemotion events: window.addEventListener("devicemotion", function(event) { // Process event.acceleration, event.accelerationIncludingGravity, // event.rotationRate and event.interval }, true); 36
  • 37. Camera • W3C HTML Media Capture specification uses a capture attribute with the input element to capture data from cameras, camcorders, webcams, microphones, and so on • Generic code that uploads an image from a device’s camera: <input type="file" accept="image/*" capture="camera" id="capture"> 37
  • 38. Recap • • • • • • • • • • Touch interface Gestures Capturing geolocation data Web Workers WebSockets File API Accessing in-memory resources GPS Accelerometer Camera 38