Your SlideShare is downloading. ×
MTA animations graphics_accessing data
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

MTA animations graphics_accessing data

268

Published on

Microsoft Examination for HTML 5

Microsoft Examination for HTML 5

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
268
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Tip: Add your own speaker notes here.
  • Transcript

    • 1. Creating Animations, Working with Graphics, and Accessing Data Lesson 9
    • 2. 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 Access data access by using JavaScript. (4.4) Cookies Understanding and Using Access data access by using JavaScript. (4.4) LocalStorage 2
    • 3. 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
    • 4. 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
    • 5. A Simple Animation Example 5
    • 6. A Simple Animation Example (Continued) 6
    • 7. A Simple Animation Example (Continued) 7
    • 8. createElement Method • You can use the JavaScript createElement method to display an image when a button is clicked or some other event occurs. 8
    • 9. 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
    • 10. Canvas Example: Analog Clock 10
    • 11. Canvas Example: Analog Clock (Continued) 11
    • 12. 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
    • 13. XMLHttpRequest • General syntax: 13
    • 14. 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
    • 15. Accessing Data Example 15
    • 16. Accessing Data Example 16
    • 17. 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
    • 18. Parsing Example 18
    • 19. Parsing Example 19
    • 20. JSON • You can also use JSON.parse and JSON.stringify APIs to exchange JavaScript objects with a server. 20
    • 21. 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
    • 22. Access a Local File Example 22
    • 23. Access a Local File Example (Continued) 23
    • 24. Access a Local File Example (Continued) • Application accepts image files but not other formats 24
    • 25. Access a Local File Example (Continued) • Application accepts image files but not other formats 25
    • 26. 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
    • 27. AppCache Example 27
    • 28. 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
    • 29. User Input Form Validation • As end users enter data in a form, JavaScript can instantly validate entries and suggest alternatives. 29
    • 30. Client-side Validation Example 30
    • 31. Client-side Validation Example (Continued) 31
    • 32. 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.
    • 33. Use Cookies Example 33
    • 34. Local Storage • HTML5’s Local Storage feature has better security and makes programming easier than with cookies. 34
    • 35. 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

    ×