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