Week 1: JavaScript Introductie

1 / 24
next
Slide 1: Slide
JavaScriptMBOStudiejaar 2

This lesson contains 24 slides, with interactive quizzes and text slides.

time-iconLesson duration is: 60 min

Items in this lesson

Slide 1 - Slide

Slide 2 - Slide

Slide 3 - Slide

Slide 4 - Slide

Slide 5 - Slide

Slide 6 - Slide

Slide 7 - Slide

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

Slide 8 - Slide

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

Slide 9 - Slide

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

Slide 10 - Slide

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

Slide 11 - Slide

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

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

Slide 13 - Slide

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

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

Wat kan je nog meer?

Native mobile applications



Desktop applications
Met welk framework?

React of ionic



Electron

Slide 18 - Slide

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

Slide 19 - Slide

Slide 20 - Link

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

Slide 21 - Slide

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

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

Slide 23 - Slide

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