Tuesday, July 07, 2015

Blinky in JavaScript / HTML

Een deel aspect van het laatste examen Web UI was een vlakje laten "blinken" als de ingestelde tijd voorbij was. Veel leuke oplossingen gezien. Jammer genoeg ook een aantal foute, niet werkende, oplossingen met for-lussen en wait-toestanden.

Niet mogelijk in web toestanden. Wordt vaak gebruikt in microcontrollers, maar ook daar vind ik dit niet kunnen, dan nog steeds beter een timer opzetten dan gans de cpu te blokkeren.

Hieronder een paar oplossingen voor de Blink toestand. Studenten zullen de weg wel vinden en in 2de zit een beter resultaat neerzetten.

<!DOCTYPE html>
<html lang="nl">
<head>
  <meta charset="utf-8"/>
  <title>Blinky</title>
  
  <style>
     div { display: block; width: 200px; height: 200px; font-size: 50px
           text-align: center; border: 1px solid black; margin: 20px }
  </style>  
  
  <script>
    // dom tree is geladen, we kunnen we onze klik handler aan de button hangen
    $(document).ready( start );
    
    // variable moet globaal zijn
    var counter;
    
    function start() {
    
      $("button").on("click", function(e) {
        // standaard gedrag van de button voorkomen
        e.preventDefault();
        counter = 0;
        blink();
      });
    }
  
    function blink() {
      // rood of blauw <- counter even of oneven
      var color =  (counter % 2 == 0) ? "red" : "blue";
      $("div").css("background-color", color);
      
      // counter verhogen, uiteindelijk moeten we stoppen
      counter++;
      if (counter < 8) {
        // de "blink" functie oproepen binnen 200mS.
        setTimeout(blink, 200);
      } else {
        // terug op wit zetten, niet nodig, maar hier gewoon leuk
        $("div").css("background-color", "white");
        // aangezien we hier geen setTimeout meer oproepen, stopt alles hier.
      }
    }
  </script>
</head>  
<body>
  <h1>Blinky</h1>
  <div>Yoehoe</div>
  <button>Doe nog maar eens</button>
</body>
</html> 


Een alternatief script, deze keer met een timer.

    // dom tree is geladen, we kunnen we onze klik handler aan de button hangen
    $(document).ready( start );
    
    // variabelen moeten globaal zijn
    var counter;
    var timer;
    
    function start() {
    
      $("button").on("click", function(e) {
        // standaard gedrag van de button voorkomen
        e.preventDefault();
        counter = 0;
        // de functie blink wordt om de 200mS opgeroepen
        //  tot in de eeuwigheid (of tot clearInterval)
        timer = setInterval(blink, 200);
      });
    }
  
    function blink() {
      // rood of blauw <- counter even of oneven
      var color = (counter % 2 == 0) ? "red" : "blue";
      $("div").css("background-color", color);
      
      // counter verhogen, uiteindelijk moeten we stoppen
      counter++;
      if (counter > 80) {
        // stop onze timer
        clearInterval(timer);
        
        // terug op wit zetten, niet nodig, maar hier gewoon leuk
        $("div").css("background-color", "white");
      }
    }