Agora
Media
Libraria Byblos



AgoraNews  





PC Magazine Ro  




NET Report   




Ginfo   




agora ON line   





PC Concrete   





Liste de discuții   




Cartea de oaspeți   




Mesaje   





Agora   








Clic aici
PC Report - ultimul numar aparut


IPRO - PC Magazine Romania, 2002
Comunitatea experților și a cititorilor PC Magazine - Internet PRO

Formulare inteligente cu JavaScript

Emanuel Baruch

Limbajul JavaScript este o unealtă foarte folositoare, atunci când posibilitățile pe care ni le pune la dispoziție HTML devin limitate. Practic, orice element dintr-o pagină web poate fi îmbunătățit cu ajutorul unor scripturi speciale, îndeosebi formularele.

Întâi de toate, trebuie să atrag atenția asupra faptului că JavaScript nu este același lucru cu Java. Java este un limbaj de programare dezvoltat de Sun Microsystems iar applet-urile Java reprezintă mici aplicații (animații, jocuri) care rulează într-o pagină web. În schimb, JavaScript este un limbaj de scriptare cu ajutorul căruia se pot incorpora scripturi direct în paginile web. JavaScript are unele elemente de sintaxă similare celor din Java, însă nu poate fi considerat ca fiind derivat din acest limbaj. JavaScript a fost dezvoltat de Netscape în colaborare cu Sun Microsystems, de aici și denumirile asemănătoare. Așadar, "Java" nu este o prescurtare pentru "JavaScript", deși mulți fac această confuzie. Acestea fiind spuse, haideți să vedem, pe scurt, cum folosim în general JavaScript pentru a îmbunătăți paginile noastre web.

Scripturile JavaScript sunt introduse cu ajutorul tag-ului <script> fie direct în pagina web respectivă, fie ca fișier separat cu extensia js:

<script language="JavaScript">
<!— cod JavaScript —>->
</script>
<script language="JavaScript" src="fisier_javascript.js"></script>

În cele mai multe cazuri, este indicată poziționarea scripturilor în antetul paginii web (între tag-urile <head> ... </head>). Există însă și situații în care ele trebuie incluse în corpul paginii (între tag-urile <body> ... </body>), neputând fi rulate altfel. Aceasta se întâmplă mai ales atunci când codul generează anumite elemente dinamice în pagina web.

Principalele browsere (Internet Explorer, Netscape Communicator, Opera) suportă fără probleme acest limbaj de scripting, însă există unele diferențe în modul în care sunt interpretate anumite funcții, chiar și de la o versiune la alta. Așadar, nu orice script care funcționează bine pe Internet Explorer va funcționa pe Netscape și invers. Aceste diferențe dau încă multă bătaie de cap programatorilor web și chiar și utilizatorilor, deoarece, spre deosebire de limbajul HTML unde erorile sunt ignorate, în cazul JavaScript vom fi întotdeauna avertizați de browser dacă pe pagină ceva nu este în regulă. Anumite funcții pot conduce chiar și la blocarea browserului. Nu ne-am propus însă să analizăm aceste bugg-uri, ci ne vom opri doar asupra acelor scripturi care funcționează fără probleme. Dată fiind varietatea foarte mare, ne vom limita la analiza celor care ne permit îmbunătățirea performanțelor formularelor din paginile web.

Fără JavaScript, un formular de contact permite utilizatorului introducerea de date aleatoare care vor fi trimise către destinatar. Iată un exemplu:

<form name="formular1" method="post" action="trimitere.php">
Nume: <input type="text" name="nume"><br>
Prenume: <input type="text" name="prenume"><br>
Telefon: <input type="text" name="telefon"><br>
E-mail: <input type="text" name="email"><br>
<input type="submit" name="trimitere" value="Trimite">
</form>

În acest caz, utilizatorul poate completa unul sau mai multe câmpuri cu orice fel de date. JavaScript ne dă posibilitatea controlării riguroase direct din pagina web a cantității și tipului de informații introduse de acesta. Bineînțeles că nu vom fi însă în măsură să verificăm veridicitatea acestora cu ajutorul JavaScript. Cu alte cuvinte, putem să-l obligăm pe cel care completează un formular să introducă - de exemplu - numai un anumit număr de caractere acolo unde îi este cerută o dată, să introducă o adresă de e-mail validă din punct de vedere al formei ([email protected] extensie) sau să completeze neapărat anumite câmpuri din formular.

Concret, în formularul prezentat în exemplul anterior, dorim ca utilizatorul să nu poată trimite formularul fără a completa toate câmpurile. Iată cum vom proceda: vom crea un script care să efectueze verificarea acestor condiții, atunci când utilizatorul încearcă să trimită formularul.

<script language="JavaScript">
<!—-
function verifica(){
if(document.formular1.nume.value == ""){
alert("Completati numele!");
document.formular1.nume.focus();
return false;
}
if(document.formular1.prenume.value == ""){
alert("Completati prenumele!");
document.formular1.prenume.focus();
return false;
}
if(document.formular1.telefon.value == ""){
alert("Completati numarul de telefon!");
document.formular1.telefon.focus();
return false;
}
if(document.formular1.email.value == ""){
alert("Completati adresa de e-mail!");
document.formular1.email.focus();
return false;
}
}
//—>>
</script>

Vom plasa acest script în antetul paginii, iar în cadrul tag-ului form vom specifica momentul în care să se declanșeze verificarea, adică la apăsarea butonului "Trimite":

<form name="formular1" method="post" action="trimitere.php" onSubmit="return verifica()">

Rezultatul va fi următorul: atunci când formularul este trimis, browserul va verifica dacă există caractere introduse în fiecare câmp. În general, câmpurile unui formular sunt apelate prin șirul:

document.nume_formular.nume_câmp

Existența de date introduse într-un câmp (sau mai precis inexistența lor) va fi verificată de comanda:
if(document.nume_formular.nume_câmp. value == "")

Dacă nu există date în câmpul respectiv, browserul lansează un mesaj de avertisment:

alert("Mesaj de avertisment!");

Apoi, cursorul se va întoarce la câmpul cu pricina, astfel încât utilizatorul să poată să-l completeze:

document.nume_formular.nume_câmp.focus();

Șirul return false; va împiedica trimiterea formularului. Dacă însă există date în câmpul respectiv, browserul va trece la următoarea verificare precizată în script. În final, dacă nu descoperă nici o lipsă, formularul este trimis.

Așadar, verificarea se face direct de către browserul utilizatorului și nu este nevoie ca datele să ajungă mai întâi la destinație, pentru a putea fi validate. Aceasta poate economisi timp și resurse importante.

Haideți să mai perfecționăm puțin verificarea. Dorim ca adresa de e-mail să fie validă (din punct de vedere al formei). În scriptul nostru vom adăuga următoarea expresie, între ultimele două paranteze rotunde:

if((document.formular1.email.value == "") || (document.formular1.email.value.indexOf('@') == -1) || (document.formular1.email.value.indexOf('.') == -1) || (document.formular1.email.value.length<6)) {
alert("Adresa de e-mail nu este valida!");
document.formular1.email.focus();
return false;
}

Acest cod va verifica în primul rând dacă adresa de e-mail introdusă conține caracterele "@" și "punct" cu ajutorul sintaxei

(document.formular1.email.value.indexOf('@') == -1) respectiv (document.formular1.email.value.indexOf('.') == -1)

Apoi va verifica dacă șirul de caractere introdus este mai mic de 6 caractere:

(document.formular1.email.value.length<6)

Aceasta din cauză că orice adresă de e-mail conține cel puțin 6 caractere: numele de utilizator (cel puțin un caracter), "@-ul", numele providerului (cel puțin un caracter), punctul și numele domeniului (cel puțin două caractere). După cum am mai spus, un astfel de cod îl va ajuta pe utilizator să nu introducă din greșeală o adresă de e-mail nevalidă, uitând, de exemplu, să introducă o anumită parte a sa. Dacă acesta este de rea voință, atunci va introduce cu siguranță o adresă de e-mail care nu îi aparține ([email protected]) sau nu există, lucru pe care limbajul JavaScript nu îl poate împiedica. ;-)
În general, pentru a ne asigura că un câmp conține un anumit caracter sau șir de caractere vom folosi expresia
document.nume_formular.nume_câmp.value.indexOf('șir') == -1

Iar dacă dorim ca un anumit caracter sau șir de caractere să nu fie inclus în câmpul respectiv, expresia va trebui să fie zero:
document.nume_formular.nume_câmp.value.indexOf('șir') == 0

Multe formulare pe web conțin o căsuță de validare prin care utilizatorul se declară de acord cu anumite condiții iar formularul nu poate fi trimis dacă această căsuță nu este bifată. Pentru a realiza acest lucru, introducem înainte de toate căsuța în formularul nostru:
<input type="checkbox" name="acord" value="da">

În scriptul JavaScript vom introduce (tot între ultimele două paranteze rotunde!) următoarea sintagmă:
if(document.formular1.acord.checked == ""){
alert("Nu ați acceptat condițiile noastre!");
return false;
}

Uneori, în interiorul unei casete ne este oferit un text (sau un cod HTML) pe care suntem invitați să îl salvăm cu ajutorul mouse-ului și al operației copy-paste. Dacă aceasta din urmă nu constituie nici o problemă, selectarea textului respectiv poate deveni greoaie, dacă este vorba de câteva pagini de text (de exemplu, termenii și condițiile unui contract). În acest caz, cea mai adecvată soluție ar constitui-o introducerea unui buton care - prin apăsare - va determina selectarea automată a conținutului căsuței respective.

Căsuța de text va fi aceasta:
<textarea name="text" wrap>text ... text text </textarea>

Butonul nostru va fi generat astfel:
<input type="button" name="Button" value="Selecteaza textul" onClick="JavaScript:this.form.text.focus();this.form.text.select();">

Prin apăsarea acestuia au loc succesiv două operații: cursorul se va plasa în interiorul casetei de text, după care întreg conținutul acesteia se va selecta.

O altă situație des întâlnită este necesitatea selectării sau deselectării unui număr mare de căsuțe de validare (de exemplu, atunci când trebuie alegem dintr-o listă subiectele care ne interesează). Utilizatorul poate fi scutit de acest efort manual prin adăugarea a două butoane: unul care selectează iar altul care deselectează toate căsuțele. Vom exemplifica pentru un număr de trei astfel de casete de validare, adăugarea (sau eliminarea) altora neconstituind nici o problemă:

<input type="checkbox" name="c1"> prima
<input type="checkbox" name="c1"> a doua
<input type="checkbox" name="c1"> a treia

Vom crea o nouă funcție în cadrul scriptului nostru. Aceasta va fi introdusă între ultima acoladă și expresia //—> </script>>:
function bifeaza(status){
var colectie=eval("document.formular1.elements['c1']")
for (c=0;c<colectie.length;c++)
colectie[c].checked=status
}

Butoanele vor fi următoarele:
<input type="button" name="buton1" value="Bifeaza tot" onClick="JavaScript:bifeaza(true)">
<input type="button" name="buton2" value="Debifeaza tot" onClick="JavaScript:bifeaza(false)">

Acestea nu trebuie să fie neapărat butoane inserate în formularul respectiv, ci pot fi simple link-uri:
<a href="JavaScript:bifeaza(true)">Bifeaza tot</a>
<a href="JavaScript:bifeaza(false)">Debifeaza tot</a>

Prin apăsarea acestor butoane sau link-uri vor fi selectate, respectiv deselectate, toate casetele de validare care poartă atributul name="c1".

Ați observat desigur că, atunci când trebuie să alegem o parolă pe o pagină web, suntem obligați să o introducem de două ori, pentru verificare. Aceasta se poate realiza foarte simplu cu un script JavaScript. Mai întâi vom crea însă două casete de text de tip parolă:
<input type="password" name="parola1">
<input type="password" name="parola2">

Apoi vom adăuga în scriptul nostru, în cadrul funcției verifica următoarea formulă de validare:
if(document.formular1.parola1.value != document.formular1.parola2.value){
alert("Parolele nu sunt identice!");
return false;
}

Această metodă are însă un inconvenient: citirea de către script a parolei nu este sigură, deoarece, cu ajutorul altor funcții, parola poate ajunge în mâinile altora. Din acest motiv browserul Opera va genera în acest caz de fiecare dată un mesaj de alertă.

Uneori, pentru a-l ajuta pe utilizator în completarea formularului, casetele de text posedă ca valoare inițială un mesaj sau un exemplu de date care trebuie introduse în locul respectiv. Utilizatorul va trebui să selecteze și să șteargă conținutul predefinit al casetei. Și acest efort poate fi ocolit cu ajutorul unui script JavaScript. Astfel, atunci când utilizatorul va poziționa cursorul în casetă, conținutul acesteia va dispărea automat.
<input type="text" name="caseta2" onfocus="this.value=''" value="Introduceti textul aici">

Problema pare rezolvată. Totuși, acest script nu este foarte bine gândit. Dacă utilizatorul se întoarce la caseta respectivă pentru a efectua modificări, conținutul acesteia va dispărea atunci când cursorul a fost poziționa pe ea. De aceea, va trebui să creăm o funcție separată, care să împiedice acest lucru. Codul casetei noastre va arăta astfel:

<input type="text" name="caseta2" onfocus="JavaScript:sterge()" value="Introduceti textul aici">

Noua funcție va verifica conținutul casetei la selectarea ei, și nu îl va șterge decât dacă acesta este identic cu șirul "Introduceti textul aici":
function sterge(){
if(document.formular1.caseta2.value == "Introduceti textul aici") {
document.formular1.caseta2.value = "";
document.formular1.caseta2.focus();
return false;
}
}

Multe formulare conțin și un buton care la apăsare resetează formularul și îl aduce la starea lui inițială. Acesta poate fi foarte practic în anumite situații.

Totuși, este posibil ca utilizatorul să îl apese accidental, mai ales atunci când butonul este plasat direct lângă cel care trimite formularul respectiv. Pentru a preîntâmpina o astfel de situație, se poate crea o funcție care va genera un mesaj de confirmare, înainte de resetarea formularului, asemănător cu mesajele de confirmare a ștergerii fișierelor din Windows.

function confirma()
{
input_box=confirm("Formularul va fi resetat!");
if (input_box==true)
{

document.formular1.reset();
}
else
{
return false;
}
}

Butonul care apelează această funcție va fi:
<input type="button" name="stergere" value="Reseteaza" onClick=confirma()>

Mai există o mulțime de scripturi care pot înlesni completarea formularelor și verificarea datelor introduse. Vă invităm să ne trimiteți cele care vi se par cele mai interesante. Însă nu uitați să le testați pe cât mai multe browsere: Internet Explorer (versiunile 4, 5 și 6), Netscape (versiunile 4 și 6) și Opera (versiunea 6).


PC Magazine Ro | CD ROM | Redactia | Abonamente | CautareArhive

Copyright © 1999-2002 Agora Media.

[email protected]

LG - LifeŽs Good

www.agora.ro

deltafri

Concurs de Grafica Digitala si Web Design

www.agora.ro

www.agora.ro