Paginile Web sînt documente active. JavaScript vă poate ajuta să le dati viată chiar în navigatorul vizitatorului.

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:

<SCRIPT SRC="nume_script.js">

sau

<SCRIPT LANGUAGE="JavaScript">

Programul este evaluat după ce pagina este încărcată. Functiile, declarate de regulă direct în headerul documentului (<HEAD>) sînt stocate în memorie permitînd executarea lor repetată atunci cînd sînt declansate de evenimente utilizator. Declararea în header se face pentru a avea certitudinea că programul este disponibil înainte ca utilizatorul să declanseze vreun eveniment.

Un exemplu

Deoarece rezolvarea formularelor cu HTML si CGI este destul de cunoscută, am cosiderat că un exercitiu asemănător rezolvat însă cu JavaScript oferă posibilitatea unei comparatii. Exemplul propus mai jos este cel utilizat pe Agora pentru abonarea on-line la publicatiile editurii.

Formularele permit clientului să furnizeze date programelor JavaScript, date care pot fi utilizate apoi în mod dinamic pentru a schimba comportarea documentului.

Obiectul form este o încapsulare a codului HTML si are structura:

<FORM
NAME="nume_formular"
TARGET="fereastra_tintă"
ACTION="URL-ul care primeste datele"
METHOD="GET|POST"
ENCTYPE="modul de codare"
[onSubmit="codul JavaScript"]>
</FORM>

Proprietătile obiectului sînt action, elements, encoding, method si target.

Proprietatea encoding diferă de celelalte proprietăti prin aceea că nu stochează un atribut individual ci este o matrice care memorează valorile elementelor individuale ale formularului. Aceste elemente pot fi butoane, cîmpuri text, căsute de selectie, liste, s.a.m.d. Valorile lor pot fi accesate fie prin obiectul form (după sintaxa cunoscută: form.elements[i]), fie prin obiectul document.

Singura metodă a obiectului form este submit(). Invocarea acestei metode este echivalentă cu apăsarea butonului submit din formular.

Metoda poate fi utilizată pentru a trimite automat serverului informatiile din formular, ca rezultat al unui evenimet utilizator. Tot ce trebuie făcut este apelarea metodei după sintaxa:

document.form.submit() 

sau

document.forms[i].submit()

 

În exercitiul propus de noi lucrurile trebuiau să decurgă după următorul scenariu: utilizatorul completa cîteva cîmpuri text cu datele personale si selecta cu ajutorul unor butoane radio publicatiile la care dorea să se aboneze si perioada abonamentului. Datele urmau să fie trimise via e-mail departamentului Distributie. Pîna aici toate bune; lucrurile puteau fi rezolvate si cu CGI. JavaScript intervine la tratarea evenimentelor utilizator. Cînd acesta face clic pe o anumită selectie, evenimentul trebuie să determine afisarea costului abonamentului într-un cîmp text. La următoarea publicatie selectată, noul cost trebuie adăugat celui initial si rezultatul trimis în acelasi cîmp de afisare. De subliniat că datele prelucrate nu trebuies neaparat afisate într-un nou document ci în chiar unul din cîmpurile text utilizate de regulă pentru intrarea datelor. Este important aici să vă imaginati cîmpurile text declarate în formulare nu numai ca si cîmpuri de intrare pentru date dar si ca zone de afisare a rezultatelor returnate de o secventă de program. Adresarea cîmpului se face cu sintaxa:

form.elements[i].value=ce_trebuie_afisat (de pildă, valoarea returnată de o functie).
<SCRIPT LANGUAGE=JavaScript>
<!-- acest tag utilizat pentru comentariu ascunde scriptul de navigatoarele mai vechi
//se face initializarea variabilelor;
//am utilizat byterom în loc de byte ultimul
//fiind un cuvînt rezervat
var test=0;
byterom=0;
pcrep=0; 
cad=0;
//la resetarea formularului, se apelează functia de initializare
function initialize(form) {
byterom=0;
pcrep=0;
cad=0;
}
//La fiecare selectie, variabilele primesc valori
//si este apelată functia de mai jos
function suma(form) {
test=0;
test=test+byterom+pcrep+cad;
return test;
}
// ascunde tag-ul de sfarsit de comentariu -->
</SCRIPT>

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ă:

<INPUT TYPE="radio" NAME="PCreport" VALUE="" onClick={pcrep=6000;form.elements[7].value=suma(this.form)}>

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.

<BODY onLoad="startMarquee()" onUnLoad="stopMarquee()">

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:

• Netscape ( http://home.netscape.com/comprod/products/navigator/version2.0/script/ )
• Index JavaScript ( http://www.c2.org/~andreww/javascript/ )
• Pagina JavaScript la Gamelan ( http://www.gamelan.com/frame/Gamelan.javascript.html )
• Programming JavaScript for Netscape 2.0, Tim Ritchey, New Riders Publishing, 1996
• Using Java, QUE, 1996.
• Limbajul Java, Eugen Rotariu, Computer Press Agora, 1996
• Dr Dobb’s, #245, #247, 1996.

(C) Copyright Computer Press Agora