Grote kans dat u er hier of daar wel eens wat over gehoord hebt, al was het maar in de kleine lettertjes van een website. Maar wat is JavaScript nou? In mijn Handboek JavaScript & jQuery, 4e editie geef ik er antwoord op. En leer u om er zelf mee aan de slag te gaan!

Dus u wilt websites verrijken met interactie, animaties en intelligentie? Of gewoon begrijpen wat er aan geheimzinnige code ‘achter’ veel websites hangt? Welkom bij JavaScript! HTML is al dertig jaar de standaard voor het maken van websites. HTML kan echter niet alles. In HTML wordt alleen de structuur van pagina’s beschreven. JavaScript is de aanvullende programmeertaal om HTML interactief te maken. Het is de populairste programmeertaal op internet. Elke browser heeft een ingebouwde JavaScript-motor, waardoor moderne webapps mogelijk worden. JavaScript staat daarmee aan de basis van elke techniek die de moderne webdeveloper moet kennen. Of u later nu aan de slag gaat met Angular, webapps gaat maken met Vue of React: zonder JavaScript bent u nergens. Dit inleidende hoofdstuk toont de algemene kenmerken van JavaScript en laat zien wat u nodig hebt om met JavaScript aan de slag te gaan. Natuurlijk schrijft u alvast een eerste JavaScript voor snel resultaat.

In dit hoofdstuk:

• Een korte geschiedenis van JavaScript.
• Waarvoor wordt JavaScript gebruikt?
• Belangrijke begrippen die u moet kennen bij het werken met JavaScript. Welke tools hebt u nodig bij het programmeren?
• Hoe JavaScript en HTML gecombineerd worden in webapps.
• Een eerste script schrijven en de tags .
• Kennismaken met JavaScript-debugging.
• Een korte geschiedenis van JavaScript

Brendan Eich

JavaScript is oorspronkelijk in 1995 ontwikkeld door Brendan Eich, die bij Netscape werkte. Netscape is het bedrijf dat een van de oerbrowsers voor internet maakte, Netscape Navigator. Ook toen al was JavaScript bedoeld als uitbreiding van HTML om meer interactiviteit op webpagina’s mogelijk te maken. De combinatie van HTML en JavaScript stond destijds bekend onder de naam Dynamic HTML (DHTML).

De browsers uit die tijd (Internet Explorer 4 en Netscape 4) boden ondersteuning voor de combinatie van HTML en JavaScript in webpagina’s. Ondertussen zijn we natuurlijk vele browserversies verder. JavaScript is uitgegroeid tot een van de belangrijkste pijlers binnen de browser en in moderne webapplicaties (‘webapps’). Zonder JavaScript zouden geen Facebook, Instagram, Gmail, e-commerce of internetbankieren bestaan. Alle browsers (Microsoft Edge, Mozilla Firefox, Google Chrome, Apple Safari enzovoort) kunnen JavaScript automatisch uitvoeren.

ECMAScript, JavaScript en versienummers

In de loop der jaren is het versienummer van JavaScript steeds licht opgehoogd. Eerst liep het versienummer omhoog met het verschijnen van een nieuwe browserversie. Nu is de ontwikkeling van JavaScript losgekoppeld van nieuwe versies van de browser. JavaScript is inmiddels omgevormd tot een officiële, genormeerde en gestandaardiseerde programmeertaal. Dit is gedaan door de structuur en inhoud van de taal te laten goedkeuren en standaardiseren door de organisatie European Computer Manufacturers Association (ECMA). Hiermee is de ontwikkeling van JavaScript nu in handen van een onafhankelijk instituut en niet meer van één browserfabrikant.

Vroeger spraken we dus van JavaScript 1.0, 1.5 enzovoort. Tegenwoordig wordt gesproken van ECMAScript 5 (2009), of ECMAScript 6 uit 2015 (vaak afgekort tot ES6).

In juni van elk jaar vind een congres plaats waar wordt besloten welke nieuwe onderdelen worden verheven tot de JavaScript-standaard. We kennen daarom ES2017, ES2018 enzovoort. De verschillen tussen deze versies zijn voor gevorderde programmeurs belangrijk, maar niet als u juist kennismaakt met JavaScript. Alle code in dit boek is geschikt voor moderne versies van JavaScript.

🖋️Wat doet ECMA?
ECMA heeft tot taak technische standaarden te publiceren en hierop toe te zien. ECMA houdt zich niet alleen bezig met JavaScript, maar ook met andere computergerelateerde standaarden. Denk aan het bestandsformaat voor cd-roms, de specificaties van de programmeertaal C# en het bestandsformaat Office Open XML. Wilt u hier meer over weten, bezoek dan www.ecma-international.org.

Eigenlijk moeten we dus spreken van ECMAScript. Maar voor het gemak heeft iedereen het altijd gewoon over JavaScript. Dat doen we ook in dit boek.

Waarvoor wordt JavaScript gebruikt?

We hebben al globaal aangegeven dat JavaScript wordt gebruikt om gedrag of interactie aan webpagina’s toe te voegen. Maar wat wordt daar dan precies mee bedoeld? Denk bijvoorbeeld aan de volgende toepassingen. Er zijn er nog veel meer, maar dit is alvast een begin:

• Formuliervalidatie JavaScript is erg geschikt om de ingevulde gegevens in een webformulier op een pagina te controleren voordat het formulier wordt verzonden. Omdat deze controle op de computer van de gebruiker plaatsvindt, gaat dit veel sneller dan controle op de webserver na het versturen. Door het gebruik van JavaScript is dus geen roundtrip nodig naar de server en kan via een lokale melding direct worden aangegeven dat iemand bijvoorbeeld een ongeldig e-mailadres heeft ingevuld. De Engelstalige term hiervoor die u op internet ook vaak tegenkomt is client-sided validation.

• Single Page Applications Moderne frameworks zoals React, Vue en Angular gebruiken het principe van Single Page Applications om webapps te maken. Dit betekent dat in de browser in principe maar één pagina wordt geladen en dat delen van de pagina door JavaScript ververst worden, zonder dat daarvoor een complete refresh van de pagina nodig is. Zonder JavaScript zouden dergelijke frameworks niet bestaan.

• Uitrolmenu’s en afbeeldingen Met JavaScript kunnen menu’s en afbeeldingen tijdens het gebruik van de pagina worden vervangen. Dit kan bijvoorbeeld van pas komen bij fotocarrousels of uitklapmenu’s.

• Aanpassingen van stijlen en animatie JavaScript kan in een pagina de aanwezigheid, positie en inhoud van elk element (teksten, afbeeldingen enzovoort) ophalen en manipuleren. Zo kunnen bijvoorbeeld kaders op een pagina vloeiend open- en dichtschuiven, menu’s dynamisch worden uitgebreid, muisklikken van de rechtermuisknop worden afgevangen en aangepast en zo verder. Er zijn tal van kant-en-klare JavaScript-bibliotheken beschikbaar waarin al vele animatiefuncties zijn voorgeprogrammeerd. Deze kunt u op de pagina laden en (bijna) direct gebruiken. jQuery is hiervan een van de bekendste. We bespreken jQuery uiteraard verderop in dit boek.

• Ajax-webapplicaties U hebt misschien de term Ajax wel eens gehoord.

Het staat voor Asynchronous JavaScript And XML. Dit wil zeggen dat na het laden van de pagina asynchroon delen van de pagina ververst of aangepast kunnen worden. Tegenwoordig wordt hiervoor JSON gebruikt in plaats van XML. Het hele idee van applicaties op het web zoals Microsoft 365 (voorheen Office 365), Facebook, Gmail en Twitter is gebaseerd op gegevensuitwisseling op de achtergrond (asynchroon) met JavaScript en JSON. Zonder JavaScript zou het web in zijn huidige vorm niet bestaan!

Kernbegrip – JavaScript core

Het is belangrijk om te weten dat de taal JavaScript uit een relatief kleine set instructies bestaat. Er zijn opdrachten om te werken met variabelen, lussen, teksten, arrays en objecten. Verder is er in vergelijking met andere programmeertalen echter niet zo veel bijzonders aan. JavaScript bevat bijvoorbeeld geen opdrachten voor invoer en uitvoer via het toetsenbord, er zijn geen netwerkmogelijkheden of mogelijkheden voor het werken met lokale bestanden. De browser is een zogeheten ‘sandbox’.

In talen als Java, PHP of C# zijn dergelijke zaken wel opgenomen. In JavaScript worden dit soort uitgebreide handelingen overgelaten aan de zogenoemde hosting environment. En op internet is de webbrowser die host waarin JavaScript draait. JavaScript maakt bijvoorbeeld gebruik van het browservenster om teksten op de pagina te tonen en te manipuleren. Als JavaScript communiceert met een script op de webserver, maakt het gebruik van de browsermogelijkheden om netwerkverbindingen en (Ajax-)aanroepen op te zetten. De taal JavaScript zelf biedt hiervoor geen voorzieningen.

Peter Kassenaar heeft nog véél meer boeken op z’n conto staan; vanzelfsprekend vindt u daaruit ook tal van stukken op dit blog!

Met het Handboek JavaScript en jQuery leert u snel programmeren in JavaScript, de scripttaal die op het web een belangrijke rol speelt. U hebt het nodig als u meer wilt dan alleen statische websites opmaken met HTML en CSS. De auteur gaat uitgebreid in op taalconstructies, opdrachten en de vele mogelijkheden die deze flexibele programmeertaal biedt. In het tweede deel van het boek wordt het nog steeds erg populaire jQuery besproken.

Deze aanvullende JavaScript-bibliotheek tilt de kracht van JavaScript naar een hoger niveau en strijkt tevens de verschillen tussen de diverse browsers glad. Aan het einde van elk hoofdstuk vindt u praktijkoefeningen en daarnaast is alle voorbeeldcode gratis beschikbaar op internet. Dit Handboek is de ultieme inleiding in de kracht van programmeren in JavaScript en jQuery.

• 
  JavaScript leren met Peter Kassenaar
• 
  De boeken van Peter Kassenaar in de Web Development Library
• 
  Joost de Valk van Yoast SEO: ‘SEO is gewoon veel werk!’
• 
  Chantal Schinkels: ‘We moeten focussen op cultuurverandering…’
• 
  Live schrijven aan Programmeren voor niet-programmeurs…
• 
  Een grote update voor Flutter: Flutter 2.0
• 
  Het boxmodel van CSS
• 
  Hoe begin je met SEO?
• 
  Maak een schakelaar met CSS en HTML

Peter Kassenaar

Peter Kassenaar is auteur van vele boeken over algemeen pc-gebruik, programmeertalen en internettechnieken. Hij is gespecialiseerd in frond-endtools, -frameworks en -toepassingen. Via zijn eigen bedrijf verzorgt hij trainingen op deze gebieden voor bedrijven en organisaties. De boeken van Peter vind je hier.