Your SlideShare is downloading. ×
0
JavaScript
state of mind
What is "state"?
mood: "angry"
What is "state"?
mood: "happy"
sleeping: false
hair: "brown"
mood: "sad"
sleeping: false
hair: "brown"
mood: "angry"
sleep...
How is tracking state helpful?
color: 'red'
width: 100
height: 100
x: 323
y: 100
How is tracking state helpful?
color: 'red'
width: 75
height: 75
x: 330
y: 200
Using objects to store state
Using objects to store state
keyword
Using objects to store state
identifier
Using objects to store state
assignment operator
Using objects to store state
object literal
Using objects to store state
property
Using objects to store state
value (string)
Using objects to store state
value (number)
Render (draw) the object
Putting it all together
Putting it all together
http://codepen.io/sethmcl/pen/LDgzE
Assignment
Draw a square on the screen, using a square
object to track state.
Make it move to the right across the screen....
Upcoming SlideShare
Loading in...5
×

JavaScript State of Mind

215

Published on

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

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

  • Be the first to like this

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

No notes for slide

Transcript of "JavaScript State of Mind"

  1. 1. JavaScript state of mind
  2. 2. What is "state"? mood: "angry"
  3. 3. What is "state"? mood: "happy" sleeping: false hair: "brown" mood: "sad" sleeping: false hair: "brown" mood: "angry" sleeping: false hair: "brown"
  4. 4. How is tracking state helpful? color: 'red' width: 100 height: 100 x: 323 y: 100
  5. 5. How is tracking state helpful? color: 'red' width: 75 height: 75 x: 330 y: 200
  6. 6. Using objects to store state
  7. 7. Using objects to store state keyword
  8. 8. Using objects to store state identifier
  9. 9. Using objects to store state assignment operator
  10. 10. Using objects to store state object literal
  11. 11. Using objects to store state property
  12. 12. Using objects to store state value (string)
  13. 13. Using objects to store state value (number)
  14. 14. Render (draw) the object
  15. 15. Putting it all together
  16. 16. Putting it all together http://codepen.io/sethmcl/pen/LDgzE
  17. 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
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×