Praktyczne wprowadzenie do JavaScript #4

Jeśli dotarłeś do tej części kursu i potrafisz bez spojrzenia w ściągawkę wykonać zwijanie i rozwijanie akapitu z rozszerzoną treścią, możesz być z siebie dumny. Znaczy to, że zrozumiałeś istotę onclick i zmiany właściwości stylów danych tagów w dokumencie HTML. Nieobce Tobie jest również pobranie zawartości każdego ze znaczników HTML.

W czwartej części wprowadzenia do JS nie dowiesz się rzeczy, które zrewolucjonizują stan Twojej 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ę uniwersalności.

Zacznijmy standardowo od rozpatrzenia na czym aktualnie stoimy. Mamy więc poniższy dokument HTML:

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

Jeśli ćwiczyłeś krok po kroku z moim kursem, zapewne znasz już ten kod na pamięć. Tym razem zmieni się w nim jeden element, aczkolwiek nie powinien Ci sprawić problemów. Popatrzmy.

Jak zapewne zdajesz sobie sprawę, drogi Czytelniku, klikając na więcej lub schowaj skrypt wie, jaki paragraf pokazać, bądź ukryć. Zapisane jest to w funkcji PokazAkapit, w tym miejscu:

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

Dowiadujemy się z tego, że operować będziemy na akapicie o id=”more”, na co wskazuje użycie w document.getElementById(); argumentu more. Tym sposobem, jedna funkcja, czyli, jakby nie patrzeć, kilkanaście linijek kodu, odpowiada za zwinięcie tylko jednego paragrafu. Pewnie chciałbyś nadać jej większą uniwersalność, by przy małym wysiłku, zwijał się i rozwijał akapit o dowolnym id, jaki tylko podasz przy wywołaniu kliknięcia na link więcej.

Domyślasz się pewnie, aby to zrealizować, nasza funkcja musi wiedzieć, który akapit ma zwinąć i rozwinąć. Trzeba więc jej podać id paragrafu <p></p>, jaki ma się pokazać lub schować po kliknięciu w link za to odpowiedzialny.

Podobną funkcjonalność można uzyskać poprzez przekazanie identyfikatora paragrafu jako argumentu funkcji przy jej wywołaniu.

Przypomnijmy sobie więc, kiedy wywołujemy PokazAkapit. Oczywiście tutaj:

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

A dokładniej w tym miejscu:

onclick="PokazAkapit();"

Jak już zapewne wiecie, dodanie takiego kawałka kodu, jako atrybutu jakiegoś tagu, powoduje wywołanie funkcji PokazAkapit po kliknięciu w ten tag.

W postaci, jaką otrzymaliśmy w poprzednich częściach naszej przygody z JS, funkcja PokazAkapit sama decyduje, co pokazać. W końcu rozkazaliśmy jej poprzez wpisanie kilku linijek, zwijać i rozwijać akapit o id=”more”.

W związku z tym, załóżmy, że dodajemy trzeci akapit w naszym dokumencie, aby móc wybrać, który rozwijać:

<p id="more_second" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>

Nasz trzeci akapit jest również defaultowo schowany (display: none;), a jego id jest równe more_second. Cały dokument, po tej operacji, 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 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>

<p id="more_second" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div>
</body>
</html>

Naturalnie, skrypt nadal rozwija pierwszy, schowany paragraf. Zedytujmy więc link więcej, by funkcja PokazAkapit, poprzez przekazanie do niej id jako argumentu, wiedziała, o który paragraf chodzi:

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

Abyśmy lepiej zrozumieli to, co się zmieniło, wyróżnijmy tylko ten kawałek kodu:

onclick="PokazAkapit('more_second');"

Niestety, dodanie powyższej treści nic nam nie dało. Skrypt nie będzie działał, a w najlepszym wypadku ujrzymy błąd w przeglądarce. Funkcja PokazAkapit zapisana jest w taki sposób:


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

	}

i, jak sami widzimy, nie posiada nic pomiędzy podkreślonymi nawiasami: function PokazAkapit(). Z drugiej strony, pomiędzy <body></body> mamy wywołanie PokazAkapit z wartością w nawiasach, czyli z argumentem:

onclick="PokazAkapit('more_second');"

Musimy więc w tej sytuacji dać możliwość funkcji PokazAkapit, aby mogła pobierać wartość argumentu, przy jej wywołaniu. Oto ona:


 function PokazAkapit(id_paragrafu)
 {

W ten sposób możemy w łatwy sposób odwołać się do wartości id, przekazanej w onclick. W tym wypadku jest ona równa more_second. Aby upewnić się, że wszystko działa, niech funkcja PokazAkapit ma następującą postać:


         function PokazAkapit(id_paragrafu)
	{
                alert(id_paragrafu);
		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";
		}

	}

Dodaliśmy to:

 alert(id_paragrafu);
function Costam(argument) { }
Definując w ten sposób funkcję Costam, określamy, że aby wywołać tę funkcję (np. w onclick), należy podać argument.

Wywołanie tego wyglądałoby więc tak:

onclick=”Costam(‚lalala’);”

Dzięki temu, wewnątrz funkcji (pomiędzy klamrami), mamy do dyspozycji zmienną o nazwie argument, która ma wartość lalala. To prawie tak, jakbyśmy we wnętrzu tej samej funkcji napisali:

var argument = „lalala”;

Powyższy kod dodany był w zamierzeniu, by wyświetlić w wyskakującym okienku to, co jest przekazywane pod postacią zmiennej id_paragrafu. Jak widzimy, pokaże się nam more_second.

Teraz, kiedy pod postacią zmiennej id_paragrafu mamy dowolny identyfikator, który wpisaliśmy w onclicku, możemy pobrać odnośnik do niego poprzez znaną nam wszystkim funkcję document.getElementById();. Musimy tylko podać jej argument, jakim będzie zmienna id_paragrafu. Ta z kolei ma wartość jakiegoś id, więc jest to to, czego potrzebowaliśmy, by poprawnie skorzystać z document.getElementById(). Usuwamy poprzednio dodany alert(); i dodajemy, co nas interesuje, a jest to:

var akapit = document.getElementById(id_paragrafu);

W tym wypadku nie otaczamy słówka id_paragrafu apostrofami czy też cudzysłowami, ponieważ zmiennych, otoczonych tymi znakami, nie podajemy jako argumenty.

Funkcja PokazAkapit wygląda więc następująco:


         function PokazAkapit(id_paragrafu)
	{
                
		var akapit = document.getElementById(id_paragrafu);
                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";
		}

	}

Dokument wygląda natomiast 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(id_paragrafu)
	{
		var akapit = document.getElementById(id_paragrafu);
                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('more_second');" 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>

<p id="more_second" style="display: none;">Vivamus pretium fringilla metus. Praesent a enim eu metus scelerisque tincidunt. In auctor lorem et leo.</p>
</div>
</body>
</html>

W ten sposób możemy użyć naszej funkcji na paragrafie o id=”more_second”. Podstawmy w

onclick="PokazAkapit('more_second');"

inne wartości, oczywiście po uprzednim dodaniu odpowiednich tagów, by przekonać się o potędze zastosowanego kodu.

Dla tych, którzy nie do końca odczytali, o co chodzi wyżej, mam jeszcze jeden dokument HTML, prezentujący bardzo ładnie istotę problemu:

<!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 innym przykładem argumentów funkcji</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />

<!-- Nasz kod Javascript: -->

<script type="text/javascript">

	function Pokaz(costam_costam)
	{
		alert(costam_costam);

	}

</script>

</head>
<body>
<div>
<a href="#" onclick="Pokaz('To jest tekst ktory wyswietli sie w okienku');">show me it!</a>

</div>
</body>
</html>

Sprawa jest prosta, wywołujemy w onclick="Pokaz(‚To jest tekst ktory wyswietli sie w okienku’);" funkcję Pokaz, dla której przygotowaliśmy jeden argument pod postacią zdania To jest tekst ktory wyswietli sie w okienku. Po kliknięciu w link show me it! ukaże się okienko z właśnie tym zdaniem. Widzimy więc, że to, co przekażemy do funkcji, jest w niej dostępne pod postacią zmiennej. W tym wypadku nazwaliśmy ją costam_costam. Spróbujcie zmieniać argument w onclick, by przekonać się, że to naprawdę działa!

Komentarze

1

dawno nie widzialem tak ladnego layoutu w wordpressie. Gratuluje braku widżetów i innego badziewia.

2

‚Kurs’ (w apostrofach, bo to na razie tylko przedsionek ;)) jest idealny dla początkujących. Brakowało w sieci materiałów, które nie wymagają od adepta znajomości pojęć z terminologii programowania. Pamiętam jaką dla mnie to było przeszkodą, gdyż nigdy wcześniej nie miałem styczności z żadnym językiem. Tak trzymaj :)

P.S. Przydałoby się kolorowanie kodu – nawet przy najprostszych skryptach zwiększa czytelność.

blue
3

Dokladnie, blue.

Kiedy ja sam zaczynalem, mialem jeszcze wiekszy problem ze znalezieniem odpowiednich informacji.

Co do kolorowania – sluszna propozycja, rozwaze ja w nastepnych czesciach :).

4

Trafiłem tu dziś pierwszy raz z bloga Pawła Wimmera. Powiem tak – wreszcie coś konkretnego do podstaw JS! Może wersja ebookowa, do łatwiejszego czytania/druku? Pozdrawiam!

5

Pawle, dzieki za pozytywny komentarz. Wersja ebookowa na pewno bedzie miala miejsce, kiedy kurs bedzie prezentowal pewien pulap wiedzy, nadajacy sie do wiekszej publikacji, jaka jest ebook. Tak wiec cierpliwosci.

6

Orzesz Ty Ferrante! Lądujesz w „Ulubionych”! ;) Życzę dużo wytrwałości.

Pikaczu!
7

[…] Nasze ćwiczenia będziemy wykonywać na skrypcie, który wyprodukowaliśmy przy okazji czwartej części praktycznego wprowadzenia do JS. […]

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

Trafiłem tu dzisiaj. Pierwszy rzut oka na formę tego kursu i pomyślałem sobie, że można czegoś nowego się nuczyć ;-) a wiec wziełem się za czytanie i już przy czwartej lekcji pojawiły się problemy. Otóż przygotowałem taki oto plik, wszystko w nim działa jeżeli chodzi o rozwijanie, ale niestety pojawił się mały bug jeżeli chodzi o „więcej/schowaj” gdy kliknę na rozwijanie drugiej lub trzeciej definicji to rozwija tą definicje ale w pierwszej zmienia na „schowaj”. Czy ktoś móglby wjaśnić jak rozwiązać ten problem.
Z góry dziękuje za zainteresowanie.

laik
10

ID linku nie moze sie powtarzac, a u Ciebie sie powtarza. Musisz to zmienic. Potem musisz rozpoznac w funkcji PokazAkapit, jaki link, o jakim id zostal klikniety, bo nie mozesz zalozyc z gory ze ktos kliknal link o id=”link”, jesli masz takich linkow kilka i roznych id. Identyfikator linka, na ktorym zostalo wywolane zdarzenie (tutaj onclick) mozesz pobrac przez this.id, co jest omawiane w kolejnych czesciach kursu. W kazdym badz razie, wystarczy u Ciebie podmiana

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

na

var odnosnik = document.getElementById(this.id);

11

Często tu zaglądam. Piszecie ciekawe arty.

12

Czytelny kod, wysokie wyczucie dydaktyczne! Gratulacje, pozdrawiam!

MichalB
13

wreszcie mogę czytać z pełnym zrozumiem :) 3maj tak dalej

14

Świetny kurs, oswaja z JS

tomek
15

Brawa dla autora… Od zawsze chciałem poznać JS ale jakoś nie mogłem znaleźć odpowiedniego kursu. Ten jest świetny. Jeszcze raz gratulacje dla autora :)

Jesteś moim guru ;)

POZDRAWIAM :)

Adrian
16

z innej beczki…
zgodnosc na forum jest zadziwiajaca…

zbycho
17

js jest bardzo prastyczny. Spodobał mi się już dawno, ale uczę się go dopiero teraz.
function PokazAkapit(id_paragrafu, id_linku)
{
var akapit = document.getElementById(id_paragrafu);
var odnosnik = document.getElementById(id_linku);

var view = akapit.style.display;

if (view == "block")
{
odnosnik.innerHTML = "Pokaż ponownie";
akapit.style.display = "none";
}

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

Wyżej była definicja, a niżej będzie operacja.
Phasellus nec augue elit, in sollicitudin tellus. Pokaż więcej, Pokaż więcej
In et odio semper nisl faucibus ultricies.
Donec ac eros non sapien mattis suscipit.

Txwxcc
18

Przechodzę na wyższy poziom mocy :)

Dodaj komentarz

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