1. Anything But Typical Learning to Love JavaScript Prototypes Page 1 © 2010 Razorfish. All rights reserved. Dan Nichols March 14, 2010

2. JavaScript Page 2 © 2010 Razorfish. All rights reserved.

3. Object-Oriented Programming Page 3 © 2010 Razorfish. All rights reserved.

4. class Page 4 © 2010 Razorfish. All rights reserved.

5. Inheritance Page 5 © 2010 Razorfish. All rights reserved.

6. prototype (not the library) Page 6 © 2010 Razorfish. All rights reserved.

7. The story so far… Page 7 © 2010 Razorfish. All rights reserved.

8. Page 8 © 2010 Razorfish. All rights reserved.

9. Page 9 © 2010 Razorfish. All rights reserved.

10. …except it wasnt all good. Page 10 © 2010 Razorfish. All rights reserved.

11. Page 11 © 2010 Razorfish. All rights reserved.

12. Page 12 © 2010 Razorfish. All rights reserved.

13. Page 13 © 2010 Razorfish. All rights reserved.

14. Page 14 © 2010 Razorfish. All rights reserved.

15. Sound familiar? Page 15 © 2010 Razorfish. All rights reserved.

16. Page 16 © 2010 Razorfish. All rights reserved. prototype (not the library) to the rescue!

17. Page 17 © 2010 Razorfish. All rights reserved. Everything is an object

18. Page 18 © 2010 Razorfish. All rights reserved. Every object has a prototype

19. Page 19 © 2010 Razorfish. All rights reserved. prototype s do good things

20. Page 20 © 2010 Razorfish. All rights reserved. Encourage modularity and reusability

21. Page 21 © 2010 Razorfish. All rights reserved. Provide a consistent way to do (different) things

22. Page 22 © 2010 Razorfish. All rights reserved. Keep code to a minimum

23. Page 23 © 2010 Razorfish. All rights reserved. Make complexity easy

24. What is a prototype, exactly? Page 24 © 2010 Razorfish. All rights reserved.

25. Page 25 © 2010 Razorfish. All rights reserved. A reference point for other objects

26. Property lookup chain Page 26 © 2010 Razorfish. All rights reserved.

27. Property lookup chain Page 27 © 2010 Razorfish. All rights reserved. instance Date Object

28. Property lookup chain Page 28 © 2010 Razorfish. All rights reserved. instance Date Object

29. Property lookup chain Page 29 © 2010 Razorfish. All rights reserved. instance Date Object

30. Property lookup chain Page 30 © 2010 Razorfish. All rights reserved. instance Date Object

31. Page 31 © 2010 Razorfish. All rights reserved. JavaScript is different from most other OOP languages

32. Anatomy of a prototype Page 32 © 2010 Razorfish. All rights reserved. rex Poodle Dog Object

33. Anatomy of a prototype Page 33 © 2010 Razorfish. All rights reserved. Constructor

34. Anatomy of a prototype Page 34 © 2010 Razorfish. All rights reserved. Property Method

35. Anatomy of a prototype Page 35 © 2010 Razorfish. All rights reserved. Constructor Inheritance

36. Anatomy of a prototype Page 36 © 2010 Razorfish. All rights reserved. Instance Instance Property

37. this and the lookup chain Page 37 © 2010 Razorfish. All rights reserved. fluffy Cat Object socks

38. this and the lookup chain Page 38 © 2010 Razorfish. All rights reserved. socks Cat Object

39. this and the lookup chain Page 39 © 2010 Razorfish. All rights reserved. fluffy Cat Object

40. Execution context: this and call() Page 40 © 2010 Razorfish. All rights reserved.

41. Execution context: this and call() Page 41 © 2010 Razorfish. All rights reserved.

42. Execution context with instances Page 42 © 2010 Razorfish. All rights reserved. Same outcome

43. Page 43 © 2010 Razorfish. All rights reserved. Inheritance

44. Working with inherited behavior Page 44 © 2010 Razorfish. All rights reserved. LimitedContainer Container Object

45. Working with inherited behavior Page 45 © 2010 Razorfish. All rights reserved. LimitedContainer Container Object

46. Working with inherited behavior Page 46 © 2010 Razorfish. All rights reserved. LimitedContainer Container Object

47. Page 47 © 2010 Razorfish. All rights reserved. JavaScript is the Frankenstein of the OOP world

48. Borrowing from multiple prototypes Page 48 © 2010 Razorfish. All rights reserved.

49. Page 49 © 2010 Razorfish. All rights reserved. One small problem

50. The constructor problem Page 50 © 2010 Razorfish. All rights reserved.

51. The constructor problem Page 51 © 2010 Razorfish. All rights reserved.

52. Fixing the constructor problem Page 52 © 2010 Razorfish. All rights reserved.

53. Fixing the constructor problem Page 53 © 2010 Razorfish. All rights reserved.

54. Page 54 © 2010 Razorfish. All rights reserved. prototype isnt love at first sight

55. Page 55 © 2010 Razorfish. All rights reserved. Putting prototype s to work

56. Requirements Four kinds of rules on the form: Required Email Number Zip Code Multiple rules can apply to one field Rules need to be inferred from data-rich, standard HTML Error messages should be specific Flexible enough to be: Usable for all other forms on the site Extended for use in other projects Page 56 © 2010 Razorfish. All rights reserved.

57. The Plan On load: 1.Create validation rules for each field 2.Set up submit handler When form is submitted: 1.Cycle through all rules 2.If a field fails a rule Mark it invalid Create an error message for it Dont check any more rules for that field 3.Show all error messages Page 57 © 2010 Razorfish. All rights reserved.

58. Page 58 © 2010 Razorfish. All rights reserved. ValidatingForm Object Validator NumberValidator PatternValidator RequiredValidator EmailValidator

59. Page 59 © 2010 Razorfish. All rights reserved. Libraries are there to make life easier

60. Page 60 © 2010 Razorfish. All rights reserved. Think about your approach

61. Page 61 © 2010 Razorfish. All rights reserved. Dive in!

62. Thank You Dan Nichols dan.nichols@razorfish.com Blog: http://heydanno.com/blog Code demo: http://heydanno.com/sxsw Page 62 © 2010 Razorfish. All rights reserved.