PROGRAMUL DE FORMARE PROFESIONALA- CALIFICARE - PENTRU OCUPATIA

Designer pagini Web

Java Script

SUPORT DE CURS

BUCURETI 2010

CUPRINS

1. Ce nseamn JavaScript ......................................................................................................................3 1.1. Introducere ........................................................................................................................................3 1.2. Cnd folosim JavaScript ....................................................................................................................3 1.3. Tehnologia bazat pe obiecte ........................................................................................................... 4 2. Detalierea limbajului .......................................................................................................................... 6 2.1. Sintaxa limbajului JavaScript .............................................................................................................6 2.2. Tipuri de date i variabile ...................................................................................................................8 2.3. Operatori i structuri ........................................................................................................................12 2.4. Funcii ............................................................................................................................................. 16 3. JavaScript orientat pe obiecte ........................................................................................................ 19 3.1. Operatori ........................................................................................................................................ 19 3.2. Manipularea obiectelor ....................................................................................................................19 3.3. Funcii de baz ................................................................................................................................24 4. Mediul JavaScript .............................................................................................................................. 26 4.1. Limbajul-server ................................................................................................................................26 4.2. Browsers vs JavaScript ...................................................................................................................26 5. Elemente dinamice ........................................................................................................................... 28 5.1. Cookies ...........................................................................................................................................28 5.2. Windows ..........................................................................................................................................28 5.3. Exemplu meniu dinamic ...................................................................................................................28 6. Index ...................................................................................................................................................32

1. Ce nseamn JavaScript 1.1. Introducere

Pentru a putea nelege mediul Java Script, este absolut necesar s nelegem diferena 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 ctre o aplicaie specializat (compilator) pentru detectarea erorilor i obinerea unui produs accesibil utilizatorului. Din aceast cauz, folosirea lor n domeniul programrii web era nerecomandat. Ulterior, au aprut scripturile, programe ce nu necesitau compilare, cum ar fi sed, awk si Pearl. Un script este o secven de program, un set de instruciuni ce poart denumirea de statements (declaraii). Programul parseaz instruciunile i le execut cte una pe rnd. Este la fel ca n programare, numai c aici regulile sunt mai simple i mai uor de asimilat. Odat cu extinderea internetului, cnd fiecare utilizator, posesor de modem, avea posibilitatea de a face schimb de informaii cu persoane de pretutindeni, s-a simit nevoia unui limbaj care s nlesneasc acest schimb. Astfel, a fost dezvoltat HTML-ul n care, dup scurt timp, s-a simit nevoia unei schimbri. Creatorii de pagini web doreau s controleze mai uor elementele prezentate i aplicaiile lor s fie mai dinamice. Astfel, la data de 4 decembrie 1995, Netscape i Sun au introdus JavaScript 1.0, care iniial a purtat denumirea de LiveScript . Acest limbaj putea fi interpretat de browsere i ddea posibilitatea utilizatorului s programeze n adevratul sens al cuvntului, nu doar s dea o form informaiei, cum se intampla n cazul HTML. Primul browser capabil s interpreteze astfel de scripturi a fost Netscape Navigator 2. Microsoft a implementat limbajul ncepnd cu Internet Explorer 3, i a purtat denumirea de JScript. Modul de comunicare este simplu: informaia este postat pe un server web, utilizatorul trimite o cerere ctre server i primete rspuns cu informaia dorit, sau, eroare, n cazul n care procedeul de trimitere/primire nu a decurs corect. Pentru nceput, legtura dintre utilizator i server era stabilit cu ajutorul CGI-ului - Common Gateway Interface. Acest program ajut la transmiterea datelor ntre browser i server, asigurnd calitatea informaiei trimise/primite, genernd un mesaj ctre utilizator pentru a retrimite informaia n cazul n care aceasta nu este corect sau complet. Mai trziu, clientul a captat un rol important n procesul de comunicare cu serverul, el devenind cel care trebuie s asigure corectitudinea informaiei i verificarea erorilor. Acest lucru era necesar pentru a nlesni legatura cu serverul i pentru a micora perioada de conectare i marimea informaiei schimbat ntre client i server. Rolul CGI-ului a rmas nsemnat deoarece faciliteaz accesul paginilor web la bazele de date i permite manipularea anumitor aplicaii prin intermediul acestora. Mediul de utilizare a scripturilor trebuie s beneficieze de o protecie mpotriva secvenelor de program ce pot afecta datele sau sistemul de operare al utilizatorului.

1.2. Cnd folosim JavaScript ?

Chiar dac permite manipularea informaiei i ridic nivelul dinamic al paginilor, sunt cazuri n care JavaScript poate s lipseasc. Este important de menionat faptul c exist browsere ce mpiedic rularea corect a scripturilor, fie din motive de securitate, fie din cauza anumitor erori. nainte s nceap programarea propriuzis a scripturilor, programatorul trebuie s se intereseze din timp de erorile sau problemele ce pot aprea i apoi s nceap lucrul efectiv. n cazul n care mediul de afiare al paginii nu este compatibil cu JavaScript, se recomand evitarea folosirii acestor scripturi, deoarece pot mpiedica afiarea corecta a ntregii pagini. JavaScript este utilizat n primul rnd pentru a genera o pagin complex ce capteaz atenia utilizatorilor i permite o navigare uoar prin continutul acesteia. De exemplu: mesaje cu bar de navigare (scrolling messages), modificarea dinamic pentru data i ora afiate pe o pagin, meniuri dinamice.

E-mail interactiv este un alt domeniu n care JavaScript este folosit cu success, odat cu apariia noilor aplicaii de e-mail. Referitor la acest domeniu, programatorii trebuie s aib n vedere riscurile i msurile de siguran ce le implic expedierea unui mesaj dintr-o pagin HTML, att din punct de vedere al utilizatorului care dorete confidentialitatea datelor trimise, cat i din punctul de vedere al serverului de e-mail care implic protecii mpotriva expedierilor masive de mesaje necontrolate. Aplicaiile web pot suporta modificri i efecte realizate cu ajutorul JavaScript. Astfel, se pot realiza verificri ale utilizatorilor i parolelor, verificarea crilor de credit, reducerea numrului de erori ce pot aprea n aplicaiile web, recunoaterea browserelor ce suport JavaScript, modificarea proprietilor browserelor la afisarea paginii dorite (culoare, pointer de mouse, alte efecte dinamice). De asemenea, se pot realiza filtrri de IP-uri, recunoateri de IP-uri, contorizri de utilizatori ce acceseaz pagina i diferite alte secvente de cod necesare programatorului n contextul securizrii sau monitorizrii paginii.

1.3. Tehnologia bazat pe obiecte

Pentru a putea explica noiunea 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 aprea n diferite calcule matematice sau logice. Noiunea de variabil st la baz oricrui limbaj de programare i are valori de diferite tipuri (numerice, caractere etc.) dup cum vom vedea n continuare. Tehnologia bazat pe obiecte a aprut din nevoia de a simplifica secvenele de cod prin reducerea numrului de variabile i de a stabili o ordine n program. Pentru cei mai puin obinuii 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 funcii ce definesc proprietile 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 definiie aceleai caracteristici ca i obiectul printe. Vom considera drept exemplu o carte. Definim un obiect cu caracteristicile principale ale carii : object carte () { titlu ; autor ; nr_pagini ; inchiriat ; } n momentul n care avem nevoie de o variabil ce s conin caracteristicile de mai sus vom folosi : carte1 = new carte() ; //new reprezint un constructor cu ajutorul cruia 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 aceleai caracteristici i pot fi manipulate n mod corespunztor. JavaScript nu este n totalitate orientat pe obiecte, fiind clasificat n categoria limbajelor ce au la baz tehnologia bazat pe obiecte. Pentru a nelege mai bine tehnologia bazat pe obiecte vizitai http://www.objectcentral.com . Vom prezenta n continuare structura obiectelor din mediul de lucru JavaScript asupra crora programatorul poate aciona n mod direct. Fiind integrat n mediul HTML, JavaScript utilizeaz elemente HTML pe care le modeleaz, dndu-le proprieti dinamice. Obiectele din mediul JavaScript sunt derivate din noiunea window (fereastr), aa cum se va vedea din schema urmtoare:

window

texture layer frame text link file upload image document password area hidden anchor submit location applet reset plugin radio form history checkbox

button

select

option

Fig. 1 Obiectele din mediul JavaScript

2. Detalierea limbajului 2.1. Sintaxa limbajului:

Codul JavaScript poate fi inclus ntr-un document HTML n dou moduri: a)Declaraii i funcii utilizand tag-ul SCRIPT; b) Tratarea evenimentelor prin utilizarea tag-urilor HTML <SCRIPT> //declaraii i funcii JavaScript </SCRIPT> Sau <SCRIPT LANGUAGE=JavaScript> //declaraii i funcii JavaScript </SCRIPT> JavaScript este case sensitive, spre deosebire de HTML; atenie atunci cnd scriei 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 afieze codul ca text n cadrul paginii curente. Scripturile aflate ntre tag-urile <SCRIPT> sunt evaluate dupa ncrcarea paginii. Funciile sunt ncrcate, dar nu i executate. Ele se execut, doar la apariia unor evenimente. Este important s se neleag diferena ntre definirea funciei i apelarea ei. Definirea nseamn doar declararea funciei i specificarea codului ce se va executa la apelare. Apelarea apare n urma unei aciuni 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),.) //sfrit comentariu --> </SCRIPT> </HEAD> <BODY> <!text html--> </BODY> </HTML>

Fig.2 - Fereastra rezultat n urma rulrii scriptului precedent n general, funciile trebuie definite n seciunea HEAD. Datorit faptului c mai nti se ncarc aceast seciune, utilizarea tehnicii garanteaz ncrcarea funciilor nainte ca utilizatorul s ntreprind o aciune ce ar putea duce la apelarea unei funcii. Ghilimelele simple se utilizeaz pentru delimitarea string-urilor, i, de aceea, se pot distinge parametrii de tip string ce sunt ncadrai de ghilimelele normale. Exemplu cod HTML ce apeleaz o funcie JS: <INPUT TYPE=button VALUE=Click! onClick=funcie(un string)> Evenimentele reprezint rezultatul unor aciuni ntreprinse de utilizator. Prin JavaScript se pot defini script-uri ce se vor executa automat la apariia unui eveniment. Evenimentele sunt incluse n documente ca atribute ale tag-urilor HTML carora li se ataeaz un cod JavaScript ce se va executa. Grupul // este folosit pentru a introduce un comentariu n codul JS. Tot rndul ce urmeaz dup acest grup nu este luat n considerare de ctre browser. Este echivalentul grupului <!--text--> din HTML. Program JavaScript: Este format din tot codul JavaScript care apare ntr-un document HTML. Ordinea de execuie nu corespunde neaprat cu ordinea apariiei codului n fiier. Aplicaie JavaScript: Este considerat a fi o mulime de pagini HTML i scripturi JS, care lucreaz mpreun pentru un anumit scop. O aplicaie JS poate include mai multe programe JS. Structura JavaScript: JS este case-sensitive (cuvinte cheie, nume funcii, obiecte i variabile). Un program JavaScript conine: -variabile -funcii -expresii -obiecte (cu proprieti i metode) -instruciuni (statements) La sfritul instruciunilor este opional folosirea ";". Comentarii: - indicate ca n Java i C++ prin "//" i "/* ... */"

Definire funcii: Se utilizeaz cuvntul cheie "function". Parametrii nu au indicat i tipul, ci doar numele. function numeFuncie(numeParam1, numeParam2, ...) { // instruciuni, declaraii variabile } Primul exemplu de program JavaScript este aplicaia hello world. Acesta este cel mai simplu exemplu i reprezint punctul de start n asimilarea oricrui limbaj de programare. <HTML> <HEAD> <SCRIPT LANGUAGE=JavaScript> document.write(Hello World ! <br>); </SCRIPT> </HEAD> <BODY> Primul cod ce conine JS </BODY> </HTML>

Fig. 3 - Fereastra rezultat n urma rulrii 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 aceluiai 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 nite numere cu virgule mobile. Numerele hexazecimale, ntregi etc. sunt suportate la un nivel mai nalt, dup cum urmeaz:

- integers - sunt numere ce nu conin parte fracional 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 conine parte fracional i pot avea o notaie exponenial pentru o precizie mai mare. Aceast notaie poate s foloseasc e sau E la sfritul numrului zecimal urmat de un numr ntreg n baza zece care s nu depeasc 3 cifre. Prin aceast notaie, JavaScript nelege s multiplice numrul n virgula mobil cu 10 la puterea numrului 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 Math.E Math.LN2 Math.LN10 Math.LOG2E Math.LOG10E Math.PI Math.SQRT2 Tabel 1. Descriere Baza algoritmului natural - numrul e Logarithm natural din 2 Logarithm natural din 10 Logarithm n baza 2 din e Logarithm n baza 10 din e Numrul matematic PI Radical de ordin 2

-alte valori - aceste valori sunt des ntlnite n matematic, dar mai puin utilizate n domeniul calculatoarelor: Valoare Number.MAX_VALUE Number.MIN_VALUE Number.NaN Number.POSITIVE_INFINITY Number.NEGATIVE_INFINITY Tabel 2. Descriere Cel mai mare numr ce poate fi reprezentat Cel mai mic numr ce poate fi reprezentat Not-a-number (nu este o valoare numerica) Infinit pozitiv Infinit negativ

Strings - reprezint partea de text i informaie uor accesibil, indispensabil n orice aplicaie 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 informaia de ctre browser, unele caractere nu pot fi scrise, sau nu sunt luate n considerare. Astfel, pentru a putea fi reprezentate, ele reies dintr-o combinaie de alte caractere: Cod \b \f \n \t \ \ \\ Tabel 3. Caracter Backspace Form feed Linie nou Tab Ghilimele simple Ghilimele Backslash

Alte tipuri - sunt tipuri de date speciale, folosite de programatori pentru a face legtura 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: adevrat (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 diferena 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 execuiei programului. Ele sunt stocate ntr-o zon buffer de memorie i (n cazul JavaScript i nu numai), dup finalizarea execuiei programului, ele sunt terse. Pentru a reui s realizm un cod bine structurat, care s ne permit o verificare ulterioar, este important, pe lng un cod aezat corect n pagin, s folosim i denumiri adecvate pentru variabile. n acest sens, e bine de tiut c denumirea oricrei variabile trebuie s nceap cu o liter sau cu semnul _; dup acest prim caracter restul pot fi litere, numere i semnul underscore _. Aa 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 cuvntului rezervat var. Variabila poate primi o valoare fr ca aceasta s fie definit. n momentul declarrii 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 primete o valore: Nume1=Ion; //variabila declarat ce primete n acelai timp o valoare: var variab1 = 5, variab2 = 6; //afiarea valorii variabilelor: document.write(nume: ,Nume1,, variabila1: ,variab1, i variabila2: , variab2); </SCRIPT>

Fig. 4 - Fereastra rezultat n urma rulrii scriptului precedent

10

n JavaScript putem ntlni 2 tipuri de variabile: variabile globale i variabile locale. Variabilele globale sunt ntlnite la nivelul ntregului program i i pstreaz sau modific valoarea pe durata execuiei acestuia. Variabilele locale sunt folosite n interiorul funciilor, i pstraz sau modific valoarea doar pe parcursul execuiei acestora, la o nou reapelare a funciei, aceste variabile se reiniializeaz conform funciei. Exist posibilitatea ca dou variabile s aib aceeai denumire i valori diferite doar dac una dintre variabile este global i alta este variabil local. n momentul lansrii funciei, se va ine cont de valoarea variabilei locale, urmnd ca la nivel global s fie folosit cealalt variabil, fr a avea nici un efect negativ asupra aplicaiei. 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 nelegere a codului de ctre alt persoan ce nu a fost implicat n realizarea acestuia. <SCRIPT LANGUAGE=JavaScript> //declararea variabilei globale: var i = 6; n = 5; //funcie: function suma() { //declararea variabilelor locale: var i=10; sum=i+i; //afiarea variabilelor locale document.write(Variabile este ,i, i dublul ei este ,sum,<BR>); } //lansarea funciei: suma(); //afiarea variabilelor globale document.write(Variabila1 este ,i, i variabila2 este ,n,<BR>) </SCRIPT> Am vzut cum se comport dou variabile cu acelai 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 acelai timp. Acest tip de dat poart denumirea de array (vector) i reprezint o niruire de valori apelate printr-un numr 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 poziie intermediar oarecare din vector i reprezint ultima poziie din vector. Modul de definire: var v = new Array(10); //definire n care se specific mrimea maxim a vectorului; var v = [3,4,5,9,2]; //vector definit direct cu valorile pe care le va conine (ex: v[2]=5);

11

Numerotarea poziiei n vector se face ncepnd cu cifra 0. n JavaScript orice array poate conine mai multe tipuri difer ite de date: var v = new Array (titlu, autor, stadium, ); Lucrul cu vectori: Metoda join() reverse() sort() concat() slice() splice() push() pop() unshift() shift() toString() Tabel 4. Descriere Concateneaz elementele ntr-un singur string Inverseaz ordinea elementeleor n vector Sorteaz elementele din vector Concateneaz doi vectori ntoarce o seciune din vector Insereaz sau terge elemente din vector Adaug elemente la sfritul vectorului terge ultimul element dintr-un vector Adaug elemente la nceputul vectorului. terge elemente de la nceputul vectorului Convertete elementele ntr-un string

Am prezentat mai sus vectori unidimensionali. Dac fiecare element al vectorului ar fi, la rndul sau, un alt vector, 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 ecuaie; -scdere: -; -nmulire: *; -mprire: /; -modulo: %; - extrage restul rezultat din mprirea a dou numere. Exemple: var adunare = 4+3; scdere = 4-3; nmulire = 4*3; mprire = 4/3; modulo = 4%3; //rezulatul este 1. Ate operaii aritmetice: -pre-incrementarea: ++- adun la valoarea variabilei cifra 1 i permite folosirea rezultatului n alt ecuaie: var numr = 4; suma = (++numr) + 3; //n acest caz variabila suma are valoarea 8 i variabila numr are valoarea 5; -post-incrementarea: ++ - adun la valoarea variabilei cifra 1, dup ce aceasta a fost folosit n ecuaia curent: var numr = 4; suma = (numr++) + 3; // n acest caz, variabila suma are valoarea 7 i variabila numr are valoarea 5; -pred-ecrementation: -- - scade din valoarea variabilei cifra 1 nainte ca aceasta s fie folosit n ecuaie: var numr = 4;

12

suma = (--numr) + 3; // n acest caz, variabila numr are valoare 3 i variabila suma are valoarea 6; - post-decrementation: -- - scade din valoarea variabilei cifra 1, dup ce aceasta a fost folosit n ecuaie: var numr = 4; suma = (num r--) + 3; //n acest caz, variabila numr 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; Observaie: operaiile aritmetice prezentate mai sus, atunci cnd sunt aplicate unor string-uri, ncearc s converteasc valoarea stringului ntr-un numr. - atribuire: =; var numr = 4; Operatori avansai pent ru atribuire: Operator += -= *= /= %= &= |= ^= Tabel 5. Exemplu x+=y x-=y x*=y x/=y x%=y x&=y x|=y x^=y Explicaie x=x+y x=x-y x=x*y x=x/y x=x%y x=x&y x=x|y x=x^y

De asemenea, sunt definite cteva operaii i funcii matematice standard, descrise n tabelul de mai jos: Denumire Math.abs() Math.acos() Math.asin() Math.atan() Math.atan2() Math.cos() Math.exp() Math.floor() Math.log() Math.max() Math.min() Math.pow() Math.random() Math.round() Math.sin() Math.sqrt() Math.tan() Tabel 6. Descriere Valoarea absolut a unei variabile Arccosinus dintr-o valoare Arcsinus dintr-o valoare Arctangenta dintr-o valoare Arctangenta dintr-o valoare Cosinus dintr-o caloare Exponentiala natural Partea ntreaga a unei valori Logaritm natural Maxim Minim La putere O valoare aleatoare Rotunjeste valoarea unui numr fracional Sinus dintr-o valoare Radical de ordin 2 Tangenta dintr-o valoare

Logici: - sunt operatori ce simplific algoritmul de programare i permite compararea valorii de adevr a unei expresii logice cu alt valoare de adevr a unei expresii similare. - logical AND - (i logic) - &&. O expresie ce folosete 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 puin una dintre cele dou valori sunt adevrate. Dac ambele sunt false, atunci rezultatul ntors este fals. Este important de menionat 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 funcie de cea de-a doua valoare. - logical NOT - (nu logic) - !. Este folosit pentru a nega o valoare (pentru a-i schimba valoarea de adevr). Operatori de comparaie: - egalitate - == compar valorile implicate n expresie. Dac nu au acelai tip, ncearca s transforme una din valori pentru a reui compararea (exemplu: o variabil numerica i una ir de caractere, ncearc s transforme irul de caractere ntr-un numr). - inegalitate - != are valoare truedac 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, ntorcnd direct valoarea false. Bitwise: aceti operatori consider operanzii ca numere ntregi pe 32 de bii. Nu sunt foarte folosii, deoarece modul de lucru cu aceti operatori este dificil. - bitwise AND - & - i logic;bitwise OR - | - sau logic; - bitwise XOR - ^ - sau logic exclusive; - shift left - << - numrului din stnga operatorului (un ntreg pe 32 bii) i vor fi mutai spre stnga un numr de bii egal cu operndul din dreapta; -shift right - >> - la fel ca la shift left, deosebirea este c biii sunt mutai spre dreapta; Structuri Condiionale: if - execut o instruciune sau un grup de instruciuni att timp ct condiia iniial este respectat: if (condiie) { //instruciune sau grup de instruciuni; } else { //instruciuni executate n cazul n care condiia nu este respectat; } switch - aceast structura este folosit pentru evaluarea tuturor posibilittilor existente n cazul unei variabile (rezolv toate valorile posibile ale unei variabile) switch (variabila) { case valoare1: instruciune1; break; case valoare2: instruciune2; break; default: instruciune3; } Dac nici una din valorile prezentate prin cuvntul rezervat case nu este cea corect (s fie egal cu valoarea variabilei), atunci este executat seciunea default.

14

Repetitive: for - structur repetitiv compus din dou pri: una pentru contorizarea ciclurilor i o alta, pentru executarea instruciunilor. Spre deosebire de structurile prezentate n continuare, for este considerat o s tructur cu numr fix de pai, resursele pentru executarea ei fiind alocate de la nceput. for (iniializare, condiie, incrementare) { //instruciuni; } while - ins truciune repetitiv ce are condiia de continuare la nceput. Nu are numr finit de pai i incrementarea se realizeaz de ctre programator n zona rezervat instruciunilor. while (condiie) { //instruciuni; } do while - instruciune repetitiv ce are condiia de continuare la sfrit. Spre deosebire de while aceast structura permite rularea instrucunilor pentru primul pas, fr a verifica nici o condiie. Incrementarea se face, de asemenea, n zona rezervat instruciunilor. do { //instruciuni; } while (condiie) Exemplu: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var j=0; i=0; k=0; //structura for document.write("Pentru 'FOR' <br>"); for (var i=0; i<5; i++) //i reprezint variabila ce contorizeaz ciclul repetitiv //i este iniial 0, apoi la fiecare pas se incrementeaz cu valoarea 1 //ciclul se repet ct timp i < 5 { document.write("Ne aflm la pasul ",i," al structurii repetitive 'for'; <br>"); } //structura while document.write("<br>Pentru 'WHILE' <br> "); j=0; //iniializare contor pentru structura while //ne propunem s calculm suma primelor 5 cifre ncepnd cu 0: sum=0;

15

while (j<5) { sum=sum+j; document.write("La pasul ",j," suma este ",sum,"; <br>"); j++; //incrementm j pentru a trece la pasul urmtor } //structura do ... while document.write("<br>Pentru 'DO WHILE' <br>"); i=30; j=2; k=0; //la fiecare pas al structurii do ... while ne propunem s scdem din i pe j //condiia de oprire este ca i sa fie mai mic dect j //la fiecare pas l incrementm pe j cu o unitate //k reprezint contorul do { 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 afiat pentru exemplul cu structuri repetitive

16

2.4. Funcii
Spre deosebire de alte limbaje script, unde noiunea de funcie nu este prezent, JavaScript a adoptat-o i dezvoltat-o, devenind un element cheie n procesul de construcie sau dezvoltare al unui site. Este de la sine neles faptul c nu poate fi comparat complexitatea funciilor n limbajele ce necesit compilare cu cea a funciilor din JS, primele fiind net superioare. Utilitatea funciilor const practic, n accesarea unui set de instruciuni definit ntr-o structur, de fiecare dat cnd este nevoie de acele instruciuni, fr a mai trebui s introducem codul acestora la fiecare utilizare. Setul de instruciuni poate avea diferite grade de complexitate i poate depinde de un numr variabil de parametri. Cuvntul cheie pentru definirea unei structuri de acest gen este "function". Parametrii indic doar numele, iar tipul lor trebuie asociat cu atenie de ctre programator, n momentul apelrii funciei. function numeFuncie(Param1, Param2, ...) { // intruciuni; } O funcie poate executa o serie de instruciuni ce au un efect direct asupra modului de afiare sau asupra unei variabile (ex: o funcie pentru afiarea unei variabile obinut din operaii matematice asupra parametrilor) sau poate fi folosit pentru a obine o valoare ce este utilizat, la rndul ei, n alt funcie sau expresie. Pentru a asocia un rezultat unei funcii, se folosete cuvntul cheie return. Vom prezenta, n continuare, 2 exemple de funcii. Primul exemplu l reprezint o funcie folosit pentru fiare, al doilea o funcie ce trebuie s ntoarc o valoare folosit n program. Exemplul 1: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var v1=5; v2=11; //funcia calculeaz i afieaz restul mpririi 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> a

17

Fig. 6 - Fereastra rezultat n urma rulrii scriptului precedent Exemplul 2: <HTML> <HEAD> <SCRIPT LANGUAGE="JavaScript"> var v1=3; v2=17; sum=0; //funcia calculeaz restul mpririi unei variabile la cealalt //rezultatul obinut 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; // funcia calc() primete valoarea lui m } document.write("Rezultatul operaiei 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

Fig. 7 - Fereastra rezultat n urma rulrii scriptului precedent Exerciii: 1. Realizai un script ce s conin o funcie pentru calcularea mediei aritmetice a dou valori presupuse cunoscute. 2. Realizai un script care s conin o funcie pentru calcularea irului lui Fibonacci pn la 100. 3. Realizai un script care s conin o funcie pentru afiarea tuturor numerelor de la 0 la 100, care mprite la 7, s dea restul 2 sau 3.

3. JavaScript orientat pe obiecte 3.1. Operatori

Un obiect este introdus cu ajutorul cuvntului-cheie object. Fiecare astfel de obiect are o serie de caracteristici definite de programator, caracteristici pe baza crora se vor crea mai departe alte obiecte copil. Acestea din urm sunt introduse cu ajutorul constructoru lui new, cuvnt rezervat ce atribuie noului obiect caracteristicile printelui ce urmeaz n partea sa dreapt: object imobil() { nr_etaje ; nr_apartamente ; an_construcie ; } cas = new imobil() ; cas.nr_etaje = 1; c as.nr_apartamente = 1; cas.an_construcie = 1975; bloc = new imobil(); b loc.nr_etaje = 4;

19

bloc.nr_apartamente = 25; bloc.an_construcie = 1960; vil = new imobil(); vil.nr_etaje = 2; vil.nr_apartamente = 1; vil.an_construcie = 1990; Operatorii implicai n lucrul cu obiecte sunt, n mare parte, identici cu cei prezentai n Capitolul 2. i vom aminti doar pe cei mai importani: Adunare (+); nmulire (*); Scdere (-); mprire (/); 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 obine pe cale ct mai scurt efecte de afiare i noi modal iti de prezentare a imaginii. n cele ce urmeaz, vom vedea cum se utilizeaz practic obiectele i cum in tegrm efectiv limbajul JavaScript n codul HTML. Exemplul urmtor arat cum putem afia o informaie complex i cum putem da posibilitatea clientului s aib acces doar la ce i dorete. < html> <head> <title>Exemplu</ti tle> </head> <script> 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 afiat iniial

21

Fig. 9 - Textul dup selectarea informaiei Cu ajutorul obiectelor, legnd JavaScript de HTML, putem obine o pagin prin care clientul poate fi condiionat s execute diferite operaii. 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 funcie verific dac valoarea cmpului este nul //n caz afirmativ cmpul este trecut ntr-o list de mesaj //aceast list este asociat butonului de trimis valid = 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 cmpuri nu este gol //butonul de trimis devine accesibil } else { valid_report+='Please fill up: \n'; //formarea listei de cmpuri ce trebuiesc completate if (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 &nbsp;&nbsp;:</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:&nbsp;</td><td><input type='text' name='pr' id='pr' value='' onchange='validate()' onmousemove='validate()'></td></tr> <tr><td align='right'>*Last name:&nbsp;</td><td><input type='text' name='nm' id='nm' value='' onchange='validate()' onmousemove='validate()'></td></tr> <tr><td align='right'>*Country/State:&nbsp;</td><td><input type='text' name='tr' id='tr' value='' onchange='validate()' onmousemove='validate()'></td></tr> <tr><td align='right'>City:&nbsp;</td><td><input type='text' name='ors' id='ors' value='' ></td></tr> <tr><td align='right'>*E-mail:&nbsp;</td><td><input type='text' name='mail' id='mail' value='' onchange='validate()' onmousemove='validate()'></td></tr> <tr><td align='right'>*Industry:&nbsp;</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:&nbsp;</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:&nbsp;</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 condiionat, n mare parte, doar de imaginaia programatorului, metodele de lucru fiind multiple i domeniile de aplicabilitate foarte vaste.

3.3. Funcii de baz

Ne vom referi n continuare la funciile cele mai importante ce implic lucrul cu obiecte i la obiectele n sine predefinite n JavaScript.

Array
Funcie length concat() join() pop() push() reverse() toString() Tabel 7. Descriere Numrul elementelor din vector Lipete un vector la un alt vector Trece toate elementele unui vector ntr-o variabil string terge ultimul element dintr-un vector Introduce elemente la sfritul vectorului ntoarce ordinea elementelor dintr-un vector Convertete elementele unui vector n string

24

Date var data1 = new Date(); var data2 = new Date (year, month, day, hours, minutes, seconds, milliseconds2); Funcie getDate() getDay() getMonth() parse() getTime() Tabel 8. String Funcie concat() search() toLowerCase() toUpperCase() length fontsize() Tabel 9. Descriere Concateneaz dou stringuri ntr-unul singur ntoarce indexul (poziia) caracterului cutat Convertete caracterele irului n litere mici Convertete caracterele irului n litere mari Lungimea irului Stabilete mrimea fonturilor ntr-un tag de tip <FONT> Descriere ntoarce ziua curent din lun ntoarce ziua din sptmn ntoarce luna curent Convertete un string ce reprezint o dat n milisecunde ntoarce data i timpul n milisecunde

Button Proprieti: - name - numele butonului - value - textul ce apare pe buton n interfaa grafic; Funcie blur() click() focus() Tabel 10. Descriere Elimin focus-ul de pe un buton Apeleaz butonul prin intermediul mouse-ul (evenimentul onClick) Introduce focus pe un buton

Aceleai proprieti i funcii sunt i pentru Checkbox, Textarea. Document: prin document se nelege o pagina web ce se afieaz ntr-un browser web. Proprietile sunt aceleai ca i n HTML Funcie open() close() write() writeln() Tabel 11. Descriere Deschide sesiunea de scriere pentru document nchide sesiunea de scriere Deschide un text pentru document Deschide un text i o nou linie pentru document

Pe lng obiectele prezentate mai sus, JavaScript cuprinde o numeroas colecie cu diferite funcii i aplicabiliti. Pentru a putea fi nsuite, JavaScript dispune de o documentaie vast n acest sens, fiind la dispoziia oricrui programator JS. Informaiile sunt accesibile la adresa www.purejavascript.com

25

Exerc iii: 1. Modificai exemplul legat de validarea informaiilor prezentat n Subcapitolul 3.2., fcnd toate cmpurile acelei pagini obligatoriu de introdus. 2. Utiliznd programarea bazat pe obiecte realizai un script care s conin 2 cmpuri textarea ce sunt nlocuite cu 2 cmpuri text obinuite la apsarea unui buton.

4. Mediul JavaScript 4.1. Limbajul-server

Pentru a nelege modul de operare al limbajului JavaScript trebuie s avem n vedere cele dou pri implicate n procesul de comunicare: serverul i clientul. Descrierea de pn acum a limbajului a reprezentat modul n care programatorul comand partea de server pentru a trimite informaia corect prii client atunci cnd acesta o cere. Programatorul poate edita ns i comenzi prii de server ce nu trebuiesc interpretate de ctre client deoarece acestea sunt strict adresate serverului. Acest mod de adresare este diferit de cel utilizat pentru a trimite informaii clientului. Codul pentru server este introdus prin intermediul tag-urior: <SERVER> //instruciuni ; </SERVER> O alt diferen o reprezint faptul c n adresarea ctre server sunt folosite metode i obiecte ce nu se ntlnesc la adresarea ctre client, dar nu toate metodele i obiectele folosite pentru adresarea ctre clieni 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 prii client n vederea eliminrii eventualelor 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(parametrii bazei de date). Aceast conexiune poate fi limitat n timp i poate avea msuri de securitate sporite; - trimiterea de mesaje electronice (e-mail-uri) - prin intermediul obiectului SendMail. Aceasta este baza majorittii aplicaiilor web pentru expedierea mesajelor electronice.

4.2. Browsers versus JavaScript

Din punct de vedere al prii client, probleme pot aprea la nivelul interpretrii limbajului. Aplicaia specializat n acest sens poart denumirea de browser. Programatorul trebuie s in cont de versiunea de browser pe care se realizeaz expunerea informaiei i chiar s specifice compatibilitatea scriptului cu diverse versiuni de browser. n pre zent, majoritatea aplicaiilor 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 aplicai ei i aceasta s afieze eronat informaia. Aa cum am artat i n subcapitolul referitor la sintaxa limbajului (subcapitolul 2.1.), este util folosirea tag-urilor de comentarii pentru HTML n evitarea erorilor aprute datorit incompatibilitii browserului cu limbajul JavaScript. n continuare, vom ncerca s punctm versiunile de aplicaii pentru navigare web i versiunile de JavaScript sau JScript cu care acestea sunt compatibile: Browser Netscape Navigator Netscape Navigator Versiune 2.0 2.02 Suport JavaScript 1.0 JavaScript 1.1

26

Netscape Navigator 3.0 JavaScript 1.1 Netscape Navigator 4.0-4.05 JavaScript 1.2 Netscape Navigator 4.06-4.5 JavaScript 1.3 Netscape Navigator 5.0 JavaScript 1.4 Microsoft Internet Explorer 3.0 JScript 1.0 Microsoft Internet Explorer 4.0-4.5 JScript 3.0 Microsoft Internet Explorer 5.0 JScript 5.0 Opera 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. Evoluia software impune o permanent informare a programatorului cu privire la aceste compatibiliti i la posibilitile de mbuntire a aplicaiilor 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 aprea diverse erori: - codul poate aprea pe ecran fiind considerat text HTML; - pagina nu se afieaz, n colul din stnga jos a browser-ului aprnd o eroare de afiare; - pagina este afiat, dar n momentul n care sunt apelate funciile JavaScript apare mesajul de eroare n stnga 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 nelegem un document text ce conine informaie organizat. Acest document este construit d e browser cu scopul de a uura navigarea i de a reduce perioada on-line - perioad n care clientul face s chimb de informaie cu serverul. Acest fiier are o mrime maxim de 4 kilobytes. Cookie-urile fac parte din obiectul document. Asupra lor se pot efectua operaii de scriere i citire. Ele sunt considerate de ctre browser zone temporare de memorare a informaiei, fiind create la nceputul sesiunii, iar dup ncheierea sesiunii browser-ului acestea sunt distruse. Utilizatorul poate controla coninutul acestor fiiere i poate folosi informaia din ele, considerndu-le fiiere normale. Numele se pot citi cu ajutorul sintaxei: var numeCookie = document.cookie Pentru a lucra cu aceast proprietate a documentului, programatorul trebuie s aib un nivel avansat de cunoatere a limbajului.

5.2. Windows
Formarea unei noi ferestre (window) se bazeaz pe relaia printe-copil, noua fereastr fiind cosnsiderat copil pentru fereastra principal denumit printe. 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 fereastrNou i va reprezenta copilul ferestrei index.html. Proprietile noii ferestre sunt trecute de asemenea resizeable, menubar, toolbar. Dac dorim s aflm denumirea ferestrei printe folosim cuvntul rezervat opener, iar sintaxa este urmtoarea: var numePrinte = window.opener.document.nume; Variabila numeParinte va primi numele ferestrei de unde a fost iniiat comanda pentru fereastra curent - pentru copil. Comenzile pentru orice fereastr nou sunt aceleai ca i pentru fereastra p rinte.

5.3. Exemplu meniu dinamic

<html> <head> <script type="text/javascript"> //aplicaia are la baz o structur printe/copil //meniurile principale sunt considerate printe i n funcie de ele vor fi deschise meniurile copil (submeniurile) var persistmenu="yes" //"yes" sau "no". va verifica dac id-rile meniurilor sunt consecutive var 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 cnd pagina este ncrcat. //tagurile <style>...</style> sunt specifice limbajului CSS document.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

function SwitchMenu(obj){ if(document.getElementById){ var el = document.getElementById(obj); var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //dac un meniu principal este deschis n momentul n care altul este accesat, primul este nchis -//automat if(el.style.display != "block"){ for (var i=0; i<ar.length; i++){ if (ar[i].className=="submenu") ar[i].style.display = "none"; } el.style.display = "block"; }else{ el.style.display = "none"; } } } //prin aceast funcie se obine accesul la un fisier tip cookie function get_cookie(Name) { v ar search = Name + "=" var returnvalue = ""; if (document.cookie.length > 0) { offset = document.cookie.indexOf(search) if (offset != -1) { offset += search.length end = documen t.cookie.indexOf(";", offset); if (end == -1) end = document.cookie.length; returnvalue=unescape(document.cookie.substring(offset, end)) } } return returnvalue; } //verific disponibilitatea meniului n raport cu site-ul/pagina function onloadfunction(){ if (persistmenu=="yes"){ var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=get_cookie(cookiename) if (cookievalue!="") document.getElementById(cookievalue).style.display="block" } } //nregistreaz inform aiile n cookie function savemenustate(){ var inc=1, blockid="" while (document .getElementById("sub"+inc)){ if (document.getElementById("sub"+inc).style.display=="block"){ blockid="sub"+inc break }

29

inc++ } var cookiename=(persisttype=="sitewide")? "switchmenu" : window.location.pathname var cookievalue=(persisttype=="sitewide")? blockid+";path=/" : blockid document.cookie=cookiename+"="+cookievalue } //noiuni de iniializare a meniului la ncrea/rencrcarea paginii if (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 fcut corect atunci se insereaz informaia n cookie if (persistmenu=="yes" && document.getElementById) window.onunload=savemenustate </script> </head> <body> <div id="masterdiv"> <!--Primul Meniu Principal--> <div class="menutitle" onclick="SwitchMenu('sub1')">Site-uri externe</div> <!--Submeniuri--> <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> <!--Al Doilea Meniu Principal--> <div class="menutitle" onclick="SwitchMenu('sub2')">Site-uri interne</div> <!--Submeniuri--> <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> <!--Al Treilea Meniu Principal--> <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 iniial

Fig. 12 - Meniu deschis pentru a ccesare

31

6. Index A abs() array Valoarea absolut a variabilei dintre paranteze Tip de dat indexat ce conine valori multiple. Indexarea se face ncepnd cu cifra 0. Unitate elementar de nregistrare a informaiei reprezentat binar (0 i 1). Reprezint a opta parte dintr-un byte. Unitate de nregistrare a informaiei. 8bii=1byte=1octet Operatori folosii n manipularea biilor Tip de variabil logic. Ia valorile 1 pentru adevrat i 0 pentru fals Aplicaie ce permite vizualizarea paginilor web i a aplicaiilor web-based Zon de memorie temporar ce permite stocarea informaiilor folosite pe parcursul rulrii unui program. Limbaj de programare ce acord o atenie deosebit lucrului cu obiecte i clase de obiecte Termen folosit in informatic, indic faptul c aplicaia face diferena ntre majuscule i litere mici. Proces de verificare i construire a corpului unui program n vederea obinerii unui produs accesibil utilizatorului. Element de programare folosit n definirea variabilelor a cror structur a fost deja definit. Reprezint un fiier de regul text ce conine informaie organizat cu privire la o anumit pagin web. Proces de depistare i corectare a erorilor. Referitor la afiare, n majoritatea cazurilor reprezint proprietaile obiectelor la afiare. 32

B bit byte bitwise operators boolean browser buffer

C C++ case sensitive compilare constructor cookie

D debug display

E eveniment e-mail ECMA H HTML I increment operator IP IP address Operator ce crete valoarea unei variabile cu o unitate sau cu un numr precizat atunci cnd este cazul. Internet Protocol - reprezit un protocol de comunicare pentru internet Adres reprezentat pe 32 de bii ce constituie identificarea unei staii de lucru pentru protocolul de comunicare IP. Operaie aritmetic ce permite extragerea restului n urma mparirii inexacte a dou numere. Aplicaie ce permite interpretarea codului unei pagini web i redarea informaiei ncapsulat n codul respectiv Referitor la bii - operaie ce faciliteaz mutarea unui numr de bii la stnga sau la dreapta n funcie de necesitile programator ului Structur de programare ce implic o declaraie de variabil sau funcie ir de caractere indexate. Bibliografie:
1. 2. 3. 4. 5. www.javascript.com ianuarie 2006 www.javagoodies.com ianuarie 2006 www.jworld.com ianuarie 2006 www.w 3schools.com/js/ ianuarie 2006 R. Allen, Jason D . Gilliam, Charlton Ting - Pure

Comand dat de utilizator ce are ca efect apelarea unei funcii sau executarea unei comenzi Pot electronic, permite expedierea i primirea mesajelor de ctre utilizatori. European Computer Manufacturers Association Hypertext Markup Language - limbajul de baz n construcia paginilor web

M modulo

S server web shift

statement string

JavaScript - Editura sams, 1999

33