13 minute read
1.1 Kode med Svelte
Programmering med Svelte 1
LÆRINGSMÅL
I dette kapittelet lærer du å: в presentere og formattere ulike tekster på en nettside med HTML og CSS. в lagre data i variabler med enkeltverdier, arrayer og objekter. в anvende funksjoner, løkker og valgsetninger i programmering. в lage interaktive programmer med inputfelt, glidere, knapper og avkryssingsbokser.
I hverdagen er vi omgitt av datamaskiner. En datamaskin er, i bred forstand, en maskin som lagrer, behandler og deler data. Når vi i dagligspråket bruker ordet datamaskin, tenker vi ofte på en personlig datamaskin med tastatur og skjerm. Mobiltelefoner, smartklokker og spillkonsoller er også datamaskiner. Biler, vaskemaskiner, droner og kaffetraktere inneholder også datamaskiner.
Felles for alle datamaskiner er at de består av maskinvare (hardware på engelsk) og programvare (software på engelsk). Maskinvare er fysiske komponenter som blant annet prosessor og harddisk. Om datamaskinen skal vise informasjon på en skjerm, trenger den også et grafikkort. Programvare er et sett med instruksjoner som forteller datamaskinen hva den skal gjøre. Programvaren er lagret på datamaskinen, og gjør at vi kan bruke datamaskinen til noe som er nyttig for oss.
Å programmere betyr å skrive en serie instruksjoner med et kodespråk som datamaskinen forstår. Et sett med slike stegvise instruksjoner som løser en oppgave, kalles for en algoritme. Med programmering kan vi for eksempel lage dynamiske nettsider og apper (applikasjoner, eller dataprogram). På dynamiske nettsider kan brukeren utføre handlinger (klikke, tappe, sveipe, taste inn tekst, osv) som påvirker utseendet eller innholdet på nettsiden. Dette skiller seg fra statiske nettsider som bare viser frem informasjon.
1.1 Kode med Svelte
På moderne nettsider ser vi forskjellig type innhold. De fleste har statisk innhold som overskrifter, tekstavsnitt og lenker til andre nettsider, mens andre har også interaktive elementer som innskrivingsfelt og knapper vi kan klikke på. For å lage statiske nettsider brukes som oftest markeringsspråket HTML (Hypertext Markup Language) og stilformateringsspråket CSS (Cascading Style Sheet). For å lage interaktive og dynamiske nettsider må vi i tillegg bruke et programmeringsspråk. Det mest brukte programmeringsspråket for å lage interaktive nettsider heter JavaScript.
Med HTML og CSS kan vi lage statiske nettsider som bare viser frem innhold. HTML definerer hvordan innholdet på nettsiden (overskrifter, avsnitt, lister) skal være strukturert, mens CSS styrer utseendet og plasseringen til innholdet. Programmeringsspråket JavaScript gjør det mulig å lage interaktive og dynamiske nettsider der brukeren kan utføre handlinger som påvirker utseendet eller innholdet på nettsiden.
SVELTE
I de siste årene har det blitt vanligere for bedrifter å ta i bruk kodeverktøy som ofte kalles for web-rammeverk. I web-rammeverkene skriver utviklerne forenklet kode som oversettes til tradisjonell HTML-, CSS- og JavaScript-kode. Google og Facebook
har for eksempel utviklet hver sine web-rammeverk, henholdsvis Angular og React, som de bruker for å lage nettsidene sine. I tillegg fins det flere andre web-rammeverk som er åpne kildekodeprosjekter. Det betyr at kildekoden er allment tilgjengelig, ofte på et nettsted som heter Github.
I denne boka bruker vi web-rammeverket Svelte, som er et åpent kildekodeprosjekt. Med Svelte skriver vi programmer med forenklet HTML-, CSS- og JavaScript-kode. På Sveltes nettsted fins en editor der vi kan skrive koden vår og se resultatet av den umiddelbart. Du finner editoren på nettadressen https://svelte.dev/repl/. Du har mest sannsynlig allerede programmert en del tidligere i matematikk og naturfag. Programmeringsspråket som mange bruker i disse fagene, er Python. Selv om vi bruker et annet programmeringsspråk i denne boka, får du bruk for programmeringsferdighetene du har fra tidligere. For eksempel får du bruk for det du kan om å bruke for-løkker og if- else-setninger, men skrivemåten, eller syntaksen, er forskjellig. I IT-bransjen brukes mange forskjellige programmeringsspråk, så programvareutviklere, ofte bare kalt utviklere, må beherske det å sette seg inn i og bruke ulike språk.
HTML
HTML står for Hypertext Markup Language. Vi kaller HTML for et markeringsspråk fordi vi strukturerer forskjellige deler av en tekst ved å markere dem med kodeord som vi kaller tagger. En tagg består av et kodeord omgitt med vinkelparenteser: < >. Vi markerer at en tekst skal være en overskrift slik:
<h1>Overskrift</h1>
Koden ovenfor utgjør det vi kaller et HTML-element av typen h1, som betyr overskrift (heading på engelsk) på nivå 1. De aller fleste HTML-elementene består av en starttagg, et tekstinnhold og en sluttagg. Skråstreken i sluttaggen markerer slutten av HTML-elementet. Resultatet av koden vil være teksten «Overskrift», som vises med en stor skriftstørrelse.
Et HTML-element består som regel av en starttagg, et tekstinnhold og en sluttagg.
Vi skal nå lage en enkel nettside med en overskrift og et tekstavsnitt. Vi skriver koden rett inn i editoren som du finner med url-en https://svelte.dev/repl/.
For å markere tekst som et avsnitt, bruker vi p-elementet. Bokstaven p står for paragraph, som betyr avsnitt. Bildet viser resultatet av koden slik det vises i feltet til høyre i editoren.
1 <h1>Hei, elev!</h1> 2 <p>Lykke til med Informasjonsteknologi 2.</p>
Vi har skrevet tre prikker … der det skal være et tekstinnhold. Når du skriver tekster i skriveprogrammer som Word eller Pages, kan du formattere teksten din. Du kan for eksempel utheve deler av teksten med fet tekst eller kursiv tekst. Med HTML har vi mange av de samme mulighetene for å formattere teksten. I tabellen nedenfor finner du noen tagger vi kan bruke på tekster.
Tagger
<h1> …</h1> <h2>…</h2>
<p>…</p>
<b>…</b> Forklaring
overskrift på nivå 1 overskrift på nivå 2
avsnitt
fet tekst
<i>…</i>
kursiv tekst
<u>…</u>
understrekning
<mark>…</mark> markert tekst
<sub>…</sub>
senket tekst
<sup>…</sup>
hevet tekst
<br />
bryter linja, har ingen sluttagg
<span>…</span> grupperer innhold uten linjeskift
<!-- … -->
kommentar, innholdet blir ikke vist på nettsiden
Står for
heading 1 heading 2
paragraph
bold
italic
underline
marked
subscript
superscript
break
span
EKSEMPEL
Å formattere tekst
I koden nedenfor viser vi hvordan vi kan formattere tekst.
1 <!-- Tittel med understrekning --> 2 <h1><u>Sommerferien min</u></h1>
3 <p>I sommer reiste jeg og <b>vennene mine</b> rundt i Europa med tog. Vi kjøpte <mark><i>Interrail </i>-billetter</mark> så vi kunne reise hvor vi ville i <b><i>en hel måned</i></b>. </p>
4 <p>Av byene vi besøkte, var disse mine favoritter: <br /> Rotterdam, Milano og Budapest.</p>
Legg merke til at teksten «en hel måned» er fet og har kursiv tekst. Der har vi et i-element inni et b-element. Vi kunne valgt motsatt rekkefølge (b-element inni et i-element) og oppnådd det samme resultatet. Vi hadde derimot fått en feilmelding dersom vi bare hadde endret rekkefølgen på sluttaggene:
<b><i>en hel måned</b></i>.
CSS
Når vi sammenligner forskjellige nettsider, ser vi at overskriftene og tekstavsnittene har forskjellig utseende. For å angi hvordan innholdet på en nettside skal se ut, bruker vi stilformateringsspråket CSS, som står for Cascading Style Sheet. Med CSS-kode kan vi blant annet kontrollere størrelsen og fargen til teksten, hvilken font teksten skal ha og hvor på siden innholdet skal vises.
Når vi ønsker å endre utseendet til innholdet i et HTML-element, kan vi skrive CSS-koden for dette i starttaggen. Informasjon vi legger inni tagger, kaller vi attributt. Vi endrer utseendet til innholdet med style-attributtet (style betyr stil på norsk). I koden nedenfor endrer vi fargen på overskriften og tekstavsnittet.
1 <h1 style="color: green;">Hei, elev!</h1> 2 <p style="color: blue;">Lykke til med Informasjonsteknologi 2.</p>
Etter attributtnavnet style, skriver vi altså =, etterfulgt av anførselstegn "". Mellom anførselstegnene skriver vi navnet på den egenskapen vi ønsker å endre (color), etterfulgt av kolon (:) og verdien. Her valgte vi verdien green for overskriften og blue for tekstavsnittet. Etter verdien skriver vi semikolon (;).
Dersom vi ønsker å endre flere egenskaper, for eksempel skriftstørrelsen til p-elementet, legger vi til egenskapen og verdien slik: <p style="color: blue; font-size: 13px;>. Fordi standard skriftstørrelse til p-elementet er 16 piksler, ville koden resultert i en mindre skriftstørrelse.
Vi kan endre utseendet til innholdet i et HTML-elements starttagg med attributtet style, slik:
<element style="egenskap1: verdi; egenskap2: verdi;">
Det fins i praksis ingen begrensning for hvor mange egenskaper vi kan endre i style-attributtet, men om vi ønsker å endre mange egenskaper, er det mer oversiktlig å angi stilen i et eget style-element, slik vi har gjort i koden nedenfor.
1 <h1>Hei, elev!</h1> 2 <p>Lykke til med Informasjonsteknologi 2.</p>
3
4 <style> 5 h1 { 6 color: green;
7 } 8 p { 9 color: blue; 10 font-size: 13px;
11 } 12 </style>
I style-elementet definerte vi først hvilke egenskaper h1-elementet skal ha. Når vi bruker navnet til et HTML-element i style-elementet slik, kaller vi det en selektor. Etter selektoren angir vi verdier til egenskapene vi ønsker å endre mellom krøllparenteser. For å gjøre koden oversiktlig angir vi hver egenskap på en egen linje.
Ofte har vi flere avsnitt på en nettside, og dermed flere p-elementer i koden. Når vi skriver CSS-koden i et style-element slik vi gjorde ovenfor, får alle avsnittene det samme utseendet.
Når vi skriver CSS-koden i et style-element, velger vi hvilket HTML-element vi skal endre utseende på, med en selektor.
1 <style> 2 selektor { 3 egenskap1: verdi; 4 egenskap2: verdi;
5 } 6 /* Vi kommenterer CSS-kode slik */ 7 </style>
EKSTRASTOFF
Farger
Til nå har vi brukt engelske fargenavn når vi har angitt verdier til fargeegenskapene i CSSkoden. Det fins 140 farger med engelske navn som alle moderne nettlesere støtter. Blant de navngitte fargene finner vi fargene vi oftest omtaler i dagligtalen: black, grey, white, red, blue, green og yellow. I tillegg fins det mange fargenavn du kanskje ikke har hørt om før, som aqua, DarkOrchid og FireBrick. Du finner enkelt frem til en fullstendig oversikt over fargenavnene ved å søke «CSS colors» på Internett. Det fins mange flere farger enn de 140 som har fått egne navn. To vanlige måter å angi farger på, er med RGB-verdier eller heksadesimale verdier. RGB står for red, green og blue. Vi angir RGB-verdier med tre heltall mellom 0 og 255 som indikerer intensiteten av hver av primærfargene rødt, grønt og blått. For eksempel angir vi hvit farge med rgb(0, 0, 0) og svart med rgb(255, 255, 255). Verdien rgb(255, 0, 0) gir den samme fargen som når vi bruker navnet red. Heksadesimale verdier tar utgangspunkt i det heksadesimale tallsystemet som består av 16 ulike tegn. Titallsystemet som vi er vant til, har ti ulike tegn. Tegnene som brukes i det heksadesimale tallsystemet er tallene 0–9 og bokstavene A–F. I titallssystemet svarer A til tallet 10 og F til tallet 16. Når vi bruker heksadesimale verdier for farger, skriver vi koden på formen #RRGGBB. Denne måten å angi farge på har samme utgangspunkt som RGB ved at de to første sifrene angir verdien for rødfargen, de to midterste angir verdien for grønnfargen og de to siste angir blåfargen. Vi kan lage like mange forskjellige farger med heksadesimale verdier som med RGB-verdier. Fordelen er at skrivemåten er kortere.
JAVASCRIPT
Med JavaScript kan vi blant annet
• endre innholdet i HTML-elementer • legge til nye HTML-elementer • endre CSS-koden for HTML-elementer • skape interaktivitet • hente data fra en ekstern datakilde • tegne og animere vektorgrafikk med SVG • gjøre utregninger
Vi skriver JavaScript-kode i et script-element. Når vi skriver koden vår i Svelte, kan vi velge om vi plasserer script-elementet før eller etter HTML- og CSS-koden. Vi kommer ofte til å definere variabler og funksjoner som vi bruker i HTML-koden der vi måtte ønske det. Da er det naturlig å plassere script-elementet øverst i koden. Programmene våre blir enklere å lese når de følger en fast struktur.
Når vi lager interaktive nettsider eller programmer med Svelte, skriver vi JavaScript-koden først. Deretter følger HTML-koden. Dersom vi skriver CSSkoden i et style-element, plasserer vi dette til slutt. Strukturen til programmene våre ser da slik ut:
1 <script> 2 //JavaScript-kode 3 </script>
4 5 <h1>HTML-kode</h1>
6
7 <style> 8 /* CSS-kode */ 9 </style>
Vi tar utgangspunkt i koden på side XX, og ønsker å lage en ny versjon der «elev» byttes ut med navnet til en elev. I stedet for å skrive et navn rett i HTML-koden, kan vi definere en variabel som lagrer navnet. En variabel består av et navn og en verdi. Vi definerer en variabel i script-elementet ved å skrive let navn = "Ingvild". Vi kan lese dette som «la variabelen med navnet navn få verdien "Ingvild"». Datamaskinen lagrer da teksten som står mellom apostrofene. For at dette navnet skal dukke opp i overskriften på nettsiden vår, erstatter vi ordet «elev» med koden {navn}. Når vi setter et variabelnavn mellom to krøllparenteser i HTML-koden på denne måten, vises verdien som er lagret i variabelen.
1 <script> 2 let navn = "Ingvild" 3 </script>
4 5 <h1>Hei, {navn}!</h1> 6 <p>Lykke til med Informasjonsteknologi 2.</p>
Denne nettsiden kan gjøres interaktiv ved å gjøre det mulig for brukeren å skrive inn sitt eget navn. Vi lager et innskrivingsfelt, som ofte kalles et inputfelt, med et input-element. I likhet med br-elementet, har ikke input-elementet en sluttagg. For at brukeren skal forstå hva hun eller han skal skrive inn, plasserer vi input-elementet
En interaktiv nettside. inni label-elementet (label betyr merkelapp). Da kan vi skrive en forklarende tekst foran eller bak inputfeltet. Vi velger å skrive teksten «Navn:» foran inputfeltet. For at det brukeren skriver i inputfeltet skal lagres i variabelen navn, skriver vi bind:value={navn} inni input-taggen. Dette attributtet binder inputverdien til variabelen som står mellom krøllparentesene.
1 <script> 2 let navn = "" // I utgangspunktet en tom variabel. 3 </script>
4 5 <label>Navn: <input bind:value={navn}></label>
6 7 <h1>Hei, {navn}!</h1> 8 <p>Lykke til med Informasjonsteknologi 2.</p>
EKSTRASTOFF
Variabler og variabelnavn
Du har kanskje hørt om ordet variabel i matematikk og andre realfag. I disse fagene utgjør en variabel et symbol, ofte en bokstav, som representerer en tallverdi. Tallverdien kan representere en målbar størrelse. Når vi skriver x = 2, betyr det at x er identisk med tallet 2. Variabler innen programmering har en litt annen betydning. Her er variabler en måte å lagre data på. Når vi definerer en variabel med kodeordet let etterfulgt av et variabelnavn, åpnes en ledig plass i datamaskinens minne. Navnet på variabelen blir en slags kobling som peker til den ledige plassen. Når vi skriver likhetstegnet og verdien vi vil lagre, sier vi at vi tilordner variabelen den verdien.
Programmeringsspråket oversetter verdien vi lagrer, til maskinkode, som er tall i totallsystemet: 0 og 1. Tallet 1 betyr at det går strøm gjennom en transistor i minnet, mens tallet 0 betyr at det ikke går strøm gjennom den. Hvert tall og tegn kan representeres som binære tall, altså serier av 0-er og 1-ere. Dataen vi lagrer, blir altså lagret fysisk, og gjør at vi når som helst kan hente den frem igjen. Variabelnavnene vi bruker innen JavaScript-programmering, må følge tre regler:
1. Navnet må begynne på en bokstav eller et understrekningstegn ( _ ).
2. Navnet kan ikke inneholde mellomrom. 3. Navnet kan bare bestå av bokstaver, tall og understrekningstegn. Det er en stor fordel for deg selv og andre som leser koden din at du gir variabelen et beskrivende navn. Navnet kan være ett enkelt ord, for eksempel poeng og fornavn, men av og til er det være lurt med navn som består av flere ord. Da kan vi skille mellom ordene med skrivestilen camelCase. Med camelCase skriver vi den første bokstaven i hvert ord som stor bokstav, med unntak av det første ordet. Eksempler kan være tilfeldigTall eller nySpiller. Alternativt kan vi skille ordene fra hverandre med understrekningstegn, slik:
tilfeldig_tall og ny_spiller.
