JavaScript

Over JavaScript

JavaScript | Webdesign KennisbankJavaScript 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.

Behalve ‘dynamische’ webpagina’s kun je, mits een goed gekozen JavaScript, het ook gebruiken voor ‘statische’ webpagina’s. 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…Officieel Java logo | JavaScriptDat 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

  • Het heeft een enorme community-ondersteuning van miljoenen ontwikkelaars,
  • JavaScript werkt op verschillende platforms (Windows, Mac, Linux enz),
  • Het is een van de meest populaire programmeertalen ter wereld,
  • Het is gemakkelijk te leren en simpel te gebruiken,
  • Het is open-source en gratis,
  • Het is veilig, snel en krachtig.

    • 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:

    Een Slideshow van Javascript

    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 afdraaien. Echter, om dit te realiseren heb je daar wel een script (programma) voor 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>

    Bezoek ook: HTML | CSS

    Dit 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. Hieronder staat de code om met CSS het uiterlijk van de slideshow te bepalen…

    <style
    type=”text/css”>
    /*** maak de hoogte en breedte gelijk aan je afbeeldingen ***/
    #slideshow {
    position:relative;
    height:300px;
    width:450px;
    }
    #slideshow .slide {
    position:absolute;
    top:0;
    left:0;
    z-index:8;
    opacity:0.0;
    }
    #slideshow div.active {
    z-index:10;
    opacity:1.0;
    }
    #slideshow div.last-active {
    z-index:9;
    }
    </style>

    JavaScript JQuery

    Dit script maakt, zoals vele anderen, gebruik van de bekendste en meest gebruikte Javascript bibliotheek ‘JQuery’. Het zijn de codes van JQuery en bevatten scripts, waarmee je een website interactief maakt. 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 zoals de onderstaande slideshow, gelijkmatig af te laten spelen als dat niet in te regelen is.

    Home Kennisbank JavaScript