JavaScript

Browser-specific Error Catching in JavaScript

In this installment on error handling in JavaScript, we'll be taking a look at how to code your exception handling in JavaScript in a way that takes browser discrepancies into account.

Learn How To Use JavaScript Dates and Leap Years

Think that you can calculate date intervals without worrying about leap years? Think again. It's true that, as long as you follow the guidelines set out in my previous article, the leap years will be accounted for and handled correctly. This article will introduce a few useful functions that you can use to work with leap years if and when the need arises.

Date Creation in JavaScript

There aren't very many native date calculation functions in JavaScript other than a lot of setters and getters. From date parsing to formatting to calculations, you're pretty much on your own. In today's article we're going to examine some date basics and how to create them in JavaScript.

Using HTML5 and the Blueimp jQuery-File-Upload Plugin To Upload Large Files

One of the most appealing features of the HTML5 File API is that you can pass the file data to the XmlHttpRequest object for uploading to a server, but large files are still a problem. This article explains how to use the Blueimp jQuery-File-Upload Plugin in your web pages so large files can be easily uploaded.

JavaScript Error Handling: Why You Need it

While error handling is not new to JavaScript, it seems that a lot of people aren't quite sure how to handle errors in the most productive way. The purpose of this article is to outline some of the major reasons why you need to consider error handling sooner rather than later in a Web application's development cycle.

Move Data and DOM Elements using Drag & Drop

The dataTransfer object is a read-only Event property that holds data about the Drag & Drop operation and allows you to send data along with a dragged element. In this tutorial we're going to learn how the dataTransfer object can be used to shuttle data and move document elements from one part of the page to another.

How To Use HTML5, JavaScript and PHP To Create An Image Uploader

One of the greatest issues with web development at the moment is how images can be uploaded to a website. Can we show the progress as we upload the image to let the user know how far along we are? Of course we can--and we're going to use HTML5, JavaScript, and a bit of PHP to do it! 

JavaScript Object Chaining using Prototypal Inheritance

JavaScript implements its own hierarchy model using prototypes. In today's article, we're going to learn how to use the prototype and constructor properties to trace an object's ancestry up to the base Object. Highly useful!

What Does the Google Dart Programming Language Mean for Web Developers?

In October, 2011, Google introduced its Dart programming language to developers. So what does this new web programming language mean for web developers? In this article we will look at Dart, discuss its merits and let you know what you can expect from this new language.

Determine an Image's Type using the JavaScript FileReader

Thanks to the JavaScript FileReader API's slice() method, it is possible to break large files down into chunks on the client-side, before uploading data to the server and taking up precious network bandwidth. In this article we are going to learn how to use the slice() function and determine an image type by using a process called the "magic number" technique.

JavaScript Prototypical Inheritance Explained

In this tutorial, we're going to learn more about prototypical inheritance and its ramifications in writing OO code. The eventual goal is to note how it differs from classical inheritance to determine whether or not the two can't meet somewhere in the middle.

Class Member Encapsulation in JavaScript: Advanced Data Hiding Techniques

In a recent article, we saw a couple of ways to create private class member variable. Today we'll be building on our Person class from the last article by adding a prototype interface, use a closure to create a variable scope, as well as add constructor arguments and default values.

Working with Binary Files using the JavaScript FileReader

In a recent article we used the JavaScript FileReader to retrieve file properties and the contents of text files via the <input type="file" /> HTML form element. Today, well be concentrating on the FileReader's capabilities in the reading of binary data.

Introduction To jQuery Mobile

jQuery Mobile is a cross platform mobile framework designed to simplify and enhance the development of mobile web applications by integrating HTML5, CSS3, jQuery and jQuery UI into one framework. We'll teach how to get started with jQuery Mobile in this tutorial.

Learn How To Use the JSONP Data Format With jQuery

In this article I will explain about the hurdles in performing cross-domain service calls from the client browser and the work required to do it using jQuery JSONP calls. I will also provide a step-by-step example of implementing JSONP calls to a .NET 4.0 WCF service.

Using jQuery and CSS To Create a Facebook Multi-friend Selector

When the Facebook team announced that they are coming out with the Javascript SDK, it brought a smile on all our faces. In this tutorial we will show you how to use a jQuery plugin and CSS3 to create your own multi-friend selector.

Read Text Files Using the JavaScript FileReader

Things are definitely looking up for the W3C's File API, a new JavaScript API that provides limited access to the local file system in Web applications, In this article we'll learn how to use the FileReader to retrieve file properties and the contents of text files.

Making Your Website Fun with Games

Everywhere you look you find games, games and more games. They are on your cell phone, connected to your TV via a gaming console and everywhere you look on the web. People love their games, even the corny ones. So, why not attract new visitors or keep visitors coming back with some games on your website? We'll show you how to do just that in this article!

Modernizr: the HTML5 and CSS3 Feature-detection Library

With the release of version 2.0, the Modernizr JavaScript library continues to gain traction as the solution of choice for advanced browser feature detection. In this article we will show you how to use Modernizr on your web pages.

Class Member Encapsulation in JavaScript: Data Hiding

Encapsulation is the ability of an object to be a container (or capsule) for its member properties, including variables and methods. In the first part of this article we're going to discuss JavaScript Object Properties, Object Variables and Object Notation.

A Modernizr Primer: Getting Started

Modernizr is a JavaScript library that helps you add HTML5 capabilities to your web sites. HTML5 is a combination of HTML, JavaScript, and CSS3. In the first article in this primer series, we will show you how to get started using Modernizr.

HTML5 and CSS3 Frameworks for Mobile Website and Application Development

There has been a lot of buzz about HTML5 and the potential it has when combined with CSS3 and JavaScript. The use of frameworks which bring these three technologies together simplifies the development process and enables developers to create compelling web apps more quickly. In this article we will look at some HTML5 and CSS3 frameworks that can be used to create mobile websites and applications.

Create Corner and Border Effects with the jQuery Corner Plugin

In the early days of the World Wide Web, there were only two kinds of boxes: square and rectangular, and a square is really just a rectangle with even sides! For the modern Web designer, that just won't cut it. This article explains how to use the jQuery corner plugin within your own web pages.

Top 10 jQuery Tips and Tricks

jQuery is a simple, light-weight, open source, cross browser JavaScript library that simplifies event handling, animations and developing Ajax - enabled web applications and promotes rapid application development. In this article we will discuss some useful tips and tricks in jQuery.

A Developer Looks at the qooxdoo 1.4 JavaScript Framework

Just a short time ago, I wrote an article on qooxdoo's Virtual List, and its contribution to the realm of data binding and the challenges of handling of large data sets. Now, the makers of qooxdoo have continued to make strides in other areas of Web development and design with their newest release, version 1.4. I'd like to provide you with a rundown on a few of those innovations today.

Improved Form Handling using JavaScript

Forms, as we know, are an indispensible part of web development. This tutorial will look at form design, validation and error message display.

Java vs. JavaScript: Similarities and Differences

A straight-text description of how JavaScript differs from Java, along with a little history about each.

An Introduction to the jQuery UI Library: Getting Started

The jQuery UI library provides many user interface enhancements for your website including animations, widgets and advanced effects. This article looks at jQuery UI and shows you what you need to get started using this powerful JavaScript libarary. 

Use JavaScript to Add a Read More Link When Text is Copied From Your Site

You may have been to a website and went to copy some text from the page and noticed that when you pasted the text it also copied a "read more" note which included the URL of the page you copied from. In this tutorial we will show you how you can do the same thing using a tidbit of JavaScript.

jQuery Basics for Web Developers: Style Properties

In another article, I discussed using jQuery to manipulate attributes of HTML elements. In this article, we will discuss using jQuery to set or get CSS style properties of HTML elements.

jQuery Basics for Web Developer: Attributes

We have talked about adding events to HTML objects using jQuery. Almost every HTML DOM element has a set of attributes that we can add, change, or remove using jQuery. In this article we'll discuss using attributes to manipulate different HTML objects.

JavaScript Libraries for the Discriminating Web Developer: qooxdoo and Spry

In our last article we discussed jQuery, Google Web Toolkit, MooTools and Prototype. In this segment we're going to look at two more JavaScript libraries: qooxdoo and Spry.

Web Developer Tutorial: JavaScript and CSS Minification

When a user visits a website for the first time, any external JavaScript and CSS files are downloaded to their browser's cache. Depending on the size of the file, this can take more time for the page to render. With more people surfing using mobile platforms, it is a good idea to minify your JavaScript and CSS files. This tutorial will teach you how to do just that!

JavaScript Libraries for the Discriminating Web Developer: jQuery, Google Web Toolkit, MooTools and Prototype

In our last article we looked at YUI, Dojo and Echo, three JavaScript libraries that can simplify your life as a developer. In this article we'll look at four more libraries: jQuery, Google Web Toolkit, MooTools and Prototype.

JavaScript Libraries for the Discriminating Web Developer: YUI, Dojo and Echo

As a web developer, I have delved into many different JavaScript libraries and frameworks. Through my work with these libraries, I have come up with a discriminating list of some of the more important JavaScript libraries that should be in every developer's toolbox.

JavaScript Tutorial: Functions and Classes

In computer jargon, we need flexibility, modularity and re-usability. Implementing these concepts in a computer language involves constructs that are not completely necessary, but do save a lot of time and effort. The first of these that we will discuss is the JavaScript function.

JavaScript Tutorial: Variables and Operators Explained

As you surf the Internet, you will notice sites do things that seem impossible with HTML. They have animated pictures, they validate forms for correct input, and change content according to users' requests. They perform sums and play games.

How To Use JavaScript To Ensure Users Agree Before Posting

Often, you may need to make sure that visitors to your site agree to specific terms before they submit a form. You may need to do so for legal reasons before they upload a file, add an image, or submit a comment. In this tutorial, we will show you how to use JavaScript to disable all the fields on a form until a user agrees to your terms.

JavaScript Dynamic Document Creation in New Windows

In my first article on Dynamic Document Creation, we learned the basic techniques of DDC, and we saw how to use DDC to produce dynamic document content. This article continues from this point, and assumes that you understood the basic points made in the first article.

Print a Web Page Using JavaScript

You've probably been on a web page and wanted to print out the page for later reference. Wouldn't it be great to be able to provide visitors to your site with the ability to do just that? This tutorial for web developers will show you how to use JavaScript's window.print function, complete with examples!

How To Use JavaScript To Auto-Submit Dropdowns, With No Submit Button

As a developer, I not only create websites, but I browse and interact on the web each day. One thing that I have found that is irritating, as a user, is when you are required to choose a selection from a dropdown form, and once selected, it does not autosubmit. In this tutorial we will show you have to use JavaScript to do just that.

Advanced JavaScript Event Handling

Some problems do have solutions without advanced event handling, but if we are able to use advanced event handling, we will find that simple and practical solutions to these sort of problems are readily available. In this article we will look at advanced event handling in JavaScript.

Events And JavaScript: Part 3 - The Event Object

The Event Object is a very useful addition to the DOM (Document Object Model). The DOM contains many objects that store a variety of information about the browser, the computer running the browser, visited URLs, and so on. The Event Object stores data about events.

Web Developer Tutorial: Escape Characters

Would you like single and double quotes, tabs, returns, ampersands, or double spacing in your Alert and Prompt boxes? Yes? Then check out this tutorial for web developers.

Events And JavaScript: Part 1 - Event Handling

Programming Languages these days are often quoted as being Object-Orientated Event-Driven Languages. This means that the data and methods for the data are stored and realized in objects, and human-computer interaction is provided by events.

JavaScript Class: How Can I Set A Cookie Based On A User's Selection On A Form?

As a web developer, you may want to allow your site's visitors to make a choice on a form, then direct them to a specific page based on their selection. This tutorial will show you how to, for example, allow your users to select the type of mobile device they are using, then go to the page for that device thereafter, based on their selection--using cookies and JavaScript!

Top 10 JavaScript Snippets for Common Tasks

Web developers often use JavaScript for common tasks on their websites. In this tutorial we'll show you the top 10 JavaScript snippets you can use on your webpages by just cutting and pasting!

JavaScript Tutorial: Adding Rotating Images to Your Web Site

Sometimes a single image just isn't enough to showcase all that you want to promote on your site. If you've ever wondered how some sites get several images to rotate and you'd like to do that yourself, well, wonder no more. I'm here to show you how it's done.

Web Developer Class: How To Use the JavaScript Lightbox Image Viewer

You've probably seen the Lightbox JavaScript effect in action on many sites. It overlays a larger version of an image on top of the current page when the smaller image is clicked, and this tutorial for web developers will show you how you can use it on your pages!

Object Oriented JavaScript Class for Developers

Recently I discovered that JavaScript has changed a lot in the last few years--and the different kinds of syntax used to create objects in JavaScript can be mind-boggling! In this tutorial we'll answer some nagging questions about Object Oriented JavaScript and provide you with some sample code as well.

Web Developer Class: Build Your Own JavaScript Content Rotator

JavaScript can provide an elegant solution for fitting more content into limited space. In this JavaScript tutorial I will explore a simple space-saving solution, the content rotator.

Accessible JavaScript 101: Rotating Banners

As a web developer, we want everyone to be able to access our pages even when JavaScript isn't available to them. This tutorial will show you how to do just that with a Rotating Banner script.

Advanced JavaScript for Web Developers: onClick and onMouseOver

JavaScript functions are very useful for web developers who wish to add interactivity to their websites. The OnMouseOver, OnLoad, and OnClick JavaScript functions are explained--with examples--in this tutorial.

JavaScript Tutorial: Build Your Own Image Viewer with Scrollbar

In our last article we showed you how to use JavaScript to make a space saving image scrollbar complete with a pseudo animation effect. In this tutorial we are going to extend the image scrollbar into a full image viewer with scrollbar.

Web Developer Tutorial: Build Your Own Image Scrollbar

If you have been surfing the web for more than a day you’ve certainly come across an image scrollbar. In this article we’ll walk through the JavaScript functions and HTML necessary to create an image scrollbar.

Making a Wizard with JavaScript

In this installment we’ll create a wizard for subscribing to some websites. We’ll use JavaScript to manipulate display and styles to make it slick and easy to use without having to post anything to the server until we are finished.

Checking Your Work: Validating Input -- The Cool Stuff

In the first part of this series Checking Your Work: Validating Input, we built the basic scripts required to validate some of our example form elements using JavaScript. In this installment we’ll move on to the cool stuff like nested validation and making sure input from the user is the correct type and formatted properly.

JavaScript for Programmers - Events

JavaScript Events are a big part of what makes the web experience interactive. Today we'll take a look at this essential part of JavaScript.

What's The Time? Using JavaScript to Localize Time Displays

This article shows how we can we use JavaScript to localize time displays, and includes a free script you can use on your own site!

A Quick Tutorial on JavaScript Variable Passing

For those of you who need a way to pass variables across pages but wouldn't think of using a cookie to do it - try this method using JavaScript!

So You Want To Open A Window, Huh?

A rundown of the many ways to get new browser windows to pop up using JavaScript.

Hovering HTML Windows and Animated Hovering Using JavaScript

You've probably seen many web sites with windows that seem to appear out of nowhere on the screen. Learn this technique with examples from author Jonathan Campbell!

JavaScript Resources: Tutorials, Articles and References

JavaScript continues to be a popular subject on all of our sites. As such, we have put together this list of JavaScript resources that you may not be aware of!

Creating Dynamic Websites Using JavaScript

Last week we discussed a method for creating a modular Javascript toolbox. This week we show you how to use the Document Object Model to dynamically change the look of your web pages!

Creating a Modular JavaScript Toolbox

Creating and maintaining an effective toolbox is one of the most time saving techniques in programming and can reduce development time greatly. This article shows you how to create and maintain your own such toolbox!

How to Develop Web Applications with Ajax: Part 1

In the past, Web applications were limited because a Web page had to be reloaded (or another page loaded in its place) in order for new data to be obtained. Recently, a new method, known as "Ajax" (Asynchronous Javascript and XML applications) asynchronously retrieves XML data via JavaScript. Ajax will allow you to take your Web applications to the next level.

Book Review: Head First JavaScript

This book is written for someone who has a good grasp of HTML and CSS, and is looking to extend their capabilities. There are plenty of stimulating tutorials, but most importantly, you'll learn how to create dynamic, eye-popping Web sites.

JavaScript and HTML Tricks

In this article you'll learn about a wide variety of tips: from storing and using hidden data to making HTML forms and lists look great. Each topic contains a brief introduction, then details on how to apply the technique.

How to Use a JavaScript Query String Parser

In this article you'll learn how to obtain and use the data from the query string portion of the URL by using a JavaScript query string parser. This script is especially useful for people whose Web sites are served by free hosting providers.

Using Multiple JavaScript Onload Functions

When scripts are written they're used to accomplish a given task, such as creating a rotating picture gallery, or to validate a form. For each task, a separate script is necessary. Often, a script is called using an onload function.

How to Create a JavaScript Animation

JavaScript animations aren't difficult to write. Once you learn a few main ideas, you can create complex animations to display in your browser. Additionally, the content will be available to search engines because the content is in machine-readable (X)HTML.

Object-Oriented JavaScript

This week we cover OOP (Object-Oriented Programming) and how it relates to JavaScript. Topics covered include: what encapsulation, inheritance and polymorphism mean, how JavaScript functions work, how to implement inheritance using closures, prototypes and more.

How to Create Remote Ajax Requests

One of the most common questions about Ajax is whether it's possible to create remote or cross-domain Ajax requests. The answer is yes and this week you'll learn how to create an Ajax-enabled podcast aggregator with PHP and Ajax.

Building Simulations with Javascript

As an organization required to publish analytical reports, we often inherit the responsibility of using data to create simulations or models. In this article I will discuss examples of applying real data and using Javascript to create a simulation.

Bring Your Forms to Life With JavaScript

In this article you'll learn how to prevent errors in your forms. This method validates the form and provides immediate feedback to the user. If the form has been correctly filled out, the submit button is enabled, if not, the button remains grayed out.

How to Populate Fields from New Windows Using JavaScript

Occasionally, filling out web page forms can be daunting. Fortunately, some forms display a question mark next to the form field, which opens a popup window containing additional information. This week, you'll learn how to enhance the functionality of those windows.

JavaScript vs. Flash for Animation

When you think of interactive multimedia on the Web, you probably think of Flash. But Flash creates accessiblity problems, especially for those with disabilities. A solution is to use JavaScript, which avoids many of the issues inherent in Flash.

Accessible JavaScripting From The Ground Up

As great as it is, JavaScript is probably one of the most commonly abused and overused technologies in web development. In this article, I hope to help you implement JavaScript without tears and guide you in the basics of good scripting practices.

Writing Your Own JavaScript Functions Part 2

Last week we focused on a basic programming concept--writing your own functions. This week we continue with our excerpt, and teach you how to use parameters, function calls and more!

Writing Your Own JavaScript Functions

In this article we're going to focus on a programming concept--writing your own functions. Knowing how to write your own functions will improve almost any JavaScript you create. In fact, you'll see how custom-made functions can enhance several of the JavaScript tricks you've already learned.

Using JavaScript Variables and Built-In Functions, Part 3

In this third and final part of our article on using JavaScript variables and built-in functions to automatically update your web pages, we show you how to dynamically add the date to your web page!

Using JavaScript Variables and Built-In Functions, Part 2

In this second part of our article on using JavaScript variables and functions to update your web pages automatically, we look at Strings, Functions and Alerts!

Using JavaScript Variables and Built-In Functions

With JavaScript you can update the content on your pages automatically every day, every hour, or every second. In this article, we'll focus on a simple script that automatically changes the date on your web page.

From DHTML to DOM Scripting, Part 2

In our last article, we discussed how developers are now turning to DOM scripting instead of DHTML. This week we continue our discussion and delve into functions!!

From DHTML to DOM Scripting

In this selection from Beginning JavaScript with DOM Scripting and Ajax, you'll learn what DHTML was, why it is regarded as a bad way to go nowadays, and what modern techniques and ideas should be used instead. Let's get started DOM Scripting!

So You Want A Cookie Counter, Huh?

Count individual visitors right on the page.

Click... It's Copied!

Copy to the clipboard...right from the browser!

HTML Goodies: Script Tip: Week 10

New Script! Browser Choice

HTML Goodies: Script Tip: Week 12

The IF/ELSE Condition

HTML Goodies: Script Tip: Week 25

New Script! Running A Digital Clock

HTML Goodies: Script Tip: Week 28

The SetTimeout() Command

HTML Goodies: Script Tip: Week 39

The Function

HTML Goodies: Script Tip: Week 4

How the Image and Script are Linked

HTML Goodies: Script Tip: Week 50

The Buttons

HTML Goodies: Script Tip: Week 51

JavaScript Y2k Fix

The Y2K bug has bit JavaScript...but here's the fix. [This obviously outdated tutorial provided for historical interest.]

New Window: No Title Bar

Open a new window without a title bar for a seamless look.

Old Script Tip 21

So, You Want Text Commands, Huh?

Oooops...

Test Visitors for the Flash Plug-In

Test for your viewers rather than asking them to choose.