suport curs java script

PROGRAMUL DE FORMARE PROFESIONALA- CALIFICARE

- PENTRU OCUPATIA –

Designer pagini Web

Java Script

SUPORT DE CURS

BUCUREŞTI 2010

CUPRINS

1. Ce înseamnă JavaScript ....................................................................................................................31.1. Introducere ...................................................................................................................................... 31.2. Când folosim JavaScript ..................................................................................................................31.3. Tehnologia bazată pe obiecte ........................................................................................................ . 4

2. Detalierea limbajului ..................................................................................................................... ... 62.1. Sintaxa limbajului JavaScript ............................................................................................................62.2. Tipuri de date şi variabile .................................................................................................................82.3. Operatori şi structuri .......................................................................................................................122.4. Funcţii .......................................................................................................................................... . 16

3. JavaScript orientat pe obiecte ....................................................................................................... 193.1. Operatori .................................................................................................................................... .. 193.2. Manipularea obiectelor ...................................................................................................................193.3. Funcţii de bază ..............................................................................................................................24

4. Mediul JavaScript .......................................................................................................................... .. 264.1. Limbajul-server ..............................................................................................................................264.2. Browsers vs JavaScript ..................................................................................................................26

5. Elemente dinamice ........................................................................................................................ . 285.1. Cookies ......................................................................................................................................... 285.2. Windows ........................................................................................................................................285.3. Exemplu meniu dinamic .................................................................................................................28

6. Index .............................................................................................................................................. ...32

2

1. Ce înseamnă JavaScript

1.1. Introducere

Pentru a putea înţelege mediul Java Script, este absolut necesar să înţelegem diferenţa dintre un program (care are nevoie de compilator) şi un script. La început, erau numai limbaje de programare ce necesitau compilare. Codul sursă, în acest caz, este supus unei analize efectuate de către o aplicaţie specializată (compilator) pentru detectarea erorilor şi obţinerea unui produs accesibil utilizatorului. Din această cauză, folosirea lor în domeniul programării web era nerecomandată. Ulterior, au apărut scripturile, programe ce nu necesitau compilare, cum ar fi sed, awk si Pearl.

Un script este o secvenţă de program, un set de instrucţiuni ce poartă denumirea de statements (declaraţii). Programul parsează instrucţiunile şi le execută câte una pe rând. Este la fel ca în programare, numai că aici regulile sunt mai simple şi mai uşor de asimilat.

Odată cu extinderea internetului, când fiecare utilizator, posesor de modem, avea posibilitatea de a face schimb de informaţii cu persoane de pretutindeni, s-a simţit nevoia unui limbaj care să înlesnească acest schimb. Astfel, a fost dezvoltat HTML-ul în care, după scurt timp, s-a simţit nevoia unei schimbări. Creatorii de pagini web doreau să controleze mai uşor elementele prezentate şi aplicaţiile lor să fie mai dinamice.

Astfel, la data de 4 decembrie 1995, Netscape şi Sun au introdus JavaScript 1.0, care iniţial a purtat denumirea de LiveScript. Acest limbaj putea fi interpretat de browsere şi dădea posibilitatea utilizatorului să programeze în adevăratul sens al cuvântului, nu doar să dea o formă informaţiei, cum se intampla în cazul HTML. Primul browser capabil să interpreteze astfel de scripturi a fost Netscape Navigator 2. Microsoft a implementat limbajul începând cu Internet Explorer 3, şi a purtat denumirea de JScript.

Modul de comunicare este simplu: informaţia este postată pe un server web, utilizatorul trimite o cerere către server şi primeşte răspuns cu informaţia dorită, sau, eroare, în cazul în care procedeul de trimitere/primire nu a decurs corect.

Pentru început, legătura dintre utilizator şi server era stabilită cu ajutorul CGI-ului - Common Gateway Interface. Acest program ajută la transmiterea datelor între browser şi server, asigurând calitatea informaţiei trimise/primite, generând un mesaj către utilizator pentru a retrimite informaţia în cazul în care aceasta nu este corectă sau completă.

Mai târziu, clientul a capătat un rol important în procesul de comunicare cu serverul, el devenind cel care trebuie să asigure corectitudinea informaţiei şi verificarea erorilor. Acest lucru era necesar pentru a înlesni legatura cu serverul şi pentru a micşora perioada de conectare şi marimea informaţiei schimbată între client şi server.

Rolul CGI-ului a rămas însemnat deoarece facilitează accesul paginilor web la bazele de date şi permite manipularea anumitor aplicaţii prin intermediul acestora.

Mediul de utilizare a scripturilor trebuie să beneficieze de o protecţie împotriva secvenţelor de program ce pot afecta datele sau sistemul de operare al utilizatorului.

1.2. Când folosim JavaScript ?

Chiar dacă permite manipularea informaţiei şi ridică nivelul dinamic al paginilor, sunt cazuri în care JavaScript poate să lipsească. Este important de menţionat faptul că există browsere ce împiedică rularea corectă a scripturilor, fie din motive de securitate, fie din cauza anumitor erori. Înainte să înceapă programarea propriu-zisă a scripturilor, programatorul trebuie să se intereseze din timp de erorile sau problemele ce pot apărea şi apoi să înceapă lucrul efectiv. În cazul în care mediul de afişare al paginii nu este compatibil cu JavaScript, se recomandă evitarea folosirii acestor scripturi, deoarece pot împiedica afişarea corecta a întregii pagini.

JavaScript este utilizat în primul rând pentru a genera o pagină complexă ce captează atenţia utilizatorilor şi permite o navigare uşoară prin continutul acesteia. De exemplu: mesaje cu bară de navigare (scrolling messages), modificarea dinamică pentru data şi ora afişate pe o pagină, meniuri dinamice.

3

E-mail interactiv este un alt domeniu în care JavaScript este folosit cu success, odată cu apariţia noilor aplicaţii de e-mail. Referitor la acest domeniu, programatorii trebuie să aibă în vedere riscurile şi măsurile de siguranţă ce le implică expedierea unui mesaj dintr-o pagină HTML, atât din punct de vedere al utilizatorului care doreşte confidentialitatea datelor trimise, cat şi din punctul de vedere al serverului de e-mail care implică protecţii împotriva expedierilor masive de mesaje necontrolate.

Aplicaţiile web pot suporta modificări şi efecte realizate cu ajutorul JavaScript. Astfel, se pot realiza verificări ale utilizatorilor şi parolelor, verificarea cărţilor de credit, reducerea numărului de erori ce pot apărea în aplicaţiile web, recunoaşterea browserelor ce suportă JavaScript, modificarea proprietăţilor browserelor la afisarea paginii dorite (culoare, pointer de mouse, alte efecte dinamice).

De asemenea, se pot realiza filtrări de IP-uri, recunoaşteri de IP-uri, contorizări de utilizatori ce accesează pagina şi diferite alte secvente de cod necesare programatorului în contextul securizării sau monitorizării paginii.

1.3. Tehnologia bazată pe obiecte

Pentru a putea explica noţiunea de obiect, trebuie să definim termenul de variabilă. O variabilă este o etichetă pentru care se atribuie o valoare. Această etichetă poate avea mai multe valori distincte pe parcursul programului şi poate apărea în diferite calcule matematice sau logice. Noţiunea de variabilă stă la bază oricărui limbaj de programare şi are valori de diferite tipuri (numerice, caractere etc.) după cum vom vedea în continuare.

Tehnologia bazată pe obiecte a apărut din nevoia de a simplifica secvenţele de cod prin reducerea numărului de variabile şi de a stabili o ordine în program. Pentru cei mai puţin obişnuiţi cu programarea orientată pe obiecte, trebuie explicat faptul că această tehnică permite crearea unui obiect ce este utilizat de mai multe ori pe parcursul programului. Acesta are asociate mai multe caracteristici şi funcţii ce definesc proprietăţile şi valorile pe care acest obiect le posedă. Odată ce acesteă au fost create şi definite, se pot defini noi variabile ce poartă denumirea de copii - ce au prin definiţie aceleaşi caracteristici ca şi obiectul “părinte”.

Vom considera drept exemplu o carte. Definim un obiect cu caracteristicile principale ale carţii :

object carte () {

titlu ; autor ; nr_pagini ;inchiriat ;

}

În momentul în care avem nevoie de o variabilă ce să conţină caracteristicile de mai sus vom folosi :

carte1 = new carte() ; //new reprezintă un constructor cu ajutorul căruia definim un obiect “carte”; carte1.titlu = “ION”; carte1.autor = “Liviu Rebreanu”; carte1.nr_pagini = 350; carte1.inchiriat = “da”;

Astfel, vom putea defini un numar mare de variabile ce au aceleaţi caracteristici şi pot fi manipulate în mod corespunzător. JavaScript nu este în totalitate orientat pe obiecte, fiind clasificat în categoria limbajelor ce au la bază tehnologia bazată pe obiecte.

Pentru a înţelege mai bine tehnologia bazată pe obiecte vizitaţi http://www.objectcentral.com . Vom prezenta în continuare structura obiectelor din mediul de lucru JavaScript asupra cărora

programatorul poate acţiona în mod direct. Fiind integrat în mediul HTML, JavaScript utilizează elemente HTML pe care le modelează, dându-le proprietăţi dinamice. Obiectele din mediul JavaScript sunt derivate din noţiunea window (fereastră), aşa cum se va vedea din schema următoare:

4

texturewindow

layer

textframe

link

file upload

image

passworddocument

area

hidden

anchor

submit

location applet

reset

plugin

radio

form

history checkbox

button

select option

Fig. 1 Obiectele din mediul JavaScript

5

2. Detalierea limbajului

2.1. Sintaxa limbajului:

Codul JavaScript poate fi inclus într-un document HTML în două moduri: a)Declaraţii şi funcţii utilizand tag-ul SCRIPT; b) Tratarea evenimentelor prin utilizarea tag-urilor HTML

<SCRIPT> //declaraţii şi funcţii JavaScript

</SCRIPT>

Sau

<SCRIPT LANGUAGE=”JavaScript”> //declaraţii şi funcţii JavaScript

</SCRIPT>

JavaScript este case sensitive, spre deosebire de HTML; atenţie atunci când scrieţi codul JavaScript. De obicei, codul JavaScript se încadreaza între tag-urile HTML de comentarii. Acest lucru este necesar

pentru ca browserele ce nu recunosc codul JavaScript, să nu afişeze codul ca text în cadrul paginii curente. Scripturile aflate între tag-urile <SCRIPT> sunt evaluate dupa încărcarea paginii. Funcţiile sunt încărcate,

dar nu şi executate. Ele se execută, doar la apariţia unor evenimente. Este important să se înţeleagă diferenţa între definirea funcţiei şi apelarea ei. Definirea înseamnă doar declararea funcţiei şi specificarea codului ce se va executa la apelare. Apelarea apare în urma unei acţiuni specifice, cu parametri specifici.

Exemplu includere cod JavaScript:

<HTML> <HEAD>

<SCRIPT LANGUAGE=”JavaScript”> //<!—pentru ascunderea codului în cazul în care browserul nu suportă JS

function suma(variab1,variab2) {

document.write(“Cele doua variabile sunt ”,variab1,” si ”,variab2,”<BR>”) return variab1+variab2

} document.write(“Suma este “,suma(5,6),”.”)

//sfârşit comentariu --> </SCRIPT>

</HEAD>

<BODY> <!—text html--> </BODY> </HTML>

6

Fig.2 - Fereastra rezultată în urma rulării scriptului precedent

În general, funcţiile trebuie definite în secţiunea HEAD. Datorită faptului că mai întâi se încarcă această secţiune, utilizarea tehnicii garantează încărcarea funcţiilor înainte ca utilizatorul să întreprindă o acţiune ce ar putea duce la apelarea unei funcţii.

Ghilimelele simple se utilizează pentru delimitarea string-urilor, şi, de aceea, se pot distinge parametrii de tip string ce sunt încadraţi de ghilimelele normale.

Exemplu cod HTML ce apelează o funcţie JS:

<INPUT TYPE=”button” VALUE=”Click!” onClick=”funcţie(‘un string’)”>

Evenimentele reprezintă rezultatul unor acţiuni întreprinse de utilizator. Prin JavaScript se pot defini script-uri ce se vor executa automat la apariţia unui eveniment. Evenimentele sunt incluse în documente ca atribute ale tag-urilor HTML carora li se ataşează un cod JavaScript ce se va executa.

Grupul “//” este folosit pentru a introduce un comentariu în codul JS. Tot rândul ce urmează după acest grup nu este luat în considerare de către browser. Este echivalentul grupului “” din HTML.

Program JavaScript: Este format din tot codul JavaScript care apare într-un document HTML. Ordinea de execuţie nu

corespunde neapărat cu ordinea apariţiei codului în fişier. Aplicaţie JavaScript: Este considerat a fi o mulţime de pagini HTML şi scripturi JS, care lucrează împreună pentru un anumit

scop. O aplicaţie JS poate include mai multe programe JS. Structura JavaScript: JS este case-sensitive (cuvinte cheie, nume funcţii, obiecte şi variabile). Un program JavaScript conţine:

-variabile -funcţii -expresii -obiecte (cu proprietăţi şi metode) -instrucţiuni (statements) La sfârşitul instrucţiunilor este opţională folosirea ";".

Comentarii: - indicate ca în Java şi C++ prin "//" şi "/* ... */"

7

Definire funcţii: Se utilizează cuvântul cheie "function". Parametrii nu au indicat şi tipul, ci doar numele.

function numeFuncţie(numeParam1, numeParam2, ...) { // instrucţiuni, declaraţii variabile }

Primul exemplu de program JavaScript este aplicaţia “hello world”. Acesta este cel mai simplu exemplu şi reprezintă punctul de start în asimilarea oricărui limbaj de programare.

<HTML> <HEAD>

<SCRIPT LANGUAGE=”JavaScript”> document.write(“Hello World ! <br>”); </SCRIPT> </HEAD> <BODY> Primul cod ce conţine JS </BODY> </HTML>

Fig. 3 - Fereastra rezultată în urma rulării scriptului precedent

2.2. Tipuri de date şi variabile

Înainte de a trece la exemple complexe, programatorul trebuie să cunoască tipurile de date şi variabile pentru a-şi putea organiza munca. Faţă de alte medii de programare, variabilele din JavaScript au avantajul că în interiorul aceluiaşi cod pot avea mai multe tipuri de valori. Vom prezenta în continuare tipurile de date existente în JavaScript:

Numeric: spre deosebire de alte limbaje, JS tratează numerele ca pe nişte numere cu virgule mobile. Numerele hexazecimale, întregi etc. sunt suportate la un nivel mai înalt, după cum urmează:

8

- integers - sunt numere ce nu conţin parte fracţională şi pot lua valori pozitive sau negative. Tipuri: decimal integers - numere în baza 10; octal integers - numere în baza 8; hexadecimal integers - numere în baza 16;

- floating-point numbers - numere cu virgulă mobilă - pot conţine parte fracţională şi pot avea o notaţie exponenţială pentru o precizie mai mare. Această notaţie poate să folosească “e” sau “E” la sfârşitul numărului zecimal urmat de un număr întreg în baza zece care să nu depăşească 3 cifre. Prin această notaţie, JavaScript înţelege să multiplice numărul în virgula mobilă cu 10 la puterea numărului întreg ce urmează după “e” sau “E”.

- built-in values - deoarece este nevoie de rezolvarea unor calcule complexe, JavaScript are definite cele mai importante constante matematice după cum urmează:

Constanta Descriere

Math.E Baza algoritmului natural - numărul eMath.LN2 Logarithm natural din 2Math.LN10 Logarithm natural din 10Math.LOG2E Logarithm în baza 2 din eMath.LOG10E Logarithm în baza 10 din eMath.PI Numărul matematic PIMath.SQRT2 Radical de ordin 2

Tabel 1.

-alte valori - aceste valori sunt des întâlnite în matematică, dar mai puţin utilizate în domeniulcalculatoarelor:

Valoare Descriere

Number.MAX_VALUE Cel mai mare număr ce poate fireprezentat

Number.MIN_VALUE Cel mai mic număr ce poate fi reprezentatNumber.NaN Not-a-number (nu este o valoare

numerica)Number.POSITIVE_INFINITY Infinit pozitivNumber.NEGATIVE_INFINITY Infinit negativ

Tabel 2.

Strings - reprezintă partea de text şi informaţie uşor accesibilă, indispensabilă în orice aplicaţie web. - strings - o astfel de variabilă este formată dintr-un caracter sau şir de caractere. Aceste şiruri de

caractere sunt folosite între ghilimele normale(“ ”) sau ghilimele simple (‘ ’). - caractere speciale - din cauza modului în care este citită informaţia de către browser, unele caractere nu

pot fi scrise, sau nu sunt luate în considerare. Astfel, pentru a putea fi reprezentate, ele reies dintr-o combinaţie de alte caractere:

Cod Caracter

\b Backspace\f Form feed\n Linie nouă\t Tab\’ Ghilimele simple\” Ghilimele\\ Backslash

Tabel 3.

9

Alte tipuri - sunt tipuri de date speciale, folosite de programatori pentru a face legătura între tipurile prezentate mai sus sau pentru a simula mai bine ceea ce doresc să expună în pagina web la care lucrează:

- boolean - acest tip de dată poate avea doar două valori: adevărat (true) sau fals (false). În general, în programare, acestor două valori le sunt atribuite numerele 1 (true) şi 0 (false).

- null - este atribuit unei variabile care nu are nici o valoare. Spre deosebire de alte limbaje, JavaScript face diferenţa dintre Null şi 0, fiind două valori total diferite.

- undefined - starea unei variabile în momentul în care a fost creată. (undefined reflectă starea NaN pentru numere, false pentru variabile de tip boolean, şi starea în care se afla un string caruia nu i-a fost atribuit înca o valoare).

Variabilele reprezintă un mod de stocare a datelor în timpul execuţiei programului. Ele sunt stocate într-o zonă buffer de memorie şi (în cazul JavaScript şi nu numai), după finalizarea execuţiei programului, ele sunt şterse.

Pentru a reuşi să realizăm un cod bine structurat, care să ne permită o verificare ulterioară, este important, pe lângă un cod aşezat corect în pagină, să folosim şi denumiri adecvate pentru variabile. În acest sens, e bine de ştiut că denumirea oricărei variabile trebuie să înceapă cu o literă sau cu semnul “_”; după acest prim caracter restul pot fi litere, numere şi semnul underscore “_”. Aşa cum am prcizat şi mai devreme, JavaScript este case sensitive şi este foarte important să avem grija dacă scriem cu litere mari sau cu litere mici, deoarece o variabilă numită “Variab” este total diferitaă de una tiparită “VARiab”.

În general, numele variabilei trebuie să reflecte rolul ei în program şi valoarea pe care o reprezintă. O variabilă se declară cu ajutorul cuvântului rezervat “var”. Variabila poate primi o valoare fără ca aceasta să

fie definită. În momentul declarării unei variabile, ea poate primi şi o valoare după cum putem vedea din exemplul urmator:

<SCRIPT LANGUAGE=”JavaScript”> //variabila declarată: var nume;

//variabila nedeclarată ce primeşte o valore: Nume1=”Ion”;

//variabila declarată ce primeşte în acelaşi timp o valoare: var variab1 = 5, variab2 = 6;

//afişarea valorii variabilelor: document.write(“nume: ”,Nume1,”, variabila1: ”,variab1,“ şi variabila2: ”, variab2);

</SCRIPT>


10

În JavaScript putem întâlni 2 tipuri de variabile: variabile globale şi variabile locale. Variabilele globale sunt întâlnite la nivelul întregului program şi îşi păstrează sau modifică valoarea pe durata execuţiei acestuia. Variabilele locale sunt folosite în interiorul funcţiilor, îşi păstrază sau modifică valoarea doar pe parcursul execuţiei acestora, la o nouă reapelare a funcţiei, aceste variabile se reiniţializează conform funcţiei.

Există posibilitatea ca două variabile să aibă aceeaşi denumire şi valori diferite doar dacă una dintre variabile este globală şi alta este variabilă locală. În momentul lansării funcţiei, se va ţine cont de valoarea variabilei locale, urmând ca la nivel global să fie folosită cealaltă variabilă, fără a avea nici un efect negativ asupra aplicaţiei. Este recomandat să nu se folosească două variabile cu denumiri identice pentru a nu se crea confuzie la scrierea codului şi pentru o mai bună înţelegere a codului de către altă persoană ce nu a fost implicată în realizarea acestuia.

<SCRIPT LANGUAGE=”JavaScript”> //declararea variabilei globale: var i = 6; n = 5;

//funcţie: function suma() {

//declararea variabilelor locale: var i=10;

sum=i+i;

//afişarea variabilelor locale document.write(“Variabile este ”,i,” şi dublul ei este ”,sum,”<BR>”);

}

//lansarea funcţiei: suma();

//afişarea variabilelor globale document.write(“Variabila1 este ”,i,” şi variabila2 este ”,n,”<BR>”)

</SCRIPT>

Am văzut cum se comportă două variabile cu acelaşi nume şi valori diferite. Vom vedea în continuare, cum se comportă o singura variabilă, cu un singur nume, dar care poate înregistra mai multe valori diferite în acelaşi timp. Acest tip de dată poartă denumirea de array (vector) şi reprezintă o înşiruire de valori apelate printr-un număr de ordine.

Exemplu: consideram variabila de tip array v:

3 5 9 4 6 ……………………………………………. 2

v[0]=3; v[1]=5….v[i]=6….v[n]=2; unde “i” reprezintă o poziţie intermediară oarecare din vector şi “n”reprezintă ultima poziţie din vector.

Modul de definire:

var v = new Array(10); //definire în care se specifică mărimea maximă a vectorului; var v = [3,4,5,9,2]; //vector definit direct cu valorile pe care le va conţine (ex: v[2]=5);

11

Numerotarea poziţiei în vector se face începând cu cifra 0. În JavaScript orice array poate conţine mai multe tipuri difer ite de date: var v = new Array (“titlu”, “autor”, “stadium”, );

Lucrul cu vectori:

Metoda Descriere

join() Concatenează elementele într-un singurstring

reverse() Inversează ordinea elementeleor în vectorsort() Sortează elementele din vectorconcat() Concatenează doi vectorislice() Întoarce o secţiune din vectorsplice() Inserează sau şterge elemente din vectorpush() Adaugă elemente la sfârşitul vectoruluipop() Şterge ultimul element dintr-un vectorunshift() Adaugă elemente la începutul vectorului.shift() Şterge elemente de la începutul vectoruluitoString() Converteşte elementele într-un string

Tabel 4.

Am prezentat mai sus vectori unidimensionali. Dacă fiecare element al vectorului ar fi, la rândul sau, un altvector, atunci avem de a face cu un vector multidimensional.

2.3. Operatori şi structuri

Aritmetici :-adunare : “+”; - aplicat pentru numere, adună cele două valori; aplicat pentru variabile de tip string,concatenează variabilele implicate în ecuaţie;-scădere: “-”;-înmulţire: “*”;-împărţire: “/”;-modulo: “%”; - extrage restul rezultat din împărţirea a două numere.Exemple:

var adunare = 4+3; scădere = 4-3; înmulţire = 4*3; împărţire = 4/3; modulo = 4%3; //rezulatul este 1.

Ate operaţii aritmetice:-pre-incrementarea: “++”- adună la valoarea variabilei cifra 1 şi permite folosirea rezultatului în altă

ecuaţie:var număr = 4;

suma = (++număr) + 3; //în acest caz variabila suma are valoarea 8 şi variabila număr are valoarea 5;-post-incrementarea: “++” - adună la valoarea variabilei cifra 1, după ce aceasta a fost folosită în ecuaţia

curentă:var număr = 4;

suma = (număr++) + 3; // în acest caz, variabila suma are valoarea 7 şi variabila număr are valoarea 5;-pred-ecrementation: “--” - scade din valoarea variabilei cifra 1 înainte ca aceasta să fie folosită în


12

suma = (--număr) + 3; // în acest caz, variabila număr are valoare 3 şi variabila suma are valoarea 6;- post-decrementation: “--” - scade din valoarea variabilei cifra 1, după ce aceasta a fost folosită în


suma = (num ăr--) + 3; //în acest caz, variabila număr are valoarea 3 şi variabila suma are valoarea 7; - schimbare de semn: “-” - este un operator ce schimba semnul variabilei din negativ în pozitiv şi invers; Observaţie: operaţiile aritmetice prezentate mai sus, atunci când sunt aplicate unor string-uri, încearcă să

convertească valoarea stringului într-un număr. - atribuire: “=”; var număr = 4;

Operatori avansaţi pent ru atribuire:

Operator Exemplu Explicaţie

+= x+=y x=x+y-= x-=y x=x-y*= x*=y x=x*y/= x/=y x=x/y%= x%=y x=x%y&= x&=y x=x&y|= x|=y x=x|y^= x^=y x=x^y

Tabel 5.

De asemenea, sunt definite câteva operaţii şi funcţii matematice standard, descrise în tabelul de mai jos:

Denumire Descriere

Math.abs() Valoarea absolută a unei variabileMath.acos() Arccosinus dintr-o valoareMath.asin() Arcsinus dintr-o valoareMath.atan() Arctangenta dintr-o valoareMath.atan2() Arctangenta dintr-o valoareMath.cos() Cosinus dintr-o caloareMath.exp() Exponentiala naturalăMath.floor() Partea întreaga a unei valoriMath.log() Logaritm naturalMath.max() MaximMath.min() MinimMath.pow() La putereMath.random() O valoare aleatoareMath.round() Rotunjeste valoarea unui număr fracţionalMath.sin() Sinus dintr-o valoareMath.sqrt() Radical de ordin 2Math.tan() Tangenta dintr-o valoare

Tabel 6.

Logici: - sunt operatori ce simplifică algoritmul de programare şi permite compararea valorii de adevăr a unei expresii logice cu altă valoare de adevăr a unei expresii similare.

- logical “AND” - (“şi” logic) - “&&”. O expresie ce foloseşte acest operator este adevarat ă (true), dacă cele două valori implicate în expresie sunt adevarate. Dacă una dintre ele este falsă sau ambele sunt false, atunci valoarea întoarsă este fals (false).

13

- logical “OR” - (“sau” logic) - “||”. Expresia este adevarată dacă cel puţin una dintre cele două valori sunt adevărate. Dacă ambele sunt false, atunci rezultatul întors este fals. Este important de menţionat faptul că, spre deosebire de “&&”, în cazul “||” se evaluează întai prima parte a expresiei şi în cazul în care aceasta este “true”, a doua parte nu mai este evaluată; în caz contrar sunt evaluate ambele valori implicate, rezultatul fiind stabilit în funcţie de cea de-a doua valoare.

- logical “NOT” - (“nu” logic) - “!”. Este folosit pentru a nega o valoare (pentru a-i schimba valoarea de adevăr).

Operatori de comparaţie: - egalitate - “==” compară valorile implicate în expresie. Dacă nu au acelaşi tip, încearca să transforme

una din valori pentru a reuşi compararea (exemplu: o variabilă numerica şi una şir de caractere, încearcă sătransforme şirul de caractere într-un număr).

- inegalitate - “!=” are valoare “true”dacă cele două valori sunt diferite şi “false” în caz de egalitate.- mai mare, mai mare sau egal - “>”, “>=”;- mai mic, mai mic sau egal - “<”, “<=”;- identificare - “===” Întoarce “true” dacă cele două valori sunt egale şi “false” în caz contrar. Spre

deosebire de “==”, dacă cele două tipuri de variabile sunt diferite, nu încearcă să convertească unul dintre ele,întorcând direct valoarea “false”.

Bitwise: aceşti operatori consideră operanzii ca numere întregi pe 32 de biţi. Nu sunt foarte folosiţi,deoarece modul de lucru cu aceşti operatori este dificil.

- bitwise AND - “&” - “şi” logic;bitwise OR - “|” - “sau” logic;- bitwise XOR - “^” - “sau” logic exclusive;- shift left - “<<” - numărului din stânga operatorului (un întreg pe 32 biţi) îi vor fi mutaţi spre stânga un

număr de biţi egal cu operândul din dreapta;-shift right - “>>” - la fel ca la shift left, deosebirea este că biţii sunt mutaţi spre dreapta;

StructuriCondiţionale:

“if” - execută o instrucţiune sau un grup de instrucţiuni atât timp cât condiţia iniţială este respectată:if (condiţie){ //instrucţiune sau grup de instrucţiuni; } else { //instrucţiuni executate în cazul în care condiţia nu este respectată; } “switch” - această structura este folosită pentru evaluarea tuturor posibilitătilor existente în cazul unei

variabile (rezolvă toate valorile posibile ale unei variabile)switch (variabila) {

case valoare1: instrucţiune1; break; case valoare2: instrucţiune2; break; default:

instrucţiune3;}

Dacă nici una din valorile prezentate prin cuvântul rezervat “case” nu este cea corectă (să fie egală cu valoareavariabilei), atunci este executată secţiunea “default”.

14

Repetitive:

“for” - structură repetitivă compusă din două părţi: una pentru contorizarea ciclurilor şi o alta, pentruexecutarea instrucţiunilor. Spre deosebire de structurile prezentate în continuare,s tructură cu număr fix de paşi, resursele pentru executarea ei fiind alocate de la început.

for (iniţializare, condiţie, incrementare){//instrucţiuni;}

“for” este considerată o

“while” - ins trucţiune repetitivă ce are condiţia de continuare la început. Nu are număr finit de paşi şi incrementarea se realizează de către programator în zona rezervată instrucţiunilor.

while (condiţie) { //instrucţiuni;}

“do … while” - instrucţiune repetitivă ce are condiţia de continuare la sfârşit. Spre deosebire de “while”această structura permite rularea instrucţunilor pentru primul pas, fără a verifica nici o condiţie. Incrementarea seface, de asemenea, în zona rezervată instrucţiunilor.

do { //instrucţiuni;}while (condiţie)

Exemplu:

<HTML><HEAD>

<SCRIPT LANGUAGE="JavaScript">var j=0;

i=0;k=0;

//structura fordocument.write("Pentru 'FOR' <br>");for (var i=0; i<5; i++)//i reprezintă variabila ce contorizează ciclul repetitiv//i este iniţial 0, apoi la fiecare pas se incrementează cu valoarea 1//ciclul se repetă cât timp i < 5{ document.write("Ne aflăm la pasul ",i," al structurii repetitive 'for'; <br>");}

//structura whiledocument.write("<br>Pentru 'WHILE' <br> ");j=0; //iniţializare contor pentru structura while//ne propunem să calculăm suma primelor 5 cifre începând cu 0:sum=0;

15

while (j<5) { sum=sum+j; document.write("La pasul ",j," suma este ",sum,"; <br>");j++; //incrementăm j pentru a trece la pasul următor}

//structura do ... whiledocument.write("<br>Pentru 'DO WHILE' <br>");i=30;j=2;k=0;//la fiecare pas al structurii do ... while ne propunem să scădem din i pe j//condiţia de oprire este ca i sa fie mai mic decât j//la fiecare pas îl incrementăm pe j cu o unitate//k reprezintă contoruldo { i=i-j; j++; document.write("La pasul ",k," i are valoarea ",i," şi j are valoarea ",j,";<br>")k++;} while (i>=k) </SCR IPT> </ HEAD> <BODY> </BODY> </HTML>

Fig. 5 - Rezultatul afişat pentru exemplul cu structuri repetitive

16

2.4. Funcţii

Spre deosebire de alte limbaje script, unde noţiunea de funcţie nu este prezentă, JavaScript a adoptat-o şi dezvoltat-o, devenind un element cheie în procesul de construcţie sau dezvoltare al unui site. Este de la sine înţeles faptul că nu poate fi comparată complexitatea funcţiilor în limbajele ce necesită compilare cu cea a funcţiilor din JS, primele fiind net superioare.

Utilitatea funcţiilor constă practic, în accesarea unui set de instrucţiuni definit într-o structură, de fiecare dată când este nevoie de acele instrucţiuni, fără a mai trebui să introducem codul acestora la fiecare utilizare. Setul de instrucţiuni poate avea diferite grade de complexitate şi poate depinde de un număr variabil de parametri.

Cuvântul cheie pentru definirea unei structuri de acest gen este "function". Parametrii indică doar numele, iar tipul lor trebuie asociat cu atenţie de către programator, în momentul apelării funcţiei.

function numeFuncţie(Param1, Param2, ...) { // intrucţiuni; }

O funcţie poate executa o serie de instrucţiuni ce au un efect direct asupra modului de afişare sau asupraunei variabile (ex: o funcţie pentru afişarea unei variabile obţinută din operaţii matematice asupra parametrilor)sau poate fi folosită pentru a obţine o valoare ce este utilizată, la rândul ei, în altă funcţie sau expresie. Pentru aasocia un rezultat unei funcţii, se foloseşte cuvântul cheie “return”.

Vom prezenta, în continuare, 2 exemple de funcţii. Primul exemplu îl reprezintă o funcţie folosită pentru a fişare, al doilea o funcţie ce trebuie să întoarcă o valoare folosită în program.

Exemplul 1:

<HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var v1=5;

v2=11; //funcţia calculează şi afişează restul împărţirii unei variabile la cealaltă docum ent.write("Cele două variabile sunt ",v1," şi ",v2,"<BR>"); function afiş(a,b)

{ document.write("variabila2 modulo variabila1: ",b," % ",a," = ",b%a,"<BR>");

}afiş(v1 ,v2);

</SCRIPT> </HEAD> <BODY> </BODY> </HTML>

17


Exemplul 2:

<HTML> <HEAD>

<SCRIPT LANGUAGE="JavaScript"> var v1=3;

v2=17; sum=0;

//funcţia calculează restul împărţirii unei variabile la cealaltă //rezultatul obţinut este folosit pe parcursul scriptului

document.write("<h2>Cele două variabile sunt ",v1," şi ",v2,"<BR></h2>");

function calc(a,b) {

var m=0;

m=b%a;return m; // funcţia calc() primeşte valoarea lui m

}

document.write("Rezultatul operaţiei modulo este: ", calc(v1,v2),"<br>");sum=v1+v2+calc(v1,v2);document.write("Suma tuturor valorilor este: ", sum,"<br>");

</SCRIPT>

</HEAD> <BODY> < /BODY> <HTML>

18


Exerciţii: 1. Realizaţi un script ce să conţină o funcţie pentru calcularea mediei aritmetice a două valori presupuse

cunoscute. 2. Realizaţi un script care să conţină o funcţie pentru calcularea şirului lui Fibonacci până la 100. 3. Realizaţi un script care să conţină o funcţie pentru afişarea tuturor numerelor de la 0 la 100, care

împărţite la 7, să dea restul 2 sau 3.

3. JavaScript orientat pe obiecte

3.1. Operatori

Un obiect este introdus cu ajutorul cuvântului-cheie “object”. Fiecare astfel de obiect are o serie decaracteristici definite de programator, caracteristici pe baza cărora se vor crea mai departe alte obiecte “copil”.Acestea din urmă sunt introduse cu ajutorul constructoru lui “new”, cuvânt rezervat ce atribuie noului obiectcaracteristicile “părintelui” ce urmează în partea sa dreaptă:

object imobil() {

nr_etaje ; nr_apartamente ;an_construcţie ;

}

casă = new imobil() ;casă.nr_etaje = 1;c asă.nr_apartamente = 1; casă.an_construcţie = 1975;

bloc = new imobil(); b loc.nr_etaje = 4;

19

bloc.nr_apartamente = 25; bloc.an_construcţie = 1960;

vilă = new imobil(); vilă.nr_etaje = 2; vilă.nr_apartamente = 1;vilă.an_construcţie = 1990;

Operatorii implicaţi în lucrul cu obiecte sunt, în mare parte, identici cu cei prezentaţi în Capitolul 2. Îi vomaminti doar pe cei mai importanţi: Adunare (“+”); Înmulţire (“*”); Scădere (“-”); Împărţire (“/”); Atribuire (“=”);Egalitate (“==”); Inegalitate (“!=”); Incrementare/Decrementare (“++”/”—“); Modulo (“%”); Atribuire modulo (“%=”);“NU” logic (“!”); “Şi” logic (“&&”); “Sau” logic (“||”);

3.2. Manipularea obiectelor

În JavaScript, caracteristicile obiectelor sunt modificate pentru a obţine pe cale cât mai scurtă efecte de afişare şi noi modal ităţi de prezentare a imaginii. În cele ce urmează, vom vedea cum se utilizează practic obiectele şi cum in tegrăm efectiv limbajul JavaScript în codul HTML. Exemplul următor arată cum putem afişa oinformaţie complexă şi cum

< html><head><title>Exemplu</ti tle></head><script>

putem da posibilitatea clientului să aibă acces doar la ce îşi doreşte.

function info(obj_id) //functia ascunde informatiile din linia pe care se apasă{//verificam daca informatia este afisata; if (document.all('id_'+obj_id+1).style.display != 'none') { //in caz afirmativ valoarea de afisare a obiectului devine “none”

document.all('id_'+obj_id+1).style.display = 'none';document.all('id_'+obj_id+2).style.display = 'none';}

else{

//altfel informatia este afisata document.all('id_'+obj_id+1).style.display = ''; document.all('id_'+obj_id+2).style.display = ''; }

}

</script> <body> <table align="CENTER" width="900">

<tr> //id-ul elementului prelucrat este esential !!!

<td onclick="info(1);" id="id_10">Client1 (apasa aici)</td><td id="id_11">Nume: Ion <br> Varsta: 25 </td> <td id="id_12"> Tara: Romania <br> Statut: Casa torit

20

</td> </tr><tr>

<td onclick="info(2);" id="id_20">Client 2 (apasa aici)</td><td id="id_21">Nume: Vasile <br> Varsta: 35</td><td id="id_22">Tara: Romania <br> Statut: Casatorit </td>

</tr> <tr>

<td onclick="info(3);" id="id_30">Client 3 (apasa aici)</td><td id="id_31">Nume: Mihai <br> Varsta: 20</td><td id="id_32">Tara: Romania <br> Statut: Necasatorit</td>

</tr> </table> </body> </html>

Fig. 8 - Textul afişat iniţial

21

Fig. 9 - Textul după selectarea informaţiei

Cu ajutorul obiectelor, legând JavaScript de HTML, putem obţine o pagină prin care clientul poate fi condiţionat să execute diferite operaţii. Vom da exempu de o pagină în care utilizatorul este nevoit să introducă datele marcate cu “*” pentru a putea trece la o anumită pagină:

<html> <head>

<title>Validare</title> </head> <script>

function validate(){//această funcţie verifică dacă valoarea câmpului este nulă //în caz afirmativ câmpul este trecut într-o listă de mesaj

//această listă este asociată butonului de trimisvalid = 0;valid_report = '';

if ((document.all.pr.value !="") && (document.all.nm.value !="") && (document.all.tr.value !="") && (document.all.mail.value !="") && (document.all.select1.value !="") && (document.all.txt.value !=""))

{valid = 1;}

if (valid == 1) {document.all.sub.disabled = false;//în cazul în care nici unul din câmpuri nu este gol

//butonul de trimis devine accesibil}

else { valid_report+='Please fill up: \n'; //formarea listei de câmpuri ce trebuiesc completateif (document.all.pr.value =="")

valid_report+='First Name \n';if (document.all.nm.value =="")

valid_report+='Last Name \n';

22

if (document.all.tr.value =="") valid_report+='Country \n';

if (document.all.mail.value =="") valid_report+='E-mail \n';

if (docume nt.all.select1.value =="") valid_report+='Industry \n';

if (document.all.txt.value =="") valid_report+='Feedback \n';

document.all.sub.title = valid_report; document.all.sub.disabled = true;

} }

</script><body><br><table width="900" align="CENTER"><tr><td bgcolor="#c0c0a0" colspan="2">

<font >Send us your feedback :</font></td></tr><tr><td> <br><table align='CENTER' width='600' border='0' class='backi'><form action='trimis.html' method='POST'><tr><td align='right'>*First name: </td><td><input type='text' name='pr' id='pr'value='' onchange='validate()' onmousemove='validate()'></td></tr>

<tr><td align='right'>*Last name: </td><td><input type='text' name='nm' id='nm' value=''onchange='validate()' onmousemove='validate()'></td></tr><tr><td align='right'>*Country/State: </td><td><input type='text' name='tr' id='tr' value=''onchange='validate()' onmousemove='validate()'></td></tr><tr><td align='right'>City: </td><td><input type='text' name='ors' id='ors'value='' ></td></tr><tr><td align='right'>*E-mail: </td><td><input type='text' name='mail' id='mail' value=''

onchange='validate()' onmousemove='validate()'></td></tr><tr><td align='right'>*Industry: </td><td> <select name='select1' id='select1' onchange='validate()'

onmousemove='validate()'> <option value=''>(Select Industry)</option> <option value='Advertising/Marketing/PR'>Advertising/Marketing/PR</option> <option value='Government/Public Service'>Government/Public Service</option> <option value='Hospitality/Recreation'>Hospitality/Recreation</option> <option value='Mining'> Mining</option> <option value='Retail'>Retail</option> <option value='Travel /Transportation'>Travel/Transportation</option> <option value='Other'>Other</option> </select></td></tr>

<tr><td align='right'>Title: </td><td> <select name='select2' id='select2'><option value=''>(Select Title)</option><option value='Account Manager'>Account Manager</op tion> <option value='Analyst'>Analyst</option> <option value='Designer'>Designer</option> <option value='Director'>Director</option> <option value='Inspector'>Inspector</option> <option value='Other'>Other</option> </selec t></td></tr>

23

<tr><td align='right' height='250'>*Feedback: </td><td><textarea name='txt' id='txt' onchange='validate()'onmousemove='validate()'></textarea></td></tr>

<tr><td></td><td align='right'><input type='submit' name='sub' value=’Send' id='sub' disabled></td></tr></form>

</table></td> </tr> </table> </body> </html>

Fig. 10 - Pagina generată de acest cod este:

Manipularea obiectelor în JavaScript este condiţionată, în mare parte, doar de imaginaţia programatorului,metodele de lucru fiind multiple şi domeniile de aplicabilitate foarte vaste.

3.3. Funcţii de bază

Ne vom referi în continuare la funcţiile cele mai importante ce implică lucrul cu obiecte şi la obiectele în sine predefinite în JavaScript.

Array

Funcţie Descriere

length Numărul elementelor din vectorconcat() Lipeşte un vector la un alt vectorjoin() Trece toate elementele unui vector într-o variabilă stringpop() Şterge ultimul element dintr-un vectorpush() Introduce elemente la sfârşitul vectoruluireverse() Întoarce ordinea elementelor dintr-un vectortoString() Converteşte elementele unui vector în string

Tabel 7.

24

Datevar data1 = new Date();var data2 = new Date (year, month, day, hours, minutes, seconds, milliseconds2);

Funcţie Descriere

getDate() Întoarce ziua curentă din lunăgetDay() Întoarce ziua din săptămânăgetMonth() Întoarce luna curentăparse() Converteşte un string ce reprezintă o dată în milisecundegetTime() Întoarce data şi timpul în milisecunde

Tabel 8.

String

Funcţie Descriere

concat() Concatenează două stringuri într-unul singursearch() Întoarce indexul (poziţia) caracterului căutattoLowerCase() Converteşte caracterele şirului în litere micitoUpperCase() Converteşte caracterele şirului în litere marilength Lungimea şiruluifontsize() Stabileşte mărimea fonturilor într-un tag de tip <FONT>

Tabel 9.

ButtonProprietăţi: - name - numele butonului

- value - textul ce apare pe buton în interfaţa grafică;

Funcţie Descriere

blur() Elimină focus-ul de pe un butonclick() Apelează butonul prin intermediul mouse-ul (evenimentul onClick)focus() Introduce focus pe un buton

Tabel 10.

Aceleaşi proprietăţi şi funcţii sunt şi pentru Checkbox, Textarea.

Document: prin document se înţelege o pagina web ce se afişează într-un browser web.Proprietăţile sunt aceleaşi ca şi în HTML

Funcţie Descriere

open() Deschide sesiunea de scriere pentru documentclose() Închide sesiunea de scrierewrite() Deschide un text pentru documentwriteln() Deschide un text şi o nouă linie pentru document

Tabel 11.

Pe lângă obiectele prezentate mai sus, JavaScript cuprinde o numeroasă colecţie cu diferite funcţii şiaplicabilităţi. Pentru a putea fi însuşite, JavaScript dispune de o documentaţie vastă în acest sens, fiind ladispoziţia oricărui programator JS. Informaţiile sunt accesibile la adresa www.purejavascript.com

25

Exerc iţii:

1. Modificaţi exemplul legat de validarea informaţiilor prezentat în Subcapitolul 3.2., făcând toate câmpurileacelei pagini obligatoriu de introdus.

2. Utilizând programarea bazată pe obiecte realizaţi un script care să conţină 2 câmpuri textarea ce suntînlocuite cu 2 câmpuri text obişnuite la apăsarea unui buton.

4. Mediul JavaScript

4.1. Limbajul-server

Pentru a înţelege modul de operare al limbajului JavaScript trebuie să avem în vedere cele două părţiimplicate în procesul de comunicare: serverul şi clientul. Descrierea de până acum a limbajului a reprezentatmodul în care programatorul comandă partea de server pentru a trimite informaţia corectă părţii client atunci cândacesta o cere. Programatorul poate edita însă şi comenzi părţii de server ce nu trebuiesc interpretate de cătreclient deoarece acestea sunt strict adresate serverului. Acest mod de adresare este diferit de cel utilizat pentru atrimite informaţii clientului.

Codul pentru server este introdus prin intermediul tag-urior: <SERVER> //instrucţiuni ; </SERVER> O altă diferen ţă o reprezintă faptul că în adresarea către server sunt folosite metode şi obiecte ce nu se

întâlnesc la adresarea către client, dar nu toate metodele şi obiectele folosite pentru adresarea către clienţi sunt folosite şi pentru partea de server.

Utilizarea limbajului pentru server este destinată programatorilor cu experienţă şi constituie argumentul pentru care JavaScript este considerat un limbaj puternic.

Utilizat în principal pentru a efectua o compilare a codului destinat părţii client în vederea eliminăriieventualelor erori, codul pentru server poate ajuta programatorul şi în alte scopuri cum ar fi :

- stabilirea unei conexiuni cu bazele de date - prin intermediul constructorului “new DbPool(parametriibazei de date)”. Această conexiune poate fi limitată în timp şi poate avea măsuri de securitate sporite;

- trimiterea de mesaje electronice (e-mail-uri) - prin intermediul obiectului SendMail. Aceasta este bazamajoritătii aplicaţiilor web pentru expedierea mesajelor electronice.

4.2. Browsers versus JavaScript

Din punct de vedere al părţii client, probleme pot apărea la nivelul interpretării limbajului. Aplicaţia specializată în acest sens poartă denumirea de “browser”. Programatorul trebuie să ţină cont de versiunea de browser pe care se realizează expunerea informaţiei şi chiar să specifice compatibilitatea scriptului cu diverse versiuni de browser. În pre zent, majoritatea aplicaţiilor pentru navigare web dispun de suport JavaScript, dar programatorul trebuie să ia în calcul posibilitatea ca unul din clien ţi să beneficieze de o variantă mai veche a aplicaţi ei şi aceasta s ă afişeze eronat informaţia.

Aşa cum am arătat şi în subcapitolul referitor la sintaxa limbajului (subcapitolul 2.1.), este utilă folosireatag-urilor de comentarii pentru HTML în evitarea erorilor apărute datorită incompatibilităţii browserului cu limbajulJavaScript. În continuare, vom încerca să punctăm versiunile de aplicaţii pentru navigare web şi versiunile deJavaScript sau JScript cu care acestea sunt compatibile:

Browser Versiune Suport

Netscape Navigator 2.0 JavaScript 1.0Netscape Navigator 2.02 JavaScript 1.1

26

Netscape Navigator 3.0 JavaScript 1.1Netscape Navigator 4.0-4.05 JavaScript 1.2Netscape Navigator 4.06-4.5 JavaScript 1.3Netscape Navigator 5.0 JavaScript 1.4Microsoft Internet Explorer 3.0 JScript 1.0Microsoft Internet Explorer 4.0-4.5 JScript 3.0Microsoft Internet Explorer 5.0 JScript 5.0Opera 3.0-3.5 JavaScript 1.1

Tabel 12. Ultimele versiuni ale browser-elor (ex: Microsoft Internet Explorer 6.0) prezentate în tabele, beneficiază de

suport complet pentru JavaScript. Evoluţia software impune o permanentă informare a programatorului cu privire la aceste compatibilităţi şi la posibilităţile de îmbunătăţire a aplicaţiilor web pe baza suportului oferit de noile versiuni de browser.

În cazul în care versiunea de browser folosită de client nu oferă suport pentru codul JavaScript şi acest cod nu este protejat de tagurile de comentarii, pot apărea diverse erori:

- codul poate apărea pe ecran fiind considerat text HTML;- pagina nu se afişează, în colţul din stânga jos a browser-ului apărând o eroare de afişare;- pagina este afişată, dar în momentul în care sunt apelate funcţiile JavaScript apare mesajul de eroare

în stânga jos.Pentru o folosire legitimă a limbajului, programatorul trebuie să specifice versiunile minime de browser

cerute pentru o rulare corectă a codului.

27

5. Elemente dinamice

5.1. Cookies

Prin Cookie înţelegem un document text ce conţine informaţie organizată. Acest document este construit d e browser cu scopul de a uşura navigarea şi de a reduce perioada “on-line” - perioadă în care clientul face s chimb de informaţie cu serverul. Acest fişier are o mărime maximă de 4 kilobytes.

Cookie-urile fac parte din obiectul “document”. Asupra lor se pot efectua operaţii de scriere şi citire. Elesunt considerate de către browser zone temporare de memorare a informaţiei, fiind create la începutul sesiunii, iardupă încheierea sesiunii browser-ului acestea sunt distruse.

Utilizatorul poate controla conţinutul acestor fişiere şi poate folosi informaţia din ele, considerându-lefişiere normale.

Numele se pot citi cu ajutorul sintaxei:var numeCookie = document.cookiePentru a lucra cu această proprietate a documentului, programatorul trebuie să aibă un nivel avansat de

cunoaştere a limbajului.

5.2. Windows

Formarea unei noi ferestre (window) se bazează pe relaţia părinte-copil, noua fereastră fiind cosnsiderată“copil” pentru fereastra principală denumită “părinte”. Pentru a deschide o nouă fereastră folosim sintaxa:

Window.open (“index.html”, “fereastraNouă”, “resizeable, menubar, toolbar”)Astfel, se va forma o fereastră nouă cu denumirea “fereastrăNouă” şi va reprezenta copilul ferestrei

“index.html”. Proprietăţile noii ferestre sunt trecute de asemenea “resizeable, menubar, toolbar”. Dacă dorim săaflăm denumirea ferestrei părinte folosim cuvântul rezervat opener, iar sintaxa este următoarea:

var numePărinte = window.opener.document.nume;Variabila “numeParinte” va primi numele ferestrei de unde a fost iniţiată comanda pentru fereastra curentă

- pentru copil. Comenzile pentru orice fereastră nouă sunt aceleaşi ca şi pentru fereastra p ărinte.

5.3. Exemplu meniu dinamic

<html> <head> <script type="text/javascript"> //aplicaţia are la bază o structură părinte/copil//meniurile principale sunt considerate părinte şi în funcţie de ele vor fi deschise meniurile copil (submeniurile)var persistmenu="yes"//"yes" sau "no". va verifica dacă id-rile meniurilor sunt consecutivevar persisttype="sitewide"//"sitewide" meniul este utilizabil în tot site-ul//"local" - meniul este utilizabil doar în această pagină

if (document.getElementById){//această verificare "ascunde" submeniurile când pagina este încărcată.

//tagurile <style>...</style> sunt specifice limbajului CSSdocument.write('<style type="text/css">\n')document.write('.submenu{display: none;}\n')document.write('</style>\n')}

//accesarea meniurilor principale - deschiderea submeniurilor dintr-un meniu principal.

28

inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathnamevar cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockiddocument.cookie=cookiename+"="+cookievalue}

//noţiuni de iniţializare a meniului la încărea/reîncărcarea paginiiif (window.addEventListener)window.addEventListener("load", onloadfunction, false)else if (window.attachEvent)window.attachEvent("onload", onloadfunction)else if (document.getElementById)window.onload=onloadfunction

//dacă indexarea id-urilor este făcută corect atunci se inserează informaţia în cookieif (persistmenu=="yes" && document.getElementById)window.onunload=savemenustate

</script></head><body>

<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')">Site-uri externe</div>

<span class="submenu" id="sub1">

- <a href="http://www.google.com">Google</a><br>- <a href="http://www.yahoo.com">Yahoo</a><br>- <a href="http://www.livescores.com">Livescore</a><br>

</span>

<div class="menutitle" onclick="SwitchMenu('sub2')">Site-uri interne</div>

<span class="submenu" id="sub2">

- <a href="http://www.k.ro">Kappa</a><br>- <a href="http://www.google.ro">Google</a><br>- <a href="http://www.resursadefun.ro">Recreativ</a>

</span>

<div class="menutitle" onclick="SwitchMenu('sub3')">Curs Valutar</div><span class="submenu" id="sub3">

- <a href="http://www.bnr.ro">BNR</a><br></span>

</div> </body> </html>

30

Fig. 11 - Meniu iniţial

Fig. 12 - Meniu deschis pentru a ccesare

31

6. Index

A abs() Valoarea absolută a variabilei dintre

paranteze array Tip de dată indexată ce conţine valori

multiple. Indexarea se face începând cu cifra 0.

B bit Unitate elementară de înregistrare a

informaţiei reprezentată binar (0 şi 1).Reprezintă a opta parte dintr-un byte.

byte Unitate de înregistrare a informaţiei.8biţi=1byte=1octet

bitwise operators Operatori folosiţi în manipularea biţilorboolean Tip de variabilă logică. Ia valorile 1 pentru

adevărat şi 0 pentru falsbrowser Aplicaţie ce permite vizualizarea paginilor

web şi a aplicaţiilor web-based buffer Zonă de memorie temporară ce permite

stocarea informaţiilor folosite pe parcursul rulării unui program.

C C++ Limbaj de programare ce acordă o atenţie

deosebită lucrului cu obiecte şi clase de obiecte

case sensitive Termen folosit in informatică, indică faptulcă aplicaţia face diferenţa între majuscule şi litere mici.

compilare Proces de verificare şi construire a corpuluiunui program în vederea obţinerii unui produs accesibil utilizatorului.

constructor Element de programare folosit în definireavariabilelor a căror structură a fost deja definită.

cookie Reprezintă un fişier de regulă text ceconţine informaţie organizată cu privire la o anumită pagină web.

D debug Proces de depistare şi corectare a erorilor.display Referitor la afişare, în majoritatea cazurilor

reprezintă proprietaţile obiectelor la afişare.

32

E eveniment Comandă dată de utilizator ce are ca efect

apelarea unei funcţii sau executarea unei comenzi

e-mail Poştă electronică, permite expedierea şiprimirea mesajelor de către utilizatori.

ECMA European Computer ManufacturersAssociation

H HTML Hypertext Markup Language - limbajul de

bază în construcţia paginilor web

I increment operator Operator ce creşte valoarea unei variabile

cu o unitate sau cu un număr precizat atunci când este cazul.

IP Internet Protocol - reprezită un protocolde comunicare pentru internet

IP address Adresă reprezentată pe 32 de biţi ceconstituie identificarea unei staţii de lucru pentru protocolul de comunicare IP.

M modulo Operaţie aritmetică ce permite extragerea

restului în urma împarţirii inexacte a două numere.

S server web Aplicaţie ce permite interpretarea codului

unei pagini web şi redarea informaţiei încapsulată în codul respectiv

shift Referitor la biţi - operaţie ce faciliteazămutarea unui număr de biţi la stânga sau la dreapta în funcţie de necesităţile programator ului

statement Structură de programare ce implică odeclaraţie de variabilă sau funcţie

string Şir de caractere indexate.

Bibliografie:

1. www.javascript.com ianuarie 2006 2. www.javagoodies.com ianuarie 2006 3. www.jworld.com ianuarie 2006 4. www.w 3schools.com/js/ ianuarie 2006 5. R. Allen, Jason D . Gilliam, Charlton Ting - “Pure JavaScript” - Editura sams, 1999

33

suport curs java script

Documents