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
Learning about the variety of built-in values in JavaScript that you can use is an important part of being awesome. You want to be awesome, don't you?
-
Arrays
rn how to perform common tasks such as declaring, adding, removing, and merging arrays in JavaScript.
Strings
Learn all about how to work with text in JavaScript by studying and befriending the String object.
When Primitives Behave Like Objects
Learn why the relationship between primitives and objects is complicated...especially when dealing with the built-in types.
Numbers
Learn how to work with numbers in JavaScript by looking at simple math operators, incrementers / decrementers, hex values, octal values, the Math object, and more!
-
Getters and Setters
Learn all about accessor properties and the role getters and setters play within their world.
A Deeper Look at Objects
Learn how to work with the Object object, use Object.create, understand inheritance, and befriend the prototype.
Adding and Removing Properties on an Object
Learn about some of the best ways you have for adding and removing properties from your JavaScript objects.
Extending Built-in Objects
Take your existing built-in objects and kick them up a few notches by learning how to extend them.
Using Classes
Think properly creating objects in JavaScript is difficult? Use classes to simplify that for you!
Booleans and the Stricter === and !== Operators
Take your knowledge of booleans up a few levels by looking at the Boolean function and the stricter equality and inequality operators.
null and undefined
Learn about the mysterious null and undefined built-in types and what role they play in our code.
All about JSON
Almost all communication on the web happens through JSON, so learn all about how to read it here!
Diving Into Sets
Learn all about sets and how to use their special powers to only store unique values.
The DOM
JavaScript, the Browser, and the DOM
Easily build complex UIs by learning how to identify and build components that rely on other components.
Finding Elements In The DOM Using querySelector
Easily build complex UIs by learning how to identify and build components that rely on other components.
Modifying DOM Elements
Easily build complex UIs by learning how to identify and build components that rely on other components.
Setting CSS Styles using JavaScript
Easily build complex UIs by learning how to identify and build components that rely on other components.
Traversing the DOM
Easily build complex UIs by learning how to identify and build components that rely on other components.
Creating, Removing, and Cloning DOM Elements
Easily build complex UIs by learning how to identify and build components that rely on other components.
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
Easily build complex UIs by learning how to identify and build components that rely on other components.
The Devowelizer
Easily build complex UIs by learning how to identify and build components that rely on other components.
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
Easily build complex UIs by learning how to identify and build components that rely on other components.
Checking If A File Exists
Easily build complex UIs by learning how to identify and build components that rely on other components.
Rounding Numbers
Easily build complex UIs by learning how to identify and build components that rely on other components.
Detect Whether a Font is Installed
Easily build complex UIs by learning how to identify and build components that rely on other components.
Using Emojis in HTML, CSS, and JS
Easily build complex UIs by learning how to identify and build components that rely on other components.
