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

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\”.

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:

document.getElementById(\'newsy\');

Poprawnym zapisem jest również:

document.getElementById(\"newsy\");

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

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:

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:

lub

i wiele więcej…

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

klik

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

więcej

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

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

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

więcej

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.

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

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

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

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

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

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

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.