JavaScript 30 – Building 30 Things

We jumped right into JavaScript in February. Instead of taking the more traditional language approach – learning syntax, language structure, formulating expressions, operators and arrays – we just started building stuff that can be used in the real world. We are taking our lead following along with Wes Bos and his online Javascript 30 course.

The brief presentation that was offered during the Web Design SIG session on Javascript can be found online here. We were able to get through the first video, stopping and starting it a number of times to review the techniques and ideas that were being presented.

The 1st ‘thing’ we built – a JavaScript Drum Kit – offered the following language items:

• css transform, transition, audio tags, data- selectors
• function definition – A JavaScript function is defined with the function keyword, followed by a name, followed by parentheses (). Function names can contain letters, digits, underscores, and dollar signs (same rules as variables).  The parentheses may include parameter names separated by commas: (parameter1, parameter2, …). The code to be executed by the function is placed inside curly brackets: {}

•  statements
  • .propertyName
  • const
  • if
  • key.classList.add
  • audio.currentTime
  • audio.Play
  • Array.from
  • document.querySelector
  • document.querySelectorAll
  • forEach loops
  • key.addEventListener
  • window.addEventListner
  • return
• <script> </script> tags

Our first real JavaScript coding session resulted in this nugget available on our CodePen site.

See the Pen wdsig-js30-01 by Philadelphia Area Computer Society (@PACS) on CodePen.

Next month we will talk a bit about the language constructs we covered and look at the next project.

A few resources were briefly highlighted. All of these resoruces are included in the presentation linked above.

Resources:
Wes Bos’ Online JavaScript Course: https://javascript30.com/
JavaScript based ascii key code generator:  http://keycode.info/

The JavaScript for WordPress Conference – https://javascriptforwp.com/conference/ Not just for WordPress. FREE.
WP Tavern’s blog post on the conference.

JavaScript, The Definitive Guide – Sixth Edition

Example code from JavaScript, The Definitive Guide, 6th Edition