| CATEGORII DOCUMENTE |
Limbajul JavaScript este un limbaj descriptiv, compact, orientat-obiect, dezvoltat de Netscape pentru realizarea aplicatiilor client-server pe Internet. Netscape interpreteaza scripturile Java, incluse intr-o pagina HTML in raport cu evenimentele activate de utilizator (click-ul de mouse, completare de campuri intr-un formular, navigare, etc.). Netscape a inventat JavaScript, limbaj care s-a utilizat pentru prima data de browsere Netscape.
Spre deosebire de acesta, Java este o platforma orientata-obiect independenta de limbaj, dezvoltata de Sun Microsystem si utilizata pentru a adauga functionalitati suplimentare paginilor Web sau pentru dezvoltarea unor aplicatii complexe care sunt proiectate pe principiile aplicatiilor de business. Limbajul JavaScript este asemanator cu applet-urile Java, dar nu ofera o gama atat de diversificata de functionalitati aplicatiilor sale. Astfel JavaScript a preluat majoritatea expresilor sintactice si a constructiilor de control de baza dar in contrast cu sistemul de clase Java care sunt compilate pe server inaintea executiei propiu zise, scripturile Java sunt interpretate de catre client (Netscape), si manipuleaza un numar restrans de tipuri de date (valori numerice, booleene si string), fara a detine tipurile statice si verificarea puternica a tipurilor oferite de appleturile Java. Programele Java sunt alcatuite exclusiv din clase si metodele acestora, cunoscut fiind faptul ca declararea claselor si a interfetelor, scrierea metodelor asociate fac programarea mai complexa decat in cazul scripturilor. Acesta este argumentul major pentru care o serie de programatori Web prefera utilizarea unor instrumente simplificate in realizarea documentelor Web sau a aplicatiilor multimedia.
Conceput pe principiile programarii obiectuale, are predefinite un set de obiecte legate intr-o varietate de componente ale unei pagini HTML, impreuna cu relatiie dintre acestea. Pentru a vizualiza si manipula structurile diverselor obiecte se solicita utilizatorului precizarea proprietatilor si metodelor acestora.
JavaScript are un model de obiecte, bazat pe instante simple, oferind si capacitati semnificative (utilizarea functiilor fara cerinte speciale de declaratii). Functiile pot fi proprietatiile obiectelor si se executa ca metode, iar scripturile Java complementeaza appleturile Java prin expunerea proprietatiilor folosite de appleturi, deoarece aceste scripturi permit obtinerea si stabilirea proprietatilor expuse pentru a interoga starea sau pentru a modifica perfomanta unui applet sau plug-in. Fara a intra in prea multe detalii, JavaScript este interpretativ, destinat elaborarii scenariilor la fel ca si PERL dar spre deosebire de Perl, unde scenariile se executa pe server, scenariile JavaScript sunt executate de catre browser (Netscape Navigator, Internet Explorer), care reprezinta astfel interfata dintre utilizator si Web. [Reyn_96]. Prin functionalitate LiveConnect JavaScript si Java comunica intre ele. Din JavaScript, se pot instantia Java obiecte si se pot accesa metodele publice si campuri iar din Java , se pot accesa obiecte JavaScript, proprietati si metode. Astfel nucleul JavaScript poate fi extins in diverse scopuri prin suplimentarea cu obiecte aditionale, realizand astfel interactivitatea client-side respective server-side.
Client-side JavaScript extinde nucleul limbajului prin suplimentare cu obiecte de control al browser-ului (Navigator sau oricare altul) precum si Document Object Model (DOM). In acest mod extensiile client-side permit aplicatiilor plasarea elementelor in forme HTML form si raspund la evenimente utilizator (mouse click, introducere de date in formulare input, navigarea in pagina.
Server-side JavaScript extinde nucleul limbajului prin suplimentare cu obiecte relevante pentru a rula pe server, permitand unei aplicatii sa comunice cu baze de date relationale, sa furnizeze continuitatea informatiilor dintr-o invocare a altor aplicatii, sa manipuleze fisiere de pe server.
Modul de functionare a unui script JavaScript se bazeaza pe paradigma cerere raspuns [1]:
utilizatorul declanseaza un eveniment (click de mouse, selectia unei legaturi sau editare intr-un camp, etc.);
prin manipulatorul de eveniment asociat, este apelata functia inclusa in tagul <SCRIPT>function funct() </SCRIPT>
functia funct() utilizeaza obiectele HTML existente, obiectele Browser precum si obiectele fundamentale (String, Math, Date) cu proprietatile si metodele acestora si efectueaza o actiune pe baza datelor (daca exista) furnizate de navigator;
scriptul returneaza rezultatul obtinut si il formateaza astfel incat sa fie inteligibil de catre serverul Web;
actiunea asociata poate fi interogarea unei baze de date, calcularea unei variabile sau apelarea unui program rezident pe sistem.
serverul Web receptioneaza rezultatul de la script si il trimite navigatorului care il formateza si il afiseaza utilizatorului.
Ierarnie
Figura 1. Modul de functionare a scripturilor
O comparatie dintre JavaScript si Java ne permite sa afirmam ca apar similitudini dar si diferente:
JavaScript este un limbaj OO (Object-oriented) care nu face distinctie intre tipul obiectelor. Mostenirea este realizata printr-un mecanism prototip, iar properietatile si metodele pot fi adaugate in mod dinamic oricarui obiect. Java este un limbaj bazat pe clase (Class) iar obiectele sunt impatite in clase si instante printr-un mechanism de mostenire ce-si are baza in ierarhia de clasa. Clasele si instantele nu pot avea properietatile si metodele adaugate in mod dinamic.
JavaScript poseda variable a caror tipuri de data nu se declara, ci sunt dinamice (dynamic typing) iar Java poseda variable a caror tipuri de data trebuie declarate (static typing).
Ambele limbaje nu pot scrie direct pe disc.
JavaScript poate fi atat limbaj client-side cat si server-side depinzad de locul unde este procesat scriptul. Astfel scriptul client-side este procesat ('ruleaza') in mod client (pe browser), fara a primi/trimite date de la/spre server. Spre deosebire de acestea, scriptul server-side este procesat in relatie cu aplicatiile server si poate primi/trimite date de la/spre server. Majoritatea scripturilor JavaScript sunt client-side.
La fel ca si Java, JavaScript este cross-platform, codeul putand rula pe o varietate de platforme, folosind calculatoare diverse cu diferite systeme de operare, obtinand aceleasi rezultate ale executiei.
JavaScript este nume dat de Netscape, utilizat pentru prima oara in Netscape 2.0, cel mai popular limbaj scriptural, versiunea curenta fiind 1.5. JScript este inventat de Microsoft ca limbaj scriptural in comptitie cu JavaScript. ECMAScript reprezinta standardul international "de facto" JavaScript, acoperind nucleul limbajului. De la versiunile 4 browserele Netscape si Internet Explorer, recunosc JavaScript si JScript avand aceleasi functionalitati de baza. Ambele poseda nucleul limbajului inclus in standard ECMA. In timp ce IE recunoaste JScript si JavaScript, Netscape nu, in timp ce tag-urile esentiale sunt aceleasi iar scripturile JavaScript ruleaza pe ambele browsere. Exista totusi cateva diferente intre codul JavaScript si JScript in contextual scriptului propriu zis.
Netscape a cooperat cu ECMA (European Computer Manufacturers Association) pentru a pune la dispozitie un limbaj de programare standardizat, international bazat pe nucleul JavaScript. ECMA este asociatia internationala de standarde pentru sisteme informationale si de comunicatii. Versiunea standardizata JavaScript, denumita ECMAScript, devine support de aplicatii iar firmele pot folosi limbajul deschis standard pentru a-si dezvolta propriile implementari de JavaScript. Prima versiune de standarde ECMA este regasita in specificatiile ECMA-262[1], standard agreat de ISO (International Organization for Standards) as ISO-16262. Specificatiile ECMA Web site nu descriu Document Object Model (DOM), standardizat de World Wide Web Consortium (W3C). The DOM defineste modul in care obiectele sunt incluse in documentul HTML si comunicarea cu script-ul.
Relatiile dintre Between JavaScript si versiunile ECMA
Netscape a conlucrat cu ECMA pentru realizare specificatiilor ECMA. Astfel ECMA-262, Edition 1 se bazeaza pe 1.1. iar JavaScript 1.3 este complet compatibil cu ECMA-262, Edition 1, JavaScript 1.3 solutioneaza inconsistentele pe care le avea JavaScript 1.2 cu ECMA-262, pastrand toate caracteristicile din JavaScript 1.2 cu exceptia == and !=, modificate conform ECMA-262. JavaScript 1.4 s-a lansat inainte ca a treia versiune de specificatii ECMA-262, Edition 3 iar JavaScript 1.5 este complet compatibil ECMA-262, Edition 3. Core JavaScript Reference indica acele caracteristici ale limbajului ce sunt compatibile ECMA, dar furnizeaza functionalitati suplimentare. Documentul ECMA nu are ca scop sprijinul programatorilor deoarece terminologia si sintaxa sunt nefamiliare programatorilor dar limbajul JavaScript suporta toate functionalitatile precizate de ECMA. In schimb documentatia JavaScript descrie aspecte de limbaj familiare programatorilor:
Obiectele globale nu sunt tratate in documentatia JavaScript deoarece nu sunt utilizate direct. Metodele si proprietatile obiectelor globale apar in documentatii denumite functii si proprietati de nivel inalt (top-level).
Constructotul fara parametru (zero-argument) pentru obiecte Number si String nu sunt tratate in documentatia JavaScript deoarece constructorul Number fara argument intoarce +0, iar String '' fara argument intoarce (sir vid).
JavaScript versiunea 1.5 pune la dispozitie cateva
elemente functionale si particularitati:
Runtime errors care sunt transmise ca exceptii (similar cu Java).
Formatarea numerelor a fost modifiata pentru a include formatarea pe baza de protptip si apelul metodelor de conversie pe baza prototipului: Number.prototype.toExponential, (metoda de conversie la exponential, Number.protoytpe.toFixed ( fix) si Number.prototype.toPrecision (precizia de reprezentare.
Expresiile simple au fost modificate pentru a permite cuantificatorilor - +, *, ? si - sa poata fi urmati de ? , fortand evaluare. Parantezele necapturate (?:x) pot fi utilizate in locul parentezelor capturate (x). Utilizarea parantezelor necapturate, permite marcarea subexpresiilor care nu sunt disponibile ca referinte ulterioare (back-reference)
Atribuirile pozitive si negative sunt deja accesptate, ambele depinzand de ceea ce urmeaza dupa marcator, spre exemplu intrari pentru: x(?=y) si x(?!y)
Flag-ul m este adaugat in expresii de atribuire, care se pot extinde pe mai multe linii.
Permite declaratii de functii in expresii conditionale (functii declarate in clause if) sau functii ce pot fi declarate in interiorul unei expresii..
Clauzele multiple catch sunt deja premise in a structuri de tip trycatch
Programatorii JavaScript pot adauga Getter-i si Setter-i propriilor obiecte, caracteristica a implementarii C in JavaScript.
Implementarea C in JavaScript permite definirea de constante (Constants) read only.
JavaScript poate fi incorporat intr-un document HTML in doua situatii: ca declaratii si functii, folosind elementul <SCRIPT> respectiv sau ca metode de tratare a evenimentelor folosind elementele HTML, cu mentiunea ca orice browser ce nu suporta JavaScript, ignora secventele de instructiuni precizate ca si comentarii.
Exemplu:
<HTML><HEAD> Exemplu JavaScript</HEAD>
<BODY>
<SCRIPT LANGUAGE='JavaScript'>
<!- Ascunde codul
//cod JavaScript
document.write('Programarea in WEB <BR>');
</SCRIPT>
//termina ascunderea codului ->
</BODY></HTML>
Un script este inclus in documentul HTML cu elementul <SCRIPT> iar intre eticheta e inceput (<SCRIPT>) si cea de sfarsit (</SCRIPT>) pot fi incluse oricate declaratii JavaScript, atributul LANGUAGE fiind optional. In primul exemplu am folosit functia document.write pentru a trimite un mesaj catre browser, unde <BR> executa CR si LF. JavaScript este sezitiv la tipul de caractere. Specificand fisierul sub forma unul URL (spre exemplu: file://c:cale) se poate deschide fisierul si se pot executa liniile JavaScript.
Comentariile JavaScript permit explicarea scenariilor si a modului de realizare a aplicatiei:
/*Acesta este un comentariu */
//Si acesta
//*Este tot un comentariu dar multilinie*/
Este de dorit ca functile JavaScript sa fie definite la inceputul documentului (in sectiunea HEAD). Faptul ca HEAD este lansat totdeauna primul, garanteaza lansarea functiilor inainte ca utilizatorul sa aiba o sansa sa produca un eveniment care ar putea sa apeleze o functie.
Exemplu:
<HTML><HEAD>Test JavaScript </HEAD>
<BODY><SCRIPT LANGUAGE='JavaScript'>
function line()
</SCRIPT>
</BODY></HTML>
Intr-un document HTML se pot combina texte afisate cu HTML si cele afisate cu JavaScript utilizand metoda write a obiectului document.
Exemplu:
</HEAD><BODY>
<SCRIPT>
document.write(line());
</SCRIPT>
Celebrul Hello!
</BODY></HTML>
Rezultatul:
______________
Celebrul Hello!
Daca un script utilizeaza metoda document.write pentru afisarea iesirii, browserul reda iesirea documentului curent. Pentru coordonarea iesirii scriptului Java cu cea a documentului HTML, metoda document.write utilizeaza atributele curente de font, dimensiune si stil. Pentru a crea o caseta simpla de mesaj, se foloseste functia alert, deoarece metoda document.write sau document.writeln permite afisarea iesirii ca text inclus in documenul HTML.
Exemplu:
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!- Aici se scriu toate functiile utilizate -
alert ('Cand sunteti dispus sa optati pentru un tip de asigurare')
//end of script.->
</SCRIPT>
</HEAD>
<BODY BGCOLOR= white>
Tastati "OK" si precizati detalii !
</BODY>
</HTML>
Practic un sablon de realizare a unei pagini cu JavaScript presupune utilizarea a minim trei componente:
4 Functia JavaScript din interiorul blocului <SCRIPT> inclus in sectiunea <HEAD> a documentului HTML;
4 <BODY> cu comenzi non-interactive;
4 interactiunea HTML cu agentul de evenimente prin atribute a caror valori sunt functii JavaScript.
Codul JavaScript nu se executa pur si simplu prin citirea si verificarea sintactica a erorilor din blocul SCRIPT dat fiind faptul ca browserul recunoaste codurile si functiile JavaScript, salvand definitiile acestora pentru o utilizare ulterioara. In JavaScript functiile sunt apelate doar de evenimente.
Setul de caractere Unicode, care se foloseste in locul setului de caractere standard ASCII permite reprezentarea caracterelor pe 16 biti, in timp ce setul de caractere ASCII foloseste numai 8 biti. Cele doua subseturi de caractere sunt compatibile, vechiul standard ASCII fiind un subset al setului Unicode. Aceasta necesitate de extindere a setului de caractere - determinata de nevoia de a reprezenta mai mult de 256 de caractere - a aparut din dorinta de a reprezenta literele ce exista in diferite alfabete de pe glob.
Cuvintele cheie sau cuvintele rezervate, sunt identificatori utilizati in JavaScript intr-un mod bine precizat prin gramatica limbajului, fiind interzisa utilizarea lor in alte scopuri. Un identificator este o secventa de litere, cifre si alte caractere in format Unicode, primul caracter fiind obligatoriu o litera, un caracter underscore (_) sau simbolul dolar ($). Acestia trebuie sa fie diferiti de cuvintele cheie si se utilizeaza pentru a desemna variabile, obiecte si metode.
Literalii se folosesc pentru a desemna valori constante in cadrul unui script Java si au la baza doua categorii de date: numere si caractere. Literalii numerici se impart in doua subcategorii: intregi (cu format: zecimal, hexazecimal, octal) si flotanti (numere cu parte fractionara). Un caracter literal se refera la o singura valoare din setul de caractere Unicode, in timp ce un sir de caractere se refera la o succesiune de unul sa mai multe caractere. Pe langa acestia mai exista caracterul boolean, literal considerat numeric pentru compatibilitate cu limbajele C si C++, iar valorile de adevar true si false in C si C++, sunt reprezentate prin valorile intregi 1 si 0, JavaScript putand accepta valori diferite de 0 pentru true.
Constantele literale pot fi exemplificate astfel:
+75 intreg zecimal
O15 intreg octal
Ox12FE4 (hexazecimal case-sensitive)
Virgula mobila:
5, 3.14159
-1.4e12 - constante cu exponent
Booleene: true, false
(Escape)
continuare in linia urmatoare
n linie noua
t tab orizontal
r carriage return
f form feed
backslash
' apostrof simplu
' apostrof dublu
ddd forma octal
xdd forma hexa
uddd caracter unicode
'exemplu' sir de caractere
Separatorii, delimitatorii si terminatorii sunt caractere utile interpretorului pentru detectarea elemente lexicale, dar inafara de spatii, tab-uri mai exista si alti separatori, denumiti delimitatori sau terminatori, care participa la constructiile sintactice ale limbajului. O parte dintre acestia au un rol activ in structurile sintactice ale limbajului si ar putea fi considerati operatori.
O variabila reprezinta o adresa de memorie in care se pastreaza o valoare de un tip prestabili, fiecare variabila fiind inclusa in declaratii de forma:
var identificator[, identificator];.
La intalnirea unei declaratii de acest fel, compilatorul creeaza pentru fiecare identificator din lista cate o variabila avand numele identificator si tipul tip. Dupa crearea unei variabile, i se poate atribui o valoare iar tipul variabilelor nu este explicit ci este interpretat in context diferit. In JavaScript exista doua categorii de tipuri: simple - care nu sunt construite cu ajutorul altor tipuri, intreg, flotant, boolean si caracter si tipurile compuse (agregate) - care se creaza pe baza unor agregari de tipuri simple: tablourile si obiectele. Domeniul de aplicabilitate al variabilei este in zona de program unde este recunoscuta, de la declararea acesteia pana la finalul blocului sau functiei.
Exemple:
var x=7;
var x,y1='19';
var lk='Vedem';
var y=null;
Valoarea null se foloseste in general la initializarea oricarei variabile si nu da tipul implicit null, deoarece la conversia in numar devine 0, la conversia in sir devine '', iar la conversia boolean este false. Acesta este singurul caz in care se permite schimbarea tipului explicit dupa ce este declarat.
Exemplu:
var lx=lk+y; // lx='Vedem'
var w=x+y;// w=19
JavaScript accepta conversii de tip sir+numar care prin concatenare dau rezultat sir respectiv numar+sir unde rezulta numar daca se poate face conversia si eroare in caz contrar. Se recomanda primul tip de conversie pentru a nu produce erori in executia scripturilor. Fiind un limbaj descriptiv, structura sa este divizata in colectii de instructiuni, organizate in functii, pentru a manipula variabile si evenimente HTML, care inglobeaza scripturi in lucru, cu scopul realizarii unui anume obiectiv.
Operatorii sunt folositi pentru a realiza anumite operatii elementare intre obiecte, fiecare operator joaca si rolul de separator intre doua elemente lexicale si au proprietati similare cu cei din C: precedenta (ordinea in care sunt interpretati) si asociativitatea (directia de evaluare). [Laur-98]
|
Operatori |
Precedenta |
|
Accesoriu de clasa, variabila, metoda |
|
|
Aritmetici |
|
|
++ Preincrement, postincrement |
|
|
__ Predecrement, postdecrement |
|
|
* Multiplicare |
|
|
/ Impartire |
|
|
+ Adunare,concatenare siruri |
Stanga la dreapta |
|
- Scadere, negare unara |
Stanga la dreapta |
|
% Modulo |
|
|
Logici |
|
|
< Mai mic |
|
|
> Mai mare |
|
|
<= Mai mic sau egal |
|
|
>= Mai mare sau egal |
|
|
== Test de egalite |
|
|
!= Test not equal |
|
|
! Negatie logica |
|
|
&& AND |
|
|
|| OR |
|
|
? Selectie conditionata |
|
|
, Concatenare logica |
|
|
<< Deplasare stanga |
Stanga la dreapta |
|
>> Deplasare dreapta |
|
|
>>> Deplasare dreapta cu umplere cu 0 |
Stanga la dreapta |
|
~ Complement unar |
|
|
& Si binary |
|
|
^ XOR binary |
|
|
| OR binary |
|
|
Atribuiri |
|
|
=,+,=,-=,*=,/+,%=,&=,^=,|=,<<=,>>= |
|
|
A operand b |
Echivalent cu a=a operand b |
|
A+=b echivalent cu a=a+b |
|
|
[ ] Accesoriu de tablou |
|
|
( ) Casting |
Stanga la dreapta |
Tabelul 1. Operatori JavaScript
In continuare incercam sa prezentam cateva particularitati de limbaj:
4 Daca rezultatul calculelor este de tip intreg si operandul este long se realizeaza conversia la tipul long, in rest rezultatul este int;
4 Impartirea unor cantitati intregi da rezultat intreg;
4 n=-m; //echivalent cu inmultirea cu -1;
4 Operatorul % da restul impartirii si este utilizat la intregi; semnul rezultatului este cel al deimpartitului (Exemplu: -21%4=-1 si nu 3);
4 Operatorii de incrementare/decrementare simplifica adunarea si scaderea simpla.
Exemplu:
var x=10;
y=++x; //x=11 si y=11
z=x++; //x=11 si z=10
4
If (x=3) //
x=3 se considera atribuire si se recomanda if (3=x) sau if (3==x) plasand
constantele in partea stanga in expresii, indeosebi
4 Operatorii de comparare actioneaza asupra sirurilor si numerelor, iar la nivel de sir compararea se face folosind dictionarul:
Exemplu: 'Bunuri'<'servicii' rezultat true
Evaluarea lenesa (lazy evaluation) este realizata de la stanga la dreapta pentru regula si-sau a operatorilor si este folosita cu precadere in interiorul buclelor for si loop. Operatorii de atribuire si agregare pot fi combinati cu operatorii aritmetici sau logici astfel:
x+=7;//x=x+7
y*=19.4; //y=y*19.4
z|=OxAA7700; // zVOxAA7700
w>>>=10; //shift (fara semn) cu 10 biti a lui w
Ordinea de evaluare este data de operatorii de precedenta, singura exceptie o constituie incrementul si decrementul, operatori unari care obliga la preincrementare sau predecrementare inaintea tuturor.
Operatori speciali
Ca orice limbaj orientat obiect, poseda cativa operatori special ce permit manipularea expresiilor sau obiectelor:
?:Conditie - reprezinta un tip de structura ifelse unde conditia este plasata inainte de (?) iar valoarea este plasata in fiecare parte a (:);
, (Virgula-Comma) este utilizata in procesarea in serie a expresiilor;
delete Delete sterge un obiect, proprietate, sau element dintr-un tablou
in In este utilizat pentru a inspecta continutul unui obiect specificat;
instanceof Instanceof testeaza daca un object este instanta a unui obiect specificat;
new New creaza o instanta a unui obiect specificat;
this This refera obiectul curent;
typeof Typeof identifica tipul valorii ce este evaluata;
void Void evalueaza o expresie fara a intoarce o valoare;
La fel ca si in C++ sau alte limbaje de generatia a IV-a JavaScript respecta principalele sreucturi de control if, for, while,etc. oferind cadrul relizarii unor aplicatii structurate, orientate obiect.
Instructiunea IF
if <explL> if <expl2> else
Instructiunea executa primul set de instructiuni <instructiuni1> daca <expL1>=true (adevarata) si daca <expL1>=false (falsa) se executa setul de dupa else (adica unul sau mai multe teste if imbricate, conditionate <expL2>, sau setul de instructiuni <instructiuni3> . Cand else nu este specificat se executa instructiunea de dupa }. Se pot imbrica mai multe comenzi if succesive, marcate intre paranteze iar evaluarea se face de sus in jos.
Exemple:
if ((x<10) && (-10<x))
if ((x<10) && (-10<x)) else
Varianta else if este specifica pentru a verifica multiple[2] conditii, incluzand multiple stucturi else if pentr a obtine rezultatul dorit.
Spre exemplu presupunem ca intr-o firma de consultanta exista mai multi experti: Albu Ana, Pop Ion, Bob Petre iar utilizatorul fizeaza intalnirea in functie de ora la care poate veni. Creem o functie
function consultant ()
Definim variabile locale si initializam valoarea acestora:
var text1 = 'Intalnirea de consultanta are loc cu expertul';
var text2 = ' la ora';
var nowDate = new Date();
var cDate = nowDate.getDate();
var c=cDate.toString();
Variabilele text1 si text2 sunt definite de utilizator iar nowDate si cDate sunt instante de objecte JavaScript.
if (cDate < 5)
else if ((cDate < 12) && (currDate > 4))
else if ((cDate < 19) && (currDate > 11))
else
Variabila c converteste obiectul Date() in sir pentru a-l putea afisa in documentul HTML.
Instructiunea while
while (exprL)
Instructiunea while permite executia grupului de instructiuni pana cand expresia logica expL evaluata este adevarata.
Exemplu:
var x=1;
var xsuma=0;
while (x<10)
Terminarea fortata a ciclului poate fi realizata cu instructiunea break plasata in interiorul corpului de instructiuni.
Instructiunea break
break ;
Instructiunea break determina intreruperea fluxului normal de executie si se foloseste in corpul instructiunilor switch, while, do, for. Controlul se trece la prima instructiune de dupa cele conditionale sau repetitive (switch, while, do, for).
Exemplu:
var x=1;
var xodsum=0;
var xtrup=0;
var ultimx=0;
while (true)
ultimx=x;
Ciclul infinit este evitat prin omiterea structurilor de tip while (true) si asigurarea conditiei de iesire din ciclu.
Instructiunea continue
continue ;
Instructiunea continue este similara cu break si se foloseste in corpul instructiunilor iterarive ca: while, for. Controlul este redat la sfarsitul blocului unde se afla aceasta. Intr-o bucla while, expresia booleana este evaluata imediat dupa continue, iar daca este plasata intr-o bucla for, inaintea evaluarii expresiei booleene nu se mai executa incremetarea/decrementarea.
Exemplu:
var x=0;
var xsum=0;
var salt=0;
while (salt++,100)
Toate instructiunile ce se executa pas cu pas in ciclu se plaseaza inaintea lui continue.
Uzual se foloseste expresia (!(x%5)) desi creaza confuzii aparente pentru ca x%5 este numeric iar (!(x%5)) este booleana.
Instructiunea for
for (expresie1; exprL; expresie2)
Instructiunea for (de ciclare) executa grupul de instructiuni, pornind de la expresia1, pana cand este indeplinita conditia data de expresia booleana expL, cu pasul (incrementul) dat de expresie2.
Exemplu:
var xsum=0;
var x;
for (x=1, x<=10, x++)
Daca se omite conditia de iesire din ciclu, atunci in mod obligatoriu apar instructiuni de fortare a iesirii iar for( ; ; ) este echivalent cu while (true). Daca variabila este utilizata doar in interiorul unui bloc, for poate fi declarata la inceputul blocului.
for (var x=1, x<=10, x++)
Pentru initializari multiple se folosesc variabile separate prin virgula:
for (var x=1, lcont=0; lcont<100, x<=10; x++, lcont++)
unde x si lcont sunt cele doua variabilele din ciclu.
Instructiunea return
return [valoare intoarsa];
Instructiunea return este utilizata de o metoda sau constructor pentru a intoarce controlul la apelant si apare in mod uzual la finalul metodei sau constructorului. Daca metoda intoarce tip void sau constructorul nu are tip intors, return este optional. Se poate folosi si pentru a forta intoarcerea, ca mod de prevenire a executiei restului metodei, ceea ce salveaza nivelul indentarilor, permitand un cod usor de citit si in aceste cazuri este inclusa in if.
Functiile au un nume unic, parametrii transmisi si o instructiune de returnare a valorii. Ca si in cazul datelor, nu exista un tip returnat .
Obiectele organizeaza datele, asa cum functiile organizeaza codul. De fapt, in JavaScript, obiectele inlocuiesc notiunea de clasa, deci nu mai avem obiecte de tipul dat de clasa, ci instantieri ale unui obiect. In afara acestui aspect, paradigma obiectuala e respectata. Obiectul are membrii, care pot fii proprietati sau functii (metode), iar calificarea se face cu operatorii punct sau cu paranteze patrate.
Obiectele reprezinta concepte care pot fi ierarhizate sau imbricate. Un obiect se declara printr-o functie de constructie si se instantiaza cu valorile dorite pentru parametrii intr-o instructiune new. Masivele sunt, de fapt, tot obiecte. Elementele sale sunt considerate proprietati si pot fi calificate ca membri si vom putea avea masive eterogene. Identificarea elementelor se face prin index zero-based sau prin specificarea numelui proprietatii.
Ca orice alt element manipulat de JavaScript, si functiile sunt vazute ca obiecte, au proprietati ce indica apelantul (caller) sau argumentele (arguments). Aceste concepte permit utilizarea functiilor cu numar variabil de argumente.
Exista trei categorii de obiecte speciale, proprii limbajului:
a. Obiecte fundamentale:
4 string: are numeroase metode de control, acces si conversie a sirurilor de caractere; se instantiaza direct, prin initializare .
4 math: este obiect static, adica toate instantierile sale partajeaza proprietatile cu valori unice (pi, logaritmii de baza, alte constante); metodele sunt functii matematice .
4 date: este un obiect complex, cu mai multe metode de instantiere, in functie de modul de lucru; este predispus la numeroase erori daca se lucreaza cu date calendaristice anterioare punctului zero al ceasului intern al calculatorului, astfel ca necesita unele compensari de valoare pentru evitarea neplacerilor; exista un set complet de metode pentru manipularea lor .
b. Obiectele browserului:
4 window: este obiectul din radacina ierarhiei, privind conceptele continute de o pagina Web; are metode de inchidere, deschidere, manipulare;
4 document: este o proprietate a obiectului anterior si are proprietati pentru toate elementele ce apar in pagina Web, inclusiv titlu si culori .
4 history: refera lista ultimelor URL-uri vizitate si ofera metode de navigare intre ele .
4 location: descrie URL-ul unui document iar proprietatile contin protocolul, calea, portul, etc.
4 screen permite obtinerea informatiilor referitoare la dimensiunea si rezolutia ecranului, schema de culori, limitat de informatiile din browser hisory
4 navigator utilizat pentru a obtine informatii despre tipul browserului
c. Obiecte HTML: sunt proprii paginii, asa cum a fost ea formatata de marcaje si aceste obiecte sunt masive ce refera tintele, legaturile, formele definite si fiind subordonate ierarhic obiectului document. Obiectele HTML sunt reprezentate de forme si oricare element inclus in forma.
Obiectele furnizate de JavaScript pot fi clasificate in 3 categorii: obiecte fundamentale, obiecte HTML si obiecte Browser. Obiectele fundamentale includ: obiecte sir, obiectul Date si obiectul Math. Obiectele Browser se afla in topul ierarhiei, reprezentand o scara larga de elemente proprii mediului curent al browserului si include obiecte ca Window (fereastra curenta), history (lista ultimelor pagini vizitate) si location (URL-ul paginii curente).
Obiectele sir au o singura proprietate length (lungimea) care da lungimea sirului si multe metode. Aceste metode se divid in 3 categorii: metode de manipulare a continutului unui sir, metode de manipulare a aparitiei unui sir si metode de conversie a sirului intr-un element HTML.
Metode de manipulare a continutului unui sir
4 charAt (idx) -intoarce pozitia caracterului
4 indexOf (chr) - cauta de la inceput de sir
4 last IndexOf (chr) - cauta de la sfarsit de sir
4 substring (from idx1, to idx2) - extrage subsir de la idx1 la idx2
4 to LowerCase( ) - conversie la litere mari
4 to UpperCase( ) - conversie la litere mici
Exemple:
var sir = ' test de utilizare'
indexOf('t') returneaza 1 iar lastIndex Of('t') returneaza 10, deoarece pozitia caracterului este o baza iar sir.charAt(4)='t'
sir.indexOf ('s') → 3
sir.lastIndexOf ('i') → 7
Metode de manipulare a aparitiei sirului sunt
bg ( ) - background-ul fundalului
blink() - background-ul legaturii
bold ( ) - ingrosat
fixed ( ) -fix
fontcolor (color) - ca si atributul <FONT COLOR=col>
fontsize (dim) - ca si atributul <FONT SIZE=dim>
italics ( ) - italic
small ( ) - mic
strike ( ) - taiat
sub ( ) - indice inferior
sup ( ) - indice superior
Metode de conversie:
anchor(numesir) - echivalent cu tagul <A></A>
link (hrefsir) - echivalent cu atributul <HREF=>
Exemplu:
var sir = 'sumarul capitolului 4';
var tinta = 'Capitol 4'
<A NAME = 'Capitol 4'> Sumarul capitolului 4 </A>
<HR> Doriti sa selectati <A HREF='#Capitol4'>
Sumarul capitolului 4 </A>
document write (sir.anchor (tinta));
document.write ('<HR>');
document.write ('Pentru '+ sir.link (location +'#'+tinta));
document.write ('<BR>');
Obiectul Math este utilizat pentru calcule matematice si reprezinta primul exemplu de obiect static (nemodificabil) caz in care nu se foloseste new cu obiectul Math si se refera direct deoarece este de sine statator si spre deosebire de sir care este instantiat. Math este sensibil la litere mari si mici iar proprietatile sunt definite cu majuscule. Proprietatile obiectului sunt : E, LN10, LN2, PI, SQRT 1-2, SQRT2.
Metodele acestui obiect sunt:
4 abs (min) - valoarea absoluta;
4 acos (num), asin (sum)..arccosinus, arcsinus;
4 sin () - sinus;
4 ceil (num) - intregul superior (mai mic ca numarul num) in virgula mobila;
4 exp (num) - functia exponentiala;
4 floor (num) - intregul superior (mai mare numarul num) in virgula mobila;
4 log (num) - functia logaritmica;
4 max (n1,n2) - maximum;
4 min (n1,n2) - minimum;
4 pow (n1,n2) - functia putere;
4 random ( ) - generator de numere aleatoare.
Exemple:
Math.atan (x/y);
return (Math, Pi);
Math.SQRT2;
Obiectul Date nu are proprietati, dar are metode. Crearea unei instante Date este realizata in 3 moduri:
new Date ( )
new Date (sirdata);
new Date (an, luna, zi);
Sirul data este de forma 'luna, zi, an)' optional HH:MM:SS
var ndata1 = new Date ('November 12, 2003');
var ndata2 = new Date (2003,10,12);
var ndata3 = new Date (2003,10,12,23,50,0) unde 23,50, 0 este ora.
Metodele obiectului Date pot fi sintetizate astfel:
4 getDate( ) - returneaza data curenta;
4 getDay( ) - returneaza ziua curenta;
4 getHours( ) - returneaza ora curenta;
4 getMinutes( ) - returneaza minutul curent;
4 getMonth( ) - returneaza luna curenta;
4 getSeconds( ) - returneaza secundele curente;
4 getTime( ) - returneaza ora curenta;
4 getTimeZoneOffSet( ) - returneaza ora curenta a zonei;
4 getYear( ) - returneaza anul curent;
4 setDate( ) - seteaza data;
4 setHours( ) - seteaza ora;
4 setMinutes( ) - seteaza minutele;
4 setSeconds ( ) seteaza secundele;
4 setTime ( ) - seteaza timpul;
4 setYear ( ) - seteaza anul.
Metoda getDate intoarce ziua intre 1-31, getDay intoarce ziua saptamanii 0-6, getMonth intoarce luna anului 0-11 si sunt prefixate de instanta Date.
Exemple:
azi = new Date ( )
anulc = azi.getYear( );
Alte metode ale obiectului Date:
4 to GMT String ( ) relativ la Grenwich Mean Time;
4 to LocaleString ( ) - conversie la ora locala;
4 to String( ) - conversie in sir;
4 parse (datestr) - conversie a datei in sir;
4 UTC (date st) - Universal Coordonated Time (GMT) numar de milisecunde de la Hristos.
Functii proprii de conversie:
4 escape (str) - converteste cod ESC in conventii HTML
4 eval (str) - evalueaza expresia str;
4 parseFloat(str) - converteste sirul la variabila in virgula flotant ;
4 parseInt (str, radix) - converteste sirul la variabila intreaga;
4 un Escape (str) - converteste din cod ESC in %XX - coduri HTML.
Exemple:
escape (' ') -> %20
unEscape ('%20') -> ' '
parse Float ('10 Negri Mititei')=10
parseInt (103,8)=67
Z=eval('(X*14)-(X%2)+3)'); // eval incearca sa evalueze expresia sir si sa-i returneze valoarea.
Obiecte Browser
Browserul este parintele tuturor celorlalte obiecte JavaScript si este responsabil de crearea tuturor ferestrelor browser. In plus acesta, ca si alte browsere, raspunde la evenimentele generate de windows. Cu toate acestea, Netscape Navigator sau orice alt browser nu este un obiect vizual ci poate fi accesat cu ajutorul constructorului vizual: windows sau ferestrele acestuia.
Obiectele browser sunt ierarhizate astfel: window - fereastra, document - reflecta structura HTML, location - ULR , navigator - care gestioneaza informatii despre tipul browserului, history - pagina anterioara vizitata, si screen - asociat dispozitivului de iesire (monitorul) .
Obiectul window se asociaza unei ferestre browser si are ca fii documente, location si history. Aceste sub-obiecte componente nu se refera explicit, ci prin metodele asociate:
document write( )
window document.write( )
Proprietati
closed
defaultStatus
frames
name
opener
parent
self
status
top
Metode
windowalert()
blur()
close()
confirm()
focus()
moveBy()
moveTo()
open()
print()
prompt()
resizeBy()
resizeTo()
scrollBy()
scrollTo()
setInterval()
clearInterval()
setTimeout()
clearTimeout()
Manipulatori de eveniment
onLoad
onUnload
onFocus
onBlur
onError
onResize
Metodele document pot fi utilizate si in cadrul obiectului window:
alert(sir) - afiseaza o caseta de dialog;
confirm(mesaj) - afiseaza o caseta de dialog cu doua butoane OK, CANCEL;
prompt(mesaj) - afiseaza un propter.
Proprietatile ferestrei intorc valori booleene sau siruri de caractere. Vom trece in revista propretatile cele mai frecvent utilizate in realizarea scripturilor.
closed este utilizata pentru a verifica daca fereastra anterior deschisa s-a inchis deja.
Exemplu:
In sectiunea <head> [3]a documentului HTML vom pozitiona scriptul:
<script type='text/javascript'>
<!--
var newWin;
function popNewWin()
function checkWin()
else
}
//-->
</script>
In sectiunea <body> vom intercala codul:
<form>
<input type='button' name='win' value='deschisa' onClick='popNewWin()'><br>
<input type='button' name='win' value='inchisa' onClick='checkWin()'>
</form>
Explicatia codului:
Variabla newWin se defineste null (fara a o initializa), valoarea fiind data in functia popNewWin. Daca fereastra nu este inchisa scriptul va produce eroare deoarece variabla nu a fost declarata deja. Functia popNewWin initializeaza variabila newWin cu metoda window.open() specifica obiectului window, in care este gestionata starea ferestrei si dimensiunea acesteia.
Bara de stare este localizata in partea de jos a browserului si este controlata de proprietatea defaultStatus care permite in plus si setarea unui mesaj specific asociat ferestrei deschise.
close( ) - inchide fereastra;
open(sir URL, nume fereastra) deschide o noua fereastra;
Daca alert afiseaza dialog box cu mesajul sir si butonul OK, confirm are 2 butoane OK si CANCEL si returneaza true sau false in functie de selectia utilizatorului. Prompt (mesaj) a folosit o caseta dialog cu un camp editabil in care utilizatorul introduce sirul mesaj, open permite deschiderea unei noi ferestre, unde sirURL este ULR-ul incarcat in acea fereastra iar metoda close inchide fereastra.
Majoritatea componentelor pot fi manipulate in maniera yes/no la momentul crearii ferestrei. Acestea includ: meniuri, bare cu butoane, locatia si starea afisata, lista istoric si scroollbars. La momentul crearii ferestrei se poate determina daca fereastra poate fi redimensionata sau i se pot regasi dimensiunile. Dar apare o restrictie pentru ca rescriind documentul se pot modifica elemente componente ale ferestrei si aceasta tehnica permite modificarea valorilor elementelor din formular, a barei de stare, a pozitiei pointerilor in lista istoric si a locatiei (URL-ul afisat in fereastra) in orice moment.
Obiectul document
Orice fereastra este asociata obiectului document. Acest obiect contine proprietati pentru fiecare ancora, legatura sau forma a paginii la fel ca si subelemente ale acestor obiecte componente. De asemenea, contin proprietati pentru title, primplan (fgColor) si fundal (bgColor), variante legaturi de culoare si atribute de pagina.
Metodele asociate:
4 clear( ) - sterge documentul;
4 close( ) - inchide documentul;
4 open( ) - deschide documentul;
4 write(str) introduce un sir in document;
4 writeln(str) introducere <CR>
Exemplu:
<HTML>
<HEAD>
<TITLE> Manipularea barei de stare<TITLE>
<SCRPT>
var aStatWin=null;
function openStatus(defmsg,msg)
}
function setStatus()
}
function setFocus()
function close()
function fixup()
</SCRIPT>
</HEAD>
<BODY onLoad='fixup()'>
<FORM NAME='statForm'>
..
<INPUT TYPE=button VALUE='starea ferestrei' onClick='openStatus('starea OK', document.statForm.statMsg.value)'>
</FORM>
</BODY>
</HTML>
In exemplul anterior se poate observa cum se deschide o fereastra redimensionabila in care se afiseaza starea.
Manipularea obiectelor
Definim functia getObject(obj), cu layout:
function getObject(obj) else
}
if(document.getElementById) else
}
return null;
}
O varianta mult mai simpla este:
function getObject(obj)
else }
if(document.getElementById)
else }return null;}
In acest caz se folosesc proprietatile documentului si metoda getElementById(obj) .
Obiectul navigator
Acest obiect este utilizat pentru a obtine informatii despre tipul de browser ce va fi utilizat la accesarea pagini, informatii extreme de utile cand utilizatorul este nevoit sǎ (re) directeze in diferite pagini sau sǎ execute taskuri specifice, dependente de un browser specific.
Propietǎti
appCodeName
appName
appVersion
cookieEnabled
platform
userAgent
appCodeName - intoarce numele intern al browserului, dar nu este atat importantǎ precizarea browserelor Mozilla in Firefox, Netscape, IE, sau Opera.
appName - intoarce numele 'oficial' al browserului (spre exemplu IE intoarce Microsoft Internet Explorer si Firefox si Netscape intorc ambele Netscape. Since Opera users can change their browser's identity, it may appear as Netscape, Opera, or Microsoft Internet Explorer.
appVersion
This property returns the version number of the browser. However, it's not necessarily the actual version number, but an internal number. For instance, IE versions 4-6 are all shown as version 0 and Netscape 6 returns a version number of 5.0. In my version of Firefox, running browser version 1.07, it returns 5.0. That's because it's using the same Mozilla engine as Netscape. In addition, it may also return the operating system and the default language of the browser. There are better ways of determining the version number. One way is to use object detection. We'll look at this and other methods later in this series.
cookieEnabled
This property is used to check if the browser will accept cookies. It could be used as follows:
if (navigator.cookieEnabled) platform
This property returns the operating platform on the user's computer. It might look something like 'Win32' or 'MacPPC.' It doesn't give the version of the operating system.
userAgent
Aceasta proprietate intoarce un sir ce contine browser, numar de versiune, sistem de operare, exceptand IE, default language pentru browser.
Exemplu:
Mozilla/5.0 (Windows; U; Win98; en-US; rv:1.7.12) Gecko/20050915 Firefox/1.0.7
Proprietatile obiectului navigator se pot obtine cu script-ul:
var browser='Browser Informationn';
for (var propname in navigator)
alert(browser);
Obiectul screen
Acest obiect furnizeaza informatii despre video display si setarea culorilor utilizatorului. Aceste informatii ajuta la formarea optima a datelor afisate ecranul pe ecranul utilizatorului.
Proprietati
availHeight
availWidth
colorDepth
height
pixelDepth
width
Aceste 2 proprietati (availHeight, availWidth) intorc zona actuala vizibila in fereastra browserului (the viewable portion of the screen within the browser), spre deosebire de height si width care dau dimensiunea actuala a intregului ecran (pixeli). Redimensionarea ferestrei la valoare maxima poate fi realizata cu scriptul:
window.moveTo (0,0);
window.resizeTo (screen.availWidth, screen.availHeight); //
La inceput browserul se muta stanga sus (0,0) apoi browserul redimensioneaza de la prezenta pozitie sau poate fi mutat cu metoda moveTo si redimensionat din noua pozitie
window.moveTo (30,15);
window.resizeTo (screen.availWidth, screen.availHeight);
Exemplu:
if (screen.width < 639)
else if (screen.width == 640)
else if (screen.width == 800)
else (screen.width >= 1024)
Obiectul history este utilizat pentru a referi liste istoric ale URL-urilor vizitate anterior si are o proprietate length care indica numarul de URL-uri inmagazinate sau lista istoric.
Metodele proprii sunt:
4 back - deplasare la URL-ul anterior;
4 foreward ( ) - deplasare la pagina urmatoare;
4 go (where)
Metoda go este utilizata pentru navigarea in lista istoric, argumentul where este numeric sau sir. Un numar pozitiv deplaseaza inainte si cel negativ deplaseaza inapoi; where poate fi un sir = URL.
Exemplu:
<form>
<input type='Button' name='back' value='Go Back'
onClick='history.back()'> // inapoi
<input type='Button' name='forward' value='Go Forward'
onClick='history.forward()'> // inainte
</form>
history.go(1) // inainte
history.go(-2) // inapoi 2 pagini
Obiectul location descrie URL-ul documentului si are proprietati reprezentand variante componente ale URL: partea de protocol, partea hostname, path, numar port. Metoda toString se utilizeaza pentru conversia la sir. Location tine informatii despre URL-ul unde acceseaza browserul si contine parametri ai HTML-ului examinat via butonul Submit sau prin procedura submit.
Proprietati si metode:
hash
host
hostname
href
pathname
port
protocol
searchreload()
replace()
In Netscape obiectul location consta din urmatoarele parti:
protocol://hostname:[port] pathname search hash
unde:
protocol - este protocolul utilizat pentru fisier (http, ftp, gopher, telnet, file, mailto);
hostname si port - sunt valide numai daca documentul este pe un server la distanta si contine nume_domeniu sau adresa IP a serverului respectiv portul serverului;
pathname -da calea fisierului pe care il afiseaza browserul;
search - include POST parametri;
hash - reprezinta o legatura cu o ancora locala.
Obiectul location are proprietatea host constand din combinatii hostname si port, precum si href ce contine intregul URL.
Exemplu:
<HTML>
<HEAD>
<TITLE> Obiectul location </TITLE>
<SCRIPT >
document.write (location.href)
document.write (location.protocol)
document.write (location.hostname)
document.write (location.host)
document.write (location.port)
document.write (location.pathname)
document.write (location.search)
document.write (location.hash)
</SCRIPT >
</HEAD>
.
</HTML>
Metoda reload reincara pagina curenta in browser, mai complexa si mai putin dependenta de functia similara (reload button) din browser. Utlizad metoda reload() se incarca din cache, tinand form-ul intact. Utilizand reload(true) pagina se reincarca de pe server, stergand continutul campurilor din form si incarcand o copie noua a paginii.
Examplu:
location.reload();
sau
location.reload(true);
Metoda replace() inlocuieste pagina curenta din browser history astfel incat utilizatorul nu poate naviga back la ea. Este utila la pagini ce se acceseaza cu password sau registration, care nu mai tin urma URL in lista history a browserului.
Examplu:
<form>
<input type='Button' name='change' value='Change page'
onClick='location.replace('newFile.html')'>
</form>
E recomanda plasarea acestor evenimente in functii apelate din pagina:
function changePage()
Then place this in the body section:
<form>
<input type='button' value='Change page''
onClick='changePage()'>
</form>
Prin tag-urile de legatura ale documentelor HTML, referinta este specificata ca locatie URL fie cu protocol WWW fie cu mailto sau ftp, Gopher etc.
Exemplu:
<A HREF='https://www.site.com'>Pagina test </A>
JavaScript defineste tipul URL JavaScript folosind history:
<A HREF ='javascript:history.go(-1)'>inapoi </A>
La click pe legatura browserul deplaseaza la pagina anterioara din lista istoric. Protocolul evalueaza expresia ca o locatie, iar sirul de caractere poate reprezenta o locatie.
Exemplu:
var locatie='https://www.netscape.com'
<A HREF='javascript.location'>
Protocolul about: utilizat ca locatie de legatura furnizeaza informatii despre Navigator. Fara argumente da rezultat identic ca si selectarea About Netscape din meniul Help. Argumentul plug-ins permite afisarea paginii la fel ca si Plug-Ins din fereastra Help. Argumentul plug-ins permite afisarea paginii la fel ca si Plug-Ins din fereastra Help iar argumentul cache permite afisarea statisticilor de disponibilitate pe disc.
Exemplu:
<HTML><HEAD><TITLE> Despre about </TITLE>
</HEAD)><BODY>
<P> Protocolul about
<UL><LI>
<A HREF='about:'> despre: </A><LI>
<A HREF='about.cache'>about: cache </A><LI>
<A HREF='about.plug-ins'>about:plug-ins </A><LI>
<UL>
</BODY></HTML>
Proprietatile obiectului link sunt accesibile prin:
document.links[index].property_name
Numarul de index asociat fiecarui obiect link este incarcat de browser pornind de la o (prima legatura), 1 - a doua, etc.
Folosind atributul NAME in legatura se acceseaza proprietatile prin:
document.nume.proprietate
Exemplu:
</A NAME='leg1' HREF="https://www.macromedia.com">Alteinf </A>
document.leg1.pathname sau document.leg1.protocol
De cate ori de foloseste atributul NAME in cadrul JavaScript se adauga o noua ancora.Obiectul link recunoaste si evenimentele onClick si onMouseOver.
Exemplu:
<A NAME='numep' HREF='https://www.alfa.cdec.ro'
onMouseOver='Window.status='Vizitati site-ul firmei' ; return true '> Alfa </A>
Prin aceasta, in bara de stare se afla mesajul: 'Vizitati site-ul firmei' de oricate ori mouse-ul se afla pe hyperlink. Daca se utilizeaza bara de stare, trebuie inclus return true. Aceasta nu tine seama de faptul ca multe browsere afiseaza URL-ul in bara de stare la acest eveniment.
Daca se foloseste o legatura de tip: https://www/cris.com/~raydaly/sponsors.html
in bara de stare se afiseaza mesajul 'hiperlink cu sponsorul'.
Evenimentul onClick se foloseste in acelasi format ca si onMouseOver.
<A NAME='mesaj' HREF='http//www.altsite.com'
onClick='alert ('Multumim de vizita')'>Vizitati site-ul </A>
Observatii:
4 Cand se ataseaza HREF ca atribut in LINK este afisat in bara de stare.
4 Utilizand onClick se poate seta HREF pentru un alt URL. Citind bara de stare utilizatorul se asigura ca se deplaseaza spre primul URL, dar codul JavaScript il trimite catre URL-ul specificat in onClick. Pentru a evita confuzia se recomanda adaugarea evenimentului onMouseOver.
Exemplu:
<A NAME='cautare' HREF='https://www.yahoo.com'
onClick='this.href='https://www.infoseek.com''
onMouseOver='Window.status='Vom face o noua cautare'; return true'>
Cautare pe Internet dupa topic </A>
Modificarea legaturii nu si a textului afisat poate fi realizata prin functii JavaScript ca si in exemplul urmator:
<HTML>
<HEAD><SCRIPT LANGUAGE='JavaScript'>
function Text1( )else
return nouURL
}
</SCRIPT><HEAD>
<BODY>
<A NAME='legatura Yahoo' HREF=' '
onClick='this.href=Text1()'
onMouseOver='window.status='Hyperlink Yahoo' ; return true '>
Yahoo </A>
</BODY>
</HTML>
URL-ul nu este intotdeauna Web ci poate fi chiar o adresa e-mail:
Exemplu:
<HTML><HEAD></HEAD>
<BODY>
<FORM>
<B> Ce furnizor cautati? <B> <BR>
<INPUT TYPE='radio' NAME='tip'
onClick='furnizor=''mailto:codec@codec.com''> Firma Codec <BR>
<INPUT TYPE= ' radio' NAME = ' tip'
onClick='furnizor = ' mailto: transart @ transart.ro' ' >Firma TransArt <Br>
</FORM>
<A NAME='comanda' HREF= 'mailto: info @ site.com'
onClick='this.href=furnizor'> Email la furnizor </A>
</BODY></HTML>
<HTML>
<HEAD>
<TITLE> Reincarcarea paginii </TITLE>
<SCRIPT >
function reload()
function clear()
if (self.location.search !=null && self.location.search!=' ')
</SCRIPT >
<HEAD>
<BODY>
<FORM NAME='Forma1'>
Numele: <INPUT TYPE='text' NAME='Nume' SIZE='20'>
<INPUT TYPE='button' NAME=reloadBT VALUE='Reincarcarea paginii'
onClick='reload()'>
<INPUT TYPE='submit' NAME=submitBT VALUE='Examinez'
onClick='this.form.submit()'>
<INPUT TYPE='button' NAME=clearBT VALUE='Sterg' onClick='clear()'>
<INPUT TYPE='hidden' NAME=hideBT >
</FORM>
</BODY>
</HTML>
JavaScript organizeaza aceste obiecte in structura ierarhica prin title ca proprietate a documentului (obiect) respectiv anchor, forms, links - proprietati de document. Toate proprietatile obiectului link sunt subsiruri extrase ale proprietatii HREF si reprezinta: hash, host, hostname, href, pathname, port, protocol, search, target.
Exemple:
document.anchor [0]
document.links [0]
document.forms [0]
Proprietatea anchor sub forma 'text'.anchor('ancotext') este echivalenta cu tag-ul HTML <A NAME = 'ancotext'>text </A> iar proprietatea link 'text'.link('textleg') este echivalenta cu <A HREF = 'textleg'> text </A>
Exemple:
Ancora in JavaScript
<A NAME = 'sectiunea 2'>Startul</A>
Avar = 'Startul'
Avar.anchor ('sectiunea2') sau 'Startul'.anchor ('sectiunea2')
Legatura in JavaScript
var textleg = 'Ford'
var URL ='https://www.Ford.com'
document.open ( )
document.write ('Aceasta este o legatura'+ textleg.link (URL))
document.close( )
Echivalent cu:
Aceasta este o legatura la <A AREF = 'https://www. Ford.com'>Ford </A>
Asupra sirurilor incluse in ancore si legaturi se pot aplica diferite metode de formatare corespunzatoare cu cele cunoscute din tagurile HTML. Alte metode de formatare si afisare folosesc structura 'text'.metoda (argument).
Exemple:
document.write ('text'.blink( ).toUpperCase ( ).bold ( ) ) echivalent cu
TEXT (blink, bold)
JavaScript plaseaza formele intr-un tablou forms. Fiecare forma este accesata prin indexul acestui tablou (o baza). Obiectul form (ca subobiect al documentului), are la randul lui subobiecte.Accesarea informatiilor despre aceasta forma se realizeaza cu ajutorul conventiilor corespondente cu optinile HTML: action - din ACTION, element - din INPUT, endcoding - din ENCTYPE, method - din METHOD, target - din TARGET.
Exemplu:
<HTML>
<HEAD>
<TITLE> Proprietatile obiectului form </TITLE>
<HEAD>
<BODY>
<A NAME = 'inceput'> Inceputul paginii </A>
<HR>
<SCRIPT LANGUAGE= 'JAVASCRIPT'>
<FORM NAME='Forma1'
METHOD= POST ACTION= 'mailto:lrusu@econ.ubbcluj.ro'>
<P>Numele: <INPUT TYPE='text' NAME='Num' SIZE='20'>
</P>
<INPUT TYPE='reset' NAME=reset VALUE='Renunt'>
<INPUT TYPE='submit' NAME=submit VALUE='OK'>
</FORM>
<!--
document.forms[0].method='GET'
document.write(document.Forma1.method)
-->
</SCRIPT>
</BODY>
</HTML>
In exemplul de mai sus s-a modificat metoda din POST in GET si rezultatul afisat va fi GET.
Metodele si proprietati ale formelor se pot obtine folosind conventiile DOM[4]:
forma.Numepropr.
forma.Nume metoda (parametrii)
forma[index].numepropr
forma[index].Numemetoda (parametrii)
Forma1.Num.value - valoarea obiectul text Num din forma Forma1
forms[0]. elements [0]. name (numele - Num al campului - din atributul NAME).
<INPUT TYPE='text NAME' nume VALUE='valoare' SIZE=intreg
[onBlur='text actiune1'] [onChange='text actiune2'] [onFocus='text actiune3']
[onSelect='text actiune4']>
Proprietati:
4 defaultValue - valoarea initiala
4 name - nume (argument)
4 value - valoare (argument)
Metodele associate sunt: focus, blur, select iar manipulatorii de evenimente sunt: onBlur, onChange, onFocus, onSelect.
<FORM>
<INPUT TYPE='text' NAME='datazilei' VALUE=' '
SIZE='5' onBlur='getDate( )' onChange='setDate( )'
onForms='alert('Introduceti data')'
onSelect='alert('Doriti modificarea datei?')'>
</FORM>
Obiectul textarea este utilizat pentru introducerea mai multor linii text si poseda aceleasi proprietati si metode ca si obiectul text:
<TEXT AREA NAME='zonatext' ROWS=intreg
COLS=intreg WRAP=on/off /physical/virtuale [onBlur='text actiune1']
[onFocus='text actiune2'] [onChange='text actiune3']
[onSelect='text actiune4'] text de afisat
</TEXTAREA>
Obiectul Hidden
Pentru crearea formelor interactive se folosesc adesea obiecte ascunse pentru a transfera informatia spre server, atunci cand forma este examinata. Acestea sunt de obicei informatii despre utilizator (ultimul acces la pagina, preferinte generate de setari in forma anterioara etc.). Aceste campuri sunt, de obicei, utilizate in locul 'cookies' ale Netscape-ului pentru a realiza compatibilitatea cu browserele care nu suporta specificatia cookie. Campurile ascunse contin informatia text care nu sunt afisate pe ecran odata cu restul formei si se declara:
<INPUT TYPE='hidden' NAME='nume' [VALUE='textval']>
<FORM>
<INPUT TYPE='hidden' NAME='unul' VALUE='aici'>
</FORM>
document.write(unul.value);
Campurile ascunse se folosesc pentru a plasa un 'rest ascuns' in site-ul Web care poate fi regasit de ori cate ori se examineaza forma. Servarul poate citi acest text intr-un script CGI si sa dea raspuns utilizatorului. O alta modalitate de utilizare este cea in jocuri Web sau teste Web la care punctajul este pastrat intr-o locatie si este transmis de fiecare data cand utilizatorul se deplaseaza intr-o alta locatie.
Obiectul Password (parola) este folosit in special la accesarea conditionata a unui site si se declara:
<INPUT TYPE='password' NAME='nume' SIZE=intreg [VALUE='val.text']>
Exemplu:
<script language='JavaScript'>
function verpar (parola)
function notpass
<FORM onSubmit='verpar(this)'>
<INPUT TYPE='password' name='parola'>
</FORM>
Obiectul button este declarat cu tag-ul INPUT:
<INPUT TYPE='button' NAME='nume' VALUE='valoare'
[onClick='text_actiune']>
Exemplu:
function valid()
</SCRIPT>
<INPUT TYPE='button' name='avertiz' value='Apas'
onClick='valid( )'>
El poate fi apelat ca: avertiz.name sau avertiz.value.
Obiectul Checkbox ia valori on/off si selectia lui este marcata cu x sau alt tip de marcator selectat, fiind declarat cu sintaxa:
<INPUT TYPE='checkbox' NAME='nume' VALUE='valoare' [CHECKED]
[onClick='text_actiune']>text de afisat
Proprietatile acestuia sunt: checked (true/false) - utilizata la verificarea checkbox, defaultchecked - atunci cand checkbox este verificat la incarcarea paginii, name- nume, value - valoare. Metodele proprietatii sunt accesate analog cu button.
Exemplu:
<HTML><HEAD>
<SCRIPT LANGUAGE='JavaScript'>
function starea()
</SCRIPT> </HEAD><BODY>
<FORM NAME="forma1" >
<INPUT TYPE='checkbox' NAME='ver' VALUE='Part time'
onClick='starea()'>
</FORM>
</BODY></HTML>
Obiectul Radio permite selectia unei optiuni din multitudinea oferita.
<INPUT TYPE = 'radio' NAME='nume' [CHECKED]
[onClick='text_actiune']>Textul afisat
Accesarea informatiilor butonului RADIO este putin diferita fata de checkbox datorita posibilitatilor de selectie.
Utilizarea selectiilor este realizata pornind de la sintaxa:
<SELECT NAME='nume selectie' [SIZE='intreg'][MULTIPLE]
[onBlur='textactiune1']
[onChange='textactiune2'] [onFocus='textactiune3']
<OPTION VALUE='valori optiuni'[SELECTED]
text afisat
.<OPTION> [Text Afisat]
</SELECT>
Tag-ul SELECT are un atribut NAME obligatoriu care impreuna cu valorile asociate in optiunile OPTION sunt trimise serverului cand forma este examinata. Atributul NAME poate fi folosit ca ancora iar atributul MULTIPLE permite selectia unora sau mai multor elemente. Acest tip de lista se numeste scrolling list. Listele de sectie au asociati handleri de tip onChange, onBlur si onFocus.
Obiectul Submit in HTML este butonul formal utilizat pentru a trimite forma spre server. In JavaScript acest buton poate fi utilizat pentru a trimite informatiile colectate intr-o forma catre o alta fereastra sau in aceeasi fereastra, ceea ce determina modificarea continutului acesteia. La click pe butonul submit se incarca intotdeauna noua pagina chiar daca este deja submisa.
<INPUT TYPE='Submit' NAME='nume' VALUE='text' [onClick='text actiune']>
Obiectul Reset permite utilizatorului readucerea campurilor de intrare la valorilor initiale:
<INPUT TYPE='reset' NAME='nume' VALUE='text' [OnClick='text actiune']>
Accesul la metode si proprietati se face similar cu celelalte butoane.
Un alt aspect important este legatura dinamica sau statica. Multe limbaje compilatoare ca si C, C++ sau Java insista deseori asupra legaturii statice, ceea ce implica faptul ca ele solicita sa gaseasca toate numele la momentul compilarii programului, cu ajutorul bibliotecilor alocate dinamic. JavaScript utilizeaza forme libere si legaturi dinamice[5]. Aceasta inseamna ca decide asupra numelui la momentul utilizarii acestuia, dat fiind faptul ca interpretorul face legatura abia la momentul executiei codului.
Un avantaj major al legaturii dinamice o constituie faptul ca ofera posibilitatea adaugarii facile de noi functii. Avand nevoie un event handler (intermediar de evenimente) pentru fiecare eveniment posibil, se incepe cu unul sau doi manipulatori carora gradat li se adauga functii complexe. Dezavantajul este dat de faptul ca JavaScript citeste coduri cuprinde intre <SCRIPT> si </SCRIPT> prelucrand si verificand in timpul executiei, ceea ce conduce la detectarea tardiva a erorilor si la analiza exhaustiva a codului.
Exemplu:
<HTML><HEAD>
<SCRIPT LANGUAGE='JavaScript'>
function nuapasa()
</SCRIPT> </HEAD><BODY>
<FORM METHOD='POST' ACTION='mailto:lrusu@econ.ubbcluj.ro'>
<INPUT TYPE='button' NAME='verific' VALUE='Nu'
onClick='nuapasa()'>
</FORM>
</BODY></HTML>
Handlerul de evenimente creaza un buton pereche cu functia JavaScript din blocul SCRIPT iar daca schimbam declaratia intermediara cu: onClick='apasa()' se observa la executie cum functioneaza legatura dinamica. JavaScript nu stie la executie ca functia apasa() nu corespunde nici unei definitii si incearca sa o gaseasca, ceea ce a determina o eroare. Tehnic vorbind functia apasa() este desfacuta (unbound).
Fata de aceste inconveniente tratate, apar cateva avantaje semnificative:
4 Obiectele pot fi definite si refacute 'din zbor', in mod dinamic;
4 Legatura dinamica permite referirea lucrurilor care nu exista, dar care apar in momentul cand sunt activate de handler;
4 Ofera posibilitatea modificarii tipului de variabila, care insa poate deveni o capcana periculoasa in programare;
4 Codul se analizeaza la regasirea in blocul SCRIPT si se executa conditionat de eveniment;
4 Numele sunt rezolvate atunci cand sunt executate nu atunci cand sunt analizate.
Agentul asociat evenimentului mouseOver nu este asociat tag-ului <BODY> ci actioneaza cand utilizatorul plaseaza mouse-ul peste o referinta (HREF), cu mentiunea ca JavaScript are evenimente asociate referintelor si nu ancorelor.
Exemplu:
<HTML><HEAD>
<SCRIPT LANGUAGE='JavaScript'>
<!--
function afisez(leg)
</SCRIPT> </HEAD>
<BODY>
<HR> Verificam legatura cu
<A HREF='https://www.econ.ubbcluj.ro' onMouseOver='afisez(this)'> ECON </A>
<A HREF='https://www.ubbcluj.ro' onMouseOver='afisez(this)'> UBB </A>
</BODY></HTML>
In exemplul de mai sus s-a creat o pagina legata cu ECON respectiv UBB cu alte doua pagini. Cuvantul rezervat this este utilizat pentru a referi obiectul curent. La apelul functiei de afisare parametrul leg este completat cu obiectul care reprezinta legatura. Evenimentul click se utilizeaza fie pentru avertizarea utilizatorului, fie pentru abandonarea legaturii.
Incluzand in tag-ul <FORM>, atributele METHOD si ACTION se permite utilizarea agentului onSubmit pentru examinarea formei, declansand o actiune la nivel general (al intregului continut) desi este posibila specificarea acestei actiuni doar la nivelul butonului Submit din forma. Utilizarea naturala a agentului onSubmit este validarea de continut.
Exemplu:
<HTML><HEAD><TITLE> Exemplu de validare</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
<!--
function verifica() else
}
</SCRIPT> </HEAD>
<BODY>
<HR> Verificam legatura cu
<BODY>
<FORM NAME="formam' METHOD=POST onSubmit="verifica()'>
<P> Optam pentru primele 9 teste
<INPUT TYPE='text' NAME='textm' VALUE='1' SIZE='10'></P>
<BR> <INPUT TYPE='submit'>
</FORM>
</BODY></HTML>
Explicatiile codului: var strval=document.formam.textm.value; presupune obiectul document, forma denumita formam, campul text textm si valoarea acestuia value. Primul tag INPUT defineste un camp de editare text iar al doilea un buton submit controlat de functia verifica(). Aceasta functie converteste valoarea in intreg (prin parseInt) si testeaza validitatea datelor introduse.
Butoanele genereaza evenimente click iar textul si selectia elementelor de lista genereaza evenimente focus, blur, select si change. Prima exceptie se aplica listelor de selectie care de vreme ce nu au campuri editabile, nu genereaza evenimente select. Daca tag-ul poate avea atribute de declarare focus, blur, change, OPTION nu genereaza evenimente proprii. A doua este data de campurile ascunse (hidden) care nefiind vazute, nu genereaza nici un eveniment.
Un grup de butoane poate fi testat printr-un index unic asociat acestora.
Exemplu:
<HTML><HEAD><TITLE> Doua selectii</TITLE>
<SCRIPT LANGUAGE='JavaScript'>
<!--
function verplata()
}
}
</SCRIPT> </HEAD>
<BODY>
<FORM NAME='formam' METHOD=POST>
<STRONG> Optiuni de plata </STRONG><BR>
<INPUT TYPE='radio' NAME='plata' VALUE='1' CHECKED onClick='verplata()'> Cec
<INPUT TYPE='radio' NAME='plata' VALUE='2' CHECKED onClick='verplata()'> Ordin de plata
<HR> <INPUT TYPE='checkbox' NAME='asigura' VALUE='asig'>Asigura?
</FORM>
<HR>
</BODY></HTML>
In exemplul de mai sus am definit doua butoane radio plata si un checkbox asigura validate prin functia verplata. Pentru campurile text apare evenimentul focus, la click mouse sau deplasarea tab in interiorul campului editat, blur, cand focus pierde campul, change la introducerea sau stergerea unui caracter din text sau la o noua selectie (pentru listele de selectie) respectiv select pentru selectarea unui camp (click-and-drag, double-click), eveniment care este insotit si de efectul vizual asupra campului selectat. Pentru TEXTAREA daca utilizatorul nu tipareste nimic sau nu actioneaza click evenimentul blur nu apare.
Exemplu:
<script language='JAVASCRIPT'>
<!--
function contnumar(valo)
}
}
if (x==1)
return true;
else
return false;
}
function validare()
else
if (contnumar(forma1.nume))
else
if (forma1.um.value=='')
if (contnumar(forma1.um))
else
if ((forma1.cant.value=='') || (test(forma1.cant)))
else
if ((forma1.pret.value=='')||(test(forma1.pret)))
else
return true;
}
function test(valo)
}
i++;
}while (x==1 && i<l)
if (x==1)
return false;
else
return true;
}
-->
</script>
<form action='modifica.asp' method='POST' name='forma1'
onsubmit='return validare()'>
<input type='hidden' name='id' value='<%=rs('Id')%>'>
<input type='text' size='20' name='nume'>
<input type='text' size='20' name='um'>
<input type='text' size='20' name='cant'>
<input type='text' size='20' name='pret'>
</form>
</body>
</html>
Explicatia codului In exemplul de mai sus se declara un formular de introducere a datelor despre produse ( nume, unitate de masura, cantitate, pret). Acestea sunt validate prin functia validare() care apeleaza la randul ei function contnumar(valo) ce testeaza daca s-a introdus corect cantitatea si function test(valo) care testeaza daca in campurile nume si um nu s-au strecurat valori numerice. Ambele functii au parametru transmis la apel - obiectul testat si intorc valori booleene.
Ancorele se utilizeaza pentru deplasarea rapida in cadrul documentului, sub controlul evenimentelor focus si select. Frecvent apar in chestionar la care raspunsul la o intrebare conditioneaza alte intrebari sau la etichete ce permit salt in cadrul documentului.
Exemplu:
<HTML><HEAD><TITLE>Exemplu ancora </TITLE>
<SCRIPT LANGUAGE=JavaScript'>
<!--.
function salt2 (form)
if (form.q1.value<0)
}
</SCRIPT></HEAD>
<BODY><FORM>
<INPUT NAME='q1' TYPE='Text' onBlur='salt2 (this.form)'> <BR>
<A NAME='a2'>
<B>2.
<INPUT NAME='a2' TYPE='Text'> <BR>
<INPUT NAME='q2' TYPE='Text' onBlur='salt2 (this.form)'> <BR>
.. Intrebari
.
<A NAME='a12'><INPUT NAME='q12' TYPE='Text'>
</FORM>
</BODY>
</HTML>
JavaScript este un limbaj orientat-obiect, motiv pentru care are predefinite un set de obiecte. Obiectele sunt legate prin intermediul unor relatii intr-o varietate de componente ale unei pagini Web. Pentru vizualizarea si manipularea acestor structuri, se utilizeaza proprietatile, ce pot fi reutilizate ca obiecte JavaScript pentru inmaazinarea datelor si functiilor. Uzual se folosesc functii pentru a manipula in od specific datele ca metode ale obiectului JavaScript va lega resurse si obiecte atat la client cat si la server. Obiectul Date spre exemplu inmagazineaza data si timpul. Relatiile intre obiecte si instantele unui obiect sunt similare cu relatiile intre tipuri de date si variabilele acestor tipuri de date.
Definirea unui obiect poate fi realizata in mai multe moduri:
Produs Obiectfunction Produs(den, um, pret, cant)
Instantierea unui obiect se realizeaza cu new:
var calculator= new produs('Pentium', 'buc', 31000000, 3);
Instanta calculator se trateaza ca orice variabila si se defineste utilizand var. Proprietatile obiectelor si tipul acestora similare cu variabilele, iar JavaScript utilizeaza indexarea o baza calculata, tratand obiectele ca tablouri astfel:
calculator [0] = 'pentium';
calculator [1] = 'buc';
calculator [2] = 31000000;
calculator [3] = 3;
Pentru obiectul anteritor definit scriem functia de afisare a proprietatilor acestuia:
function showprodus(unprodus) .
for (var iter=0; iter < 4; iter ++)
document.write ('<BR>');
}
Nu se poate apela showprodus(produs) iar eroarea de referire a unei proprietati inexistente este: out of bounds error. Spre exemplu unprodus[4] se evita incluzand dimensionarea proprietatilor in cadrul obiectului prin proprietatea length; aceasta va deveni prima proprietate a obiectului nou creat.
Exemplu:
function produs (den, um, pret, cant)
function showprodus (unprodus)
document.write ('<BR>');
}
Toate proprietatile semnificative se deplaseaza cu 1 astfel incat
Calculator = new produs ('Pentium', 'buc', 31000000, 3) va da reprezentarea:
calculator[0] = 5;
calculator [1] = 'pentium';
calculator [2] = 'buc';
calculator [3] = 31000000;
calculator [4] = 3;
Lungimea obiectului este pusa intr-un singur loc in codul acestuia. Proprietatile obiectului pot fi referite nu numai ca tablou indexat ci si prin numele elementelor de tablou.
calculator ["denumire"] = 'pentium';
calculator ["unitate"] = 'buc';
calculator ['preta'] = 31000000;
Observatie:Tablourile JavaScript sunt accesate prin index intreg sau proprietatea nume. Acesta este case-sensitive iar indexul este limitat la dimensiunea tabloului.
Extensia dinamica realizeaza o completare locala cu instante particulare. Asezarea obiectului si alte instante trecute, prezente si viitoare nu sunt afectate. JavaScript da posibilitatea extinderii dinamice a instantelor prin atasarea unor proprietati noi.
altprodus = new produs ('imprimanta', 'buc', 6000000, 1);
altprodus.canti = 3;
altprodus.cantc = 5;
altprodus are doua proprietati canti si cantc iar calculator are 4 proprietati. Daca nu se modifica dimensiunea obiectului cele 2 proprietati nu sunt afisate asa ca se impune modificarea data de proprietatea length:
alt produs. length +=2;
Cand proprietatile obiectului sunt elemente de tablou si acestea sunt referite utilizand indexari numerice este usor sa se foloseasca functii de creare a tablourilor cu dimensiune variabila si continut. Numarul sirului este primul argument si valoare initiala este al doilea argument.
function tablousir (cat, vali)
}
Apelul este realizat: obiectul meu = new tablousir (10, 'nume'); iar actualizarea dimensiunii:
obiectulmeu [11] = 'altul';
obiectulmeu [12] = true;
obiectul meu.length+=3;
Structura for poate fi utilizata la crearea obiectelor pe baza sintaxei:
for (numevar in nume obiect)
function showany (unobj)
document.write ('<BR>');}
Cel mai puternic aspect al programarii JavaScript obiectuale este abilitatea de a crea obiecte cu proprietati functionale denumite metode. Functiile metoda se refera la obiectul curent.
Exemplu:
function produs (den, um, pret, cant)
/*Aceasta functie arata metoda obiectului produs*/
function arataprod ()
document.write ('<BR>');}
Utilizarea metodei poate fi realizata astfel:
calculator.show( );
altprodus.show( );
arataprodus (calculator);
Functiile metoda pot lua orice argumente si pot returna valori.
Exemplu:
function stoc(cantitate)
Observatie: Daca exista functii scop care opereaza doar cu instantele unui obiect, acestea sunt metodele acelui obiect.
Unul din principiile fundamentale ale programarii orientate pe obiect este reutilizarea obiectului. In acest sens se defineste un obiect cu proprietati comune, incapsulate in cadrul acestuia, iar obiectul se include ca proprietate a unuia sau mai multor obiecte. Acest tip de structura, in care obiectele si instantele sunt continute unul in celalalt este definita ca ierarhie obiectuala [Lemay].
Figura 2.
Reprezentarea obiectuala
a datelor unei agentii imobiliare
Spre exemplul agentia de valori imobiliare are ca obiect de activitate intermedierea operatiilor de vanzare-cumparare de imobile (terenuri, case, apartamente etc). Descrierea initiala a obiectului teren contine lungimea si latimea terenului, lungimea si latimea casei descg (lg, lag, lc, lac) si metoda de calcul a suprafetei gradinii suprgr( ). function descg (lg, lag, lc, lac)
function suprgr( )
Definim doua obiecte Teren cu proprietatile: lungime teren-lg, latime teren-lag, zona, pret si obiectul Casa care mosteneste atat metodele si proprietatile obiectului Teren cat si cele proprii (figura 3.).
Figura 3. Solutia obiectuala
propusa
function descter (lg, lag, zona, pret)
function suprgr( )
function casam (lc,lac,cam, st, an, gar, desci)
function finisaj(fai, gre, cen, term, alte, casami)
La momentul crearii instantei casam, care contine sub-obiecte toate instantele si metodele ce o compun trebuie sa existe:
var idesc;
var icasa;
var gradina;
var plus;
idesc = new descgr (20, 16, "Andrei Muresanu", 30000)
icasa = new casam (12, 8, 4, 'clasic', 1970, true, idesc);
gradina = icasa.desca.suprgr();
plus= new finisaj(true, true, true, false, icasa);
arata=icasa.show();
veche=icasa.vechime();
document.write ('<BR>' 'locuinta are'+ icasa.vechime(2003)+'ani');
document.write ('<BR>' Suprafata gradinii este'+ gradina + 'mp');
JavaScript a imprumutat de la Pascal structuri ce permit manipularea unui set de obiecte ca si un singur obiect astfel:
with (nume obiect)
unde: nume obiect - numele unei instante sau obiectului;
proprietatile obiectului sunt referite prin prefixare cu numele obiectului.
Observatii:
Functiile JavaScript au doua proprietati de baza: apelul si argumentele. Proprietatea de argumente permite utilizatorului descrierea ei cu un numar variabil de argumente si este optionala. Proprietatea de apel permite functiei identificarea si apelul in conjunctura in care este chemata.
Exemplu:
function demsum (sir1)
nrpar =nrpar-1;
sirret='s-au adunat'+nr par+'valori'+'rezultand suma de: '+sum';
return (sirret);
}
Apelul
var sir1 = demsum ('aici', 5, 10, 15, 20);
var sir1 = demsum ('Nimic');
Desi nrpar = 5 totusi argumentele sunt demsum.arguments[0] pana la demsum.arguments [4] si suma se face de la al doilea argument optional, proprietatea de lungime nefiind calculata.
Rezulta:
S-au adunat 4 valori rezultand suma de 5o; respectiv
S-au adunat 0 valori rezultand suma 0
Live Wire furnizeaza obiectul File care permite aplicatiilor sa scrie pe file server. Este vorba de o masura de securitate deoarece JavaScript pe browser nu permite salvarea datelor in fisiere system dar Live Wire Pro permite acces la baze de date SQL: Oracle, Sybase si BD Microsoft. Obiectul file poate fi creat cu sintaxa standard pentru crearea a unui obiect:
Fisier_propriu = new File ('cale')
Calea este relativa la directorul aplicatie, nu este un URL dar utilizeaza formatul standard al fisierelor de pe server: /director/fisier.
Metodele puse la dispozitie sunt: open(), read(), write(), getPosition(), setPosition() iar operatiile de citire si scriere sunt similare cu cele de la obiectul document, particularitatea constand in utilizarea metodei flush care goleste bufferul.
Metoda open permite deschiderea unui fisier si intoarce rezultat true daca s-a finalizat cu succes si false in caz contrar. Daca fisierul este deschis, operatia este abandonata iar fisierul original ramane neschimbat si deschis. Fisierul este deschis pentru citire si/sau scriere. Se poate crea un fisier nou, adauga la sfarsitul unui fisier existent sau inlocui un fisier existent cu un alt fisier.
Exemplu:
result = fisierpropriu.open ('mode');
Mode poate lua una din valorile:
4 r - deschide un fisier ca fisier text si returneaza true daca exista. Daca nu exista returneaza false.
4 w - deschide fisierul ca fisier text pentru scriere si creaza un nou fisier initial gol, chiar daca exista sau nu.
4 a - deschide fisierul ca fisier text pentru adaugare si scrie la sfarsitul fisierului. Daca fisierul nu exista, il creaza.
4 r+ - deschide fisierul in citire/scriere. Citirea si scrierea incepe de la inceputul fisierului.
4 r+ - deschide fisierul in citire/scriere. Creaza un nou fisier initial gol, indiferent de fisierul existent (sau nu).
4 a+ - deschide fisierul pentru citire/scriere. Citirea si scrierea incepe de la sfarsitul fisierului iar daca fisierul nu exista, el este creat.
JavaScript ofera posibilitatea de a salva fisierul (implicit text) in format binar prin adaugarea optiunii (b) in oricare din aceste moduri. [Somn-98]
Pozitionarea in fisier se face la inceputul fisierului, cu exceptia modurilor a, a+ pentru care pozitionarea la deschidere este la sfarsitul fisierului. Metoda de pozitionare este x=fisier.getPosition( ). Primul byte este 0 si orice alta pozitie este un numar pozitiv. Pentru o eroare de pozitionare se returneaza -1.
Metoda setPosition ( ) permite modificarea pozitiei relativ la inceputul fisierului, sfarsitul sau pozitia curenta din fisier.
Sintaxa: fisier.setPosition (pozitie[,referinta])
unde: - referinta este valoare numerica
0 relativ la inceputul fisierului;
1 relativ la pozitia curenta;
2 relativ la sfarsitul fisierului.
Exemple:
fisier.setPosition (-3,2)
fisier.setPosition (5,0)
fisier.setPosition (-1,1)
Scrierea in fisiere este permisa cu metoda write accesata in trei variante:
fisier.write (sir) - un sir
fisier.writeln (sir) - un sir urmat de n ..
fisier writeByte (sir) - un byte.
Metoda write cu sintaxa: write (obiect_fisier) afiseaza numele fisierului.
Cum in majoritatea limbajelor datele sunt inmagazinate in buffer pentru a creste eficienta, acesta le scrie pana este plin sau pana cand fisierul este inchis respectiv bufferul este golit cu metoda flush.
Citirea este permisa prin 3 metode de citire care returneaza true daca s-au desfasurat cu succes si false in caz contrar.
fisier.read (count)
fisier.readln ( )
fisier.read byte ( )
Cum in sistemul Windows, fisierele text au la sfarsitul fiecarei linii (rn), in Unix (n) iar pentru a deservi ambele sisteme JavaScript utilizeaza ambele variante cand se foloseste writeln( ) depinzand de platforma server.
vfisier = new File("textvechi.txt")
noufisier = new File("textnou.txt")
rezultat1= vfisier.open("r")
rezultat2= noufisier.open("w")
until vfisier.eof()
rezultat4= vfisier.close()
rezultat5= noufisier.close() }
Datele inmagazinate in fisiere au format text ASCII sau binar. Obiectul File are doua metode pentru conversia datelor dintr-un format in altul, ambele statice fara obiecte:
4 fisier.StringToByte(sir) - metoda de conversie a primului caracter dintr-un sir. Restul caracterelor sunt ignorate. rezultatul este valoarea primului caracter sau 0 daca nu exista posibilitatea conversiei.
4 fisier.byteToString(numar) - converteste intr-un sir un numar dat ca parametru.
Erorile aparute in manipularea informatiei pot fi gestionate cu diverse metode:
4 exists( ) permite verificarea existentei fisierelor si returneaza true daca fisierul exista si false in caz contrar.
4 getLength( ) returneaza un numar de bytes dintr-un fisier iar pentru un fisier text returneaza numarul de caractere; in caz de eroare -1.
Exemplu: nfisier.get Length( )
4 error( ), clearError( ) permit verificarea erorilor aparute la manipularea fisierelor precum si stergerea acestor erori.
Exemplu: nfisier.error( ) sau nfisier.clearError( )
4 eof() testeaza sfarsitul fisierului.
Plug-in-urile sunt instrumenete care extind functionaliatea unor aplicatii .De obicei sunt creeate de terte parti pentru a acoperii lipsurile softului respectiv sau doar pentru a usura utilizarea lui . Spre exemplu, programele de grafica folosesc numeroase moduri de filtrare a imaginii sau de obtinere a unor efecte care ar fi fost aproape imposibil de realizat manual fara aceste instrumente. Inaintea plug-in-urilor, pentru a accesa tipuri de date dintr-un browser (de exemplu Mosaic) trebuia realizata o legatura la un soft ce receptiona astfel de date prezente in paginile Web (grafica, sunetul) . Aceste softuri ajutatoare se numeau helper-apps[6] si cauzau multe probleme de regasire a datelor, de salvare pe disc etc. Netscape a introdus plug-inurile in mediul Web, ceea ce permite configurarea browserului. Astfel, browserul va contine instrumentele necesare rularii unor tipuri de fisiere ce necesitau inainte lansarea altor aplicatii. O optiune din meniul browserului indica ce plug-inuri sunt disponibile . Deasemenea, JavaScript a introdus sub-obiecte ale obiectului navigator (derivate din acesta) cu proprietati ce refera plug-in-urile existente.
Exemplu:
<script language='JavaScript'>
function printit() else
}
var NS = (navigator.appName == 'Netscape');
var VERSION = parseInt(navigator.appVersion);
if (VERSION > 3)
</script>
Imaginile harta-(imagemaps), imagini inline in care diferite zone ale imaginii au asociate legaturi diferite.Aceste imagini-harta se obtin prin crearea unui script care face ca diferitele zone ale imaginii sa activeze legaturi diferite.
Imaginile-harta se folosesc la creare unor lucruri mai deosebite, cum ar fi hartile; cand se executa click pe una din tari, o legatura va deschide un document despre tara respectiva.Au si intrebuintari mai obisnuite cum ar fi barele de butoane care constituie o singura imagine, iar imaginea-harta asociaza cate un URL fiecarui buton in parte. Imaginile-harta pot fi scrise pentru a sta pe server si vor fi prelucrate de scripturi CGI, sau pot fi codificate in fisierul HTML pentru a fi rulate de browser (client).Imaginile-harta au mai multe avantaje pentru autorul paginii Web care nu trebui sa se adapteze particularitatilor CGI ale serverului.Dezavantajul major al acestora este faptul ca sunt recunoscute de putine browsere si anume Netscape Navigator si Internet Explorer
Probabil ca pana la urma, fiind mai usor de folosit, imaginile-harta pentru client vor fi standardizate si vor dispune de suport in toate browserele. Exemplificare harta senzitiva (java script) ce reprezinta acoperirea retelei, fiecare zona are o legatura diferita.
Functia JavaScript folosita:
function OpenBrWindow(theURL,winName,features, myWidth, myHeight,isCenter)
}
<table border='0' cellpadding='0' cellspacing='0' width='100%'>
colspan='3'><img src='covmap_small_01.gif' width='535' height='38'
<td><ahref="javascript:;"onclick='OpenBrWindow('covmap_01.html','Test','','310','291','true')'><img src='covmap_small_03.gif' width='120' height='110' border='0'></a></td>
<td><ahref='javascript:;'Onclick='OpenBrWindow('covmap_02.html','Test','','310','291','true')'><img src='covmap_small_0gif' width='120' height='110' border='0'></a></td></table>
4 Ferestrele si cadrele sunt parte vitala din design-ul paginilor Web cu legaturi dinamice. Utilizand coduri JavaScript dupa legatura se pot construi noi tipuri de browsere sau noi unelte. Spre exemplu: se poate aduce o pagina intr-un cadru, se analizeaza, iar rezultatele sunt afisate intr-un nou cadru. De obicei cand se utilizeaza cadrele o zona este ca si un panou de control care dirijeaza afisarea in altul. O optiune de realizare a documentelor dinamice este utilizarea scripturilor Java combinate cu cadre si straturi. Nestcape a introdus o versiune 0 a Netscape Navigator marcajul <LAYER> care ofera o multime de functii interesante, in special in combinatie cu scripturi simple.
Marcajul <LAYER> dispune de o serie de atribute diferite, dintre care WHITH si ID trebuie neaparat utilizate. Cel mai simplu strat:
<LAYER ID= layer1 WIDTH=300 > - defineste un strat de latime egala cu 300 pixeli, numit "layer1". Aspectul frustrant al acestei noi tehnologii este ca exista doua versiuni diferite de HTML dinamic: versiunea pentru Nestcape (care lucreaza numai cu Communicator 0 si versiuni ulterioare), si o alta versiune care este compatibila cu Internet Explorer. Pagini HTML dinamice, implementate de Compania Microsoft sunt mai robuste, dar mai dificil de invatat. Modelul sau este compatibil DOM (Model de Documente Orientat pe Obiecte), a fost propus de comitetul de standardizare W3 HTML.
Exemplu: Pagina de cautare
<HTML><HEAD><TITLE> cautarea </TITLE></HEAD>
<FRAMESET ROW='60,*'>
<FRAME SRC='search.htm' NAME='buttons'>
<FRAME SRC='display.htm' NAME='display'>
</FRAMESET>
</HTML>
//Ecranul initial in cadrul Display
<HTML><HEAD><TITLE> Partea de cautare </TITLE>
</HEAD>
<BODY><H1> Afiseaza zona </H1>
<P> Alegeti hyperlegatura pentru declansarea cautarii
</BODY>
</HTML>
Codul de cautare cu hyperlink
<HTML><HEAD><TITLE>Partea de cautare>
</TITLE></HEAD>
<BODY>
<A HREF='https://www.altavista.digital.com/'
TARGET='display' Alta Vista </A>
<A HREF='https://www.excite.com'
TARGET='display'Excite </A>
.
</BODY>
</HTML>
Exemplul urmator contine doua cadre. Sectiunea <NOFRAMES> este introdusa pentru navigatoarele care nu recunosc cadrele (acestea nu recunosc nici JavaScript). Cadrele sint realizate cu ajutorul a doua documente: index.html si menu.html. Pentru vizualizare se va lansa documentul index.html. care va imparti ecranul in doua portiuni horizontale. In cea de sus va apare continutul documentului menu.html, iar in cel de jos continutul documentului de intrare hotsoft.html.
<HTML>
<TITLE>Bun venit la FocusSoft</TITLE>
<FRAMESET ROWS='17%,83%'>
<NOFRAMES>
<H4>Continut</H4>
<A HREF=hotsoft.html TARGET='display'>Produse/A><BR>
<A HREF=servicii.htm TARGET='display'>Servicii /A>
</NOFRAMES>
<FRAME SRC=menu.html>
<FRAME SRC=hotsoft.html NAME='display'>
</FRAMESET>
</HTML>
Documentul menu.html contine doua butoane, plasate in interiorul unui formular. Formularul este introdus deoarece butoanele pot apare doar in interiorul lor. La apasarea butoanelor, ce se afla in frame-ul de sus, in frame-ul de jos vor apare fie documentul hotsoft.html, fie servicii.html, in functie de butonul apasat.
Sursa documentului menu.html:
<HTML>
<BODY>
<!- <A HREF=menu.html TARGET='_parent'>Hide Frame</A> ->
<FORM>
<input type=button name=btn_welcome value='Bun Venit'
onClick='window.open('hotsoft.html','display')'>
<input type=button name=btn_servicii value='Servicii'
onClick='window.open('servicii.html','display')'>
</FORM>
</BODY></HTML>
<HTML>
<HEAD>
<SCRIPT LANGUAGE="JavaScript">
<!- Aici se scriu toate functiile utilizate -
alert ('Doriti detalii despre aceasta firma? ')
//end of script.>
</SCRIPT>
</HEAD>
<BODY BGCOLOR= white>
Tastati "OK" daca DA!
</BODY>
</HTML>
4 Imagini Rollover
In continuare este prezentata sursa pentru o pagina HTML, cu un script ce duce la modificarea unei imagini grafice cand cursorul este pozitionat pe aceasta. Elementul cel mai important al scriptului este ca exista doua versiuni pentru fiecare imagine: imagine "on" (corespunzatoare cursorului pozitionat deasupra imaginii) si imaginea "off" (corespunzatoare cursorului pozitionat in exteriorul imaginii).
<SCRIPT LANGUAGE='JavaScript'>
<!- -
//Dorim sa obtinem o imagine care sa se modifice la pozitionarea cursorului
logo_on = new Image(); // aloca spatiu pentru imaginea 'on'
logo_off = new Image(); // si, de asemenea, pentru imaginea 'off'
logo_on.scr = 'logo_on.gif ';// defineste imaginile respective
logo_off.scr = 'logo_off.gif ';
function activate(image)
function deactivate (image)
//end of script - >
</SCRIPT>
<CENTER>
<a href= logo.htm1
OnMouseOver='activate( 'logo' ); return true;'
OnMouseOut='deactivate( 'logo' ); return true;'>
<img scr = logo_off.gif alt='[company logo]' border=0 name='logo'></a>
</CENTER>
De exemplu, se doreste introducerea in pagina a unui buton, care la apasare va reciti penultima pagina ceruta.
<INPUT TYPE=button VALUE='Back 2' onClick='history.go(-2)'>
Intre " ",dupa onClick pot fi puse mai multe comenzi JavaScript, despartite cu ';' .
|
Directive |
Parameters |
Description |
Example |
|
include |
file or virtual |
Cea mai utilizata directiva SSI , ce permite includerea intr-un document a continutului altui document. Se specifica fisierul sau parametrii virtuali (HTML, text, script, etc). Parametrii fisiereului sunt furnizati cu cale relativa la radacina documentului. |
|
|
exec |
cgi or cmd |
Directiva executa un program, script, sau comanda shell pe server. cmd este comanda server-side; cgi este parametru la calea unui script CGI. PATH_INFO si QUERY_STRING din scriptul current SSI sunt trimisi la scriptul CGI. 'include virtual' este echivalenta cu 'exec cgi'. |
|
|
echo |
var |
Directiva afiseaza continutul unor variabile de mediu HTTP specificate. Variabilele include HTTP_USER_AGENT, LAST_MODIFIED, si HTTP_ACCEPT. |
|
|
config |
timefmt, sizefmt, or errmsg |
Directiva configureaza formatul de afisare a datei,timpul, dimensiunea fisierelor, si mesajele de eroare (returnate cand esueaza comanda SSI ). |
|
|
flastmod or fsize |
file or virtual |
Directiva afiseaza data cand a fost modificat documentul sau specifica dimensiunea document. Parametrii fisireului sunt furnizati cu cale relativa la radacina documentului. |
|
|
printenv |
Directiva da ca iesire lista tuturor variabilelor si valorile lor, incluzand cele de mediu si cele ale user-ului. Nu are attribute. |
|
[1] Versiunea PDF a standardului ECMA-262 se gaseste pe site-ul mozilla.
[2] solutie adaptata de Andrew si Jonathan Watt
[3] Pentru o mai buna intelegere a functionalitatii am utilizat unele exemple din The Core JavaScript 1.5. Reference Manual, care poate fi downloadat in format zip
[4] DOM=Document Object Model
[5] Late binding sau runtime binding
[6] helper-apps de la helper-applications (aplicatii ajutatoare) sau help-ere
|
Politica de confidentialitate | Termeni si conditii de utilizare |
Vizualizari: 4377
Importanta: 
Termeni si conditii de utilizare | Contact
© SCRIGROUP 2024 . All rights reserved
