Dziudek's jogger

W tej części kursu mootools zajmiemy się obsługą funkcji za pomocą pliku function.js . Plik ten zawiera 7 metod, które wymienię poniżej:

• create - metoda do dodawania parametrów dla funkcji,
• bind - metoda służąca do tworzenia elementu odniesienia dla operatora this,
• pass - mniej rozbudowana wersja metody create do dodawania argumentów i elementu odniesienia dla operatora this,
• attempt - metoda do testowania poprawności działania funkcji,
• bindAsEventListener - metoda do przypisywania funkcji jako EventListener'a danego elementu,
• delay - metoda pozwalająca określić czas po którym zostanie wykonana dana funkcja,
• periodical - metoda do określania co jaki okres czasu ma się wykonywać dana funkcja.

create

Metoda create to najbardziej rozbudowana z wszystkim metod pliku function.js . Właściwie to pozwala ona zrobić za pomocą jednej metody to co normalnie moglibyśmy zrobić za pomocą kilku metod zawartych w tym pliku. Przedstawię tu tylko krótki opis użycia tej funkcji, a sam opis poszczególnych parametrów jej wywołania zawrę w opisie poszczególnych metod. Można powiedzieć, że użycie metody create ma sens tylko wtedy gdy chcemy do funkcji dodać kilka parametrów naraz, w pozostałych wypadkach czytelniejsze będzie zastosowanie poszczególnych metod...

Metoda create jako argument pobiera obiekt następującej postaci:

{
   "bind": value,
   "event": value,
   "arguments": value,
   "delay": value,
   "periodical": value,
   "attempt": value,
}

Gdzie poszczególne właściwości obiektu to odpowiedniki poszczególnych metod pliku function.js.

Gdybyśmy chcieli na przykład sprawić by nasza funkcja wywołana została z opóźnieniem, okresowo i była testowana czy wykonuje się poprawnie zapiszemy:

Funkcja.create({"delay": 5000,"periodical": 10000,"attempt": true});

Pełnię możliwości tej metody poznacie wraz z zapoznaniem się ze wszystkimi metodami pliku function.js .

bind

Metoda bind służy do określenia elementu odniesienia (a dokładniej obiektu odniesienia) dla operatora this. Normalnie wykorzystując operator this odniesiemy się do funkcji w której tenże operator zostanie użyty, jednak metoda bind pozwoli nam to zmienić. Składnia metody bind wygląda następująco:

Funkcja.bind(obiekt_dla_this, argumenty);

Tak tak - oprócz obiektu odniesienia dla this za pomocą metody bind możemy też podać argumenty dla funkcji - ale o nich napiszę przy okazji metody pass... Skupmy się na istocie działania metody bind. Gdybyśmy chcieli sprawić by operator this odnosił się do elementu strony na którym operuje dana funkcja zapiszemy następujący kod:

function zmianaElementu(){
   this.setStyle("border","2px solid #CCC");
}

var nowaFunkcja = zmianaElementu.bind($('id_elementu'));

W ten sposób zapis:

this.setStyle("border","2px solid #CCC");

Będzie oznaczał to samo co zapis:

$('id_elementu').setStyle("border","2px solid #CCC");

Oczywiście pamiętajmy o tym, że każda z metod pliku function.js zwraca odpowiednio przerobioną funkcję - zatem musimy naszą przerabianą funkcję przypisać do jakiejś zmiennej lub zdarzenia by móc korzystać z nowej, przerobionej funkcji.

Przykład działania podobnego skryptu:

PRZYKŁAD 1

pass

Metoda pass służy do określenia argumentów dla danej funkcji i elementu odniesienia dla operatora this. Już wiem jak obsługiwać się z operatorem this skupimy się teraz na argumentach funkcji. Właściwie metoda pass to to samo co metoda bind - obie pobierają takie same argumenty, a jedyna różnica polega na kolejności pobierania argumentów. Zapis metody pass wygląda następująco:

Funkcja.pass(argumenty, obiekt_dla_this);

Ważne jest, że gdy argumentów jest kilka (czyli więcej niż jeden argument) to trzeba je podawać jako tablicę argumentów. Czyli:

Funkcja_pobierajaca_jeden_arg.pass(argument);

Funkcja_pobierajaca_wiele_arg.pass([argument1,argument2,argument3]);

Przekażmy zatem do funkcji kilka argumentów i stwórzmy sobie coś co działa prawie jak kalkulator ;)

PRZYKŁAD 2

attempt

Metoda attempt pozwala na testowanie poprawności działania funkcji. W wypadku gdy funkcja zawiera błąd w operacjach metoda attempt zwróci wartość false, w przeciwnym wypadku zostanie zwrócona dana funkcja...

Metoda attempt jako argumenty pobiera liste argumentów oraz obiekt odniesienia dla operatora this:

Funkcja.attempt(argumenty,obiekt_odniesienia_dla_this);

Gdy przypiszemy taką funkcję na przykład do zdarzenia onclick jakiegoś elementu i funkcja będzie zawierała błąd (przykładowo brak jakiegoś argumentu) to po kliknięciu danego elementu po prostu nic się nie stanie. Gdy funkcja pobierze poprawne dane, zostanie wykonana normalnie...

I przykładowy kod:

function funkcjaNieprawidlowa(){
   $('div').setHTML(argument);
}

button.onclick = funkcjaNieprawidlowa.attempt();

Klikniecie na przycisk sprawi, że nic się nie stanie dzięki użyciu metody attempt - gdybyśmy nie zastosowali tej metody konsola JavaScript zwróciłaby w tej sytuacji błąd.

I przykład:

PRZYKŁAD 3

bindAsEventListener

Metodę bindAsEventListener wykorzystujemy w momencie gdy chcemy dodać funkcję jako EventListener do danego zdarzenia. Dzięki temu używana funkcja jako pierwszy argument pobiera zdarzenie.

Aby móc pobierać właściwości obiektu Event musimy stworzyć funkcję o następującej postaci:

function Nazwa_funkcji(event,pozostale_argumenty){
   event = new Event(event);
   // dalszy kod
}

Dzięki temu zapisowi możemy dalej odwoływać się do właściwości obiektu Event, na przykład:

mojElement = $('btn');

function events(event){
   event = new Event(event);
   alert(event.page.x);
};

mojElement.onclick = events.bindAsEventListener();

Powyższy kod spowoduje pokazanie alertu z informacją o współrzędnej X miejsca kliknięcia.

PRZYKŁAD 4

Warto jeszcze dodać, że metoda bindAsEventListener jako argumenty przyjmuje dodatkowo obiekt odniesienia dla operatora this i listę argumentów dla danej funkcji...

delay

Pozostały nam już tylko dwie metody, ale chyba te najczęściej używane - delay i periodical. Metoda delay służy do opóźnienia wykonania kodu danej funkcji. Poza czasem opóźnienia (podajemy go w milisekundach !) pobiera też obiekt odniesienia dla operatora this oraz argumenty danej funkcji. Możemy opóźniać wykonanie już zdefiniowanej funkcji jak i wykonanie fragmentu kodu...

Aby opóźnić wykonanie funkcji wykorzystujemy kod:

Funkcja.delay(10000);

Powyższy kod spowoduje wykonanie funkcji o nazwie Funkcja po 10 sekundach od użycia tego kodu. Aby opóźnić wykonanie fragmentu kody zapiszemy:

(function(){alert("Minęło 10 sekund...");}).delay(10000);

Zatem umieszczamy kod w takim szablonie:

(function(){KOD}).delay(10000);

periodical

Metoda periodical służy do okresowego wykonywania danej funkcji. Jako argumenty pobiera czas co jaki ma się wykonać funkcja (oczywiście w milisekundach) oraz obiekt odniesienia dla operatora this i argumenty danej funkcji. Tak jak w wypadku metody delay możliwe jest okresowe wykonanie już zdefiniowanej funkcji jak i fragmentu kodu...

Składnia metody jest podobna do składni metody delay:

Funkcja.periodical(10000);

lub:

(function(){KOD}).periodical(10000);

To teraz przydałby się jeden przykład dla obu metod - delay i periodical . Ale najpierw jeszcze małe przypomnienie...

Funkcja $clear, a metody delay i periodical

Pewnie niektórzy jeszcze pamiętają do czego służyła funkcja $clear z pliku core.js - pozwalała przerwać okresowe wykonywanie funkcji lub jej opóźnienie. To teraz przykłady użycia:

var timer = funkcja.delay(5000);

Aby móc zatrzymać opóźnienie najlepiej by było ono przypisane do jakiejś zmiennej, wtedy celem zatrzymania odliczania zapiszemy:

$clear(timer);

Analogicznie w wypadku metody periodical:

var timer = funkcja.periodical(5000);

i zatrzymujemy okresowe wykonywanie funkcji:

$clear(timer);

No to na koniec ostatni przykład z metodami delay, periodical oraz funkcją $clear:

PRZYKŁAD 5

Jeszcze raz krótko o metodzie create

Aby jeszcze dokończyć temat metody create, chciałbym dodać, że w wypadku opcji bind, arguments, delay i periodical wartości podajemy tak jak w wypadku odpowiadających im metod, natomiast w wypadku opcji event i attempt podajemy wartości true lub false w zależności od tego czy chcemy z danej opcji skorzystać... Ponadto dla opcji event można podać nazwę klasy - wtedy obiekt Event jest podawany jako pierwszy argument metody initialize danej klasy...

To by było na tyle jeśli chodzi o plik function.js, w dwóch następnych częściach kursu omówię pliki Number.js i Strong.js ...