Holdet L3d Pro (2025/26) - Undervisningsbeskrivelse - Lectio - X

Holdet L3d Pro (2025/26) - Undervisningsbeskrivelse

Undervisningsbeskrivelse

Stamoplysninger til brug ved prøver til gymnasiale uddannelser

Termin(er)	2024/25 - 2025/26
Institution	X - 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 samt html, css & DOM
Titel 4	OOP i js, opsamling diverse
Titel 5	Algoritmemønstre: Grafalgoritmer
Titel 6	Nodejs-serverprogram & relationel database
Titel 7	Designmønstre i programmering
Titel 8	Prog: Eksamensprojekt
Titel 9	Strenge i js, regular expressions & markovkæder

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 primært online-editoren editor.p5js.org, men ellers Processing-editoren i p5-js-mode. Der introduceres til basale datatyper, værdier og tilladte operationer på datatyperne - 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 i på tværs af programmet (lokale og globale variable). Om 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, iterering i arrayet samt basale indbyggede metoder knyttet til Array-klassen. Intro til object som den 8. sammensatte datatype i js: - object literal i js - nøgle og værdipar. Opstart på logbog over opgaver og forløb. Materiale: Lærer-uddelt power point om kernestoffet ovenfor. p5.js-referencen
Indhold	Kernestof: Dyrehandler Array_slangeSketch.js description Array_2D.js description ProgrammeringB_js_Basisstof til og med arrays.pdf description Opgave_funktioner_basis.pdf description Functions
Omfang	Estimeret: Ikke angivet Dækker over: 16 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer	Individuelt arbejde Lærerstyret undervisning Pararbejde

Titel 2	Objektorienteret prog i js: principper & diagram Forløbet introducerer objektorienteret programmering generelt og specifikt i javascript: De generelle principper og tankegangen i OOP samt dets konkrete anvendelse i javascript. - klasse-syntaksen, klasser som skabelon til objekter - konstruktor, indkapsling samt metoder på objektet - konceptet om arv i objektorienteret programmering - samt intro til klassediagrammer som dokumentation. - videre introduceres der til muligheden for at lave private variable i nyere js via #-tegnet - om statiske metoder der kan kaldes på klassen i js. - endelig kigges der også på det underliggende prototype-baserede arvehierarki som specifik javascript-konstruktion. - Der perspektiveres til rene objektorienterede sprog som Java og C#. 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 Materialer Lærer-udleveret powerpoint p5js-referencen
Indhold	Kernestof: Funktion_ByValueBySharing.js description FunktionExpression_viaKnap.js description FunktionExpression_viaKnapviaPrompt.js description js function definition.asp Object_Konstrukt_rFunktion.js description Object_metoder.js description Stjerne_ObjektLiteral ConstructorFunc_Stjerne ClassIntro_Monster Simulate: Particle Array af Jitter-objekter by mortenTEC -p5.js Web Editor KanonKasteparabel Prøv hjemmefra at tilføje til Kanon eller Kasteparabel-projektet en optegning af kuglens baner SkakUr PongPlus_minus Opret konto på github - så vi kan udgive skakur-programmet via github pages. Lav ændringer til projektet færdigt hjemme. Objects: Composite Objects Se eksempelprojekt via link: Sæt Pong-programmet op hjemmefra, og hvis det driller, så medbring spørgsmål. Husk at se i EggRing-projektet, hvis man har brug for hjælp til den specifikke måde, som det skrives op på (syntaksen). 6.2: Classes in JavaScript with ES6 - p5.js Tutorial Frivillig lektie via linket: Hvis man stadig er forvirret over 'class' i javascript, kan man med fordel se videoen via linket :) ProgrammeringB_js_Basisstof til og med arrays.pdf description ProgrammeringB_js_funktioner_Object_Class.pdf description Læs om logbogs-opgaven til kommende uge - vi begynder på den i dette modul :) Visual Studio Code test.js description ProgrammeringB_VSCODE_ogKattisIntro.pdf description ButtonArv-projekt examples \| p5.js Asteroids_Mangler Skimlæs via linket om alle de saftige metoder, som Vector-klassen i p5-js-biblioteket stiller tilrådighed:Brugtbart stof i forhold til Asteroids :) Læs via de to links om - DOM - document object model: Vi skal se på html & css som den traditionelle kontekst for js-programmering: Hvordan er et html-dokument opbygget, og hvordan kan vi ændre i det via js-kode? Om DOM Om js-metoder i relation til DOM cssEksempel.html description cssEksempel5_Grid_basis.html description cssEksempel6_Grid_gridArea.html description Skimlæs introducerende til position-attribut via linket. huskeliste.html description huskeliste.js description huskelistep5.js description huskeliste.css description
Omfang	Estimeret: 0,00 moduler Dækker over: 32 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 3	Infoviz via d3js samt html, css & DOM Forårsprojekt: Forløbet introducerer til og anvender d3js-biblioteket med henblik på et større projektscenarie om infovisualisering. Der introduceres til html, css, DOM samt diverse array-metoder såsom filter(), map(), reduce(), slice() m.fl Videre anvendes arbejdes der med - method-chaining - event-håndtering - anonyme funktioner - local storage som en måde at gøre data persistent på Dokumentation af program via use-case-diagram samt flowchart
Indhold	Kernestof: Læs via de to links om - DOM - document object model: Vi skal se på html & css som den traditionelle kontekst for js-programmering: Hvordan er et html-dokument opbygget, og hvordan kan vi ændre i det via js-kode? Om DOM Om js-metoder i relation til DOM cssEksempel.html description cssEksempel5_Grid_basis.html description cssEksempel6_Grid_gridArea.html description Skimlæs introducerende til position-attribut via linket. huskeliste.html description huskeliste.js description huskelistep5.js description huskeliste.css description formEksempel.html description timerEksempel.html description Eksempel på brug af fetch D3 Selections D3 Data Joins D3 Enter, Exit and Update D3 Shapes Prog_ArrayMetoder_opgave.pdf description D3js_opgaveoplæg.pdf description joinD3.html description stackedSeries.html description HTML_CSS_JS_ SLIDES 2025.pdf description
Omfang	Estimeret: 24,00 moduler Dækker over: 27 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 4	OOP i js, opsamling diverse Opsamling af diverse vedr. OOP i js: private datafelter polymorfi og andet
Indhold	Kernestof: arrowSyntax_lydAfspiller Call_manipuleringThis KattisOpgaver i VSCODE.pdf description Download Node.js® kattis1.js description Leggja saman – Kattis, Kattis Solving for Carrots – Kattis, Kattis
Omfang	Estimeret: Ikke angivet Dækker over: 6 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 5	Algoritmemønstre: Grafalgoritmer Forløb om algoritmemønstre, specifikt grafalgoritmer: Forløbet introducerer til grafbegrebet og til diverse algoritmer. DEL 1: 1: bredde-først-søgning i grafer uden vægte og orientering - at finde korteste vej 2: 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. DEL 2: 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. DEL 3: Hvis tid eksempel på Flownetværks-graf og dertilhørende algoritme Kernestof: - rekursion Faglige mål:
Indhold	Kernestof: ProgB_JS_Genopfriskning efter ferien.docx description 8. Grafteori \| MAT A htx GrafAlgorimer_Del1_GrafKlasse&BFS.pptx description GrafAlgoritmer_Del2_DFS_KritiskeKnuder.pptx description Grafalgoritmer_kritiskeKnuderViaDfs.pdf description Læs vedhæftede pdf med slides om dybde-først-søge-algoritmen anvendt i forhold til at finde kritiske knuder: Link til yderligere forklaring samt implementering i js (rul ned til sidste 1/3-del):DFS til kritiske knuder Læs opgavebeskrivelsen til igangværende grafprojekt (aflevering om 12 dage) Medbring de sidste spørgsmål til grafprojektet Kruskal.js description UnionFind.js description VægtetGraf.js description Edge.js description wiki-opslag Skimlæs via link om Kruskal-algoritmens måde at søge på i grafen i forhold til at finde den billigste måde at forbinde knuderne på:W3Schools.com - Kruskal
Omfang	Estimeret: 20,00 moduler Dækker over: 13 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 6	Nodejs-serverprogram & relationel database Forløbet introducerer til javascript på serversiden via node som runtime-miljø. Videre introducerer forløbet til relationel database, og herunder SQL som query-sprog. Begreber som - primærnøgler, fremmednøgler, normalformer & datamodel gennemgås. Specifikt arbejdes med supabase.com som cloud-service til relationel database-tjeneste. Render.com bruges til at hoste nodejs-programmet, og herunder anvendes der github til deployment af programmet på render.com Der arbejdes indledningvist med local host. Nodejs via Express-frameworket anvendes og der introduceres herunder til begreber som routing, server/klient, http-metoder, evt. til serverside-rendering samt til fetch-api'en fra klientsiden i forhold. Videre introduceres der til arkitekturmønsteret MVC som en kendt måde at opbygge programmet på med - separation of concerns og overskuelighed.
Indhold	Kernestof: Se video om Union-Find-algoritmen, som Kruskal benytter sig af, via linket:Union Find Visually Explained filer.js description server.js description app.js description OmDatabaser.pdf description DbProgram på OneDrive - hiv program ned via linket og pak det ud og læg det i relevant mappe MVC&Supabase_slides.pdf description Hvis man ikke fik det gjort det i torsdags:- Opret bruger og database-projekt i Supabase (find på www).- Opret 3 tabeller, med relevante attributter - se vedhæftede pdf- Download Eksempelprogram via linket (se torsdagsmodulet) og læg det ind i releva Medbring gerne forslag & ideer til undervisningen i programmering: 3d_nodeprojekt_slides.pdf description Prog_Database_RelationerNormalformer.pdf description Prog_FagligeMetoder.pdf description
Omfang	Estimeret: 20,00 moduler Dækker over: 22 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 7	Designmønstre i programmering Forløbet introducerer til begrebet designmønstre i relation til objektorienteret programmering. Ét mønster gennemgås i plenum, hvorefter en række mønstre gennemgås gruppevist - ud fra program-eksempler. Først State i plenum (et objekts tilstand lagt ud i tilstands-klasser) Observer (objekter lytter på andet objekt) - se på hvordan det allerede er indbygget i DOM via event-håndtering samt event-kobling Composite (objekter med fællesnævner samlet i samme træ af objekter) Decorator (ny adfærd tilføjet til klasse uden at ændre i denne) Builder (kompleks objekt-produktion gjort fleksibel trin for trin) Forløbet skaber bevidsthed om struktur & abstraktionsmekanismer. Faglige mål: - anvende avancerede konstruktioner i et programmeringssprog - rette, tilpasse og udvide avancerede programmer
Indhold
Omfang	Estimeret: 8,00 moduler Dækker over: 4 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 8	Prog: Eksamensprojekt Udvikling af eksamensprojekt: program & synopsis
Indhold	Kernestof: polymorfi_OOP - eksempel Medbring idé(er) til eksamensprojekt (idé med elastik i, i forhold til dets kompleksitet/enkelhed) FagligeMetoderTestOgKravspec_oversigt.pdf description Arbejd hjemmefra på prioriteret kravliste til jeres idé samt gerne tegnede skærmbilleder, hvis I ikke fik lavet det sidst PhaserMedTypeTjek Arbejd på jeres eksamensprojekt-program inden modulet og medbring meget gerne 1-2 relevante spørgsmål til det :) Skimlæs gerne synopsis-oplægget inden timen Medbring meget gerne sidste spørgsmål til projektet - synopsis og programmet
Omfang	Estimeret: 20,00 moduler Dækker over: 33 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 9	Strenge i js, regular expressions & markovkæder
Indhold	Kernestof: KollisionsTjek Læs pdf-side 1-4, i vedhæftede lidt svære tekst på engelsk, om tidsforhold i algoritmer: En algoritme er jo dybest set bare en defineret procedure til at håndtere et problem, og nogle procedurer er mere snedige end andre. Hvordan vokser en algoritmes AlgoritmeMønstre_StoreO&kørselstid.pdf description Sorteringsalgo SelectionSort&InsertionSort.pdf description DesignMønstreJS_Projekter DesignmønstreJS_projekter.pdf description Alle skal have tilføjet en ny State-klasse til State-projektet, således at fuglen kan være i 3 forskellige tilstande:Man skal kunne pege på den fleksibilitet og struktur mønsteret giver (løs kobling og høj binding).
Omfang	Estimeret: Ikke angivet Dækker over: 10 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Vis samlet undervisningsbeskrivelse samt elevtilknytning til forløb