Date post: | 10-May-2015 |
Category: |
Technology |
Upload: | dhairya-joshi |
View: | 912 times |
Download: | 6 times |
JavaScript Coding for the Touch Interface, Device and Operating
System Resources, and MoreLesson 10
Exam Objective Matrix
Skills/Concepts MTA Exam Objectives
Responding to the Touch Interface
Respond to the touch interface. (4.5)
Coding Additional HTML5 APIs
Code additional HTML5 APIs. (4.6)
Accessing Device and Operating System Resources
Access device and operating system resources. (4.7)
2
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
Overview of Touch Gestures
Gesture Mouse Equivalent
Description
Tap Left-click Tap a finger on the screen
Double tap Left double-click Quickly tap a finger twice on the screen
Two-finger tap N/A Tap two fingers on the screen simultaneously
Press and tap Right-click Press and hold one finger while tapping another
Press and hold Right-click Press and hold a finger on the screen, then release
4
Overview of Touch Gestures (Continued)
Gesture Mouse Equivalent
Description
Selection/drag Mouse drag (selection)
Drag a finger to the left or right
Panning with inertia
Scrolling Press and hold a finger on the screen and then drag the finger
Flick Move back or forwardPan up or down
Press a finger on the screen, move it in any direction, and then lift the finger to scroll
Rotate N/A Move two fingers over an object on the screen in a circular motion
Zoom CTRL + mouse wheel forward or backward
Pinch an object inwards or outwards
5
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
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
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
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
startup() Function Example
10
handleStart Function Example
11
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
Scale and Rotation Properties• scale: Indicates the amount of two-
finger pinch zooming that occurred• rotation: Indicates the amount of
two-finger rotation that occurred
13
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
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
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
Example of a Call to getCurrentPosition
17
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
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
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
Web Workers Example• Main HTML document:
• doWork.js file:
21
WebSockets• WebSockets is an API that offers
full-duplex communication through a single socket over the Internet.
• Uses:– Real-time Web applications like chat,
multiplayer online gaming, and stock quotes
22
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
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
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
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="file"]').files[0];socket.send(file);
26
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
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
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
File API Interfaces• Use the input type="file" element to
get the list of selected File objects as a FileList
30
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
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
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
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 data34
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
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
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
Recap• Touch interface• Gestures• Capturing geolocation data• Web Workers• WebSockets• File API• Accessing in-memory resources• GPS• Accelerometer• Camera
38