Vanilla JS for Beginners

An introduction to vanilla JavaScript, including vanilla JS APIs, browser compatibility, debugging, and more.

Transcript

1. @ChrisFerdinandi GoMakeThings.com Vanilla JS for Beginners
2. $ @ChrisFerdinandi
3. JSWTF!?!
13. VanillaJSGuidebook.com
14. This is for…
15. who don’t really know JavaScript jQuery Developers
16. Learning vanilla JavaScript helps you write better jQuery.
17. (but don’t know where to start) JavaScript Frameworks People who want to learn other
18. Rat Race Opt out of the JavaScript framework
19. and more reliable websites Faster
20. and easier JavaScript experience Simpler
21. CHALLENGES?
22. 1 Vanilla JavaScript APIs 2 Cross-Browser Compatibility 4 Putting it All Together 3 Debugging
23. Slides & Downloads GoMakeThings.com/talks
24. Vanilla JavaScript APIs 1
25. ECMAScript 5 (ES5) (thanks jQuery!)
26. DEMO TIME!
27. Cross-Browser Compatibility 2
28. Support is not the same as optimization http://bradfrost.com/blog/mobile/support-vs-optimization/
29. A progressive enhancement technique Cutting the Mustard Photo Credit: https://www.flickr.com/photos/39160147@N03/26996085710/ http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
30. var supports = 'querySelector' in document && 'addEventListener' in window; if ( supports ) { // Codes goes here... } // or... if ( !supports ) return;
31. Browser Compatibility • IE9+ • Firefox 3.5+ • Opera 9+ (and probably further back) • Safari 4+ • Chrome 1+ (I think) • iPhone and iPad iOS1+ • Android phone and tablets 2.1+ • Blackberry OS6+ • Windows 7.5+ (new Mango version) • Mobile Firefox (all the versions we tested) • Opera Mobile (all the versions we tested)
32. Don’t hide content until JavaScript loads.
33. .collapse.active .collapse.active { display: block; } .collapse { display: none; } .collapse Show
34. document.documentElement.className += ' js-accordion'; .collapse .js-accordion .collapse { display: none; } .collapse .js-accordion
35. Debugging 3
36. Your code will break. A lot.
37. Use Strict Mode
38. “Strict mode makes several changes to normal JavaScript semantics. First, strict mode eliminates some JavaScript silent errors by changing them to throw errors.” https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Strict_mode
39. 'use strict';
40. Putting it all together 4
42. A project Invisible Ink
43. What now?
44. { } Vanilla JS
45. Pick a Project
46. Project Ideas • Toggle Tabs • Modals • Save Form Data • Toggle Password Visibility • Make Content the Same Height • Generate a Table of Contents
49. VanillaJSGuidebook.com
50. ?
51. Vanilla JS Crash Course GoMakeThings.com/crash-course
52. Thank You!