Holdet L3ei Pro (2025/26) - Undervisningsbeskrivelse

menu

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 Lei Pro (L2ei Pro, L3ei 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 Phaserjs
Titel 4 DOM-træet: html, css & js samt d3.js fortsat
Titel 5 Nodejs-serverprogram & relationel database
Titel 6 Prog: Eksamensprojekt

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:
Omfang Estimeret: Ikke angivet
Dækker over: 14 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:
Omfang Estimeret: 0,00 moduler
Dækker over: 25 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer


Titel 4 DOM-træet: html, css & js samt d3.js fortsat

Forløbet introducerer til træstrukturen i Document Object Model (DOM) - html, css og js i relation til disse.
Derudover arbejder forløbet med d3.js-biblioteket i forlængelse af SRC'en, som indebar en individuel og indledende undersøgelse af dette.

Der introduceres til html, css, DOM samt diverse indbyggede array-metoder såsom filter(), map(), reduce(), slice() m.fl

Opsætning af regler via css samt især grid som display-logik.
Diverse html-objekter, attributter samt brug af id og class på html-objekter i forhold til at tilgå dem fra js-koden.

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 projektets program via use-case-diagram samt flowchart
Indhold
Kernestof:
Omfang Estimeret: 20,00 moduler
Dækker over: 21 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer

Titel 5 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.
Via Supabase kan der skrives SQL-lignende js-kode i serverprogrammet, som klienten kommunikerer med.

Der arbejdes primært med local host.
Dog introduceres også kort til brug af Render.com som mulig platform til at hoste nodejs-programmet, og herunder anvendes der github til deployment af programmet på render.com. Dette er frivilligt og hvis tid i projektet.

Nodejs via Express-frameworket anvendes og der introduceres herunder til begreber som routing, server/klient, http-metoder samt til fetch-api'en fra klientsiden i forhold.

Videre introduceres der til 3-lags-modellen som arkitekturmønster som en måde at opbygge programmet på med - separation of concerns og dermed overskuelighed i koden.
Indhold
Kernestof:
Omfang Estimeret: 20,00 moduler
Dækker over: 16 moduler
Særlige fokuspunkter
Væsentligste arbejdsformer