JavaScript

Strictly speaking the Google Ajax libraries don't contain only Ajax libraries, but they are very useful for a variety of reasons. Google host a variety of different JavaScript libraries which you can link to on your pages rather than download the library and host it on your server. You can use MooTools, JQuery, Prototype/Scriptaculous, Dojo and even the Yahoo! User Interface Library.

How To Use Them

Using the Google Ajax libraries on your own site is quite easy, and you can do it in a number of different ways.

Normally, you would download the latest and greatest version of your chosen library and upload it to your site. Here is an example using the MooTools.

<script type='text/javascript' src='http://www.hashbangcode.com/mootools.js'></script>

You can include this via Google using the following.

JS Bin is an online tool that allows you to test JavaScript without having to muck about with files. You can just quickly cut and paste some code in and view the output. It is even possible to make the code you are looking at public and then use this as part of an ajax call in another instance of the application.

To get you started there is a nice help section, which also includes a couple of videos.

This tool really impressed me, especially the easy inclusion of several different JavaScript frameworks. I don't mind testing JavaScript, but sometimes I just want to run a little bit of code on it's own to see why it isn't working as I expected it would. This tool fills that much needed gap, and the addition of allowing other people to view your code is a very nice feature. Well worth a look!

There are two main ways in which to redirect the browser using JavaScript, both of which look at the location of the window object. These are the location.href property and location.replace function.

location.href

The following example will cause the page to redirect to another page, keeping the browser history. This might seem like a minor point, but if you redirect a user to another page they will be able to click back, which will mean that they are redirected again.

Using server side scripts to search for things can be as complex or as simple as the situation requires. However, if you have a table of results and you just want to enable a simple JavaScript search on that table then this might be the script for you.

To search a table using JavaScript you need to split the table into bits, this can be done using the getElementsByTagName() function, which takes the name of the element that you want to capture. So to grab all of the rows of a table as an array you need to pass the value of tr.

var rows = document.getElementsByTagName("tr");

We can then iterate through these rows, grabbing the column that you want to search on, with the following code.

I have previously talked about using PHP to convert from a date to a time, but what about doing the same in JavaScript?

To get the unix timestamp using JavaScript you need to use the getTime() function of the build in Date object. As this returns the number of milliseconds then we must divide the number by 1000 and round it in order to get the timestamp in seconds.

Math.round(new Date().getTime()/1000);

To convert a date into a timestamp we need to use the UTC() function of the Date object. This function takes 3 required parameters and 4 optional parameters. The 3 required parameters are the year, month and day, in that order. The optional 4 parameters are the hours, minutes, seconds and milliseconds of the time, in that order.

The other day I was approached by a friend who had this odd looking virus message on their screen. They said that they hadn't been doing anything in particular, just writing an email and surfing the net in Firefox when all of a sudden this pop-up appeared on screen and told them they had a virus.

The thing that caught my friend by surprise was that they were using Firefox and therefore shouldn't be able to get pop-ups. However, on closer inspection is appeared to be a JavaScript confirm message. My friend clicked on the Cancel button and one of the pages they had open redirected to this very dodgy looking site which promptly started to do a dummy virus scan.

The following script can be used if you want to simulate a typewriter in an element on screen. I have put in a lot of comments to describe what is happening but the script works by taking each array element in turn and adding it character by character to the content of the selected element.

I found this excellent bookmarklet the other day which allows you to see nofollow links quickly and easily in Chrome most modern browsers.

Nofollow?

The bookmarklet consists of the following JavaScript.

There is nothing more irritating than when you are typing out a long message in a text box and you accidentally move backwards, or clicking on a link and moving off page, therefore losing data you may have entered. There is a solution to stop this happening and it involves the onbeforeunload event.

Although not technically a fully supported event, onbeforeunload is run just before the page is unloaded out of cache. The onunload event occurs right after this, and it is too late by that point.

To prevent a user from moving out of the current page without some form of warning you will need to return some text with the onbeforeunload event. In some browsers that text will be used as part of the message, some browsers will ignore the message but continue anyway.

Include the following body tag in the page you want to incorporate this feature into.

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.

Of course, it goes without saying that you don't actually edit the site, just the content that you see on the screen. Hitting refresh will remove any editing that you have done. This little tool is ideal if you want to see what different content would look like on the page without having to edit HTML. It can also be used to create spoof pages with false content.