Rapidement dit : var sert à implanter une variable dans le contexte courant.

Moins rapidement, si on utilise une variable sans var, l'interpréteur JS va remonter les contextes jusqu'à trouver une variable du même nom et l'utiliser. On voit d'ici les problèmes qui peuvent se poser si on déclare une variable en global et qu'on utilise une variable du même nom, sans var, au sein d'une fonction...

Ainsi, il peut paraître prudent de mettre un var avant toute déclaration de variables, mais on peut vouloir utiliser une variable d'un autre contexte.

Le Javascript c'est très bien mais les disparités entre navigateurs font que ce langage ne peut exprimer toute son élégance sans une série d'abstractions (comprenez fonctions et objets cachés). L'utilisation de jQuery simplifie ces manipulations browseriennes et on aboutit à du code très élégant comme il n'aurait jamais dû cesser de l'être.
La preuve ?
Je voulais faire un slider d'images, un visualiseur de diapositives en français, qui permet de passer à l'image suivante à l'aide d'un clic de souris. Le code repose sur du HTML très simple et référençable par un moteur de recherche : un DIV positionné en relative ou absolute contenant des IMG dont on doit spécifier les tailles et, si la variable ContainerId contient l'Id du DIV sus-mentionné, ça donne les 13 lignes qui suivent ainsi que la démo juste au-dessous.

var Left = MaxWidth = MaxHeight = 0
$("#container img").each(function(idx, item)        {
    $(this).css({"position":"absolute", "top":"0px", "left":Left+"px"})
    Left += $(this).width()
    MaxWidth = Math.max($(this).width(), MaxWidth)
    MaxHeight = Math.max($(this).height(), MaxHeight)
    $(this).click(function()    {
        var NextImg = $(this).next("img")
        var ShiftPosition = !NextImg.length ? 0 : NextImg.css("left")
        $("#container-inner-container").animate({"left":"-"+ShiftPosition}, 500, "swing")
    })
}).wrapAll("<div id='container-inner-container'></div>")
$("#container-inner-container").css({position:"absolute", top:"0px", left:"0px", witdh:Left+"px", height:MaxHeight+"px"})
$("#container").css({overflow:"hidden", position:"relative", width:MaxWidth, height:MaxHeight})

Quant à son fonctionnement, c'était le premier slider que je faisais en jQuery, donc tout est assez basique : je donne une position absolue à toutes les images qui sont filles du container passé en paramètre et je les place toutes les une à la suite des autres avec une petite fonction qui réagit au clic souris pour chacune d'entre elle et qui exécute un scroll à la suivante, simplement en animant la propriété CSS left.

Comme précédemment, on veut afficher des images les unes à la suite des autres avec un clic souris, mais cette fois la transition se fait avec un fondu enchaîné et un code très réduit (merci jQuery).

Dans le code qui suit, la variable Container contient l'élément jQuery correspondant au DIV encapsulant les images :

var ImgIndex = MaxImgIndex = 0
Container.find("img").each(function()   {
    $(this).css({"position":"absolute"}).fadeTo(1, 0.001).css("display", "none")
    MaxImgIndex++
    $(this).click(function()    {
        Container.find("img:nth-child("+ImgIndex+")").fadeTo(1000, 0.01, function() {
                $(this).css("display", "none")
        })
        ImgIndex = (ImgIndex == MaxImgIndex ? 1 : ImgIndex+1)
        Container.find("img:nth-child("+ImgIndex+")").css("display", "inline").fadeTo(1000, 1)
    })
})
//On affiche la première image...
Container.find("img:nth-child(1)").trigger("click")