JavaScript State of Mind

  • 118 views
Uploaded on

Discover how to use objects to track state in JavaScript. Apply this concept with a simple application in HTML5 Canvas.

Discover how to use objects to track state in JavaScript. Apply this concept with a simple application in HTML5 Canvas.

More in: Software , Technology
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
118
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
2
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

Transcript

  • 1. JavaScript state of mind
  • 2. What is "state"? mood: "angry"
  • 3. What is "state"? mood: "happy" sleeping: false hair: "brown" mood: "sad" sleeping: false hair: "brown" mood: "angry" sleeping: false hair: "brown"
  • 4. How is tracking state helpful? color: 'red' width: 100 height: 100 x: 323 y: 100
  • 5. How is tracking state helpful? color: 'red' width: 75 height: 75 x: 330 y: 200
  • 6. Using objects to store state
  • 7. Using objects to store state keyword
  • 8. Using objects to store state identifier
  • 9. Using objects to store state assignment operator
  • 10. Using objects to store state object literal
  • 11. Using objects to store state property
  • 12. Using objects to store state value (string)
  • 13. Using objects to store state value (number)
  • 14. Render (draw) the object
  • 15. Putting it all together
  • 16. Putting it all together http://codepen.io/sethmcl/pen/LDgzE
  • 17. Assignment Draw a square on the screen, using a square object to track state. Make it move to the right across the screen. When it reaches the right edge, it should reverse direction and move to the left. When it reaches the left edge, it should reverse direction and move to the right. Reminder: You can get the canvas width from ctx. canvas.width