Javascript

Leseenheid

Nodig

Moeilijkheidsgraad

3

Javascript is een clientsided scripting taal. Dit wil zeggen dat ze op de computer van de gebruiker wordt uitgevoerd. Zoals gewoonlijk verwijs ik naar W3school om de goede (Engelstalige) handleidingen.

Naast Javascript is er ook JQuery. Dit is net zoals bootstrap een kant en klaar pakket (library) waar je dan gebruik van kunt maken als je de juiste syntax gebruikt. Jquery kan ook als CDN (content delivery network) gebruikt worden. 60% van de sites zouden er gebruik van maken.

Drupal en zijn modules maken veelvuldig gebruik van Javascript én JQuery, zonder dat je er notie van moet hebben. Als gevorderden wil ik wel dat je enkel basisprincipes kent. Zo wordt elke javascript actie uitgelokt door een gebeurtenis of een 'event'. Klikken op een foto, het laden van een pagina, klikken op een knop, verzenden van een forumier,.. Zijn allemaal events. Koppel er dan nog een actie aan vast en je bent vertrokken..

Javascript werkt volgens dit principe: iets veroorzaakt een actie. Hier krijg je bij klikken een melding. (stom, maar didactisch verantwoord hé)

Zo doe je dit. Zet je pagina fiilter wel op PHP.

Plezanter wordt het in deze zelf gemaakt hoverfoto's. Als je er over beweegt, dan wijzigt de foto. Hieronder zie je de twee foto's onder elkaar, maar in het echt staan ze over elkaar. (Bo Derek trouwens)

Dit is de code. Welke event wordt er uitgelokt? Er zijn er 2.

Een derde voorbeeld is een aanloop naar volgend thema over cookies. Deze pagina vraagt naar je naam.

Telkens je daarna nog op de pagina terecht komt geeft hij een melding. Geen wereldnieuws, maar kijk eens naar de cookie in je browserbestanden.

Zo worden er cookies gemaakt, opgevraagd en verwijderd..

In het vierde voorbeeld gaan we ons niet meer moe maken met code. We gaan een typische module installeren de bijna puur javascript is. Installeer Cloud Zoom. Je ziet dat er ook een third party aan te pas komt.

Uitpakken en FTP'en.

Maak een inhoudstype aan met afbeeldingen (meerdere). Bij de weergave kies je voor Cloud zoom.

Je kunt bij de instellingen ook een galerij aanmaken. De zoom area image style bepaalt hoe groot de zoom is.

In mijn geval is de originele foto tamelijk groot, vandaar dat de zoom groot is.

Kijk eens naar de js bestanden die je daarvoor nodig hebt... en dankt de Heer voor deze open source...

Er zit wel een klein typfoutje in de code:

 

Tooltip via QTip

Javascript (jquery) kan ook van het net gehaald worden. Om dit aan te tonen, nemen we de tooltip module van Drupal; Qtip.

Maak een standaard weergave aan.

Zet ook in d efull html, de qtip aan, anders filtert CKEditor ze weg.

De volgorde kan je instellen.

Als je kijkt naar de instellingen dan zie je dat we gebruik gaan nemen van een javascipt delivery site.

Nu moet je nog de code inbrengen op een pagina die je wilt gebruiken. Dit doe je als volgt (info uit de readme.txt file van de module)

En ja hoor...Kijk eens naar de broncode van de pagina. Je zult zien waar de javasript code werd gehaald.