Kurs JavaScript (cz. 2): Dynamiczne elementy HTML

Przedstawimy działanie prostego skryptu, poznamy instrukcje warunkowe oraz problemy jakie stwarzają i jakie są wynikiem ich niedziałania. Oczywiście pokażemy też jak sobie radzić w takich sytuacjach.

Retrospekcja

Na początek przypomnimy sobie treść dokumentu
HTML z minimalną funkcjonalnością JavaScript – rozwinięcie rozszerzone treści newsa – patrz listing 1.

- Reklama -

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

Symulacja działania skryptu

Dzięki {html}document.getElementById(\’more\’){/html} pobraliśmy
odnośnik do akapitu o {html}id=\”more\”{/html}. Przechowujemy
go w zmiennej o nazwie akapit. Dzięki
temu mamy miedzy innymi dostęp do wszystkich
właściwości stylów dla {html}

{/html}.

Pora dodać możliwość zwinięcia akapitu, czyli należy
ustawić z powrotem display: none;
Programy, skrypty itp. reagują na nasze poczynania
w zaleĹźności od tego, co robimy. Jeśli skorzystamy
na przykład z funkcji wykop w serwisie
http://www.wykop.pl, strona \”wie\”, ze chcemy
usunąć dany link i robi co trzeba.

To działanie moĹźna opisać w następujący sposĂłb: jeśli uĹźytkownik
kliknie link, policz jego głos. Celowo
podkreśliłem słowo \”jeśli\”, poniewaĹź na nim, tyle
ze w języku angielskim, opiera się wiele operacji w JavaScripcie. Często bowiem będziemy
używać słowa if, chcąc dać znak skryptowi, ze
jeśli coś się stanie, ten ma zareagować.

Wracając do naszego akapitu. Naszym celem
jest ponowne jego ukrycie. Ten, po pierwszym
kliknięciu, ma styl {stala}display: block;{/stala}. Trzeba wiec
rozpoznać, kiedy display jest rĂłwny \”block\” i wykonać
jego zmianę na \”none\”.

Instrukcje warunkowe

PowyĹźszym sposobem do funkcji PokazAkapit,
znajdującej się w sekcji {html}{/html}, dodaliśmy
następującą instrukcje warunkowa:

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

ZauwaĹźmy, ze cały czas opieramy się na
zmiennej akapit, która jest naszym odnośnikiem
do akapitu o {stala}id=\”more\”{/stala}. Dodany kod moĹźna
przetłumaczyć tak:

Jeśli właściwość stylów display jest równa
wartości \”block\”, zmień ją na \”none\”.

Problem…

Wypróbujmy teraz nasz skrypt, klikając link więcej.
Ups?! Nasz skrypt nie działa! Bez obaw – tak
własnie powinno być.

Aby wychwycić błąd, przeanalizujemy działanie
funkcji PokazAkapit, do ktĂłrej dodaliśmy
przed chwila nowe elementy. Wszystko w JavaScripcie wykonuje się w kolejności zapisania kodu, wiec interpretujemy go od gĂłry do dołu
I tak, najpierw pobieramy odnośnik do naszego
akapitu z rozszerzona treścią:

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

Następnie zmieniamy sposób wyświetlania
akapitu:

akapit.style.display = \"block\";

Potem za pomocą instrukcji warunkowej sprawdzamy
czy display akapitu ustawiony jest na block.
Jest to prawda, poniewaĹź przed chwila ostawiliśmy
te wartość. W takim razie wykona się kod w klamrach,
bo warunek jest prawdziwy. W klamrach natomiast
mamy kod, ktĂłry zmienia display akapitu
z powrotem na none. Dostaliśmy wiec odpowiedz,
dlaczego klikając więcej, nic się nie działo.

… i jego rozwiązanie

Rozwiązanie tego problemu jest po głębszym
przemyśleniu bardzo logiczne. Musimy po kliknięciu
linku więcej rozważyć dwie sytuacje:

• kiedy akapit ma display rĂłwny block, po kliknięciu
  więcej trzeba go zmienić na none,
• kiedy akapit ma display rĂłwny none, po kliknięciu
  więcej trzeba go zmienić na block.

Jeśli akapit jest schowany, pokażemy go, jeśli
akapit jest widoczny, ukrywamy go. Tłumacząc
to na JavaScript uzyskujemy następujący kod:

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

W funkcji zaszły istotne zmiany. Pojawiła się
nowa zmienna o nazwie view. Przechowuje ona
display akapitu. Jak widać, podstawiamy ja do
warunkĂłw. Wychodzi na to samo, poniewaĹź
zmienna view ma wartość style.display akapitu,
czyli to o co nam chodziło. PorĂłwnujemy stronami
interesujące nas wartości przy użyciu ==.
Jeśli ktĂłryś z warunkĂłw jest prawdziwy, zmieniamy
style.display akapitu.

Efekt końcowy

Nasz dokument zyskał kolejna funkcjonalność
i wygląda juĹź coraz lepiej – patrz listing 2.

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