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!

Tutorial Index

.
Introductory Tutorials JavaScript Primer Creating alert, confirm, and prompt boxes Understanding "event handlers" in JavaScript One event handler, many actions Adding more than one JavaScript to a page The Type and Language attributes of JavaScript How I learned JavaScript Forms and form validation Accessing and validating forms Manipulating radio and check boxes Enabling/ disabling form elements Accessing the select element of a form Creating combo link menus Changing select element content on the fly External JavaScript Creating external JavaScript libraries External Javascript and PHP Dynamically loading an external JavaScript or CSS file Restricting access of JavaScript libraries to designated domains JavaScript cookies Session-only cookies Determining cookie support in client's browser Math & Random scripts The Math object Number rounding in JavaScript Formatting numbers for decimals and significant digits Generating a random number in JavaScript Generating weighed random numbers Using JavaScript to create random scripts Randomizing the display order of content using JS Variables and functions Determining the existence of a variable Robust functions via the arguments array Using named arguments in JavaScript functions Variable and expression shortcuts The switch statement of JavaScript Adding properties to a literal in JavaScript Avoiding variable and function conflicts in JavaScript Flag Variables, Validation, & Function Control Tackling JavaScript strict warnings Regular Expressions Introductory Guide to Regular Expressions Programmer's Guide to Regular Expressions JavaScript with content Using JavaScript to statically display elements JavaScript and Dynamic Content Creating an attractive Hover Menu using CSS & JavaScript		Date & Time Date, time, and creating a live clock in JavaScript Calculating the difference between two dates Interacting with images Accessing images & creating image rollovers Preloading images and executing code only after all images have loaded Creating depressible images Building a JavaScript image slideshow Windows and frames Windows and JavaScript Determining whether a browser window is open Moving, scrolling, and resizing browser window Loading two frames with one link... Opening windows in theatre and channel mode (IE) Creating window remote controls Detecting user's screen size and resolution Strings (text) Strings in JavaScript Part 1 Strings in JavaScript Part II Arrays and loops Understanding basic arrays and loops Understanding dense arrays Defining arrays & multi-dimensional arrays using literal notation Creating a custom two-dimensional array Converting objects to arrays using Array.prototype.slice.call() Sorting an array using the sort() method Objects and entities JavaScript and OOP Creating custom objects in JavaScript The prototype object of JavaScript Sending objects from one page to another Browser and features detection Using the navigator object to detect browser Using object detection to detect browser type Using document.createElement() to test for browser support for an element Error handling The onerror event of the window object Handling runtime errors in JavaScript using try/catch/finally Keyboard and printer interaction Scripting the keyboard in JavaScript onbeforeprint and onafterprint events of IE Using window.print() to print a document Tabular Data Control (IE only) Introduction to Tabular Data Control Sorting a Tabular Data Control Filtering a Tabular Data Control Other tutorials Performance tips for JavaScript Creating custom collections in the DOM (via ID attribute) Creating customizable alert boxes using VBScript