Sammendrag

в HTML (Hypertext Markup Language) er et markeringsspråk. Et HTML-element består som regel av en starttagg, et innhold og en sluttagg. Noen av de vanligste

HTML-elementene er: h1 (overskrift på nivå 1), h2 (overskrift på nivå 2), p (avsnitt), b (fet), i (kursiv), u (understrek), mark (markert tekst), sub (senket tekst), sup (hevet tekst), br (bryter linja), og span (grupperer innhold uten linjeskift).

в Taggene <ul>…</ul> gir en unummerert liste. Taggene <ol>…</ol> gir en nummerert liste. Vi bruker taggene <li>…</li> på de enkelte punktene.

в CSS (Cascading Style Sheet) styrer utseendet til HTML-elementene. Vi kan angi stiler i starttagger med style-attributtet slik: style="egenskap1: verdi;

egenskap2: verdi;". Eksempler på egenskaper er color, backgroundcolor, font-size, font-family, line-height, margin og textalign. Vi kan også skrive CSS-kode i style-elementet, mellom taggene <style> … </style>. Da bruker vi selektorer, selektorer med id eller selektorer med class. в JavaScript er det mest brukte programmeringsspråket for interaktive og dynamiske nettsider. Vi skriver JavaScript-kode i script-elementet.

в En variabel lagrer én eller flere verdier med et navn vi velger selv. Vi definerer en variabel med kodeordet let, slik: let variabelnavn = verdi.

в Tallvariabler har datatypen number. JavaScript har innebygde matematiske funksjoner. En oversikt finner du på side XX.

в En tekststreng er tegn skrevet mellom to anførselstegn (""). En variabel som lagrer en tekststreng, har datatypen string. JavaScript har innebygde metoder (funksjoner) som kan brukes på strenger. En oversikt over disse finner du på side XX.

в Vi lager inputfelt med input-elementet. Inputverdien kan kobles til en variabel. <input bind:value={variabelnavn}> gir et innskrivingsfelt for tekst-

strenger. <input type="number" bind:value={variabelnavn}> gir et innskrivingsfelt for tall. <input type="range" bind:value={variabelnavn}> gir en glider. <input type="checkbox" bind:checked={variabelnavn}> gir en avkryssingsboks.

в Vi kan lagre mange verdier i et array. I arrayer lister vi opp verdiene mellom to klammeparenteser [], og vi skiller verdiene fra hverandre med komma. Vi define-

rer et array slik: let arraynavn = [verdi 1, verdi 2, verdi 3]. Verdiene blir nummererte med indekser, der den første verdien har indeks 0, den andre indeks 1, osv. Vi henter ut en verdi ved å bruke arraynavnet og en indeks slik: arraynavn[indeks]. Du finner en oversikt over array-metoder på side XX–XX.

в En each-blokk går gjennom elementene i et array og pakker ut verdiene én etter én i et HTML-element. Vi skriver koden for en each-blokk i HTML-delen, slik:

1 {#each arraynavn as navn} 2 <!-- HTML-kode som skal gjentas for hver verdi i arrayet. --> 3 {/each}

в Med en for-løkke gjentas en kodesnutt et gitt antall ganger. Det er praktisk når vi ønsker å gjenta en type beregning flere ganger med forskjellige verdier eller behandle verdiene i et array. Vi definerer en for-løkke som gjentas ti ganger i script-elementet slik:

1 <script> 2 for (let i=0; i<10; i++){ 3 // Kode som skal gjentas.

4 } 5 </script>

в Vi definerer en funksjon med parametere og returverdi slik:

1 const funksjonsnavn = (parameter1, parameter2) => { 2 //Parameterne fungerer som variabler inni funksjonen. 3 //Verdien vi skriver etter return, returneres. 4 return verdi

5 }

в Parameterne får verdier når vi kaller på funksjonen. Disse verdiene kalles argumenter. Vi kaller på en funksjon med parametere slik: funksjonsnavn("Argu-

ment1", "Argument2").

в Vi oppretter en knapp som kaller på en funksjon med koden

<button on:click={funsksjonsnavn}> Knappetekst </button>.

в Boolske variabler har enten verdien true eller verdien false. Et boolsk uttrykk, eller en logisk test, er en sammenligning av to verdier. Slike sammenligninger kan være å sjekke om en verdi er større enn, mindre enn, lik eller ikke lik en annen verdi.

в Vi skriver en if-else-setning i script-elementet slik:

1 if (test) { 2 //Hvis testen gir true, kjør denne koden. 3 } else if (ny test){ 4 //Hvis den nye testen gir true, kjør denne koden. 5 } else { 6 //Hvis begge testene gir false, kjør denne koden.

7 }

в Vi skriver en if-else-setning i HTML-koden slik:

1 {#if test } 2 <p> Innhold som vises dersom testen gir true. </p> 3 {:else} 4 <p> Innhold som vises dersom testen gir false. </p> 5 {/if}

в Et objekt består av nøkkel–verdi-par. Vi definerer et objekt med to nøkkel–verdi-par slik:

1 let objektnavn = { 2 nøkkel1 : verdi1, 3 nøkkel2 : verdi2

4 }

в Vi henter ut en verdi ved å skrive variabelnavnet til objektet etterfulgt av punktum og navnet på nøkkelen: objektnavn.nøkkel1.