Ikke-påtrengende Javascript
"Rike grensesnitt" og AJAX har gjort Javascript mer populært enn noensinne, og stadig flere tar det i bruk. Javascript kan gi løsningen din det ekstra piffet, men det er viktig å ikke glemme tilgjengelighet og de som ikke har Javascript.
Statistikk tilsier at rundt 4-6% har Javascript (eksempler fra thecounter.com og w3schools) skrudd av eller på annen måte ikke tilgjengelig. Det er ikke så mange, men det er nok til at man ikke kan overse dem heller. Planlegger man tidlig er det heller ikke vanskelig å lage Javascript-berikede løsninger som fungerer tilfredsstillende også uten Javascript.
"Unobtrusive Javascript", eller "ikke-påtrengende Javascript" på norsk, er et sett med retningslinjer hvis mål er samvittighetsfull bruk av Javascript:
- Legg aldri Javascript rett i dokumentet, bruk eksterne script.
- Javascript er et tillegg, ikke funksjonalitet å være avhengig av.
- Sjekk tilgjengeligheten av objekter og funksjoner før du bruker dem
- Sjekk etter objekt-tilgjengelighet fremfor å sjekke etter browser-type
- Deklarer variable lokalt for å unngå å overta globale variable fra andre script
- Lag effekter som ikke er avhengige av mus
Mer om "unobtrusive Javascript" på Wikipedia og onlinetools.org (listen over er fra onlinetools.org og detaljer finnes der).
Planlegg for de uten Javascript
Som jeg tidligere nevnte er det enkelt å lage Javascript-berikede tjenester som degraderer elegant så lenge man har dette i bakhodet fra starten av. Bestemmer du deg for å bygge inn støtte for de uten Javascript på slutten har du allerede tapt. La oss se på noen enkle forhåndsregler man kan ta seg.
Bevar linker
Aldri lag Javascript-linker ala:
<a href="javascript:minFunksjon('bilde_stor_versjon.jpg');">Se stort bilde</a>eller
<a href="#" onclick="minFunksjon('bilde_stor_versjon.jpg'); return false">Se stort bilde</a>Husk det første prinsippet for ikke-påtrengende Javascript: legg aldri kode rett i dokumentet, skill ut i eksterne script.
I dette tilfellet gjør vi det av to grunner. Den første er en generell en: all kode som linkes inn i eksterne filer er lettere å gjenbruke, og når en bug oppdages, eller endringer kreves er det lettere å endre på en plass enn på mange plasser. Den andre grunnen er direkte linket til eksempelet over: disse linkene gir ingen mening for brukere uten Javascript, og vil ikke fungere.
Javascript-linker/triggere, ikke-påtrengende versjon
Javascript-linker som vist over fungerer på en av to måter. Enten er det en link som åpner en side/ressurs (i nytt vindu, ved å utføre noe kode før siden åpnes og lignende), eller ved å kun kjøre et stykke kode (for eksempel for å lukke et panel eller lignende).
Linker som åpner sider
Når linkene åpner andre sider, bilder eller andre ressurser bør linken linke til denne ressursen, og nødvendig kode utføres i onclick-eventen.
<a href="bilde_stor_versjon.jpg" onclick="minFunksjon();">Se stort bilde</a>minFunksjon() kan her være en funksjon som tar bildet opp i en Lightbox (som jo er populært for tiden) eller lignende. Fordelen med denne metoden er at dersom Javascript ikke er tilgjengelig vil linken til bildet fortsatt fungere.
Det er bare ett aber med eksempelet over; det er fortsatt Javascript i dokumentet. En enda bedre løsning vil være å sette onclick-eventen med et script som kan kjøres idet dokumentet er ferdig lastet.
Det er mange måter å identifisere linker som skal ha onclick-eventen på; klasser, id, alle linker, alle linker innenfor et annet element (her kan man tenke seg stiere ala CSS-velgere, eksempelvis '#content ol a') eller andre attributter. Det opprinnelige Lightbox-scriptet bruker rel-attributtet slik at eksempelet over blir til:
<a href="bilde_stor_versjon.jpg" rel="lightbox">Se stort bilde</a>Voila, dette begynner å se ryddig ut.
Linker som utfører en kodesnutt
Når linkene utfører en kodesnutt er det IKKE OK å legge linken i HTML-dokumentet. Hvis linken kun utfører Javascript-kode burde den også kun være synlig når Javascript er tilgjengelig. Den ryddigeste måten å gjøre det på er å sette linken inn dynamisk med Javascript, for eksempel idet dokumentet er ferdiglastet.
La oss se et eksempel:
<div id="about">
<ul>
<li><a href="/om">Mer om oss</a></li>
<li><a href="/kontakt">Kontakt oss</a></li>
<li><a href="#" onclick="switchStylesheet();">Bytt stilsett</a></li>
</ul>
</div>Dette kunne heller sett ut som
<div id="about">
<ul>
<li><a href="/om">Mer om oss</a></li>
<li><a href="/kontakt">Kontakt oss</a></li>
</ul>
</div>Med følgende Javascript:
window.onload = function() {
if (!document.getElementById || !document.createElement)
return;
var about = document.getElementById('about');
if (about == null) return;
var ul = about.getElementsByTagName('ul');
if (ul == null) return;
var switchLink = document.createElement('a');
switchLink.setAttribute('onclick', function() { switchStylesheet(); });
switchLink.appendChild(document.createTextNode('Bytt stilsett'));
var li = document.createElement('li');
li.appendChild(switchLink);
ul.appendChild(li);
};Det er kanskje litt mer kode, men det er ryddigere, tar bare noen få ekstra minutter, og brukerne dine som ikke har Javascript vil sette stor pris på det.
Dette er selvfølgelig bare toppen av isfjellet, men prinsippet burde være klart og lett overførbart til andre deler av koden din. Tenk på alle brukerne dine fra første stund, det vil gjøre både din og dine brukeres hverdag mye lettere på sikt
