Nu varer det jo ikke længe før jeg skal finde en vinder af min lille konkurrence. Derfor har jeg lavet en lille javascript dimmer der vælger et helt tilfædligt tal. Du kan se den nedenunder. Du skal ganske enkelt indtaste det maksimale tal du øsnker skal kunne komme ud i tekstfeltet og derefter trykke på knappen. Smart ikke?
Indtast Maks. Tal:
Jeg er stadig ikke helt tilfreds med designet på bloggen. Det betyder ikke så meget at den grafiske WOW-effekt ikke er der. Det der er vigtigt for mig er at siden er nem at overskue. Det synes jeg ikke selv den er. Derfor vil jeg fortsat eksperimentere med designet indtil jeg synes den del sidder i skabet.
Den næste uges tid vil jeg tage jer med på turen i den proces jeg gennemgår hver gang jeg laver ændringer i designet.
Læs resten af dette indlæg »
Inspireret af min lille html entity converter er jeg gået i gang med nye spændende javascript projekter. Det næste jeg er gået i gang med er et lille værktøj til at lave farve temaer med, men det kommer du til at høre meget mere om i morgen. Det er en god øvelse at prøve at lave sådan nogle værktøjer. Jeg kan i hvert fald varmt anbefale det.
Hvis du går og tænker på et lille online værktøj du altid sunes du har manglet så må du meget gerne sige til. Jeg har brug for træningen og hvis der så er nogen der bliver glade for det så er det jo en ekstra bonus.
Jeg har selv et par idéer. Farvetema værktøjet kommer som sagt i morgen, men det kunne jo være sjovt at lave det mere avanceret endnu. Jovist, teknologien har jo nok sine begrænsninger, men hvor mange af dem er mentale? Det er et spørgsmål jeg meget gerne vil efterprøve.
Kom med nogle udfordringer, så vil jeg hellere end gerne tage dem op. Jeg kan ikke love at jeg kan klare alle de opgaver der kommer ind, men jeg kan love at jeg vil prøve.
På det seneste er jeg blevet forelsket i javascript. Det er den brik af dhtml begrebet vi ikke har talt så meget om endnu, men det er en vigtig brik i vores puslespil. For at gøre vores hjemmesider dynamiske kan vi simpelthen ikke komme uden om at bruge javascript. Det er der sådan set heller ikke noget i vejen med. Problemet er at det er her det hele begynder at blive lidt langhåret, for at sige det mildt. For et par dage siden anbefalede jeg bogen; Javascript - the definitive guide. Hvis du har den bog, har du alt det litteratur du får brug for når du skal lave dine scripts. Det er en glimrende opslagsbog der har rigtig mange gode eksempler.
Jeg vil ikke danse rundt om den varme grød mere. Nedenunder ser i en stump javascript. Og lige nedenunder den stump kode ser i hvad koden kan gøre.
<script type=”text/javascript”>
function linkExplode(linkId){
document.getElementById(linkId).style.fontSize = ‘30px’;
}
function linkImplode(linkId){
document.getElementById(linkId).style.fontSize = ‘10px’;
}
</script>
<a id=”linkGoogle” href=”http://www.google.dk” onmouseover=”linkExplode(’linkGoogle’);” onmouseout=”linkImplode(’linkGoogle’);”>Google</a>
Virker det langhåret? Det er det egentlig ikke når man først har arbejdet med det i et stykke tid. Når du bevæger musen henover google linket bliver skriften større, når du fjerne musen igen bliver det mindre. Det er nok ikke den mest almindelige anvendelse af javascript, men det er da et sjovt lille eksempel. Jeg vil i første omgang ikke gå i detaljer med koden. Formålet med dagens indlæg var såmænd bare at vise et lille eksempel på hvad javascript kan bruges til. Jeg lover at vi senere i forløbet nok skal grave os ned i koden.
Det bliver rigtigt sjovt.
Når vi laver hjemmesider vil vi meget gerne have at de er dynamiske. Vi vil gerne have at brugen af en hjemmeside minder så meget som muligt om brugen af et almindeligt windows program som f.eks. Microsoft Word. Ved at få hjemmesiden til at minde om et almindeligt windows program gør vi det nemmere at bruge fordi det minder om det brugeren er vant til. Problemet er bare at HTML er fuldstændig statisk. Det vil sige at vi i HTML ikke kan lave f. eks. dropdown menuer. Dem har du jo set mange steder på nettet så hvad er det for noget vås jeg sidder og skriver. Faktisk har jeg fuldstændig ret. For at lave dropdown menuer er vi nødt til at bruge javascript. Javascript virker ved hjælp af noget der hedder DOM. DOM er en forkortelse af Document Object Model.
I sig selv ikke rigtigt noget. Lad mig prøve at komme med en sammenligning. Når du bygger et hus er der nogle ting du ved. Du ved at du skal bruge et fundament og en masse byggematerialer. Det færdige hus har døre, vinduer, elektriske installationer osv. Når det bliver mørkt trykker du på en kontakt og så bliver lyset tændt. Når du tager på arbejde eller i skole åbner du døren og går ud af den. Huset har altså nogle bestanddele der hver især har nogle bestemte egenskaber. Sådan fungerer DOM’en også.
Document Object Modellen kan beskrives som et træ. Stammen er objektet window, det vindue siden bliver vist i. De 3 første forgreninger du støder ind i er History, Location og sidst men absolut ikke mindst document. Hver af disse grene har yderligere forgreninger. At beskrive grenene i detaljer ville betyde at vi alle falder i søvn før vi er halvvejs igennem dette indlæg så det vil jeg undlade.
Jeg fremhæver lige document objektet fordi det er det vi kommer til at bruge mest. Det er nemlig det objekt vi bruger når vi skal pårvirke indholdet på vores hjemmeside. Alle de HTML elementer vi benytter os af har vi mulighed for at tilgå ved hjælp af Document Object Modellen. Vi har også mulighed for at ændre stylesheet, hvilket er en nem og hurtig måde at lave en printervenlig version af siden på.
