jQuery - en nemmere vej til JS udvikling
Der findes mange forskellige slags applikationer og uanset hvilken type man udvikler støder man på problemstillinger og finder på løsningsmodeller der passer til applikationstypen.
Det samme gør sig gældende ved Rige Internet Applikationer, og for at gøre udviklingen nemmere kan man benytte sig af et library der giver et stort udvalg af funktioner og hjælpemetoder man kan bygge videre på.
Udvalget er stort og tæller blandt andet jQuery, Prototype, Dojo og mange flere. For nemhedens skyld vælger vi at bruge jQuery da det er et meget udbredt library med stigende momentum bag sig, et stort antal udvidelser og et levende udvikler community.
Vores HTML kode
Som du nok lægger mærke til har vi nu referencer til to Javascript filer, en ekstern jQuery fil i linje 6 og vores egen applikationslogik i linje 7.
jQuery kan downloades og serveres fra ens egen server, men i dette tilfælde vælger vi at inkludere den fra Google der har et frit tilgængeligt AJAX bibliotek som serverer de gængse Javascript frameworks.
Samtidig har vi også tilføjet et nyt HTML element med navnet "indhold" i linje 13 til 15 som vi nu vil ændre fra vores Javascript kode ved at benytte jQuery.
Vores script fil, minkode.js
jQuery benytter sig af en funktion med det simple navn $ til stort set alt dens funktionalitet.
I dette tilfælde angiver vi først hvilken kode der skal udføres når siden er indlæst ved at skrive en anonym funktion der starter på linje 5 og slutter på linje 8.
I linje 6 henviser vi til elementet "indhold" og tilføjer noget tekst. Dernæst skriver vi i linje 7 hvad der skal ske når brugeren klikker på elementet - så vil vi gerne have udført funktionen "test".
For at gøre det mere synligt at man kan klikke på vores nye "indhold" element vil vi også tilføje lidt kode til vores CSS fil.
Vores CSS fil, mitlayout.css
Indtil nu har vi kun angivet CSS for vores HTML elementer ved at henvise til dem med deres element navn -
body for <body> elementet, a for <a> elementer.
Det ændrer sig nu hvor vi angiver CSS for et specifik element ved at henvise til dets ID gennem #indhold selectoren.
I linje 5 til 10 angiver vi hvordan indhold elementet skal se ud normalt, og i linje 12 til 15 angiver vi hvad der skal ske når brugeren bevæger sin mus henover indhold elementet.
Som du måske har lagt mærke til kan vi henvise til elementer med den samme fremgangsmåde i både CSS og jQuery.
Du kan se hvordan det komplette eksempel til dette kapitel fungerer i koden.