MTA animations graphics_accessing data

Creating Animations, Working with
Graphics, and Accessing Data
Lesson 9

Exam Objective Matrix
Skills/Concepts

MTA Exam Objectives

Coding Animations by Using Code animations by using JavaScript. (4.3)
JavaScript
Working with Images,
Code animations by using JavaScript. (4.3)
Shapes, and Other Graphics
Sending and Receiving Data Access data access by using JavaScript. (4.4)
Loading and Saving Files

Access data access by using JavaScript. (4.4)

Using JavaScript to Validate Access data access by using JavaScript. (4.4)
User Form Input
Understanding and Using
Cookies
Understanding and Using
LocalStorage
2

Animation
• Animation is the display of a sequence of
static images at a fast enough speed to
create the illusion of movement.
• Regarding the user interface, animation
has to do with changing a display to make
it dynamic—not just a one-time change but
a seamless one.
• JavaScript can produce spectacular
animation effects.
3

Recursion
• Recursion is a programming technique in
which a function calls itself.
• Recursion is a key part of animation.
• The most effective way to introduce a
―timing element‖ into JavaScript is to use
setTimeout recursively.
– Have it invoke another execution of the
same function from which the
setTimeout() was called.
4

A Simple Animation Example (Continued)

6

A Simple Animation Example (Continued)

7

createElement Method
• You can use the JavaScript
createElement method to display an
image when a button is clicked or some
other event occurs.

8

Canvas Element
• To draw a canvas object, use:
– getElementById() function to find the

canvas element
– canvas.getContext to create the canvas

object

• Then use a variety of methods to draw
shapes, include images, and so on.

9

Canvas Example: Analog Clock

10

Canvas Example: Analog Clock (Continued)

11

Sending and Receiving Data
• One of the most essential techniques for
data transfer involves the
XMLHttpRequest API.
– Sometimes abbreviated as XHR
• XMLHttpRequest enables you to use

JavaScript to pass data in the form of text
strings between a client and a server.

12

XMLHttpRequest
• General syntax:

13

XMLHttpRequest
• The XMLHttpRequest object creates a call
to the server.
• The open method specifies the HTTP
method for contacting the server and
provides the server’s Web address.
• The callback function gets a response
from the server.
• xhr.send(data) sends the data.
14

Parsing
• Parsing is a term used to describe
analysis of complex information into
constituent parts.
• Use parsing for extracting information from
a data stream of stock quotes and similar
tasks.

17

JSON
• You can also use JSON.parse and
JSON.stringify APIs to exchange
JavaScript objects with a server.

20

Loading and Saving Files
• JavaScript can access files on a local
computer and, using HTML5, validate the
file type before loading, which greatly
reduces errors.

21

Access a Local File Example

22

Access a Local File Example (Continued)

23

• Application accepts image files but not other
formats

24

• Application accepts image files but not other
formats

25

AppCache
• AppCache saves a copy of Web site files
locally, in a structured form.
• AppCache is not the same as a browser’s
cache. Whereas a browser’s cache saves
all Web pages visited, AppCache saves
only the files listed in the cache manifest.

26

Data Types
• A data type is JavaScript’s interpretation of the
kind of data a program can work with.
• Data types include:
– string
– Number
– Array
– Boolean
– Null
– Object
– undefined
28

User Input Form Validation
• As end users enter data in a form,
JavaScript can instantly validate entries
and suggest alternatives.

29

Client-side Validation Example

30

Client-side Validation Example (Continued)

31

Cookies
• Cookies are small text files that Web sites
save to a computer’s hard disk that
contain information about the user and his
or her browsing preferences.
• The content of cookies change as a user
revisits a site and selects different items or
changes preferences.
• In JavaScript, a cookie is a variable.
• JavaScript can create and retrieve
32
cookies.

Local Storage
• HTML5’s Local Storage feature has better
security and makes programming easier
than with cookies.

34

Recap
• Animation
• Recursion
• createElement method
•
•
•
•
•
•
•
•
•

Canvas
Sending and receiving data
XMLHttpRequest API
Accessing a local file
AppCache
Data types
User input form validation/client-side validation
Cookies
Local Storage
35

MTA animations graphics_accessing data

More Related Content

Similar to MTA animations graphics_accessing data (20)

Recently uploaded (20)

MTA animations graphics_accessing data

Editor's Notes