Kurs JavaScript (cz. 3): Dynamiczne elementy HTML

W poprzednim odcinku po kilku modyfikacjach otrzymaliśmy skrypt, który powoduje zwinięcie bądź rozwinięcie akapitu z rozszerzoną treścią wiadomości. Uzupełnijmy go zmianą wartości linka Więcej – kiedy akapit będzie schowany, będzie ona równa „więcej”, w przeciwnym razie przybierze wartość „schowaj”.Dynamiczne elementy HTML

Do tej pory poznaliśmy kilka niezwykle pożytecznych elementów języka JavaScript.:

{stala}document.getElementById(id);{/stala} – pozwala dostać się do każdego tagu o podanym {stala}id{/stala} w dokumencie HTML. Na przykład:

1	document.getElementById(\'newsy\');

Poprawnym zapisem jest również:

1	document.getElementById(\"newsy\");

W miejsce {stala}id{/stala} możemy tez podać zmienna o wcześniej przypisanej wartości:

1 2	var jakies_id = \"more\"; var akapit = document.getElementById (jakies_id);

{stala}onclick();{/stala} – funkcja dająca znać przeglądarce, że kliknęliśmy dany tag HTML, któremu wcześniej nadaliśmy atrybut:

1	onclick=\"tutaj jakis kod JS\"

Fachowo funkcje typu {stala}onclick{/stala} nazywamy zdarzeniem. Jest jeszcze kilka podobnych funkcji obsługujących określone zachowania użytkownika, np. naprowadzenie wskaźnika myszy na jakiś element. Wykorzystamy je w kolejnych przykładach, prezentujących miedzy innymi rozwijane menu. Przykłady {stala}onclick{/stala} dla przypomnienia wiadomości:

1	<span onclick=\"kod JS\"></span>

lub

1	<div onclick=\"kod JS\"></div>

i wiele więcej…

Umieszczanie {stala}onclick{/stala} jako atrybut tagu jest niewskazane przez W3C – nie jest strict dla dokumentów XHTML. W następnych częściach dowiemy się, jak rozwiązać ten problem.

{stala}alert();{/stala} – wbudowana funkcja języka Java-Script, która pozwala wyświetlić okienko z wpisaną treścią jako argument. W połączeniu z {stala}onclick{/stala} można wykorzystać ją następująco (rys. 1):

1	<a href=\"#\" onclick=\"alert(\'WIELKI TEST OKIENKA!\');\">klik</a>

Wróćmy do naszego newsa. Tym razem zajmiemy się linkiem:

1	<a href=\"#\" onclick=\"PokazAkapit();\">więcej</a>

który wygląda tak jak na listingu 1.

<!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 view = akapit.style.display;
   if (view == \"block\")
   {
   akapit.style.display = \"none\";
   }
   if (view == \"none\")
   {
   akapit.style.display = \"block\";
   }
   }
</script>
</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href=\"#\" onclick=\"PokazAkapit();\">więcej</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>

Ustalamy plan działania

Postanowiliśmy, że po kliknięciu linka więcej zmieni się jego wartość na {stala}zwiń/schowaj{/stala}. Załóżmy, że w tym wypadku wybieramy jedno słówko, np. {stala}schowaj{/stala}.

Edytowaliśmy już wartości w JavaScripcie, a konkretnie właściwości stylów paragrafu o {stala}id=”more”{/stala}. Zastosujemy wiec prosta analogie:

nadamy linkowi {stala}id=”link”{/stala},
pobierzemy do zmiennej o nazwie {stala}odnosnik{/stala} odwołanie do naszego linka {stala}więcej{/stala} (analogicznie robiliśmy to ze zmienną {stala}akapit{/stala}, do której pobieraliśmy odwołanie do paragrafu z rozszerzona treścią newsa),
pobierzemy zawartość (wszystko pomiędzy tagami) linka (nowość w naszym kursie),
zmienimy ją w zależności od tego, kiedy akapit {stala}id=”more”{/stala} będzie miał {stala}display: none{/stala} bądź {stala}display: block{/stala}.

Krok po kroku…

Dokonajmy więc poprawek w naszym dokumencie według powyższego planu. Na początek dodajemy identyfikator {stala}id=”link”{/stala}:

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

Następnie pora wzbogacić funkcje {stala}PokazAkapit{/stala} o nowa zmienną, której nazwa to {stala}odnosnik{/stala}. Wywoływana jest ona po kliknięciu linka {stala}więcej{/stala} i przeglądarka wykonuje jej (funkcji) poszczególne instrukcje od góry do dołu.

1	var odnosnik = document.getElementById (\'link\');

Po dodaniu tej linijki funkcja wygląda tak:

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

Mamy już zdefiniowane trzy zmienne. Dwie pierwsze są odnośnikami do konkretnych tagów naszego dokumentu HTML, a trzecia, {stala}view{/stala}, przechowuje wartość {stala}display{/stala} stylów paragrafu, do którego odwołujemy się używając zmiennej {stala}akapit{/stala}.

Pobieranie zawartości tagów HTML

Pora na punkt drugi, czyli pobranie zawartości naszego linka. Interesuje nas wszystko, co jest pomiędzy tagami {stala}{/stala}. Zastosujemy tutaj małą analogię. Tak jak {stala}style{/stala} mogliśmy wyciągnąć stosując {stala}style.jakas_wlasciwosc{/stala}, tak wartość danego tagu można otrzymać stosując {stala}innerHTML{/stala}. Popatrzmy:

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

Dodaliśmy jedną linijkę:

1	alert(odnosnik.innerHTML);

Dzięki niej oprócz schowania i pokazania akapitu z rozszerzoną treścią pokazuje się również okienko o treści {stala}więcej{/stala}.

innerHTML to właściwość każdego tagu HTML, która zawiera wszystko, co jest pomiędzy nim (w tym inne tagi). Aby się do niej dostać, należy najpierw pobrać odnośnik do danego tagu. Na przykład:

{html}var odnosnik_do_akapitu = document.getElementById(‘akies_id’);{/html}
{html}alert(odnosnik_do_akapitu.innerHTML);{/html}

Powyższy kod wyświetli okienko z zawartością jakiegoś tagu {html}

zawartosc

{/html} o {html}id=”jakies_id”{/html}, na przykład:

{html}

zawartosc

{/html}

Jak widać (rys. 2), {stala}innerHTML{/stala} rzeczywiście przechowuje zawartość tagu:

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

Nie interesuje nas jednak okienko alert, ale zmiana zawartości linka. Usuwamy więc kod z odwołaniem do {stala}alert();{/stala}, traktując go jako ciekawostkę.

Zmiana zawartości tagów HTML

Jak wiadomo, nasz link pozwalający wyświetlić pozostałą cześć wiadomości, musi się zmieniać odpowiednio do ustawionego {stala}display{/stala} dla akapitu {stala}id=”more”{/stala}. Jeśli ten będzie ustawiony na {stala}block{/stala}, link przybierze postać {stala}”więcej”{/stala}, jeśli na {stala}none{/stala} – {stala}”schowaj”{/stala}. Te teoretyczna sytuacje mamy już w kodzie z poprzedniego odcinka:

var view = akapit.style.display;
   if (view == \"block\")
   {
   akapit.style.display = \"none\";
   }
   if (view == \"none\")
   {
   akapit.style.display = \"block\";
   }

Musimy teraz dodać możliwość zmiany wartości naszego linka.

var view = akapit.style.display;
if (view == \"block\")
   {
   odnosnik.innerHTML = \"więcej\";
   akapit.style.display = \"none\";
   }
   if (view == \"none\")
   {
   odnosnik.innerHTML = \"schowaj\";
   akapit.style.display = \"block\";
}

Dwie linijki, które dodaliśmy, załatwiają nam sprawę. Są to kolejno: {stala}odnosnik.innerHTML = „więcej”{/stala}; oraz {stala}odnosnik.innerHTML = „schowaj”;{/stala}.

Można to przetłumaczyć w następujący sposób: jeśli ukrywamy akapit ({stala}akapit.style.display = „none”;{/stala}), link przybiera postać więcej ({stala}odnosnik. innerHTML = „więcej”;{/stala}). Jeśli natomiast pokazujemy akapit ({stala}akapit.style.display = „block”;{/stala}), po następnym kliknięciu on zniknie, więc link przybiera postać {stala}”schowaj”{/stala} ({stala}odnosnik. innerHTML = „schowaj”;{/stala}). Oznaczamy tym samym, że następne klikniecie będzie „chowało” akapit.

Finisz

Teraz nasza funkcja {stala}PokazAkapit{/stala}, która wywołujemy po kliknięciu linka {stala}więcej{/stala}, wygląda tak:

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

A dokument HTML jak na listingu 2 (rys. 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()
   {
   var akapit = document.getElementById(\'more\');
   var odnosnik = document.getElementById(\'link\');
   var view = akapit.style.display;
   if (view == \"block\")
   {
   odnosnik.innerHTML = \"więcej\";
   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, posuere ac.<a href=\"#\" onclick=\"PokazAkapit();\" id=\"link\">więcej</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>

Mechanizm działa jak trzeba, a dzięki {stala}innerHTML{/stala} możemy wyświetlić zawartość każdego tagu HTML o określonym {stala}id{/stala}. Na razie wygląda na to, że jesteśmy uzależnieni od identyfikatorów, aczkolwiek nie jest to jedyny sposób dostania się do elementów dokumentu HTML.

Może Cię zainteresować:

O autorze

Tomasz Galanciak

Więcej artykułów autorstwa Tomasz Galanciak »

Internet Maker