Lesblokken van CSP2 en FrontEnd
| blok 1 |
Herhaling opzet kleurengame met CSS en JS
|
huiswerk |
AO2A: -
AO2B: din 7 feb
|
- Inleiding CSP2 en Frontend 2de jaar
- kleurengame (vorig seizoen) opnieuw opzetten
- settings kleurengame toevoegen
- Toepassing flex-box
|
|
| blok 2 |
Kleurengame 1
|
huiswerk |
AO2A: -
AO2B: don 9 feb
|
|
- Basis kleurengame opzetten
|
| blok 3 |
Kleurengame 2
|
huiswerk |
AO2A: -
AO2B: din 14 feb
|
- HTML opbouw grid
- Kleuren plaatsen vanuit array
|
|
| blok 4 |
Kleurengame 3
|
huiswerk |
AO2A: -
AO2B: don 16 feb
|
- Kleuren shuffelen in array
- Nieuw grid plaatsen met setinterval
- start (setinterval) en stop (clear interval) knop
|
- Grid opbouw met kleuren uit array
|
| blok 5 |
Kleurengame 4
|
huiswerk |
AO2A: -
AO2B: din 21 feb
|
- bijhouden puntentelling
- bij starten globale variabelen resetten
- settings aanmaken met input type=text
|
- function setColor die kleuren(array) shuffelt en in grid plaatst
- automatisch verversen grid met setInterval
- start en stop knop toevoegen ((setInterval, clearInterval)
|
| blok 6 |
Kleurengame 5
|
huiswerk |
AO2A: -
AO2B: don 23 feb
|
- objecten aanmaken met document.createElement
- objecten appenden
- geen innerHTML meer gebruiken, niet dynamisch genoeg
- Dynamische opbouw grid met willekeurig aantal kleuren
|
- registratie van aantal: raak, mis en teLaat
- settings toevoegen:
- aantal loops per game
- aantal seconden per loop
- checkbox of basiskleur gewijzigd wordt per loop
|
| blok 7 |
Formulier
|
huiswerk |
AO2A: -
AO2B: don 2 mrt
|
- dynamisch formulier (man/vrouw optie) behandelen.
- toelichting op dynamisch inhoud tr verbergen
- tdA mag met innerHTML (aleen tekst), tdB moet met append )
- man=>input type=text en vrouw, append select met append van options
|
- Dynamisch opbouw van kleuren-grid met JS
- settings toevoegen:
- aantal kleuren
|
| blok 8 |
Formulier
|
huiswerk |
AO2A: -
AO2B: din 7 mrt
|
- Nogmaals man vrouw optie behandeld
|
- Opdr 1 af: vrouw-optie: boybands in (multiple) select opbouwen vanuit Javascript array.
|
| blok 9 |
werken met JSON
|
huiswerk |
AO2A: -
AO2B: din 14 mrt
|
- Toelichting JSON
- versturen naar server en json_encode[Array] maken
- echo van Array en van JSON
- echo json in JS en laat zien met console.log()
- invullen van formvelden met JSON met for( k in obj)
|
- Opdr 1 af: Optie man: boybands in (multiple) select opbouwen vanuit Javascript array.
- Optie man: input type=text veld voor favoriete voetbalclub
|
| blok 10 |
AJAX (plain Javascript)
|
huiswerk |
AO2A: -
AO2B: don 16 mrt
|
- principe AJAX uitleggen
- data objecten toekennen (zonder jQuery)
|
|
| blok 11 |
API
|
huiswerk |
AO2A: -
AO2B: din 21 mrt
|
- van die JSON, met JS dynamisch een HTML tabel opbouwen
|
|
| blok 12 |
MySQL via API met Javascript in HTML plaatsen
|
huiswerk |
AO2A: -
AO2B: don 23 mrt
|
- Vul je eigen bier-tabel met de 750 biertjes
- Maak je eigen API
- geef MySQL via API met json_encode terug
|
- opdracht 2.1 (herhaling)
- online voor beoordeling:
- Dynamische kleurengame
- form met dyn opbouw man-vrouw optie, met POST van JSON object
- opdracht 2.1: opbouw biertabel vanuit API =>JSON => createElement => HTML
|
| blok 13 |
AJAX => createElement
|
huiswerk |
AO2A: -
AO2B: din 28 mrt
|
- AJAX-request toevoegen die je eigen API uitleest
- dynamisch (met createElement) de HTML tabel met Javascript opbouwen
|
|
| blok 14 |
basis jQuery
|
huiswerk |
AO2A: -
AO2B: din 28 mrt
|
- gebruik van jQuery toelichten
- aanroepen van id's en classes
- object-opbouw van HTML table met jQuery
- AJAX-requests met jQuery
|
|
| blok 15 |
jQuery dynamische tabel opbouw
|
huiswerk |
AO2A: -
AO2B: don 30 mrt
|
- een table bouwen met createElement m.b.v. jQuery
- de AJAX-request getJSON van jQuery
- .ready van jQuery
|
|
| blok 16 |
HTML & CSS modal dialog
|
huiswerk |
AO2A: -
AO2B: din 4 apr
|
|
|
| blok 17 |
HTML & CSS modal dialog
|
huiswerk |
AO2A: -
AO2B: don 6 apr
|
- Opzet opdracht 6.4
- Opzet modal-dialog HTML-CSS
- Voorbeeld Dialog HTML CSS in jsFiddle
|
|
| blok 18 |
HTML & CSS modal dialog
|
huiswerk |
AO2A: -
AO2B: din 11 apr
|
- Verdere uitwerking Modal dialog in HTML-CSS
- CSS-effecten met transitions
- Voorbeeld Dialog HTML CSS in jsFiddle
|
- opdracht 6.4
- opdracht 7 (modal-dialog HTML-CSS)
|
| blok 19 |
HTML modal dialog => Javascript
|
huiswerk |
AO2A: -
AO2B: don 13 apr
|
- Verplaatsen HTML van dialog naar Javascript
- gebruik van jQuery:
- - elementen aanmaken, bijv. een div, met $('<div>')
- - elementen toevoegen met .append()
- Voorbeeld Dialog met JS en CSS (HTML-dialog naar JS) in jsFiddle
|
|
| blok 20 |
volledige dialog => Javascript
|
huiswerk |
AO2A: -
AO2B: din 18 apr
|
- Verplaatsen HTML en CSS naar Javascript
- Voorbeeld Dialog met JS en CSS (HTML-dialog naar JS) in jsFiddle
|
- opdracht 8 (modal-dialog: HTML => JS)
|
| blok 21 |
JSON als bron voor content data-object jQuery
|
huiswerk |
AO2A: -
AO2B: din 2 mei
|
- Dialog accepteert JSON
- bij aanroep dialog Header, Content, Footer json meegeven
- bespreking websites
- voeg data-object aan element toe (in dit geval een button)
- set onclick niet in HTML maar in Javascript met jQuery
- Data-object en onclick met jQuery plaatsen: jsFiddle
- Opbouw HTML-table vanuit JSON => jsFiddle
|
- op 9) HTML en CSS van dialog verplaatst naar JS
- op 10) data-object (JSON) aan sender meegeven en content dialog dynamisch vullen
|
| blok 22 |
Via type in JSON => table uit 2d-array
|
huiswerk |
AO2A: -
AO2B: don 4 mei
|
- Toevoegen data-object aan tr
- Via type in JSON => dynamische opbouw van 2d-array (=>Table)
- of plain text
|
- opdracht 10 (content dialog vanuit json)
- (dialog) opdrachten online op eigen website
|
| blok 23 |
Dialog met form vanuit body
|
huiswerk |
AO2A: -
AO2B: din 9 mei
|
- type "HTML"
- bouw het form gewoon in de body
- 3 verschillende typen dialog
|
- opdracht 11 (dialog met type table en tekst)
|
| blok 24 |
CRUD buttons toevoegen
|
huiswerk |
AO2A: -
AO2B: don 11 mei
|
- Toevoegen info, edit, delete-knop
- gekoppeld aan HTML
- met eigen dialogs
|
- opdracht 12 (dialog met tekst, table of form)
|
| blok 25 |
CRUD buttons toevoegen
|
huiswerk |
AO2A: -
AO2B: din 16 mei
|
- Zelfde als vorige les:
- Toevoegen info, edit, delete-knop
- gekoppeld aan HTML
- met eigen dialogs
|
- opdracht 12 (dialog met tekst, table of form)
|
| blok 26 |
Site gereedmaken voor CRUD acties
|
huiswerk |
AO2A: -
AO2B: -
|
- buttons en forms voor Update en Delete acties
- dialog maken voor login (voor Delete, Create en Update acties moet eerst ingelogd worden)
|
- opdracht 13 (toepassen dialog op biertabel)
|
| blok 27 |
API gereedmaken voor CRUD acties
|
huiswerk |
AO2A: -
AO2B: -
|
- dialog maken voor login (voor Delete, Create en Update acties moet eerst ingelogd worden)
- inloggen en API afhankelijk maken van POST opdracht (C, R, U of D)
- aanpassen API: Update en Delete acties
|
- opdracht 14 A (inlog dialog)
|
| blok 28 |
Read actie: per 20 records
|
huiswerk |
AO2A: -
AO2B: -
|
- aanpassen API en Frontend: per 20 records opvragen
- button en form voor Read actie
|
- opdracht 14 (inlog en Update en Delete acties)
|
| blok 29 |
|
huiswerk |
AO2A: -
AO2B: -
|
|
- opdracht 15 (per 20 records tonen)
|
| blok 30 |
De basis
|
huiswerk |
AO2A: -
AO2B: -
|
- Opzetten van 2D-Canvas
- Laten bewegen van een image in het canvas
- toepassen van een sprite en drawImage
|
|
| blok 31 |
Het spel zelf
|
huiswerk |
AO2A: -
AO2B: -
|
- toepassen van een sprite en drawImage
- game-interface
|
|
CSP2 : Javascript 2
