var myvariable = "a value";

These variables are globally accessible unless they are defined within a function. Javascript performs an operation known as “hoisting” when it compiles which draws all the declarations to the top of the page.

Here is a piece of code:

var test = "my test";
alert(test);

When run, the above will display “my test” in an alert, as you would expect.

Consider this:

var test = "my test";
alert(test);

function testMe() {
    alert(test);
    var test = "another test";
    alert(test);
}

testMe();

The above will display “my test” and then an “undefined” error and then “another test” in an alert. This is because we have declared a function variable within the function testMe function and this overrides the global state.

If we refactor the code as so:

var test = "my test";
alert(test);

function testMe() {
    alert(test);
    test = "another test";
    alert(test);
}

testMe();

Because we have not used the var keyword, the variable exists throughout, and the alerts you get will be “my test” and then “my test” and finally, “another test”

Its very important to remember this, as when you have some large functions, you could be getting obscure results you could be looking for a long time to find the issue.

$('.btnName').live('click', function() {
    //do something
});

There is a nice little browser extension that will show all the elements on the page with a little bubble outlining the attached events/functions.

It is written by Allan Jardine, and you can get it from http://www.sprymedia.co.uk/article/Visual+Event

$('#link).click(function(){
    do some stuff
 });

But, what if that element doesn’t exist yet? Well, you can use the “live” handler:

$('#link').live('click', function(){
    do some stuff
 });

This will carry the event handler on and will match any future element that matches the selector.

More information can be found here: http://api.jquery.com/live/

Requirements : JQuery

var selectOptions = $("#selectId option");

Then, we just run the sort command on the options array – and this easily sorts the items.

selectOptions.sort(function(a, b) {
    if (a.text > b.text) {
        return 1;
    }
    else if (a.text < b.text) {
        return -1;
    }
    else {
        return 0
    }
});

Then, at the end empty the select object and re-append the sorted options array

$("#selectId").empty().append(selectOptions);

This sounds very familiar, right?

It was called the fish-bar, and even had a .com domain… www.fish-bar.com – at the time, there was a big thing about brand names, so I wanted a small name that people could remember and was loosely connected with friends, socialising, etc. So the ‘bar’ was put into the name… The fish was just a random word… It worked well.

Unfortunately, the code was very clunky, and there was very little modular activity on it, but it worked, and for all its fault, security issues, etc, it was a working site and I had member (albeit only a dozen or so!)

The fish-bar used a dirty Microsoft Access database, and was built in Microsoft Active Server pages. I said before that it was clunky, and it was. It used very basic javascript, and there was absolutely no tests for SQL injections, or scripting hacks… But, members could sign up for free…

It went live in 2001 – and you can sort of see an archive of it at the way-back machine… (http://web.archive.org/web/*/http://www.fish-bar.com) – but it died a death in 2002 – but I can’t remember why. Perhaps I didn’t feel like renewing the domain name… Not sure…

It just goes to show, that anyone could’ve written a website that millions of people use, every day and get bought out by a major player with a team of developers and proper coding standards. If I’d kept up the coding and maintenance of the site it might have gone somewhere, or got me noticed by head hunters, or anything else.

We read stories of students selling their sites for millions of pounds, but I was not one of them.

I do still have some of the code that one of the guys at the wayback archive managed to send me, and I’ve uploaded it here, incase anyone wants to have a look and a laugh at how old and outdated it was. You can find the code here

So, I start a page – enabling UTF-8 character sets:

< meta content="text/html; charset=UTF-8" http-equiv="content-type">

And then hook into the Google API itself:

< script type="text/javascript" src="http://www.google.com/jsapi"></script>

Finally, a function that will pick up the text to translate. This function will automatically attempt to discover the source language for you.

< script type="text/javascript">
google.load("language", "1");

function translateLanguage() {
    var sourceText = document.getElementById("sourceText").value;
    google.language.detect(sourceText, function(lang) {
        if (lang.language != '') {
            document.getElementById('language').innerHTML = 'Source language: ' + lang.language;
            google.language.translate(sourceText, lang.language, 'en', function(result) {
                var translated = document.getElementById("translation");
                if (result.translation) {
                    translated.innerHTML = result.translation;
                }
            });
        }
    });
}
</script>