Tantárgy:Webes rendszerek kliens oldali programozása 2. [IM3314, WP3316]
Tananyag:XML
Feladat:Katalógus lapozás megvalósítása

Megoldás forráskódja

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
   <head>
      <title>Katalógus lapozás megvalósítása</title>
      <meta name="author" content="Tóth Péter" />
      <meta name="copyright" content="© 2012, NYME SEK" />
      <meta http-equiv="date" content="2012-09-14" />
      <meta name="revised" content="Tóth Péter, 14/09/2012" />
      <meta name="description" content="XML - Katalógus lapozás megvalósítása" />
      <meta http-equiv="content-language" content="hu" />
      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
      <script type="text/javascript">
         <!--
         // Globális változóban kell tárolni a könyvek összes adatát ill. a formázott megjelenést
         var aKonyvek=new Array();
         // és az éppen megjelenített könyv index-ét
         var idx=0;
         // Könyvek lapozása jobbra/előre a listában
         function funcLapozElore(){
            if(idx<aKonyvek.length-1)
               // aktuális index növelése
               idx=idx+1;
            else
               // Ha a lista végére értünk, akkor az elsővel folytatjuk a megjelenítést
               idx=0;
            // Aktuális könyv adatainak megjelenítése
            document.getElementById("idKonyv").innerHTML=aKonyvek[idx];
            }
         // Könyvek lapozása balra/hátra a listában
         function funcLapozHatra(){
            if(idx>0)
               // aktuális index csökentése
               idx=idx-1;
            else
               // Ellőnőrizzük, hogy a lista elejére értünk-e, mert akkor ugrás a lista végére
               idx=aKonyvek.length-1;
            // Aktuális könyv adatainak megjelenítése
            document.getElementById("idKonyv").innerHTML=aKonyvek[idx];
            }
         // OnLoad
         function funcStart(){
            // XML fájl betöltése
            if(window.XMLHttpRequest)
               var xmlhttp=new XMLHttpRequest();
            else
               var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            xmlhttp.open("GET","konyvek.xml",false);
            xmlhttp.send();

            // Könyvek adatinak kiolvasása
            var xmlDoc=xmlhttp.responseXML.getElementsByTagName("konyv");
            // Végigmegyünk az összes könyvön és előre elkészítjük a megjelenési formátumot
            for(i in xmlDoc)if(xmlDoc[i].nodeType){
               // Egy könyv formázott megjelenítének összeállítása
               var txt="<table>";
               for(j in xmlDoc[i].childNodes)if(xmlDoc[i].childNodes[j].nodeType)if(xmlDoc[i].childNodes[j].nodeType!=3)
                  txt+="<tr><td>"+xmlDoc[i].childNodes[j].nodeName+"</td><td>"+xmlDoc[i].childNodes[j].childNodes[0].nodeValue+"</td></tr>";
               txt+="</table>";
               // A tárolóban már a megjelenést tároljuk le, így amikor lapozunk csak egyszerűáen meg kell jeleníteni, nem kell a formázással foglalkozni
               aKonyvek.push(txt);
               }
            // Első könyv adatainak megjelenítése
            document.getElementById("idKonyv").innerHTML=aKonyvek[idx];
            }
         -->
      </script>
   </head>
   <body onload="funcStart()">
      <div>
         <div id="idKonyv"></div>
         <br/>
         <input type="button" value="hátra" onclick="javascript:funcLapozHatra()" />
         <input type="button" value="előre" onclick="javascript:funcLapozElore()" />
      </div>
   </body>
</html>