Scripting med sitater

Igår så vi på noen måter å bruke <q> og <blockquote> til å markere sitater i HTML. Når vi skal vise <blockquote> er det ofte interesant å vise cite-attributtet (som jo er kilden), kanskje helst som en lenke. Idag ser vi på et Javascript som gjør akkurat det.

Aktuelle elementer

Vi holder på formen som rår i årets julekalender. Idag ser vi fortsatt på sitater, men mer spesifikt på <blockquote> og litt anvendt scripting med disse elementene.

Bruksområde

Scriptet som presenteres straks brukes til å hente ut cite-attributtet, lage en lenke av det, og sette denne lenken inn i et paragrafelement sist i blockquote-elementet. Hvis <blockquote> også har et title-attributt vises dette som lenketeksten på kildehenvisningen. Sitater som ikke har et cite-attributt forblir urørt.

Resultatet kan sees på http://www.cjohansen.no/html/sitater/script.html og viser hvordan vi kan få rik funksjonalitet ut av simpel semantisk HTML og litt ikke-påtrengende Javascript.

Kom til poenget: selve scriptet

window.onload = function(e) {
    if (!document.getElementById || !document.createElement)
        return;

    for (var i = 0, quote = null; (quote = document.getElementsByTagName('blockquote')[i]); i++) {
        if (!quote.getAttribute('cite'))
            continue;

        var text = quote.getAttribute('title') ? quote.getAttribute('title') : 'Kilde';
        var link = document.createElement('a');
        link.href = quote.getAttribute('cite');
        link.appendChild(document.createTextNode(text));
        var p = document.createElement('p');
        p.appendChild(link);
        quote.appendChild(p);
    }
};

Scriptet er relativt kort (selv uten all verdens rammeverk til å forenkle jobben), og det eneste som skal til for å få dette til å fungere på en gitt side er å enten putte dette i et script-element rett i HTML-dokumentet (tommelen ned) eller å putte det i en script-fil og inkludere det via <script type="text/javascript" src="definisjoner.js"></script> (tommelen opp). La oss kjøre igjennom hvordan dette fungerer.

window.onload

Det første som skjer er at scriptet tilordnes vinduets onload-event, noe som sørger for at scriptet kjører såfort vinduet er ferdiglastet. På dette tidspunktet er alle definisjonene på plass og vi kan kjøre igjennom for å legge inn cite-lenkene.

Aller først sjekker vi selvsagt at nettleseren støtter W3C DOM. Gjør den ikke det avbryter vi bare scriptet for å unngå at brukeren blir servert en rekke scriptfeil.

Løp gjennom alle sitater som har cite-attributt

for (var i = 0, quote = null; (quote = document.getElementsByTagName('blockquote')[i]); i++) {
        if (!quote.getAttribute('cite'))
            continue;

Her løper vi gjennom alle blockquote-elementer på siden. Dersom elementet ikke har et cite-attributt hopper vi over det.

Lage lenken

var text = quote.getAttribute('title') ? quote.getAttribute('title') : 'Kilde';
var link = document.createElement('a');
link.href = quote.getAttribute('cite');
link.appendChild(document.createTextNode(text));

Deretter bruker vi document.createElement til å opprette en ny lenke som vi setter noen verdier på. Den første linjen er en kondisjonell tilordning: dersom sitatet har et tittel-attributt så brukes dette som tekst. Finnes ikke attributtet brukes teksten 'Kilde'.

Sett lenken inn i en <p> og legg til i sitatet

var p = document.createElement('p');
p.appendChild(link);
quote.appendChild(p);

Det siste som skjer er enkelt nok at lenken blir plassert i en <p> som genereres. Denne settes videre inn i sitatet, nederst etter alt det andre innholdet i sitatet. Voila!

Forbedringspunkter

Hovedformålet i dette innlegget er å forklare tankegangen bak dette scriptet fremfor å illustrere kulesikker produksjonsklar kode. Derfor finnes det også opp til flere forbedringspunkter. Den største er nok window.onload - å legge events direkte inn på denne måten er ikke å anbefale ettersom det ikke er mulig å legge til flere events fra forskjellige steder. I tillegg er det problematisk at window.onload venter på at alle bilder også er lastet. Dean Edwards var smart nok til å løse dette for et par år siden.

Rammeverk

Hvis du allerede bruker et rammeverk i ditt prosjekt vil du også potensielt kunne gjøre koden over langt mer kompakt. Som eksempel har jeg implementert koden over med jQuery i dette eksempelet.

Scriptet blir langt mer kompakt med et slikt rammeverk, men du bør bruke rammeverket til noe mer enn kun dette for at den samlede Javascript-vekten på siden skal kunne forsvares. Scriptet ser nå ut som:

$(document).ready(function() {
    $('blockquote[cite]').each(function(i) {
        var text = $(this)[0].getAttribute('title') ? $(this)[0].getAttribute('title') : 'Kilde';
        $(this).append('<p><a href="' + $(this)[0].getAttribute('cite') + '">' + text + '</a></p>');
    });
});

Er det flere idéer til nyttig sitat-scripting der ute? Eller kanskje forbedringer på scriptet?

Tweet this

Muligens relatert

• Semantisk HTML
• Ikke-påtrengende Javascript