Kode 1 (2021) Informasjonsteknologi 1 (kap. 2 og 5) by Cappelen Damm

kode 1 Gløer Olav Langslet Eirik Vågeskar Hossein Rostamzadeh Petter Bae Brandtzæg Eirik Solheim

Informasjonsteknologi 1 Studiespesialiserende programfag vg2/vg3 BOKMÅL

Tekniske tegninger: Terje Sundby/Keops Omslagsdesign: Anders Bergesen / Superultraplus Designstudio Grafisk formgiving: Kristine Steen / 07 Media Forlagsredaktør: Henning Vinjusveen Myhrehagen Sats: Jannicke Pedersen / Type-it AS, Trondheim Trykk og innbinding: Livonia Print SiA, Latvia 2021

Kode 1 følger læreplan (LK20) i informasjonsteknologi 1 programfag i utdanningsprogram for studiespesialisering fra 2020. Materialet i denne publikasjonen er omfattet av åndsverklovens bestemmelser. Uten særskilt avtale med Cappelen Damm AS er enhver eksemplarfremstilling og tilgjengeliggjøring bare tillatt i den utstrekning det er hjemlet i lov eller tillatt gjennom avtale med Kopinor, interesseorgan for rettighetshavere til åndsverk. Utnyttelse i strid med lov eller avtale kan medføre erstatningsansvar og inndragning, og kan straffes med bøter eller fengsel.

www.cdu.no www.kode.cdu.no

FORORD Kode 1 er en lærebok skrevet for informasjonsteknologi 1, programfag for studiespesialiserende utdanningsprogram. Til boka hører et gratis elevnettsted: kode.cappelendamm.no. Læreboka og nettstedet dekker hele læreplanen i informasjonsteknologi 1 med bruk av HTML, CSS og JavaScript med rammeverket Svelte. Totalt består boka av ni kapitler. Hvert kapittel avsluttes med en oppgavedel der du kan utvikle kompetansen din gjennom problemløsning. Kapittel 1–3 handler om å lage nettsider med HTML- og CSS-kode. I kapittel 4 tar vi for oss de viktigste komponentene i datamaskiner og nettverk og forklarer hvordan bilder, lyd og video representeres digitalt. Programmering med JavaScript, lagring av data og algoritmisk tenkning utgjør kapitlene 5–7. I kapittel 8 trekker vi frem sosiale medier som et eksempel på hvordan informasjonsteknologi påvirker individ og samfunn. Bokas siste kapittel tar for seg sikkerhet og regelverk knyttet til informasjonsteknologi. Hvert kapittel starter med en oversikt over hvilke kompetansemål som behandles i kapittelet. Teorien er bygget opp med forklarende tekst og eksempler som belyser teorien. All kode fra eksemplene ligger også tilgjengelig på elevnettstedet. Viktige ord er satt i halvfet slik at du lett skal finne dem igjen. Underveis i teksten finner du faktarammer. Dette er innhold du bør lære deg godt. Du vil også finne diskusjonsspørsmål. Disse kan gjennomføres med medelever, eller som individuell oppgave. Det er lurt å tenke gjennom spørsmålene før du leser videre. Innimellom dukker det også opp rammer med Ekstrastoﬀ. Dette er innhold du bør lese, men det er ikke alltid noe du skal bruke videre med en gang. Etter teoridelen finner du et sammendrag. I denne læreboka har vi lagt vekt på at du raskt skal komme i gang med kodingen. På slutten av hvert kapittel finner du derfor en oppgavedel. Når du løser disse oppgavene, får du god trening i programmering og algoritmisk tenkning. Oppgavene er markerte med én–tre prikker som indikerer vanskelighetsgrad, kompleksitet og kompetansenivå. Lykke til med informasjonsteknologi 1! Hilsen forfatterne

INNHOLD

1 Lage nettsider med HTML 1.1 Kode nettsider med HTML

3 Universell utforming og design av nettsider

1.2 Tekst

3.1 Universell utforming

1.3 Bilder

3.2 Fra skisse til nettside

1.4 Lyd og video

3.3 Størrelser og enheter

1.5 Lenker og nøstede HTML-elementer

3.4 Bakgrunnsbilder som fyller

1.6 Tabeller

hele nettleseren

101

1.7 Skjemaer

3.5 Layout med flex-box

103

Sammendrag

3.6 Layout med grid

111

Oppgaver

Sammendrag

122

Oppgaver

123

2 CSS endrer utseendet til nettsiden

4 Datamaskiner, data og nettverk

2.1 CSS i et HTML-element

4.1 Datamaskiner

130

2.2 CSS i eget style-element

4.2 Binære tall – bit og byte

136

2.3 Utseendet til tekst

4.3 Bilder består av bildepunkter

141

2.4 Utseendet til bilder

4.4 Tegnsett

148

2.5 Selektor med id eller class

4.5 Digitale lydopptak

150

2.6 Pseudoselektor og pseudoklasser

4.6 Video og animasjon

156

2.7 Kombinasjoner av selektorer

4.7 Kommunikasjon mellom

og tabeller

digitalt utstyr

158

Sammendrag

164

Oppgaver

165

5 Programmering med Javascript

7.3 Mønstre og logikk

284

7.4 Evaluering

293

5.1 Programmeringsspråket Javascript

168

7.5 Arbeidsmåter

299

5.2 Tekst og tall

176

7.6 Algoritmer og etikk

311

5.3 Interaktive nettsider

179

Sammendrag

315

5.4 Valgsetninger

187

Oppgaver

316

5.5 Andre egenskaper og sannheter om tekst

194 198

8 Sosiale medier

Sammendrag

208

8.1 Sosiale medier

326

Oppgaver

210

8.2 Konsekvenser og muligheter

330

5.6 Funksjoner

8.3 Etiske normer – forventet oppførsel på Internett 8.4 Din risiko på Internett

6 Lister og datastrukturer

333 337

6.1 Lagre data med array

224

Sammendrag

345

6.2 Lagre data i objekter

234

Oppgaver

346

6.3 Lagre data i JSON-filer

243

6.4 Kom i gang med data-api

250

6.5 Lagring av data

256

9 Sikkerhet og regelverk

Sammendrag

260

9.1 Risikoen for angrep øker

350

Oppgaver

262

9.2 Informasjonssikkerhet

354

9.3 Sikkerhet og personvern

357

9.4 Regelverk

361

7 Algoritmisk tenkning 7.1 Algoritmisk tenkning og algoritmer

272

7.2 Dekomposisjon og abstraksjon

278

Sammendrag

367

Oppgaver

368

2 CSS endrer utseendet til nettsiden KOMPETANSEMÅL I dette kapittelet utvikler du kompetansen din i følgende kompetansemål: > utvikle nettsider ved hjelp av markeringsspråk > utforske, strukturere og kommentere programkode

2.1 CSS i et HTML-element CSS = Cascading Style Sheet = gjennomgripende stilark

MED CSS ENDRER VI UTSEENDET TIL EN NETTSIDE I 1990-årene tok nordmannen Håkon Wium Lie i bruk markeringsspråket HTML og laget nettsider. Han syntes ikke at utseendet på nettsidene han laget var helt bra. Lie la derfor frem den første versjonen av CSS i 1994. På de aller fleste nettsider i dag brukes stilformateringsspråket CSS til å kontrollere nettsidenes utseende. CSS er, som HTML, videreutviklet siden det ble lansert og tatt i bruk. Dagens versjon av HTML er HTML5, og dagens versjon av CSS heter CSS3. CSS er et svært omfattende formateringsspråk med hundrevis av muligheter. CSS kan brukes til alt fra å bestemme utseendet på en overskrift til å styre hvordan innholdet på nettsteder skal plasseres. Innholdet på en nettside skal gjerne være lett å lese og ha et tiltalende utseende. Med CSS kan vi endre utseende på for eksempel skriftstørrelser, skrifttyper og plassering av HTML-elementer. Vi kan bruke tre ulike metoder. Den første går ut på å legge inn CSS-kode direkte i et HTML-element. Den andre er å legge CSS-koden inn i et eget style-element. Den siste metoden går ut på å legge CSS-koden i en egen fil.

CSS endrer utseendet til nettsiden

Et nettsted, med og uten CSS.

Vi bruker CSS-kode for å endre utseendet på en nettside. Det kan vi gjøre på tre ulike måter: 1. legge inn attributtet style i starttaggen til et HTML-element 2. legge inn CSS-kode et eget style-element 3. lage en egen fil med CSS-kode

Uten CSS er fargen på teksten svart.

ATTRIBUTTET STYLE I STARTTAGGEN TIL ET HTMLELEMENT Hvis vi ønsker å endre utseendet på ett enkelt HTML-element, kan vi skrive CSS-kode ved å bruke attributtet style i starttaggen til dette HTML-elementet. Hvis en overskrift skal gjøres grønn, legger vi inn CSS-koden i starttaggen til h1-elementet med attributtet style. Hvis en tekst skal gjøres blå, legger vi inn CSS-koden i starttaggen til dette p-elementet med attributtet style. Det vi velger, definerer utseendet til dette ene HTML-elementet. Dette kaller vi for stil.

Vi kan endre utseendet på et HTML-element ved å bruke attributtet style. Style = stil

1 <body> 2 <h1 style="egenskap: verdi;">Min overskrift</h1> 3 </body>

Kapittel 2

Egenskap og verdi skal alltid stå i anførselstegn og avsluttes med semikolon "…;". I tabellen nedenfor finner du fire egenskaper du kan velge mellom. For eksempel kan vi endre farge på overskriften med egenskapen color og verdien green, slik: 1 2 3

<body> <h1 style="color: green;">Min overskrift</h1> </body>

Med CSS bestemmer vi fargen på overskriften.

fil:///IT1/Kode1/Kap2/nyheter.html

Min overskrift

Du kan også lage en bakgrunnsfarge. Koden for det er 1 2 3

farge = green, white, red, orange, grey, pink, blue, lightblue osv.

<body> <h1 style="background-color: green;">Min overskrift</h1> </body>

EGENSKAP: VERDI

Forklaring

color: farge;

farge på teksten

background-color: farge;

farge på bakgrunnen

margin: antall px;

marg rundt HTML-elementet

padding: antall px;

fyll inni HTML-elementet

Når du skal endre farge på både tekst og bakgrunn på et HTML-element, må du ha semikolon (;) mellom dem. Vi setter inn stilen, som består av to egenskaper og verdier for disse, etter attributtet style, slik: <h1 style="background-color: green; color: white;">Min overskrift</h1>

Anførselstegnene gjelder for hele stilen til overskriften. Med CSS bestemmer vi fargen på både overskriften og bakgrunnen.

fil:///IT1/Kode1/Kap2/nyheter.html

Min overskrift

CSS endrer utseendet til nettsiden

EKSEMPEL Skriftfarge og bakgrunnsfarge En overskrift skal stå med bakgrunnsfargen lightgrey og ha skriftfargen red. Vi legger inn CSS-koden i starttaggen i h1-elementet med attributtet style. Vi skal også ha et p-element med blå tekst. 1 <!doctype html> 2 <html lang="no"> 3 4 5 6 7 8 9 10 11

fil:///IT1/Kode1/Kap2/nyheter.html

<head> <meta charset="UTF-8"> <title>CSS</title> </head> <body> <h1 style="background-color: lightgrey; color: red;">Høstferie</h1> <p style="color: blue;">Vi reiser til Sirdalen i høstferien.</p> </body> </html>

Alle HTML-elementer kan sammenlignes med en boks.

Høstferie Vi reiser til Sirdalen i høstferien

Vi har endret både skriftfarge og bakgrunnsfarge. Bakgrunnsfargen strekker seg til høyre og fyller hele bredden.

PADDING OG MARGIN I eksempelet ovenfor er overskriften nesten like stor som bakgrunnen. Alle HTMLelementer kan sammenlignes med en boks. Med stilen padding kan vi legge inn et mellomrom mellom kanten av boksen og teksten, slik at det fargede feltet blir større. CSS-koden er padding: antall px. Størrelsen på mellomrommet bestemmes av et visst antall bildepunkter, det vil si piksler. Hvis vi vil at en overskrift skal ha lysegrå bakgrunnsfarge og litt avstand til kantene, legger vi inn stilen slik: 1 <body> 2 <h1 style="padding: 15px; background-color: lightgrey;"> Min overskrift</h1> 3 </body>

Avstanden fra kanten på boksen til skriften er 15 piksler.

fil:///IT1/Kode1/Kap2/nyheter.html

Min overskrift

Egenskapen margin bruker vi for å skape marg rundt boksen. Hvis et HTML-element har stilen margin, vil det oppstå avstand rundt HTML-elementet. Hvis det er flere HTML-elementer, vil margin føre til at andre HTML-elementer ikke kommer nærmere enn bredden på margen.

Kapittel 2

EKSEMPEL Marg rundt flere bilder fil:///IT1/Kode1/Kap2/bilder.html

Med HTML-kode legger vi inn seks bilder på en nettside med img-elementet. Det skal være litt avstand mellom alle bildene. Vi bruker derfor egenskapen margin for hvert av bildene ved å skrive margin: 15px; inni starttaggen til img-elementet. Legg merke til at attributtene style og img ikke kan dele anførselstegn. 1 <body> 2 <img style="margin: 15px;" src="blomst.jpg"> 3 <img style="margin: 15px;" src="katt.jpg"> 4 <img style="margin: 15px;" src="kjemi.jpg">

<img style="margin: 15px;" src="mat.jpg"> <img style="margin: 15px;" src="fugl.jpg"> 7 <img style="margin: 15px;" src="blader.jpg"> 8 </body> 5 5

Avstanden mellom bildene er 30 piksler siden det er 15 piksler marg rundt hvert bilde.

ATTRIBUTTET STYLE I BODYELEMENTET Alle de synlige HTML-elementene nettsiden din består av, ligger mellom taggene <body>…</body>. Hvis du ønsker at et utseende skal gjelde for hele nettsiden, setter du inn attributtet style i starttaggen <body>.

Vi bestemmer utseendet på alt som ligger i den synlige delen av nettsiden, ved å legge inn attributtet style i body-elementet: <body style="egenskap: verdi;"></body>

EKSEMPEL Bakgrunnsfarge og padding for hele nettsiden Vi har en nettside med en overskrift <h1> og et tekstavsnitt <p>. Hele nettsiden skal være lysegrønn, så vi bruker bakgrunnsfarge på body-elementet. Det skal være litt avstand fra kanten av bodyelementet til teksten, så vi bruker padding i body-elementet. 1 <!DOCTYPE html> 2 <html lang="no"> 3 4 5 6 7 8 9

10 11

<head> <meta charset="UTF-8"> <title>CSS</title> </head> <body style="background-color: lightgreen; padding: 80px;"> <h1>Skidag på <mark>Stryn</mark></h1> <p>Vi våknet til strålende sol og satte kursen mot Stryn skisenter for årets skidag. På bussen var stemningen på topp. Vi sang og gledet oss. </p> </body> </html>

CSS

fil:///IT1/Kode1/Kap2/farger.html

Skidag på Stryn Vi våknet til strålende sol og satte kursen mot Stryn skisenter for årets skidag. På bussen var stemningen på topp. Vi sang og gledet oss.

Bakgrunnsfarge og padding i et body-element endrer hele nettsiden.

CSS endrer utseendet til nettsiden

2.2 CSS i eget style-element Vi legger style-elementet inni head-elementet.

SELEKTOR Til nå har vi lagt inn CSS-kode i de enkelte HTML-elementene. Men som regel ønsker vi å endre utseendet på flere HTML-elementer av en bestemt type. Vi gjør dette ved å opprette et eget style-element som vi legger inni head-elementet. Der bestemmer vi stilen, altså hvordan overskrifter, avsnitt, lister osv. i HTML-koden skal se ut.

Vi velger hvilket HTML-element vi skal endre utseendet på med en selektor. 1 <style> 2 3 4 5 6

Tegnene { og } heter krøllparenteser. Du kan også kalle dem «barter»

/* Vi kommenterer CSS-kode slik */ selektor { egenskap1: verdi; egenskap2: verdi; } </style>

En selektor sier hvilket HTML-element stilen skal gjelde for. For eksempel vil selektoren body gjøre at alt i body-elementet får et bestemt utseende. Selektoren h1 gjør at alle overskrifter i <h1> får et bestemt utseende, og selektoren p gjør at all tekst i <p> får et bestemt utseende. Selektoren img velger bilder.

1 <style> 2 img { 3

egenskap: verdi; } 5 </style> 4

Kapittel 2

Etter selektoren og mellom krøllparentesene { og } skriver vi inn egenskaper og verdier. Du har allerede sett noen av egenskapene vi kan bruke, som color, background-color, margin og padding. Verdiene har du også sett; for farger brukte vi navn som green, lightgreen, blue osv. For margin og padding brukte vi antall bildepunkter, for eksempel 22px.

CSS i eget style-element – endrer bestemte HTML-elementer: Egenskaper er: color background-color margin padding

1. Lag HTML-koden uten CSS. 2. Velg HTML-elementet stilen skal gjelde for. 3. Opprett en selektor til HTML-elementet. Legg inn CSS-koden i et style-element i head-elementet. 4. Deretter bestemmer du hvilke egenskaper du vil bruke, og verdien. Det skrives inn mellom klammene { … }.

1 <style> 2 selektor{ 3

egenskap:verdi; } 5 </style> 4

EKSEMPEL Endre utseende på overskrift og tekst Teksten vi bruker, er et utdrag fra Et dukkehjem av Henrik Ibsen. Vi vil ha ett bestemt utseende på overskriftene og ett på teksten. Selektoren h1 definerer hvordan overskrifter av typen <h1> skal se ut. Selektoren p definerer hvordan teksten i avsnittet skal se ut. 1 <!DOCTYPE html> 2 <html lang="no"> 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25

<head> <meta charset="UTF-8"> <title>Ibsen</title> <style> h1 { color: lightcyan; background-color: purple; padding: 20px; } p { color: white; background-color: steelblue; padding: 20px; } </style> </head> <body> <h1>HELMER:</h1> <p>Du elsker meg ikke mer.</p> <h1>125$ </h1> <p>Nei, det er just tingen.</p> </body> </html>

Ibsen

fil:///IT1/Kode1/Kap2/farger.html

HELMER: Du elsker meg ikke mer.

NORA: Nei, det er just tingen.

Resultatet av koden er at alle overskrifter ser like ut, og alle tekstavsnitt får samme utseende.

CSS endrer utseendet til nettsiden

HIERARKI AV STILER Et HTML-element som ligger inne i et annet, får automatisk stilen til HTML-elementet det ligger inne i. Hvis du setter skriftfargen i selektoren body til å være blå, vil alle HTML-elementer inni body-elementet også bli blå. I koden nedenfor har vi med selektoren body bestemt utseende på alt som ligger inne i body-elementet. 1 <head> 2 <meta charset="UTF-8"> 3 <title>CSS</title> 4 5 6 7 8 9 10 11 12 13

CSS

fil:///IT1/Kode1/Kap2/farger.html

HELMER: Du elsker meg ikke mer.

Men du kan velge å ha en annen farge for noen HTML-elementer. Hvis du definerer en stil for h1 som sier at den skal være grønn, vil denne stilen overstyre stilen til selektoren body. Jo mer spesifikk selektoren er, jo sterkere er den. 1 <head> 2 <meta charset="UTF-8"> 3 <title>CSS</title> 4 5 6 7 8 9 10 11 12 13 14 15 16

CSS

fil:///IT1/Kode1/Kap2/farger.html

HELMER: Du elsker meg ikke mer.

Resultatet av koden er at overskriften får stilen til selektoren h1, ikke stilen til selektoren body.

Stilen for body er generell og gjelder for alt som ligger inne i body-elementet. Stilene som settes for de enkelte HTML-elementene inne i body-elementet, er mer spesifikke og vil overstyre stilen til body.

Kapittel 2

2.3 Utseendet til tekst EGENSKAPER FOR TEKST Teksten på en nettside kan ha mange forskjellige skrifttyper, og størrelsen på skriften varierer på ulike nettsteder. Det er mye som avgjør om en nettside er god og lettlest eller ikke. Nettsider med liten skriftstørrelse er for eksempel ikke lettleste. Tabellen på neste side viser de mest brukte egenskapene for tekst. Noen av disse har du allerede brukt.

En god og lettlest nettside?

Når du lager nettsider, må du tenke på: 1. Er overskriftene tydelige? 2. Er teksten lett å lese? 3. Hvilken skriftstørrelse, skriftfarge og skrifttype passer best?

Som regel bør du velge en farge på teksten som står i kontrast til bakgrunnen. Hvis det ikke er mulig, kan en løsning på dette være å legge skygge bak teksten, slik at den blir lettere å lese. Egenskapen text-shadow kan brukes til det. CSS-koden ser slik ut: text-shadow: [lengde til høyre] [lengde under] [uttoning av skygge] [farge på skygge];

CSS endrer utseendet til nettsiden

Egenskap color font-size font-family line-height margin margin-top margin-right margin-bottom margin-left text-align

text-shadow

Forklaring farge på teksten størrelse på teksten skrifttype på teksten avstand mellom tekstlinjer marg rundt teksten marg over, til høyre, under eller til venstre for teksten horisontal plassering av tekst

skygge bak tekst

Eksempel color: darkorange; font-size: 14px; font-family: verdana; line-height: 1.5; margin: 20px; margin-bottom: 30px;

text-align: center; text-align: left; text-align: right; text-shadow: 3px 2px 3px black;

EKSEMPEL Tekst – endre farge, størrelse og skrifttype Vi ønsker at all teksten skal være av typen Georgia. Linjeavstanden i avsnittene skal være halvannen. Fontstørrelsen skal være 22 piksler i overskrifter på nivå 1 og 18 piksler på nivå 2. Fargen skal være mørkegrå i avsnittene og mørkegrønn i overskriftene. Vi vil ha skygge på overskriften <h1>. Skyggen skal være 2 piksler lang til høyre for teksten og 3 piksler lang under teksten, og den skal ikke tones ut. Fargen på skyggen skal være darkslateblue. 1 <head> 2 <meta charset="UTF-8"> 3 <title>Ibsen</title> 4 <style> 5 body { 6 font-family: Verdana; 7 } 8 h1 { 9 font-size: 22px; 10 color: red; 11 text-shadow: 2px 3px 0 darkslateblue; 12 } 13 h2 { 14 font-size: 18px; 15 color: rebeccapurple; 16 } 17 p { 18 font-family: Georgia; 19 font-size: 14px; 20 color: darkslategray; 21 line-height: 1.5; 22 margin-bottom: 20px; 23 } 24 </style> 25 </head> 26 <body> 27 <h1>Et dukkehjem</h1> 28 <h2>$Y +HQULN ,EVHQ</h2> 29 <p>HELMER: Du taler som et barn. Du forstår ikke det samfunn

du lever i.</p> <p>125$ 1HL GHW JM¡U MHJ LNNH 0HQ Qn YLO MHJ VHWWH PHJ LQQ i det. Jeg må se å komme etter hvem som har rett, samfunnet eller jeg.</p> 31 <p>HELMER: Du er syk, Nora, du har feber, jeg tror nesten du er fra sans og samling.</p> 32 <p>125$ -HJ KDU DOGUL I¡OW PHJ Vn NODU RJ VLNNHU VRP L QDWW </p> 33 </body> 30

fil:///IT1/Kode1/Kap2/etdukkehjem.html

Et Et dukkehjem dukkehjem Av: Henrik Ibsen HELMER: Du taler som et barn. Du forstår ikke det samfunn du lever i. NORA: Nei, det gjør jeg ikke. Men nå vil jeg sette meg inn i det. Jeg må se å komme etter hvem som har rett, samfunnet eller jeg. HELMER: Du er syk, Nora, du har feber, jeg tror nesten du er fra sans og samling. NORA: Jeg har aldri følt meg så klar og sikker som i natt.

Nettsiden har nå fått stil med CSS-kode.

Kapittel 2

WEBSIKRE OG GENERISKE SKRIFTTYPER Verdiene vi har satt for egenskapen font-family, har til nå vært skrifttypene Georgia og Trebuchet MS. De er begge en del av et sett med skrifttyper som defineres som websikre. Det vil si at skrifttypene er installert på de mest kjente operativsystemene, som Windows, Mac, Linux, Android og iOS. Når du bruker tekstbehandleren din, kan du velge fra et stort sett med skrifttyper. De er installert på din datamaskin. Men det er ikke dermed sagt at alle andre har den skrifttypen installert som du velger å bruke. Derfor bør du holde deg til de websikre skrifttypene.

Websikre skrifttyper er installert i de mest kjente operativsystemene.

Websikre skrifttyper: Arial Courier New Georgia Times New Roman Trebuchet MS Verdana

Generiske skrifttyper: serif sans-serif monospace cursive fantasy

AA Bokstaven A med og uten seriﬀer.

Hvis du velger en skrifttype som ikke er websikker, kan du definere at en annen skrifttype skal vises i stedet, hvis den som ser nettsiden, ikke har installert den første skrifttypen. I CSS definerer vi skrifttype og alternative skrifttype ved å skrive dem etter hverandre med et komma mellom, slik: font-family: "websikker skrifttype", "websikker skrifttype";. For eksempel: font-family: Chalkboard, Verdana;. Hvis ikke skrifttypen Chalkboard er installert på maskinen til den som ser nettsiden, bruker maskinen Verdana i stedet. Hva så om heller ikke Verdana er installert på maskinen? Det er det liten sjanse for, men det er vanlig å definere en tredje skrifttype til slutt hvis alt annet skulle feile. Vi har fem såkalte generiske skrifttyper: serif, sans-serif, monospace, cursive og fantasy. Nettleseren velger en generisk skrifttype hvis ikke noen av de andre skrifttypene kan vises. For eksempel: font-family: Georgia, "Times New Roman", serif;. Hvis verken Georgia eller Times New Roman er tilgjengelige, velger nettleseren en skrifttype med seriffer. Seriffer er streker som står på tvers av de rette linjene i en bokstav. De brukes ofte i trykk, som i aviser og bøker. Digital tekst bruker vanligvis bokstaver uten seriffer.

CSS endrer utseendet til nettsiden

EKSEMPEL Webfonter Når du skal lage nettsider, fins det et alternativ med skrifttyper som kalles webfonter. Webfonter er skrifttyper som vi legger ved nettsiden, omtrent slik du setter inn et bilde på en nettside. Siden ikke alle maskiner har installert de skrifttypene som trengs, refererer du til hvor på Internett skrifttypen du har valgt, er å finne. Google Fonts har en stor samling av webfonter vi kan bruke. Kom i gang med Google Fonts Gå inn på nettsiden til GoogleFonts: https://fonts.google.com/ Velg en skrifttype. Kopier koden og lim den inn i et HTML-dokument. 1 <link href= KWWSV IRQWV JRRJOHDSLV FRP FVV"IDPLO\ $UFKLWHFWV 'DXJKWHU rel="stylesheet"> 2 <style> body { 3 4 5

font-family: $UFKLWHFWV 'DXJKWHU , cursive; text-align: center;} </style>

Du kan nå bruke skrifttypen $UFKLWHFWV 'DXJKWHU slik du bruker andre skrifttyper på nettsiden. For å midtstille teksten bruker vi text-align: center;

2.4 Utseendet til bilder EGENSKAPER TIL BILDER I kapittel 1 om HTML lærte du å sette inn bilder på en nettside med koden <img VUF ¿OQDYQ MSJ !. Med CSS kan vi blant annet sette ramme på bildene, legge skygger bak dem og bruke filter til å endre utseendet. Vi kan også endre størrelsen på bilder og sette marger på dem, så de får en bestemt avstand fra andre elementer på nettsiden. Tabellen nedenfor viser de mest brukte egenskapene for bilder. Med CSS kan vi endre utseendet til bilder.

Egenskap

Forklaring

height

høyden på bildet

width

bredden på bildet

border

ramme rundt bildet

margin

marg rundt bildet

box-shadow

skygge bak bildet

¿OWHU

eﬀekter på bildet

REMHFW ¿W

tilpasse bredde og høyde

Kapittel 2

RAMME INN BILDER MED KANTLINJER En ramme består av kantlinjer rundt et bilde. Egenskapen border brukes til å ramme inn et bilde. Når du skal ramme inn et bilde, må du angi tykkelsen på rammen (border-width), hva slags ramme det skal være (solid, dashed, dotted), og hva slags farge rammen skal ha (border-color). Egenskap

Forklaring

Eksempel

border-width

tykkelse på rammen

border-width: 10px;

border-style

heltrukket ramme stiplet ramme prikket ramme

border-style: solid; border-style: dashed; border-style: dotted;

border-color

farge på rammen

border-color: darkorange;

border-radius

avrunding av rammen

border-radius: 5px;

EKSEMPEL Å ramme inn et bilde Med HTML setter vi nå inn et bilde på en nettside. Med CSS setter vi bredden på bildet og en ramme rundt bildet. HTML-koden har: <img src="katten.jpg"> 1 <style> 2 img {

width: 300px; border-style: solid; border-color: lightblue; border-width: 15px;

3 4 5 6 7

}

8 </style>

Med border-radius kan du runde av hjørnene på rammen. Verdien du angir, kan være antall piksler fra hjørnene der avrundingen begynner. Koden border-radius: 8px; vil starte avrundingen av rammen 8 piksler fra hjørnene. Avrunding av hjørnene kan også settes med prosentverdier. Hvis du bruker 50 prosent, vil avrundingen begynne akkurat midt på rammen, både i høyden og bredden. Hvis bildet er kvadratisk, får du en sirkelrund ramme. Hvis bildet ikke er kvadratisk, får du en ramme som er formet som en ellipse.

Resultatet av koden er en blå ramme rundt bildet.

Avrundede kanter med borderradius: 8px; til venstre og border-radius: 50% til høyre.

CSS endrer utseendet til nettsiden

KORTFORM Verdiene til egenskapene border-style, border-color og border-width kan vi samle i en kortform der vi angir verdiene til alle de tre egenskapene på én linje. Der du ser en bindestrek i en egenskap, fins det alltid en kortform hvor du kan angi alle egenskapene på én linje. Kortformen for å beskrive rammen i eksempelet ser slik ut: border: 15px solid lightblue;

Egenskaper med bindestrek har en kortform, altså en forkortelse av en lengre kode.

BREDDE OG HØYDE Hvis du tenker på img-elementet som en ramme hvor du setter inn et bilde, er det lett å se for seg at rammen må være akkurat like bred og høy som bildet for å passe inn. Med width og height kan du sette bredde og høyde på den rammen bildet skal inn i. Hvis bredden og høyden ikke samsvarer med formatet i bildefilen, vil bildet strekkes ut enten i bredden eller i høyden for å passe inn. Her har vi satt width = 600px og length =3 00px. Dette

bildet er opprinnelig ikke dobbelt så bredt som det er høyt. Dermed strekkes det ut for å fylle rammen.

Med CSS-egenskapen REMHFW ¿ W, kan du bestemme hvordan bildet skal fylle rammen. Vil du at bildet skal fylle hele rammen, eller er det viktig at hele bildet vises? Det bestemmer du med hvilken verdi du setter for egenskapen REMHFW ¿ W. Men skal bildet fylle hele rammen uten å strekkes ut i én retning, må det beskjæres, slik at ikke hele bildet blir synlig. Med CSS-egenskapen object-position kan du bestemme hvilken del av bildet som skal være synlig inne i rammen.

Kapittel 2

CSS-kode

Forklaring

REMHFW ¿ W FRYHU

Bildet dekker hele rammen.

REMHFW ¿ W FRQWDLQ

Hele bildet vises i rammen.

REMHFW ¿ W FRQWDLQ object-position: left top;

Hele bildet vises til venstre i rammen.

REMHFW ¿ W FRYHU object-position: center -250px;

Bildet dekker hele rammen, vi kutter de øverste 130 pikslene for å få med armene.

Resultat

Mulige egenskaper for REMHFW ¿ W er: ¿ OO, contain, cover, none og scale-down. Med object-position kan du bestemme hvor bildet skal plasseres horisontalt og vertikalt. For den horisontale posisjonen i rammen kan du angi left, center og right, eller du kan oppgi en lengde, for eksempel antall piksler. Hvis denne lengden er negativ, vil venstre del av bildet forsvinne ut av rammen. For den vertikale posisjonen i rammen kan du angi top, center og bottom, eller du kan oppgi en lengde. Hvis denne lengden er negativ, vil øvre del av bildet forsvinne ut av rammen.

CSS endrer utseendet til nettsiden

EKSEMPEL Vise en bestemt del av et bilde På en nettside skal du sette inn et bilde, men det skal ha en bestemt bredde og høyde. Bildet du har, passer ikke inn, så du må bruke REMHFW ¿ W RJ REMHFW SRVLWLRQ til å tilpasse hvor i rammen bildet skal plasseres. Du prøver å flytte bildet med object-position: right bottom for å få med kjæresteparet, men da får du bare med

Opprinnelig bilde. Du ønsker å ha med kjæresteparet, og det betyr at nedre høyre hjørne må være med inne i rammen. Med REMHFW ¿ W QRQH vil bildet vises i opprinnelig størrelse, men det er sentrert, så kjæresteparet kommer ikke med i det hele tatt.

beina, siden bildet er ganske stort i sin opprinnelige størrelse. Med object-position: right -880px flytter du den nederste delen ut av rammen. Det ser ut til å passe bra for akkurat dette bildet. Prøv deg frem med forskjellige verdier for REMHFW ¿ W RJ REMHFW SRVLWLRQ for å få det akkurat som du vil ha det. 1 <img src="turtelduer.jpg"> 2 <style> 3 img { 4 5 6 7 8

}

width: 600px; height: 300px; border: 1px solid black; REMHFW ¿ W none; object-position: right -880px;

10 </style>

Med koden får vi et fint utsnitt av kjæresteparet.

40 px

20 px

10 px

30 px

Du kan ha forskjellig marg på hver side av et HTML-element.

MARGER RUNDT BILDER Hvis vi ønsker å ha plass rundt et bilde, kan vi sette på en marg. CSS-koden margin: 20px gir en marg på 20 piksler rundt et bilde (eller et annet HTML- element). På samme måte som border er også margin på kortform. Vi kan sette individuelle marger i fire retninger: margin-top, margin-right, margin-bottom og margin-left. Hvis du bruker kortformen, skriver du den første verdien som lager marg, ovenfor et element, den neste er til høyre, så under og til slutt til venstre. Verdiene følger altså klokken og starter på klokken 12.00. CSS-koden margin: 10px 20px 30px 40px; betyr: 10px over, 20px til høyre, 30px under og 40px til venstre.

Vi legger inn en marg rundt et bilde, slik: margin: [marg over] [marg til høyre] [marg under] [marg til venstre];

Kapittel 2

EKSEMPEL Bilder med marger Vi fortsetter på eksempelet på s. 50 og legger inn fem nye bilder. Med CSS setter vi nå inn marg til høyre og under alle bildene. 1 <style> 2 img { 3 width: 300px; 4 border-style: solid; 5 border-color: lightblue; 6 border-width: 15px; 7 margin-right: 20px; 8 margin-bottom: 10px; 9 } 10 </style>

Margen er på 20 piksler til høyre for hvert bilde og 10 piksler under.

SKYGGER BAK BILDER Med CSS kan vi definere hvordan et bilde eller et annet HTML-element skal kaste skygge. Det kan gi en fin visuell eﬀekt på nettsiden. Egenskapen box-shadow brukes til dette. Vi setter fire verdier: hvor langt skyggen skal strekke seg til høyre for bildet, hvor langt den skal strekke seg under bildet, hvor langt fra kanten av skyggen den skal tones ut, og til slutt hvilken farge skyggen skal ha. Hvis skyggen skal falle til venstre for bildet, setter vi en negativ verdi for lengden. Det samme kan vi gjøre hvis skyggen skal gå over bildet. Vi legger inn skygger, slik: box-shadow: [lengde til høyre] [lengde under] [lengde på uttoning] [farge];

EKSEMPEL Bilde med skygge I dette eksempelet skal vi bruke box-shadow, slik at et bilde på nettsiden kaster skygge til høyre og under seg. Skyggen skal falle 20 piksler til høyre og 10 piksler under, være svart og tones ut langs de siste 5 pikslene. 1 <style> 2 img { 3

box-shadow: 20px 10px 5px black; } 5 </style> 4

1 img { 2 box-shadow: -20px 10px 0 indigo; 3 }

Vil vi ha skyggen til venstre, uten at fargen (indigo) tones ned:

Eller vi kan legge skyggen rett bak bildet og samtidig tone ut skyggen: 1 img { 2 box-shadow: 0px 0px 5px indigo; 3 }

CSS endrer utseendet til nettsiden

Med CSS kan vi la et bilde kaste flere skygger. Det kan vi for eksempel bruke til å oppnå enkle tredimensjonale eﬀekter. For å få til dette definerer vi flere sett med verdier for egenskapen box-shadow. De siste legger seg under dem som er foran. box-shadow: [første skygge], [andre skygge], ... , [siste skygge];

EKSEMPEL Skygger i regnbuens farger I dette eksempelet skal vi ha regnbuefargene som skygger til et bilde. Vi bruker huskeregelen om at fargene i regnbuen kan kalles roggbif.

1 <style> 2 img { 3 margin: 50px; 4 box-shadow: 4px 2px 0 red, 5 8px 4px 0 orange, 6 12px 6px 0 yellow, 7 16px 8px 0 green, 8 20px 10px 0 blue, 9 24px 12px 0 indigo, 10 28px 14px 0 violet 11 }

EKSTRASTOFF

Filformater for bilder Bilder kommer i forskjellige filformater. De vanligste til bruk på nettsider er av typen PNG, GIF og JPG. • PNG egner seg godt til logoer og enkel grafikk. Deler av bildet kan være helt eller delvis gjennomsiktig. • JPG egner seg godt til fotografier. Kan ikke være gjennomsiktige. • GIF egner seg til enkel grafikk. Deler av bildet kan være gjennomsiktig. GIF kan også brukes til å lage såkalte GIF-animasjoner.

FILTRE PÅ BILDE På mobilen din har du kanskje mulighet til å endre på bilder du har tatt, ved å legge på eﬀekter som gjør bildene om til svart-hvitt, snu fargene som i et røntgenbilde eller bruke andre virkemidler. Dette kan du også gjøre med CSS slik: ¿OWHU HIIHNW YHUGLHU IRU HIIHNW . Du kan også kombinere filtre, slik: ¿OWHU HIIHNW YHUGL HIIHNW YHUGL Egenskap

Forklaring

¿OWHU EOXU S[

uklarhet

¿OWHU EULJKWQHVV

lysstyrke

¿OWHU FRQWUDVW

kontrast

¿OWHU GURS VKDGRZ S[ S[ S[ EOXH

skygge

¿OWHU JUD\VFDOH

tar vekk farger

¿OWHU KXH URWDWH GHJ

endrer fargene

¿OWHU LQYHUW

snur fargene

¿OWHU RSDFLW\

gjennomsiktighet

¿OWHU VDWXUDWH

styrke på fargene

¿OWHU VHSLD

gammeldags

Kapittel 2

EKSEMPEL Bilder med filter Vi skal nå bruke filteret invert til å snu alle fargene i et bilde. Filteret invert snur fargene, omtrent som i et røntgenbilde. CSS-koden ser slik ut: 1 img { 2 ¿ OWHU LQYHUW 100% 3 }

Hvis du bruker et gjennomsiktig PNG-bilde, vil drop-shadow kun legge skygge bak den synlige delen av bildet. Her kombinerer vi sepia og drop-shadow for å oppnå ønsket eﬀekt: 1 2 3 4 5 6 7 8 9 10 11

Til venstre ser du bildet uten filter, til høyre med filteret invert.

Skyggen plasseres til venstre bak bildet og kombineres med en sepia-eﬀekt.

KVADRATER OG SIRKLER Med CSS kan du utforme et kvadrat ved å sette bredden lik høyden på et hvilket som helst HTML-element. En sirkel kan du utforme ved å sette border-radius til 50 prosent på kvadratet. Hvis du bare angir bredden eller høyden på et element, kan du bruke CSS-egenskapen aspect-ratio. Verdien til aspect-ratio er forholdet mellom bredde og høyde. CSS-kode

Forklaring

aspect-ratio: 2/1;

dobbelt så bred som høy

aspect-ratio: 1/1;

kvadratisk

aspect-ratio: 1/3;

tre ganger så høy som bred

aspect-ratio: 1; border-radius: 50%;

sirkel aspect-ratio: 1 gir samme eﬀekt som aspect-ratio: 1/1

Resultat

CSS endrer utseendet til nettsiden

Legg merke til at verdien egentlig er et brøkregnestykke. 2 2 1 1 1 1 1 0.25 4

Du kan altså skrive aspect-ratio: 0.25 hvis bredden skal være en fjerdedel av høyden. Det blir akkurat det samme som å skrive aspect-ratio: 1/4.

EKSEMPEL Et bilde som fyller hele bredden i nettleseren Et bilde som dekker hele bredden til nettleseren, kan gi en fin eﬀekt, og nå skal vi lage nettopp det. Men vi ønsker ikke at bildet skal være så høyt. Med aspect-ratio kan vi bestemme hvor høyt det skal være i forhold til bredden. Hvis vi setter bredden til å være 100 prosent vil bildet dekke hele bredden til nettsiden. Setter vi aspect-ratio til for eksempel 8/1, vil bredden alltid være 8 ganger høyden. Det opprinnelige bildet egner seg egentlig ikke til dette formålet, siden det er ganske høyt. Det beste hadde nok vært å redigere det i et bildebehandlingsprogram, men med CSS og aspectratio og REMHFW ¿W kan vi også få det som vi vil.. 1 <img src="skyline.jpg"> 2 <style> 3 4 5 6 7 8

img { width: 100%; aspect-ratio: 4.5/1; REMHFW ¿W cover; } </style>

Ved å prøve oss frem, fikk vi et ønsket utsnitt med forholdet 4.5/1. Det vil si at bredden til bildet er 4.5 ganger så lang som høyden

Kapittel 2

2.5 Selektor med id eller class I mange tilfeller er det ønskelig å endre utseendet til bestemte HTML-elementer på en nettside. Da kan vi merke HTML-elementene ved å sette attributtene id eller class inn i starttaggene. På den måten får vi en CSS-kode som bare gjelder for disse bestemte elementene.

HASHTAGSELEKTORER MED ID Attributtet id kan vi sette på ett enkelt HTML-element som skal skille seg ut på en nettside. I starttaggen til det elementet vi vil endre utseende på, skriver vi inn id = "idNavn". Selektoren, som finner det elementet som har id = "idNavn", skriver vi som LG1DYQ ^ `, altså med hashtag foran det idNavn som står i starttaggen. Dette navnet velger vi selv. Som før setter vi inn egenskaper og verdier mellom krøllparentesene { og }. Vi legger som vanlig inn stilen mellom style-taggene.

Hashtag-selektor velger ett enkelt HTML-element med en id:

idNavn er et navn du velger selv.

1 <style> 2 LG1DYQ { 3 egenskap: verdi; 4 }

Vi legger inn en id i det ene HTML-elementet stilen skal gjelde for: 1 <body> 2 <h1 id="idNavn">…</h1> 3 </body>

5 </style>

PUNKTSELEKTORER MED CLASS Attributtet class kan vi sette på flere HTML-elementer som skal ha et bestemt utseende. I de HTML-elementene vi vil endre, skriver vi inn attributtet class = "classNavn". I selektoren forteller vi hvordan alle elementene med class = "classNavn" skal se ut. Selektoren angir vi nå som .classNavn, altså med et punktum. Navnet på classNavn velger vi selv.

Punkt-selektor velger flere HTML-elementer med class: 1 <style> 2 .classNavn { 3 egenskap: verdi; 4 } 5 </style>

Vi legger inn class i alle HTML-elementene som stilen skal gjelde for: 1 <body> 2 <h1 class="classNavn">…</h1> 3 <p class="classNavn">…</p> 4 </body>

CSS endrer utseendet til nettsiden

EKSEMPEL Selektor med id og selektor med class I dette eksempelet har vi fire ulike bilder. Vi ønsker at ett av bildene skal være firkantet med en liten avrunding. Dette bildet gir vi en id, som er id="hovedbilde". De andre tre bildene skal være runde, så vi gir dem en FODVV UXQGW%LOGH i starttaggen til hvert bilde som skal være rundt. Med CSS får vi avrunding av kantene på bildene med border-radius: 50%;.

1 <head> 2 <title>Kjente byer</title> 3 <style> 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

Kjente byer

21 22 23 24 25

img { margin-right: 10px; border: 2px solid orange; } KRYHGELOGH { border-radius: 5px; width: 150px; } UXQGW%LOGH { border-radius: 50%; width: 100px; aspect-ratio: 1; } </style> </head> <body> <h1>Kjente byer</h1> <img src="pisa.jpg" id="hovedbilde"> <img src="moskva.jpg" class= UXQGW%LOGH > <img src="tel_aviv.jpg" class= UXQGW%LOGH > <img src="paris.jpg" class= UXQGW%LOGH > </body>

Bildet med id = "hovedbilde" har kun en svak avrunding og er høyere enn de andre bildene. Bildene med class = UXQGW%LOGH er sirkelrunde.

2.6 Pseudoselektor og pseudoklasser PSEUDOSELEKTOR En pseudoselektor beskriver hvordan deler av et HTML-element skal se ut. For eksempel kan du endre hvordan den første bokstaven i et tekstavsnitt skal se ut, eventuelt den første linjen eller tekst som brukeren markerer på nettsiden. Du kan også sette inn innhold før eller etter et element.

Kapittel 2

En pseudoselektor beskriver deler av et HTML-element. 1 <style> 2 selektor::pseudoselektor { 3 egenskap: verdi; 4

}

5 </style>

Pseudoselektor

Forklaring

::before

setter inn innhold før elementet

::after

setter inn innhold etter elementet

¿UVW OHWWHU

den første bokstaven i et element

¿UVW OLQH

den første linjen i et element

::selection

del av elementet som er markert av bruker

Alle egenskaper og verdier vi har sett på til nå, kan brukes for en pseudoselektor. Til de to pseudoselektorene ::before og ::after kan vi også bruke egenskapen content. Verdien til content legger vi inn mellom " og ". Det innholdet vi setter her, blir lagt inn før eller etter elementet vi har valgt som selektor.

EKSEMPEL Ulike pseudoselektorer former et tekstavsnitt q = quote = sitat

I dette eksempelet bruker vi ulike pseudoselektorer til å forme teksten i et avsnitt <p>. Den første bokstaven i avsnittet skal være ekstra stor og ha 42px. Den første linjen skal ha en annen farge enn de neste. Når brukeren markerer teksten, skal fargen på teksten bli hvit med blå bakgrunn. Vi bruker q-elementet til å sette anførselstegn " foran og bak sitatet. Vil vi erstatte " med «, kan vi bruke q::before { content: "«";}. <head> <style> S ¿UVW OHWWHU { font-size: 42px; } S ¿UVW OLQH { color: darkorange; } p::selection { color: white; background-color: blue; } q::before { content: "«"; } q::after { content: "»"; } </style> </head> <body> <p>I dag leste jeg en artikkel i avisen hvor lederen for en naturvernorganisasjon skriver: <q>Korallrevene dør. </q> Det var skremmende lesing.</p> 23 </body> 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

fil:///IT1/Kode1/Kap2/farger.html

dag leste jeg en artikkel i avisen hvor lederen for en naturvernsorganisasjon skriver «Korallrevene dør». Det var skremmende lesing.

Resultatet av koden. Hvis du markerer teksten, blir den hvit med blå bakgrunn.

CSS endrer utseendet til nettsiden

PSEUDOKLASSER Pseudoklasser er en form for pseudeselektor, men pseudoklasser brukes til å bestemme utseendet på HTML-elementer når de er i en bestemt tilstand. Tilstanden kan være når du fører pilmarkøren over elementet, når du har haket av en flervalgsboks, eller når du har trykket på en lenke. Pseudoklasser kan også bestemme utseendet til et element som er det første av flere elementer. Pilmarkør kalles også for markør.

Pseudoklasser bestemmer utseendet til et HTML-element i en bestemt tilstand. 1 <style> 2 selektor:pseudoklasse { 3 egenskap: verdi; 4

}

5 </style>

Pseudoklasse

Forklaring

:hover

pilmarkøren føres over et element

:active

fra du klikker på et element og til du slipper

:focus

et element står i fokus – for eksempel når du klikker i et input-element

:checked

en radioknapp eller en flervalgsboks er valgt

QWK FKLOG RGG

QWK FKLOG HYHQ

velger annethvert element, partall eller oddetall

EKSEMPEL Endre størrelsen på et bilde Du kan endre størrelsen på et bilde når du klikker på det, og helt til du slipper opp klikket med pseudoklassen active, slik:

1 <head> 2 <style> 3 4 5 6 7 8 9 10 11 12 13

img { width: 100px; } img:active { width: 200px; } </style> </head> <body> <img src= ¿OQDYQ MSJ > </body>

EKSTRASTOFF

Mobiltelefon HTML-koden: <meta name="viewport" content="width=device-width, initial-scale=1"> skalerer nettsiden slik at den fyller hele skjermen på en mobiltelefon.

Kapittel 2

EKSEMPEL Ulik tilstand gir ulikt utseende I dette eksempelet skriver vi HTML-kode for en lenke, et bilde og en liste. Med pseudoklasser sørger vi for at lenken endrer seg når pilmarkøren føres over den, bildet blir større når du klikker på det, og annethvert kulepunkt får ny bakgrunnsfarge. 1 <!DOCTYPE html> 2 <html lang="no"> 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Forfatter</title> <style> img:active { width: 200px; } a:hover { background-color: lightgreen; } li:nth-child RGG ^ background-color: lemonchiffon; } </style> </head> <body> <img src="MrNilsson.jpg"> <p> <a href="http://cappelendamm.no">$VWULG /LQGJUHQ</a> </p> <ul> <li>Vi på Saltkråkan</li> <li>Pippi Langstrømpe</li> <li>Ronja Røverdatter</li> <li>Emil i Lønneberget</li> <li>Mio, min Mio</li> </ul> </body> </html>

Resultatet av koden er en nettside med et bilde, en lenke og en punktliste.

Forfatter

fil:///IT1/Kode1/Kap2/Lindgren.html

Astrid Lindgren • Vi på Saltkråkan • Pippi Langstrømpe • Ronja Røverdatter • Emil i Lønneberget • Mio, min Mio

CSS endrer utseendet til nettsiden

2.7 Kombinasjoner av selektorer og tabeller KOMBINASJONER AV SELEKTORER De synlige HTML-elementene på en nettside ligger i body-elementet. I en liste med kulepunkter har vi et ul-element der det ligger flere li-elementer. I en tabell med table-element er det rader med tr-elementer som igjen inneholder td-elementer. Lister og tabeller er bygget opp med det vi kaller en tre-struktur. Med CSS kan vi velge ett HTML-element som ligger på en spesiell plass i forhold til andre elementer. I HTML-koden nedenfor ser vi én liste med kulepunkter og én med nummer, og inne i elementet <ul> eller <ol> har vi <li>. 1 <ul> 2 <li>…</li> 3

4 </ul> 5 <ol> 6

<li>…</li> <li>…</li> 8 </ol> 7

Kombinasjon

Forklaring

ul li

alle li-elementer inni et ul-element

ul > li

første li-elementet inni et ul-element

K S

første p-elementet etter et h1-element

h1 ~ p

alle p-elementer etter et h1-element

CSS-koder som består av flere selektorer, kaller vi for CSS combinators. Vil vi gi en stil til li-elementene som ligger inni ul-elementet, bruker vi de to selektorene ul og li med mellomrom mellom selektorene, slik: ul li. Li-elementer inni ol-elementer vil vi ikke endre. Med kombinasjonen av selektorene ul li vil kun skriften som ligger inne i ul, bli endret. I tabellen ovenfor ser du at selektorer kan kombineres på ulike måter.

Vi kan kombinere flere selektorer 1 <style> 2 selektor1 selektor2 { 3 egenskap: verdi 4

}

5 </style>

Kapittel 2

EKSEMPEL Vil vi gi li-elementene inni ul-elementene en stil, bruker vi de to selektorene ul li. 1 <head> 2 <style> 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

ul li { color: plum; } </style> </head> <body> <ul> <li>Fargen endres</li> <li>Men kun i punktlisten</li> </ul> <ol> <li>Fargen endres ikke</li> <li>I den nummerert listen</li> </ol> </body>

fil:///IT1/Kode1/Kap2/farger.html

• Fargen endres • Men kun i punktlisten 1. Fargen endres ikke 2. I den nummererte listen

Resultatet av koden er at kun fargen på punktlisten endres. Den nummererte listen endres ikke, selv om den også har li-elementer.

EKSEMPEL Kombinasjon med + og ~ Med + mellom selektorene K S velges det p-elementet som ligger rett etter den første selektoren h1. 1 <head> 2 <style> 3 4 5 6 7 8 9 10 11 12 13

1 2 3 4 5 5 6 7 8 9 10 11

h1 p { background-color: lightgreen; } </style> </head> <body> <h1>.RPELQHUH PHG </h1> <p>Første avsnitt endres</p> <p>De neste endres ikke</p> <p>De neste endres ikke</p> </body> <style> h1 ~ p { background-color: lightgreen; } </style> </head> <body> <h1>Kombinere med ~</h1> <p>Første avsnitt endres</p> <p>De neste endres også</p> <p>De neste endres også</p> </body>

fil:///IT1/Kode1/Kap2/farger.html

Kombinere med + Første avsnitt endres De neste endres ikke De neste endres ikke

Hvis vi bytter ut + med ~ mellom selektorene, gjelder stilen for alle de etterfølgende elementene på samme nivå i nøstingen.

fil:///IT1/Kode1/Kap2/farger.html

Kombinere med ~ Første avsnitt endres De neste endres også De neste endres også

CSS endrer utseendet til nettsiden

TABELLER MED TABLEELEMENTET I kapittel 1 om HTML på side 25–26 lærte du å lage tabeller. Vi skal nå se hvordan vi kan bruke CSS til å gi tabellene et mer tiltalende utseende. Vi lager HTML-kode for en tabell som inneholder Oscar-vinnere for beste film årene 2013, 2014 og 2015. 1 <body> 2 <table> 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 17 18 19 20 21 22 23 24 25 26 27

Slik ser tabellen ut uten CSS.

<thead> <tr> <th>År</th> <th>Vinner</th> <th>Regissør</th> </tr> </thead> <tbody> <tr> <td>2015</td> <td>Spotlight</td> <td>Thomas McCarthy</td> </tr> <tr> <td>2014</td> <td>%LUGPDQ</td> <td>$OHMDQGUR *RQ]iOH] ,xiUULWX</td> </tr> <tr> <td>2013</td> <td>12 years a slave</td> <td>Steve McQueen</td> </tr> </tbody> </table> </body>

År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

Kapittel 2

Med selektoren td kan vi nå bestemme hvordan cellene i tabellen skal se ut. Vi setter en bakgrunnsfarge på alle td-elementene. 1 td { 2 background-color: papayawhip; 3 }

År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

Vi ser at det blir en liten glipe mellom cellene i tabellen. Det er en kantlinje som nettleseren lager automatisk for tabeller. Vi kan fjerne dette ved å sette verdien for egenskapen border-collapse til collapse for tabellen. 1 table { 2 border-collapse: collapse; 3 }

Med padding kan vi skape litt luft rundt teksten. Vi setter 7px over og under, 14px til høyre og venstre. 1 td { 2 background-color: papayawhip; 3 padding: 7px 14px; 4 }

År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

Hvis vi ønsker å skille tydeligere mellom innholdet i de forskjellige cellene, kan vi sette på en kantlinje rundt dem. Kantlinjen kan gjøre tabellen lettere å lese. 1 td { 2 background-color: papayawhip; 3 padding: 7px 14px; 4

border: 2px solid olive;

5 }

År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

CSS endrer utseendet til nettsiden

Overskriftene i th er automatisk midtstilte. Dette kan vi justere ved å sette textalign til left. Vi kan også sette på padding for å skape litt luft. Hvis vi først bruker kortformen for kantlinjen, border, og deretter spesifiserer med border-bottom, kan vi oppnå at overskriftene har en tykkere kantlinje i bunnen. 1 th { 2 text-align: left; 3 padding: 7px 14px; 4 5

border: 2px solid olive; border-bottom: 4px solid darkolivegreen;

6 }

År 2015 2014 2013

Vinner Spotlight Birdman 12 years a slave

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen

EKSEMPEL Tabell med kombinasjoner av selektor Bakgrunnsfargen som vi har satt til cellene, kunne like gjerne ha vært satt på hele raden med CSS-selektoren tr. Men hvordan kan vi skille om vi setter bakgrunnsfarge for radene i thead, og bruker tbody i overskriftene og radene? Da kan vi bruke kombinasjoner. For eksempel vil koden thead > tr gjelde for tr som ligger inne i thead, mens tbody > tr vil gjelde for radene inne i tbody. Vi fjerner nå bakgrunnsfargen for cellene og setter den i stedet på radene. 1 <style> 2 table { 3 border-collapse: collapse; 4 } 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

thead > tr { background-color: aliceblue; } tbody > tr { background-color: papayawhip; } th { text-align: left; padding: 7px 14px; border: 2px solid olive; border-bottom: 4px solid darkolivegreen; } td { padding: 7px 14px; border: 2px solid olive; } </style>

År

Vinner

Regissør

2015

Spotlight

Thomas McCarthy

2014

Birdman

Alejandro González Iñárritu

2013

12 years a slave

Steve McQueen

Bakgrunnsfargen er satt på radene.

Kapittel 2

EKSEMPEL Tabeller med class På et nettsted ser du ofte tabeller med variasjoner i det visuelle uttrykket. Sportssidene i en avis har gjerne litt annen utforming på tabellene enn dem vi ser på kultursidene. Vi kan definere forskjellige typer tabeller med CSS ved å sette attributtet class="typetabell" i HTML-koden og skrive CSS for denne typen tabeller. For eksempel kan vi definere en stripete tabell ved å si at annenhver rad skal ha en annen bakgrunnsfarge enn den neste. Da bruker vi pseudoselektoren QWK FKLOG RGG HOOHU QWK FKLOG HYHQ . 1 <style> 2 table.striped > tbody > tr:nth-child RGG ^ 3 background-color: springgreen; 4

}

5 </style> 6 </head> 7 <body> 8 <table class="striped"> 9  10

</table>

11 </body>

År 2015 2014 2013 2012 2011

Vinner Spotlight Birdman 12 years a slave Argo The Artist

Regissør Thomas McCarthy Alejandro González Iñárritu Steve McQueen Ben Affleck Michel Hazanavicius

Annenhver rad i tbody har ulik farge.

CSS endrer utseendet til nettsiden

> CSS brukes til å endre utseendet på en nettside.

SAMMENDRAG

> I CSS kan du skrive i HTML-taggene, slik:

<h1 style="color: pink;">En rosa overskrift</h1> > CSS kan du skrive i head i et eget style-element: 1 2 3 4 5

> En selektor brukes til å velge HTML-element(er). > Selektoren img velger alle bildene på nettsiden. > HTML-elementer arver stil fra elementer de er nøstet inne i. > Websikre skrifttyper er installert sammen med operativsystemet. > Webfonter legges ved nettsiden omtrent som et bilde. > Med filtre i CSS kan du manipulere utseendet til bilder og annet innhold. > Filformatet JPG egner seg godt til fotografier. > Filformatene GIF og PNG egner seg til logoer og enkel grafikk. > LG1DYQ er en hashtag-selektor som velger et element med en bestemt id. > .classNavn er en punkt-selektor som velger alle elementer med en bestemt

class. > Pseudoselektorer velger deler av et HTML-element. > Pseudoklasser velger elementer som er i en bestemt tilstand.

Kapittel 2

Oppgaver 2.1 CSS i et HTML-element z 2.01 Skriv HTML-kode for tre forskjellige overskrifter på nivåene h1, h2 og h3. Bruk CSS til å utforme de tre overskriftene slik: a) gul skrift på blå bakgrunnsfarge b) hvit skrift på brun bakgrunnsfarge c) svart skrift på rosa bakgrunnsfarge

z 2.02 Skriv HTML-kode for et avsnitt med hvit skrift på oransje bakgrunnsfarge. La margen være på 30 piksler.

z 2.03 Skriv HTML-kode for tre lenker. Bruk bakgrunnsfarge, farge på lenkene, margin og padding til å utforme lenkene.

z 2.04 Skriv et kort avsnitt om en ferie du har hatt i Norge eller i utlandet. Velg minst to overskrifter for to byer eller attraksjoner du har besøkt. Bruk h3-elementet på disse overskriftene.

zz 2.05 På kode.cdu.no finner du en oversikt over fargenavn du kan bruke. Bruk ulike fargenavn til å lage to nettsider med en overskrift og et avsnitt. a) Den ene nettsiden skal være så stygg som mulig. b) Den andre nettsiden skal være så pen som mulig. c) Vis frem resultatet til de andre i klassen.

2.2 CSS i eget style-element z 2.06 Lag en nettside med overskriften «Årstider» som et h1-element. Overskriften skal være midtstilt og ha blå tekstfarge. Navnet på hver årstid skal settes som et h2-element med grønn tekst. Skriv en kort beskrivelse av hva du pleier å gjøre i hver årstid. Avsnittene skal ha rød tekst.

z 2.07 Skriv et avsnitt om sirkelen. Begrepene radius, diameter og omkrets skal være overskrifter. Bruk h3-elementer på disse overskriftene. a) Legg inn et style-element i head-elementet der du gjør bakgrunnsfargen til body-elementet sort og teksten hvit. b) Bruk CSS til å gjøre tekstfargen til h3-elementene lysegul.

Oppgaver

z 2.08 Lag en nettside med en unummerert liste med ting du trenger til en telttur. a) Legg inn et style-element i head-elementet der du gjør bakgrunnsfargen til body-elementet gult. b) Gjør bakgrunnsfargen til listen hvit. Body-elementet skal fremdeles være gult.

2.3 Utseendet til tekst z 2.09 Med CSS definerer du en skrifttype i body-elementet som gjelder for all tekst på en nettside. Legg inn CSS-kode som endrer skrifttypen til alle overskriftene.

z 2.10 a) Lag en nettside med en tekst om et tema du jobber med i et annet fag på skolen. Teksten skal ha overskrifter og avsnitt. Bruk CSS til å utforme teksten så nettsiden ser fin ut. b) Legg inn noen lenker (a-elementer) i teksten din. Lenkene skal ha en annen farge enn blå og i tillegg ha en bakgrunnsfarge.

zz 2.11 Finn en web-font som ser skummel ut. Bruk den på en stor overskrift med innholdet BØ!. Legg skygge bak overskriften.

zz 2.12 Lag en nettside der du bruker tre ulike tekstfonter. Bruk både websikre og generiske fonter.

2.4 Utseendet til bilder z 2.13 Sett inn bildet stjerne.jpg med img-elementet. Bruk CSS til å sette på en fiolett ramme som er 10 piksler bred. Prøv deg frem med forskjellige typer kantlinjer og se hva som skjer.

stjerne.jpg

zz 2.14 Legg inn fire bilder av deg selv på nettsiden fra oppgave 2.06. Prøv ut forskjellige filtre, marger, rammer og skygger på bildene.

Kapittel 2

zz 2.15 a) Bruk det kvadratiske bildet skihopp.jpg som du finner på elevnettstedet, og bruk border-radius til å gjøre bildet sirkelrundt. b) Sett på en skygge bak bildet. c) Legg på flere skygger og se om du klarer å få det til å se ut som en sylinder.

zz 2.16 Bruk de åtte bildene som ligger på elevnettstedet, og sett dem inn på en nettside. a) Bruk marg til å styre avstanden mellom bildene. b) Sett på passende rammer på bildene. c) Legg skygge bak bildene.

2.5 Selektor med id eller class 2.17 z I sangtekster pleier man å gi refrenget et lite innrykk. Per er konfirmant, og tanten hans har skrevet en sang. Hun trenger din hjelp. a) Skriv CSS-kode slik at refrenget får et innrykk. Ta utgangspunkt i koden nedenfor. 1 <!DOCTYPE html> 2 <html lang="no"> 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<head> <title>Sang til Per</title> <meta charset="UTF-8"> <style> </style> </head> <body> <div class="sang"> <p class="vers"> Nå er du nesten voksen, du Det er så visst et faktum: Familien har kjent deg fra her kommer det en sang, vi </p>

kjære, lille Per. Du er ikke baby mer. den gang du var barn, håper alle tar’n.

17 18 19 20 21 22 23 24 25 26

<p class="refreng"> Heisann og hoppsann og fallerallera 'X HU ÀLQN RJ PRUVRP RJ HU DOOWLG YHOGLJ JODG Heisann og hoppsann og fallerallera +HU NRPPHU QRHQ ÀDXH WLQJ YL YRNVQH NDQ OH DY </p> </div> </body> </html>

b) Tanten har også et problem med at hele teksten havner på samme linje. Bruk white-space: pre-wrap; på hele sangen for å forhindre dette.

Oppgaver

zz 2.18 Per har lyst til å lage et digitalt takkekort fra konfirmasjonen sin. Han vil at hele teksten skal være midtstilt med text-align: center. I tillegg vil han at bildet skal være midtstilt. Han vil også at teksten skal være i skrifttypen Garamond. Underskriften skal ha fonten Brush Script MT. Du kan ta utgangspunkt i koden nedenfor. 1 <!DOCTYPE html> 2 <html lang="no"> 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

<head> <title>Takkekort</title> <meta charset="UTF-8"> <style> /* Skriv CSS-kode */ </style> </head> <body> <div class="takkekort"> <h1>Takk!</h1> <img src="knut_konfbilde.jpg" alt= .RQ¿UPDQWHQ .QXW > <p> (Q SHUVRQOLJ WDNN IRU JDYHQ MHJ ¿NN DY GHUH WLO NRQ¿UPDVMRQHQ Det gjorde meg veldig glad. </p> <p class="signatur">Per</p> </div> </body> </html>

zz 2.19 Du skal lage en nettside for lokalbiblioteket. Noen av boktitlene inneholder banneord, og biblioteket er bekymret for at barn skal lese dem. Derfor har de streket under ord de tror kan virke støtende. Skriv CSS-kode som gjør at de markerte ordene i boklisten nedenfor får svart skrift og svart bakgrunnsfarge.

• • • • • •

Få meg på for faen av Olaug Nilssen Trist som faen av Ari Behn Jævla drittsystem av Jonas Söderström Fucking Åmål av Lucas Moodyson Kyss meg for faen i helvete av Stian Kristiansen Faen ta skjebnen (The Fault in Our Stars) av John Green

zz 2.20 Mange bruker lister for å ha oversikt over ting de (håper de) skal få gjort. Lag en gjøremålsliste der ugjorte gjøremål vises med vanlig, svart tekst, og gjorte gjøremål skal ha gjennomstrøket tekst og grå farge. Du kan bruke en selektor for en klasse .gjort for å stile gjøremålene som er gjort.

Kapittel 2

z 2.21 Skriv kode for fire lenker med a-elementer. Teksten i lenkene kan være «Sommer», «Sol», «Sjø» og «Bading». Skriv attributtet id="valgt" på en av lenkene og bruk CSS-kode til å sørge for at denne lenken har en annen farge og størrelse.

zzz 2.22

Et polaroidkamera skriver ut bildet rett etter at det tas. Bildet kalles polaroidbilde, og det kjennetegnes ved at det er kvadratisk og har en hvit ramme. Det hvite feltet nederst er noe bredere enn rammen rundt bildet, slik at det er plass til å skrive en kort beskrivelse. Du skal lage et bildegalleri der bildene ser ut som polaroidbilder. Du kan gå frem slik du vil, men her er en mulig rekkefølge: 1. Lag en selektor for klassen .instant-foto som gjør at alle elementer med denne klassen får en padding på 16 piksler. 2. Sørg for at alle bildene som ligger inni denne klassen, blir nøyaktig 960 piksler brede. Da blir det plass til omtrent 60 bokstaver. 3. Få teksten til å se ut som om den er håndskrevet med en kul font. 4. Legg på en liten bakgrunnsskygge (drop-shadow) for å få bildene til å se ut som om de er laget av papir.

zz 2.23 Outline-egenskapen (omriss) i CSS gjør nesten det samme som border-egenskapen (kantlinje), men de er forskjellige når det kommer til hvordan de bruker plassen til boksen de er satt på. Den ene av dem legger seg på innsiden av kanten til boksen den er satt på, mens den andre legger seg på utsiden. Bruk koden på neste side, og se om du ser forskjellen.

Oppgaver

1 <!DOCTYPE html> 2 <html> 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<head> <meta charset="UTF-8"> <title>Outline og border</title> <style> .omriss, .kantlinje { padding: 16px; background-color: cyan; margin: 64px; } .omriss { outline: 16px solid black; } .kantlinje { border: 16px solid black; } </style> </head> <body> <div class="omriss"> Jeg har omriss </div> <div class="kantlinje"> Jeg har kantlinje </div> </body> </html>

zzz 2.24 outline har en egenskap som border ikke har: outline-offset (oﬀset betyr forskyvning). Med outline-offset kan du forskyve hvor nettleseren plasserer

omrisset (positive tall skyver omrisset utover, negative tall presser det innover). Ta utgangspunkt i svaret på forrige oppgave og få boksen med klassen «omriss» til å se lik ut som boksen med klassen «kantlinje». Du kommer til å måtte tilpasse padding litt, men start med outline-offset.

zzz 2.25 Kanten på frimerker og sidene i kladdebøker har hull som gjør det enklere å rive dem fra hverandre. Disse hullene kalles perforering, som betyr «gjennomboring». På neste side ser du et program der et bilde har klassen frimerke. Det gir bildet en grå kantlinje, men den mangler noe viktig for å se ut som et frimerke: perforeringen. Du skal bruke selektoren .frimerke til å legge slik perforering langs kanten, som på bildet. Du kan bruke en outline på 10 piksler med stilen dotted. Mens du jobber, kan du bruke en annen farge (f.eks. svart) for å se omrisset. Sett en passende tykkelse på omrisset og forskyv det til det ligger midt på kantlinjen. Når alt er ferdig, bytter du fargen på omrisset til hvit. Du kan ta utgangspunkt i koden på neste side.

Kapittel 2

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Frimerke</title> 6 <style> 7 .frimerke { 8 color: white; 9 width: min-content; 10 border: 32px solid lightgrey; 11 } 12 </style> 13 </head> 14 <body> 15 <img class="frimerke" src="Einar_Gerhardsen_1945.jpg"

16 17

18 19 20

alt="Svart-hvitt portrett fra 1945 av daværende statsminister Einar Gerhardsen, som ser alvorlig, men håpefullt inn i kameraet"> <p> <a href="Einar_Gerhardsen_1945.jpeg">Einar Gerhardsen</a>, IRWRJUD¿ DY (UQHVW 5XGH <a href="https://creativecommons.org/ licenses/by-sa/4.0/">&& %< 6$ </a>

</p> </body> </html>

z 2.26 Det er svært vanlig å designe firkantede ting med avrundede hjørner: mobiltelefoner, tastene på tastaturet, datamaskiner, tavler og bord. Man tenker knapt over det, som med trafikkskiltene langs norske veier. Nedenfor finner du et program med klassen trafikkskilt. Endre verdien for border-radius til du synes avrundingen ser ut som trafikkskiltet på bildet. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>7UD¿NNVNLOW</title> 6 <style> 7 body { 8 background-color: ; 9 } 10 WUD¿NNVNLOW { 11 color: white; 12 font-size: 48px; 13 font-family: $ULDO; 14 font-weight: 500; 15 background-color: ; 16 width: min-content; 17 padding: 1.6px 6.4px; 18 border: 16px solid white; 19 border-radius: 0; /* TODO: Endre denne verdien */ 20 } 21 </style> 22 </head> 23 <body> 24 <div class= WUD¿NNVNLOW >Kongsberg</div> 25 </body> 26 </html>

Oppgaver

zz 2.27 På nettsider brukes avrundede hjørner ofte til å indikere at noe er klikkbart. For eksempel brukes tekst med avrundede hjørner på Morgenbladet.no til å vise stikkord i en artikkel som man kan trykke på for å komme til saker om lignende temaer.

Juster verdien for border-radius i koden nedenfor til du synes merkelappene ser mest mulig ut som i oppgavebildet. 1 <!DOCTYPE html> 2 <html lang="no"> 3 <head> 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

<title>Merker</title> <meta charset="UTF-8"> <style> .merkelapper { font-family: Tahoma, sans-serif; display: À H[; gap: 16px; text-transform: uppercase; } .merkelapper > div { border: 1px solid grey; padding: 16px 24px; border-radius: 0px; /* TODO: Øk denne verdien til hjørnene ser riktige ut */ } </style> </head> <body> <div class="merkelapper"> <div>Dagbladet</div> <div>Medier</div> <div>Litteratur</div> <div>$NVHO .LHOODQG</div> </div> </body> </html>

Kapittel 2

zzz 2.28 Manuskripter for teaterstykker har ofte en streng formatering. Med CSS kan vi holde orden på formateringen. På kode.cdu.no finner du HTML-koden som ligger bak manuset i bildet. Gjenskap formateringen ved hjelp av klassene som ligger i koden. Du får bruk for font-style, margin, text-transform, font-weight og text-align.

2.6 Pseudoselektor og pseudoklasser z 2.29 Skriv kode for tre input-elementer. Bruk pseudoklassen input:focus til å gjøre input-elementene 500 piksler brede når du klikker inni dem.

zz 2.30 Vilde er konfirmant, og onkelen hennes har skrevet en sang til henne. Onkelen er veldig glad i nødrimordboken https://rimord.com Onkelen har lyst til at det skal stå «Ref.:» med fet skrift foran hvert vers. Bruk pseudoklassen :before for refrenget, content-attributtet og text-weight for å få det til. Du kan ta utgangspunkt i koden nedenfor. 1 <!DOCTYPE html> 2 <html lang="no"> 3 <head> 4 <title>Sang til Vilde</title> 5 <meta charset="UTF-8"> 6 <style> 7 </style> 8 </head> 9 <body> 10 <div class="sang"> 11 <p class="vers"> 12 Nå er du nesten voksen, kjære Vilde 13 For oss i din familie er du en gledens kilde. 14 Snart skal du gå på videregående, vi håper du får til det. 15 Kjære gode Vilde. 16 </p> 17 <p class="refreng"> 18 Å, du lille, kjære, gode Vilde 19 Håper livet ditt blir som et glansbilde. 20 Om noen år skal du kanskje på Roskilde. 21 Kjære, gode Vilde. 22 </p> 23 </div> 24 </body> 25 </html>

Oppgaver

zz 2.31 Bruk pseudoklassen :hover til å sette padding på tre avsnitt til 30 piksler når du fører musepekeren over dem.

zz 2.32 Det går an å bruke border-radius for å tegne sirkler og andre varianter av geometriske former. Juster border-radius for .statussirkel i koden nedenfor til sirklene fremstår som runde. Når ser sirkelen rund ut? Skjer det noe hvis du bruker et høyere tall enn nødvendig? 1 <!DOCTYPE html> 2 <html lang="no"> 3 <head> 4 <title>Innloggingsstatus</title> 5 <meta charset="UTF-8"> 6 <style> 7 .påloggingsstatus { 8 display: ÀH[; 9 gap: 8px; 10 } 11 .statussirkel::before { 12 /* Å sette «content: ""» er et triks for å få sirkelen til å

dukke opp */ 13 content: ""; 14 } 15 .statussirkel { 16 width: 16px; 17 height: 16px; 18 /* TODO: Sett denne til en verdi som gjør at den blir rund */ 19 border-radius: 0; 20 } 21 .pålogget { 22 background-color: yellowgreen; 23 } 24 .opptatt { 25 background-color: red; 26 } 27 .inaktiv { 28 background-color: gray; 29 } 30 </style> 31 </head> 32 <body> 33 <div class="påloggingsstatus"> 34 <div class="statussirkel pålogget"></div> 35 <div>Pålogget</div> 36 </div> 37 <div class="påloggingsstatus"> 38 <div class="statussirkel opptatt"></div> 39 <div>Opptatt</div> 40 </div> 41 <div class="påloggingsstatus"> 42 <div class="statussirkel inaktiv"></div> 43 <div>Inaktiv</div> 44 </div> 45 </body> 46 </html>

Kapittel 2

zzz 2.33 Nedenfor finner du to bilder som skal etterligne et sosialt medium. Lag en nettside som ligner mest mulig på bildene nedenfor. Plasser bildene på midten av nettsiden.

2.7 Kombinasjoner av selektorer og tabeller zz 2.34 a) Skriv HTML-kode for en tabell med overskriftene År, Låt og Artist. Legg inn en rad for favorittlåten din fra de fem siste årene. Bruk CSS til å forme utseendet på tabellen. b) Bruk pseudoklassen :hover på cellene i radene i tbody slik at disse endrer farge når du fører pilmarkøren over dem. c) Gjør om teksten med artistens navn til en lenke som du kan klikke på for å komme til en nettside om artisten. d) Bruk audio-elementet, som du lærte om i kapittel 1, til å legge inn en avspiller i en ny kolonne i tabellen.

zz 2.35 Oppgrader den lille norsk-engelsk ordboken fra oppgave 1.06 ved at du velger fem nye ord, gjerne fem gjenstander. Forslag for ordene: 1. elv (river), 2. blomst (flower), 3. bil (car), 4. fugl (bird), og 5. snø (snow). a) De norske ordene skal ha blå, fet skrift, mens de engelske skal ha rød, normal skrift. b) Finn et passende og representativt bilde for hvert ord, og plasser ordene og bildene i en tabell. c) Velg en brukervennlig bakgrunnsfarge for hele siden.

Oppgaver

zzz Prosjektoppgave Nå som du er ferdig med de to første kapitlene, kan du omtrent like mye om det å lage nettsider som de som gikk på videregående skole på 90-tallet. På 90-tallet og tidlig 2000-tall var det vanlig å lage en helt egen nettside om seg selv, slik Tore Sagen gjorde da han gikk på videregående skole i 1997.

http://web.archive.org/web/20020704233625/www.nordstrand.vgs.no/ elevsider/1997-98/2ita-1/toresage.htm. Andre laget nettsider om ting de brydde seg om, for eksempel at Microsofts nettleser, Internet Explorer, var ren ondskap: http://toastytech.com/evil/index.html Lag din egen nettside i 90-tallsstil om deg selv, noe du liker, eller noe du tror andre kan synes er nyttig. For å gi nettsiden din 90-tallsfaktor kan du bruke spreke fargekombinasjoner og fonten Comic Sans. Husk at du kan bruke utviklerverktøyene i nettleseren for å lære av andre nettsider.

5 Programmering med Javascript KOMPETANSEMÅL I dette kapittelet utvikler du kompetansen din i følgende kompetansemål: > utvikle nettsider ved hjelp av markeringsspråk > utforske, strukturere og kommentere programkode > bruke algoritmisk tenkning og programmering for å utforske en problemstilling og presentere resultatet

5.1 Programmeringsspråket Javascript HVA ER KODE? Har du tenkt på hva som skjer når du skriver tegnene :-) på telefonen eller i sosiale medier? Like etter at du har skrevet det siste tegnet, dukker det opp en liten figur som ser omtrent slik ut . Men figuren er ikke helt lik på alle telefoner, og den ser kanskje annerledes ut i Word eller i nettleseren. Tegnene :-), er kode som telefonen eller nettleseren oversetter til maskinkode. Maskinkode er et språk datamaskinen forstår. Så vi kan si at tegnene :-) blir oversatt til maskinkode, som igjen forteller telefonen eller datamaskinen at den skal vise et smilefjes på skjermen. Din kode …

blir oversatt til maskinkode …

:-)

01101000 01100100 01110010 11110100 01100001

01100001 01101001 01101001 01100101 01101110

som forteller maskinen at den skal vise et smilefjes.

01110100 00 01110011 01 01100010 01 01110011 00 01111001 00

JavaScript er et programmeringsspråk som blir oversatt til maskinkode av nettleseren. Og med JavaScript kan vi selvsagt gjøre mer enn å lage et smilefjes. Men prinsippet er det samme. JavaScript-koden blir oversatt av nettleseren til maskinkode, og nettleseren gjør det den blir bedt om.

Programmering med Javascript

Med JavaScript kan vi blant annet • legge til eller endre HTML-elementer, og endre innholdet i disse • endre CSS-kode for HTML-elementer • flytte innhold på en nettside ved å forandre CSS-stiler • skape interaktivitet • hente data fra en ekstern datakilde • legge inn et kart på nettsiden • spille lyder i nettleseren • tegne og animere vektorgrafikk med SVG • utføre beregninger

HTML og CSS er godt egnet for å lage statiske nettsider, som vi så i kapittel 1 og 2. Men moderne nettsider og apper er ofte drevet av handlinger du står for som bruker. Du kan klikke, tappe, sveipe, taste inn tekst, laste opp bilder, ta opp video eller lignende og få en umiddelbar respons fra nettsiden eller appen. Denne typen innhold og interaktivitet kalles dynamiske nettsider. CSS, som endrer utseendet til nettsiden, ligger i et style-element. JavaScript, som brukes til å gjøre nettsiden dynamisk, ligger inne i et script-element.

JAVASCRIPT OG HTML En statisk nettside kan du kun bruke til å ta imot informasjon. Du leser innhold omtrent som i en papiravis eller et oppslagsverk. En dynamisk nettside kan du bruke til å utføre en handling som påvirker utseendet eller innholdet på nettsiden.

DISKUTER

Gå inn på zalando.com og wikipedia.no. Diskuter om nettsidene er statiske eller dynamiske.

EKSTRASTOFF

JavaScript-koden skal stå inne i et script-element i et HTML-dokument. I JavaScript kan du skrive kommentarer enten med // kommentar, eller som i CSS med /* kommentar */. 1 <script> 2 // Her kommer JavaScript-koden din 3 /* Den ligger inne i det vi kaller en script-

blokk, eller et script-element */ 4 </script>

169

170

Kapittel 5

DYNAMISKE NETTSIDER MED TRADISJONELL JAVASCRIPT HTML er et statisk markeringsspråk. Det ble skapt for å vise informasjon, ikke for å lage dynamiske nettsider. JavaScript ble introdusert i nettlesere i 1995 da Internett hadde begynt å bli allemannseie. Da ble det tydelig at Internett kunne brukes til å løse oppgaver, og at de kunne tilby tjenester som kunne forenkle hverdagen for mennesker.

I 1996 fikk Sparebanken Hedmark, som første bank i Europa, sin første nettbankkunde.

Utgangspunktet for tradisjonell JavaScript er at koden du skriver, tar tak i noe statisk og forsøker å omforme det til noe dynamisk. Det blir nesten som å redigere en papiravis. Hvis du skal flytte på noe, må du finne frem saks og limstift og klippe ut og lime inn det du vil flytte på. Det virker, men er fryktelig tungvint. Hvis du skal endre på teksten i et HTML-element, kan én strategi være å gi dette elementet en unik id. Så bruker du elementets id i JavaScript-koden din til å referere til elementet. Til slutt kan du skrive kode som endrer teksten til noe annet. Utfordringen er at det gjerne fins mange elementer på en dynamisk nettside, og det blir fort virvar av HTML-elementer og referanser til disse elementene. Dette gjør at det er lett å miste oversikten.

DYNAMISKE NETTSIDER MED EN KOMPILATOR Hvis HTML og JavaScript hadde blitt funnet opp samtidig, hadde det sannsynligvis sett helt annerledes ut. Da ville de ha vært designet for å virke sammen. Men det er ikke så lett å endre hvordan Internett virker. Det fins milliarder av nettsider, og disse skal fortsette å fungere i nettleseren. Når de aller fleste av disse nettsidene er utformet med HTML, CSS og JavaScript, kan vi trygt si at det har blitt en standard. Er vi da dømt til å skrive ren HTML, CSS og JavaScript i all fremtid, selv om det er tungvint og vanskelig? Heldigvis er det ikke sånn. Vi kan nemlig skrive kode som er mye enklere å forstå, og bruke en tolk til å oversette den til tradisjonell HTML, CSS og JavaScript. Og vips, så vil den oversatte koden fungere i nettleseren på samme måte som en nettside som er skrevet på tradisjonelt vis. En slik tolk, som oversetter kode, kalles en kompilator.

Den enkle koden til venstre går gjennom en kompilator. Det fungerer som en tolk, og på høyre side kommer det ut komplisert kode.

<ŽŵƉŝůĂƚŽƌ

Programmering med Javascript

De fleste som utvikler nettsider profesjonelt, bruker verktøy som oversetter kode til HTML og JavaScript. Noen av dem oversetter koden før den publiseres på nettet, mens andre oversetter koden i nettleseren når noen går inn på nettsiden. Ofte omtales slike verktøy som JavaScript-rammeverk eller web-rammeverk. Både Google og Facebook har utviklet egne verktøy som de bruker på sine nettsider, men som også er tilgjengelige for alle som ønsker å ta dem i bruk.

Eksempler på web-rammeverk er

• • • •

React, som er utviklet av Facebook Angular, som er utviklet av Google Vue som, er et åpent kildekode-prosjekt Svelte, som også er et åpent kildekode-prosjekt

Med åpen kildekode menes kode som ligger allment tilgjengelig, ofte på et nettsted som heter github.

I denne boka skal vi bruke et web-rammeverk som heter Svelte. Det ble funnet opp av amerikaneren Richard Harris da han jobbet i The Guardian. Han opplevde at journalistene som jobbet med interaktiv grafikk, ikke klarte å realisere det de hadde skissert på tegnebrettet fordi de ofte måtte bruke for komplisert kode. Harris utviklet derfor Svelte, som i utgangspunktet var skapt for å gjøre det enklere å skrive kode for interaktiv grafikk. I dagens samfunn er ikke koding noe kun IT-ekspertene driver med. Det er en ferdighet på linje med å kunne regne, skrive og lese som vil være nødvendig i mange yrker og bransjer i årene fremover. Noen i klassen din blir sikkert IT-eksperter, og de vil lære seg alle detaljene om ren JavaScript senere i livet. Noen andre blir kanskje journalister og får jobbe med interaktiv grafikk i en avis. Uansett er det stor sjanse for at dere får bruk for det dere lærer om programmering og kode på videregående skole. Ved å skrelle vekk mye av det repeterende, tungvinte arbeidet med å skrive ren JavaScript, skal vi heller skrive kort og enkel kode som vi lar Svelte kompilere til tradisjonell HTML og JavaScript.

171

172

Kapittel 5

SAMMENHENGEN MELLOM HTML OG JAVASCRIPT Når du chatter med noen, dukker meldingen du skriver, opp på skjermen til alle du sender den til. Dette kaller vi dynamisk innhold. Når du skriver og sender innhold, dukker det opp inne i HTML-koden til nettsiden til mottakerne. La oss først se hvordan vi kan lage en statisk nettside med en melding. <h1>Hei sveis!</h1>

I stedet for å skrive innholdet i meldingen rett i HTML-koden, kan vi opprette en variabel. En variabel består av et navn og en verdi. Å definere en variabel er en måte å lagre forskjellig type data på. Når vi definerer en variabel, bruker vi kodeordet let foran navnet til variabelen vi definerer, etterfulgt av et likhetstegn og til slutt verdien som skal lagres i variabelen. Koden skrives slik: let melding = "Hei Sveis"

Du kan lese dette som «La melding bli "Hei sveis"» eller «melding settes til å bli "Hei Sveis"». Likhetstegnet betyr ikke at det er likevekt mellom venstre og høyre side, som i matematikk. Likhetstegnet betyr i denne sammenhengen at variabelen på venstre side skal få verdien som står på høyre side. For at meldingen skal vises på nettsiden, må vi i HTML-koden skrive krøllparentes rundt navnet på variabelen, slik: {variabelnavn}. Når vi skal skrive JavaScript i et HTML-dokument, må koden ligge inne i et scriptelement. Det er akkurat det samme som når vi skriver CSS i et style-element. Et script-element består av starttaggen <script> og sluttaggen </script>. All kode som ligger mellom starttaggen og sluttaggen, må være JavaScript-kode. 1 <script> 2 // JavaScript-kode 3 </script> 4 5 <h1>HTML-kode</h1> 6 7 <style> 8 /* CSS-kode */ 9 </style>

I Svelte skriver vi koden til venstre. Det spiller ikke noen rolle om vi skriver HTML- koden før eller etter JavaScript-koden. Resultatet av koden vises til høyre.

Programmering med Javascript

I tradisjonell HTML og JavaScript er det vanlig å skrive HTML først, eller øverst i koden, og deretter JavaScript. Dette gjør vi fordi JavaScript, som vi har sett, må ta tak i HTML-elementene for å gjøre noe med dem, og da må HTML-elementene være på plass før JavaScript-koden. Svelte blir oversatt til HTML og JavaScript og satt sammen korrekt uansett om du skriver HTML-koden før eller etter JavaScript-koden. I denne boka kommer vi til å skrive JavaScript først siden vi der definerer variablene som vi skal bruke i HTML-koden. Da virker det naturlig å først definere variabler, og så bruke dem i HTML-koden der vi måtte ønske. Vi starter derfor koden med et script-element, og legger så inn HTML lenger ned. Der hvor vi ønsker å bruke verdier som er definert i script-elementet, setter vi inn navnet på variabelen omgitt av to krøllparenteser.

I Svelte skriver vi JavaScript-koden i et script-element, eller en script-blokk, som kommer før HTML-koden slik: 1 <script> 2 let variabelnavn = "Variabelens verdi" 3 </script> 4 5 <h1>%ODQGLQJ DY YDQOLJ +70/ RJ YHUGLHU IUD VFULSW EORNND</h1> 6 <p>{variabelnavn}</p>

• I script-blokka definerer vi en variabel. • I HTML-koden kan vi hente frem verdien til variabelen hvor som helst i koden så lenge vi skriver krøllparenteser rundt variabelnavnet.

• I Svelte er det ikke nødvendig å skrive <html>, <head>, og <body>, som vi gjorde i kapittel 1–3. Svelte setter dette inn for oss når den kompilerer koden.

EKSEMPEL Kom i gang med Svelte Den enkleste måten å komme i gang med Svelte på, er å gå til nettsiden https://svelte.dev og klikke seg inn på det som heter REPL. REPL står for Read-Eval-Print Loop, og Sveltes REPL er en nettside hvor du kan skrive Svelte-kode og se resultatet umiddelbart. Hvis du oppretter en Github-bruker, kan du logge inn med den slik at du kan lagre arbeidene dine og finne tilbake til dem senere. 1. 2. 3. 4. 5. 6.

Åpne nettsiden https://svelte.dev/repl. Fjern koden som er forhåndsutfylt. Skriv inn koden til høyre. JavaScript-koden skrives i et script-element. HTML-koden skriver du under script-elementet. I HTML-koden henter du ut verdien ("Kode 1") til variabelen med navn og tittel.

1 <script> 2 let tittel = "Kode 1" 3 </script> 4 5 <h1>Velkommen til {tittel} ͜</h1>

I koden definerer du en variabel med navnet tittel og verdien «Kode 1». Du henter ut verdien til variabelen ved å skrive inn navnet på den mellom to krøllparenteser.

173

174

Kapittel 5

Hva skal variabelen hete? Det fins regler for hva som er gyldige navn på variabler i JavaScript: 1. Navnet må begynne med en bokstav, understrek (_) eller dollartegn ($). 2. Navnet kan ikke inneholde mellomrom. 3. Navnet kan kun bestå av bokstaver, tall, understrek og dollar-tegn. Det er også anbefalinger for hvordan du bør sette sammen et variabelnavn: 1. Gi variabelen et beskrivende navn, for eksempel person, poeng eller filnavn. Navnet variabel01 er et dårlig navn fordi det ikke beskriver hva variabelen er. 2. Der du har et sammensatt ord, bør du bruke enten det vi kaller camelCase – spillerMedFlestPoeng eller understrek – VSLOOHUBPHGBÀ HVWBSRHQJ. I denne boka bruker vi camelCase.

De store bokstavene står oppover som puklene til kamelen når vi skriver med camelCase.

DISKUTER

Hvorfor er det viktig å gi variabler beskrivende navn?

EKSTRASTOFF

En av fordelene med å bruke Svelte er nettopp at vi kan hente ut verdier som er definert med JavaScript, og skrive dem inn akkurat der vi ønsker i HTML-koden. Uten Svelte eller et lignende rammeverk, kan vi ikke gjøre det. Hvis vi skal skrive om eksempelet til ren JavaScript, må vi finne en måte å referere til HTML-elementet med overskriften. Deretter må vi sørge for at verdien til variabelen blir lagt inn i det HTML-elementet vi refererer til. Dette går greit på en så kort kode som vi har nedenfor, men på større og mer avanserte nettsider vil en veldig stor del av den samlede koden gå med til å hente ut fra og legge verdier inn i HTML-elementer. Dette kaller vi DOM-fikling. Artikkelen An Empirical Study of Client-Side JavaScript Bugs påpeker at åtti prosent av de mest kritiske feilene med JavaScript-kode på et utvalg kjente nettsteder er relatert til akkurat denne DOM-fiklingen 1 <h1 id="minMelding"> </h1> 2 3 <script> 4 let RYHUVNULIWHQ GRFXPHQW JHW(OHPHQW%\,G "minMelding"

5 overskriften.textContent = "Her endrer vi på innholdet til overskriften" 6 </script>

Programmering med Javascript

EKSEMPEL Gjenbruk av variabler En verdi som er definert som en variabel i JavaScript, kan du bruke så mange ganger du vil på en nettside. Hvis du skal lage en invitasjon som du skal skrive ut på papir, kan det være lurt å lage denne invitasjonen som en nettside hvor navnet på den som er invitert, er definert i JavaScript-koden din. Da kan du enkelt bytte ut navnet, og så oppdaterer navnet seg på alle stedene du har brukt det. 1 <script> 2 let navn = "Sverre Nilsen" 3 </script> 4 5 <h1>Kjære {navn}</h1> 6 <p>

Min gode venn, {navn}!<br> Jeg skal feire bursdagen min på fredag og håper du kan komme. 9 </p> 10 <p>Festen blir ikke den samme uten deg, {navn}!</p> 7 8

Nå er det bare å skrive ut invitasjonen, bytte navnet til neste gjest og fortsette til du er ferdig. Dette er enklere enn å måtte endre navnet alle stedene i teksten der det er brukt.

Variabler eller konstanter I JavaScript kan vi definere verdier som variabler eller konstanter. Forskjellen på disse er at verdien til en variabel kan endre seg i løpet av kjøringen av programmet, for eksempel en variabel for antall poeng en spiller har, mens en konstant ikke kan endre seg. Eksempel på en konstant, kan være maksimalt antall tegn det er lov å skrive i en melding. Vi definerer variabler med kodeordet let og konstanter med kodeordet const. Noen ganger vil du kanskje se at JavaScript bruker kodeordet var. Det var vanlig i tiden før let og const ble innført i JavaScript. 1 let poeng = 20 // Verdien kan endres senere i programmet 2 const maksTegn = 100 // Konstanten kan ikke endres senere i programmet 3 var bok = "Don Quijote" // Før skrev vi var for både variabler og konstanter

175

176

Kapittel 5

5.2 Tekst og tall VARIABLER MED TEKST OG TALL SOM VERDIER Når du skriver kode med variabler, må du tenke på hva slags type verdier du har med å gjøre. Kanskje det skal være tekst, heltall, desimaltall, prosent eller valuta. På samme måte må vi velge hvilken type verdi vi skal bruke når vi programmerer. Navnet på den inviterte i bursdagsinvitasjonen i forrige eksempel var tekst, og vi markerer det ved å sette apostrofer rundt ordet. Alt som ligger mellom apostrofene, også mellomrommene mellom ordene, er en del av teksten. let tekst = "Dette er en tekst"

Når vi skal definere en tallverdi, bruker vi ikke apostrofer. Vi kan bruke desimaltall, men da må vi bruke det internasjonale desimaltegnet punktum i stedet for komma. let bredde = 1.75

Variabler med tallverdier Verdien til en variabel kan være et tall. Hvis tallet er et desimaltall, bruker vi punktum som desimaltegn. Vi definerer variabler med navn og verdi slik: 1 let heltall = 27 2 3 let desimaltall = 27.34

Vi kunne også ha satt apostrofer rundt tallet, men da tolker datamaskinen det som teksten "1.75" og ikke tallet 1.75. Det er viktig å skille mellom disse, for det går for eksempel ikke an å gange to variabler med tekst med hverandre, som det gjør med tall. Men hvis du bare skal vise frem et tall uten å bruke det i en regneoperasjon, kan det like gjerne være en tekst.

REGNE MED TALL En datamaskin er en utmerket regnemaskin. Den er rask og tar sjelden feil. Hvis du har glemt kalkulatoren og du må regne ut noe i en fei, kan du lage en enkel nettside og skrive kode som løser problemet. Inne i krøllparentesene i HTML-koden kan du gjøre mer enn å hente ut verdier, som vi gjorde med navnet og meldingen. Du kan også skrive JavaScript-kode, som blir vist akkurat der du setter det inn i nettsiden.

Programmering med Javascript

EKSEMPEL Regnemesteren Vi skal nå skrive en kode som regner ut 20 10, 8 8 og 1 <h1>Regnemesteren</h1> 2 <p>^ `</p> 3 <p>{8 * 8}</p> 4 <p>{10 / 2}</p>

10 . 2

Hvis du vil sette inn en forklaring i HTML-koden din, for eksempel slik at regnestykkene vises, kan du enkelt gjøre det. Du må bare passe på at forklaringen din , ikke står inne i krøllparentesene. 1 <h1>Regnemesteren</h1> 2 <p> ^ `</p> 3 <p>8 * 8 = {8 * 8}</p> 4 <p>10 : 2 = {10 / 2}</p>

På nettsiden ser du resultatet av regnestykkene.

Det som står utenfor krøllparentesene, vises som vanlig tekst på nettsiden.

VARIABLER SOM ER BASERT PÅ ANDRE VARIABLER Du har sikkert opplevd at du skriver inn postnummeret ditt i et skjema på nettet, og så dukker poststedet opp. Hvis du for eksempel skriver at postnummeret ditt er 7800, finner datamaskinen kjapt ut at du bor i Namsos. En variabel kan være avhengig av en annen variabel. Det trenger ikke være verre enn at du skal beregne arealet til en vegg. Da definerer du en variabel for bredde og en for høyde, og så er arealet bredden ganget med høyden. Senere skal du få se hvordan du kan endre bredden og/ eller høyden, og at det fører til at arealet umiddelbart blir oppdatert på nettsiden.

177

178

Kapittel 5

EKSEMPEL Areal av vegg Vi skal beregne arealet til et rektangel. Først definerer vi to variabler, lengde og bredde. Så gjør vi noe nytt. Vi definerer en ny variabel som er basert på andre variabler. Denne nye variabelen kaller vi areal, og verdien av denne settes til å være lengde * bredde. 1 <script> 2 let lengde = 10 3 let bredde = 2 4

let areal = lengde * bredde

5 </script> 6 7 <p>En vegg som er {lengde} m lang og

{bredde} m bred, har arealet {areal} kvm.</p>

Vi setter inn verdien til variablene i HTML-koden.

DATATYPENE STRING OG NUMBER En verdi i JavaScript er alltid av en bestemt type. Vi kaller det en datatype. Tekst er av datatypen string, og tall er av datatypen number. Hvis du lurer på datatypen til en variabel, kan du skrive koden typeof etterfulgt av navnet på variabelen mellom krøllparentesene i HTML-koden. 1 <script> 2 let alder = 12 3 let navn = "Linus Svingen" 4 </script> 5 6 <p> 7 Datatypen til alder er {typeof alder}. 8 </p> 9 <p> 10

Datatypen til navn er {typeof navn}.

11 </p>

Verdiene til variabler kan være av forskjellige typer. Vi kaller dette en datatype, og i JavaScript brukes de engelske navnene for tekst og tall:

• Datatypen til tekst er string. • Datatypen til tall er number.

Programmering med Javascript

Verdier som er av en bestemt datatype, har spesielle egenskaper som er knyttet til denne datatypen. For eksempel vil plusstegnet fungere annerledes hvis det står to tall på hver side av det enn om det står to tekster på hver side av det. Tallene legges sammen, mens teksten skjøtes sammen. Å skjøte sammen tekst med plusstegnet på denne måten kalles konkatenering. 1 <script> 2 let tallSomTekst = "2" 3 let tall = 2 4 </script> 5 6 <p>^WDOO6RP7HNVW WDOO6RP7HNVW`</p> 7 <p>^WDOO WDOO`</p>

Plusstegnet skjøter sammen tekst og legger sammen tall: 1 "Tre " "små " "griser" // blir "Tre små griser" 2 1 2 3.5 // blir 6.5

5.3 Interaktive nettsider HVA ER EN INTERAKTIV NETTSIDE? En nettside blir interaktiv når den som bruker nettsiden, kan påvirke det som skjer. Det kan for eksempel være at du velger en sang som skal spilles, at du skriver inn et ord på spansk som du vil ha oversatt, at du laster opp en video, eller at du betaler en regning. Vi har allerede sett at HTML har forskjellige inputtyper for tall, tekst, dato osv. Vi skal nå bruke JavaScript til å hente ut verdiene fra inputfeltene, og påvirker det som skjer på nettsiden. Dermed er vi i gang med å skape en interaktiv nettside. I Svelte sier vi at vi binder de forskjellige inputfeltene til verdier som er definert i JavaScriptkoden. Vi kaller dette databinding. Da kan vi for eksempel la en bruker skrive inn navnet til en gjest som skal inviteres til fest, og så oppdateres navnet overalt der det er brukt på nettsiden. Vi binder et inputfelt til en variabel med koden slik: <input bind:value={navnPåVariabel}>

En databinding er en binding mellom data som er definert i script-blokken, og data som vises frem eller endres gjennom inputfelter i HTML-koden.

• Definer en variabel i script-blokka. • Hent frem verdien til variabelen med krøllparenteser {variabelnavn}. • Bind verdien til variabelen til inputfelter med bind:value={variabelnavn}.

179

180

Kapittel 5

EKSEMPEL Endre verdien til en variabel med et inputfelt Nå skal vi skrive om eksempelet vårt med bursdagsinvitasjonen slik at det skal være mulig å endre navnet til den vi inviterer, ved å endre teksten i inputfeltet på nettsiden. 1. Definerer variabelen navn i script-blokka og gi den verdien "Sven Sveinsen". 2. Definer et inputfelt, og bind verdien i inputfeltet til variabelen navn med bind:value={navn}. 3. Sett inn verdien til variabelen i HTML-koden ved å skrive {navn}. 1 <script> 2 let navn = "Sven Sveinsen" 3 </script>

Når vi skriver inn et annet navn, oppdateres navnet på hele nettsiden

4 5 <label>Hvem skal komme på festen: </label> 6 <input bind:value={navn}> 7 <h1>Kjære {navn}</h1> 8 <p>

Min gode venn, {navn}! <br> Jeg håper virkelig du kan komme i bursdagen min på fredag. 10 </p> 11 <p>Festen blir ikke den samme uten deg, {navn}! </p> 9

JAVASCRIPT OG MATH I JavaScript er det bygget inn en rekke matematiske metoder. Felles for disse er at vi bruker dem ved å skrive Math etterfulgt av navnet på metoden vi ønsker å bruke, og til slutt skriver vi en parentes med verdien vi ønsker å anvende metoden på. Vi kan også hente ut matematiske verdier, som PI, med Math. I koden nedenfor ser du noen eksempler. Flere matematiske metoder og egenskaper finner du i tabellen på neste side. 1 <h1>%UXN DY 0DWK L -DYD6FULSW</h1> 2 <p> 3

9.85 avrundet er <b> ^ 0DWK URXQG ` </b>

4 </p> 5 <p> 6

12.1 avrundet oppover er <b> ^ 0DWK FHLO ` </b>

7 </p> 8 <p> 9

8<sup>3</sup> er

10 </p> 11 <p> 12

&pi; = <b> { Math.PI } </b>

13 </p>

Programmering med Javascript

Legg merke til at &pi; gir symbolet S , og sup-taggen gjør at 2 tallet står opphøyd, som i x . For å skrive nedsenket tekst eller tall, som i x1, bruker vi sub-taggen.

Andre eksempler fra matematikken Kode

Forklaring

Resultat

Math.PI

Ca. 3.14

Math.E

Eulers tall

Ca. 2.718

Math.LN10

Den naturlige logaritmen til 10

Ca. 2.302

0DWK VTUW

Kvadratroten av 16

0DWK FEUW

Kubikkroten av 1000

0DWK DEV

Absoluttverdien til –20

0DWK FRV 0DWK 3,

Cosinus til 60º. I JavaScript bruker vi radianer

0.5

0DWK À RRU

Avrunder 25.98 ned (uansett desimalene)

0DWK WDQ 0DWK 3,

Tangent til 45 grader

0DWK DWDQ

Invers tangent til 1, dvs. vinkelen som har tangent = 1

0.7853981633974483 radianer som er 45 grader

0DWK PLQ

Minste tall i en liste

–10

0DWK PD[

Største tall i en liste

0DWK WUXQF

Kutter ut alle desimalene i tallet 3.214

TALL SOM INPUT I HTML har vi et inputfelt for å legge inn tall. Det er av typen number. Når vi skriver inn verdier i et slikt inputfelt og binder det til en variabel, må verdien til variabelen være et tall. <input type="number" bind:value={tallverdi}>

Hvis verdien til en variabel er et tall og du knytter den til et inputfelt, må du skrive input type="number" i inputfeltet. Hvis verdien til en variabel er en tekst, kan du skrive type="text". Det er ikke nødvendig siden Svelte automatisk oversetter HTML-koden til et inputfelt hvor det ikke er angitt type til type="text".

181

182

Kapittel 5

EKSEMPEL Finne omkretsen til en sirkel I dette eksempelet definerer vi en tallverdi for radiusen til en sirkel og binder den til et inputfelt. I HTML-koden definerer vi inputfeltet og setter typen inputfelt til å være number. Til slutt viser vi frem omkretsen av sirkelen med radiusen som står i inputfeltet. Omkretsen vil endre seg hvis du skriver inn et annet tall i inputfeltet. 1 <script> 2 let radius = 10 3 </script> 4 5 <label>Oppgi radius i antall cm: </label> 6 <input type="number" bind:value={radius}> 7 <p> 8 Omkretsen til sirkelen er {2 * Math.PI

* radius} cm 9 </p>

I JavaScript har vi noe vi kaller innebygde metoder. Disse er knyttet til de forskjellige datatypene. number har for eksempel en metode som kan brukes til å velge antall desimaler som skal vises. Denne metoden heter toFixed, og du skriver den som QXPEHU WR)L[HG DQWDOO'HVLPDOHU . Se om du klarer å vise omkretsen til sirkelen i det forrige eksempelet med bare én desimal! string har også egne metoder. Vi kan finne ut om teksten inneholder et bestemt

ord eller et tegn, eller vi kan vise teksten med bare store eller små bokstaver. Her er noen eksempler. Søker du etter "JavaScript string" på Internett, vil du finne flere metoder som kan være nyttige. I koden nedenfor demonstrerer vi noen nyttige metoder for string.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

Programmering med Javascript

Nyttige string-metoder:

• • •

VWULQJ WR8SSHU&DVH sørger for at alle bokstavene blir store. VWULQJ VXEVWULQJ VWDUW VOXWW returnerer angitt del av teksten

mellom gitte start- og sluttverdier. Merk at første bokstav er bokstav nummer 0, andre bokstav er bokstav nummer 1 osv. VWULQJ UHSODFH *DPPHO WHNVW 1\ WHNVW bytter ut gammel tekst med ny tekst.

Oversikt over nyttige string-metoder Kode

Forklaring

Resultat

SHDFKSXII FKDU$W

Tegnet på en bestemt plass. Vi starter på 0

"peachpuff".length

Antall tegn

SHDFKSXII LQFOXGHV SXII

Sjekker om et ord fins i et annet

true

VARIABLER OG CSS I kapittelet om CSS så vi hvordan vi kan forme enkelte HTML-elementer med det vi kaller inline CSS. Det er CSS som ligger som et attributt inne i HTML-elementet. <h1 style="color: peachpuff">Inline CSS</h1>

Vi kan også bruke variabler fra JavaScript-koden vår i CSS. Det gjør vi på samme måte som vi setter inn variabler i HTML-koden fra JavaScript-koden med bruk av krøllparentes. Når vi kan hente variabler i CSS, kan vi kan også la brukeren styre utseendet til nettsiden.

EKSEMPEL Sette fargen til en overskrift Nå skal vi bruke en JavaScript-variabel til å sette fargen til en overskrift. Da må vi definere en variabel for fargen i JavaScriptkoden som vi kan hente frem i CSS-koden, slik at verdien til variabelen brukes til å sette fargen til en overskrift. 1 <script> 2 let farge = "darkorange" 3 </script> 4 5 <h1 style="color: {farge}">Inline CSS</h1>

Dette gir ikke så stor merverdi, men eﬀekten blir kraftfull hvis den som bruker nettsiden, kan endre verdien til variabelen. For eksempel kan vi sette inn et inputfelt til å skrive inn hvilken farge det skal være på teksten. Alle gyldige fargekoder i CSS kan brukes.

Resultatet av koden er at fargen på overskriften blir oransje.

183

184

Kapittel 5

Gyldige fargekoder er

• • • •

navn som pink, red, darkorange osv. RGB-koder som RGB(20, 120, 44) RGBA-koder som RGBA(0, 0, 0, 0.6) hvor 0.6 er graden av synlighet (0 er usynlig 1 er helt synlig) heksadesimale farge-koder som #eeﬀcc 1 <script> 2 let farge = "darkorange" 3 </script> 4 5 <h1 style="color: {farge}">Inline CSS</h1> 6 <input bind:value={farge}>

I inntastingsfeltet skriver vi «steelblue» og ser at overskriften oppdateres automatisk, og blir blå.

Det er mulig å definere flere slike CSS-regler med inline CSS. Vi må bare huske på å sette et semikolon mellom hver CSS-regel. <h1 style="color: peachpuff; font-size: 32px;">Inline CSS</h1>

Det betyr at vi kan bruke forskjellige typer input til å kontrollere utseendet til HTML-elementer og gjøre omtrent hva vi vil med det. Hvis du setter på en liten transition i den vanlige CSS-koden, vil i tillegg overgangene animeres.

EKSEMPEL Sette skriftstørrelsen til en overskrift Vi utvider koden fra forrige eksempel ved å gi brukeren mulighet til å endre skriftstørrelsen til overskriften. Det kan vi oppnå ved å sette inn et inputfelt av typen number og hente inn verdien i CSS-koden i elementets inline-CSS. 1 <script> 2 let farge = "darkorange" 3 let størrelse = 20 4 </script> 5 6 <h1 style="color: {farge}; font-size: {størrelse}px">

Inline CSS</h1> 7 <input bind:value={farge}> 8 <input bind:value={størrelse} type="number"> 9 10 <style> 11

h1 { transition: 1s; 13 } 14 </style> 12

Nå kan vi skrive inn fargen og tekststørrelsen vi ønsker. Med transition blir overgangen fra gammel til nye verdier animert.

Programmering med Javascript

REAKTIVE VARIABLER En variabel får sin verdi med en gang nettsiden lastes inn. For eksempel kan vi si at en variabel c er utledet av a og b i denne koden: 1 let a = 5 2 let b = 2 3 let c = a b 4 a = 10

I de to første linjene defineres variablene a og b, og i linje 3 vil c få verdien a + b =5+2=7. Når vi i linje 4 setter verdien til a til 10, vil ikke c automatisk oppdateres til å bli 10+2=12. Variabelen c har derfor fortsatt verdien 7, selv om a endres. I Svelte har vi noe som heter reaktive variabler. Det er variabler som oppdateres når én eller flere av variablene de er utledet fra, endrer seg. Vi definerer en reaktiv variabel ved å bytte ut let med $: slik: 1 let a = 5 2 let b = 2 3 $: c = a b 4 a = 10

I denne koden vil c først være 7, men på linje 4 endres a til 10, og den reaktive variabelen c får verdien 12.

Å bruke reaktive variabler kan sammenlignes med å bruke formler i regneark, hvor verdien i en celle oppdaterer seg når verdien i en annen celle endrer seg.

EKSEMPEL En enkel regnemaskin med en reaktiv variabel I dette eksempelet bruker vi to inputfelter til å hente inn to tall. Verdien av tallene er knyttet til variablene a og b. Verdien til den reaktive variabelen c setter vi lik summen av a og b. Den vil da oppdateres hver gang a eller b endres.

1 <script> 2 let a = 5 3 let b = 2 4

$: c = a b

5 </script> 6 7 <input bind:value={a} type="number"> 8 <span> </span> 9 <input bind:value={b} type="number"> 10 <span> = </span> 11 <span> {c} </span> 12 13 <style> 14 input{ 15

width: 80px; } 17 </style> 16

185

186

Kapittel 5

EKSEMPEL Beregne areal med en reaktiv variabel I dette eksempelet skal vi lage et program som beregner arealet til et rektangel. Programmet skal tegne rektangelet og vise hvor stort arealet er. Som input skal vi ha to tallverdier, og denne gangen bruker vi inputtypen range. Med inputfelt av denne typen får vi en glider vi kan dra i for å endre verdien. Vi kan sette en minimumsverdi og en maksimumsverdi for glideren, slik at verdien holder seg innenfor intervallet vi definerer. Vi bruker gliderne til å kontrollere lengden og bredden til et rektangel, og den reaktive variabelen areal brukes til å beregne arealet. Tallverdien til arealet viser vi frem inne i rektangelet. 1 <script> 2 let lengde = 200 3 let bredde = 80 4

$: areal = lengde * bredde

5 </script> 6 7 <header> 8 /HQJGH P <input type="range" min="150" max="800" bind:value={lengde}> 9 %UHGGH P <input type="range" min="40" max="400" bind:value={bredde}> 10 </header> 11 <main>

<div style="width: {lengde}px; height: {bredde}px"> $UHDOHW HU ^DUHDO` P<sup>2</sup> </div> 15 </main> 12

13 14 16

17 <style> 18 main { 19 height: 100vh; 20 display: À H[; 21 22 23 24 25 26 27 28 29 30 31

align-items: center; justify-content: center; } div { background-color: darkorange; display: À H[; align-items: center; justify-content: center; transition: 0.2s; } </style>

Programmering med Javascript

5.4 Valgsetninger VALGSETNINGER OG SAMMENLIGNINGER Innholdet på en nettside er ofte styrt av input fra en bruker. Hvis du har fylt ut et skjema feil, vises det en melding som ber deg rette opp feilen før du kan gå videre. Når informasjonen er korrekt, forsvinner meldingen. Dette kan være styrt av det vi kaller en if-test eller en if-setning. Hvis (if på engelsk) en betingelse er oppfylt, det vil si at den er sann (true), vil en bestemt kode bli utført. Det er mange måter å sjekke om noe er sant på. Når det gjelder tall, kan vi skrive kode som sjekker om ett tall er større enn, mindre enn eller likt et annet tall. Resultatet av en if-test vil være enten sant eller usant (true eller false, 0 eller 1).

Verdier som enten er sanne eller usanne, kaller vi boolske verdier.

Uttrykk som sammenligner om verdier er like, kaller vi boolske uttrykk. Sammenligning

Beskrivelse

a < b

True hvis a er mindre enn b

a > b

True hvis a er større enn b

a >= b

True hvis a er større eller lik b

a <= b

True hvis a er mindre eller lik b

a === b

True hvis a er lik b

EKSEMPEL Hva er sant og usant? Vi skriver inn fem sammenligninger av tallverdier og sjekker hvilke som gir verdien true, og hvilke som gir false. 1 <p>{ 20 > 10 }</p> 2 <p>{ 10 > 10 }</p> 3 <p>{ 100 <= 100 }</p> 4 <p>{ 10 >= 10 }</p> 5 <p>{ 10 === 12 }</p>

1. 2. 3. 4. 5.

Det er sant at 20 er større enn 10. Det er usant at 10 er større enn 10. Det er sant at 100 er mindre eller lik 100. Det er sant at 10 er større eller lik 10. Det er usant at 10 er lik 12.

187

188

Kapittel 5

IF OG IFELSESETNINGER I JavaScript skriver vi en if-setning med kodeordet if etterfulgt av en parentes med et boolsk uttrykk/test. 1 if WHVW ^ 2

// Gjør noe

3 }

Hvis det boolske uttrykket blir false, kan vi legge til et else-ledd hvor vi kan skrive kode for hva som skal skje i stedet. 1 if WHVW ^ 2 // Gjør noe 3 } else { 4

// Gjør noe annet

5 }

Med ett eller flere else if-ledd kan vi sjekke flere boolske uttrykk. 1 if WHVW ^ 2 // Gjør noe 3 } else if HQ DQQHQ WHVW ^ 4

// Gjør noe annet

5 } else { 6 // Gjør noe helt annet 7 }

EKSEMPEL Med JavaScript kan vi lage tall som har en tilfeldig verdi. Koden 0DWK UDQGRP gir oss et tilfeldig tall mellom 0 og 1. Hvis tallet er større enn 0.5, viser vi en melding som sier at «Det var et stort tall.» 1 <script> 2 let melding = "" 3 let a = Math UDQGRP

if a > 0.5 ^ melding = "Det var et stort tall" 7 } 8 </script> 5 6

9 10 <h1>7DOOHW HU ^D WR)L[HG `</h1> 11 <p> 12

{melding}

13 </p>

Hvis tallet ikke er større enn 0.5, forblir meldingen tom. Med et else-ledd kan vi endre meldingen for de tilfellene.

Programmering med Javascript

1 <script> 2 let melding = "" 3 let a = Math UDQGRP

4 5 6 7 8 9

if a > 0.5 ^ melding = "Det var et stort tall" } else { melding = "Det var et lite tall" }

10 11 </script> 12 13 <h1>7DOOHW HU ^D WR)L[HG `</h1> 14 <p> 15

{melding}

16 </p>

Med flere else if-ledd kan vi gjøre testene så finmaskede vi ønsker. 1 <script> 2 let melding = "" 3 let a = Math UDQGRP

4 5 6 7 8 9 10 11 12 13 14

if a > 0.8 ^ melding = "er større } else if a > 0.5 ^ melding = "er større } else if a > 0.2 ^ melding = "er større } else { melding = "er mindre } </script>

enn 0.8" enn 0.5" enn 0.2" eller lik 0.2"

15 16 <h1>Hvor stort er tallet?</h1> 17 <p> 18 ^D WR)L[HG ` ^PHOGLQJ` 19 </p>

IFTESTER MED and OG or Noen ganger må vi sjekke om flere ting stemmer eller ikke i et boolsk uttrykk. Det kan for eksempel være på et tivoli hvor de har en berg-og-dal-bane som det kun er tillatt å kjøre hvis passasjeren både er over 150 cm høy og minst 16 år gammel. Eller det kan være at du enten må være rik eller berømt for å komme inn på en nattklubb.

189

190

Kapittel 5

Logiske operatorer I JavaScript er && og __ det vi kaller logiske operatorer. Den første (&&) står for and og den andre (__) står for or. Vi bruker && når vi skal sjekke om to uttrykk er sanne. Vi bruker __ for å sjekke om minst ett av to uttrykk er sant Anta at a = true og b = false, da gjelder følgende: Logisk uttrykk

Resultat

Forklaring

a && b

false

Her er ikke både a og b sanne

D __ E

true

Her trenger bare én av dem være sann

EKSEMPEL Rik eller berømt For å komme inn på en celeber nattklubb må du enten være rik eller berømt. Vi definerer to boolske variabler, rik og berømt. I if-testen sjekker vi om én av variablene er sanne ved å sette __ mellom de boolske variablene. For å komme inn på nattklubben må én av disse være true. Forsøk å endre på verdiene til de boolske variablene i koden din, og se hva som skjer. 1 <script> 2 let rik = false 3 let berømt = false 4 5 6 7

let melding = "Du kommer ikke inn ◵" if rik __ berømt ^ melding = "Du kommer inn ⣎" }

8 9 </script> 10 <h1>{melding}</h1>

DISKUTER

Prøv også å endre den boolske operatoren fra __ til && i koden i forrige eksempel. Hva skal til for at du skal komme inn på nattklubben nå?

Programmering med Javascript

IFTESTER I HTMLKODEN MED SVELTE Med Svelte kan vi også bruke if-setninger i HTML-koden for å styre om et innhold skal vises eller ikke. Det gjør vi ved å skrive if-setninger inn i krøllparenteser hvor innholdet starter med LI og er etterfulgt av det vi skal teste om er sant. 1 2 3

^ LI WHVW` <p>Innhold som vises hvis testen er sann</p> {/if}

Legg merke til at vi må avslutte if-testen med {/if}.

EKSEMPEL Hvor mye tid bruker du på gaming? I dette eksempelet spør vi hvor mye tid du bruker på gaming. Vi viser alltid resultatet, men hvis du spiller over 10 timer i døgnet, kommer vi med en skarp advarsel om at det er litt i overkant. 1 <script> 2 let spilletid = 2 3 </script> 4 5 <label>Hvor mange timer bruker du på gaming i løpet av et 6 7 8 9 10 11 12 13 14 15 16 17 18 19

døgn?</label> <input bind:value={spilletid} type="range" max="24"> <p>Du bruker {spilletid} timer på gaming</p> ^ LI VSLOOHWLG ! ` <p class="advarsel">Du må ikke spille så mye!!!!!!</p> {/if} <style> .advarsel { background-color: red; padding: 30px; color: white; } </style>

Hvis du oppgir at du spiller mer enn 10 timer, får du en advarsel.

SJEKKE SANNHETER OM TEKST Når du logger inn på et nettsted, vil en kode alltid sjekke om du har skrevet inn riktig brukernavn og passord. I JavaScript sammenligner vi tekst ved å sette tre likhetstegn mellom tekstene vi skal sammenligne. Når vi bruker tre likhetstegn, sjekker vi at både datatypene og verdiene til variablene er de samme på begge sidene av likhetstegnene. Datatypen til tekst kalles string, mens datatypen til tall kalles number. Dersom vi bruker to likhetstegn, sjekker vi bare verdiene, men ikke datatypene. Det fører for eksempel til at teksten "23" vil være lik tallet 23. Det er derfor lurt å alltid bruke tre likhetstegn, siden vi kan få uventede problemer i koden vår hvis noe vi tror er et tall, faktisk er en tekst.

191

192

Kapittel 5

Vi kan bruke == eller === til å sammenligne to verdier. == sjekker bare om verdiene er like === sjekker om verdiene og datatypene er like

EKSEMPEL Sammenligninger av tekster I koden nedenfor har vi laget fem tester med tekster. Les koden og sjekk at svaret blir som du forventer. 1 <ol> 2 <li> 3 {"Onkel Skrue" === "Onkel Skrue"}. Tekstene er 4 5 6 7 8 9 10 11 12 13 14 15

identiske. </li> <li> {"onkel skrue" === "Onkel Skrue"}. Det er små bokstaver i det første uttrykket. </li> <li> {"27" === 27}. De er ulike datatyper. </li> <li> {"27" == 27}. == sjekker ikke datatypene. </li> <li> {"Onkel Skrue" === "Onkel Skrue"}. Forskjellig antall mellomrom. </li> </ol>

16 17 18 19 20 <style> 21 li { 22 padding: 0; 23 margin-left: -10px; 24 padding-bottom: 18px; 25 } 26 </style>

STYRE HVILKET INNHOLD SOM SKAL VISES MED IFELSESETNINGER Med if-else-setninger kan vi også bestemme hva som skal vises hvis betingelsen i if-testen ikke er oppfylt. 1 ^ LI WHVW` 2 <p>Innhold som vises hvis testen er sann</p> 3 {:else} 4

<p>Innhold som vises hvis testen ikke er sann</p>

5 {/if}

Programmering med Javascript

En if-else-setning kan også inneholde flere tester. Da bruker vi koden else if. Hvis den første testen ikke er sann, fortsetter vi til den neste testen osv. Det er vanlig å avslutte med else for å fange opp tilfellene der ingen av testene evaluerer til true. 1 ^ LI WHVW ` 2 <p>Innhold vises hvis test1 er true</p> 3 {:else if test2} 4

<p>Innhold vises hvis test1 er false, men test2 er true</p>

5 {:else} 6 <p>Innhold vises hvis verken test1 eller test2 er true</p> 7 {/if}

EKSEMPEL Den rikeste anden i verden I dette eksempelet skal vi skrive inn navnet på den som er rikest i verden. Resultatet vises i et p-element. Hvis vi for eksempel skriver Bill Gates, vises teksten "Bill Gates er den rikeste mannen i verden". Systemet skal ikke gjøre noe forsøk på å sjekke om dette faktisk stemmer, men hvis vi skriver Onkel Skrue, skal det i stedet vises et p-element med teksten "Onkel Skrue er den rikeste anden i verden". 1 <script> 2 let navn = "" 3 </script> 4 5 <input bind:value={navn}> 6 7 ^ LI QDYQ 2QNHO 6NUXH ` 8 <p>Den rikeste <b>anden</b> i verden er {navn}</p> 9 {:else} 10

<p>Den rikeste mannen i verden er {navn}</p>

11 {/if}

KNYTTE AVKRYSNINGSRUTER TIL BOOLSKE VARIABLER Vi har sett at vi kan binde variabler og inputfelter sammen med kodeordet bind. I Svelte er det også mulig å bestemme om en avkrysningsrute, skal være krysset av på lignende vis. Hvis den boolske variabelen som er knyttet til avkrysningsruten er true i utgangspunktet, vil avkrysningsruten være krysset av. Hvis du klikker på den, vil den endres til å ikke være krysset av, og den boolske variabelen endrer verdi til false. Vi binder variabelen til en avkrysningsrute med attributtet bind:checked={boolskVariabel} i input-elementet. 1 <script>

Med bind:checked i input-elementet blir variabelen knyttet til avkryssingsboksen ved at verdien blir true når boksen blir krysset av.

let boolskVariabel = true

3 </script> 4 6 <input type="checkbox" bind:checked={boolskVariabel}> 7 <span>Verdien av boolskVariabel: {boolskVariabel}</span>

193

194

Kapittel 5

EKSEMPEL Kryss av hvis du er rik eller berømt I dette eksempelet kombinerer vi avkrysningsruter som er knyttet til de boolske variablene rik og berømt. if-else-blokken i koden skal gi deg riktig tilbakemelding avhengig av om du er både rik og berømt, enten rik eller berømt, eller verken rik eller berømt. Teksten endres når du krysser av for forskjellige svar. Det er fordi de boolske variablene endrer verdi avhengig av om rutene er krysset av eller ikke. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23

5.5 Andre egenskaper og sannheter om tekst ANTALL TEGN I EN TEKST Kodeordet length kan brukes for å finne antall tegn en tekst består av. Dette kan vi for eksempel bruke til å begrense antall tegn det er lov å skrive, eller for å sjekke at et passord inneholder nok tegn til å være gyldig. 1 <script> 2 let setning = "Hei på deg!" 3 </script> 4 <p>Setningen er: <i>{setning}</i></p> 5 <p>Setningen består av {setning.length} tegn</p>

Programmering med Javascript

EKSEMPEL Telle antall tegn mens vi skriver I dette eksempelet lager vi et tekstområde hvor man kan skrive inn tekst. Samtidig som vi skriver, skal nettsiden vise hvor mange tegn vi har skrevet. Vi bruker HTML-elementet textarea siden det er lov å skrive tekst over flere linjer i det elementet. Det er det ikke i et vanlig inputfelt. Legg merke til at blanke tegn (mellomrom) også telles med. 1 <script> 2 let tekst = "" 3 </script> 4 5 <textarea bind:value={tekst}></textarea> 6 <p> 7

Du har nå skrevet {tekst.length} tegn

8 </p> 9 10 <style> 11

textarea { width: 300px; 13 height: 250px; 14 } 15 </style> 12

DISKUTER

Hvordan kunne vi endret koden i forrige eksempel, slik at det teller antall ord i stedet for antall tegn?

195

196

Kapittel 5

EKSEMPEL Sette en grense for hvor mange tegn som er tillatt Vi kan bruke antall tegn i en sjekk hvis det for eksempel ikke er lov til å skrive mer enn et gitt antall tegn. Det kan vi bruke til å vise en advarsel hvis vi har skrevet for mye. 1 2 3 4 5 6 7 8 9 10

^ LI WHNVW OHQJWK PDNV` <p>Du har nå skrevet {tekst.length} tegn. Du har {rest} tegn igjen.</p> 11 {:else} 12 <p class="advarsel">Du har skrevet for mye. Maks antall tegn er {maks}</p> 13 {/if} 14 15 <style> 16 textarea { 17 width: 300px; 18 height: 250px; 19 } 20 .advarsel { 21 padding: 10px; 22 background-color: red; 23 color: white; 24 } 25 </style>

EKSEMPEL Sjekk av svar på quizspørsmål I dette eksempelet bruker vi WR/RZHU&DVH til å gjøre om svaret på en quiz til små bokstaver før vi sammenligner med fasiten. Vi bruker en reaktiv variabel for svaret og kaller den svar_små_bokstaver. Vi trenger ikke bruke en reaktiv variabel for fasiten siden den ikke endres, men vi definerer en variabel for fasiten som gjør den om til å bruke små bokstaver. På den måten vil vi sammenligne fasiten og svaret med bare små bokstaver, og vi kan skrive svaret uten å tenke på om vi bruker små eller store bokstaver. 1 <script> 2 let fasit = *UR +DUOHP %UXQGWODQG 3 let IDVLW6Pn%RNVWDYHU fasit.

WR/RZHU&DVH

4 5 let svar = "" 6 $: VYDU6Pn%RNVWDYHU = svar WR/RZHU&DVH

7 8 </script> 9 10 <h1>Hvem var Norges første kvinnelige

statsminister?</h1> 11 <input bind:value={svar}> 12 13 ^ LI VYDU6Pn%RNVWDYHU IDVLW6Pn%RNVWDYHU` 14 <p>Det er helt riktig!</p> 15 {/if}

Programmering med Javascript

SØKE I EN TEKST På en nettside eller i et skriveprogram kan du søke etter et ord, deler av et ord eller en setning. Dette er ofte nyttig for å raskt finne frem til innhold du leter etter. JavaScript har en metode for å utføre et slikt søk i en tekst. Metoden heter includes og sjekker om et bestemt ord fins i en tekst-string. Den returnerer enten verdien true hvis ordet fins i teksten, eller false hvis ordet ikke fins i teksten. Du kan bruke metoden til å søke etter et bestemt ord i en tekst. Vi kan knytte søkeordet til et inputfelt og sjekke om ordet vi skriver er med i teksten, og gi en tilbakemelding avhengig av om det er det eller ikke. Vi må passe på at vi gjør variablene søkeord og ordetErFunnet til reaktive variabler. Ellers vil tilbakemeldingen ikke oppdateres når vi skriver i inputfeltet. 1 <script> 2 let tekst = 'HW YDU HQ ¿ Q GDJ L PDL YnUHQ KDGGH NRPPHW RJ

bjerka spiret." let søkeord = "mai" 4 $: ordetErFunnet = tekst LQFOXGHV søkeord

5 </script> 3

6 7 <input bind:value={søkeord}> 8 9 ^ LI RUGHW(U)XQQHW` 10

<p>Søkeordet er funnet i teksten</p>

11 {:else} 12 <p>Søkeordet er <b>ikke</b> funnet i teksten</p> 13 {/if}

197

198

Kapittel 5

5.6 Funksjoner HVA ER EN FUNKSJON? Koden du har skrevet til nå, kjører, eller eksekveres, idet du åpner nettsiden med koden. Men noen ganger ønsker du ikke at koden skal starte med en gang. Tenk deg at du skal lage en chat, og at du har et inputfelt til å skrive meldinger. Dette inputfeltet vil jo være tomt i det du åpner nettsiden. Koden som sender meldingen, kan derfor ikke kjøres før noen har skrevet inn en tekst og klikket på en knapp eller trykket Enter på tastaturet. Se for deg en musikkavspiller. Den har en spille-knapp, en stoppknapp og en pauseknapp. Disse knappene er forbundet til kode som sørger for at musikken starter, stopper eller settes på pause. Men denne koden skal ikke kjøre før noen trykker på en av knappene. En funksjon er kode som har et navn, og som vi kan kjøre ved å skrive dette navnet etterfulgt av to motstående parenteser. I musikkavspilleren heter funksjonene kanskje play, stop og pause, og vi kjører dem ved å skrive SOD\ , VWRS eller SDXVH . Det er også vanlig å si at vi «kaller på funksjonen». For eksempel kan vi si at koden SOD\ kaller på funksjonen med navnet play. Knappene i avspilleren er forbundet med funksjoner.

00:27

00:54

Vi kan bruke funksjoner for å skape interaktivitet på nettsider. Når vi klikker på en knapp eller gjør en annen handling, kan vi starte funksjonen slik at koden inne i funksjonen kjøres. Det betyr at vi kan kontrollere når deler av koden vår kjører.

En funksjon består av én eller flere linjer med kode. Denne koden kjøres når vi kaller på funksjonen. Vi kaller på funksjonen ved å skrive navnet på den (funksjons-kallet). Vi kan også kalle på funksjonen når noen trykker på en knapp eller lignende på nettsiden.

Programmering med Javascript

Tradisjonelt skrev vi funksjoner med kodeordet function. Nå bruker vi gjerne det som kalles en arrowfunksjon.

Kanskje det kalles en arrow-funksjon fordi det ligner litt på en bue som skyter ut en pil? () er buen, og => er pilen.

1 // En tradisjonell funksjon: 2 function IXQNVMRQVQDYQ ^ 3

// 6NULY pQ HOOHU À HUH OLQMHU PHG NRGH

4 } 5 6 // En arrow-funksjon: 7 const IXQNVMRQVQDYQ ! ^ 8 6NULY pQ HOOHU À HUH OLQMHU PHG NRGH 9 }

Funksjonen er definert som en konstant fordi funksjonen aldri skal endre seg, selv om funksjonen i seg selv ofte endrer på noe. For å kalle på en funksjon skriver vi IXQNVMRQVQDYQ , uansett om funksjonen er en tradisjonell funksjon eller en arrow-funksjon.

EKSEMPEL En funksjon som endrer verdien på en variabel Vi starter med en enkel funksjon som bare har som oppgave å endre verdien på en variabel. Etter at vi har definert funksjonen, kaller vi på den. Ikke tenk på at det denne koden gjør, virker ganske nytteløst. Du vil se nytten av funksjoner ganske snart. 1 <script> 2 let navn = "Fats Domino" 3 const HQGUH1DYQ ! ^

navn = 3OiFLGR 'RPLQJR } 6 endreNavn // Dette er funksjonskallet 7 </script> 8 <h1>Mitt navn er {navn}</h1> 4 5

199

200

Kapittel 5

Når du søker på nettet eller leser andre bøker, vil du se både den gamle og den nye måten å skrive funksjoner på. Vi har valgt å bruke arrow-funksjoner i denne boka fordi det er en moderne måte å skrive funksjoner på, og fordi det gir noen andre fordeler sammenlignet med den tradisjonelle måten å gjøre det på. Det vil du se senere i boka.

KALLE PÅ EN FUNKSJON MED KLIKK PÅ EN KNAPP Knapper og funksjoner er som skapt for hverandre. Et klikk på en knapp er ofte knyttet til et kall på en funksjon. I Svelte kan vi knytte en knapp til en funksjon og definere at funksjonen skal kalles på når vi klikker på knappen, ved å skrive koden <button on:click={funksjonsnavn}>.

Hvis et klikk på en knapp skal kalle på (starte) en funksjon, skriver vi koden: <button on:click={funksjonsnavn}>

Legg merke til at vi nå ikke skriver () etter funksjonsnavnet. Det er fordi koden med parenteser etter navnet, som i IXQNVMRQVQDYQ , vil kalle på funksjonen når nettsiden lastes inn, og ikke når vi klikker på knappen. Når du klikker på knappen, kjøres koden til IXQNVMRQVQDYQ .

EKSEMPEL La oss definere en enkel funksjon. Et klikk på en knapp skal endre navnet til en president til noe annet enn det først var. I JavaScriptkoden definerer vi funksjonen nyPresident, og i HTML-koden definerer vi at et klikk på en knapp skal starte funksjonen. 1 <script> 2 let president = "Donald Trump" 3 const Q\3UHVLGHQW ! ^

president = -RH %LGHQ } 6 </script> 4 5 7 8 <button on:click={nyPresident}>*L 86$ HQ Q\

president</button> 9 <h1>3UHVLGHQWHQ L 86$ HU ^SUHVLGHQW`</h1>

Her setter vi en helt ny verdi til variabelen president. Vi kan også endre verdier i funksjonen, og et klassisk eksempel på det er å øke et tall hver gang vi klikker på knappen.

Når vi klikker på knappen m starter funksjonen nyPresident, og USA får en ny president.

Programmering med Javascript

EKSEMPEL Øke en verdi når vi klikker på en knapp I JavaScript kan vi øke et tall med verdien 1 på tre forskjellige måter. WDOO WDOO WDOO WDOO

I dette eksempelet bruker vi WDOO for å øke verdien på et tall hver gang vi klikker på en knapp som er markert med +-tegnet. Klikk på knappen kaller på funksjonen øk. 1 <script> 2 let tall = 20 3 const ¡N ! ^ 4 tall 5

}

6 </script> 7 8 <button on:click={øk}> </button> 9 <p> 10

Tallet er nå {tall} 11 </p>

Resultatet av koden etter at vi har klikket 22 ganger på knappen.

EKSEMPEL Snurre en tekst rundt hver gang vi trykker på en knapp Funksjoner kan brukes til å gi folk en umiddelbar reaksjon når de utfører en handling på nettsiden. I dette eksempelet snurrer vi teksten rundt hver gang noen klikker på knappen. Dette får vi til ved å bruke inline CSS på elementet som skal snurre, og endre verdien som sier hvor mange ganger det skal rotere. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

201

202

Kapittel 5

FUNKSJONER MED PARAMETERE OG RETURVERDIER Noen funksjoner kan ta imot verdier som funksjonen skal bruke. Vi sender altså verdier inn i funksjonen. Verdier vi sender inn i funksjonen, kaller vi for parametere. Inne i funksjonen vil parameterne fungere som variabler. Du kan bruke dem ved å skrive inn navnet på parameteren. Vi har allerede sett et eksempel på det da vi brukte 0DWK SRZ . Der sender vi tallene 9 og 2 inn i funksjonen. Funksjonen utfører regneoperasjonen 92. Hvis vi sender inn andre tall, får vi et annet svar. Når vi skal lage våre egne funksjoner med parametere, skriver vi inn navn mellom parentesene i funksjonen på denne måten: const VHWW6DPPHQ1DYQ ! fornavn, etternavn ^ // Inni funksjonen fungerer fornavn og etternavn som variabler }

Det er først når vi kjører funksjonen, at parameterne får verdi. I funksjonskallet skriver vi inn verdiene. Dette kaller vi argumenter, og de må passe med parameterne i funksjonen. For eksempel kan vi sende inn et fornavn og et etternavn som argumenter til funksjonen på denne måten: settSammenNavn "Edvard", "Munch"

En funksjon kan ta imot én eller flere parametere. Parameterne får verdi gjennom det vi kaller argumenter, som vi sender inn i funksjonskallet. 1 const IXQNVMRQVQDYQ parameter1, parameter2 ! ^ 2 SDUDPHWHU InU YHUGLHQ $UJXPHQW " 3 4 }

SDUDPHWHU InU YHUGLHQ $UJXPHQW

5 funksjonsnavn $UJXPHQW , $UJXPHQW

EKSEMPEL En funksjon som setter sammen fornavn og etternavn Funksjonen har to parametere, fornavn og etternavn. I funksjonskallet sender vi inn "Edvard" og "Munch" som argumenter til funksjonen. Funksjonen setter sammen fornavnet og etternavnet til det fulle navnet. 1 <script> 2 let fulltNavn = "" 3 const VHWW6DPPHQ1DYQ fornavn, etternavn ! ^ 4 fulltNavn IRUQDYQ " " HWWHUQDYQ 5

}

6 7

settSammenNavn "Edvard", "Munch"

8 </script> 9 10 <h1>God dag, {fulltNavn}!</h1>

Programmering med Javascript

ANONYME FUNKSJONER En anonym funksjon er en funksjon uten et navn. En vanlig situasjon hvor vi får bruk for en anonym funksjon, er hvis vi ønsker å kalle på en funksjon med parametere med klikk på en knapp eller lignende. Koden for en anonym funksjon ser slik ut: ! ^ .RGH VRP VNDO XWI¡UHV `

Siden vi ikke skriver parenteser når vi kaller på en funksjon med klikk på en knapp, må vi finne en måte å løse det, så vi får sendt inn parametere likevel. Det kan vi gjøre ved å la klikket kalle på en anonym funksjon, som igjen kaller på funksjonen med parametere: 1 <script> 2 const IXQNVMRQ0HG3DUDPHWHUH parameter1, parameter2 ! ^ 3 // Innhold i funksjonen 4

}

5 </script> 6 <button on:click

^ ! IXQNVMRQ0HG3DUDPHWHUH DUJXPHQW DUJXPHQW }>Knappetekst</button>

EKSEMPEL Endre navn med klikk på en knapp Når en funksjon har parametere, betyr det at vi kan sende inn forskjellige verdier som argumenter til funksjonen. I dette eksempelet lager vi to knapper. Når du klikker på den ene, kaller den opp funksjonen med argumentene "Marie" og "Curie" som henholdsvis fornavn og etternavn. Funksjonen endrer verdien til variabelen navn til "Marie Curie". Hvis du klikker på den andre knappen, endres navnet til "James Bond". 1 <script> 2 let navn = "John Donne" 3 const ODJ1\WW1DYQ fornavn, etternavn ! ^ 4 navn IRUQDYQ " " HWWHUQDYQ 5

}

6 </script> 7 8 <h1> 9 Mitt navn er {navn} 10 </h1> 11 <button on:click 12 Marie Curie 13 </button> 14 <button on:click 15 -DPHV %RQG 16 </button>

^ ! ODJ1\WW1DYQ 0DULH &XULH `>

^ ! ODJ1\WW1DYQ -DPHV %RQG `>

203

204

Kapittel 5

EKSTRASTOFF

Et klikk på en knapp kalles en hendelse, på engelsk event. Klikkhendelsen setter i gang en funksjon fordi vi skriver on:click som et attributt i knappen. Men det fins også andre hendelser enn klikk, for eksempel on:mousemove, som er hendelsen at vi drar musa, eller pilen, over noe. Alle slike hendelser sender automatisk med et argument inn i funksjonen, som er selve hendelsen. Det ligger mye informasjon i en hendelse, blant annet hvor langt til høyre på nettsiden pila befinner seg, hvor langt fra toppen den er osv. Nå viser vi deg kode som tegner opp en sirkel på nettsiden akkurat der pila er. Det er sikkert mye her som ikke er så lett å forstå. Du kan utforske koden, og kanskje skjønner du mer og kan komme tilbake til denne koden når du har trent litt mer på å kode. Hendelser gir enorme muligheter til å skape spennende og kunstnerisk innhold på nettsidene dine. 1 <script> 2 let cx = 0 3 let cy = 0 4 5

let r = 0 let sirkler = []

6 7 8 9 10 11 12 13 14 15

const ODJ6LUNHO H ! ^ cx = e.clientX cy = e.clientY sirkler = [{cx: cx, cy: cy}, ...sirkler] if sirkler.length > 100 ^ sirkler SRS } } </script>

16 17 <svg on:mousemove={lagSirkel}> 18 ^ HDFK VLUNOHU DV VLUNHO`

<circle ¿ OO="none" stroke="white" cx={sirkel.cx} cy={sirkel.cy} r={50} /> {/each} 21 </svg> 19 20 22 23 <style> 24 svg { 25

width: 100%; height: 100%; background-color: orange;

26 27 28

}

29 </style>

Programmering med Javascript

FUNKSJONER MED RETURVERDI Vi bruker altså parametere og argumenter for å sende verdier inn i en funksjon. Men funksjonen kan også sende noe tilbake. Vi sier da gjerne at funksjonen returnerer en verdi. Det har vi allerede sett et eksempel på med blant annet 0DWK UDQGRP og 0DWK SRZ . De finner et tall og gir oss dette tallet i retur. let tilfeldigTall = Math UDQGRP

Det som skjer når denne linja med kode kjøres, er følgende: 1. Først finner 0DWK UDQGRP et tilfeldig tall. 2. Så settes verdien til variabelen tilfeldigTall til den verdien som 0DWK UDQGRP returnerer. 3. Vi sier at dette tallet er returverdien til 0DWK UDQGRP . Når vi skal skrive våre egne funksjoner som returnerer en verdi, bruker vi kodeordet return etterfulgt av verdien funksjonen skal returnere. En funksjon kan kun returnere én verdi. Når funksjonen har returnert en verdi, avslutter den. Det vil si at selv om det er flere linjer med kode etter at funksjonen har returnert en verdi, vil disse linjene med kode ikke bli kjørt.

1. Vi bruker kodeordet return for å bestemme hva en funksjon skal returnere. 2. En funksjon kan kun returnere én verdi. 3. Etter at funksjonen har returnert en verdi avsluttes funksjonen.

EKSEMPEL En funksjon som returnerer et navn Denne funksjonen tar et fornavn og et etternavn som parametere og returnerer det sammensatte navnet. Vi kan dermed bruke den til å definere variabler som vil bestå av det fulle navnet til personene. 1 <script> 2 const VHWW6DPPHQ1DYQ fornavn, etternavn ! ^ 3 let IXOOW1DYQ IRUQDYQ " " HWWHUQDYQ 4 5

return fulltNavn }

let oda = settSammenNavn "Oda", "Krogh"

let edvard = settSammenNavn "Edvard", "Munch"

9 </script> 7 8

10 11 <h1>{oda} er en maler.</h1> 12 <h1>{edvard} er en maler.</h1>

205

206

Kapittel 5

EKSTRASTOFF

Skumle lyder Til slutt i dette kapittelet viser vi deg et eksempel på hva kode og utforsking av kode kan føre til. Med JavaScript kan du lage lyd i nettleseren, og en funksjon kan spille av denne lyden. Dessuten har vi sett at vi kan fange opp hvor på skjermen pila er, og det kan vi bruke til å styre frekvensen til lyden. Vi vil ha mørke toner når pila er til venstre på skjermen, og lysere når den beveger seg til høyre. Dette eksempelet er det ikke meningen at du skal forstå i sin helhet, det er ment som et utgangspunkt for utforskning og kreativitet. Advarsel: Hvis du skriver inn koden og tester dette i klasserommet, bør du ta på hodetelefoner! 1 <script> 2 let sirkler = [] 3 let l = 0 4 $: farge = KVO ^O` 5 let ac $XGLR&RQWH[W 6 7 // En funksjon som spiller en tone med frekvens bestemt av hvor 8 // på skjermen musa er. Lenger til høyere => høyere frekvens 9 const SOD\ H ! ^ 10 // Hvis ikke ac er laget, må vi lage den nå 11 if ac ^ 12 let $XGLR&RQWH[W window $XGLR&RQWH[W // Default 13 __ window.ZHENLW$XGLR&RQWH[W // Safari and old versions of Chrome 14 __ false; 15 ac = new $XGLR&RQWH[W

16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53

} const osc = ac FUHDWH2VFLOODWRU // En oscillator lager svingninger osc FRQQHFW ac GHVWLQDWLRQ // Kobler svingningen til høyttaleren osc.frequency.value = e.clientX, // Setter frekvensen til x-posisjon til musa osc VWDUW ac FXUUHQW7LPH // Starter lyden osc VWRS ac FXUUHQW7LPH 1 // Stopper den etter 1 sekund l = Math UDQGRP 180 // l VRP L KVO KXH VDWXUDWLRQ OLJKWQHVV

sirkler = [e.clientX, ...sirkler] if sirkler.length > 300 ^ sirkler SRS // Tar ut sirkler når det blir over 300 stk } } </script> <div on:mousemove={play} style="background: {farge}"> <svg> ^ HDFK VLUNOHU DV VLUNHO` <circle stroke="white" ¿ OO="none" cx="500" cy="400" r={sirkel}/> {/each} </svg> </div> <style> div { width: 100%; height: 100%; } svg { height: 100%; width: 100%; } :global body ^ margin: 0; padding: 0; } </style>

Programmering med Javascript

207

208

Kapittel 5

> JavaScript er et programmeringsspråk som blir oversatt til maskinkode av nettle-

SAMMENDRAG

seren. Vi bruker JavaScript når vi lager dynamiske nettsider. JavaScript-kode skrives inne i et script-element. > I en dynamisk nettside kan du utføre en handling som påvirker utseendet eller

innholdet på nettsiden. Slike handlinger kan være klikke, tappe, sveipe, taste inn tekst, laste opp bilder eller ta opp video. > I JavaScript skriver vi kommentarer i koden //sånn eller /*slik*/. > En kompilator oversetter forenklet kode til tradisjonell HTML, CSS og JavaScript. > En variabel består av et navn og en verdi og defineres slik i script-elementet:

let navn = verdi > Hvis verdien til en variabel er en tallverdi, skriver vi bare tallet. I desimaltall bruker

vi punktum som desimaltegn. Variabelen blir da av datatypen number. > Hvis verdien til en variabel er tekst, skriver apostrofer rundt teksten:

"tekst-verdi".

Variabelen blir da av datatypen string. Å skjøte sammen to eller flere tekststrenger med +-tegnet, heter konkatenering. Resultatet av koden IUL PLQXWW blir friminutt. > Du kan sjekke datatypen til en variabel med typeof etterfulgt av variabelnavnet. > Når vi vil hente frem verdien til variabelen på nettsiden vår, skriver vi krøllparen-

teser rundt variabelens navn, som vi har gjort her: <p> Min gode venn, {navn}!</p> > Når vi skriver <input bind:value={navnPåVariabel}> oppdateres ver-

dien til variabelen med det som blir skrevet i innskrivingsfeltet. Dette kalles databinding. > I JavaScript fins innebygde metoder for datatypen string, se tabellen på s. 183.

Noen nyttige matematiske metoder finner du i tabellen på s. 181. > Reaktive variabler oppdateres når én eller flere av variablene de er utledet fra,

endrer seg. Vi definerer den reaktive variabelen areal slik: $: areal = lengde * bredde

Programmering med Javascript

> Boolske verdier er verdier som enten er sanne eller usanne, true eller false.

Boolske uttrykk sammenligner verdier og gir svar på om uttrykket er sant eller usant. > I script-elementet skriver vi en if-setning slik: 1 if WHVW ^ 2 // Gjør noe 3 } else if HQ DQQHQ WHVW ^ 4

// Gjør noe annet

5 } else { 6 // Gjør noe helt annet 7 }

> I HTML-koden skriver vi en if-setning slik: 1 ^ LI WHVW ` 2 <p>Innhold vises hvis test1 er true</p> 3 {:else if test2} 4

<p>Innhold vises hvis test1 er false, men test2 er true</p>

5 {:else} 6 <p>Innhold vises hvis verken test1 eller test2 er true</p> 7 {/if}

> En funksjon består av én eller flere linjer med kode. Funksjoner kan ta input-data,

som kalles parametere, og returnere én verdi. Koden for å lage en funksjon er på denne formen: 1 const IXQVNMRQVQDYQ parameter1, parameter2 ! ^ 2 // 6NULY pQ HOOHU ÀHUH OLQMHU PHG NRGH 3

Parameterne er variabler som kan brukes i funksjonen. return variabelNavn

4 }

> Koden kjøres når vi kaller på funksjonen med IXQNVMRQVQDYQ .

Hvis vi vil at funksjonen skal kjøres når en knapp klikkes på, skriver vi <button on:click={funksjonsnavn}>.

209

210

Kapittel 5

Oppgaver 5.1 Programmeringsspråket JavaScript z 5.01 a) Bruk JavaScript-koden nedenfor og lag en helt lignende kode for grunnstoﬀet kalsium, som har det kjemiske symbolet Ca. Kalsium er et fast stoﬀ ved romtemperatur og har 20 protoner i kjernen. 1 <script> 2 // Variabler for å lagre informasjon om grunnstoffet kalium 3 let grunnstoff = "kalium" 4

let kjemiskSymbol= "K" let atomnummer = 19 6 let tilstand = "fast stoff" 7 </script> 5

8 9 <p> 10

Grunnstoffet <b>{grunnstoff}</b> har det kjemiske symbolet <b>{kjemiskSymbol}</b>.<br> Tilstanden ved romtemperatur er <i>{tilstand}</ i>. <br> $WRPQXPPHUHW WLO ^JUXQQVWRII` HU <i>$</i> = {atomnummer}, som vil si at det er {atomnummer} protoner i kjernen. 11 </p>

b) Skriv en lignende kode for grunnstoﬀet fluor, som har det kjemiske symbolet F. Fluor er i gassform ved romtemperatur og har 9 protoner i kjernen. c) Gjenta det samme for grunnstoﬀet fosfor, som har det kjemiske symbolet P og 15 protoner i kjernen. Fosfor fins i fast form ved romtemperatur.

z 5.02 I barnesangen «Tre små kinesere» er tekstens første vers slik: Tre små kinesere på Højbro plass satt og spilte på en kontrabass. Så kom en konstabel, spurte hva det var. Tre små kinesere på Højbro plass.

Oppgaver

I hvert vers bytter man ut vokalene med én annen vokal, for eksempel a: Tra sma kanasara pa Hajbra plass satt ag spalta pa en kantrabass. Sa kam an kanstabal, sparte hva dat var. Tra sma kanasara pa Hajbra plass. Lag en variabel som du kaller vokal. Skriv inn dette avsnittet Svelte, men sett krøllparenteser der det er vokaler. Se om du klarer å bytte ut alle vokalene.

zz 5.03 Bruk variabler og krøllparenteser til å fylle ut adjektivhistorien nedenfor. Strekene mellom ordene viser hvor du skal sette inn en variabel. Det var en _ dag at jeg skulle på den _ skolen for å ha en _ norsktentamen. Jeg sto opp og tok på meg de _ klærne mine før jeg gikk ned og spiste _ frokost. Så gikk jeg ut på den _ veien. På veien møtte jeg en _ hund. Den bjeﬀet og beit tak i den _ sekken jeg hadde på den _ ryggen min. Jeg slenkte fra meg sekken og løp rett til det _ klasserommet uten å stanse. Den _ læreren var så imponert over den _ historien min. «Slike _ historier viser at du har en _ fantasi. Du trenger ikke å skrive et _ ord for å overbevise meg om dine _ evner.» Så fikk jeg en _ karakter på stedet og resten av den _ dagen fri.

5.2 Tekst og tall z 5.04 1 <script> 2 let P Math UDQGRP 10 WR)L[HG 2

3 let GP m * 10 WR)L[HG 1

let FP m * 100 WR)L[HG 0

let PP m * 1000 WR)L[HG 0

6 </script> 4 5 7 8 <p> En lengde på {m} m = {dm} dm </p> 9 <p> En lengde på {m} m = {cm} cm </p> 10 <p> En lengde på {m} m = {mm} mm </p>

a) Studer koden ovenfor og forklar hva den gjør. b) Skriv en kode som regner ut arealet til en trekant når grunnlinjen og høyden er tilfeldige tall. Svaret skal skrives ut med et p-element. c) Skriv en kode som regner ut arealet og omkretsen til en sirkel med en tilfeldig radius. Svaret skal skrives ut med p-elementer.

211

212

Kapittel 5

z 5.05 Reinert Rask driver Fort og gæli webdesign og har gitt deg deltidsjobb. Han har skrevet følgende kode: 1 <script> 2 let telefonnummer = 05050 3 </script> 4 5 <div>Ring oss på {telefonnummer} hvis du har spørsmål.</div>

Når han kjører koden, vises ikke telefonnummeret på nettsiden. Klarer du å finne ut hva som er galt, slik at du kan hjelpe Reinert med å vise telefonnummeret på nettsiden?

zz 5.06 Reinert Rask i Fort og gæli webdesign sender deg en ny kodesnutt: 1 <script> 2 const navn = "verden" 3 navn = 5 4 </script> 5 <h1>Hallo {navn}!</h1>

Han fikk feilmeldingen «invalid assignment to const ‘navn’». Klarer du å finne én eller to måter å rette dette på?

zz 5.07 a) Definer en variabel med navnet ord med "bokstav" som verdi. Ordet skal vises på nettsiden. b) Skriv {ord.length} i et p-element. Bytt ut verdien til variabelen ord med et annet ord. Hva gjør koden? c) Skriv {ord[3]} i et p-element. Prøv ut andre positive tallverdier. Hva gjør koden? d) Skriv ^RUG LQGH[2I D ` i et p-element. Sett inn andre bokstaver enn «a». Prøv også med flere bokstaver samtidig, f.eks. «av». Hva gjør LQGH[2I ? e) Skriv ^RUG VOLFH ` i et p-element. Sett inn andre positive og negative tall. Hva gjør VOLFH ? f) Skriv ^RUG VOLFH ` i et p-element. Hva blir resultatet nå?

zz 5.08 Bruk metodene VSOLW og MRLQ til å dele opp en tekststreng og binde den sammen med bindestreker mellom hver bokstav. For eksempel skal ordet «foo» bli «f-o-o». Du kan ta utgangspunkt i koden nedenfor. 1 <script> 2 let ord = "foo" 3 let RUG0HG%LQGHVWUHNHU ord 4 // ToDo: Ordet skal bli ‘f-o-o’. 5 </script> 6 7 <div>^RUG` VWDYHV Sn I¡OJHQGH PnWH ^RUG0HG%LQGHVWUHNHU`</div>

Oppgaver

zz 5.09 Bruk 0DWK URXQG 0DWK UDQGRP

til å generere to tilfeldige, heltallige variabler. Her kaller vi dem tall1 og tall2, som begge har verdier under 10. Lag en tabell med fem rader og fem kolonner som på bildet nedenfor. Tabellen viser svaret når vi bruker de fire grunnleggende regneartene. Hver rad i tabellen skal være på formen:

tall1 «regneart» tall2 = svar

zz 5.10 Tidligere var det vanlig å skrive bokstavene æ, ø og å med bokstavparene ae, oe og aa. I dag er det vanlig å bytte ut bokstavene med bokstavpar hvis man skriver på et engelsk tastatur. Dette er spesielt vanlig i e-postadresser og URL-er. Bruk string.replace til å bytte ut æ, ø og å med sine tilhørende bokstavpar i følgende pangram: Jeg begynte å fortære en sandwich mens jeg kjørte taxi på vei til quiz. Resultatet skal bli: Jeg begynte aa fortaere en sandwich mens jeg kjoerte taxi paa vei til quiz.

zz 5.11 JavaScript-koden nedenfor genererer et tilfeldig tall mindre enn 50 for temperaturen i celsiusgrader og regner om til fahrenheitgrader. Med koden 0DWK UDQGRP genererer vi et desimaltall mellom 0 og 1. Vi runder av tallet til én desimal ved å bruke WR)L[HG . 1 <script> 2 let celcius = Math.UDQGRP 50 3 let fahrenheit = 32 celcius * 9/5 4 </script> 5 6 <h2>Fra celcius til fahrenheit </h2> 7 <h3>^FHOFLXV WR)L[HG ` JUDGHU FHOFLXV ^IDKUHQKHLW WR)L[HG ` JUDGHU IDKUHQKHLW </h3>

a) For å regne om fra celsiusgrader til kelvingrader bruker vi formelen NHOYLQ FHOVLXV. Utvid koden slik at programmet regner om fra celsiusgrader til kelvingrader. b) Utvid koden slik at den regner om fra fahrenheitgrader til kelvingrader.

213

214

Kapittel 5

zzz 5.12 I engelskspråklige land har de et røverspråk som kalles pig latin (griselatin). Vi skal lage en forenklet oversetter til griselatin. Den første setningen på Sveltes hjemmeside er «Svelte is a radical new approach to building user interfaces», og på griselatin blir den «velteSay siay aay adicalray ewnay pproachaay otay uildingbay seruay nterfacesiay». a) Finn logikken bak griselatin. b) Bruk VOLFH og +-operatoren til å oversette et engelsk ord til griselatin.

5.3 Interaktive nettsider zzz 5.13 Hvis du setter attributtet type til range, altså <input type="range">, får du en glider som lar brukeren velge en verdi fra et angitt intervall. Vi kan lage en glider som bestemmer hvor mye rødt det skal være i en overskrift, på følgende måte: 1 <script> 2 let rød = 0 3 </script> 4 5 <label>Rødhet<input bind:value={rød} min=0 max=255 type="range"></label> 6 7 <h1 style= FRORU UJE ^U¡G` >Overskrift med farge</h1>

Legg til glidere slik at brukeren kan bestemme hvor mye grønt og blått det skal være i overskriftens farge.

z 5.14 Med metoden WR8SSHU&DVH kan man konvertere en streng til bare store bokstaver. Hvis du skriver koden nedenfor i Svelte-editoren, vil resultatet bli «Hello WORLD!» 1 <script> 2 let navn = "world" 3 </script> 4 <h1>+HOOR ^QDPH WR8SSHU&DVH ` </h1>

Lag en side med et inputfelt. Det brukeren skriver inn, skal konverteres til store bokstaver.

Oppgaver

z 5.15 Bruk eksempelet på side 185 og lag en interaktiv kalkulator med de fire regneartene. Se bildet nedenfor for tips.

a) Definer én variabel for det første tallet, en annen for det andre tallet og en reaktiv variabel for summen, altså WDOO WDOO . Lag to inputfelt slik at brukeren kan skrive inn de to tallverdiene. Sjekk at svaret blir riktig. b) Definer to nye variabler for tallene som inngår i subtraksjonen, og en reaktiv variabel for diﬀeransen, altså tall3 - tall4. Lag to nye inputfelt slik at brukeren kan skrive inn de to tallverdiene. Sjekk at svaret blir riktig. c) Definer to nye variabler for tallene som inngår i multiplikasjonen, og en reaktiv variabel for produktet, altså tall5 * tall6. Lag to nye inputfelt slik at brukeren kan skrive inn de to tallverdiene. Sjekk at svaret blir riktig. d) Definer to nye variabler for tallene som inngår i divisjonen og en reaktiv variabel for kvotienten, altså tall7/tall8. Lag to nye inputfelt slik at brukeren kan skrive inn de to tallverdiene. Sjekk at svaret blir riktig. Bruk WDOO WDOO WR)L[HG for å avrunde resultatet med to desimaler. Sjekk spesielt hva svaret blir hvis nevneren settes lik null.

zz 5.16 Lag en nettside som presenterer og regner ut regnestykkene: a) 4S r 2 der r = 8 cm

c) e1.609 der e er Eulers tall

b) cos(30q)

zz 5.17 Kommer du på noe innenfor matematikk eller andre realfag som du må regne ut ofte, for eksempel arealet av en trekant eller et trapes? Lag en nettside med Svelte der du kan sette inn verdier for de forskjellige variablene og få svaret.

215

216

Kapittel 5

zzz 5.18 Utvid koden fra oppgave 5.12 slik at en bruker kan skrive en setning på engelsk i et inputfelt og få setningen oversatt til griselatin.

zzz 5.19 I matematikk kalles en pil i et koordinatsystem for en vektor. En tredimensjonal vektor beskrives av tre koordinater: vektor = [x, y, z], der x, y og z forteller hvor langt i x-, y- og z-retningen vektoren peker. Vektoren på figuren nedenfor har koordinatene [3, 0, 2].

Vektorproduktet er en regneoperasjon der to vektorer ganges sammen. Svaret på et vektorprodukt er en ny vektor som står vinkelrett på begge vektorene vi ganger sammen. Vektorprodukter er ganske enkle, men tidkrevende å regne ut. Derfor egner de seg godt for et dataprogram. Produktet mellom vektorene v1 = [x1, y1, z1] og v2 = [x2, y2, z2] gir svaret v3 = [x3, y3, z3], der x3, y3 og z3 kan regnes ut med følgende formler: x3 = y1*z2 - y2*z1 y3 = z1*x2 - z2*x1 z3 = x1*y2 - x2*y1

a) Lag 6 inputfelt der brukeren kan skrive inn koordinatene til v1 og v2. Programmet skal regne ut koordinatene til v3 og presentere resultatet slik: <h1>Resultat av vektorproduktet</h1> <p>v3 = [{x3}, {y3}, {z3}]</p>

b) En bruker vil helst skrive inn én hel vektor i samme felt ved å skrive koordinatene slik: 3, 0, 2. Oppdater koden din fra a slik at dette blir mulig.

Oppgaver

zz 5.20 Søk på Internett og finn flere nyttige metoder for datatypene number og string. Lag en nettside med Svelte der du demonstrer hvordan metodene fungerer.

5.4. Valgsetninger && 5.5. Andre egenskaper og sannheter til tekst zz 5.21 a) Hva er en boolsk verdi og et boolsk uttrykk? b) Vurder de boolske uttrykkene nedenfor og avgjør om hvert uttrykk gir true eller false. Sjekk deretter svaret ditt med JavaScript-kode. 20 < 20 150 >= 50 15 === "15" 0DWK ÀRRU

0DWK VTUW 0DWK PD[ 0DWK DEV 0DWK PLQ

! 0DWK PD[

z 5.22 Skriv et program som genererer et tilfeldig tall mellom 0 og 1. Bruk if-else-setninger til å undersøke om tallet er større enn 0.9, 0.7, 0.5, 0.3 eller 0.1. Hvis tallet er mindre enn 0.1, skal meldingen «Dette er et lite tall» vises på skjermen. Hvis tallet er større enn 0.9, skal meldingen være «Dette er et stort tall». Hvis tallet er større enn 0.7, skal meldingen være «Tallet er større enn 0.7». Meldingen skal være tilsvarende om tallet er større enn 0.5 eller 0.3.

z 5.23 Et engelsk ordtak vil ha det til at «If it walks i like a duck, and it quacks like a duck, then it must be a duck». Lag to sjekkbokser, én med teksten «Går som en and» og én med teksten «Kvekker». Hvis begge to er krysset av, skal meldingen «Dette er en and» vises et sted på skjermen.

z 5.24 Lag et inputfelt der brukeren skal skrive inn høyden sin i meter. Hvis noen skriver inn et tall som er høyere enn 3 meter (det høyeste mennesket hittil var 2,72 m), skal brukeren få denne beskjeden: «NB! Du kan ikke skrive inn en høyde høyere enn 3 meter; kontakt Guinness rekordbok dersom du trenger mer.»

217

218

Kapittel 5

zz 5.25 Lag et inputfelt av typen number for at brukeren kan skrive inn atomnummer til et grunnstoff. a) Brukeren skal oppgi et heltall for atomtallet mellom én og fem. Det tilsvarende grunnstoffet skal da vises i et eget felt med grønn tekstfarge. b) Hvis brukeren skriver et tall større enn 5, skal en melding med blå tekstfarge forklare at bare grunnstoffene fra 1–5 er lagt inn. c) Hvis brukeren skriver inn et tall mindre enn 1, skal en feilmelding med rød tekstfarge forklare at atomnummeret ikke kan være mindre enn 1.

zz 5.26 I denne oppgaven skal du lage en forenklet versjon av en minibank. Brukeren skal kunne skrive et firesifret tall for pinkoden og et uttaksbeløp. Svelte minibank skal ønske brukeren velkommen. La pinkoden være 1234 og saldoen 2000 kr. Videre skal programmet oppfylle følgende krav:

• • •

Hvis pinkoden ikke stemmer, skal det gis en feilmelding i rødt. Hvis pinkoden stemmer, men uttaksbeløpet overstiger saldoen, skal det gis en advarselstekst i blått. Hvis pinkoden stemmer og uttaksbeløpet ikke overstiger saldoen, skal det gis en melding i grønt om at transaksjonen er vellykket, og ny saldo etter uttaket skal oppgis.

Se bildene nedenfor for tips.

Oppgaver

zzz 5.27 Surhetsgraden til en kjemisk løsning angis av det vi kaller pH-skalaen. Lag en glider med verdier mellom 0 og 14. Når gliderverdien er mellom 0 og 7, er løsningen sur. Når den er 7, er løsningen nøytral, og når den er mellom 7 og 14, er den basisk. Velg tre passende emojier for å vise disse tre tilstandene, for eksempel de som er listet opp nedenfor. På Internett finner du HTML-koden for de fleste emojiene.

• • •

sur: <span style=’font-size:150px’>&#128549;</span> nøytral: </span> style=’font-size:150px’>&#128528;</span> glad: </span> style=’font-size:150px’>&#128515;</span>

Se på bildene nedenfor for tips.

zzz 5.28 Lag en quiz bestående av inntil ti spørsmål. Når en quizdeltaker har svart på alle spørsmålene, skal deltakeren få beskjed om hvor mange spørsmål hen svarte riktig på. Varier spørsmålstypene med for eksempel radioknapper, avhukingsbokser, inputfelt, bilder, lyd og glidere.

5.6 Funksjoner z 5.29 a) Lag en funksjon som regner ut gjennomsnittet mellom to tall. La de to tallene være gitt ved variablene a = 3 og b = 8. Gjennomsnittet skal vises på skjermen, som på bildet til høyre. b) Lag en interaktiv versjon av programmet ditt fra a. Nå skal brukeren kunne skrive inn tallene i to inputfelt, som på bildet til høyre.

219

220

Kapittel 5

zz 5.30 a Finn et bilde eller en gif og lim inn URL-en i linje 2 i koden nedenfor. Les koden og forklar hva den gjør. 1 <script> 2 let src = "tutorial/image.gif" 3 let rotasjon = 90 4 </script> 5 6 <img src={src} style= WUDQVIRUP URWDWH ^URWDVMRQ`GHJ alt= *LI DY 5LFN $VWOH\ > 7 <button> 8

Rotér bildet

9 </button>

b) Legg en funksjon på knappen som øker bilderotasjonen med nitti grader for hver gang brukeren klikker på knappen.

zz 5.31 En bil bruker i gjennomsnitt 0,86 liter bensin per mil. Bilen starter med 75 liter bensin på tanken og skal kjøre 52,7 mil. Lag en funksjon som viser hvor mye bensin det vil være igjen i tanken etter at denne strekningen er tilbakelagt. Definer tre variabler: én for gjennomsnittlig forbruk, én for startmengden med bensin og én for strekning. a) b) c) d)

Skriv ut på skjermen hvor mange liter bensin det er i tanken. Skriv ut på skjermen det gjennomsnittlige forbruket i liter/mil. Skriv ut på skjermen den tilbakelagte strekningen i mil. Skriv ut på skjermen hvor mye bensin det vil være i tanken.

Se på bildet nedenfor for tips.

Oppgaver

zz 5.32 Lag en interaktiv versjon av drivstoﬀkalkulatoren i forrige oppgave. Brukeren skal kunne skrive inn tall for følgende tre parametere:

• • •

mengde bensin i tanken gitt i liter strekningen bilen skal kjøre gitt i mil bilens gjennomsnittlige bensinforbruk gitt i liter/mil

Se bildet nedenfor for tips.

zzz 5.33 Tyngden til en gjenstand er gitt i newton (N) og er avhengig av to parametere: massen til gjenstanden (i kg) og tyngdeakselerasjonen (gitt i m/s2) ved overflaten til planeten. a) Søk på Internett og finn verdien av tyngdeakselerasjonen på minst fem planeter i solsystemet. Lagre navnene til planetene og tyngdeakselerasjonen ved planetens overflate i variabler. b) Bruk formelen tyngde = masse * tyngdeakselerasjon for å regne ut tyngden din på jorda. Svaret skal vises på skjermen som på bildet nedenfor. Bruk at tyngdeakselerasjon på jordoverflaten er 9.81 m/s2, og velg et tall for massen din.

c) Lag to inputfelt: ett for planet og ett for masse. Hvis tyngdeakselerasjonen til planeten som brukeren skriver inn, er lagret, skal tyngden til gjenstanden vises på skjermen. Dersom brukeren skriver inn planeter som du ikke har lagret tyngdeakselerasjonen til, skal brukeren få denne beskjeden: «Vi kjenner dessverre ikke til tyngdeakselerasjonen på planeten. Skriv inn ny planet.»

221

222

Kapittel 5

d) Lag en interaktiv versjon av tyngdekalkulatoren ved at brukeren kan skrive inn navnet til en planet og massen sin (gitt i kg). Kalkulatoren skal regne ut tyngden på den fremmede planeten og skrive ut resultatet i grønt, som vist på bildet nedenfor.

e) Utvid koden slik at når tyngden til brukeren på den fremmede planeten er større enn på jorda, skal meldingen i d vises med rød tekstfarge, som vist på bildet nedenfor.

f) Utvid koden slik at brukeren kan velge navnet til planetene fra en nedtrekksmeny.

Oppgaver

zz 5.34 Fargemodellen RGB bygger på at man kan legge sammen proporsjoner av primærfargene rød (R), grønn (G) og blå (B) til andre farger. I denne modellen er styrken til hver farge angitt med et tall mellom 0 og 255. For å få fargen hvit må vi ha full styrke av alle fargene, som gir rgb (255, 255, 255). For å få svart må vi ha rgb (0,0,0). På bokas nettsted finner du en ferdigkodet app som du skal bruke til å utforske RGB-modellen. a) Utforsk appen grundig ved å klikke på knappen med teksten «LAG NY FARGE», og se hvordan resultatfargen endrer seg etter som tilfeldige tall velges for rød, grønn og blå. Skjermbildet nedenfor viser et tilfeldig RGB-resultat.

b) Sett r = 0 i linje 13 i koden. Klikk mange ganger på knappen og se hvordan resultatfargen endres. c) Sett g = 0 i linje 14 i koden. Klikk mange ganger på knappen og se hvordan resultatfargen endres. d) Sett b = 0 i linje 15 i koden. Klikk på mange ganger på knappen og se hvordan resultatfargen endres. e) Sett nå r = 255, g = 255, b = 255 og klikk på knappen. Hva ble resultatfargen? f) Prøv å minske variabelen dx i koden slik at rektanglene overlapper hverandre litt. Prøv med tilfeldige tall for rød, grønn og blå. Hva ser du i overlappet mellom rød og grønn farge? Og hva ser du i overlappet mellom grønn og blå? g) I koden finner du variabelen gjennomsiktighet. For gjennomsiktigheten ligger gyldige verdier mellom 0 og 1. Sjekk med forskjellige verdier for gjennomsiktigheten, for eksempel 0.1, 0,2 osv. og se hvordan overlappene ser ut i hvert tilfelle.

223