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.
Strona z newsem
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}.
{stala}getElementById(id);{/stala}
Zapewne zastanawiające jest, co oznacza
w nazwie powyższej funkcji słowo document
oraz kropka. By zrozumieć istotę problemu,
przeczytajmy to jak swoiste drzewo genealogiczne
(w kolejnych publikacjach dowiemy
się, że fachowa nazwa ma z nim wiele wspólnego).
document jest tutaj rodzicem. Kropka
oznacza natomiast, że {stala}getElementById(){/stala} jest
własnością rodzica. Po kropce może wystąpić
również jakaś zmienna, dla której document
jest rodzicem i ma do niej dostęp.
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\”.
{html}if (jakiś warunek) { wykonaj jakieś zadanie }{/html}
Konstrukcja ta, nazywana instrukcją warunkową, oznacza, że jeśli jakiś warunek będzie prawdziwy,
wykona się kod w klamrach.
{html}if (1 == 1) { alert (\’Jeden równa się jeden!\’); }{/html}
Jeśli jeden równa się jeden, wywołamy funkcję {stala}alert();{/stala} o argumencie Jeden równa się jeden.
1 == 1 to warunek. Jeśli jest on prawdziwy, wykonuje się wszystko to, co jest zawarte w klamrach.
Łatwo można wywnioskować, że jeśli chcemy porównać jakieś wartości, wstawiamy między nie ==
(dwa znaki \”równa się\”). Porównywane wartości mogą być zmiennymi, literami bądź cyframi. Jeśli
porównujemy litery, pamiętajmy, aby były one otoczone cudzysłowami lub apostrofami!
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.
Pamiętajmy, że nazwy zmiennych są dowolne.
Równie dobrze mogliśmy użyć nazwy babcia_jadzia, czy robertmateja0. W naszym przypadku jest to view, ponieważ przechowuje ona wartość display akapitu – nazwa wydaje się adekwatna.
Efekt końcowy
Nasz dokument zyskał kolejna funkcjonalność
i wygląda już coraz lepiej – patrz listing 2.
Strona z newsem
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.
