Scribd
Upload
38 views35 pages

Creating Animations, Working With Graphics, and Accessing Data

This document covers various JavaScript skills and concepts for creating animations, working with graphics, and accessing data, including coding animations using recursion and setTimeout, drawing on canvases, sending and receiving data via XMLHttpRequest, loading and saving files, validating user input, and using cookies and local storage. The document provides examples for animation, parsing data, accessing local files, app caching, form validation, and working with cookies and local storage. It also discusses recursion, the createElement method, and JavaScript data types.

Uploaded by

David Sandro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
38 views35 pages

Creating Animations, Working With Graphics, and Accessing Data

This document covers various JavaScript skills and concepts for creating animations, working with graphics, and accessing data, including coding animations using recursion and setTimeout, drawing on canvases, sending and receiving data via XMLHttpRequest, loading and saving files, validating user input, and using cookies and local storage. The document provides examples for animation, parsing data, accessing local files, app caching, form validation, and working with cookies and local storage. It also discusses recursion, the createElement method, and JavaScript data types.

Uploaded by

David Sandro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 35

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, Shapes, Code animations by using JavaScript. (4.3)
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 Access data access by using JavaScript. (4.4)
Cookies
Understanding and Using Access data access by using JavaScript. (4.4)
LocalStorage
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.
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.
A Simple Animation Example
A Simple Animation Example (Continued)
A Simple Animation Example (Continued)
createElement Method
• You can use the JavaScript createElement
method to display an image when a button is
clicked or some other event occurs.
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.
Canvas Example: Analog Clock
Canvas Example: Analog Clock (Continued)
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.
XMLHttpRequest
• General syntax:
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.
Accessing Data Example
Accessing Data Example
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.
Parsing Example
Parsing Example
JSON
• You can also use JSON.parse and
JSON.stringify APIs to exchange
JavaScript objects with a server.
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.
Access a Local File Example
Access a Local File Example (Continued)
Access a Local File Example (Continued)
• Application accepts image files but not other formats
Access a Local File Example (Continued)
• Application accepts image files but not other formats
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.
AppCache Example
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
User Input Form Validation
• As end users enter data in a form, JavaScript
can instantly validate entries and suggest
alternatives.
Client-side Validation Example
Client-side Validation Example (Continued)
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 cookies.
Use Cookies Example
Local Storage
• HTML5’s Local Storage feature has better
security and makes programming easier than
with cookies.
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

You might also like