Week 1: JavaScript Introductie

1 / 24
suivant
Slide 1: Diapositive
JavaScriptMBOStudiejaar 2

Cette leçon contient 24 diapositives, avec quiz interactifs et diapositives de texte.

time-iconLa durée de la leçon est: 60 min

Éléments de cette leçon

Slide 1 - Diapositive

Slide 2 - Diapositive

Slide 3 - Diapositive

Slide 4 - Diapositive

Slide 5 - Diapositive

Slide 6 - Diapositive

Slide 7 - Diapositive

Waarom JavaScript?
JavaScript is a high-level, object oriented, multi-paradigm programing language. 🤯

Slide 8 - Diapositive

Programming language is een stuk gereedschap waarmee wij de computer instructies geven om dingen te doen.

Slide 9 - Diapositive

High-level betekent dat je geen zorgen hoeft te maken over complexe zaken zoals memory management. 😮‍💨

Slide 10 - Diapositive

Object-oriented betekent dat de manier van informatie opslaan middels objecten gaat gebeuren.
Meer hierover tijdens de cursus.

Slide 11 - Diapositive

Multi-paradigm betekent dat de taal zo flexibel is, dat je verschillende stijlen kan gebruiken om te programmeren. Bijvoorbeeld middels imperative of declarative programming. Dit zijn manieren van structuur geven aan de code die je schrijft.

Slide 12 - Diapositive

3 core elements van websites
HTML > Tekst, Images, Buttons
CSS > Stijl en layout
JavaScript > Dynamische effecten , interactie, informatie van afstand laden

Slide 13 - Diapositive

Welke bekende frameworks zijn er voor JavaScript?
Vue.JS
Angular
React
Node.js
ionic
electron

Slide 14 - Sondage

Een goede basis aanleggen
Voor wij frameworks gaan gebruiken moeten wij JavaScript eerst goed beheersen.

Slide 15 - Diapositive

Waarom moeten wij eerst de programmeertaal beheersen voor we een framework gebruiken?
A
Een framework is alleen voor mobile applications
B
JavaScript draait niet zonder framework
C
Omdat frameworks ook kunnen verdwijnen
D
Ik ben mijn lunch vergeten 😭

Slide 16 - Quiz

Backend

Web applications in webservers
Je werkt niet standaard in de webbrowser
🤩
Frontend

Dynamic effects
Web applications in browser
😍

Slide 17 - Diapositive

Wat kan je nog meer?

Native mobile applications



Desktop applications
Met welk framework?

React of ionic



Electron

Slide 18 - Diapositive

Opzetten van de IDE
Wij gaan het intellij platform gebruiken.
Installeer Webstorm of de jetbrains toolbox app.

Slide 19 - Diapositive

Slide 20 - Lien

Monokai Pro
Download deze via de market place in jouw intellij product.

Slide 21 - Diapositive

Laat de leerlingen de script tag maken in de head tag.

Open vervolgens de file in de browser
<script>
let js = 'amazing';
if (js == 'amazing') alert('JavaScript is FUN!');
</script>

Slide 22 - Diapositive

Opwarmertje
Laat een alert verschijnen.
Een calculatie doen.
De calculatie in de console laten printen.

Slide 23 - Diapositive

Laat de leerlingen iets uitrekenen en printen in de console.

Open vervolgens de file in de browser
<script>
let js = 'amazing';
if (js == 'amazing') alert('JavaScript is FUN!');

40+8+23-10;
console.log(40+8+23-10);
</script>

Slide 24 - Diapositive