Artikel top billede

(Foto: Computerworld)

Byg dynamiske html-sider med jQuery

jQuery er det mest populære JavaScript-framework og gør det nemt at skabe dynamik på en html-side. Hvis du ikke kender til jQuery, så læs med her.

Af Michell Cronberg, Alt om Data

Denne artikel er oprindeligt bragt på Alt om Data. Computerworld overtog i november 2022 Alt om Data. Du kan læse mere om overtagelsen her.

Udvikling af sider til nettet, ligegyldigt hvilken serverteknologi man benytter, er de seneste par år blevet mere og mere kompliceret, i takt med at kravene til brugerfladen er steget. Brugerne er efterhånden vant til en brugerflade med en masse dynamik, og det kræver i realiteten enten Flash (Adobe), SilverLight (Microsoft) eller avanceret css og JavaScript.

Sidstnævnte kan være en ret kompliceret affære, fordi JavaScript i realiteten er rimelig kompleks i sin måde at udvælge og manipulere elementer på en html-side, og hvad værre er, så fungerer JavaScript ikke nødvendigvis på samme måde i forskellige typer og versioner af browsere. Derfor er der i løbet af de seneste år dukket en del forskellige biblioteker op, som gør det nemmere at bruge JavaScript.

Ved at benytte disse biblioteker slipper man dels for at skrive så meget kode, fordi man kan benytte funktionalitet, som allerede er kodet i bibliotekerne, og dels behøver man ikke i samme grad at være bevidst om, hvorvidt koden nu også virker i alle browsere.

Lidt om jQuery

Det uden tvivl mest populære bibliotek er jQuery, som primært er skabt af JavaScript-guruen John Resig. Projektet er open source, hvilket i høj grad har medvirket til både udviklingen og udbredelsen af biblioteket, og jQuery er i dag utrolig populær og bruges efter sigende (se builtwith.com) af over 40 procent af alle større sites på nettet. Den første version er fra 2006, og projektet har udviklet sig eksplosivt frem til den i skrivende stund nuværende version 1.4.

Formålet med jQuery

jQuery har grundlæggende til formål at gøre det nemmere at skrive effektiv, hurtig og browser-uafhængig JavaScript til at udvælge html-elementer og herefter manipulere disse på mange forskellige måder.

Det er blandt andet populært at bruge jQuery til at animere elementer på en side – eksempelvis en formular, der ”popper” op på en fiks måde, når man klikker på en knap, eller et afsnit tekst, som gradvist skifter farve og font, når musen føres over teksten.

Samtidig kan jQuery bruges til at simplificere Ajax-kommunikation, så man eksempelvis nemt kan opdatere en tabel med data fra serveren uden brug af det traditionelle postback.

jQuery er designet til at simplificere JavaScript, og det er ikke ualmindeligt at kunne konvertere mange linjers kompliceret JavaScript til meget få linjers logisk kode ved hjælp af jQuery.

Det henvender sig dermed både til udviklere med stor JavaScript-erfaring, som nemmere kan skrive bedre og mere effektiv kode, og også til designere og udviklere, som i realiteten ikke har det store kendskab til JavaScript.

Elementerne i jQuery

jQuery består grundlæggende af tre elementer. Selve kernebiblioteket giver de grundlæggende muligheder for selektering, håndtering af hændelser, interaktioner, animationer og Ajax-kald. Hvis man også inkluderer jQueryUI-biblioteket, udvides mulighederne for animationer og interaktioner, ligesom man kan benytte forskellige kontrollignende komponenter.

Slutteligt findes der en masse open source-plugins skabt af udviklere, som ikke er en del af jQuery-teamet. Ved hjælp af en eller flere af disse tre elementer kan man relativt nemt skabe en kompliceret dynamisk html-side, som virker i alle browsere uden at skrive særlig meget JavaScript.

jQuery Mobile

Der er for nylig dukket et fjerde element frem hos jQuery kaldet jQuery Mobile, som har til formål at gøre det nemt at skabe dynamiske sider til smartphones og tablets (herunder iPhone og Android).

Med den udvikling, som de mobile enheder er inde i i øjeblikket, er det uden tvivl et projekt, vi kommer til at høre meget mere til. jQuery Mobile er i øjeblikket i alfa, så det varer et stykke tid, før det rammer produktion, men på jquery.com kan de forskellige muligheder allerede afprøves.

Kernen

Selve kernen i jQuery er en js-fil på omkring 75kB bestående af JavaScript, som i produktion kan koges ned til omkring 24kB ved hjælp af gzip-komprimering.

Den kan hentes fra jQuery fra jquery.com eller loades direkte fra en af flere cdn’er (content developer network) – eksempelvis har både Google, Microsoft og jQuery filen placeret på offentlige servere til fri brug. Inkludering af filen kan ske på samme måde som alle andre JavaScript-filer ved hjælp af en script-opmærkning i headeren på siden.

Ready-hændelsen

Når filen er loaded i browseren, kan man benytte de forskellige objekter og metoder, men man vil typisk først have afviklet et script, når siden er fuldt loadet i browseren, og alle elementer dermed er klar til at blive manipuleret.

Derfor indeholder jQuery-objektet hændelsen ready, som bruges til at sikre, at alle elementer er klar, inden de påvirkes. I figur 1 kan du se et typisk eksempel på grundlæggende brug af jQuery.

Først inkluderes jQuery-kernen fra en lokal mappe (kunne også have været fra et cdn), og herefter bruges ready-hændelsen til at få afviklet en metode, når siden er fuldt loadet.

Den viste ready-metode kræver nok lidt forklaring. Det i koden benyttede dollartegn er en genvej til jQuery-objektet og bruges typisk for at spare noget plads. Samtidig benyttes en såkaldt anonym metode i stedet for at kalde en konkret metode.

Syntaksen kan se lidt teknisk ud, hvis man ikke har styr på JavaScript, men man kan lige så godt vende sig til det, fordi næsten al dokumentation på nettet benytter anonyme metoder.

Selectors

En af jQuerys helt store styrker er at udvælge en eller flere elementer på en side, og det gøres ved hjælp af såkaldte selectors, som også kendes fra css. Man kan eksempelvis nemt finde alle elementer af en konkret type, et enkelt element med et konkret id, en eller flere elementer, der har en css-klasse tilknyttet, en eller flere form-elementer med videre.

jQuery-selectors kan også være meget avancerede og eksempelvis finde alle ulige rækker (tr) i en tabel, som er placeret i en div tilknyttet en konkret css-klasse.

I figur 2 kan du finde en tabel med nogle få simple eksempler på selectors.

Hændelser

jQuery er meget effektiv til at fange JavaScript-hændelser fra brugerfladen og giver forskellige muligheder for at tilføje kode til hændelserne. Ready-hændelsen er allerede nævnt, men der findes en hel masse andre forskellige hændelser, man kan drage nytte af.

De mest oplagte er nok ’click’- (når der klikkes på et element), ’focus’- (når et element modtager fokus) og ’hover’-hændelserne (når musen føres over et element), men i figur 3 kan du finde yderligere eksempler.

Syntaksen bag en hændelse er den samme som vist i figur 1, men i figur 4 kan du se et eksempel på brug af ’click’-hændelsen.

Først findes de elementer, som skal have kode tilknyttet sin ’click’-hændelse (alle elementer med ’id minKnap’), og herefter tilføjes kode ved hjælp af en anonym metode. Bemærk i øvrigt også, at ’click’-hændelsen fanges i selve ready-hændelsen.

Metoder

Når først man har fundet de elementer, og eventuelt de hændelser på siden, man ønsker at arbejde med – eksempelvis et konkret afsnit af tekst eller en samling af celler i en tabel, kan man benytte forskellige interaktioner. De to nemmeste er metoderne ’show()’ og ’hide()’, der, som navnet antyder, viser og gemmer et eller flere elementer.

Metoderne kan kaldes på flere måder. Hvis de kaldes uden argumenter, vises og gemmes elementerne omgående, men man kan også angive et antal millisekunder (eller en streng som eksempelvis ’slow’ eller ’fast’), hvilket resulterer i, at elementer ”fader” ind og ud. Se eksemplet i figur 5 og 6 på et afsnit (div), som bliver vist og skjult, når der klikkes på en knap.

Der findes en del andre metoder som eksempelvis ’addClass’ (tilføjes en css-klasse til et element), ’val’ (finder eller initialiserer et elements værdi), ’css’ (tilføjer konkret css til et element) og mange flere. Se dokumentationen på jquery.com for en komplet liste.

Ajax

Det er svært at finde et moderne website, som ikke i en eller anden form benytter Ajax (Asynchronous JavaScript and XML) til at kommunikere med serveren bag ryggen på browseren. Problemet med Ajax er, at det er en relativt kompleks sag at skrive kode til kommunikationen, men jQuery gør det en hel del nemmere.

Der findes flere metoder, der kan hjælpe med et Ajax-kald – eksempelvis metoden ’load()’, som asynkront henter en del eller dele af en side fra serveren og placerer tekst direkte i et element, eller ’get()’, som er lidt mere rå og eksempelvis kan bruges til at hente en json- eller xml-struktur.

jQuery UI

Ud over selve jQuery-kernen kan man vælge også at inkludere jQuery UI på en side. Dette bibliotek både udvider kernens eksisterende funktionalitet og tilføjer en masse features. Eksempelvis en masse animationer (også kaldet effekter) samt features som ’drag and drop af elementer’, ’sortering’, ’tilretning af størrelse’ med videre.

Fælles for alle features er, at der skal meget lidt JavaScript til at opnå en meget kompliceret funktionalitet. Yderligere indeholder biblioteket en del forskellige kontrollignende elementer (kaldet widgets) – herunder en DatePicker (se figur 7), Slider, forskellige muligheder for dialogbokse og meget mere.

Udseende af alle disse widgets kan styres af en stor samling temaer. Man kan således nemt sikre, at alle kontroller benytter eksempelvis samme farveskema. På jQuery kan man sågar nemt bygge og efterfølgende downloade sit eget tema.

Plugins

Ud over brugen af jQuery-kernen og jQuery UI findes der et hav af de såkaldte plugins, som benytter jQuery til at udvide og tilføje ekstra funktionalitet. Mange af disse plugins er open source og kan ligesom jQuery downloades kvit og frit.

Som et eksempel på en af de mere populære plugins kan nævnes DataTables (datatables.net), som med meget få linjers kode (typisk en linje) kan konvertere en standard-html-tabel til en dynamisk tabel, som kan sorteres og filtreres direkte i browseren (se figur 8).

Der findes en masse forskellige typer af plugins, og mange af dem er meget effektive – se selv den fulde liste på jquery.com under ’Plugins’.

Kom i gang

Selvom jQuery er skabt til at gøre det nemt at danne en dynamisk side, kræver det et vist kendskab til JavaScript, så hvis du ikke kender så meget til det, bør du starte med en god bog om grundlæggende JavaScript.

Herefter kan du finde en bog om jQuery og begynde at se på de mange eksempler og dokumentation på jquery.com. Her finder du i øvrigt også en liste over de efterhånden mange bøger, der findes om jQuery.

[themepacific_accordion]
[themepacific_accordion_section title="Fakta"]

Selectors – prøv det selv

[/themepacific_accordion_section]
[themepacific_accordion_section title="Fakta"]

Video om jQuery for begyndere

[/themepacific_accordion_section]
[themepacific_accordion_section title="Fakta"]

Hent eksemplerne fra artiklen

[/themepacific_accordion_section]
[themepacific_accordion_section title="Fakta"]

Download gratis kapitel om jQuery fra dansk bog

[/themepacific_accordion_section]
[/themepacific_accordion]