Dziudek's jogger

Tym wpisem zaczynam omawianie frameworka mootools w wersji 1.1, jak zapewne wiele osób się orientuje nie kontynuuję kursu mootools 1.0 , ponieważ w trakcie jego powstawania wyszła nowa wersja mootools - właśnie 1.1 . Jednak osoby, które czytały poprzednią wersję kursu nie powinny się martwić - wiele rzeczy jest podobnych, a pierwsze wpisy o mootools 1.1 będą służyły tak naprawdę uporządkowaniu struktury kursu opartej na nowej strukturze frameworka mootools.

Plik core.js jak się pewnie domyślacie stanowi jądro frameworka mootools - zawiera podstawowe funkcje i tworzy podstawowe obiekty. Warto zwrócić uwagę na fakt powstania obiektu MooTools, który obecnie zawiera informację o aktualnie używanej wersji frameworka, ale w przyszłości z pewnością będzie rozbudowywany o dodatkowe informacje (bo po co stosowano by obiekt, gdyby chciano tylko przechowywać numer wersji ?).

Dostęp do informacji o aktualnej wersji frameworka uzyskamy poprzez zapis:

MooTools.version;

więc aby wyświetlić tą informację np. w alercie zapiszemy:

alert(Mootools.version);

PRZYKŁAD 1

Poza wspomnianym obiektem MooTools w pliku core.js zawarte są także funkcje do operowania na obiektach, klasa Abstract, dodatkowe funkcje oraz kilka dodatkowych rozszerzeń dla obiektów window i document. Zacznijmy od funkcji do operowania na obiektach - jest ich 5 : $defined, $type, $merge, $extend i $native...

$defined

Funkcja $defined służy do sprawdzania czy dany obiekt jest zdefiniowany - jeśli tak to zwraca ona wartość logiczną true, w przeciwnym wypadku zwracaną wartością jest logiczne false.

Użycie tej funkcji jest bardzo proste - przebiega według następującego schematu:

$defined(sprawdzany_obiekt);

Na przykład:

$defined(document.html);

Zwróci wartość false, natomiast:

$defined(document.body);

Zwróci wartość true... Skoro już tak mówimy o tych document.* to sprawdźcie co zwróci wywołanie:

$defined(document.head);

True ? Tak to prawda - w pliku core.js zdefiniowano także obiekt document.head, który odnosi się do sekcji HEAD naszego dokumentu...

No to mały przykład na podsumowanie funkcji $defined:

PRZYKŁAD 2

$type

Funkcja $type zwraca typ obiektu podanego jako argument. Zwracane są następujące wartości:

• 'element' - gdy obiekt jest węzłem drzewa dokumentu (DOM),
• 'textnode' - gdy obiekt jest węzłem tekstowym drzewa dokumentu,
• 'whitespace' - gdy obiekt jest węzłem drzewa dokumentu będącym białymi znakami,
• 'object' - gdy obiekt jest obiektem ( ;-) ),
• 'string' - gdy obiekt jest ciągiem znaków,
• 'number' - gdy obiekt jest liczbą,
• 'boolean' - gdy obiekt jest wartością logiczną,
• 'function' - gdy obiekt jest funkcją,
• 'array' - gdy obiekt jest tablicą,
• 'regexp' - gdy obiekt jest wyrażeniem regularnym,
• 'class' - gdy obiekt jest klasą,
• 'collection' - gdy obiekt jest kolekcją węzłów drzewa dokumentu,
• false - gdy obiekt nie jest zdefiniowany lub nie należy do żadnego z powyższych typów.

Użycie funkcji $type wygląda tak samo jak w wypadku funkcji $definied:

$type(obiekt);

Na przykład :

$type(25);

Zwróci nam wartość 'number'.

Więcej przykładów użycia zawarłem w poniższym przykładzie:

PRZYKŁAD 3

$merge

Funkcja $merge służy do łączenia wielu obiektów w jeden. Warto pamiętać, że w momencie gdy pewne pola powtarzają się w kilku obiektach to będą one nadpisywane i w obiekcie złożonym ze złączonych obiektów zostanie wartość pola pochodząca z ostatniego obiektu w którym powtarzające się pole wystąpiło.

Składnia funkcji wygląda następująco:

$merge(obiekt_1,obiekt_2,...,obiekt_n);

Na przykład:

var obiekt1 = {
   'test1': 1,
   'test2': 2
}

var obiekt2 = {
   'test3': 3,
   'test4': 4
}

var obiekt3 = {
   'test5': 5
}

var obiekt123 = $merge(obiekt1,obiekt2,obiekt3);

Powstały obiekt obiekt123 będzie zawierał pola test1, test2, test3, test4 i test5 o wartościach od 1 do 5.

W wypadku gdy dane pole występuje w kilku obiektach:

var obiekt1 = {
   'test1': 1,
   'test2': 2
}

var obiekt2 = {
   'test1': 2,
   'test2': 3
}

var obiekt3 = {
   'test3': 3
}

var obiekt123 = $merge(obiekt1,obiekt2,obiekt3);

Powstały obiekt obiekt123 będzie zawierał trzy pola - test1, test2 i test3 o wartościach odpowiednio - 2,3 i 3.

Przykład działania funkcji $merge:

PRZYKŁAD 4

$extend

Funkcja $extend ma podobne działanie co funkcja $merge z tą różnicą, że jako argumenty podajemy tylko dwa obiekty i zwracany jest pierwszy obiekt rozszerzony o pola drugiego obiektu.

Składnia funkcji wygląda następująco:

$extend(Obiekt_rozszerzany,Obiekt2);

W tym wypadku zostanie zwrócony Obiekt_rozszerzany rozszerzony o pola obiektu Obiekt2.

I przykład działania funkcji $extend:

PRZYKŁAD 5

$native

Funkcja $native służy do rozszerzania obiektu o pola innych obiektów wtedy gdy nie posiada on pól, które posiadają podawane jako argumenty obiekty - mootools wykorzystuje funkcję $native aby dodać do przeglądarek obsługę niektórych funkcji, które nie są obsługiwane przez wszystkie przeglądarki.

Składnia funkcji $native:

$native(Obiekt1, Obiekt2, Obiekt3,... , ObiektN);

Klasa Abstract

Klasa ta to w rzeczywistości funkcja, która działając według wzorca singletonu pozwala na ograniczenie liczby instancji danej klasy...

Z wykorzystaniem klasy Abstract mootools generuje dwa dodatkowe obiekty - Window i Document dzięki czemu możemy je stosować zamiennie z obiektami window i document...

Aby wykorzystać klasę Abstract do stworzenia obiektu z wykorzystaniem wzorca singleton wystarczy zapis:

var NowyObiekt = new Abstract(ObiektPodstawowy);

Przejdźmy teraz do pozostałych funkcji zawartych w pliku core.js . Są to : $chk, $pick, $random, $time oraz $clear.

$chk

Funkcja $chk służy do sprawdzania czy podany jako argument obiekt istnieje lub jest zerem. W takim wypadku funkcja ta zwraca wartośc logiczną true, w przeciwnym wypadku zostaje zwrócona wartość logiczna false.

Składnia funkcji $chk:

$chk(obiekt_do_sprawdzenia);

$pick

Funkcja $pick wykorzystuje się do sprawdzania czy dany obiekt istnieje - w wypadku gdy nie jest on zdefiniowany jest używany podany jako drugi argument obiekt. Składnia tej funkcji wygląda następująco:

$pick(Obiekt1, Obiekt2);

W wypadku gdy obiekt Obiekt1 nie jest zdefiniowany zwracany jest obiekt Obiekt2 w przeciwnym wypadku zwracany jest obiekt Obiekt1.

Przykład użycia:

function informacja(text){
   alert($pick(text,'Brak treści informacji !'));
}

W wypadku gdy nie zdefiniowano zmiennej text zostanie pokazany alert z tekstem 'Brak treści informacji !'.

PRZYKŁAD 6

$random

Funkcja $random służy do generowania pseudolosowej liczby z podanego zakresu. Użycie funkcji:

$random(min,max);

Powyższy kod zwróci liczbę pseudolosową z zakresu <<b>min,max>, na przykład:

$random(10,20);

Zwróci liczbę z przedziału <10,20>

PRZYKŁAD 7

$time

Funkcja $time zwraca ilość milisekund jakie upłynęły od 1 stycznia 1970 00:00:00.

Funkcja ta nie pobiera żadnych argumentów, zatem jej użycie ogranicza się do zapisu :

$time();

PRZYKŁAD 8

$clear

Ostatnią funkcją w pliku core.js jest $clear(), która służy do usuwania okresowego lub opóźnionego wywoływania funkcji z użyciem setInterval() i setTimeout() (ich mootools'owe odpowiedniki to periodical() i delay(), ale o nich dowiemy się więcej przy okazji omawiania pliku function.js).

Użycie funkcji ogranicza się do podania jako argumentu danej zmiennej odpowiadającej funkcji setInterval() lub setTimeout():

var timer = setInterval("funkcja()",2500);
$clear(timer);

Obiekt window

Plik core.js rozszerza obiekt window o właściwości, które pozwalają na identyfikację typu przeglądarki. W stosunku do mootools 1.0 doszło kilka nowych właściwości. Przedstawiam wszystkie poniżej i odpowiadające im przeglądarki:

• window.ie - Internet Explorer (dowolna wersja),
• window.ie6 - Internet Explorer 6
• window.ie7 - Internet Explorer 7
• window.gecko - wszystkie przeglądarki oparte o Gecko - Firefox, Mozilla itd.
• window.webkit - Safari / Konqueror
• window.webkit419 - Safari 2
• window.webkit420 - Safari 3
• window.opera - Opera

Sprawdzenie jakiej przeglądarki używa internauta ogranicza się do sprawdzenia czy dany obiekt istnieje np.:

if(!window.ie){
   alert('Używasz przeglądarki innej niż Internet Explorer');
}
else{
   alert('Używasz przeglądarki Internet Explorer');
}

To wszystko na temat pliku core.js - w dwóch następnych częściach kursu zajmiemy się plikami z grupy Class wspomagających programowanie obiektowe w JavaScript.