Holdet 2024 Ld Pro - Undervisningsbeskrivelse

menu

Undervisningsbeskrivelse

Stamoplysninger til brug ved prøver til gymnasiale uddannelser
Termin(er) 2024/25 - 2025/26
Institution TEC
Fag og niveau Programmering B
Lærer(e) Morten Kjerulf
Hold 2024 Ld Pro (L2d Pro, L3d Pro)

Oversigt over gennemførte undervisningsforløb
Titel 1 Intro til fag, til javascript samt p5.js-bibliotek
Titel 2 Objektorienteret prog i js: principper & diagram
Titel 3 Infoviz via d3js-biblioteket samt HTML, CSS & DOM
Titel 4 Algoritmemønstre 1: Grafalgoritmer
Titel 5 Nodejs-serverprogram & relationel database i skyen
Titel 6 Prog: Eksamensprojekt
Titel 7 Algoritmemønstre 2 & designmønstre
Titel 8 Repetition & opsamling

Beskrivelse af de enkelte undervisningsforløb (1 skema for hvert forløb)
Titel 1 Intro til fag, til javascript samt p5.js-bibliotek

Forløbet introducerer faget og gennemgår basale typer & kontrolstrukturer i javascript via biblioteket p5js.

Der anvendes indledningsvist online-editoren editor.p5js.org

Der introduceres til basale datatyper, værdier og tilladte operationer på datatyperne
- number, boolean, string, undefined og null
- let, const vs det gamle var i javascript
- logiske og relations-operatorer i forgreninger
- intro til reserverede keywords i sproget
- intro til scope, og til variablers synlighed/tilgængelighed på tværs af programmet (lokale og globale variable).
- herunder intro til diverse globale og indbyggede variable i p5.js, som fx frameCount eller mouseX


Intro til god praksis og systematik i kodningen som proces:
- Om sigende variabelnavne og god notation i koden samt kommentering som praksis.
- Camel-notation til variable og metoder/funktioner

Intro til kontrolstrukturer samt gentagelser og iterationer:
- sekventiel afvikling og forgreninger via fx if, switch, while/do while osv.

Om funktionskald: intro til funktioner som små moduler
- Om funktioner som god praksis til at opdele koden i afgrænsede ansvarsområder (modularitet)
- Og igen om sigende/selvforklarende funktions-navne som god praksis med systematik.
- Om parametre og funktioner med og uden returværdi

Intro til array som datastruktur:
- basale kendetegn, iteration i arrayet samt basale indbyggede metoder knyttet til Array-klassen i js. Herunder introduceres til muligheden for fler-dimensionalle arrays i js, specifikt 2d-arrays, hvor array-objekter udgør værdierne i et samlet primært array.

Intro til datatypen Object som sammensat datatype i js:
- object literal i js - nøgle og værdipar.

Faglige mål:
- bruge programmering til at undersøge et emne eller problemområde, med henblik på via programmets funktion at skabe ny indsigt eller til at løse et problem.
- demonstrere viden om fagets identitet og metoder.
- arbejde inkrementelt og systematisk i programmeringsprocessen.

Materiale:
Lærer-uddelt power point om kernestoffet ovenfor.
p5.js-referencen med eksempler på dette kernestof, fx:
https://p5js.org/reference/p5/Array/
https://p5js.org/reference/p5/for/
https://p5js.org/reference/p5/Object/

Forløbets antal sider, estimat: 50 sider
Indhold
Omfang Estimeret: 25,00 moduler
Dækker over: 13 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer
  • Individuelt arbejde
  • Lærerstyret undervisning
  • Pararbejde

Titel 2 Objektorienteret prog i js: principper & diagram

Forløbet introducerer til objektorienteret programmering generelt og specifikt i javascript:

De generelle principper og tankegangen i OOP samt dets konkrete anvendelse i javascript.

- klasse-syntaksen, og klasser som skabelon til objekter
- herunder konstruktør-metoden, indkapsling samt metoder på objektet
- objekter som reference-variable versus de primitive datatyper som værdi-variable
- konceptet om arv i objektorienteret programmering
- samt intro til UML-klassediagrammer som dokumentation.

- endelig kigges der også på det underliggende prototype-baserede arvehierarki som specifik javascript-konstruktion (Dette dog gennemgået som underemne i SRC'en i slutningen af 2g med matematik og programmering)

- Der perspektiveres til rene objektorienterede sprog som Java og C#, og videre introduceres der til muligheden for at lave private variable i nyere js via #-tegnet (Disse to elementer gennemgået i opsamlingsforløb i 3g).


Dette gennemgås via diverse lærer-udlevere programmer, som eleverne skal kunne forklare og modificere samt kortlægge via klassediagrammer som dokumentation af koden og som kommunikationsredskab:

- kasteparabel-opgave
- lydafspiller-opgave
- skakurs-opgave med gamestates, som muliggør tilpasningsdygtig skifte-skærm-logik, altså en fleksibel struktur i koden
- det klassiske Pong samt Asteroids: forstå og modificér

Der introduceres til programmering via visual studio code som editor med brug af live server-extension med henblik på nem udviklingsproces.

Faglige mål:
- anvende avancerede konstruktioner i et programmeringssprog.
- redegøre for arkitekturen af programmer på forskellige abstraktionsniveauer, herunder relationen mellem brug og funktion.
- rette, tilpasse & udvide avancerede programmer
- demonstrere viden om fagets identitet og metoder.
- arbejde inkrementelt og systematisk i programmeringsprocessen.

Materialer:
Lærer-udleveret powerpoint
Video, Coding train om klasser i moderne js:
https://www.youtube.com/watch?v=T-HGdc8L-7w&list=PLRqwX-V7Uu6Zy51Q-x9tMWIv9cueOFTFA&index=24&t=989s
p5js-referencen og diverse eksempelprogrammer herfra.

Forløbets antal sider, estimat: 50 sider
Indhold
Omfang Estimeret: 0,00 moduler
Dækker over: 28 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 3 Infoviz via d3js-biblioteket samt HTML, CSS & DOM

Forløbet introducerer til og anvender d3js-biblioteket med henblik på et større projektscenarie om infovisualisering.

Der introduceres til basale og diverse udvalge elementer i HTML & CSS samt DOM-træet i browseren generelt samt js i forhold til manipulation af DOM-elementer:

Et udleveret huskeliste-program analyseres og quiz-program analyseres ligeledes og modificeres på. Der introduceres hermed til -
css-grid, html-forms, class og id på html-elementer, local storage, event-håndtering samt JSON-strenge som dataformat og det at oversætte imellem JSON-datastrenge og js-objekter

I arbejdet med d3js-biblioteket arbejdes der endvidere med diverse indbyggede array-metoder såsom filter(), sort() map(), reduce(), slice() m.fl.

Videre anvendes arbejdes der med fagbegreberne:
- method-chaining (som en del af designet i d3.js-biblioteket)
- begrebet databinding i forhold til data-arrays og d3.js-SVG-elementer
- event-håndtering i forhold til DOM-elementer
- anonyme funktioner og funktioner som parameter-værdier/argumenter i kald af funktioner og herunder den moderne arrow syntaks i js
- JSON-data samt local storage i browseren som en lokal måde at gøre data persistent på

Forløber runder af med datavisualiseringsprojekt med brug af d3.js, DOM-træet, html, css, array-metoder samt eventhåndtering (hændelsesstyret interaktion).

Faglige mål:
- bruge programmering til at undersøge et emne eller problemområde, med henblik på via programmets funktion at skabe ny indsigt eller til at løse et problem.
- anvende avancerede konstruktioner i et programmeringssprog.
- redegøre for arkitekturen af programmer på forskellige abstraktionsniveauer, herunder relationen mellem brug og funktion.

Materialer:
Diverse sider og eksempler fra w3schools om html, css og eventhåndtering, fx:
https://www.w3schools.com/css/css_grid.asp
https://www.w3schools.com/js/js_htmldom.asp
Diverse undersider og eksempler fra
https://www.d3indepth.com/introduction/
https://d3js.org/getting-started

Forløbets antal sider, estimat: 50 sider
Indhold
Omfang Estimeret: 24,00 moduler
Dækker over: 29 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 4 Algoritmemønstre 1: Grafalgoritmer

Længere forløb om algoritmemønstre, specifikt grafalgoritmer:

Forløbet introducerer til grafbegrebet, knuder og kanter, og til diverse klassiske algoritmemønstre i forhold til grafer.
Der arbejdes først med bredde-først-søgning i en graf uden vægte og orientering samt dybde-først-søgning i forhold til at kunne udpege kritiske knuder i en graf.

Videre arbejdes der med Kruskal-algoritmen i forhold til en ikke-orienteret graf med vægte i forhold til forbinderproblemet (at skabe billigst mulige netværk imellem alle knuder i en given vægtet graf).

DEL 1: Bredde-først og dybde-først i forhold til udpegning af kritiske knuder.
1A: bredde-først-søgning i grafer uden vægte og orientering - at finde korteste vej.
BFS anvender i js-sproget en array som en kø-datastruktur til at gå bredden først og dermed sikre ikke bare en vej, men korteste vej.

1B: dybde-først-søgning som alternativ til at finde vej -
eksempel på løsning via rekursion som også effektivt kan svare på om to knuder ligger i samme komponent inden for samme graf.

Dette anvendes til at opstille selvvalgt opgavescenarie med at kunne finde og udpege kritiske knuder i en graf, altså knuder hvis fjernelse øger antallet af komponenter i grafen.


DEL 2: Kruskal-algoritmen
Forbinderproblemet løst via Kruskal-algoritmen og herunder Union-Find.
Dette er eksempel på grådig algoritme, som finder bedst mulige løsning ved hele tiden at vælge det lettest mulige. Dette eksemplificerer igen rekursiv løsning.

Faglige mål:
- bruge programmering til at undersøge et emne eller problemområde, med henblik på via programmets funktion at skabe ny indsigt eller til at løse et problem.
- anvende avancerede konstruktioner i et programmeringssprog.
- redegøre for arkitekturen af programmer på forskellige abstraktionsniveauer, herunder relationen mellem brug og funktion.
- rette, tilpasse & udvide avancerede programmer
- demonstrere viden om fagets identitet og metoder, herunder test og fejlfinding

Materialer:
Om at finde kritiske knuder via dybde-først-søgning:
Lærerudleveret pp samt
https://www.geeksforgeeks.org/dsa/articulation-points-or-cut-vertices-in-a-graph/
Om Kruskals algoritme som løsning på forbinderproblemet -
Lærerudleveret pp samt
https://www.w3schools.com/dsa/dsa_algo_mst_kruskal.php
https://da.wikipedia.org/wiki/Udsp%C3%A6ndende_tr%C3%A6_(grafteori)
Diverse udleverede eksempelprogrammer
Video om Union-Find i relation til Kruskal:
https://www.youtube.com/watch?v=92UpvDXc8fs

Forløbets antal sider, estimat: 50 sider
Indhold
Omfang Estimeret: 20,00 moduler
Dækker over: 17 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 5 Nodejs-serverprogram & relationel database i skyen

Forløbet introducerer til javascript på serversiden via node som runtime-miljø.

Der arbejdes indledningvist med local host, og med basal intro til operationer i nodejs i forhold til CRUD-operationer på filer på serversiden.

Videre introducerer forløbet til relationel database, og basal intro til SQL som query-sprog. SQL-introen er dog blevet taget op via den js-pakke, som udgør API'en til database som cloudtjeneste via Supabase.com. Den giver SQL-lignende syntaks i javascript:
Specifikt arbejdes med supabase.com som cloud-service til relationel database-tjeneste.

Begreber som - primærnøgler, fremmednøgler, normalformer & datamodel gennemgås - i forhold til design af relationel database.
Herunder gennemgås der kardinalitet med 1-til-1, 1-til-mange, mange-til-1 samt mange-til-mange og E/R-diagrammer og muligheden for deres automatiske dannelse i Supabase.
Dertil kommer basal gennemgang af try & catch i js, i forhold til håndtering af mulige runtime-fejl. Dette i forlængelse af bevidsthed om faglige metoder, debugging og forskellen på logiske fejl, runtime-fejl samt fejl på kompilleringstidspunktet.

Nodejs via Express-frameworket anvendes og der introduceres herunder til begreber som routing, server/klient, http-metoderne GET & POST og igen til fetch-api'en fra klientsiden i forhold til CRUD-operationer igangsat af klienten.

Videre introduceres der til arkitekturmønsteret MVC som en kendt måde at opbygge programmet på med - separation of concerns og overskuelighed. Dette gennemgået via udleveret eksempelprogram med et admin-program til at holde styr på sager med skadedyr på adresser:
Dette anvendes som udgangspunkt for projektopgave med database, nodejs-server samt brug af Supabase som database i skyen.

Faglige mål:
- bruge programmering til at undersøge et emne eller problemområde, med henblik på via programmets funktion at skabe ny indsigt eller til at løse et problem.
- anvende avancerede konstruktioner i et programmeringssprog.
- redegøre for arkitekturen af programmer på forskellige abstraktionsniveauer, herunder relationen mellem brug og funktion.
- redegøre for simple specifikationsmodeller og realisere disse i simple velstrukturerede programmer samt teste disse.
- rette, tilpasse & udvide avancerede programmer
- demonstrere viden om fagets identitet og metoder, herunder test og fejlfinding
- arbejde inkrementelt og systematisk i programmeringsprocessen.

Materialer:
Diverse sider fra dokumentationen af supabase.com
Udleveret kapitel om databaser, fra bogen Grundbog i datalogi, Martin Damhus, 2008
Udleveret pp om databaser, E/R-diagram mm.
Udleveret pp om faglige metoder, exceptions og fejltyper (logiske fejl, fejl under runtime samt kompilleringsfejl)

Forløbets antal sider, estimat: 50 sider
Indhold
Omfang Estimeret: 25,00 moduler
Dækker over: 28 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 6 Prog: Eksamensprojekt

Udvikling af eksamensprojekt: program & synopsis

Eleverne udarbejder eksamensprojekt ud fra oplæg - diverse scenarier foreslået deri, men ellers frihed til selv at finde på eget, relevant scenarie. Projektgodkendelse indledningsvist foretaget.

Polymorfi i øvrigt gennemgået som supplerende element til forståelsen af OOP, specifikt subtype polymorfi, hvor subklasser i et arvehierarki kan lave deres egen version af nedarvet metode fra en baseklasse, altså override denne.

I forløbet gennemgås igen de faglige metoder, debugging samt bevidsthed om fejltype-kategorierne - logiske fejl, runtime-fejl samt fejl på kompilleringstidspunktet.

Faglige mål:
- demonstrere viden om fagets identitet og metoder, herunder test og fejlfinding
- arbejde inkrementelt og systematisk i programmeringsprocessen.
Indhold
Kernestof:
Omfang Estimeret: 25,00 moduler
Dækker over: 29 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 7 Algoritmemønstre 2 & designmønstre

Forløbet introducerer til begrebet om tidskompleksitet og herunder til Store O - via eksempelprogram med tjek af kollision mellem animerede cirkelobjekter:

Først optimering af en kvadratisk voksende kollisionstjek-algoritme, og dernæst undersøgelse af en bedre algoritme og løsning via en sweep-and-prune tilgang, som sorterer elementerne på x-aksen, hvorefter den tjekker kollision.

Der introduceres derefter til diverse klassiske sorteringsalgoritmer - selection sort, insertion sort samt merge sort.
Herunder reintroduceres rekursion i programmeret med understregning af begrebet om base case i forhold til risikoen for stack overflow ved brug af rekursion.



Forløbet introducerer videre til begrebet designmønstre i relation til objektorienteret programmering:

Diverse klassiske designmønstre gennemgås - specifikt State, Observer, Builder Samt Composite-mønsteret:

State - et objekts tilstand lagt ud i tilstands-klasser, som hver især bærer logikken for den enkelte tilstand
Observer - subscriber-objekter lytter på andet publisher-objekt - med perspektivering til hvordan det er indbygget i DOM via event-håndtering.
Composite - objekter med fællesnævner samlet i samme træ af objekter
Builder - kompleks objekt-produktion gjort fleksibel trin for trin i stedet for en omfattende konstruktørmetode.

Forløbet skaber bevidsthed om struktur, 'separations of concerns', løs kobling & abstraktionsmekanismer i programmering.

Faglige mål:
- anvende avancerede konstruktioner i et programmeringssprog
- rette, tilpasse og udvide avancerede programmer

Materialer:
Udleverede eksempelprogrammer og powerpoint om selection sort, insertion sort og merge sort samt rekursion brugt mere basalt.

Internetressource om designmønstre samt diverse eksempelprogrammer herom:
https://refactoring.guru/design-patterns/composite
https://refactoring.guru/design-patterns/builder
https://refactoring.guru/design-patterns/state
https://refactoring.guru/design-patterns/observer
Indhold
Omfang Estimeret: 8,00 moduler
Dækker over: 6 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 8 Repetition & opsamling

Afrundende forløb med vægt på repetition og opsamling.

Diverse strenge-metoder gennemgås, og der introduceres også kort til regular expressions som søgemønstre og mulige parameter-værdier i diverse indbyggede strenge-metoder i js, fx replace-metoden:
Et par eksempelprogrammer analyseres, herunder animeret tekst-program med brug af substring-metode samt ordtæller-program med brug af replace og regular expression til fjernelse af karakter-tegn som punktum, komme osv. i den tekst, hvis ord skulle optælles.

Dertil understreges js typesystem som dynamisk og svagt - og der perspektiveres til eksempler med sproget C#, hvis tyepsystem omvendt er statisk og stærkt. Fordele og ulemper ved disse diskuteres.
Der understreges videre muligheden for at have private datafelter i moderne OOP i js, hvor et datafelt kan gives #-tegnet for at give det reel privat indkaspling i en klasse i js. Der perspektiveres herunder også til C#, hvor alle datafelter i en klasse i udgangspunktet er private og ikke 'public'.


Overbliksgivende repetitionsopgave anvendes som afrunding.
Indhold
Kernestof:
Omfang Estimeret: 4,00 moduler
Dækker over: 6 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer