Microsoft Examination for HTML 5

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