HTML5 & Javascript

      by Mike Taylor
       @miketaylr




1
2




HTML5
3




 HTML5                           “HTML5”
• Canvas   2D Context            • Web Workers

• Microdata   (& vocabulari...
4




HTML5
5
5




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




OUTLINE
• Constraint   validation API

• Canvas   2dContext API

• localStorage API

• Geolocation API

• Life-chang...
8




CONSTRAINT VALIDATION
9




CONSTRAINT VALIDATION API

el.willValidate

el.setCustomValidity(msg)

el.checkValidity()

el.validationMessage
10




CONSTRAINT VALIDATION API
el.validity.valueMissing      required

el.validity.typeMismatch      type

el.validity.p...
11
12




      Demos!
http://miketaylr.com/pres/ncjs/

    (http://bit.ly/ncjs-mt)
13




Example 1.1 Type validation
14




Example 1.2 Pattern validation
15




<CANVAS>
16
17
18
19
20




CANVAS 2D CONTEXT API
Transformations
Compositing
Colors and styles
Line styles
Shadows
Simple shapes (rectangles)
...
20




CANVAS 2D CONTEXT API
Transformations
Compositing
Colors and styles
Line styles
Shadows
Simple shapes (rectangles)
...
21




  Example 2.1 Canvas Paths
var
22




      Example 2.2 Canvas Rectangle

var
23




  Example 2.4 Canvas image

var




                      c
24




  Example 2.5 Canvas text


var




                      c
25




  Example 2.6 Canvas shadow

var




                     c
26




GEOLOCATION
27




        GEOLOCATION API
getCurrentPosition(success, error, options)

watchPosition(success, error, options)

option...
28




     GEOLOCATION API
position.coords.latitute
position.coords.longitude
position.coords.altitude
position.coords.ac...
29




Example 3 Geolocation




                    c
30
31




Putting it all together*




                *um, kinda.
32




            Demo!

http://miketaylr.com/pres/ncjs/app/
33




Thanks!
Upcoming SlideShare
Loading in …5
×

Html5 Javascript APIs

3,539 views

Published on

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.

Published in: Technology, Design

Html5 Javascript APIs

  1. 1. HTML5 & Javascript by Mike Taylor @miketaylr 1
  2. 2. 2 HTML5
  3. 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. 4 HTML5
  5. 5. 5
  6. 6. 5 Webapps‽ http://bit.ly/webapps-complete
  7. 7. 6
  8. 8. 7 OUTLINE • Constraint validation API • Canvas 2dContext API • localStorage API • Geolocation API • Life-changing demo™
  9. 9. 8 CONSTRAINT VALIDATION
  10. 10. 9 CONSTRAINT VALIDATION API el.willValidate el.setCustomValidity(msg) el.checkValidity() el.validationMessage
  11. 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. 12. 11
  13. 13. 12 Demos! http://miketaylr.com/pres/ncjs/ (http://bit.ly/ncjs-mt)
  14. 14. 13 Example 1.1 Type validation
  15. 15. 14 Example 1.2 Pattern validation
  16. 16. 15 <CANVAS>
  17. 17. 16
  18. 18. 17
  19. 19. 18
  20. 20. 19
  21. 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. 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. 23. 21 Example 2.1 Canvas Paths var
  24. 24. 22 Example 2.2 Canvas Rectangle var
  25. 25. 23 Example 2.4 Canvas image var c
  26. 26. 24 Example 2.5 Canvas text var c
  27. 27. 25 Example 2.6 Canvas shadow var c
  28. 28. 26 GEOLOCATION
  29. 29. 27 GEOLOCATION API getCurrentPosition(success, error, options) watchPosition(success, error, options) options: enableHighAccuracy, timeout maximumAge
  30. 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. 31. 29 Example 3 Geolocation c
  32. 32. 30
  33. 33. 31 Putting it all together* *um, kinda.
  34. 34. 32 Demo! http://miketaylr.com/pres/ncjs/app/
  35. 35. 33 Thanks!

×