JavaScript 101
Tutorials, videos, and even a book to help you create awesomely interactive stuff using JavaScript.
The Basics
Introduction
If you have never used JavaScript before, get your feet wet with this gentle introduction.
Values and Variables
Get the scoop on how to identify and re-use values in JavaScript by using variables.
Functions
ake your code more modular (and awesome!) by learning all there is to know about functions.
Conditional Statements: If, Else, and Switch
The if, else, and switch keywords form the bulk of what helps your code make decisions as part of its running. Learn all about them!
For, While, and Do...While Loops
Be the coolest kid on the block by learning all about the for, while, and do...while loops to repeat some code.
Commenting Your Code...FTW!
Learn how to use comments to make your code easy to understand for both yourself as well as for others.
Timer Functions
Learn how to delay execution of your code to the specified (or right) time by using setTimeout, setInterval, and requestAnimationFrame.
Variable Scope
Learn the nuances of variable scoping in JavaScript by looking at various examples.
Closures in JavaScript
In very clear and simple terms, learn all about closures and how they work to do all the magical things that they do.
Where Should Your Code Live
Get a boatload of information around whether your JavaScript should live inside the HTML document, as a separate file, or as a combination of both.
Console Logging Basics
Go beyond silly alert statements and learn how to use the console to get a better view into what your code is doing
Object Oriented Programming (OOP)
Of Pizza, Types, Primitives, and Objects
Easily build complex UIs by learning how to identify and build components that rely on other components.
-
Arrays
Easily build complex UIs by learning how to identify and build components that rely on other components.
Strings
Easily build complex UIs by learning how to identify and build components that rely on other components.
When Primitives Behave Like Objects
Easily build complex UIs by learning how to identify and build components that rely on other components.
Numbers
Easily build complex UIs by learning how to identify and build components that rely on other components.
-
Getters and Setters
Easily build complex UIs by learning how to identify and build components that rely on other components.
A Deeper Look at Objects
Easily build complex UIs by learning how to identify and build components that rely on other components.
Adding and Removing Properties on an Object
Easily build complex UIs by learning how to identify and build components that rely on other components.
Extending Built-in Objects
Easily build complex UIs by learning how to identify and build components that rely on other components.
Using Classes
Easily build complex UIs by learning how to identify and build components that rely on other components.
Booleans and the Stricter === and !== Operators
Easily build complex UIs by learning how to identify and build components that rely on other components.
null and undefined
Easily build complex UIs by learning how to identify and build components that rely on other components.
All about JSON
Easily build complex UIs by learning how to identify and build components that rely on other components.
Diving Into Sets
Easily build complex UIs by learning how to identify and build components that rely on other components.
The DOM
JavaScript, the Browser, and the DOM
Get a brief introduction to the Document Object Model (DOM) and why it is so important.
Finding Elements In The DOM Using querySelector
Learn how to target elements in the DOM using just a little bit of JavaScript, the querySelector function, and an honest-to-goodness CSS selector.
Modifying DOM Elements
Learn about the two basic ways we have for accessing and modifying DOM elements using JavaScript.
Setting CSS Styles using JavaScript
Learn about the two awesome ways you have available for styling your content using JavaScript
Traversing the DOM
Easily navigate the mean streets of our DOM by learning how to use the helpful built-in properties and methods.
Creating, Removing, and Cloning DOM Elements
Learn how to dynamically modify the structure of your DOM by using createElement, removeElement, remove, cloneNode, and more!
Dealing with Events
Introduction to Events
In this introductory tutorial, learn how to make your applications interactive by using Events.
Event Capturing and Bubbling
Get a deeper look at how events work by understanding bubbling, capturing, stopping propagation, and more!
Mouse Events
Learn all about how to work with the mouse by learning about the various events and the properties they expose.
Running Your Code at the Right Time
Run your code at the right time by making sense of DOMContentLoaded, load, async, defer, and position in the DOM!
Handling Events for Many Elements
Without bloating your code, learn how to rely on event propagation to easily and efficiently listen for events on many elements.
Keyboard Events
Learn all about how to work with the keyboard by both learning some boring stuff as well as seeing some awesome examples!
Custom Events
Don't just use events that others have created. Be courageous and learn how to create your own events!
Going Deeper
CSS Variables + JavaScript = Win!
Learn how CSS custom properties (variables) make setting complex CSS property values via JavaScript a total breeze.
Page Navigation on Click
Learn how to use JavaScript to specify a URL and navigate to a different page when you click on something.
Preloading Images
Learn how to use JavaScript to silently preload images before you need to use them.
Detecting If the User is Idle or Inactive
Make your app behave differently when users are not actively interacting with it.
Custom Data (data-*) Attributes
Learn how to embed data into your page or application by using custom data attributes in HTML5.
Storing Data Using Web (aka Local) Storage
Learn how to use local and session storage to easily store and retrieve data from your user's browser.
Making HTTP Requests in JavaScript
Learn all about the XMLHttpRequest object and how it makes sending and receiving data a breeze!
Displaying PHP Data in HTML
Easily build complex UIs by learning how to identify and build components that rely on other components.
Generating Random Numbers
Learn how to generate a range of random numbers that fall within an upper and lower range you specify.
Generating Random Colors
Give your designs some flair by using the code here to generate random colors...like a pro!
Variable and Function Hoisting
Learn about a JavaScript optimization (and its strange consequences!) that promotes your variable and function declarations to the top of their scope.
Doing More with Arrays
Arrays
Learn how to perform common tasks such as declaring, adding, removing, and merging arrays in JavaScript.
Mapping, Filtering, and Reducing Things in an Array
Learn how to easily manipulate data in an array by using the map, filter, and reduce methods.
Useful Array Tricks
There is more to the array than meets the eye. Don't believe me? Check out these simple tricks to find out!
Shuffling an Array
Use the Fisher-Yates / Knuth approach to quickly shuffle the contents of an array in JavaScript.
Picking a Random Item from an Array
Using just a single line of code, learn how to randomly pick an item from an array.
Hashtables vs. Arrays
Learn about the similarities and differences between hashtables and arrays.
Swapping Items in an Array
Did you know that there is no built-in way to swap two items in an array? In this article, you'll learn how to fix that!
Filtering Items In A List
Learn how to effectively filter items by combining checkboxes, list items, custom data attributes, and more!
Removing Duplicate Arrays from an Array of Arrays
Removing items from an array, especially if those items are arrays themselves, requires some fun tricks to understand.
Device Stuff
Getting the Mouse Click Position
Learn how to calculate the exact coordinates / position of a mouse click using some JavaScript.
Getting the Mouse Movement Direction
Easily find out what direction your mouse cursor is moving in by comparing the current position with an earlier position!
Check If You Are On a Touch Enabled Device
Use this simple piece of JavaScript to easily check if you are on a touch enabled device or not.
Accessing Your Webcam in HTML
Learn how the video element combined with the getUserMedia function can help you display your webcam's video stream in the browser.
The Battery Status API
See how to use the Battery Status API in JavaScript to create a totally sweet visual battery level/status indicator.
Shenanigans
-
The Konami Code Challenge
Test your knowledge of timers, arrays, and keyboard inputs by implementing the infamous Konami Code in JavaScript.
The Devowelizer
Test your ability to work with strings in this fun challenge where your goal is to remove all vowels from some text.
Dynamically Create and Populate List Items
Easily build complex UIs by learning how to identify and build components that rely on other components.
Going from a String to a Number
Learn all about how to use the parseInt and parseFloat functions along with some JS tricks to easily go from a string to a number.
Checking If A File Exists
Learn how to construct a HEAD request and easily figure out whether a file exists on the server or not.
Rounding Numbers
Round numbers to various degrees of precision by using the Math.round, Math.floor, and Math.ceil methods.
Detect Whether a Font is Installed
Learn how to detect whether a font is installed by using a little bit of JavaScript that doesn't interfere with CSS or your DOM.
