JavaScript

Posts about the client side scripting language JavaScript.

JavaScript Logo

Edit Any Web Page With JavaScript

11th November 2008 - 1 minute read time

If you want to directly edit any page that you are looking at then copy and paste the following JavaScript into your address bar.

javascript:document.body.contentEditable='true' document.designMode='on' void 0

I have created a handy little bookmarklet that you can use to do the same thing.

Edit

This code has been tested in IE7, Firefox and Chrome and works well in all three.

JavaScript Logo

Highlight The Contents Of A Textarea With JavaScript

27th August 2008 - 1 minute read time

If you want to give your users a little snippet of code it is nice to give them the option of selecting the entire block of code without having to highlight the text manually. This can be done with a simple JavaScript button.

Take the following form:

JavaScript Logo

JavaScript Crazy Window Zoomer

26th August 2008 - 2 minutes read time

I really don't know how this would be useful, but it might teach you a couple of things about how to use the browser window functions and properties.

The following function resizes the browser window to nothing and then gradually increases this to full screen in a series of steps, at each step the window is moved so that it is in the middle of the screen. This in effect makes it look like the browser window is zooming in.

JavaScript Logo

Format Numbers With Commas In JavaScript

31st July 2008 - 4 minutes read time

I found a good function that details how to format numbers with commas in JavaScript and thought I would reproduce it here. It basically takes any number and turns it into formatted string with the thousands separated by commas. The number_format() function is available in PHP and I have been relying on PHP to sort out the formatting before returning it via an AJAX call. I can now include this function into my JavaScript library and do this on the client side.

The function works by using regular expressions to first split the string into whole number and decimal, before splitting the number by groups of three digits.

The regular expression used is (\d+)(\d{3}), which looks for a sequence of three numbers preceded by any numbers. This is a little trick that causes the regular expression engine to work from right to left, instead of left to right.

JavaScript Logo

Adding Numbers In JavaScript

28th July 2008 - 2 minutes read time

You think I'm joking right? Well, due to a silly mistake (in my opinion) when creating the language the concatenation character is the same as the plus symbol. This means that sometimes JavaScript will add them together and sometimes it will concatenate them.

This occurs if JavaScript encounters any part of the calculation to be a string. If it is then it will concatenate the whole expression. For example.

JavaScript Logo

Randomise JavaScript Array

4th July 2008 - 2 minutes read time

Randomising a JavaScript array can be done in one or two ways. The easy way is to create a function that returns a random number and then use the sort() function of the Array object to sort the array by a random value.

JavaScript Logo

Merge Two JavaScript Arrays

3rd July 2008 - 1 minute read time

Here is a simple bit of code that you can use to merge one or more arrays. The function you need is called contact().

Take the following two arrays, both of which contain numbers.

JavaScript Logo

Loading Page Styles And JavaScript With JavaScript

2nd July 2008 - 3 minutes read time

One good technique when using JavaScript is to load a single JavaScript file and get this file to load any other JavaScript or CSS documents that are needed. This means that you can simplify the instillation of a script on a page by including a single file, which then loads everything else it needs. Here is how to accomplish such a task.

The basic idea is that you add the references you need to the DOM structure of the document. Let's say that we want to load a CSS file called styles.css. To do this at run time we need to create a element and give it some parameters before adding it onto the end of the

JavaScript Logo

Enabling Tabbing In A Textarea

20th June 2008 - 2 minutes read time

When a user presses the tab key in a browser window the normal action is for the user to move the focus to a different control. To enable a word processor like tab effect in a text area you need to catch the keystroke and add in the tab character to where ever the cursor is. This is the main issue with creating this solution, it is easy to add a tab to the end of the text, but most users might want to add a tab half way through the text.

Take the following HTML text area.

JavaScript Logo

Submitting A HTML Form Using JavaScript

19th June 2008 - 1 minute read time

In order to submit a form using an event you need to run a click event on any submit button in the form. Take the following form.