JavaScript összemérés

4. Visszaszámlálás

Hamarosan kezdődik a Bakonyi Bitfaragó Bajnokság újabb fontos eseménye, az online összemérés. Ennek örömére készítsünk egy visszaszámlálót, ami addig is emlékeztet a fordulóig hátralévő időre.

Bemenet: Az online forduló és a számítógép órájának dátum- és időadatai.

Kimenet: Az összemérésig hátralévő napok, órák, percek, másodpercek száma.

Változók: A today, comp, difference, days változók a dátumműveletekhez, valamint az s, sc szöveg típusú változók a kiirandó adatok szerkesztéséhez.

Algoritmus: Letároljuk a verseny időpontját és az aktuális rendszeridőt, majd kiszámítjuk a két dátumérték különbségét, amelyből már egyszerű aritmetikai művelettel kalkulálható a hátralévő napok, órák, percek és másodpercek száma.

Eseménykezelés: A setInterval() metódus segítségével beállítunk 1000 ms-os ismétlési időt a számításokat végző függvény hívásához. Ha az aktuális rendszeridő már meghaladja a verseny kezdőidőpontját, akkor viszont leállítjuk a visszaszámoló függvény további hívását.

Megjegyzés: A JavaScript kód a saját rendszeridőhöz () viszonyítja a verseny időpontját. Ezért állítsátok be a pontos időt a számítógépeteken, nehogy lekéssétek az online fordulót.

Kedves Bitfaragó jelöltek!

Az erőgyűjtés akadályain megedződve jutottatok el az összemérés online fordulójához, ahol újabb kihívások várnak rátok. Az itt kitűzött feladatok sikeres megoldásához összesen 3 óra áll majd rendelkezésetekre, ezért a JavaScript ismeretek mellett már az átgondolt programtervezés és az ügyes munkaszervezés is fontos lehet. Az alábbiakban összegyűjtöttünk néhány ötletmorzsát, ami javíthat a bitfaragás hatékonyságán.

1	Programtervezés

A programkészítés, mint tudjuk, a feladat meghatározással kezdődik, ami alapján elkészül programspecifikáció, majd az adatszerkezetek és az alkalmazni kívánt algoritmus meghatározását követően indul a kódolási folyamat. A kódot ezután a gondosan összeállított tesztadatokkal ellenőrizzük, szükség szerint javítjuk, végül összeállítjuk a használathoz és a későbbi karbantartási munkákhoz szükséges dokumentációt. A program későbbi élete során több karbantartási cikluson is áteshet. Gyakorlati tapasztalatok azt mutatják, hogy általában a 3. verzió táján szokott beérni egy implementáció.

A program tervezésekor alapvetően két technika közül választhatunk. A felülről-lefelé (top-down dekompozíció) tervezésnél a feladatot fokozatosan bontjuk részfeladatokra, lépésenként finomítjuk a megoldást, amíg el nem jutunk a kódolható algoritmusig[1][2]. Létezik az alulról-felfelé (bottom-up kompozíció) módszer is. Ebben az esetben a program legalacsonyabb szintjén lévő elemeket készítjük el, majd szintetizáljuk őket, ám ehhez előrelátás és nagy gyakorlat szükséges.

A feladat-meghatározás alapján igyekezzetek behatárolni a szükséges be és kimenő adatokat, illetve segédváltozókat. Ügyeljetek az adatszerkezetek optimális kialakítására. Ne felejtsétek, hogy egy átgondolt adatszerkezet már fél siker.

« Előző | Lap eleje

2	Programmodulok, strukturálás

Az erőgyűjtés 3. részében már hosszabb programokat írtatok. Ahhoz, hogy egy hosszabb kód is átlátható maradjon, a részfeladatok megoldását önálló modulokba szervezzük. "A modul önálló, névvel rendelkező, önmagában értelmezhető programegység"[3], ami elvégzi az általunk megadott bemenő adatok feldolgozását, a program többi moduljával pedig az adatszerkezeten keresztül tartja a kapcsolatot.

A feladatok megoldásánál törekedjetek a jól körülhatárolt részfeladatok meghatározására, amelyeket aztán a gondosan kialakított taktikai terv alapján osszatok fel egymás között.

« Előző | Lap eleje

3	Objektumorientált programozás

Mint, ahogy bizonyára már korábban olvastátok az 1960-as évek második felétől átéltünk egy szoftverkrízist, amelyre hatékony megoldást adott az OOP (Object-oriented programming). "Az objektumorientált megközelítés az objektumok, mint programegységek bevezetésével megszünteti a program kódjának és adatainak szétválasztását. Az objektumok használatával egyszerű szerkezetű, jól kézben tartható programok készíthetők. Az objektumorientált programozás középpontjában az egymással kapcsolatban álló programegységek hierarchiájának megtervezése áll."

"Az adatokat és az adatokon végrehajtható műveleteket egyenrangúan, zárt egységben kezeljük. Ezeket az egységeket objektumoknak nevezzük, mely nem ás, mint az adatok és az adatokat kezelő alprogramok (metódusok) egységbezárása."[3]

Az előző fordulóban bemutatott pathfinder programban már megjelentek OOP elemek az astar algoritmus kódolásában. Érdemes átnézni és átgondolni az ott bemutatott technológia használhatóságát, hiszen alkalmazásával kényelmes és könnyen karbantartható kódhoz juthattok.

« Előző | Lap eleje

4	Hogyan használhatunk külső JavaScript kódokat?

A HTML dokumentumokba a CSS leírásokhoz hasonlóan csatolhatók külső JS file-ok is. A JavaScript 1.1 verziótól kezdve a JavaScript forráskódokat akár önálló állományokban is tárolhatjuk. "Ez akkor lehet hasznos, ha ugyanazt a függvényt több HTML fájlból is szeretnénk elérni. Így csak egyszer kell megadni, ezáltal könnyebben módosítható."[4]

A HTML kódban a script tag src argumentumában hivatkozhatunk külső js file okra.

<!DOCTYPE html>
<html  lang="hu">
<head>
  <script src="myscript.js"></script>
</head>

<body>
  <!-- HTML tartalom -->
</body>
</html>

A külső scriptek használatával a csapattagok akár önálló js file-okban is dolgozhatnak, amelyeket aztán egy közös HTML dokumentumban foghattok össze.

« Előző | Lap eleje

Tesztelés

"A programban akkor is maradhatnak hibák, ha néhány próbafuttatás során látszólag jó eredményt produkál. Lehet, hogy csak olyan eseteket próbáltunk ki, amikor nem derült fény a rejtett hibákra. A rejtett hibákat a program tesztelésével találhatjuk meg. A tesztelést a programkód vizsgálatával kezdjük. Ezt nevezük statikus tesztelésnek. Ekkor ellenőrizzük a deklarációk, a vezérlőszerkezetek helyességét.

A dinamikus tesztelést a program futása során hajtjuk végre. A feketedoboz-módszerek a bemenő és a kimenő adatokat vizzgálják meg. A teszteseteket úgy állítsuk össze, hogy minden lehetséges esetet lefedjenek! Feltétlenül próbálkozzunk érvénytelen adatok bevitelével! A határesetekre is jól működjön a program! A dinamikus tesztelés másik típusát a fehérdoboz-módszerek alkotják. A tesztesetek összeállítása során figyelembe vesszük a program belső szerkezetét. A tesztesetek fedjék le a program összes utasítását. Ha a program több modulból áll, teszteljük a modulokat külön-külön is, egymástól függetlenül."[1]

Teszteléskor a programműködést először vizsgáljuk meg az értelmezési tartományba eső, az értelmezési tartomány határaira eső, és az értelmezési tartományon kívül eső bemenő adatokkal. Ez utóbbi esetben a korrekt hibajelzést ellenőrizhetjük. A teszteléshez érdemes olyan adat- illetve eseménysorokat összeállítani, amelyek a fenti szempontok variációit tartalmazzák.

« Előző | Lap eleje

6	Próbáld ki a megoldást!

Végül gondoljuk át, és próbáljuk ki az bevezetőben tárgyalt feladat megoldását. Az elkészült kódot most belső esemény mozgatja. Figyeljük meg az időzítéskezelést és a dátumkezelő metódusok használatát.

<!DOCTYPE html>
<html  lang="hu">

<head>
  <title>JavaScript visszaszámláló</title>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta name="author" content="fj">
  <style type="text/css" media="screen,projection,print">
    body{ font-family: Arial, Helvetica, sans-serif; margin: auto;}
    h1,p{text-align:center;}
    h1{color:#1f2839; font-size:2.5em;}
  </style>
</head>

<body>

  <h1 style="text-shadow: 6px 6px 2px #d0d0d0;">Visszaszámláló</h1>
  <table id="cdown" style="background:orange; text-align:center;margin: auto;border-color: orange;box-shadow: 10px 10px 5px #d0d0d0;">
    <tr>
      <td id="myevent" style="background:red;color:white;padding:10px;"></td>
    </tr>
    <tr>
      <td id="remain" style="background:lightyellow;color:red;padding:10px;"></td>
    </tr>
  </table>
  <p id="mytime"></p>
  <p>Az összemérés megkezdése után leáll a visszaszámlálás.<br>Indításához állíts be egy új határidőt a<br><em>var comp = new Date(2013,11,7,14,0,0);</em><br>sorban!</p>
  
<script>
  // === Időzítő indítása
  var myVar=setInterval(function(){countDown()},1000);

  // === Határidő beállítása és kiírása a dokumentumban
  var comp = new Date(2013,11,7,14,0,0);
  var sc=comp.toLocaleDateString() +" "+comp.toLocaleTimeString();
  document.getElementById("myevent").innerHTML="<strong style=\"font-size:1.6em;\">Összemérés</strong>";
  
  function countDown() {
    // === Dátumadatok betöltése, eltérés kiszámítása
    var today=new Date();
    if (today<=comp){ 
       var difference = new Date(comp-today);
       difference.setHours(difference.getHours()-1); 

       // === Hátralévő napok kalkulálása
       var days=Math.floor((comp.getTime()-today.getTime())/(1000*60*60*24));

       // === Kiiratás a dokumentumban
       var s="<h1 style=\"color:red;font-size:2.4em;\">Még ";
       if (days>0){
          s+=days+" nap <br>";
       }
       s+=difference.toLocaleTimeString()+"</h1>";
       document.getElementById("remain").innerHTML=s+sc;
	
       document.getElementById("mytime").innerHTML=today.toLocaleDateString() +" "+today.toLocaleTimeString();
    }
    // === Határidő utáni közlemény
    else{ 
      document.getElementById("remain").innerHTML="<h1 style=\"font-size:2.2em;\">Bakonyi<br>Bitfaragó<br>Bajnokság</h1>"+sc;
      clearInterval(myVar);
    }
  }

// Teszteléshez: http://countdownjs.org/demo.html
</script>
  
</body>
</html>

« Előző | Lap eleje

4. Visszaszámlálás

Kedves Bitfaragó jelöltek!

Programtervezés

Programmodulok, strukturálás

Objektumorientált programozás

Hogyan használhatunk külső JavaScript kódokat?

Tesztelés

Próbáld ki a megoldást!

Hivatkozások, felhasznált források