Vanilla JS for Beginners

Vanilla JS for Beginners

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

Df5f3b6aeb1caacc0acabf2cb45264da?s=128

Chris Ferdinandi

April 11, 2017
Tweet

Transcript

  1. @ChrisFerdinandi GoMakeThings.com Vanilla JS for Beginners

  2. $ @ChrisFerdinandi

  3. JSWTF!?!

  4. None
  5. None
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  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

  41. None
  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
  47. None
  48. None
  49. VanillaJSGuidebook.com

  50. ?

  51. Vanilla JS Crash Course GoMakeThings.com/crash-course

  52. Thank You!