JavaScript leren: Snelle cursus JavaScript met codevoorbeelden!

JavaScript leren programmeren is leuk en je krijgt de vaardigheden om websites interactief te maken. Dit artikel is het vervolg op “HTML leren” en “CSS leren”. Mocht je deze artikelen nog niet gelezen hebben, is het aan te raden om dat eerst te doen. In deze snelle cursus JavaScript gaan we namelijk de website verder uitbreiden met JavaScript. Deze website hebben we in de vorige artikelen opgezet met HTML en CSS. Eerst gaan we kijken hoe bepaalde basisonderdelen van JavaScript werken (Met JavaScript voorbeelden), wat je ermee kan doen en hoe je het beste JavaScript verder kan leren. Tot slot gaan we verder met de website die we al gemaakt hebben. We gaan daar JavaScript aan toevoegen. Aan het eind van dit artikel heb je een eenvoudige website gemaakt met HTML, CSS en JavaScript. Zo krijg je feeling met hoe deze talen werken ten opzichte van elkaar en je leert de talen zelf beter kennen. Lees lekker verder!

Ja, ik wil JavaScript leren met de beste JavaScript boeken!

Wat is JavaScript?

JavaScript is een scripttaal en vooral bedoeld om websites dynamischer te maken. Wat bedoelen we daar precies mee? HTML is voor de structuur, CSS is voor de presentatie en JavaScript zorgt voor het gedrag van een website. Stel dat je op je website een takenlijstje hebt staan en deze wil aanvullen. Dan moet je bijvoorbeeld een formuliertje invullen waarin je een taak zet en toevoegt aan een takenlijst. Door op een knop te drukken, voeg je de taak toe aan de takenlijst. JavaScript zorgt er als het ware voor dat de taak in een HTML element (Bijvoorbeeld een <li></li>) wordt gezet en toegevoegd wordt aan een <ul></ul>. <li></li> is een lijstitem die in een <ul></ul> (Ongeordende lijst) kan staan.

Een ander goed voorbeeld is het ophalen van de huidige datum. Stel dat je bezoekers van je website de mogelijkheid wil geven om de huidige datum te laten zien. Met JavaScript zou je dit kunnen doen. In HTML zou je bijvoorbeeld een knop kunnen maken en als de bezoeker op de knop drukt, kan JavaScript ervoor zorgen dat de huidige datum getoond wordt aan de bezoeker. Met alleen HTML en/of CSS zou je dit niet kunnen doen.

JavaScript zorgt dat er actie in een website komt. Dit maakt het veel leuker voor bezoekers en het zorgt ervoor dat handelingen van bezoekers makkelijker afgehandeld kunnen worden. Later in deze snelle JavaScript cursus krijg je JavaScript voorbeelden in code te zien.

JavaScript syntax

Net zoals elke programmeer- en scripttaal, heeft ook JavaScript zijn eigen syntax. Als je verder wil gaan met JavaScript leren, is het ook belangrijk om de syntax te kennen en te begrijpen. In de JavaScript voorbeelden ga je dat ook weer terug zien.

Hier gaan we enkele belangrijke elementen bespreken die horen bij de JavaScript syntax. In JavaScript is het niet verplicht om puntkomma’s te gebruiken achter elk statement (Instructie). In vele andere programmeertalen is dit wel verplicht. Echter is het wel aan te raden om puntkomma’s te gebruiken, dit oogt netter. De keus is echter aan jou.

JavaScript negeert onder andere tabs (Tab toets) en spaties. Hierdoor kan je zelf de code op een nette manier formatteren, zodat het er georganiseerd en leesbaar uitziet. Het betekent ook dat je het makkelijker ongeorganiseerd kan schrijven, maar dit is niet aan te raden uiteraard.

JavaScript is hoofdlettergevoelig. Bijvoorbeeld namen van variables moeten exact geschreven worden, zonder het gebruik van hoofdletters te vergeten, als die in de naam zitten. Dit geldt onder andere ook voor namen van functions en JavaScript keywords. Dit zijn bepaalde woorden die gereserveerd staan in JavaScript en al een functie hebben binnen de taal.

Commentaar geven bij code is belangrijk. In JavaScript is dit uiteraard ook mogelijk. De volgende 2 manieren is het meest gebruikelijk om commentaar te geven in JavaScript:

// Dit is commentaar op 1 regel
   
/*
Dit is commentaar
op meerdere regels
*/

In JavaScript voorbeelden zal je nog meer zien over de syntax van JavaScript.

JavaScript voorbeelden

In deze snelle JavaScript cursus ga je niet alleen maar JavaScript leren door tekst te lezen zonder goede voorbeelden. Om goed te worden in JavaScript programmeren, heb je goede voorbeelden nodig en zelf veel oefenen is ook belangrijk. Later in het artikel, als we een JavaScript bestand hebben aangemaakt en er naartoe hebben gerefereerd in het HTML document, kan je met deze JavaScript voorbeelden ook oefenen op je eigen website.

Ja, ik wil JavaScript leren met de beste JavaScript boeken!

Hello world!

Bij de meeste tutorials/cursussen van programmeertalen, begin je met een “Hello world!” te schrijven naar een scherm of een console. In JavaScript kan je een “Hello world!” naar de console sturen om te kijken of er op de juiste manier wordt gerefereerd/verwezen naar het JavaScript bestand, in het HTML document. Deze test gaan we ook zo doen bij het uitbouwen van de website. De “Hello world!” schrijven naar de console in JavaScript ziet er zo uit:

console.log("Hello world!");

Variable (Variabele)

Net zoals in andere script- en programmeertalen, worden variables (Variabelen) gebruikt om waardes te bewaren in het geheugen. Bij het JavaScript programmeren gebruik je var als keyword om de variable te declareren. Met = kan je een waarde toekennen aan de variable. De variable heeft tevens een naam. Een variable in JavaScript kan zowel letters als cijfers bevatten. Hieronder een voorbeeld:

var naam; 
naam = "Henk";

var leeftijd;
leeftijd = 32;

De variable naam wordt toegewezen aan de waarde “Henk” en de variable leeftijd wordt toegewezen aan de waarde 32.

Getallen

Getallen kunnen geschreven worden zonder of met punt. In Nederland is het gebruikelijk om een komma te gebruiken in een getal, maar in JavaScript en vele andere script- en programmeertalen, wordt er met een punt (.) gewerkt. Hieronder een voorbeeld:

var nummer1 = 30; 

var nummer2 = 30.5;

Beslissingen

Beslissingen nemen is belangrijk voor een website. In JavaScript je kan dit ook doen. Stel dat je een website hebt met content voor 18+ bezoekers. Dan moet je ervoor zorgen dat bezoekers met een leeftijd van onder de 18 jaar niet de content kunnen zien. JavaScript is geschikt om dit soort beslissingen te kunnen nemen en de content niet beschikbaar te kunnen stellen voor bezoekers onder de 18 jaar. Dit kan met een if-else statement. Hieronder een voorbeeld:

if (leeftijdBezoeker < 18) {
  content = "Niet toegestaan";
} else {
  content = "Toegestaan";
}

Als de bezoeker een leeftijd heeft van onder de 18 jaar (< betekent kleiner dan), dan is het niet toegestaan om de content te bekijken. Als de bezoeker geen leeftijd heeft van onder de 18 jaar (else), dan is het wel toegestaan om de content te bekijken.

HTML element content veranderen

Met JavaScript kan je onder andere de content van HTML elementen bewerken. Hieronder een voorbeeld van een <p id="par1">Paragraaf 1</p> die in JavaScript een andere waarde krijgt:

document.getElementById("par1").innerHTML = "Andere tekst";

document verwijst naar het HTML document. Op document kan je de function getElementById() aanroepen. Tussen de haakjes zet je het id neer van het HTML element dat je wil aanpassen. In dit geval is dat “par1”. Tot slot gebruik je de property (Eigenschap) innerHTML om de content van <p> met “par1” als id te veranderen. Als je dit zou bekijken in de browser, dan heeft <p> “Andere tekst” als waarde en is dit ook op het scherm te zien. Probeer het eens uit op je eigen website die we zo verder gaan uitbouwen met JavaScript.

Overig

In deze snelle JavaScript cursus gaan we niet alle JavaScript voorbeelden langs die er bestaan. Anders wordt het een oneindig artikel. Als je verder wil gaan met JavaScript leren, is het handig om ook de basisonderdelen van het programmeren goed te kennen. Deze staan duidelijk uitgelegd in het e-book “Snelcursus Leren Programmeren”. Ga zelf ook eens op onderzoek uit wat er allemaal mogelijk is met JavaScript en oefen ermee. JavaScript leren programmeren kan je doen met boeken en cursussen en door zelf veel te oefenen.

JavaScript toevoegen

Om JavaScript code daadwerkelijk te kunnen uitvoeren, moet het in een HTML document staan. Alle JavaScript code kan in het HTML document zelf staan of je kan een verwijzing maken naar een apart JavaScript bestand.

Een extern JavaScript bestand 

Dit is de meeste nette en overzichtelijke manier. Je kan een verwijzing naar een JavaScript bestand zowel in de <head> als de <body> van een HTML document zetten. Het beste is om de verwijzing vlak voor </body> te zetten. De browser leest een HTML document van boven naar beneden. Als je een verwijzing in de <head> doet en het JavaScript bestand kan niet goed geladen worden, dan is gelijk heel de pagina geblokkeerd. Als je de verwijzing vlak voor de </body> zet, dan worden eerst alle pagina elementen geladen en dan pas de JavaScript code. Dit voorkomt dat het laden van de pagina geblokkeerd kan worden. Hieronder een voorbeeld van een verwijzing naar een extern JavaScript bestand:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Verwijzing naar extern JavaScript bestand in de body</title>
</head>

<body>
    <h1>Verwijzing naar extern JavaScript bestand</h1>
    <p>De verwijzing staat vlak voor de body in het script element.</p>

    <script src="index.js"></script>
</body>

</html>

Zoals je ziet, staat vlak voor de <body> de verwijzing naar het JavaScript bestand in een <script> element. Door de src kan je het pad neerzetten dat wijst naar de plek waar het JavaScript bestand is opgeslagen.

JavaScript intern toevoegen in HTML document

Net zoals bij CSS, kan je ook JavaScript intern toevoegen aan een HTML document. Het is echter niet aan te raden. Het HTML bestand kan daardoor heel groot worden en onoverzichtelijk. Hieronder een voorbeeld:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>JavaScript intern toevoegen</title>
</head>

<body>
    <h1>JavaScript intern toevoegen</h1>
    <p id="par1">Het toevoegen gebeurt in een script element vlak voor de sluiting van de body.</p>

    <script>
        document.getElementById("par1").innerHTML = "Andere tekst";
    </script>
</body>

</html>

In plaats van een verwijzing te maken in een <script> element met het src attribuut naar een extern JavaScript bestand, kan je ook gewoon JavaScript code tussen de openings- en sluitingstag (<script></script>) zetten.

Wat is ECMAScript?

ECMAScript is de standaard voor scripttalen. JavaScript is gebaseerd op ECMAScript. JavaScript implementeert ECMAScript en bouwt daarop verder. ES is de afkorting voor ECMAScript. De laatste versie is op het moment van schrijven ECMAScript 2020. Echter wordt deze versie niet ondersteund in alle browsers. ES5 wordt wel volledig ondersteund.

Als je verder wil gaan met JavaScript programmeren, is het wel interessant om hier ook wat over te lezen. Ga eens wat meer op onderzoek uit.

Waarom is JavaScript eigenlijk ontstaan?

Een man genaamd Brendan Eich heeft JavaScript ontwikkeld. Netscape was een bedrijf dat als één van de eerste een webbrowser had ontwikkeld. In 1995 zochten ze iemand die een programmeertaal voor deze browser kon maken. Met Brendan Eich vonden ze daar de geschikte man voor. In datzelfde jaar, in 1995, was JavaScript toegevoegd aan de Netscape browser. Het heette eerst Mocha, daarna LiveScript en later werd het JavaScript.

Netscape heeft JavaScript ontwikkeld om elke website dynamisch en interactief te kunnen maken. Met HTML had/heb je die mogelijkheden niet en blijft alles statisch. Tegenwoordig is JavaScript niet meer weg te denken uit de web development wereld.

Ja, ik wil JavaScript leren met de beste JavaScript boeken!

JavaScript leren: Wat kan je ermee?

JavaScript is vooral bedoeld voor het interactief maken van websites. Maar tegenwoordig kan je meer doen met JavaScript. Net zoals met HTML en CSS, kan je met JavaScript ook apps interactief maken. PhoneGap is hier een voorbeeld van.

Veel grote web frameworks zijn gebaseerd op JavaScript, zoals Angular en React. Hier kan je mee gaan werken als je verder gaat met JavaScript leren en het meer onder de knie krijgt. Met TypeScript kan je onder andere games maken in de browser. TypeScript kan je zien als een aanvulling bovenop JavaScript.

Naast client side, kan je met Node.js ook server side programmeren. In het Node.js platform kan je met JavaScript server side programmeren. Oorspronkelijk is JavaScript bedoeld voor de client, maar Node.js maakt het mogelijk om JavaScript code voor een server te schrijven.

De mogelijkheden met JavaScript zijn groot. Wie weet wat er in de toekomst nog allemaal meer mogelijk gaat zijn?

JavaScript leren: Wat zijn de beste leermethodes?

Deze snelle JavaScript cursus leert je wel begrijpen hoe JavaScript een beetje in elkaar zit, maar je bent er nog lang niet. Een tip is om ook mee te doen met de website die we gaan uitbouwen in het volgende hoofdstuk met JavaScript. Hiermee leer je de verhoudingen tussen HTML, CSS en JavaScript beter begrijpen.

JavaScript programmeren is goed te leren, maar je moet er wel tijd en energie in gaan steken. Een goede leermethode is om JavaScript te leren met de beste JavaScript boeken. Een andere goede leermethode is om de beste videocursussen over JavaScript voor beginners te volgen op Pluralsight.

Belangrijk is om na de JavaScript boeken en/of cursussen niet stil te zitten en door te blijven leren. De website die we in het volgende hoofdstuk gaan uitbreiden met JavaScript kan je zelf ook nog verder doorontwikkelen als oefenproject.

Vervolg website maken met HTML5, CSS en JavaScript

Laten we nu verder gaan met de website die we al hebben opgezet in “HTML leren” en “CSS leren”. Eerst gaan we er een extra map bij maken, genaamd “JS”. In deze map zetten we het JavaScript bestand dat we zo gaan aanmaken. In Notepad++ gaan we een nieuw bestand aanmaken, genaamd “index.js”. Let er ook goed op dat je de “.js” extensie achter de naam van het bestand zet. Zo is het een echt JavaScript bestand. Sla dit bestand op in de “JS” map. Als je niet goed weet hoe je een nieuw bestand aanmaakt in Notepad++, verwijs ik je naar het artikel “CSS leren”. Hierin staat hoe je een nieuw CSS bestand aanmaakt. Het aanmaken van een nieuw JavaScript bestand komt op hetzelfde neer, maar dan zet je een “.js” extensie achter de naam van het bestand, in plaats van een “.css” extensie.

Nu gaan we in het HTML document verwijzen naar het JavaScript bestand. Dit kan je doen op de volgende manier:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ProgrammeerPlaats website</title>
    <link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>

<body>
    <h1>Korte beschrijving over ProgrammeerPlaats</h1>
    <p class="par1">ProgrammeerPlaats is een leuke website waarop je kan leren programmeren.</p>
    <p>Er zijn educatieve artikelen en video's voor de liefhebbers.</p> 
  
    <img id="img1" src="Logo ProgrammeerPlaats.png"> 
  
    <script src="JS/index.js"></script>
</body>

</html>

Vlak voor de </body> gebruik je een <script> tag met daarin een src attribuut. In het src attribuut beschrijf je het pad naar het JavaScript bestand. Omdat het JavaScript bestand in de “JS” map staat, begin je met JS en achter de / zet je de naam van het bestand met een “.js” extensie.

Laten we nu gaan testen of het werkt. Zet de volgende code in je JavaScript bestand:

console.log("Hello world!");

Ga naar de browser en naar de website die je hebt gemaakt. Daarna rechtermuisklik > Inspecteren > Console. Als het goed is moet je nu “Hello world” zien staan in de console. Zo niet, dan is er wat misgegaan. Lees dan nog even terug en kijk of je wat verkeerd hebt gedaan. Om dingen te testen in JavaScript is het handig om de console te gebruiken in de browser.

Nu gaan we eindelijk wat JavaScript code schrijven. We houden het simpel, zodat je op een eenvoudige manier wat feeling krijgt met JavaScript. Stel dat we bezoekers van onze website welkom willen heten. Daarbij letten we ook op het weer buiten. In het welkomstbericht spelen we in op het huidige weer. Normaal zou je het huidige weer kunnen ophalen met een API, maar wij zetten het gewoon als voorbeeld in een variable (variabele).

Het leuke is dat je in HTML ook je eigen tags (Elementen) kan maken. We gaan ons eigen <welkom> element maken. Dat ziet er zo uit:

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>ProgrammeerPlaats website</title>
    <link rel="stylesheet" type="text/css" href="CSS/index.css">
</head>

<body>
    <welkom id="welkom"></welkom>

    <h1>Korte beschrijving over ProgrammeerPlaats</h1>
    <p class="par1">ProgrammeerPlaats is een leuke website waarop je kan leren programmeren.</p>
    <p>Er zijn educatieve artikelen en video's voor de liefhebbers.</p> 
  
    <img id="img1" src="Logo ProgrammeerPlaats.png"> 
  
    <script src="JS/index.js"></script>
</body>

</html>

In regel 11 zie je dat we nu onze eigen HTML tag hebben gemaakt. Hierin zetten we een welkomstbericht aan de bezoekers en we houden in dit bericht rekening met het weer buiten. De HTML tag heeft ook een id “welkom”. In JavaScript gaan we nu het weer controleren en op basis daarvan een welkomstbericht sturen. Dat komt er zo uit te zien:

var weer = "zonnig"

if(weer == "zonnig") {
  document.getElementById("welkom").innerHTML = 
  "Welkom! Denk eraan om na het bezoeken van deze website ook nog even naar buiten te gaan op deze zonnige dag :)";
} else {
  document.getElementById("welkom").innerHTML = 
  "Welkom! Het is niet zonnig buiten. Een goede reden om langer op deze website te zitten :)";
}

We hebben een variable aangemaakt weer met een waarde “zonnig”. In het if-else statement checken we of het weer zonnig is of niet. Als het weer zonnig is, dan zetten we een welkomstbericht in de <welkom> tag met het id “welkom”, dat het weer buiten zonnig is en de bezoeker ook nog even van de zon moet genieten. Als het niet zonnig is buiten, geven we een ander welkomstbericht aan de bezoeker.

Als je deze aanpassingen zelf doorvoert, zal je in de browser op de website zien wat voor welkomstbericht je krijgt. Probeer eens de waarde van de variable te vervangen en kijk wat er dan uitkomt. Het is zeer leerzaam om de website verder uit te bouwen, zowel op het gebied van HTML, CSS en JavaScript. Hier kan je veel van leren.

Hoe nu verder?

Belangrijk is om het niet hierbij te laten. Anders zakt je kennis weer weg. Deze artikelen over HTML, CSS en JavaScript zijn gericht op de basis. Het is de bedoeling om nog verder te leren. Je kan gelijk doorpakken door de beste JavaScript boeken te lezen of de beste JavaScript videocursussen op Pluralsight te volgen.

Er zijn ook boeken op Bol.com die je HTML, CSS en JavaScript leren. Interessant is om daar naar te kijken. In “Pluralsight review en ervaringen” lees je meer over het geweldige platform Pluralsight. Je kan het platform zelfs 10 dagen helemaal gratis uitproberen.

Blijf na de boeken en/of cursussen zeker niet stilzitten en ga door met leren. Bouw bijvoorbeeld de website verder uit die we hebben gemaakt of ga met je eigen website aan de slag.

Heb je nog vragen en/of opmerkingen? Laat dan hieronder een reactie achter of neem contact op.