Ferrante.pl - simplicity of web programming » Vademecum

varJS.com – zaawansowany JavaScript za darmo!

ferrante — Thu, 15 Apr 2010 20:24:11 +0000

To nie koniec niespodzianek w tym tygodniu! Uruchomiłem właśnie stronę varJS.com, gdzie wkrótce powstanie blog poświęcony JavaScript i pochodnym. Tym razem po angielsku. Mam zamiar publikować tam także kolejne rozdziały mojej książki o JavaScript zupełnie za darmo. Być może będzie to funkcjonowało na zasadzie wiki, tego jeszcze nie ustaliłem.

Co jednak dzisiaj istotne, wydałem prawie 250-stronicowy, długo oczekiwany materiał PDF ze szkoleń i mojego dotychczasowego researchu o nazwie Just Advanced JavaScript. Książka, a w zasadzie slajdy mają charakter ściągawki – opisana została lwia część języka oraz mnóstwo ciekawostek i haczyków. Wszystko znajdziecie pod varJS.com – serdecznie zapraszam! Prawdopodobnie wkrótce rozszerzę to o kolejne rozdziały i linki do innych pożytecznych stron, które również możecie tam spotkać.

Niniejszym dziękuje Rafałowi Kukawskiemu oraz Lei Verou, którzy odpowiadali za korektę i poprawę ewentualnych błędów merytorycznych. Z całego serca polecam współpracę z nimi, prawdziwi eksperci!

“this” w JavaScript

ferrante — Tue, 02 Feb 2010 21:36:51 +0000

Niedawno przyznałem, że na podstawie szkolenia pojawią się nowe artykuły. Czasem będą one kopiować jego treść, a innym razem ją rozszerzą, czy dopowiedzą to, co zostało z różnych przyczyn pominięte/uproszczone. Czas na pierwszy temat, czyli co tak naprawdę oznacza mityczne słówko this w JavaScript.

this występuje w blokach funkcyjnych bądź w globalnym scope, jak zresztą zdążyliście już pewnie nieraz zauważyć. Ciężko tak naprawdę powiedzieć, co dokładnie oznacza. Chyba najlepszą definicją będzie to, że this wskazuje na jakiś obiekt w zależności od kontekstu, w jakim została użyta funkcja, w której go zdefiniowaliśmy. Pisząc kontekst mam nam myśli głównie sposób i miejsce wywołania.

Obiekt globalny

O JavaScript w przeglądarkach wiemy, że obiekt globalny wskazuje na window. Tym samym this użyty w globalnym kontekście będzie wskazywał także na window:

W ten sposób z łatwością możemy dojść do wniosku, że poniższa funkcja użyta w globalnym scope zawsze będzie zwracała obiekt globalny:

Konstruktory a funkcje

Zobaczmy, co dzieje się, kiedy zdefiniujemy jakąś funkcję, która dodaje pewną własność do obiektu, na który będzie wskazywał this:

var fn = function() {
	this.foobar = "foo";
};

Mając do dyspozycji coś takiego, jak powyżej, możemy naciąć się na dwa zupełnie różne zachowania. Możemy przecież napisać potem tak:

var fn = function() {
	this.foobar = "foo";
};
var obj = new fn;

Lub tak:

var fn = function() {
	this.foobar = "foo";
};
fn();

W pierwszym przypadku tworzymy instancję nowego obiektu na podstawie konstruktora fn. Jak możemy się domyślić, w ten sposób this będzie wskazywał na nowoutworzony obiekt (obj) i będziemy mogli użyć czegoś podobnego:

var fn = function() {
	this.foobar = "foo";
};
var obj = new fn;
obj.foobar; // "foo"

W drugim listingu nie korzystamy jednak z operatora new, co za tym idzie nie tworzymy bezpośrednio nowego obiektu na podstawie konstruktora. Uruchamiamy po prostu funkcję jak każdą inną. Po wykonaniu się tego kodu nie dostajemy błędu, tak że możemy być pewni, że wszystko poszło dobrze i jest on – przynajmniej pod względem składni – absolutnie poprawny. Co więc dzieje się tutaj?:

fn();

JavaScript w takich przypadkach domyślnie przekierowuje na samą górę scope i this będzie wskazywał na obiekt globalny. W ten sposób pod this będzie ukryta referencja do window i będziemy mogli użyć zmiennej globalnej foobar tak:

window.foobar; // "foo"

Bądź tak:

window['foobar']; // "foo"

A także tak, jak poniżej, jako że każdy składnik obiektu window jest zmienną globalną:

foobar; // "foo"

Warto także powiedzieć, że funkcje zdefiniowane w innych konstruktorach/funkcjach nie dziedziczą this z funkcji wyżej, tylko także odwołują się do globalnego obiektu:

var zewnetrzna = function() {
	return function wewnetrzna() {
		return this;
	};
};

var fn = new zewnetrzna();
fn(); // window

Object literals

Ważny jest, jak powiedziałem, kontekst. Definiując sobie obiekt w postaci object literal, this odwołuje się domyślnie do obiektu, w którym został utworzony:

var obj = {
	bar: function() { return this; }
};

Pisząc więc coś takiego:

obj.bar();

this wskaże na obj. Przy okazji udowodnijmy kolejny raz, że funkcje wewnętrzne nie dziedziczą this:

var obj = {
	bar: function() {
		console.log(this);
		return function() {
			console.log(this);
			return this;
		}
	}
};

Szybki test potwierdza naszą tezę:

obj.bar()();

Choć pamiętajmy, że równie dobrze można zapisać tak:

var fn = obj.bar();
fn();

Wszystko wygląda tak dlatego, że JavaScript wspiera zwracanie funkcji, które możemy potem uruchomić dodając nawiasy wywołania.

Zobaczymy teraz bardzo ciekawą rzecz, związaną z kontekstem. Zdefiniujmy najpierw object literal:

var obj = {
	bar: function() {
		return this;
	}
};

Uruchamiając to tak:

obj.bar(); // obj

this zwraca obj. Jeśli jednak literalnie zmienimy to, co będzie po kropce, kontekst będzie już inny:

var f = obj.bar;
f(); // window

Dlaczego tak?

Jako że zmienne globalne możemy pisać tak:

window['globalna'] = "cos";
window['globalna']; // "cos"

Równie dobrze możemy zrobić jak poniżej, co wyjaśni nam, dlaczego this wskazuje na window:

window['f'] = obj.bar;
window['f'](); // window

Mamy więc po lewej obiekt window, czyli funkcja f jest uruchamiana właśnie w jego kontekście i to do niego this będzie odnosił.

Przeanalizujcie też poniższy kod, który wynikł z inicjatywy Rafała Kukawskiego w trakcie rozmowy ze mną:

var fn = function() {
	var b = function(){
		return this;
	};
	this.foo = function() {
		return b();
	}
};
var obj = new fn();
obj.foo(); // window

Inne metody

this można również zmienić poprzez metody call i apply wywołane na konstruktorach, ale to temat na kolejny artykuł.

Na koniec ćwiczenie ze szkolenia – co zwróci następujący kod i dlaczego:

var e = !!3;
var fn = function() {
	return {
		foobar: this.e,
		e: !!0
	};
};

var res = fn();
res.foobar; // ?

Falsy values i operatory porównania

ferrante — Sat, 05 Sep 2009 16:22:15 +0000

Jest coś takiego w JavaScript, co się zowie jak powyżej. Niestety, bardzo często jest to temat niezrozumiały. Miałem okazję uczestniczyć bądź po prostu układać pytania do kilku rekrutacji na JavaScript developera w dużych firmach i muszę stwierdzić, że czasem bywa wręcz z falsy values dramatycznie.

O co takiego chodzi? Falsy values¹ to nic innego, jak zbiór wartości, które dają fałsz. Coś w ten deseń:

if (!value) {
	console.log('Jedną z falsy values jest: '+ value);
}

Pytanie, jakie są to wartości? Oto one:

“” – pusta zmienna typu String
0 – typu Number
false typu Boolean
undefined
null
NaN typu Number

Czyli:

if (!NaN) {
	console.log('Jedną z falsy values jest: '+ NaN);
}

if (!null) {
	console.log('Jedną z falsy values jest: '+ null);
}

Wszystkie te wartości przy konwertowaniu na typ Boolean (np. !!NaN) dają false. Warto zapamiętać!

Operatory porównania w JavaScript

Jeśli mowa o falsy values ciekawe rzeczy dzieją się przy ich porównywaniu. Jak wiadomo, mamy operatory == i ===. Mnóstwo ludzi wykłada się na tym, banalnym zresztą (po głębszej analizie) problemie.

Warto zapamiętać, że pierwszy operator porównuje jedynie wartości, drugi – wartości oraz typy. Poniższe przykłady dają więc prawdę:

"0" == 0
"    " == 0
[] == 0
undefined == null
false == new String("")

Fałsz zwracają natomiast podobne konstrukcje:

NaN == 0
null == 0
undefined == ""
0 == {}

Kiedy idzie o operator ścisłego porównania robi się ciekawiej – JavaScript oprócz logicznej wartości porównuje również typy zmiennych (a więc czy są obiektem, stringiem, liczbą itd.). Prawdę zwracają:

0 === 0
"" === ""
[] !== [] // dla kontrastu..

Fałsz natomiast poniższe przykłady:

"" === 0 // typ string i number
0 === null // typ number i object
[] === 0 // typ object i number
[] === "    " // typ object i string

Warto więc być ostrożnym w trakcie pisania aplikacji w JavaScript.

Temat falsy values poruszył na przykład Douglas Crockford w swojej znakomitej książce “JavaScript: The Good Parts”. Polecam!

Singleton w JavaScript

ferrante — Wed, 08 Jul 2009 23:09:36 +0000

Ostatnio, wspólnie z Markiem Stasikowskim, myśleliśmy intensywnie – w ramach zabawy z JavaScript – nad jak najlepszą implementacją wzorca projektowego Singleton. Wspólnymi siłami doszliśmy do dość fajnego kodu, który pozwolę sobie przedstawić i nieco omówić.

Przypomnijmy, o co tak naprawdę chodzi we wzorcu Singleton. Ujmując rzecz najprościej, Singleton ma za zadanie udostępniać tylko jedną instancję danej klasy w obrębie całej aplikacji. Używając tego wzorca mamy pewność, że zawsze operujemy na tym samym obiekcie, a pamięć nie zostanie zbyt zaśmiecona. Praktyczną implementację Singletonu można zastosować na przykład do klasy XHR (XMLHttpRequest) czy też rozpoznającej wersję przeglądarki internetowej.

Co jeszcze charakterystyczne dla tego wzorca, to prywatny konstruktor. W efekcie wywołanie new Singleton() jest niemożliwe. Jedyną instancję klasy Singleton pobieramy specjalnie do tego stworzoną metodą statyczną, np. Singleton.getInstance().

Spójrzmy więc na najprostszą implementację wzorca. Zakładamy, ze klasą typu Singleton będzie tak naprawdę klasa (funkcja) Constructor.

var Singleton = (function(){
	var Constructor = function() {
		this.data = 'some data';
}	

	return {
		getInstance: function (){
			return this.instance || (this.instance = new Constructor);
		}
	}
})();

Co tutaj najważniejsze, to natychmiastowe utworzenie obiektu z funkcji anonimowej¹:

var Singleton = (function() { ... })();

Uniemożliwia to stworzenie czegoś na wzór new Singleton(), ponieważ do zmiennej Singleton zostanie przypisany rezultat natychmiastowego uruchomienia (ściślej mówiąc: skonkretyzowania obiektu) powyższej funkcji, a nie jej ciało.

Następnie tworzymy prywatny konstruktor:

var Constructor = function(){
	this.data = 'some data';
}

Ostatnie, co zostało do zrobienia, to zwrócenie jakieś konkretnej wartości wywoływanej anonimowej funkcji, tak by zmienna Singleton mogła używać metody getInstance (Singleton.getInstance()).

return {
	getInstance: function (){
		return this.instance || (this.instance = new Constructor);
	}
}

W ciele funkcji getInstance zwracamy instancję klasy Constructor (która, jak założyliśmy, ma być Singletonem), jeśli już jest stworzona lub tworzony ją, zapisując ją przy okazji jako składową, którą będziemy zwracać przy kolejnych wywołaniach getInstance. Wypada zrobić testy:

var foo = Singleton.getInstance();
var bar = Singleton.getInstance();

console.log(foo === bar); // true

foo.data = 'foobar';
console.log(bar.data); // foobar

Dzięki === dokonujemy sprawdzenia, czy wybrane obiektu są tego samego typu, a potem, czy zmiana dokonana na jednym obiekcie typu Singleton, powoduje zmiany w pozostałych obiektach. Działa!

Update

Podany w powyższej postaci Singleton można niestety nadpisać. Nie mamy więc pewności, że obiekt Singletonu będzie cały czas dostępny. Jednym z prostszych rozwiązań jest użycie const, która definiuje w JavaScript stałe:

const Singleton = (function(){
	var Constructor = function() {
		this.data = 'some data';
}	

	return {
		getInstance: function (){
			return this.instance || (this.instance = new Constructor);
		}
	}
})();

W ten sposób próba przypisania Singleton = “cos tam” jest niemożliwa. Niestety rozwiązanie to nie działa na IE, ale programujemy na poważne przeglądarki, czyż nie?

Warto też mieć świadomość, że w przypadku obecnej implementacji, zmienna instance jest publiczna (czyli możemy użyć Singleton.instance). Możemy ją ukryć w prosty sposób, używając closures:

const Singleton = (function(){
	var Constructor = function() {
		this.data = 'some data';
}, instance = null;	

	return {
		getInstance: function (){
			return instance || (instance = new Constructor);
		}
	}
})();

(function() {})() można też zapisać jako new function() {}

jQuery – to łatwe #6: Piszemy prostą grę!

ferrante — Thu, 05 Jun 2008 16:44:49 +0000

Bardzo ciekawym eksperymentem, jeśli chodzi o JavaScript jest stworzenie jakiejkolwiek gry w tym języku. Pomaga to przede wszystkim nauczyć się podejścia koncepcyjnego do tworzenia tego typu kodu. Gdy wszystko oprzemy o jQuery, może być to niezwykle ekscytujące doświadczenie, jeśli chodzi o poznawanie tego frameworka. Do dzieła!

Spróbujmy zrobić grę, polegającą na tym, że w danym obszarze poruszać będą się kolorowe boksy/skrzynki/cokolwiek, które należy usunąć, klikając w dany element. Za każdy udany klik i zniszczenie kolorowego prostokąta otrzymujemy jeden punkt. Zadanie jest proste – ustrzelić jak najwięcej boksów w danym czasie. Mimo że gra nie jest zbyt odkrywcza i na pewno znudzi się po kilku minutach, stanowi dobrą podstawę do dalszego tworzenia tego typu aplikacji.

Całość będzie toczyć się w obszarze #area, który będzie zwykłym divem. O takim:

Po wystartowaniu gry będziemy dodawać do tego diva kolejne boksy, które trzeba będzie trafić kursorem myszki. Wtedy kod HTML będzie wyglądać mniej wiecej tak:

Obok obszaru, na którym toczyć będzie się ta pasjonująca rozgrywka, widniał będzie nasz aktualny wynik i licznik czasu, który pozostał do końca:



	Wynik:
0

	Pozostało:
30 sekund

Powstały szablon HTML gry prezentuje się następująco:



 
  Gra
  
  

  
  
 

 
 
	
	

		Wynik:
0

		Pozostało:
30 sekund

Dobrze, mamy już HTML i jQuery na pokładzie. Przemyślmy teraz logikę działania gry.

Włączamy grę, wpisując adres do przeglądarki. Pora na działanie skryptu:

Po załadowaniu DOM pobieramy do specjalnych zmiennych wielkość i położenie #area, abyśmy wiedzieli, w jakim obszarze będą poruszać się nasze skrzynki. Następnie dodajemy do #area kilka nowych divów. Losujemy wartości ich atrybutów: height, width, left i top (dwie ostatnie z uwagi na to, że boksy będą się ruszać, tak więc nieuchronne jest ustawienie position:absolute i następnie odpowiednia zmiana wartości left i top, tak by symulować ruch). Byłoby też fajnie, gdyby elementy te były różnego koloru. Musimy więc losowo wygenerować odpowiedni background-color. Oprócz tego, ustalamy id diva, tworząc je na podstawie daty utworzenia i wylosowanej wysokości elementu. Mamy w ten sposób 100% pewność, że żadne id się nie powtórzy. Ostatnią cechą, którą przydzielimy losowo, jest kierunek, w jakim poruszać będą się boksy. Zakładamy, że do wyboru mamy kierunki NW, NE, SW, SE. Gdy wszystko będzie gotowe, dodamy boksom zdarzenia onclick. Jeśli ktoś kliknie w element – ten zniknie, do wyniku zostanie doliczony jeden punkt, a także zostanie wygenerowanych od 1 do 3 nowych boksów.
Po dodaniu pierwszych “skrzynek”, musimy wprawić je w ruch. Dzięki window.setInterval odpalimy co 200milisekund specjalną funkcję, która zbada położenie każdej skrzynki, a potem, w zależności od jej kierunku poruszania, odejmie bądź doda kilka pikseli wartościom stylów: left i top. Używając setInterval wprawimy w ruch także licznik czasu. Co sekundę zostanie on uaktualniony przez specjalną funkcję. Jeśli minie limit, funkcja ta przerwie poruszanie się klocków i zatrzyma grę.

Do napisania gry zastosujemy styl Camel Case, który, stosowany przede wszystkim w języku JAVA, jest bardzo przejrzysty. Oto zmienne, które nam posłużą w budowie gry:

boxMaxWidth, boxMaxHeight, boxMinWidth, boxMinHeight – maksymalne i minimalne wymiary boksu
boxBackgrounds – tablica z dostępnymi kolorami dla boksu
boxContainer – tablica skupiająca wszystkie boksy
boxStartingCount – początkowa liczba boksów
boxAdditionalMaxCount – maksymalna liczba boksów losowana po “ustrzeleniu” któregoś z nich
boxMovement – odnośnik do funkcji moveBox, uruchamianej cyklicznie
boxMovementHorizontal, boxMovementVertical – liczba pikseli w ruchu poziomym i pionowym
areaPosition – obiekt, przechowujący pozycje pola gry
areaSize – obiekt, przechowujący wymiary pola gry
gameTimer – odnośnik do funkcji executeTimer, wywoływanej cyklicznie
gameOver – true/false, informuje, czy gra działa, czy jest skończona

Poniżej z kolei funkcje, które musimy zaimplementować:

createBoxes(i) – tworzy i elementów (boksów) w obszarze #area.
setBoxRandomSize(obj) – losuje wartości height i width dla obiektu DOM jQuery obj. Zwraca wylosowane liczby.
setBoxRandomPosition(obj) – losuje pozycje boksu (obiekt DOM jQuery) i zwraca uzyskane wartości.
setBoxRandomBackground(obj) – losuje kolor tła dla obiektu DOM jQuery obj.
executeTimer() – odpowiada za licznik czasu gry.
moveBoxes() – wprawia w ruch każdy z elementów.

Jeśli mamy listę potrzebnych zmiennych i funkcji, wstawmy je w odpowiednie miejsce, by z czasem uzupełniać to i owo:

	var boxMaxWidth = boxMaxHeight = 40;
	var boxMinWidth = boxMinHeight = 30;

	var boxBackgrounds = ["green", "red", "blue", "black", "pink"];

	var boxContainer = [];

	var boxStartingCount = 5;
	var boxAdditionalMaxCount = 3;

	var boxMovement;
	var boxMovementHorizontal = boxMovementVertical = 10;

	var areaPosition = {};
	var areaSize = {};

	var gameTimer;
	var gameOver = false;

	function createBoxes(i)
	{
	}
	function setBoxRandomSize(obj)
	{
	}
	function setBoxRandomPosition(obj)
	{
	}
	function setBoxRandomBackground(obj)
	{
	}
	function executeTimer()
	{
	}
	function moveBoxes()
	{
	}
	$().ready(function()
	{
	});

Warto omówić sobie, kilka zastosowanych tutaj zabiegów. Po pierwsze:

var boxMaxWidth = boxMaxHeight = 40;

Jest to wielokrotne przypisanie wartości, używane zamiast czegoś takiego:

var boxMaxWidth = 40; var boxMaxHeight = 40;

Natomiast coś takiego:

var areaSize = {};

oznacza, że areaSize jest pustym obiektem. Z kolei

var boxContainer = [];

tworzy ze zmiennej boxContainer zwykłą tablicę.

Podsumowując, po włączeniu gry będziemy mieć do dyspozycji 5 boksów, których szerokość i wysokość mieścić będą się w przedziale od 30 do 40 pikseli. Dostępnych jest też 5 kolorów: “green”, “red”, “blue”, “black”, “pink”. Po strąceniu klocka skrypt będzie generował od 1 do 3 dodatkowych elementów. Co 200 milisekund każda “skrzynka” poruszać będzie się o 10 pikseli w poziomie i pionie. Pora teraz na to, co tygryski lubią najbardziej – kodowanie.

Ustaliliśmy, że po załadowaniu drzewa DOM, przeglądarka powinna pobrać dane na temat wymiarów i pozycji #area, uruchomić dodawanie boksów oraz wprawić nowe elementy w ruch, by na końcu długiej listy czynności uruchomić licznik. Zajmijmy się więc tym wszystkim w pierwszej kolejności.

$().ready(function()
{
	areaPosition = $("#area").position();
	areaSize.w = $("#area").width();
	areaSize.h = $("#area").height();

	createBoxes(boxStartingCount);

	boxMovement = window.setInterval("moveBoxes()", 200);
	gameTimer = window.setInterval("executeTimer()", 1000);

});

Pierwsze 3 linijki to czyste jQuery – funkcje frameworka – position, width i height pozwalają nam pobrać stosowne informacje o #area. Warto zwrócić uwagę na dwie rzeczy – position() zwraca obiekt o dwóch właściwościach: left i top. Dlatego też areaPosition będzie przechowywała te dwie wartości, a odwoływać się będziemy do nich tak:

areaPosition.left; areaPosition.top;

Podobnie jest z areaSize – jest to obiekt, któremu przypisujemy dwie, nowe właściwości – h i w, oznaczające wysokość i szerokość #area.

Potem odpalamy createBoxes z argumentem boxStartingCount, która doda 5 nowych elementów (bo właśnie tyle przypisaliśmy zmiennej boxStartingCount.

Na końcu uruchamiamy odpowiednie funkcje, o których już mówiliśmy, z pewnym, cyklicznym opóźnieniem. Wszystko dzięki setInterval, o którym pisałem choćby tutaj.

Zajmijmy się teraz pierwszą z brzegu – createBoxes.

Musimy stworzyć tyle boksów, ile podano w argumencie, tak więc użyjemy do tego pętli for, korzystającej z argumentu funkcji:

function createBoxes(i)
{

	for (var x = 0;x < parseInt(i); x++)
	{

Następnie tworzymy nowego diva:

function createBoxes(i)
{
	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("
");

Pora na małą przerwę w naszych, nie wątpie, zdecydowanych działaniach. Po stworzeniu diva przychodzi czas na wygenerowanie jego właściwości. Omówmy więc, na czym polega uzyskiwanie losowych wartości w JavaScript.

Za całe zamieszanie odpowiedzialna jest funkcja random(), należąca do obiektu Math – Math.random(). Losuje ona liczbę od 0 do 1 (przedział lewostronnie domknięty <0;1)) w postaci ułamkowej, tak więc najczęstsze jej wyniki to 0,24325325325, 0,355554343 i tak dalej. Sama w sobie, funkcja random nie daje nam oczekiwanych rezultatów. Co zrobić, jeśli chcemy wylosować np. liczbę od 0 do 100? Odpowiedź jest prosta, musimy pomnożyć wynik funkcji random przez maksymalny wynik, jaki nas interesuje plus jeden.

var int = Math.random()*101;

W ten sposób osiągniemy liczby z zakresu od 0 do 100, w formie 22,232323 itd. Jeśli chcemy tylko i wyłącznie liczby całkowite, należy uzyć funkcji Math.floor. Zamienia ona dowolne liczby na całkowite właśnie, zaokrąglając do dołu.

var int = Math.floor(Math.random()*101);

Pytanie, co zrobić, jeśli chcemy liczbę z zakresu np. 25 do 50. Jest to dość skomplikowane, jednak po chwili zastanowienia stwierdzamy, że do całości należy dodać minimum, a wylosowaną liczbę pomnożyć przez powiększoną o jeden różnicę między maksimum a minimum.

var int = 25+Math.floor(Math.random()*26);

Dla fanów matematyki zrozumienie powyższego przykładu powinno być przyjemnością.

Bogatsi o podstawy teoretyczne, powróćmy do naszego przykładu. Musimy wylosować wysokość i szerokość boksu:

function createBoxes(i)
{
	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("");

		var sizes = setBoxRandomSize(div);

Uzupełnijmy więc funkcję setBoxRandomSize:

function setBoxRandomSize(obj)
{
	var height = Math.floor((boxMaxHeight-boxMinHeight+1)*Math.random())+boxMinHeight;
	var width = Math.floor((boxMaxWidth-boxMinWidth+1)*Math.random())+boxMinWidth;

	obj.css({"height": height, "width": width});

	return {"height": height, "width": width};
}

Sprawa jest prosta – losujemy wartości z zakresu 30-40 i ustawiamy, dzięki jQuery, odpowiednie wartości. Tym razem robimy to kompleksowo, zamiast

obj.css("height", height).css("width", width);

piszemy

obj.css({"height": height, "width": width});

Jest to notacja obiektowa, o której szerzej w następnych artykułach na tym blogu. Sens działania tego zapisu można zrozumieć jednak bez większych problemów. Jako argument funkcji css podajemy wartości wg poniższego szablonu:

{nazwa_stylu: wartość, nazwa_stylu: wartosc, ..., nazwa_stylu: wartosc}

Pora na wylosowanie losowej pozycji elementu:

function createBoxes(i)
{
	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("");

		var sizes = setBoxRandomSize(div);
		setBoxRandomPosition(div);

I uzupełnienie funkcji setBoxRandomPosition:

function setBoxRandomPosition(obj)
{
	var left = Math.floor((areaSize.w-parseInt(obj.css("width")))*Math.random())+areaPosition.left;
	var top = Math.floor((areaSize.h-parseInt(obj.css("height")))*Math.random())+areaPosition.top;

	obj.css({"left": left +"px", "top": top +"px"});
}

Następne losujemy tło:

function createBoxes(i)
{
	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("");

		var sizes = setBoxRandomSize(div);
		setBoxRandomPosition(div);
		setBoxRandomBackground(div);

W ten sposób:

function setBoxRandomBackground(obj)
{
	var background = Math.floor(Math.random()*boxBackgrounds.length);
	obj.css("background-color", boxBackgrounds[background]);
}

Do zmiennej background losujemy liczbę z zakresu od 0 do *liczba elementów tablicy boxBackgrounds* (wyrażona poprzez boxBackgrounds.length). W ten sposób mamy losowy klucz tablicy boxBackgrounds, zawierający któryś, z kolorów (boxBackgrounds[background]).

I tak, mamy uzupełnione 3 funkcje, generujące losowe dane. Musimy teraz dokończyć dzieło tworzenia funkcji createBoxes. Zacznijmy od wygenerowania losowego id:

function createBoxes(i)
{
	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("");

		var sizes = setBoxRandomSize(div);
		setBoxRandomPosition(div);
		setBoxRandomBackground(div);

		var date = new Date();
		var id = new String(""+sizes.height+""+date.getTime()+"");

		div.attr("id", id);

Do zmiennej date tworzymy obiekt typu Date, który jest w JS wbudowany, podobnie jak Image, Math i inne. Obiekt ten posiada funkcję getTime, która zwraca aktualny czas w formie UNIXowej. W ten sposób mamy unikalne id, które przyda nam się, by łatwo odwołać sie do konretnego boksu w tablicy zawierającej je wszystkie (boxContainer). O takiej:

function createBoxes(i)
{

	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("");

		var sizes = setBoxRandomSize(div);
		setBoxRandomPosition(div);
		setBoxRandomBackground(div);

		var date = new Date();
		var id = new String(""+sizes.height+""+date.getTime()+"");

		div.attr("id", id);

		boxContainer[id] = [];

W ten sposób mamy nowy element tablicy boxContainer o losowym kluczu w postaci identyfikatora elementu np. boxContainer[1223424325432] itd. Z tego elementu tablicy robimy kolejną tablicę (= []), by umożliwić korzystanie z czegoś podobnego, na wzór tablicy wielowymiarowej:

boxContainer[id]['cos']

Paść może pytanie, po co nam taka tablica, skoro wszystkie divy będą należeć do #area, co za tym idzie można je łatwo pobrać podobnym wyrażeniem:

$("#area div");

Sprawa rozbija się o… szybkość działania skryptu. Iteracja po tablicach jest znacznie szybsza niż po DOM. Jeszcze większą szybkość moglibyśmy uzyskać, stosując klucze liczbowe – czyli zamiast “cos” np. 2. Dla przejrzystości zachowamy jednak klucze będące stringiem. Za zastosowaniem tablic przemawia również łatwe dodawanie (i szybsze) właściwości danego boksu, a więc w tym wypadku jego kierunku poruszania.

Jeśli mowa o kierunku poruszania się, wylosujmy kierunek w pionie i poziomie. Zrobimy to losując liczbę od 1 do 2. Defaultowo boks poruszać będzie się w prawo i w dół. Jeśli za pierwszym razem wypadnie jedynka, element będzie poruszał się w lewo, jeśli to samo stanie się za drugim razem, zmieni się również kierunek w pionie.

function createBoxes(i)
{

	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("");

		var sizes = setBoxRandomSize(div);
		setBoxRandomPosition(div);
		setBoxRandomBackground(div);

		var date = new Date();
		var id = new String(""+sizes.height+""+date.getTime()+"");

		div.attr("id", id);

		boxContainer[id] = [];

		var arrow = Math.floor(2*Math.random())+1;
		boxContainer[id]['x'] = 'right';

		if (arrow == 1)
		{
			boxContainer[id]['x'] = 'left';
		}

		var arrow = Math.floor(2*Math.random())+1;
		boxContainer[id]['y'] = 'bottom';

		if (arrow == 1)
		{
			boxContainer[id]['y'] = 'top';
		}

W ten sposób, jeśli stworzymy element o id np. 222 (hipotetycznie), to tablica boxContainer wyglądać będzie tak:

boxContainer = [222:
	[
		y: top || bottom; (kierunek poruszania się w pionie)
		x: left || right; (kierunek poruszania się w poziomie)
	]
]

Wartości x i y zależą od wylosowanych liczb.

Zapiszmy jeszcze do tablicy z danym wygenerowanym elementem jego szerokość i wysokość. Po co pobierać ją za każdym razem, korzystając z DOM ($(element).css("height")), skoro można ten proces przyspieszyć:

function createBoxes(i)
{

	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("");

		var sizes = setBoxRandomSize(div);
		setBoxRandomPosition(div);
		setBoxRandomBackground(div);

		var date = new Date();
		var id = new String(""+sizes.height+""+date.getTime()+"");

		div.attr("id", id);

		boxContainer[id] = [];

		var arrow = Math.floor(2*Math.random())+1;
		boxContainer[id]['x'] = 'right';

		if (arrow == 1)
		{
			boxContainer[id]['x'] = 'left';
		}

		var arrow = Math.floor(2*Math.random())+1;
		boxContainer[id]['y'] = 'bottom';

		if (arrow == 1)
		{
			boxContainer[id]['y'] = 'top';
		}

		boxContainer[id]['w'] = sizes.width;
		boxContainer[id]['h'] = sizes.height;

Wyróżnione części kodu powinny pokazać, skąd wzięły się wartości sizes.

Mamy teraz tablicę asocjacyjną, której głównym kluczem jest identyfikator elementu. Potem do wyboru mamy 4 wartości - 2 kierunki poruszania się oraz szerokość i wysokość boksu.

Pora dodać teraz zdarzenie onclick, oznaczające usunięcie elementu z #area oraz dodanie punktu.

function createBoxes(i)
{

	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("");

		var sizes = setBoxRandomSize(div);
		setBoxRandomPosition(div);
		setBoxRandomBackground(div);

		var date = new Date();
		var id = new String(""+sizes.height+""+date.getTime()+"");

		div.attr("id", id);

		boxContainer[id] = [];

		var arrow = Math.floor(2*Math.random())+1;
		boxContainer[id]['x'] = 'right';

		if (arrow == 1)
		{
			boxContainer[id]['x'] = 'left';
		}

		var arrow = Math.floor(2*Math.random())+1;
		boxContainer[id]['y'] = 'bottom';

		if (arrow == 1)
		{
			boxContainer[id]['y'] = 'top';
		}

		boxContainer[id]['w'] = sizes.width;
		boxContainer[id]['h'] = sizes.height;

		div.click(function(e)
		{
			if (!gameOver)
			{
				$(this).hide("slow", function()
				{
					$(this).remove();
					$("#result").text(parseInt($("#result").text())+1);
				createBoxes(Math.floor(boxAdditionalMaxCount*Math.random())+1);
				});
			}
		});

Po dodaniu zdarzenia, sprawdzamy w warunku if, czy gra działa, czy nie. Jeśli zmienna gameOver będzie miała wartość false, będzie to oznaczało, że rozgrywka jest w toku i należy przeprowadzić usunięcie elementu. Ten z kolei usuwamy, kiedy ukryjemy dany boks (funkcja hide i drugi argument, w postaci funkcji wykonywanej po ukończeniu chowania elementu). Całość zostaje usunięta z drzewa DOM dzięki funkcji remove. Potem dodajemy do wyniku jeden, pobierając go wcześniej i zamieniając, dla upewnienia się, na liczbę (parseInt()). Ostatnia czynność to dodanie do #area od 1 do 3 nowych boksów (znowu urządzamy małe losowanie, korzystając z wiadomości poznanych wyżej).

Ostatnią rzeczą, którą musimy się zająć, jest oczywiście dodanie powstałego diva do kontenera, w którym będzie się poruszał:

function createBoxes(i)
{

	for (var x = 0;x < parseInt(i); x++)
	{
		var div = $("");

		var sizes = setBoxRandomSize(div);
		setBoxRandomPosition(div);
		setBoxRandomBackground(div);

		var date = new Date();
		var id = new String(""+sizes.height+""+date.getTime()+"");

		div.attr("id", id);

		boxContainer[id] = [];

		var arrow = Math.floor(2*Math.random())+1;
		boxContainer[id]['x'] = 'right';

		if (arrow == 1)
		{
			boxContainer[id]['x'] = 'left';
		}

		var arrow = Math.floor(2*Math.random())+1;
		boxContainer[id]['y'] = 'bottom';

		if (arrow == 1)
		{
			boxContainer[id]['y'] = 'top';
		}

		boxContainer[id]['w'] = sizes.width;
		boxContainer[id]['h'] = sizes.height;

		div.click(function(e)
		{
			if (!gameOver)
			{
				$(this).hide("slow", function()
				{
					$(this).remove();
					$("#result").text(parseInt($("#result").text())+1);
				createBoxes(Math.floor(boxAdditionalMaxCount*Math.random())+1);
				});
			}
		});

		$("#area").append(div);

Voila.

Pora wprawić w ruch powstałe boksy i uruchomić licznik. Zacznijmy od tego drugiego:

function executeTimer()
{
	var time = parseInt($("#time").text());

	if (time-1 > -1)
	{
		$("#time").text(time-1);
		return false;
	}

	window.clearInterval(gameTimer);
	window.clearInterval(boxMovement);
	gameOver = true;

}

W odpowiedzialnej za to funkcji executeTimer, którą, przypomnijmy, odpalamy cyklicznie, dzieje się wiele istotnych, ale równie łatwych rzeczy. Po pierwsze, pobieramy stąd:

Pozostało:
30 sekund

ile zostało nam czasu na zabawę:

var time = parseInt($("#time").text());

Znów używamy parseInt, by uniknąć jakichkolwiek niespodzianek.

Potem sprawdzamy, czy odejmując jeden od pobranej liczby sekund nie uzyskamy czasem liczby ujemnej, co byłoby przecież nielogiczne (jak może nam zostać do końca rozgrywki -1 sekund?). Jeśli więc wszystko pójdzie w porządku, rzeczywiście odejmujemy jeden od ogólnej liczby sekund i aktualizujemy licznik, dzięki funkcji jQuery text. return false; w tym wypadku kończy działanie funkcji, która pominie pozostały kod.

Ten z kolei zostanie uruchomiony, kiedy przekroczymy czas gry, a więc do końca zostanie nam te -1 sekund. Wtedy to usuwamy możliwość cyklicznego wykonywania ustawionych wcześniej funkcji oraz zmieniamy wartość zmiennej gameOver na true. Oznacza to po prostu koniec gry (wówczas zdarzenie onclick, które dodaliśmy wcześniej dla elementów nie uruchomi się, ze względu na wartość zmiennej gameOver).

Pozostało nam już tylko uruchomić poruszanie się boksów. Musimy dotrzeć do każdego z nich w tablicy boxContainer i sprawdzić jego położenie. Na jego podstawie ustalimy kierunek ruchu.

Dostać się do każdego elementu tablicy pomoże nam znów pętla for:

function moveBoxes()
{
	for (k in boxContainer)
	{

Użyta w ten sposób działa podobnie do PHPowej funkcji foreach - po prostu iteruje po każdym elemencie tablicy boxContainer, której kluczem jest zmienna k. Dostajemy wtedy każdy element tablicy w postaci:

boxContainer[k];

O ile dobrze przypominasz sobie dodawanie elementów do tej tablicy, zapewne wiesz, że pod k znajdują się po prostu identyfikatory divów. Wykorzystajmy to, by pobrać ich aktualną pozycje z drzewa DOM:

function moveBoxes()
{
	for (k in boxContainer)
	{
		var top = parseInt($("#"+k).css("top"));
		var left = parseInt($("#"+k).css("left"));

Teraz, w zależności od kierunku poruszania się danego elementu, ustalimy zaktualizowane wartości stylów left i top dla diva:

function moveBoxes()
{
	for (k in boxContainer)
	{
		var top = parseInt($("#"+k).css("top"));
		var left = parseInt($("#"+k).css("left"));

		if (boxContainer[k]['y'] == 'top')
		{
			var top = top-boxMovementVertical;
		}
		else
		{
			var top = top+boxMovementVertical;
		}
		if (boxContainer[k]['x'] == 'left')
		{
			var left = left-boxMovementHorizontal;
		}
		else
		{
			var left = left+boxMovementHorizontal;
		}

Jak widać, w zależności od kierunku, dodajemy bądź odejmujemy od tych wartości 10 pikseli (wartości zmiennych boxMovementHorizontal i boxMovementVertical). Biorąc pod uwagę, że funkcja moveBoxes jest uruchamiana co 200milisekund, da to nam złudzenie ruchu wszystkich boksów.

Oczywiście musimy sprawdzić, czy wartości left i top nie są za małe bądź za duże. Wtedy to boks wyjdzie poza obszar #area. Sprawdzamy więc, kiedy dany klocek dotknie granic dozwolonego obszaru. Jeśli poruszający się w prawo natknie się na prawą krawędź, wtedy jego dalszy ruch w prawo nie ma sensu - zmieniamy mu kierunek na lewy. To samo ma się, jeśli chodzi o ruch pionowy.

function moveBoxes()
{
	for (k in boxContainer)
	{
		var top = parseInt($("#"+k).css("top"));
		var left = parseInt($("#"+k).css("left"));

		if (boxContainer[k]['y'] == 'top')
		{
			var top = top-boxMovementVertical;
		}
		else
		{
			var top = top+boxMovementVertical;
		}
		if (boxContainer[k]['x'] == 'left')
		{
			var left = left-boxMovementHorizontal;
		}
		else
		{
			var left = left+boxMovementHorizontal;
		}

		if (left <= areaPosition.left)
		{
			boxContainer[k]['x'] = 'right';
			var left = areaPosition.left;
		}
		if (left+boxContainer[k]['w'] >= areaPosition.left+areaSize.w)
		{
			boxContainer[k]['x'] = 'left';
			var left = areaPosition.left+areaSize.w-boxContainer[k]['w'];
		}

		if (top < areaPosition.top)
		{
			boxContainer[k]['y'] = 'bottom';
			var top = 0;
		}
		if (top+boxContainer[k]['h'] >= areaSize.h+areaPosition.top)
		{
			boxContainer[k]['y'] = 'top';
			var top = areaPosition.top+areaSize.h-boxContainer[k]['h'];
		}

Pozostaje nam teraz zaktualizować dane wartości stylów każdego boksu:

function moveBoxes()
{
	for (k in boxContainer)
	{
		var top = parseInt($("#"+k).css("top"));
		var left = parseInt($("#"+k).css("left"));

		if (boxContainer[k]['y'] == 'top')
		{
			var top = top-boxMovementVertical;
		}
		else
		{
			var top = top+boxMovementVertical;
		}
		if (boxContainer[k]['x'] == 'left')
		{
			var left = left-boxMovementHorizontal;
		}
		else
		{
			var left = left+boxMovementHorizontal;
		}

		if (left <= areaPosition.left)
		{
			boxContainer[k]['x'] = 'right';
			var left = areaPosition.left;
		}
		if (left+boxContainer[k]['w'] >= areaPosition.left+areaSize.w)
		{
			boxContainer[k]['x'] = 'left';
			var left = areaPosition.left+areaSize.w-boxContainer[k]['w'];
		}

		if (top < areaPosition.top)
		{
			boxContainer[k]['y'] = 'bottom';
			var top = 0;
		}
		if (top+boxContainer[k]['h'] >= areaSize.h+areaPosition.top)
		{
			boxContainer[k]['y'] = 'top';
			var top = areaPosition.top+areaSize.h-boxContainer[k]['h'];
		}

		$("#"+k).css({"left": left, "top": top});

W ten sposób otrzymaliśmy dość prostą grę. Można ją uzupełnić o inne efekty, o których tutaj nie wspomniałem. Można również pewne rzeczy bardziej zoptymalizować. Pierwsze należy z pewnością do Was. Z chęcią zobaczyłbym efekty przeróbek tego skryptu. Będą śmiałkowie?

Co do drugiego wątku, optymalizacja w grach, w JS przede wszystkim, to klucz do sukcesu. Wkrótce postaram się zaprezentować zgrabny artykuł o innych technikach optymalizacji JS, o których tutaj nie wspomniałem.

Przydatne triki w JavaScript #1

ferrante — Tue, 01 Apr 2008 19:36:49 +0000

JavaScript w wersji 1.8 to kawałek bardzo fajnych i użytecznych funkcji oraz konstrukcji. Niestety, nim wszystkie przeglądarki zaczną obsługiwać tę wersję języka, minie spory kawałek czasu. Powszechnie używana wersja 1.5 na szczęście także potrafi pokazać pazurki.

(5).plus(1).minus(2) = 4

Jedną z zalet JS jest możliwość używania podobnych, dzięki łatwej implementacji tzw. chainingu, czyli łączenia łańcuchów kodu. Jak coś podobnego zrobić?

Zaczynamy od interpretacji działania takiej linijki kodu. Wszystko zaczyna się od liczby 5 zapisanej w nawiasie. Jest to dla nas sygnał, że liczba 5 musi być obiektem, ponieważ inaczej niemożliwe byłoby wykonywanie nań żadnych funkcji. Jakiego typu obiektem jest ta liczba możemy sprawdzić dzięki typeof.

alert(typeof 5);

Powyższa linijka zwróci nam dumnie brzmiące słowo number. Nie trzeba dużej bystrości by stwierdzić, że do czynienia mamy z obiektem reprezentującym liczbę.

Próba wywołania na tym obiekcie funkcji plus() bądź minus() kończy się jednak niepowodzeniem – JS nie potrafi odnaleźć takich funkcji, które byłyby użyte w kontekście obiektu number. Ergo, nie posiada on takich metod/funkcji. JavaScript jest jednak na tyle elastyczny, że udostępnia stosowne narzędzia, które pomagają nam uzupełnić obiekt o jakie tylko zapragniemy funkcje. Jest to właściwość prototype, używana tak:

obiekt.prototype.nazwa_nowej_funkcji = function() {};

Po tym zabiegu obiekt będzie posiadał w swoim asortymencie funkcję o nazwie nazwa_nowej_funkcji:

obiekt.nazwa_nowej_funkcji();

Pora teraz wykorzystać to w kontekście obiektu number. Zaimplementujmy więc funkcję plus:

number.prototype.plus = function(i) { return parseInt(this+i); };

Przetestujmy teraz co nieco:

var liczba = (5).plus(5); alert(liczba);

Nie działa… Przyczyna jest prosta – istnieje tylko obiekt Number, a nie number. Wszystko przez typeof, które zwraca nazwy typów obiektów pisane małymi literami. Poprawmy więc, co trzeba:

Number.prototype.plus = function(i) { return parseInt(this+i); };

Teraz podany przykład działa w najlepsze.

Czas na dodanie funkcji minus:

Number.prototype.minus = function(i) { return parseInt(this-i); };

I przetestowanie przykładu z nagłówka:

var liczba = (5).plus(1).minus(2); alert(liczba);

Powinna pojawić się liczba 4.

Zastanówmy się teraz spokojnie jak to wszystko działa. Otóż najpierw JS szuka wewnątrz obiektu Number funkcji plus. Gdy się to stanie, funkcja plus wykonuje się, zwracając liczbę będącą równowartością sumy this i liczby podanej w argumencie funkcji (jeden). Jako że 5 to liczba, jak i obiekt, na którym wykonujemy funkcję plus, this odnosi się właśnie do jego wartości (5). Funkcja minus wykonywana jest podobnie – tyle że w this, zamiast pięć, mamy teraz sześć, bo minus() odnosi się do obiektu, w kontekście którego jest wykonywana (to, co jest przed kropką oddzielającą funkcję minus od reszty, gwoli ścisłości).

dodaj(2)(3)

Coś takiego jest dość proste do zrobienia, wystarczy trochę pomyśleć. Przecież aby można było podstawić drugi nawias (3) do dodaj(2), dodaj(2) musi być funkcją. Tylko funkcje można uruchamiać w takim zapisie: nazwafunkcji(argument). dodaj(2) musi być więc funkcją, co znaczy nie więcej, jak to, że musi zwracać w swoim ciele … inną funkcję. Coś w ten deseń:

function funkcja() { return function() {}; }

Funkcja, zwracająca anonimową funkcję. Zastosujmy to teraz do naszego przykładu:

function dodaj() { return function(){}; }

No dobra, ale co dalej? Jak widać, funkcja dodaj musi przyjąć jako argument dowolną liczbę, a potem, podstawić ją do funkcji, którą zwraca, by tam dodać ją do argumentu, który przyjmuje z kolei zwracana, anonimowa funkcja.

function dodaj(i) { return function(i2) { return parseInt(i+i2); }; }

parseInt sprawia, że niezależnie jakie wartości byśmy podstawili, JS postara się zawsze powstałą sumę przekonwertować na obiekt typu Number.

Ruchome zakładki, mootools i problemy z onmouseout

ferrante — Sat, 29 Mar 2008 21:33:57 +0000

Ostatni projekt, którym się zajmuje, zawiera imitację flashowej reklamy z trzema rozwijanymi od dołu sloganami, chwalącymi zalety firmy. Implementacja tego rozwiązania, biorąc pod uwagę obecność efektów animacyjnych, nastręcza dużych kłopotów z dziwnym działaniem zdarzenia onmouseout. Postaram się więc przedstawić rozwiązanie problemu – tym razem oparte o mootools.

Dokument HTML

By rozpocząć naszą przygodę z omawianym tematem, przyjrzyjmy się najpierw szablonowi HTML, na którym będziemy pracować.




Ruchome zakładki


	
 

 
	
		
			fast
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			cool
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			best
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

Jak widać, każdy element listy nieuporządkowanej ma dość duży margines, który wypycha treść poza kontener. Zastosowanie overflow: hidden; skutecznie ukrywa ją.

Ogólne założenie co do skryptu jest takie, by po najechaniu myszką na element listy zmienić margin-top na 0px. Załóżmy przy tym, że nie stanie się to od razu poprzez ustawienie określonej wartości, np. style.marginTop = 0;. Aby całość prezentowała się schludnie, do rozwijania zakładki użyjemy efektów animacyjnych.

Zwijanie elementu, po opuszczeniu pola zakładki przez kursor myszki, będzie się odbywać analogicznie – ustawimy margin-top na domyślne 150px. Nie obędzie się bez ładnej animacji.

onmouseout

Przed przystąpieniem do działania, musimy omówić sobie istotę problemu, który został poruszony we wstępie. Otóż załóżmy, że mamy ustawione dwa zdarzenia (onmouseover i onmouseout) dla div#foobar:


	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices, dolor pellentesque dignissim volutpat, ante felis aliquet elit, nec ornare neque dolor quis eros. Cras auctor velit et magna. Quisque vitae pede eget justo vehicula lacinia. Aenean mauris. Nullam vitae velit a nisl aliquet dictum.
	Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices, dolor pellentesque dignissim volutpat, ante felis aliquet elit, nec ornare neque dolor quis eros. Cras auctor velit et magna. Quisque vitae pede eget justo vehicula lacinia. Aenean mauris. Nullam vitae velit a nisl aliquet dictum.

Ku naszemu zdziwieniu, zdarzenie onmouseout jest uruchamiane nie tylko po opuszczeniu obszaru diva, ale także podczas poruszania kursorem w jego obrębie. Dzieje się tak dlatego, że JS, i nie jest to wina żadnej z przeglądarek, interpretuje childNodes jako oddzielne elementy. Potwierdza to poniższy, pełny przykład:




Ruchome zakładki


	
 

 
	
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices, dolor pellentesque dignissim volutpat, ante felis aliquet elit, nec ornare neque dolor quis eros. Cras auctor velit et magna. Quisque vitae pede eget justo vehicula lacinia. Aenean mauris. Nullam vitae velit a nisl aliquet dictum.
		Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam ultrices, dolor pellentesque dignissim volutpat, ante felis aliquet elit, nec ornare neque dolor quis eros. Cras auctor velit et magna. Quisque vitae pede eget justo vehicula lacinia. Aenean mauris. Nullam vitae velit a nisl aliquet dictum.

Ilość uruchomień funkcji alert jest niepokojąca duża.

Zasadniczo istnieją dwa sposoby na wyeliminowanie problemu. Jedna opiera się o funkcję z IE – contains, której implementację trzeba dodać do innych, nie obsługujących jej, przeglądarek. Drugą metodą jest żmudne sprawdzanie, z jakiego elementu został zwolniony kursor i na który najechał podczas wykonywania się zdarzenia onmouseout. Pierwszy zawiera elementy drugiego, więc omówmy go.

element.contains()

Funkcja ta powinna sprawdzać, czy element podany w argumencie jest dzieckiem elementu ze zmiennej element. Zanim dojdzie do jej kodowania, powiedzmy sobie parę ciekawych rzeczy.

Podczas wykonywania zdarzeń mamy do dyspozycji obiekt Event, który możemy przekazać do funkcji wykonującej dane zdarzenie:

element.onclick = function(e <-- o, tutaj) { };

Dla IE oczywiście pod e nic nie będzie i trzeba ratować się poniższym:

element.onclick = function(e) { if (!e) var e = window.event; };

Obiekt ten zawiera cenne informacje, jak na przykład z jakiego elementu wraca kursor myszki podczas onmouseover:

element.onmouseover = function(e) { alert(e.fromElement); };

bądź na jaki właśnie najechał podczas onmouseout:

element.onmouseout = function(e) { alert(e.toElement); };

Niestety, Event.toElement i Event.fromElement nie są zaimplementowane w IE, gdzie trzeba użyć zamiennego dla obydwu Event.relatedTarget:

var element = e.relatedTarget || e.toElement;

Podobna linijka załatwia sprawę - jeśli przeglądarka nie obsługuje relatedTarget (Opera, Fx i inne), to do zmiennej element przypisana zostanie własność toElement.

Warto też pamiętać, że każdy element drzewa DOM jest w JS reprezentowany przez klasę/obiekt HTMLElement. Klasami dziedziczącymi są np. HTMLParagraphElement, HTMLSpanElement i tak dalej. Jeśli więc zastosujemy coś takiego:

element.onclick = function(e) { alert(this); };

Z reguły, w okienku powinny pojawić się nazwy obiektów, jak powyżej.

Otóż tę wiedzę można wykorzystać do napisania funkcji contains. Będzie ona wywoływana np. tak:

document.getElementById('parent').contains(document.getElementById('child'));

Zwróci prawdę, kiedy element o identyfikatorze parent zawierał będzie element o identyfikatorze child. Jak już wiemy, funkcja ta działa w IE. Trzeba więc uzupełnić o nią obiekt HTMLElement w każdej innej przeglądarce. Obiekty uzupełniać możemy poprzez funkcję prototype użytą w kontekście obiektu:

obiekt.prototype.foobar = function () { alert('to jest nowa funkcja w obiekcie "obiekt"');

Od tej pory możliwe jest używanie czegoś na wzór:

obiekt.foobar();

Uzupełnijmy więc obiekt HTMLElement o funkcję contains:

HTMLElement.prototype.contains = function(node)
{
	if (node == null)
	{
		return false;
	}
	else if (node == this)
	{
		return true;
	}

	return this.contains(node.parentNode);
}

I tak, jeśli wskazany element DOM jest pusty - funkcja zwraca nieprawdę, jeśli obiekt typu HTMLElement zawiera node, zwraca prawdę. Jeśli niespełniony jest żaden z tych warunków, funkcja rekurencyjnie pobiera kolejnych rodziców node. Jeśli odnajdzie szukanego rodzica, zwróci prawdę.

Przyjmijmy taki przykład:

Pobieramy odnośnik do diva i szukamy w nim elementu o #small:

document.getElementById('div').contains(document.getElementById('small'));

Uruchamiana jest więc funkcja contains, która szuka elementu #small. Analizując krok po kroku:

document.getElementById('small') nie jest puste, więc przechodzimy do następnego warunku.
document.getElementById('small') nie równa się document.getElementById('div'), wiadomo. Uruchamiana jest więc funkcja contains, która sprawdza, czy rodzic document.getElementById('small') zawiera się w document.getElementById('div').
I od nowa - rodzic, czyli element span nie jest pusty, bo istnieje w dokumencie. Nie równa się nadal document.getElementById('div'). Więc sprawdźmy, czy rodzic spana, czyli div, zawiera się w div. Ekhm, masło maślane, ale to prawda, bo spełni się warunek:
```
else if (node == this)
{
	return true;
}
```

Cała funkcja opiera się na tautologii, mówiącej, że jeśli rodzic elementu należy do jakiegoś elementu, to również ten element do niego należy. Zajmijmy się teraz naszymi przykładami.

Moo Tools

Do obsłużenia przykładowego skryptu musimy posiadać całe komponenty Core, Native i Class oraz część Effects: Fx.Base, Fx.CSS i Fx.Style.

Skrypt powinien rozpocząć się po załadowaniu DOM, więc:

window.addEvent('domready', function()
{
});

Potem pobieramy elementy li i nadajemy im stosowne zdarzenia.

window.addEvent('domready', function()
{
	$$('div ul li').each(function(element)
	{
		element.addEvent('mouseover', function(e) {});
		element.addEvent('mouseout', function(e) {});
	});

});

Tak działają selektory w mootools ;-).

Oprócz zdarzeń, musimy stworzyć też nowe efekty animacyjne dla każdego elementu, opierając się na zmianie margin-top:

window.addEvent('domready', function()
{
	$$('div ul li').each(function(element)
	{
		var efekt = new Fx.Style(element, 'margin-top', {duration: 1000 });
		var efekt2 = new Fx.Style(element, 'margin-top', {duration: 1000 });

		element.addEvent('mouseover', function() { efekt.start(0); });
		element.addEvent('mouseout', function() { efekt2.start(150); });
	});

});

Animacja powinna trwać 1000ms (duration: 1000).

Analizując powyższy przykład stwierdzamy, że po najechaniu myszką na zakładkę, uruchamia się animacja, która ustawia na końcu wartość margin-top na 0px. Po zwolnieniu kursora, animacja dąży do wartości 150px. Dzieje się jednak coś dziwnego.

Zapewne to przez wielokrotne uruchamianie onmouseout. Wykorzystajmy więc funkcję contains, która sprawdzi, czy element, do którego zawitał kursor myszy, to tak naprawdę element należący do zakładki, czy nie. Jeśli nie, pozwolimy włączyć animację, jeśli tak, zapomnijmy o tym.

window.addEvent('domready', function()
{
	$$('div ul li').each(function(element)
	{
		var efekt = new Fx.Style(element, 'margin-top', {duration: 1000 });
		var efekt2 = new Fx.Style(element, 'margin-top', {duration: 1000 });

		element.addEvent('mouseover', function() { efekt.start(0); });
		element.addEvent('mouseout', function(e)
		{
			if (!element.contains(e.relatedTarget || e.toElement))
			{
				efekt2.start(150);
			}

		});
	});

});

Jest ładnie, ale mogłoby być lepiej. Kiedy trwa animacja rozwijania jednej zakładki, a my wskazaliśmy na inną, dobrze byłoby zatrzymać jej pokazywanie, by rozwijanie zakładki nie kolidowało z jej zwijaniem.

window.addEvent('domready', function()
{
	$$('div ul li').each(function(element)
	{
		var efekt = new Fx.Style(element, 'margin-top', {duration: 1000 });
		var efekt2 = new Fx.Style(element, 'margin-top', {duration: 1000 });

		element.addEvent('mouseover', function() { efekt2.stop(); efekt.start(0); });
		element.addEvent('mouseout', function(e)
		{
			if (!element.contains(e.relatedTarget || e.toElement))
			{
				efekt.stop();
				efekt2.start(150);
			}

		});
	});

});

Jest świetnie!

Używająć mootools możemy jeszcze bardziej uprościć sprawę - podpinając zamiast mouseover - zdarzenie mousenter oraz zamiast mouseout zdarzenie mouseleave. Nie musimy wtedy dbać o funkcję contains, bo zdarzenia te obsługują właśnie podobne do omawianych sytuacje. Nie zawsze jednak mamy do dyspozycji frameworki, więc dobrze znać rozwiązanie w czystym JS.

element.addEvent('mouseenter', function() { efekt2.stop(); efekt.start(0); });
element.addEvent('mouseleave', function(e)
{
	efekt.stop();
	efekt2.start(150);

});

Niezależnie od metody, popatrzmy na końcowy efekt:




Ruchome zakładki

 
 	

	
 

 
	
		
			fast
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			cool
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
			best
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.

jQuery – to łatwe! #5: Zakładki

ferrante — Mon, 24 Mar 2008 15:31:52 +0000

Wiele portali zawiera sekcje, które pokazywane są za pomocą zakładek. Tego typu rozwiązania widziałeś pewnie nie raz. Sprawdza się to w miejscach, gdzie istnieje potrzeba zamieszczenia wielu treści, choć nie tylko.

Jest kilka sposobów na zrobienie dobrych zakładek, w tym wyróżnić można dwie grupy rozwiązań: oparte na ładowaniu treści do boxów poprzez AJAX lub ładowaniu wszystkich boxów podczas generowania strony i odpowiednim modyfikowaniu ich display’em w zależności, co chcemy oglądać. Omówmy każdą z opcji, poczynając od statycznego serwowania treści.

Uwaga! W poprzednich przykładach używaliśmy jQuery 1.1! Co prawda najnowsza wersja frameworka nie różni się od niej znacznie, jednak gdzieniegdzie przepisano kod, usunięto parę niepotrzebnych fragmentów, czy też dodano nowe funkcje, co samo w sobie stanowi powód do ściągnięcia nowej wersji.

Użyjemy oczywiście biblioteki jQuery w wersji 1.2.3.

We wszystkich przykładach będziemy modyfikować poniższy szablon. Warto zwrócić uwagę na strukturę dokumentu – zakładki realizujemy dzięki liście nieuporządkowanej, w poszczególnych elementach umieszczając linki. Dzięki temu, w razie wyłączonego JavaScriptu, użytkownik przejdzie do strony z zawartością (umownie) zakładki. Tak zwane accessibility i nieinwazyjny kod JS.




	
	
	

	

	

	


	
		Bar #1
Bar #2
Bar #3
		
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.
			Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.

Sposób pierwszy

Generalnie rzecz biorąc, całość jest oparta na zwykłej analogii. Otóż – jeśli klikniemy w pierwszą zakładkę, skrypt sprawdzi, która to z kolei zakładka (czyli który link ) w znaczniku

. Kiedy będziemy dysponowali tą liczbą, spróbujemy dostać się do

, który będzie tym samym z kolei elementem wewnątrz #content. W skrócie – klikamy trzecią zakładkę, pokazuje się trzeci div. Do dzieła!

Zaczynamy jak zwykle od wychwycenia, kiedy drzewo DOM będzie załadowane, tym samym będąc przygotowane na zastrzyk naszego kodu JS:

$().ready(function()
{

Następnie, czas na dodanie zdarzenia onclick dla każdego linku wewnątrz znacznika li:

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{

Aby uznać zakładkę za aktywną, musi ona posiadać klasę active, co wynika z kodu CSS na potrzeby przykładu. Wcześniej jednak, trzeba usunąć tę klasę z wszystkich innych elementów

, aby uniknąć dwóch aktywnych zakładek jednocześnie.

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks li.active").removeClass("active");
		$(this).parent().addClass("active");

Przy pomocy odpowiedniego selektora dostaliśmy się do wszystkich elementów listy z klasą active, następnie, dzięki removeClass usunęliśmy ją. Potem, odnosząc się do rodzica klikniętego elementu , dodaliśmy doń klasę active. Innymi słowy, klikając w link, pobieramy element

, do którego należy odnośnik, aplikując stosowną klasę.

Następnie pora na pobranie do zmiennej element_index liczby, oznaczającej, którym z kolei wewnątrz #bookmarks jest kliknięty link.

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var element_index = $("#bookmarks a").index(this);

Sprawę załatwiła funkcja index(). Otóż pobieramy tutaj wszystkie linki mieszczące się w #bookmarks. Następnie, dzięki funkcji index sprawdzamy, którym z kolei wśród pobranych linków w drzewie DOM jest ten, który kliknęliśmy (this). Tak więc funkcja ta działa w stosunku do pobranych elementów i sprawdza, którym wśród nich jest element podany jako jej argument. Warto zaznaczyć, że kolejność liczona jest naturalnie od zera. Pierwszy element będzie więc nim oznaczony.

Zbliżamy się do końca skryptu. Czas teraz na pobranie widocznych divów wśród #content, ukrycie ich i pokazanie właściwego, o indeksie takim, jaki przechowujemy w zmiennej element_index. Odnieść się do elementu o stosownym indeksie pozwala funkcja eq(numer indeksu).

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var element_index = $("#bookmarks a").index(this);

		$("#content div:visible").hide();
		$("#content div").eq(element_index).show();

		return false;
	});
});

Na końcu przydaje się return false;, by zapobiec przechodzeniu do strony podanej w klikniętym linku. Całość prezentuje się znakomicie:




	
	
	

	

	
	

	


	
		Bar #1
Bar #2
Bar #3
		
			aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.
			bLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.
			cLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.

Sposób drugi

Kolejnym sposobem na zakładki jest metoda bazująca na klasach elementów i identyfikatorach boxów z treścią. Tutaj z kolei klasa zakładki odpowiada identyfikatorowi diva. Klikając zakładkę class=”box1 pokazujemy box o id=”box1″. Zaktualizujmy więc nasz szablon na potrzeby przykładu:


	Bar #1
Bar #2
Bar #3
	
		aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.
		bLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.
		cLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.

Pora na jQuery, poczynając od tego, co mamy:

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

Pobierzmy teraz klasę klikniętego linku:

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var classname = $(this).attr("class");

Nie pozostaje nam nic innego, jak podać otrzymaną klasę do selektora, który znajdzie nam odpowiedniego diva, o odpowiednim #id.

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var classname = $(this).attr("class");

		$("#content div:visible").hide();
		$("#content div#"+classname).show();

		return false;
	});
});

Oczywiście chodzi o tę linijkę:

$("#content div#"+classname).show("");

Wszystko gra.

Jeśli komuś pasuje rozwiązanie, wykorzystujące moment najechania myszką na zakładkę – nic łatwiejszego, podstawiamy zamiast click, zdarzenie mouseover:

$().ready(function()
{
	$("ul#bookmarks li a").mouseover(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var classname = $(this).attr("class");

		$("#content div:visible").hide();
		$("#content div#"+classname).show();

	});
});

Sposób trzeci – AJAX

AJAX w skrócie
AJAX to pewien obiekt, a upraszczając bardziej – funkcja, wbudowana w JavaScript przeglądarki, która pozwala w naszych skryptach pobrać zawartość z danego adresu (a więc strone HTML, dokument tekstowy, plik XML) nie odświeżając przy tym strony, na której korzystamy ze skryptów. AJAX działa także w drugą stronę, umożliwiając wysyłanie danych do jakieś strony (używając metody POST).

Ten sposób opiera się natomiast na wykorzystaniu AJAXa. Ma on swoje wady i zalety – po kliknięciu zakładki, JavaScript pobiera dla niej za każdym razem stosowną treść, co daje jedno wywołanie strony na kliknięcie. Moim zdaniem, jeśli dane nie dezaktualizują się często, lepiej ładować wszystkie boxy przy zwykłym generowaniu się strony po stronie serwera. Zalety to przede wszystkim jeden box w dokumencie HTML, a nie jak poprzednio – trzy.

Przyjrzyjmy się więc dokumentowi HTML dla sposobu z AJAXem:


	Bar #1
Bar #2
Bar #3
	
		aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.
		
>

Jak już wiemy, AJAX potrafi załadować tekst lub HTML z jednej strony do drugiej. Aby więc coś znalazło się w naszych boxach, stwórzmy dokumenty HTML, z których pobierzemy stosowną treść: bar1.html, bar2.html i bar3.html. Równie dobrze, jeśli generowalibyśmy ją dynamicznie, można by pobierać dane z adresu strony w PHP, Ruby etc. Na przykład: index.php?action=ajax&what=bar1 czy też /ajax/get/bar1. To, z jakiej strony będziemy czerpać kontent, to wyłącznie nasza sprawa, zależna od naszych potrzeb.

I tak, np. bar1.html wygląda następująco:

aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.

Pora teraz na skrypty. jQuery dysponuje świetną (szczególnie od wersji 1.2) funkcją, dzięki której możemy załadować dany dokument HTML, wybrać przy okazji te elementy, które nas interesują, dzięki użyciu selektorów, by na końcu dodać otrzymaną treść do jakiegokolwiek elementu DOM. Mowa o funkcji load(). Użyjemy jej!

Nim do tego dojdzie, wyjaśnijmy, jak będzie działał skrypt – na początku, co już zresztą zrobiliśmy, wychwycimy kliknięcie w zakładkę, uczynimy ją aktywną i tak dalej. Potem pobierzemy, dzięki funkcji load, stronę HTML o takiej nazwie, jaką nosi atrybut class zakładki. Następnie, uzupełnimy nasz jedyny box uzyskaną treścią. Jeśli więc klikniemy zakładkę o class=”bar2″, JS załaduje plik bar2.html. To prawie tak, jakbyśmy w pasek adresu przeglądarki wpisali domena.pl/bar2.html, skopiowali treść, włączyli edytor HTML i wkleili wszystko do diva.

$().ready(function()
{
	$("ul#bookmarks li a").click(function()
	{
		$("ul#bookmarks .active").removeClass("active");
		$(this).parent().addClass("active");

		var classname = $(this).attr("class");

		$("#bar1").load(classname+".html p");

		return false;
	});
});

W zasadzie sprawa zaczęła się i skończyła na jednej linijce:

$("#bar1").load(classname+".html p");

Reszta kodu pozostaje taka sama. Do elementu #bar1 ładowana jest treść pliku HTML o nazwie klasy linku, który kliknęliśmy (zmienna classname). Równie dobrze moglibyśmy tutaj załadować całą stronę Wirtualnej Polski:

$("#bar1").load("http://wp.pl");

Całość prezentuje się tak:




	
	
	

	

	
	

	


	
		Bar #1
Bar #2
Bar #3
		
			aLorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec elementum. Nunc lacus. Donec porta. Suspendisse tortor est, hendrerit eu, ullamcorper in, laoreet eu, mauris. Vestibulum porttitor metus vel enim. Nunc dignissim libero a ligula.

Oczywiście proces ładowania zakładek można wzbogacić stosownym komunikatem, czy efektami animacyjnymi – o tym już w kolejnych artykułach.

jQuery – to łatwe! #4

ferrante — Sat, 06 Oct 2007 18:23:36 +0000

Poprzedni odcinek przyjemnego i praktycznego kursu jQuery pokazał nam, jak zacząć współpracę z elementami formularzy. Dziś pogłębimy nieco temat, doskonaląc skrypt znany z trzeciej części. Pojawi się także nowy, praktyczny i miejmy nadzieje użyteczny przykład, który pokaże, jak dodać i usunąć elementy formularza przy pomocy frameworka.

Standardowo, przypomnijmy sobie, na czym stoimy po lekturze trzeciej części poradnika:




Strona z licznikiem znaków formularza

Wszystkie pięknie, problem polega jednak na tym, że większość naszych użytkowników nie pracuje w Urzędzie Statystycznym i z reguły niepotrzebna jest im informacja, ile znaków zapisali. O wiele lepszym pomysłem jest wprowadzenie limitu znaków, które można wpisać w textarea. Ponadto możemy wyświetlić korzystającym z naszej strony informację, ile znaków pozostało im do wyczerpania limitu, co wydaje się znacznie rozsądniejsze.

Na początku należy ustalić jakikolwiek limit, który będzie zapisany w zmiennej limit na początku skryptu:

Ja, jako że lubię przejrzystość, zapisałbym liczbę wpisanych znaków w postaci klarownie nazwanej zmiennej, np. count_chars:

var count_chars = $(this).val().length;
if (count_chars > limit)
{
	// nadal spieprza...
}

Przejrzyściej? Oczywiście!

Jak sobie ustaliliśmy, musimy teraz pobrać tyle znaków z elementu textarea, ile wynosi maksimum.

var count_chars = $(this).val().length;
if (count_chars > limit)
{
	var new_value = $(this).val().substring(0, limit);
}

O funkcji substring możesz przeczytać na tym blogu w Praktycznym wprowadzeniu do JavaScript.

. W ten sposób, w zmiennej new_value siedzi ciąg wpisanych przez użytkownika znaków, licząc od pierwszego do 50-tego (bo tyle wynosi zmienna limit). Zastosowana tutaj metoda jest bardzo prosta, najpierw pobieramy ciąg wszystkich wpisanych znaków do textarea($(this).val()) – z pomocą przychodzi nam tutaj funkcja val(), która pobiera wartości formularzy w jQuery. Potem, dzięki funkcji JavaScript (substring), obcinamy go z prawej strony.

Czas na wklejenie tych 50 znaków do textarea. Z pomocą przychodzi ponownie funkcja val(), która oprócz tego, że pobiera, to także ustawia wartości elementom formularzy.

var count_chars = $(this).val().length;
if (count_chars > limit)
{
	var new_value = $(this).val().substring(0, limit);
	$(this).val(new_value);
}

Jedyne, co nam zostało do zrobienia, to wyświetlenie liczby pozostałych znaków. Liczba ta równa się różnicy wartości limitu i wpisanych dotychczas znaków. Jeśli limit wynosi 50, a my wpisaliśmy dotychczas 20 znaków, to wyświetlić powinna się liczba 30 – wynik odejmowania 20 od 50.

Przyjmijmy, że informacja ta zapisana będzie w HTML w poniższej postaci:

Pozostalo 50  znaków

Jeśli wpiszemy jeden znak, to w widnieć będzie wartość 49 i tak dalej. Należy więc, dzięki jQuery, odnaleźć wszystkie tagi span w akapicie o id=”countChars”, a potem ustawić mu wartość odpowiadającą różnicy limitu i liczby wpisanych znaków.

$("#countChars span")

W ten sposób odnosimy się do wszystkich elementów span zawartych w elemencie o identyfikatorze countChars. Zawartość tych elementów, co już przerabialiśmy wcześniej, ustalimy dzięki funkcji html(“jakas wartosc”), co da w prostym przełożeniu $(“#countChars span”).html(“jakas wartosc”) i efekt:

Pozostalo jakas wartosc  znaków

Pozostało nam wstawić wspominaną wcześniej różnicę znaków zamiast “jakas wartosc”:

$("#countChars span").html(limit - $(this).val().length);

Całość wygląda teraz tak i jest gotowa do działania:




Strona z licznikiem znaków formularza












	


Pozostalo 200  znaków

Testując podany przykład natrafiamy jednak na mały problem – wszystko działa, dopóki nie wykorzystamy limitu znaków. Kiedy zostaje nam dokładnie 0 znaków do wpisania, pojawia się nam informacja, że wykorzystaliśmy znaków, zamiast 0 znaków. Dlaczego się tak dzieje?

Otóż jQuery interpretuje wartość 0 jako null, zero, nic. Myśli po prostu w kategoriach, w których zero traktujemy jak wartość logiczną, a nie jako wartość ciągową. Musimy więc dać do zrozumienia funkcji html, że podajemy ciąg znaków, a nie wartość logiczną. Jak wiadomo, ciąg znaków w JS otaczamy apostrofami bądź cudzysłowami. Poprawnym zapisem będzie więc coś takiego:

$("#countChars span").html(""+(limit - $(this).val().length)+"");

Oto gotowy przykład:




Strona z licznikiem znaków formularza












	


Pozostalo 200  znaków

Dodawanie i usuwanie elementów formularza

Często chcemy umożliwić automatyczne dodawanie do dokumentów jakichś tagów. Najczęściej chodzi nam o elementy formularzy. Nierzadko, kiedy wypełnimy jakieś pole, ukazuje się nam automatycznie następne, którego obecność jest uzależniona od wpisania czegoś we wcześniejsze. I tak dalej. Zajmijmy się najpierw prostym dodawaniem różnego rodzaju inputów po kliknięciu w link (wraz z możliwością ich usunięcia).

Dokument, na jakim będziemy pracować wygląda następująco:




Strona z dodawaniem i usuwaniem elementów formularza













Dodaj element formularza

Po kliknięciu w Dodaj element formularza formularz powinien mieć taką postać:


	usuń

Po drugim kliknięciu elementy label będą dwa, po trzecim trzy i tak dalej.

Jak zapewne się domyślasz, należy przechwycić moment kliknięcia w link o id=”dodaj”, potem stworzyć w JS tagi label, input i a, i dodać dwa ostatnie do utworzonego labela. Potem cały, wypełniony innymi tagami element label dodamy do formularza.

Zaczniemy standardowo:

Dodaliśmy to:

new_label.append(new_input);
new_label.append(new_link);
$("form[name=formularz]").append(new_label);

Pierwsza linijka dodaje do label nasz nowy input, druga link, a trzecia dodaje do formularza o name=”formularz” element label wraz z jego zawartością.




Strona z dodawaniem i usuwaniem elementów formularza













Dodaj element formularza

Otrzymaliśmy coś takiego, jak powyżej. Po raz kolejny można mieć jednak kilka zastrzeżeń, co do działania całości. Po pierwsze, link usuń nie usuwa całego labela, który jest jego rodzicem i zawiera input do wywalenia. Pora to zmienić. Znajdujemy więc linijkę, gdzie tworzymy nowy link. Musimy mu nadać zdarzenie click. Podczas tego zdarzenia, znajdziemy jego rodzica (funkcja parent()), który musi być tagiem typu label. Dzięki funkcji remove() usuniemy go z drzewa DOM.

new_link.click(function()
{
	$(this).parent("label").remove();
});

Teraz pozostaje tylko dodać na sam koniec skryptu return false; by zablokować ewentualne przechodzenie do adresu linka Dodaj nowy element:

To samo można zrobić, z usuwaniem labela:

new_link.click(function()
{
	$(this).parent("label").remove();
	return false;
});

Działa, jak należy!

Wycinek z dokumentacji

W każdym odcinku znajdą się bardzo proste i dużo pokazujące przykłady funkcji z danego odcinka, zaczerpnięte z oficjalnej dokumentacji jQuery. Wielokrotnie, jak znam życie, spojrzysz najpierw tutaj, nim weźmiesz się za tekst całego kursu i jest to dobre podejście. Kod jQuery jest często dość nieczytelny i może wydawać się zagmatwany. Proste, krótkie przykłady to zaś dobry sposób na uzmysłowienie sobie działania funkcji.

parent(filtr)

Funkcja użyta w kontekście danego elementu pobiera jego rodzica, który jest regulowany przez podany filtr w postaci selektora, tagu etc…

Kod:

ferrante blog

$("#link").parent("p");

Zwróci:

append(element DOM)

Funkcja użyta w kontekście danego elementu dodaje doń nowy element drzewa DOM.

Kod:

ferrante blog

$("#link").append("Tak, to jest blog Ferrante");

Zwróci:

ferrante blog Tak, to jest blog Ferrante

attr(nazwa atrybutu, nowa wartość atrybutu)

Funkcja użyta w kontekście danego elementu z pierwszym argumentem – pobiera wartość atrybutu o podanej nazwie, z dwoma – ustala nową wartość atrybutowi o podanej nazwie.

Kod:

$("p").attr("id", "akapit");

Zwróci:

Kod:

$("p").attr("class");

Zwróci:

akapit

remove(filtr)

Funkcja użyta w kontekście danego elementu usuwa go z drzewa elementów DOM.

Kod:

$("p").remove("span");

Zwróci:

Kod:

$("p").remove();

Zwróci:

...

jQuery – to łatwe! #3

ferrante — Tue, 07 Aug 2007 16:53:47 +0000

W poprzednim odcinku poznaliśmy kilka sposobów na przyjemną i szybką manipulację DOM. Powstał dość zgrabny przykład rozsuwanego menu. Dzisiaj ulepszymy go o efektowne animacje, a także popracujemy trochę na formularzach.

Na początek przypomnijmy, jakim kodem dysponujemy:




Strona z nieuporządkowaną listą













	
		Klik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.
		Klik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.
		Klik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.
		Klik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.

Powyższy przykład umożliwia rozwijanie i zwijanie akapitów należących do danego elementu listy nieuporządkowanej po kliknięciu w nagłówek drugiego stopnia, należącego do tego samego elementu.

Testując skrypt dochodzimy jednak do wniosku, że w ten sposób możemy rozwinąć wszystkie cztery akapity, które potem będą jednocześnie widoczne. Dobrym pomysłem w tej sytuacji jest efekt zakładek. O co chodzi? Otóż, kiedy klikniemy pierwszy raz w nagłówek – wszystko będzie w porządku. Jeśli klikniemy drugi raz w inny nagłówek – widoczne są jednocześnie dwa akapity. Dzięki efektowi zakładek widoczny będzie tylko ten, który przed chwilą odsłoniliśmy. “Stary” akapit zostanie skrzętnie ukryty wraz z kliknięciem sygnalizującym pokazanie innego. Wszystko działa w ten sposób, jakbyśmy mieli do czynienia z zakładkami, gdzie tylko jedna może być aktywna.

Przedstawmy symulację działania skryptu:

Klikamy w dowolny nagłówek.
Pokazujemy akapit sąsiadujący z tym nagłówkiem.
Następnie pobieramy wszystkie nagłówki z wyjątkiem tego, który kliknęliśmy.
Pobieramy sąsiadujące z tymi nagłówkami, widoczne akapit. W praktyce będzie to zawsze tylko jeden akapit.
Ukrywamy je, np. używając funkcji hide.

To dość proste zadanie, o czym przekonamy się za chwilę. Pierwsze 2 punkty zrealizowaliśmy w 2. odcinku naszych zmagań z jQuery. Pora zająć się kolejnymi trzema.

Wszystkie z nich musimy wykonać w momencie kliknięcia w dowolny nagłówek, ściślej rzecz biorąc podczas wykonywania zdarzenia click, czyli tam, gdzie teraz pokazujemy sąsiadujące akapity:

Warto też od razu zauważyć, że uruchamiając na każdym akapicie funkcję toggle, umożliwiamy jego pokazanie, jak i ukrycie. Zwijać akapity będziemy jednak, jak już ustaliliśmy, gdzie indziej, więc zamieńmy funkcję toggle na show z parametrem normal (normalna szybkość animacji pokazywania się akapitu).

No dobrze, pora na szybkie i efektowne działanie, jak to z reguły w jQuery ma miejsce. Wiemy już, w jakim miejscu zrealizujemy nasze nowe cele odnośnie działania skryptu. Pora zamienić nasze pomysły na kod.

Pobierzmy więc wszystkie nagłówki należące do elementów listy, korzystając z prostych selektorów:

$("ul#lista li h2")

Jeśli znasz CSS nie powinieneś mieć problemów z rozszyfrowaniem, do jakich elementów chcemy się dostać. Zaskoczonym podpowiem jedynie, że chodzi o nagłówki drugiego stopnia, będące elementami nieuporządkowanej listy o id=”lista”.

Przy tej okazji, przypomniała mi się też inna kwestia. W linijce powyżej, gdzie nadawaliśmy zdarzenie click każdemu nagłówkowi h2, użyliśmy do ich pobrania poniższej konstrukcji:

$("ul#lista li").children("h2")

Można to zastąpić czymś takim (spróbujemy pobrać wszystkie dzieci h2 niezależnie od tego, jak głęboko zagnieżdzony jest element h2 – funkcja children pobiera tylko bezpośrednich “potomków”).

$("ul#lista li h2")

Jak widzisz, jQuery jest bardzo elastyczne, co po raz kolejny udowodniło powyżej. Przejdźmy jednak do naszego skryptu. Musimy wykluczyć pobieranie nagłówka, w który właśnie kliknęliśmy. Jak zapewne dostrzegłeś w drugiej części serii artykułów o jQuery, mogliśmy się do niego dostać stosując zmienną this, o tutaj:

$("ul#lista li").children("h2").click( function() { $(this).next("p").toggle(); });

Aby wykluczyć jego obecność, posłużymy się właśnie this. Nie będzie on jednak zastosowany samotnie, a w duecie z funkcją not, której użycie zapewnia nam to, że jQuery nie pobierze podanych jej elementów. Popatrzmy najpierw na oderwany od kontekstu przykład jej działania. Mamy poniższą strukturę:

a
b
c
d

Powiedzmy, że chcemy wybrać wszystkie akapity oprócz tych, które mają klasę równą active. Użyjemy wtedy:

$("p").not(".active");

Wtedy pobrane zostaną tylko poniższe elementy:

b
c

Podobny manewr możemy zastosować z identyfikatorami:

$("p").not("#active");

Czy też dowolnymi tagami:

$("p").not("jakis_tag");

Wracając do naszego przykładu, możemy łatwo wyeliminować pobieranie aktywnego nagłówka podstawiając funkcji jako argument zmienną this, wskazującą właśnie nań.

Powstało coś takiego:

$("ul#lista li h2").not(this)

W ten sposób, gdybyśmy kliknęli w drugi nagłówek, pobrane byłyby tylko pierwszy, trzeci i czwarty.

Pora teraz dostać się do akapitów, sąsiadujących z tymi nagłówkami. Użyjemy do tego starej, dobrej funkcji next.

$("ul#lista li h2").not(this).next("p")

Ba, skrypt można jeszcze bardziej zoptymalizować, tak, by funkcja next pobierała tylko widoczne akapity. Użyjemy do tego selektoru :visible:

$("ul#lista li h2").not(this).next("p:visible")

p:visible powoduje wyszukanie tylko tych, które są aktualnie widoczne.

Pora teraz na ich schwanie. Używamy tutaj funkcji hide() z atrybutem normal, określając tym samym szybkość animacji ukrywania:

$("ul#lista li h2").not(this).next("p:visible").hide("normal");

I jest! Pora wstawić powyższą linijkę do zdarzenia click, bo tam należy chować inne, niż aktywny, akapity.

Wygląda na to, że działa. Cały dokument wygląda natomiast tak, jak poniżej:




Strona z nieuporządkowaną listą













	
		Klik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.
		Klik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.
		Klik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.
		Klik
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin vitae mi. Proin dignissim ligula vitae metus. Etiam imperdiet. Aenean nonummy lorem ut quam.

Warto dodać, że zamiast funkcji show i hide możemy użyć kolejno slideDown (rozwijanie) i slideUp (zwijanie). Różni je to, że slide’y nie obsługują przezroczystości w animacjach – zmieniają tylko height elementów, na których działają. Obie funkcje przyjmują te same argumenty jak show, czy hide – slow, normal, fast lub dowolna liczba milisekund. Można również jako drugi argument podać jakąś funkcję, która uruchomi się po zakończeniu zwijania bądź rozwijania.

Co jeszcze ważne, a czego człowiek dowiaduje się często dopiero z dokumentacji – domyślnym parametrem oznaczającym szybkość wykonywania się funkcji slideDown i slideUp – jest normal. Jeśli więc wywołamy funkcję bez argumentu, np.:

$("p").slideDown();

Wszyskie akapity rozwiną się tak, jakbyśmy jako argument podali slideDown(“normal”).

Pobawiliśmy się już trochę funkcjami operującymi na zwykłych tagach. Zajmijmy się teraz formularzami, choć warto zaznaczyć, że do podobnych przykładów, jak ten jeszcze wrócimy.

Formularze w jQuery

Dzięki łatwym dostępie do różnorakich gałęzi drzewka tagów poprzez funkcję $(), zabawa z formularzami jest niezwykle prosta. W JS, dobierając się do wszystkich elementów formularza o nazwie formularz, użylibyśmy poniższego kodu:

document.forms['formularz'].elements;

W jQuery sprawa opiera się na niewielu znakach:

$("formularz.elements");

Zaczynając naszą przygodę z formularzami w jQuery, zajmijmy się na początek licznikiem znaków wpisanych do formularza. Tego typu skrypty od zawsze cieszyły się sporą popularnością, a dzięki jQuery nie trzeba szukać długo – kod to tylko kilka linijek. Przyjmijmy więc, że mamy poniższą strukturę:

Załóżmy, że podczas wpisywania znaków w polu content, ich liczba będzie pokazywana w akapicie o id równym countChars. Trzeba będzie więc wychwycić, kiedy zwolnimy jakiś klawisz klawiatury podczas wpisywania treści. Jak już wiemy z JavaScript, za coś podobnego odpowiada zdarzenie onkeyup. W jQuery twórcy przewidzieli nazwę keyup, czyli w zasadzie podobnie, jak to miało miejsce w wypadku onclick (w jQuery click).

Kiedy będziemy wiedzieć, że nacisnęliśmy jakiś klawisz w polu content, policzymy jego znaki. Uzyskaną wartością uzupełnimy akapit. Pora zaczynać! Oczywiście zezwalamy jQuery na działanie tuż po załadowaniu drzewa DOM:

$(document).ready(
	function()
	{

Następnie, by dodać jakieś zdarzenie elementowi textarea musimy się do niego dostać. W CSS wyglądałoby to tak:

form[name="formularz"] textarea[name="content"] {}

W jQuery również możliwe jest użycie powyższych selektorów:

$("form[name=formularz] textarea[name=content]")

W ten sposób pobraliśmy odnośnik do elementu formularza o nazwie formularz, który nosi nazwę content. Możemy w ten sposób wykonywać na nim różne operacje. Nie będziemy jednak rozmyślać jakie, bo już to sobie ustaliliśmy – trzeba najpierw przechwycić zdarzenie zwolnienia przycisku klawiatury z tego pola, co będzie oznaczało, że użytkownik wpisał bądź usunął jeden znak:

$(document).ready(
	function()
	{
		$("form[name=formularz] textarea[name=content]").keyup(
		function()
		{

Jak widać, robimy to podobnie, jak w przypadku click.

Mamy już prawie cały skrypt, pora teraz na podliczenie ilości znaków dla elementu i umieszczenie jej w akapicie:

$(document).ready(
	function()
	{
		$("form[name=formularz] textarea[name=content]").keyup(
		function()
		{
			$("#countChars").html($(this).val().length);
		});

	});

Wszystko za nas robi poniższa linijką, którą postaramy się przeanalizować:

$("#countChars").html($(this).val().length);

Na początku, by uzupełnić akapit ilością znaków z textarea, musimy się doń dostać, stąd nie dziwi $(“#countChars”). Następnie uruchamiamy na pobranym akapicie funkcję html, która działa podobnie jak text, tyle że podany jej tekst jest interpretowany jako html.

Działanie funkcji text i html możemy porównać w takim przykładzie:

$("p").text("costam");

$("p").html("costam");

Pierwszy da nam:

costam

Drugi:

costam

Jak widać, funkcja text formatuje podaną wartość do czystego tekstu, zaś html do html’a.

Wracając do naszej analizy, w środku funkcji html ustawiamy wartość akapitu jako

$(this).val().length

val()
Funkcja ta użyta bez argumentów w kontekście elementu formularza zwraca jego wartość atrybutu value.

Odwołujemy się tutaj do znalezionego elementu textarea ($(this)), następnie do jego wartości (val()). Używając length liczymy ilość znaków, jakie zwróciła sąsiednia funkcja val(). Czyli liczbę wpisanych znaków. W JS robiliśmy to wielokrotnie. Zobacz przykład!

Powstały dokument:




Strona z licznikiem znaków formularza

Naszą zabawę z formularzami dokończymy w następnym odcinku, gdzie będzie co nieco o blokadzie znaków, walidacji i tym podobnych efektach.

Wycinek z dokumentacji

not(filtr)

Funkcja użyta w kontekście pobierania przez jQuery elementu bądź elementów wyklucza jego pobranie, jeśli taki pasuje do podanego filtru.

Kod:

a
b
c

$("li").not(".a");

Zwróci:

b
c

slideDown(szybkość, funkcja)

Funkcja użyta w kontekście danego elementu rozwija go z szybkością podaną w pierwszym argumencie. Może to być slow, normal, fast bądź dowolna liczba milisekund. Funkcję tę można również uruchomić z drugim argumentem w postaci funkcji, która wykona się po wykonaniu slideDown, czyli rozwinięciu elementu. Funkcja slideDown jest analogiczna do hide, show czy też toggle. W swojej animacji operuje jednak tylko na wysokości elementu.

slideUp(szybkość, funkcja)

Funkcja użyta w kontekście danego elementu zwija go z szybkością podaną w pierwszym argumencie. Może to być slow, normal, fast bądź dowolna liczba milisekund. Funkcję tę można również uruchomić z drugim argumentem w postaci funkcji, która uruchomi się po wykonaniu slideDown, czyli rozwinięciu elementu. Funkcja slideDown jest analogiczna do hide, show czy też toggle. W swojej animacji operuje jednak tylko na wysokości elementu.

html(tekst)

Funkcja użyta w kontekście danego elementu (tagu), uzupełnia jego wartość, interpretując podany tekst jako HTML.

Kod:

$("p").html("tekst");

Zwróci:

tekst

val()

Funkcja użyta w kontekście danego elementu formularza, zwraca wartość jego atrybutu value.

Kod:

$("input[type=text]").val();

Zwróci:

Cos tam