Week 1: JavaScript Introductie

1 / 24
volgende
Slide 1: Tekstslide
JavaScriptMBOStudiejaar 2

In deze les zitten 24 slides, met interactieve quizzen en tekstslides.

time-iconLesduur is: 60 min

Onderdelen in deze les

Slide 1 - Tekstslide

Slide 2 - Tekstslide

Slide 3 - Tekstslide

Slide 4 - Tekstslide

Slide 5 - Tekstslide

Slide 6 - Tekstslide

Slide 7 - Tekstslide

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

Slide 8 - Tekstslide

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

Slide 9 - Tekstslide

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

Slide 10 - Tekstslide

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

Slide 11 - Tekstslide

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 - Tekstslide

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

Slide 13 - Tekstslide

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

Slide 14 - Poll

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

Slide 15 - Tekstslide

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 - Quizvraag

Backend

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

Dynamic effects
Web applications in browser
😍

Slide 17 - Tekstslide

Wat kan je nog meer?

Native mobile applications



Desktop applications
Met welk framework?

React of ionic



Electron

Slide 18 - Tekstslide

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

Slide 19 - Tekstslide

Slide 20 - Link

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

Slide 21 - Tekstslide

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 - Tekstslide

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

Slide 23 - Tekstslide

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 - Tekstslide