Document Object Model

Under julhelgen har jag ägnat lite tid åt att göra färdigt mina uppgifter till min kurs, Webbdesign med Javascript och Document Object Model, som jag läser på distans på Umeå Universitet. I stora drag är Document Object Model eller DOM en standard för hur olika dokument, som till exempel webbsidor, byggs upp och struktureras genom vad som kan liknas med ett träd av noder och undernoder. För programmering på webben är det kort bra för att till exempel kunna påverka sidans innehåll i realtid, validera formulär innan de skickas eller bara uppdatera delar istället för att behöva ladda om en hel sida, s.k. AJAX.

DOM har växt fram ur det som från början kallades dynamisk HTML, DHTML, och är alltså ett sätt att kunna påverka hur en sida ser ut eller framförallt uppför sig efter det att den laddats ner till besökarens dator. Det finns tusentals exempel på det här på nätet, många sidor som vi besöker varje dag, som till exempel Facebook, Hotmail och nästan samtliga av Googles tjänster. Möjligheten att kunna skapa objekt, ändra texten på sidor och ladda material utan att hela tiden behöva uppdatera hela sidan får webbaserade program att fungera mer som “vanliga” datorprogram vilket också medför helt andra möjligheter för webbprogrammerare. Numera kan man skapa nästan exakta kopior av program med enda skillnaden att de körs i webbläsaren och mot en server istället för den egna dator, något som Google utnyttjar i Google Calendar och Google Docs.

För mig som tidigare läst Java-programmering och sysslat med webbdesign i gaska många år nu är det egentligen ingenting nytt utan det är bara ett namn på hur man använder JavaScript men det öppnar som sagt väldigt många dörrar för vad som är möjligt att göra på webben. En klar fördel med javascript är att det är ett ganska lätt språk att få grepp om och inte särskilt svårt att komma igång med så man behöver absolut inte ha någon bakgrund inom programmering för att kunna lära sig det även om det givetvis går lite snabbare att komma igång.

Ett bra exempel på DOM och AJAX är kalendern till vänster på denna blogg som kan bläddras i utan att man behöver ladda om hela sidan eller sökrutan längre ner - texten i den förklarar vad den har för funktion och försvinner och sätter fokus på den då den klickas på. Det är bara några enkla exempel på vad man kan göra med den här tekniken. Håller man på med webbdesign så kan det helt klart vara värt att ta en närmare titt! Ett bra ställe att börja BrainJars guide eller serien på scottanddrew.com. Är man mer intresserad av AJAX kan man läsa mer på AJAX for N00bs eller AJAX Tutorial.