Slabikář JavaScriptu – příklady

5. června 2002

•

Než budeme pokračovat v detailnějším popisu vytváření a používání dynamických efektů s využitím JavaScriptu, ukažme několik praktických příkladů. Ty demonstrují malou část možností, které vývojář má. Pro větší názornost jsou příklady opatřeny komentáři přímo v kódu. Všechny příklady jsou vyzkoušeny v prohlížečích MSIE 5.5 SP 2 a Netscape 7.0 Preview Release 1.

První jednoduchý příklad podbarví červeně všechna povinná textová pole formuláře. Příklad předpokládá, že id povinného pole bude vždy začínat trojicí písmen „req“.

Druhý příklad na stisknutí tlačítka přidá do existující tabulky dva řádky. Pro názornost je pro každý řádek použit jiný způsob vložení. V prvním případě jsou použity metody insertRow a insertCell, jejichž argumentem je index, jenž udává pořadí, kam bude řádek (resp. buňka) přidán.

Poslední řádek je přidáván obecným způsobem, kterým mohou být do dokumentu přidávány jakékoli prvky (Nodes). V tomto případě je zapotřebí přesně dodržovat nadřízenost a podřízenost prvků. Pokud bychom se metodou appendChild pokusili vložit řádek (tr) přímo do tabulky (table) a nikoli jejího těla (tbody), bude výsledek záviset na použitém internetovém prohlížeči a ne vždy bude odpovídat očekávání. Příklad si můžete předem vyzkoušet.

<html>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
<script language=“JavaScript“>
function Pridej() {
/* Přidání prvního řádku */
  // proměnná tab odkazuje na tabulku
  var tab=document.getElementById(‚tabulka‘);
  // vložení řádku
  var radek=tab.insertRow(tab.rows.length);
  // vložení buňky
  var bunka=radek.insertCell(0);
  // text buňky
  bunka.innerHTML=“Položka 2″;

/* Přidání druhého řádku */
  // proměnná tb odkazuje na tělo tabulky
  var tb=tab.tBodies[0];
  var newRow = document.createElement(‚TR‘);
  // vložení řádku
  tb.appendChild(newRow);
  var newCell = document.createElement(‚TD‘);
  // vložení buňky
  newRow.appendChild(newCell);
  var newText = document.createTextNode(‚Položka 3‘)
  // text buňky
  newCell.appendChild(newText);
}
</script>
</head>

<body>
<table border=“1″ id=“tabulka“>
  <tr>
    <td>Položka</td>
  </tr>
</table>
<input type=“button“ value=“Přidat“ onClick=“Pridej()“>
</body>
</html>

Třetí příklad předvádí DHTML formu ovládacího prvku TabStrip (karta se záložkami), který známe z desktopových aplikací. Příklad si můžete předem vyzkoušet.

<html>
<head>
<meta http-equiv=“Content-Type“ content=“text/html; charset=windows-1250″>
<STYLE TYPE=“text/css“>
/*styl tabulky*/
.tab_div {
padding : 10px;
background-color : #cccccc;
border-left : #888888 2px solid;
border-bottom : #888888 2px solid;
border-right : #888888 2px solid;
font-family : Arial;
font-size : 12px;
}
/*styl stlačené záložky */
.on {
padding : 1px;
border-left : 0px;
border-top : #aaaaaa 2px solid;
border-right : 0px;
cursor : hand;
font-weight : bold;
text-align : center;
font-family : Arial;
font-size : 12px;
}
/*styl nestlačené záložky */
.off {
font-weight : normal;
padding : 1px;
border-left : #ffffff 1px solid;
border-top : #ffffff 1px solid;
border-bottom : #888888 2px solid;
border-right : #888888 1px solid;
cursor : hand;
text-align : center;
font-family : Arial;
font-size : 12px;
}
</style>
<script language=“JavaScript“>
function Table (tab) {
  // pořadové číslo záhlaví
  var cislo=tab.substring(3,4)
  // DIV tagy dokumentu
  var deti=document.getElementsByTagName(„DIV“)
  // kolekce buněk prvního řádku tabulky
  var zahlavi=document.getElementById(‚tabulka‘).rows[0].cells
  // cyklus přes všechny tagy DIV
  for (i=0; i<deti.length; i++) {
    // zneviditelnit všechny DIV tagy
    strTemp=deti[i].id
    document.getElementById(strTemp).style.display=“none“;
    // všechna tlačítka nastavit na neaktivní
    zahlavi[i].className=“off“
  }
  // zviditelnit příslušný DIV
  document.getElementById(tab).style.display=“block“;
  // příslušné tlačítko nastavit jako aktivní
  document.getElementById(‚tabulka‘).rows[0].cells[cislo].className=“on“
}
</script>
</head>
<body>

<TABLE WIDTH=270 CELLSPACING=0 CELLPADDING=0 ID=’tabulka‘ class=’tab_div‘ BORDER=0>
  <tr>
    <td onClick=“Table (‚Tab0‘)“ class=“on“>První</td>
    <td onClick=“Table (‚Tab1‘)“ class=“off“>Druhý</td>
    <td onClick=“Table (‚Tab2‘)“ class=“off“>Třetí</td>
    <td onClick=“Table (‚Tab3‘)“ class=“off“>Čtvrtý</td>
  </tr>
  <TR><TD colspan=4>
    <div id=“Tab0″>
      První záložka
    </div>
    <div id=“Tab1″ style=“display:none“>
      Druhá záložka
    </div>
    <div id=“Tab2″ style=“display:none“>
      Třetí záložka
    </div>
    <div id=“Tab3″ style=“display:none“>
      Čtvrtá záložka
    </div>
    <span>
      Obecný neměnný text
    </span>
  </TD></TR>
</TABLE>
</body>
</html>