Interactivitate cu JavaScript

Natura Web-ului se schimbă rapid, de la pagini statice, neinteractive sau a căror interactivitate este complet bazată pe scripturi CGI (deci pe partea de server) la pagini a căror formă si continut se schimbă de fiecare dată cînd sînt încărcate si a căror interactivitate este pe partea de client. Interactivitatea, sprijinită de limbaje special concepute pentru a putea fi folosite la scrierea de programe inserate direct în documentele HTML, caracterizează ceea ce numim situri Web din a doua generatie.

Cel mai dinamic dintre aceste limbaje pare a fi JavaScript. Desi este într-o formă încă incipientă, limbajul permite scrierea scenariilor pentru tratarea actiunilor utilizatorului în fereastra navigatorului. Avantajul fată de scripturile CGI este că programele scrise în acest limbaj pot rula în întregime pe partea de client, programele fiind interpretate local de navigator.

Tot în rîndul avantajelor acestui limbaj pot fi enumerate siguranta (limbajul nu poate fi utilizat pentru a accesa si scrie pe discul clientului) si faptul că nu necesită privilegii speciale pe partea de server.

JavaScript seamănă cu Java în aceea că suportă sintaxa expresiilor Java si posedă aproape toate trăsăturile de control al fluxului însă, spre deosebire de Java care este un limbaj compilat, JavaScript este executat de interpretorul navigatorului. Java este de regulă folosit de programatori pentru crearea de noi obiecte si apleturi, iar JavaScript este utilizat de autorii paginilor HTML pentru scrierea scenariilor care descriu comportarea acestor obiecte în functie de evenimentele utilizator.

Spre deosebire de Java, în care programele există numai în interiorul structurii unei clase (clasa fiind reprezentarea Java a unui obiect), JavaScript are functii si declaratii de sine stătătoare.

Desi JavaScript are posibilitatea de a crea si a utiliza obiecte, implementarea obiectelor nu este considerată deplină deoarece nu oferă toate functiile de bază ale limbajelor orientate obiect, cum ar fi abstractia, mostenirea si încapsularea. Din cauza acestor limitări, limbajul JavaScript nu este capabil să creeze obiecte de tipul celor disponibile în Java; a fost însă numit limbaj orientat obiect deoarece are posibilitatea să utilizeze obiecte create cu limbaje de programare orientate obiect. Implementarea completă a paradigmei "orientare-obiect" ar fi sacrificat însăsi caracteristica principală a limbajului: simplitatea programelor scrise direct în paginile HTML si puterea de a interconecta obiecte care există în mediul navigatorului.

O sesiune JavaScript este initiată prin tagul:

Secventa JavaScript pentru Marquee

var buffer=" ";

var text="Welcome to Agora On Line";

var news="Read in the news about The International Math conference in Cluj";

var marqueeString=buffer+text+buffer+news;

var marqueeRunning=false;

var timeoutID=null;

var position=0;

var sLength=marqueeString.length;

function stopMarquee() {

if (marqueeRunning)

clearTimeout(timeoutID);

marqueeRunning=false;

}

function startMarquee() {

stopMarquee();

updateMarquee();

}

De subliniat aici că numerotarea elementelor formularului începe de la zero si fiecare tag INPUT declară un element nou.

Date si evenimente

Asa cum am mentionat anterior, există mai multe modalităti pentru accesarea valorilor stocate în formular. Ideea de a memora costul abonamentului prin atributul VALUE al tagului INPUT ar fi permis prelucrarea datelor de forma:

function suma(form)

for (i=2, i<=6, i++)

total= total+form.elements[i].value

Deoarece valoarea atributului este considerată sir de caractere acesta ar fi trebuit convertit înainte de a fi procesat.

O a doua variantă ar fi fost să să definim o functie care să verifice cîmpurile selectate si să le adune valorile.

Am preferat utilizarea unor variabile globale, care reprezintă costul abonamentelor si pe care le-am initializat într-un mic script inserat în headerul documentului.

Valorile sînt atribuite variabilelor în urma unor evenimente (aici selectii) declansate de utilizator.

Manipulatorii de evenimente sînt inserati direct în documentul HTML si sînt activati de evenimentul dorit de programator. Acesta poate fi un clic de mouse, deplasarea cursorului peste un cîmp text, o selectie s.a.m.d. În cazul nostru, manipulatorul onClick apelează o functie (suma(this.form)) care efectuează un mic calcul matematic (suma de expediat prin postă pentru selectia de abonamente). Identificatorul this.form determină trecerea tuturor proprietătilor formularului de intrare către functiei.

Manipulatorii de evenimente sînt inserati ca atribute în tagurile elementelor formularelor, ca de pildă:

La selectia acestui buton radio (clic), variabila pcrep primeste valoarea 6000 si valoarea atributului VALUE al elementului 7 din formular (form.elements[7].value) devine egală cu ce returnează functia suma(this.form).

Faptul că un cîmp text declarat prin INPUT este prin JavaScript si o zonă de afisare a datelor poate fi folosit pentru genararea unui marquee inserabil în orice loc al paginii (inclusiv în zona status a navigatorului). Am folosit o asemenea secventă de program în pagina de primire a Agorei pentru a anunta ultimele stiri. Scriptul, integrat în HEAD, este apelat la încărcarea paginii de evenimentul onLoad inserat ca atribut în BODY.

Tot în pagina de primire am folosit unul din obiectele statice ale limbajului (Date) pentru a afisa data la care a fost accesat documentul:

azi=new Date ()

azi.getTimezoneOffset()

Data este afisată cu linia de cod:

document. write("You logged in: "+azi)

inserată în corpul documentului.

Concluzii

JavaScript este un limbaj relativ puternic, interpretat de navigator. Utilizat în conjunctie cu HTML, Java si CGI, interactivitatea Web-ului poate fi considerabil îmbunătătită simultan cu reducerea simtitoare a necesitătilor de trafic între client si server. Aceasta conduce la cresterea performantelor serverului si a vitezei de reactie a navigatoarelor la evenimentele utilizator. 

Bibliografie:

(C) Copyright Computer Press Agora