<aside> 🧰 One thing worth saying about Javascript, to start: we are all here as designers, not developers. So try not to feel overwhelmed with this. Javascript is a tool for your design.
</aside>
Finally, the muscles of the web—going back to our very first analogy. Where do we even start with JS? (Everyone calls it JS.) It is so massive and often (trust me, I know) seems unapproachable. So we’ll just go through a bit of background, and then look at some very practical examples you might want in your work.
There are literally millions of sites out there about JavaScript, but you can’t go wrong with MDN.
A great resource for many things, but especially (and famously) for JS.
JavaScript dates to the mid-90s, and has been through a myriad of evolutions and paths since then. (It is has nothing really to do with Java, confusingly.) At its base, like HTML and CSS, it is ultimately just text files interpreted by our computers—in our usage, directly by the browser.
You’ll often hear people talk about libraries or frameworks in the context of JavaScript. These are collections of Javascript code with their own paradigms and syntax, that expand upon what the language can do (or do quickly or easily) on its own, out of the box.
Things like jQuery (old-school, now), React, D3, Node, Vue, Angular (to name a few) are all written in and controlled by JavaScript. When you write plain JS without libraries, it is usually called vanilla JavaScript.
So while JavaScript does many things, we’ll start by using it to make our web pages more interactive.
Remember that JS’s tendrils are now everywhere—on servers, rendering whole sites, talking to hardware, etc. It’s web technologies, all the way down.
As I do, I’ve made a little demo project for us to go through some examples:
https://github.com/typography-and-interaction-too/some-javascript
Another little agenda:
console.log (or alert)for loopif / elseUse telemetry—console.log() and alert()—to know where your code is, and where it is breaking. When in doubt, make sure it is plugged in.
In other languages, these are often, ironically, called print.
Search on Stack Overflow! Someone has likely had your problem, before. Many people don’t really know JS (myself included)… they really know SO.
Ignore any examples that have lots of dollar signs, like $("something").else—it means this is jQuery, and so is outdated!
To quickly get recent/modern, vanilla JavaScript results, instead include ES6 in your search—this refers to a more recent, easier-to-use syntax.
If you see arrow functions =>, it is a pretty good sign the answer recent.
You’ll see a lot of semicolons ; but secretly you (almost never) actually need them.