Praktyczne wprowadzenie do JavaScript #7

Nasza wiedza, można powiedzieć to wprost, jest już całkiem spora. Co prawda nie potrafimy pewnych jej elementów fachowo nazwać, ale ważne, że rozumiemy ich działanie. Na trudne, programistyczne zwroty przyjdzie czas, więc bez obaw. Siódmy odcinek praktycznego wprowadzenia pokaże Ci natomiast, jak JavaScript potrafi być elastyczny i jak jeden efekt można uzyskać na wiele sposobów.

Z programowaniem jest trochę jak z pieczeniem ciasta. Każda kucharka dodaje nieco inne składniki, piecze ciasto trochę dłużej bądź krócej, ale efekt jest w każdym przypadku bardzo podobny. Jako że kod JavaScript daje dużą swobodę, ukazanie tej reguły na naszym przykładzie będzie naprawdę łatwe.

Jak zawsze, przyjrzymy się, czym dysponujemy w chwili obecnej:

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

Przygotuj się po prostu na łatwe podmienianie kodu, który oznacza to samo.

I tak, poniższy kod:

var view = akapit.style.display;

możemy zapisać w inny sposób, mianowicie:

var view = akapit.style['display'];

Naucz się na pamięć tego, że każdą właściwość stylów danego elementu można zapisać dwojako:

Również przypisanie danej właściwości stylów nie robi problemu w nowym zapisie, bowiem można śmiało usunąć:

akapit.style.display = "block";

i wstawić to:

akapit.style['display'] = "block";

Powyższy zapis pomaga nam szczególnie w sytuacji, gdyby właściwość stylów była zapisana w zmiennej, np.:


var wlasciwosc = "margin";
akapit.style[wlasciwosc] = 2;

Zauważ, że nie użyliśmy apostrofów ani cudzysłowów w [wlasciwosc], ponieważ, jak widać, wstawiliśmy w nawiasy kwadratowe zmienną.

Jeśli mowa o display, warto w końcu zająć się tym fragmentem kodu:

<p id="more" style="display: none;">

W 1. części pisałem, że JS nie odczyta wartości display z dołączonego kodu w pliku .css. I tak, usuwając ten zapis z dokumentu, style.display będzie miało pustą wartość. Musimy więc jakoś zadbać o to, by skrypt nadal działał. Możemy użyć np. konstrukcji else z 10. odcinka:

if (view == "block")
{
	odnosnik.innerHTML = "więcej";
	akapit.style.display = "none";
}
else
{
	odnosnik.innerHTML = "schowaj";
	akapit.style.display = "block";
}

Teraz nie musimy martwić się, jaką wartość ma właściwość display. Dlaczego? O tym dowiesz się, jak wspomniałem, w 10. odcinku.

Nie tylko w ten sposób można zdefiniować właściwości stylów danego elementu. Z pomocą przychodzi nam wbudowana funkcja setAttribute. Pozwala ona dodać wszystkie atrybuty danego tagu, czyli np.:

<a JAKIES ATRYBUTY NP. href="#" BĄDŹ _target I TAK DALEJ></a>

Niestety, w przeglądarce Internet Explorer nie można przy jej użyciu ustawić stylów danego tagu HTML. Jeśli jednak używacie innych, alternatywnych i jedynych słusznych przeglądarek, warto przyjrzeć się tej funkcji:

akapit.setAttribute("style", "display: none;");

Tym sposobem zmieniliśmy display akapitu na none. To tak, jakbyśmy zapisali w dokumencie: <p style=”display: none;”>

Warto też wspomnieć, że istnieje funkcja, która pozwala nam usunąć atrybuty danego tagu. Jest nią removeAttribute. Używamy jej w ten sposób:

odnosnik_do_tagu.removeAttribute("nazwa atrybutu");

W naszym wypadku, użycie tej funkcji będzie wyglądało następująco:

akapit.removeAttribute("style");

Atrybutem jest, jak zdążyliście zauważyć, style, więc go usuwamy. Popróbujcie z innymi atrybutami tagów, by przekonać się, że to działa! Ja, dla przykładu, zmienię atrybut href nazego linku więcej w jednym z warunków, obojętnie którym:


if (view == "none")
{
	odnosnik.innerHTML = "schowaj";
	akapit.style.display = "block";
	odnosnik.setAttribute("href", "http://wp.pl");
	alert(odnosnik.href);
}

Tym sposobem, wartość ta zmieniła się na http://wp.pl i od tej pory kliknięcie oznaczać będzie wejście na stronę najstarszego polskiego portalu oraz pokazanie w okienku alert adresu, jaki ustawiliśmy. Jako że nie dodajemy stylów, tego typu zabieg działa na IE!

Również window.onload = Laduj; można zapisać inaczej. W ramach ciekawostki warto dodać, że to samo można by osiągnąć stosując:


window.onload = function () { Laduj(); }

Jako że funkcja Laduj nie przyjmuje żadnych argumentów, taki zapis jest jednak zupełnie niepotrzebny i za długi.

Gdzieś w naszym kodzie mamy również coś takiego:


odnosnik.innerHTML = "więcej";
akapit.style.display = "none";

Wiedz, że można stosować dłuższą metodę bez zmiennych odnosnik i akapit i pisać tak:

document.getElementById('link').innerHTML = "więcej";
document.getElementById(id_paragrafu).style.display = "none";

Podstawiliśmy po prostu to, co zawierały nasze zmienne.

Jak widać, JavaScript oferuje wiele możliwości, jeśli chodzi o zapis kodu. W następnych częściach dowiesz się o jeszcze większych, kiedy zajmiemy się rozwijanym menu.

Komentarze

1

Niezły artykuł, ogólnie właśnie trafiłem na całą serie. Fachowo i przyjemnie napisane! Gratuluję, myślę że możesz mnie dopisać do listy oczekujcych na Twoją książkę ;-)

2

Dzieki.

Gdyby tak doba miala 48 godzin z pewnością Twój czas oczekiwania byłby krótszy. Ale walczę i z tą przeciwnością losu ;)

3

[…] Następnie trzeba nadać naszemu elementowi typ, bowiem każdy tag utworzony przez funkcję createElement jest pozbawiony jakichkolwiek atrybutów, jak name, type, czy też style, jakichkolwiek… Pomoże nam w tym funkcja setAttribute, którą poznaliśmy w 7. odcinku. […]

4

[…] kilka sposobów na osiągnięcie danego efektu, o czym między innymi przekonaliśmy się w siódmej części. Spowodowane jest to w głównej mierze niejednolitą interpretacją standardów sieciowych. Prym w […]

5

akapit.setAttribute("style", "display: none;");

Ok.Ale gdzie to ustawić by działało tak jak należy bo jak ustawiam w naszej ulubionej funkcji przed if to działa ale na początku pojawia mi się cała treść i dopiero po wciśnięciu odnośnika znika i potem już działa.

PS. Szacun za tak dobry kurs:)

Dodaj komentarz

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