blog-programisty.pl

Kurs Mootools 1.2 (part 2) – liczby

Witam w kolejnej odsłonie kursu Mootools. Dzisiaj zajmę się funkcjami jakie proponuje nam framework do operowania na liczbach. Tradycyjnie wybiorę tylko te ciekawsze (moim subiektywnym zdaniem).

Na początek funkcja toInt(), oczywista oczywistość, zamienia string/liczbę na liczbę całkowitą, dodatkowo można podać w argumencie z jakiego systemu ma przeliczyć. Jeśli podamy w argumencie 2 to funkcja spodziewa się systemu dwójkowego, a więc poprawne wartości to np. 11, 101. Funkcja zachowuje się podobnie do php’owego odpowiednika, czyli jeśli trafi na znaki nie pasujące do wytycznych to obcina wyrażenie w tym miejscu, przykłady zobrazują to lepiej:

(123.321).toInt(); // 123
(101).toInt(2); // 5 - system dwójkowy
('123ABC456').toInt(); // 123 - obcina niepasującą część
(1122).toInt(2); // 3 - tutaj niepasująca część zaczyna się na 2, gdyż w systemie dwójkowym dozwolone są tylko 1 i 0
('b123').toInt(); // NaN
(211).toInt(2); // NaN

Funkcja toFloat() zachowuje się podobnie, z tym, że zamienia na liczbę zmiennoprzecinkową i nie przyjmuje żadnych argumentów, więc operuje tylko na systemie dziesiętnym.

Przydatne mogą się okazać funkcje limit(min, max) i round([precision]). Pierwsza z nich zwraca niezmienioną liczbę, jeśli ta łapie się w zakresie podanym w argumentach lub odpowiednio wartość minimalną (pierwszy argument) – liczba mniejsza, wartość maksymalną (drugi argument) – liczba większa niż zadany zakres. Druga funkcja zaokrągla liczbę z określoną w parametrze precyzją. Należy pamiętać, że obie funkcje operują tylko na liczbach, więc jeśli pobieracie wartości np. z pola input to najpierw trzeba wykonać rzutowanie na int lub float. Przykłady:

(5).limit(1,10); // 5
(11).limit(1,10); // 10
(-3).limit(1,10); // 1
(33.14).round(); // 33
(33.14).round(1); // 33.1
(33.15).round(1); // 33.2
(33.14).round(-1); // 30
(35.14).round(-1); // 40

To by było na tyle, w kolejnej części kursu zajmę się tablicami.

Skomentuj styczeń 5th, 2010

Kurs Mootools 1.2 (part 1) – selectors

Witam,

Prędzej czy później, każdy programista piszący kod w javascript zacznie szukać framework’a dla tego języka. Obecnie największą popularnością cieszą się JQuery i PrototypeJS. Ja wybrałem jednak Mootools, nie jest tak wielki (czytaj “ciężki”) jak wymienione wcześniej, a daje nam całkiem spory zasób funkcji, które ułatwią i przyspieszą programowanie w javascript.

W pierwszej części kursu zajmę się selektorami, czyli funkcjami, które zwracają obiekt lub tablicę obiektów w/g wyznaczonych przez nas kryteriów.

Zamiast żmudnego wklepywania document.getElementById('id') wystarczy wpisać $('id') by uzyskać ten sam efekt. Funkcja $ zwraca więc pojedynczy element, jeśli chcemy wyszukać kilka elementów możemy użyć $$ lub getElements. Obie funkcje jako parametry przyjmują maskę po której nastąpi szukanie, przy czym funkcję getElements wywołuje się na obiekcie i zwraca ona elementy znajdujące się w obiekcie.

Czas na przykłady:

//wszystkie elementy <div> na stronie
$$('div');
 
//wszystkie elementy <div> i <span> na stronie
$$('div', 'span');
 
//wszystkie radio buttony należące do formularza o id="id_formulaza"
$('id_formularza').getElements('input[type=radio]');
 
//wszystkie elementy <span> których id zaczyna się od "prefix"
$$('span[id^=prefix]');
 
//wszystkie elementy <span> których id kończy się na "sufix"
$$('span[id$=sufix]');

Przydatne również mogą okazać się selektory first, last i contains:

//pierwszy element w <tr>
$('tr:first-child');
 
//ostatni element w <tr>
$('tr:last-child');
 
//wszystkie divy zawierające tekst "szukany"
$$('div:contains("szukany")');

Oczywiście na tak pobranych elementach możemy wywoływać różne funkcje, np:

$$('div').setStyle('color', '#FF0000');

lub skorzystać z iteratora each i wykonywać złożone operacje na każdym elemencie, np:

$$('input[type=text]').each(function(element){
  if (element.value == 0)
    alert(1);
  else
    alert(2);
})

2 komentarzy grudzień 18th, 2008