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.

- Reklama -

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuereac. wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.

Trochę teorii

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

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}:

wiecej

A dokładniej w tym miejscu:

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:

Vivamus pretium fringilla metus.Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuereac. wiecej
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.

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ąć:

wiecej

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

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):

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:

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\";
  }
}

Dodaliśmy to:

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:

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.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuereac.
wiecej
Vivamus pretium fringilla metus.Praesent a enim eu metus scelerisque tincidunt. In auctor lorem etleo.
Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.

W ten sposĂłb moĹźemy uĹźyć naszej funkcji na paragrafie o id=\”more_
second\”. Podstawimy w:

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.

show me it!

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!