The idea was to make something that Web designers, people who may or may not have much programming training, could use to add a little bit of animation or a little bit of smarts to their Web forms and their Web pages.
Libraries/frameworks vs. plain/vanilla JS
Where does JS live?
- Inline as attributes
<script>elements within HTML documents
- As separate/external
*.jsfiles (the right way)
1. Inline event handlers
JS was first added directly like attributes in HTML tags, just like CSS—but attached/listening for specific events:
<button onclick="alert('The button was clicked!');">Click here!</button>
Note the single quotes when nested/inside doubles!
This works for very, very simple things, but—for many of the same reasons as inline CSS—is brittle and doesn’t scale with complexity or across multiple pages. Try writing a whole, elaborate function in there! No good.
You might see these in old examples/code, but don’t use these now! If you see them, it’s probably an indication the code is outdated.
2. Wrapped in
Since this script isn’t directly on an element anymore (as above), we then have to identify the target element with querySelector, and then attach the onclick event to it:
onclick is a shorthand for using addEventListener. We also store (declare) the element here as a variable, to keep our code readable. These are a bit like their CSS counterparts. Ergonomics!
<link> element, we still use a (now empty)
<script> tag, with the addition of a
<script defer src="script.js"></script>
I’ve never liked this empty-tag syntax, what can you do.
<script> (and in its place/order) as before, and the
defer attribute allows it to “see” the HTML (not yet loaded) below it. We can then move the script up into our
<head>, along with the other external files:
Adding/removing a class
Okay, time for a more practical example: probably the most common thing you will use JS for—especially as we’re starting out—is simply to add or remove (toggle) a class from something when the user interacts with your page (such as clicking on a menu).
transition will smooth out the… transition.
We’ll again use
querySelector to listen for clicks, but then modify the classList of a different element:
The class can be toggled on any element in your HTML (or often, even just on
querySelector takes any CSS selector, even other classes. Also you an specifically use
classList.remove, if you don’t want the on-and-off behavior from
You can do many, many things with this basic “add a class” JS!
Watching for scrolling
Again we’ll need two states in our CSS—defined with/without a class. But now we’ll use the user’s scrolling, instead of a click, to toggle the switch.
You will often want to use this on multiple elements—and remember, when in code, don’t repeat yourself! So we can use querySelectorAll to select multiple elements, and then a forEach loop to run the same class for each of them:
Some miscellaneous tips
alert("Your message")for telemetry/debugging can quickly be pretty annoying—instead, you can use
On the Mac, hit
J(command-option-J) to go right there!
In other languages, these functions 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)… so much as they really know SO.
Ignore any examples that have lots of dollar signs, like
$("something").else—it means this is jQuery, and so is pretty outdated!
Relatedly, 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.