Kurs JavaScript (cz. 4): Dynamiczne elementy HTML

Jeśli potrafimy bez ściągawki wykonać zwijanie i rozwijanie akapitu z rozszerzona treścią, możemy być z siebie dumni. Oznacza to, że zrozumieliśmy istotę onclick i zmiany właściwości stylów danych tagów w dokumencie HTML. Umiemy też pobrać zawartość każdego znacznika HTML. W tym odcinku nauczymy się uzyskiwać efekty, które już znamy, lecz trochę innymi sposobami.

Powtórka z rozrywki

Zacznijmy od tego, co już wiemy. Mamy wiec
dokument HTML (listing 1). Tym razem zmieni się
w nim jeden element, aczkolwiek nie powinien
sprawić problemów.

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<title>Strona z newsem</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-2\" />
<!-- Nasz kod Javascript: -->
<script type=\"text/javascript\">
function PokazAkapit()
{
  var akapit = document.getElementById(\'more\');
  var odnosnik = document.getElementById(\'link\');
  var view = akapit.style.display;
  if (view == \"block\")
  {
    odnosnik.innerHTML = \"wiecej\";
    akapit.style.display = \"none\";
  }
  if (view == \"none\")
  {
    odnosnik.innerHTML = \"schowaj\";
    akapit.style.display = \"block\";
  }
}
</script>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuereac. <a href=\"#\" onclick=\"PokazAkapit();\" id=\"link\">wiecej</a></p>
<p id=\"more\" style=\"display: none;\">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div></body></html>

Trochę teorii

Klikając więcej lub schowaj skrypt wie jaki paragraf
pokazać bądź ukryć. Zapisane jest to
w funkcji {stala}PokazAkapit{/stala}:

1	var akapit = document.getElementById(\'more\');

Dowiadujemy się z niego, ze będziemy operować
na akapicie o id=”more”, na co wskazuje użycie
w {stala}document.getElementById();{/stala} argumentu „more”.
Tym sposobem jedna funkcja, czyli kilkanaście linijek
kodu, odpowiada za zwiniecie tylko jednego akapitu.

Można nadać jej większą uniwersalność, by
zwijał się i rozwijał dowolny akapit o określonym id,
jaki podamy przy wywołaniu zdarzenia onclick.
Aby to zrealizować, nasza funkcja musi wiedzieć,
który akapit ma zwinąć i rozwinąć.

Trzeba
wiec jej podać id paragrafu
{html}

{/html}, jaki ma się
pokazać lub schować po
kliknięciu linka za to odpowiedzialnego.
Podobna funkcjonalność
można uzyskać poprzez
przekazanie wspomnianego
identyfikatora akapitu jako
argumentu funkcji. Przypomnijmy
wiec, kiedy wywołujemy
{stala}PokazAkapit{/stala}:

1	<a href=\"#\" onclick=\"PokazAkapit();\" id=\"link\">wiecej</a>

A dokładniej w tym miejscu:

1	onclick=\"PokazAkapit();\"

Dodanie takiego kawałka kodu, jako atrybutu jakiegoś
tagu, powoduje wywołanie funkcji {stala}PokazAkapit{/stala}
po kliknięciu właśnie tego tagu. W aktualnej
postaci funkcja {stala}PokazAkapit{/stala} sama decyduje, co pokazać.
W końcu rozkazaliśmy jej poprzez wpisanie
kilku linijek zwijać i rozwijać akapit o id=”more”.

Dodanie nowego akapitu

Gdy chcemy wybrać, który akapit rozwinąć, dodajemy
kolejny paragraf do naszego dokumentu:

1	<p id=\"more_second\" style=\"display: none;\">Vivamus pretium fringilla metus.Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>

Jest on również domyślnie schowany (display: none;), a jego id jest równe more_second. Dokument, po tej operacji, wygląda jak na listingu 2.

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<title>Strona z newsem</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-2\" />
<!-- Nasz kod Javascript: -->
<script type=\"text/javascript\">
function PokazAkapit()
{
  var akapit = document.getElementById(\'more\');
  var odnosnik = document.getElementById(\'link\');
  var view = akapit.style.display;
  if (view == \"block\")
  {
    odnosnik.innerHTML = \"wiecej\";
    akapit.style.display = \"none\";
  }
  if (view == \"none\")
  {
    odnosnik.innerHTML = \"schowaj\";
    akapit.style.display = \"block\";
  }
}
</script>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuereac. <a href=\"#\" onclick=\"PokazAkapit();\" id=\"link\">wiecej</a></p>
<p id=\"more\" style=\"display: none;\">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
<p id=\"more_second\" style=\"display: none;\">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div></body></html>

Funkcje i argumenty

Naturalnie, skrypt nadal rozwija pierwszy schowany paragraf. Wyedytujemy
wiec link więcej, by jako argument funkcji {stala}PokazAkapit{/stala}, wstawiony
został identyfikator paragrafu, który chcemy rozwinąć:

1	<a href=\"#\" onclick=\"PokazAkapit (\'more_second\');\' id=\"link\">wiecej</a>

Abyśmy lepiej zrozumieli to, co się zmieniło, wyróżnimy kawałek kodu:

1	onclick=\"PokazAkapit(\'more_second\');\"

Niestety, dodanie powyższej treści nic nam nie dało. Skrypt nie będzie
działał, a w najlepszym wypadku ujrzymy błąd w przeglądarce.
Funkcja {stala}PokazAkapit{/stala} zapisana jest w taki sposób:

function PokazAkapit()
{
  var akapit = document.getElementById(\'more\');
  var odnosnik = document.getElementById(\'link\');
  var view = akapit.style.display;
  if (view == \"block\")
  {
    odnosnik.innerHTML = \"wiecej\";
    akapit.style.display = \"none\";
  }
  if (view == \"none\")
  {
    odnosnik.innerHTML = \"schowaj\";
    akapit.style.display = \"block\";
  }
}

i, jak sami widzimy, nie zawiera nic pomiędzy nawiasami: {stala}function PokazAkapit(){/stala}.
Z drugiej strony, w naszym dokumencie mamy zdefiniowane
wywołanie {stala}PokazAkapit{/stala} z wartością w nawiasach (argumentem):

1	onclick=\"PokazAkapit(\'more_second\');\"

Musimy w tej sytuacji dać możliwość funkcji {stala}PokazAkapit{/stala} pobierania
wartości argumentu przy jej wywołaniu. Oto ona:

1 2	function PokazAkapit(id_paragrafu) {

W ten sposób możemy łatwo odwołać się do wartości id przekazanej
w onclick. W tym przypadku jest ona równa {stala}more_second{/stala}. Aby
upewnić się, ze wszystko działa, niech funkcja {stala}PokazAkapit{/stala} ma następującą
postać:

function PokazAkapit(id_paragrafu)
{
  alert(id_paragrafu);
  var akapit = document.getElementById(\'more\');
  var odnosnik = document.getElementById(\'link\');
  var view = akapit.style.display;
  if (view == \"block\")
  {
    odnosnik.innerHTML = \"wiecej\";
    akapit.style.display = \"none\";
  }
  if (view == \"none\")
  {
    odnosnik.innerHTML = \"schowaj\";
    akapit.style.display = \"block\";
  }
}

{html}function Costam(argument) { }{/html}

Definiując w ten sposób funkcję Costam określamy, że aby wywołać
ją (np. w onclick), należy podać też argument.
Przykładowe wywołanie tej funkcji wyglądałoby następująco:

{html}onclick=”Costam(‘lalala’);” {/html}

Dzięki temu wewnątrz funkcji (pomiędzy klamrami) mamy do dyspozycji
zmienną o nazwie argument, która ma wartość lalala. To tak,
jakbyśmy we wnętrzu tej samej funkcji napisali:

{html}var argument = „lalala”;{/html}

Dodaliśmy to:

1	alert(id_paragrafu);

Powyższy kod był dodany, by wyświetlić w wyskakującym okienku
to, co jest przekazywane pod postacią zmiennej id_paragrafu. Jak widzimy,
pokaże się more_second.

Teraz, kiedy pod postacią zmiennej id_paragrafu mamy dowolny
identyfikator, możemy pobrać odnośnik do niego poprzez funkcje dokument.
{stala}getElementById();{/stala}. Musimy tylko podać jej argument, jakim będzie
zmienna id_paragrafu. Ta z kolei ma wartość jakiegoś id, wiec możemy
bez problemów skorzystać z {stala}document.getElementById(){/stala}. Usuwamy
poprzednio dodany alert(); i dodajemy to, co nas interesuje:

1	var akapit = document.getElementById(id_paragrafu);

W tym przypadku nie otaczamy słówka id_paragrafu apostrofami
czy tez cudzysłowami, ponieważ jest to zabronione i zakończyłoby się
błędem.

function PokazAkapit(id_paragrafu)
{
  var akapit = document.getElementById(id_paragrafu);
  var odnosnik = document.getElementById(\'link\');
  var view = akapit.style.display;
  if (view == \"block\")
  {
    odnosnik.innerHTML = \"wiecej\";
    akapit.style.display = \"none\";
  }
  if (view == \"none\")
  {
    odnosnik.innerHTML = \"schowaj\";
    akapit.style.display = \"block\";
  }
}

Dokument wygląda natomiast tak jak na listingu 3.

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<title>Strona z newsem</title>
<meta http-equiv=\"Content-Type\" content=\"text/html;charset=iso-8859-2\" />
<!-- Nasz kod Javascript: -->
<script type=\"text/javascript\">
function PokazAkapit(id_paragrafu)
{
  var akapit = document.getElementById(id_paragrafu);
  var odnosnik = document.getElementById(\'link\');
  var view = akapit.style.display;
  if (view == \"block\")
  {
    odnosnik.innerHTML = \"wiecej\";
    akapit.style.display = \"none\";
  }
  if (view == \"none\")
  {
    odnosnik.innerHTML = \"schowaj\";
    akapit.style.display = \"block\";
  }
}
</script>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuereac.
<a href=\"#\"onclick=\"PokazAkapit(\'more_second\');\" id=\"link\">wiecej</a></p>
<p id=\"more\" style=\"display: none;\">Vivamus pretium fringilla metus.Praesent a enim eu metus scelerisque tincidunt. In auctor lorem etleo.</p>
<p id=\"more_second\" style=\"display: none;\">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div></body></html>

W ten sposób możemy użyć naszej funkcji na paragrafie o id=”more_
second”. Podstawimy w:

1	onclick=\"PokazAkapit(\'more_second\');\"

inne wartości, oczywiście po uprzednim dodaniu odpowiednich tagów
z identyfikatorami, by przekonać się o potędze zastosowanego kodu.
Popatrzmy na jeszcze jeden dokument HTML prezentujący istotę
problemu – listing 4.

<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\" lang=\"pl-PL\">
<head>
<title>Strona z innym przykładem argumentów funkcji</title>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=iso-8859-2\" />
<!-- Nasz kod Javascript: -->
<script type=\"text/javascript\">
function Pokaz(costam_costam)
{
  alert(costam_costam);
}
</script>
</head>
<body>
<div>
<a href=\"#\" onclick=\"Pokaz(\'To jest tekst ktory wyswietli sie w okienku\');\">show me it!</a>
</div></body></html>

Sprawa jest prosta, wywołujemy w {stala}onclick=”Pokaz(‘To jest tekst,
który wyświetli się w okienku’);”{/stala} funkcje {stala}Pokaz{/stala}, dla której przygotowaliśmy
jeden argument pod postacią zdania To jest tekst, który wyświetli
się w okienku. Po kliknięciu linka show me it! ukaże się okienko właśnie
z tym zdaniem.

Widzimy wiec, ze to, co przekażemy do funkcji, jest
w niej dostępne pod postacią zmiennej. W tym przypadku nazwaliśmy
ja {stala}costam_costam{/stala}. Spróbujmy zmieniać argument w onclick, by przekonać
się, ze to naprawdę działa!

Może Cię zainteresować:

O autorze

Tomasz Galanciak

Więcej artykułów autorstwa Tomasz Galanciak »

Internet Maker