Altså julen har sådan set været rigtigt god, men jeg skal have en god lang samtale med min internet udbyder. Jeg har en søn på halvandet år og han er i den alder hvor knapper, kontakter og ledninger er fuldstændig uimodståelige. Derfor har han af to omgange fået trykket på kontakten til routeren. Det burde jo ikke være noget problem, nettet burde jo virke igen efter max et par minutter, men det tog over to dage!! Begge gange!!

Derfor kunne jeg ikke give jer den lovede HTML Color Themer i fredags, men nu kommer den. Du indtaster de valgte favekoder (uden # tegnet) i felterne og trykker på knappen. Derefter vil boksen til højre vise det farvetema du har valgt. Du får lige linket til min HTML Color Themer igen.

God fornøjelse og godt nytår!!

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.

Xtreme JavaScript

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.

Ja, jeg må jo starte med at undskylde det manglende indlæg i går. Jeg har haft travlt med et lille projekt. Hvad det projekt går ud på afslører jeg lige om lidt. Nu faktisk.

Jeg ved ikke om du lagde mærke til at der blev vist noget kode på mit sidste indlæg. Det kan man ikke gøre uden at lave nogle fiks fakserier. Hvis du bare skriver koden på siden vil browseren nemlig fortolke koden. Det vil også ske selvom du omslutter din kode med <code></code> tags. Det eneste det ændrer er formateringen af den tekst der bliver vist imellem de to tags.

HTML Entities

For at vise koden skal du bruge noget der hedder html entities. Det er en række tegn der tilsammen angiver koden for visningen af et andet tegn.

Det jeg har arbejdet på er et lille værktøj til at konvertere tegn til html entities. Det er nemlig lidt besværligt at skulle skrive dem selv. Jeg har meget opfindsomt kaldt det for en Html Entity Converter.

Den er meget enkel at bruge. Du indtaster det du vil konvertere i det øverste felt, derefter trykker du på knappen i mellem felterne og så kan du kopiere den konverterede tekst fra det nederste tekst felt. Det var den enkle version.
Du vil lægge mærke til at der er nogle felter du kan vælge til og fra ude til højre. Det felt der hedder entity number er lidt vigtigt. Html entities kan skrives på to måder, som et navn eller som et nummer. Problemet er at internet explorer (Det er altid den der er problembarnet) ikke kan vise alle entity navne korrekt, derfor er det mest sikkert at bruge numrene.
De andre felter viser hvilke tegn der bliver konverterede. Du kan fint bruge den som den er, men nogle gange kan det jo være at du ønsker at udelade nogle af felterne.

God fornøjelse, jeg håber det var ventetiden værd.

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>


Google

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.

Hvad gør HTML DOM’en?

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.

Document objektet

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å.