This talk introduces the HTML5 geolocation API, the Canvas 2dContext API, and web forms 2.0 constraint validation API. It also has a picture of Napoleon riding a pink horse.

1. HTML5 & Javascript
by Mike Taylor
@miketaylr
1

2. 2
HTML5

3. 3
HTML5 “HTML5”
• Canvas 2D Context • Web Workers
• Microdata (& vocabularies) • Web Storage
• Cross-document messaging • Web Sockets (API & protocol)
• Channel messaging • Server-side events
• Forms • Geolocation API
• SVG, MathML, XHR2

4. 4
HTML5

5. 5

6. 5
Webapps‽
http://bit.ly/webapps-complete

7. 6

8. 7
OUTLINE
• Constraint validation API
• Canvas 2dContext API
• localStorage API
• Geolocation API
• Life-changing demo™

9. 8
CONSTRAINT VALIDATION

10. 9
CONSTRAINT VALIDATION API
el.willValidate
el.setCustomValidity(msg)
el.checkValidity()
el.validationMessage

11. 10
CONSTRAINT VALIDATION API
el.validity.valueMissing required
el.validity.typeMismatch type
el.validity.patternMismatch pattern
el.validity.tooLong maxlength
el.validity.rangeUnderflow min
el.validity.rangeOverflow max
el.validity.stepMismatch step
el.validity.customError N/A
el.validity.valid N/A

12. 11

13. 12
Demos!
http://miketaylr.com/pres/ncjs/
(http://bit.ly/ncjs-mt)

14. 13
Example 1.1 Type validation

15. 14
Example 1.2 Pattern validation

16. 15
<CANVAS>

17. 16

18. 17

19. 18

20. 19

21. 20
CANVAS 2D CONTEXT API
Transformations
Compositing
Colors and styles
Line styles
Shadows
Simple shapes (rectangles)
Complex shapes (paths)
Focus management
Text
Images
Pixel manipulation

22. 20
CANVAS 2D CONTEXT API
Transformations
Compositing
Colors and styles
Line styles
Shadows
Simple shapes (rectangles)
Complex shapes (paths)
Focus management
Text
Images
Pixel manipulation

23. 21
Example 2.1 Canvas Paths
var

24. 22
Example 2.2 Canvas Rectangle
var

25. 23
Example 2.4 Canvas image
var
c

26. 24
Example 2.5 Canvas text
var
c

27. 25
Example 2.6 Canvas shadow
var
c

28. 26
GEOLOCATION

29. 27
GEOLOCATION API
getCurrentPosition(success, error, options)
watchPosition(success, error, options)
options: enableHighAccuracy,
timeout
maximumAge

30. 28
GEOLOCATION API
position.coords.latitute
position.coords.longitude
position.coords.altitude
position.coords.accuracy
position.coords.altituteAccuracy
position.coords.heading
position.coords.speed

31. 29
Example 3 Geolocation
c

32. 30

33. 31
Putting it all together*
*um, kinda.

34. 32
Demo!
http://miketaylr.com/pres/ncjs/app/

35. 33
Thanks!