Html5 Javascript APIs

HTML5 & Javascript by Mike Taylor @miketaylr 1

2 HTML5

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 HTML5

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

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

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

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

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) options: enableHighAccuracy, timeout maximumAge

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

29 Example 3 Geolocation c

31 Putting it all together* *um, kinda.

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

33 Thanks!

http://www.slideshare.net	67
http://speakerrate.com	29
https://romy1.basecamphq.com	1

Html5 Javascript APIs

by Mike Taylor

Accessibility

Categories

Upload Details

Usage Rights

3 Embeds 97

Statistics

Html5 Javascript APIs Presentation Transcript