MTA java script coding for the touch interface

JavaScript Coding for the Touch
Interface, Device and Operating
System Resources, and More
Lesson 10

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

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

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

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 twofinger 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 fullduplex 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

• 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

• 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

• 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

• 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 data 34

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

MTA java script coding for the touch interface

More Related Content

Similar to MTA java script coding for the touch interface

Recently uploaded

MTA java script coding for the touch interface

Editor's Notes