Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


Presentation on theme: "Anything But Typical Learning to Love JavaScript Prototypes Page 1 © 2010 Razorfish. All rights reserved. Dan Nichols March 14, 2010."— Presentation transcript:

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 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 Validator

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 Blog: Code demo: Page 62 © 2010 Razorfish. All rights reserved.


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

Similar presentations


Ads by Google