Tutorial MooTools pasul 8 Filtrarea numerelor introduse de utilizator

 

In tutorialul de astazi vom afla cat este de usor sa filtram datele introduse de catre utilizator cu ajutorul MooTools. Pentru inceput, ne vom ocupa de numere, urmand sa lasam stringurile pentru un tutorial viitor. Scopul principal al filtrarii datelor introduse de utilizatori, este de a ne asigura ca din perspectiva codului, totul functioneaza cat mai usor.

Vom discuta pentru inceput despre functia rgbToHex();. Aceasta apartine practic colectiei multimilor. Totusi, datorita faptului ca este o functie pentru multimi ce se ocupa cu numere, o vom trata aici. O portiune de cod in care e folosita ar arata cam asa:

function schimbaCuloarea(rosu, verde, albastru){
var culoare = [rosu, verde, albastru].rgbToHex();
alert('Converteste in culoarea: ' + culoare); 
}schimbaCuloarea('28', '17', '47')

Aceasta functie 'alert' va returna expresia 'Converteste in culoarea: #1c112f'. Aceasta functie functioneaza doar cu numere ca parametri. Daca vom incerca sa trecem un string (schimbaCuloarea('28', '17', 'o_idee_proasta')), atunci aceasta va returna printre altele valoarea 'NaN' (not a number) ceea ce ne avertizeaza ca unul sau mai multi parametri nu sunt numere. Daca vrem totusi sa ne asiguram ca rgbToHex(); primeste doar numere ca parametri, aici intervine functia toInt();. Aceasta se apeleaza la o variabila, si incearca sa se asigure ca va transforma in integer, orice contine aceasta variabila:

var VarToInt = function(creaza-mi_un_numar){
var numar = creaza-mi_un_numar.toInt()
alert ('Cea mai buna solutie : ' + numar);
}

Sa incercam cateva exemple; astfel VarToInt('7865.12') va returna 'Cea mai buna solutie : 7865'; VarToInt('50_de_tutoriale_MooTools') va returna 'Cea mai buna solutie : 50'; iar VarToInt('Tutorialul_numarul_8') va returna 'Cea mai buna solutie : NaN'. Dupa cum vedeti, functia toInt(); nu rezolva chiar toate problemele, dar pentru acest lucru avem un alt element interesant MooTools numit $type(); . Acesta examineaza orice variabila, si returneaza tipul acesteia, astfel:

var verificaTipVariabila(variabila_de_verificat){
var tip_variabila = $type(variabila_de_verificat);
alert("Variabila este de tip : " + tip_variabila);
}
verificaTipVariabila(50)
// va returna "Variabila este de tip : number (numar) "
verificaTipVariabila('un string')
// va returna "Variabila este de tip : string "
verificaTipVariabila(true)
// va returna "Variabila este de tip : boolean "

$type(); detecteaza si alte tipuri de variabile, dar pe moment ne vom concentra pe numere. Astfel, daca adaugam $type(); functiei VartoInt() de mai sus, vom obtine urmatoarea secventa de cod:

var VarToInt2 = function(creaza-mi_un_numar){
// incearca sa transformi intrarea intr-un numar
var numar = creaza-mi_un_numar.toInt();
// daca nu functioneaza, atribuie-i numarului valoarea 0
if ($type(numar) != 'numar'){numar = 0;}
alert ('Cea mai buna solutie : ' + numar);
}
VarToInt2('7865.12') 
//va returna 'Cea mai buna solutie : 7865'
VarToInt2('50_de_tutoriale_MooTools') 
//va returna 'Cea mai buna solutie : 50'
VarToInt2('Tutorialul_numarul_8')
//va returna 'Cea mai buna solutie : 0'

Daca trecem totul in functia schimbaCuloarea(), vom obtine o solutie aproape perfecta:

var schimbaCuloarea2 = function(rosu, verde, albastru){
//incearca sa te asiguri ca toate valorile sunt de tip 'integer'
rosu = rosu.toInt();
verde = verde.toInt();
albastru = albastru.toInt();
//Seteaza valoarea implicita '0' oricarui parametru NaN (care nu este numar)
if ($type(rosu)   != 'numar'){rosu = 0;}
if ($type(verde) != 'numar'){verde = 0;}
if ($type(albastru)  != 'numar'){albastru = 0;}
//Calculeaza valoarea hexagesimala
var culoare = [rosu, verde, albastru].rgbToHex();
alert('Converteste in culoarea : ' + culoare);
}
schimbaCuloarea2('28', '17', '47')
//va returna expresia 'Converteste in culoarea: #1c112f'
schimbaCuloarea2('28', '17', 'o_idee_proasta')
//va returna expresia 'Converteste in culoarea: #1c1100'
schimbaCuloarea2('428', '317', '265000')
//va returna expresia 'Converteste in culoarea: #1ac13d40b28'

Ultima expresie evident nu returneaza o culoare. Aceasta trimite catre rgbToHex numere in afara arie RGB de 0-255, unde se pot converti valorile in echivalentul lor hexagesimal. Astfel, daca primim ca intrare un numar din afara ariei RGB, nu vom putea obtine o valoare hexagesimala valida a unei culori. Din fericire, in MooTools exista si functia limit();, pe care o putem folosi in acest caz. Aceasta poate fi apelata unui numar ale carui margini superioare si inferioare la care trebuie limitat, sunt trecute ca argumente. Daca numarul este in afara acestor limite, se va rotunji corespunzator. Trebuie tinut minte ca aceasta limitare necesita un numar intreg pentru a functiona, asa ca este bine sa folosim functia toInt(): asupra a ceva ce trebuie sa fie un numar, pentru a il putea limita:

var limiteaza = function(numar_de_limitat){
//incercam sa obtinem un numar intreg
numar_de_limitat = numar_de_limitat.toInt();
//obtinem valoarea limitata
var numar_limitat = numar_de_limitat.limit(0, 255);
alert("Numar limitat la valoarea : " + numar_limitat);
}
limiteaza(6535634)
//va returna 'Numar limitat la valoarea : 255'

La sfarsit, functia schimbaCuloarea va arata astfel:

var schimbaCuloarea3 = function(rosu, verde, albastru){
//incearca sa te asiguri ca toate valorile sunt de tip 'integer'
rosu = rosu.toInt();
verde = verde.toInt();
albastru = albastru.toInt();
//Seteaza valoarea implicita '0' oricarui parametru NaN (care nu este numar)
if ($type(rosu)   != 'numar'){rosu = 0;}
if ($type(verde) != 'numar'){verde = 0;}
if ($type(albastru)  != 'numar'){albastru = 0;}
//Limiteaza totul la scala RGB (0 - 255)
rosu   = rosu.limit(0, 255);
verde = verde.limit(0, 255);
albastru  = albastru.limit(0, 255);
//Calculeaza valoarea hexagesimala
var culoare = [rosu, verde, albastru].rgbToHex();
alert('Converteste in culoarea : ' + culoare);
schimbaCuloarea3('28', '17', '47')
//va returna expresia 'Converteste in culoarea: #1c112f'
schimbaCuloarea3('28', '17', 'o_idee_proasta')
//va returna expresia 'Converteste in culoarea: #1c1100'
schimbaCuloarea3('428', '317', '265000')
//va returna expresia 'Converteste in culoarea: #ffffff'

In tutorialul urmator, vom vorbi si despre filtrarea stringurilor introduse de utilizatori.Pentru mai multe detalii despre filtrarea numerelor, cititi tutorialele de pe site-ul MooTools.

 

Alex B.

0Comentarii la "Tutorial MooTools pasul 8 Filtrarea numerelor introduse de utilizator"

Adauga Comentariu

Mesaj

Trimite