Javascript – 1.

Aanmaken
projectfile
Opdracht1.1

Maak in de verkenner op je U-schijf, usb-stick of op je laptop een

mapje. Noem deze bijvoorbeeld javascript.

In dit mapje gaan we nog een verdeling maken. We noemen dit deel1, deel2, deel3
enz. We beginnen met deel1. Dubbelklik op het mapje javascript en maak een mapje
aan deel1.

Onthoud waar dit mapje staat. Op deze plek gaan we alle bestanden zetten.

Visual Studio Code installeren

Om Visual Studio Code te installeren download je eerst de installer op de officiële

site: Visual Studio Code downloaden.
De installatie verloop via een eenvoudige wizard, waarbij je enkel bij de laatste stap
even moet stilstaan.
Door bovenstaande opties aan te vinken krijg je een snellere toegang tot het openen
van Visual Studio Code via bijvoorbeeld Windows Verkenner. De desktop icon op je
bureaublad vind ik handig, die vink ik ook aan.
Interface
De interface van Visual Studio Code is opzettelijk sober gehouden. Aan de linkerkant
vind je de hoofdonderdelen van de editor.

Voorlopig hoef je je alleen van het eerste en laatste icoontje iets aan te trekken. Het

eerste toont de file explorer voor de geopende projectmap. Langs deze weg
kan je bestanden openen, aanmaken, hernoemen en verwijderen, zoals je dit in
Windows Verkenner of de Finder app op Mac zou doen.
Als je nog geen projectmap geopend hebt kan je dit alsnog doen via de grote knop in
de file explorer of door te kiezen voor file  open folder
Open nu het mapje deel1 in javascript die je in de eerste stap hebt aangemaakt.

Opdracht 1.2

Extensies installeren
Buiten de standaardfunctionaliteit die Visual Studio Code biedt kan de editor ook
uitgebreid worden met verschillende extensies. Deze extensies zijn gratis. Je kan

extensies installeren via het laatste icoontje uit het linker menu .
Voor een beginnende ontwikkelaar zijn de volgende twee extensies zeer handig:
 Live server: geeft je de mogelijkheid HTML-bestanden rechtstreeks in een
browser te openen en vernieuwt de pagina automatisch bij veranderingen in
het bronbestand. (Belangrijk dat je deze installeert!)
 Material Icon Theme: geeft ieder bestand een icoontje zodat je deze snel
kunt herkennen.
 Monakai++: geeft je code kleurtjes zodat je makkelijk typefouten herkent.
(Niet verplicht)
 Beautify: formatteert je code om ze overzichtelijk te houden. (Niet verplicht)
Zoek via de zoekbalk in het extensies onderdeel naar deze twee extensies om ze te
installeren via de kleine install knop.

Opdracht 1.3

Extensies gebruiken
Live server
Om de extensie Live Server te gebruiken kan je in eender welk HTML-bestand via
een rechtermuisklik "Open in Live Server" kiezen. Dit opent automatisch je
standaardbrowser.

Beautify
Om de extensie Beautify haar werk te laten doen gebruik je in een HTML, CSS of
Javascript document de sneltoets SHIFT + ALT + F in Windows of SHIFT + Option +
F op Mac.

Opdracht 1.4

Een eerste HTML-document

HTML-documenten
Een HTML-document is niets meer dan een tekstdocument met de extensie .html.
Een HTML-document kan vervolgens in een browser zoals Google Chrome, Safari of
Mozilla Firefox geopend worden. De browser interpreteert vervolgens de geschreven
HTML-code om inhoud op het scherm te tonen.

Open je projectmap met de naam deel1 via de file explorer.

Je krijgt vervolgens een lege projectmap te zien met de standaard lay-out van Visual
Studio.
Maak wanneer de projectmap geopend is een eerste HTML-document aan met de
naam index.html. Je kan dit doen via een rechtermuisklik het blauwe kader en te
kiezen voor New File. Vergeet de extensie niet zelf toe te voegen aan de
bestandsnaam! Dus .html typen na index
Het nieuwe bestand wordt geopend aan de rechterkant van Visual Studio Code. Laat
je niet afschrikken door een leeg blad, het zal snel gevuld worden!
Om snel code te genereren via Visual Studio Code kan je gebruik maken
van Emmet, een ingebouwd systeem voor het sneller typen van code. Om
bijvoorbeeld een compleet basisskelet automatisch te genereren typ je
een! Gevolgd door de Enter of Tab toets.
Het resultaat is:

De methode die de uitlegvideo gebruikte was door het typen van de letters doc
gevolgd door de Tab toets Dat mag uiteraard ook. Het resultaat is vergelijkbaar.
Je moet van de bovenstaande code slechts drie elementen kennen. Je hebt deze in
de html/css cursus geleerd: <html>, <head> en <body>.
<html>
HTML is het root-element van de elementen-boom. Alle andere HTML-elementen
moeten kindelementen (child elements in het Engels) van het <html> element zijn.
Kindelementen zijn elementen die genest zijn binnen andere elementen. Met
andere woorden, elementen die tussen de openings- en sluitingstag van andere
elementen staan. Men formatteert code zo dat kindelementen één tab verder naar
rechts staan om de structuur duidelijk te maken.
<head>
Binnen het <head> element bevinden zich elementen die niets tonen aan de
gebruiker, maar wel informatie verschaffen aan de browser. Het skelet bevat al de
nodige kindelementen van het <head> element. Je wil wel de inhoud van
het <title> element aanpassen naar de titel van jouw pagina. Deze titel ziet men
terug als titel van het tabblad en als standaardnaam wanneer iemand jouw pagina
aan de favorieten wil toevoegen.
Opdracht: pas in basisskelet.html de titel aan:

<body>
Binnen het <body> element komen alle elementen die de gebruiker ziet en de
structuur bepalen van hetgeen de browser op het scherm tekent.
Om de pagina af te maken voeg je een kop <h1> en alinea/paragraaf <p> toe aan
het bestand index.html:

Opdracht 1.5

Testen op een live server

Om snel even je nieuw gemaakt HTML-document te testen kan je als volgt tewerk
gaan:
 Open het document in de browser via Live Server (rechtermuisklik -> Open
with Live Server)
De browser zou automatisch moeten openen en jouw pagina moeten tonen!

Beginnen met Javascript

Wat is Javascript
Javascript is een scripting taal die kan worden uitgevoerd binnen een browser. Met
Javascript kan je functionaliteit toevoegen aan een website, zoals:
 Interactie met de gebruiker, zoals het opvangen van een klik, dubbelklik,
muisbewegingen, toetsaanslagen, ...
 Dynamische aanpassingen aan inhoud, zoals berekeningen,
gebruikersprofielen, ...
 Informatie opvragen van externe bronnen, zoals het weerbericht,
geografische coördinaten, wisselkoers, ...
 Invulformulieren nakijken op fouten en de gebruiker hiervan op de hoogte
brengen
 Nog veel meer!
Javascript is dus de ontbrekende schakel in het drieluik voor webdesign, samen met
HTML (structuur) en CSS (opmaak).
Javascript als taal
Javascript valt als scripting taal het kan draaien binnen een webbrowser. Je hoeft
net als HTML en CSS niet iets te installeren om het werkend te krijgen tenzij je in
een webbrowser zegt dat je geen javascript wil gebruiken. Het kon ook werken
buiten een webbrowser. Via Node.js kun je een javascript engine apart installeren.
Je kunt dan via javascript zonder een webbrowser drones aansturen oid. Dit gaan
we in deze cursus niet doen.
Scripts toevoegen
We schrijven Javascript in Javascript-bestanden. Concreet zijn dit (in de meeste
gevallen) bestanden met de extensie .js. Ze worden, net zoals .css bestanden,
gelinkt aan een HTML-pagina door middel van een element. Voor Javascript
bestanden is dit het <script> element. Het kan zowel in de <head> sectie als
de <body> sectie van een pagina worden opgenomen. Je kunt het beste het
<script> element op onderaan de <body> sectie zetten, onder alle andere HTML-
code. De syntax ziet er als volgt uit:
<script src="pad_naar_bestand.js"></script>
Let erop dat het <script> element een sluitingstag vereist. Je kan binnen de twee
tags ook Javascript code schrijven, maar het is een beter idee dit in een
apart .js bestand te doen.

Opdracht 1.5

Je eerste code
Maak een mapje noem dit mapje scripts (zie onderstaand kader 1)

Zet in het mapje scripts een nieuw bestand noem het hallowereld.js Vergeet de
extensie niet zelf toe te voegen aan de bestandsnaam! Dus .js typen na hallowereld
De meest eenvoudige manier om kennis te maken met Javascript op een HTML-
pagina is door via Javascript een boodschap op het scherm te tonen. Maak een
HTML-pagina met een normaal skelet als basis en voeg net voor het einde van
de <body> sectie de volgende regel toe:

Voeg in het bestandje hallowereld.js de volgende code toe:

Kies voor File  Save All (zowel het index.html als de hallowereld.js bestand
worden nu gesaved.)
Tip: je kunt altijd zien of er nog bestanden zijn die je niet hebt gesaved aan het getal

bij het explorer icoontje:

Test het resultaat uit in de browser door de HTML-pagina te openen. Je zou de
boodschap onder op het scherm moeten zien!

-------------------- Een stukje theorie ------------------------

Javascript opdrachten
Javascript code is in principe niet meer dan een opeenvolging van opdrachten, ook
wel statements genoemd. In het Engels heet het functions. Opdrachten worden
van boven naar beneden doorlopen. Wanneer er een fout optreedt in een script stopt
het script met de uitvoer van opdrachten. De meeste opdrachten doen iets. Ze geven
de browser een taak die moet worden uitgevoerd, zoals iets veranderen aan de
pagina, een geluid afspelen, data bewaren, ...
Je hebt de volgende opdracht al gezien:

De opdracht vraagt aan de browser om een boodschap in de <body> sectie van het
document te schrijven. Je merkt dat de opdracht bestaat uit meerdere delen:
1. document
2. write()
3. "Hallo Wereld"
4. Een puntkomma ; om de opdracht af te sluiten.
Opdrachten zijn weliswaar geschreven in Javascript, maar ze kunnen ook vertaald
worden naar het Nederlands door logisch na te denken. De bovenstaande drie
onderdelen die de opdracht vormen kunnen we als volgt uitspreken:
Schrijf (write) de tekst "Hallo Wereld" op het document
Functies uitvoeren
write() is een voorbeeld van de uitvoer van een functie. Een functie neemt meestal
de vorm aan van een werkwoord, steeds gevolgd door ronde haken (). Tussen de
haken kan optioneel informatie geplaatst worden die de functie nodig heeft om de
taak uit te voeren. De functie write() heeft bijvoorbeeld als extra informatie de tekst
nodig die je in het document wil plaatsen.
De functie write() bestaat enkel als onderdeel van het object document.

Stel dat ik de code write(“Hallo Wereld”); zou schrijven in plaats van

document.write("Hallo Wereld!"); Dan zou ik een foutmelding krijgen:

Write is een functie van het object document. Ik mag deze niet los gebruiken. Een
functie die bij een object hoort heet, zoals gezegd, een methode. Toch zullen we
methode en functie door elkaar gaan gebruiken, maar er is dus een verschil
Strings
Bij het schrijven van tekst in Javascript code plaats je de tekst steeds tussen
aanhalingstekens "". Men noemt dit een string. De reden voor deze schrijfwijze is
simpel: anders weet de browser niet of de tekst moet geïnterpreteerd worden als
code of als platte tekst. Van deze regel wordt nooit afgeweken. Ze is voor beginners
vaak de oorzaak van vele fouten! Plaats dus steeds je aanhalingstekens bij een
string! Het maakt niet uit of je dubbelquotes gebruikt of enkelquotes. Met andere
woorden:

Geeft hetzelfde resultaat. Let wel op dat als je opent met dubbelquotes je ook moet
sluiten met dubbelquotes en andersom.
Commentaar
Je kan in Javascript net zoals in HTML en CSS ook commentaar aan je code
toevoegen. Voor een enkele lijn commentaar kan je dit doen via een dubbele
schuine streep //. Ze mag boven, onder of zelfs naast een opdracht geschreven
worden.

Of je kunt het ook naast je code schrijven

Als je meerdere regels commentaar wil schrijven zonder daarvoor elke regel te
beginnen met een // kan je een commentaarblok opstellen door middel van /* om te
openen en */ om te sluiten:

Je ziet doorgaans aan de kleurtjes in je code-editor dat tekst als commentaar wordt
gezien. In bovenstaand voorbeeld groen.
Werken met de console
In vele gevallen bij het schrijven van Javascript code is het einddoel iets veranderen
aan de inhoud van een pagina of feedback geven aan een gebruiker. In sommige
gevallen betekent dit dat je meerdere regels code zal schrijven voordat je het doel
bereikt en het script afrondt. Tijdens de uitvoer van de voorbereidende regels heb je
dus standaard geen oog op wat het script allemaal doet en of alles wel naar behoren
werkt. Browsers bieden een oplossing door middel van een console.
Vergelijk het met het oplossen van een vraagstuk op papier waar een opdrachtgever
jou vraagt het resultaat uit te werken. Waarschijnlijk ga je op papier eerst met
tussenstappen werken, zoals het noteren van gegevens en de vraag en het
stapsgewijs oplossen van één of meer vergelijkingen met tussenstappen. De
opdrachtgever is echter enkel geïnteresseerd in het eindresultaat, maar voor jezelf
schrijf je de extra stappen op.
Bij een wiskunde som zijn de tussenstappen vaak ook belangrijk en is niet alleen het
eindantwoord belangrijk. Mocht je fouten maken dan kan jij of de docent precies zien
waar het is misgegaan. Vergelijk de tussenstappen met de console. Je ziet aan de
tussenstappen waar je fouten hebt gemaakt en op welke plek je het script moet
aanpassen.
Dus de taak van de console van de browser: het registreren van boodschappen die
enkel bedoeld zijn voor jou als ontwikkelaar tijdens het testen van je script. Je
verwijdert ze vaak als je de website in productie ofwel ‘online’ zet.
Je krijgt toegang tot de console van de browser via de ontwikkeltools die in elke
browser zijn ingebouwd. Je kan ze zoeken langs het menu van de browser of via de
sneltoetsen F12 of Ctrl + Shift + I.

Output naar console

Om iets in de console te schrijven gebruik je de opdracht console.log(). Anders
gezegd: de methode log() van het object console staat je toe om tekst of andere
waardes te schrijven in de console. De waarde die als output wordt weergegeven
komt tussen de ronde haken van de methode te staan.

Met als resultaat in je browser (als je de development tools hebt geopend met F12 of
of Ctrl + Shift + I:

-------------------- Einde theorie ------------------------

Opdracht 1.6

 Schrijf een boodschap naar de console

 Voeg een commentaar regel toe