JavaScript
Frameworks: Javascript op basis van jQuery, YUI, JSDoc, sIFR
Aanvullende client-side functionaliteit wordt toegevoegd aan pagina's door middel van Unobtrusive Javascript. De code wordt Object-georiënteerd geprogrammeerd, op basis van betrouwbare frameworks. Het alombekende jQuery wordt veelvuldig ingezet.
In het standaard geladen script 'default.js' worden globale variablen gezet, een javascript-enabled stylesheet aangeroepen, functies binnen een eigen namespace gedefinieerd en een initialisatie van de functies uitgevoerd na het 'document.ready' event.
Op basis van specifieke classes op een html-element kunnen functies worden geadresseerd. Inline Javascript wordt vermeden. Alle functies vallen binnen een eigen namespace, zodat er geen conflicten onstaan met eventuele andere Javascript libraries. Methods en properties van objecten hebben alleen invloed op het betreffende object zelf.
Unobtrusive Javascript
Unobtrusive betekent letterlijk 'niet in de weg'. De scheiding tussen inhoud, opmaak en gedrag wordt bijgestaan door Javascript (gedrag) los van de inhoud te schrijven.
Het volgende html fragment toont een lijst met links. De class 'enable-toggle' wordt gebruikt om een in- en uitklap functie te adresseren. Javascript voegt de class 'toggle' toe aan de eerste link, een klik op dit element wordt opgevangen en bedient het in- en uitklappen van de onderliggende lijst.
<ul class="enable-toggle">
<li class="open">
<a href="profiel">Overzicht van "Profiel"</a>
<ul>
<li class="active">
<a href="portfolio">Portfolio</a>
</li>
<li>
<a href="visie">Visie</a>
</li>
<li>
<a href="werkwijze">Werkwijze</a>
</li>
</ul>
</li>
</ul>
$('ul.enable-toggle > li').each(function()
{
$(this).children('a').addClass('toggle');
}
);
$('ul.enable-toggle li a.toggle').click(function(){
if ($(this).parent().hasClass('open')) {
$(this).parent().children('ul').slideUp({
duration: 800,
easing: 'easeOutExpo'
});
$(this).parent().removeClass('open');
$(this).attr('title','Klik om uit te klappen');
} else {
$(this).parent().children('ul').slideDown({
duration: 800,
easing: 'easeOutExpo'
});
$(this).parent().addClass('open');
$(this).attr('title','Klik om in te klappen');
}
return false;
});
Object Notatie
Het object 'FnSyntaxHighlight' heeft een publieke method, 'init'. Het html-element 'pre' wordt in een div-element geplaatst en het object beautyOfCode wordt geinitialiseerd:
FnSyntaxHighlight = {
init: function(){
$('pre').wrap($('<div class="code-block"></div>'));
$.beautyOfCode.init('clipboard.swf',
{
addControls: false,
collapse: false
}
);
}
}
