H.C. Ørsted Gymnasiet - Lyngby
lan
Hovedmenu
history
Versionsinformation
H.C. Ørsted Gymnasiet - Lyngby
Hovedmenu
Log ind
keyboard_arrow_down
login
Brugernavn
login
MitID
Kontakt
Hjælp
Hjælp
Holdet 2024 Lei Pro - Undervisningsbeskrivelse
menu
document_scanner
Vis udskriftsvenlig udgave
print
Print med tilpasset bredde til A3
print
Print med tilpasset bredde til A4
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 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
Phaserjs
Titel 3
DOM-træet: html, css & js samt d3.js fortsat
Titel 4
Nodejs-serverprogram & relationel database
Titel 5
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:
Kontrolstruktur med switch osv
Array_slangeSketch.js
description
Array_2D.js
description
Omfang
Estimeret:
Ikke angivet
Dækker over: 14
moduler
Særlige fokuspunkter
Væsentligste arbejdsformer
Individuelt arbejde
Lærerstyret undervisning
Pararbejde
Titel 2
Phaserjs
PhaserJs - tværfagligt med KIT
Indhold
Kernestof:
Phaser - Making your first Phaser 3 game
Link til øvelse 3, Phaser
Inden kl. 14 skal I aflevere jeres kildekode til jeres opstart på eget spilprojekt via Phaser-biblioteket:
Hvis man endnu ikke er kommet så langt med projektet, er det en god idé at arbejde videre med det hjemmefra.
Læs også om selve afleveringen knyttet til projektet hjemmefra, se under opgaver, uge 15
Omfang
Estimeret:
Ikke angivet
Dækker over: 29
moduler
Særlige fokuspunkter
Væsentligste arbejdsformer
Titel 3
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:
ProgB_JS_Genopfriskning efter ferien_3ei.docx
description
cssEksempel.html
description
positionEksempel.html
description
cssEksempel5_Grid_basis.html
description
cssEksempel6_Grid_gridArea.html
description
Lav genopfriskningsdokumentet fra uge 33 færdig og medbring spørgsmål
huskeliste.html
description
huskeliste.js
description
huskeliste.css
description
huskelistep5.js
description
simpelForm.html
description
Hiv html-fil ned og kør den i browseren.
testForm.html
description
Arbejd videre med projektet hjemmefra:1: Forms med radioknapper skal være sat op (hard-codede spørgsmål)2: Event-listener på submit-knap skal være sat op (se huskeliste-program) -
Arbejd videre med projektet hjemmefra, hvis man ikke fik lavet lektien til i tirsdags - brug af forms, tjekke brugerens svar:I modulet skal man implementere brug af fetch samt evt. local storage så brugeren kan fortsætte på en quiz, man har været i g
Prog_ArrayMetoder_opgave (1).pdf
description
Skimlæs via link om diverse indbyggede metoder på et array i js:
D3 Selections
Prog_ArrayMetoder_opgave (2).pdf Hvis man ikke blev færdig sidst med de små øvelser i arrays-metoder, må man meget gerne lave dem derhjemme eller medbringe spørgsmål, hvis det driller (pdf'en er vedhæftet igen)
Prog_arrayMetoder&d3_OPGAVE.pdf
description
Medbring idé til projektscenarie, hvis man ikke fik det noteret i modulet før ferien :)
Omfang
Estimeret: 20,00 moduler
Dækker over: 21
moduler
Særlige fokuspunkter
Væsentligste arbejdsformer
Titel 4
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:
filer.js
description
server.js
description
OmDatabaser.pdf
description
Eksempelprojekt
Omfang
Estimeret: 20,00 moduler
Dækker over: 16
moduler
Særlige fokuspunkter
Væsentligste arbejdsformer
Titel 5
Prog: Eksamensprojekt
Udvikling af eksamensprojekt:
program & synopsis
Indhold
Kernestof:
BFS.js
description
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
Phaser_eksempelprogram
PhaserMedTypetjek
Phaser - klasse til Player_eksempel på
Arbejd på jeres eksamensprojekt-program inden modulerne og medbring meget gerne 1-2 relevante spørgsmål til det :)
Medbring meget gerne spørgsmål til projektet - synopsis og programmet
Omfang
Estimeret: 20,00 moduler
Dækker over: 29
moduler
Særlige fokuspunkter
Væsentligste arbejdsformer
Vis samlet undervisningsbeskrivelse samt elevtilknytning til forløb
lan
Hovedmenu
login
MitID
login
Brugernavn
more_horiz
Mere
{ "S": "/lectio/681/stamdata/stamdata_edit_student.aspx?id=666\u0026prevurl=studieplan%2fuvb_hold_off.aspx%3fholdid%3d62654632033", "T": "/lectio/681/stamdata/stamdata_edit_teacher.aspx?teacherid=666\u0026prevurl=studieplan%2fuvb_hold_off.aspx%3fholdid%3d62654632033", "H": "/lectio/681/stamdata/stamdata_edit_hold.aspx?id=666\u0026prevurl=studieplan%2fuvb_hold_off.aspx%3fholdid%3d62654632033" }