• Skip to secondary menu
  • Skip to main content
  • Skip to primary sidebar
  • Skip to footer
  • Blog
  • Web Design SIG Archive
  • WordPress SIG Archive
  • pacsnet.org

PACS WordPress SIG

A Special Interest Group of the Philadelphia Area Computer Society

  • .ORG
  • Codex
  • Design Resources
  • PACS Web SIGs
    • Python
    • JavaScript
You are here: Home / Web Design SIG / JavaScript 30 – Building 30 Things

JavaScript 30 – Building 30 Things

February 20, 2018 by Matt Leave a Comment

javascript coffee cup logoWe 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

Filed Under: Web Design SIG Tagged With: CodePen, JavaScript

About Matt

Web developer and designer. Learning all the time. Founder & CEO - Cap Web Solutions

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Get SIG News & Meeting Invites

Notes and invites for upcoming meetings, wrap-ups from previous meetings.

  • This field is for validation purposes and should be left unchanged.

Posts By Category

Tags

accessibility backend Beaver Builder blocks block themes CodePen CoffeeCup Software color ColorZilla Content css CSS Grid design development ecommerce email firefox framework GDPR git Gutenberg HSTS HTTPS JavaScript layouts Lets Encrypt local development material design media library pagebuilders patterns plugins Rachel Andrew resources responsive RSS Security SMTP srcset SSL tools troubleshooting updates WooCommerce WordPress

Footer

Have an idea for a future meeting? Let us know.

  • This field is for validation purposes and should be left unchanged.

Search

PACS Disclaimers

Next Gathering

16 Dec
December 2023 - Virtual
16 Dec 23
  • View Upcoming Meetings
  • Email SIG Leader: Matt Ryan

    Privacy Policy · Terms & Conditions
    Copyright © 2023 PACS WordPress SIG · All Rights Reserved.
    Website by Cap Web Solutions
    Lifestyle Pro Theme on Genesis Framework
    Top of page