Explore the Articles

JavaScript Arrays

Arrays in JavaScript are extremely useful for storing and manipulating information you have coded directly into the script, or information collected from the browser. In this article, Dan Wellman details how to use and manipulate them.

The array is one of a number of objects built directly into JavaScript. Think of them simply as variables containing multiple values. They can hold string or numerical values, have no maximum boundaries (although the speed at which your scripts are interpreted will decrease as the amount of data increases) and are comma delimited. They have no persistence, meaning that their values are not held once the page containing the script has closed or reloaded.

Read More

A Simpler Ajax Path

Things have steadily improved for web developers with the advent of standards-compliant browsers, CSS, DHTML, and the DOM. Pervasive broadband access has made web apps feel a lot snappier. Now something called the XMLHttpRequest object makes it even easier to develop full-blown, superinteractive applications to deploy in the browser.

While not exactly new, the XMLHttpRequest object is receiving more attention lately as the linchpin in a new approach to web app development, most recently dubbed Ajax (asynchronous JavaScript and XML), which powers the cool features found on sites like Flickr, Amazon's A9.com, and the new poster children for whizzy web-based interactivity, Google Maps and Google Suggest. The snazzy Ajax moniker seems to be getting some momentum--it's popping up in all sorts of places, including the Ajaxian weblog and the recent Ajax Summit put together by O'Reilly Media and Adaptive Path.

Read More

Form Validation with JavaScript Regular Expressions (part 1)

There is no use collecting information that is clearly incorrect. Unless you're a corporate site administrator, there will probably be a limit to the amount of information you can hold in a database, and therefore it makes no sense to fill the database with incorrect information. Something is needed to ensure that users entering data into your forms are entering data that you can use and that meets your expectations of the data.

Regular Expressions can be used as a way of matching patterns in strings. By patterns, I mean specific occurrences of letters, numbers or punctuation marks. This is an extremely effective way of checking that the information visitors to your site have entered into your forms is correct. When I say correct I mean generally in the correct format; if a user spells their name incorrectly when entering their email address, there's not a lot you can do. But if they enter it and fail for some reason to include the @ character, for example, this at least can be detected. There is a home for regular expressions in any form, and almost any field that requires character input can be checked.

Read More

Errors and AJAX

The crux of the AJAX framework is the XMLHttpRequest JavaScript object which allows client-side developers to send and receive XML documents over HTTP without interrupting the user, and without hacking around with hidden frames. Now, some might shudder at the notion of allowing client-side developers who might be more used to validating forms and animating rollover images to suddenly be responsible for traversing XML documents and negotiating HTTP headers, but without risk, there is no reward. And just to soothe any lingering trepidation, [I] will demonstrate how to use XMLHttpRequest to not only add previously impossible or infeasible features, but also to reduce errors and improve quality.

Read More

Drag & Drop Sortable Lists with JavaScript and CSS (DHTML)

In Web applications [I've] seen numerous — and personally implemented a few — ways to rearrange items in a list. All of those were indirect interactions typically involving something like up/down arrows next to each item. The most heinous require server roundtrips for each modification...boo.

Then [I] came across Simon Cozens' example of rearranging a list via drag & drop. [I] was so inspired [I] had to try it out [myself].

Read More

Ajax: A New Approach to Web Applications

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

• standards-based presentation using XHTML and CSS;
• dynamic display and interaction using the Document Object Model;
• data interchange and manipulation using XML and XSLT;
• asynchronous data retrieval using XMLHttpRequest;
• and JavaScript binding everything together.

Read More

Guide to Using XMLHttpRequest (with Baby Steps)

The XMLHttpRequest object is a handy dandy JavaScript object that offers a convenient way for webpages to get information from servers without refreshing themselves.

The benefit to end users is that they don't have to type as much and they don't have to wait as long. For example, having the user's city and state show up in a webpage automatically after the ZIP code has been typed in is a big time saver.

Read More

How to Create a WYSIWYG Rich Text Editor

How to Create a WYSIWYG Rich Text Editor in JavaScript. Pt. 1 & 2

Read More

JS Random Images Script

A random image helps keep your page looking fresh for returning users instead of the same static image everytime.  The following is the code used to create a random images on a website everytime the page is refreshed. This is an exmple of JS code that you WOULD put between the HEAD tags. The <body> JS code (where you want to call the action) goes right where you want the images to appear.  It's really easy. You can use as many images as you want (in mine you can see I chose 6).  A link to the working model of this code is at: http://www.jdotnet.net/Creations.  All you need to do is keep refreshing the page and you'll see the images in the header change out each time.  Hope this helps some of you and have fun programming! Read More

Random Image Script (with live working model and example)

Random Image Script (with live working model) Read More