MTA animations graphics_accessing data
-
Upload
dhairya-joshi -
Category
Technology
-
view
276 -
download
0
description
Transcript of MTA animations graphics_accessing data
![Page 1: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/1.jpg)
Creating Animations, Working with Graphics, and Accessing Data
Lesson 9
![Page 2: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/2.jpg)
Exam Objective Matrix
Skills/Concepts MTA Exam Objectives
Coding Animations by Using JavaScript
Code animations by using JavaScript. (4.3)
Working with Images, Shapes, and Other Graphics
Code animations by using JavaScript. (4.3)
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 User Form Input
Access data access by using JavaScript. (4.4)
Understanding and Using Cookies
Access data access by using JavaScript. (4.4)
Understanding and Using LocalStorage
Access data access by using JavaScript. (4.4)
2
![Page 3: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/3.jpg)
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
![Page 4: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/4.jpg)
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
![Page 5: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/5.jpg)
A Simple Animation Example
5
![Page 6: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/6.jpg)
A Simple Animation Example (Continued)
6
![Page 7: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/7.jpg)
A Simple Animation Example (Continued)
7
![Page 8: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/8.jpg)
createElement Method• You can use the JavaScript createElement method to display an image when a button is clicked or some other event occurs.
8
![Page 9: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/9.jpg)
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
![Page 10: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/10.jpg)
Canvas Example: Analog Clock
10
![Page 11: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/11.jpg)
Canvas Example: Analog Clock (Continued)
11
![Page 12: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/12.jpg)
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
![Page 13: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/13.jpg)
XMLHttpRequest
• General syntax:
13
![Page 14: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/14.jpg)
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
![Page 15: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/15.jpg)
Accessing Data Example
15
![Page 16: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/16.jpg)
Accessing Data Example
16
![Page 17: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/17.jpg)
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
![Page 18: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/18.jpg)
Parsing Example
18
![Page 19: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/19.jpg)
Parsing Example
19
![Page 20: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/20.jpg)
JSON• You can also use JSON.parse and JSON.stringify APIs to exchange JavaScript objects with a server.
20
![Page 21: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/21.jpg)
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
![Page 22: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/22.jpg)
Access a Local File Example
22
![Page 23: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/23.jpg)
Access a Local File Example (Continued)
23
![Page 24: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/24.jpg)
Access a Local File Example (Continued)• Application accepts image files but not
other formats
24
![Page 25: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/25.jpg)
Access a Local File Example (Continued)• Application accepts image files but not
other formats
25
![Page 26: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/26.jpg)
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
![Page 27: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/27.jpg)
AppCache Example
27
![Page 28: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/28.jpg)
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
![Page 29: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/29.jpg)
User Input Form Validation• As end users enter data in a form,
JavaScript can instantly validate entries and suggest alternatives.
29
![Page 30: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/30.jpg)
Client-side Validation Example
30
![Page 31: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/31.jpg)
Client-side Validation Example (Continued)
31
![Page 32: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/32.jpg)
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.
32
![Page 33: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/33.jpg)
Use Cookies Example
33
![Page 34: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/34.jpg)
Local Storage• HTML5’s Local Storage feature has
better security and makes programming easier than with cookies.
34
![Page 35: MTA animations graphics_accessing data](https://reader035.fdocuments.in/reader035/viewer/2022062702/554bbc4bb4c90530298b4cee/html5/thumbnails/35.jpg)
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