A JavaScript Deep Dive

Three Hats: 1) Just A Language 2) DOM Master 3) As a Server

There are essentially 3 main uses for Javascript:

Just a plain old scripting language, like a sub-par Python
As the one and only language that will work with every device that has a browser to make pages and apps interactive
As one of many languages you can use to write a web-server that interacts with databases and HTTP requests and websockets

One of the biggest paradigm shifts you'll need to make when using Javascript in any of these contexts is: Asynchonous / Event-Driven coding.

Unlike any of the other languages you've worked with in school, the key to JS (or any web thinking) is to think like a video game. In a video game there is always an infinite loop that listens for user actions and triggers different function executions based on those user actions. The web, servers, and Javascript all work this way.

Javascript the language

Alright so let's do the fundamentals first:

FOR THOSE WITH PREVIOUS EXPERIENCE: If you're already good at JS then go ahead and solve the first 3 Project Euler problems while we start in on this stuff. Send me your winning scripts for positive feedback and acknowledgement.

Alright, for everyone else let's do the stuff every coder needs (and some stuff we can't):

Let's list the basics that I always want in a new language

variables (let, var, const, globals)
loops (for, while, map)
conditional logic (if, filter, switch)
functions / lambdas
JSON == Associative Array and more
objects / classes (this)
Arrays and array maniuplation (indexOf, reduce, filter, map, slice, splice, pop, push, shift, unshift)
string manipulation and regular expressions
text templating (backticks are awesome)

Let's Play: Go to ANY WEBSITE using your Chrome or Firefox browser. Right click and "inspect" then find the tab for "console". That is an interactive Javascript terminal always at your fingertips. Do the lines let x = "YOURNAMEHERE rules"; then alert(x); now do console.log(x);.

Here is a sample of using Javascript for a common coding problem, generating the prime numbers beneath a certain value:

Here is an array of JSON objects each with a "name" and "age" attribute.

Arrays of Objects The above gist has an array of objects. Let's write a function that consumes an array of objects and computes the average "age" of each object (presume they have an integer "age" attribute). Let's do this in 2-5 distinct ways as a way of playing with these ideas. How about maximum age? Minimum age? Total age? How about with the fewest characters typed.

That's WAY TOO ABSTRACT for you to yet care. So let's start with building a video game:

See the Pen Build Your Own "Choose Your Own" Adventure Game by Andy Novocin (@AndyNovo) on CodePen.

A Choose Your Own Adventure Game: Click "edit in Codepen" then in the bottom right click "fork" (you'll need to make a codepen account). Add a major to that adventure game by looking into the switch statement, adding a case, copy pasting an existing room, and adapting it to the new major. NOTE that the "rendering" is using "markdown" a pretty way of rendering text. Share a link to your game in our chat so we can see what you made. Let's look at HOW that code works.

OK, we now have a context for some of this stuff. There are functions that we use as simple utilities. There are switch statements for rendering a particular page, there are conditionals for checking an inventory, we checked an array for inclusion

Javascript for Object-Oriented Thinking

Here is an implementation of the classic "pub/sub" pattern:

At-Home Mastery Task: To give you context for these things you should implement some of the classic "design patterns" in Javascript. Here are some examples of classic design patterns that make a good target: observers (pub/sub), state, singleton, mediator

JavaScript's Unique Traits

Here are some things fairly distinct to Javascript:

the DOM is first-class (Document Object Model, essentially manipulating web pages)
user events (mouseover, click, dblclick, keyup, etc)
AJAX requests (distinct to Javascript and we'll do this together later)
Local Storage / Cookies / Sessions (very web concepts)
prototypes (Javascript does "inheritance" in weird ways)
NO file IO (Javascript on the browser does not have local file read/write but does on the server using libraries)

The only one of those that falls under the umbrella of standard coding stuff is the prototype way of thinking.

Javascript and the DOM

So the teams behind the major browsers (Chrome, Safari, Firefox, and Edge) actually are coding to an agreed upon "contract"/API/specification the Document Object Model. It is a living specification where the decisions are made by a distributed committee of people who are passionate about making the websites really work. You can jump in and be a part of that community starting today, no really. Check out the living specification yourself and connect with them if you want to suggest future directions for functionality websites need.

So give me the TLDR: Basically there are a few key "Classes" made available to all browsers: document and window as the most important. Your Javascript code can expect the methods and attributes specified by the above link and just do stuff that impacts the website you're on with a line like: document.createElement("h2") to start doing things that impact the page you're on.

Here is a next "game" you can make into your own:

See the Pen Little Alchemy Engine Example by mariavanv (@mariavanv) on CodePen.

Understand the logic of how this game worked, rework the combinations to make something interesting to you. As a stretch goal, add some sort of novel game mechanic.

Here's a demo my daughter made when she was 5 years old:

See the Pen Little Alchemy Engine by Andy Novocin (@AndyNovo) on CodePen.

Grabbing Dynamic Data

Alright for our next trick: data-driven real-time web apps.

See the Pen Pure Serverless Data by Andy Novocin (@AndyNovo) on CodePen.

So this example uses "Firebase" as a "back-end" so we can share data between users. Note that the way this is setup took no coding of an actual back-end.

A Gift For You: Fork that codepen, now you have your own "database" that you can use to make your own internet games. Add a second button, change the "id" to "b2" and add another click listener. Have the second button subtract from the click counter.

Here's how to use this database:

Think of the entire database as a single JSON object. You can select a particular key using the "child" function. That listener can be used to react to changes to the value in that key using theKeyHandler.on("value", callback)

You can replace "on" with theKeyHandler.once("value", callback) to have this only fetch the data once.

If you want to replace the data at a given key you can use theKeyHandler.set(newData)

If you want to delete the data at a given key you can use theKeyHandler.remove()

Let's play this little game together:

See the Pen Duck Song Libs by Andy Novocin (@AndyNovo) on CodePen.

One interesting part of this is the real-time and distributed data aspect.

Another is the "forking" trick and another is the use of Regular Expressions.

See the Pen Arrays of Data by Andy Novocin (@AndyNovo) on CodePen.