Související články pomocí JavaSriptu

Pokud vytváříme seriál spolu souvisejících článků, je obvykle rozumné každý samostatný článek opatřit na jeho konci či začátku „obsahem“, tedy odkazy na související články. Ukažme si, jak lze vše jednoduše ošetřit pomocí JavaScriptu.

Pokud seriál článků vzniká postupně, na konci prvého dílu obvykle nevíme, kolik dílů bude následovat, případně jak se budou jmenovat. Ostatně ani fyzicky neexistují, a tak i případné odkazy by vedly ke známé hlášce „Stránku nelze zobrazit“, případně „Server nelze nalézt“. Problém lze vyřešit pomocí „dynamického“ obsahu jednoduchým skriptem. Celé řešení sestává z deklarace pole popisujícího obsah série článků a funkce DrawContent() pro zobrazení obsahu.

Pole popisu obsahu

  var jméno_pole = new Array(
    ‚název_serie_článků‘,’referenční_jméno‘,
    ‚soubor_článku_1′,’název_článku_1‘,
    ‚soubor_článku_2′,’název článku_2‘,
    ….
    ‚soubor_článku_n‘,’název_článku_n‘);

Příklad použití (jako příklad jsem použil část jednoho seriálu ze serveru Interval.cz):

  var DHTML01 = new Array(
    ‚Programujeme DHTML aplikace‘,’DHTML01′,
    ‚Rozluštěné křižovatky DHTML.htm‘,’Rozluštěné křižovatky DHTML‘,
    ‚Programujeme DHTML aplikace – dokument.htm‘,’Dokument‘,
    ‚Programujeme DHTML aplikace – obsah.htm‘,’Obsah‘,
    ‚Programujeme DHTML aplikace – efekty CSS.htm‘,’Efekty CSS‘,
    ‚Programujeme DHTML aplikace – interakce s uživatelem.htm‘,’Interakce s uživatelem‘
    );

Ve výše uvedeném poli jsou pro každý článek vyhrazeny dvě po sobě jdoucí buňky. Prvá obsahuje odkaz na článek (jméno souboru), druhá pak uvádí název článku, tak jak bude uveden v obsahu. Výjimkou jsou prvé dvě položky pole, kde prvek[0] udává celkový název celé série článků a prvek[1] umožňuje realizovat skok na obsah (funkce zobrazení obsahu generuje element <A name='referenční_jméno'>, tedy našem příkladě <A name="DHTML01">).

Pole umístíme do externího javascriptového souboru, který nazveme například Content.js. (V příkladu je uvedeno jméno_pole a referenční_jméno stejné, DHTML01. To samozřejmě není nutné.)

Funkce zobrazení obsahu

Funkci nazveme DrawContent() a umístíme ji do stejného externího javascriptového souboru Content.js jako deklaraci pole popisu obsahu:

function DrawContent(List)
  {
  dn = document.URLUnencoded;
  dn = dn.substr(dn.lastIndexOf(‚\\‘) + 1);
  im = List.length;
  is = 0;
  for (I = 2; I <= im; I = I+2)
    {
    if (dn == List[I])
      {
      is = I;
      break;
      }
    }
  document.write(‚<a name=“‚ + List[1] + ‚“></a>
  if (is == 0)
    {
    document.write(‚<h3>‘ + List[0] + ‚</h3>‘);
    }
  document.write(‚<ul>‘);
  for (I = 2; I < im; I = I+2)
    {
    if (I == is)
      {
      document.write(‚<li>‘ + List[I+1] + ‚</li>‘);
      }
    else
      {
      document.write(‚<li><a href=“‚ + List[I] + ‚“>‘ + List[I+1] + ‚</a&gt</li>‘);
      }
    }
  document.write(‚</ul>‘);
  }

Skript nejprve zjistí jméno dokumentu, které uloží do proměnné dn, a poté počet prvků pole s definicí obsahu (proměnná im).

V prvém cyklu for skript zjišťuje, zda dokument, v němž je použit, je součástí seriálu. Pokud ano, uloží jeho index v poli do proměnné is. Pokud ne (v is zůstává 0), jedná se zřejmě o „hlavní“ dokument seriálu (obsahuje „obsah“ avšak neobsahuje vlastní článek). V tom případě se generuje nadpis celé série článků. V každém případě se generuje element <a name="referenční_jméno">. Tento element pak umožňuje realizovat „skok na obsah“ pomocí <a href=#referenční_jméno>, podle našeho příkladu tedy <a href="#DHTML01">. Pokud necháme obsah zobrazit na více místech dokumentu (například na začátku a na konci), vygeneruje se sice několik identických značek <a name="...">, ale pokud se přemisťujeme na obsah, je nám obvykle lhostejno který.

Následuje druhý cyklus for, v němž se generuje netříděný seznam s názvy článků, vložených do elementů <a>, odkazujících na soubor článku. Dříve uložená hodnota proměnné is se využije k výjimce – odkaz dokumentu sám na sebe nemá valný smysl a proto je vynecháno vytvoření elementu <a>.

Do dokumentu, ve kterém chceme zobrazit obsah série článků, včleníme soubor Content.js do sekce HEAD pomocí příkazu:

<script language=“JavaScript“ type=“text/javascript“ src=“content.js“></script>

Na místo, kde chceme zobrazit obsah, vložíme volání javascriptové funkce DrawContent():

<script type=“text/javascript“>
  <!–
  DrawContent(jméno_pole);
  // –>
</script>

Zde jméno_pole nahradíme konkrétním jménem pole s definicí obsahu série článků, podle našeho příkladu bude v příslušném řádku DrawContent(DHTML01);.

Pokud vložení skriptu do dokumentu článku provedeme již při jeho psaní, pak jedinou věc, kterou musíme udělat po dopsání nového článku série, je doplnit další dva prvky pole definice obsahu (se jménem souboru článku a názvem článku) v souboru Content.js. Obsah se pak ve všech článcích seriálu aktualizuje automaticky.

V jednom skriptovém souboru může být pochopitelně i několik polí s definicemi obsahů různých sérií článků. Funkci DrawContent() je samozřejmě možné úpravami a rozšířeními snadno přizpůsobit na „míru“ pro konktétní redakční systém. Například za vlastním výpisem může být vygenerován odkaz na hlavní dokument seriálu, na vrchol vlastního dokumentu, na úvodní stránku celého webu a podobně.