De Javascript programmabibliotheek (library) p5.js stelt ons een hele reeks functies ter beschikking om te tekenen in wat we hier metaforisch een "schets" noemen.
Maar we zijn niet beperkt tot het tekenen op een canvas.
We kunnen de hele pagina beschouwen als een schets, inclusief HTML5 objecten voor tekst, invoer, video, webcam en geluid.
De gemakkelijkste manier om te starten is met de p5.js web editor. Om het werk online op te slaan moeten we daar wel een account maken.
Als we een nieuwe schets starten in de web editor hebben we alles om p5.js te kunnen gebruiken on onze code.
Dan kunnen we deze stap dus overslaan.
Alle versies van p5.js zijn opgeslagen op een CDN (Content Delivery Network).
p5.min.js is de gecomprimeerde versie om sneller te laden.
We kunnen zo'n CDN link gebruiken om p5.js of p5.min.js te laden in de <head> tags van index.html.
Het belangrijkste verschil tussen p5.js en p5.min.js is dat de laatste "kleiner" gemaakt is om sneller te kunnen laden.
<head>
<meta charset="utf-8" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/latest/p5.min.js"></script>
</head>Of we kunnen het bestand gewoon downloaden naar de map met index.html.
<head>
<meta charset="utf-8" />
<script src="p5.min.js"></script>
</head>Als je browser een webpagina laadt, zal die de bronbestanden downloaden en interpreteren.
Op basis van een interne representatie zal je browser de zichtbare dingen op het scherm schikken, dingen voorlezen, ...
Zo'n interne representatie is een gestandaardiseerd model dat heet Document Object Model (DOM).
De <script> tags die in <body> staan (in plaats van in <head>) worden pas geladen als alle css en afbeeldingen en zo geladen zijn.
<!DOCTYPE html>
<head>
<meta charset="UTF-8">
<script src="ik-wordt-al-ingelezen-als-het-DOM-nog-niet-klaar-is.js"></script>
</head>
<body>
<script src="ik-wordt-pas-ingelezen-alles-geladen-is.js"></script>
<script>console.log("ik ook!");</script>
</body>In de Web Console kunnen we de code en de interne verwerking van een website onderzoeken. Het is ook de plek waar de browser ons waarschuwt of foutmeldingen geeft. We kunnen ook zelf berichten, waarschuwingen, of foutmeldingen in de console plaatsen met deze Javascript functies:
console.log('hallo, dit is een bericht.');
console.warn('pas op, waarschuwing!');
console.error('aiaiai fout!');Onderaan in de online editor vinden we de console. Klik op het balkje "console", het zou moeten uitschuiven.
Een ander verschil tussen p5.js en p5.min.js is dat p5.js in de console van de online editor wat meer behulpzame boodschappen geeft.
Ik (coach Bart) vind deze boodschappen lastig, vooral op een klein scherm, want als er een foutmelding is, staat die bovenaan en moet je steeds scrollen om die te zien.
Ik raad daarom toch aan om een link naar p5.min.js te gebruiken.
Op een PC of MAC heeft de browser heeft ook een Web Console die we kunnen gebruiken.
Het "ontwikkel gereedschap" van de browser kunnen we met F12 openen.
In dat paneel (of venster) kunnen we naar het console tabblad gaan.
- Mozilla Firefox Web Console
- Google Chrome Devtools
Met deze sneltoetsen kunnen we rechtstreeks de console openen:
Mac
Chrome ⌨️ Command+Option+J
Firefox ⌨️ Command+Option+K
Windows, Linux, Chrome OS
Chrome ⌨️ Control+Shift+J
Firefox ⌨️ Ctrl+Shift+K
Eén van de moeilijkste dingen wanneer je begint met programmeren is dat je grammaticaal zeer nauwkeurig moet zijn.
Het programma dat Javascript uitvoert (in dit geval een browser) weet niet altijd wat we bedoelen.
De plaats van leestekens is daarom belangrijk.
De Web Console geeft een foutmelding (bijvoorbeeld Uncaught SyntaxError: expected ..., got ...) wanneer er iets scheelt aan de syntax (grammatica).
Hou rekening met:
- hoofdletters
- het gebruik van een punt in een kommagetal
- gebalanceerde haakjes en aanhalingstekens: elk open haakje moet in de juiste volgorde weer gesloten worden
- gereserveerde woorden die je niet als variabele naam kan gebruiken
- ...
Hier zijn een paar pagina's in het Engels met meer uitleg. (We zullen deze links nog aanpassen.)
Er is een korte schrijfwijze voor een nieuwe functie, genaamd arrow syntax.
Deze dingen ...
let hallo = function () { console.log("hallo"); }
let beste = function (naam) { console.log("beste", naam); }
let hoe-ist = function (naam) { console.log("dag", naam); console.log("hoe is't?"); }
let formeel = function (titel, naam) { console.log("geachte", titel, naam); }... kunnen zo worden geschreven:
let hallo = () => console.log("hallo");
let beste = naam => console.log("beste" + naam);
let hoe-ist = naam => { console.log("dag", naam); console.log("hoe is't?"); }
let formeel = (titel, naam) => console.log("geachte", titel, naam);Merk op dat er bij "hoe-ist" meerdere commando's zijn waardoor ook in arrow syntax accolades nodig zijn.