Main > JavaScript Tutorials

dot.gif (120 bytes) 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
We break down 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!

dot.gif (120 bytes) Tutorial Index

Introductory Tutorials

Forms and form validation

External JavaScript

JavaScript cookies

Math & Random scripts

Variables and functions

Regular Expressions

JavaScript with content

Date & Time

Interacting with images

Windows and frames

Strings (text)

Arrays and loops

Objects and entities

Browser and features detection

Error handling

Keyboard and printer interaction

Tabular Data Control (IE only)

Other tutorials

Comprehensive list of JavaScript questions and answers.

Premium Courses

Understand JavaScript the weird parts

Learn and understand Node.js

Learn and understand AngularJS

JavaScript Tools:
Site Info

CopyRight (c) 2018 JavaScript Kit. NO PART may be reproduced without author's permission. Contact Info