JavaScript deel 1

• newEditor
• Applicatie- en mediaontwikkelaar
• MBO
• Studiejaar 1

Frontend Development

Terug naar vorige week

• Bootstrap 5

• SASS / SCSS

• bol.com

Opdracht vorige week

• Probeer met Bootstrap bol.com website na te maken (layout en eventueel styling)

Opdracht vorige week

• Basis gebruiken om een nog een keer een eigen webshop te maken

JavaScript

Planning

• Terugblik vorige week (10 min)

• Wat is JavaScript? (3 min)

• Waarom JavaScript? (2 min)

• Aan de slag (60 min)

• Afsluiting (10 min)

Doel van vandaag

• Je weet wat JavaScript is

• Je kunt JavaScript gebruiken om een element te manipuleren

• Je kunt JavaScript gebruiken om interactie toe te voegen

Wat is JavaScript volgens jou?

Wat is JavaScript?

• Programmeertaal (JS)

• Draait voornamelijk in de webbrowser, maar ook daarbuiten (Node.js)

• Zorgt voor interactiviteit

• Zonder JS zouden websites statisch en levenloos aanvoelen

Waar kom ik JS tegen?

• Knoppen op websites

• Menu's die openklappen

• Online formulieren die controleren of de invoer geldig is

• Webshops, spelletjes en webapps (Discord, Netflix, Spotify)

• Vrijwel elke moderne website gebruikt JS

De rol van JS in web development

Wat kun je met JS?

• Veranderen van de HTML nadat deze is ingeladen

• Informatie opslaan in de local storage

• Data ophalen van een API

• Games bouwen

• Animaties maken

• en nog veel meer

JS buiten de browser

Je kunt JS ook gebruiken voor:

• Back-end development (Node.js)

• Mobile app development (React Native)

• Desktop apps (Electron)

• Games (Phaser)

Waarom zou je JS gebruiken?

• Meest gebruikte programmeertaal ter wereld

• Veel banen in (web) development

• Makkelijk te starten, veel mogelijkheden

• Je ziet meteen resultaat in de browser

• Je kunt zowel front-end als back-end ermee maken

bron: stackoverflow 2024

Voorbeeld JS

Aan de slag

• https://gitlab.com/roc-midden-nederland-devunit/kerstboom-javascript

Terugblik

• Je weet wat JavaScript is

• Je kunt JavaScript gebruiken om een element te manipuleren

• Je kunt JavaScript gebruiken om interactie toe te voegen

Bliksemronde

Waarvoor wordt JavaScript vooral

gebruikt in een webpagina?

A

Het bepalen van de opmaak

B

Het maken van interactieve onderdelen

C

Het opslaan van afbeeldingen

D

Het schrijven van HTML

Wat doet document.querySelector()?

A

Het verwijdert een HTML-element

B

Het start een JavaScript-event

C

Het maakt een nieuw element aan

D

Het zoekt één element op basis van een CSS-selector

Wanneer gebruik je addEventListener()?

A

Als je een knop of element een reactie wilt laten geven op een actie

B

 Als je JavaScript wilt starten in de browser

C

Als je een nieuwe knop wilt maken

D

Alleen als je een API gebruikt

Wat gebeurt er als je document.querySelector('.boom')

gebruikt?

A

Je selecteert alle elementen met class “boom”

B

Je selecteert het *eerste* element met class “boom”

C

Je maakt een nieuw element “boom”

D

Je verwijdert de class “boom”

Wat is een voorbeeld van DOM-manipulatie?

A

Het downloaden van een afbeelding

B

Een CSS-bestand aanpassen

C

De tekst van een <p>-element veranderen met JavaScript

D

Een HTML-bestand opslaan in VS Code