Pentru Lia si Andrei cv.

Introducere

Vasile Crisan

Iulian Pah

Teodora Chis

Pg.1 si 2 se interschimba Voicu.la Medeleni

JavaScript

Introducere
Introducere Capitolul 1. Variabile si obiecte 1.1.Variabile 1.2.Obiecte

Capitolul 2. Operatori,operatii si expresii in JS 2.1.Operatori de atribuire 2.2.Operatori aritmetici 2.3.Operatori de comparative 2.4.Operatori logici 2.5.Operatii cu siruri de caractere 2.6.Operatori conditionali 2.7.Precedenta opertorilor 2.8.Expresii in JS

Capitolul 3.Instructiuni si structuri de control 3.1. Instructiunea ifelse 3.2. Instructiunea while 3.3. Instructiunea dowhile 3.4. Insructiunea for 3.5. Instructiunile continue si break 3.6. Instructiunea label 3.7. Instructiunea switch 3.8. Instructiunea forin 3.9. Instructiunea with 3.10. Instructiuni de comentariu 3.11. Instructiunea var Capitolul 4.Functii in JavaScript 4.1. Definirea functiilor in JavaScript 4.2. Metoda 4.3. Crearea obiectelor

Introducere
4.4. Functii speciale

Capitolul 5. Evenimente 5.1. Definirea evenimentelor 5.2. Handlere de eveniment 5.3. Resetarea handlerelor de eveniment

Capitolul 6. Obiecte soft in JavaScript 6.1. Obiectul window 6.1.1. Ce este obiectul window 6.1.2. Metoda prompt() 6.1.3. Metoda alert 6.1.4. Metoda confirm 6.1.5. Proprietatea status 6.1.6.Proprietatile open() si close() 6.1.7. Proprietatea opener 6.1.8.Obiectul self 6.1.9.Metoda Scroll

Capitolul 7. Obiecte de nivel I 7.1.Obiectul frame (cadru) 7.2.Obiectul form (formular) 7.2.1. Proprietatea action 7.2.2. Proprietatea method 7.3. Obiectul this 7.4. Evenimente false 7.5. Obiectul location 7.5.1.Protocol 7.5.2. host 7.5.3. hostname 7.5.4. port 7.5.5. pathname 7.5.6. href 7.5.7.hash

Introducere
7.5.8. search 7.6.Obiectul History 7.7. Obiectul Document 7.7.1.bgColor 7.7.2.fgColor 7.7.3.title 7.7.4.clear 7.7.5.write si writeln Capitolul 8. Siruri 8.1.join() 8.2.reverse() 8.3.sort() Capitolul 9. Obiectele Math si Number 9.1.Obiectul Math 9.2.Obiectul Number Capitolul 10.Obiectele String si Date 10.1.obiectul String 10.1.1. concatenarea stringurilor 10.1.2. proprietati si metode 10.2.Obiectul Date Capitolul 11.Imagini si sunete 11.1.Imagini 11.2.Sunete Capitolul 12. Obiectele Navigator si Cookie 12.1.Obiectul Navigator 12.2.Obiectul Cookie Capitolul 13.Foi de stil in cascada (CSS) Capitolul 14 Straturi Capitolul 15 XML (eXtensible Markup Language ) 15.1. XML siCSS

Introducere
15.2. XML si XSLT Partea II: Un alt punct de vedere-Standartizare Capitolul 15 XML (eXtensible Markup Language ) 15.1. XML siCSS 15.2. XML si XSLT Capitolul 16 Modelul documentului obiect (DOM) 16.1.HTML si DOM 16.2. XML siDOM

Introducere

. Simularea realitatii inconjuratoare pe calculator-cunoscuta sub numele de realitate virtuala este tot mai frecvent intilnita in domeniile legate de medicina-terapie cibernetca si educatie elerning. Anumite sisteme permit pe linga informatii grafice respectiv acustice si informatii tactile.In prezent exista incercari de simulare chiar si a mirosului. . Firma NTT Communications din Japonia ofera deja spre vinzare un sistem de simulare a mirosului conectat la Internet pentru a fi folosit in restaurante la atragerea clientilor. Cartea de fata isi propune familiarizarea cititorului cu manipularea informatiei folosind ceea ce se numeste un limbaj de

Introducere

scriptare cu grafica bidimensionala si posibilitati de animatie si sunet o prima etapa in simularea realitatii virtuale. Pe de alta parte cartea este justificata de cresterea interesului pentru Internet, ceea ce a determinat introducerea de noi concepte si chiar limbaje noi de programare. La nceputurile sale limbajul folosit pentru scrierea paginilor Web a fost HTML, adic HyperText Markup Language. Limbajul acesta permite prezentarea unui text, a imaginilor i a legturilor. Dezavantajul major l constituie ns lipsa de grafic animat. Chiar dac creatorul de pagini Web are acces la CGI-ul serverului Web, creterea complexitii n programare presupus de aceasta cere efort i cunotine de programare speciale. n plus, accesul la multimedia nu este suportat de CGI. Pn la introducerea limbajului Java pentru a viziona un film, o animaie sau a asculta muzic era nevoie de un program suplimentar care nu avea nimic legat de browser-ul folosit. n Java toate aceste lucruri se fac n mod automat. Nu sunt necesare programe ajuttoare i aplicaiile Java pot s fie rulate pe orice browser i orice platform Era necesar un sistem care s mbine puterea limbajului Java cu simplitatea unui script. Astfel s-a nscut 'JAVASCRIPT' conceput special lucrului n World Wide Web si dedicat acelora fr nici un fel de cunotine i experien n programare. Singurul lucru cerut sunt cunotine de HTML.

JavaScript este n esen un limbaj de scriptare prin care elementele dintr-un document pot fi accesate i, n consecin, manipulate. A fost dezvoltat de Netscape pentru paginile Web. Limbajele JavaScript i Java sunt asemntoare deoarece ambele fac parte din familia limbajelor orientate spre obiect. Diferena esenial este ns c Java este capabil s-i creeze singur evenimentele n timp ce JavaScript folosete numai evenimentele predefinite. Java este un limbaj de programare i codul trebuie s fie compilat nainte de execuie. JavaScript este un text coninnd cuvinte cheie, funcii, structuri de control, etc care nu se compileaz, ci se execut linie cu linie n mod direct. Codul

Introducere

JavaScript nu poate funciona singur, el este nglobat ntr-o pagina Web care la rndul ei are nevoie de un browser. n consecin, browser-ul trebuie s neleag codul JavaScript. nc nu toate browser-ele suport toate instruciunile JavaScript. Exist multe diferene ntre versiunile Internet Explorer, la fel ca i ntre versiunile Netscape sau ntre cele doua. Pe de alt parte, JavaScript nu se confund cu HTML cu toate c cele doua limbaje au o serie de reguli similare. JavaScript este nglobat n HTML i este salvat ca text la fel ca i HTML. Cu toate acestea, n HTML spaiile nu conteaz. Codul HTML se poate scrie pe o singura linie. In JavaScript acest lucru se ntmpl numai n cazuri speciale, spatiile suplimentare ducnd de obicei la erori. De aceea este important ca salvarea codului s se fac n aa fel nct s nu se introduc suplimentar spaii sau alte semne. HTML-ul folosete pentru descrierea paginii etichete (tag-uri), <TAG>, care de cele mai multe ori mrginesc un text <TAG>text</TAG>. De regul, etichetele posed anumite carcteristici numitele atribute <TAG atribut1=a atribut2=b> ntr-un document HTML scriptul JavaScript este indicat prin etichetele <SCRIPT atribute> codul JavaScript </SCRIPT> La deschiderea unui document HTML care conine scripturi JavaScript, browserul evalueaz funciile din script i le stocheaz. Aceste funcii vor fi executate numai n urma declanrii unor evenimente n pagina, cum ar fi punerea mousul-ui deasupra unei imagini, executarea clic pe un buton i altele. Atributele pentru SCIRPT sunt language i src. Atributul language indic limbajul folosit n scriptul respectiv. Este necesar numai dac browserul suport mai multe limbaje de scriptare, cum ar fi VBScript un limbaj de scriptare similar cu

Introducere
Visual Basic in cazul Microsoft.

Daca codul JavaScript nu este inclus direct n codul sursa a paginii Web i este localizat la adresa URL, apelarea lui se face prin atributul src. <SCRIPT src="URL-ul unde este locat codul JavaScript"> </SCRIPT> (URL sunt iniialele de la 'Uniform Resource Locator' i reprezint adresa oricrei entitati de pe Internet. Nu exist dou obiecte cu acelai URL.). n acest caz, fiierul text al codului JavaScript trebuie s aib extensia .js. n acest fel scriptul poate fi folosit n mai multe pagini Web fr s fie inclus explicit n nici un cod surs a paginilor fiind astfel protejat de vizitatorii paginii Web. Tag-urile <SCRIPT> i </SCRIPT> se plaseaz acolo unde este nevoie s se execute scriptul. Nu este nevoie ns s punem tot codul JavaScript ntr-un singur loc. Putem folosi aceste taguri ori de cte ori este nevoie i n orice loc. Este ns indicat ca: 1. Definiiile folosite n funciile din scripturi s fie localizate ntre <HEAD> i </HEAD> din pagina HTML. Scripturile plasate n aceast parte a HTML sunt ncrcate naintea celorlalte pri ale paginii. Dac codul JavaScript este n zona <body></body> a HTML, se poate realiza o dinamic a documentului, de exemplu prin afiarea momentului temporal. 2. Funciile trebuie definite naintea apelrii lor. Orice script aflat ntr-un fiier separat i apelat prin SRC este evaluat naintea oricrei instruciuni din pagina Web. Scipturile din codul JavaScript sunt evaluate numai dup ncrcarea paginii, dar nainte de afiarea ei. Pentru executarea scriptului, trebuie ca browserul s suporte (s recunoasc), scripturile JavaScript. n cazul negativ, instruciunile vor aprea ca text HTML. Pentru a evita acest lucru coninutul scriptului se comenteaz, adic se pune intre tag-urile:

Introducere 10
<!-- .. //--> Browser-ele care nu suport JavaScript interpreteaz instruciunile JavaScript ca text HTML i-l ignor deoarece comentariul n HTML este <!-- -->. Aceste comentarii trebuie s fie incluse ntre etichetele <script> i </script>. Dac se pun n afara lor, toat partea de script este comentat i programul nu funcioneaz corect. <!poate fi urmat de un text situat ntr-o singura linie. Din cauza c semnele de comentariu sunt n interiorul scriptului, trebuie comentat altfel este interpretat ca un element JavaScript (//). (Ultima linie de comentariu conine // ce reprezint un comentariu dar de data aceasta n JavaScript.) Un program JavaScript se construiete din funcii, instruciuni i operatori. O comanda de scriere ,de exemplu, n JavaScript are forma general Document.write(textul de scris); Semnul ; de la sfritul liniei de comand indic sfritul comenzii. Comenzile se pot extinde pe mai multe linii. Cnd acestea sunt incluse ntr-o singura linie atunci semnul ; este necesar pentru delimitarea comenzilor. In afara de acest caz semnul ; este opional. Un grup de comenzi inclus ntre acolade formeaz un bloc de comenzi care se execut secvenial. Aceasta situaie se intilneste la instruciunea if cnd realizarea condiiei poate genera executarea unui bloc de comenzi n loc de una singur. n exemplul urmtor blocul conine n comenzi: { comanda_1 comanda_2

10

Introducere 11
comanda_n } JavaScript folosete ca elemente de limbaj variabile, obiecte, i n plus, evenimente care declaneaz aciuni cu efect asupra paginii Web. Evenimentele sunt de altfel o modalitate de interaciune a utilizatorului cu pagina Web. Aceast particularitate face din JavaScript un mijloc adecvat pentru crearea de pagini dinamice, soft educaional, educaie la distant i alte aplicaii moderne. Simplitatea programrii in JavaScript confer atractivitate i robustee codului la un nivel de realizare grafic comparabil cu limbaje mult mai pretenioase. Cluj2008 Autorii

Capitolul 1Variabile i obiecte

1.1. Variabile Unul din elementele de baza n JavaScript sunt variabilele sau numele de variabile. Variabilelor li se asociaz valori. n timpul execuiei, locul variabilelor este luat de valorile atribuite lor. Variabilele permit programatorului s nvee computerul s fac operaii indiferent de valoarea ataat variabilelor la fel ca ntr-o expresie algebric. Cu toate c numele variabilelor este la discreia programatorului, exist cteva reguli: numele de variabile este format dintr-o grupare de semne, primul fiind ntotdeauna o liter. Numele nu poate ncepe cu o cifr sau alt caracter nealfanumeric. De obicei, se aleg ca nume de variabile nume cu semnificaie pentru codul respectiv; nu se poate folosi un spaiu liber n interiorul unei variabile;

11

Introducere 12
nu se poate folosi semnul sau + n interiorul variabilelor. Semnul - se va interpreta ca operaie de scdere, iar + ca i concatenarea a dou iruri. Nu se vor folosi nici semnele * si /; literele mari sunt interpretate diferit de cele mici: c este diferit de C; numrul de caractere permis ntr-un nume de variabil difer, dar este mai sigura folosirea a mai puin de 10 semne; nu pot fi folosite cuvintele rezervate care n JavaScript au o semnificaie prestabilit.

Valorile atribuite variabilelor pot fi: valori numerice: 22, 77, -99 etc. valoarea null; valoarea NaN; iruri formate printr-o niruire de semne sau caractere "qqw"; f^^^&*("; :89777"; formate dintr-o succesiune de caractere crora nu li se atribuie o valoare numeric. (irurile de caractere sunt ntotdeauna delimitate de ghilimele "...".); valori logice sau booleene care nseamn de fapt `adevrat` sau `fals` (mai exact `true` sau `false`); caractere speciale (nu se pun intre ghilimele): \b un spaiu napoi; \f formfeed; \n linie nou; \r enter; \t tab. Asignarea, sau atribuirea valorilor concrete la variabile se face ca de obicei prin var nume_variabil = valoare var indica faptul c nume_variabil este un nume de variabil, i precede toate instruciunile de atribuire. var nume = "wefgqerg" nseamn atribuirea unui ir de caractere variabilei nume, iar

12

Introducere 13
var nume2 = true;sau var nume2 = false nseamn c nume2 este o variabil logic. Var x = null nu nseamn atribuirea lui x a nici unui tip de date. Null poate fi convertit la orice tip n funcie de context. Pentru numere el se transform n 0, pentru ir se transform n ir gol iar cnd se transform n variabil logica trece n false. Anumite funcii returneaz o valoare special, NaN, care are semnificaia c valoarea nu este un numr. n sistemul de operare UNIX astfel de valori pot fi obtinute prin parseInt() i parseFloat() cnd argumentul nu este potrivit definiiei funciilor. Pe lng valorile finite, n practica programrii se definete valoarea infinit infinity prin proprietile pe care le are: nmulind `infinity` cu orice numr, inclusiv el nsui rezult tot `infinity` i mprind un numr cu `infinity` se obine 0. O alt valoare special este `undefined`, adic o variabil nedefinit. JavaScript spre deosebire de Java i C are proprietatea c variabilele nu sunt predefinite n ceea ce privete tipul i aceeai variabil poate s fie considerat de diferite tipuri n funcie de context. De aici rezult i posibilitatea convertirii unui tip de variabil n altul. Daca de exemplu Vsir este o variabil ir, iar numr este o variabil numeric, Vsir + numar produce conversia lui numr la ir i apoi concatenarea irurilor. Dac nsa combinaia se face invers numar + Vsir, JavaScript ncearc conversia lui Vsir n valoare numeric i apoi il aduna aritmetic la numr. Dac irul poate fi convertit la valoare numeric, atunci se obine un rezultat corect. Dac nu, rezultatul este eronat. Aici am ilustrat ceea ce se numete conversia implicit n JavaScript. Citeva conversii sunt corecte: `false` trece in 0, irul 11 trece n numrul 11, null trece n orice. Conversia ns a lui `5.0` n ntregul 5 este chestionabil. Din aceast cauz este indicat folosirea conversiei explicite ori de

13

Introducere 14
cte ori este posibil, conversia implicit folosindu-se cu mare atenie. Pentru o programare sigur este recomandat stabilirea unei reguli pe care s-o respectm: Folosirea conversiei implicite s se fac spre un ir i niciodat spre un numr, pentru ca conversia unei cantiti nenumerice la un numr produce de cele mai multe ori erori. Procesul acesta de combinare poart denumirea de casting. n versiunile mai noi ale JavaScript s-au adugat dou funcii parseInt() si parseFloat() care transform iruri n numere ntregi sau reale. De exemplu, parseInt("22") transform irul "22" n numrul ntreg 22. n acelai fel, parseFloat("22.5") transform irul"22.5" n numrul real 22.5. Forma general a funciilor este parseInt(sir,baza) si parseFloat(sir). Numrul returnat de parseInt este n baza baza. Funcia convertete irul pn cnd ntlnete n ir un caracter nenumeric i returneaz rezultatul. Dac primul caracter nu poate fi transformat n numr, funcia returneaz 0. ParseFloat convertete un ir ntr-un numr real, comportamentul fiind similar cu parseInt. Trebuie remarcat c pentru uurarea programrii alegerea numelor de variabile trebuie s fie ct mai aproape de semnificaia variabilei n cadrul programului. Spre deosebire de alte limbaje, tipul variabilei este fixat de valoarea atribuit ei. Limbajul JavaScript permite mprirea variabilelor n globale sau locale. n JavaScript diferena dintre ele este efectul locului n care au fost definite. Variabilele locale se definesc in interiorul functiilor si au semnificatie numai aici.La apelarea functiei variabila este creata de fiecare data. De aceea ea nu are semnificatie inafara functiei.Variabilele globale se definesc inafara functiilor si isi mentin semnificatia in tot scriptul,inclusiv in cadrul functiilor. Este util ca aceste variabile sa se incarce inainte de executia codului si de aceea ele se definesc de obicei in sectiunea head a codului.

14

Introducere 15
1.2. Obiecte Pe lng variabile i valori atribuite variabilelor, JavaScript folosete i aa numitele obiecte. Acestea plaseaz JavaScript n limbajele orientate spre obiect cu toate c pn n prezent nu toate conceptele specifice programrii orientate spre obiect sunt incluse n acest limbaj. Un obiect in programarea orientata spre obiect poate fi o reprezentare a unui obiect real la fel de bine ca i un obiect abstract, cum ar fi obiectul Math, care conine operaiile aritmetice de calcul. Obiectul se compune din variabile a cror valori vor descrie starea obiectului real i aa numitele metode care dau modul n care funcioneaz obiectul respectiv. Sa considerm obiectul real stilou care este rou, cost 100 $ i scrie subire. Obiectul stilou n JavaScript va fi descris de stilou.culoare="rosu" stilou.pret=100 stilou.scris() Primele doua caracteristici arat starea obiectului i au valori bine definite. Aceste caracteristici poart numele de proprieti, la fel ca n viaa real. Ele pot fi specificate prin sintaxa nume_obiect.proprietate Ultima proprietate a obiectului stilou arat deosebit i se numete metoda. Tehnic, metoda este o funcie pe post de proprietate. Cu alte cuvinte, ea reprezint o proprietate care poate fi calculat sau precizat n mod diferit ca urmare a diferitelor circumstane stabilite de programator. Dac metoda la rndul ei apeleaz alte metode, care nu mai sunt folosite n restul codului, atunci acestea ultimele se numesc metode interne. Aceste metode nu sunt apelate direct de programator.

15

Introducere 16
Metodele care pot fi apelate si de alte obiecte se numesc publice.Daca insa ele se folosesc numai pentru obiectul in cauza se numesc private. Ascunderea valorilor variabilelor folosind metode se numete ncapsulare. Aceasta ncapsulare limiteaz accesul la informaii fr permisiunea programatorului. ntr-o aplicaie s-ar putea s nu se doreasc accesul la anumite date. Utilizatorul este ajutat i prin metod va schimba n mod corespunztor variabila Din cauz c posed proprieti, caracteristici comune, aa cum se ntmpl i n realitate, obiectele se pot grupa mpreuna. Toate autoturismele se pot grupa mpreun. La fel, toate cruele, toate universitile, etc. Aceste grupe mari de obiecte care posed acelai tip de proprieti formeaz clasele. Un obiect particular dintr-o clas este o instan a acelei clase. n Java i C++ aceasta este situaia. n JavaScript nu exist instruciuni pentru clase ns, aa cum am artat, pot exista tipuri de obiecte, sau prototipuri cum se mai numesc. Un obiect nou se poate defini folosind metoda `new` aplicat unui tip de obiect predefinit sau creat de noi. n JavaScript nu se poate opera la nivel de clase i de aceea limbajul JavaScript se spune ca este `bazat pe instane`. Obiectele din JavaScript sunt definite la fel cu cele din alte limbaje orientate spre obiect. Dar spre deosebire de Java, C++ sau alte limbaje orientate spre obiect, JavaScript nu are proprieti de motenire, nu exist nici o ierarhie de clase. Obiectul JavaScript este bazat pe o ierarhie de continere. Obiectul poate fi considerat ca un container, ntre obiectul principal i oricare din obiectele coninute ca proprieti nu exist dect legtura dintre container i coninut. De aceea, un obiect nu poate moteni nici o proprietate a altui obiect i nu exist o ierarhie de obiecte.

Capitolul 2 Operatori, operaii i expresii n JavaScript

16

Introducere 17

2.1.Operatori de atribuire

Semnul egal folosit pentru atribuirea de valori unei variabile se numete operator de atribuire. Operatorii de atribuire sunt de mai multe feluri: = atribuie valoarea operandului din dreapta la operandul din stnga, iar dac n partea dreapt este o expresie, de exemplu b+c se evalueaz nti expresia din dreapta semnului = ,(b+c), iar valoarea obinut se atribuie variabilei din stnga operatorului, adic lui a. i=i+1 nseamn c valoarea lui i din memorie se adun cu 1, iar rezultatul se atribuie tot lui i (pentru c este n stnga semnului deatribuire). += aduna operandul din stnga cu cel din dreapta i atribuie rezultatul celui din stnga -= scade din operandul din stnga din operandul din dreapta i atribuie rezultatul celui din stnga *= multiplic cei doi operanzi i atribuie rezultatul celui din stnga /= mparte operandul din stnga cu operandul din dreapta i atribuie rezultatul celui din stnga %=mparte operandul din stnga cu cel din dreapta i atribuie restul mpririi operandului din stnga. Aceste operaii sunt echivalente cu a += b este echivalenta cu a = a + b a -= b este echivalenta cu a = a - b a * = b este echivalenta cu a = a * b a /= b este echivalenta cu a = a / b a %=b este echivalenta cu a = a % b Exist i ali operatori de atribuire cum ar fi <<=, >>= si ^= care se refer la numere scrise n sistemul binar.

17

Introducere 18
2.2. Operatori aritmetici Operaiile care se execut cu valorile variabilelor pot sa fie: operatii aritmetice binare: + (adunare), - (scdere), * (nmulire), / (mprire) i % (modulo) si 'unare' care nu necesit dect un singur operand. n JavaScript exist trei operatori unari: ++ (incrementare), -- (decrementare) i (negare): a=i++ ; Variabila i este incrementat cu 1. Prin atribuire a conine valoarea lui i nainte de incrementare pentru c ++ este situat dup variabila i. Dac a=++i; a va conine variabila i incrementat cu 1. Acest exemplu este de fapt o nclcare a regulii de atribuire care stabilete c nti se fac operaiile din dreapta semnului de atribuire, =, i apoi se atribuie. Acest exemplu se nscrie insa n regulile de preceden la operaiile cu mai muli operatori. Operaia de decrementare (--) este la fel ca i cea de incrementare cu deosebirea ca valoarea variabilei descrete cu o unitate. Operaia de negare schimb semnul valorii numerice ataate variabilei ca i n algebra. Dac un numr ntreg este adunat la un numr real, rezultatul va fi un numr real. Dac se mpart dou numere ntregi, rezultatul este tot un ntreg. 9/2 duce la rezultatul 4, n loc de 4,5. 2.3 Operatori de comparaie (==,<,<=,>,>=,!=) Acesti operatori acioneaz att asupra irurilor ct i a numerelor. Cnd acioneaz asupra numerelor, rezultatul comparaiei va fi o

18

Introducere 19
valoare boolean. a == 3 nseamn c dac a are valoarea 3 atunci comparaia va da valoarea adevrat (true). n caz contrar, valoarea produs va fi fals (false). Cnd acioneaz asupra irurilor, comparaia se bazeaz pe ordinea din dicionar a irurilor. Asir < Bsir va da `true` pentru c primul ir ncepe cu o liter situat n alfabet naintea primei litere a irului din dreapta. != returneaz valoarea true, dac operanzii nu sunt egali, iar <= returneaz valoarea true, dac operandul din stnga este mai mic sau egal cu cel din dreapta. Ceilali operatori au semnificaii similare.

2.4 Operatorii logici Sunt AND logic, OR logic i NOT logic i sunt similari cu operatorii de comparare. Primii doi sunt operatori binari, iar ultimul este operator unar. La fel ca i operatorii de comparaie acetia, compar dou valori i dau rezultatul `true` sau false. Diferena esenial este c operatorii logici compar dou variabile logice. Operatorul AND (&&) ( a < 8) && ( a > 1) va da valoarea `true`, dac a este mai mare dect 1 i mai mic dect 8. Dac una sau ambele condiii nu sunt ndeplinite, rezultatul va fi false. Operatorul OR ( || ) ( a < 8) || ( a > 1) va fi `true`, dac oricare dintre cele 2 comparaii este adevrat sau dac amndou sunt adevrate. Numai dac amndou comparaiile sunt false, atunci rezultatul va fi false. Din regulile expuse se pot deduce urmtoarele observaii:

19

Introducere 20
`false` && `orice altceva` este ntotdeauna `false` `true` | | `orice altceva` este ntotdeauna `true` Aceasta nseamn c se pot evalua, n cazul celor doi operatori numai primul operand, rezultatul fiind independent de al doilea. Daca un operand este `true`, atunci operat cu ! va da false. !( a = 8 ) d valoarea `true`, dac a nu este 8. 2.5. Operaii cu iruri de caractere Deoarece irurile de caractere nu sunt nici variabile numerice i nici expresii aritmetice, operaiile de comparare a irurilor au o alt semnificaie. Pentru ca dou iruri sa fie egale "wwert" == "wwdes"; trebuie s fie comparate caracter cu caracter. Rezultatul comparaiei din exemplu va fi false. n acest caz, operaiile >, >= i < sau <= nu au sens n JavaScrip. Se aplic insa este diferit de (!=) Comparaia irurilor numerice are sens n JavaScript din cauza modului de evaluare a comparaiei in JavaScript. "8" < "1" nseamn n JavaScript ca i n algebr 8 < 1 i va conduce la valoarea false. n JavaScript, irul care, n acest caz, trebuie comparat este transformat ntr-o valoare numeric i, n consecin, cifrele formnd irul au ataat o valoare numeric care este chiar numrul format din cifrele variabilei ir. n acest fel, cele dou iruri pot fi comparate. Sirurile pot fi concatenate cu operatorii de concatenare + sau +=. "12 " + "1" va da "121"

20

Introducere 21
2.6 Operatori condiionali

Un exemplu este edificator (conditie) ? A : B dac condiia este ndeplinit, valoarea care rezult va fi A, dac nu, va fi B. Mai explicit. S atam expresiei o variabil, de exemplu C, C = (condiie) ? A : B nseamn C = A, cnd condiia este ndeplinita i C = B, cnd nu.

2.7 Precedenta operatorilor Precedena operatorilor este un set de reguli care determin ordinea de evaluare a expresiilor. n ordine descresctoare, operaiile se vor efectua astfel: (()) *, /, % +, <, <=, >, >= ==, != && || ?: =, +=, -=, *=, /=, %=

2.8.Expresii Java Script

Expresiile sunt o serie de variabile si constante care se compun cu ajutorul operanzilor pentru a obine o singur valoare final. Rezultatul poate fi un numr, poate fi o valoare boolean, sau poate

21

Introducere 22
fi un ir. ntre rezultatul unei expresii i variabilele booleene, (adevrat i fals), se pot stabili relaii directe. Dac o valoare numeric este zero sau un ir este gol sau este null, atunci valoarea boolean ataat este false. n caz contrar, este true. Expresiile pot fi aritmetice, expresii ir i expresii logice sau booleene. Operanzii cuprini n aceste expresii sunt conectai prin operatorii pe care i-am discutat n capitolul anterior.

Capitolul 3 Instruciuni i structuri de control

3.1. Instruciunea if else Instruciunea if combinat cu else este ntlnit n toate limbajele de programare ca de altfel toate elementele ntlnite pn n prezent n aceasta expunere. n JavaScript, instruciunea are sintaxa: if (conditie) { a=5;} else {a=6} JavaScript va evalua condiia. Dac rezultatul este adevrat, atunci a = 5, iar daca nu, a = 6. Instruciunea if poate fi folosit i singura (fara else): if (condiie) {instruciuni}. Dac este ndeplinit condiia, se execut instruciunile din acolad, daca nu, se execut ceea ce urmeaz dup acolad.

22

Introducere 23
Instruciunea if se poate folosi n combinaie cu o alta instruciune if: If (conditie1) {instructiuni1} else if (conditie2) {instructiuni2} else {instructiuni3} } <html> <head> </head> <body> <script> a=55 if (a<20) {document.write("a=12;a=13;a=14") } else {document.write("b=12;b=13;b=14") } </script> </body> </html> program iff.html 3.2 Instructiunea while Se traduce prin atta timp sau n timp ce i are sensul literar. while (conditie) { instructiuni } i are sensul c instruciunile cuprinse ntre acolade vor fi executate atta timp ct condiia este ndeplinit.

23

Introducere 24
Instruciunea while este de fapt una repetitiv, adic poate introduce un ciclu. i=1; valoare = 0; while (i <5){ valoare +=i; i++; } Program whileee.html Instruciunile din acolade se repet atta tip ct variabila i rmne mai mic dect 5. Deci ultima valoare a lui i va fi 5, cnd ciclul nu se mai repet. Valoarea variabilei valoare va fi 0 + 1 + 2 + 3 + 4, adic 10. 3.3. Instructiunea `do while` Este, n esen, aceeai cu instruciunea while, dar condiia este verificat numai dup efectuarea unui ciclu. <html> <script> var z = 0; var i = 1; s = 50; suma = 20 ; document.write("inainte de while") while(s > 0) {suma += i; i++; document.write("suma =", suma) } document.write("afara din while") </script> </html> Program dweee.html

24

Introducere 25
3.4. Instruciunea for Determin, de asemenea, o execuie n ciclu, la fel ca while. Instruciunea for este mai potrivit pentru ciclurile ce conin variabile numerice. Exemplul de mai sus se transcrie cu for astfel: <html> <script> valoare = 0; for ( i = 1 ; i < 5; i++){ valoare +=i; } document.write("valoare =", valoare ) </script> </html> program forr.html Rezultatul este acelai ca i in cazul instruciunii while. Este de subliniat c n paranteza care urmeaz for, se definesc valoarea de start a variabilei 'i', condiia de oprire a ciclului i valoare cu care se incrementeaz variabila 'i'. Aici este vorba despre o sintaxa bine precizat i nu de o succesiune de instruciuni care se execut secvenial. 3.5. Instruciunile continue i break Cnd se dorete ntreruperea ciclului n execuie, aa cum se ntmpl n while i for, se poate folosi instruciunea if n combinaie cu continue. Doresc s calculez suma primelor 10 numere naturale. <html> <script> // vom scrie codul in doua variante

25

Introducere 26
suma = 0; for (i=1; i<11;i++){ document.writeln("i=",i,",") suma +=i } document.writeln("<br><strong> sumafor </strong> = ", suma," ; ") document.write("<br><br>") suma = 0; for (i=1; i<100;i++){ document.writeln(" \n i=",i,",") if(i>10) {continue;} suma +=i; } document.write("<br><strong> sumacont </strong>= ",suma," ; ") document.write("<br><br>") suma = 0; for (i=1; i<100;i++){ document.writeln(" i=",i,",") if(i>10) {break;} suma +=i; } document.write("<br> <strong>sumabreak</strong> = ", suma, " ; ") document.write("<br><br>") </script> </html> program conttt.html Aa cum am mai spus, variabila i nu este incrementat la prima execuie a ciclului, rmnnd 0. Daca condiia din if este ndeplinit, se execut prima instruciune, a doua, adic suma nu se execut i se trece la incrementarea lui i in ciclul for. Dac conditia nu este ndeplinit, atunci se execut suma, dup care se incrementeaz variabila i.

26

Introducere 27
n ultimul exemplu, ciclul se execut de 100 de ori. Mai eficient este folosirea instruciunii 'break' suma = 0; for (i=1; i<100;i++){ if(i>10) {break;} suma +=i; } n acest caz, atunci cnd variabila i este mai mare dect 10, se iese din ciclu i se execut instruciunea care urmeaz dup ciclul for fr s se mai adauge nici un termen la sum. Adic ciclul se ntrerupe definitiv. Comparaia i ilustrarea diferenei dintre break i continue este artat n programul conttt.html. 3.6. Instruciunea label Dac se dorete ieirea dintr-un ciclu la o adres specific, se folosete instruciunea label care fixeaz adresa dorit.

27

Introducere 28
<html> <script> //calculam volumul unui paralelipiped a*a*c a = 4; c = 2; pasa = 0.5; pasc = 0.8; volmax = 125; l10: for(i = 0; i <= 10; i++){ a = a + i*pasa for(j = 0; j <= 20; j++){ c = c +j*pasc VOL = a*a*c if(VOL >= volmax) {break l10;} } } document.write("<BR> VOL = ", VOL, "<br>a = ",a,"<BR>c = ", c) </script> </html> Program labbb.html 3.7. Instruciunea switch Pentru a compara mai multe valori, se folosete instruciunea switch, care substituie mai multe instruciuni if imbricate. <HTML> <script> var parametru = "b" switch(parametru){ case "a" : document.write("parametrul este a"); break; case "b" :

28

Introducere 29
document.write("parametrul este b"); break; case "c" : document.write("parametrul este c"); break; case "d" : document.write("parametrul este d"); break; } </script> </HTML> Program swiii.html Pn acum toate instruciunile au fost exemplificate cu variabile numerice. Cum arata instruciunile pentru obiecte ? 3.8. Instruciunea for in

Pentru lucrul cu obiecte, mai precis, n interiorul obiectelor se folosete instruciunea for ... in cu sintaxa: for (indice in nume_obiect){ instructiuni } indice poate fi orice nume de variabil, nume_obiect este obiectul de care suntem interesai. Sa aplicm instruciunea pentru informaii privind obiectul stilou total = ""; for(indice in stilou){ total +=stilou[indice] } obiectul stilou a fost definit cu 2 proprieti: culoare i pre crora li s-au atribuit valorile galben i 2000. n urma efecturii ciclului for va rezulta concatenarea celor doua

29

Introducere 30
valori corespunztoare proprietilor obiectului stilou: galben2000. Pentru a face mai lizibil rezultatul, introducem n linia de nsumare un spaiu gol, , total +=stilou[indice] + " " <html> <script> var nume_obj = "stilou"; document.write("<BR>" nume_obj); var prop = " "; //indice este generat de codul JavaScript automat function stilou(culoare,pret) { this.culoare = "galben"; this.pret = 20000; } a = document.stilou.this.culoare; document.write(a); //for (indice in nume_obj) //{ //document.write(indice); //prop = nume_prop + "=" + nume_obj[indice]; //document.write(prop + "<BR>") //} </script> </html> program forinnn.html Variabila din ciclul `for in` din programul anterior este generat de JavaScript. Rezultatul va fi dispunerea tuturor proprietilor obiectului. Obiectul este de data aceasta definit dinainte i de aceea i se cunosc proprietile. Dac se dorete listarea proprietilor unui obiect particularizat, se schimb numele de obiect i lucrurile decurg n acelai fel. 3.9. Instruciunea 'with'

30

Introducere 31
Este folosita pentru obiecte si arata care obiect este subiectul actiunii programatorului Sintaxa este: with (nume_obiect){ instructiuni } Dac vrem s atribuim proprietilor obiectului stilou alte valori dect galben i 2000, atunci se poate scrie: with ( stilou ) { culoare = rosu; pret = 4000; } 3.10. Instruciuni de comentariu // si /* */ Exist dou moduri de a introduce comentarii n JavaScript. Pentru un comentariu de o linie, se pune simplu la nceputul liniei //. Pentru un comentariu care se extinde pe mai multe linii. naintea comentariului se scrie /* iar la sfrit */ 3.11. Instruciunea var Instruciunea definete o variabil i ar trebui s fie scris n fata oricrei variabile. n practic ns, nu este necesar deoarece programul recunoate variabilele prin instruciunile care urmeaz variabilei.

Capitolul 4 Funcii n JavaScript

31

Introducere 32

Funcia este un fel de miniprogram JavaScript de sine stttor care ndeplinete o anumit sarcin i poate fi apelat din orice punct al codului JavaScript. Exist funcii standard (predefinite) n JavaScript,dar cele mai multe sunt create de beneficiar. De exemplu funcia a*x2+b*x+c din matematic poate fi transcris direct sub form de funcie n JavaScript. Parametrii a, b, c rmn constani, iar funcia se evalueaz pentru diferite valori ale variabilei independente x. 4.1 Definirea functiilor in JavaScript n general, funciile sunt definite n raport cu anumii parametri care rmn neschimbai i un set de variabile independente care pot fi diferite n diferite momente ale execuiei cu toate c aciunea executat de funcie nu se schimb. n urma apelrii, funcia returneaz o valoare. Definirea unei funcii se poate face n diferite moduri. n mod tradiional, funcia se definete: function nume_functie(parametrul1,parametrul2, ){ instructiuni } Nume_functie este numele functiei si se supune regulilor pentru variabile. Modul anonim,: Var1=function(param_1){instructiuni} in care funcia nu are nici un nume. O alta modalitate este: Var1=new Function(param_1,functii dependente de param_1) n cazul n care funciile sunt fr parametrii, definirea este: function nume_functie(){ Instructiuni

32

Introducere 33
} Este obligatoriu in toate cazurile ca printre instruciuni s se gseasc i cea de `return`, care va specifica variabila a crei valoare o returneaz funcia la apelare. Apelarea se face prin scrierea numelui de funcie mpreun cu valoarea numerica atribuita parametrilor nume_functie(Vparametrul1,Vparametrul2,); Pentru a folosi informaia returnat de funcie ca un element ulterior de factur logica de exemplu funciei i se ataeaz o variabil care va conine valoarea de return a funciei. Aceast variabila poate fi folosit n continuare de codul JavaScript. Sintaxa este: nume_variabila=nume_functie(parametrul1,parametrul2,); Primul exemplu va fi construirea funciei corespunztoare funciei de gradul doi definite mai sus: <html> <head> <script> function grad_doi(x) { a=12; b=2; c=4; val_fc = a* x* x + b * x + c; return(val_fc); } </script> </head> <body> <script> xx=12; y = grad_doi(xx); document.write("<br>val_fc pentru x = " + xx + " este " + y); </script> </body>

33

Introducere 34
</html> program fc1.html n acest caz, variabila xx a fost transmis prin valoare. Aceast valoare este atribuit lui x din funcia grad_doi i apoi se execut calculele. Transmiterea unei valori funciei se poate face i printr-un formular: <HTML> <SCRIPT > function writeM() { var v1 = document.nume_form.nume_text.value; alert(v1); } </SCRIPT> <FORM NAME="nume_form" action=""> SCRIETI VALOAREA DE TRANSMIS FUNCTIEI <INPUT NAME="nume_text" SIZE="40" TYPE="text"> <INPUT TYPE="button" VALUE="Go " onClick="writeM()"> </FORM> </HTML> Program formfunc.html S construim o funcie care afl minimul dintr-un ir de 3 numere: 4, 12 i 1. n spiritul JavaScript, definim obiectul numar numar{ Comp1=4; Comp2=12; Comp3=1; } minimul=100 for(i=1,i<=3,i++){ if(minimul>numar[i]) {minimul=numar[i];} else {continue;} return minimul

34

Introducere 35
} program fc2.html De observat c dup ultima linie nu s-a pus ; Aceast semn nu este necesar pentru c linia formeaz ultima instruciune din program. Minimul este o variabil pe care n-am declarat-o ca variabil. Aceast variabil i va pstra valoarea numai n interiorul funciei, adic este o variabil local i nu va avea semnificatie nafara functiei. Funcia construita mai nainte poate fi apelat prin: function(numar[1],numar[2],numar[3]) n ambele exemple am folosit funcii care returneaz valori numerice. Funciile pot fi ns de cu totul alt natur. Pot fi introduse orice feluri de argumente i de asemenea valoarea returnat poate fi de orice fel: ir de numere n binar, constante logice, etc. Aceasta este puterea limbajului JavaScript. Dac de exemplu, este de dorit crearea unei descrieri a unui curs. Trebuie specificate mai multe caracteristici: titlu, autor, numr pagini i numr figuri. Acest curs este de fapt un obiect, obiectul curs, dar poate fi descris prin funcia curs: Function curs(titlu,autor,numar_pg,numar_fig){ This.titlu=titlu; This.autor=autor; This.numar_pg=200; This.namar_fig=60; } Un alt exemplu este funcia culori pe care o s-o definim nct s caracterizeze proprietile cromatice ale fondului i textului dintr-o fereastr. <HTML> <head> <script> function culori(){ document.fgColor="red";

35

Introducere 36
document.bgColor="blue"; } </script> </head> <body> <script> document.write("culorile sint dupa cum urmeaza"); document.write("<BR> culoare text ROSU"); document.write("<BR> culoare fond ALBASTRU"); culori(); document.write("<BR><br> <STRONG>PRIMA MANIFESTARE ARTISTICA</STRONG>") </script> <h1 style="background-color:#8080FF"> AAAAAAAAAAAAAAA </h1> </body> </HTML> program culori2.html

n uiltimul exemplu pe care le-am dat, funcia nu depinde de argumente. In acest caz funcia este ncrcat n memorie i ateapt execuia. Apelarea i, n consecin, executarea funciei se face cind in cod este intilnit numele functiei. (Aceast funcie este important deoarece se pot modifica caracteristicile fr a rencarca pagina in browser). Funciile grad_doi i curs depind nsa de argumente. Argumentele se dau la apelarea funciei pentru a putea fi folosite n interiorul funciei. O alt modalitate de a transmite argumentele spre o funcie este folosirea de variabile globale care pot fi modificate att din interiorul funciei ct i dinafara ei. Dezavantajul acestei situaii este c numele de variabil nu mai poate fi folosit pentru a desemna altceva. Declararea variabilei globale se face n zona <head> a codului HTML pentru ca s fie sigur c variabila este folosit dup definirea ei. Dac valoarea urmeaz s fie modificat,

36

Introducere 37
atunci este bine ca transferul ei s se fac sub forma de argument al unei funcii. n felul acesta, valoarea variabilei globale nu se va modifica. Variabilele globale nu mai trebuie declarate n nici o funcie. Cele locale trebuie declarate ca variabile cu `var` pentru ca s poat fi modificate n interiorul funciei. In acest caz JavaScript consider variabila astfel definit ca fiind local chiar dac numele ei este identic cu numele unei variabile globale. Una din practicile curente este apelarea funciilor folosind acelai numr de argumente cte sunt prezente in definiia funciei. Uneori este mai practic s se foloseasc un numr diferit de argumente. Cnd numrul de argumente este mai mare, atunci ceea ce este suplimentar se stocheaz ntr-un tablou prestabilit numit arguments[ ] i, deci, se poate folosi n continuare. Utilizarea n funcia numita ,de exemplu, myfunction a argumentelor se poate face prin Myfunction.arguments[n] unde n indica al n+1 ulea argument pentru ca indexarea incepe cu 0. Numrul total de argumente se poate afla prin Myfunction.arguments.length O funcie care s admit un numr variabil de argumente poate fi Myfunction([argument][,extraarg1][,extraarg2]) unde argumentele care ncep cu extra sunt argumente care nu au aparinut funciei myfunction. Funciile pot fi apelate i din interiorul lor nsei. Aceasta proprietate se numete recursivitate. Cazul clasic este calculul factorialului unui numr. <html> <script> n = 4; function factorial(n) { var final; if (n>0)

37

Introducere 38
{final = n * factorial(n-1);} else { if (n==0) {final = 1} else {final = null} } return(final) } </script> <body> <script> alfa=factorial(n); document.write("factorial de " + n + " este " + alfa); </script> </body> </html> Program factorrr.html

4.2. Metoda n JavaScript, metoda este o funcie proprietate a obiectului. De exemplu o p[roprietate a obiectului stilou este culoarea care se specifica prin stilou.culoare. Este posibil nsa ca proprietatea s nu mai fie o variabil, ci o funcie. Aceast funcie se ataseaza sub form de proprietate. De exemplu stilou.calcp() va fi noua proprietate a obiectului stilou, dac funcia se va numi calcp(). Deci, obiectul stilou se compune din Stilou.culoare Stilou.calcp()

38

Introducere 39
Prima proprietate este o variabil, n schimb a doua se numete metoda ceea ce nseamn c asignarea unei valori pentru ea este incorect. Valoarea funciei poate fi folosita tot aa cum se folosete o funcie obinuit, deosebirea fiind ns c metoda nseamn ca funcia este o proprietate a unui obiect. Metoda formeaz interfaa obiectului cu restul codului. n JavaScript, nu exist metode private. Toate sunt metode publice i, in consecin, toate pot fi apelate din exteriorul obiectului respectiv. Metoda unui obiect poate fi folosit chiar i pentru a rezolva sarcinile altui obiect. Aciunea metodelor este mult mai divers n comparaie cu cele prezentate aici. Exist mai multe tipuri de aciuni pe care o metod le poate executa. De exemplu, metode modificatoare, care modific starea unui obiect, metode selectoare care acceseaz proprietile unui obiect fr a le modifica, metode iterative care acceseaz toate proprietile unui obiect cu care execut diverse operaii i metode constructoare care genereaz un nou obiect folosindu-se de un tip de obiect predefinit sau definit de noi. Definirea metodelor este identica cu cea a funciilor. 4.3. Crearea obiectelor Obiectul este o funcie care definete structura obiectului. Parametrii funciei formeaza proprietatile ei. Definirea unui obiect poate fi fcut la modul general. Adic obiectul stilou poate fi definit prin aceeai definiie ca i creion, pix, caiet sau alte articole care se caracterizeaz prin aceleai structur, adic culoare i pre. Se poate defini o funcie astfel function penar(culoare,prt){ this.culoare = galben; this.pret = 2000; } Am creat suportul pentru orice obiect care este gsit ntr-un penar.

39

Introducere 40
Pentru a crea un obiect din penar, apelm funcia cu cuvntul new i folosim parametrii care caracterizeaz obiectul de creat. stilou = new penar(galben,2000) Funcia penar creaz obiectul stilou i, n plus, ataeaz la fiecare proprietate cte o valoare: la culoare galben, iar la pre 2000. Obiectul stilou nu se deosebete de obiectul stilou definit fr funcia penar. Mai mult, se pot crea orice obiecte care au aceeai structur: liniar = new penar(transparent,3000); compass = new penar(alb,40000); Proprietatile liniarului vor fi: liniar.culoare = transparent liniar.pret = 3000; iar ale compasului compas.culoare=alb compas.pret=40000 De remarcat, c obiectele definite aici conin preul 2000, 3000 i 40000 pentru cele 3 obiecte. S crem funcia calcp() care s conin referiri la pretul fiecaruia din cele 3 obiecte Function calcp(){ var prt_de_start = 1000; var val_in_plus = 0.0; if(this.culoare = galben) val_in_plus = 1000; } if this.culoare = transparent) val_in_plus = 2000; } if this.culoare = alb) val_in_plus = 39000; } return val_de_start + val_in_plus; }

40

Introducere 41
Aici am folosit pentru identificare proprietatea de culoare a obiectelor. Am creat astfel metoda care este funcia proprietate a obiectului. Acum funcia penar va putea fi scris: function penar(culoare){ this.culoare = culoare; this.pret=calcp; } Acum obiectul stilou va fi creat de stilou = new penar(galben) va contine proprietatile stilou.culoare stilou.calcp() Pentru a vedea preul, vom apela metoda stilou.calcp().

4.4. Funcii speciale Asociate cu valoarea infinit, sau NaN, s-au definit funcii care verific valoarea variabilelor sau a valorilor returnate de alte funcii. Pentru noi, cea mai importanta funcie este eval care evalueaz un ir. Sintaxa este: eval(sir) n general, JavaScript interpreteaz variabilele folosite n cod ca iruri. Dac irul este de fapt o expresie matematic, funcia eval o efecueaz. . . Functia eval este folosita in exemplul urmator impreuna cu alta functie evaluatoare isFinite care estimeaza marimea argumentului:

41

Introducere 42
<HTML> <BODY> <script> t=10/0; document.write("t = "+t); alfa=isFinite(t); if(alfa==true) {document.write("<BR><BR>numarul obtinut este finit;")} else {document.write("<BR>numarul obtinut NU este finit;")}; document.write("<BR>_______________________________ _________________________"); oo=eval(10/Infinity); document.write("<BR>oo = "+oo); document.write("<BR>MIN_VALUE="+Number.MIN_VAL UE+"<BR>MAX_VALUE="+Number.MAX_VALUE) x=eval(4.5) document.write("<BR>x="+x) xx=4.5 document.write(" xx="+xx) document.write("<BR>_______________________________ _________________________"); aa=Number.MAX_VALUE*10 bb=Number.MIN_VALUE/10 document.write("<BR>aa = "+aa+"<BR>bb ="+bb)

42

Introducere 43
</script> </BODY> </HTML>

Program eval.html Funcia folosit pentru a evalua pe z este isFinite care verific dac argumentul este un numr finit. Functia eval are la rindul ei metode si functii cum ar fi z = eval("Math.round(3.14156)") care produce z=3

Capitolul 5 Evenimente

5.1 Definirea evenimentelor Un eveniment este orice pune n micare un cod JavaScript. De cele mai multe ori, evenimentele sunt legate de folosirea unei pagini Web. Acionarea butoanelor, a legturilor, poziionarea mouse-ului pe anumite zone din pagina poate declana o execuie particular a codului. Ce sunt, n esen, aceste evenimente ? JavaScript nelege 8 evenimente predefinite. La declanarea acestor evenimente, cum ar fi executarea unui clic pe un buton, se declaneaz aciunea descris de o funcie sau metod pe care am

43

Introducere 44
stabilit-o noi. Evenimentul produs prin acionarea butonului se numete eveniment `click`. n cazul unei pagini Web, interfaa cu utilizatorul se face prin intermediul acestor evenimente. Aceste evenimente sunt sesizate, sau capturate de aa numitele `handlere de eveniment`. Click. Cnd se apas o tast a mous-ului pe o legtur, buton, etc. Acest eveniment poate declana sau inhiba o aciune. Focus. Este atunci cnd utilizatorul folosete evenimentul click sau tasta Tab pentru a evidenia un formular. Cnd se execut clic pe un formular pentru a-l activa, apare un eveniment Focus. Aa se ntmpl n cazul, de exemplu, al butoanelor. Pentru casete de text, cu toate c nu posed un eveniment click, ele au un eveniment Focus cnd se execut clic pe suprafa casetei. Evenimentul Focus se produce nainte ca utilizatorul s introduc datele; Activarea prin Focus apare i n cazul ferestrelor multiple prin executarea de clic pe mouse. Blur. Evenimentul Blur este opusul lui Focus i apare cnd utilizatorul dezactiveaz un element prin activarea altuia sau prin efectuarea de clic pe o zon inactiv a paginii. Change. Evenimentul Change apare dup ce utilizatorul a modificat inputul ntr-un formular cum ar fi o caset text. Apare, de asemenea, cnd se schimb opiunea ntr-o caset de selecie. Evenimentul Change apare numai dup ce elementul activ devine inactiv prin activarea altuia. Introducerea noilor date ntr-o caset text nu activeaz Change. Activarea se produce cnd se termin introducerea datelor, adic atunci cnd cmpul text nu mai este activat. MouseOver. Evenimentul MouseOver apare atunci cnd pointerul mous-ului este pe o legtur text sau imagine. MouseOut. Evenimentul MouseOut are efect ntr-un fel invers ca al MouseOn, adic se declaneaz o aciune cnd mouse-ul este nafara elementului n raport cu care s-a definit. Select. Un eveniment Select apare atunci cnd utilizatorul

44

Introducere 45
selecteaz text ntr-un formular prin acionarea cu mouse-ul asupra regiunii cu textul ales. Submit i Reset. Evenimentul Submit apare cnd utilizatorul acioneaz pe butonul Submit dintr-un formular i are efect naintarea formularului. Acest evenimentnt apare naintea submiterii (inaintarii) coninutului. Reset aduce sistemul la sarea initial. 5.2.Handlere de eveniment Pentru orice element particular dintr-o pagina Web, cum ar fi un link, casetele de text i selecie, ferestrele, cadrele, etc., evenimentele se gestioneaz prin aa numitele handlere de eveniment, (event handler). Trebuie ns specificat c nu toate elementele au ataate toate handlerele de eveniment. Aceasta se realizeaza prin Nume_de_handler=un_cod_JavaScript Handlerele de eveniment ataate evenimentelor amintite mai sus sunt: onBlur, onChange, onError, onFocus, onLoad, onMouseOver, onMouseOut, onReset, onSelect, onSubmit, onUnload. onFocus. Folosind onFocus vom crea un handler de eveniment care va aprea cnd utilizatorul activeaza acea form. Forma este o linie, dar aceasta nu este important. Aciunea este produs de activarea elementului de form i nu de datele care sunt nscrise acolo. Cnd activarea este pe un element se executa o instruciune JavaScript. De exemplu: <input name=ani type= rows=1 size=4 onFocus=window.status=trebuie scris citi ani ai>citi ani ai ? Aici lucrurile se ntmpl la fel ca nainte. Dar n loc de apelarea unei funcii, se execut o instruciune JavaScript. Aici este asignat o valoare string la o proprietate de obiect. Acest string va aprea n linia de status a browserului Web folosit. Adic atunci cnd utilizatorul activeazape elementul de form, evenimentul onFocus schimb mesajul din bara de stare a ferestrei. onSubmit. Ca orice handler de eveniment prin acionare. Fie o caset text in care utilizatorul trebuie sa scrie adresa de email.

45

Introducere 46
Dup aceea utilizatorul trebuie s acioneze submit. S presupunem c utilizatorul a scris o funcie care s controleze dac textul are forma unei adrese de email. Fie numele funciei evalform <form onSubmit=evalform(this.email.value)> <input name=email type=text rows=1 size=20>introduceti adresa de email <input name=submit type=submit> <input name=reset type=reset> </form> Primul input definete un spaiu text gol de dimensiuni un rnd i 20 spaii pe rnd. Se denumete acest element email folosind name=atribut. Acest nume nu apare pe ecran. Este doar pentru operator. Dup aceast liniem s-a creat un alt element un buton submit, iar n linia urmtoare un buton reset care acioneaz pentru tergerea spaiului unde se scrie adresa de email. Handlerul de eveniment n acest formular este inclus in prima linie <form>. Deoarece se va apela funcia evalform cnd se acioneaz butonul submit, se va folosi onSubmit. Ceva special este forma parametrului pentru care se evalueaz evalform. Parametrul se va nota cu this.email.value. De ce aceasta scriere? This se refera la obiectul principal n cauz, adic acest form/ elementul de text este o proprietate a form i a fost denumit email. Textul email este iar un obiect. Una din proprietile ale obiectului text este value care conine data care a fost introdus n obiect. Adic this.email.value vor fi datele introduse n elementul text numit email care la rndul lui este o proprietate a form. Codul va transmite textul introdus de operator funciei evalform(parametru). Aceasta funcie va returna adevrat sau fals dup ce i face propria evaluare. Dac se returneaz adevrat, procesul se continu, iar dac este incorect, nu se transmite nimic. Dac pentru eveniment alegem MouseOver

46

Introducere 47
<A HREF=url-ul la care se face legatura onMouseOver=un_cod_ JavaScript> Text care apare colorat </A> onMouseOver declaneaz un_cod_JavaScript cnd mouse-ul este pe textul marcat. On MouseOver poate fi folosit mpreun cu onMouseOut pentru ca cele dou evenimente nu se petrec niciodat mpreun. Vrem s se ntmple ceva cnd mouse-ul este deasupra unui tex sau imagine i altceva cnd nu este, la fel ca n exemplul urmtor. <HTML> <A HREF="" onMouseOver="document.nume.src='planbila1.jpeg'" onMouseOut="document.nume.src='fig2.jpg'"> <IMG SRC="fig2.jpg" BORDER=0 WIDTH=260 NAME="nume"> </A> </HTML> Program mouseOverOut.html La pornirea programului, se afieaz fig2.jpg. Cnd mouse-ul este pe imagine, apare imaginea planbila1.jpeg i aa mai departe, procesul se repet. Trebuie remarcat c comanda <IMG > se leag de handlerele onMouse prin numele nume. Se observ c n IMG am scalat figurile la aceeai valoare. Document se refera la documentul curent, nume este numele obiectului imagine iar src da adresa imaginii. Din practic rezulta c interschimbarea figurilor se face fr probleme, cnd dimensiunea figurilor este aceeai. OnMouseOver poate fi folosit pentru a activa o funcie. <A HREF=http://www.ubbcluj.ro onMouseOver= ofunctie(parametrii)> textul accentuat </A> Se realizeaz o apelare a funciei ofunctie() definit de utilizator.

47

Introducere 48
Apelarea unei funcii (call) este unul din cel mai folosit eveniment. Pe de alt parte, functia nsi produce o aciune i este la rndul ei un handler de eveniment. ntr-o pagina Web, funciile se vor defini la nceputul paginii n seciunea <HEAD> n acest fel putnd fi apelate din orice loc din program. Aceeai idee de call este i in codul urmtor: <HTML> <HEAD> <SCRIPT > function functia1() {document.nume.src="planbila1.jpeg" } function functia2() {document.nume.src="fig2.jpg" } </SCRIPT> </HEAD> <BODY> <CENTER> <A HREF="Winter.jpg" onMouseOver="functia1()" onMouseOut="functia2()"> <IMG SRC="fig2.jpg" NAME="nume" BORDER=1 width=70> </BODY> </HTML> Program mouseOverOut2.html n locul apelrii funciei, se poate folosi ca handler de eveniment codul propriu zis n JavaScript: <A HREF=http://www.ubbcluj.ro onMouseOver= suma1 = 0; suma2 = 0; for(i=0;i<=22;i++) {suma1 +=1}; {suma2 +=2}> textul accentuat</A> NU IESE

48

Introducere 49
Program call.html Calculul se face n momentul n care am pus mouse-ul pe textul accentuat. Handlerele de eveniment prezentate (call-ul i codul surs) au fost folosite n cadrul unei pagini HTML. Este ns posibil s se introduc astfel de handlere i n codul surs JavaScript.

5.3.Resetarea handlerelor de eveniment S presupunem ca ntr-o forma HTML avem definite un buton i o caset de validare. Cnd se execut clic pe buton, se apeleaz un handler de eveniment care depinde dac caseta de validare a fost validat sau nu. <SCRIPT> function f1() {window.alert(TOTUL ESTE OK !!!!!!!!!!)} function f2() {window.alert(NEGATIV, PERICOL !!!!!!!)} function validare() { if(document.OO.cutie.status == true) {document.OO.apasa.onclick=f1} else {document.OO.apasa.onclick=f2} } </SCRIPT> <FORM NAME=OO> <INPUT TYPE=checkbox NUME=cutie STATUS=true onClick=valideaza()> S-au facut verificarile ? <INPUT TYPE=button NUME=apasa VALUE=Raspuns> </FORM> <script>validare()</script> </html> script validare.html

49

Introducere 50
Deosebit aici este funcia de validare validare() Ea determin starea casetei de validare i alege, n consecin, handlerul de eveniment corespunztor care se va declana la acionarea butonului. Dac utilizatorul activeaz caseta de validare, atunci prin acionarea butonului va apare mesajul TOTUL ESTE OK !!!!!!!, iar daca ceste de validare este neactivat prin clic pe butonul Raspuns, apare mesajul NEGATIV, PERICOL !!!!!!!!!. De observat este i c n funcia de validare s-a fcut uz de faptul c documentul are proprietatea formular care are proprietatea tipul (adic buton sau caseta de validare)

Fie dou elemente ale formei: un buton i o caset de validare. Cnd se efectueaz clic pe buton, se apeleaz un handler de eveniment, care, la rndul lui, depinde dac boxa de validare este validata sau nu. Iat scriptul: <script> function event1() {window.alert(boxa de validare validata)} function event2() {window.alert(boxa de validare nevalidata)} function validare() { if(document. FT.checkbox.status == true) {document. FT.apasa.onclick=event1} else {document. FT.apasa.onclick=event2} } </script> <form name=FT> <input type=checkbox name =checkbox status=true onclick=validare()>casuta de validare enabled<hr> <input type=buton name=apasa value=Click Me!> </form> <script>validare()</script>

50

Introducere 51
scriptul prima Ultima linie are menirea de a seta handlerul de eveniment apasa nainte de o noua folosire. OnLoad Acest handler de eveniment produce execuia DUP ce pagina, cadrele sau imaginile au fost ncarcate. Daca definim o funcie n zona head a programului HTML cu numele functiaA, liniile de cod vor fi <body onload="functiaA()"> pentru pagina <frameset onload="functiaA()"> pentru cadre <img src="imagine.jpeg" onload="functiaA()"> pentru imagini. OnLoad, onUnLoad, onMouseOver si onMouseOut se folosesc aproape n exclusivitate pentru legturi. onBLUR Pentru a dezactiva un element, se foloseste OnBlur. Vom vedea un exemplu n care onBlur este eficient. Cnd ntr-un formular se activeaz un cmp text i se introduc accidental anumite caractere, la dezactivarea casetei de text se poate ateniona utilizatorul asupra faptului ca mesajul din cmpul text a fost modificat. <HTML> <FORM> <INPUT TYPE="text" SIZE="30" VALUE="Cimp de text vizitat din greseala" style="borderstyle : solid; border-color:red" onBlur="fer1=window.open('','','location=0,width=50,height=5 0,left=600,top=150 ');fer1.document.write('<h5>Ati vizitat caseta de text. A fost intentionat?</h5>')"> </FORM> </HTML>

51

Introducere 52
Program onBlur.html De remarcat c am folosit doua tipuri de ghilimele.

Capitolul 6 Obiecte soft n JavaScript

Obiectele sunt clasificate pe nivele. Obiectul navigator este software-ul care este utilizat ca browser. Subobiectele lui sunt Plugin creat pentru instalarea de module plug-in pentru browser, Mimetype (Multipurpose Internet Mail Extension) permite accesarea informaiilor despre tipurile MIME recunoscute de plugin. Obiectul de nivel imediat urmtor este Window. Urmtoarele Obiecte considerate de nivel I sunt Document, Frame, History i Location. Obiecte de nivelul II sunt Anchor, Area, Applet, Form,Image, Layer, Link, Plugin. Obiecte de nivelul III sunt Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Submit, Select, Text, Textarea. Obiectul de nivel IV este Option. Asa cum se observa majoritatea obiectelor JavaScript corespund la etichete HTML. De exemplu, button din JavaScript este in HTML <input type=button> Document n HTML este <body>, Link este <a href=>,Frame n HTML <frame>. Obiectul Window nu are o etichet HTML echivalent. In figura urmatoare pe acelai fond de culoare se gsesc obiectele

52

Introducere 53
de acelai nivel

6.1.Obiectul Window 6.1.1.Ce este obiectul window (fereastra) La lansarea browserului Web pe ecran apare prima pagina Web. Spaiul n care apare pagina este numit fereastr (window). Tot ceea ce apare pe pagina Web, HTML sau JavaScript, trebuie s fie n interiorul acestei ferestre. De aceea fereastra este obiectul de nivel cel mai nalt. Fereastra de fapt, este fereastra de browser. De obicei, se lucreaz numai ntr-o fereastra de browser, dar pentru comparaii se pot utiliza si mai multe. Aceste ferestre pot fi modificate dup dorin cu pstrarea tuturor caracteristicilor privind bara de stare, de meniuri, cmpul de locaie, etc. Exist trei ferestre speciale n JavaScript. Acestea se deschid cu alert(), confirm() i prompt(). Aceste metode creaz aa numitele casete de dialog. Operatorul nu are acces la plasarea, dimensiunile i butoanele lor, ele oferind un mod direct de informare sau de

53

Introducere 54
introducere a unui input simplu. Vom considera efectul metodelor ferestre pentru sistematizarea materialului cu toate c exist i denumirea de casete de dialog, aceste elemente oferind o posibilitate de comunicare a utilizatorului cu codul JavaScript. (R. Wagner, R. A.Wyke, JavaScript). Fereastra deschis de alert este are un buton OK i nu poate fi nlturat dect prin acionarea acestuia. Pn la acionarea acestuia, nu se poate executa nimic n fereastr. La fel, fereastra deschis cu confirm nu este redimensionabil sau nu poate fi minimizat. Cele dou butoane OK i Cancel pe care le conine returneaz true sau false. Tot false se returneaz cnd se acioneaz butonul din partea de sus dreapta a ferestrei, adic butonul de nchidere a ferestrei. Aceast metod ofer posibilitatea ultimei verificri nainte de efectuarea unei aciuni, de exemplu `submit`. Dintre metodele sale, amintim blur() care dezactiveaz o fereastr, close() nchide fereastra, confirm() afieaz o caset de confirmare, focus() activeaz fereastra specificat, moveBy() deplaseaz fereastra cu valoarea specificat, moveTo() deplaseaz fereastra la locul specificat, open() deschide o nou fereastr, prompt() afieaz o caset de dialog, scroll() deruleaz coninutul dintr-o fereastr pn locaia specificat, stop() oprete ncrcarea unui alt element. Ca proprieti, frames d toate informaiile despre cadrele din fereastr, name conine numele ferestrei, parent se refer la fereastra de nivel cel mai nalt care are cadrul curent, status face referire la mesajul de pe bara de stare a ferestrei. Fereastra corespunztoare pentru prompt() conine un mesaj i o caset text n care se introduc direct de ctre utilizator valorile cerute de cod. Prompt() returneaz valoarea nscris la OK i null pentru Cancel sau n cazul nchiderii ferestrei. Trebuie ns remarcat c valoarea introdus de utilizator poate avea orice form i de aceea este de dorit ca nainte de utilizare s se fac verificarea acesteia prin cod, folosind de exemplu, parseInt() sau parseFloat() pentru date numerice.

6.1.2.Metoda prompt()

54

Introducere 55
Prompt deschide o caset de mesaj n care se cer informaii. Acestea se atribuie unei variabile i deci, pot fi folosite i n alte scopuri. S presupunem c vrem s clasificm stare unei persoane dup vrst. Pentru 1 - 19 ani tnr, 19 - 24 student i 24 - 100 matur. Cerem persoanei s introduc vrsta i afim rezultatul tnr, student sau matur. <html> <script> function apr() { virsta=window.prompt(va rugam scrieti virsta,); if (virsta <19) {window.alert(sinteti inca foarte tinar} else {if((virsta>=19)&&(virsta<24)) {window.alert(sinteti student)} else {window.alert(sinteti matur)} } } </script> <body> <form> <input name=virsta type=button value=//virsta// onClick=apr()> </form> </body> </html> script prompt 6.1.3.Metoda alert Metoda alert deschide o noua fereastra care contine un mesaj si un butonOK.Sintaxa este: Window(mesaj )

55

Introducere 56
Daca se doreste scrierea pe mai multe rinduri a mesajului,in locul lui<BR> folosit in write se utilizeaza una dim modalitatile urmatoare

\n: Insereaza un rind nouunde textul se scrie sutomat \t: Insereaza un tab \r: Carriage return \b: Backspace \f: Form feed \': Single quote \": Double quote \\: Backslash

Adica orice semn cunoscut precedat de un backslash, \

6.1.4.Metoda confirm Metoda confirm este folosita atunci cind trebuie luata o hotrire importanta cum ar fitrimiterea unui formular de inscriere sau pentru a cumpara ceva on line. Sintaxa este: Confirm(mesaj)

<html> <head> <title>Confirm javascript</title> <script> function validare() {

56

Introducere 57
var x=confirm("Sinteti sigur ca vreti in Dubai?"); if(x==false) { return false; } } </script> </head> <body> <form name="form" action="http://firma.yahoo.com" onSubmit="return validare()"> <input type="submit" name="goSubmit" value="Submit" /> </form> </body> Confirmmm.html

6.1.5.Ferestre modale si nemodale

57

Introducere 58
TABEL 6.1 Proprietile i metodele obiectului Window Proprietate Alert(mesaj) frames location length name opener parent Self Top status defaultStatus Alert() blur() confirm(mesaj) Semnificaie afieaz mesaj n caseta de dialog ir de obiecte cu o intrare pentru fiecare fereastra arat URL-ul ncrcat pe pagina un numr ntreg care d numrul de cadre din fereastra numele ferestrei se refer la fereastra ce conine documentul care a deschis fereastra curent indic numele ferestrei care conine frameset indic fereastra curent indic alternativ cea mai de sus fereastr textul afiat n bara de stare valoarea predefinit care se afieaz n bara de stare afieaz un mesaj ntr-o caset de dialog cu un buton OK dezactiveaz fereastra afieaz `mesaj` ntr-o caset de dialog cu dou butoane OK i Cancel; returneaz true cnd se apas OK i false cnd se apas Cancel nchide fereastra curent activeaz o fereastr deschide o nou fereastr cu un document specificat sau deschide un document ntr-o fereastr specificat incarc URL-ul n fereastr afieaz un mesaj ntr-o caset de dialog mpreun cu un cmp de text de introdus; rspuns este default-ul. deruleaz fereastra la o poziie x, y deruleaz o fereastr pn la poziia dat x, y fixeaz un interval de timp, `timp`, n milisecunde dup care se evalueaz `expresie`

Close() focus() open(URL,name,atribut e) fereastra=window.open () navigator(URL) prompt(mesaj,raspuns)

scroll(x,y) scrollTo(x,y) setTimeout() nume=setTimeout(expr

58

Introducere 59
esie,timp) setInterval()* clearTimeout(nume) clearInterval(nume)*

anuleaz setarea pentru timeout cu numele `nume`

* pentru versiuni JavaScript dupa JavaScript1.1 Obiectul window are cinci handlere de eveniment aa cum rezult din tabelul 6.2 Tabel 6.2 Handlere de eveniment onLoad OnUnload OnBlur OnFocus OnError Se execut cnd fereastra a fost ncarcat complet. Se execut la prasirea ferestrei, la nchiderea ei. Execut un cod cnd focus este dezactivat de la fereastra respectiv. Execut un cod cd focus activeaza fereastra. Specific ce cod se execut cnd n codul care se ncarc exist erori.

Atributele ferestrei deschise cu open sint date in Tabelul 6.3 Tabel 6.3 Atributele ferestrei deschise cu open Toolbar=[yes,no] location=[yes,no] scrollbars=[yes,no] status=[yes,no] menubar=[yes,no] resizable=[yes,no] directories z-lock Afieaz sau nu bara de instrumente. Afieaz sau nu caseta de locaie. Afieaza sau nu barele de derulare. Afieaz sau nu bara de stare. Afieaz sau nu bara de meniuri. Permite sau nu redimensionarea ferestrei. ???????? Creaz o nou fereastr care nu se ridic la activare.

59

Introducere 60
alwaysLowered Creaz o fereastr dedesubtul celorlalte ferestre indiferent dac este activat sau nu. Creaz o fereastr deasupra celorlalte indiferent dac este activ sau nu. Distana ferestrei de la marginea din stnga a ecranului. Distana ferestrei de la marginea de sus a ecranului. Limea n pixeli a ferestrei. nlimea n pixeli a ferestrei.

alwaysRaised

screenX left screenY top width innerWidth * height innerHeight*

* introduse in versiuni mai noi ale JavaScript Aa cum obiectul stilou avea proprietatile culoare si pret asa si fereastra are proprietatile ei, culoaretext, cularefond, elemente form etc.

6.1.6.Proprietatea status La apelarea browser-ului, bara de stare afieaz Done. n acest spaiu este posibil s apar i alte mesaje din partea codului JavaScript, mesaje pe care le dorim noi. Mesajul se poate vizualiza prin comanda window.status=textul mesajului De obicei proprietatea se folosete la funcii handlere de eveniment sau la onEvent. S crem o pagina Web cu dou butoane, unul cu eticheta 1, al doilea cu 2. Cnd se apas 1, s se scrie n bara de stare am apsat 1, iar cnd se acioneaz 2, am apsat 2. <HEAD> <script language=JavaScript> function sele (mesaj) {window.status=mesaj}

60

Introducere 61
</script> </HEAD> <form> <input type=button value=1 onClick=sele (am apasat 1)> </form> <form> <input type=button value=2 onClick=sele (am apasat 2)> </form> Nu numai onClick poate modifica afiarea mesajului. S vedem cazul lui onMouseOver i onMouseOut. <html> <HEAD> <script> function message(){ window.status=" treceti mouse-ul peste STATUS pentru a obtine legatura "; return true} function smessage(){ window.status=" PRIN APASARE SE FACE LEGATURA "; return true} </script> </HEAD> <body> <h4>URMARITI BARA DE STARE</h4> <p align=center> <font size=24> <a href="http://www.ubbcluj.ro" onMouseOver="return smessage()" onMouseOut="return message()" > STATUS </a></p> </body> </html> program wstat1.html De asemenea, se poate afia un text la alegere dintre mai multe mesaje afiate.

61

Introducere 62
<html> <HEAD> <script> function schimbStat() { window.status=window.document.form.lista.options[window.d ocument.form.lista.selectedIndex].text } </script> </HEAD> <body> <form name="form" > <select name="lista" > <option selected> am inceput selectia</option> <option>este prima optiune pentru bara de stare</option> <option>a doua optiune pentru bara de stare</option> </select> <input type="button" value="schimb" onclick="schimbStat()"> </form> </body> </html> Program wstat2.html n acest exemplu n bara de stare se afieaz instruciuni pentru utilizarea elementelor dintr-o pagina. Aici suntem n situaia aplicrii filosofiei JavaScript. Orice referire la un obiect i la o proprietate se face pornind de la obiect spre proprietate. Sinonim cu window este obiectul self, self.status=deschis Este echivalent cu window.status=deschis

62

Introducere 63
6.1.7.Proprietile open() si close() Aa cum rezult din Tabelele 6.1 i 6.2, ferestrele pot fi deschise i nchise, poziionate i derulate dup dorin. Sintaxa pentru deschiderea ferestrei este variabila=window.open(URL,nume_fereastra,attribute_pentru_ noua_fereasra); sau cu gruparea atributelor sub numele config: variabila=window.open(URL,nume,config=attribute) URL este un ir ce specific o adres care este apelat la deschiderea ferestrei. Este valabil i un ir gol cnd nu se ncarc nici un fiier. Nume_fereastr conine numai caractere alfanumarice (litere i numere) i `_`, dar nu se permite spaiul liber. Atributele definesc caracteristicile ferestrei i sunt deci, mult mai cuprinztoare dect atributele formularelor n HTML.Astfel Toolbar=yes inseamna includerea barei de unelte Location=yes va arata locatia curennta Directories=yes va arata in plus o serie de butoane Status=yes va afisa bara de stare Menubar=yes afisarea barei de meniu Scrollbars=yes ataseaza bare d scroll cind documentul este mai mare decit fereastra Resizable=yes permite modificarea dimensiunilor ferestrei Copyhistory=yes permite ca nous fereastra sa mosteneasca istoria ferestrei curente Width definaste largimea in pixeli Heigh defineste inaltimea in pixeli Pentru fiecare dintre cele trei tipuri de informaii, se poate pune i ulterior ataate valorile dorite. Variabila este o variabil definit n fereastra n care aplicm window.open. Proprietile se definesc referindu-ne la aceast variabil. Dac nsa se dorete dirijarea formularelor sau a altor elemente spre fereastra nou, atunci se folosete nume_fereastra. Fereastra care deschide o nou fereastr

63

Introducere 64
este o fereastr printe, iar cea deschis este o fereastr copil. Aa cum am spus, Window este un obiect. O proprietate important se refer la fereastra curent. Ea se specific prin window sau self. Atributele pentru noua fereastr sunt opionale. Cnd nu sunt specificate, atunci proprietile noi ferestre vor fi identice cu cele ale ferestrei printe. Cnd un atribut al ferestrei este specificat, celelalte atribute sunt setate la false. De specificat este de asemenea c unei ferestre odat deschis, nu mai poate s i se modifica textul care i-a fost ataat. Trebuie rescris toat fereastra din nou, dac se dorete scrierea n acea fereastr. n exemplul urmtor s-au tratat diverse moduri de deschidere de ferestre. <html> <head> SINTEM IN FEREASTRA PARINTE<br><br> </head> <body> <script> //i=1; //in locul instructiunii de atribuire introducem valoarea cu `prompt` parametru = window.prompt("introduceti o valoare de la 1 la 3. Pentru 2 si 3 vom avea cite o fereastra diferita iar pentru alte valori o alta",""); window.document.write(" parametru = " +parametru); if( parametru == 2 ) { window.open("wstat1.html", "prima_fereastra","location=0,menubar=1" ); }else{if(parametru == 3) { window.open("iff.html","a_doua_fereastra"," toolbar=1, width=200, height=1200") }else{ window.open("prima2.html","","menubar=1,toolbar=1,status= 1,resizable=1,width=400,hight=200");

64

Introducere 65
// trebuie specificat si numele noii ferestre. Aici "". // In acelasi caz daca n-am specificat status nicicum, s-a luat 0 // adica bara de stare n-a fost activata. De asemenea nu trebuie lasat spatiu liber in nume. }} </script> </body> </html> Program winnn.html Folosind ferestrele putem crea deja efecte dinamice, aa cum se vede n exemplul urmtor. Aici am folosit setTimeout(). Aceast metoda este folosit pentru a efectua o sarcin, de exemplu pentru a evalua o expresie, dup un numr specificat de milisecunde. setInterval() nsa evalueaz sarcina de un numr nelimitat de ori la intervalul specificat de timp. Oprirea execuiei se face la nchiderea ferestrei sau la apelarea clearInterval. <html> <head> </head> <BODY> <script> window.document.write("SINTEM IN FEREASTRA PARINTE<br><br>"); timp=setTimeout('window.document.write("<BR><BR>Scrie m in fereastra parinte");ai=window.open("","fer1","top=290,left=480,width= 320,height=100"); ai.document.write("OOOOOOOOOOOOOOOOO!!!!!!!!!!!!"); ',2000); // window.opener.document.bgColor="blue"; // aici de observat este ca atunci cind scriem in fisierul // parinte de fapt se sterge ce a fost scris inainte in primele 2 // rinduri. // Atentie la semnele din ferestre // Cind apare fereastra a II a atunci se albeste prima fereastra top.close();

65

Introducere 66
</script> </BODY> </HTML> Programul winnn4.html <HTML> <script> var c=0; document.motor.timp.value="" function ceas() { c=c+1 ore=parseInt(c/3600); minF=c%3600; min=parseInt(minF/60); sec=minF%60; if(sec<9) { document.motor.timp.value=ore+":"+min+":0"+sec } else {document.motor.timp.value=ore+":"+min+":"+sec;} setTimeout("ceas()",1000) window.status="NU ACTIONATI DE MAI MULTE ORI Start DACA doriti MASURAREA TIMPULUI IN SECUNDE"; } </script> <BODY BGCOLOR="red" FGCOLOR="blue"> <form name="motor"> <input type="text" name="timp" size="12"> <input type="button" value="Start" onClick="ceas()"> <input type="button" value="Din nou" onClick ="document.motor.timp. value=''; c=0;"> </form> </BODY> </HTML> Program timer3.html setTimeout a fost folosit pentru a ntrzia evaluarea cu o secund.

66

Introducere 67
nchiderea ferestrei se face cu window.close() daca este vorba de fereastra curenta.

6.1.8.Proprietatea opener

n interiorul unei ferestre se poate deschide o alta prin folosirea metodei open(). Daca din fereastra nr 1 s-a deschis fereastra nr 2 i ne aflm n fereastra nr 2 window.opener se va referi la fereastra nr 1. La fel ca i window.opener.close() care va nchide fereastra nr 1 sau schimbarea culorii de fond a aceleasi ferestre window.opener.document.bgColor=blue Ca i alte metode, close() nu are nici un atribut, totui trebuie urmat de paranteze. Cu close() sau self.close() sau window.close, se nchide fereastra curent. Dac o fereastr s-a deschis cu fer2=open(,fereastr_nr_2,); nchiderea se face cu fer2.close(); Fereastra printe se poate nchide i cu: top.close(); Atributele ferestrei se pot referi innd seama ca ele sunt proprietile ferestrei i sunt prezentate n Tabelul 6.3. De exemplu window.toolbar se refer la atributul toolbar din

67

Introducere 68
fereastra window. Activarea ferestrelor se face prin folosirea mouse-ului i executarea de clic pe fereastra respectiv. Uneori este necesar s folosim n mod automat accesul la fereastra respectiv, adic accesul programului la fereastra respectiv. Fereastra care a deschis o alta poate fi activat folosind opener window.opener.focus() De asemenea, activarea se poate face i prin referirea la un element sau o funcie din fereastra deschis din fereastra printe. De exemplu: Fer2.document.input1.focus() unde fer2 este variabila ataata ferestrei copil, iar input1 este elementul particular la care se face referire. Mai direct activarea se poate face Fer2.focus() Pentru fereastra fer2, Opener; window.opener.focus sau top.focus; Pentru fereastra printe. Dezactivarea unei ferestre se face prin activarea alteia deoarece odat nu poate fi activa dect o fereastr. Comanda direct este window.blur() Toate metodele de la focus rmn valabile i pentru blur. <HTML> <HEAD> <style type="text/css"> .stil { font-size:50pt; font-style:italic; font-color: blue; } </style>

68

Introducere 69
</head> <BODY BGCOLOR="pink" FGCOLOR="blue"> <form> <script> var win2=null; function openE() { win2=window.open("","nume","fullscreen=0;resizable=1;scro llbars=0"); win2.resizeTo(10,100); setTimeout("win2.moveTo(520,400)",2000) win2.document.write("<body onClick=window.close();>"); win2.document.bgColor='lightblue'; win2.document.write("<h1 style='font-size= 10pt ;color:lime ; font-style:oblique;text-align:center;'>AAAAAAAAA</h1>"); win2.document.write("</body>"); } </script> <a href="#" onClick="openE(); return false;"><h1 class="stil">noua fereastra</h1></a> <P>verde <input type="radio" onClick="document.bgColor='green';window.focus()"> galben <input type="radio" onClick="document.bgColor='yellow';window.focus()"> roz <input type="radio" onClick="document.bgColor='pink';window.focus()"> rosu <input type="radio" onClick="document.bgColor='red';window.focus()"> </form> </BODY> </HTML> Program winnfocus.html Aici am artat cum se pot schimba caracteristicile unei ferestre dintr-o alt fereastra.

69

Introducere 70
nchiderea unei ferestre se poate face i prin executarea unui eveniment clic pe suprafaa ferestrei. Aceasta se face prin plasarea elementului onClick n eticheta <body> handlerul onClick. De asemenea, am introdus metoda pentru window resizeTo care reduce dimensiunile ferestrei i moveTo care deplaseaz fereastra la poziia dorit. 6.1.9.Obiectul self Self se refera la fereastra curenta asa cum se vede din cele doua linii Self.status=bine Window.status=bine Acest obiect a fost creat sa limiteze ambiguitatile cind un element introdus de noi are numele de status, adica la fel cu proprietatea 6.1.10.Obiectul Scroll() Se poate translata o fereastra pe pozitia x,y esprimata in pixeli. Coordonatele au originea in partea din stinga sus a ecranului. Window.scroll(0,0) va muta fereastra in origine. Se poate actiona si asupra ferestrei care a deschis fereastra curenta Window.opener.scroll(50,99)

Capitolul 7. OBIECTE DE NIVEL I

7.1. Obiectul FRAME (Cadru)

Sint ferestre create in interiorul unei ferestre de pagina Web. Dupa versiunea 4-a a Internet Explorer cadrele sint tratate ca ferestre cu situatie speciala. De aceea tratam acest obict imediat dupa obiectul window. Un frame este o proprietate a obiectului window. (Trebuie insa multa atentie pentru ca fereastra (window) deseori este numita si cadru (frame) sau self, parent sau top care in acelasi timp sint si prorieatati. In cele prezentate in capitolul anterior self, parent si top au fost intr-adevar consierate proprietati si nu expresii echivalente pentru obiectul fereastra. Obiectul cadru, (frame), are aceleasi proprietati si metode ca si freastra, (window), mai putin status si defaultStatus .

70

Introducere 71
O pagina poate fi impartita in cadre in acelasi mod indiferent daca sintem in JavaScript sau HTML prin eticheta <FRAMESET> si etichetele <FRAME>. Exista doua proprietati fundamentale ale FRAMESET: COLS si ROWS care arata cum se face impartirea ferestrelor in coloane respectiv rinduri pentru formarea cadrelor. De exemplu

<HTML> <FRAMESET COLS=25%,*)> <FRAME SRC="pag1.html" name="cadru1"> <FRAME SRC=pag2.html" name="cadru2"> </FRAMESET </HTML imparte pagina in doua regiuni prima formeaza `cadru1` si cuprine 25% din numarul total de coloane disponibile ale paginii si numarul total de rinduri. Restul coloanelor, indicat prin `*` este ocupat de `cadru2` in care este incarcat pag2.html. Pentru <FRAMESET COLS=25,*> numarul de coloane pentru primul cadru este de 25 pixeli. Asa cum se vede lipseste numai caracterul %. In general se accepta un amestec de reprezentari prin procent sau valori absolute. In cazul procentelor trebuie tinut seama de faptul ca suma procentelor trebuie sa fie 100% . Parametru SRC indica URL-ul care se incarca in FRAME. Atribuirea unui nume fiecarui cadru este utila pentru referirea la proprietatile lui in timpul programarii. In anumite browsere eticheta <FRAMESET> nu este considerate daca ea este inclusa intre <body> si </body> in altele nu. Pentru a evita aceasta situatie in codurile cu cadre se inlocuieste <BODY> in codul HTML cu <FRAMESET> deoarece eticheta <body> este facultativa. Eticheta FRAME are mai multe atribute care sint prezentate in tabelul 6.1 Tabel 7.1 SRC

Specfica adresa URL a documentului care va fi incarcat in cadrul respectiv

71

Introducere 72
NAME Da numele cadrului si permite o referire mai usoara. Trebuie sa inceapa cu o litera. cadrul nu poate fi redimensionat. Daca nu este specificat cadrele sint redimensionabile. Indica prezenta barelor de derulare. Poate avea valorile: yes, no, auto Distanta pe verticala in pixeli de la marginea superioara si inferioara a cadrului. Minimul este 1. Dinstanta in pixeli pe orizontala fata de marginea cadrului

NORESIZE

SCROLLING

MARGINHEIGHT

MARGINWIDTH

In programul urmator cele doua cadre sint incarcate cu doua fisiere care acceseaza bara de stare. Si in acest caz, la fel ca si cind nu sint cadre, functionarea programelor este corecta, bara de stare unica, apartinind ferestrei, fiind inscriptionata pe rind la comanda fiecarui cod din cele doua cadre.

<HTML> <FRAMESET ROWS="60%,*"> <FRAME SRC="call.html" marginheight=15 scrolling=yes> <FRAME SRC="prima2.html" marginheight=415 > </FRAMESET> </HTML> Program frame2.html

name=cadru1 name=cadru2

marginwidth=95 marginwidth=5

Aici se vede efectul atributelor asupra pozitionarii cadrului.

72

Introducere 73
Pentru accesarea cadrelor este necesara stabilirea structurii sau ierarhiei de cadre. Aici fereastra este de cel mai inalt nivel dar nu este vizualizata in Internet Explorer. Cele trei cadre cu nomel cadru1, cadru2 si gol au parinte aceasta fereastra. <HTML> <FRAMESET ROWS=20%,*> <FRAME SRC="timer.html" name=cadru1 scrolling=auto> <FRAMESET COLS=50%,50%> <FRAME SRC="timer3.html" name=cadru2 scrolling=auto> <FRAME SRC="frame4.html" name=gol scrolling=yes> </FRAMESET> </FRAMESET> </HTML> Program frame3.html Frame31.html <HTML> <FRAMESET ROWS="60%,*"> <FRAME SRC="timer3.html" name=cadru1 scrolling=auto> <FRAME SRC="frame32.html" name=cadru2_3 > </FRAMESET> </HTML> Program frame31.html combinat cu frame32.html conduce la aceasi pagina <HTML> <FRAMESET COLS=50%,50%> <FRAME SRC="timer3.html" name=cadru2 scrolling=auto> <FRAME SRC="frame4.html" name=gol scrolling=yes> </FRAMESET> </HTML> Program frame32.html

73

Introducere 74
dar de data aceasta cadru1 si cadrul2_3 au ca parinte fereastra top (fereastra de browser) in timp ce cadru2 si gol au ca parinte cadrul cu numele cadru2_3. Sa ne imaginam ca in frame31.html se definesc variabila v31 si functia f31() iar in frame32.html variabila v32 si functia f32(). Accesul la variabila v31 si functia f31() din cadru1 si cadru2_3 se face prin top.v31 echivalent cu parent.v31 respectiv top.f31() echivalent cu parent.f31(). Referirea la v31 si f31() din `cadru2` sau `gol` se face cu top.v31 si top.f31() care nu sint echivalente cu parent.v31 respectiv paent.f31() deoarece cadrul parinte pentru `cadru2` si gol este `cadru2_3` si nu top. Din `cadru2` si `gol` referirea la variabila v32 si functia f32() se face prin parent.v32 si parent.f32(). Rezulta deci ca variabilele si functiile dintr-un cadru pot fi folosite si in alt cadru prin referire corespunzatoare. De exemplu referirea la fereastra parinte a ferestrei parinte a cadrului in care ne aflam folosim Parent.parent.document.proprietate Pentru a afla proprietatea din document. Intr-o structura cu mai multe nivele cum ar fi cea din figura 1 FIGURA 2

Cadru1 va fi referit ca top.frames[0] sau top.cadru1 Cadru2 va fi referit ca top.frames[1] sau top.cadru2 Cadru3 va fi referit ca top.frames[2] sau top.cadru3 La nivelul urmator: Cadru11 va fi referit ca top.frames[0].frames[0] sau top.cadru1.cadru11 Cadru12 va fi referit ca top.frames[0].frames[1] sau top.cadru1.cadru12 Cadru21 va fi referit ca top.frames[1].frames[2] sau top.cadru2.cadru21 Cadru31 va fi referit ca top.frames[2].frames[3] sau top.cadru3.cadru31 Cadru32 va fi referit ca top.frames[2].frames[4] sau top.cadru3.cadru32 Cadru33 va fi referit ca top.frames[2].frames[5] sau top.cadru3.cadru33 In general la fereastra ne referim prin parent, top, window si self. Top se refera la fereastra de browser. Dar in cazul structurii de cadre, spre deosebire de o singura fereastra, prin parinte, parent, ne vom referi la fereastra care contine structura de cadre. In cazul nostru structura de cadre deci parintele coincide cu fereastra de browser, deci top si parent sint

74

Introducere 75
echivalente. Program frame3.html s-au produs trei cadre din care unul permite accesul unui cadru la alt cadru. Toate cel trei cadre provin din fereastra parinte. Acelasi efect se obtine prin <HTML> <BODY> <A href='prima2.html' TARGET='cadru2'> legatura cu cadru2</A> </BODY> </HTML> Program frame4.html Din cadrul cu numele `gol` am incarcat fisierul prima2.html in cadrul cu numele `cadru2` TARGET se mai poate folosi in FORM si BASE. Referirea la un cadru copil dintr-un alt cadru copil se face prin cadrul parinte. Folosind figura 1, referirea la cadrul `cadru31` de la `cadru11` se face top.frames[2].frames[5] si la fel pentru cadru12. Ideea este sa se ajunga la nivelul comun. Cum se poate scrie intr-un cadru din alt cadru cu alte cuvinte cum se pot actualiza cadrele ? In programul frame61.html <HTML> <HEAD> <TITLE>cadru2</TITLE> </HEAD> <FRAMESET ROWS="60%,*"> <FRAME SRC="timer3.html" name=cadru1 scrolling=yes> <FRAME SRC="frame6.html" name=cadru2 scrolling=yes> </FRAMESET> </HTML>

75

Introducere 76
Program 61.html

este prezentat un sistem de doua cadre cu numele `cadru1` si `cadru2`. In fisierul frame6.html <HTML> <HEAD> <script> function scris(x) { top.cadru1.document.clear(); top.cadru1.document.write("<HTML>"); top.cadru1.document.write("<body BGCOLOR=\"" + x + "\">"); top.cadru1.document.write("<FORM>"); top.cadru1.document.write('<INPUT type="button" value="button1 din cadru1"<BR>'); top.cadru1.document.write("</FORM>"); top.cadru1.document.write("<FORM>"); top.cadru1.document.write('<INPUT type="button" value="button2 din cadru1"'); top.cadru1.document.write("<BR><h1>Am scris din 'cadru2' in 'cadru1'</h1>"); top.cadru1.document.write("</body></HTML>"); top.cadru1.document.write.close(); } </script> </HEAD> <BODY BGCOLOR="yellow"> <FORM> <INPUT TYPE="button" value="scris in cadru1" onClick=scris("blue")> </FORM> </BODY> </HTML> Program frame6.html in `cadru1` se va scrie conform cu functia scris() definita in `cadru2`.

76

Introducere 77
Alte tehnici de actualizare este folosirea de legaturi prin eticheta ancora si atributul sau target sau a obiectului loacation cu proprietatea HREF.

Pentru a verifica daca toate cadrele au fost incarcate se foloseste window.length care da numarul de cadre ale ferestrei. Verificarea se va face prin top.length care da numarul de cadre diferit de 0. Se poate verifica si daca un anumit fisier cu titlul titlul a fost incarcat : if(top.title == titlul) in care se mai poate introduce si verificarea numarului de cadre amintit mai inainte. Se mai pot verifica si al proprietati ale documentului cum ar fi locatia sau mai ingenios un numar de identificare care in prealabil a fost atasat fiecarui cadru in parte tocmai in acest scop. Cu toate acestea nu sintem siguri ca intregul document este incarcat. Pentru a verifica in mod sigur se folosesc evenimenele onLoad si onUnload. In ccest caz documentele se inregistreaza intr-o variabila. Exista si scheme de inregistrare a documentului mai complicate in care se inregistreaza nu numai documentul ci si pozitia lui in sistemul de cadre. Aceasta permite accesarea lui prin referire la informatia de inregistrare. 7.2..Obiectul form (formular) Trebuie apreciat ca formularele ca obiecte in JavaScript au proprietati si metode care sint de fapt cu semnificatii similare cu cele corespunzatoare din HTML In HTML formularul este definit ca fiind totul intre <FORM> si </FORM> . In JavaScript formularul este o proprietate a documentului. Rezulta document.forms care insa este un biect el insusi. Fiecare formular din document va fi o proprietate a sa adica a lui document.forms Document.forms[0] se refera la primul formular din document, document.forms[1] la al doilea formular adica un formular din orice loc din codul HTML. Document.forms[n] este el insusi un obiect care are ca proprietati elementele formularului. Elementele se refera prin

77

Introducere 78
Document.forms[n].elements[m] unde n indica formularul iar m elementul in formular. Dacaprimul formular contine un buton si un buton radio atunci aceste elemente sint definite in Document.forms[0].elements[0] pentru buton Document.forms[0].elements[1] pentru buton radio Ne putem referi la un element din formular si prin numele lui asa cum a fost definit in HTML. Daca formularul are numele unul ia butonul but iar radio radi Atunci referirile se vor face prin: Document.unul.but pentru buton Document.unul.radi pentru radio Dupa ce am definit modul in care ne referim la elemente, definirea elementelor se face prin atribuirea Document.forms[n].elements[m]=... Unde intre ghilimele se pune definirea elementului ca in HTML. 7.2.1. Proprietatea action Aceasta proprietate modifica atributul action din formular. Daca se doreste trimiterea unui formular la diferite adrese in functie de continut acesta proprietate permite modificarea actiunii. Definim o functie care face selectia dorita luind in considerare valoarea parametrului din apelarea functiei. Fie acesta functie trimis(valoare). <script > function trimis(val) { if (val<20)&&(val>=10) {document.forms[0].action=total1.html} {document.forms[0].action=total2.html} } </script> <form method=get onSubmit=trimis(this.parametru.value)> <input type=text name=parametru rows=1 columns=2>scrieti valoarea ceruta</form>

78

Introducere 79
In formular exista un spatiu de un rind si doua coloane in care se va introduce un text cu doua caractere si care poarta numele parametru. In formular se defineste handlerul de eveniment onSubmit care apeleaza functia trimis() care va avea ca parametru this.parametru.value. Formularul este un obiect care in this.parametru.value este specificat prin this. Daca ne refeream la alt formular atunci trebuia specificat numele formularului. O proprietate a formularului este cea numita parametru. Ea este o caseta tip text. Value contine efeciv valoarea introdusa de utilizator si este o proprietate a casetei de text. Deci in functie de valoarea introdusa de utilzator in caseta de text calculatorul va trimite formularul la o adresa sau la alta. 7.2.2.Proprietatea method La fel ca si proprietatea action proprietatea method se refera la un atribut din form method=atribut (Atentiune. Nu trebuie confundta aceasta proprietate cu functia JvaScript numita method care este o proprietate a obiectului). Atributul este get sau post. In general intr-un formular exista mai multe atribute asociate diferitelor elemente. De exemplu pentru un buton <input type=button name=unbuton valuedeapasat onClick=function()> ne putem referi la diferite elemente prin document.forms[n].elements[m].name pentru forma n si elementul m din ea care are numele name document.forms[n].elements[m].value la fel pentru valoare. Pentru caseta de validare <input type=checkbox name=boxaV onClick=function()> care se gaseste in acelasi formular n imediat dupa buton vom putea scrie la fel document.forms[n].elements[m+1].name pentru nume Starea unei boxe de validare poate fi schimbata din code, de exemplu atunci cind se doreste o numita stare pentru inceputul programului prin Documents.forms[n].elements[m+1].checked=true Unde s-a atribuit valoarea logica true care inseamna ca boxa de validare a

79

Introducere 80
fost validata chiar inainte de a actiona noi asupra ei. In JavaScript exista proprietatea type pentru fiecare element al obiectului formular. fie formularul <form name=aa> <input type=text size=5 name=ceva> </form> Daca ne referim la text din formularul anterior vom scrie Document.aa.ceva.type Pentru un buton radio din acelasi formular <input type=radio name=statuss value=s>Student <input type=radio name=statuss value=t>Techer Accesul la proprietatea type de la Student este prin Document.aa.statuss[0].type Sau la modul general Document.nnume_formular.nume_element[index].nume_proprietate, unde index arata al citelea element cu acelasi nume este interesant. Aceste valori pot fi atribuite la diverse variabile pentru a fi folosite mai departe. 7.3.Obiectul this Cind ne referim la un element al unui formular din interiorul acelui formular nu trebuie sa mai folosim forme in care apare numele formularului, ceea ce inseamna ca doncument.forms[n] nu mai este necesar. De asemenea ne putem referi la elementele formularului dupa nume si nu dupa indice ceea ce ajuta la programare. This.nume_element.proprietate 7.4.Evenimente false Un eveniment apare cind se executa click pe ceva. In plus in JavaScript se poate emula si evenimentul click. Pentru o boxa de validare. Putem face ca sa se execute click de catre program fara actiunea utilizatorului in mod manual. Aceasta se recomanda atunci cind la o alegere efectuata de utilizator intrebarile care urmeaza din aceasta sint nonsens. De exemplu daca se cere virsta persoanei si raspunsul este sub 14 ani nu se mai cere raspunsul la intrebarea legata de studiile superioare pe care le-a facut. Evitarea intrebarilor care nu mai au sens conduce la ceea ce se numeste emulare de eveniment.

80

Introducere 81
Emulatorii de eveniment sint de fapt metode ale elementelor de formular care in JavaScript sint obiecte. Fiecare element al formularului are o metoda click(). Daca se apeleaza aceasta metoda pentru obiectul respectiv acesta va fi validat. Pentru a executa clic pe o boxa de validare se poate scrie Document.forms[n].nume_boxa.click() Metoda click() nu activeaza nici un eveniment. Numai click declanseaza un eveniment. Daca, de exemplu, onClick declanseaza handlerul de eveniment functie(this.checkbox.value) trebuie introdusa secventa document.forms[n].nume_boxa_validare.click(); functie(this.value) adica am apelat functia direct deoarece linia anterioara nu declanseaza evenimentul. Metoda reset are sintaxa Document.forms[n].reset() sau Document.nume_formular.reset() Va emula un eveniment reset care va boxa in care am introdus datele. Asa cum am vazut emularea nu produce declansarea de eveniment, in cazul acesta eventul se declanseaza. Handlerul de eveniment este definit <form onReset=cod sau functie JavaScript> (pina aici)

7.5. OBIECTUL LOCATION Obiectul se refera la adresa URL curenta. Pagina care se vede in ferestra curenta are un URL care se numeste location. Browser-ul stocheaza aceasta informatie in obiectul numit locatie. El se refera de asemenea la URL-ul unui cadru in cazul in care se lucreaza cu cadre. In caseta de locatie a browser-ului se afiseaza in acest caz numai adresa ferestrei parinte. Scriptul nu poate altera URL-ul afisat in caseta browser-ului. Locatia pentru cadrul parinte se scrie parent.location; iar pentru primul cadru parent.frames[0].location;. Obiectul location este important pentru ca scriptul nostru este construit in raport cu structura de directoare locala. Cind se incarca scriptul pe server

81

Introducere 82
acolo structura de directoare este diferita. De aceea este bine sa se extraga din URL referinta de baza pentru script. Obiectul URL permite selectarea anumitor portiuni din adresa pentru folosire ulterioara la construirea scripturilor prin cresterea portabilitatii. Acest obiect este insa de mare interes si pentru cei care vor sa vada siturile vizitate sau actiunile facute de utilizator. De aceea browser-ul limiteaza accesul la anumite proprietati. O adresa este formata dintr-un sir de caractere separate prin diferite semne a carui forma generala este protocol://hostname port pathname search hash Aceasta informatie se gaseste in location.href Incarcarea altui URL se face prin window.location.href=http://www.ceva.com/ Aici semnul = produce incarcarea tuturor fisierelor necesare aplicatiei indiferent daca este vorba de fisiere de sunete sau de imagini video. Proprietatile obiectului Location sint 7.5.1. Protocol Proprietatea returneaza depinzind de metoda de comunicare cu serverul unul din valorile: HTTP (Hypertext Transfer Protocol ), GOPHER, TP (File Transfer Protocol). Pentru pagini de World Wide Web http este standardul. In acest caz location.protocol =http: fara cele doua semne // care nu apar decit in location.href. Pentu cazul cind locatia este un fisier file://hostname/calea/filename location.protocol=file: 7.5..2. Host Este numele pe Internet al computerului (serverului) pe care se gaseste pagina Web. Pentru http://itti.org:80/~director/paginaWeb.html location.host=ittti.org:80 De obicei portul nu se specifica pentru ca este standard. Cind el difera specificarea este obligatorie.

82

Introducere 83
7.5..3. Hostname Location.host=hostname:port Cind portul nu este specificat host si hostname sint identice. 7.5.4. Port Indica calea de comunicare a computerului. Serverele Web au in general portul 80. Deci loacation.port=80 7.5..5. Pathname da structura de directoare in raport cu radacina din server. Radacina nu este continuta explicit in pathname. Daca URL-ul este in radacina, location.pathname returneaza /. Orice alt pathname incepe cu / si contine numele documentului. In exemplul anterior Location.pathname=~director/paginaWeb.html iar pathname este /~drector/paginWeb.html indica calea, adica locatia documentului in computerul gazda

7.5.6. href location.href returneaza intregul URL sub forma de sir impreuna cu toate semnele. Aceasta roprietate permite deschiderea unui URL in fereastra window.loation.href=http://www.ceva.com sau window.location=http://www.ceva.com Dintre cel doua modalitati de incarcare a browser-ului este recomandata folosirea primei variante. Proprietatea href trebuie folosita in special pentru versiuni mai vechi ale browser-ului. Unele browsere codeaza ASCII location.href. Pentru a utiliza infrmatia se folosesc functiile JavaScript unescape() si escape()

7.5.7 hash Semnnul `hash`, #, este o conventie in URL care desemneaza o ancora <A name=></A> care se va regasi ca parte a URL (dupa un semn #). La fel cum se poate

83

Introducere 84
naviga prin window.location.href se poate naviga si prin simpla modificare a proprietatii hash. 7.5.8. search returneaza orice comanda de cautare in URL-ul curent. Fiecare motor de cautare are formula sa pentru transmiterea comenzilor de cautare. De aceea inainte de a atribui o valoare la location.search trebuie inteles mecanismul motorului de cautare. Uneori dupa pathname urmeaza ?. pentru un URL de forma file://hostname/pathname?datel location.search=datel Acest parametru se utilizeaza la paginile car primesc formulare. Ca metode asociate cu location amintim assign(URL) care are acelasi efect ca si location.href, location.reload() cu efect similar cu butoanele browser-ului dar este mult mai puternica si location.replace() care permite excluderea din lista accesibila cu butonul Back din history a anumitor pagini (echivalent cu history.go).

7.6. OBIECTUL HISTORY

In orice browser exista o lista history care da site-urile vizitate in sesiunea respectiva. Accesind un URL din lista vom accesa site-ul respectiv. Obiectul history trimite la un site din lista hystory din interiorul codului JavaScript. Obiectul contine 2 proprietati current si length si 3 metode back(), forward() si go.

Browser-ul stocheaza adresele paginilor vizitate in timpul lucrului pe Web in obiectul history. Folosind meniul din browser se pot vizualiza toate paginile vizitate anterior.

Proprietatile current, next, previous desemneaza pagina curenta, urmatoare

84

Introducere 85
si cea anterioara din lista history. Lungimea listei este data de history.length Metodele back(), forward() si go() incarca documentele dinaintea su dupa documnentul curent respectiv trece la documentul specificat in paranteze. Argumentul pentru go poate indica pozitia relativa a documentului sau chiar un anumit sir, particular, din URL-ul dorit. De aici In orice browser exista o lista history care da site-urile vizitate in sesiunea respectiva. Accesind un URL din lista vom accesa site-ul respectiv. Obiectul history trimite la un site din lista hystory din interiorul codului JavaScript. Obiectul contine 2 proprietati current si length si 3 metode back(), forward() si go(). Pina aici 7.7. OBIECTUL DOCUMENT In orice fereastra su cadru printre primele obiecte este obiectul document. Document este un fisier continind un cod HTML care descrie o pagina Web Proprietatile obiectului document sint prezentate in tabelul urmator: alinkColor Combinatia de culori rosu, verde si albastru, (RGB), care da culoarea unei legaturi active Sir de obiecte corespunzind ancorelor din document. Are proprietatea `length` Sir de obiecte format din appleti Java Combinatia RGB indicind culoarea fondului Combinatia RGB indicind culoarea elementelor text din pagina colectie de obiecte corespunzind etichetelor form din document. Are

Ancors

Applets bgColor fgColor

Forms

85

Introducere 86
Images proprietatea `length` Colectie de obiecte corespunzind imaginilor incluse in document. Are proprietatea `length` Contine ultima data la care documentul a fost modificat Colectie de obiecte corespunzind legaturilor (link-urilor) din document. Are proprietatea `length` Combinatia RGB pentru legaturi URL pentru document. Identic cu proprietea URL. URL-ul documentului care apeleaza documentul curent Titlul documentului sub forma de sir URL-ul documentului Combinatia RGB a linkurilor care urmeaza

lastModified

Links

linkColor Location Referrer

Title URL vlinkColor Write() Writeln() Open() Close() Clear()

Deschide documentul pentru scriere Inchide docmentul la scriere sterge continutul documentului

Proprietatea ancors, Ancorele se definesc prin <A nume=numeAncora> iar linkurile se realizeaza prin

86

Introducere 87
<A HREF=#numeAncora> Daca intr-un document definim N ancore. Atunci referirea la ele se poate face prin obiectul ancors. Numarul ancorelor este dat de Document.ancors.length care va da rezultatul N-1 pentru ca numerotarea incepe cu 0. Referirea la prima ancora se face prin document.ancors[0], la a doua document.ancors[1], si asa mai departe. Acest obiect este similar cu obiectul `forms` pe care l-am studiat. Proprietatea links are la rindul ei proprietatea `length` si contine toate legaturile din obiect. Astfel este posibila accesarea elementelor care carecterizeaza fiecare legatura. Sirul links contine legatura atasata fiecarui hypertext definit de <A HREF=URL> din document. La rindul ei proprietatea links este un obiect cu proprietatile lui Acestea sint similare cu cele ale obiectului location: hash, host, hostname, href, pathname, port, protocol, search, target. De asemenea contine handlerele onClick, onMouseOut si onMouseOver. Proprietatea links se refera si la obiectele Area Legaturile pot fi colorate de asemenea dupa dorinta Document.alinkColor da culoarea unei legaturi activate Document.vlinkColor da culoarea unei legaturi vizitate deja Document.alinkColor da culoarea unei legaturi care nu a fost inca vizitata.

Proprietatea images. Intr-un document toate imaginile incluse cu o eticheta IMG sint accesibile prin obiectul images. La fel ca in cazul ancors, referirea la o imagine se face prin Document.images[indice] Unde indica variaza de la 0 la numarul de imagini minus 1. Ordinea este considerata ordineade aparitie a imaginilor in document. Obiectul images este format din imagini particulare. Aceste imagini sint la rindul lor obiecte. Asa rezulta obiectul Image care are urmatoarele proprietatile: src, name,

87

Introducere 88
height, width, border,vspace si hspace. Proprietatea src poate fi schimbata prin cod ceea ce permite afisarea dinamica succesiva, sau dupa dorinta a imaginilor. Handlerele de eveniment asociate imaginilor sint onLoad, onError, onAbort cind JavaScript indica ce sa se execute dupa terminarea incarcarii imaginii, daca intervine o eroare sau daca se renunta la incarcarea imaginii.

7.7.1.bgColor Un document are doua culori principale. Culoarea de fond background color da fondul paginii in timp ce cularea textului este data de forground color. Pentru fiecare se dau cantitatea de rosu albastru si verde care compun culoarea de fond dorita. Fiecare culoare pura poate avea o valoare intre 0 si 255, unde 0 este completa lipsa a culorii iar 255 este prezenta 100% a componentei.Sintaxa este Document.bgColor=#0000FF

Care da culoarea de verde. Semnul # indica faptul ca numarul care urmeaza este in hexazecimal. Primele doua cifre se refera la rosu urmatoarele doua la albastru si ultimele doua la verde. La fel se intimpla cu culoarea textului 7.7.2.Document.fgColor In locul acestei specificatii exacte a culorii se poate utiliza o culoare deja compusa pe care o referim cu o variabila literala (de exemplublue).

7.7.3.Title Document.title da titlul documentului si apare pe manseta superioara din fereastra browser-ului. Titlul nu apare in interiorul documentului. 7.7.4.Clear() Este o metoda care curata, elibereaza spatiul ferestrei curente Document.clear()

88

Introducere 89
7.7.5.Write() si writeln() Fac posibila scrierea in fereastra a unui text scris in cod HTML. De exemplu Document.write(<h3>Un text de afisat <P> in fereastra</h3>) In paranteza se poate gasi si un output de la o functie sau orice variabila definita anterior. Writeln() are aceleasi proprietati ca si write() dar pune la sifirsitul liniei scrise un caracter linie noua. In HTML aceasta nu se face in mod automat ci prin <P> sau <BR>. onLoad evenimentul se va executa dupa incarcarea ferestrei si de fapt va fi declansat de aceasta incarcare. Se va include ca si un atribut in <BODY> onUnLoad are efectul contrar lui onLoad si trebuie inclus in <BODY>.

89

Introducere 90

Capitolul 8. Siruri
In JavaScript sirul este un obiect. Un sir este o insiruire de elemente grupate impreuna pe baza unor criterii de selectie. Elementele unui sir pot fi numere, tipuri de imbracaminte, nume de stele etc. Fiecare element din sir are atasat un indice, un numar, care fixeaza pozitia elementului in sir. Descrierea sirului se faca prin Array[indice]=valoare De exemplu sirul planetelor ar fi planete[0]=Soare planete[1]=Pamint planete[2]=Jupiter Orice set de informatii poate fi asociata cu un sir chiar daca natura fiecarui element din sir este diferita. Definirea unui sir se face prin Nume_sir=new Array() Obiectul sir are 3 metode care permit manipularea la nivel de elemente. 8.1.join() concateneaza elementele sirului intr-un singur sir. Pentru sirul persoane =new Array(Ion,student,22) total=persoane.join() In variabila total va fi Ion,student,22. Dupa cum se vede virgula separa totusi elementele in sirul final. Aceasta este functionarea standard. Se poate specifica si alt element de separare total=persoane.join( ) cum ar fi spatiul.

90

Introducere 91
8.2.reverse() Inverseaza ordinea in sir. Ultimul element devine primul si asa mai departe. 8.3.sort() Ordoneaza elementele sirului in ordine alfabetica. Acelasi lucru se face si in cazul numerelor. Ordonarea se face tot alfabetic. Daca se doreste sortarea in acord cu un criteriu atunci se construieste o functie de sortare, de exemplu fmaxim(), care va fi apelata de metoda sort: nume_sir.sort(fmaxim) va fi un sir sortat dupa criteriile din functia construita `fmaxim()`. Tablouri, siruri bidimensionale In cazul in care elementele sint indexate cu doi indici. In cazul anterior sirul planete poate fi tranfformat in sir bidimensional dac se ia in considerare si virsta planetei respective planete[0][0]=soare planete[0][1]=virsta soarelui Se poate crea ca element de sir un alt sir. Aceasta practica este intilnita destul de des.

Capitolul 9. OBIECTELE MATH si NUMBER

9.1.Obiectul Math Dintre obiectele predefinite in JavaScript Array, ,String,Boolean,Number,Math si regExp Math va fi tratat in continuare. Spre deosebire de alte obiecte pe cae operatorul le poate crea, obiectul MATH nu se creaza niciodata, el fiind predefinit. Obiectul MATH este folosit pentru constante si functii matematice si permite calculul direct al expresiilor. Ca si celelate obiecte are proprieatati si metode.De exemplu constantele obisnuite din matematica sint proprietati ale Proprietatile sint constanta Euler si baza logaritmilor naturali E, PI 3.14, LN10 ln10, LN2 ln2, LOG10E logE, LOG2E logaritm in baza 2 din E si SQRT_2 radical din 0,5. Metodele apartinind obiectului Math sint prezentate in tabelul urmator. Abs(x) Valoarea absoluta Sin(x), cos(x), tan(x) Functiile trigonometrice sin, cos si tg Acos(x), asin(x), atan(x) Fuctiile arcsin, arccos si arctg

91

Introducere 92
Atan2(y,x) un numar intre pi si pi reprezentind unghiul format de axa Ox si dreapta care trece prin origine si punctul (x,y) Exponentiala si logaritm in baza e Minimul si maximul dintre doua numere Functia putere Rotunjeste numarul la cel mai apropiat intreg Radacina patrata Cel mai mic intreg mai mare sau egal cu un numar; si cel mai mare intreg mai mic sau egal cu un numar Produce un numar aleator intre 0 si 1

Exp(x), log(x) Min(x,y), max(x,y) Pow Round Sqrt Ceil, floor

Random

Numerele aleatoare sint folosite pentru a obtine efecte vizuale intimplatoare. Functia folosita este random Program random.html Argumentele pentru functiile trigonomice sint in radiani. De obicei se foloseste pentru calculele matematice sa se lucreza cu with pentru a nu rescrie Math de mai multe ori. Daca functiile trigonometrice inverse asin si acos au argument mai mare decit 1 rezulatul este NaN din cauza depasirii domeniului de definitie. Obiectul Math se foloseste pentru calculul elementelor din animatii din paginile Web.

9.2.Obiectul NUMBER Pentru a lucra cu valori numerice se foloseste obiectul number. In felul acesta se poate accesa cel mai mare si mai mic numar valorile ininity si NaN. Astfel daca argumentul lui Number este un sir raspunsul nu va fi o eroare ci NaN. Proprietatile obiectului sint MAX_VALUE care da cel mai mare numar reprezentabil, MIN_VALUE, cel mai mic numar, NEGATIVE_INFINITY si POSITIVE_INFINITY se obtin cind se face o

92

Introducere 93
impartire cu 0. <HTML> <BODY> <script> t=10/0; document.write("t = "+t); alfa=isFinite(t); if(alfa==true) {document.write("<BR><BR>numarul obtinut este finit;")} else {document.write("<BR>numarul obtinut NU este finit;")}; document.write("<BR>__________________________________________ ______________"); o=eval(10/Infinity); document.write("<BR>o = "+o); document.write("<BR>MIN_VALUE="+Number.MIN_VALUE+"<BR>M AX_VALUE="+Number.MAX_VALUE) document.write("<BR>__________________________________________ ______________"); aa=Number.MAX_VALUE*10 bb=Number.MIN_VALUE/10 document.write("<BR>aa = "+aa+"<BR>bb ="+bb) </script> </BODY> </HTML> Program eval.html Acum putem sa evaluam orice expresii matematice. Daca aceste expresii sint singulare folosirea obiectuli Number permite continuarea functionarii codului prin semnalarea valorilor infinite. Marele avantaj este ca nu se obtine eroare.

Capitolul10. Obiectele STRING si DATE

10.1.Obiectul String

93

Introducere 94
Obiectul string este un text cuprins intre ghilimle (simple sau duble) Nu exista nici o limitare asupra numarului de caractere dintr-un string.Totusi unele browsere mai vechi admit numai 255 de caractere. In acest caz se definesc mai multe stringuri si apoi se opereaza cu proprietatile stringurilor pentru a obtine forma dorita. Asignarea unei variabile la un string se poate face in 2 moduri : Var x= stringul_meu Unde variabila x contine un string cu numele stringul_meu A doua posibilitate foloseste o functie constructor : x=new String(stringul_meu) Aceasta posibilitate exista numai pentru versiunile mai mari decit 4 ale Internet Explorer. ?.1. Concatenarea stringurilor Fie stringurile : Var x=1 Var y=plus Var z=pozitie care concatenate in felul urmator w=z++y++x produc rezultatul pozitie plus 1 Acelasi result se poate obtine si altfel w=z+ w=w+y+ w=w+x unde variabilei w i se asociaza pe rind cite un nou string.

94

Introducere 95
Sau z+=y+x w=z unde variabilei z i se ataseaza y si x cu un spatiu liber dupa ysi totul ramine sub numele z. Ca orisice obiect JavaScript obiectul string are proprietati si metode ?.2.Proprietati si metode Lungimea unui string numit string se poate afla prin sting.length ?.2.1 In multe aplicatii literele mici sint considerate diferite de cele mari .Stringurile au posibilitatea de a transforma literele mar in mici, respectiv invers. Sintaxa comenzii este : var x=string.toUpperCase() var y=string.toLowerCase() ?2.2.Cautarea stringurilor Pentru a analiza un string in privinta continutului se foloseste metoda : string.indexOf() Unde stringul cautat in interiorul stringului numit string este situat intre paranteze. Returneaza pozitia in string a primei litere dinstringul cautat. ?.2.3.Extragerea unui caracter sau unui substring dintr-un string se faca cu : Metoda charAt() care returneaza caracterul pozitionat la valoarea numerica cuprinsa in paranteze.

95

Introducere 96
Extragerea unui substring ,x, dintr-un string mai mare ,y,se face indicind pozitia de inceput si firsit a stringului x in stringul y. var dd=w.substring(9,13) va ave avea ca rezultat : dd=plus Daca se doreste identificarea stringului x in stringul w Se poate utiliza w.match(x) care returneaza x daca acest sir este continut in w 10.2.Obiectul date Obiectul date este foarte dificil de manevrat deoarece exista un timp universal masurat dupa meridianul Greenwich (GMT) si unul setat pe PC-ul nostru. Pentru a afla data de astazi se construieste o instanta a obiectului Date : Var azi=new Date Obiectul Date foloseste ceasul intern al calculatorului si returneaza o instanta.Interno instanta a obiectului Dateeste intervalul de timp,in milisecundede la ora 0din 1 ianuarie 1970din zona Greenwich.Computerul nostru in acord cu setarile pe care le facemtransforma timpul (GMT) la timpul nostru local. Din variabila azi putem extrage diferite informatii :De exemplu zi.getTime() da numarul de milisecunde din 1/1/1970 zi.getMonth da lunain cadrul unui an zi.getDate() da data in interiorul lunii, zi.getDay() da ziua in cadrul saptaminii, Zi.getHours() da ora in cadrul celor 24 de ore ale zilei, Zi.getSeconds da secunda din minut. Pentru a efectua operatii cu datele cel mai sigur mod este sa se lucreze cu milisecunde.

96

Introducere 97

Capitolul 11. Imagini si Sunete

11.1.Imagini . Capitolul XIII

IMAGINI

Codul HTML permite plasarea de imagini in orice punct a unei pagini Web. In JavaScript in plus imaginea se poate schimba fara reincarcarea paginii. Aceasta se face cu ajutorul obiectului Image. Dintre aplicatiile obiectului Image sint animatiile obtinute prin miscarea anumitor imagini in pagina, modificarea imaginii elementelor din pagina la trecerea mousului, legarea diferitelor elemente. Este de multe ori mai prietenos ca pagina Web sa contina imagini sugestive despre actiunea care se declanseaza la actionarea unui buton. De aceea butoanele se pot inlocui cu imagini pe care se actioneaza si se poate declansa un eveniment. Actionarea pe imagine poate fi si o simpla trecere a mous-ului. De asemenea se poate face ca la actionare imaginea butonului sa se schimbe. Image este un obiect JavaScript si in consecinta are proprietati. Cea mai importanta este proprietatea sursa adica codul sursa a imaginii care, la fel ca la HTML, se noteaza src Image.src=o_oarecare_imagine.jpeg sau.gif sau.jpn In HTML aceasta imagine a fost introdusa prin
<img src=o_oarecare_imagine.jpeg width=100 height=150> border=0

Ne putem referi la imagine si prin indice cind obiectul

97

Introducere 98 document contine un sir de imagini. Un element imagine se va referi prin document.images[n] asociat unei imagini care apare a n-a in ordinea imaginilor din codul HTML. Pentru referirea la imaginea care apare prima in lista de imagini se foloseste
document.images[0].src=o_alta_imagine.jpeg

Evident ca referirea se poate face si prin nume. Daca imaginea s-a introdus prin
<img src=o_alta_imagine.jpeg height=150> name=imaginea_cu_creion border=0 width=100

atunci ne putem referi la imagine prin nume

document.imaginea_cu_creion.src=o_alta_imagine.jpe g

Acest lucru este valabil cind referirea la imagine se face in cadrul aceluiasi formular. Cind imaginea este in interiorul unui alt formular este necesara specificarea numelui formularului respectiv.
document.nume_alt_formular.imaginea_cu_creion.src= o_alta_imagine.jpeg

In cazul browserelor mai vechi etichtei <img> nu I se asociaza nici un handler legat de mouse. Pentru a face imaginea unui obiect sa reactioneaza la un clic se pune imaginea intr-un link
<a href= <img src= o_oarecare_imagine.jpeg border=0 width=100 height=150></a>

Pentru browserele mai noi, imaginile pot sa fie dimensionate dupa dorinta. Pentru aceasta se foloseste o alta adresa (valoare) pentru proprietatea src impreuna cu atributele height si width. Imaginea poate fi dimensionata la marimea dorita prin:
figura_1=new Image(90,60);

98

Introducere 99 Aici am definind figura_1 ca un obiect de tip Image de dimensiuni 90 x 60, cu alte cuvinte am creat o instanta a obiectului Image. Acest mod de lucru serveste scripturilor in care imaginile trebuie sa apara intr-o succesiune rapida. Pentru aceasta imaginile se incarca in memoria cache de unde accesul este imediat. Iata o astfel de operatie
var imaginea1=new Image(); imaginea1.src=figura_1.jpeg; var imaginea2=new Image(); imaginea2.src=figura_2.jpeg

Fiecare dintre cele doua instante se refera la o imagine pe care dorim s-o folosim. Procedind in acest fel imaginle sint incarcate in cache. Programul care permite o schimbare a imaginilor in mod automat este
<HTML> <HEAD> <SCRIPT > var img1=new Image() img1.src="figura_1.jpeg" var img2=new Image() img2.src="Winter.jpg" var img3=new Image() img3.src="Water lilies.jpg" </script> </head> <body bgColor="lightblue"> <img name="nume_imagine" src="figura_1.jpeg" width=260 height=260> <script> var indice=1; function show() { document.images.nume_imagine.src=eval("img"+indice+ ".src")

99

Introducere 100
indice=indice+1 if(indice==4) {indice=1} setTimeout("show()",1200) } show(); </script> </body> </HTML>
Program imaginiSchimb.html

Programul precedent permitecrearea senzatiei de miscare.Acest lucru se ace prin afisarea unor imaginicare reprezinta momente foarte apropiateunele de altele in miscarea respectiva.Afisarea imaginilor trebuie facuta cu o secventa potrivita,incit ochiul sa nu sesizeze inlocuirea uneie cu urmatoarea. Acest lucru se realizeaza cu functia settimeout(numefisier,interval de timp) asa cum se vede in exemplul urmator. <HTML> <HEAD> <SCRIPT >
var img1=new Image() img1.src="figura_2.jpeg" var img2=new Image() img2.src="figura_21.jpeg" var img3=new Image() img3.src="figura_22.jpeg" var img4=new Image() img4.src="figura_23.jpeg" var img5=new Image() img5.src="figura_24.jpeg" var img6=new Image() img6.src="figura_25.jpeg" </script>

100

Introducere 101
</head> <body bgColor="white"> <img name="nume_imagine" src="figura_2.jpeg" width=260 height=260> <script> var indice=1; function show() { document.images.nume_imagine.src=eval("img"+indice+ ".src") indice=indice+1 if(indice==6) {indice=1} setTimeout("show()",120) } show(); </script> </body> </HTML> Program plg.html

In acest program nu am urmarit descrierea fenomenului in mod cit mai natural ci numai redarea miscarii.Iara doua fisiere succesive:

101

Introducere 102

Se observa minima diferenta intre cele doua figuri. O alta posibilitate de schimbare a imaginilor este folosirea functiei select si handlerul de evenimente onChange
<form name=nume_form> <select name=selt size=22 onChange=Show1()> <option selected>figura 1</option> <option>figura 2</option> </select> <img name=primafig src=figura_1.jpeg width=100 height=150> </form>

La figura 1 ii atasam figura_1.jpeg la figura 2 figura_2.jpeg si asa mai departe pina la numarul maxim de figuri pe care le avem. Se observa o anumita recursivitate in scrierea numelui de fisiere imagine tocmai pentru posibilitatea utilizarii programarii.

102

Introducere 103 Inceperea actiunii se face prin prima figura. Cind utilizatorul schimba valoarea selectata se apeleaza functia Show1() Aceasta functie poate fi de forma
Function Show1() { tti=document.nume_form.selt.selectedindex document.nume_form.selt.primafig.src=figura_+tti+ .jpeg }

unde prima linie este o notatie. In functia Show1() se constuieste numele fisierului de intrare. O alta optiune din lista de selectare provoaca afisarea unei alte imagini. O alta posibilitate de interschimbare a imaginilor este aratata in imagini3.html
<html> <HEAD> <script> function Show1() { tti=document.nume_form.figbox.selectedindex document.nume_form.figbox.primafig.src="figura_"+tt i+".jpeg" } </script> </HEAD> <IMG name="imagine1" src='planbila10.jpeg' width=400 height=400 border=yes onMouseOver="this.src='figura_1.jpeg';" onMouseOut="this.src = 'figura_2.jpeg';"> <IMG name="qq" SRC="planbila10.jpeg" width=400 height=400 border=yes

103

Introducere 104
onMouseOver="this.src = 'figura_1.jpeg';" onMouseOut="this.src = 'pic2.jpeg';"> </html>
Program imagini3.html

cind imaginiea se schimba prin pozitionarea mausului deasupra imaginilor.

SUNETE
Introducerea sunetelor n paginile web constituie o alt modalitate de a le face mai atractive. Utilizarea muzicii se poate face tinand cont de legile copyright-ului. Doar daca sunetele sunt create de dvs. sau ele sunt oferite free intr-un domeniu public pot fi utilizate fara restrictii. Cele mai cunoscute tipuri de fisiere sunet utilizate, deoarece sunt acceptate de majoritatea browserelor, sunt MIDI (*.mid sau *.midi), WAVE (*.wav), AU (*.au). Codul HTML admite 3 metode in acest sens: 1. link-uri catre fisiere de sunet <a
href="fisier.ext">link</a>

unde fisier este numele fisierului iar ext reprezinta extensia acestuia si poate fi un grup de litere asa cum am aratat mai sus. Exemplu:
<html> <a href="beatles.mid">Click pentru sunet!</a> </html>

In acest caz, la activarea link-ului, fisierul beatles.mid va fi cintat de mediaplayerul instalat. 2. sunete care sa fie audiate direct din pagina web In acest caz este vorba de utilizarea unor fisiere de tip flash, care pot contine si butoane de control de tip Play,

104

Introducere 105 Pause, Stop. 3. sunet de background (fundal sonor). Daca in primele doua cazuri fisierele sunt deschise si controlate de catre user, prin activarea linkului, alegerea acestei modalitati de inserare a sunetului in pagina web implica riscul ca fundalul sonor sa fie deranjant. Pentru a elimina acest inconvenient este de preferat sa se utilizeze atribute suplimentare care permit controlarea sunetului. Inserarea se face astfel: a) daca browserul utilizat este numai Internet Explorer atunci se utilizeaza eticheta <bgsound> cu atributele SRC, LOOP si VOLUME. src este atributul care indica sursa fisierului care va fi audiat, atributul loop indica numarul de repetitii pentru fisier. Pentru valori numere naturale ale lui loop se va indica de cate ori se repeta fundalul sonor. Daca loop are valoarea infinite sau -1 fisierul se va repeta atata timp cat pagina este deschisa volume indica volumul sonor si poate avea valori intregi de la -10000 la 0. Pentru valoarea 0 a atributului volume acesta va fi maxim. Exemplu:
<html> <body> <BGSOUND SRC="helloo.wav" LOOP=5, VOLUME=0> </body> </html>

In acest caz salutul HELLOO! continut in fisierul helloo.wav se va repeta de 5 ori la un volum maxim.

105

Introducere 106 b) pentru a oferi userului posibilitatea de a utiliza si alte browsere precum si controlul asupra fundalului sonor este recomandata utilizarea tagului <embed> impreuna cu atributele WIDTH, HEIGHT si AUTOSTART. Exista si alte atribute pentru acest tag. Este vorba despre ALIGN, NAME si HIDDEN care sunt recunoscute de catre toate browserele. Atributele WIDTH, HEIGHT se refera la marimea ferestrei in care va fi afisat playerul care ofera control asupra sunetului. Atributul AUTOSTART poate avea valoarea true sau false dupa cum se doreste ca fundalul sonor sa porneasca o data cu incarcarea paginii sau nu. Exemplu:
<html> <EMBED SRC="beatles.mid" HEIGHT=60 WIDTH=144 AUTOSTART="false"> </EMBED> </html>

Asa cum am precizat prin valoarea false pentru atributul AUTOSTART userul are posibilitatea de a asculta fundalul sonor numai daca doreste acest lucru. Valorile optime pentru atributele HEIGHT si WIDTH sunt cele utilizate; altfel in browser nu se va afisa intregul panou (valori mai mici) sau acesta se va afisa impreuna cu un spatiu alb (valori pre mari). Aributul ALIGN poate avea valorile TOP, BOTTOM, CENTER, BASELINE, LEFT, RIGHT, TEXTTOP, MIDDLE, ABSMIDDLE, sau ABSBOTTOM si refera la modul in care se va face alinierea in pagina a panoului. Atributul NAME ofera posibilitatea utilizarii unui obiect construit intr-un Javascript iar atributul HIDDEN cu valori posibile true sau false specifica daca acest obiect va fi

106

Introducere 107 vizibil sau nu.

Capitolul 12. NAVIGATOR si COOKIE

12.1OBIECTUL NAVIGATOR

Obiectul Navigator a fost introdus de Netscape.Corespondentul pentru Microsoft Internet Explorer este clientInformation. Obiectul Navigator identifica browserul folosit pentru incarcarea paginii Web. Ca orice obiect acesta contine proprietati si metode. Cele mai utilizate proprietati sint: appCodename

`codename` este numele intern prin care browserul Web se identifica pe el insusi. Microsoft Internet Explorer 3.0 se identifica ca Mozilla la fel ca si in cazul Navigatorului Netscape. Navigator.appCodename va da `mozilla` in ambele cazuri Sintaxa: navigator.appCodeName appName

da numele extern al browser-ului, va returna Microsoft Internet Explorer pentru Explorer si Netscape pentru Netscape Navigator. Sintaxa: navigator.appName

appVersion

Aceasta proprietate contine informatii despre versiunea browserului folosit. Daca acesta este Netscape, va contine date despre limba folosita, numarul de versiune, platforma pe care ruleaza browserul si inca litera I(international) sau U(Statele Unite) care are o criptare mai puternica :

107

Introducere 108
'4.5 [en] (WinNT; I)'. Pentru IE, aceasta proprietate contine numai informatia despre versiunea compatibila a Internet Explorer si a platformei: '4.0 (compatible; MSIE 4.01; Windows NT)'. Sintaxa: navigator.appVersion userAgent

arata cum se identifica browserul la serverul Web. De obicei este concatenarea numelui intern cu versiunea. Aceste informatii sint utile deoareca paginile Web pot fi construite in variante distincte functie de browserul utilizatorului. Plugin

Contine informatii privind fiecare plug-in instalat pentru browser, cum ar fi Shockwave, Quicktime si altele. Obiectul mimeTypes

Este un sir care contine tipurile MIME (Multipart Internet Mail Extension) pentru browserul folosit. Sint de fapt tipuri de fisiere cum ar fi `image/jpeg care apeleaza un anumit vizualizor de imagine. In codul JavaScript se poate utiliza Navigator.mimeTypes[image/jpeg]
12.2.OBIECTUL COOKIE

Cookies permite unei pagini Web sa aiba urma unui vizitator particular. Sa presupunem ca situl nostru este vizitat de un vizitator. Acesta a juns acolo prin nu are importanta ce mijloace. Cind vizitatorul ajunge acolo I se asociaza un numar de identificare (in spatele scenei). Inafara cazului cind utilizatorul si-a configurat browserul incit sa semnalizeze cerinta din partea cookie vizitatorul nu sesizeaza nimic. Urmatoarea data cind pagina este vizitata vizitatorul este identificat din nou. De fapt nu se poate identifica persoana care este la computer ci computerul de la care s-a facut accesul la pagina Web. Folosirea COOKIE are si implicatii etice deoarece poate inregistra preferintele in domeniul produselor pe care eventual le-am achizitionat

108

Introducere 109
electronic, ce produse prefer data de acces si altele. Cu aceste date s poate face un studiu de marketing sau alte statistici orientate spre piata. De fapt nu se poate afla persoana care a folosit computerul ci numai faptul ca acela este locul de unde s-a accesat pagina Web. Mai mult cookie nu poate accesa nici o informatie din computer si in consecinta securitatea datelor nu este in pericol. Cookie este un set de date inregistrate in memoria calclatorului. Poate contine numele, valoarea, data cind actiunea inceteaza, domeniul si calea pentru cookie, etc. Cum se face de obicei in JavaScript cookie este o proprietate a obiectului document Document.cookie=name=value;expires=date_to_expire Pentru a inregistra data si momenul unei vizite numim cookie `ultimaVizita`, variabila today va introduce data si momentul si expdate va contine data la care cookie expira. Document.cookie=ultimaVizita=today;expires=expdate In acest caz data de expirare trebuie sa fie specificata intr-o forma fixa ZIU DD-MMM-YYYY HH:MM:SS GMT cu semnificatia obisnuita pentru litere. ZIU reprezinta ziua din saptamina, DD ziua din luna, MMM luna, YYYY anul, HH ora, MM minutul, iar SS secunda. In loc de ZIU se introduc abreviatiile zilelor Mon, Tue, Wed, Thu, Fri, Sat, Sun iar pentru luni Jan, Feb, Mar, Apr, May, Jun, Jul, Aug, Sep, Oct, Nov, Dec. Sa construim o functie cookie Function cookie1() { var today=new Date(); var expdate=new Date(); expdate.setTime(expdate.getTime()+(1*24*60*60*1000*365)); expdate=expdate.toGMTString(); document.cookie=ultimaVizita=+excape(today)+;expires=+expdate+; } Am definit doua variabile today si expdate si asociem data curenta la fiecare. Apoi se foloseste metoda setTime() pentru expdate pe care o fixam la 24 de ore dupa momentul de timp. Dupa ce am asociat data cind cookie expira la expdate folosim metoda

109

Introducere 110
toGMTString() care converteste data in formatul cerut de cookie. Apoi asciem totul la document.cookie. Daca in interiorul cookie am specificat domeniul meu cu numel rrtte.com prin domain=rrtte.com numai pagina Web gasita acolo poate accesa cookie. Aceasta regula se extinde si la subdomenii. Pentru a citi cookie se utilizeaza o functie care apeleaza `cookie_name`. Fie aceasta functie CitireCookie() Function CitireCookie() { var namesir=name+= var namelen=namesir.length var cooklen=document.cookie.length var i = 0 while (i<cooklen) {var j= i + namelen if(document.cookie.substring(i,j)==namesir) {endsir=document.cookie.indexOf(;,j) if(endsir == -1) {endsir = document.cookie.length} return unescape(document.cookie.substring(j,endsir)) } i = document.cookie.indexOf(,i) + 1 if (i == 0) break } return null } identic Aici s-au folosit proprietatile sirurilor cum ar fi length, metode ale sirurilor cum ar fi substring() si indexOf(). Am creat functia cookie1 si functia de citire, adica toate ingredientele pentru realizarea codului HTML <HTML> <HEAD> <script> function cookie1() { functia descrisa deja } functia CitireCookie(name)

110

Introducere 111
{ functia descrisa deja } </script> </HEAD> <BODY> <script> if(CitireCookie(ultimaVizita) == null) document.writeln(Este prima vizita. Hello !)} else {document.writeln(ultima vizita a fost la +CitireCookie(ultimaVizita)+<HR>)} Cookie1() </script> </BODY> </HTML> Ultima apelare a lui Cookie() este pentru a aduce la zi cookie. Crearea cookie se face in mod complet prin Document.cookie=nume=value;expires= data_de _expirare;domain = domeniul_cu_pagina; path=calea; secure

OBIECTE (2) Obiectul checkbox este caseta de validare. Prin executarea de clic operatorul specifica o valoare da/nu sau adevarat/fals. Dintre metode amintim blur() care dezactiveaza caseta de validare, click() care apeleaza handlerul de eveniment onClick al casetei de evaluare, focus() care activeaza caseta de validare. Ca proprieati amintim checked care intoarce o valoare care arata daca caseta de validare a fost controlata. (3) In limbajul HTML unica modalitate de a interactiona cu operatorul este prin asa numitul formular. Intr-un formular poate fi plasat un singur buton, text sau alt obiect. Dintre metdele asociate cu formularul amintim submit() care declanseaza trimiterea de catre browser a datelor spre

111

Introducere 112
programul de pe serve specificat in eticheta formularului. Ca si proprietati sint length care contine numarul de elemente dintr-un formular, name, target si altele. (4)Obiectul Window este fereasta creata de browser. El nu are eticheta corespunzatoare in HTML. Este obiectul de nivel cel mai inalt in JavaScript. Dintre metodele sale amintim alert() care afiseaza o caseta de avertizare, blur() dezactiveaza o fereastra, close() inchide fereastra, confirm() afiseaza o caseta de confirmare, focus() activeaza fereastra specificata, moveBy() deplaseaza fereastra cu valoarea specificata, moveTo() deplaseaza fereastra la locul specificat, open() deschide o noua fereastra, prompt() afiseaza o caseta de dialog, scroll() deruleaza continutul dintr-o fereastra pina locatia specificata, stop() opreste incarcarea unui alt element. Ca proprietati frames da toate informatiile despre cadrele din fereastra, name contine numel ferestrei, parent se refera la fereastra de nivel cel mai inalt care are cadrul curent, status face referire la mesajulde pe bara de stare a ferestrei. (5)Document este obiectul cel mai important cu toate ca window este de cel mai inalt nivel. Este folosit de JavaScript pentru afisarea paginilor. Contine toate elementele de comunicare cu utilizatorul. Ca metode write() care introduce textul in document, writeln() la fel ca write() dar adauga un caracter linie noua la sfirsitul textului, close() inchide fluxul de date spre document, open() deschide fluxul de date spre document. Ca proprietati amintim alinkColor care stabileste culoarea unei legaturi, bgcolor da culoarea fundalului, fgcolor culoarea textului in documentheight da inaltimea documentului in pixelilinks tablou de obiecte link URL adresa documnetului curent width latimea documentului in pixeli. Pentru generarea unei pagini HTML prin JavaScript se utilizeaza Document. De exemplu putem scrie un text punind un text ca parametru a metodei write <html> <body> <script type=text/JavaScript> document.write(UN anumit text in JavaScript); </script> </body> </html>

112

Introducere 113

PARTEA A DOUA Modelul Obiectului Document (DOM) Se ocupa cu crearea de structuri arborescente. Vom reveni mai tirziu.

PARTEA A TREIA

FOI DE STIL IN CASCADA (CSS)

Stilul unei pagini Web este foarte important atit pentru efectul estetic cit si pentru ca permite accentuarea unor elemente din pagina mai deosebite. Efectele se pot gestiona prin definirea asa numitelor foi de stil. O astfel de foaie de stil precizeaza caracteristicile fonturilor, modul de dispunere in pagina, culorile elementelor si a fondului s.a.m.d. adica toate caracteristicile pe care le dorim pentru elementul respectiv. Toate aceste caracteristici se grupeaza si se introduc unitar in documentele HTML formind o parte din ceea ce se numeste HTML dinamic (DHTML). Stilurile se pot defini in 3 feluri in functie de locul in care se situeaza. Exista trei locuri in care se poate plasa elementul de stil. Primul este in cadrul unei sectiuni speciale definita de <style> si </style>. Eticheta are un singur atribut: type. Valoarea type este pentru CSS text/css. Intre etichetele <style> si </style> se gasesc definitiile de stil. <style type=text/css> </style> O alta modalitate este sa legam o foaie de stil externa la document prin link. In acest caz stilul se aplica global la intreaga pagina.

113

Introducere 114
<link rel=foaie_de_stil type=text/css href = ceva_adresa / foaie.css> Dupa cum se vede apare din nou atributul type si in plus adresa href a fisierului foaie.css. A treia modalitate este introducerea stilului ca atribut al elementului HTML. De exemplu <h1 style=font-size: 12pt;>text</h1> Cum pot fi utilizate aceste foi de stil ?. Daca se doreste aplicarea global a unui mod de scriere definim acest mod in <head> si ori de cite ori se va folosi acel element modificat dupa dorinta noastra el va fi folosit in acelasi mod. Adica acela din <head>. De exemplu <style> h1{ font-style: courier; font-size: 33pt; } </style> utilizarea lui se face <h1> text cu caracteristici din stilul definit </h1> De obicei nu se foloseste acelasi stil in intregul document. Acest lucru se realizeaza prin definirea mai multor clase de stiluri considerate potrivite pentru diferite elemente din document. Daca stilul este definit dupa cum urmeaza <style type=text/css> .s1{ font-size: 12pt; color: red; } </style> utilizarea acestuie se face prin secventa <p class=s1> text </p> Daca intr-un document HTML silul este deja definit pentru un element, cum ar fi de exemplu text, pentru a sublinia numai o anumita parte din text stilul se defineste cu ajutorul atributului id <style type=text/css> #s1{

114

Introducere 115
font-size:16pr; font-style: arabic; color: yellow; } </style> Utilizarea se face prin secventa: <p> Ceva text <span id=s1> textul care trebie sa apara in stilul special</span> restul textului in stilul de la inceputul textului </p> Stilurile pot fi definite prin in aceeasi eticheta style iar folosirea lor poate fi facuta amestecat de exemplu utilizarea <span> intr-un text cu stil definit de eticheta id. Definirea si utilizarea foilor de stil pentru HTML sint in programul <HTML> <HEAD> <style type="text/css"> /* referire la proprietati ale fonturilor*/ p{ font-size: 25pt; font-style: courier; color: lightblue; } #s1{ font-size: 23pt; font-style: italic; color: red; } .o_clasa{ color: green; } </style> </HEAD> <BODY> <h1> <span id="s1"> AICI ARATAM CUM SE DEFINESC SI SE UTILIZEAZA STILURILE </SPAN></h1> <h2 style="font-size=50pt; color='blue' "> am scris cu 50pt <span id="s1"> am revenit la 23pt </span> acum la valoarea initiala</h2>

115

Introducere 116
<p> scriem cu fontul courier</p> <h1 class="o_clasa" >stil definit cu class</h1> </BODY> </HTML> Program stil1.html Pina cum ne-am referit esential la mecanismul de lucru cu foile de stil. Este momentul insa se vedem si citeva caracteristici legate de modul grafic de prezentare a textului. Primul element observat este legat de dimensiunea caracterelor (font-uri). Unitatile de masura acceptate de HTML sint de doua tipuri relative si absolute. Cele relative sint em care da inaltiea unui caracter relativ la dimensiunea ferestrei ex da inaltimea relativa a caracterului x px da inaltimea relativa in pixeli Se recomanda folosirea qacestor unitati relative pentru ca pagina pe care o creem sa ramina scalata asa cum am gindit-o pentru orice fereastra. Unitatile absolute sint: in inches cm centimetru mm milimetru pt puncte, 1pt = 1/72 inch pc pica, 1pc = 12 pt Pe linga aceste moduri de specificare a dimensiunii se pot folosi si procentele in raport cu fontul parinte. Pe linga marime caracterele se caracterizeaza prin family, style si weight font-family da familia de fonturi. Valorile pentru acest atribut sint nume de fonturi care se gasesc in calculator cum arfi Gothic, times New Roman etc sau un nume generic cum este serif corespunzator la Times New Roman, sans-serif corespunzator la Arial, cursive la Script fantasy la comic si monospace la Courier New. La font family I se pot atasa un singur sau mai multe valori. Prioritatea folosirii este dupa ordinea din lista. Daca numele unui caracter este foemat din mai multe cuvinte atunci se folosesc ghilimelele. font-style poate avea valorile normal, oblic si italic cu semnificatia din limbajul curent.

116

Introducere 117
font-weight determina grosimea caracterului. Valorile pentru aceasta proprietate pot fi normal, bold, bolder sau lighter. De obicei se folosesc numere de la 100 la 900. Un caracter normal corespunde la 400.

Pina acum ne-am referit in exclusivitate la elementele din HTML. In JavaScript pentru a obtine un efect similar s-au introdus trei proprietati sau obiecte ale obiectului document. Acestea sint tag, class si id, adica o relatie foarte strinsa cu HTML. Folosind proprietatea tags putem face referire la toate etichetele din HTML de exemplu eticheta <p>. Aca vrem ca textul sa fie de tip italic scriem: document.tags.p.fontStyle = italic De observat ca eticheta HTML apare impreuna cu proprietatea fontului care se doreste modificata. Daca stilul este definit cu class atunci se poate utiliza document.classes.fontclass.p.fonttype = Times New Roman daca se doreste aceasta pentru etichetele <p> document.classes.fontclass.all.fontStyle= Times New Roman pentru toate elementele din HTML. Daca stilul este definit cu id atunci JavaScrpt foloseste document.ids.s1.fontStyle= italic Se observa absenta numelui elementului HTML la care se refera ceea ce inseamna ca aceste obiecte pot fi folosite la toate elementele. De asemenea este evident ca font-size nu este admis in JavaScript si s-a inlocuit cu fontSize. La fel ca si alte nume de proprietati care au trebuit modificate pt ca sa fie utilizate in JavaScript. Pina acum am amintit atit in DHTML cit si in JavaScript numai citeva proprietati care pot fi folosite. In realitate proprietatile care pot fi precizate intr-o foaie de stil sint foarte diverse ele referindu-se la proprietatile de text, de culoare, de clasificare si proprietati la nivel de blocuri. Dintre elementele la nivel de bloc amintim Width, length, exprima latimea si lungimea elementului Dintre proprietatile de text amintim verticalAlign cu valori sub, sup, top textDecoration cu valori underline, overline, blink, line-through, none. Din proprietatile de clasificare amintim

117

Introducere 118
listStyleType care are valori none, disc, circle, square, decimal, lower allpha, upper-alpha, upper-roman care se aplica la elementele cu proprietatea display. Parte din semnificatiile valorilor pentru proprietatile amintite sint ilustrate in programul stil1.html <HTML> <HEAD> <style type="text/css"> /* referire la proprietati ale fonturilor*/ p{ font-size: 25pt; font-style: courier; color: magenta; } #s1{ font-size: 23pt; font-style: italic; color: red; } .o_clasa{ color: green; } </style> </HEAD> <BODY bgColor=#000000 > <h1> <span id="s1"> AICI ARATAM CUM SE DEFINESC SI SE UTILIZEAZA STILURILE </SPAN></h1> <h2 style="font-size=50pt; color='blue' "> am scris cu 50pt <span id="s1"> am revenit la 23pt </span> acum la valoarea initiala</h2> <p> scriem cu fontul courier</p> <h1 class="o_clasa" >stil definit cu class</h1> </BODY> </HTML> program stil1.html si still2.html. <HTML>

118

Introducere 119
<HEAD> <style type="text/css"> /* fonturi, text si culoare */ .clasa1{ font-size: 34pt; font-style: oblique; color: red; background-image:URL(planbila1.jpeg); background-repeat:no-repeat; background-position:240 5; } .clasa2{ font-size: 24pt; font-style: oblique; color: red; text-decoration: underline; text-align: right; } .clasa3{ font-size: 12pt; font-style: oblique; color: red; text-decoration: underline; text-align: right; text-transform: uppercase; text-indent: 10; } .clasa4{ font-size: 12pt; font-style: oblique; color: blue; text-decoration: underline; text-align: left; text-transform: uppercase; } .clasa5{ font-size: 12pt;

119

Introducere 120
font-style: oblique; color: lightblue; text-decoration: none; text-align: left; text-transform: uppercase; width: 208pt; background-color: lightyellow; } /* blocuri */ .clasa6{ font-size: 12pt; font-style: oblique; color: blue; text-decoration: blink; text-align: left; text-transform: capitalize; width: 268pt; background-color: lightblue; } .clasa7{ font-size: 12pt; font-style: oblique; color: yellow; text-decoration: blink; text-align: center; text-transform: capitalize; width: 168pt; length: 300pt; background-color: lightblue; border-style: 3D; background-image:URL(figura_3.jpeg); } </style> <script> figN=new Image(60,60); figN.src=figure_2.jpeg; </script> </head>

120

Introducere 121
<body> <form> <h1 class="clasa1"> ceva de scris. aici folosim numai un mod de scriere a stilului pentru a nu complica </h1> <h1 class="clasa2">Verificam alinierea la dreapta </h1> <h1 class="clasa3">aici scriem cu litere mici si transformama in litere mari. de asemenea punem deplasarea textului.text aliniat la dreapta </h1> <h1 class="clasa4">aici scriem cu litere mici si transformama in litere mari. de asemenea punem deplasarea textului.text aliniat la stinga. culoarea este albastru.trebuie text mult pentru a vedea indentarea </h1> <h1 class="clasa5" STYLE="background-image:URL(figura_2.jpeg)"> aici scriem cu litere mici si transformama in litere mari.text aliniat la stinga. culoarea este albastru deschis. Am introdus fondul cu STYLE in eticheta h1 aaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaa aaaaaaaaaaaaaaaaaaaaaa aaaaaaaaaaa aaaaaaaa </h1> <div class="clasa6" style="background-image:URL(figura_1.jpeg)"> <h1>aici scriem cu litere mici si transformam la capitalize.text aliniat la stinga. culoarea este albastru pe fond imagine.Am introdus fondul imagine in STYLE din eticheta div. </h1> </div > <h1 class="clasa7" >aici scriem cu litere mici si transformam la capitalize.text centrat pe fond imagine. Aici am introdus background-image in STYLE la .clasa7 </h1> </form> </body> </HTML> Program stil2.html

121

Introducere 122
Aici am introdus ca si fond imagini. Aceasta operatie a fost facuta in interiorul unui script si in eticheele div si h1 dinafara scriptului adica in codul HTML pur. O alta proprietate a fondului cind el este o imagine este pozitia lui data prin coordonatele x si y relativ la coltul stinga sus a ferestrei backgroundposition:. Pozitia se specifica in unitati relative sau absolute asa cum s-a aratat la dimensiunile caracterelor. Exista si cuvinte rezervate: top aliniaza imaginea cu marginea superioara a elementului pe care-l contine. Se aplica numai pentru precizarea pozitiei y left aliniaza imaginea la stinga right aliniaza imaginea la dreapta bottom aliniaza imaginea la portiyunea inferioara a elementului center centraza imaginea pe element Daca imaginea nu umple intreaga suprafata atunci se poate repeta prin background-repeat la care se asociaza la cuvintele cheie repeat care repeta imaginea pe vertical si orizontala repeat-x repeta imaginea pe orizontala repeat-y repeta imaginea pe verticala no-repeat nu se repeta imaginea Un alt element pentru fond este color care determina culoarea elementului text. Pentru acesta este asociat valorile RGB sau cuvintele indicind culoarea : black, silver,gray, white, Maroon, red, purple, fuchsia, green, lime, olive, yellow, navy, blue, teal,aqua. Amestecarea culorilor epntru a obtine nuanta dorita este foarte dificila. In scriptul urmator generam culorile prin modificarea compozitiei RGB si vizualizam codul de culoare rezultat.

Program culoriCod.html

STRATURI

122

Introducere 123
La scrierea unui document intr-un cadru sau fereastra, vechilu continut ere inlocuit cu altul nou. Sau imaginea veche se inlocuia cu cea noua. Elementele de JavaScript prezentate pina cum nu au permis suprapunerea elementelor care formeaza o pagina peste altele. Acest lucru este posibil prin ceea ce se numeste STRATURI. Spre deosebire de paragraful anterior cind forma blocurilor de text a fost stabilita de noi dar pozitia nu, in cazul straturilor putem pozitiona aceste blocuri dupa dorinta. Deci, pe linga elementele care au apartinut de DHTML, introducem elemente care dau pozitia, caracteristicile casetei si vizibilitatea. Pozitia descrie modul cum se specifica pozitia elementului: position: absolute; indica faptul ca coordonatele elementului sint absoute. Cu aceasta alegere se foloseste left si top care de fapt dau coordonatele. Position: fixed; Pzitie fixa care nu se modifica nici prin derularea ferestrei. Se folosesc si aici left si top pentru exprimarea pozitiei. Position: relative; Specifica pozitia in acelasi mod ca si absolute dar de data aceasta relati la elementul anterior. In plus fata de left si top, coordonatele se pot exptrima sprin perechea right si bottom la fel ca si alte combinatii. Nu se foloseste niciodata top si bottom pentru ca ele fixeaza pozitia pe verticala amindoua ceea ce nu este necesar. La fel right si left nu se olosesc nicidata impreuna. Stratul este dimensionat cu ajutorul lui width si height care dau latimea si inaltimea stratului. Atentie la DHTML puteam atasa o dimensiune blocului prin length si width asa cum se vede in programul strat1.html. Daca textul cuprinde cuvinte mai lungi decit cele specificate dimensiunea nu se mai respecta in ambele cazuri, adica DHTML si CSS. <HTML> <HEAD> <style type="text/css"> .clasa5{ font-size: 12pt; font-style: oblique;

123

Introducere 124
color: magenta; text-decoration: underline; text-align: center; text-transform: uppercase; width: 168pt; length: 28pt; background-color: blue; left: 0; position: absolute; top: 0; visibility: visible; } /* blocuri */ #clasa6{ font-size: 12pt; font-style: oblique; color: blue; text-align: left; text-transform: capitalize; background-color: lightblue; position: absolute; top: 0; left: 0; height: 50; width: 50; visibility: visible; } .clasa7{ font-size: 12pt; font-style: oblique; color: blue; text-decoration: blink; text-align: right; text-transform: capitalize; height: 100; width: 50; background-color: magenta; position: absolute;

124

Introducere 125
left: 130; top: 80; visibility: visible; } .clasa8{ font-size: 12pt; font-style: oblique; color: magenta; text-decoration: underline; text-align: center; text-transform: uppercase; width: 168pt; length: 28pt; background-color: yellow; left: 130; position: absolute; top: 200; visibility: visible; } </style> </head> <body> <form> <h1 class="clasa5">aici scriem cu litere mici si transformama in litere mari.text aliniat la stinga. culoarea este albastru. </h1> <h1 class="clasa8">aici scriem cu litere mici si transformama in litere mari.text aliniat la stinga. culoarea este albastru. </h1> <h1 id="clasa6"> font-size: 12pt; font-style: oblique; color: blue; text-align: left; text-transform: capitalize; background-color: lightblue; position: absolute; top: 0;

125

Introducere 126
left: 0; height: 50; width: 50; visibility: visible; </h1> <h1 class="clasa7" > font-size: 12pt;<br> font-style: oblique;<br> color: blue;<br> text-decoration: blink;<br> text-align: right;<br> text-transform: capitalize;<br> width: 168pt;<br> length: 300pt;<br> background-color: magenta;<br> position: absolute;<br> left: 130;<br> top: 140;<br> visibility: visible;<br> </h1> </form> </body> </HTML> Program strat1.html Pina acum am reusit sa delimitam suprafete care se puteau plasa in pozitia dorita. Adica erau date doua dimensiuni x si y prin combinatii left, right, top si bottom. Suprapunerea straturilor se facea in ordinea scrierii in codul DHTML. Straturile introduc cea dea treia dimensiune sub forma z-index care permite aducerea la suprafata a stratului pe care-l vrem. Cu cit z-index are o valoare atasata mai mare cu atit stratul este mai aproape de privitor. Daca in programul strat1.html se ataseaza la clasa5 z-index: 1; atunci primul strat va deveni cel mai vizibil. O alta proprietate a straturilor este vizibilitatea, visibility. Valorile asociate sint hidden cind stratul se doreste sa fie ascuns, visible cind se doreste sa fie vizibil collapse cu acelasi efect ca si hidden (mai putin la tabele) si inherit

126

Introducere 127
cind valoarea este mostenita de la parinte. Blocurile de date se delimiteaza prin eticheta <div>. Ea este intrucitva asemeanatoare cu eticheta paragraf <p> care si ea delimiteaza un anumit grup de date. Un bloc este continut intre etichetele <div> si </div>. Dintre proprietatile etichetei div amintim Align poate lua valorile left,right, center, justify Class o lista de clase de stiluri Dir indica directia textului din eticheta, ia valorile ltr si rtl insemnind de la stinga la dreapta si de la dreapta la stinga id defineste tipul de stil name numele instantei blocului de date, este folosita de JavaScript style permite definirea de stil din interiorul unei etichete title permite titlul pentru eticheta si nu pentru intregul document.

In paragraful anterior am pozitionat diferite elemente text in interiorul paginii. Pozitionarea blocurilor delimitate de div se face in mod similar, asa cum se vede in programul div1.html. Tot in acest program se vede accesul la parametrii foilor de stil a JavaScript. Vom prezenta numai folosirea sub Netscape si Internet explorer. Accesul la un bloc de date se face prin Document.layers[numeStrat] unde strat este este numele pe care l-am atasat etichetei <div> pentru Netscape si Document.all[clasa1] unde clasa1 este identificatorul de stil pentru Internet Explorer. Se observa ca in primul caz se face referire la numele din div in timp ca in al doilea caz se foloseste identificatorul de foaie de stil. Accesul la straturi se face direct in cazul browserelor de tip Navigator Document.layer.[numeStrat].proprietate_din_foaia_de_stil in timp ce la Internet Explorer prin intermediul proprietatii style Document.all.[idStrat].style.proprietate_din_foaia_de_stil Pentru anumite aplicatii care contin mai multe elemente HTML Este favorabil sa avem un ID comun. Document.all(ID) permite accesul la orice element cu din program prin intermediul ID-ului atasat. Cind mai multe elemente poseda acelasi ID atunci ele formaeaza un sir si pot fi apelate ca atare. Un exemplu este in programul urmator

127

Introducere 128
<html> <div id="a1"> <p>Aici avem unul din elementele cu identificator comun</div> <div ID="a2"> <span ID="a1"> <p>Aici avem al doilea din elementele cu acelasi identificator</span> <form ID="a1"> <p>Al treilea element </form> <script> function print_a1() { icont = document.all("a1").length; for (i=0; i<icont; i++) { alert("Elementul este de tipul " + document.all("a1",i).nodeName); } } print_a1(); </script> </html> Program documentall.html Un exemplu privind straturile este in codul urmator <HTML> <style type="text/css"> #clasa1{ font-size: 12pt; font-style: oblique; color: blue; text-decoration: blink; text-align: right; text-transform: capitalize; height: 100; width: 450; background-color: magenta; position: absolute; left: 0; top: 80;

128

Introducere 129
visibility: visible; z-index: 0; } #clasa2{ font-size: 12pt; font-style: oblique; color: magenta; text-decoration: underline; text-align: left; text-transform: uppercase; width: 168pt; length: 128pt; background-color: yellow; left: 230; position: absolute; top: 10; visibility: visible; z-index: 1; } </style> </head> <body> <div name =strat1 id="clasa1"> <h1> STRAT1 <BR> aici scriem cu litere mici si transformama in litere mari.text aliniat la stinga. culoarea este albastru. </h1> </div> <div name=strat2 id="clasa2"> <h1 class="clasa2">STRAT2<BR>aici scriem cu litere mici si transformam in litere mari. Text aliniat la stinga. Culoarea este albastru. </h1> </div> </HTML> Program div1.html Modificam dinamic parametrul z-index. Asa se pot modifica cu efecte importante oricare din proprietatile straturilor.

129

Introducere 130
Trebuie scris la z-index, in cazul in care sintem in JavaScript zIndex. Asa merge. Prezentarea in fiecare cod al foilor de stil in mod explicit duce la cresterea lungimii codului. Exista insa si alte modalitati de introducere a foilor de stil in codul HTML; prin istructiunea link <link rel=stylesheet type=text/css href=URL cu foile de stil title=> si <h1 style=color.> text HTML </h1> cind se doreste un stil particular numai pentru un anumit paragraf. In urmatoarele programe vom folosi aceste facilitati. <HTML>23 ianuarie 2004 <head> <script type="text/JavaScript"> function schimb(identific,stare){ vizi=eval("document.all['" + identific + "'].style" + ".zIndex = '" + stare + "'"); //document.write(vizi); } </script> <link rel=stylesheet type=text/css href=divstyle.css> </head> <body> <div name="strat1" id="clasa1"> <h1> STRAT1 <BR> aici scriem cu litere mici </h1> </div> <div name="strat2" id="clasa2"> <h1 >STRAT2<BR>aici scriem cu litere mici si transformama in litere mari.text aliniat la stinga. culoarea este albastru. </h1> </div> <form> <input type="button" value="SchimbStare"

130

Introducere 131
onclick="schimb('clasa1','2');schimb('clasa2','1')"> </form> <body> </HTML> Program divZindex.html O alta forma mai directa de modificare a proprietatilor este in programul urmator <HTML>23 ianuarie 2004 <head> <script type="text/JavaScript"> function schimb(identific,proprietate,valoare){ vizi=eval("document.all['" + identific + "'].style." + proprietate + " = '" + valoare + "'"); //document.write("<BR>vizi: " +vizi); } </script> <link rel=stylesheet type=text/css href=divstyle1.css> </head> <body> <div name="strat1" id="clasa1"> <h1> STRAT1 <BR><BR> aici scriem cu litere mici </h1> </div> <div name="strat2" id="clasa2"> <h1 >STRAT2<BR><BR>aici scriem cu litere mici si transformama in litere mari.text aliniat la stinga. culoarea este albastru. </h1> </div> <form> <input type="button" value="SchimbStare" onclick="schimb ('clasa1','zIndex','0');schimb('clasa2','zIndex','1')"> </form> </body> </HTML> Program divChange.html

131

Introducere 132
Incarcarea unui fisier exern este deseori necesara pentru gestionarea paginii. Pentru aceasta se foloseste eticheta <iframe atribute> cu atributele prezentate in tabelul urmator. Tabel Atributele lui iframe Align Class Frameborder Aliniaza datele. Are valorile left, right justify, center Lista de clase de stiluri la care iframe este o instanta Deseneaza un chenar in jurul cadrului cind are valoarea 1 si nu cind este 0 Inaltimea cadrului adresa din foile de stil ??????? Spatiul ramas liber, in pixeli, pina la marginile de sus si jos a cadrului Spatilu pina la marginile laterale Numele atasat Dimensionare fixa Valori auto, yes si no pentru barele de derulare Adresa de la care se incarca Stilul ca atribut in iframe Titlul blocului Latimea blocului

Height Id Longdesc Marginheight Marginwidth Name Noresize Scrolling Src Style Title Width

In programul div2Change.html este folosit iframe pentru a incarca fisierul timergol.html <HTML>24 ianuarie 2004 <head> <script> function schimb(a,b) { if(a>=b) {a=a-1;b=b+1;} else

132

Introducere 133
{a=a+1;b=b-1;} document.all['clasa1'].style.zIndex=a; document.all['clasa2'].style.zIndex=b; } </script> <link rel="stylesheet" type="text/css" href="divstyle2.css"> </head> <body BGCOLOR='red'> <div name="strat1" id="clasa1" ALLOWTRANSPARENCY="true" STYLE="background-color:transparent"> <h1> STRAT1 <BR><BR> aici scriem cu litere mici </h1> </div> <div name="strat2" id="clasa2" > <h1 >STRAT2<BR><BR>aici scriem cu litere mici si transformama in litere mari.text aliniat la stinga. culoarea este albastru. </h1> </div> <div name="extern" id="clasa3" > <iframe name="cadru" src="./timergol.html" id="clasa3" frameborder="1" height="60" width ="80" scrolling="no"></iframe> </div> <form> <input type="button" value="SchimbStare" onclick="schimb(1,0)"> </form> </body> </html> program div2Change.html

Aici am introdus proprietatea de transparenta a foii prin ALLOWTRANSPARENCY= "true" STYLE="background-color:transparent" ceea ce determina ca textul care este deasupra sa permita vizionarea textului care se situeaza dedesupt. Alte posibilitati oferite de CSS sint prezentate in programul divmisc.htlm

133

Introducere 134
<HTML> <head> <script> var c=0; function deplasare() { c=c+1; document.motor.pozitie.value=c; poz1=20+c*5; poz2=c*2; poz3=500-c*5; poz4=c*2; if(poz1<500) {document.all['clasa1'].style.left=poz1;document.all['clasa1'].style.top=poz1 ; document.all['clasa2'].style.left=poz2;document.all['clasa2'].style.top=40; document.all['clasa3'].style.left=poz3;document.all['clasa3'].style.top=180; document.all['clasa4'].style.left=40;document.all['clasa4'].style.top=poz4; } else {c=-c} setTimeout("deplasare()",1); } </script> <link rel="stylesheet" type="text/css" href="divstyle3.css"> </head> <BODY BGCOLOR="lightblue" FGCOLOR="blue"> <form name="motor"> <input type="text" name="pozitie" size="5" style="borderstyle=solid;border-color:purple;height:200 "> <input type="button" style="position:relative;left:0;top:30;borderstyle:solid;border-color:purple" value="START" onClick="deplasare()"> <div name="strat1" id="clasa1" STYLE="border-style:solid;bordercolor:purple"> <h1> 1 </h1> </div> <div name="strat2" id="clasa2" STYLE="border-style:solid;bordercolor:purple;height:300">

134

Introducere 135
<h1> 2 </h1> </div> <div name="strat3" id="clasa3" STYLE="border-style:solid;bordercolor:purple"> <h1> 3 </h1> </div> <div STYLE="border-style:solid;border-color:purple"> </div> <div name="strat4" id="clasa4" STYLE="border-style:solid;bordercolor:purple"> <h1> 4 </h1> </div> </form> </body> </html> program divmisc.htlm In acest exemplu functia deplasare a fost apelata recursiv, iar diferitele proprietati ale stilurilor au fost modificate in mod continu. Viteza de derulare si directia se pot regla prin parametrii poz-. In plus am introddus atributul style in eticheta div, ceea ce permite formarea unor chenare care sa incadreze textul. Acelasi lucru este permis si pentru caseta text. Chenarul se dimensioneaza automat la marimea textului. Se poate folosi si aici proprietatea height pentru a avea un chenar a carui dimensiuni depasesc dimensiunile necesare textului. Largimea este insa egala cu largimea cadrului si nu poate fi reglata din style (de verificat)

Vizibility se poate folosi si in ascunderea unor elemente din HTML. In programul hidetext.html am ascuns un buton si o caseta text. <html> <FORM name="motor"> <input ID="textul" "type="text" name="pozitie" size="5" style="borderstyle=solid;border-color:darkred;height: 200;"> <INPUT ID="buton1" STYLE="position:relative; left:0;borderstyle:solid;border-color:darkred;''" TYPE="button" VALUE="ascunde

135

Introducere 136
buton2 si text" onclick="vizibilitate()"> <INPUT ID="buton2" STYLE="position:relative;left:50; borderstyle:solid;border-color:darkred;" TYPE="button" VALUE="acunde buton2 si text" onclick="vizibilitate()"> </FORM> <SCRIPT> <!-function vizibilitate() { if (document.getElementById('buton2').style.visibility != "hidden") {document.getElementById('buton2').style.visibility = " hidden";document.getElementById('textul').style.visibility ="hidden";document.getElementById('buton1').value ="Show buton2 si text";} else {document.getElementById('buton2').style.visibility = "visible";document.getElementById('buton1').value ="ascunde buton2 si text";document.getElementById('textul').style. visibility="visible";} } // --> </SCRIPT> </html> Program hidetext.html Pe linga vizualizarea unor elemente prin folosirea atributului style din eticheta, am introdus un nou element: getelementById(``)care permite accesarea elementului dupa identificatorul ID. In programul anterior am folosit STYLE in interiorul etichetelor. Trebuie insa avut in vedere ca in interiorul etichetei nu se pun ghilimele pentru diferite atribute pentru ca ele nu sint siruri. Stilurile asa cum s-a vazut, au fost introduse in diferite locuri din code. Trebuie sa se stabileasca prioritatile atunci cind sint definite deodata. Cind stilul se defineste in elementul respectiv el are cea mai mare prioritate iar cins tilul se defineste in eticheta <style> cea mai joasa. Competitia dintre prioritati se vede in codul urmator. <HTML> <STYLE>

136

Introducere 137
.textTan {color: tan} .textPurple {color: purple} </STYLE> <h1 onMouseOver="this.className = 'textTan';" onMouseOut="this.className = 'textPurple';"> Prioritatea cea mai joasa. </h1>

<DIV CLASS="textBlue" STYLE="color: onMouseOver="this.style.color = 'tan'" onMouseOut="this.style.color = 'purple'"> <SPAN> <h1> Cum functioneaza un stil definit in CLASS. </h1> </SPAN> </DIV> <DIV CLASS="textBlue" STYLE="color: onMouseOver="this.style.color = 'tan'" onMouseOut="this.style.color = 'purple'"> <SPAN CLASS="textOrange" STYLE="color: magenta" onMouseOver="this.style.color = 'green'" onMouseOut="this.style.color = 'brown'"> <h1> Prioritatea cea mai ridicata.</h1> </SPAN> </DIV> </html> Program prioristyle.html

red"

red"

Fiecare text are trei culori. Prima valoare este cea care apare la incarcarea documentului fiind inlocuita apoi prin evenimentele mouse. Alte etichete pentru lucrul cu straturi sint<layer> si <ilayer>. Spre deosebire de cele prezentate stratul este acum definit printr-un obiect care are numele layer. Aceste referiri nu sint inca standardizate si apartin browserelor familiei Netscape.

137

Introducere 138

Capitolul XX ANIMATII In exemplele pe care le-am dat pina acum exista multe elemente dinamice, efecte de culoare, transparenta, etc. Dar animarea figurilor ofera un plus de atractivitate si permite desctrierea diferitelor experinete mai greu de realizat direct, in practica. Cea mai simpla animatie este animarea unei linii.

Program animlinie.html Prima aplicatie este schimbarea cadrelor in mod automat am studiat la capitolul Imagini programul imaginiSchimb.html. Aici expunerea imaginilor se realizeaza automat la incarcarea programului. Programul poate fi schimbat simplu pentru a se declansa cu un eveniment clic. Aici se introduce asa numitul JavaScript URL care permite accesul la URL prin programare. Cind un eveniment clic pe legatura se produce se executa nu legatura la URL asa cum se intimpla la o ancora obisnuita ci la o functie. Deci JavaScript URL executa o functie in loc sa incarce un fisier.

<HTML> <HEAD> <SCRIPT type="text/javascript"> var num=1 var img1 = new Image (150,150) img1.src = "figura_1.jpeg" var img2 = new Image (150,150) img2.src = "figura_2.jpeg" var img3 = new Image (150,150) img3.src = "fig2.jpg" function startshow() { for (i=1; i<20; i=i+1) {document.mypic.src=eval("img"+num+".src")

138

Introducere 139
for(x=1; x<2800; x=x+1) {} num=num+1 if(num==4) {num=1} } document.mypic.src=img1.src } </SCRIPT> </HEAD> <BODY > <CENTER> <IMG SRC="figura_1.jpeg" NAME="mypic" BORDER=0 width="100" alt=""> <p> <A HREF="JavaScript:startshow()"> Display animation</a> </CENTER> </BODY> </HTML> program anim2.html NU MERGE Aici ceva deosebit este al doilea ciclu for care are rolul de a incetini modul de prezentare a cadrelor, adica pentru a face posibila vizionarea cadrelor. C Capitolul XII Obiectele NUMBER si MATH Pentru a lucra cu valori numerice se foloseste obiectul number. In felul acesta se poate accesa cel mai mare si cel mai mic numar valorile ininity si NaN. Astfel daca argumentul lui Number este un sir raspunsul nu va fi o eroare ci NaN. Proprietatile obiectului sint MAX_VALUE care da cel mai mare numar reprezentabil, MIN_VALUE, cel mai mic numar, NEGATIVE_INFINITY si POSITIVE_INFINITY se obtin cind se face o impartire cu 0. <HTML> <BODY> <script> t=10/0;

139

Introducere 140
document.write("t = "+t); alfa=isFinite(t); if(alfa==true) {document.write("<BR><BR>numarul obtinut este finit;")} else {document.write("<BR>numarul obtinut NU este finit;")}; document.write("<BR>__________________________________________ ______________"); o=eval(10/Infinity); document.write("<BR>o = "+o); document.write("<BR>MIN_VALUE="+Number.MIN_VALUE+"<BR>M AX_VALUE="+Number.MAX_VALUE) document.write("<BR>__________________________________________ ______________"); aa=Number.MAX_VALUE*10 bb=Number.MIN_VALUE/10 document.write("<BR>aa = "+aa+"<BR>bb ="+bb) </script> </BODY> </HTML> Program eval.html Acum putem sa evaluam orice expresii matematice. Daca aceste expresii sint singulare folosirea obiectuli Number permite continuarea functionarii codului prin semnalarea valorilor infinite. Marele avantaj este ca nu se obtine eroare. apitolul 8 OBIECTUL MATH Dintre obiectele predefinite in JavaScript Array, ,String,Boolean,Number,Math si regExp Math va fi tratat in continuare. Spre deosebire de alte obiecte pe cae operatorul le poate crea, obiectul MATH nu se creaza niciodata, el fiind predefinit. Obiectul MATH este folosit pentru constante si functii matematice si permite calculul direct al expresiilor. Ca si celelate obiecte are proprieatati si metode.De exemplu constantele obisnuite din matematica sint proprietati

140

Introducere 141
ale Proprietatile sint constanta Euler si baza logaritmilor naturali E, PI 3.14, LN10 ln10, LN2 ln2, LOG10E logE, LOG2E logaritm in baza 2 din E si SQRT_2 radical din 0,5. Metodele apartinind obiectului Math sint prezentate in tabelul urmator. Abs(x) Valoarea absoluta Sin(x), cos(x), tan(x) Functiile trigonometrice sin, cos si tg Acos(x), asin(x), atan(x) Fuctiile arcsin, arccos si arctg Atan2(y,x) un numar intre pi si pi reprezentind unghiul format de axa Ox si dreapta care trece prin origine si punctul (x,y) Exp(x), log(x) Exponentiala si logaritm in baza e Min(x,y), max(x,y) Minimul si maximul dintre doua numere Pow Functia putere Round Rotunjeste numarul la cel mai apropiat intreg Sqrt Radacina patrata Ceil, floor Cel mai mic intreg mai mare sau egal cu un numar; si cel mai mare intreg mai mic sau egal cu un numar Random Produce un numar aleator intre 0 si 1 Numerele aleatoare sint folosite pentru a obtine efecte vizuale intimplatoare. Functia folosita este random Program random.html Argumentele pentru functiile trigonomice sint in radiani. De obicei se foloseste pentru calculele matematice sa se lucreza cu with pentru a nu rescrie Math de mai multe ori. Daca functiile trigonometrice inverse asin si acos au argument mai mare decit 1 rezulatul este NaN din cauza depasirii domeniului de definitie. Obiectul Math se foloseste pentru calculul elementelor din animatii din paginile Web.

141

Introducere 142
Capitolul XII Obiectul NUMBER Pentru a lucra cu valori numerice se foloseste obiectul number. In felul acesta se poate accesa cel mai mare si mai mic numar valorile ininity si NaN. Astfel daca argumentul lui Number este un sir raspunsul nu va fi o eroare ci NaN. Proprietatile obiectului sint MAX_VALUE care da cel mai mare numar reprezentabil, MIN_VALUE, cel mai mic numar, NEGATIVE_INFINITY si POSITIVE_INFINITY se obtin cind se face o impartire cu 0. <HTML> <BODY> <script> t=10/0; document.write("t = "+t); alfa=isFinite(t); if(alfa==true) {document.write("<BR><BR>numarul obtinut este finit;")} else {document.write("<BR>numarul obtinut NU este finit;")}; document.write("<BR>__________________________________________ ______________"); o=eval(10/Infinity); document.write("<BR>o = "+o); document.write("<BR>MIN_VALUE="+Number.MIN_VALUE+"<BR>M AX_VALUE="+Number.MAX_VALUE) document.write("<BR>__________________________________________ ______________"); aa=Number.MAX_VALUE*10 bb=Number.MIN_VALUE/10 document.write("<BR>aa = "+aa+"<BR>bb ="+bb) </script> </BODY> </HTML> Program eval.html Acum putem sa evaluam orice expresii matematice. Daca aceste expresii

142

Introducere 143
sint singulare folosirea obiectuli Number permite continuarea functionarii codului prin semnalarea valorilor infinite. Marele avantaj este ca nu se obtine eroare.

Capitolul XIII IMAGINI Codul HTML permite plasarea de imagini in orice punct a unei pagini Web. In JavaScript in plus se poate schimba imaginea fara reincarcarea paginii. Aceasta se face cu ajutorl obiectului Image. Dintre aplicatiile obiectului Image sint animatiile obtinute prin miscarea anumitor imagini in pagina, modificarea imaginii elementelor din pagina la trecerea mousului, legarea diferitelor elemente. Este de multe ori mai prietenos ca pagina Web sa contina imagini sugestive despre actiunea care se declanseaza la actionarea unui buton. De aceea butoanele se pot inlocui cu imagini pe care se actioneaza si se poate declansa un eveniment. Actionarea pe imagine poate fi si o simpla trecere a mous-ului. De asemenea se poate face ca la actionare imaginea butonului sa se schimbe. Image este un obiect JavaScript si in consecinta are proprietati. Cea mai importanta este proprietatea sursa adica codul sursa a imaginii care, la fel ca la HTML, se noteaza src Image.src=o_oarecare_imagine.jpeg In HTML aceasta imagine a fost introdusa prin <img src=o_oarecare_imagine.jpeg border=0 width=100 height=150> Ne putem referi la imagine si prin indice cind obiectul document contine un sir de imagini. Un element imagine se va referi prin document.images[n] asociat unei imagini care apare a n-a in ordinea imaginilor din codul HTML. Pentru inlocuirea imaginii care apare prima in lista de imagini se foloseste document.images[0].src=o_alta_imagine.jpeg Evident ca referirea se poate face si prin nume. Daca imaginea s-a introdus prin <img name=imaginea_cu_creion src=o_alta_imagine.jpeg border=0 width=100 height=150>

143

Introducere 144
atunci ne putem referi la imagine prin nume document.imaginea_cu_creion.src=o_alta_imagine.jpeg Acest lucru este valabil cind referirea la imagine se face in cadrul aceluiasi formular. Cind imaginea este in interiorul unui alt formular este necesara specificarea numelui formularului respectiv. document.nume_formular.imaginea_cu_creion.src=o_alta_imagine.jpeg In cazul browserelor mai vechi etichtei <img> nu I se asociaza nici un handler legat de mouse. Pentru a faca imaginea un obiect care reactioneaza la un clic se pune imaginea intr-un link <a href= <img src= o_oarecare_imagine.jpeg border=0 width=100 height=150></a> Pentru browserele mai noi, imaginile pot sa fie dimensionate dupa dorinta. Pentru aceasta e foloseste o alta adresa (valoare) pentru proprietatea src impreuna cu atributele height si width. Imaginea poate fi dimensionata la marimea dorita prin: figura_1=new Image(90,60); Aici am definind figura_1 ca un obiect de tip Image de dimensiuni 90 x 60, cu alte cuvinte am creat o instanta a obiectului Image. Acest mod de lucru serveste scripturilor in care imaginile trebuie sa apara intr-o succesiune rapida. Pentru aceasta imaginile se incarca in memoria cache de unde accesul este imediat. Iata o astfel de operatie var imaginea1=new Image(); imaginea1.src=figura_1.jpeg; var imaginea2=new Image(); imaginea2.src=figura_2.jpeg Fiecare dintre cele doua instante se refera la o imagine pe care dorim s-o folosim. Procedind in acest fel imaginle sint incarcate in cache. Programul care permite o schimbare a imaginilor in mod automat este <HTML> <HEAD> <SCRIPT > var img1=new Image() img1.src="figura_1.jpeg" var img2=new Image()

144

Introducere 145
img2.src="Winter.jpg" var img3=new Image() img3.src="Water lilies.jpg" </script> </head> <body bgColor="lightblue"> <img name="nume_imagine" src="figura_1.jpeg" width=260 height=260> <script> var indice=1; function show() { document.images.nume_imagine.src=eval("img"+indice+".src") indice=indice+1 if(indice==4) {indice=1} setTimeout("show()",1200) } show(); </script> </body> </HTML> Program imaginiSchimb.html O alta posibilitate este folosirea select si handlerul de evenimente onChange <form name=nume_form> <select name=selt size=22 onChange=Show1()> <option selected>figura 1</option> <option>figura 2</option> </select> <img name=primafig src=figura_1.jpeg width=100 height=150> </form> La figura 1 ii atasam figura_1.jpeg la figura 2 figura_2.jpeg si asa mai departe pina la numarul maxim de figuri pe care le avem. Se observa o anumita recursivitate in scrierea numelui de fisiere imagine tocmai pentru posibilitatea utilizarii programarii. Inceperea actiunii se face prin prima figura. Cind utilizatorul schimba

145

Introducere 146
valoarea selectata se apeleaza functia Show1() Aceasta functie poate fi de forma Function Show1() { tti=document.nume_form.selt.selectedindex document.nume_form.selt.primafig.src=figura_+tti+.jpeg } unde prima linie este o natatie. In functia Show1() se constuieste numele fisierului de intrare. O alta optiune din lista de selectare provoaca afisarea unei alte imagini. O alta posibilitate de interschimbare a imaginilor este aratata in imagini3.html <html> <HEAD> <script> function Show1() { tti=document.nume_form.figbox.selectedindex document.nume_form.figbox.primafig.src="figura_"+tti+".jpeg" } </script> </HEAD> <IMG name="imagine1" src='planbila10.jpeg' width=400 height=400 border=yes onMouseOver="this.src='figura_1.jpeg';" onMouseOut="this.src = 'figura_2.jpeg';"> <IMG name="qq" SRC="planbila10.jpeg" width=400 height=400 border=yes onMouseOver="this.src = 'figura_1.jpeg';" onMouseOut="this.src = 'pic2.jpeg';"> </html> Program imagini3.html cind imaginiea se schimba prin pozitionarea mausului deasupra imaginilor.

146

Introducere 147
, Partea

II-a Un alt punct de vedere-Standartizare

Capitolul 13. Modelul obiectului document (DOM)

13.1.HTML si DOM

Istoria DOM se ese n jurul rzboiului browserelor din anii 90. Este vorba de Netscape Navigator i Microsoft Internet Explorer care au folosit JavaScript respectiv JScript pentru a crea aceste aplicaii de web browsing. In 1996 Netscape Communications a folosit JavaScript la crearea Netscape Navigator 2.0. Microsoft s-a lansat n aceast competiie, n acelai an, cu JScript-un aa numit port al JavaScript, lansnd Internet Explorer 3.0. A fost prima oar cnd s-a pus problema unor pagini web care s includ aplicaii client-server. Chiar dac era un nceput timid, faptul c exista posibilitatea detectrii unor evenimente create de user i tratarea acestora prin aplicaii a constituit un pas hotrtor pentru viitor. Aceast prim generaie de aplicaii a fost numit mai trziu DOM Level 0 sau Legacy DOM. In cadrul acestui prim nivel DOM au existat limitri referitoare la modul n care elementele form, link i image puteau fi accesate. Referirea lor era posibil prin "adresarea ierarhic". care nsemna ca referirea fiecrui element se face pornind din documentul "rdcin" i cobornd n structura de arbore a documentului. Astfel un element cu numele elementName dintrun formular(formName) al unui document era adresat prin numele: document.formName.elementName. Introducerea DOM Level 0 a fcut posibil executarea unui script de validare ntr-un formular, ntr-o relatie de tip client-side i de asemenea "scrierea" efectului rollover. O dat cu lansarea versiunilor 4 de Netscape Navigator respectiv Internet Explorer, n 1997, a fost nevoie de adugarea de suport pentru DHTML(HTML dinamic) lucru care a dus la dezvoltarea n paralel a DHTML si DOM . Aceasta etap a fost considerat o etap intermediar cunoscut deci sub denumirea de "Intermediate DOM". Elementele importante ale acestei etape sunt introducerea CSS (foi de stil n cascad) i a noiunii de straturi (layers), care vor aduce o mbuntire substanial n aspectul paginilor web i un plus de elegan n JavaScript. Manipularea

147

Introducere 148
acestora se facea cu "document.layers" n Netscape respectiv "document.all" n Internet Explorer. In 1994 a fost fondat World Wide Web Consortium (W3C) cu scopul de a promova standarde pentru World Wide Web. W3C a nceput s dezvolte standarde pentru aplicaiile de browser pornind de la cele lansate n competitie de liderii Netscape i Microsoft. Aceast standardizare devenise absolut necesar, iar implementarea ei nu putea fi realizat dect de ctre o parte "neutr". Prima versiune a acestui standard a fost lansat n 1997 sub numele de ECMAScript. Denumirea de ECMA a fost utilizat pornindu-se de la European Computer Manufacturers Association (ECMA) - o organizaie nonprofit pentru standardizare n domeniul computing nfiinat n 1961 n Europa i devenit ECMA Internaional n 1994 (tocmai pentru a ilustra dorina i nevoia introducerii unor standarde n acest domeniu). ECMAScript utiliza elemente de JavaScript i Jscript pentru a se realiza o compatibilitate cross-browser ct mai bun. Termenul cross-browser utilizat se refer la capabilitatea unui website, aplicaie web, HTML sau aplicatie client-server de a suporta orice browser web. Urmtorul pas fcut de W3C a fost spre standardizarea DOM astfel c spre sfritul anului 1998 apare "DOM Level 1". Acesta cuprindea un model standardizat complet pentru documentele HTML i XML astfel nct era posibil accesul i modificarea oricrei poriuni dintr-un astfel de document. Foarte receptivi Microsoft au lansat cam n aceeai perioad Internet Explorer 5.0 care cuprindea suport (chiar limitat ) pentru DOM Level 1. Urmtorul standard, DOM Level 2 , a fost publicat de W3C la sfritul anului 2000. Cele mai importante mbuntiri au fost introducerea funciei "getElmentById" , respectiv suport pentru CSS i XML namespaces. Acesta din urm referindu-se la modalitatea de a se atribui n mod unic nume i proprieti ntr-un document XML lucru extrem de important n manipularea bazelor de date, de exemplu. DOM Level 3 "a venit" n aprilie 2004. Cele mai importante elemente ale acestui standard le-au constituit introducerea suportului pentru tratarea handlerelor de evenimente i pentru XPath i nu n ultimul rnd serializarea n XML. Att XPath ct i serializarea se refer la documentele XML. Pe scurt, XPath se refer la aceesarea nodurilor n XML iar serializarea reprezint un procedeu prin care un obiect este convertit ntr-o secven de bii care poate fi apoi stocat ntr-un mediu oarecare (fiier sau buffer de memorie) n scopul de a fi pstrat sau transmis n reea. Atunci cnd se face deserializarea ( "despachetarea") informaiei se face o

148

Introducere 149
"decriptare" a secvenei respective utilizndu-se "cifrul" de la serializare iar rezultatul este practic o clon a informaiei iniiale. Incepnd cu 2005 majoritatea specificaiilor DOM cuprinse n aceste standarde au fost suportate de browsere sub diferite platforme: att Trident (Microsoft Internet Explorer 6 (2001)), ct i browserele Gecko (Mozilla Firefox, Camino, Flock, SeaMonkey, K-Meleon, Netscape 9, Lunascape i Epiphany), Presto(Konqueror, Opera), sau WebKit (Safari, Google Chrome). Trebuie subliniat c un web browser nu trebuie s utilizeze specificaiil DOM n mod obligatoriu. Aceste specificaii sunt necesare ns pentru a scrie scripturi n care se verific sau se modific dinamic secvene din pagini. W3C definete DOM ca un standard API (Application Programming Interface) pentru structura documentelor HTML i XML avnd ca prim scop oferirea unei ci simple pentru a accesa, sterge, modifica continuturi, atribute sau stiluri. Nu n ultimul rnd DOM are rolul de a oferi programatorilor calea de a scrie aplicaii care realizeaz dezideratele de mai sus i funcioneaz la fel de bine n orice browser, sub orice platform sau tip de server. Astfel programarea fiabil sub orice platform cu limbaje ca Java sau ECMAScript devine o realitate. In momentul de fa W3C a sistat activitatea globalizat de perfecionaredezvoltare a DOM. Grupurile de lucru specializate pe HTML, SVG, WebAPI, etc. continu eforturile de standardizare i implementare, ns de la acest nivel este necesar o tratare specific. 13 . 2 Aplicaii ale HTML DOM Recapitulnd, HTML Document Object Model (HTML DOM) definete un mod standard de accesare i manipulare a documentelor. In acest standard un document este prezentat ca o structura arborescent ce cuprinde elemente, atribute i text. Practic aceste specificaii se refer la obiectele i proprietile fiecrui element i de asemenea la metodele de manipulare/accesare ale acestora. Pornind de la acest standard adugarea, schimbarea sau tergerea unui element de html se face dup un algoritm bine stabilit urmrindu-se, practic, structura arborescent a documentului. Pe scurt, DOM cuprinde specificaiile necesare pentru modul de aezare al obiectelor n pagini web. DOM definete atributele asociate fiecrui obiect i modul n care aceste atribute pot fi manipulate. Se poate

149

Introducere 150
spune c, la un moment dat, DOM a reprezentat un efort strategic deschis de a gsi o cale unitar pentru a manipula n termeni de programare documentele HTML i XML. Necesitatea implementrii DOM a rezidat din apariia DHTML, reprezentnd o cale de a obine o comportare unitar a browserelor vis-a-vis de paginile web i componentele acestora. In concluzie se poate spune ca HTML DOM este un standard care definete calea de a accesa, schimba, adauga sau terge elemente HTML. In W3C DOM fiecare element dintr-un document HTML reprezint un nod. Astfel ntreg documentul este un document-nod, fiecare TAG din HTML, <body>, <p>, chiar i <br>, sunt element-noduri iar textele coninute ntre acestea reprezint text-noduri. Atributele HTML de tip ID sunt atribut-noduri i fiecare comentariu reprezint comment-noduri. Nodurile sunt n relaii ierarhice bine stabilite. Astfel n documentul de mai jos : <html> <head> <title> Despre noduri in DOM </title> </head> <body> <h1> Hello world! </h1> <p>La multi ani! </p> </body> </html> fiecare element reprezint un nod. Aa cum am precizat mai sus exist 3 tipuri de noduri (document, text-cele 3 texte scrise pe ultimul nivel n figur i element-reprezentate de tagurile html, title, head, h1 si p). Ierarhia nodurilor este reprezentat grafic n figura Fig.1 cap Nodurile sunt n relaii de tip arbore. HTML este nodul printe pentru nodurile head i body care la rndul lor sunt noduri printe pentru nodurile title respectiv h1 i p. Nodurile head i body sunt noduri frate deoarece au acelai nod printe. Aceast reprezentare de tip arbore este deosebit de util atunci cnd se dorete gsirea unui nod anume sau modificarea ordinii nodurilor. Aceste noduri pot fi accesate i manipulate folosindu-se elemente de programare. Una dintre posibilitile de accesare este utilizarea limbajului

150

Introducere 151
Javascript, motiv pentru care se definesc dou elemente importante : proprieti i metode.

document

html

head

body

title

<h1>

<p>

Despre noduri in DOM

Hello world!

La multi ani!

Figura Fig.1cap 13 Reprezentarea nodurilor i a ierarhizrii acestora ntr-un document HTML. Proprietile tipice pentru orice nod (element) x sunt : x.innerHTML - valoarea text din interiorul nodului x x.nodeName numele nodului x x.nodeValue - valoarea lui x x.parentNode - nodul printe al lui x x.childNodes - nodurile copii ale lui x

151

Introducere 152
x.attributes - atributele nodului x Observaii : 1. Un nod are un singur nod printe. 2. Un nod poate avea mai multe noduri-copii. 3. Este important de reinut c sunt definite i noduri text, n exemplul de mai sus nodurile Despre noduri in DOM , Hello world ! i La muli ani ! sunt noduri i nu valori ale nodurilor superioare lor n ierarhia arborescent. Acest lucru devine mai clar dac inem seama de existena proprietilor enumerate mai sus care permit accesarea i manipularea acestora. Cea mai uoar cale de a accesa coninutul unui nod text este utilizarea proprietii innerHTML. (inner=interior) Metodele reprezint cile efective de modificare a proprietilor. Metodele utilizate n HTML DOM pentru accesarea nodului x sunt : x.getElementById(id) returneaz elementul cu id-ul specificat x.getElementsByTagName(name) - returneaz toate elementele cu eticheta (tag-ul) specificat n name x.appendChild(node) insereaz un nod-fiu (cel specificat n argumentul node) n nodul x x.removeChild(node) terge un nod-fiu (cel specificat n argumentul node) al nodului x Utiliznd metodele getElementById() i getElementsByTagName() identificarea nodurilor asupra crora se vor face modificri devine posibil. Aceste metode permit o navigare de tip long-distance n ntreg documentul precum i identificarea corect a nodurilor cutate. Exemple: 1. Pornind de la documentul html de mai sus vom ilustra modul de utilizare al proprietilor i metodelor. Modificrile aduse pe parcurs n document sunt puse n eviden cu alt culoare. Prin indexarea tagului <p> cu ajutorul id= salut devine posibil utilizarea metodei getElementById pentru identificarea proprietii innerHTML a acelui nod n javascriptul folosit. Variabila text txt va avea ca valoare textul coninut n respectivul nod, adic La muli ani ! . Aceast variabil este tiprit cu ajutorul document.write. Modul n care modificrile

152

Introducere 153
aduse funcioneaz pot fi vizualizate prin deschiderea n browser a propr.html : <html> <head> <title> Despre noduri in DOM </title> </head> <body> <h1> Hello world! </h1> <p id="salut">La multi ani! </p> <script type="text/javascript"> txt=document.getElementById("salut").innerHTML; document.write("Textul continut de variabila txt are valoarea din nodul text cu id-ul salut, adica : " , txt); </script> </body> </html> 2. Urmrind structura arborescent a documentului de mai sus (propr.html) ne propunem s tiprim acelai text (din nodul fiu al nodului <p>) n idnod.html: <html> <head> <title> Despre noduri in DOM </title> </head> <body> <h1> Hello world! </h1> <p id="salut">La multi ani! </p> <script type="text/javascript"> txt=document.getElementById("salut").childNodes[0].nodeValu e; document.write("Textul continut de variabila txt are valoarea din nodul fiu al nodului cu id-ul salut , adica : " , txt); </script> </body> </html> Aa cum era de ateptat, textul tiparit pe ecran n urma execuiei scripturilor este acelai, chiar dac metoda de accesare a nodului n cauz a fost diferit.

153

Introducere 154
3. In cazul unor documente mari, care conin multe noduri, poate deveni necesar identificarea nodurilor de un anumit tip (cu acelai tag name). In acest caz, utilizarea metodei getElementsByTagName() are efectul scontat. In exemplul de mai jos, printnod.html, am modificat documentul initial folosind mai multe noduri de tip <p> neidentificate prin nume diferite. Ne propunem s construim irul x care conine toate nodurile de tip p i din acest ir s tiprim al treilea element adic x(2) indexarea irului fcndu-se, aa cum am precizat deja, de la zero. <html> <head> <title> Despre noduri in DOM </title> </head> <body> <p> Hello world! </p> <p>La multi ani! </p> <p>Adaugam inca un nod</p> <p>Iata si al patrulea nod de acelasi tip</p> <script type="text/javascript"> x=document.getElementsByTagName("p"); document.write("Numarul de noduri de tip p, din document este:" + x.length +"<br>"); document.write("Continutul celui de-al treilea nod este: " + x[2].innerHTML); </script> </body> </html> Observaii : 1. Deoarece poate fi util cunoaterea numrului de noduri de un anumit tip din document exist posibilitatea utilizrii proprietii x.length care returneaz lungimea (nr. de elemente) irului de noduri. In exemplul de mai sus am utilizat aceast proprietate pentru a tipri numrul de noduri de tip p. 2. Exist dou proprieti importante care permit accesarea direct a unor noduri ale documentului : document.documentElement care permite accesul la nodul rdcin al documentului, adic practic la tot ce se afl ntre tagurile <html>,

154

Introducere 155
</html> n documentele de tip HTML. Proprietatea poate fi aplicat i la XML. document.body care permite accesul la coninutul nodului <body> Exemplul de mai jos (elemente.html) ilustreaz modul de funcionare al acestor proprieti. Cele dou alert-uri vor conine prti diferite din document, n funcie de proprietatea ilutrat. <html> <head> <title> Despre noduri in DOM </title> </head> <body> <p >Hello world!</p> <p >La multi ani! </p> <p >Adaugam inca un nod</p> <p>Iata si al patrulea nod de acelasi tip</p> <script type="text/javascript"> x=document.documentElement; alert(x.innerHTML); y=document.body; alert(y.innerHTML); </script> </body> </html> 3. Un alt lucru important ntr-un document poate fi determinarea proprietilor nodurilor. Cele trei proprieti ale nodurilor nodeName, nodeValue i nodeType pot fi determinate cu ajutorul DOM. Aa cum se deduce din denumirea lor, aceste proprieti se refer la numele, valoarea sau tipul nodului respectiv iar utilizarea lor poate prezenta interes. Tipul nodului poate avea una din valorile din tabelul de mai jos. Folosind o secven de tipul celei ilustrate n nodtip.html, vom obine una din valorile numerice din tabelul de mai jos (coloana NodeType). Rezultatul tiprit n document va fi: Element NodeType tipul nodului cautat este: 3 Element 1 Adic primul nod fiu al nodului cu id-ul Attribute 2 salut este un nod de tip text. Text 3 Comment 8 Document 9

155

Introducere 156
<html> <head> <title> Despre noduri in DOM </title> </head> <body> <p id ="salut"> Hello world! </p> <p>La multi ani! </p> <p>Adaugam inca un nod</p> <p>Iata si al patrulea nod de acelasi tip</p> <script type="text/javascript"> x=document.getElementById("salut").firstChild; txt=x.nodeType; document.write("tipul nodului cautat este:" , txt); </script> </body> </html> 4. O alt aplicaie interesant a DOM o constituie posibilitatea modificrii elementelor HTML dintr-un document. Din exemplele anterioare am constatat c putem cobor n structura arborescent a documentului pn la cel mai indeprtat nod. Odat identificat acest nod, putem s-i modificm coninutul, s-l tergem sau s-i adugm noi copii. Astfel utiliznd structura documentului de mai sus putem s modificm, de exemplu, coninutul nodului n discuie astfel nct textul coninut s devin Bun ziua tuturor ! . Exemplul modificnod.html ilustraz acest lucru : <html> <head> <title> Despre noduri in DOM </title> </head> <body> <p id ="salut"> Hello world! </p> <p>La multi ani! </p> <p>Adaugam inca un nod</p> <p>Iata si al patrulea nod de acelasi tip</p> <script type="text/javascript"> x=document.getElementById("salut").innerHTML="Buna ziua tuturor!"; </script> </body>

156

Introducere 157
</html> O alt posibilitate, cel puin interesant, este interschimbarea nodurilor ntre ele. Nod_schimb.html ilustreaz utilizarea metodei getElementsByTagName() mpreun cu proprietatea parentNode pentru a realiza interschimbrii nodurilor specificate. Aa cum se vede mai jos referirea se face la primul nod fiu al elementelor <h1> respectiv <p>. Efectul va fi interschimabarea textelor coninute de acetia : <html> <head> <title> Despre noduri in DOM </title> </head> <body> <h1> Hello world! </h1> <p>La multi ani! </p> <script> var x = document.getElementsByTagName('h1')[0]; var y = document.getElementsByTagName('p')[0]; x.parentNode.insertBefore(y,x); </script> </body> </html> Utilizarea acestor proprietti i metode mpreun cu handlerele de evenimente prezentate n celelalte capitole poate aduce un plus de spectaculozitate i complexitate acestor exemple. O alt aplicaie interesant a elementelor DOM o reprezint utilizarea i modificarea elementelor de stil. Pornind de la ideea c o definire elegant pentru stil este echivalent cu utilizarea straturilor, aceste elemente pot fi accesate cu ajutorul DOM la orice nivel pentru care sunt definite proprieti de acest tip. Utilizarea metodei getElementById pe obiectul document este o posibil soluie pentru aceasta. Pentru utilizarea metodei precizate pe un obiect oarecare este necesar cunoaterea proprietilor legate de elementele de stil aplicabile obiectului n cauz. O sintax general pentru aplicarea metodei precizate ar fi: document.getElementById("id").style.property="value" unde cele mai des utilizate proprieti sunt date n tabelul de mai jos :

157

Introducere 158
Proprietate Background Aplicabila la: Definirea proprietilor de background (culoare sau imagine, pozitie, directie, etc) Definirea proprietilor unui bloc, tabel etc. din punct de vedere al chenarelor i spatiilor inter i intra obiect Definirea aspectului general al obiectului Definirea elementelor de list (poziie i aspect) Poziionarea obiectului prin specificarea proprietilor faa de stratul n care se afl i fa de alte straturi (z-index) Aezarea, aspectul i modul de afiare pentru tabele Toate proprietile textului (culoare, fonturi, spaiere, grosime, aliniere, etc.)

iar value este valoarea pe care o va Layout avea respectiva proprietate. List Observaie: Nu ntotdeauna este necesar utilizarea Positioning acestei metode. Astfel pentru un simplu document HTML, fr Table elemente complicate de style, modificarea backgroundului Text documentului se realizeaz foarte uor prin utilizarea proprietii document.body.bgColor="value" (unde value reprezint culoarea dorit, codul hexa sau codul rgb al culorii respective n formatul corect. Exist numeroase pagini web care conin informaii de acest tip, ex. http://html-color-codes.com/ ). Utilizarea acestei proprietti este ilustrat de exemplul bgcolor.html. <html> <body> <script type="text/javascript"> document.body.bgColor="#ff0033"; </script> </body> </html> Pentru cazurile n care pagina conine mai multe straturi, de exemplu, utilizarea acestei proprieti este necesar. In exemplul urmtor este ilustrat utilizarea proprietii document.getElementById("id").style.zIndex care

Border Margin

158

Introducere 159
permite accesarea stratului cu id-ul specificat i modificare z-indexului acestuia, adic prioritatea de afiare a stratului respectiv. In exemplul de mai jos, barcuta.html am exemplificat acest lucru atand un buton unei funcii n care se utilizeaz aceast metod. Aa cum se poate observa, am utilizat dou straturi(img1, img2), care conform valorii z-index din text/css sunt suprapuse n aceast ordine. Funcia de head definit, schimbprioritatestrat(), are rolul de a modifica ordinea celor dou staturi. Apelarea funciei se face la evenimentul onclick pe butonul inserat. <html> <head> <style type="text/css"> #img1 { position:absolute; left:0px; top:40px; z-index:-1 } #img2 { position:absolute; left:430px; top:275px; z-index:-2 } </style> <script type="text/javascript"> function schimbprioritatestrat() { document.getElementById("img2").style.zIndex="1"; } </script> </head> <body> <img id="img1" src="twilight.jpg" width="800" height="600"> <img id="img2" src="boat.jpg" width="261" height="196"> <input type="button" onclick="schimbprioritatestrat()"

159

Introducere 160
value="vezi barcuta!" /> </body> </html> O aplicaie interesant a metodei binecunoscute deja este prezentat n exemplul urmtor (style_buton.html). Imaginea folosit aici (cafea.jpg) este tratat ca un obiect cu id-ul "ocafea". Funcia de head goto(obj, x,y) are rolul de a stabili valorile pentru proprietile (left i top) care determin noua poziie n pagin a obiectului aa cum se specific de cte ori funcia este apelat. Este important de subliniat c cele dou variabile obj.style.left i obj.style.top sunt exprimate n pixeli (concatenare cu "px") i se calculeaz la fiecare onclick n funcie de valorile locale, odat cu identificarea poziiei obiectului. Funcia laloc(obj,x,y) readuce obiectul n poziia iniial deoarece de aceast dat cele dou variabile nu mai depind de valorile intermediare i iau valorile fixate iniial. Din punctul nostru de vedere cel mai important este faptul c de aceast dat metoda document.getElementById este utilizat ca argument al funciei i permite att identificarea obiectului ct i calcularea/specificarea unei proprieti a acestuia. <html> <head> <script type="text/javascript"> function goto(obj, x, y) { obj.style.left=parseInt(obj.style.left)+x+"px" obj.style.top=parseInt(obj.style.top)+y+"px" } function laloc(obj, x, y) { obj.style.left=x+"px" obj.style.top=y+"px" } </script> </head> <body>

160

Introducere 161
<div id="ocafea" style="position: relative; left: 20; top: 0"><img src="cafea.jpg" /></div> <ul> <li><input type="button" onclick="goto(document.getElementById('ocafea'), 15, 0)" value="dreapta 15px" /></a></li> <li><input type="button" onclick="goto(document.getElementById('ocafea'), -15, 0)" value="stanga 15px"/></a></li> <li><input type="button" onclick="goto(document.getElementById('ocafea'), 100, 250)" value="oblic"/></a></li> <li><input type="button" onclick="goto(document.getElementById('ocafea'), 0, 50)" value="jos 50px"/></a></li> <li><input type="button" onclick="laloc(document.getElementById('ocafea'), 20, 0)" value="la loc"/></a></li> </ul> </body> </html> In cazul utilizrii tabelelor o abordare potrivit i relativ uor de realizat, n special datorit aplicrii DOM, este inserarea tabelului n pagin ca obiect i formatarea lui utiliznd metodele i proprietile prezentate . Exemplul urmtor (tabel_border.html) propune un model de formatare a borderelor prin utilizarea proprietii "frame" i a majoritii valorilor pe care aceasta le poate avea. Modificarea acestor valori se face de fiecare dat ntr-o funcie definit ca atare. Apelarea fiecrei funcii este fcut cu ajutorul unor butoane ale cror valori sunt alese pentru a ilustra, de fiecare dat, funcie apelat. <html> <head> <script type="text/javascript"> function bordersus() { document.getElementById('tabel cu border').frame="above";

161

Introducere 162
} function borderjos() { document.getElementById('tabel cu border').frame="below"; } function borderorizontal() { document.getElementById('tabel cu border').frame="hsides"; } function bordervertical() { document.getElementById('tabel cu border').frame="vsides"; } function allborder() { document.getElementById('tabel cu border').frame="border"; } </script> </head> <body> <table id="tabel cu border"> <tr> <td>cel11</td> <td>cel12</td> </tr> <tr> <td>cel21</td> <td>cel22</td> </tr> </table> <br > <input type="button" onclick="bordersus()" value="bordere sus"> <input type="button" onclick="borderorizontal()" value="bordere orizontale"> <br> <input type="button" onclick="borderjos()" value="bordere jos"> <input type="button" onclick="bordervertical()" value="bordere verticale"> <br>

162

Introducere 163
<input type="button" onclick="allborder()" value="toate borderele"> </body> </html> Este uor de bnuit c, datorit multitudinii de valori pe care elementele de style prezentate le pot avea, numrul de exemple, doar n acest caz, ar putea fi mult mai mare. De asemenea prezentarea aplicaiilor metodelor i propriettilor propuse este departe de a fi epuizat. Prezentul capitol i propune ns, ca obiectiv principal, sublinierea importanei capitale a introducerii HTML DOM pentru acest tip de aplicaii. Aa cum se poate observa metoda document.getElementById este cel mai des utilizat n DOM pentru "navigarea" n interiorul documentelor i identificarea nodurilor cutate. Trebuie s reinem c aceste capabiliti ale DOM fac posibil navigarea de tip long-distance n structura arborescenta i mai mult, practic n orice direcie n mod repetat i fr a respecta o anumit ordine. Sigur c toate acestea sunt posibile prin pstrarea documentului ntr-un buffer intern, adic prin execuia scriptului inclus n HTML direct n browser iar faptul c ultimele specificaii DOM reduc considerabil sensibilitatea la diferite browsere este un mare ctig. Cu toate c s-au depus eforturi considerabile pentru a elimina incompatibiliti cu diferitele platforme de browsere o simpl cutare n www aduce la iveal c mai exist probleme n acest sens. Spre exemplu se vorbete despre incompatibiliti ale browserului Internet Explorer inclus n Windows Mobile 5, sau despre comportri diferite ale unor JavaScript-uri n Mozzila. Toate acestea conduc spre o nou abordare, care reprezint una dintre cele mai avansate laturi ale serviciilor de Internet, serviciile ASP. In ASP (Application Service Provider) scripturile se execut pe serverul apelat i de aici rezid o multitudine de avantaje ca servicii online cu nivel de complexitate ridicat, lipsa unor cerinte software speciale, up-date doar pe server, costuri reduse, etc. Cel mai la ndemn exemplu de serviciu ASP este serviciul webmail pe care l utilizeaz un numr impresionant de persoane pe ntreg globul. 13.2.XML si DOM
XML DOM Prin analogie cu definitia HTML DOM, XML DOM definete un standard de accesare i manipulare a documentelor XML (eXtensible Markup Language). Ca si in toate celelalte limbaje mark-up, fisierele de tip xml contin un template, care se aplica asemeni unui sablon, pe tipuri de documente. Rolul cel mai important al

163

Introducere 164
XML este acela de a realiza serializarea datelor unui document, oferind posibilitatea sharingului acestui document, via Internet, intre diferite companii, aplicatii sau computere prin utilizarea unor elemente de sintaxa bine definite. Cu alte cuvinte, daca rolul de baza al HTML este acela de a prezenta datele intr-o forma cat mai atractiva, rolul XML este acela de a prelucra, stoca si transmite date punandu-se accent pe ceea ce reprezinta aceste date si pe corectitudinea transmiterii lor. Si in acest standard un document este prezentat ca o structura arborescent ce cuprinde elemente, atribute i text care pot fi modificate, sterse sau adaugate. Fiecare dintre acestea constituie un nod si exista posibilitatea referirii oricarui nod prin utilizarea metodelor adecvate. Pentru a exemplifica o utilizare practica a acestui model ne propunem un exercitiu simplu, acela de a crea un catalog de biblioteca. Presupunand ca datele ce trebuie luate in considerare pentru fiecare carte sunt: CATEGORIE TITLU AUTOR ANUL PRET APARITIEI vom crea un document xml denumit biblio.xml si analizam elementele acestuia: <?xml version="1.0" encoding="ISO-8859-1" ?> <library> <book category="povesti"> <title lang="ro">Amintiri din copilarie</title> <author>Ion Creanga</author> <year>2009</year> <price>12</price> </book> <book category="aventuri"> <title lang="en">Harry Potter i piatra filozofal</title> <author>J K. Rowling</author> <year>2005</year> <price>45</price> </book> <book category="aventuri"> <title lang="en">Harry Potter i Talismanele Morii</title> <author>J K. Rowling</author> <year>2007</year> <price>45</price> </book> </library> Modul in care acest document poate fi vizualizat in browser ofera o imagina intuitiva asupra elementelor-noduri ale acestuia. Asa cum se observa, la deschiderea documentului vom putea avea urmatoarea forma: <?xml version="1.0" encoding="ISO-8859-1" ?> + <library>

164

Introducere 165
Semnul + indica faptul ca avem un nod care contine la rindul lui alte noduri. Click pe acesta ne duce la forma de mai jos:

unde, conform celor de mai sus, constatam ca avem alte 3 noduri cu elementele lor. In final forma extinsa a documentului, asa cum apare in browser, este:

165

Introducere 166

Observatie: Este de remarcat prezenta unor tag-uri a caror forma generala, cel putin, ne este cunoscuta din HTML. In XML insa putem vorbi despre o sintaxa deschisa, utilizatorul avand posibilitatea de a-si construi propriile taguri sau structuri de date tinand cont de anumite reguli (ex. XML este case-senzitiv). Reprezentarea de tip arbore a documentului este data mai jos:

NOD PARINTE

RADACINA: <library>

NODURI FII
ELEMENT: 1. <book> ELEMENT: 2. <book> ELEMENT: 3. <book>

Iar o reprezentare de tip arbore pentru primul dintre cele 3 noduri are urmatoarea forma :

166

Introducere 167
RADACINA: <library>

NOD PARINTE

NOD FIU

ELEMENT: <book>

ATRIBUT: "category " ="povesti"

ATRIBUT: "lang"= "ro"

ELEMENT: <title>

ELEMENT: <author>

ELEMENT: <year>

ELEMENT: <price>

TEXT: Amintiri din copilarie

TEXT: Ion Creanga

TEXT: 2009

TEXT: 12

Structura fiecaruia dintre nodurile fii este aceeasi si aceasta este una dintre caracteristicile acestui tip de arbori XML. Oricum abordarea de tip arbore a unui document XML face posibila parcurgerea acestuia cu ajutorul unor metode de tipul x.getElementsByTagName(name), x.appendChild(node), x.removeChild(node) fara a fi nevoie ca aceasta structura sa fie cunoscuta in amanuntime. Exemplul urmator ilustraza utilizarea metodei x.getElementsByTagName(name) pentru a crea un tabel in care sa apara autorul si titlul fiecareia din cartile cuprinse in biblio.xml. Programul loadbiblio.htm are doua parti importante: 1. Partea care realizarea incarcarea documentului xml 2. Partea care realizeaza construirea tabelului

167

Introducere 168

Este de remarcat posibilitatea de a utilizarea javascript intr-un document HTML pentru a realiza scopul propus. Deoarece fiecare dintre cele doua parti ale programului contine elemente interesante se impune comentarea acestora. 1. Exista trei elemente importante de discutat: Functia catch(e) care este o functie prestabilita de tratare a exceptiilor, in cazul nostru fiind vorba de tratarea diferita pentru browsere

168

Introducere 169
xmlDoc.async se refera la modul in care transmiterea datelor din xml spre client se va face sau nu asincron. Asa cum am precizat documentele XML au rolul de a oferi o cale simpla de a prelucra si transmite date. In cazul in care datele se afla in aceeasi locatie cu aplicatia care le foloseste, transmiterea in timp real nu este o problema insa situatia se schimba radical in cazul transmiterii la distanta. Exista astfel doua posibilitati: transmiterea sincrona respectiv transmiterea asincrona. Deosebirea fundamentala dintre acestea este data de timpul necesar transmiterii. Figurile de mai

jos dau o imagine intuitiva asupra modului in care are loc transmiterea datelor in cele doua cazuri.

Transmiterea sincrona a datelor in protocolul client-server

169

Introducere 170

Transmiterea asincrona a datelor in protocolul client-server si update partial Valoarea false pentru xmlDoc.async indica faptul ca functia load() va preda controlul numai dupa incarcarea completa a documentului xml. In variantele mai noi de browsere este posibil ca preluarea xml sa se faca utilizand obiectul XMLHttpRequest. Acesta are ca si caracteristica principala faptul ca suporta transferul client-server pentru orice tip de fisier text (inclusiv xml). Transferul va avea loc utilizandu-se protocolul HTTP si de aceea clientul trebuie sa suporte cel putin metodele GET, POST, HEAD, PUT, DELETE si OPTIONS. Cea mai importanta aplicatie a acestui obiect o constituie obtinerea de aplicatii web dinamice de tipul Google Maps, MapQuest, etc. W3C publica la 5 aprile 2006 un "working draft" asupra acestui obiect descris atunci ca o aplicatie API care isi propunea sa implementeze un client HTTP dar care nu era pe deplin pregatit pentru a fi interoperabil. Cel mai recent "working draft" al W3C pe aceasta tema a aparut in 15 aprilie 2008 si contine o descriere exacta a stadiului de implementare si compatibilizare a XMLHttpRequest de la acea data. xmlDoc.load() care reprezinta metoda load aplicata pentru a se incarca documentul xml de la adresa si cu numele specificat, in cazul nostru fisierul biblio.xml 2. In partea a doua, documentul xml este "prelucrat" construindu-se tabelul dorit. Variabila c va cuprinde sirul de elemente din documentul xml care au tag-ul "book". Pentru fiecare element din acest sir se vor tipari (cu ajutorul document.write in linia/coloana construita a tabelului) valorile din nodurile fiu de ordin 1 (indice 0) ale elementelor cu tag-ul "title" respectiv "author". Pentru a se construi tabelul cu nr. de coloane egal cu nr. de carti din biblioteca s-a folosit proprietatea c.length care reprezinta numarul de elemente din sirul cautat. Rezultatul executiei loadbiblio.htm este:

170

Introducere 171

Prin analogie cu cele spuse la inceputul prezentarii HTML DOM si in cazul XML DOM arborele reprezentat de fisierul xml poate fi parcurs utilizandu-se cateva proprietati si metode aplicabile nodurilor. Asa cum se observa in exemplul prezentat, x poate reprezenta chiar documentul xml (xmlDoc) asa cum a fost el preluat. Este de precizat ca indexarea elementelor se face tot de la 0. Un alt lucru important este faptul ca XML DOM trateaza fiecare nod ca pe un obiect. Aceste obiecte pot fi manipulate de JavaScript cu ajutorul unor proprietati si metode. Proprietile tipice pentru orice nod (element) x sunt : x.nodeName numele nodului x x.nodeValue - valoarea lui x x.parentNode - nodul printe al lui x x.childNodes - nodurile copii ale lui x x.attributes - atributele nodului x

Metodele reprezint cile efective de modificare a proprietilor. Metodele utilizate n XML DOM pentru accesarea nodului x sunt : x.getElementsByTagName(name) - returneaz toate elementele cu eticheta (tag-ul) specificat n name

171

Introducere 172
x.appendChild(node) insereaz un nod-fiu (cel specificat n argumentul node) n nodul x x.removeChild(node) terge un nod-fiu (cel specificat n argumentul node) al nodului x

Utilizarea acestor proprietati si metode ofera o larga gama de posibilitati de a manipula un document xml. Este de remarcat ca metoda getElementsByTagName() este utilizata cu precadere in acest sens. Exemplul erasebook.htm realizeaza stergerea unei carti din biblioteca prezentata in biblio.xml. Se vor numara cartile inainte si dupa stergerea unui nod 'book'. <html> <body> <script type="text/javascript"> try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try //Firefox, Mozilla, Opera, etc. { xmlDoc=document.implementation.createDocument("","",null); } catch(e) {alert(e.message)} } try { xmlDoc.async=false; xmlDoc.load("biblio.xml"); } catch(e) {alert(e.message)} document.write("Numarul initial de carti: ", xmlDoc.getElementsByTagName('book').length); document.write("<br />"); y=xmlDoc.getElementsByTagName('book')[1]; document.write("Vom sterge din biblioteca:' ", y.getElementsByTagName('title')[0].childNodes[0].nodeValue, " ' "); document.write("<br />"); xmlDoc.documentElement.removeChild(y); document.write("Numarul de carti dupa stergerea cartii ' " , y.getElementsByTagName('title')[0].childNodes[0].nodeValue, " 'este : ");

172

Introducere 173
document.write(xmlDoc.getElementsByTagName('book').length); </script> </body> </html>

Asa cum se observa, se va sterge cea de-a doua carte (cea cu indice 1). Metoda getElementsByTagNamene ofera posibilitatea identificarii nodului dorit. Acesta odata identificat va fi atribuit variabilei y , y=xmlDoc.getElementsByTagName('book')[1], iar apoi utilizandu-se metoda removeChild(y) va fi sters continutul nodului fiu al acestuia. O metoda utila in manipularea datelor dintr-un nod text este repalceData(). Sintaxa metodei este repalceData (param1, param2, "text"), unde: param1 reprezinta offsetul caracterului de inceput (de unde incepe schimbarea) param2 reprezinta numarul de caractere care vor fi schimbate "text" reprezinta sirul de caractere care trebuie inserat Exemplul chanceprice.htm realizeaza modificarea pretului unei carti, in cazul nostru prima carte din biblioteca: <html> <body> <script type="text/javascript"> try //Internet Explorer { xmlDoc=new ActiveXObject("Microsoft.XMLDOM"); } catch(e) { try //Firefox, Mozilla, Opera, etc. {

173

Introducere 174
xmlDoc=document.implementation.createDocument("","",null); } catch(e) {alert(e.message)} } try { xmlDoc.async=false; xmlDoc.load("biblio.xml"); } catch(e) {alert(e.message)} x=xmlDoc.getElementsByTagName("price")[0].childNodes[0]; document.write("Vechiul pret: ", x.nodeValue); x.replaceData(1,1,"5"); document.write("<br />"); document.write("Pretul schimbat: ", x.nodeValue); </script> </body> </html> Dupa identificarea nodului dorit x=xmlDoc.getElementsByTagName("price")[0].childNodes[0] In nodul x modificam doar al doilea caracter din sirul existent. Astfel in sirul 12 RON modificam doar caracterul 2, schimbandu-l in 5. Acelasi efect s-ar fi obtinut daca utilizam instructiunea in forma: x.replaceData(0,2,"15");

Exemplele prezentate aici nu-si propun sa epuizeze un subiect atat de larg ca si XML DOM. Credem ca este important sa oferim cititorilor un punct de plecare in

174

Introducere 175
manipularea fisierelor xml pornind de la specificatiile DOM si pentru acest caz. Consideram ca odata inteleasa partea esentiala, care se refera la tratarea acestora sub forma unor structuri arborescente, manipularea datelor in acest tip de fisiere va fi mult mai usor de realizat. Bibliografie on line: 1. http://www.w3schools.com/dom/default.asp 2. Introduction to the XML DOM by Jan Egil Refsnes. An introduction to the XML Document Object Model. 3. http://www.w3.org/TR/DOM-Level-3-Core/ 4. http://www.devguru.com/Technologies/xmldom/QuickRef/xmldom_intro.html 5. http://msdn.microsoft.com/en-us/library/aa468547.aspx

Capitolul 14 XML (eXtensible Markup Language)

XML este un nou limbaj folosit in aplicatiile Web in primul rind prin informatiile suplimentare pe care le contine.HTML, limbajul standard pentru prezentarea informatiei pe Web,se construieste cu etichete care fixeaza modul de prezentare a continutului.Pentru a modifica acest lucru trebuie scris un nou fisier HTML.Limbajul XML permite folosirea aceluiasi fisier pentru diferite moduri de prezentare.Acest lucru este posibil datorita faptului ca etichetele sint legate de continut si nu predefinite ca in cazul HTML si nu are nici o referire la formatare. Pentru a descrie forma de prezentare se folosesc foi de stil(CSS) sau XSL (eXtensible Stylesheet Language)un limbaj de foi de stil extinse. Deosebirea esentiala a unui fisier XML fata de alte limbaje este lipsa totala sau cuasitotala a regulilor semantice in XML. Cele citeva reguli ramase sunt : Orice eticheta deschisa trebuie sa aiba o eticheta de inchidere corespunzatoare. Etichetele si celellte elemente din XML considera diferite literele mari de cele mici. Elementele trebuie sa fie prezentate intr-o structura corecta.De exemplu, daca <p>este prima eticheta urmind apoi<i>,la inchidere ordinea este intii </i>si apoi </p>. Toate fisierele XML trebuie sa aiba un element radacina ,(sau parinte),dupa care celelalte elementele fisierului sa urmeze intr-o

175

Introducere 176
relatie de terminata.In general structuraunui fisier XML arata dupa cum urmeaza : <root> <child>.. <subchild>..</subchild> .. </child> </root> Valoarea asociata atributelor a unor etichete trebuie sa fie plasata intre ghilimele, In exemplul<rezultate_ex data= 26/04/2009> stributul lui rezultate_ex,data are valoarea intre ghilimele. Un exemplu este fisierul urmator :

<?xml version="1.0" ?> <rezultate categoria="examene"> <nume>Num1</nume> <prenume>Pre1</prenume> <ex1>Matematica</ex1> <nota>4</nota> <ex2>fizica</ex2> <nota>5</nota> </rezultate> Program Pxml.xml Pe prima linie este semnalat fapul ca fisierul este unul xml.Pe liniile urmatoare sint insirate rezultatele la examene pentru candidatul cu numeNum1,prenumele :Pre1si notele la ex1,de matematica si ex2 , de fizica de 4 si 5. Fiecare eticheta este inchisa. Radacina este rezultate .Prin tastarea numelui de fisier pe monitor se va afisa textul fisierului avind etichetele de culoare diferita fata de restul textului : <?xml version="1.0" ?>

176

Introducere 177
- <rezultate categoria="examene"> <nume>Num1</nume> <prenume>Pre1</prenume> <ex1>Matematica</ex1> <nota>4</nota> <ex2>fizica</ex2> <nota>5</nota> </rezultate> Inacest limbaj exista totusi citeva elemente si functii predefinite

&lt; &gt; &amp; &apos; &quot;

< > & ' "

Mai mic Mai mare decit Si Apostrof Ghilimele

Name current() document()

Actiune returneaza nodul current Se foloseste pentru a accesaodurile intr-unfisier XML exterior element-available() Verifica daca elemental specificat este recunoscut de procesorul XSLT format-number() Converteste un numar intr-un string function-available() Verifica daca functia specificata ste recunoscuta de procesorulXSLT generate-id() Returns a string value that uniquely identifies a specified nodeReturneaza un string care identifica un anumit nod key() Returneaza un set de noduri folosind indexul dat de

177

Introducere 178
system-property() unparsed-entityuri() Afisarea informatiei nu este un atribut al xml. <xsl:key> Returneaza valoarea pentru property Returneaza URI-ul pentru entity

Aceasta se face folosind foi de stil in cascada,(CSS) sau (XSLT).Foile de stil in cascada sint similare cu cele studiate in capitolul Foi de stil in cascada. 14.1. XML si CSS

XML permite folosirea foilor de stil prin simpla atasare a numelui de foaie de stil la inceputul fisierului. <?xml-stylesheet type="text/css" href="af0.css"?> Unde foaia de stil af0.css este:

rezultate { background-color:yellow; width:25% } note { display:block; margin-left:0; margin-bottom:10pt; } nume,prenume {color:black; Font-size:10pt} ex1,ex2 { color:blue;

178

Introducere 179
} nota { color:#000011; } Program afo.css Un fisier XML contine de obicei mai multe date structurate dupa modelul din programul Pxml.xml.Un astfel de fisier cuprinzind rezultatul a 3 elevi este urmatorul : <?xml version="1.0" encoding="ISO-8859-1"?> <?xml-stylesheet type="text/css" href="af2.css"?> <rezultate> <note> <nume>Num1</nume> <prenume>Pre1</prenume> <ex1>Matematica</ex1> <nota>4</nota> <ex2>fizica</ex2> <nota>5</nota> </note> <note> <nume>Num2</nume> <prenume>Pre2</prenume> <ex1>Matematica</ex1> <nota>8</nota> <ex2>fizica</ex2> <nota>10</nota> </note> <note> <nume>Num3</nume> <prenume>Pre3</prenume> <ex1>Matematica</ex1> <nota>5</nota> <ex2>fizica</ex2> <nota>5</nota>

179

Introducere 180
</note> </rezultate> Program P2xml.xml Foaia de stil este

rezultate { background-color:#FFFFFF; width:26% } note { display:block; margin-left:30; margin-bottom:30pt; } nume,prenume { color:#0000FF font-size:30pt margin-bottom:30pt; } ex1,ex2 { color:blue; Margin-left:10pt; } nota { color:red; } Program af2.css

180

Introducere 181
Dupa cum se observa nu am schimbat decit citeva culori fata de af0.css dar rezultatul arata altfel .Fiecare set de nume,examene si note este afisat pe cite o linie.

14.2. XML si XSLT XSLT este parte din familia XML alaturi de Xpath si XSL-FO care permit accesul la diferite parti dintr-un document XML si creaza un vocabular si o semantica pentru XML. XSLT transforma fisierul XML in alt fisier XML care foloseste vocabular si semantica de formatare cum ar fi XHTML si XSL-FO. XSL este de fapt fisierul output, si poate efectua teste asupra datelor. XSL este de fapt foaia de stil pentru fisierele XML. Declaratia ca fisierul este o foaie de stil XSL este foaia de stil pentru fisierele XML. XSLT poate adauga/indeparta elemente din <xsl : stylesheet> sau <xslt ransform> Recomandarea W3C completa este <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> sau <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">

mlns:xsl=http://www.w3.org/1999/XSL/Transform reprezinta numele oficial pentru XSLT a W3C. Pentru a transforma fisierul xsl prima linie trebuie sa fie <?xml version="1.0" encoding="ISO-8859-1"?> Iar extensia fisierului trebuie sa fie .xml. Fisierul xsl va avea extensia .xsl.

181

Introducere 182
Introducerea foi de stil xsl in documentul XML se face prin : <?xml-stylesheet type="text/xsl" href="nume_fisier.xsl"?> Limbajul xsl se compune din Elementul <Template match=/> ce genereaza o forma care atunci cind are atributul match=/ se refera la intregul fisier. Elementul <xml:for-each> se utilizeaza pentru a selecta un element xml dintr-un set specificat de noduri.El da posibilitatea de a executa o operatie ciclica (loop).Elementul in care se face ciclul se specifica cu select <xsl:for-each select= nodul_ales> In acest caz se va efectua un ciclu pe tote subnodurile nodului ales . Output-ul poate fi filtrat adaugind un criteriu de selectie in <xml:for-each select=criteriu> Operatorii de filtrare sint: =;!=;&lt si &gt cu semnificatiile :egal; diferit de; mai mic decit si mai mare decit ; Elementul <xsl:value-of> extrage valoarea unui element XML si o adauga la output-ul transformarii. Extragerea unei valoriatribut al etichetei se face prin <anul_1 inscrisi= 60 promovati=40/> ,xsl :value-of select=@inscrisi/>pentru inscrisi si <xml:value-of select=@promovati/> pentru numarul de promovati. Elementul

182

Introducere 183
<xsl:sort> sorteaza elementele in fisierul xml. Elementul <xml:if> pune o conditiein fisierul xml.Sintaxa este: <xsl:if test=expresie_conditie> Elemente adevarate cind egalitatea din if este indeplinita </xsl:if> [iesirea din if] Elementul <xsl:coose> sre urmatoarea sintaxa:

<xsl:choose> <xsl:when test=expresie> Citeva elemente </xsl:when> <xsl:otherwise> Alte citeva elemente </xsl:otherwise> </xsl:choose> Elementul<xsl:apply-templates> Determina procesarea niumai a elementului current sau a nodurilor copil(child).

Fie secventa <promovare> <sectie nume=fizica medicala/> <an nr=1 promovati=60inscrisi=90/> <an nr=2 promovati=20 inscrisi=60/> ,an nr=3 promovato=18 inscrisi=20/> <promovare/> entru a vedea numarul de promovati in sectia de fizica medicala fisierul xsl va trebui sa contina: <xsl:for-each select=sum(promovare/sectie[1]/an/@promovati/>

183

Introducere 184
Aici @promovati returneaza valoarea numerica a atributuluipromovati iar sum efectueaza adunarea acestor valori. Daca se doreste afisarea notelor din programul P2xml.xml se poate atasa urmatorul fisier xsl:

<?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform"> <xsl:template match="/"> <html> <body> <h2>Rezultate </h2> <table border="1"> <tr bgcolor="#9acd32"> <th align="left">nume</th> <th align="left">prenume</th> <th align="left">ex1</th> <th align="left">ex2</th> </tr> <xsl:for-each select="rezultate/note"> <tr> <td><xsl:value-of select="nume" /></td> <td><xsl:value-of select="prenume" /></td> <td><xsl:value-of select="ex1" /></td> <td><xsl:value-of select="ex2" /></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

184

Introducere 185
Program exx2.xml Aceste ultime doua exemple arata ca inlimbajul XML datele sint complet separate de indicatiile de afisare,ceea ce constituie principala calitate a limbajului.

Bibliografie
1. Flanagan, David (2006). JavaScript: The Definitive Guide. O'Reilly & Associates. pp. 312-313. 2. Koch, Peter-Paul (May 14, 2001). "The Document Object Model: an Introduction". Digital Web Magazine. Retrieved on January 10, 2009. 3. Le Hgaret, Philippe (2002). "The W3C Document Object Model (DOM)". World Wide Web Consortium. Retrieved on January 10, 2009. 4. Guisset, Fabian. "What does each DOM Level bring?". Mozilla Developer Center. Mozilla Project. Retrieved on January 10, 2009. 5. http://www.w3schools.com/htmldom/ 6. http://www.howtocreate.co.uk/tutorials/javascript/domtables 7. http://www.ibm.com/developerworks/xml/library/x-tipxrdf.html 8. http://www.javascriptkit.com/javatutors/dom3.shtml 9. https://developer.mozilla.org/ 10. Wagner JavaScript

185

Introducere 186

186