Informatik B by Praxis

LARS LJUNGQVIST PIXEL

LARS LJUNGQVIST BILLEDFORMAT

CYBERSIKKERHED VARIABEL

USABILITY

BRUGERGRÆNSEFLADE

VIRKSOMHEDER DATABASE

FRONTEND

INFORMATIK B

databaser, it-sikkerhed, billeder og lyd, digital markedsføring og

HACKING

PERSONA

BRUGERTEST

Dyk ned i blandt andet programmering, interaktionsdesign,

FAIL EARLY • FAIL OFTEN

WIREFRAME

ARRAYS BACKEND

USER EXPERIENCE

INFORMATIK B <>

virksomheders it-systemer. Informatik B bygger oven på Informatik C. Den dækker kernestoffet og en del af det supplerende stof på STX, HHX og HTX. Kapitlerne indeholder mange praktiske eksempler og øvelser. Vejledende løsninger til øvelserne findes på prx.dk/InformatikB.

LARS LJUNGQVIST

9 788729 007555

Praxis

Informatik_BB_17x24_OMSLAG_HIRESS_PRINT.indd Alle sider

29/06/2022 10.13

INFORMATIK B LARS LJUNGQVIST

Praxis

INDHOLD KAPITEL 1: PROGRAMMERING. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 4 Trelagsarkitekturen i programmer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5 Arkitektur og kodesprog . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9 Kodebegreber. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13 Programmeringsparadigmer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 25 Resumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 26 KAPITEL 2: DATABASER. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 28 Hvad er en database?. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29 Normalisering. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30 Relationer mellem tabeller . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 33 Kardinalitet. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 34 Kodning af databaser. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 37 Fra søgning på skærm til databasen og tilbage igen. . . . . . . . . . . . . . . . . . . . . . 42 NoSQL-databaser. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 43 Resumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 45 KAPITEL 3: FRA BRUGER TIL IT-PRODUKT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 46 Projektledelse . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 47 Brugerne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 51 Kravspecifikation. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 56 Værktøjer til visualisering. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 57 Test. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 61 Lidt historie og perspektiv omkring menneskets forhold til computere . . . . . . 68 En tredeling af brugerens kontakt med et it-produkt. . . . . . . . . . . . . . . . . . . . . 69 User experience. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 70 Resumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 71 KAPITEL 4: BILLEDE OG LYD. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 72 Billedbehandling. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 73 Billedformater . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 74 Billedbehandling for viderekomne. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 82 Lydformater . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 93 Resumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 95

KAPITEL 5: INTERNETTET OG SIKKERHED. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 96 Hacking. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 97 It-sikkerhed . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 104 Autentifikation . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 107 Det dybe net. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 109 Resumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 113 KAPITEL 6: DIGITAL MARKEDSFØRING . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Digitale medier har flyttet ZMOT. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Owned media, earned media og paid media. . . . . . . . . . . . . . . . . . . . . . . . . . . . Et par værktøjer til SEO og SEM. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . Interview med Rehne fra Packhouse Denmark. . . . . . . . . . . . . . . . . . . . . . . . . Resumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

114 115 117 133 139 141

KAPITEL 7: IT-SYSTEMER I VIRKSOMHEDER . . . . . . . . . . . . . . . . . . . . . . . . . . . 142 ERP-systemer er hjertet i organisationen. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 143 CRM-systemer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 144 CMS-systemer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 145 Øvrige it-systemer i organisationer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 147 Skalering af it-systemer . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 149 Generelle principper for it-systemer. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 153 Resumé. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 157 STIKORDSREGISTER. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 158

Fail early, fail often, but always fail forward John D. Maxwell

SIDE 4 | KAPITEL 1

KAPITEL 1

Programmering Hver gang du bruger din mobil, computer, kører en tur i bilen, ser på dit smartwatch eller bruger nogle af de andre ting, der er digitale, er der nogle programmer, der styrer dem. Programmer består af kode, der er skrevet i forskellige programmeringssprog. Programmeringssprog ligner almindelige sprog. På samme måde som med almindelige sprog behøver man kun at kende en lille del af et kodesprog for at kunne gøre noget fornuftigt. Kender du programmeringssprog, kan du også kode, og du vil kunne skrive alle mulige programmer.

FAGUDTRYK, DU SKAL KENDE EFTER DETTE KAPITEL:

• • • • • • • • • •

trelagsarkitektur frontend/præsentationslag backend/logiklag database/datalag kodesprog array datatype operatorer kodebibliotek programmeringsparadigme

PROGRAMMERING | SIDE 5

Trelagsarkitekturen i programmer Lad os starte med et besøg på en pæn restaurant. Det foregår typisk ved, at man kommer ind på restauranten, bliver budt velkommen og vist hen til et bord. Tjeneren tager imod bestilling, går ud i køkkenet og afleverer bestillingen, og så bliver maden tilberedt. Lidt efter kommer maden, man nyder måltidet, betaler og forlader restauranten. Når aftenen er slut, lukker og slukker personalet, men opskrifter og råvarer efterlades og er klar til næste dag. Langt de fleste programmer og apps er delt op på næsten samme måde som restauranten. De er opdelt i tre forholdsvis adskilte lag: • Frontend eller præsentationslaget • Backend eller logiklaget • Databasen eller datalaget Det kan illustreres sådan her:

Frontend Backend Database Figur 1.1: Trelagsarkitekturen i et program.

SIDE 6 | KAPITEL 1

Frontend/præsentationslaget Frontend eller præsentationslaget er den del af programmet, som brugerne må se. Tekst, billeder, links og knapper skal sammen danne en brugergrænseflade, der er så indbydende og brugervenlig som overhovedet muligt. Det gælder, uanset om programmet er en hjemmeside, et spil eller fx et program til tekstbehandling. Det svarer til kundeområdet i restauranten, der skal se så indbydende og brugervenligt ud som muligt.

Backend/logiklaget Backend eller logiklaget er det område i programmet, hvor kundernes ordrer bliver udført. Det sker typisk ved, at kunden klikker på en knap. Knappen kalder den relevante kode i backend, som udfører den ordre, som kunden ønsker. Backend rummer essensen i programmet, den nødvendige logik, og derfor kalder man det også for logiklaget. I en restaurant er køkkenet vores backend. Her gør kokkene det arbejde, der skal til, for at gæsterne kan få den bestilte mad. Der skal være orden og rent i køkkenet, men køkkenet behøver ikke at se så pænt og indbydende ud, som kundeområdet gør. Køkkenet er et arbejdsrum, ikke et rum, der skal vises frem. I et program vil vi meget gerne have kunderne til at benytte frontendområdet, men vi vil under ingen omstændigheder have dem ind i backendområdet. Kunderne kan ødelægge programmet fuldstændigt, hvis de får adgang. Derfor er der tegnet en stiplet linje i figur 1.1: Trelagsarkitekturen. Den stiplede linje ligner en fredelig jernbane. I virkeligheden burde linjen være tegnet som et elektrisk hegn med pigtråd, for vi vil som sagt ikke have brugerne bag linjen. Hvis man trænger forbi den stiplede linje, er det typisk, fordi man er hacker. Restauranten fungerer på samme måde. Kunderne har ikke adgang til ”backend”, dvs. køkkenet.

Database/datalaget I programmer har vi ofte brug for at gemme data, både mens vi bruger programmet, og når vi slukker programmet for senere at tænde det igen og fortsætte vores arbejde. Som udgangspunkt gemmer man ikke data i frontend. Backend kan godt gemme data, mens vi bruger programmet. Men når vi slukker for programmet, slukker vi også for alt gemt data i backend. Derfor har vi brug for et sted, hvor vi kan gemme data, mens programmet er slukket. Det bruger vi datalaget til. Datalaget består typisk af en database, som sagtens kan gemme data, mens programmet er slukket.

PROGRAMMERING | SIDE 7

I restauranten har vi også brug for at gemme fx råvarer og opskrifter, mens restauranten er lukket, og både kunder og personale er gået hjem. Et kig på Instagrams forside kan hurtigt forklare, hvordan de tre lag virker.

Figur 1.2: Instagrams forside.

Når vi åbner Instagram, genkender vi hurtigt Instagrams logo samt de hvide farver. Vi befinder os i frontend-delen af programmet. Øverst kan man logge ind med sit brugernavn og password (1). Derefter klikker man på knappen ”Log på” (2). Knappen ”Log på” kalder koden i backend. Koden i backend skal afgøre, om programmet ud fra indtastningen kan genkende brugerprofilen. Derfor forespørger den videre ned i databasen. Hvis ja, logges der på, og hvis nej, fås en fejlbesked på skærmen. Når man så er inde på Instagram, genkender man hurtigt sine opslag og kan læse, hvad andre har slået op. Alt, der ses, fra tekst over billeder og videoer, likes, hentes op fra datalaget. Tilsvarende bliver alt, hvad brugeren lægger op på Instagram fra kommentarer og likes til billeder og video, gemt i datalaget.

SIDE 8 | KAPITEL 1

Hvis du nu begynder at tænke på, hvor meget lagerplads Instagram har brug for, kan dette give dig en idé om det: Nedenfor ses et billede af Metas danske datalager i Odense. Meta ejer bl.a. Facebook og Instagram. Lageret bruger strøm svarende til en mellemstor dansk provinsby. Lagerhallerne fylder otte fodboldbaner, og overskudsvarmen fra serverne på lageret kommer til at reducere Odenses kulforbrug med 25 % og kan varme 7.000 huse op.

Figur 1.3: Metas datacenter i Odense.

Det vil altså sige, at når man åbner et program, er man i frontendlaget. Hvis der er knapper i programmet, hvor man kan udføre noget, har programmet en backend. Hvis man kan få adgang til gemte data, fx en brugerprofil, har programmet også en database.

PROGRAMMERING | SIDE 9

Øvelse 1.1 – Skats hjemmeside Dette er et skærmfoto fra Skats hjemmeside. Hvordan ved vi, kun ud fra skærmfotoet, at Skat.dk både har en frontend, en backend og et databaselag?

Figur 1.4: Skats hjemmeside.

Øvelse 1.2 – Hjemmesider uden datalag Find eksempler på hjemmesider med datalag og på hjemmesider uden datalag. Giv eksempler på, hvad man kan opnå ved at tilknytte et datalag.

Arkitektur og kodesprog Programmer er bygget op af kode, og kode skrives i forskellige programmeringssprog. Vi anvender forskellige kodesprog, alt efter om vi skal kode til frontend, backend eller databasen. Nedenunder er der vist, hvordan en typisk hjemmeside fungerer, fx i webshops. Data er gemt i databasen. Serveren indeholder backendkoden, dvs. hjemmesidens kode. Serveren styrer trafikken til og fra hjemmesiden. Slutbrugerne er i kontakt med hjemmesiden over internettet. Slutbrugernes browsere kan vise frontendkoden, men hvis brugeren klikker på en knap, går der besked til serveren, som rummer backendkoden og kan udføre kommandoen, evt. med hjælp fra data i databasen.

SIDE 10 | KAPITEL 1

Klient/slutbruger

Database

Webserver

Internet

Figur 1.5: Hjemmesiders arkitektur.

Øvelse 1.3 – Hjemmesiders arkitektur Indsæt begreberne logiklag, præsentationslag og datalag de rigtige steder på figur 1.5. Indsæt også begreberne klient og server.

Kodesprog til frontend Frontend-kodesprog er det kodesprog, som kan læses direkte af en browser. Frontendkode bruges til at skabe programmets brugergrænseflade. Der er kun tre sprog, som kan læses direkte i en browser: HTML, CSS og JavaScript. Hvis man skriver kode i et eller flere af de tre sprog og gemmer det i en fil med endelserne ”.html”, ”.css” eller ”.js”, vil man kunne åbne filen direkte i en browser og læse den. Der er en arbejdsdeling mellem de tre sprog i frontend. HTML er fundamentet eller rammen om det hele. CSS bruges til at styre layout, mens JavaScript står for det dynamiske, altså for mulighederne for interaktion i form af knapper, slidere m.m. Det er kun frontendkode, der kan vises i en browser. Derfor pakker vi backendkode ind i frontendkode. Skal vi hente yderligere oplysninger i databasen, pakker vi vores databasekode ind i backendkode, som så er pakket ind i frontendkode. Lige som en tortillawrap eller de russiske babusjka-dukker på figuren:

Figur 1.6: Babusjkadukker kan pakkes ind i hinanden.

PROGRAMMERING | SIDE 11

Kodesprog til backend Hvis programmet skal kunne gemme data, skal der være noget backendkode. Backendkoden svarer til logiklaget i trelagsarkitekturen. Backendkode ligger på serversiden. Et andet navn for backend-kode er server-side kode. Modsat frontend-kode, som virker direkte i en browser, skal server-side-kode installeres på en server for at virke. Man kan i princippet bruge hvilket som helst programmeringssprog til backend, bare det kan installeres på serveren. Nogle sprog er naturligvis mere brugte end andre. Blandt de mest populære er sprogene php, Java, Python og C# (udtales på engelsk ”c-sharp”). Som noget lidt specielt kan man bruge JavaScript både til frontend, backend og databaser. Androids styresystem til mobiltelefoner bruger Java. Hvad kan man så med backendkode? Næsten alle knapper og links kalder kode i backend og evt. videre ned i databasen. Eksempler kan være:

• • • • • •

Login Når du liker og gemmer opslag på sociale medier Når du chatter og sender beskeder Når du betaler regninger, ser kontoudtog mv. på din netbank Når du lægger varer i en kurv og betaler på en webshop Når du sender formularer.

Det er dog ikke alt, som behøver at foregå i backendkode. Når man klikker rundt på en hjemmeside eller i et program via links, foregår det i frontend. Animation på hjemmesider (ikke i spil) foregår frontend. Men stort set alt andet foregår i backend.

Kodesprog til databaser Forestil dig en tabel over stillingen i Superligaen. Ud fra tabellen kan man klart og tydeligt se, hvilke hold der har flest point, hvor mange kampe de har spillet samt holdenes målscore og antal point. Du skal opfatte databaser på samme måde: En database er tabeller med indhold. Vi kan kun udføre fire forskellige kommandoer i en database: oprette data, hente data, redigere data og slette data. SQL er det mest anvendte sprog til databaser. SQL findes i lidt forskellige versioner, alt efter hvilken type database man vil arbejde med. Databaser vil blive behandlet mere indgående i kapitel 2.

SIDE 12 | KAPITEL 1

Sammenhæng mellem frontend-, backend- og databasekode For at få databasekode til at virke i programmet, fx på en hjemmeside, skal det som tidligere nævnt pakkes ind i backendkoden. Og eftersom browsere kun kan læse frontendkode, skal backendkoden pakkes ind i frontendkoden. Det vil sige, at for en hjemmeside med en tilknyttet database kommer det til at se sådan ud: <!DOCTYPE html> <html> <head> <!-- noget kode i denne sektion -- /> </head> <body> <p>Hello World</p> <?php // php-kode // og her indsættes SQL-kode ?> </body> </html>

Fullstack-udvikling Fullstack-udvikling vinder frem. Man bruger i forvejen JavaScript til frontend. Hvis man installerer JavaScript på en server, kan man også bruge JavaScript til backend. Man er endda i stand til at lave databaser i JavaScript i formatet JSON. Fordelen ved fullstack-udvikling er, at man kun behøver at lære ét kodesprog ud over HTML og CSS.

PROGRAMMERING | SIDE 13

Hvis det var en restaurant

Lag

Anvendelse

Kodesprog

Frontend

Præsentationslag, ses af brugerne

Kun HTML, CSS og JavaScript. Ingen andre sprog kan tolkes direkte i en browser.

Kundeområdet

Backend

Logiklag. Kommandoerne udføres beskyttet fra brugerne. Resultatet sendes retur til og vises i frontend.

Mest php, C# og JavaScript til programmer, der kører i browsere, men også sprog som Java, Python m.fl.

Køkkenet, hvor maden laves. Men vi vil ikke have kunderne derud.

Database

Datalag. Som det eneste lag er datalaget i stand til at gemme data, når programmet er slukket.

SQL + ”dialekter” som fx MsSQL og MySQL. Man kan lave databaser i JavaScript også.

Restaurantens lager af råvarer og opskrifter.

Figur 1.7: Overblik over arkitekturlag, anvendelse og sprog.

Kodebegreber Fra Informatik C kender du allerede begreber som pseudokode, kontrolstrukturer, variable og funktioner. Her et kort resumé.

Pseudokode Pseudokode er kode, der ligner rigtig kode, men hvor vi ikke tager hensyn til de forskellige kodesprogs særlige måde at gøre tingene på. Her er et eksempel på pseudokode, der skriver ”Hej verden” på skærmen: UDSKRIV (”Hej verden”)

SIDE 14 | KAPITEL 1

Kontrolstrukturer Fra Informatik C kender vi disse kontrolstrukturer: • Sekvens • Forgrening • Løkke

Sekvens En sekvens er en række kommandoer, der udføres efter hinanden: INDTAST (tal 1) INDTAST (tal 2) VARIABEL (resultat) = tal 1 + tal 2 UDSKRIV (resultat)

Forgrening En forgrening er en kodestruktur, der giver en eller flere valgmuligheder. Man bruger typisk sætninger, der hedder IF … THEN … ELSE. Her er pseudokode, der kan hjælpe med at træffe en beslutning, i forhold til om du skal tage regnfrakke på eller ej. IF (det regner) THEN (tag regnfrakke på) ELSE (tag den frakke på, som du har lyst til)

Løkke En løkke bruges til at udføre den samme handling et antal gange. Hvis vi vil udskrive 2-tabellen, så kunne vi f.eks. gøre sådan her i pseudokode: i=0 WHILE i <= 10 UDFØR UDSKRIV i i=i+2

Øvelse 1.4 - Hvad skrives der? Hvad udskrives der i pseudokodeeksemplet ovenfor?

Figur 1.8: Rutsjebane i Tivoli i København. Den har flere løkker, og folk står i ”arrays” for at få en tur. Du vil lære om arrays senere i kapitlet.

PROGRAMMERING | SIDE 15

Variable En variabel forstås bedst som en boks, der kun kan rumme én værdi. Til gengæld kan vi udskifte den værdi lige så mange gange, vi har lyst til. Værdien er typisk et tal, tekst eller lignende. Vi kan sagtens se en resultattavle i en sportskamp som bestående af variable. Den ene variabel holder styr på det ene holds målscore, den anden på det andet. Målscoren for begge hold skal kunne ændres.

Figur 1.9: Måltavlen til Superligakamp.

Her er pseudokode med tre variable. Man kan indtaste to tal, hvorefter programmet lægger dem sammen: VARIABEL (tal 1) = INDTAST (tal 1) VARIABEL (tal 2) = INDTAST (tal 2) VARIABEL (resultat) = tal 1 + tal 2 UDSKRIV (resultat)

Opgave 1.5 – Stopur Anders Aktiv løbetræner, og han er meget glad for sit nye sportsur. Som andre moderne ure er det en lille computer, og på uret kan han se, hvilken distance han har løbet, hvor lang tid han har løbet og hans pace, dvs. minutter pr. km. Uret kan gemme hans tider og hente tidligere tider frem. Forklar, hvorfor vi kan være sikre på, at programmet til at vise og gemme hans løbetider er opbygget i en 3-lags struktur. Forklar, om vi kan bruge variable til at holde styr på hans løbetider. Hvis ja: Hvor mange variable har vi brug for i forhold til at holde styr på distance, timer og pace som vist på uret?

Figur 1.10: Sportsur.

SIDE 16 | KAPITEL 1

Funktion En funktion kan forstås som en ”stikirenddreng”. Lad os sige, at vi vil lægge to tal sammen på en lommeregner. Først taster du det første tal, så ”+” og til sidst det sidste tal. Når vi så taster på lighedstegnet ”=”, kalder knappen en funktion i lommeregneren, der kan lægge de to tal sammen. Stikirenddrengen eller funktionen udfører ordren og returnerer svaret til brugeren. Ligheden med den måde, man taler om funktioner i matematik på, er ikke tilfældig. Matematisk kan vi beskrive en funktion, der lægger to tal sammen, sådan her: f(a, b) = a + b Her er samme funktion i pseudokode: FUNKTION Addition VARIABEL (a) = INDTAST (tal 1) VARIABEL (b) = INDTAST (tal 2) VARIABEL (resultat) = a + b UDSKRIV (resultat) END Denne funktion er meget simpel, men indimellem er funktioner komplicerede udtryk, der kræver meget kode. Fordelen ved at skrive koden som funktion er, at koden kan genbruges flere steder, uden at det hele skal skrives igen. Man kan blot kalde funktionen.

Funktionskald Når kunden på en restaurant har afgivet bestilling til tjeneren, sker der et funktionskald. Funktionskaldet er, at tjeneren går ud i køkkenet (hvor kunderne ikke må komme) og afleverer bestillingen. Senere henter tjeneren maden fra køkkenet og serverer den. I kode vil man ofte møde betegnelsen ”event” eller ”metodekald” i stedet for ”funktionskald”. Når brugeren klikker på en knap i frontend, laver programmet et funktionskald ned i backend til den rigtige funktion. Funktionen udfører opgaven i backend og returnerer svaret til frontend.

PROGRAMMERING | SIDE 17

Nu udvider vi pseudokoden fra før med et funktionskald, og igen vil vi lægge to tal sammen. Frontenden til programmet, der skal lægge to tal sammen, ser sådan ud:

Figur 1.11: Frontend til additionsprogram.

Brugeren indtaster selvfølgelig tal i de 2 felter. Når felterne er indtastede, klikker brugeren på knappen ”knapBeregn”. Koden i backend kan fange klikket med kommandoen ”onEvent”. Du ser koden med gult i linje 2 (1). Klikket udløser et funktionskald (2). Funktionen ligger indkapslet i funktionen i linjerne 3 - 9.

Figur 1.12: Funktionen Addition i App Lab.

Vores pseudokode til funktionskaldet ser sådan ud: VED KLIK PÅ KNAPPEN (knapBeregn) KALD FUNKTIONEN (Addition)

SIDE 18 | KAPITEL 1

Kommentarer En kommentar er tekst, som sættes ind i koden, men som ikke påvirker koden. Det er altid godt at sætte kommentarer ind i koden. Det vil hjælpe både dig selv og andre med efterfølgende at forstå koden. Du får brug for at forstå din kode, ikke kun hvis du vil genbruge hele eller dele af koden, men især hvis der opstår en fejl i programmet. Vær derfor altid gavmild med dine kommentarer. Professionelle programmører, der arbejder sammen, har ofte ret strenge regler for, hvordan man skal kommentere, simpelthen fordi det ellers tager for lang tid at sætte sig ind i koden. I de fleste programmer skriver man ”//” foran kommentaren, og så læser programmet ikke den linje. I html skriver man dog ”” bagved. Typisk indsætter man kommentarer oven over den kode, man vil kommentere. Her er pseudokoden fra tidligere med kommentarer. // Funktionen ”Addition” kaldes fra knappen ”Beregn” VED KLIK PÅ KNAPPEN (Beregn) KALD FUNKTIONEN (Addition) // Her starter funktionen FUNKTION Addition // Variablen tal 1 er det første indtastede tal, variabel 2 er det andet indtastede tal VARIABEL (tal 1) = INDTAST (tal 1) VARIABEL (tal 2) = INDTAST (tal 2) // Variablen ”resultat” er de 2 indtastede tal lagt sammen VARIABEL (resultat) = tal 1 + tal 2 // Variablen ”resultat” returneres til frontend og vises til brugeren END UDSKRIV (resultat)

Arrays En variabel er velegnet til at vise et enkelt tal, fx saldoen på en konto eller målscore i sport. En variabel kan endda indeholde en lang tekst. Men nogle gange har vi brug for mange variable i sammenhæng. Her kan vi bruge arrays. Tænk på arrays som en række, hvor hvert element er en variabel. Vi kan tilføje og fjerne lige så mange variable til vores array, som vi har lyst til.

PROGRAMMERING | SIDE 19

Lad os sige, at vi vil kode en digital huskeseddel. Hvert element på huskesedlen er en variabel, men variablene er samlet i et array.

Figur 1.13: Her er en helt almindelig huskeseddel.

Her er en brugerflade til en huskeseddel. For overskuelighedens skyld kan programmet indtil videre kun tilføje punkter til huskesedlen.

Figur 1.14: Huskesedlens brugerflader.

Hvis vi ville gemme punkterne i hver sin variabel, kunne pseudokoden se således ud. // Event og funktion er udeladt VARIABEL (”Første indkøb”) = INDTAST (”Morgenboller”) VARIABEL (”Andet indkøb”) = INDTAST (”Smør”) VARIABEL (”Tredje indkøb”) = INDTAST (”Marmelade”) VARIABEL (”Fjerde indkøb”) = INDTAST (”Pålæg”) osv. … Vi ved ikke på forhånd, hvor mange punkter vores indkøbsseddel skal have. Det giver os nogle problemer, for hvor mange variable skal vi så gøre klar? 10? 100? Det bliver i hvert fald besværligt, og vi risikerer at stå med en masse overflødig kode. Det kan selvfølgelig gøres meget simplere. I stedet for at lave en masse variable, kan vi samle punkterne i et array. Pseudokoden bliver:

SIDE 20 | KAPITEL 1

//Event og funktion er udeladt ARRAY (”Huskeseddel”) = INDTAST (”Morgenboller”, ”Smør”, ”Marmelade”, ”Pålæg”, osv. …) I de fleste programmeringssprog behøver vi ikke at vide på forhånd, hvor mange elementer vores array skal rumme. Hvert element får et indeksnummer: 0, 1, 2 …, og vi kan tilføje lige så mange elementer, som vi har lyst til. Vores huskeseddel fra før kommer til at se sådan ud inde i arrayet:

Indeks 0 1 2 3

Værdi ”Morgenboller” ”Smør” ”Marmelade” ”Pålæg”

Figur 1.15: Oversigt over huskeseddelarrayet.

Vi vil nu udskrive et array, som består af variable med vores punkter til huskesedlen. Vi vil ikke alene have alle variablene i arrayet udskrevet. Vi vil også gerne have dem udskrevet i rækkefølge under hinanden. Til det bruger vi en forløkke: FOR (i = 0; i < arraysize; i++) UDSKRIV (i) UDSKRIV linjeskift Forløkken fungerer på den måde, at den først udskriver variablen på plads 0 (indeks = 0). For hver runde lægger den 1 til. I næste gennemløb tager den så variablen på pladsen 0 + 1 = 1, så variablen på plads 1 + 1 = 2, plads 2 + 1 = 3 osv. Gennemløbene fortsætter, indtil der ikke er flere elementer i arrayet, dvs. indtil i er en mindre end antallet af elementer i arrayet.

PROGRAMMERING | SIDE 21

Øvelse 1.6 – Array af informatikelever En valgfagsklasse i informatik B består af 10 elever: Danny Database, Fie Frontend, Finn Flittig, Gert Gestaltlov, Hanne Hjemmeside, Kim Kode, Lene Lektier, Signe Sekvens, Søren Stræber og Vera Variabel. a) Forklar, hvorfor et array er en bedre løsning end 10 variable. b) Vis arrayet i tabelform. c) Skriv pseudokode, der kan udskrive de 10 elever. Der skal være et linjeskift efter hver elev. d) Hvordan vil dit svar ændre sig, hvis eleverne nu skal stå på samme linje, adskilt af et komma og et mellemrum? e) Ekstra: Hvis vi nu ikke vil have komma og punktum efter den sidste elev, hvad skal vi så gøre? Tip: Hvis du vil udskrive det sidste element uden for løkken, kan du bruge denne pseudokode: UDSKRIV (arraysize-1). Hvorfor mon der skal stå ”arraysize-1” i parentesen?

Datatyper I programmeringssprog skal data tilhøre nogle bestemte datatyper. Her er et overblik over de mest gængse datatyper. Først de primitive datatyper, som er datatyper, der er indbygget i sproget:

Datatype

Forklaring

Eksempel

Heltal

Et heltal er et tal uden decimalværdier, både positive og negative tal samt 0. Et decimaltal kan tage decimalværdier.

1, 223, 0, -57

Decimaltal Tegn (char)

Boolean

3,14, -8,3333

Et tegn kan være alt fra tal over bogstaver fra A, a, #, 4, €, ©, α,  alle verdens sprog til specialtegn og symboler, men der er kun 1 værdi. Hvis vi bruger tal som tegn, er det, fordi vi ikke ønsker at kunne arbejde med tallene matematisk. F.eks. hvis tallene indgår i et telefonnummer. Boolske værdier kan kun tage 2 værdier: 0 eller 0/1, ja/nej, sandt/falsk, 1, svarende til ja/nej eller sandt/falsk. true/false

Figur 1.16: Primitive datatyper.

SIDE 22 | KAPITEL 1

Der findes også ikkeprimitive eller sammensatte datatyper. De er sammensat af primitive datatyper. Her er to af de mest gængse. Du kender allerede arrays:

Datatype Streng eller tekststreng

Forklaring Eksempel Et stykke tekst bestående af en ”Hej verden”, ”Gult er grimt” række tegn. Vi markerer typisk en streng i anførselstegn.

Arrays

Samling af variable, normalt med samme datatype. Arrayet fra før var med strenge.

ARRAY (”Huskeseddel”) = (”Morgenboller”, ”Smør”, ”Marmelade”, ”Pålæg”)

Figur 1.17: Eksempler på andre datatyper.

Det er forskelligt fra sprog til sprog, hvordan man skelner mellem datatyperne. For eksempel skal man i Java erklære variable ved at nævne datatypen først, fx int tal = 1 String ord = ”Hej” I JavaScript skelner sproget selv. Her kan man bare skrive: var tal = 1 var ord = ”Hej” I et sprog som Java skal man angive størrelsen på et array, når man erklærer det. Størrelsen kan ikke ændres efterfølgende. Det behøver man ikke i JavaScript: Java: String [] huskeseddel = new String [7] JavaScript: const huskeseddel = []

Øvelse 1.7 – Datatyper Hvilke datatyper vil du bruge til følgende: a) Navn, b) Adresse, c) Postnummer, d) By, e) Telefonnummer, f) Kørekort (ja/nej) og g) alder.

Øvelse 1.8 – Array Du skal lave et array med tre navne: Danny Database, Fie Frontend og Finn Flittig. a) Vis, hvordan man laver et array i hhv. JavaScript, php og Java. b) Ville dit svar ændre sig, hvis der i stedet for tekst var tre tal som fx 13, 25 og 45?

PROGRAMMERING | SIDE 23

Operatorer Operatorerne +, - og / kender vi fra matematik. Men i programmeringssprog er der flere nyttige operatorer, ligesom lighedstegnet betyder noget andet i programmeringssprog end i matematik. Her er operatorerne i sproget Java. Operatorerne i Java ligner meget, hvad man vil se i andre sprog.

Operator

Navn

Eksempel

+, -, * og /

Plus, minus, gange, dividere

2+2=4 2*3=6

Modulus, dvs. rest af en division. 7 %

20 % 2 = 0 20 % 3 = 2

Stigning med 1. Bruges gerne i løkker

x=2 ++x = 2 + 1 = 3

Fald med 1. Bruges gerne i løkker

x=5 --x = 5 - 1 = 4

Lighedstegn eller tildelingsoperator. Lighedstegnet er dynamisk, og det fungerer anderledes her end i matematik. Man kan ikke skrive x = x + 2 i matematik, men det kan man her. Det læses ”ny værdi af x” = ”den gamle værdi af x” + 2

x=x+2 Hvis x = 5, bliver ligningen x = 5 + 2, dvs. x = 7

Tjekker, om 2 værdier er ens. Hvis de er ens, returneres true, ellers returneres false.

x == y Hvis x = 3 og y = 3, vil den returnere true.

Tjekker, om 2 værdier er forskellige.

x! = y Hvis x = 3 og y = 3, vil den returnere false.

”OG”. Hvis udsagnet er sandt på begge sider af tegnet, returneres true.

var x = 2 var y = 3 (x < 3) && (y > 5) returner true.

”ELLER”. Hvis det ene af de 2 udsagn på hver side er rigtigt, returneres true.

var x = 2 var y = 3 (x < 3) || (y > 5) returner true.

Tager den gamle værdi og lægger den nye oveni. x += 2 svarer til x = x + 2

x += 2 Hvis x = 5, bliver ligningen x = 5 + 2, dvs. x = 7

Tager den gamle værdi og trækker den nye fra. X -=3 svarer til x = x – 3

x -= 3 Hvis x = 6, bliver ligningen x = 3 - 6, dvs. x = -3

Figur 1.18: Operatorer.

SIDE 24 | KAPITEL 1

Øvelse 1.9 - Operatorer For hvilke værdier af x er betingelserne opfyldt? Tip: Hvis det er svært, kan du prøve at skrive ned med almindelige ord, hvad der står. 5 < x < 10 II x = 2 x != 2 && x < 3 x = 3y && (x!= 9 II y < 5)

Kodebiblioteker Et kodebibliotek eller ”library” på engelsk er et bibliotek med forskellige funktioner, som udvider de muligheder, man har i et sprog. Hvis man tilknytter mulighederne, har man adgang til en masse ekstra funktioner og/eller muligheder. Nogle libraries er så omfattende, at de kan opfattes som et sprog. Et eksempel er JQuery. JQuery kan gøre JavaScript-programmering meget simplere. Andre eksempler er Bootstrap, som kommer med en masse fornuftig CSS-kode til gavn for programmering af hjemmesider. Tilknytningen til almindelig kode foregår typisk ved, at man indsætter en reference i koden. Her er en reference til JQuery-biblioteket: <head> <script src=”jquery-3.5.1.min.js”></script> </head>

Navn

Hører til sproget

Anvendelse

Animate.css

CSS

Animationsbibliotek. Der findes rigtigt mange animationsbibioteker.

AngularJS

HTML JavaScript

Kan bl.a. vise data på en for brugeren hurtigere og nemmere måde end ellers. I praksis vil det sige, at brugeren ofte slipper for at opdatere siden.

Bootstrap

CSS og JavaScript

God at bygge hjemmesider i. Har indbyggede knapper, formularer, responsive sidelayouts, navigation m.m.

FontAwesome

CSS

Tilknytter alle mulige fonte og tegn.

JQuery

JavaScript

Gør kodning i JavaScript mere simpelt.

NumPy og SciPy

Python

NumPy gør det nemmere at arbejde i arrays i Python, og SciPy kan fx lave grafer.

Figur 1.19: Eksempler på kodebiblioteker.

PROGRAMMERING | SIDE 25

Programmeringsparadigmer Forskellige programmeringsparadigmer handler ikke om, hvad koden skal kunne, men om forskellige tilgange til at programmere. Der findes en del forskellige paradigmer. Her beskrives procedural programmering og objektorienteret programmering på en meget simplificeret måde. I procedural kodning skriver vi koden i den rækkefølge, som den skal udføres. Pseudokoden ovenfor er en procedural kode. I objektorienteret programmering er ideen, at man prøver at lave kodeobjekter, som ligner virkeligheden.

Eksempel 1.1 – Biler Vi skal kode et program, hvor vi skal bruge nogle biler til et bilspil. I koden laver vi en klasse, som vi kalder for ”Biler”. Til objekter knyttes egenskaber og metoder. Egenskaber kan fx være hastighed, farve og bilmærke. Lad os sige, at vi har brug for en bil i programmet. Så opretter vi en instans (”udgave”) af objektet. Bilen kan have egenskaber som ”bilmærke”, ”farve”, ”antal døre”, ”benzin, diesel eller el” osv. Bilerne har også metoder som fx ”kør”, ”brems”, ”lys i lygterne” mv.

Eksempel 1.2 – Klasser En skole planlægger næste skoleår. De laver objektet ”klasse”. Objektet skal have egenskaber som ”lokale” og ”antal elever”, og det skal have metoder som ”tilføj elev”, ”skift lokale” mv. Når klasserne starter, opretter man instanser af objektet: Klasse 1a har 25 elever og bor i lokale 123, klasse 1b har 27 elever og bor i lokale 125 osv. Procedural kodning er udmærket til simple projekter. Til mere komplicerede projekter anvender man langt overvejende objektorienteret og/eller andre typer af programmering. Funktionel programmering vinder frem.

SIDE 26 | KAPITEL 1

Resumé •

• • • • • • • • • •

Man kan dele næsten alle programmer/apps op i tre lag: frontend/præsentationslaget, hvor brugeren må færdes, backend/logiklaget, hvor funktionerne udføres, og database/datalaget, der er der hvor vi kan gemme data når programmet er lukket. Vi har en række begreber til at beskrive kode på tværs af sprog. Kontrolstrukturer styrer hvordan et program udføres. Der er sekvenser, forgreninger og løkker. Variable er beholdere, der kan rumme én værdi. En funktion er noget kode, der kan udføre en handling. En slags stikirenddreng. Kommentarer bruges til at forklare koden med. Arrays er en samling af variable, fx en huskeseddel, hvor hvert punkt på sedlen er en variabel. Der bruges ofte løkker, når der arbejdes med arrays. Datatyper findes som primitive datatyper og sammensatte datatyper. De primitive findes i computersproget i forvejen. Sammensatte datatyper er datatyper, som man selv definerer. Operatorer er tegn, som vi bruger til at kunne regne eller lave logiske beslutninger med. Kodebiblioteker er en måde at udvide et programs funktionaliteter på, så kodning bliver nemmere. Der findes forskellige overordnede tilgange til at programmere, kaldet programmeringsparadigmer. Eksempler på paradigmer er procedural programmering, hvor man skriver koden i den rækkefølge, som den skal udføres, og objektorienteret programmering, hvor man laver objekter, der så vidt muligt svarer til objekter i virkeligheden.

PROGRAMMERING | SIDE 27

Fail early, fail often, but always fail forward John D. Maxwell

LARS LJUNGQVIST PIXEL

LARS LJUNGQVIST BILLEDFORMAT

CYBERSIKKERHED VARIABEL

USABILITY

BRUGERGRÆNSEFLADE

VIRKSOMHEDER DATABASE

FRONTEND

INFORMATIK B

databaser, it-sikkerhed, billeder og lyd, digital markedsføring og

HACKING

PERSONA

BRUGERTEST

Dyk ned i blandt andet programmering, interaktionsdesign,

FAIL EARLY • FAIL OFTEN

WIREFRAME

ARRAYS BACKEND

USER EXPERIENCE

INFORMATIK B <>

LARS LJUNGQVIST

9 788729 007555

Praxis

Informatik_BB_17x24_OMSLAG_HIRESS_PRINT.indd Alle sider

29/06/2022 10.13