Unobtrusive JavaScript

JavaScript er på godt og ondt internettes mest populære scriptsprog. Desværre anvendes JavaScript ofte forkert, hvilket hindrer såvel brugere som søgemaskiner i at læse siden optimalt. Med Unobstrusive JavaScript bliver ens side både bruger- og søgemaskinevenlig.

I de seneste år har der været en kraftig bevægelse inden for webudvikling mod et stadig større fokus på standarder og tilgængelighed. Dette har medført at alle webbureauer med respekt for sig selv i dag udvikler hjemmesider, der overholder de gængse standarder hvad såvel kode som semantik angår, hvilket igen har medført, at indhold/struktur ((X)HTML) og præsentation ( CSS ) er skilt ad i 2 lag.

Unobstrusive JavaScript er et udviklingsparadigme, som blev beskrevet i 2002. Formålet var at definere, hvordan JavaScript bør anvendes på hjemmeside uden at gå på kompromis med tilgængelighed, standarder og semantik. Unobstrusive JavaScript kan bedst oversættes med ikke-ødelæggende JavaScript.
Unobstrusive JavaScript tilføjer et lag i hjemmesidens opbygning udover indholds-/strukturlaget og præsentationslaget, nemlig funktionslaget:

Der er ingen fast definition eller standard for hvad unobstrusive JavaScript omfatter - kun vejledende retningslinjer.
Hos Resource it tager vi udgangspunkt i følgende principper:

1. Objektorienteret JavaScript - så lidt forurening af namespace som muligt, samtidig med at scriptet bliver mere rubust.
2. Overholdelse af W3C-DOM og eventmodellen - eventuelt tilbagefald på browserspecifik kode, der hvor den enkelte browser ikke understøtter standarden.
3. Test i alle større browsere i aktuelle versioner. - Desto flere browsere man tester i, desto mere gangbart er ens script - Opera, Firefox, Safari og Internet Explorer er selvskrevne.
4. Skarp adskillelse mellem indholds-/struktur-, præsentations- og funktionslag
5. Bevarelse af semantikken i HTML-dokumentet - basisdokumentet skal overholde såvel kodemæssige standarder som semantik - dvs at a-tags bruges til links, h-tags til overskrifter, at man bruger sigende navne på id-er og klasser osv.
6. Siden skal nedgradere flot - den skal altså også fungere, selvom JavaScript ikke er slået til.
7. JavaScript placeres i eksterne filer og ikke inline i dokumentet.
8. Eventhandlere tilføjes via scriptet og ikke inline på elementerne.

Hvordan

Når man koder unobstrusive, adskiller man blandt andet eventhandlere fra HTML.
På vores hjemmeside har vi en kontaktformular, hvorfra man kan sende en meddelelse til os. Kontaktformularen er kodet med JavaScript og fremkommer ved klik på et link.

Hvis man havde kodet den traditionelt, ville man have sat eventhandleren på a-tagget således:

<a href="#" onclick="contact();">Kontakt os</a>

eller

<a href="javascript:contact();">Kontakt os</a>

Begge eksempler er problematiske, da linkene i ovenstående ikke peger noget fornuftigt sted hen - semantikken i dokumentet er altså brudt. Dermed mister man alle brugere, der af den ene eller anden grund ikke kan læse/anvende ens JavaScript - og søgemaskinerne får intet ud af linkene.

Når man koder unobstrusive, skal man altid lade linkets href-egenskab pege på noget fornuftigt i forhold til linkets tekst. I vores tilfælde vil linket pege på en almindelig kontaktformular, som brugeren kan anvende, såfremt JavaScript-udgaven er utilgængelig. Linket kunne se således ud:

<a href="kontaktos.html" class="contact">Kontakt os</a>

Tricket er at lade scriptet, der håndtere kontaktformularen, gennemsøge DOM for links, der har klassen "contact". Når scriptet støder på et link med klassen "contact", omskriver det DOM og tilføjer den nødvendige kode inkl. eventhandlere, så kontaktformularen kan fungere.

Brugere, der ikke har eller kan køre JavaScript, ser siden kontaktos.html, når de klikker på linket og kan dermed udfylde kontaktformularen på ganske normal vis.
Brugere med JavaScript slået til ser i stedet JavaScript-udgaven af kontaktformularen og kan drage nytte af de fordele den tilbyder.

Har man kun et eneste link, der skal fungere som kontaktformular, kan man vælge blot at sætte en id på a-tagget i stedet for en class - altså id="contact" og dermed spare et gennemløb af alle elementer i DOM.

Eksempler

På vores hjemmeside har vi anvendt unobstrusive JavaScript konsekvent. Vi har fundet 3 eksempler, der viser, hvordan det gøres i praksis.

Eksempel 1: Smart søgning

- eller hvordan en lidt tung funktion bliver gjort let og brugervenlig.

Enhver hjemmeside med respekt for sig selv har en søgefunktion - og med god grund.
Langt de fleste brugere benytter nemlig søgefunktionen som deres primære navigation på hjemmesiden. Det er derfor vigtigt, at søgefunktion tilbyder en brugervenlig og effektiv grænseflade.
En søgefunktions succesparametre kunne se således ud:

1. Hurtig søgning - selv kort ventetid på <10 sekunder kan give irritation hos brugeren.
2. Præcis søgning - finder søgefunktionen en masse irrelevant eller værre endnu ikke noget relevant overhovedet, forsvinder brugeren med uforrettet sag.
3. Overskueligt søgeresultat - det nytter ikke at søgefunktionen er i stand til at finde en masse, hvis brugeren ikke hurtigt kan danne sig et overblik.
4. Fastholdelse af søgeresultat - så brugeren kan finde det ønskede uden at skulle gentage sin søgning flere gange.

Vi har implementeret en ganske almindelig søgefunktion på www.resource-it.dk, som alle uden mulighed for JavaScript tilbydes. Har man derimod JavaScript slået til, omskriver JavaScriptet DOM, så den nye søgefunktion anvendes. De to søgefunktioner giver samme resultat, og er lige hurtige, men JavaScriptudgaven giver brugeren mulighed for at navigere mellem søgeresultaterne let og uden at miste overblikket.
Derved er JavaScript anvendt til at øge brugeroplevelsen for nogle brugere uden at afskære andre.

Prøv søgefunktionen med og uden JavaScript slået til på www.resource-it.dk. Begge link åbner i nyt vindue eller faneblad, som du bare kan lukke, når du har prøvet. Når vinduet er åbnet, skal du klikke på forstørrelsesglas-ikonet i den mørke lodrette bjælke til venstre.

• Søgefunktionen med JavaScript
• Søgefunktionen uden JavaScript

Eksempel 2. Vejledning som diasshow

- eller hvordan en ellers kedelig vejledning tilsættes lidt krydderi og brugervenlighed

Efterhånden som arbejdet med vores hjemmeside skrider fremmad, udbygger vi sidens supportafsnit i forbindelse med de ydelser og produkter vi leverer.
I den forbindelse lavede vi for nyligt en lille brugervejledning om installering af vores mailsystem på de enkelte klienter.
Følgende overvejelser lægger til grund for det endelige resultat:

1. Vi ønskede en brugervejledning, der var overskuelig og let at følge - lange sider med meget scroll har det med at virke uoverskuelige for brugeren.
2. Brugevejledningen skulle være printvenlig, så brugeren kunne skrive den ud.

Se vejledningen med og uden JavaScript - begge link åbner i nyt vindue eller faneblad.

• vejledning med JavaScript
• Vejledning uden JavaScript

Eksempel 3: Faneblade og layout på tabeller

- eller da CSS kom til kort.

Dette sidste eksempel omhandler ren formatering af en side. Vi har udviklet et markedsføringsværktøj, Intising. Intising kommer i 3 forskellige udgaver, som hver kommer i 3 forskellige pakker - altså 9 varianter i alt. Vi ville gerne lave og vise en let overskuelig prisliste og det løste vi med JavaScript.
JavaScriptet læser DOM og formaterer prislisten baseret på tabellers og divs klassenavne. JavaScriptet sætter det hele op i 3 faneblade med 3 pakker på hver. Fordelen ved denne opstilling er, at brugeren kun skal forholde sig til priser på netop den udgave, der er relevant for hende. Ved udskrift kommer kun det valgte faneblad med.

Se prislisten med og uden JavaScript - begge link åbner i nyt vindue eller faneblad.

• Prisliste med JavaScript
• Prisliste uden JavaScript

Konklusion

At kode unobstrusive er et fornuftigt og rigtigt valg. Følger man de principper, som vi anvender får man en lang række fordele foræret ved meget lidt arbejde;

1. Øget tilgængelighed for brugere
2. Øget tilgængelighed for mobile enheder
3. Bedre indeksering i søgemaskiner
4. Let vedligeholdelse
5. Økonomisk og hurtig videreudvikling
6. Robusthed

Unobstrusive JavaScript som ide har eksisteret siden 2002. Nu er tiden moden til at virkeliggøre den ide og for alvor få bragt os videre til web 2.0.

Tilføj kommentar