Skripting gjør sidene mer interaktive

Vil du lære deg å programmere? Da må du først velge et programmeringsspråk. Jobber du med nettsider, er det naturlig å lære seg JavaScript. Det er flere måter å komme i gang på. Du kan for eksempel følge et nettbasert kurs som det vi ser i videoen over. En annen tilnærming er å finne eksempelkoder som man tar i bruk på egne websider – vi kan kalle det problembasert tilnærming. Mange vil oppleve det svært nyttig.

«Everyone should learn how to program a computer because it teaches you how to think.» — Steve Jobs

Det finnes mange kodespråk. Noen av dem bygger kode med byggeklosser i stedet for ord – slik som Scratch på norsk.

Vi kan ha behov for å endre innhold på nettsidene våre basert på hva brukeren gjør. For enkelhets skyld viser vi her skript direkte i HTML-koden:

<h1 onclick="innerHTML='Lengre og mer utførlig overskrift'">Kort overskrift</h1>


Hvis man klikker på overskriften «Kort overskrift», blir den byttet ut med en annen overskrift fordi skriptet endrer verdien innerHTML på H1-taggen.

Vanligvis samles skriptene i et eget dokument, på samme måte som stilark. Vi kan da lage funksjonalitet som kan gjenbrukes i alle dokumenter, f.eks. innholdsfortegnelser:

var overskrifter = document.getElementByTagName("h1");


Her vil alle overskrifter fanges opp og lagres, slik at de senere kan vises fram et annet sted – eller på forespørsel.

I eksempelet over er overskrifter en variabel og getElementByTagName en funksjon. En funksjon beregner eller gjør noe, mens en variabel lagrer eller husker for oss.

Å endre layout, synlighet og design er enda mer vanlig:

<h1 onclick="style='background:yellow'">Min overskrift</h1>


Med denne koden får overskriften gul bakgrunnsfarge. Med stiler kan vi endre både synlighet, størrelse, animasjon og annet.

Mange nettsider har ulike skjema. Det kan være for søk eller innsending av forespørsler. Her kan det fort bli feiltasting siden brukeren er fri til å skrive inn det han ønsker. Skript vil her komme til nytte både for å veilede brukeren og for å sikre at riktig informasjon blir utfylt.

For å sjekke et telefonnummer trengs et skript som sjekker:

• om det kun er skrevet inn tall
• om det er åtte siffer

Skriptet kan da gi en feilmelding om «Feilskrevet telefonnummer» eller en mer detaljert feilmelding som «Du har skrevet tegn som ikke er tall». Sannsynligvis burde skriptet være så komplekst at det tok høyde for valgfri landskode (f.eks. +47).

Vi kan bruke valg-setninger for å teste:

if (telefonFelt.value.length != 8) { /* != betyr ulik */
alert("Du må skrive inn åtte tall.");
}

Bruk av valg er en av de store styrkene til et programmeringsspråk, noe du fort vil erfare. Programmering av gjentakelser med løkker er en annen. Vi kan sette opp en løkke som for eksempel repeterer samme testkode for alle felt i skjemaet vårt.