Praktyczne wprowadzenie do JavaScript #6

Wyczerpaliśmy już wachlarz podstawowych funkcjonalności, jakie można by nadać naszemu dokumentowi. Dlatego też dziś spojrzymy na niego nieco z innej strony. Zapewne pamiętacie, że używanie onclick i innych zdarzeń jest mocno nieadekwatne, jeśli myślimy o naszych dokumentach w kategoriach strict i valid. Nasz dzisiejszy cel jest więc prosty – pozbyć się nieeleganckich zdarzeń z tagów HTML.

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

Do czynienia mamy więc z następującym dokumentem, w którym znajdziemy niepożądane zdarzenie onclick:

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

Zależy nam, zgodnie z zapowiedziami, na usunięciu poniższego kawałka:

onclick="PokazAkapit('more_second');"

Sprawa obija się o problem typu, jak dać znać linkowi, żeby po kliknięciu na niego, wykonał się jakiś kod, biorąc pod uwagę, że nie można uzyskać tego w ciele <body></body>?

Warto pamiętać, że zdarzenie onload stosujemy tylko w duecie ze znacznikiem <body>

Odpowiedź jest prosta. Przeglądarka musi wykonać powyższe zadanie, czyli dać znać linkowi o onclicku, po załadowaniu całego dokumentu HTML. Aby rozkazać przeglądarce wykonać jakiś kod po załadowaniu jakieś strony, trzeba obdarzyć <body> zdarzeniem o nazwie onload. Po raz kolejny nazwa jest bardzo adekwatna do tego, co dana funkcja robi. Czyż nie?

Zgodnie z zapowiedziami, aby uzyskać powyższy efekt, dodajmy onload do <body>:

<body onload="">

Daliśmy tym samym znak przeglądarce, że przewidujemy wykonać jakąś czynność po załadowaniu całej strony. W powyższej formie oczywiście nic się nie stanie, ponieważ, jak zwykle, nie umieściliśmy żadnego kodu pomiędzy cudzysłowiami. Zróbmy więc, standardowo, mały test, umieszczając naszą ulubioną funkcję alert();:

<body onload="alert('To okienko, ktore pokazalo sie po zaladowaniu tej strony');">
Zdarzenia możemy traktować jako właściwości/atrybuty tagów HTML. Warto przy tej okazji zauważyć pewną analogię.

<div id=”blok” style=”margin: 2px;” onclick=”alert(‚TEKST’);”>klik!</div>

Z powyższego diva możemy wyciągnąć jego wszystkie atrybuty i właściwości stylów. Wcześniej, dostaliśmy się np. do wartości marginesów:

var blok = document.getElementById(‚blok’);
alert(blok.style.margin);

To samo zróbmy z onclick jako właściwością <div> o id=”blok”:

var blok = document.getElementById(‚blok’);
alert(blok.onclick);

W zależności od przeglądarki, pokaże się nam okienko z wartością alert(‚TEKST’);, która znajduje się pomiędzy klamrami, tak, jakbyśmy definiowali nową funkcję. Znaczy to, że właściwość onclick elementu o id=”blok” jest funkcją, czyli zbitkiem pewnych operacji, otoczonych klamrą.

Podstawmy ten kawałek kodu do naszego dokumentu, by przekonać się, że wszystko działa.

Chcemy jednak, aby nasz równie ulubiony link więcej otrzymał po załadowaniu strony informację, że jego kliknięcie spowoduje ukrycie akapitu. Przekładając to na język JavaScript, chcemy nadać mu właściwość onclick.

Wiemy już, że każdy pobrany poprzez document.getElementById() tag HTML udostępnia swoje wszelkie właściwości. Szerzej omawialiśmy to, w żółtej ramce z prawej strony, w drugiej części kursu. Przypominając sobie te wiadomości, wiemy, że z łatwością mogliśmy pobrać style (style.jakas_wlasciwosc), czy też wartości tagów (innerHTML). Również onclick, onmouseover czy też onmouseout mogą być właściwościami danego tagu! Ich wartością jest natomiast kod, jaki ma się wykonać, jeśli zdarzenie dojdzie do skutku. Sprawa, musicie przyznać, brzmi dość podobnie do tego, co robiliśmy do tej pory w <body>.

onclick="PokazAkapit('more_second');"

W ten sposób, link więcej posiada właściwość onclick, której wartość równa się PokazAkapit(‚more_second’);.

Jak już stwierdziliśmy, wypada połączyć nadawanie wartości onclick z ładowaniem dokumentu. Niech więc nowoutworzona funkcja o nazwie Laduj informuje link więcej o jego nowej właściwości onclick, tuż po załadowaniu dokumentu HTML. W naszym wypadku, onclick będzie odnośnikiem do funkcji PokazAkapit, która wykona zwijanie i rozwijanie danego paragrafu.

W tym celu musimy najpierw przewidzieć wykonanie Laduj w onload:

<body onload="Laduj();">

co wyżej uczyniliśmy. Teraz dokument wie, że musi po jego załadowaniu wykonać funkcję Laduj. Tej jeszcze nie zdefiniowaliśmy, więc pora to uczynić w jedynym adekwatnym do tego miejscu, jakim jest sekcja <script></script>:


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

	}

	function Laduj()
	{
	}

Mamy więc dwie funkcje. Jedna z nich to stara, dobra PokazAkapit, która potrzebna nam będzie, by pokazywać wybrany akapit. Czyli jedziemy na tym samym wózku, niezmiennie od 5 odcinków. Należy zająć się tylko funkcją Laduj.

Pobierzmy więc w niej odnośnik do linku więcej, by móc ustawić jemu właściwość onclick.


	function Laduj()
	{
		var odnosnik = document.getElementById('link');
	}

Wszystkie zmienne, które zdefiniowaliśmy słówkiem var w ciele funkcji (czyli pomiędzy klamrami) widoczne są tylko przez tą funkcję i tylko wewnątrz niej możemy operować na danej zmiennej

Mamy już zmienną odnosnik, która odnosi się do linku o id="link". Zapewne zauważyłeś, że zmienna o tej samej nazwie istnieje w funkcji PokazAkapit. Zgadza się, aczkolwiek dostęp do niej ma tylko funkcja, w jakiej ta zmienna się znajduje. Bez obaw.

Pora teraz na poinformowanie linku o tym, że po jego kliknięciu powinna wykonać się funkcja PokazAkapit() z danym argumentem. W tym wypadku będzie to more_second, czyli odkryjemy drugi akapit o id="more_second". Najpierw jednak sprawdźmy na przykładzie alert();, że to, co planujemy robić, w ogóle zadziała.

odnosnik.onclick = alert;

Jak widać, wszystko działa. Po kliknięciu linku, pokaże się puste okno. Puste, dlatego że nie zdefiniowaliśmy żadnych argumentów dla funkcji alert (= alert;). Zgodnie z tym zapamiętaj, że jeśli chcemy, aby po kliknięciu danego elementu wykonywała się funkcja, która nie potrzebuje argumentów, nie można tego uzyskać, stosując taki zapis:

odnosnik_do_tego_elementu.onclick = nazwa_funkcji();

Będzie to niezgodne z zasadami JavaScript, a przeglądarka wyrzuci nam błąd. Obejdzie się więc bez nawiasów.

W tym momencie, nasz dokument 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(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";
		}

	}

	function Laduj()
	{
		var odnosnik = document.getElementById('link');
		odnosnik.onclick = alert;
	}

</script>

</head>
<body onload="Laduj();">
<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>

Jako że nie chcemy więcej żadnych onclick w dokumencie, usuwamy tę część:

onclick="PokazAkapit('more_second');"

Teraz wystarczy przejść do finału ceremonii, jakim będzie poinformowanie linku, że po jego kliknięciu wykona się funkcja PokazAkapit().

Uzyskamy to w ten sposób:


	function Laduj()
	{
		var odnosnik = document.getElementById('link');
		odnosnik.onclick = function () { PokazAkapit('more_second'); }
	}

Ojej, mamy tu dość enigmatycznie zapisany kawałek kodu, który nic Ci pewnie nie mówi. Mowa o:

function () { PokazAkapit('more_second'); }

Nie lękajmy się jednak, a przejdźmy do logicznej analizy faktów. Jak widzimy, odnosnik.onclick = odpowiada za przypisanie onclick jakieś wartości. Onclick odpowiada zaś za wykonanie jakiegoś kodu. W naszym wypadku uruchamia funkcję PokazAkapit z jednym argumentem, którego wartością jest id paragrafu. Gdyby nasza funkcja nie potrzebowała żadnych argumentów, sprawa byłaby prosta, bo moglibyśmy po prostu napisać:

odnosnik.onclick = PokazAkapit;

Jako że musimy przekazać funkcji argumenty, sprawa jest zgoła inna. W tym wypadku zdefiniować musimy najpierw, że nasz onclick będzie określoną funkcją. Odpowiada za to część function () {, którą doskonale już znacie. Tak się właśnie definiuje wszystkie funkcje. Biorąc pod uwagę to, że mamy już gotową funkcję PokazAkapit, nie wypada przepisywać jej kodu ponownie, do onclicka. Wywołajmy więc ją w ciele onclick (PokazAkapit('more_second');).

Osiągnęliśmy tym samym pożądaną funkcjonalność. Spójrzcie jeszcze raz na to, co mamy teraz, a co mieliśmy przedtem. Obydwa przykłady mówią jasno:

Zdarzenie onclick przybiera postać zwykłej funkcji PokazAkapit() z argumentem 'more_second'.

Aby sprawdzić istotę naszego problemu, warto podstawić poczciwą funkcję alert():


function Laduj()
{
	var odnosnik = document.getElementById('link');
	odnosnik.onclick = function () { alert('TEST'); }
}

Kliknijmy teraz w link więcej, a zgodnie z tym, co napisaliśmy, ukaże się okienko o treści TEST. Czyli, tak naprawdę, dajemy znać, że onclick jest funkcją wykonującą inną funkcję alert('TEST');.

Jak widać, wszystko działa. Nasz kod JavaScript wygląda więc tak:

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

	}

	function Laduj()
	{
		var odnosnik = document.getElementById('link');
		odnosnik.onclick = function () { PokazAkapit('more_second'); }
	}

</script>

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

	}

	function Laduj()
	{
		var odnosnik = document.getElementById('link');
		odnosnik.onclick = function () { PokazAkapit('more_second'); }
	}

</script>

</head>
<body onload="Laduj();">
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#" 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>

Jak się dzisiaj dowiedzieliśmy, onclick jest tak naprawdę własnością danego tagu, tak jak jego style czy wartość. Jako że onclick wykonuje jakiś kod, jako wartość przypisujemy mu także jakiś kod. W najczęstszym wypadku onclick wywołuje wykonanie się jakieś funkcji, stąd też przypisaliśmy mu wartość funkcji.

Osiągnęliśmy brak elementów JavaScript pomiędzy <body></body>. Zostało nam natomiast jeszcze jedno zdarzenie, które siedzi sobie frywolnie jako atrybut <body>. Mowa o onload. Jeśli już bawić się w brak kodu JS w dokumentach HTML, zadbajmy by i ten kawałek wykonywał się pomiędzy <script></script>.

Całość jest banalnie prosta. Otóż, jak dowiedzieliśmy się z tego odcinka, onload wykonuje określony kod wtedy, kiedy status okna przeglądarki, gdzie ładuje się nasza strona, dojdzie do 100%. Jak zatem widać, onload jest ściśle związany z oknem przeglądarki, czy też zakładką, jeśli mowa o FF, czy Operze. Jest więc właściwością okna. Możemy to bardzo ładnie wykorzystać, otóż zdarzenie wykonywane podczas załadowania się strony, dostępne jest pod taką zmienną:

window.onload

Stosując nazewnictwo znane z drzewa genealogicznego, onload jest własnością rodzica window. Jak sama nazwa wskazuje, window to po polsku okno. Zbadajmy, że jest to prawda, tworząc poniższy dokument:

<!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>Testuj onload</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf8" />


</head>
<body onload="alert('uwaga, zaladowal sie dokument!');">
<a href="#" onclick="alert(window.onload);">testuj onload!</a></p>

</body>
</html>

W Internet Explorer, po kliknięciu w testuj onload ujrzymy okienko o treści:


function anonymous()
{
	alert('uwaga, zaladowal sie dokument!');
}
Jeśli dołączasz swoje skrypty do dokumentu w postaci oddzielnego pliku .js, deklarację window.onload umieszczaj na jego końcu. Kiedy dodajemy kod JS z zewnętrznego pliku, przeglądarka aplikuje go do swojej pamięci od góry do dołu. Jeśli więc napotka window.onload, funkcja jej przypisana musi być już wcześniej w pamięci.
Warto także pamiętać, że zdarzenie window.onload wykonuje się tylko raz, za każdym uruchomieniem strony. Idąc tym tropem, jeśli dwa razy zadeklarujemy zdarzenie window.onload dla dwóch różnych funkcji, wykona się tylko jedna, ta, którą przypisaliśmy do window.onload jako ostatnią.

Poniższy przykład jasno obrazuje, że po nadaniu <body onload="alert('uwaga, zaladowal sie dokument!');">, zmienna window.onload przechowuje kod funkcji o nazwie anonymous, która pokazuje okienko alert('uwaga, zaladowal sie dokument!');.

W innych przeglądarkach, a więc w Operze i Firefoxie zamiast powyższego kodu, pojawi się w okienku wartość null. Bez obaw jednak - wszystko działa w jak najlepszym porządku, tyle tylko, że skorzystaliśmy z magicznej właściwości IE, by potwierdzić istotę działania window.onload.

Czemu by więc nie zmienić w samym <script type="text/javascript"> wartości window.onload, by mieć z głowy <body>? Do dzieła!

<!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">
window.onload = Laduj;
	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";
		}

	}

	function Laduj()
	{
		var odnosnik = document.getElementById('link');
		odnosnik.onclick = function () { PokazAkapit('more_second'); }
	}

</script>

</head>
<body>
<div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Pellentesque metus eros, rutrum at, hendrerit nec, posuere ac.<a href="#" 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>

Usuwamy z:

<body onload="Laduj();">

ten kawałek:

onload="Laduj();"

Dopisujemy zaś na samym początku (nic nie szkodzi, by zrobić to na końcu) <script>

window.onload = Laduj;

Tym sposobem rozkazaliśmy przeglądarce wykonywać funkcję Laduj po załadowaniu okna ze stroną! Zupełnie analogicznie, jak w przypadku onclick!

Komentarze

1

Twoje kursy sa po prostu niezastapione :) tylko w tym kursie masz w jednym miejscu blad – zdarza sie :) a dokladnie w tym kodzie

testuj onload!
po kliknieciu w link „testuj onload!” wyskakuje mi okienko alert(‚null’) a tak to wszystko jak narazie dziala :)

Paweł
2

Racja Paweł, w sumie to nie błąd, tylko pewna nieścisłość – otóż null pokaże się w Operze i FF. W IE mamy to, co napisałem. Dziękuje za czujność, już pisze stosowny update :-)

3

[…] poinformować Wszystkich Czytelników Praktycznego wprowadzenia do JavaScript, że w odcinku szóstym dodałem pewien przypis, który wyjaśnia, w którym miejscu w pliku .js deklarować funkcję […]

4

Pisales, ze do wywolania funkcji ktorej nie przekekazuje sie argumentow nie uzywa sie (). Czyli zamiast:
body onload=”Laduj();”

powinno byc:
body onload=”Laduj;”

Zimny-Dran
5

Jeśli piszemy to w body, musi być nawias :)

6

Hmm – coś się chyba zmieniło w nowych wersjach przeglądarek :P

1. odnosnik.onclick = alert;
„Jak widać, wszystko działa. Po kliknięciu linku, pokaże się puste okno.”

Pod Firefoksem (2.0.0.6) nie działa – w konsoli błędów widać, że wyrzucany jest mało mówiący wyjątek:
Błąd: uncaught exception: [Exception... "Illegal operation on WrappedNative prototype object" nsresult: "0x8057000c (NS_ERROR_XPC_BAD_OP_ON_WN_PROTO)" location: "native frame :: :: :: line 0" data: no]
Pod Operą (9.22) dostaje się alert z [object MouseEvent] w treści, a pod IE6 nie dostaje się nic (tak jak pod Fx).

2. „W Internet Explorer, po kliknięciu w testuj onload ujrzymy okienko o treści: (…) W innych przeglądarkach, a więc w Operze i Firefoxie zamiast powyższego kodu, pojawi się w okienku wartość null. ”

Aktualnie wygląda to tak:
– IE6 i Opera (9.22): null
– Firefox (2.0.0.6):
function onload(event) {
alert('uwaga, zaladowal sie dokument!');
}

3. „Jeśli dołączasz swoje skrypty do dokumentu w postaci oddzielnego pliku .js, deklarację window.onload umieszczaj na jego końcu. Kiedy dodajemy kod JS z zewnętrznego pliku, przeglądarka aplikuje go do swojej pamięci od góry do dołu. Jeśli więc napotka window.onload, funkcja jej przypisana musi być już wcześniej w pamięci.”

Wiem, że dzięki naszej wymianie maili wprowadziłeś tę poprawkę w tekście, ale aktualnie widzę, że window.onload może być w dowolnym miejscu zewnętrznego pliku .js i zadziała ;]

m010ch
7

Uff… coraz bardziej zawiłe :) Ale jedziemy! Może i mam małe błędy składniowe (w html), ale okazuje się że to wina FF i IE 7…

8

Jestem zielony z JS ale myślę, że po kilku takich kursach wkońcu coś zajarze :)
Jak narazie sledząc ten kurs, wszystko ładnie i pięknie zadziałało i u mnie…
Od kilku godzin jednak kombinuje:
1. Jak by takie zawijanie paragrafu zastosować w ten sposób, by w przegladarce z wyączonym JS paragraf do ukrycia był widoczny i tylko przy działającym JS był w stanie ukrytym
2. A jeśli juz przy wyłączonym JS beędzie się wyświetlać paragraf do ukrycia to chyba link „schowaj” w tym momencie tez powinien być ukryty
3. po trzecie jak zmodyfikować skrypt by na stronie można było umieścić kilka paragrafów do ukrycia i by bez działającego JS były widoczne w przegladarce a z włączonym JS były wszystkie schowane a adnośniki dla każdego widoczne oraz by klikając na jeden z odnośników wyświetlał się ten przypisany mu paragraf.
Częściowo z punktami 1 i 2 dla pojedynczego paragrafu dałem sobie radę (w display przy paragrafie dałem „block” a link umieściłem w znaczniku SPAN z display:none by link nie wyświetlał się jeśli nie działa JS i zastosowałem funkcję warunkową która działa tylko gdzy załączone JS)
Gdy zacząłem dalej kombinować z kodem dla wiekszej ilości paragrafów na stronce wszystko mi się rozjechało i poddałem się – krótko mówiąc utknąłem – zastanawiam się czy nie będzie trzeba tu zastosować jakiegoś zapętlenia by ten przykład z kursu zadziałał dla wielu paragrafów do ukrycia.
Może ktoś pomoże? Pozdrawiam

Arthuro
9

Coz, musialbys poczytac dalej kurs – szczegolnie zajac sie getElementsByTagName, by wybrac wszystkie paragrafy. Potem nadac kazdemu w petli wlasnie onclick itd.

Pozdrawiam

10

Uff kolejny już mój komentarz dziś – mam nadzieję, że mnie za to nikt nie zbanuje ;) Bardzo podoba się mi tekst – fajnie wyjaśnia istotę poruszonego zagadnienia, pozwoliłem sobie więc zamieścić link do niego w jednej z moich lekcji – tutaj mam nadzieje, że Autor nie ma nic przeciwko, pozdrawiam i czytam dalej :-D

11

Czyzby nikt nie dopatrzyl sie, ze zmienna ‚odnosnik’ zostala dwa razy zainicjowana? Przydaloby sie male wyjasnienie traktujace o zasiegu zmiennych…

zbycho
12

coraz bardziej mi się ten kurs podoba, coraz bardziej ;)

13

Szczerzę mówiąc to nie wiem po co tak motać… Jeśli HTML posiada normalnie zdarzenia to dla czego bawić się z ich usuwaniem z BODY?

ZajOnDz
14

ZajOnDz,

wielu profesjonalistów postuluje separację struktury strony (najczęściej to treść ubrana w HTMLowe tagi) od jej warstwy prezentacyjnej (głównie arkusze stylów) i zachowania (JavaScript). niekoniecznie w omawianym w tym odcinku przykładzie, ale w bardziej zaawansowanych aplikacjach taka praktyka czyni pracę z kodem zdecydowanie wygodniejszą i szybszą dla wszystkich mających z nim do czynienia.

emiot
15

Nie wiem, czy dobrze robią, ale z powyższego skryptu… nie działa mi onclick ? może się coś zmieniło dla HTML5?
Od razu mi alert ładuje po odświeżeniu

function Laduj()
{
var odnosnik = document.getElementById('link');
odnosnik.onclick = alert;
}

Dodaj komentarz

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