Development
JavaScript Masterclass
The language itself: values, functions, arrays, objects, and async work.
JavaScript Masterclass stays with the language. You will work through values, functions, collections, and asynchronous work until you can read a script and predict it. HTML and CSS familiarity is assumed. A framework is not.
Course syllabus
01. Values, comparison, and scope
- Types, comparison, and scope
What a value is, how two values compare, and where a name can be seen.
- A number, a string, and a boolean
Three kinds of value you will store, pass, and test.
- undefined and null
A missing binding and an empty value are different, and your checks should say which.
- const when the name should keep its value
Use let only when you truly reassign the binding.
- Strict equality
=== compares value and type, which is the comparison you want for a branch.
- A block limits where let can be read
A name declared inside braces is not visible outside them.
- A function keeps its own variables
Parameters and locals belong to that call, not to the whole file.
- A template string builds one sentence
Drop values into a string you will show, without concatenating pieces by hand.
02. Functions that close over a value
- Functions and closures
A function can take inputs, return a value, and remember variables from where it was made.
- A function you can call by name
Declare it, then call it with the arguments that job needs.
- Parameters and the value you return
Inputs come in through the parentheses, and return sends one value back.
- An arrow function for a short calculation
A compact function for a job that is only an expression.
- Pass a function into another function
The outer function calls the one you handed it, instead of hard-coding the step.
- A closure that keeps a count
The inner function still sees the counter after the outer function has returned.
- A default when the caller omits an argument
The parameter takes a fallback so the body does not read undefined.
- A function that only uses its inputs
Same arguments, same result, with no hidden change to other data.
03. Arrays and objects in memory
- Arrays and objects
An ordered list, and a record of named fields, and how you read each one.
- An array holds values in order
Index 0 is the first item, and length tells you how many there are.
- map, filter, and find
Build a new list, keep some items, or stop at the first match.
- An object holds named fields
One record, with keys you choose, for a single thing such as a product.
- Read a property and assign one
Dot or brackets to read, and an assignment to change that field.
- An array of objects
Each item is a record, which is the usual shape of a list on a page.
- Pull fields out with destructuring
Name the properties you need, in the parameter or on the line that receives the object.
- Copy a record before you change it
A new object keeps the shared one from changing under another function.
04. Branches, loops, and failures
- if and else
One path when the condition is true, and another when it is not.
- A comparison produces true or false
The condition is a boolean, not a value you hope is truthy.
- else if for a third case
A second test, after the first condition has already failed.
- for...of walks an array
Each item in turn, without you managing the index.
- Stop the loop once you have the item
break when further passes would not change the answer.
- throw when the value cannot be used
A bad input fails here, with a message, instead of continuing as nonsense.
- try and catch around code that can fail
Catch at the boundary that can explain the failure, not around every line.
- A function that checks one field
Empty, wrong type, or out of range, and a clear result either way.
05. Find and change elements
- The document is a tree of nodes
Elements contain elements, and the script walks that tree.
- Load the script after the markup
The nodes exist before the script asks for them.
- querySelector finds one element
The same kind of selector you would write in CSS, returned as one node.
- textContent sets the words
You set text, not HTML that came from someone else.
- createElement for a new list item
Build the node in script, then put the item's text on it.
- Append the node to its parent
The new item appears because you attached it, not because you rewrote the page.
- classList adds or removes a class
The stylesheet still owns the look; the script only toggles the class.
- null means the selector matched nothing
Test for null before you read a property or add a listener.
06. Clicks, submits, and listeners
- DOM events without a framework
A click or a submit runs your function, using the browser's own listener.
- addEventListener on the button
Name the event and pass the function that should run.
- The event object tells you what happened
Target, type, and the methods you may need, on the argument the browser passes.
- Click the button, not the whole page
The listener sits on the control that means the action.
- Read the input when the form is submitted
Take the field's value at that moment, not when the script first loaded.
- preventDefault stops the reload
If your function handles the submit, tell the browser not to navigate.
- One listener on the parent list
Clicks on items bubble, so you do not attach a listener to every new row.
- Remove a listener you no longer need
The same function reference you added is the one you remove.
07. Promises, async, and fetch
- Promises and fetch
Ask for data, wait for the result, and handle the failure without freezing the page.
- A promise stands for a later result
The value is not ready on the next line, so you wait or chain.
- then runs when it settles, catch when it fails
Success and failure are two paths, and you write both.
- async and await read like steps
await pauses that function until the promise settles, and the next line sees the value.
- fetch asks a URL for data
The call returns a promise of the response, not the parsed body.
- response.ok is false when the server refused
A 404 still resolves the promise, so check the status before you parse.
- response.json turns the body into a value
Await it, and you get the object or array the server sent.
- Show the failure on the page
Write the error where the person can see it, not only in the console.
08. A list page with no library
- A list the page can add to
One form, one array, and a render that draws the items.
- The markup the script looks for
A field, a button, and an empty list, with ids the script can find.
- Keep the items in an array
The array is the source; the list on the page is only the current drawing.
- Draw the list from that array
Clear the old nodes and append one element per item.
- The form adds one item
Read the field, push the string, and draw again.
- An empty string is not an item
Refuse it before you push, and leave the list unchanged.
- Save the array in localStorage
Write it after a change, and read it back when the page loads.
- No library for this page
The list works with the language and the DOM you already used.
Lecture videos stay with the course. Playback for enrolled students will open once payments are available. Video links are not published on this page.