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.
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.
I quite often find myself needing to know how long a string is, especially when testing form validation or when trying to write a page description. I therefore like to have this little tool to help me by simply counting the number of characters in a given string.
If you want to create a link that performs an action that can't be rolled back then you might want to stop the user from clicking that link unless they really want to. The best way to do this is to intercept the link with a confirm() command.
The first way to do this (and especially useful if you want to ad other functionality) is to use the following function.
After running coding sites for a couple years there is one little problem that really annoys me, so when I set up #! code I resolved to fix it. The issue arises when you use some JavaScript based analytics software that allows multiple domains to be used, like Google Analytics. There is nothing wrong with analytics software that allows this, and it is potentially useful for tracking all manner of things. However, some web masters might not be that good at running sites and will lift code from your site (analytics and all) in order to implement a single widget on their site.
I have already talked about a JavaScript function that rounds To the nearest number, but this was only useful if the number needed to be to the nearest 10 (or factor of). The following function is similar, but will round the number to the nearest 5 or 10, depending which is closer.
The JavaScript Math.round() function will round a decimal to the nearest whole number, but I found that I needed was to round a number to the nearest 10. So after a bit of thinking I realised that I could divide the value by 10, round it using the round() function and then multiply the result by 10.
If you are familiar with PHP you will have come across the for loop at some point. When learning JavaScript it is important to remember that it also has the ability to do the equivalent of the PHP forloop.
The following snippet shows the creation of an array of things that can't be referenced by a normal for loop due to the odd numbering of the keys.
If you are running a JavaScript example page you can use the following function that will take the last script element on the page and print it out in a code tag. It uses JQuery to do the work, so you will need to include that library before using this function.
I came across a really nice looking plugin for JQuery the other day that allowed you to select part of an image. This plugin is called JCrop.