Main > JavaScript Tutorials

Latest Tutorials

Smooth Scrolling HTML Bookmarks using JavaScript (natively or jQuery)

See how to use native JavaScript to create smooth scrolling HTML bookmark links inside the page, and for those that need legacy browser support, using jQuery instead. This promises to be one smooth tutorial!

Web Animation API- Unleashing the Power of CSS keyframes in JavaScript

Animate elements in JavaScript using the power of CSS keyframes animationz with the Web Animation API! In this tutorial, I'll introduce you to WAAPI, browser support and polyfill, and how to start using this awesome API today.

Top five features in JavaScript ES6 Worth Mastering

JavaScript ES6 adds a slew of new features to the JavaScript language, some more groundbreaking and widely applicable than others. In this article I list the top 5 JavaScript ES6 features I find most indispensible.

Understanding let and const in JavaScript ES6

Get to know all about "let" and "const" in JavaScript ES6, and how it differs from the age old "var" keyword in defining variables.

Displaying Content in Full Screen using the Fullscreen API in JavaScript

Open up any content on your page in full screen mode with just a few lines of JavaScript using the Full Screen API.

Introduction to JavaScript Async Functions- Promises simplified

See how to use JavaScript async functions with JavaScript Promises to further simplify asynchronous operations in JavaScript, and produce code that's easier to read and debug to boot.

Four Essential JavaScript functions to tame CSS3 Transitions and Animations

See four JavaScript functions that help you unlock the full potential of CSS Transitions and Animations, by pausing them, detecting when they've finished playing, and more.

Understanding JavaScript's requestAnimationFrame() method for smooth animations

requestAnimationFrame() is a JavaScript method for creating smoother, less resource intensive JavaScript animations. See how to take advantage of this method in this comprehensive tutorial.

Determining how much the user has scrolled the page using JavaScript or jQuery

Learn how to detect the amount the user has scrolled the page using JavaScript or jQuery, in either pixels travelled or as a percentage of the whole page.

Reading and copying selected text to clipboard using JavaScript

In this tutorial, we'll see how to read the textual contents of a user selection, dynamically select some text on the page, and last but not least, copy whatever is selected to clipboard, all using just JavaScript. Not a trace of Flash here!

Beginner's Guide to JavaScript Promises

JavaScript Promises are a new addition to ECMAscript 6 that aims to provide a cleaner, more intuitive way to deal with the completion (or failure) of asynchronous tasks. In this tutorial we'll deliver the promise of JavaScript Promises to the uninitiated!

Overview of JavaScript Arrow Functions

One of the exciting new additions to ECMAscript 6 is Arrow Functions, a compact way to define anonymous functions that also simplifies the handling of the " this " object inside it. In this tutorial we'll go over all you need to know about the new function syntax before it supplants anonymous functions everywhere.

Matching multiple CSS media queries using window.matchMedia()

A common question that gets asked is how to use JavaScript's window.matchMedia() method to react to multiple CSS media queries. In this tutorial we explore how.

Converting objects to arrays using Array.prototype.slice.call()

We break down Array.prototype.slice.call() to see how it works to convert array-like objects into true arrays in this quick tutorial.

Introduction to Touch events in JavaScript

In this tutorial lets get touchy feely with JavaScript, but examining its touch related events and how they are used to detect and respond to touch and swipe events.

Preloading images and executing code only after all images have loaded

See how to refine the process of preloading images to detect when all images have actually been preloaded and react accordingly.

Setting CSS3 properties using JavaScript

With the numerous CSS vendor prefixes one has to contend with when it comes to defining CSS3 properties such as -moz-box-shadow or -webkit-border-radius , setting them in JavaScript can be even more confusing. This tutorial looks at how to how to streamline the setting of CSS3 property values in JavaScript, by checking for and targeting only the version of a CSS3 property the browser supports.

Going beyond cookies- Using DOM sessionStorage and localStorage to persist larger amounts of info

HTML5 introduces DOM Storage, a new way of storing data on the client side that overcomes the disk space limitations of JavaScript cookies. This tutorial looks at how to take advantage of DOM Storage in browsers today.

Using document.createElement() to test for browser support for an element

Most of us are familiar with using object detection or the Navigator object to check for backing for a given JavaScript object or method, but these techniques do not work well when the objective is to check whether the browser supports a particular HTML element, such as the <canvas> element. This is where document.createElement() can be very helpful.

The onmousewheel event of JavaScript

The onmousewheel event fires whenever the user moves the mouse wheel either upwards or downwards, and can provide yet another way for users to interact with your JavaScript. In this tutorial, lets see how to take advantage of onmousewheel across browsers.

Handling runtime errors in JavaScript using try/catch/finally

The try/catch/finally statement of JavaScript lets you dip your toes into error prune territory and "reroute" when a runtime error has occurred. Learn all about this often misunderstood statement in this tutorial.

Dynamically loading an external JavaScript or CSS file

External JavaScript or CSS files do not always have to be synchronously loaded as part of the page, but dynamically as well. In this tutorial, we'll see how to load, remove, and replace external JavaScript and CSS files on demand and asynchronously. It the era of Ajax, it's a handy thing to know.

JavaScript and memory leaks

If you're not careful, your JavaScript code may leak memory and sometimes even bring the visitor's browser to its knees. This tutorial looks at different leak patterns in JavaScript and how to fix them.

JavaScript Closures 101- they're not magic

Morris Johns explains JavaScript closures, a powerful yet often bewildering concept, in a gentle, step by step fashion.

Conditional Compilation of JScript/ JavaScript in IE

IE supports a little known feature called conditional compilation that selectively compiles any block of JScript or JavaScript depending on your script logic. Think of it as the absolute form of object detection.

External JavaScript and PHP

External JavaScript can reference not just .js files, but PHP scripts as well. See how this is done, and the wonderful possibilities linking PHP to JavaScript bring.

Changing Select element content on the fly

This tutorial explains how to change a select element's content using JavaScript, from adding new options to modifying and deleting them. It also shows how to create a 2 level interdependent select list.

Determining cookie support in client's browser

If your script relies on JavaScript cookies to store and persist information, it's a good idea to always first make sure the user's browser has cookies enabled. This tutorial shows you how to perform this detection.

Introductory Guide to Regular Expressions

Always wanted to learn about Regular Expressions in JavaScript? With this comprehensive yet gentle tutorial on the subject, you'll be on your way to slashing and validating string input using Regular Expressions in no time!