Explore the Premium Content

DHTML: Dynamic Client Side Table Sorting

Sort Without the Extra Calories

Now that we have seen a couple of somewhat basic displays of the DOM's potential, let's look at something a bit more powerful and useful. As you know, some of the power of the DOM lies in being able to manipulate the data the client (user) has already received without making a round trip to the server.

One function that you would expect to hit the server for would be to resort some tabular data. However, we can in fact sort a table full of data without ever hitting the server using some powerful DOM techniques and the sort() and reverse() methods of the array object.

In this tutorial, Tom supplies and explains all the code to show you how. It is suitable for a beginner at DHTML, though some JavaScript knowledge would be useful.

Read More

DHTML: Dynamic Class Switching

The beauty of the DOM is doing things on-the-fly, without hitting the server. In this tutorial, Tom shows us how to use DHTML to change the presentation of a page rather than its content, colouring alternate rows of a table in different colours to make it easier to read - and also shows how to highlight an individual record/ row.

Taught in Tom's usual easy-going style, this tutorial is suitable for beginners to the DOM and DHTML.

Read More

DHTML: Introduction to Scripting the DOM

Web lore has it that the DOM an off-putting, complicated and esoteric subject. However, the heart of the DOM is pretty straightforward.

Simply put, the DOM allows you to dynamically change the page all on the client side. We're not talking simple text color changes here, either. Want to add a whole table to your page? Go ahead and create one. Want to re-style every DIV on the page? Go ahead and do it. It will all happen at the click of a button, and it will all happen without sending the page back to the server. One seamless and smooth action that puts the punch in dHTML.

In this tutorial (which is suitable for beginners) Tom Dell'Aringa introduces the central concepts of the DOM and immediately gets his hands dirty, using JavaScript to alter the appearance and content of a page on the fly.

Read More

Real-world JavaScript: Control Structures

Critical to your success as a good JavaScript programmer will be your understanding of control structures and how best to use them. In my past articles I have use IF and FOR control structures, and while I have explained them in brief, they really need a closer look.

In addition to those already mentioned, we have the IF.ELSE, the SWITCH, and even something called a TERNARY. Knowing what you have available to you and when to use it will allow you to write good effective scripts. And that's the name of the game.

Read More

JavaScripting usable forms

Some of the best uses for JavaScript is functionality that aids the user when using your website or application.  On ecommerce sites, this is particularly important since one wrong move can send your customer running for the competition. In this weeks article, Tom shows you how to save the user keystrokes and time by allowing them to copy all that “personal information” they just filled out in a long form into the “billing information” part of a shopping cart with one simple click of the mouse!

Read More

Scripting the Select: Deleting from the Bookmark

In this final part of Tom's tutorials on JavaScripting the Select, Tom walks you though the black arts of looping backwards through an array and deleting an option, using the example of deleting an option from a list as a guide.

As usual, Tom takes care to explain the Usability implications of the JavaScript so that you can be sure you're learning to make genuinely useful sites that your customers will return to again and again.

Read More

Scripting the Select and Option Array: Real-world JavaScript

More on how to manipulate the OPTION array within the SELECT object, abstracting functions, good coding practices, usability and the TABINDEX. Tom walks you through defining a function that 'moves' bookmarks up or down in a user-defined list using JavaScript, and then abstracts the function so that it acts like a black box for you and other users, even doing its own error checking.

Read More

Scripting the Select: Moving Things Around

Tom shows you how to script the select box using a real-world example of a site that allows a user to keep track of his or her own bookmarks. They will need to be able to add or remove entries, as well as edit them, move them up and down in a list to change the order, and view the list either by URL or by the description. The code is provided for practice or use in your own pages. Read More

Beginning JavaScript: Scripting The Select Object

The Select object brings one word to mind: confusion. Beginning scripters generally look at this object and throw up their hands in despair. The select object can be very confusing because the select is made up of both the select object itself and its best friend, the option object. The two together create the drop down and multiple select lists of which we are so fond. This is generally where confusion sets in. When dealing with a select you are really dealing with two elements, not one. This can make references to the particular objects get long and confusing.

Luckily, it's not nearly as hard as it may seem. In this article I'll explain how to get at the select with a script, and we'll write a useful script that we can add to the script library.

Read More

Scripting Radio Buttons without tears

Scripting Radio buttons is one of the tasks that can easily have you weeping into your mouse-mat or hurling your computer through the window. Part 4 of the Real-world JavaScript series, this stand-alone tutorial can save you a fortune in glazier bills and replacement mats by showing you how to save your sanity and write scripts that are usable to your site’s visitors. Read More

Real-world JavaScript: Scripting Checkboxes

What is a checkbox really used for, and how can you change it with a JavaScript? Is it even possible? It certainly is, and in this article you'll find out how to manipulate checkboxes in a form using the mysterious "type" property. Create a toggle switch and turn on and off mass checkboxes with a flick of the wrist! Amazing! Tom continues showing you how to make fully-functional forms, and shows how to make sure that they are Accessible under 508 and disability discrimination legislation - and it's all easier than you think!

This self-contained article will contain the first of many JavaScripts that will be part of a library of scripts you can keep free of charge for your own use.

Read More

Scripting Forms

Sooner or later, you’re going to have to script that form! In fact, it probably will be sooner than later.

Any web site that works as an application almost certainly uses forms as an interface to a back end database. Any web site that registers users, or asks for contact information probably uses a form.

Frankly, this scares people. But never fear! The DOM level 0 is here to save the day! Find out how to easily script forms and make your scripts more readable, too.

Read More