Month: April 2014

WordPress custom Field gebruiken als css class

Bij het schrijven van een bericht is het mogelijk om een aantal extra gegevens toe te voegen aan het bericht. Standaard kan voor een bericht een datum, categorie en tags ingevuld worden. Maar er zijn meer mogelijkheden. Door gebruik te maken van Custom Fields is het mogelijk zelf invul vensters toe te voegen aan een bericht. Ga hiervoor naar de ‘Screen Options’ en vink ‘Custom Fields’ aan.

Er verschijnt nu een invul veld met de titel Custom Fields. Daarin kan een ‘Name’ en een ‘Value’ ingevuld worden. Bijvoorbeeld Name: ‘soort’, value:’fotobericht’. Deze informatie kan door WordPress makkelijk toe gevoegd worden aan een bericht door de opdracht ‘the_meta()’. Deze WordPress functie wordt net als bijvoorbeeld ‘the_content()’ en ‘the_title()’ gebruikt om content te plaatsen. ‘the_meta()’ maakt een ul-tag met daarin li-elementen voor elke Custom Field waarde.

Deze functie is minder geschikt voor het toevoegen van een css-class. We gebruiken wel het Custom Field, maar in combinatie met de opdracht ‘get_post_meta()’. We gebruiken ‘get_post_meta()’ in onderstaand voorbeeld om de value(s) van het Custom Field als css-class toe te voegen. We beginnen met de post-loop om berichten te laden:

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
           the_post(); 
           endwhile; ?>
     </div>
</body>

Vervolgens plaatsen we de content van ieder bericht in een div. Let op, de php code wordt onderbroken door html. Vergeet dus niet de php-tag voor de html te sluiten en na de html weer te openen.

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?>
          <div>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

De content van ieder bericht wordt in een div-tag geplaatst. Nu willen we de Value van het Custom Field gebruiken als css-class voor de div die ieder bericht verpakt.

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

Voordat WordPress de meta gegevens kan laden met de functie ‘get_post_meta()’  moeten een aantal gegevens aan de functie doorgegeven worden:  Van welk bericht moeten de gegevens opgehaald worden:

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(get_the_ID()); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

Ook moet aangegeven worden welke meta gegevens opgehaald moeten worden. In dit voorbeeld hebben we in het Custom Field de Name ‘soort’ ingevuld. Door die Name aan de functie door te geven wordt de Value (‘fotobericht’) opgehaald.

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(get_the_ID(), ‘soort’); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

De laatste waarde die doorgegeven moet worden aan de functie is of het wel of niet een enkele waarde moet zijn. In het voorbeeld hebben we een Name en een Value ingevuld, het betreft dus een enkele waarde:

<body>
     <div id=”berichten”>
     <?php while(have_posts()):
          the_post();?> 
          <div class=” <?php get_post_meta(get_the_ID(), ‘soort’, true); ?> “>
               <?php the_content()?>
          </div>
     <?php endwhile; ?>
     </div>
</body>

WordPress bericht-categorie gebruiken als css class

WordPress kent 2 manieren om content te plaatsen; Content die lange tijd niet aangepast hoeft te worden wordt als pagina (page) gepubliceerd, bijvoorbeeld een contact pagina. Content die regelmatig uitgebreid of ge-update wordt, wordt gepubliceerd als bericht (post). Bijvoorbeeld een aanbiedingen pagina van een bedrijf of webshop.

In dit voorbeeld bekijken we hoe we de geplaatste berichten kunnen vormgeven met css. Daarvoor gebruiken we de  categorie van het bericht als css class. Op die manier kunnen berichten met verschillende categories verschillend vorm gegeven worden omdat ze verschillende css classes krijgen. We beginnen met de berichten te laden. Ieder bericht wordt in een div geplaatst met de class-naam ‘post’. Met css kunnen de algemene opmaak van de post beschrijven.

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) : 
               the_post();?>
               <div class=”post “> 
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

De volgende stap is om een extra css-class toe te voegen aan ‘post’. De extra class wordt bepaald door de categorie van het bericht. Zo kunnen berichten verschillende classes krijgen, die we met css verschillend vorm kunnen geven. Eerst wordt een variabel gemaakt (herkenbaar aan $) met de naam ‘category’. Met de functie ‘get_the_category()’ maakt WordPress een lijst van eigenschappen van het bericht. Die lijst wordt opgeslagen in de variabel ‘category’. Met ‘echo’ wordt de opdracht gegeven om het item ‘cat_name’  (van het eerste item) in het html bestand te schrijven.

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) :
               the_post();?>
               <div class=”post <?php $category=get_the_category() ; echo $category[0]->cat_name; ?>“>
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

Het is mogelijk om aan een bericht meerdere categorien toe te voegen. Om elke categorie toe te voegen moet de opdracht een beetje aangepast worden.

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) : 
               the_post();?>
               <div class=”post <?php foreach(get_the_category() as $category); echo $category->cat_name; ?>”> 
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

De categorie namen worden nu achter elkaar geplakt als een lange class-naam achter de class “post”. Om de categories van elkaar te scheiden moeten we na elke categorie een spatie toevoegen:

<body>
     <div id=”wrapper”>
          <?php while ( have_posts() ) : 
               the_post();?>
               <div class=”post <?php foreach(get_the_category() as $category); echo $category->cat_name .” “; ?> “> 
                    <?php the_content();
               </div>
           endwhile;?>
     </div>
</body>

 

 

WordPress menu laden

WordPress heeft twee manieren om via het dashboard content te plaatsen: Als pagina, of als bericht/post. Om een menu te maken die weergeeft welke pagina’s er zijn wordt de opdracht ‘wp_list_pages()’ gebruikt:

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_pages(); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Als een website/blog is opgebouwd uit posts/berichten, kan er een menu lijst gemaakt worden waarin bijvoorbeeld de bericht-categories komen te staan. In plaats van ‘wp_list_pages()’ wordt dan gebruik gemaakt van ‘wp_list_categories()’.

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_categories(); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Met de WordPress opdracht ‘wp_list_categories()’ maakt WordPress een menu dat bestaat uit een li met de titel ‘categories’, daarin zit een ul, en daarin zitten li elementen met elk een eigen a-tag. Zo’n ingewikkeld menu is lastig te stylen met css. Daarom geven we WordPress de opdracht om een menu te maken zonder titel (dan blijft er alleen een serie li-elementen over):

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_categories(‘title_li=’); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

WordPress berichten laden

Er zijn twee veel voorkomende manieren om content te plaatsen met WordPress: door middel van berichten (posts) of door middel van pagina’s (pages). In dit voorbeeld kijken we naar het plaatsen van berichten.

Voor het plaatsen van berichten moet WordPress in de database kijken of er berichten zijn. Daarvoor gebruikt WordPress een while-loop. Een loop is een opdracht die steeds herhaalt wordt.

<body>
     <?php while () :?>
     <?php endwhile; ?>
</body>

WordPress gebruikt de while-loop om te kijken of er een bericht is in de database.

<body>
     <?php while ( have_posts() ) : ?>
     <?php endwhile; ?>
</body>

Als dat zo is wordt het bericht geladen. Daarna kijkt WordPress of er meer berichten zijn om te laden enz. De loop stopt pas als alle berichten geladen zijn.

<body>
     <?php while ( have_posts() ) : the_post(); ?>
     <?php endwhile; ?>
</body>

WordPress laadt alle berichten uit de database, maar ze zijn nog niet zichtbaar. Laten we de content van de  berichten zichtbaar maken door ze in een div met id “berichten” plaatsen. Ieder bericht wordt in een nieuwe p-tag geplaatst.

<body>
     <div id=”berichten”>
          <?php while ( have_posts() ) : the_post() ;?>
          <p><?php the_content();?></p>
          <?php endwhile; ?>
     </div>
</body>

Als WordPress de gegevens van het bericht geladen heeft met de opdracht ‘the_post()’ kunnen we  verschillende delen van de content laden. In bovenstaand voorbeeld wordt de content geladen met de opdracht ‘the_content’. Behalve de content kan ook de titel van het bericht geladen worden. In onderstaand voorbeeld wordt de titel van het bericht geschreven in een h2-tag:

<body>
     <div id=”berichten”>
          <?php while ( have_posts() ) : the_post() ?>
          <h2><?php the_title?></h2>
          <p><?php the_content();?> </p>
          <?php endwhile; ?>
     </div>
</body>

Tenslotte kunnen we de content nog wat beter ordenen door de titel en de content samen in een div met de class-naam ‘bericht’ te plaatsen.

<body>
     <div id=”berichten”>
     <?php while ( have_posts() ) : the_post() ?>
          <div class=”bericht”>
               <h2><?php the_title?></h2>
               <p><?php the_content();?></p>
           </div>
           <?php endwhile; ?>
     </div>
</body>

Van html naar WordPress

WordPress is ooit begonnen als blog-tool en uitgegroeid tot een prima middel om volwaardige websites mee te maken. Toch is de blog-structuur nog duidelijk herkenbaar: Het plaatsen van content gaat in principe door het aanmaken van verschillende posts op een pagina.

Voor een wordpress-site zijn minstens 2 bestanden nodig met een verplichte naam: style.css (Hierin staat de opmaak van de website beschreven) en index.php(Hierin staat de opbouw van de website beschreven). Die bestanden kun je met bijvoorbeeld Dreamweaver maken en op de server uploaden met bijvoorbeeld Filezilla. Het is belangrijk dat de bestanden in een map op de goede plaats ge-upload worden. Binnen de WordPress installatie is dat: htdocs/ wp-content/ themes/ map eigen theme.

In een html-pagina staat alle  content vast. Het voordeel van het gebruiken van een cms (conten management system) is dat content opgeslagen wordt in een database. Een cms als WordPress kan met gebruik van php-functies data ophalen en bijschrijven in het html-document. Voor het maken van een originele WordPress website kun je goed beginnen met een html versie van de site. Zo kun je met css het ontwerp goed neerzetten. Vervolgens vervang je de html teksten voor WordPress functies die in de database op zoek gaan naar de juiste informatie.

Als de bestanden ‘index.php’ en ‘style.css’ geupload zijn in de themes-map van WordPress zijn ze via de editor in het dashboard te veranderen. Om te beginnen moet de link naar het ‘style.css’ door WordPress zelf gemaakt worden. WordPress krijgt de opdracht om alle algemene informatie over de website/blog op te halen, en daarvan de ‘stylesheet_url’ te gebruiken.

<head>
<link type=”tekst/css” rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>“/>
</head>

Van de lijst met bloginfo kunnen veel meer gegevens gebruikt worden, bijvoorbeeld de titel van de website/blog. Met onderstaand voorbeeld zoekt WordPress de titel die de gebruiker heeft opgegeven in het dashboard bij de instellingen .

<head>
<link type=”tekst/css” rel=”stylesheet” href=”<?php bloginfo( ‘stylesheet_url’ ); ?>”/>
<title><?php bloginfo(‘name’); ?></title>
</head>

Met de verschillende WordPress functies is zo een hele website op te bouwen. Hier volgt een voorbeeld van een basis pagina met een header, een menu en ruimte om berichten te plaatsen. Deze elementen zijn met css makkelijk vorm te geven. De content die  Wordpress hier  aan toe voegt zal zich automatisch aan je css aanpassen.

<body>
     <div id=”wrapper”>
          <header></header>
          <nav></nav>
          <div class=”berichten”></div>
     </div>
</body>

Aan deze eenvoudige html-structuur kunnen we door WordPress content laten toevoegen. Bijvoorbeeld de titel van onze website in een h1-tag in de header plaatsen:

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
          <nav></nav>
          <div class=”berichten”></div>
     </div>
</body>

WordPress heeft twee manieren om via het dashboard content te plaatsen: Als pagina, of als bericht/post. Om een menu te maken die weergeeft welke pagina’s er zijn wordt de opdracht ‘wp_list_pages()’ gebruikt:

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_pages(); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Als een website/blog is opgebouwd uit posts/berichten, kan er een menu lijst gemaakt worden waarin bijvoorbeeld de bericht-categories komen te staan. In plaats van ‘wp_list_pages()’ wordt dan gebruik gemaakt van ‘wp_list_categories()’.

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_categories(); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Met de WordPress opdracht ‘wp_list_categories()’ maakt WordPress een menu dat bestaat uit een li met de titel ‘categories’, daarin zit een ul, en daarin zitten li elementen met elk een eigen a-tag. Zo’n ingewikkeld menu is lastig te stylen met css. Daarom geven we WordPress de opdracht om een menu te maken zonder titel (dan blijft er alleen een serie li-elementen over):

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
         <nav><?php wp_list_categories(‘title_li=’); ?></nav>
         <div class=”berichten”></div>
     </div>
</body>

Om de content toe te voegen is een wat ingewikkelder code nodig. WordPress kijkt in de database of er posts/berichten zijn. Ieder bericht dat gevonden wordt, wordt in de div ‘berichten’ geplaatst.

<body>
     <div id=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
          <nav><?php wp_list_categories(‘title_li=’); ?></nav>
          <div class=”berichten”>
               <?php while ( have_posts() ): the_post(); 
                         the_content(); 
                    endwhile; ?>
          </div>
     </div>
</body>

Als WordPress een post/bericht gevonden heeft kan er eenvoudig een titel toegevoegd worden. In onderstaand voorbeeld wordt de titel van het bericht in een h2-tag geplaatst en de content van het bericht vervolgens in een p-tag. Let op, de wordpress/php opdracht wordt onderbroken door de 2 html-tags. De php-tag moet dan ook afgesloten worden voordat de html-tag geplaatst wordt. Na de html-tags wordt er een nieuwe php-tag geopend.

<body>
     <div class=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
          <nav><?php wp_list_categories(‘title_li=’); ?></nav>
          <div class=”berichten”>
               <?php while ( have_posts() ): the_post(); ?>
                         <h2> <?php the_title(); ?> </h2>
                         <p> <?php the_content(); ?> </p>
                   <?php  endwhile; ?>
          </div>
     </div>
</body>

Op dezelfde manier is het mogelijk om elk bericht in een eigen div te plaatsen, zodat de berichten gestyled kunnen worden met css. Let op, je kunt geen html en php door elkaar gebruiken. Voordat een html-tag geplaatst wordt moet eerst de php-tag afgesloten worden (en na de html-tag weer geopend):

<body>
     <div class=”wrapper”>
          <header><h1><?php bloginfo(‘name’); ?></h1></header>
          <nav><?php wp_list_categories(‘title_li=’); ?></nav>
          <div class=”berichten”>
             <?php while ( have_posts() ):<?php the_post();?>
<div class=”bericht”>
<h2> <?php the_title(); ?> </h2>
<p> <?php the_content(); ?> </p>
</div>
<?php endwhile;?>
          </div>
     </div>
</body>

Het WordPress thema dat we gemaakt hebben bestaat nu uit 2 bestanden: ‘index.php’ en ‘style.css’. De opmaak van ons WordPress thema kunnen we verder uitwerken in het bestand ‘style.css’.

Javascript getElementsbyClassName

Een veel voorkomende manier om met Javascript elementen te selecteren is ‘document.getElementById()’. Dat is een methode die goed werkt als je unieke elementen wilt beïnvloeden met Javascript. Voor deze methode is het wel noodzakelijk dat ieder element dat je wilt gebruiken een ‘id’ heeft.

In documenten waar veel dezelfde elementen voorkomen kan het chaotisch en vergezocht worden om ieder element van een id te voorzien. Een weblog kan bijvoorbeeld veel uit veel kleine post bestaan. Die post krijgen hun opmaak van een css-class, in plaats van een id.

Om html-elementen zonder id, maar met een class toch aan te kunnen spreken met Javascript is er de methode: document.getElementsByClassName(‘class’). Javascript doorzoekt het document en maakt een lijst van alle elementen met de class-naam tussen de haakjes.

In onderstaand voorbeeld wordt de variabel ‘berichtDivs’ gemaakt. Daar wordt een lijst in gemaakt van drie divs met de class ‘bericht’.

<body>
     <div class=”bericht”><p>tekst</p></div>
     <div class=”bericht”><p>tekst</p></div>
     <div class=”bericht”><p>tekst</p></div>
<script type=”text/javascript”>
var berichtDivs=document.getElementsByClassName(“bericht”);
</script>
</body>

 

Om 1 van de berichten uit de lijst ‘berichtDivs’ te selecteren moet  je aangeven welk bericht  je bedoelt. In dit voorbeeld kunnen we de 1e, 2e of 3e div bedoelen.  Op deze manier werkt een Javascript-lijst ook. De 1e div met class ‘bericht’ wordt op de 1e plaats in de lijst gezet (positie 0), de 2e op de 2e plek (positie 1), de 3e op de 3e plek (positie 2).

In onderstaand voorbeeld maken we de eerste div uit de lijst ‘berichtDivs’ onzichtbaar. Daarbij wordt na het noemen van de variabel ‘berichtDivs’ tussen blokhaken [ ] aangegeven de hoeveelste div bedoeld wordt.

<body>
<div class=”bericht”><p>tekst</p></div>
<div class=”bericht”><p>tekst</p></div>
<div class=”bericht”><p>tekst</p></div>
<script type=”text/javascript”>
var berichtDivs=document.getElementsByClassName(“bericht”);

berichtDivs[0].style.visibility=”hidden”;
</script>
</body>

Op dezelfde manier werkt ook ‘document.getElementsByTagName()’. Een methode die gebruikt kan worden als er geen gebruik gemaakt wordt van id’s en classes. Alle html-elementen met de opgegeven tag-naam worden in een lijst gezet. In onderstaand voorbeeld krijgt de 2e p-tag (positie 1) de tekstkleur rood.

<body>
<div class=”bericht”><p>tekst</p></div>
<div class=”bericht”><p>tekst</p></div>
<div class=”bericht”><p>tekst</p></div>
<script type=”text/javascript”>
var berichtDivs=document.getElementsByClassName(“bericht”);
var teksten=document.getElementsByTagName(“p”);

berichtDivs[0].style.visibility=”hidden”;
teksten[1].style.color=”red”;
</script>
</body>

 

Datum en tijd gebruiken met Javascript

Met Javascript is het mogelijk de datum en tijd uit te lezen van de computer/telefoon van de bezoeker van je website. Dat kan bijvoorbeeld gebruikt worden aan te geven hoe lang een kortingsactie nog geldig is.

Javascript kan in 1 opdracht alle tijdsgegevens ophalen. Die worden samen in een variabel opgeslagen. We geven die variabel de naam ‘tijd’ Als we de inhoud van ‘tijd’ opvragen in een alert-bericht krijgen we een rij gegevens te zien (dag, maand, datum, jaar, uren, minuten, seconden).

<body>
<script type=”text/javascript”>
var tijd=new Date();
alert(tijd);
</script>
</body>

Om die gegevens beter te kunnen gebruiken is het handiger om die variabel ‘tijd’ met de rij gegevens op te knippen in afzonderlijke variabelen. Dat kun je doen door van alle gegevens van ‘tijd’ er 1 op te vragen. In onderstaand voorbeeld wordt binnen alle gegevens van ‘tijd’ gezocht naar het huidige jaar.

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
alert(jaar);
</script>

Op dezelfde manier zijn ook de andere gegevens als afzonderlijke variabelen op te slaan, maar bij het opvragen van de maand is iets bijzonders te zien. Het lijkt er namelijk op dat Javascript er een maand naast lijkt te zitten. In April (de 4e maand) geeft Javascript als antwoord ‘3’ bij het uitvoeren van de functie getMonth(). De reden hiervoor is dat Javascript niet bij ‘1’ begint te tellen, maar bij ‘0’.

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
alert(maand);
</script>

De opdracht ‘getDate()’ geeft gewoon aan de hoeveelste dag van de maand het is, maar als we de dag opvragen krijgen met ‘getDay()’ zien we dat Javascript een getal geeft in plaats van de naam van de dag. Ook nu begint Javascript bij ‘0’ te tellen.

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
var datum=tijd.getDate();
alert(datum);
</script>

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
var datum=tijd.getDate();
var dag=tijd.getDay();
alert(dag);
</script>

De uren, minuten en seconden worden gegeven in de verwachte getallen.

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
var datum=tijd.getDate();
var dag=tijd.getDay();
var uren=tijd.getHours();
var minuten=tijd.getMinutes();
var seconden=tijd.getSeconds();
alert(seconden);
</script>

We zijn nu zover dat we met Javascript de datum gegevens uit kunnen lezen en bewaren in variabelen. Die variabelen hebben we vertoont in een alert-pop up. Het wordt boeiender als we deze variabelen kunnen toepassen binnen een html-document. Als voorbeeld maken we een eenvoudige klok. Om te beginnen hebben we in de body een tekst-tag nodig. Die geven we de id ‘klok’ zodat we deze tag makkelijk met Javascript kunnen vinden.

<body>
<h1 id=”klok”></h1>

<script type=”text/javascript”>

Vervolgens laten we Javascript zoeken naar een tag met de id ‘klok’. Die zoektocht wordt opgeslagen in een variabel. Daarna plaatsen we de uren, minuten en seconden in ‘klok’ door gebruik te maken van de opdracht ‘innerHTML’. De uren, minuten en seconden worden gescheiden door een dubbele punt(:).

<script type=”text/javascript”>
var tijd=new Date();
var jaar=tijd.getFullYear();
var maand=tijd.getMonth();
var datum=tijd.getDate();
var dag=tijd.getDay();
var uren=tijd.getHours();
var minuten=tijd.getMinutes();
var seconden=tijd.getSeconds();
//alert(seconden);

var klok=document.getElementById(“klok”);
klok.innerHTML=uren +”:” +minuten +”:” +seconden;
</script>

Nu wordt de juiste tijd weergegeven in een html pagina. Het valt wel meteen op dat de klok stil staat. De opdracht aan Javascript om de datum gegevens op te halen, op te slaan in variabelen en te vertonen in de h1-tag ‘klok’, wordt namelijk maar 1 keer uitgevoerd.

Om Javascript de tijd elke seconde te laten verversen hebben we een functie nodig die door een ‘setInterval’ geactiveerd wordt. Daarvoor moeten we een aantal dingen aanpassen. Om te beginnen worden alle variabelen die we nodig hebben al wel gemaakt/benoemd, maar nog zonder waarde. Daarna maken we een ‘setInterval’ die elke seconde de functie ‘veranderTijd()’ uitvoert. De functie ‘veranderTijd’ leest de actuele tijd en plaatst die in de variabelen.

<script type=”text/javascript”>
var tijd;
var jaar;
var maand;
var datum;
var dag;
var uren;
var minuten;
var seconden;
//alert(seconden);

var klok=document.getElementById(“klok”);
klok.innerHTML=uren+”:” +minuten+”:” +seconden;
var interval=setInterval(veranderTijd,1000);

function veranderTijd()
{
     tijd=new Date();
     jaar=tijd.getFullYear();
     maand=tijd.getMonth();
     datum=tijd.getDate();
     dag=tijd.getDay();
     uren=tijd.getHours();
     minuten=tijd.getMinutes();
     seconden=tijd.getSeconds();
}
</script>

Nu wordt de tijd elke seconde bijgewerkt, maar dat is nog niet te zien in ‘klok’. Daarom moet de opdracht om html aan te passen van ‘klok’ ook verplaatst worden naar een plek binnen de functie ‘veranderTijd’. Na 1 seconde wordt deze functie uitgevoerd. Dat zorgt ervoor dat we 1 seconde moeten wachten voordat onze klok zichtbaar is en gaat lopen. Om dat op te lossen kunnen we Javascript de opdracht geven om bij het laden van het document alvast 1 keer de functie ‘veranderTijd’ uit te voeren. Dat wordt vervolgens elke seconde herhaalt door ‘interval’.

<script type=”text/javascript”>
var tijd;
var jaar;
var maand;
var datum;
var dag;
var uren;
var minuten;
var seconden;
//alert(seconden);

var klok=document.getElementById(“klok”);

var interval=setInterval(veranderTijd,1000);

function veranderTijd()
{
     tijd=new Date();
     jaar=tijd.getFullYear();
     maand=tijd.getMonth();
     datum=tijd.getDate();
     dag=tijd.getDay();
     uren=tijd.getHours();
     minuten=tijd.getMinutes();
     seconden=tijd.getSeconds();

     klok.innerHTML=uren+”:” +minuten+”:” +seconden;
}
veranderTijd();
</script>

Javascript setInterval

Er zijn situaties waarin je wilt dat een bepaalde javascript functie niet meteen, maar na een tijdje uitgevoerd of herhaalt moet worden. Daarvoor heeft Javascript de setInterval() functie. Die functie heeft twee parameters nodig tussen de ronde haakjes: De functie die uitgevoerd moet worden en om de hoeveel tijd die functie uitgevoerd moet worden, de interval. De waarde van de interval is in mili seconden. In onderstaand voorbeeld wordt de functie ‘popUp’ elke 2 seconden uitgevoerd.

<body>
<script type=”text/javascript”>
setInterval(popUp, 2000);

function popUp()
{
     alert(“ok”);
}
</script>
</body>

Een setInterval wordt in principe oneindig herhaald. Om dat te voorkomen kan de setInterval gestopt worden door de functie clearInterval(). Tussen de ronde haakjes van clearInterval() wordt de naam aangegeven van de setInterval die beëindigd moet worden. Daarvoor heeft de setInterval wel een naam nodig. Die naam wordt gegeven via een variabel. In het voorbeeld hieronder wordt de functie ‘popUp’ 1 keer uitgevoerd en dan wordt de interval meteen gestopt.

<body>
<script type=”text/javascript”>
var interval=setInterval(popUp, 2000);

function popUp()
{
     alert(“ok”);
     clearInterval(interval);
}
</script>
</body>

Als je een setInterval vaker dan 1 keer, maar niet oneindig wilt gebruiken, kun je nog een variabel gebruiken die bijhoudt hoevaak de setInterval actief is geweest. In combinatie met een if-voorwaarde kan de setInterval alsnog gestopt worden. In onderstaand voorbeeld wordt de setInterval 5 keer uitgevoerd. Elke keer wordt de variabel ‘aantalIntervals’ met 1 verhoogt. Als de waarde van ‘aantalIntervals’ gelijk is aan 5, wordt de setInterval beëindigd.

<body>
<script type=”text/javascript”>
var interval=setInterval(popUp, 2000);
var aantalIntervals=0;

function popUp()
{
     aantalIntervals+=1;
     alert(aantalIntervals);

     if(aantalIntervals==5)
     {
         clearInterval(interval);
     }
}
</script>
</body>