Praktyczne wprowadzenie do JavaScript #3

Kolejna, trzecia część praktycznego wprowadzenia przed nami. Do tej pory poznaliśmy kilka niezwykle pożytecznych elementów języka JavaScript. Warto podsumować naszą wiedzę.

Wiedz, że umieszczanie onclick, jako atrybut tagu, jest mocno niewskazane przez W3C – nie jest strict dla dokumentów XHTML. W następnych częściach dowiemy się, jak rozwiązać ten problem, a teraz, naprawdę bez obaw, skorzystajmy z naszej słodkiej niewiedzy.

Wróćmy jednak do naszego newsa. Tym razem zajmiemy się linkiem <a href="#" onclick=”PokazAkapit();” >więcej</a> w naszym dokumencie, który, dla zapominalskich, wygląda następująco:

<!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=utf8" />

<!-- 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>

Postanowiliśmy, że po kliknięciu na link więcej zmieni się jego wartość na zwiń/schowaj. Załóżmy, że w tym wypadku wybieramy jedno słówko, niech to będzie „schowaj”.

Jak pamiętacie, edytowaliśmy już wartości w JavaScript, a konkretnie właściwości stylów paragrafu o id=”more”. Zastosujemy więc prostą analogię:

Dokonajmy więc poprawek w naszym dokumencie według powyższego planu. Na początek dodajmy id=”link”.

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

Następnie pora wzbogacić naszą funkcję PokazAkapit o nową zmienną, której nazwa to odnosnik. Przypomnijmy, że funkcja PokazAkapit wywoływana jest po kliknięciu w link więcej i przeglądarka wykonuje jej (funkcji) poszczególne instrukcje od góry do dołu.

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

Po dodaniu powyższej linijki, funkcja wygląda tak:

function PokazAkapit()
{
	var akapit = document.getElementById('more');
	var odnosnik = document.getElementById('link');

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

	if (view == "none")
	{
		akapit.style.display = "block";
	}
}
innerHTML
to właściwość każdego tagu HTML, zawierająca wszystko, co jest pomiędzy nim (w tym inne tagi). Aby się do niej dobrać, należy pobrać odnośnik do danego tagu. Na przykład:

var odnosnik_do_akapitu = document.getElementById(‚jakies_id’);
alert(odnosnik_do_akapitu.innerHTML);

Powyższy kod wyświetli nam okienko z zawartością jakiegoś tagu o id=”jakies_id”, na przykład: <p id=”jakies_id”>zawartosc</p>.

Mamy już, jak widać, 3 zmienne! Dwie pierwsze są odnośnikami do konkretnych tagów naszego dokumentu HTML, a trzecia, view, przechowuje wartość display stylów paragrafu, do którego odwołaliśmy się przy pomocy zmiennej o nazwie akapit.

Pora na punkt drugi, czyli pobranie wartości naszego linka. W skrócie, interesuje nas wszystko, co jest pomiędzy tagami <a></a>. Zastosujemy tutaj, jak się rzekło, małą analogię. Tak, jak style mogliśmy wyciągnąć stosując style.jakas_wlasciwosc, tak wartość danego tagu można otrzymać stosując innerHTML.

Popatrzmy:

function PokazAkapit()
{
	var akapit = document.getElementById('more');
	var odnosnik = document.getElementById('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);

Uzyskaliśmy wobec tego efekt, że po kliknięciu w więcej, oprócz schowania i pokazania paragrafu z rozszerzoną treścią, pokazuje się nam również okienko o treści więcej! Jak więc widać, innerHTML rzeczywiście przechowuje wartość tagu < href="#" onclick="PokazAkapit();" id="link"></a>.

Nie interesuje nas jednak okienko alert, ale zmiana wartości linka. Usuwamy więc kod z odwołaniem do alert();, traktując go jako część naszej praktyki.

Jak wiadomo, nasz link, pozwalający wyświetlić pozostałą część wiadomości, musi się zmieniać odpowiednio do ustawionego display dla paragrafu id="more". Jeśli ten będzie ustawiony na block, link przybiera postać "więcej", jeśli na none, "schowaj". Tą teoretyczną sytuację mamy już w kodzie z poprzedniego odcinka, spójrzmy:

var view = akapit.style.display;

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

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

Jest to dokładnie to, co napisałem, tyle że w języku JavaScript. Musimy tylko dodać możliwość zmiany wartości naszego linka, do dzieła!

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łatawiają nam sprawę. Są to, kolejno, odnosnik.innerHTML = "więcej"; oraz odnosnik.innerHTML = "schowaj";.

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

Teraz nasza funkcja PokazAkapit, którą wywołujemy po kliku w link więcej, wygląda tak:

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

A dokument HTML tak:

<!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=utf8" />

<!-- 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>

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

Komentarze

1

Oby częstotliwość się utrzymała ;)

aulory
2

Ano, jesli chodzi o tempo w dodawaniu nowych materialow to tylko pogratulowac. Oby tak dalej.

3

Nie musze chyba mowic, ze tempo w duzej mierze zalezy od stopnia zadowolenia Czytelnikow… ;)

Generalnie bede sie staral pisac regularnie, maksymalny czas przerwy miedzy kursami ustalilem sobie na 3 dni.

4

no i kolejna lekcja very sexy ;) już czekam na następne.

btw. w II częscie dodałęm komenatrz, ale jakiś plugin potraktował mnie jako chyba spam bota czy coś… zobacz w poczekalni.

5

Super, oby tylko tak dalej. JS nie jest taki straszny jak pokazują inne kursy. Fajnie też, że bierzesz pod uwagę w3c. Oby udało Ci się utrzymać to temp przynajmniej do zakończenia omawiania podstaw na tego typu, użytecznych przykładach. Dodaje do zakładek :)

Lerno
6

[…] Twój stan wiedzy, choć kto wie. Nauczysz się natomiast uzyskiwać podobne efekty z poprzednich części, trochę innymi sposobami. Potrafił będziesz też nadać swoim funkcjom trochę […]

7

Hm, glupia Spam Karma, juz powinno byc ok.

8

Kurs jest pierwsza klasa, niektorzy pewnie napisza ze jest moze zabardzo „lopatologiczny” ale jak sam powiedziales, taki wlasnie ma byc. Analizujesz kazdy krok, bez niepotrzebnych przeskokow, wszystko ladnie i przejzyscie opisane.

Wlasnie zaczynam go czytac i musze przyznac ze jestem bardzo zadowolony. Dopiero zaczynam swoja przygode z AJAX-em, i niemoglem sie zebrac zeby od czegos zaczac, a ten kurs jest dla mnie swietnym rozwiazaniem na poczatek.

Taka moja jedna rzecz ktora zauwazylem, jesli zdefiniujemy styl „dispaly:none” w naglowku dokumentu, skrypt niezadziala ;/

9

Niestety mam sporo uwag,

Kurs jest swierzy, pisany nabierzaco. Biorac pod uwage ze jest prawie polowa 2007 roku, to uzywanie metod innerHTML, odwolanie sie styli przez el.style, stosowanie linkow z adresem: # to niestety powazny, bardzo powazny blad. Wiem ze czesc osob zaraz napisze: „Ale dziala”, „znajdz cos lepszego”, „WAI to moda a nie cos praktycznego…” i rzeczywiscie po czesci ma racje. Tylko jesli spelnia sie marzenia wielu webmasterow i XHTML serwowany bedzie jako aplikacja xml’owa to wiekszosc z tych rozwiazan przedstawionych wyzej nie zadziala. Po to jest specyfikacja DOM i ECMA-262 zeby sie jej trzymac a nie tworzyc kolejne internetowe potworki(nie mowie o kursie).
Poza tym uwazam ze jest bardzo przystepnie podany a rozwiazania sa nareszcie jak na kursy bardziej praktyczne niz zazwyczaj sie to zdaza, i tu wielki uklon dla autora.
Pozdrawiam i zycze powodzenia i dalszych sil na rozwijanie tematu!!!

Negator
10

Problem w tym, ze ja o tym wszystkim wiem i po omowieniu podstaw zostana poruszone kwestie poprawnych rozwiazan. Takze, bez obaw i fermentu drogi kolego :-)

11

Witam Pana,

Dziekuje za odpowiedz, choc nie pisalem z mysla o krytykowaniu a raczej malym wypunktowaniu pewnych rzeczy, ktore uwazam za niedociagniecia. Obserwujac polski internet uwazam ze Panskie przedsiewziecie jest niedosc ze odwazne to wyjatkowo potrzebne gdyz poza strona developerow Mozilli niewiele jest informacji o aktualnym stanie w jakim JS i DOM sie znajduje. Bede dalej z duzym zainteresowaniem sledzil Panska prace nad kursem i jak w poprzednim poscie trzymama kciuki!!!
Pozdrawiam!

Negator
12

I to sie ceni, rzeczowa i konstruktywna opinia jest zawsze w cenie. Dziekuje za cenne rady – na pewno, niech bedzie Pan pewien, wykorzystam je. Oczywiscie zapraszam do dalszych odwiedzin. Pozdrawiam :-)

13

Zakochałem się… w tym kursie (przykro mi ferrante :PP)! Wszystkie inne podręczniki won! :-)

14

Rzeczywiście napisane są te kursy przystępniej niż w niektórych książkach do javascript.. Pogratulować umiejętności pisania dobrych tutoriali.
Pozdrawiam

mempty
15

Dzieki ;-)

16

W samej rzeczy. Kurs na miarę udanego w pełnym wymiarze jego przesłanek. Nie jestem wytrawnym JS-owcem, a dopiero rozpoczynam swoją „karierę” w tej dziedzinie wiedzy lecz przez ten czas kiedy pilnie szukałem dobrych materiałów (również książkowych) a wręcz wykopywałem z czeluści Internetu to cała ta literatura nie wybijała się zbytnio, słowem -niejasna. Jasne, to subiektywizm ale urzekło mnie wyrażenie „na chłopski rozum” ;). Ciesze się, że jest ktoś taki jak Ty ferrante, kto daje innym z swojej potęgi wiedzy. Dziękuje!

obelyx
17

Małe pytanko. Dlaczego „więcej” po wywołaniu go przez zamienia się na wi_cej (z kwadracikiem w środku)?

Mat
18

hint: kodowanie znaków.

19

Ale kod jest przeklejony z Twojego kursu, więc powinno chyba być ok?

Mat
20

Nie, nie powinno, jesli nie zapisales pliku HTML w UTF :>

21

Dzięki za informacje. Poradziłem sobie. :)

Mat
22

Kurs ogólnie w porządku, warto jednak napisać, że innerHTML można używać, zanim pozna się właściwe DOMowe metody :)

doggy
23

Wszystko działa jak należy, jak do tej pory wszystko rozumiem bez zarzutu. Rewelacja

24

No dobrze, a jeżeli ja mam więcej w jednym dokumencie takich rozwinięć, stworzyłam nową funkcję dla każdego, opartą o ten sam wartości, ale pojawia się problem z komunikatem „schowaj”, który działa tylko dla pierwszego rozwinięcia tekstu, a przy następnych pojawia się tylko nie przy tym rozwinięciu, które się właśnie kliknęło, a przy pierwszym. Jak je rozróżnić? Jeżeli mam np. trzy razy link „więcej” w jednym dokumencie i chcę, żeby każdy po kliknięciu nie tylko wyświetlał tekst, ale i zmieniał się na „schowaj” – pewnie chodzi o tę część:
if (view == „none”)
{
odnosnik.innerHTML = „schowaj”;
akapit.style.display = „block”;
}

HELP!

OLala
25

A jednak sobie poradziłam… nie taki diabeł straszny, bardzo przydatne są twoje nauki. Dzięki za nie.

OLala
26

kurs jest rewelacyjny :) dla mnie numer jeden a za różne się już zabierałem

jareckinet
27

Dzieki za kurs jest ok. Drugi dzien i zaraz przechodze do 4 czesci.

rad
28

Kurs jest doskonały. Jestem początkującym webmasterem na własny użytek. Twój pomysł na stopniowe wgłębianie się przez czytelników w tajniki Javascript uważam za dobry i z góry przemyślany. masz talent pedagogiczny. Gratuluję.

29

Bardzo fajny kurs :)
Dzięki!

Dodaj komentarz

Dozwolone tagi: <blockquote>, <code>, <strong>