Javascript?

Dankzij javascript kan je een website interactief laten reageren op het gedrag van de bezoeker. Maar je moet er wel wat voor kunnen coderen.

Maar ook zonder programmeerervaring, raak je al aardig ver...

Met HTML bepaal je hoe een pagina is opgebouwd. Met CSS bepaal je hoe elk onderdeel van een webpagina er moet uitzien.
Met javascript kan je een webpagina laten reageren op activiteiten van de bezoeker, bijvoorbeeld als de gebruiker ergens op "klikt", of met zijn muis ergens overheen beweegt. Op zo'n momenten (=events) kan javascript in "real time" de bestaande HTML of CSS aanpassen.

Javascript is een taal waarmee u interactiviteit kan toevoegen aan HTML. 

Mogelijkheden

Hieronder vind je een kort overzicht van de mogelijkheden van javascript: Aanpassen, toevoegen, klonen, verwijderen... van om het even welk HTML-element in de huidige pagina.

  • - HTML-elementen aan de geopende pagina in real time toevoegen.
  • - HTML-elementen van de geopende pagina in real time aanpassen of verwijderen.
  • - De CSS-stijlkenmerken van de geopende pagina in real time aanpassen. (Bijvoorbeeld: de kleur of grootte van een element aanpassen als je ergens met je muis overheen beweegt)
  • - De inhoud van een ingevuld formulier controleren op bijvoorbeeld fouten.
  • - Externe HTML-bestanden inlezen en invoegen in de geopende pagina.
  • - Externe gestructureerde data (meestal in XML- of JSON-formaat) inlezen in real time en toevoegen aan de pagina. 
  • - Tekeningen (pixeldata) maken in een pagina (HTML5-canvas).
  • - Opvragen van locatiegegevens (na toelating van de gebruiker). 
  • - Bewaren van gegevens in de browser (cookies) of in een offline databank.
  • - Drag and drop binnen en naar buiten de browser. 
  • - ...

Beperkingen

De mogelijkheden van javascript zijn nagenoeg 'onbegrensd'. Toch kent de taal wel wat beperkingen. Voor de veiligheid kan je niet zonder meer ingrijpen in het systeem van de gebruiker. Je kan bijvoorbeeld geen bestanden van de computer van de bezoeker verwijderen. Toch wordt in de toekomst wellicht nog meer mogelijk op dit vlak: toegang tot de webcam en de microfoon... Javascript is een relatief eenvoudig te leren scriptingtaal. De broncode staat leesbaar in de HTML- code. De code wordt uitgevoerd door de javascript-engine van uw browser. Bij een echte programmeertaal wordt de code vooraf 'gecompileerd' naar bits en bytes voor de respectievelijke computerprocessor. Bij javascript is dit niet zo. De code wordt pas gecompileerd en uitgevoerd wanneer de browser de HTML-pagina en gekoppelde scripts inleest vanaf het domein waarop de website staat.

Javascript gebruiken

Javascript neem je met het <script>-HTML-element op in uw HTML-code. U kan javascriptcode ook in een extern bestand opslaan en dit aan uw pagina linken. Dit js-bestand hoeft zelfs niet op dezelfde server te staan, maar kan ook vanaf een ander domein ingelezen worden.

Uitklapmenu's maken met javascript

In dit voorbeeld bouwen we uitklapmenu's met javascript. Om de inhoud van de webpagina overzichtelijker te maken, verbergen we de inhoud van de artikels. Wanneer de gebruiker op de titel klikt, wordt de inhoud van het artikel zichtbaar. De andere artikels worden op dat moment verborgen.

1. HTML-artikels maken

In eerste instantie bouwen we een aantal artikels (nieuwsberichten) in onze webpagina. Je kan het aantal artikels nadien nog steeds uitbreiden. De bedoeling is dat de code (die we verderop zullen schrijven), blijft functioneren. 

Ik ga er in het voorbeeld vanuit dat je cssbib.css/skeleton.css gebruikt. We geven de id "krant" aan het onderdeel waar we de artikels willen zichtbaar maken en laten open- en dichtklappen.

<div class="container">
        <div class="row">
                 <div class="twelve columns" id="krant">
                           Hier komen onze artikels
                 </div>
        </div>
</div>

Nu voegen we artikels toe...

We stellen een artikel samen uit een titel en een <div>-element waarin we alinea's en afbeeldingen enz. kunnen plaatsen.

<article>
          <h1>Hier komt de titel van het artikel</h1>
          <div class="artikelInhoud">
                       <p>Een alinea met tekst</p>
                       <p>Nog een alinea met tekst...</p>
          </div>
</article>

Je plaatst die artikels (het aantal bepaal je uiteraard zelf, in het element met id "krant".

<div class="container">
        <div class="row">
                 <div class="twelve columns" id="krant">
                         <article>
                                    <h1>Hier komt de titel van het eerste artikel</h1>
                                    <div class="artikelInhoud">
                                            <p>Een alinea met tekst</p>
                                            <p>Nog een alinea met tekst...</p>
                                     </div>
                          </article>
                          <article>
                                    <h1>Hier komt de titel van het tweede artikel</h1>
                                    <div class="artikelInhoud">
                                            <p>Een alinea met tekst</p>
                                            <p>Nog een alinea met tekst...</p>
                                     </div>
                          </article>
                 </div>
        </div>
</div>

2. CSS

We voorzien nu wat opmaak in ons CSS-bestand.


#krant{
           background-color:white;
           border:1px solid #ccc;
           box-shadow: 6px 6px 5px -2px rgba(204,204,204,0.7);
}
#krant article{
           border-top:1px solid #ccc;
           padding:0;
           margin:0;
}
#krant article h1{
           font-size:1.2em;
           display:block;
           padding:3px;
           cursor:pointer;
           margin-left:15px;
}

.artikelInhoud{
           padding:10px;
           border-top:1px solid #ccc;
           display:none;
}

3. jQuery integreren

De code die we gaan schrijven is gebaseerd op jQuery. Je moet dus ook eerst de jQuery-bibliotheek koppelen aan je pagina. 

Ga naar https://code.jquery.com/. Kopieer daar de link naar de jQuery-CDN. Plak die link in de <head>-sectie van je pagina. 

<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>

4. Onze code toevoegen

We  voegen nu een <script>-tag toe net boven de sluittag van het body-element. 

<script>
</script>

De code mag pas uitgevoerd worden, als de pagina volledig is geladen in de webbrowser. In jQuery doen we dit als volgt:

<script>
$(document).ready(function(){
    //hier komt de code
});
</script>

Als een bezoeker van de website op de titel van een artikel klikt, dan schuift de inhoud van het artikel open. Alle andere artikels schuiven dan weer dicht. 
We selecteren ($) alle titels (h1) die we vinden in de het element met id "krant". De "onclick"-gebeurtenis zorgt dat er een opdracht (function) zal uitgevoerd worden.

<script>
$(document).ready(function(){
      $("#krant").find("h1").on("click",function(){
           //hier schrijven we wat er moet gebeuren...
      });
});
</script>

Nu kunnen we de browser vertellen wat hij moet doen als iemand op een titel klikt. In de eerste plaats schuiven we alle artikels dicht (in het geval er nog eentje open zou staan). In de tweede plaats schuiven we het artikel dat meteen onder "deze" ( $(this) ) titel staat, open. 

<script>
$(document).ready(function(){
    $("#krant").find("h1").on("click",function(){
        $(".artikelInhoud").slideUp();
        $(this).next(".artikelInhoud").slideDown();
    });
});
</script>

Kris Merckx - 2017

Het eindresultaat

Hier komt de titel van het eerste artikel

Een alinea met tekst

Nog een alinea met tekst...

Hier komt de titel van het tweede artikel

Een alinea met tekst

Nog een alinea met tekst...


home