Praktisch

Docenten

Sjouwke Van Parys

Jannes Lambrecht

Karel De Smet

ECTS

📅 Periode 2 = 7 weken + evaluatieweek

Lesmomenten
2 x 3uur per week
🏫 Fysiek op campus → aanwezigheid verplicht
 

Evaluatie

• Permanente evaluatie (40%)
• Eindopdracht (60%)

Permanente evaluatie

Wekelijks

✍️ Klasopdracht

🧠 Canvas Toets (tijdens de 2de les van de week)

Studie

🤓 Herbekijk na elke les thuis de slides & oefeningen

👀 Bekijk de tutorials die je elke week terugvindt onder 'handige links' op Canvas

Eindopdracht

• Briefing tijdens week 5
• Geen aparte opdrachten meer dan
  • wel tussentijdse deadlines
  • wekelijkse toetsen blijven doorlopen
• Indienen tijdens de evaluatieweek

Mondelinge verdediging

Je presenteert je project tijdens een vooraf vastgelegd moment. Je moet alle code vlot kunnen uitleggen.

Aanwezigheid = verplicht

🤒 Wettig afwezig?

1. Laat dit vóór de start van de les via Teams weten
2. Upload afwezigheidsattest op SVS
3. Neem zelfstandig de theorie & demo's door tegen volgende les
4. Maak de weekopdracht thuis tegen volgende les
5. Je bent vrijgesteld van de toets op het moment van je afwezigheid.

Aanwezigheid = verplicht

Je kan enkel uitstel krijgen voor een taak als:

• je wettig afwezig bent,
• je dit vóór de start van de les meldt
• én je docent de nieuwe deadline heeft goedgekeurd.

⚠️ Onwettig afwezig of niet tijdig gemeld = 0

Aanwezigheid = verplicht

⏰ Te laat? Kan gebeuren!

1. Laat dit via Teams weten aan je docent.
2. Wacht op de gang tot de docent je binnen laat.

Wat heb je nodig?

Benodigdheden

• Browser:
  ​        Firefox Developer Edition
          Google Chrome
• Code editor: Visual Studio Code​
• Basiskennis: HTML en CSS 
• Een beetje goesting om coole, geanimeerde web pagina's te maken

🧠 Zit het allemaal nog wat ver? Fris je kennis van HTML & CSS even op door de module Web Essentials te herbekijken.

Leerstof & oefeningen

        Canvas​

• Theorie
• Oefeningen & taken
• Handige links

🔗 Canvas cursuslink​ 

     Mozilla Developer Network
     (mdn)

• Uitgebreide documentatie over HTML, CSS & JS

​🔗 developer.mozilla.org

📚 Digitale Syllabus

• ​Uitgebreide uitleg

​🔗 Syllabuslink

     LinkedIn Learning

• Extra tutorials, waaronder:
  ​🔗 JavaScript Essentials Training

      Github

• Voor versiebeheer
• Later meer info

🔗 github.com

Waarom dit vak?

De pilaren van het web

• Programmeertaal
• Vaak gebruikt samen met HTML & CSS​
  • Webpagina's interactief maken
• Vanilla JavaScript
  • = zonder libraries of frameworks
• Volgt de ECMAscript standaard
  • 'ES14', 'ES15', ... = JavaScript versies

JavaScript

Waarom JavaScript?

• client-side
  • ​websites
  • apps
  • webapps
  • games
  • ...
•  server-side
  • informatie uit een database halen of in opslaan
  • formulieren afhandelen en emails versturen
  • ...

🌐 Breed inzetbaar

🧨 Designs dynamisch maken

• Bewegende elementen
• Interactie: klikken, swipen, draggen,... 
• Elementen in-animeren 
• Scroll effecten
• Next level hover effecten
• Responsive interfaces
• ...

😻 Enkele voorbeelden

• masitupungato.com: loading state, appear-in animations, parallax
• knowlupus.org: interactie, animaties
• sbs.com.au/theboat: muziek, scrolljacking
• manayerbamate.com: page transitions, scrolljacking, mouse events
• multeor.com: game
• bavet.eu: scroll animations, hover effects
• ...

• Bestaande software uitbreiden:
  • Adobe After Effects
  • Adobe Photoshop
  • Blender

🚀 Veel JavaScript based tools

• Vlot begrip en gebruik van low & no code tools
  • ​Framer 
  • Webflow

🚀 Veel JavaScript based tools

Hier gaan we in periode 4 mee aan de slag 🤩

• GSAP: JavaScript library om wicked animaties te maken
• Three.js
  • JavaScript library voor 3D animaties
  • obv. WebGL (= JavaScript API om 2D & 3D animaties te renderen)
• p5.js: JavaScript tool waarin je op een laagdrempelige manier JavaScript kan (leren) schrijven
• ...

🛠 Grote community, libraries & frameworks

JavaScript frameworks zijn een verzameling van JavaScript libaries en kant-en-klare code:

• development vereenvoudigen
• tijdsbesparend
• geteste componenten & patronen

🛠 Grote community, libraries & frameworks

Je zal uiteraard eerst de basis van JavaScript moeten begrijpen vooraleer je met een framework te werk gaat.

Begrip van JavaScript helpt jou als designer om dynamische, interactieve en vooral realiseerbare designs op te leveren, dankzij:

• 😩 begrip van de technische restricties
• 😍 inzicht in de technische mogelijkheden

🤝 Vlotte samenwerking met developers

AI

Je mag generatieve AI-assistenten gebruiken om

• code te analyseren
• bugs op te sporen
• complexe CSS & JS uit te leggen
• dummy content en test-inhoud te creëren

📦 Bewaar al je prompts. Deze kunnen voor elke opdracht opgevraagd worden.

🤖 AI als programmeerassistent

Je mag niet

• de briefing copy/pasten in een AI tool
• niet-zelfgeschreven prompts gebruiken
• code laten genereren door AI
• AI autocompletion gebruiken (vb. Copilot)

🤖 AI als programmeerassistent

We raden sterk af om

• AI tijdens de les te gebruiken

Heb je dus vragen? Deel ze met de rest van de groep!

Je leert in dit vak de basis van JavaScript

• Je moet zelfstandig JavaScript kunnen schrijven
• Je moet elke regel code die je indient zelf begrijpen
• Je moet kunnen uitleggen wat je code doet, waarom je het zo hebt aangepakt en wat alternatieven zijn
• AI mag je helpen bij begrijpen, maar mag nooit jouw denkwerk vervangen

Zelf begrijpen = kunnen uitleggen

Daarom:

• Verwachten we dat je je code mondeling kan verdedigen
• Kunnen we tijdens feedback of evaluatie doorvragen
  over jouw code
• Geldt de regel: kan je het niet uitleggen, dan beheers je de leerstof niet

Zelf begrijpen = kunnen uitleggen