Kode 2 Informasjonsteknologi 2 by Cappelen Damm

< Gløer Olav Langslet > < Yngve Vindal Eriksen > < Anders Haugeto >

< kode2 > Informasjonsteknologi 2 HTML5 og JavaScript

Bokmål

Informasjonsteknologi 1T00.indd 1

05.04.2016 12:14:53

© CAPPELEN DAMM AS, 2016 ISBN 978-82-02-44790-8 1. utgave 1. opplag 2016 Tekniske tegninger: Terje Sundby/Keops Omslagsdesign: Anders Bergesen/Superultraplus Designstudio Grafisk formgiving: Kristine Steen/07 Media Fotografier: Getty Images/Thinkstock Forlagsredaktører: Terje Idland og Eva Irgens Sats: have a book, Polen 2016 Trykk og innbinding: Livonia Print SiA, Latvia 2016

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

Informasjonsteknologi 1T00.indd 2

05.04.2016 12:14:53

FORORD Læreboken dekker hele læreplanen i informasjonsteknologi 2 Kode 2 er en lærebok skrevet for Informasjonsteknologi 2, programfag for studiespesialiserende utdanningsprogram. Læreboka dekker hele lære planen i Informasjonsteknologi 2 på Vg2/Vg3 med bruk av HTML5 og JavaScript. Totalt består boken av 12 kapitler som til sammen dekker kompetansemålene til de tre hoveddelene: Programmering, Planlegging og dokumentasjon og Multimedieutvikling. Kapittel 1 inneholder en introduksjon til HTML og CSS. Hvis du som elev har lest Informasjonsteknologi 1 tidligere, vil dette kapitlet bli en repetisjon, ellers er dette nytt stoff.

Oversiktlig og strukturert innhold Hvert kapittel starter med en oversikt over hva du skal lære. Teorien er bygd opp med forklarende tekst og eksempler som belyser teorien. Viktige ord er satt i halvfet slik at du lett skal finne dem igjen. Underveis i teksten finner du faktarammer i gult. Dette er innhold du bør lære deg godt. Innimellom dukker det opp rammer med Ekstrastoff. Dette er innhold du bør lese, men det er ikke alltid noe du skal bruke videre med en gang. I denne læreboken har vi lagt vekt på at du raskt skal komme i gang med kodingen. Etter hvert delkapittel finner du derfor Prøv selv-oppgaver. Når du løser disse oppgavene, får du god trening i å programmere. Sist i kapittelet finner du Sammendrag. Stikkordregister har vi plassert sist i læreboka. På innsiden av omslaget finner du tabeller du kan slå opp i.

Gratis elevnettsted og programvare Elevnettstedet kode.cdu.no inneholder video-instruksjoner og en Kode editor. I venstre felt i Kodeeditoren skrives og redigeres programmeringskoden. Til høyre vises koden. På eksamen må du lagre koden i egne filer. Nettlesere du kan bruke er Safari, Chrome, FireFox og Internet Explorer. Lagrer du koden din i en fil, kan du åpne den i en nettleser. Et annet nettleserverktøy du vil ha nytte av, er det som heter Konsoll. Hilsen Forfatterne

Informasjonsteknologi 1T00.indd 3

05.04.2016 12:14:53

Slik er boken bygd opp Her lærer du om: Hvert kapittel starter med en oversikt over hva du skal lære.

Margtekst: Margtekster inneholder ordforklaringer eller utdyper teoriteksten.

Teoristoff: Dette er stoff du må lese. Her er det viktigste tatt med (læreplanstoffet).

Ekstrastoff: Her står det interessant stoff eller stoff som er en fordypning av lære planen. Du bør lese ekstrastoffet, men det er ikke alt du behøver å ta med deg videre i programmeringen.

Faktaramme: Her finner du en oppsummering av det mest sentrale stoffet i avsnittet du akkurat har lest. Eksempler: Her finner du eksempler på bruk av den teorien du akkurat har lært. Ord i halvfet: Sentrale ord i teorien er satt i halvfet. Ordene er forklart der de er brukt, de fleste finner du også igjen i stikkord registeret bak i boka.

Illustrasjoner/bilder: Levendegjør og forklarer teksten i teoristoffet. Prøv selv: Sist i hvert delkapittel finner du Prøv selv-oppgaver.

Teoristoff

Her lærer du om

<03> Variabler Her lærer du om: >

variabler

ulike datatyper

tegne med canvas

Variabel

Gunhild

3.1 Definere og bruke variabler Variabler, variabelnavn og variabelverdi

tilordne uttrykk til variabler

fornavn

Hvis variabelverdien er en tekst, setter vi den alltid i anførselstegn.

Variabelverdi Variabelnavn

Variabelen lagres i minnet på datamaskinen. Vi kan tenke på en variabel som en slags beholder som man kan putte forskjellige dataelementer oppi.

Bruk Editoren på kode.cdu.no og legg inn JavaScript-koden før sluttaggen </body>.

Når vi vil at programmet vårt skal lagre en verdi som vi kan hente opp igjen ved behov, oppretter vi det som heter en variabel. Da blir det satt av en egen plass til variabelen i minnet på datamaskinen. Hver variabel som vi oppretter i dataprogrammet, må ha et navn, et variabelnavn. Variabelnavnene gjør at maskinen klarer å skille de ulike variablene fra hverandre. Variabelnavnet peker da til denne plassen i minnet som kan holde på en ønsket verdi, for eksempel fornavnet til en person. Det er programmereren som bestemmer hva variabelnavnet skal være, og det bør beskrive hva som lagres.

var fornavn = "Gunhild"; document.write(fornavn);

EKSEMPEL

Brev til elevene Rektor på en skole vil gjøre meldingene som skolen sender ut til elevene, mer effektive. Skolen oppretter derfor flere variabler med ulike meldinger som de kan sende alt etter hva de vil melde til elevene. Variabelen som inneholder den teksten rektor vil sende, velges som variabelnavn i document.write(…).

Å opprette en variabel kalles i JavaScript å deklarere en variabel. Det gjør vi ved å skrive kodeordet var og så variabelnavnet. Her velger vi variabelnavnet fornavn, vi skriver: var fornavn;. Hvis du vil gi denne variabelen en verdi, for eksempel navnet Gunhild, skriver du: fornavn = "Gunhild";. Dette kalles å tilordne verdier til variabelen. Brev…

Når man deklarerer en variabel opprettes en tom variabel med angitt variabelnavn. Variabelen til høyre har nå fått variabelverdi "Gunhild";. 46

Faktaramme

fornavn

Gunhild fornavn

var fornavn;

fil://IT2/Kode/Kap3/filnavn.html

Varsel om fravær Vi vil gjøre deg oppmerksom på at du nærmer deg fraværsgrensen.

Variabel

Skjermen ovenfor viser bruk av variabelen forvarsel. Brev…

fil://IT2/Kode/Kap3/filnavn.html

Varsel om fravær

Vi vil gjøre deg oppmerksom på at du nærmer deg fraværsgrensen.

Du har nå overskredet fraværsgrensen med to skoletimer.

fornavn

var fornavn="Gunhild";

Gunhild

<html> <head> <title>Brev til elevene</title> </head> <body> Brev… fil://IT2/Kode/Kap3/filnavn.html <h1>Varsel om fravær</h1> <script> Varsel om fravær forvarsel = "Vi vil gjøre deg oppmerksom på at du nærmer deg Du har nåvar overskredet fraværsgrenfraværsgrensen."; sen med to skoletimer. var varsel = "Du har nå overskredet fraværsgrensen med to skoletimer."; document.write(forvarsel); </script> </body> </html>

Hvis det senere blir nødvendig for rektor å sende en melding der eleven blir gjort oppmerksom på at fraværsgrensen er overskredet, endres koden til å bruke den andre variabelen slik: document.write(varsel);

Skjermen ovenfor viser bruk av variabelen varsel.

< 03 Variabler >

fornavn

Illustrasjoner

Halvfet

Når vi har definert en variabel, kan vi bruke variabelnavnet i koden til å hente verdien. Definerer vi variabelen fornavn, kan vi for eksempel hente ut verdien ved å sette variabelnavnet inn i metoden document.write(…). Verdien Gunhild skrives ut på skjermen.

</script>

Deklarere, tilordne og definere variabler

Merk at koden ikke viser noe på skjermen. Den bestemmer bare at vi setter av en plass i minnet til en variabel med variabelnavnet fornavn Brev… , og at den fil://IT2/Kode/Kap3/filnavn.html lagrer verdien "Gunhild".

Når verdien som skal lagres i variabelen, er en tekst (string), setter vi den alltid i anførselstegn. Vi sier at variabelverdien er av datatypen tekst – eller som vi også kaller den: datatypen string. Variabelen kaller vi en tekstvariabel. Så lenge den står i anførselstegn, er det en tekstvariabel. Variabler kan lagre verdier av flere ulike datatyper, for eksempel tall. Datatyper som ikke er tekst, men tall, sier vi har datatypen number. I neste delkapittel lærer vi om tallvariabler.

Tenk deg at du vil registrere fornavnet på en person og bruke det i forskjellige sammenhenger. Da er det naturlig at variabelnavnet blir fornavn. Det som lagres i variabelen, er for eksempel fornavnet Gunhild. Gunhild vil da være den verdien som lagres i variabelen. Verdier som lagres i variabler, kaller vi variabelverdier.

Svært ofte deklarerer og tilordner vi verdier på én og samme linje. Det kaller vi å definere variabler, og vi gjør det slik: var fornavn = "Gunhild";

Margtekst

Eksempel

Informasjonsteknologi 1T00.indd 4

05.04.2016 12:14:54

LÆREPLAN Informasjonsteknologi 2 Programfag i studiespesialiserende utdanningsprogram

Kompetansemål PROGRAMMERING MÅL FOR OPPLÆRINGEN ER AT ELEVEN SKAL KUNNE

KAPITTEL

• lese og bruke dokumentasjon og kode

2, 3, 4, 5, 6, 8, 10, 12

• definere variabler og velge hensiktsmessige datatyper • tilordne uttrykk til variabler • programmere med enkle og indekserte variabler eller andre kolleksjoner av variabler • programmere med valg og gjentakelser • lage egne og bruke egne og andres funksjoner eller metoder med parametere • programmere funksjoner eller metoder som blir aktivisert av hendelser • utvikle og sette sammen delprogrammer • teste og finne feil i programmer ved å bruke vanlige teknikker • gjøre rede for hensikten med objektorientert utvikling og begrepene klasse, objekt og arv

MULTIMEDIEUTVIKLING MÅL FOR OPPLÆRINGEN ER AT ELEVEN SKAL KUNNE

KAPITTEL

• planlegge og utvikle multimedieapplikasjoner ved å kombinere egne og andres multimedieelementer av typene tekst, bilde, lyd, video og animasjoner

7, 9

• bruke programmeringsspråk i multimedieapplikasjoner • vurdere og bruke relevante filformater for tekst, bilde, lyd, video og animasjoner • vurdere multimedieprodukter med hensyn til brukergrensesnitt og funksjonalitet

PLANLEGGING OG DOKUMENTASJON MÅL FOR OPPLÆRINGEN ER AT ELEVEN SKAL KUNNE

KAPITTEL

• spesifisere og begrunne funksjonelle krav til planlagte IT-løsninger

• velge og bruke relevante teknikker og verktøy for planlegging og utvikling av IT-løsninger • lage brukerveiledninger for IT-løsninger • gjøre rede for hvordan IT-løsninger utvikles i samarbeid mellom personer, og hvilke krav det setter til planleggings- og utviklingsprosessen • forklare hensikten med teknisk dokumentasjon og lage slik dokumentasjon for IT-løsninger, med spesiell vekt på å dokumentere grensesnitt mellom ulike delsystemer

Informasjonsteknologi 1T00.indd 5

05.04.2016 12:14:54

INNHOLD

<01> Kom i gang med HTML5 og CSS 8 1.1 Hva er HTML5? 8 1.2 Kom i gang med HTML-koding 12 1.3 Strukturering med semantiske HTML-elementer 17 1.4 Lister og tabeller 19 1.5 Formateringsspråket CSS 22 Sammendrag 27 <02> JavaScript 28 2.1 Programmeringsspråket JavaScript 28 2.2 Sammenhengen mellom HTMLelementer og JavaScript-kode 32 2.3 Metoden getElementById 37 2.4 Når noe går galt 42 Sammendrag 45 <03> Variabler 46 3.1 Definere og bruke variabler 46 3.2 Tallvariabler 53 3.3 Andre datatyper 60 3.4 Referere til HTML-elementer 65 3.5 Tegning med JavaScript 69 Sammendrag 73 <04> If-setninger og løkker 74 4.1 If-setning 74 4.2 Flere betingelser 79 4.3 Switch-setning 84 4.4 While-løkke 87 4.5 For-løkke 91 Sammendrag 95

<05> Funksjoner 96 5.1 Funksjoner i JavaScript 96 5.2 Funksjoner med parametere 100 5.3 Globale og lokale variabler 105 5.4 Anonyme funksjoner 109 5.5 Funksjoner med returverdi 114 Sammendrag 118 <06> Interaktivitet og brukergrensesnitt 119 6.1 Button-elementet 119 6.2 Input-elementet 128 6.3 Valg med radio, checkbox og select-elementet 137 6.4 Skjemaer 144 Sammendrag 153 <07> Multimedier – tekst, bilde, video og lyd 154 7.1 Multimedier 154 7.2 Tekst 155 7.3 Bilder 158 7.4 Bilder med JavaScript 165 7.5 Vektorgrafikk med SVG 175 7.6 Video med HTML 179 7.7 Video med JavaScript 183 7.8 Lyd 190 Sammendrag 197

Informasjonsteknologi 1T00.indd 6

05.04.2016 12:14:54

<08> Kolleksjonene array, set, map og nodelist 198 8.1 Array 198 8.2 Ă&#x2026; traversere array 206 8.3 Set 211 8.4 Map 215 8.5 NodeList 221 8.6 Diagrammer 224 8.7 JSON og lagring av data 240 Sammendrag 245

<11> Planlegging og dokumentasjon 310 11.1 Ulike arbeidsmetoder 310 11.2 Smidig utvikling og Scrum 314 11.3 Lean startup 320 11.4 Valg av arbeidsmetode 327 11.5 Dokumentasjon av funksjonelle krav 328 11.6 Teknisk dokumentasjon av programkoden 333 Sammendrag 337

<09> Multimedier â&#x20AC;&#x201C; animasjon 246 9.1 Animering med CSS Transitions 246 9.2 Animering av bilde som erstattes av en tekst 254 9.3 Animering med CSS Transitions og JavaScript 258 9.4 Animering med CSS Animations 262 9.5 Animering med Web Animations API 270 9.6 WAAPI med nodelist, hendelsesstyrt animasjon og stop-motion 279 Sammendrag 284

<12> Objektorientert programmering 338 12.1 Klasser og objekter 338 12.2 Grafisk grensesnitt og kolleksjoner av objekter 348 12.3 Strukturere koden i ulike filer 356 12.4 Realtime-lagring og synkronisering av JSON-data i en database 360 Sammendrag 365 Stikkordregister 366

<10> Spillprogrammering 285 10.1 Et enkelt spill 285 10.2 Bevegelse i spill med canvas 291 10.3 Veggtennis 298 Sammendrag 309

Informasjonsteknologi 1T00.indd 7

05.04.2016 12:14:54

<06> Her lærer du om: вв

вв

interaktivitet og brukergrensesnitt funksjoner som blir aktivert av hendelser

вв

button-element

вв

input-element

вв

select-element

вв

skjemaer og formelement

Et godt brukergrensesnitt bør være så enkelt at de som skal bruke dataprogrammet, så snart som mulig forstår hva de kan gjøre.

Interaktivitet og brukergrensesnitt

6.1 Button-elementet Hva er interaktivitet og brukergrensesnitt? En av de mest spennende tingene med programmering er at et dataprogram kan være interaktivt. Når vi klikker, tapper eller skriver på en datamaskin eller en telefon, får vi det vi kan kalle en hendelse (se side 111), på engelsk kalt an event. Vi kan opprette kode som bestemmer hva som skal skje når en slik hendelse inntreffer. Du kan for eksempel ha en kode som sier: "Når du klikker et sted på skjermen, skal det spilles av en lyd." En av videoene på YouTube viser iguanen Brincando som fanger animerte maur som løper over skjermen på en iPad. Hvis iguanen treffer en maur med tungen, blir det spilt av en lyd, og mauren forsvinner. Brincando skjønner akkurat hva han skal gjøre. Vi kaller det interaktivitet når det foregår en samhandling mellom en bruker og et dataprogram. For at slik samhandling skal være mulig, må dataprogrammet ha et brukergrensesnitt. Brukergrensesnittet kan bestå av knapper, innskrivingsfelt, bilder, animasjoner av maur eller helt andre ting. Det er brukergrensesnittet som avgjør hvordan vi kan samhandle med dataprogrammet.

Button-elementet og hendelsesstyrte funksjoner I forrige kapittel lærte du om hendelsesstyrte funksjoner og hendelsen onclick (side 112). Vi så at en hendelsesstyrt funksjon der brukeren kan trykke på en knapp <button>, gir en tilbakemelding med det samme. Det at brukeren trykker på knappen, kaller vi en hendelse. Med JavaScript sørger vi for at hendelsen starter en funksjon. Den hendelsesstyrte funksjonen der trykk på en knapp viser teksten «Du trykket på knappen», ser slik ut:

Dataprogrammet viser maur som løper over skjermen. Iguanen fanger mauren med tungen, programmet lager lyd, og mauren forsvinner. Vi sier at iguanen har en inter aksjon med programmet. Kilde: www.youtube.com/ watch?v=WTpldq3myV0

<body> <button id="btn">Trykk her</button> <script> var btn = document.getElementById("btn"); btn.onclick = function() { document.write("Du trykket på knappen"); } </script> Tittel fil://IT2/Kode/Kap6/filnavn.html </body> Trykk her

Brukeren kan trykke på knappen "Trykk her". Etter at brukeren har trykket på knappen, vises teksten "Du trykket på knappen". < 06 Interaktivitet og brukergrensesnitt > 119

Informasjonsteknologi 1T00 book.indb 119

01.04.2016 14:51:29

Bruk av button-element og hendelsesstyrte funksjoner 1. Opprett et button-element og eventuelt andre HTML-elementer. 2. Gi HTML-elementene unike id-er. 3. I JavaScript, referer til HTML-elementene med var variabelnavn = document.getElementById("idTilElement"); 4. Knytt en funksjon til den hendelsen at knappen trykkes: variabelnavn.onclick = function(). 5. Gjør noe i funksjonen. Vis en tekst, et bilde eller endre HTMLeller CSS-kode.

Vi kan opprette en hendelsesstyrt funksjon som viser et bilde. I den hendelsesstyrte funksjonen kan vi skrive kode som legger inn en bildefil i et div-element ved å sette attributtet src="bildefil.jpg" i et img-elementet, slik: variabelnavn.innerHTML = '<img src="bildefil.jpg">'; Du kan bruke både enkle-og doble anførselstegn.

Merk at vi her må ha anførselstegn før og etter både img-taggen og bildefilen. Vi må derfor bruke både enkle- og doble anførselstegn. Hvis vi hadde satt alt i doble anførselstegn, hadde det avsluttet stringen slik: "<img src=". Derfor bruker vi doble anførselstegn inne i enkle anførselstegn, eller omvendt. Vi kunne like gjerne ha skrevet: variabelnavn.innerHTML = "<img src='bildefil.jpg'>";

EKSEMPEL

Klikk på en knapp legger inn et bilde I dette eksempelet skal vi se hvordan du kan sette inn et bilde på nettsiden ved å klikke på en knapp. I HTML-koden setter vi inn et button-element og et div-element. Når du klikker på knappen, starter du en funksjon som legger til et img-element. Vi setter attributtet src="katt.jpg" på img-elementet, og det dukker opp et bilde av en katt. Husk at du må ha en fil som heter "katt.jpg" i den samme mappen som HTML-filen ligger i.

Taggen <div> grupperer HTML-kode.

Tittel

fil://IT2/Kode/Kap6…

Klikk på knappen viser bildet.

<body> <button id="btnVisBilde">Vis bilde</button> <div id="info">  </div> <script> var btnVisBilde = document.getElementById("btnVisBilde"); // Referanse til knappen var info = document.getElementById("info"); //Referanse til div- elementet btnVisBilde.onclick = function() { //Hendelsesstyrt funksjon info.innerHTML = '<img src="katt.jpg">'; //Legger inn et imgelement i div-elementet } </script> </body>

120

Informasjonsteknologi 1T00 book.indb 120

01.04.2016 14:51:29

Flere CSS-koder står på innsiden av omslaget.

I kapittel 1 på side 23 lærte vi om CSS-kode. I HTML oppretter vi CSS ved at vi setter inn taggene <style> og </style> i head. En CSS-selektor med navnet på en tagg setter vi inn mellom style-taggene. Denne selektoren vil gjelde alle forekomster av denne taggen. Selve CSS-koden skriver du inn mellom krøllparentesene { og }. Du finner CSS-koder på innsiden av omslaget på denne boka. Vi har CSS-kode som setter bredden til et div-element til 50 piksler: <style> div { width: 50px; } </style>

px = piksler

Vi kan så endre CSS-koden med JavaScript. Her endrer vi bredden til 60 piksler: variabelnavn.style.width = 60 + "px";

EKSEMPEL

Klikk på en knapp endrer diameteren på en sirkel Vi har sett at klikk på en knapp kan sette i gang en hendelsesstyrt funksjon. Nå skal vi se hvordan vi kan skape interaktivitet mellom bruker og nettside. Når du klikker på en knapp, skal nettsiden reagere ved å endre diameteren på en opptegnet sirkel. Din handling fører til en reaksjon på nettsiden. Hver gang brukeren trykker på en knapp med teksten «Endre diameteren på sirkelen», blir det satt i gang en hendelsesstyrt funksjon. Funksjonen finner et tilfeldig tall mellom 0 og 600. Ved å bruke Math. random() gir det et tall mellom 0 og 1, så vi må gange dette tallet med 600. Diameteren i sirkelen blir maksimalt 600 piksler og vil da passe på de fleste skjermer. Du kan forsøke deg med andre verdier og se hva som skjer. 1. Vi tegner en sirkel ved å opprette et div-element med HTML og former det til en sirkel med CSS i <style>. 2. Vi oppretter et button-element med HTML. 3. I JavaScript trenger vi en hendelsesstyrt funksjon som knytter hendelsen onclick til button-elementet. Funksjonen trekker et tilfeldig tall og endrer CSS-stilene width og height for div-elementet med verdien av det tilfeldige tallet. Tittel

fil://IT2/Kode/Kap6/filnavn.html

Endre diameteren på sirkelen

Klikk på knappen endrer diameteren på sirkelen.

< 06 Interaktivitet og brukergrensesnitt > 121

Informasjonsteknologi 1T00 book.indb 121

01.04.2016 14:51:29

Les om CSS-selector id på side 25.

<head> <style> #sirkel { width: 50px; /* Bredden på sirkelen (diameteren)*/ height: 50px; /* Høyden på sirkelen */ margin: 20px auto; /* 20 piksler marg over og under. Auto midtstiller*/ border-style: solid; /* Heltrukket sirkel*/ border-width: 5px; /* Sirkelens tykkelse*/ border-radius: 50%; /* Gjør div-elementet rundt*/ transition: 1s; /* Sørger for at forandringen i CSS-stilen animeres*/ } body { background-color: forestgreen; } </style> </head> <body> <button id="btn">Endre diameteren på sirkelen</button> <div id="sirkel"></div> <script> var btn = document.getElementById("btn"); //Referanse var sirkel = document.getElementById("sirkel"); //Referanse btn.onclick = function() { //Klikk-hendelsen starter funksjonen var radius = Math.random() * 600; //Tilfeldig tall mellom 0 og 600 sirkel.style.width = radius + "px"; //Setter bredde på div-element sirkel.style.height = radius + "px"; //Setter høyde på div-element } </script> </body>

Men er dette et godt brukergrensesnitt? Iguanen ville sikkert ha stukket tungen rett på sirkelen. Husk at alle elementer kan klikkes på, og at alle klikk kan fanges opp. Vi kan like godt ta bort knappen og skrive kode som gjør at et klikk på sirkelen setter i gang funksjonen som omformer den. Bytt ut btn. onclick med sirkel.onclick, så vil klikket på sirkelen sette i gang funksjonen. sirkel.onclick = function() { //Funksjonen starter når vi klikker på sirkelen //Nøyaktig samme kode som ovenfor }

122

Informasjonsteknologi 1T00 book.indb 122

01.04.2016 14:51:30

En funksjon til flere knapper

event = hendelse target = målet

De knappene vi har opprettet til nå, har kode omtrent som dette <button id="btn">Trykk her</button>. Det er et button-element, med attributtet id som har verdien "btn". Teksten mellom start- og slutt-taggen kaller vi knappens innerHTML. Den har verdien «Trykk her». Når denne knappen blir klikket på, kaller vi den «målet for hendelsen», på engelsk event target. Da klikket på knappen satte i gang en hendelsesstyrt funksjon i eksempelet på forrige side, var knappen «målet for hendelsen». Så byttet vi knappen med en sirkel. Da var sirkelen «målet for hendelsen». Hvis vi ønsker å bruke den informasjon som fins i knappen som blir klikket på, videre i koden, må vi sette inn «målet for hendelsen» som en parameter til den hendelsesstyrte funksjonen, slik: variabelnavn.hendelse = function(evt) { //Kode som skal utføres } Koden evt.target vil nå gi oss en referanse til den knappen som ble klikket på, altså den knappen som startet funksjonen. Denne referansen kan vi bruke til å se hvilke parametere den knappen som ble trykket på, har. Her bruker vi dot-notasjon og viser knappens id: var variabelnavn = evt.target; document.write(variabelnavn.id);

EKSEMPEL

Vise id og innerHTML til knappen som ble trykket på Vi kan bruke document.write(…) for se id og den teksten som står på knappen. <button id="btn">Trykk her</button> <script> var btn = document.getElementById("btn"); btn.onclick = function(evt) { var knappSomStartetFunksjon = evt.target; //Referanse til knappen som ble trykket på document.write("ID: " + knappSomStartetFunksjon.id); //Viser attributtet id til knappen document.write("innerHTML: " + knappSomStartetFunksjon.innerHTML); //Viser innmaten til knappen } </script>

Til nå har vi knyttet en enkelt knapp til en bestemt hendelsesstyrt funksjon. Vi kan også knytte flere knapper til den samme funksjonen. Da må vi vite hvilken av knappene som ble klikket på, slik at den knappen kan starte funksjonen. Til dette kan vi bruke det vi lærte ovenfor og ha hendelsen som en parameter i funksjonen (evt). Men funksjonen kan ikke lenger være

< 06 Interaktivitet og brukergrensesnitt > 123

Informasjonsteknologi 1T00 book.indb 123

01.04.2016 14:51:30

anonym siden vi må referere til den for alle knapper som skal kunne starte den. Derfor gir vi funksjonen et funksjonsnavn.

En hendelsesstyrt med funksjonsnavn og med hendelsen som parameter (evt) ser slik ut: function funksjonsnavn(evt) { //Kode som skal utføres } For å kalle opp funksjonen med knappetrykk knytter vi nå hendelsen til funksjonskallet. Dette funksjonskallet må vi opprette for alle knappene som vi vil skal være knyttet til den samme funksjonen, slik: variabelnavn.hendelse = funksjonsnavn;

EKSEMPEL

Knytte to knapper til den samme funksjonen Her viser vi kode som knytter to knapper til den samme funksjonen. En alert-boks viser id til den knappen som ble trykket på. <body> <button id="btn01">Dette er en knapp</button> <button id="btn02">Dette er en annen knapp</button> <script> var btn01 = document.getElementById("btn01"); var btn02 = document.getElementById("btn02"); function visInfo(evt) { //Hendelsen som starter funksjonen, er en parameter var knapp = evt.target; //Referanse til knappen som ble trykket på alert("Du klikket på knapp med id: " + knapp.id); //Viser id til knappen som ble trykket på } btn01.onclick = visInfo; //Knytter btn01 til funksjonen visInfo btn02.onclick = visInfo; //Knytter btn02 til funksjonen visInfo </script> </body>

Tittel

Klikk på begge knappene starter den samme funksjonen. Vi finner ut hvilken knapp som er klikket på.

fil://IT2/Kode/Kap6/filnavn.html

Dette er en knapp

Dette er en annen knapp

JavaScript-varsel Du klikket på en knapp med id: btn02

Hindre denne siden i å opprette flere dialogbokser. OK

124

Informasjonsteknologi 1T00 book.indb 124

01.04.2016 14:51:30

Tidligere har vi lagt inn et bilde i et tomt div-element <div id="idTilEle ment"></div> ved å sette attributtet src="bildefil.jpg" i et img-elementet i JavaScript, slik: variabelnavn.innerHTML = '<img src="bildefil.jpg">';

I neste eksempel legger vi som vanlig inn et bilde i et img-element <img id="idTilElement"> ved å sette attributtet src i JavaScript, slik: variabelnavn.src = "bildefil.jpg";

EKSEMPEL

Et bilde for hver knapp I dette eksempelet skal vi bruke en if-setning i en funksjon som settes i gang ved klikk på to ulike knapper. Når du klikker på den ene, skal det vises et bilde av en hund. Når du klikker på den andre knappen, skal det vises et bilde av en katt. Vi skal bruke den samme funksjonen for begge knappene. En if-setning i funksjonen sjekker hvilken knapp som er klikket på. Hvis det er katteknappen, kommer katten, hvis det er hundeknappen, kommer hunden.

Tittel

fil://IT2/Kode/Kap6…

Når du klikker på knappen med teksten "Vis meg en katt", får du se et bilde av en katt. Husk at bildefilen må ligge i den samme mappen som HTML-filen.

<body> <div> <button id="btnKatt">Vis meg en katt</button> <button id="btnHund">Vis meg en hund</button> </div> <img id="bilde">  <script> var btnKatt = document.getElementById("btnKatt"); var btnHund = document.getElementById("btnHund"); var bilde = document.getElementById("bilde"); function visBilde(evt) { var knapp = evt.target; //Referanse til knappen som ble trykket if(knapp.id === "btnKatt") { bilde.src = "katt.jpg"; //Setter attributtet src til kattebildet } else { bilde.src = "hund.jpg"; //Setter attributtet src til hundebildet } } btnKatt.onclick = visBilde; //Knytter katte-knappen til funksjonen btnHund.onclick = visBilde; //Knytter hunde-knappen til den samme funksjonen </script> </body>

< 06 Interaktivitet og brukergrensesnitt > 125

Informasjonsteknologi 1T00 book.indb 125

01.04.2016 14:51:30

Data-attributter Som programmerer bør du alltid gjøre koden din så enkel som mulig. I eksempelet med bilder av katten og hunden brukte vi en if-setning for å sjekke hvilken knapp det var klikket på. Tenk deg at du hadde flere bilder og knapper. Da ville koden fort bli kronglete og framfor alt lang. En enklere løsning enn å bruke if-setninger er å la hver knapp inneholde informasjon om hvilket bilde som skal vises når vi klikker på den. Til det kan vi bruke egne attributter som inneholder data, såkalte data-attributter.

Bruk av data-attributt Et data-attributt må alltid begynne med ordet data etterfulgt av en bindestrek og et navn som sier hva slags data attributtet inneholder: data-navn.

Vi får tak i verdien til data-attributtet med koden getAttribute("data-navn"). La oss skrive om koden med de to knappene og en funksjon som viste bilde av katten og hunden på forrige side. Nå setter vi filnavnet til bildet som skal vises som et data-attributt, i button-elementet. Da trenger vi heller ikke noen if-setning i funksjonen. Vi kan hente verdien rett ut av knappen. I HTML-koden setter vi data-attributtene i button-elementene slik: <button id="btnkatt" data-bilde="katt.jpg">Vis meg en katt</button> <button id="btnHund" data-bilde="hund.jpg">Vis meg en hund</button>

I JavaScript-koden refererer vi som vanlig til HTML-koden med document. getElementById(), og endrer funksjonen slik: function visBilde(evt) { var knapp = evt.target; //Referanse til knappen som ble trykket på var bildefil = knapp.getAttribute("data-bilde"); //Henter verdien i data-attributtet bilde.src = bildefil; //Bytter bilde }

Resultatet for brukeren er det samme, men koden vår vil være mye enklere å vedlikeholde. Hvis vi ønsker å utvide med flere bilder, kan vi ganske enkelt lage flere knapper. Funksjonen kan stå uendret. Et HTML-element kan ha mange data-attributter. Hvis vi ønsker å få spilt av en lyd når vi klikker på knappen, kan vi legge til et data-attributt med navnet på lydfilen, og skrive kode i funksjonen som gjør at lyden til dyret blir spilt av samtidig med at vi får se bildet.

126

Informasjonsteknologi 1T00 book.indb 126

01.04.2016 14:51:30

EKSEMPEL

Data-attributter for lyd og bilde Vi bygger her videre på koden på forrige side. I HTML legger vi inn data-attributter med bilde og lydfilene i de to button-elementene. Knappene legger vi i et div-element. Vi har et img-element og vi legger til et audio-element som kan spille av lyden. Deretter legger vi til kode i funksjonen som sørger for at det spilles av en lyd. (Husk at du må ha lydfilene i den samme mappen som HTML-filen for at dette skal virke.) Audio-elementet i HTML har attributtet src, som bestemmer hvilken lydfil som skal spilles av. For å starte avspillingen av lyden bruker vi koden audioElement.play(), der audio Element er en referanse til et audio-element.

<body> <div> <button id="btnKatt" data-bilde="katt.jpg" data-lyd="katt.mp3">Katt</button> <button id="btnHund" data-bilde="hund.jpg" data-lyd="hund.mp3">Hund</button> </div> <img id="bilde"> <audio id="lyd"></audio> <script> var btnKatt = document.getElementById("btnKatt"); var btnHund = document.getElementById("btnHund"); var bilde = document.getElementById("bilde"); var lyd = document.getElementById("lyd"); function visBilde(evt) { var knapp = evt.target; //Referanse til knappen som ble trykket på var bildefil = knapp.getAttribute("data-bilde"); //Navn på bildefilen var lydfil = knapp.getAttribute("data-lyd"); //Navn på lydfilen bilde.src = bildefil; //Setter bildefilen som src i img-elementet lyd.src = lydfil; //Setter lydfilen som src i audio-elementet lyd.play(); //Spiller av lyden } btnKatt.onclick = visBilde; btnHund.onclick = visBilde; </script> </body>

Data-attributter er ikke unike for button-elementer. Alle HTML-elementer kan ha data-attributter. Du kan for eksempel lage en nettside hvor man kan lære seg ulike dyrelyder, og et klikk på et bilde sørger for at lyden spilles. I så fall setter du data-attributter på img-elementene slik: <img id="imgUlv src="ulv.jpg" data-lyd="ulv.mp3">

< 06 Interaktivitet og brukergrensesnitt > 127

Informasjonsteknologi 1T00 book.indb 127

01.04.2016 14:51:31

PRØV SELV Et program kalles gjerne en applikasjon, og et program som kjøres i nettleseren, kaller vi gjerne en nettapplikasjon.

1. Lag en knapp med teksten «Klikk på meg». Dersom brukeren trykker på knappen, skal beskjeden «Du trykket på meg» vises. 2. Det skal holdes en skolefest, og ifølge brannforskriftene er det bare plass til 300 personer i lokalet. Applikasjonen skal brukes av vaktene og vise hvor mange elever som er inne i lokalet samtidig. Den må ha a) en knapp som vakten trykker på for hver elev som kommer. Summen av antallet elever vises på skjermen og øker med én hver gang vakten trykker på knappen. b) en tekst som viser «Det er nå 300 elever i lokalet» når begrensningen på 300 personer er nådd. 3. Lag en applikasjon der brukeren trykker på en knapp og et bilde vises. 4. Lag en applikasjon med to knapper og en funksjon som viser to ulike bilder. 5. Endre oppgave 4 slik at du bruker data-attributter.

6.2 Input-elementet Input-element for tekst Daglig bruker du sikkert ulike innskrivingsfelt på forskjellige nettsider. Når vi søker på Google, oppdaterer statusen på Facebook eller registrerer navn og adresse i en netthandel, skriver vi inn tekst i et input-element formet som et åpent innskrivingsfelt. Vi skriver inn tekst og tall, trykker deretter på en knapp, og så blir innholdet behandlet i programmet. Når du bestiller en togbillett, venter du å få opp en kalender der du kan markere ønsket reisedato. Når du laster filer fra datamaskinen til Instagram, Facebook o.l., regner du med å få muligheten til å bla igjennom mappene på maskinen så du kan velge den filen du ønsker. I HTML bruker vi input-elementet <input> til å lage innskrivingsfelt. Input er engelsk for inndata. I input-elementene er det brukeren som legger inn data. Det fins mange ulike input-elementer som vi kan velge mellom for å gjøre nettsidene våre mer brukervennlige. Det aller mest brukte input-elementet er et innskrivingsfelt for tekst som har attributtet type satt som tekst, slik: <input type="text">. Tittel

fil://IT2/Kode/Kap5/filnavn.html

Input-elementet er et såkalt tomt HTML-element. Det betyr at det ikke har både en start- og en slutt-tagg, men bare en start-tagg. Innskrivingsfelt med tekst har attributtet type="text". Innskrivingsfelt

128

Informasjonsteknologi 1T00 book.indb 128

01.04.2016 14:51:31

Verdens mest brukte input-element er søkefeltet til Google. Etter at du har skrevet inn noe, sendes du til en ny side som viser resultatene av søket ditt. Men allerede mens du er på søkesiden, skjer det litt av hvert. Når du skriver i innskrivingsfeltet, vises en liste med dine tidligere søk som har begynt med de samme bokstavene, og i den samme listen kommer det opp forslag med de vanligste søkene som er gjort med de innledende bokstavene. Det er altså den hendelsen at du skriver i feltet, som setter i gang en funksjon som så gir deg disse forslagene. Brukerens interaksjon med et input-element utløser med andre ord en rekke hendelser (se side 110–111). De viktigste hendelsene er vist i tabellen. HENDELSE

FORKLARING

onfocus

Når vi setter markøren der, den får «fokus»

oninput

Når det skrives eller limes inn ny tekst eller eksisterende tekst endres

onkeyup

Når det slippes opp en tast på tastaturet

onchange

Når teksten endres og den mister «fokus», eller Enter-tasten trykkes når markøren er inne i feltet

Det brukeren skriver i innskrivingsfeltet, kaller vi en verdi. Hvis vi ønsker å vise verdien til input-elementet med JavaScript-kode, bruker vi koden value.

EKSEMPEL

Innskrivingsfelt som viser teksten som er skrevet inn <span> grupperer HTML-koden, plasseres på linje.

Her er koden til et innskrivingsfelt som viser teksten som skrives inn i innskrivingsfeltet i et span-element, til høyre for innskrivingsfeltet. Hendelsen oninput inntreffer når vi skriver eller limer inn tekst. Hendelsen setter i gang en hendelsesstyrt funksjon som tar teksten fra innskrivingsfeltet (inpNavn.value) og legger den inn i span-elementet. <input type="text" id="inpNavn"> <span id="txtNavn"></span> <script> var inpNavn = document.getElementById("inpNavn"); var txtNavn = document.getElementById("txtNavn"); inpNavn.oninput = function() { //Hendelsesstyrt funksjon txtNavn.innerHTML = inpNavn.value; } </script> Tittel

fil://IT2/Kode/Kap6/filnavn.html

Teksten vi skriver inn, vises i et span-element.

Andres Iniesta|

Andres Iniesta

< 06 Interaktivitet og brukergrensesnitt > 129

Informasjonsteknologi 1T00 book.indb 129

01.04.2016 14:51:32

Hvis du endrer koden i eksempelet på forrige side fra inpNavn.oninput til inp Navn.onchange, vil du se at det ikke skjer noe før du trykker Enter på tastaturet, eller du klikker et sted utenfor input-elementet. Hendelsen onchange utløses ikke mens du skriver i innskrivingsfeltet, slik som oninput gjør.

"" er en tom tekst.

Du kan også endre verdien i input-elementet med koden inpNavn.value = "Ny verdi". For eksempel kan vi fjerne tekst som allerede ligger i innskrivingsfeltet ved å skrive "". Hendelsen er onfocus: inpNavn.onfocus = function() { inpNavn.value = ""; //Setter verdien til å være en tom tekst, og datatype tekst }

EKSEMPEL

Slette tekst fra innskrivingsfelt Vi bruker koden fra forrige eksempel og fjerner tekst som allerede ligger i innskrivingsfeltet med hendelsen onfocus og inpNavn.value = "". <input type="text" id="inpNavn"> <span id="txtNavn"></span> <script> var inpNavn = document.getElementById("inpNavn"); var txtNavn = document.getElementById("txtNavn"); inpNavn.oninput = function() { //Hendelsesstyrt funksjon txtNavn.innerHTML = inpNavn.value; } inpNavn.onfocus = function() { inpNavn.value = ""; //Setter verdien til en tom tekst } </script>

Attributter i input-elementet for tekst Vi har brukt to attributter - id til å identifisere elementet og type til å definere hva slags input-element det er - som et innskrivingsfelt for tekst med type = "text". Det fins flere attributter som vi kan sette inn for å tilpasse input-elementet til det vi skal bruke det til. De viktigste er vist i tabellen på neste side.

Attributtet type definerer hva slags input-element det er.

130

Informasjonsteknologi 1T00 book.indb 130

01.04.2016 14:51:32

name="q" vil vise forslag på ting du har søkt etter på Google, siden søkefeltet til Google har attributtet name="q".

Ha| Harry Hans

Innskrivingsfelt med autocomplete (Default).

ATTRIBUTT

FORKLARING

type

Sier hva slags input-element det er. For eksempel gir type="text" et tekstfelt

autocomplete

Foreslår tekst du tidligere har skrevet i innskrivingsfelt. Verdi "on" eller "off"

autofocus

Setter automatisk innskrivingsfeltet i fokus. Kan bare brukes på ett input-element om gangen

Identifiserer input-elementet

size

Lengden på innskrivingsfeltet (antall tegn med mellomrom)

maxlength

Maksimalt antall tegn det er mulig å skrive i innskrivingsfeltet

minlength

Minimum antall tegn det er tillat å skrive i innskrivingsfeltet

placeholder

Instruerende tekst som vises inni feltet når det er tomt

value

Brukes når vi vil sette inn en forhåndsbestemt verdi

disabled

Gjør det umulig å skrive i innskrivingsfeltet

required

Innskrivingsfeltet må fylles ut (gjelder bare når input-elementet ligger i et skjema, du lærer om skjema på side 144)

list

Referanse til en dataliste med verdier som kan velges

Når du skriver i et innskrivingsfelt for tekst, vil du få opp forslag om ting du tidligere har skrevet. Forslagene er basert på hva du har skrevet i andre innskrivingsfelt med samme verdi for attributtet id eller name tidligere. Hvis du skriver <input type="text" id="username">, vil du sannsynligvis få opp brukernavn du har brukt på forskjellige nettsteder. Dette kaller vi autocomplete, men det er ikke alltid du ønsker å ha på autocomplete. Du kan skru det av ved å skrive <input type="text" autocomplete="off">.

EKSEMPEL Tittel

fil://IT2/Kode/Kap6/filnavn.html

Bilmerke Audi BMW Ford Skoda Volvo

F Ford

Resultatet av koden er at valgene i datalisten kommer opp. Etter hvert som vi skriver inn tekst, vil vi bare få opp valg som passer til den teksten vi skriver inn.

option = alternativ

Opprette en dataliste med alternativer På forhånd kan du definere en dataliste med alternativer som brukeren skal kunne velge i. De ulike alternativene <option> legger du inn i et element mellom taggen <datalist> og </datalist>, som kan knyttes til input-elementet. I input-elementet bruker vi attributtet list for å angi hvilken dataliste alternativene er definert i. Koden for en dataliste med bilmerker ser slik ut: <input type="text" id="inpMerke" list="bilmerker" placeholder="bilmerke"> <datalist id="bilmerker"> <option value="Audi"> <option value="BMW"> <option value="Ford"> <option value="Skoda"> <option value="Volvo"> </datalist>

< 06 Interaktivitet og brukergrensesnitt > 131

Informasjonsteknologi 1T00 book.indb 131

01.04.2016 14:51:32

Input-elementene har flere attributter som gjør at du kan endre på utseendet til et innskrivingsfelt. Attributtet maxlength bestemmer hvor mange tegn brukeren maksimalt kan skrive i innskrivingsfeltet. Hvis vi vil at et ord minst skal være på åtte tegn, setter vi minlength="8". Attributtet place holder brukes til å vise en tekst inne i innskrivingsfeltet. Teksten forsvinner når du setter markøren i feltet. Teksten sier noe om hva slags innhold som skal skrives. Input-elementer bør ha en merkelapp, en label som forteller brukeren hva som skal skrives i innskrivingsfeltet. Merkelappen setter vi med taggene <label> og </label>. Attributtet for i label-elementet viser til id-attributtet i det tilhørende input-elementet. <label for="inpNavn">Brukernavn</label> <input type="text" id="inpNavn" size="20" maxlength="30" placeholder="navn@epost.no"> <label for="inpPassord">Passord</label> <input type="text" id="inpPassord" size="20" minlength="8" placeholder="minst 8 tegn">

Tittel

Attributtene endrer utseendet til innskrivingsfeltene og gir ekstra informasjon.

fil://IT2/Kode/Kap6/filnavn.html

Brukernavn

navn@epost.no

Passord

minst 8 tegn

Input-element for tall Når vi ønsker inndata som er tall i et innskrivingsfelt, setter vi attributtet type="number". På en vanlig datamaskin vil du da ikke se noen forskjell, men det du vil legge merke til, er at du kanskje ikke får skrevet bokstaver i feltet, men tall og +, – og andre matematiske operatorer er tillatt. Selv om det ikke er lov å skrive inn bokstaver, må du huske at verdien (value) til et innskrivingsfelt alltid er datatypen tekst. Hvis du skal bruke de tallene du får skrevet inn, til å regne med, må du gjøre dem om til datatypen Number i JavaScript-koden.

På mobiltelefoner kan du se et numerisk tastatur når et inputelement med type="number" brukes.

ABC

Neste

132

Informasjonsteknologi 1T00 book.indb 132

01.04.2016 14:51:32

EKSEMPEL

En enkel kalkulator I dette eksempelet skal vi lage en kalkulator som legger sammen to tall. Vi bruker to input-elementer med attributtet type="number". Når vi skriver inn tallene, bruker vi hendelsen oninput til å starte en funksjon som legger sammen tallene og viser svaret i et span-element. Før vi legger sammen tallene, må vi konvertere inndataene, som alltid er av datatypen tekst (string) for et input-element til datatypen Number. <span><input type="number" id="tall01"> + </span> <span><input type="number" id="tall02"> = </span> <span id="txtSum"></span> <script> var tall01 = document.getElementById("tall01"); //Referanse til input-element var tall02 = document.getElementById("tall02"); //Referanse til input-element var txtSum = document.getElementById("txtSum"); //Referanse til span-element function leggSammenTall() { //Funksjonen var t1 = Number(tall01.value); //Gjør om til Number var t2 = Number(tall02.value); //Gjør om til Number var sum = t1 + t2; //Legger sammen tallene txtSum.innerHTML = sum; //Viser summen i span-elementet } tall01.oninput = leggSammenTall; //Starter funksjonen når vi skriver i innskrivingsfeltet tall02.oninput = leggSammenTall; // Starter den samme funksjonen for det andre input-elementet </script>

Tittel

fil://IT2/Kode/Kap6/filnavn.html

+ 12

= 22

Vi har laget en enkel kalkulator.

EKSEMPEL

Å slippe opp en tast i et innskrivingsfelt I dette eksempelet skal vi se hvordan vi kan bruke hendelsen som registrerer at du skriver et tall i et innskrivingsfelt, til så å flytte dette innskrivingsfeltet til en annen posisjon på skjermen. Et input-element med attributtet type = "number" lagrer en verdi når du skriver et tall inn i det. Denne verdien kan vi finne ved å bruke koden value. På den måten kan vi bruke det som skrives inn i innskrivingsfeltet, videre i koden.

< 06 Interaktivitet og brukergrensesnitt > 133

Informasjonsteknologi 1T00 book.indb 133

01.04.2016 14:51:33

Tittel

At du slipper opp en tast på tastaturet, er en hendelse. Denne hendelsen kalles onkeyup. Dermed kan vi skrive en kode som starter en funksjon hver gang denne hendelsen inntreffer, og du står da inni et bestemt innskrivingsfelt. Den hendelsesstyrte funksjonen skal flytte plasseringen av innskrivingsfeltet, og vi bruker verdien fra innskrivingsfeltet til å sette en ny marg på det samme input-elementet.

fil://IT2/Kode/Kap5/filnavn.html

50 Tallet som skrives inn, bestemmer margen i innskrivingsfeltet.

<input id="inpMarg" type="number"> <script> var inpMarg = document.getElementById("inpMarg"); //Refererer til input inpMarg.onkeyup = function() { //Hendelsesstyrt funksjon inpMarg.style.margin = inpMarg.value + "px"; //Bruker innskrevet verdi og endrer margen i innskrivingsfeltet } </script>

Ekstra: I kapittel 9 om animasjoner får du lære å bruke det vi kaller CSS-transitions. En enkel animasjon får du ved å legge til følgende CSSkode: <style> input { transition: 1s; } </style>

Andre input-elementer Ved å endre verdien til attributtet type="text" eller type="number" i et input-element kan vi få mer enn bare et innskrivingsfelt for tekst eller tall. Vi kan opprette en kalender med type="date" og avkryssingsbokser med type="checkbox". dd.mm.åååå

Brukernavn

februar 2016

Passord

lø

sø

Ja Nei Vet ikke

21 6

Her ser du input-elementene: innskrivingsfelt, kalender, glider, avkryssingsboks og radioknapper.

134

Informasjonsteknologi 1T00 book.indb 134

01.04.2016 14:51:33

INPUT-ELEMENT

FORKLARING

text

Innskrivingsfelt der det er mulig å skrive tekst

password

Innskrivingsfelt for passord. Fungerer akkurat som text, men den teksten brukeren skriver inn, vises med små rundinger eller stjerner

number

Innskrivingsfelt der det er mulig å skrive tall

radio

Radioknapper. Det er ikke mulig å krysse av på flere radioknapper som har samme verdi for attributtet name

checkbox

Avkryssingsboks. Brukeren kan klikke på boksen for å krysse av eller for å fjerne kryss

range

En glider som kan gå mellom oppgitte verdier

file

Filmeny der brukeren kan hente bestemte filnavn fra datamaskinen

color

Fargepanel der brukeren kan velge farge

date

Kalender der brukeren kan hente dagens dato

tel

Når brukeren skal skrive inn et telefonnummer

Når brukeren skal skrive inn en e-postadresse

Uansett hva slags input-element du bruker, vil verdien til input-elementet være av datatypen tekst. Vi har sett at det gjelder for input-elementet for innskrivingsfelt med tall, type = "number", men det gjelder også for alle de andre input-elementene. At du velger et annet input-element, handler derfor først og fremst om brukervennlighet. Når du skal velge en farge, er det enklere å velge fra en fargepallett enn det er å skrive inn en fargekode. Når du skal velge en dato, er det lettere å gjøre det med en kalender enn å skrive inn datoen i et eksakt datoformat.

EKSEMPEL

Velg farge og rotasjon I dette eksempelet skal vi se hvordan vi bruker input-element og sette attributtet type til color og range. <input type="color" id="fargevelger"> gir deg en fargepalett hvor du kan velge farge. Verdien (value) er den heksadesimale fargekoden du velger. Hvis du for eksempel velger rød, er verdien #ff0000. I eksempelet bruker vi verdien fra fargevelgeren til å sette bakgrunnsfargen på body-elementet. Den hendelsesstyrte funksjonen bruker onchange og setter fargen på body ut fra hva som er valgt, slik: document.body.style.background = fargevelger.value. <input type="range"> gir deg en glider som lar deg velge et tall. Vi kan styre intervallet for den med attributtene min og max. Hvis den skal begynne på en bestemt verdi, skriver vi value="et bestemt tall". I eksempelet bruker vi

glideren til å dreie en figur av en ugle. Intervallet på glideren setter vi til å gå fra 0 til 360, slik at vi kan snurre figuren helt rundt hvis vi ønsker det. Begge de hendelsesstyrte funksjonene starter når verdiene endres. Hendel-

< 06 Interaktivitet og brukergrensesnitt > 135

Informasjonsteknologi 1T00 book.indb 135

01.04.2016 14:51:33

sen heter onchange. I funksjonen til glideren (rotasjonsvelger) blir rotasjonsegenskapen, transform, knyttet til img-elementet av uglen. Verdien blir satt til å være det som er valgt i glideren, slik: ugle.style.transform = "rotate(" + rotasjonsvelger.value + "deg)";. I kapittel 9 lærer du mer om animasjon. <head> <style> /*Dette ligger inne i head-elementet på nettsiden din */ body { background-color: olive; } #ugle { //Style til figuren width: 300px; margin: 150px; transition: 0.5s; //Tiden figuren bruker på å rotere } </style> </head> <body> <div> <input type="color" id="fargevelger">  <input type="range" id="rotasjonsvelger" min="0" max="360" value="0">  </div> <img id="ugle" src="Ugle.svg"> <script> var ugle = document.getElementById("ugle"); var rotasjonsvelger = document.getElementById("rotasjonsvelger"); var fargevelger = document.getElementById("fargevelger"); fargevelger.onchange = function() { document.body.style.background = fargevelger.value; //Setter farge på body } rotasjonsvelger.onchange = function() { ugle.style.transform = "rotate(" + rotasjonsvelger.value + "deg)"; //Roterer figuren } </script> </body> Tittel

fil://IT2/Kode/Kap6/filnavn.html

Template string `rotate(${rotasjonsvelger.value}deg)`

Figuren av uglen roterer med klokken når vi drar i glideren. Fargen på bakgrunnen velger vi med fargevelgeren.

136

Informasjonsteknologi 1T00 book.indb 136

01.04.2016 14:51:33

PRØV SELV 1. a) Opprett et input-element slik: <input type="text">, og test så koden. b) Legg til et span-element og en hendelsesstyrt funksjon som viser hva som står skrevet i innskrivingsfeltet idet hendelsen oninput inntreffer. c) Opprett en hendelsesstyrt funksjon som fjerner tekst som er skrevet inn, når innskrivingsfeltet på nytt får fokus. Bruk hendelsen onfocus. d) Legg inn <label> i oppgave a). 2. Bytt ut verdiene i type attributtet i oppgave 1 a) og test hva som skjer hver gang. Bruk color, date, file, range og number. (Hvis noe av dette ikke virker, må du kontrollere om du har en nettleser som kan vise det.) 3. Lag en dataliste over ulike alternativer brukeren kan velge i. Det kan for eksempel være en dataliste over bilmerker, dataspill, skomerker, gatenavn eller dager i uken. 4. a) Lag en kalkulator som legger sammen to tall. b) Lag innskrivingsfelt der brukeren kan skrive inn farten i m/s og få svaret i km/h. Vi bruker denne formelen til å gjøre om mellom m/s og km/h: fart målt i km/h = 3,6 * fart målt i m/s. 5. Lag en applikasjon som roterer et bilde med en glider og setter farge på bakgrunnen med en fargepallett. 6. Last ned et bilde fra kode.cdu.no som har en bredde på 400 piksler og en høyde på 300 piksler. Lag en glider som justerer bredden på bildet. Legg til en glider som justerer høyden på bildet.

6.3 Valg med radio, checkbox og selectelementet Radioknapper – type="radio" Runde avkryssingsbokser kalles radioknapper. Radioknapper bruker vi i grupper med flere knapper, og det er ikke er mulig å krysse av mer enn én radioknapp av gangen. Alle radioknappene vises samtidig. Koden for en

Gamle radioer kunne ha knapper for valg av radiostasjon. Når du trykket på én knapp, spratt en annen ut.

< 06 Interaktivitet og brukergrensesnitt > 137

Informasjonsteknologi 1T00 book.indb 137

01.04.2016 14:51:34

radioknapp er <input type="radio">. Det er vanlig at radioknappene har en merkelapp (engelsk: label) som gjør at vi kan se hva hver enkelt radioknapp representerer. Merkelapper setter vi med taggen <label>. Den kan settes slik vi gjorde det på side 132, eller forenklet slik som vist nedenfor. Merkelappen label har den egenskapen at når brukeren klikker på teksten, blir også radioknappen markert.

Når du skal lage to radioknapper med alternativene Ja og Nei, skriver du følgende kode i HTML: <label><input type="radio" id="rbJa" name="rbgValg" value="ja"> Ja</label> <label><input type="radio" id="rbNei" name="rbgValg" value="nei"> Nei</label>

Tittel

fil://IT2/Kode/Kap6/filnavn.html

Nei

Radioknapper med valgene Ja og Nei. Vi bruker prefikset rb for en radio button, og rbg for radio button group

Alle input-elementer med attributtet name satt til samme verdi "rbgValg" tilhører samme radiogruppe. I en gruppe kan vi bare velge én radioknapp av gangen. Hvis du vil at en radiokapp skal være forhåndsvalgt, legger du til attributtet checked i input-elementet. Kun én knapp i en gruppe kan være valgt og ha attributtet checked. <label><input type="radio" id="rbJa" name="rbgValg" value="ja" checked> Ja</label> <label><input type="radio" id="rbNei" name="rbgValg" value="nei"> Nei</label> ATTRIBUTT

RADIOKNAPPER

Identifiserer elementet

name

Grupperer radioknappene

value

Setter en verdi i elementet

checked

Forhåndvalgt radioknapp

Ønsker vi å teste med JavaScript hvilken radioknapp som er valgt bruker vi koden checked. Verdien er boolsk og er false hvis den ikke er valgt, og true hvis den er valgt. Denne testen kan vi legge inn i en funksjon som har en if-setning med denne betingelsen. If-setningen skriver forskjellige tekster som vi viser i et p-element <p id="info"></p>. For at funksjonen skal starte når begge radioknappene trykkes, må vi ha to funksjonskall, ett for Ja og ett for Nei. Hendelsen er onclick. function sjekkJaEllerNei() { if(rbJa.checked) { //Sjekker om radioknappen rbJa er avkrysset info.innerHTML = "Du har valgt Ja" } else { //Hvis ikke er rbNei avkrysset siden vi bare har to knapper info.innerHTML = "Du har valgt Nei"; } } rbJa.onclick = sjekkJaEllerNei; rbNei.onclick = sjekkJaEllerNei;

138

Informasjonsteknologi 1T00 book.indb 138

01.04.2016 14:51:34

EKSEMPEL

Valg med radioknapper

Vil du ha rømmedressing til pizzaen?

Tittel

fil://IT2/Kode/Kap6/filnavn.html

Vil du ha med rømmedressing? Ja

Nei

Takk for bestillingen! Programmet gir en tilbake melding avhengig av hva kunden har valgt.

Radioknapper er nyttige når brukeren må velge én ting framfor andre ting. I dette eksempelet skal vi helt enkelt sjekke om en kunde vil ha med rømmedressing til pizzaen sin. Da bruker vi to radioknapper, en for Ja og en for Nei. De har samme verdi for attributtet name og inngår derfor i en radiogruppe, men de har hver sin id. Når vi klikker på dem, sjekker vi med en if-setning hvilken radioknapp som er valgt, og gir en tilpasset tilbakemelding til kunden. Vi kan sjekke om radioknappen er valgt med koden checked. Dette blir betingelsen i if-setningen vår. Det er en boolsk variabel som gir true hvis knappen er avkrysset, og false hvis den ikke er avkrysset. If-setningen legger vi i en funksjon. Vi oppretter to funksjonskall, ett til hver knapp. <p>Vil du ha med rømmedressing?</p> <label><input type="radio" name="rbgRomme" id="rbJa"> Ja</label> <label><input type="radio" name="rbgRomme" id="rbNei" > Nei</label> <p id="info"></p> <script> var rbJa = document.getElementById("rbJa"); var rbNei = document.getElementById("rbNei"); var info = document.getElementById("info"); function sjekkRommedressing() { if(rbJa.checked) { //Sjekker om radioknappen rbJa er avkrysset info.innerHTML = "Du har bestilt et beger rømmedressing" } else { //Hvis ikke er rbNei avkrysset siden vi bare har to knapper info.innerHTML = "Takk for bestillingen!"; } } rbJa.onclick = sjekkRommedressing; rbNei.onclick = sjekkRommedressing; </script>

Radioknapper med data-attributter Når det er få valg, fungerer det fint å bruke if-setninger for å finne ut hvilken radioknapp som er valgt. Hvis det er flere valg, kan vi bruke den samme teknikken som vi gjorde med button-elementene som hadde data-attributter for bilde og lyd. Da legger vi informasjon i radioknappen som data-attributter. Når noen klikker på radioknappen, blir den valgt. Hvis de klikker to ganger etter hverandre på knappen, vil den fortsatt være valgt. Det betyr at vi alltid vet at den knappen som sist er klikket på, er den valgte knappen i en radioknapp-gruppe. Hvis alle knappene setter i gang den samme funksjonen, kan vi bruke koden event.target for å finne ut hvilken knapp som er valgt. Når den valgte knappen inneholder den informasjonen vi trenger for å gjøre det vi skal, kan vi unngå å bruke en lang if-setning. < 06 Interaktivitet og brukergrensesnitt > 139

Informasjonsteknologi 1T00 book.indb 139

01.04.2016 14:51:34

EKSEMPEL

Velg farge på en gullfisk På en nettside for en dyrebutikk kan du kunne lage din egen gullfisk og velge hvilken farge den skal ha. I samme mappe som HTML-filen må du da ha fire bilder av en gullfisk med forskjellig farge. Applikasjonen vår skal fungere slik: 1. I radioknappene ligger navnet på bildefilen i et data-attributt. 2. Når kunden klikker på en radioknapp, starter funksjonen. 3. I funksjonen med hendelsen som en parameter (evt), finner vi ut hvilken knapp som er klikket på med evt.target. 4. I funksjonen henter vi ut data-attributtet for bildefilen. 5. I funksjonen setter vi bildefilen til src i img-elementet. <div> <h1>Velg farge på gullfisken</h1> <label><input name="rbgFisk" type="radio" data-bilde="Blue.png" id="blue"> Blå</label> <label><input name="rbgFisk" type="radio" data-bilde="Red.png" id="red"> Rød</label> <label><input name="rbgFisk" type="radio" data-bilde="Green.png" id="green"> Grønn</label> <label><input name="rbgFisk" type="radio" data-bilde="Yellow.png" id="yellow"> Gul</label> </div> <img id="imgGullfisk"> <script> var blue = document.getElementById("blue"); var red = document.getElementById("red"); var green = document.getElementById("green"); var yellow = document.getElementById("yellow"); var imgGullfisk = document.getElementById("imgGullfisk"); function skiftBilde(evt) { var rb = evt.target; //Radioknappen som ble klikket på var fiskebilde = rb.getAttribute("data-bilde"); //Henter ut filnavnet til bildet imgGullfisk.src = fiskebilde; //Setter inn bildet } //Slik kan vi også sette at alle radioknappene skal starte den samme funksjonen blue.onclick = red.onclick = green.onclick = yellow.onclick = skiftBilde; </script>

Tittel

fil://IT2/Kode/Kap6/filnavn.html

Velg farge på gullfisken Vi lar kunden tilpasse sin egen gullfisk.

Blå

Rød

Grønn

Gul

140

Informasjonsteknologi 1T00 book.indb 140

01.04.2016 14:51:35