Hoe begin je met JavaScript?

JavaScript is een programmeertaal, maar u hoeft er geen computernerd voor te zijn om ‘t te begrijpen. Maar hoe begin je met JavaScript? Ik leg het uit in mijn Handboek JavaScript & jQuery, 4e editie.

Kan iedereen JavaScript gebruiken? Worden aan de JavaScript-programmeur speciale eisen gesteld? We geven kort aan welke voorkennis nodig is en op welke wijze u uw kennis eventueel kunt bijspijkeren.

• Om JavaScript te kunnen gebruiken is in principe weinig voorkennis nodig.
JavaScript staat als leesbare platte tekst in de broncode van het webdocument of in een apart (gekoppeld) scriptbestand.

• Omdat JavaScript een programmeertaal is, is het zonder meer een voordeel als u enige ervaring hebt met programmeren. Zelfs met uitsluitend wat basiskennis van PHP of eenvoudig Java hebt u al een voorsprong. De statements, de code, de controlestructuren en de syntaxis zult u wat sneller onder de knie kunnen krijgen.

• Hebt u eerder vooral andere scripts en misschien wat jQuery-code gekopieerd en geplakt, dan leert u nu eindelijk wat al die haakjes, puntkomma’s en accolades betekenen.

• Hebt u nog geen programmeerervaring, dan is dat gelukkig geen probleem.

Begin gewoon te oefenen in het volgende hoofdstuk. Dan hebt u aan het einde van het boek JavaScript goed onder de knie. Maar houd er wel rekening mee dat u moet gaan denken in code. JavaScript biedt geen visuele leeromgeving of handige werkbalken zoals Word of Excel.

⚠️ Minimaliseren en bundelen
In veel moderne websites en frameworks worden extra tools zoals Webpack of Babel gebruikt om JavaScript-code te minimaliseren en te bundelen in één groot bestand. Computers kunnen daar prima mee overweg, maar de broncode is dan onleesbaar voor mensenogen. U kunt er helaas vrijwel niets van leren. In dit boek doen we dat niet. Alle broncode en voorbeelden zijn leesbare codebestanden die u zelf kunt aanpassen en uitbreiden.

Bekendheid met HTML en CSS

We gaan ervan uit dat u bekend bent met HTML. Als u vertrouwd bent met tags, id’s, attributen en de andere elementen waaruit een webpagina is opgebouwd, zult u deze snel kunnen aanpassen om ze zo met behulp van JavaScript op de pagina te manipuleren.

Kent u dit nog niet, lees dan eerst een ander boek, waarin de basisbeginselen van HTML uiteengezet worden, bijvoorbeeld Web Development Library HTML5 (ISBN 978-90-5940-808-1) en Web Development Library – CSS3 (ISBN 978-905940-809-8). In dit boek staan we niet verder stil bij de HTML- en CSS-syntaxis van elementen. Zij worden bekend verondersteld.

hoe begint u met JavaScript — Bekendheid met de notatie van HTML en CSS is een vereiste. We gebruiken in dit boek het HTML5-documenttype.

Wat hoeft u niet te weten?

U hoeft niet iets te weten van serversided programmeertalen zoals PHP, Java of C#. Ook hoeft u geen beschikking te hebben over een webserver of eigen domein. In dit boek gaan we uit van clientsided JavaScript. Dit betekent dat scripts op letterlijk elke pagina gebruikt kunnen worden. Het script maakt deel uit van de webpagina. In de meeste gevallen is het zelfs niet nodig dat u online bent voor het uitvoeren van de oefeningen. Een editor en een browser zijn voldoende.

Ontwikkelhulpmiddelen voor JavaScript

JavaScript is gewoon platte tekst. In principe kunt u daarom met Kladblok (Windows) of Teksteditor (Mac) al aan de slag. Maar in de praktijk is het wel erg handig om met een gespecialiseerde editor aan de slag te gaan. We noemen er in deze paragraaf enkele, zodat u zelf een keuze kunt maken.

Naast het schrijven van JavaScript is het opsporen en verhelpen van fouten in een script erg belangrijk. Hiervoor is de debugger in de browser beschikbaar. Deze komt aan het eind van de paragraaf aan de orde.

⚠️WYSIWYG-editors ongeschikt
Webontwikkelaars die uit de vormgevingshoek afkomstig zijn, gebruiken graag een editor waarmee webpagina’s op visuele wijze worden vormgegeven. Zij werken bijvoorbeeld in de ontwerpweergave van Adobe Dreamweaver of gebruiken aparte tools als Adobe Muse, Figma of Storybook. Het samenvattende begrip hiervoor is What You See Is What You Get-editors (WYSIWYG). Voor het schrijven van JavaScript zijn die niet geschikt. U zult echt met de code zelf aan de slag moeten om de beste resultaten te bereiken. In dit boek worden visuele editors niet gebruikt.

• Visual Studio Code Microsoft heeft sinds enige jaren een uitstekende, gratis, open source editor beschikbaar. Deze heet Visual Studio Code (niet te verwarren met het grote, betaalde Visual Studio) en is beschikbaar voor Mac, Windows en Linux. Uw exemplaar is te downloaden vanaf code.visualstudio.com.

• JetBrains Webstorm WebStorm is een editor die zich profileert als ‘speciaal gemaakt voor JavaScript’. Er zijn uitgebreide voorzieningen aanwezig voor het profileren van documenten, herschrijven van code, testen en het automatisch springen naar functies. Zie www.jetbrains.com/ webstorm/ voor meer informatie en een 30-dagenversie.

• Sublime Text Een andere bekende open source editor is Sublime Text, te vinden op www.sublimetext.com. Deze editor is van zichzelf een tamelijk ‘kaal’ product, maar kan exact naar wens worden ingesteld met tientallen plug-ins voor kleurcodering, automatisch formateren, FTP, codehints en testingtools.

Maar zoals gezegd kunt u met elke editor die een document als platte ASCIItekst kan opslaan uit de voeten. Kan geen van de hiervoor genoemde editors u bekoren, dan kunt u het proberen met Atom, Sublime Text, Brackets, Notepad++ of een andere editor.

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.

Bestel hier JavaScript & jQuery

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.