Dziudek's jogger

Na początek kwestie organizacyjne :)

Wszelkie wpisy aż do programowania obiektowego włącznie będą bazowały na przykładach, które można testować w konsoli JavaScript. Ponieważ nie wszyscy lubią Firefoksa, albo też nie chcą pobierać Firebuga (to tylko takie założenie najmniej optymistycznego wypadku :P) to z myślą o tych osobach przygotowałem konsolę z załadowanym MooTools 1.2 pod tym adresem.

Wiem, że te pierwsze części kursu mogą być nużące, bo to tak jakby omawiać operatory arytmetyczne w n-tej książce o C++, niemniej jednak aby kurs składał się w jedną logiczną całość trzeba przedrzeć się także przez te podstawy frameworka ;) Osoby, które już je poznały wraz ze wcześniejszymi wpisami właściwie mogą tylko przejrzeć całość i znaleźć różnice jakie pojawiły się od wersji beta 2.

W tej części kursu skupię się na takich funkcjach jak $chk, $pick, $defined, $time, $clear, $random, $type oraz oczywiście nie pominę obiektu MooTools :) W trzeciej i czwartej części podstaw zajmę się natomiast obiektami, podstawowymi implementacjami obiektów Array, Hash i funkcjami związanymi bliżej z obiektem natywnym Function.

Istnieje czy nie ?

JavaScript jest z natury językiem pozwalającym na różne rzeczy. Trzeba często bardzo uważać by nie pogubić się w zasięgu zmiennych lub pamiętać o zadeklarowaniu zmiennym wartości. Druga sprawa to dość specyficzne podejście do funkcji - możemy zadeklarować funkcję z 5 zmiennymi, a jako argumenty podać jej 10 zmiennych. I nie ujrzymy błędu w konsoli. Dodajmy do tego jeszcze domknięcia (closures) i już robi się ciekawie. W każdym razie nauka JavaScript i innych języków zgodnych z ECMAScript z pewnością może zburzyć świat niejednego programisty C/C++/ADY w których to językach takie rzeczy to najprostsza droga do napotkania błędu w procesie kompilacji (dlatego nie przenoście swoich przyzwyczajeń z JavaScript w świat C/C++ - ja już się nasłuchałem wystarczająco na labolatoriach jakie to zmienne globalne są złe, choć nie ukrywam, że czasami ich stosowanie było odruchowe - bo mniej pisania było ;).

W każdym razie niezwykle istotne jest by mieć możliwość skorzystania z funkcji, które weryfikują stan danej zmiennej - czy jest zdefiniowana czy też nie.

Funkcje $chk i $defined działają podobnie - pierwsza zwraca wartość logiczną true gdy dana zmienna istnieje lub jest równa 0, a druga z nich zwraca taką wartość gdy dana zmienna nie jest pusta (czyli ma zdefiniowaną wartość różną od undefined). W wypadku niespełnienia warunku funkcje te zwracają wartość logiczną false. Obie funkcje pobierają jeden argument - zmienną do sprawdzenia.

Największe zastosowanie tych funkcji występuje w ciele innej funkcji - sprawdzenie argumentów. Jest to istotne gdyż w wypadku niezdefiniowania zmiennej, działanie funkcji nie obędzie się bez błędu...

Przykłady:

function test(zmienna){
    return $chk(zmienna);
}
 
test();

Powyższy kod zwróci wartość false, ponieważ podczas wywołania funkcji nie podaliśmy żadnego argumentu - jak już wspominałem JS dopuszcza taką możliwość, równie poprawne byłoby wywołanie:

test(1,2,3,4,5);

Choć jego sensowność w kontekście działania funkcji byłaby wątpliwa. Za to z pewnością takie wywołanie zwróci wartość true.

Jeżeli chodzi o funkcję $defined - rozpatrzmy analogiczny przykład:

function test(zmienna){
    return $defined(zmienna);
}
 
test(128);

Powyższy kod zwróci nam oczywiście wartość true, natomiast false otrzymamy w każdym z poniższych wypadków:

function test(zmienna){
    return $defined(zmienna);
}
 
test();

function test(zmienna){
    return $defined(zmienna);
}
 
test(null);

function test(zmienna){
    return $defined(zmienna);
}
 
var zmienna;
 
test(zmienna);

Właściwie jedną z nielicznych różnic pomiędzy $chk i $defined spotkamy wtedy gdy jako argument podamy wartość false - funkcja $chk zwróci false, a funkcja $defined zwróci wartość true.

Funkcja $pick służy do "grupowego" sprawdzania czy zmienne są zdefiniowane zwracając przy tym pierwszą zdefiniowaną zmienną z podanych lub wartość null jeżeli żadna ze zmiennych podanych jako argumenty tej funkcji nie jest zdefiniowana.

Stwórzmy zatem przykładową funkcję:

function test(a,b,c){
    return $pick(a,b,c);
}
 
test();

Zwróci ona nam null, bo przy wywołaniu nie podaliśmy żadnych argumentów. Gdybyśmy funkcję test wywołali w taki sposób:

test(10);

To zostanie zwrócone właśnie wartość 10.

Gdy wywołanie będzie wyglądać tak:

test(null,null,3);

To zostanie zwrócona wartość 3, a wywołanie:

test(null,null,null);

Zwróci oczywiście wartość null. Ogólnie funkcji $pick użyjemy w sytuacji gdy mamy kilka-kilkanaście zmiennych i musimy znaleźć pierwszą zdefiniowaną z tej grupy zmienną.

Zabawy z czasem

W rdzeniu frameworka mamy dwie funkcje związane z upływem czasu - funkcję $time, oraz funkcję $clear.

Funkcja $time to po prostu uniwersalna implementacja pobierania aktualnego czasu, wywoływana bez żadnych dodatkowych parametrów:

$time();

Natomiast funkcja $clear pobiera jeden parametr - licznik do wyzerowania:

$clear(licznik);

Z funkcją tą zapoznamy się bliżej przy okazji omawiania obiektu natywnego Function - na razie musicie się zadowolić wiedzą o tym, że taka funkcja w ogóle istnieje ;)

Daj mi zmienną, a powiem Ci kim ona jest

W JavaScript sprawdzanie typu zmiennej może być trochę uciążliwe, ponieważ operator typeof jest w tej kwestii dość małomówny, a już na pewno nie ma zbyt bogatego zbioru zwracanych wartości, dlatego tym bardziej doceńcie, że programistom MooTools chciało się nauczyć funkcję $type rozróżniać tyle różnorodnych typów zmiennych ;)

Funkcja ta pobiera jeden argument - zmienną, której typ jest zwracany. Po wywołaniu:

$type(zmienna);

Może zostać zwrócona jedna z poniżej wymienionych wartości:

• 'element' - gdy argument jest elementem DOM,
• 'textnode' - gdy argument jest węzłem tekstowym DOM,
• 'whitespace' - gdy argument jest węzłem zawierającym wyłącznie "białe znaki",
• 'arguments' - gdy argument jest tablicą argumentów (w funkcji),
• 'array' - gdy argument jest tablicą,
• 'object' - gdy argument jest obiektem,
• 'string' - gdy argument jest ciągiem znaków,
• 'number' - gdy argument jest liczbą,
• 'boolean' - gdy argument jest wartością logiczną,
• 'function' - gdy argument jest funkcją,
• 'regexp' - gdy argument jest wyrażeniem regularnym,
• 'class' - gdy argument jest klasą (stworzona przez Class lub rozszerzenie instancji Class),
• 'collection' - gdy argument jest kolekcją elementów DOM (na przykład zwracaną przez funkcję $$),
• 'window' - gdy argument to obiekt window,
• 'document' - gdy argument to obiekt document,
• false - gdy argument jest niezdefiniowany lub nie jest jednym z wyżej wymienionych elementów.

Liczby pseudolosowe

Kolejne ułatwienie życia to gotowa funkcja do generowania liczby pseudolosowej z zadanego przedziału - $random:

$random(min,max);

Powyższe wywołanie zwróci nam liczbę całkowitą z przedziału obustronnie domkniętego (min,max). W wypadku podania jako argumenty liczb zmiennoprzecinkowych zostaną one potraktowane tak jakby zostały zaokrąglone w górę (atrybut max) i w dół (atrybut min). Zatem wywołanie:

$random(1.2, 3.2);

Może nam zwrócić jedną z liczb: 1, 2, 3 lub 4.

Trochę o obiektach

Na koniec tej części wkroczymy trochę w świat obiektów (taki wstęp do kolejnej części kursu ;). Zacznijmy od tego obiektu, który w poprzednich wersjach kursu rozpoczynał pierwszy wpis - MooTools.

Obiekt ten posiada dwie własciwości - version i build, przy czym ta druga przyjmuje wartości tylko w wersjach developerskich frameworka.

Obiekt MooTools przydaje się do sprawdzenia czy framework został załadowany na stronie - może się przypadkiem zdarzyć taka sytuacja, że będzie trzeba to sprawdzić. Ogólnie jednak gdybym chciał być brutalny i szczery - dla mnie ten obiekt ma funkcję stricte reprezentacyjną ;) Jest bo... jest ... i już :)

Za to istnieją bardziej przydatne metody - jeżeli zastanawialiście się jak dodać własne metody do obiektów natywnych typu Array, String itp. to odpowiedź jest prosta - metoda implement:

obiektNatywny.implement({
    nazwaMetody1: function(){
        // kod
    },
    nazwaMetody2: function(){
        // kod
    },
 
    ...
 
    nazwaMetodyN: function(){
        // kod
    }
});

Dzięki niej możemy dodać mnóstwo własny metod, a także nadpisać oryginalne, ale z tym radziłbym uważać, bo można zepsuć działanie całego frameworka.

Jest też coś dla leniwych programistów, których męczą długie nazwy funkcji - mamy zachciankę by zamiast Array.push było Array.psh (trochę na siłę ten przykład, ale niech będzie ;) to możemy to zrobić za pomocą metody alias:

Array.alias('push','psh');

Zatem ogólna składnia metody alias:

obiektNatywny.alias("nazwaPierwotna", "nowaNazwa");

Podsumowanie

Zapoznaliśmy się z podstawowymi funkcjami rdzenia frameworka MooTools. W kolejnych częściach zapoznamy się z funkcjami operującymi na obiektach oraz funkcjach. Do tego opiszę jak rozszerzono obiekt Array i dodano obiekt Hash w MooTools 1.2 .