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

JavaScript Page 2 © 2010 Razorfish. All rights reserved.

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

class Page 4 © 2010 Razorfish. All rights reserved.

Inheritance Page 5 © 2010 Razorfish. All rights reserved.

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

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

Page 8 © 2010 Razorfish. All rights reserved.

Page 9 © 2010 Razorfish. All rights reserved.

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

Page 11 © 2010 Razorfish. All rights reserved.

Page 12 © 2010 Razorfish. All rights reserved.

Page 13 © 2010 Razorfish. All rights reserved.

Page 14 © 2010 Razorfish. All rights reserved.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Page 43 © 2010 Razorfish. All rights reserved. Inheritance

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

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

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

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

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

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

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

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

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

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

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

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

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.

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.

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

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

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

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

Thank You Dan Nichols Blog: Code demo: Page 62 © 2010 Razorfish. All rights reserved.