Javascript

Javascript 1

Javascript is een scriptingtaal die websites toelaat inhoud dynamisch te veranderen en te reageren op handelingen van bezoekers. Het is de derde pijler in het plaatje van webontwikkeling die instaat voor de functionaliteit van een webpagina.

Javascript is verder ook een zeer levende taal, wat betekent dat er bijna jaarlijks nieuwe mogelijkheden worden toegevoegd die het gebruik van de taal (in de meeste gevallen) eenvoudiger maken. In deze cursus wordt steeds rekening gehouden met de meest recente ontwikkelingen op dit vlak, zodat je als ontwikkelaar sterk in je schoenen staat.

Enkele concrete toepassingen:

  • Een deel van een webpagina verbergen/tonen wanneer de gebruiker ergens op klikt, een selectievakje aanduidt of een menu-item is gekozen
  • Rechtstreeks berekeningen uitvoeren en tonen, al dan niet in tabelvorm
  • Live invoervalidatie. Bv: wachtwoorden die moeten voldoen aan criteria, een correcte Belgische postcode, ...
  • Dynamische galerijen bouwen (Lightbox, Image Sliders, ...)
  • Gebruik van jQuery om elementen op een webpagina eenvoudig te benaderen of te veranderen
  • Externe gegevens opvragen (PHP, JSON, ...) en filteren (bv. zoekresultaten)

... en nog veel meer.

Deze module is bedoeld als beginnerscursus; je hebt absoluut geen enkele voorkennis programmeren nodig. Wel wordt verwacht dat je een degelijke voorkennis HTML/CSS hebt om Javascript comfortabel te kunnen gebruiken (zie module HTML/CSS 1).

Javascript leren lijkt sterk op het leren van een normale taal zoals Spaans of Duits: je leert de woordenschat en grammatica, waarna je zelf in staat bent "zinnen" te vormen. We beginnen met een algemene inleiding tot programmeren in Javascript en leren gaandeweg te communiceren met de elementen op een webpagina.

Met Javascript zal je in zeer korte tijd tot mooie resultaten komen. Er was nooit een betere tijd om de taal te leren!

Inhoudstabel:

  • Wat is Javascript?
  • Inleiding tot programmeren in Javascript
  • Variabelen
  • Bewerkingen
  • Condities en lussen
  • Document Object Model (DOM)
  • Opvangen van gebeurtenissen (events)
  • Inleiding jQuery
  • Ajax
  • Praktische voorbeelden d.m.v. case studies

Javascript 2

Front-End met Vue.js

Voor de vervolgcursus Javascript bouwen we verder op de geleerde leerstof door gebruik te maken van verschillende pakketten en frameworks die ons het (web)leven gemakkelijker maken. Frameworks zijn (vaak gratis) verzamelingen van Javascriptcode die een ontwikkelaar de mogelijkheid geven sneller, veiliger en diepgaander te werk te gaan op bepaalde vlakken van webontwikkeling. Hierbij kan je denken aan uitwisseling van gegevens tussen verschillende elementen op een pagina, het centraal beheren van gegevens en gebruikers en verbinding maken met externe, online diensten. Kortom: na een zachte leercurve wordt het schrijven van code een stuk aangenamer!

We spitsen ons in deze module toe op het ontwikkelen van de Front-End. Kort gezegd betekent dit dat de code die we schrijven zal draaien in de browser, op het apparaat waarop de website geopend wordt. Als hoofdframework wordt in deze cursus Vue.js aangeleerd.

We beginnen met het klaarmaken van een functionele ontwikkelomgeving via Node.js en de bijhorende Node Package Manager. Dit wordt het portaal voor het installeren van de nieuwe pakketten en frameworks.

Na de voorbereidingen schakelen we al zeer snel over naar het ontwikkelen van webapplicaties. Webapplicaties zijn een evolutie van standaard webpagina's en gekenmerkt door de grotere focus op functionaliteit. Uiteraard blijven het ontwerp en de structuur belangrijk, maar met de toevoeging van geavanceerde Javascript frameworks worden praktisch alle beperkingen weggenomen. Als je het kan bedenken, kan je het bouwen!

Enkele voorbeelden van webapplicaties die je zal leren bouwen:

  • Takenlijstje
  • Bibliotheek met boekenbeheer
  • Bioscoopapplicatie met recente films, filminformatie, ... (denk aan IMDB.com)
  • Andere administratieve applicaties (ledenbeheer, facturatie, statistieken, rapporten, ...)

Je leert ook verbinding te maken met externe diensten voor het opvragen van informatie, zoals het dagelijkse weerbericht, courante valutaomrekeningen, ...

Front-End met Firebase

Met een grondige kennis van Javascript en bijhorende frameworks (bv. Vue.js) op zak, sta je zeer sterk in je schoenen om de laatste stappen te zetten in de front-end development wereld, nl. het bewaren van gegevens in een databank in de cloud. Hiervoor gebruiken we in deze module Firebase van Google.

Door gegevens te laden en te bewaren via een databank, krijg je de mogelijkheid webapplicaties te bouwen die hun data niet kwijtraken bij het sluiten van de browser. Dit opent de deur voor allerlei nieuwe applicaties die voordien minder nuttig waren. Zo kunnen we de voorbeelden uit de tweede module ombouwen om data extern te bewaren en dus overal beschikbaar zijn.

Omdat gegevens in een databank vaak vertrouwelijk zijn en niet zomaar door iedereen mogen bekeken of bewerkt worden, hangt hier ook een stuk authenticatie aan vast. Dit houdt in dat gebruikers zich moeten kunnen registreren om vervolgens in te loggen in je applicatie via een gebruikersnaam en wachtwoord, zoals je dit wellicht al vaak gezien hebt bij populaire applicaties zoals Gmail, Facebook of zelfs TaxOnWeb.

Aan elke gebruiker hangen rechten die bepalen wat de gebruiker wel of niet mag doen. Mag de gebruiker gegevens wijzigen, verwijderen of toevoegen? Heeft de gebruiker toegang tot bepaalde administratieve secties van de webapplicatie? Dit zijn vragen waarop we in deze module een duidelijk technisch antwoord bieden.

De module is verdeeld in drie onderdelen:

  1. Hoe worden gegevens optimaal gestructureerd?
  2. Bewaren en opvragen van gegevens in de cloud via Javascript
  3. Gebruikersauthenticatie en rechtenbeheer

Na het voltooien van deze cursus mag je jezelf een echte, professionele Javascript Front-End ontwikkelaar noemen!

Javascript 3

Back-End met AdonisJS

Voor de vervolgcursus Javascript bouwen we verder op de geleerde leerstof door gebruik te maken van verschillende pakketten en frameworks die ons het (web)leven gemakkelijker maken. Frameworks zijn (vaak gratis) verzamelingen van Javascriptcode die een ontwikkelaar de mogelijkheid geven sneller, veiliger en diepgaander te werk te gaan op bepaalde vlakken van webontwikkeling. Hierbij kan je denken aan uitwisseling van gegevens tussen verschillende elementen op een pagina, het centraal beheren van gegevens en gebruikers en verbinding maken met externe, online diensten. Kortom: na een zachte leercurve wordt het schrijven van code een stuk aangenamer!

We spitsen ons in deze module toe op het ontwikkelen van de Back-End. Kort gezegd betekent dit dat de code die we schrijven zal draaien op een server. De server levert vervolgens de afgewerkte webpagina's aan de browser. Als hoofdframework wordt in deze cursus AdonisJs aangeleerd.

We beginnen met het klaarmaken van een functionele ontwikkelomgeving via Node.js en de bijhorende Node Package Manager. Dit wordt het portaal voor het installeren van de nieuwe pakketten en frameworks.

Na de voorbereidingen schakelen we al zeer snel over naar het ontwikkelen van websites waarvan de pagina's afkomstig zijn van een webserver. We gebruiken hiervoor het fantastische framework AdonisJS. Binnen dit framework is het werken met databanken, gebruikers en valideren van gegevens een fluitje van een cent.

Enkele voorbeelden van websites die je zal leren bouwen:

  • Takenlijstje
  • Bibliotheek met boekenbeheer
  • Webshop
  • Andere administratieve applicaties (ledenbeheer, facturatie, statistieken, rapporten, ...)

De module bevat ook een inleiding tot het organiseren van gegevens en werken met een databank, maar het gros van dit onderwerp zit vervat in de vervolgcursus.

Back-End met AdonisJS - vervolg

We zetten in deze module de ontdekkingsreis door de Back-End wereld met Javascript voort. AdonisJS is nog steeds het framework van dienst. Met de basiskennis die je ondertussen onder de knie hebt is het tijd ons verder toe te spitsen op geavanceerde databanken en gegevensbeheer.

We kijken in detail naar efficiënte methoden voor het organiseren van grote toepassingen en ingewikkelde gegevensstructuren, zodat je met de aangeleerde AdonisJS werkwijze nog bredere en diepere websites kan bouwen.

Omdat gegevens in een databank vaak vertrouwelijk zijn en niet zomaar door iedereen mogen bekeken of bewerkt worden, hangt hier ook een stuk authenticatie aan vast. Dit houdt in dat gebruikers zich moeten kunnen registreren om vervolgens in te loggen in je applicatie via een gebruikersnaam en wachtwoord, zoals je dit wellicht al vaak gezien hebt bij populaire applicaties zoals Gmail, Facebook of zelfs TaxOnWeb.

Aan elke gebruiker hangen rechten die bepalen wat de gebruiker wel of niet mag doen. Mag de gebruiker gegevens wijzigen, verwijderen of toevoegen? Heeft de gebruiker toegang tot bepaalde administratieve secties van de website? Dit zijn vragen waarop we in deze module een duidelijk technisch antwoord bieden.

Concreet komen de volgende onderwerpen aan bod:
- Complexe gegevensstructuren
- Geavanceerde gebruikersauthenticatie
- Rechtenbeheer (wie mag wat zien/doen?)
- Berichtgeving via mail
- Unit tests (proactief opsporen van fouten)

Na het voltooien van deze cursus mag je jezelf een echte, professionele Javascript Back-End ontwikkelaar noemen!