Skripting gjer sidene meir interaktive - Design og visualisering (IM-MED vg2) - Ressurssamling - NDLA

Hopp til innhald
Fagartikkel

Skripting gjer sidene meir interaktive

Vi bruker skript for å tilføre funksjonalitet og interaktivitet på nettsider utover det vi kan lage med markeringsspråk og stilark. Det kan vere alt frå små justeringar i design til heile spelkonsept.
Video: Tom Jarle Christiansen / CC BY-SA 4.0

Vil du lære deg å programmere? Då må du først velje eit programmeringsspråk. Jobbar du med nettsider, er det naturleg å lære seg JavaScript. Det er fleire måtar å komme i gang på. Du kan for eksempel følgje eit nettbasert kurs som det vi ser i videoen over. Ei anna tilnærming er å finne eksempelkodar som ein tek i bruk på eigne 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 finst mange kodespråk, og nokre av dei byggjer kode med byggjeklossar i staden for ord – slik som Scratch på norsk.

Endre innhald

Vi kan ha behov for å endre innhald på nettsidene våre basert på kva brukaren gjer. For å gjere det enkelt viser vi her skript direkte i HTML-koden:

<h1 onclick="innerHTML='Lengre og meir utførleg overskrift'">Kort overskrift</h1>

Viss vi klikkar på overskrifta «Kort overskrift», blir ho bytt ut med ei anna overskrift fordi skriptet endrar verdien innerHTML på H1-taggen.

Vanlegvis blir skripta samla i eit eige dokument, på same måten som stilark. Vi kan då lage funksjonalitet som kan attbrukast i alle dokument, f.eks. innhaldslister:

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

Her vil alle overskrifter bli fanga opp og lagra, slik at dei seinare kan synast fram ein eller annan stad – eller på førespurnad.

I eksempelet over er overskrifter ein variabel og getElementByTagName ein funksjon. Ein funksjon reknar ut eller gjer noko, mens ein variabel lagrar eller hugsar for oss.

Endre stilar

Å endre layout, synlegheit og design er endå meir vanleg:

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

Med denne koden får overskrifta gul bakgrunnsfarge. Med stilar kan vi endre både synlegheit, storleik, animasjon og anna.

Validering

Mange nettsider har ulike skjema. Det kan vere for søk eller innsending av førespurnader. Her kan det fort bli feiltasting sidan brukaren er fri til å skrive inn det han ønskjer. Skript vil her komme til nytte både for å rettleie brukaren og for å sikre at rett informasjon blir fylt ut.

For å sjekke eit telefonnummer trengst eit skript som sjekkar:

  • om det berre er skrive inn tal
  • om det er åtte siffer

Skriptet kan då gi ei feilmelding om «Feilskrive telefonnummer» eller ei meir detaljert feilmelding som «Du har skrive teikn som ikkje er tal». Sannsynlegvis burde skriptet vere så komplekst at det tok høgde for valfri landskode (f.eks. +47).

Vi kan bruke val-setningar for å teste:

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

Bruk av val er ein av dei store styrkane til eit programmeringsspråk, noko du fort vil erfare. Programmering av gjentakingar med løkker er ein annan. Vi kan setje opp ei løkke som f.eks. repeterer same testkode for alle felt i skjemaet vårt.

Skrive av Johannes Leiknes Nag.
Sist fagleg oppdatert 06.09.2022