JavaScript
Over JavaScript
JavaScript is een programmeertaal dat veel gebruikt wordt om webpagina’s interactief te maken. Het is een programmeertaal die het meest gebruikt wordt, om zogeheten dynamische webpagina’s mee te ontwikkelen en publiceren.
Een JavaScript is een klein stukje programma, waarmee je vele extra mogelijkheden in HTML-documenten kunt toevoegen. Zo kan een script bijvoorbeeld reageren op verschillende acties van een bezoeker…
Dat kan inhouden: het valideren (geldig verklaren) van webformulieren, het detecteren van de webbrowser, via een pop-up een waarschuwingsvenster met een bericht genereren enz.
Een JavaScript kan door middel van speciale voorzieningen, in de HTML-code (het script-element) binnen een webpagina worden opgenomen.
Bezoek ook: HTML
Is Java wel geïnstalleerd?
Op sommige pc’s is Java mogelijk al geïnstalleerd. Om te controleren of er Java op een Windows-pc geïnstalleerd is, zoek je in de startbalk naar Java. Mocht Java niet worden gevonden, dan kun je Java downloaden en installeren via onderstaand webadres:
Oracle | www.oracle.com
Voordelen van JavaScript
Datum en Tijd door JavaScript:
| <html> <head> <title>JavaScript voor datum en tijd</title> </head> <body> <button type=”button” onclick=”document.getElementById(‘demo’).innerHTML = Date()”> Klik op de button voor datum en tijd. </button> <p id=”demo”></p> </body> </html> |
Resultaat in de Webbrowser:
Hoe maak je een Slideshow?
Als je meerdere afbeeldingen op een webpagina wilt plaatsen, kun je handig gebruikmaken van een “slideshow”. Op een zelf gekozen oppervlak in een webpagina, kun je diverse afbeeldingen achter elkaar weergeven. Om dit te realiseren heb je daarvoor een script (programma) nodig.
Met behulp van HTML en CSS kun je zo’n slideshow op je website ook zelf maken. Je zal dan aan de hand van een voorbeeld, zelf een script in de broncode en CSS moeten schrijven… Om te beginnen, plaats je het eerste deel van de code van het slideshowscript op je webpagina…
| <script type=”text/javascript”> function slideSwitch() { var $active = $(‘#slideshow div.active’); if ( $active.length == 0 ) $active = $(‘#slideshow div:last’); var $next = $active.next().length ? $active.next() : $(‘#slideshow div:first’); $active.addClass(‘last-active’); $next.css({opacity: 0.0}) .addClass(‘active’) .animate({opacity: 1.0}, 1000, function() { $active.removeClass(‘active last-active’); }); } $(function() { setInterval( “slideSwitch()”, 3000 ); }); </script> |
Hier is de JavaScript die de slideshow instelt. De eerste paar regels zorgen ervoor dat de verschillende afbeeldingen in de juiste volgorde afwisselend vertoond worden. Het laatste deel van de code zet de interval op 3 secondes (3000 milliseconden): om de drie secondes wordt de afbeelding afgewisseld. Je kopieert en plakt dit stuk code precies voor de plek waar je de slideshow op je webpagina wilt gaan plaatsen.
Hierna is het tijd om met CSS het uiterlijk van de slideshow te bepalen…
| <style type=”text/css”> /*** maak de hoogte en breedte gelijk aan je afbeeldingen **/<br /> #slideshow {<br /> position:relative;<br /> height:300px;<br /> width:450px;<br /> }<br /> #slideshow .slide {<br /> position:absolute;<br /> top:0;<br /> left:0;<br /> z-index:8;<br /> opacity:0.0;<br /> }<br /> #slideshow div.active {<br /> z-index:10;<br /> opacity:1.0;<br /> }<br /> #slideshow div.last-active {<br /> z-index:9;<br /> }<br /> </style> |
JavaScript JQuery
Dit script maakt, zoals vele anderen, gebruik van de bekendste en meest gebruikte Javascript bibliotheek ‘JQuery’. De codes van JQuery bevat scripts, waarmee je een website interactief kan maken. Het onderstaande voorbeeld is een plug-in van WordPress met de titel: “Image Slider Slideshow”
De volgorde van de te vertonen afbeeldingen, worden van te voren vast gelegd of zijn willekeurig in te stellen. Het is een goed advies, om alle maten van de gekozen afbeeldingen gelijk te maken. Dit om de slideshow gelijkmatig af te laten spelen, als dat niet in te regelen is.
Bezoek ook: CMS
Home 
Kennisbank JavaScript