JavaScript

Adding events to HTML elements with jQuery is pretty simple, but I found that extending those events wasn't an easy task. I was faced with an issue where I had some third party code that performed an action on an element, and I needed to add an event and call the same handler from that event. As this was within a CMS I had limited scope to just add my new event to the existing code, so I needed a way of pulling out the current jQuery events and then calling that event handler separately. This post looks at how I accomplished this.

Let's start with a couple of simple form input elements.

After looking at Conway's game of life I have been looking at other forms of cellular automata. This lead me to discover Langton's ant, which is a different kind of cellular automata where an agent (namely an ant) is used to turn the squares on or off as it travels around a grid.

The rules of Langton's ant are quite simple. The ant simply follows two rules as it moves around the grid.

• At a white square, turn 90° clockwise, flip the colour of the square, move forward one unit.
• At a black square, turn 90° counter-clockwise, flip the colour of the square, move forward one unit.

This can be represented in code by looking at the current state of the square that the ant is stood on and then performing an action. Movement in a particular direction is achieved by adding or subtracting from the x or y coordinates depending on which way the ant is pointing.

Tests for programmers in an interview process are not uncommon. For the last couple of years I have asked a quick pre-interview question to junior developers to see what sort of stuff they come up with.

As I don't want to set any developer a task that will take longer than absolutely needed I opted to set a very simple task for them. Commonly known as "FizzBuzz", this task is as follows.

"Write a program that prints the numbers from 1 to 100. But for multiples of three print "Fizz" instead of the number and for the multiples of five print "Buzz". For numbers which are multiples of both three and five print "FizzBuzz"."

The expected output for this would be something like this.

To verify that an element exists in the DOM you just need to use the .length property of a jQuery lookup. If the element is there then the number of elements found will be greater than 0.

if ($('.myelement').length > 0) {
}

This can be shorted by implicitly checking for a positive value of length.

I have seen a lot of this sort of thing, so though I would put together a quick lesson in JavaScript variable scope. There are some important differences between local and global variables in JavaScript that will cause grey hairs if you don't know what's going on.

Scope is something that dictates what variables can be seen by code. If a variable is created inside a function then it can be said to be local as only the locally running code can see it. A variable that can be accessed by any part of the code is said to be global. This is special in JavaScript, which I will come onto later.

This scope concept is important as if a variable is outside the current scope then the code can't see it. Everything in JavaScript is a variable so understanding how and when variables can be accessed is important.

To create a local variable in JavaScript do this:

A common practice that some users have is to press the enter key when they are filling in forms on the web. This might be when they are just moving to the next field, but the trouble is that this will submit the form.

To prevent this from happening you can simply stop the form being submitted if the enter key had been pressed. This is done by binding a JQuery event to the input elements of the form and returning false if the key pressed is enter, which has the keyCode value of 13. We also include a call to the JQuery method preventDefault() to stop the event propagating.

The other day I was trying to convert a HTML template into a CMS system and I found a stumbling block with the use of the jQuery function delay() in the template's JavaScript. During part of the templating process I found the following error occurring on the page.

Changing the text of a submit button when clicked can be useful if you are writing an AJAX application or you know that there will be some sort of delay. Providing the user with some form of feedback is a useful way of letting them know they they have done something.

First, we need a form to work with, so I built a quick one here. Notice that the submit button has an onclick action associated with it, this will be used later to enable us to alter the text of the button.

Opening external links in a new window can be useful, but adding target="_blank" can be a real chore. Not only that, but if you are trying to validate the page to XHTML strict then the target attribute will cause errors to appear as it is not defined in XHTML.

An easy solution to this issue is to add the following JQuery to your site. It will look for any links that start with http and do not contain the current domain and add a new click event to them that causes a new window to be opened. This will exclude most links straight away as they will most likely be relative.

If you have a large page or form that uses validation on it then you will probably want to tell the user that something is going on. One way to do this is by telling the user at the top of the page that something has gone wrong and then letting them figure out where.

A more elegant solution is to scroll the page down the just above the first error message so that the user is aware of what they need to fill in. This can easily be done through a combination of jQuery and the ScrollTo plugin.

The first thing you need on the form is add some tags as the error output elements. Make sure that these tags don't get printed if there are no errors. I have chosen to use p tags with the class of error. Download this plugin and include it within your page.