JavaScript CUPRINS Conversaia 1. JavaScript i HTML 4.0, XHTML i XML ........................

3 Stilul de via Web De ce JavaScript i Java au nume att de apropiate? Ce putei realiza cu JavaScript? Ce nu putei realiza cu JavaScript? Terminologia JavaScript Concept ele programrii JavaScript Cum inserai un script n documentele (X)HTML, Dreamweaver MX i XML? EXEMPLUL 1 JAVASCRIPT Oferta de editoare JavaScript Resursele JavaScrip t de care avei nevoie Versiunile JavaScript Tem Conversaia 2. Variabile i funcii .................................................. ......... 33 Tipurile de date i valorile speciale JavaScript Variabile i funcii. Aplicaii Crearea automat a script-urilor cu Dreamweaver MX EXEMPLUL 2 JAVASCRIPT Cuvinte rezervat e JavaScript Tem Conversaia 2 (continuare). Operatorii JavaScript. Obiecte matematice ............ ...................................... 57 Operatorii JavaScript Asociativitatea i prioritatea operatorilor Obiectul Math Ob iectul Number Obiectul Boolean EXEMPLUL 2 JAVASCRIPT (continuare) Tem Conversaia 3. Instruciunile limbajului JavaScript ............................... 91 Tipuri de instruciuni JavaScript for. Aplicaii EXEMPLUL 3.1 JAVASCRIPT while. Apli caii EXEMPLUL 3.2 JAVASCRIPT do ... while. Aplicaii EXEMPLUL 3.3 JAVASCRIPT for .. . in. Aplicaii if, if...else, switch. Aplicaii EXEMPLUL 3.4 JAVASCRIPT Instruciunil e continue i break Instruciunea with Tem Conversaia 4. Obiectele interne String, Array ................................... ... 123 Obiectele limbajului JavaScript. Prezentare general Obiectele interne Obiectul St ring. Aplicaii Obiectul Array. Aplicaii EXEMPLUL 4 JAVASCRIPT Tem Conversaia 5. Obiectele (interne) RegExp, Date, Arguments .............. 153 Expresii regulate Obiectul RegExp. Aplicaii EXEMPLUL 5 JAVASCRIPT Obiectul Date. Aplicaii Obiectul Arguments. Aplicaii Tem Conversaia 6. Gestionarii de evenimente JavaScript .......................... 189 Evenimente i gestionari de evenimente Gestionarii de evenimente JavaScript Aplicai i Tem Conversaia 7. Obiectele navigatorului ........................................... ....... 211 Document Object Model (DOM) Obiectul Window. Aplicaii Obiecte de nivelul 1 Obiect e de nivelul al doilea Obiecte de nivelul al treilea Obiecte de nivelul al patru lea Obiectul Navigator. Aplicaii Tem Conversaia 8. Obiectul Form. Validarea formularelor ......................... 273 Obiectul Form. Aplicaii (Sub)Obiectele Form. Aplicaii Validai un formular cu JavaSc ript. Aplicaii EXEMPLUL 8 JAVASCRIPT (varianta 1) EXEMPLUL 8 JAVASCRIPT (varianta 2) Tem Conversaia 9. Obiectul Image .................................................... ............ 343 Obiectul Image. Aplicaii Creai un rollover cu JavaScript Creai un joc cu JavaScript Creai animaii simple cu JavaScript Creai imagini reactive (client) cu JavaScript. Aplicaii EXEMPLUL 9 JAVASCRIPT Tem

Conversaia 10. Obiectele Frame i Layer ........................................... .. 377 Obiectele Frame EXEMPLUL 10.1 JAVASCRIPT Obiectul Layer. Aplicaii EXEMPLUL 10.2 J AVASCRIPT Tem Conversaia 11. Depanarea aplicaiilor JavaScript ............................... 40 3 Tipuri de erori JavaScript. Aplicaii Tehnici de depanare a script-urilor Instrume nte pentru depanarea script-urilor. Aplicaii Instruciunile throw i try catch. Aplic aii Tem Conversaia 12. Crearea obiectelor personalizate ................................ 427 Utilizarea obiectelor personalizate pentru simplificarea script-urilor Definii un obiect Definii o metod pentru un obiect Creai o instan a unui obiect Aplicaii EXEMPLU L 12 JAVASCRIPT Tem Bibliografie ................................................................... ........................... 459 Conversaia 1 JavaScript i HTML 4.0, XHTML, XML n aceast conversaie: Stilul de via Web De ce JavaScript i Java au nume att de apropiate? Ce putei realiza cu JavaScript? Ce nu putei realiza cu JavaScript? Terminologia JavaScript Concept ele programrii JavaScript Cum inserai un script n documentele (X)HTML, Dreamweaver MX i XML? EXEMPLUL 1 JAVASCRIPT Oferta de editoare JavaScript Resursele JavaScrip t de care avei nevoie Versiunile JavaScript Tem

Stilul de via Web Oamenii i companiile de pretutindeni se bazeaz din ce n ce mai mult pe Web pentru a -i rezolva problemele zilnice. Disponibilitatea crescut i varietatea funciilor i serv iciilor online au dus la nfiinarea stilului de via Web, iar Web-ul devine ncet, ncet arte integrant a vieii noastre personale i profesionale. Natura interactiv a World W eb face posibil existena stilului de via Web. Cum pot fi fcute paginile Web interactiv ? n principal, exist trei niveluri de interactivitate:

4 Elementele hiperlink Cel mai simplu nivel de interactivitate pe care l ofer Web-ul . Interactivitatea funcional Se refer la abilitatea de a executa sarcini specifice i funcii ntr-un site Web. Interactivitatea comunitar Permite vizitatorilor s se ntlnea c i s interacioneze unul cu altul. Interactivitatea comunitar este adesea considerat o strategie promoional online. Interactivitatea v oblig s apelai la un limbaj de programare sau un limbaj de script. Limbajele de script destinate Web-ului permit combinarea script-urilor i a instruciunilor (X)HTML pentru a crea pagini Web interactive. Care este deosebir ea ntre un limbaj de script i un limbaj de programare? Totul depinde de cel cruia v adresai: noi vorbim n aceast carte de limbajul de script JavaScript, dar nimeni nu v mpiedic s menionai n CV-ul dumneavoastr, n lista de limbaje pe care le cunoatei de programare JavaScript, evident dup ce ai terminat de citit aceast carte! JavaSc ript nu este singurul limbaj pentru Web. Java, un limbaj de programare orientat obiect creat de Sun, de exemplu, n

anumite situaii este mult mai bun dect JavaScript. Chiar dac numele lor i cteva instr uciuni se aseamn, Java i JavaScript sunt limbaje total diferite. VB Script (Visual Basic Scripting Edition) este rspunsul lui Microsoft la JavaScript. Ca i JavaScript, VB Script este un limbaj de script simplu. El are la baz sintaxa Visual Basic, un limbaj de programare Windows foarte rspndit. Script-urile VB Script pot fi direct incluse n documentele (X)HTML. VB Scr ipt prezint mari avantaje pentru cei care cunosc deja Visual Basic. VB Script poa te fi de asemenea integrat cu Active X, standardul Microsoft pentru integrarea a plicaiilor n paginile Web.

5 De ce JavaScript i Java au nume att de apropiate? Nu este nimic grav dac nu tii s rspundei la aceast ntrebare! Cu toii tim c Java es unei insule din Indonezia, dar JavaScript? JavaScript i Java sunt dou limbaje pen tru Web. De ce numele lor sunt att de apropiate? Cel puin trei ar putea fi rspunsur ile la aceast ntrebare, pe care v invitm s le analizai i apoi s decidei! 1. JavaScri te o versiune simplificat a limbajului Java. 2. Sintaxa limbajului JavaScript este parial inspirat din cea a limbajului Java. 3. Cele dou limbaje provin din insula Ja va. Rspunsul corect este 2: Sintaxa limbajului JavaScript este parial inspirat din cea a limbajului Java. S m explic. n ciuda tuturor aparenelor, JavaScript i Java sunt diferite. Din cauza asemnrii de nu me numeroi sunt cei care cred c JavaScript nu este dect o versiune simplificat a limba jului Java (1). Aceasta este fals. Java i JavaScript sunt dou tehnologii separate avnd doar numele i originea apropiate. Sintaxa limbajului JavaScript este parial in spirat din cea a limbajului Java (2). Diferena esenial ntre cele dou limbaje este acee a c spre deosebire de JavaScript, Java permite crearea de aplicaii autonome. Remarc. Java este numele unei insule din Indonezia, dar el nseamn de asemenea cafea n vorbirea curent american. Logo-ul limbajului de programare Java este o ceac de cafea cald (un detaliu amuzant, nu-i aa?). Ce putei realiza cu JavaScript? JavaScript este limbajul favorit al creatorilor de site-uri Web deoarece: este u n limbaj uor de nvat; 6 sunt suficiente cteva linii de cod pentru a mri gradul de interactivitate al pagin ilor Web; este un limbaj care poate fi interpretat de browser-e; programele Java Script pot fi incluse direct n documentele (X)HTML. Limbajul JavaScript poate ser vi la: generarea paginilor Web personalizate i modificarea dinamic a prezentrii lor ; realizarea calculelor matematice; validarea coninutului unui formular; comunica rea cu applet-urile Java; crearea animaiilor personalizate; afiarea unor mesaje ca re defileaz n bara de stare a navigatorului; afiarea unor mesaje ntr-o pagin Web sau n tr-o caset de dialog; crearea unor butoane animate; identificarea navigatorului n care se afieaz pagina Web; executarea funciilor clasice ale unui limbaj de programa re. Evident, aceast list nu este exhaustiv; mai exist numeroase aplicaii posibile n Ja vaScript. Multe dintre acestea le vom descoperi mpreun! Remarc. Utilizarea limbajului JavaScript nu este limitat doar la navigatoarele Web . Exist versiuni server JavaScript (de exemplu, Live Wise sau Server Side JavaScr ipt pentru navigatorul Netscape) care permit scrierea de programe JavaScript cap abile de a executa, de exemplu accesul la o baz de date n vederea afirii informaiilor ntr-o pagin Web.

Ce nu putei realiza cu JavaScript? Desigur, JavaScript nu este cum urmeaz. Din motive de securitate, JavaScript nu p oate citi, scrie, crea i terge fiiere de pe hard disc; JavaScript nu poate executa operaii n reea; perfect. Cine este perfect! Dei JavaScript este puternic, el este limitat de restricii severe impuse de navigatoarele Web, dup 7 JavaScript nu poate crea aplicaii autonome. Pentru a scrie astfel de aplicaii va t rebui s utilizai unul din limbajele clasice: Java, C sau C++. Terminologia JavaScript Pentru a lucra cu limbajul JavaScript, va trebui s v familiarizai cu termenii i conc eptele prezentate n cele ce urmeaz: Obiect; Proprietate; Metod; Instruciune; Funcie; Eveniment; Gestionar de evenimente; Variabil. S facem cunotin cu fiecare, narmndu-v cu rbdare i nu doar att! Obiect Desigur dumneavoastr tii foarte bine ce este un obiect cel puin din viaa cotidian. Est e o entitate cu parte ntreag, ca de exemplu o minge de volei, o main etc. n JavaScrip t, window este un obiect, window este o fereastr a navigatorului. Pagina Web este de asemenea un obiect. Fiecare element al unui document (X)HTML este la rndul lu i un obiect: paragrafe, formulare, tablouri, imagini, link-uri etc. Exemplele po t continua. n JavaScript exist trei tipuri de obiecte: 1. obiecte interne furnizat e de limbajul JavaScript (vezi Conversaiile 2, 4, 5): Arguments, Array, Boolean, Date, Function, Math, Number, Object, RegExp, String, This. 2. obiecte personalizate, create de utilizator n funcie de cerinele script-urilor ( vezi Conversaia 12); 3. obiectele navigatorului (vezi Conversaiile 7, 8, 9, 10) su nt exterioare limbajului dar sunt recunoscute de browser-e. Reprezint diferite co mponente ale navigatorului i ale documentului (X)HTML curent. 8 Standardul DOM (Document Object Model) definete obiectele navigatorului n mod iera rhic, dup cum urmeaz: Window, Document, Navigator, Event, Screen, History i Location. Lista obiectelor navigatorului (n ordine alfabetic) este urmtoarea: button, checkbox, document, event, fileUpload, form, hidden, history, (n submit, location, general), radio, text, MimeType, option, reset, textarea, navigator, O ption(), screen, window. Remarc. n JavaScript obiectele sunt considerate ca substantive. Objects password, plugins, select, Proprietate O proprietate descrie un obiect. Culoarea reprezint unul din atributele (proprietil e) obiectului main. Poate avea valoarea bleu. n JavaScript height este o proprietate a obiectului window. De exemplu, ea poate avea ca valoare 200. O proprietate poa

te fi de asemenea un obiect care la rndul lui dispune de proprieti. De exemplu, far urile sunt proprieti ale obiectului main. Dar acestea sunt de asemenea obiecte care pot avea diverse proprieti: form, culoare, putere. n JavaScript, document este o pro prietate a obiectului Window i este n egal msur un obiect care are de asemenea propri eti. n figura 1.1 sunt prezentate cteva exemple de proprieti ale unor obiecte interne JavaScript (vezi Conversaiile 2 i 4). Denumire obiect intern Array Math Figura 1.1 String Proprieti length E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQRT length 9 n figura 1.2 sunt prezentate cteva exemple de proprieti ale unor obiecte ale navigat orului (Conversaia 7). Denumire obiect navigator Button Checkbox Proprieti align, align, defaultValue, checked, disabled, form, name, size, type, value defaultchecked, defaultValue, disabled, form, name, size , status, type, value, width Form Figura 1.2 acceptcharset, target Remarc. n JavaScript proprietile sunt considerate ca adjective. action, elements[], encoding, enctype, length, method, name, Metod O metod este o funcie care definete un anumit comportament caracteristic al unui ob iect. Metodele disponibile pentru fiecare obiect descriu ceea ce putei face cu ac est obiect. Metoda deschide a obiectului maina are ca funcie deschiderea uilor. n Ja vaScript, metoda close() a obiectului window are ca funcie nchiderea ferestrei. Fi ecare obiect posed o colecie de metode, iar fiecare metod aparine cel puin unui obiec t. n figura 1.3 sunt prezentate cteva exemple de metode ale unor obiecte interne ( vezi Conversaiile 2 i 4). Denumire obiect intern Array Metode concat(), reverse(), join(), shift(), asn(), floar(), pop(), slice(), atan(), lo g(), push(), sort(), ceil(), max(), splice(), toString(), unShift() Math abs(), cos(), Figura 1.3 acos(), exp(), min(), pow(), random(), round(), sin(), sqrt(), tan() 10 n figura 1.4 sunt prezentate cteva exemple de metode ale unor obiecte ale navigato rului (vezi Conversaia 7). Denumire obiect navigator Button Figura 1.4 Checkbox Metode blur(), click(), focus() blur(), click(), focus()

Remarc. n JavaScript metodele sunt considerate ca verbe. Instruciune O instruciune produce o aciune (afiarea unui text, modificarea proprietii unui obiect , atribuirea unei variabile a unui nou coninut). Instruciunile combin obiecte, prop rieti i metode (substantive, adjective i verbe). n figura 1.5 este prezentat un exemp lu de script care conine instruciuni simple JavaScript. <script language = JavaScri pt type = text/JavaScript> a=4; b=13; c=a+b; document.write (Suma: +c); </script> Remarc. Instruciunile limbajului JavaScript sunt prezentate n Conversaia 3. Figura 1.5 Funcie O funcie este un grup de instruciuni tratate ca o singur entitate. Sau, o funcie est e un obiect care conine cod executabil. Spre deosebire de metode, funciile nu sunt asociate nici unui obiect particular. Funciile pot fi comparate cu electronii lib eri care pot fi reutilizai n orice circumstan. Numeroase funcii sunt interne: ele sunt incluse n limbajul JavaScript (Exemple: eval(); parseFloat(); parseInt()). Nu trebuie s v surprind urmtoarea afirmaie: chiar dumneavoastr putei s v creai propriile funcii! Ceea ce este nemaipomenit! n figura 1.6 se prezint un exemplu de funcie definit de u tilizator: calculul diametrului unui cerc de raz r. 11 <script language = JavaScript> function diametru (r) { temp = 2*r; return temp; } </script> Remarc. Funciile sunt tratate n detaliu n Conversaia 2. Figura 1.6

Evenimente Un eveniment este ceva care se ntmpl. n sens larg, informaiile pe care le notai n agen a dumneavoastr (Or la dentist, Aniversarea lui Droopy, Ziua efului) sunt evenimente. rite evenimente pot fi imprevizibile: contravenie pentru depire viteza legal n locali tate; o nunt cu dar la rudele nevestii; vizita neateptat a soacrei etc. Dac aceste e venimente sunt prevzute sau nu, este problema dumneavoastr de a le gestiona. Gesti unea evenimentului Aniversarea lui Droopy va consta probabil n a-i cumpra un cadou. Ct privete vizita soacrei reacia dumneavoastr poate fi una normal: stingei lumina pent ru a demonstra c nu suntei acas! Un eveniment JavaScript este o aciune care se produce n raport cu un element (fere astr, document, un buton). n JavaScript numeroase evenimente (clic, dublu clic etc .) sunt provocate de utilizator. Alte evenimente nu privesc direct utilizatorul. Iat o list cu cele mai frecvente evenimente JavaScript: utilizatorul ncarc o pagin W eb n browser; utilizatorul oprete ncrcarea paginii Web n browser; utilizatorul a intr odus sau a modificat coninutul unui cmp de text al unui formular; utilizatorul a e xecutat clic pe o imagine sau pe un buton; utilizatorul a expediat coninutul unui formular sau l-a reiniializat. Fiecare eveniment este asociat unui obiect. 12 Fiecare eveniment are propriul su nume. De exemplu, evenimentul MouseOver se prod uce atunci cnd mouse-ul se poziioneaz deasupra unui obiect. Dac mouse-ul trece pe de asupra unui link (legtur), evenimentul MouseOver este expediat gestionarului de ev

enimente al acestei legturi, dac exist. n figura 1.7 sunt prezentate cteva exemple de evenimente JavaScript dintre cele mai cunoscute. Denumire eveniment click dblclick help Figura 1.7 keypress Se declaneaz atunci cnd se execut clic pe un element se execut dublu clic pe un element se activeaz tasta F 1 n fereastra activ se acioneaz o tast a claviaturii Gestionarii de evenimente Gestionarii de evenimente JavaScript indic navigatorului cum s reacioneze atunci cnd se produc diferite evenimente. n general, un gestionar de evenimente ia forma un ei funcii JavaScript pe care o creai special pentru a prelucra un anume tip de eve niment, dar el poate fi totodat o instruciune sau mai multe instruciuni JavaScript, care sunt integrate n codul (X)HTML de definire al evenimentului. Pentru a defin i un gestionar de evenimente, adugai on la nceputul numelui evenimentului. Astfel, gestionarul de evenimente onMouseOver este apelat atunci cnd mouse-ul trece pe de asupra legturii (Gestionarul de evenimente este plasat n tag-ul (X)HTML <a> al lin k-ului corespunztor). Remarci: Poate ai observat combinaia de majuscule i minuscule (exemplu: onMouseOver , onMouseOut). Este vorba de notaia standard a gestionarilor de evenimente: on es te scris ntotdeauna cu minuscule, iar iniiala fiecruia din cuvintele evenimentului, cu majuscule. Evenimentele i gestionarii de evenimente JavaScript sunt tratate n det aliu n Conversaia 6. 13 Variabile Variabilele reprezint un element fundamental al limbajului JavaScript. Ele pot co nine: un numr, un ir de caractere sau un obiect. Fiecare variabil poart un nume care respect anumite reguli de sintax. n figura 1.8 se prezint cteva exemple de nume de va riabile JavaScript (valide). nume_prof nume_student_olimpic a _var13 stoc Remarc. Variabilele JavaScript sunt tratate n detaliu n Conversaia 2. Figura 1.8 Conceptele programrii JavaScript Utilizarea limbajului JavaScript se reduce n principal la dou concepte de baz: sint axa JavaScript; DOM-ul (Document Object Model modelul obiectelor documentului). Sintaxa definete un ansamblu de reguli care trebuie respectate atunci cnd scriei co d JavaScript. Aceste reguli nu sunt numeroase. Este bine s le cunoatei ca apoi s le aplicai. Nu tiu cum este mai bine: s stai cu regulile n cap sau cu capul n reguli! Pro cedai cum credei! DOM-ul se refer la componentele paginii Web, obiectele pe care le putei accesa i pe care le putei manipula cu ajutorul limbajului JavaScript. Remarc. Obiectele interne, obiectele navigatorului i obiectele personalizate sunt tratate n detaliu, n Conversaia 4, Conversaia 5, Conversaia 7, Conversaia 12. Trebuie s v nsuii foarte bine DOM-ul JavaScript pentru a putea scrie un script JavaSc ript. 14 Cum inserai un script ntr-un document (X)HTML? Extinderea paginilor (X)HTML prin folosirea limbajului JavaScript confer paginilo r Web mai mult putere, iar (X)HTML-ului mai mult flexibilitate. JavaScript, prin i

nserarea unui script n documentele (X)HTML existent permite programatorilor s cree ze pagini Web mult mai dinamice. Elementul script Script-urile JavaScript sunt inserate ntr-un document (X)HTML cu elementul <script> ... </script>. Elementul script este alctuit din: tag-ul de nceput <script>, coninutul propriu-zis i tag-ul de sfrit </script>. Tag-ul <script> conine urmtoarele atribute: type indic tipul limbajului de script. Valoarea sa trebuie s fie un Internet (figura 1. 9). Media Type (un tip MIME), de exemplu text/JavaScript sau text/vbscript <script type=text/JavaScript> ...cod Jav aScript </script> Figura 1.9 language identific limbajul de script i facultativ versiunea (vezi figura 1.10). <script type=text/JavaScript language=JavaScript> ...cod JavaScript Fi gura 1.10 </script> src facultativ, precizeaz URL-ul fiierului extern care conine script-ul (vezi figura 1. 11). <script type=text/JavaScript src=functie.js> ...cod JavaScript Figura 1.11 </script> 15 Elementul noscript Incapacitatea navigatorului de a prelucra un script poate avea trei cauze: fie e l nu tie s prelucreze script-urile n general; fie el nu recunoate limbajul desemnat prin atributul type; fie utilizatorul a dezactivat (nu are ncredere!) prelucrarea script-urilor. Din acest motiv se utilizeaz elementul <noscript> ... </noscript> n interiorul cruia putei plasa elementele (X)HTML care vor fi ignorate de navigatoarele capabile s exploateze un script (vezi figura 1.1 2). <script type=text/JavaScript> cod JavaScript </script> <noscript> Regretm c navi gatorul dumneavoastr nu recunoate script-urile! Figura 1.12 </noscript> Metode de inserare a script-urilor ntr-un document (X)HTML Rolul elementului script este de a defini script-ul care va fi utilizat n documen tul (X)HTML. Pentru inserarea script-urilor n documentele dumneavoastr (X)HTML fol osii una din metodele prezentate mai jos: Metoda 1 plasai script-ul n corpul paginii (ntre <body> i </body>); Metoda 2 plasai script-ul n antet-ul paginii (ntre <head> i </head>); Metoda 3 utilizai fiiere surs externe; Metoda 4 creai un gestionar de evenimente.

Cum inserai un script n documentele XML Cu JavaScript putei crea i manipula obiectele DOM XML. Pentru a construi pagini We b interactive cu XML folosii tehnicile specifice ale DOM-ului XML i ale limbajului JavaScript. 16 n lucrarea Liviu Dumitracu, XML, Editura Universitii din Ploieti, n conversaia 9 se prezint n detaliu modul de inserare a script-urilor n documentele XML. Consultai de asemenea urmtoarele resurse: Floarea Nstase, Pavel Nstase, Tehnologia aplicaiilor Web (XML, DOM, ASP), Editura Economic 2 002, Bucureti http://www.dannyg.com/examples/xmltable/index.html EXEMPLUL 1 JAVASCRIPT Scriei un script care afieaz mesajul: mi place s fiu ntotdeauna aa cum sunt. Pentru area script-ului ntr-un document (X)HTML utilizai toate cele patru metode pe care le-am prezentat anterior. Metoda 1 Iat cum procedm pentru a insera (cu Notepad) sc ript-ul n corpul documentului (X)HTML. Mesajul va fi afiat cu italice. Dac dorii s in serai un script scurt, reprezentat prin cteva linii de cod JavaScript, cel mai sim plu este s-l plasai n corpul paginii. 1. Creai documentul (X)HTML (figura 1.13) cu N otepad. Figura 1.13 2. Plasai elementul script n locul n care dorii s apar script-ul dumneavoa str (figura 1.14). 17 Figura 1.14 3. Introducei n tag-ul de deschidere <script> atributul type pentru a preciza tipul MIME al script-ului i atributul language pentru a preciza limbajul de script (JavaScript), figura 1.15.

Figura 1.15 4. Inserai tag-ul de comentariu XHTML standard (<!-- i --> i plasai // nai tea tag-ului de sfrit de comentariu XHTML pentru a ascunde sfritul de comentariu de interpretorul JavaScript (figura 1.16). Figura 1.16 Remarc. Liniile de comentariu au fost inserate pentru a ascunde script-ul de navi gatoarele care nu-l recunosc.

5. Inserai instruciunea JavaScript document.write() care afieaz mesajul: mi place s fi ntotdeuna aa cum sunt. n pagina Web (atunci cnd ea este ncrcat!), figura 1.17. Figura 1.17 18 Remarci: JavaScript ofer mai multe soluii pentru afiarea informaiilor, una dintre ce le mai simple fiind instruciunea document.write. Instruciunea document.write (vezi Conversaia 7) permite afiarea unui text, a valorilor numerice i a altor informaii. n msura n care programul dumneavoastr JavaScript va fi inserat ntr-o pagin Web, rezult atul va fi afiat direct n pagin. Tag-urile (X)HTML, <i> de exemplu, sunt plasate ntr e ghilimele. Tag-urile (X)HTML nu sunt interzise n interiorul tag-urilor <script> . Plasate ntre ghilimele, tag-urile (X)HTML sunt interpretate de ctre navigator ca i cnd ar aparine (X)HTML-ului. Facilitatea de combinare a tag-urilor (X)HTML i a in struciunilor JavaScript reprezint una din caracteristicile cele mai puternice ale

unui navigator care recunoate JavaScript. n realitate, aceast facilitate constituie esena Web-ului dinamic i interactiv pe care dumneavoastr urmeaz s-l aplicai. 6. Validai documentul XHTML 1.1 cu aplicaia validator (vezi figura 1.18). Figura 1.18 7. Inserai codul XHTML care afieaz iconul de conformitate (figura 1.19) . Figura 1.19 8. Afiai pagina Web ntr-un browser (figura 1.20). Figura 1.20 19 Procedura de creare automat a script-ului cu Dreamweaver MX Iat cum procedm pentru a crea documentul XHTML pentru EXEMPLUL 1 JAVASCRIPT cu Dre amweaver MX. 1. n grupul de panouri Insert, executai clic pe subpanoul HTML (figur a 1.21). Figura 1.21 2. Executai clic n locul n care dorii s inserai script-ul (figura 1.22). Figura 1.22 3. Executai clic pe butonul (Script), figura 1.23. Figura 1.23 20 Remarc. Se deschide caseta de dialog Script (figura 1.24). Figura 1.24 4. Introducei script-ul (figura 1.25). Figura 1.25 5. Executai clic pe butonul OK al ferestrei de dialog Script (figura 1.26). Figura 1.26 21 Remarc. Se insereaz elementul <script> ... </script> (figura 1.27). Figura 1.27 6. Vizualizai pagina Web ntr-un browser (figura 1.28). Figura 1.28 Metoda 2 Iat cum procedm pentru a insera (cu Notepad) script-ul n antet-ul paginii, n seciunea

<head> ... </head>. Seciunea <head> a unei pagini (X)HTML precede seciunea <body>. Tag-urile i script-u rile cuprinse n aceast seciune sunt interpretate ntotdeauna primele. Din acest motiv n mod frecvent se plaseaz n aceast seciune un script care definete variabilele i func le ce urmeaz a fi utilizate de ctre alte script-uri ale paginii. 1. Creai documentu l (X)HTML cu Notepad. 2. Plasai tag-urile script n elementul head al documentului (X)HTML (figura 1.29).

22 Figura 1.29 3. Introducei funcia mesaj() (figura 1.30).

Figura 1.30 Remarci: O funcie este un grup de instruciuni tratate ca o singur entitate. Pentru a utiliza o funcie, va trebuie mai nti s o definii. Funcia mesaj are rolul de a afia ( u italice) mesajul: mi place s fiu ntotdeauna aa cum sunt. n pagina web. Funcia mesaj pe cu cuvntul rezervat function urmat de numele funciei (mesaj). Dup numele funciei u rmeaz parantezele vide (). Dup cum vei vedea mai trziu, aceste paranteze nu sunt ntotd auna vide! Acoladele de deschidere ({) i de nchidere (}) servesc la delimitarea instru ciunilor JavaScript care alctuiesc corpul funciei i permit navigatorului s tie unde nc pe i unde se termin o funcie. n exemplul nostru, o singur linie de cod JavaScript ape leaz funcia document.write (o metod a obiectului Document) care permite afiarea cu i talice a mesajului mi place s fiu ntotdeauna aa cum sunt..

4. Apelai funcia mesaj(). Funcia este acum definit i inserat n documentul (X)HTML, dar ... inutilizabil n acest moment. Pentru a putea utiliza o funcie, va trebui s-o ape lai. Pentru a apela o funcie, va trebui s utilizai numele su ntr-o instruciune a scrip -ului (vezi figura 1.31). 23 Figura 1.31 Remarc. Mai multe detalii despre funcii (definire, apel) gsii n Conversaia 2. 5. Validai documentul XHTML 1.1 cu aplicaia validator (vezi figura 1.32). Figura 1.32 6. Inserai codul XHTML care afieaz iconul de conformitate (figura 1.33) . Figura 1.33 7. Afiai pagina ntr-un browser (figura 1.34). Figura 1.34

24 Metoda 3 Iat cum procedm pentru a utiliza un fiier extern, n care plasm script-ul pen tru afiarea mesajului indicat. Dac dorii s utilizai funciile de script n mai multe doc mente, atunci plasai-le ntr-un fiier separat (cu extensia .js) pe care-l referii apo i din documentul dumneavoastr. Pentru a continua exemplul nostru, creai un script extern, funcie1.js (vezi figura 1.35). Figura 1.35 Pentru a utiliza acest script extern indicai numele fiierului n atribut ul src al tag-ului script (figura 1.36). Figura 1.36 Remarc. Acelai script poate fi utilizat n mai multe pagini Web diferite. n figura 1.37 se prezint documentul XHTML complet. Figura 1.37 25 Validai documentul XHTML 1.1 cu aplicaia validator, inserai codul XHTML care afieaz i con-ul de conformitate i afiai pagina Web ntr-un browser. Rezultatul vizualizrii pagi

nii Web n Internet Explorer este ilustrat n figura 1.38. Figura 1.38 Metoda 4 Iat cum procedm pentru a crea un script care afieaz mesajul ind icat cu ajutorul gestionarului de evenimente onClick. 1. Creai documentul XHTML ( figura 1.39). Figura 1.39 2. Introducei n tag-ul <input /> gestionarul de evenimente onClick (ve zi figura 1.40). Figura 1.40 Remarci: Nu este obligatoriu ca toate script-urile JavaScript s se gseasc n interior ul tag-urilor <script> ... </script>. Putei apela, de asemenea la script-uri sub forma gestionarilor de evenimente, care indic navigatorului cum s reacioneze atunci cnd se produc anumite evenimente.

26 Gestionarii de evenimente sunt funcii puternice JavaScript. Din fericire, ele sun t uor de programat. Uneori este suficient o singur instruciune pentru a-l activa. Fi ecare eveniment are propriul su nume, de exemplu click. Pentru a defini un gestio nar de evenimente, adugai on la nceputul numelui evenimentului (de exemplu, onClick ). Gestionarul de evenimente onClick este activat atunci cnd se execut clic pe but onul logo. Gestionarul de evenimente onClick este plasat n interiorul tag-ului <inp ut /> al formularului, ca un atribut al acestui tag. Instruciunea JavaScript care reacioneaz la eveniment trebuie s fie plasat ntre ghilimele. De cele mai multe ori a ceast instruciune va fi o funcie, n msura n care funciile au avantajul de-a avea un nu e precis, semnificativ i de a conine mai multe instruciuni. Obiectul Window conine t rei metode (alert, confirm, prompt) practice pentru afiarea mesajelor i interactiv itatea cu utilizatorul. Metoda alert() afieaz o caset de dialog de avertizare. Ea s ervete pentru transmiterea informaiilor utilizatorului. Metoda alert() este prezen tat n detaliu n Conversaia 2. 3. Validai documentul (X)HTML 1.1 cu aplicaia validator (vezi figura 1.41). Figura 1.41 4. Inserai codul XHTML care afieaz icon-ul de conformitate 5. Afiai pagina Web ntr-un browser (figura 1.42). . Figura 1.42 27 Aplicaie Modificai documentul XHTML din figura 1.40 astfel nct funcia apelat din gesti onarul de evenimente onClick s fie programat ntr-un script situat n seciunea <head> a documentului (figura 1.43). Figura 1.43 Rezultatul execuiei script-ului este prezentat n figura 1.44. Figura 1.44 Figura 1.44 (continuare) Oferta de editoare JavaScript Script-urile JavaScript sunt salvate ca fiiere de tip text.

28 n consecin, putei folosi orice editor de text care genereaz fiiere text ASCII. Un mare numr de editoare (X)HTML pot fi folosite cu JavaScript. Aceste editoare conin, de regul funcii specifice JavaScript, ca de exemplu colorarea automat a instruciunilor sau crearea automat a script-urilor simple. Iat cteva editoare sub Windows, pe car e vi le recomandm: Homesite; Macromedia Dreamweaver; Adobe GoLive; Microsoft Fron t Page 2003; Netobjects Script Builder; Text Pad; Web Expert; Ultra Edit; Edit P lus; Script Edit; Top Style. Remarc. Dei oferta de editoare JavaScript este considerabil, v sugerm s nu renunai la itorul de text standard Notepad. Procedai cum credei.

Resursele JavaScript de care avei nevoie Pentru script-urile (JavaScript) pe care urmeaz s le creai nu avei nevoie dect de dou instrumente de baz: un editor de text (simplu); un navigator. Remarc. nainte de a v lansa n provocarea JavaScript pe care v-am lansat-o, v sugerm s formai un background (X)HTML care s cuprind: tag-urile (X)HTML, cadrele i n mod speci al formularele. Consultai urmtoarea list de site-uri: www.htmlreference.com www.w3. org www.w3.org/TR/2001/REC-xhtml11-20020531/

JavaScript i navigatoarele Ca i documentele (X)HTML, script-urile JavaScript au nevoie de un navigator pentr u a fi afiate. Dar, navigatoarele nu interpreteaz instruciunile n acelai mod. (X)HTML are puine probleme, dar consecinele unei incompatibiliti JavaScript pot fi semnific ative. La ora actual, dou navigatoare domin piaa: Netscape i Microsoft Internet Explo rer. Cele dou navigatoare rmn n continuare; nu uitai acest lucru atunci cnd v creai p riile pagini. Remarc. JavaScript 1.5, nu este recunoscut oficial dect de Netscape 6.0 i de Intern et Explorer 5.5 i urmtoarele.

29 Dup cum am menionat, JavaScript nu este interptetat n aceeai manier de ctre toate navi gatoarele. Incompatibilitatea se manifest n urmtoarele moduri: ignorare un element de cod nu este vzut de navigator, i-n consecin nu este interpretat; eroare un element de cod provoac o eroare ntruct sintaxa nu este recunoscut de navigator; interpretare un element poate fi interpretat diferit de ctre navigator. Ideal ar fi o compatib ilitate cu toate versiunile tuturor navigatoarelor. Dar, este aproape imposibil. Totui, JavaScript poate detecta versiunea navigatorului, ceea ce permite ca anum ite blocuri de cod s poat fi prevzute pentru fiecare navigator. Dar aceast soluie nu este ntotdeauna realist.

30 Versiunile JavaScript JavaScript 1.5 Dup prima sa versiune (JavaScript 1.0) lansat n anul 1995 de ctre Netscape (Netscape 2.0) JavaScript a evoluat considerabil. Exist n prezent cinci versiuni: 1.0, 1.1, 1.2, 1.3 i 1.5 fiecare dintre acestea aducnd mbuntiri importante n raport cu preceden ele. Remarc. La nceput (anul 1995), JavaScript se chema Live Script. El a fost reboteza t JavaScript pentru a evoca marketingul comun cu limbajul Java. JavaScript este primul limbaj de script dezvoltat pentru Web. n paralel, Microsoft a dezvoltat propriul su limbaj JavaScript denumit JScript n ca re se regsete cea mai mare parte a elementelor limbajului de origine la care a adug at propriile sale specificaii. Rezultatul: JavaScript nu este un standard. Navigatoarele Netscape ignor specificaiile JScript iar Internet Explorer ignor pe cele ale lui Ja vaScript. Opera a introdus JavaScript ncepnd cu versiunea 3 a navigatorului su. Pre

zentm n continuare (vezi figura 1.45 i figura 1.46) navigatoarele i versiunile JavaS cript sau JS pe care acestea le recunosc. Versiunea limbajului JavaScript JavaScript 1.0 JavaScript 1.1 JavaScript 1.2 JavaScript 1.3 Figura 1.45 JavaScri pt 1.5 Netscape 2.x 3.x 4.0 4.5 4.6 4.7 6 31 Versiunea limbajului JScript JScript 1.0 JScript 3.0 JScript 5.0 JScript 5.5 Figura 1.46 JavaScript 5.6 Internet Explorer 3.02 4.0 5.0 5.5 6 Pentru a pune capt acestor divergene a fost necesar crearea a dou standarde: ECMA i D OM. ECMA (European Computer Makers Association) a publicat norma ECMA 262, o versiune standardizat a limbajului JavaScript, cunoscut sub numele de ECMA Script. JavaScript 1.3 este conform cu norma ECMA 262 iar JavaScript 1.5 este con form cu ECMA 262, versiunea 3. Netscape funcioneaz de asemenea cu ECMA sub JavaScri pt 2.0, viitoarea versiune care va corespunde celei de-a patra ediii a normei ECM A Script. JavaScript 2.0 va constitui o versiune mult mbuntit fa de precedentele. W3C World Wide Web Consortium) a creat DOM (Document Object Model) care descrie elementele paginii Web (obiectele) i modul n care acestea se relaioneaz. Remarci: La ora actual dou navigatoare domin piaa: Netscape i Microsoft Internet Expl orer, dar nu trebuie neglijai nici utilizatorii altor navigatoare. Acordai toat ate nia navigatorului (i versiunile acestora) care prelucreaz JavaScript. Atenie la inco mpatibiliti! Implementarea JavaScript pe Internet Explorer i Netscape Navigator nu este identic. JavaScript 2.0 La data redactrii acestei lucrri, JavaScript 2.0 era n curs de lansare. Vom trece d eci de la versiunea 1.5 la 2.0. Motivul principal al dezvoltrii JavaScript este c reterea puterii limbajului, dar i a capacitii sale de a se alinia la alte standarde precum: C++ i Java. Ca elemente de noutate ale versiunii JavaScript 2.0 amintim: semne de punctuaie suplimentare: #; &&=; ->; ..; ; @; ^^; ^^=; !=; 32 cuvinte rezervate suplimentare: abstact; debugger; mult enum; despre goto; JavaScript 2.0, native;

vizitai site-ul protected; synchronized; throws; transient. Remarc. Dac dorii s cunoatei mai http://www.mozilla.org/js/language/js20/. 33 JavaScript Testai-v cunotinele 1. Ce nelegei prin stilul de via Web? Tem 2. Prin ce se deosebesc limbajele Java i JavaScript? 3. Care sunt virtuile limbaju lui JavaScript? 4. Cum pot fi inserate script-urile n documentele HTML 4.0, XHTML , Dreamweaver MX i XML? 5. Care sunt obiectele interne ale limbajului JavaScript? 6. Cnd folosii elementul noscript? 7. Care este procedura de creare automat a scri pt-urilor cu Dreamweaver MX? 8. Care sunt resursele necesare pentru crearea scri pt-urilor JavaScript? 9. Cum se relaioneaz JavaScript cu navigatoarele? Vizitai site-urile http://JavaScript.Internet.com http://www.pageresource.com/jscript/index4.htm ht tp://www.pageresource.com/jscript/index2.htm http://www.pageresource.com/jscript /index6.htm http://www.webreference.com/js http://www.Javasciptcity.com/tutorial s/jltuto1.htm http://www.jscripts.com http://javascript.internet.com/books/ http ://www.dannyg.com/pubs/index.html Conversaia 2 Variabile i funcii n aceast conversaie: Tipurile de date i valorile speciale JavaScript Variabile i funcii. Aplicaii Crearea automat a script-urilor cu Dreamweaver MX EXEMPLUL 2 JAVASCRIPT Cuvinte rezervat e JavaScript Tem

nainte de a ncepe s scriei cel de-al doilea script EXEMPLUL 2 JAVASCRIPT va trebui s v familiarizai cu elementele de baz ale limbajului JavaScript. Ele v vor fi de folos pentru a nelege cum s scriei programul. Urmtoarele seciuni v vor ajuta s nelegei: de date i valorile speciale ale limbajului JavaScript; operatorii, variabilele i funciile JavaScript; obiectele matematice (Math, Number, Boolean) i nu doar att.

Tipurile de date i valorile speciale JavaScript De obicei, limbajele de programare cer s definii tipul de date pe care-l va reprez enta o variabil, n plus se genereaz o eroare atunci cnd ncercai s-i atribuii variabil un alt tip de date. Din fericire, aa ceva nu se ntmpl n JavaScript, care este un limb aj flexibil. Variabilele JavaScript pot accepta oricnd un nou tip de date, fapt c are duce la modificarea tipului variabilei. 34 La nivel elementar, n JavaScript nu exist dect patru tipuri de date: numerice ntregi ; numerice n virgul flotant; caracter; boolean. Toate celelalte tipuri de date pe c are le vei ntlni n limbajul JavaScript sunt obiecte combinaii ale celor patru tipuri de baz. De exemplu, irurile de caractere sunt obiecte care reprezint o colecie de caractere

Date numerice Limbajul JavaScript permite specificarea datelor numerice n patru formate diferit e: ntreg, virgul flotant, octal i hexazecimal. Cu siguran, cunoatei numerele ntregi ger, n limba englez) i numerele n virgul flotant (floating point, n limba englez), oate cunoatei mai puin pe cele exprimate n octal i n hexazecimal. Prin definiie, numer le n octal i n hexazecimal sunt numere ntregi care sunt exprimate ntr-un sistem de nu meraie cu baza 8, respectiv baza 16. n JavaScript un numr ntreg octal este precedat de zero iar un numr hexazecimal este precedat de caracterele ox sau OX. Remarci: JavaScript recunoate numerele ntregi (n baza 10; pozitive sau negative) cu prinse ntre: +/1.7976931348623157 E 308 i +/5 E 324. Un numr ntreg hexazecimal (hexad cimal, n limba englez) ncepe n mod obligatoriu cu OX sau ox i este compus din urmtoare le simboluri: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Putei utiliza majus cule sau minuscule (figura 2.1). Figura 2.1 <script> x=0x3F; //x ia valoarea 3F (63 n zecimal) </script> Un numr ntreg octal ncepe obligatoriu cu 0 (zero) i este compus din urmtoarele simbol uri: 0, 1, 2, 3, 4, 5, 6, 7 (figura 2.2). Figura 2.2 <script> x=077; //x ia valoarea 63 n zecimal </script>

35 Dac suntei cumva nelinitii, nu v alarmai cci sunt foarte rare cazurile n programele J Script care necesit cunotine de sisteme de numeraie n baza 8 sau n baza 16. Important este s tii c ele exist i le putei recunoate! Un numr n virgul flotant este n baz e fi pozitiv sau negativ i poate conine zecimale. El poate de asemenea include un exponent pozitiv sau negativ, prin E. Separatorul zecimal este ntotdeauna punctul . JavaScript recunoate numerele cuprinse ntre: +/1.7976931348623157 E 308 i +/5 E 324 (vezi figura 2.3). Figura 2.3 <script> x=8.55201; x=0.22; x=.887; x=-.13; x=76.885E+9; </script>

ir de caractere Cu siguran c dumneavoastr vei lucra foarte mult cu tipul de date ir de caractere (alfa numerice). Un ir de caractere (string, n limba englez) este compus din litere, cifr e, simboluri, caractere speciale i secvene de ieire. Coninutul unui ir de caractere e ste considerat tot timpul ca fiind text, chiar dac el const din cifre i simboluri n umerice. Un ir de caractere este ncadrat de ghilimele simple sau duble. Un ir de ca ractere ncadrat de ghilimele duble poate fi inclus ntr-un ir ncadrat de ghilimele si mple i vice versa. Aplicaie Testai irurile de caractere: septembrie; 9.80; Salut, Droopy!; a=01; a rul script (figura 2.4). Figura 2.4 Indicaie. Introducei n variabila sir datele de test (irurile de caractere indicate).

36 Remarc. ntr-un ir de caractere putei introduce de asemenea i caractere care nu se gses c pe tastatur. n acest caz, utilizai o secven de ieire (escape sequence, n limba engle care ncepe ntotdeauna cu \ urmat de un semn sau un cod numeric.

Valori logice sau booleene Ele sunt n numr de dou: true (adevrat) i false (fals). Cele dou valori se folosesc pen tru a indica dac rezultatul evalurii unei condiii este adevrat sau nu. Nu v lsai impre ionai de aceti termeni! n figura 2.5 se prezint un exemplu de utilizare a celor dou v alori booleene. <script> x=true; y=false; </script> Remarc. Cele dou valori nu sunt plasate ntre ghilimele, ntruct true i false sunt cuvin te cheie (vezi figura 2.5) JavaScript, avnd o semnificaie precis pentru interpretor ul JavaScript. Figura 2.5 Valorile speciale JavaScript n limbajul JavaScript putei ntlni de asemenea i anumite valori speciale pe care vi le semnalm n cele ce urmeaz: Infinity, NaN, null.

Infinity Este o valoare numeric special care se returneaz dac un numr n virgul flotant este su ior valorii maxime autorizate sau este inferior valorii minime autorizate. Infinity poate fi pozitiv sau negativ. Remarc. Folosii proprietile obiectului Number: Number.POSITIVE_INFINITY i Number.NEGA TIVE_INFINITY pentru a testa dac Infinity este pozitiv sau negativ (vezi Conversai a 2 (continuare)). Atunci cnd o expresie aritmetic conine o valoare Infinity, ea returneaz ntotdeauna in finity (vezi figura 2.6). 37 Figura 2.6 NaN NaN (Not a Number, n limba englez) este o valoare special furnizat ca rezultat de cteva operaii aritmetice (vezi figura 2.7). Remarc. NaN semnific: acesta nu este un numr! Figura 2.7 null null este o valoare special care indic absena valorii (figura 2.8). Remarci: null nu este egal nici cu zero i nici cu undefined; Valoarea null se poate simula cu operatorul void: var null=void(0). Figura 2.8 <script> document.write(figura); //afieaz null; </script> undefined undefined este o valoare special nedefinit. Remarci: undefined nu este egal nici cu null nici cu zero. Valoarea undefined este return at n cazul utilizrii unei variabile care nu a fost definit sau n cazul unei variabile care a fost declarat dar fr coninut (figura 2.9). V

aloarea undefined este des confundat cu null de ctre navigatoare. 38 Figura 2.9

Variabile i funcii Variabile JavaScript Spre deosebire de alte limbaje de programare care impun declararea prealabil a va riabilelor, cu specificarea tipului de date pe care acestea le conin (ntregi, real e, caracter etc.) JavaScript procedeaz puin altfel: o variabil este creat prin simpl a afectare (atribuire) a unei valori, din acel moment ea devenind disponibil. Dac suntei obinuit cu declararea prealabil a variabilelor, v va trebui puin timp pentru a v acomoda cu acest mod de lucru rapid i ... cu puin practic vei aprecia cu siguran a st virtute deosebit a limbajului JavaScript.

Tipuri de variabile n limbajul JavaScript nu trebuie s specificai tipul variabilelor. Atunci cnd creai o variabil, valoarea pe care o atribuii determin tipul variabilei (vezi figura 2.10). <script> a=83; //a este o variabil de tip numeric mesaj=Au nnebunit salcmii!; //mesa j este o variabil de tip ir de caractere Figura 2.10 </script> Remarc. O variabil poate s-i schimbe tipul, n mod dinamic, n interiorul aceluiai scrip (vezi figura 2.11). <script> b=nemaipomenit; b=10; Figura 2.11 </script>

39 Numele variabilelor Fiecare variabil are un nume. Regulile dup care se formeaz numele variabilelor sunt urmtoarele: numele variabilelor pot conine toate literele alfabetului (majuscule sau minuscul e), cifre (0 la 9) i caracterul de subliniere (_); numele variabilelor nu trebuie s conin spaii i semne de punctuaie; numele variabilelor sunt sensibile la majuscule i minuscule; primul caracter al numelui unei variabile trebuie s fie o liter sau un caracter de subliniere; nu este o limit teoretic pentru numrul de caractere al nume lui unei variabile dar nu uitai c trebuie s tastai corect de dou ori numele unei vari abile pentru a putea fi utilizat (nu v complicai viaa!) n figura 2.12 se prezint cteva exemple de nume de variabile valide i invalide. Nume valide Nume invalide nr_persoane NumrPersoane a1 b Figura 2.12 Remarci: TURCA <abc a1 b>1a +a13 _var13

n afar de variabilele scalare, care nu reprezint dect o singur entitate mai exist i ma rici (vezi Conversaia 4). n general, variabilele scalare nu sunt declarate, dar n d iferite cazuri ele pot fi declarate ca fiind de un tip particular (boolean, numb er sau string). JavaScript recunoate mai multe tipuri de constante: ntregi (pot fi exprimate n sistem zecimal, octal sau hexazecimal); flotante; iruri de caractere; boolean. Variabile locale i globale

n JavaScript, cuvntul cheie var poate servi la declararea unei variabile. Totui, n f oarte multe cazuri, putei s-l omitei. Variabila va fi n mod automat declarat n momentu l n care i atribuii o valoare. Pentru a ti n care situaie o variabil trebuie s fie de rat trebuie s nelegem mai nti conceptul de portabilitate (scope, n limba englez). Portabilitatea unei variabile (sau funcii) indic dac variabila (sau funcia) definite ntr-o zon a programului sunt accesibile dintr-o alt zon a programului. Exist dou tipuri de variabile:

40 variabile globale variabile locale - sunt definite n exteriorul oricrei funcii Java Script (funciile sunt ntotdeauna globale); - sunt definite n interiorul unei funcii. Utilizai cuvntul cheie var pentru a evita confuzia ntre o variabil local i o variabil global cu acelai nume (omonim). Exemplul din figura 2.13 v va ajuta s nelegei mai bin onceptul de portabilitate (Teoria fr prax ...). Figura 2.13 n figura 2.14 este prezentat rezultatul execuiei script-ului. Figura 2.14

41 Aplicaie Simulai funcionarea acestui script (vezi figura 2.13). Dac i dup acest exerci u, conceptul de portabilitate vi se pare i mai confuz, nu disperai! Vom reveni cu explicaii suplimentare! Cum atribuii valori variabilelor? Dou sunt modurile prin care se atribuie valori variabilelor JavaScript: n mod stat ic n mod dinamic Remarci: Structura instruciunii de atribuire este foarte simpl: variabila din stnga semnului egal (=) ia valoarea indicat n dreapta semnului egal (vezi figura 2.15). - utilizai semnul = pentru a afecta o valoare unei variabile (instruciunea de atribu ire). - utilizai metoda prompt(). <script> pi=3.14159; i=i+1; nume=Droopy; prenume=Ion; Figura 2.15 </script> Instruciunile JavaScript trebuie s se termine cu punct i virgul ... sau nu! Dac dorii s plasai mai mult de o instruciune pe o linie, punct i virgul este obligatoriu dup fie care instruciune (figura 2.16). <script> pi=3.14159; i=i+1; nume=Droopy; prenume=Ion; Figura 2.16 </script> Metoda prompt() (vezi obiectul Window, Conversaia 7) deschide o caset de dialog ca re conine: mesajul indicat (primul argument), o zon de text ce urmeaz a fi completa t de utilizator (al doilea argument), butonul OK i butonul Cancel. Cel de-al doile a argument este facultativ. Dac el este absent, zona de text afieaz implicit undefi ned. Utilizatorul poate s introduc o alt valoare sau s execute clic pe butonul OK pe ntru a accepta rspunsul implicit. Dac utilizatorul execut clic pe butonul OK, valoa rea coninut n zona de text este returnat script-ului; dac execut clic pe butonul Cance l, valoarea null este returnat script-ului. Instruciunea urmtoare: deschide caseta de dialog prezentat n figura 2.17. var raspuns=prompt(Care este numele tatalui?, ); Figura 2.17

42 Conversia tipurilor de date Ori de cte ori este posibil JavaScript convertete n mod automat tipul de date ntlnit. Pentru conversia tipurilor de date, JavaScript propune urmtoarele dou funcii: parseInt() - convertete un ir de caractere ntr-un numr ntreg.

parseFloat() - convertete un ir de caractere ntr-un numr n virgul mobil. Remarc. Cele dou funcii detecteaz numerele la nceputul irului de caractere. Dac nici u ul din numere nu este gsit la nceputul irului de caractere, funciile returneaz valoar ea NaN (Not a Number). Aplicaie Simulai funcionarea urmtorului script (vezi figura 2.18). Figura 2.18

Funcii JavaScript Definii o funcie O funcie este un grup de instruciuni tratate ca o singur entitate. Pentru a utiliza o funcie va trebui mai nti s-o definii. Iat cum definim o funcie (logo()) care afieaz esajul: mi place s fiu ntotdeauna aa cum sunt. 43 n figura 2.19 este prezentat funcia pe care ne-am propus s-o construim. function lo go(){ alert(Imi place sa fiu intotdeauna asa cum sunt.); Figura 2.19 } Funcia este foarte simpl, dar vom analiza rapid fiecare din elementele sale. Primul element e ste cuvntul cheie function (figura 2.20) care indic interpretorului JavaScript c bl ocul de cod care urmeaz trebuie s fie tratat ca pe o funcie i numai dup aceea el este apelat n mod explicit. function logo (){ Figura 2.20 } Al doilea element este numele funciei (figura 2.21), aici logo. Regulile de for mare a numelui funciei sunt identice cu cele ale numelui variabilelor (vezi parag raful Variabile). function logo () { Figura 2.21 } Al treilea element este setul de paranteze (figura 2.22) care conine lista para metrilor funciei (n exemplul nostru, nu este cazul!) function logo( ) { Figura 2.22 } Al patrulea element este acolada de deschidere, care marcheaz debutul corpului funciei (vezi figura 2.22). Al cincilea element, pe linia urmtoare (figura 2.23) e ste metoda alert, care afieaz ntr-o caset de dialog textul indicat n interiorul parantezelor. function logo(){ alert(Imi place sa fiu intotdeauna asa cum sunt.); Figura 2.23 } Ultimul element este acolada de nchidere (figura 2.24), care marche az sfritul funciei. function logo(){ Figura 2.24 } S revenim la paranteze. Exemplul nostru (funcia Ceea ce nu este nemaipomenit!

logo()) face ntotdeauna acelai lucru: ea va afia acelai mesaj ori de cte ori este apelat.

44 Pentru a exploata din plin o funcie, se recomand utilizarea parametrilor, pe care i vom numi argumente. Este vorba de variabile utilizate de ctre funcie ori de cte or i aceasta este apelat. Putei, de exemplu s utilizai un parametru mesaj ce reprezint l ogo-ul pe care dorii s-l afiai. Funcia logo() modificat este prezentat n figura 2.25. nction logo(mesaj){ alert(mesaj); Figura 2.25 } De bun seam, pentru a putea utiliz a o astfel de funcie, va trebui s-o includei ntr-un document (X)HTML. n general, cea mai bun zon pentru definirea unei funcii este antet-ul <head> al documentului. Deoarece instruciunile antet-ului sunt executate primele, vei avea certitudinea c f uncia este definit nainte de a fi utilizat. n figura 2.26 este prezentat documentul ( X)HTML incomplet n care s-a inclus, n seciunea <head> modificat. </head> script-ul ce conine funcia logo() Figura 2.26 Apelai funcia n acest moment funcia (logo(mesaj)) este definit i inserat ntr-un document (X)HTML.

45 Dac afiai documentul (X)HTML (vezi figura 2.26) ntr-un browser, nu se ntmpl absolut ni ic. Funcia este pregtit, dar inutilizabil! Pentru a putea utiliza o funcie va trebui s-o apelai. Pentru a apela o funcie, va trebui s utilizai numele su ntr-o instruciune script-ului i s includei parantezele i parametrii. n figura 2.27 este prezentat docu mentul (X)HTML complet, cu definiia funciei i apelul funciei n corpul documentului (X )HTML. Figura 2.27

Pentru a nelege mai bine cum lucreaz funcia logo(mesaj), apelai funcia de dou ori, p ru a afia dou logo-uri diferite (vezi figura 2.27). Remarci: Documentul XHTML (vezi figura 2.27) conine al doilea set de tag-uri <scr ipt> inserat n corpul paginii. n cel de-al doilea script vei gsi dou apeluri ale funci ei logo(), fiecare cu un mesaj diferit (vezi figura 2.28). Figura 2.28 n figura 2.29 se prezint rezultatul execuiei funciei logo(). Pentru a afia cel de-al doilea logo executai clic pe butonul OK. 46 Figura 2.29 Figura 2.29 (continuare) Returnarea unei valori

Funcia (logo()) pe care am creat-o n aplicaia precedent afieaz un mesaj. O funcie poat , de asemenea returna o valoare script-ului apelant. Iat cum procedm pentru a defi ni i apela o funcie care calculeaz media aritmetic a trei valori. n figura 2.30 este prezentat funcia pe care ne-am propus s-o construim. function media(a,b,c){ rezult at=(a+b+c)/3.0; return rezultat; Figura 2.30 } Remarci: Funcia ncepe cu function cuvnt rezervat, urmat de numele funciei media i de trei parametrii a, b, c pentru cele trei valori (numerice). Acolada de deschider e a fost plasat la sfritul primei linii, dar putei foarte bine s o izolai pe o singur inie, sau s o plasai la nceputul liniei urmtoare. Variabila (local) rezultat stocheaz media aritmetic a celor 3 valori numerice. Pentru a returna rezultatul (rezultat) script-ului, utilizm cuvntul rezervat return (vezi figura 2.31). ... Figura 2.31 return rezultat; } 47 n figura 2.32 se prezint documentul complet (X)HTML. Acest document conine de aseme nea, n seciunea <body> un mic script care apeleaz funcia media() i afieaz rezultatul. Figura 2.32 Remarci: Pentru apelul funciei putei folosi o variabil de stare (mediaaritmetic, n exemplul no stru). Putei plasa apelul unei funcii ntr-o expresie. n paralel cu variabilele i valo rile constantelor, putei utiliza apelul funciilor care returneaz rezultatele n inter iorul unei expresii (vezi figura 2.33). ... Figura 2.33 alert(media(7,8,9)); ... Crearea automat a script-urilor cu Macromedia DREAMWEAVER Dup cum am precizat n Conversaia 1 (vezi paragraful: Oferta de editoare JavaScript) , Macromedia Dreamweaver MX poate fi folosit i ca editor JavaScript. Funciile sale specifice, modul simplu de utilizare l recomand ca pe un excelent instrument de e ditare a script-urilor. n figura 2.34 sunt prezentate cele mai utilizate funcii Ja vaScript puse la dispoziie de Dreamweaver. 48 Figura 2.34 Iat cum procedm pentru a crea un script care calculeaz aria unei sfere (Area of Sphere). 1. n grupul de panouri Insert, executai clic pe subpanoul HTML (figura 2.35). Figura 2.35

2. Executai clic n locul n care dorii s inserai script-ul. 3. Executai clic pe butonul Figura 2.36 Remarc. Se deschide caseta de dialog Script (figura 2.37). (Script), figura 2.36.

49 Figura 2.37 4. Executai clic pe butonul OK al ferestrei de dialog Script (figura 2.38). Figura 2.38 Remarc. Se insereaz elementul <script> ... </script> (figura 2.39). 50 Figura 2.39 5. ntre tag-urile <script> i </script> inserai funcia areaOfSphere (figura 2.40, figura 2.41). Figura 2.40 51 Figura 2.41 6. Apelai funcia areaOfSphere (radius), pentru radius=3 (figura 2.42), n corpul doc umentului. Figura 2.42 7. Vizualizai pagina Web ntr-un browser (figura 2.43). 52 Figura 2.43 Remarc. Pentru afiarea rezultatului cu dou zecimale consultai Conversaia 8.

EXEMPLUL 2 JAVASCRIPT De la problem la script Prima etap pe care trebuie s-o parcurgei n lungul drum al problemei ctre script o co nstituie definirea obiectivului script-ului. n consecin, luai o foaie de hrtie i pre d cteva minute adunai cuvintele ... potrivite pentru a descrie pe scurt modul de re zolvare informatic a problemei. Altfel spus, redactai cu cuvinte obinuite acest mic caiet de sarcini. Succes! Iat cum formulm pe scurt problema pe care dorim s o rezolvm cu JavaScript: creai o pagin Web care s afieze aria unui rezervor sferic cu raza de 3m. Ce problem simpl, vei exclama! ntr-adevr, problema nu este dificil, dar trebuie s recunoatem c ceea ce pare simplu pentru unii este foarte complicat pentru alii. Des

igur, ea poate fi rezolvat foarte bine i de ctre un elev de coal elementar sau chiar d e un adult (prinii elevului!). Obiectivul nostru, ns este rezolvarea informatic a pro blemei utiliznd limbajul JavaScript. Remarci: Procesul de alctuire a unui script, pe care il vom urma pe tot parcursul lucrrii, const din urmtoarele faze: analiza problemei; proiectarea programului (sc ript-ului); codificarea n limbajul JavaScript; testare i depanare. n cadrul fazei d e analiz se definesc: formatul datelor de ieire; tabela de variabile; specificaiile de programare (descriere script, intrri, ieiri, list funciuni). Asigurndu-ne c nu s-a u strecurat greeli n faza de analiz a problemei, putem aborda n continuare faza de p roiectare a script-ului, utiliznd ca instrumente de proiectare: pseudocodul, diag rama de structur a prelucrrilor etc. Pseudocodul este un limbaj independent de lim bajul de programare (nu exist un standard!). Limbajul pseudocod pe care vi-l prop unem este alctuit din cteva instruciuni standard ce definesc structurile algoritmic e fundamentale (secvena, iteraia, selecia) la care se adaug instruciuni, n bun parte a late la latitudinea celui care realizeaz documentaia de analiz i proiectare a progra mului.

53 Analiza problemei nainte de a scrie un program (JavaScript) trebuie s cunoatem i s nelegem foarte bine p oblema (Analiza problemei). n cazul nostru, problema este una dintre cele mai sim ple: calculul ariei unui rezervor sferic atunci cnd se cunoate raza. n rezolvarea a cestei probleme se urmrete crearea unei pagini Web, n care s se afieze simplu, ntr-o f orm deloc pretenioas, cele dou valori pentru raz (3) i arie (vezi figura 2.44). Figura 2.44 Remarc. Ecranul din figura 2.44 reprezint formatul datelor de ieire. V mai amintii cum se calculeaz aria unei sfere, cci despre ea este vorba. Se nmulesc: patru cu trei i paisprezece ( ) i cu ptratul razei. Cam dificil aceast exprimare, nu vi se pare? S alegem pentru arie i raz cte un nume de variabil semnificativ, urmnd apoi s codificm n JavaScript formula de calcul prezentat (A=4 R2). Tabela de variabile n figura 2.45 sunt prezentate: variabilele de ieire, variabilele de intrare i varia bilele de stare, structurate ntr-o tabel de variabile, document care se realizeaz n faza de analiz structurat a problemei. Tabela de variabile Variabile de intrare Figura 2.45 Variabile de stare r: raza cercului Variabile de iesire aria: aria rezervorului sferic Remarc. n situaia n care variabilele de ieire i variabilele de intrare nu sunt suficie nte, definii un al treilea tip de variabil: variabile de stare, care nu sunt nici de intrare i nici de ieire. Descrierea script-ului JavaScript, precum i lista principalelor funciuni sunt prez entate n figura 2.46. 54 Specificaii de programare Descrierea programului Script-ul calculeaz i afieaz aria un ui rezervor sferic cu raza de 3 m. Intrri: Ieiri: Aria rezervorului sferic cu raza de 3 m. Lista de funciuni ale script-ului 1. 2. 3. Figura 2.46 4. Atribuie varia bilei r (de stare) valoarea 3. Calculeaz aria rezervorului sferic. Afieaz raza i ari a rezervorului sferic (aria). Stop. Asigurndu-ne c nu s-au strecurat greeli n faza de analiz a problemei, putem aborda n c ontinuare faza de proiectare a script-ului.

Proiectarea script-ului Pentru proiectarea script-ului vom folosi ca instrument de proiectare, pseudocodul, cu una din variantele prezentate mai jos: Varianta 1 scrierea n limbaj natural structurat; Varianta 2 scriere formalizat (apropiat de l imbajul JavaScript). Iat cum procedm pentru a construi pseudocodul n ambele variant e. Varianta 1 n figura 2.47 se prezint pseudocodul n limbaj natural structurat. Pse udocodul (Varianta 1) 1. Atribuii razei (r) valoarea 3. 2. Calculai aria (aria) re zervorului sferic. 3. Afiai raza (r) 4. Afiai rezultatul (aria). Figura 2.47 5. Stop. Remarc. Prezentarea algoritmului n limbaj natural structurat are, dup cum ai putut constata i unele dezavantaje: lizibilitate redus, exprimri lungi, greoaie e tc.

Varianta 2 Varianta prezentrii algoritmului de o manier formalizat este de preferat celei narative (Varianta 1). Se prefer o formalizare a aciunilor primitive (atrib uie, calculeaz, afieaz) care s pun n eviden att variabilele de intrare/ieire ct i e de stare.

55 n consecin, s-o folosim ct este cu putin pe aceasta. n figura 2.48 se prezint pseudoc l n manier formalizat. Pseudocodul (Varianta 2) REZERVOR BEGIN r=3 2 aria=4 r WRITE(r) WRITE(aria) END Figura 2.48 REZERVOR Cuvintele rezervate JavaScri t Anumite cuvinte nu ot fi utilizate ca nume de variabile, funcii, obiecte i metode . n figura 2.49 se prezint lista cuvintelor rezervate. break continue delete with default do double extends final long goto Figura 2.49 enum in for function else implements import instanceof int interface class package de bugger false new null return private protected public short static float super volatile this true var if throw throws translent try char native export void while typeof abstract boolean byte case catch finally switch synchronized const 56 JavaScript Testai-v cunotinele Tem 1. Identificai erorile de sintax din urmtoarele script-uri: Figura 11.1 (Conversaia 11); Figura 11.2 (Conversaia 11); Figura 11.3 (Conversaia 11). 2. Care sunt valori le speciale JavaScript? 3. Ce tip de date putei atribui unei variabile JavaScript ? 4. Care este deosebirea dintre o variabil local i o variabil global? 5. Ce execut pr ima dat un navigator? un script din antet-ul paginii; un script din corpul pagini i; un gestionar de evenimente plasat n tag-ul <body>. 6. O funcie JavaScript: acce pt parametrii; returneaz o valoare; ambele variante. 7. Care sunt cele dou constant e booleene? 8. Cum definii o funcie JavaScript? 9. Cum atribuii valori variabilelor ? 10.Ce realizeaz funcia parseInt()? 11.Care este semnificaia cuvntului rezervat ret urn?

Vizitai site-urile www.glscript.com www.toutJavascript.com www.javanett.com www.webcoder.com www.sc ript-masters.com www.javascript.internet.com 57 www.javascripts.com www.bratta.com www.javascript.com Conversaia 2 (continuare) Operatorii JavaScript. Obiecte matematice n aceast conversaie: Operatorii JavaScript Asociativitatea i prioritatea operatorilor Obiectul Math Ob iectul Number Obiectul Boolean EXEMPLUL 2 JAVASCRIPT (continuare) Tem Operatorii JavaScript Pentru a crea programe utile JavaScript, trebuie s evaluai sau chiar s modificai dat ele pe care le prelucreaz script-urile dumneavoastr. Instrumentele necesare pentru realizarea acestor operaii se numesc operatori. Operatorii [1] sunt simbolurile i identificatorii care reprezint fie felul n care sunt modificate datele, fie felul n care este evaluat o combinaie de expresii. JavaScript recunoate att operatorii bin ari (necesit existena a doi operanzi n expresie) ct i operatorii unari (necesit existe na unui singur operand n expresie). Cei mai muli dintre operatorii JavaScript sunt recunoscui de ctre toate navigatoarele, dar ... mai exist i divergene! 58 n continuare, vom proceda la o clasificare a operatorilor din limbajul JavaScript urmnd ca apoi s-i examinm pe fiecare n parte (vezi figura 2.50). Tipuri de operatori aritmetici atribuire plus combinaii (ntre operatorul de atribuire i operatorii arit metici) relaionali (de comparaie) booleeni (logici) operatori pentru funcii operato ri pentru structuri de date operatori condiionali operatori pentru iruri operatoru l operatorul operatorul Figura 2.50 operatorul

Operatorii JavaScript % (modulo); ++ (increment); (decrement); + (adunare); (scdere); * (nmulire); / (mp ) = (atribuire simpl); += (atribuire cu adunare); = (atribuire cu scdere); *= (atri buire cu nmulire); /= (atribuire cu mprire); %= (atribuire cu modulo) < (mai mic); > (mai mare); <= (mai mic sau egal); >= (mai mare sau egal); == (egalitate); === ( identitate); != (non egal); !== (non identic) && (AND); || (OR); ^ (SAU EXCLUSIV ); ! (NOT) (); , (virgula) . (punctul); [] ?: toi operatorii relaionali (de compar aie) i operatorul de concatenare (+) typeof delete new void Operatorii JavaScript sunt prezentai n detaliu n figura 2.51. Operator Sintax + operand1 + operand2 Adunare sau concatenare. 1. Tip de date: numeric. Operator aritmetic. Remarc. Dac unul din operatori este NaN, rezultatul este NaN.

2. Tip de date: alfanumeric (ir de caractere). Operator de concatenare. Remarc. Operatorul + servete n general pentru efectuarea convertirii tuturor tipuri lor de date n iruri de caractere. Exemplu: Figura 2.51 <script> a=8; b=7; z=3+8; c=a+b; alert(z); // afieaz 11 alert(c); // afieaz 15 </scr ipt>

<script> prenume=Vasile; nume=Adam; numecomplet=Domnul + prenume+ +nume; alert(numeco et); // afieaz Domnul Vasile Adam </script> 59 += operand1 += operand2 Adunare sau concatenare asociat unei atribuiri. 1. Tip de date: numeric. Operator aritmetic i de atribuire. Remarc. Echivalent cu: operand1= operand1 + operand2. 2. Tip de date: alfanumeric. Operator de concatenare i de atribuire. Remarc. Coninutul variabilei situate la stnga operatorului este completat cu data a lfanumeric din dreapta operatorului. Exemplu: <script> a=3; a+=6; alert(a); //afieaz 9 </script> ++ Incrementare. 1. Tipul de date: numeric. Operator aritmetic. <script> numecomplet=Dumitrescu; nume=Vasile; numecomplet+=nume; alert(numecomplet); // afieaz Dumitrescu Vasile </script> ++ operand operand++ Remarci: Pre-incrementare (++ operand): valoarea variabilei este mrit cu 1, apoi e ste utilizat. Post-incrementare (operand ++): valoarea variabilei este utilizat ap oi este mrit cu 1. Este imposibil de a combina post-incrementarea cu pre-increment area. Acest operator se aplic numai variabilelor. Este foarte des utilizat n bucle . Este echivalent cu: operand1= operand1 + operand2. ++x++ returneaz un mesaj de eroare. x++ este echivalent cu: x=x+1. Exemplu: <script> //post-incrementare a=5; alert(a++); // afieaz 5 alert(a); //afieaz 6 </scr ipt> Scdere sau negare. 1. Tipul de date: numeric. Operator aritmetic. <script> //pre-incrementare a=5; alert(++a); // afieaz 6 alert(a); //afieaz 6 </scri pt> <script> //post-incrementare ntro bucl for(i=0;i<5; i++){ document.write(i); // af ieaz 0 1 2 3 4 } </script> operand1 operand2 Figura 2.51 (continuare) 2. Operator de negare. Convertete o valoare pozitiv ntr-o valoare negativ.

60 Exemplu: <script> a=20; b=13; c=a-b; d=8-2; alert(d); // afieaz 6 alert(c); // afieaz 7 </scr ipt> = Tipul de date: numeric. Operator aritmetic i de afectare. <script> a=-7; a=-a; alert(a); // afieaz 7 </script> operand1 = operand2 Remarc. Este echivalent cu: operand 1= operand 1 operand 2. Exemplu: <script> a=4; a-=6; alert(a); // afieaz -2 </script> Decrementare. 1. Tipul de date: numeric. Operator aritmetic. Remarci: Pre-decrementare (-- operand): valoarea variabilei este diminuat cu 1 i a poi este evaluat. Post-decrementare (operand --): valoarea variabilei este evalua t apoi este diminuat cu 1. Acest operator se aplic numai variabilelor. Este des uti lizat n bucle. Este echivalent cu: operand1= operand1 1. x este echivalent cu x=x1. operand operand Exemplu: <script> //post-decrementare a=5; alert(a--);//afieaz 5 alert(a);// afieaz 4 </scrip t> * nmulire. <script> //pre-decrementare a=5; alert(--a); //afieaz 4 alert(a)// afieaz 4 </script > <script> //post-decrementare n bucla for for(a=7;a<=1; a--){ document.write(a); / / afieaz 6 5 4 3 2 1 </script> operand1 * operand2 1. Tipul de date: numeric. Operator aritmetic. Exemplu: Figura 2.51 (continuare) <script> a=7; b=8; c=3*6; d=a*b; alert(c); // afieaz 18 alert(d); // afieaz 56 </scr ipt> 61 *= nmulire i atribuire. 1. Tipul de date: numeric. Operator aritmetic i de atribuire. Remarc. Este echivalent cu: operand1= operand1 * operand2. operand1 *= operand2 Exemplu:

<script> a=2; a*=5; alert(a); // afieaz 10 </script> / mprire. 1. Tipul de date: numeric. Operator aritmetic. Remarci: Dac unul din operanzi este NaN, rezultatul este NaN. mprirea 0/0 d NaN. mpri

0/valoare_finit d 0. operand1 / operand2 Exemplu: <script> a=12; b=3; c=5/2; d=a/b; alert(c); // afieaz 2.5 alert(d); // afieaz 4 </sc ript> /= mprire i atribuire. 1. Tipul de date: numeric. Operator aritmetic i de atribuire. Remarc. Este echivalent cu: operand1= operand1 / operand2. operand1 /= operand2 Exemplu: <script> a=5; a/=2; alert(a); // afieaz 2.5 </script> % Modulo. 1. Tipul de date: numeric. Operator aritmetic. echivalent cu <script> a=5; a=a/2; alert(a); // afieaz 2.5 </script> operand1 % operand2 Exemplu:

Remarc. Calculeaz restul ntreg al mpririi ntregi a primului numr prin cel de-al doile umr. Figura 2.51 (continuare) <script> a=18; a=a%5; alert(a); // afieaz 3 </script> 62 %= Modulo i afectare. 1. Tipul de date: numeric. Operator aritmetic i de afectare. Remarc. Este echivalent cu: operand1= operand1 % operand2. operand1 %= operand2 Exemplu: <script> a=18; a%=5; alert(a);// afieaz 3 </script> = Atribuire. echivalent cu <script> a=18; a=a%5; alert(a); // afieaz 3 </script> Variabila = Valoare 1. Tipul de date: numeric, alfanumeric i logic. Remarc. A nu se confunda cu operatorul ==. Exemplu: <script> a=20; nume=Droopy; b=a+3; //b are valoarea 23 </script> < Strict mai mic.

<script> //atribuire multipl var a=b=c=13; // cele trei variabile vor avea aceeai valoare: 13 </script> operand1 < operand2 1. Tipul de date: numeric, alfanumeric i logic. Operator relaional (de comparare). Remarci: Se returneaz TRUE, dac rezultatul evalurii condiiei este adevrat. Se returne az undefined dac una din valorile care se compar este NaN. n cazul comparrii valorilo r alfanumerice se ia n considerare codul ISO. <= Mai mic sau egal. operand1 <= operand2 1. Tipul de date: numeric, alfanumeric i logic. Operator relaional (de comparare). Remarci: Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 <= operand2) e ste adevrat. Se returneaz undefined dac una din valorile care se compar este NaN. n c azul comparrii valorilor alfanumerice se ia n considerare codul ISO. Exemplu: Figura 2.51 (continuare) <script> a=6; b=6; document.write(a<=b); //afieaz true nume1= MARK; nume2=SPENCER; doc ument.write(<br />+nume1<=nume2); // afieaz true </script> 63 > Strict mai mare. 1. Tipul de date: numeric, alfanumeric i logic. Operator relaiona l (de comparare). Remarci: Se returneaz TRUE dac rezultatul evalurii condiiei (operand1>operand2) este adevrat. Se returneaz undefined dac una din valorile care se compar este NaN. n cazu l comparrii valorilor alfanumerice se ia n considerare codul ISO. operand1 > operand2 Exemplu: <script> a=6; b=6; document.write(a>b); //afieaz false nume1= MICIURIN; nume2=POLEVOI; document.write(<br />+nume1>nume2); // afieaz false; </script> >= operand1 >= opera nd2 Mai mare sau egal. 1. Tipul de date: numeric, alfanumeric i logic. Operator relaio nal (de comparare). Remarci: Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 >= operand2) e ste adevrat. Se returneaz undefined dac una din valorile care se compar este NaN. n c azul comparrii valorilor alfanumerice se ia n considerare codul ISO. Exemplu:

<script> a=7; document.write(a>=7); //afieaz true nume1= M1; nume2=P1; document.write( br />+nume1>=nume2); // afieaz false </script> == operand1 == operand2 Egal cu. 1. Tipul de date: numeric, alfanumeric i logic. Operator relaional (de co mparare). Remarci: Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 este egal cu o perand2) este adevrat. Se returneaz undefined dac una din valorile care se compar es te NaN. n cazul comparrii valorilor alfanumerice se ia n considerare codul ISO. Com pararea unei valori numerice (de exemplu, 7) cu o aceeai valoare alfanumeric (de e xemplu, 7) returneaz TRUE.

Exemplu: Figura 2.51 (continuare)

<script> a=6; b=7; nume=MIRCEA; document.write(nume==a); // afieaz false; document.w rite(<br />); document.write(a==6); // afieaz true; document.write(<br />); document. te(a==b); // afieaz false; </script> === operand1 === operand2 64 Identic cu. 1. Tipul de date: numeric, alfanumeric i logic. Operator relaional (de comparare): egalitate de valori i de tip de date. Remarc. Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 este egal cu ope rand2 i de acelai tip de date) este adevrat. Exemplu: <script> a=7; b=7; nume1=MAXITAXI; document.write(nume1==a); // afieaz false; document .write(<br />+(a===b)); // afieaz false document.write(<br />+(nume1===maxitaxi); // az false; document.write(<br />+(nume1===MAXITAXI)); // afieaz true; </script> != Diferit de. 1. Tipul de date: numeric, alfanumeric i logic. Operator relaional (de comparare): non-egalitate de valori. Remarc. Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 este diferit de operand2) este adevrat. operand1 != operand2 Exemplu:

<script> a=7; b=7; c=8; nume1=Maxim; document.write(nume1!=a); // afieaz true; documen t.write(<br />); document.write(a!=b); // afieaz false; document.write(<br />); docume nt.write(nume1!=maxim); // afieaz true; document.write(<br />+(nume1!=Maxim)); // afi alse document.write(<br />+(c!=a)); // afieaz true </script> !== Non identic cu. 1. Tipul de date: numeric, alfanumeric i logic. Operator relaional (de comparare): non-egalitate de valoare i de tip de date. Remarc. Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 nu este egal i ni ci de acelai tip cu operand2) este adevrat. operand1 !== operand2 Exemplu: Figura 2.51 (continuare)

<script> a=7; b=7; nume1=Maxim; document.write(nume1!==a); // afieaz true; document.wr ite(<br />); document.write(a!==b); // afieaz true; document.write(<br />); document.w rite(nume1!==maxim); // afieaz true; document.write(<br />+(nume1!==Maxim)); // afie se </script> 65 && I. Remarci: Operator logic I (AND). Returneaz TRUE dac cele dou expresii returneaz valoa rea TRUE. Acest operator este foarte des utilizat n bucle (for, while) i n teste (i f ... else).

operand1 && operand2 Exemplu: Exemplu: <script> a=4; b=6; nume1=Maxim; document.write((a>2)&&(b==6)); // afieaz true; docum ent.write(<br />); document.write((a>2)&&(b==nume1)); // afieaz false; </script> <sc ript> a=4;b=6;nume1=Maxim; if((a>2)&&(b==6)){ document.write(a este mai mare ca 2); document.write( i b este egal cu 6); } </script> || SAU (OR). Remarci: Operator logic SAU (OR). Returneaz TRUE dac una din cele dou expresii retu rneaz valoarea TRUE. Acest operator este foarte des utilizat n bucle (for, while) i teste (if ... else). operand1 || operand2 Exemplu: Exemplu: <script> a=4; b=6; nume1=Maxim; document.write((a>2)||(b==6)); // afieaz true docume nt.write(<br />); document.write((a>2)||(b==nume1)); // afieaz false </script> <scri pt> a=4;b=6;nume1=Maxim; if((a>2)||(b==6)){ document.write(a este mai mare ca 2); do cument.write( sau b este egal cu 6); } </script> , (virgul) Operator care permite mai multor instruciuni de a fi executate ca i cnd ar fi o sin gur instruciune. Remarci: Valoarea returnat este cea care aparine ultimei instruciuni. Acest operato r este utilizat de asemenea pentru transferarea mai multor parametrii unei funcii . Figura 2.51 (continuare) Exemplu: <script>

66 var a,b,c,d; a=(b=5,c=6,d=7); document.write(a=+a); // afieaz a=7; document.write(<br />); document.write(b=+b); // afieaz b=5; document.write(<br />); document.write(c= // afieaz c=6; document.write(<br />); document.write(d=+d); // afieaz d=7; </script> Condiie. 1. Tipul de date: numeric, alfanumeric i logic. Operator de test (condiie) . Remarci: Este utilizat pentru a crea un test rapid sub forma: expresielogic ? DacD a: DacNu. Expresielogic este o expresie care returneaz TRUE sau FALSE. DacDa: instru ciune care va fi executat dac rezultatul evalurii expresielogic este TRUE. DacNu: inst ruciune care va fi executat dac rezultatul evalurii expresielogic este FALSE. condiie1 ? cod1:cod2 Exemplu: <script> a=2; (a>10)?alert(adevarat):alert(false); </script> echivalent cu <script> a=2; if(a>10) alert(adevarat); else alert(false); </script> delete

tergere. delete obiect delete obiect.Proprietate delete Array[Index] 1. Tipul de date: obiect. Operator de tergere a proprietii obiectului. Remarci: terge o proprietate a unui obiect creat cu new. terge un element al unei matrici (Array) indicnd numrul su de ordine (primul element este de rang zero). Exemplu: Figura 2.51 (continuare) Exemplu: <script> //tergerea unui element al unei matrici var v=new Array(1,2,3,7); docume nt.write(v); //afieaz 1,2,3,7 delete v[2]; //este ters al 3-lea element document.wr ite(v); //afieaz 1,2,7 </script> <script> //tergerea unei proprieti a unui obiect <script> azi=new Date(); //tergerea unui obiect x=delete azi; // x ia valoarea tr ue i azi este undefined </script> 67 a=new Number(); a.valoare=13; x=delete a.valoare; //x ia valoarea true i a.valoar e este nedefinit </script> new obiect= new Constructor Nou. 1. Tipul de date: obiect. Operator de creare a unui nou obiect. Remarci: Creeaz o nou instan a unui obiect cu ajutorul unui constructor. new este ut ilizat pentru crearea instanelor urmtoarelor obiecte: Array; Boolean; Date; Function, Number; Object; RegExp; String. Exemplu: <script> //crearea obiectului astzi var astazi=new Date(); //crearea obiectului m atrice var matrice=new Array(); //crearea obiectului Object var obiect=new Objec t(); obiect.prenume=stejrel </script> . (punct) obiect.Proprietate obiect.Metoda obiect.Eveniment Punctul (.) este uti lizat pentru a putea accesa proprieti, metode sau evenimente ale unui obiect. 1. T ipul de date: obiect. Operator de acces. Exemplu: <script> //acces la metoda write() a obiectului document document.write(Au nnebuni t salcmii!); </script> typeof typeof(operand) typeof operand Tipul de date. Remarci: Returneaz sub form de ir de caractere tipul de date al obiectului sau al v ariabilei indicate. n tabelul 1 se prezint pe dou coloane: tipul de dat i irul de cara ctere returnat de Typeof. Figura 2.51 (continuare) ______________________________________________________________ _________________ _______________________________________________ ________________________________ ________________________________ _______________________________________________ _________________ Tabelul 1 68 Tabelul 1

Tipul de dat logic numr infinit ir de caractere obiect funcie nedefinit null Exemplu: irul de caractere returnat de typeof boolean number number string object function undefined object <script> a=7; nume=salcam; document.write(typeof a); //afieaz number document.write(< br />+typeof(nume)); // afieaz string </script> void void Expresie void(Expresie) Nedefinit. Evalueaz o expresie i returneaz ca rezultat undefined. Exemplu: <body> <a href=JavaScript: void(alert(Au innebunit salcamii!))> Iar au innebunit sal camii</a> </body> ( ) Function(Argumente) Utilizat pentru invocarea metodei unui obiect sau parametrii unei funcii. 1. Tipu l de date: obiect. Operator de invocare. Exemplu: <script> /*Argumentul Bine ati venit! este transmis metodei write() a obiectului D ocument*/ document.write(Bine ati venit!); /*argumentele 8,10 sunt transmise funct iei media() media(8,10); </script> [] matrice[] obiect[Proprietate] Utilizat pentru accesarea unei proprieti a unui obiect sau a unui element al unei matrici. 1. Tipul de date: obiect. Operator de matrice. Exemplu: Figura 2.51 (continuare) <script> //acces la elementele unei matrici var matrice=[7,5,3,1]; document.writ e(matrice[0]); document.write(<br />); //afieaz 7 document.write(matrice[2]); docume nt.write(<br />); //afieaz 3 </script> 69 ! invers. Exemplu: !Operand Operator logic (NOT). Returneaz TRUE dac data este FALSE i <script> a=true; alert(!a); //afieaz FALSE <script> <script> a=5;b=6; alert(!(a>b) ); //afieaz TRUE </script> ^ operand1 ^ operand2 Operator logic SAU exclusiv. Returneaz TRUE dac una i numai una din expresii return eaz TRUE. Exemplu: Exemplu: Figura 2.51 (continuare) <script> a=4; b=6; if((a>2)^(b==6)){ document.write(sau a>2 sau b=6); } </script> Asociativitatea i prioritatea operatorilor

Asociativitatea indic sensul ( sau ) n care expresia care conine operatorul este evaluat.

Prioritatea (precedena) indic ordinea n care expresiile sunt evaluate. n figura 2.52 ([2]) sunt prezentai toi operatorii JavaScript cu precizarea asociati vitii i prioritii acestora. Rang de prioritate 1 2 3 4 5 Figura 2.52 6 . [] () ++ acces la proprieti acces la matrici (ar rupare sau funcie incrementare decrementare negare aritmetic Operatori Asociativitate Semnificaie 70 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Figura 2.52 (continuare) 26 Remarci: Expresiile sunt evaluate n funcie de prioritatea operatorilor. Parantezel e au o prioritate foarte ridicat. Expresiile din paranteze sunt evaluate primele. Dac exist mai multe nivele de paranteze, expresiile sunt evaluate ncepnd cu parante zele aflate cel mai n interior. Asociativitatea joac un rol, de exemplu, n cazul co mbinrii unei adunri i unei concatenri (vezi figura 2.53). ! delete new typeof void */% + + < <= > >= == != === !== && || ?: = *= , /= +== %=

NOT logic tergerea unei proprieti sau a valorii unei matrici crearea unui obiect de terminarea tipului de date evaluarea fr returnarea valorii nmulire, mprire, modulo adu are, scdere concatenare mai mic, mai mic sau egal mai mare, mai mare sau egal ega l diferit identic (egalitate de valori i de tip) non-identic I SAU condiie afectare (atribuire/asignare) afectare cu calcul evaluare multipl <script> document.write((7+9+abc)); //afieaz 16abc document.write(<br />); document.wr ite((abc+7+9)); //afieaz abc79 document.write(<br />)); Figura 2.53 </script> Obiecte matematice

71 Cu siguran c vei avea nevoie n programele dumneavoastr de formule matematice care s nu foloseasc doar simple adunri i nmuliri. n acest caz, obiectele matematice: Math, Numbe r, Boolean v pot fi de un real folos. Ele v permit s accesai constante ( , true, fal se) i s executai diferite funcii matematice (sqrt(); exp() etc.). Math este un obiect predefinit al limbajului JavaScript care conine numeroase constante (PI, E, LN10, LN2, SQRT2 etc.) i funcii (abs(); floor(); pow(); sqrt() e tc.). Nu este nevoie s creai obiectul Math: el se creeaz n mod automat de ctre naviga tor (exist n toate programele JavaScript). Proprietile obiectului Math sunt constant e matematice iar metodele sale sunt funcii matematice. Number, cel de-al doilea obiect matematic, este un obiect predefinit al limbajul ui JavaScript pe care l vei gsi util atunci cnd trebuie s accesai anumite constante: cel mai mare i cel mai mic numr care poate fi reprezentat; plus i minus infinit; NaN (N ot a Number). JavaScript reprezint aceste valori ca proprieti ale obiectului Number . Pentru a crea un nou obiect Number, utilizai funcia special numit constructor, Num ber() i cuvntul cheie new (figura 2.54). <script> var numar_clienti=1234; //declar are implicita var numar_clienti=new Number(1234); //declarare explicita Figura 2

.54 </script> Boolean este un alt obiect predefinit al limbajului JavaScript pe care l vei gsi util atunci cnd dorii s transformai o valoare non-boolean ntr-o valoare boolean (true au false). Pentru a crea un nou obiect Boolean utilizai constructorul Boolean() i cuvntul cheie new. Obiectul Math 72 Fia obiectului Math este prezentat n figura 2.55. Fia obiectului Cum crem obiectul? Proprieti: Metode: Math Se creeaz automat de ctre navigator. E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2, SQR T2 abs(), acos(), asin(), atan(), ceil(), cos(), exp(), floor(), log(), max(), m in(), pow(), random(), round(), sin(), sqrt(), tan() Figura 2.55 Gestionarii de evenimente: Proprietile obiectului Math Proprietile obiectului Math sunt prezentate n detaliu n figura 2.56. Proprietate Sintaxa E Constanta lui Euler. Exemplu: Math.E <script> document.write(Math.E); //afieaz 2.71821828459045 </script> LN10 Logaritm natural de 10. Math.LN10 Exemplu: <script> document.write(Math.LN10); //afieaz 2.30258509294046 </script> LN2 Logaritm natural de 2. Math.LN2 Exemplu: <script> document.write(Math.LN2); //afieaz 0.6931471805599453 </script> LOG10E Ma th.LOG10E Logaritm n baz 10 din e. Figura 2.56 Exemplu: <script> document.write(Math.LOG10E); //afieaz 0.4342944819032518 </script> LOG2E Math.LOG2E

73 Logaritm n baza 2 din e. Exemplu: <script> document.write(Math.LOG2E); //afieaz 1.4426950408889633 </script> PI Math .PI Constanta PI. Exemplu: <script> document.write(Math.PI); //afieaz 3.141592653589793 </script> SQRT1_2 Mat h.SQRT1_2 1/ 2 . Exemplu: <script> document.write(Math.SQRT1_2); //afieaz 0.7071067811865476 </script> SQRT2 Math.SQRT2 2. Exemplu: Figura 2.56 (continuare) <script> document.write(Math.SQRT2); //afieaz 1.4142135623730951 </script> Metodele obiectului Math Metodele cele mai frecvent folosite ale obiectului Math sunt prezentate n detaliu n figura 2.57. Metod Sintax abs() Valoare absolut. Math.abs(ValoareNumeric) Remarc. n Tabelul 2 se prezint rezultatele funciei abs() pentru cteva argumente speci ale. Tabelul 2 Argument Rezultat 0 NaN +Infinity Figura 2.57 Exemplu: abs(0) abs(NaN) abs(-Infinity) <script> a=-57; b=85; rez1=Math.abs(a); rez2=Math.abs(b); document.write(abs(+a+)=+r ez1); //afieaz abs(-57)=57

74 document.write(<br />); document.write(abs(+b+)=+rez2); //afieaz abs(85)=85 </script> os() Math.acos(ValoareNumeric) Arc cosinus. Remarc. Pentru valori ale argumentului: >1; < 1; NaN rezultatul este NaN.

Exemplu: <script> a=0.9965; rezultat=Math.acos(a); document.write(acos(+a+)=+rezultat); </scr ipt> asin() Math.asin(ValoareNumeric) Arc sinus. Remarc. n Tabelul 3 se prezint rezultatele funciei asin() pentru cteva argumente spec iale. Tabelul 3 Argument 0 >1 <-1 NaN Rezultat 0 NaN NaN NaN Exemplu: <script> a=0.9965; rezultat=Math.asin(a); document.write(asin(+a+)=+rezultat); </scr ipt> atan() Math.atan(ValoareNumeric) Arc tangent. Exemplu: <script> a=0.9965; rezultat=Math.atan(a); document.write(atan(+a+)=+rezultat); </scr ipt> ceil() Math.ceil(ValoareNumeric) Numr ntreg superior cel mai apropiat. Remarc. n Tabelul 4 se prezint cteva argumente speciale i rezultatul corespunztor. Tab elul 4 Argument +Infinity ntre -1 i 0 -Infinity 0 NaN Rezultat +Infinity 0 -Infinity 0 NaN Figura 2.57 (continuare) Exemplu: <script> a=-4.223; rezultat=Math.ceil(a); document.write(ceil(+a+)=+rezultat); //afie az ceil(-4.223)=-4 </script> 75 cos() Cosinus. Exemplu: Math.cos(ValoareNumeric) <script> a=0.9965; rezultat=Math.cos(a); document.write(cos(+a+)=+rezultat); </scrip t> exp() Exponeniala. Math.exp(ValoareNumeric) Exemplu: <script> a=5; rezultat=Math.exp(a); document.write(exp(+a+)=+rezultat); </script> fl oor() Math.floor(ValoareNumeric) Numr ntreg inferior cel mai apropiat.

Exemplu: <script> a=-4.223; rezultat=Math.floor(a); document.write(floor(+a+)=+rezultat); //a fieaz floor(-4.223)=-5 </script> log() Math.log(ValoareNumeric) Logaritm. Exemplu: <script> a=5; rezultat=Math.log(a); document.write(log(+a+)=+rezultat); //afieaz 1.609 437912431002 </script> max() Math.max(ValoareNumeric1, ValoareNumeric2) Valoare maxim. Remarc. n Tabelul 5 se prezint cteva argumente speciale ale metodei i rezultatele cor espunztoare. Tabelul 5 Figura 2.57 (continuare) Argument 1 Orice valoare NaN Argument 2 NaN Orice valoare Rezultat NaN NaN Exemplu: <script> a=7; b=13.336; rezultat=Math.max(a,b); document.write(max(+a+,+b+)=+rezultat) ; //afieaz max(7,13.336)=13.336 </script> 76 min() Math.min(ValoareNumeric1, ValoareNumeric2) Valoarea minim. Exemplu: <script> a=7; b=13.336; rezultat=Math.min(a,b); document.write(min(+a+,+b+)=+rezultat) ; //afieaz min(7,13.336)=7 </script> pow() Math.pow(ValoareNumeric1, valoareNumeric2 ) Returneaz ValoareNumeric1 la puterea ValoareNumeric2. Remarc. n Tabelul 6 se prezint cteva argumente speciale ale metodei i rezultatele cor espunztoare. Tabelul 6 Argument 1 +0 +Infinity +Infinity -Infinity -Infinity -Infinity 0 1 Orice valoare NaN Argument 2 <0 <0 >0 <0 ntreg par>0 ntreg impar>0 >0 orice valoare NaN Diferit de zero Rezultat +Infinity 0 +Infinity 0 +Infinity -Infinity 0 1 NaN NaN Exemplu: <script> a=3; b=2; rezultat=Math.pow(a,b); document.write(pow(+a+,+b+)=+rezultat); //a fieaz pow(3,2)=9 </script> random() Math.random() Numere aleatoare. Returneaz un numr aleator cuprins ntre 0 i 1. Exemplu:

Figura 2.57 (continuare) <script> /*genereaz 3 numere aleatoare cuprinse ntre 0 i 1*/ for(i=0;i<3;i++){ a=Ma th.random(); document.write(a+<br />); } </script> <script> /*genereaz 4 numere aleatoare cuprinse ntre 0 i 25*/ for(i=0;i<5;i++){ a=M ath.round(Math.random()*25); document.write(a+<br />); } </script> Exemplu: <script> /*genereaz 5 numere aleatoare cuprinse ntre 12 i 48*/ var n=12; var m=48; for(i=0;i<5;i++){ a=Math.round(Math.random()*(m-n)+n); document.write(a+<br />); 77 } </script> round() Math.round(ValoareNumeric) Returneaz valoarea numeric rotunjit la ntregul inferior. Remarc. n Tabelul 7 se prezint cteva argumente speciale ale metodei i rezultatele cor espunztoare. Tabelul 7 Argument +Infinity 0 NaN Rezultat +Infinity 0 NaN Exemplu: <script> x=-5.88; y=8.336; rezultat1=Math.round(x); rezultat2=Math.round(y); rez ultat3=Math.round(z); document.write(round(+x+)=+rezultat1); //afieaz round(-5.88)=-6 document.write(round(+y+)=+rezultat2); //afieaz round(8.336)=8 </script> sin() Math.si n(ValoareNumeric) Sinus. Exemplu: <script> a=0.9965; rezultat=Math.sin(a); document.write(sin(+a+)=+rezultat); //afieaz sin(0.9965)=0.8395747765937453 </script> sqrt() Math.sqrt(ValoareNumeric) Rdcina ptrat. Remarc. n Tabelul 8 se prezint cteva argumente speciale ale metodei i rezultatele cor espunztoare. Tabelul 8 Argument +Infinity 0 <0 NaN Rezultat +Infinity 0 NaN NaN Exemplu: Figura 2.57 (continuare) <script> a=25; rezultat=Math.sqrt(a); document.write(sqrt(+a+)=+rezultat); //afieaz sq rt(25)=5 </script> tan() Tangent

Math.tan(ValoareNumeric) Exemplu: <script> a=0.9965; Figura 2.57 (continuare) 78 rezultat=Math.tan(a); document.write(tan(+a+)=+rezultat); //afieaz tan(0.9965)=1.54548 3358938326 </script> Mai multe despre obiectul matematic Math Exist dou inconveniente majore ale limbajului JavaScript, pe care le putei ntlni n efe ctuarea calculelor matematice care conin numere zecimale: timpul de execuie (JavaS cript este relativ lent!); precizia. Aplicaie Scriei un program JavaScript care calculeaz i afieaz ct fac: 0.121*100; 0.119*100. n figura 2.58 se prezint documentul (X)HTML complet n care sa inserat script-ul aplicaiei [3]. Figura 2.58 Rezultatele execuiei script-ului sunt afiate n figura 2.59. Figura 2.59 Remarci: Rutinele interne ale limbajului JavaScript nu sunt att de precise pe ct n e ateptam. Script-ul dumneavoastr este corect dar rezultatul este diferit fa de cel scontat. 79 Ateptai-v la astfel de surprize (neplcute!) mai ales atunci cnd folosii numere care co nin multe zecimale! Nici precizia funciilor trigonometrice nu este infailibil! Pent ru a rezolva problema afirii rezultatelor cu multe zecimale scriei o funcie personal izat care trunchiaz numrul zecimal la un numr de zecimale dorit, nainte de a-l afia (v ezi Conversaia 8). Obiectul Number Obiectul Number faciliteaz gestiunea numerelor. Proprietile sale sunt constante car e permit definirea valorilor de baz indiferent de navigator. Fia obiectului Number este prezentat n figura 2.60. Fia obiectului Cum crem obiectul? Proprieti Metode Figura 2.60 Gestionarii de evenimente Number Constructorul Number() MAX_VALUE, MIN_VALUE, NaN, NEGATIVE_INFINITY, POSITIVE_IN FINITY toExponential(), toFixed(), toPrecision(), toString() Constructorul Number() Nu este obligatoriu s creai explicit obiecte Number. Dac totui ... insistai folosii co nstructorul Number() care este prezentat n detaliu, n figura 2.61. Constructor Sintax

Number() Variabila=new Number(Numr) 80 Variabila=new Number() Variabila=Numr Constructorul Number() poate fi folosit n egal msur ca funcie. n acest caz, ea returne az valoarea argumentului transmis ca parametru (Tabelul 9). Tabelul 9 Argument null false true numr ir de caractere alfanumerice ir de caractere numerice Rezultat 0 0 1 numr NaN numr Exemplu: Figura 2.61 <script> x=14.253; y=Number(x); document.write(x+-+y); </script> Proprietile obiectului Number Proprietile obiectului Number() sunt prezentate n detaliu n figura 2.62. Proprietate Sintax MAX_VALUE Number.MAX_VALUE Cea mai mare valoare pozitiv a obiectelor Number. Exemplu: <script> document.write(Number.MAX_VALUE); //afieaz 1.79769931348623157e+308 </scr ipt> MIN_VALUE Number.MIN_VALUE Cea mai mic valoare pozitiv a obiectelor Number. Exemplu: <script> document.write(Number.MIN_VALUE); //afieaz 5e.-324 </script> NaN Number.N aN Valoare numeric non valid. Ea este returnat printr-o metod precum parseFloat() sau p arseInt() atunci cnd o valoare Figura 2.62 matematic nu poate fi returnat. NEGATIVE_INFINITY Number.NEGATIVE_INFINITY Valoarea minus infinit. Identic cu Infinity. Figura 2.62 (continuare) POSITIVE_INFINITY Number.POSITIVE_INFINITY

81 Valoarea plus infinit. Identic cu +Infinity. Metodele obiectului Number Metodele obiectului Number sunt prezentate n detaliu n figura 2.63. Metod Sintax toExponential() Number.toExponential(NumrZecimal) Afieaz un numr n format exponenial cu rotunjire. Exemplu: <script> a=4.445845558555588574; b=a.toExponential(2); document.write(b); //afiea z .45e+0 </script> toFixed() Number.toFixed() Rotunjete un numr la ntregul cel mai apropiat superior sau inferior. Exemplu: <script> a=8.5; b=a.toFixed(); document.write(b); //afieaz 8 </script> toPrecision () Number.toPrecision(Numr) Rotunjete un numr cu precizia indicat ca parametru. Dac acest parametru este egal cu 1, numrul este rotunjit la ntreg. Exemplu:

<script> a=4.445845558555588574; b=a.toPrecision(4); document.write(b); //afieaz 4 .446 </script> toString() Number.toString() Convertete un numr ntr-un ir de caractere. Metoda este foarte puin utilizat ntruct va ile numerice sunt imediat i n mod automat convertite n caractere atunci cnd ele sunt introduse ntr-un ir de caractere. Exemplu: Figura 2.63 Remarci: <script> a=88.596; b=a.toString(); document.write(b); </script> Obiectul Number este folosit de foarte puine ori. Este util atunci cnd trebuie s ac cesai anumite constante (vezi proprietile obiectului Number). Crearea obiectelor Nu mber este implicit n cele mai multe cazuri. Putei crea obiecte Number atunci cnd tre buie s le adugai proprieti. 82 Obiectul Boolean Obiectul Boolean este folosit pentru a transforma o valoare non-boolean ntr-o valo are boolean. Obiectul Boolean nu poate conine dect dou valori: TRUE sau FALSE. Fia ob iectului Boolean este prezentat n figura 2.64. Fia obiectului Cum crem obiectul? Proprieti: Metode: Figura 2.64 Gestionarii de evenimente: Number Constructorul Boolean() prototype toString() Remarc. prototype permite adugarea de proprieti i metode obiectului Boolean.

Constructorul Boolean() Constructorul Boolean() este prezentat n detaliu n figura 2.65. Constructor Sintax Variabila=new Boolean() Variabila=new Boolean(Valoare) Variabila=true Variabila= false Creeaz un nou obiect Boolean. El poate fi creat cu operatorul new sau implicit, atribuind o valoare logic (true/false) unei variabile. Exemplu: Boolean() Figura 2.65 Exemplu: <script> //crearea unui obiect boolean vid a=new Boolean(); a=true; </script> <s cript> //crearea i iniializarea simultan a unui obiect boolean a=new Boolean(true); </script> <script> Exemplu: Figura 2.65 (continuare) 83 //crearea implicit a unui obiect boolean a=true; </script> Mai multe despre obiectul Boolean Obiectele booleene care conin una din urmtoarele valori: 0, false, null, NaN, undefined, sunt evaluate FALSE. Obiectele booleene care conin una din urmtoarele valori: true , text oarecare, 58, 96 sunt evaluate TRUE. EXEMPLUL 2 JAVASCRIPT (continuare) Codificarea n limbajul JavaScript (continuare din Conversaia 2) Pentru a codifica n limbajul JavaScript algoritmul prezentat n conversaia precedent, creai documentul (X)HTML (utilizai Notepad sau Macromedia Dreamweaver) n care inse rai script-ul, cu una din metodele prezentate mai jos: Metoda 1 inserai script-ul n corpul paginii; Metoda 2 plasai script-ul n antet-ul paginii; Metoda 3 utilizai fii ere surs externe; Metoda 4 creai un gestionar de evenimente. Folosii unul din edito arele prezentate mai jos: Notepad; Macromedia Dreamweaver MX. Metoda 1 1. Creai d ocumentul (X)HTML (figura 2.66). 84 Figura 2.66 2. Inserai elementul <script> ... </script> n corpul documentului (fig ura 2.67). Figura 2.67 3. Atribuii variabilei r valoarea 3 (figura 2.68). Figura 2.68 4. Codificai formula de calcul a ariei rezervorului sferic, folosind proprietatea Math.PI (pentru constanta ) i metoda Math.pow() (pentru codificarea lui r2, (vezi figura 2.69). Figura 2.69 Remarci: Proprietatea Math.PI a obiectului Math este prezentat n detaliu n figura 2

.57. Metoda pow() a obiectului Math este prezentat n detaliu n figura 2.57. 5. Afiai rezultatele (figura 2.70). 85 Figura 2.70 Remarci: Posibilitatea de combinare a tag-urilor (X)HTML i a instruciunilor JavaSc ript este una din caracteristicile cele mai importante ale unui navigator care s uport JavaScript. n realitate, aceast facilitate constituie esenialul Web-ului dinam ic i interactiv. n figura 2.71 este prezentat documentul (X)HTML complet, editat c u Macromedia Dreamweaver. Figura 2.71 6. Afiai pagina Web ntr-un navigator (figura 2.72). 86 Figura 2.72 Metoda 2 1. Creai documentul (X)HTML. 2. Introducei elementul <script> ... </script> n seciunea <head> ... </head> a documentului (vezi figura 2.73). Figura 2.73 3. Definii funcia calcul() n care introducei formula de calcul precedat d e cuvntul cheie return (vezi figura 2.74).

Figura 2.74 Remarci: Revedei paragraful Definii o funcie (Conversaia 2). Revedei paragraful Retur ea unei valori (Conversaia 2). De regul, cea mai bun locaie pentru definirea unei fun cii este antet-ul (<head> ... </head>) documentului. ntruct instruciunile din antet sunt executate primele, avei certitudinea c funcia este definit nainte de a fi utiliz at. 4. Apelai funcia calcul(3) din script-ul plasat n corpul documentului (vezi figura 2.75). 87 Figura 2.75 Remarci: Apelai funcia calcul() pentru mai multe valori ale razei: calcul(4), calcul(5). n figura 2.76 este prezentat documentul XHTML complet editat cu Macromedia Dreamw eaver. Figura 2.76 5. Afiai pagina Web ntr-un navigator (vezi figura 2.77). 88 Figura 2.77 Metoda 3 1. Creai fiierul calcul.js care conine funcia calcul(), figura 2.78. Figura 2.78 2. Introducei atributul src=calcul.js n tag-ul de deschidere al

elementului <script> (figura 2.79). Figura 2.79 Remarci: Atributul src transmite interpretorului JavaScript c dorii s includei codul JavaScript n fiierul calcul.js. Extensia .js nu este obligatorie dar prezena ei id entific fiierele care conin codul surs JavaScript. Metoda 4 Indicaie. Folosii gestionarul de evenimente onClick n tag-ul <input> al un ui formular (vezi figura 2.80). ...

89 <form name=form1> Raza?<input type=textname=raza /><br /> Aria:<input type=textname= ><br /> <input type=button name=buton1 value=calculeaza aria rezervorului sferic onCli ck=document.form1.aria.value=document.form1.raza.value= document.form1.raza.value =4*Math.PI; /> </form> Figura 2.80 ... Remarc. Vezi Conversaia 8. 90 JavaScript Testai-v cunotinele 1. Cum clasificai operatorii JavaScript? Tem 2. Care este semnificaia operatorilor: +=; =; *=; /=; %=? 3. Care sunt obiectele m atematice pe care le cunoatei? 4. Cum se creeaz obiectul Math? 5. Cum creai un nou o biect Number i un nou obiect Boolean? 6. Precizai rezultatele execuiei urmtoarelor s cript-uri (figura 2.81): <script> x=12; y=4; z=2; x*=z++*++y; document.write(x); Figura 2.81 </script> 7. Care va fi rezultatul expresiei: 25+de zile? un mesaj de eroare; 26; 25 de zile. <script> y=75; x=(y=100)?29:42; document.write(x); </script> Vizitai site-urile http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/ js56jsorijscript.asp http://developer.netscape.com/tech/javascript http://www.zd net.com/devhead/filters/0,,2133214,00.html http://webdeveloper.earthweb.com/webj s http://javascript.about.com/?once=true& Conversaia 3 Instruciunile limbajului JavaScript n aceast conversaie: Tipuri de instruciuni JavaScript for. Aplicaii EXEMPLUL 3.1 JAVASCRIPT while. Apli caii EXEMPLUL 3.2 JAVASCRIPT do ... while. Aplicaii EXEMPLUL 3.3 JAVASCRIPT for .. . in. Aplicaii if, if...else, switch. Aplicaii EXEMPLUL 3.4 JAVASCRIPT Instruciunil e continue i break Instruciunea with Tem Instruciunile limbajului JavaScript JavaScript este un limbaj de nivel nalt, bazat pe obiecte, care permite programat orilor s creeze cu uurin documente (pagini) Web interactive. Instruciunile limbajului

JavaScript sunt uor de neles i aplicat. Ele piloteaz script-ul, permindu-i s ia o de ie, s creeze bucle (iteraii) etc. Cea mai mare parte a instruciunilor JavaScript su nt recunoscute de toate navigatoarele, dar ... mai exist i divergene! 92 Pentru a programa n limbajul JavaScript folosii urmtoarele tipuri de instruciuni (ve zi figura 3.1). Tipuri de instruciuni iteraii (cicluri) Instruciuni JavaScript for, for...in, while, do...while decizii documentarea script-urilor funcii generarea unei erori, testarea unei pori uni de cod i interceptarea eventualelor erori declararea unei variabile simplific area efortului de programare (reducerea codului) Figura 3.1 instruciunile break, continue if, if...else, switch /*...*/, // function(), return throw i try...catch var with Iteraii n limbajul JavaScript, iteraiile (repetiiile) se codific cu una din urmtoarele instru ciuni: for (pentru) for...in

structur de iteraie cu numr cunoscut de pai; structur de tip for care permite baleie ea tuturor elementelor unei matrici sau ale unui obiect; while (ct timp) structur de iteraie cu numr necunoscut de pai, condiionat anterior; do...while structur de tip while, condiionat posterior. for (pentru) Utilizai instruciunea for pentru a crea cicluri (bucle) n programele dumneavoastr Ja vaScript. Instruciunea for este folosit pentru a repeta o instruciune sau o secven de instruciuni ct timp rezultatul evalurii unei condiii este TRUE. 93 Instruciunea for este prezentat n detaliu n figura 3.2. Instruciune Sintax for for(ExpresieIniial;CondiieContinuare; ExpresieFinal){ cod JavaScript ExpresieIniial este expresia de iniializare a variabilei de control a instruciunii; CondiieContinuare este cel de-al doilea parametru al instruciunii, care reprezint o expresie logic ce se evalueaz la valoarea true sau false; ExpresieFinal actualizea

z valoarea variabilei de control a instruciunii. Bucla este executat ct timp CondiieC ontinuare returneaz TRUE. Exemplu: <script> unde, } Exemplu: Exemplu: Exemplu: Exemplu: Exemplu: Figura 3.2 for(i=1;i<13;i++){ document.write(i+ <br />); } </script> <script> for(i=1;i<13;i+ =2){ document.write(i+ <br />); } </script> <script> //dou bucle imbricate (nested) for(x=1;x<11;x++){ for(y=1;y<11;y++){ document.write(x*y+ ); } document.write(<br />); } </script> <script> for(var i=true;i==true;){ i=confirm( Doriti sa continuat i?); } </script> <script> //ciclu infinit; for(;;){ document.write(Iar innebunesc salcamii!); } </script> <script> for(i=0;i<13;i++){ ;//instructiunile ciclului } </script> Mai multe despre for for conine trei parametrii separai prin punct i virgul.

94 Cei trei parametrii ai instruciunii for sunt opionali; dac omitei unul dintre ei, se paratorul punct i virgul (;) este obligatoriu. Acoladele nu sunt indispensabile n i teraiile care conin o singur instruciune, dar se recomand s le folosii fr a ine con mrul de instruciuni din corpul iteraiei. Procednd n acest mod vei putea aduga cu uuri instruciuni fr a provoca erori de sintax. Vei constata c utilizm foarte des numele de variabil i, ca identificator al variabilei de control. Este o tradiie (vezi limbaj ul Forth) n programare. Instruciunile for pot fi imbricate (suprapuse) dar nu treb uie s se intersecteze. Principiul de funcionare al instruciunii for este urmtorul: 1 . Se iniializeaz variabila de control a instruciunii (ExpresieIniial). 2. Se testeaz C ondiieContinuare. 3. Dac rezultatul evalurii CondiieContinuare este true se execut in struciunile din corpul buclei; n caz contrar script-ul execut instruciunea imediat u rmtoare dup acolada de sfrit (}). 4. Se execut ExpresieFinal i se testeaz CondiieCon re. Pentru a provoca o ieire imediat din bucla for folosii instruciunea break. Pentru a relua ciclul fr a mai fi executate instruciunile care urmeaz folosii instruci unea Continue.

EXEMPLUL 3.1 JAVASCRIPT Formularea problemei Vom relua problema din conversaia precedent (vezi EXEMPLUL 2 JAVASCRIPT) considernd de aceast dat mai multe rezervoare cilindrice echilaterale (generatoarea este ega l cu diametrul) toate pline cu benzin. Raza acestora variaz de la 2 la 10 m (vezi f igura 3.3) cu pasul 1 (2, 3, ..., 10 m). Dorim s calculm i s afim ntr-o pagin Web can atea de lichid (benzin) din cele nou rezervoare cilindrice echilaterale, iar n fina l s afim cantitatea total de benzin din toate rezervoarele.

95 Densitatea benzinei (0.7 g/cm3) se va introduce n mod dinamic. Cum s-ar putea rez olva aceast problem? Cei mai grbii dintre dumneavoastr se i gndesc deja la instruciun JavaScript necesare scrierii script-ului. Banal, extrem de banal vor exclama po ate muli dintre dumneavoastr! Formulele de calcul pot constitui un impediment, dar vi le vom aminti noi: = m (1) V

V = R 2 * G (2) unde, G este generatoarea cilindrului. V = R 2 * 2 R = 2R 3 (3) unde, V este volumul cilindrului echilateral. Cam multe formule, dintr-o dat! Est e adevrat, dar cu siguran c ele nu v vor strica viaa personal! Promitem! Remarc. A gndi n limbaj informatic (JavaScript) nc de la formularea problemei ni se p are o concepie total greit! V propunem metodologia de analiz, proiectare i realizare a aplicaiilor pe care v-am prezentat-o n Conversaia precedent. Analiza problemei Formatul datelor de ieire (fereastra n care se afieaz pagina Web), tabela de variabi le i specificaiile de programare sunt ilustrate n figurile: 3.3, 3.4, 3.5. Formatul datelor de ieire MASA XXX.XX XXX.XX . . . XXX.XX XXX.XX TONE RAZA 2 3 . . . 10 MASA TOTALA Figura 3.3 Tabela de variabile Variabile de intrare Figura 3.4 Variabile de stare Variabile de iesire 96 d: densitatea benzinei v: volumul cilindrului echilateral r: raza rezervorului s : masa total de benzin m: masa de benzin

Specificaii de programare Descriere. Script-ul calculeaz i afieaz cantitatea de benzi n din mai multe rezervoare cilindrice echilaterale a cror raz variaz de la 2 la 10 m , cu pasul de 1 m. Intrri. Densitatea benzinei (0.7 g/cm3). Ieiri. Masa de benzin d in fiecare rezervor i masa total de benzin. Lista de funciuni ale script-ului 1. Cit ete densitate benzin (d) 2. Iniializeaz variabila s cu zero 3. Tiprete cap tabel 4. Ca lculeaz volumul rezervorului (V) 5. Calculeaz masa (m) de benzin din fiecare rezerv or 6. nsumeaz m n s Figura 3.5 7. Afieaz raza (r) i masa rezervorului (m) 8. Iniialize z variabila de control a buclei (r) 9. Incrementeaz i testeaz variabila de control a buclei (r) 10. Afieaz masa total de benzin (s) 11. Stop

Proiectarea script-ului Vom folosi pentru proiectarea script-ului cele dou variante de pseudocod (vezi Co nversaia 2): Varianta 1 limbaj natural structurat; Varianta 2 scriere formalizat ( apropiat de limbajul JavaScript). Varianta 1 n figura 3.6 se prezint pseudocodul n l imbajul natural structurat (Varianta 1). Pseudocodul (Varianta 1) 1. Citete densi tatea benzinei, afieaz capul de tabel, calculeaz, nsumeaz i afieaz cantitatea de benz in rezervoarele cilindrice echilaterale a cror raz variaz de la 2 la 10 m cu pasul de 1 m. 1.1. Citete densitatea benzinei. 1.2. Iniializeaz cu zero masa total de benz

unde, este densitatea, m

ep ezint masa, iar V este volumul.

in. 1.3. Tiprete un rnd de 30 de liniue. Figura 3.6 1.4. Tiprete capul de tabel (RAZA, MASA).

97 1.5. Tiprete un rnd de 30 de liniue. 1.6. Pentru fiecare rezervor cilindric echilate ral a crui raz variaz de la 2 la 10 m, cu pasul de 1 m, repet aciunile: 1.6.1. Calcul eaz volumul. 1.6.2. Calculeaz masa de benzin. 1.6.3. nsumeaz masa de benzin n cantitat a total de benzin. 1.6.4. Afieaz raza i masa de benzin. 2. Tiprete un rnd de 30 de l Figura 3.6 3. Afieaz masa total de benzin. 4. Stop. (continuare) Remarci: Evident, aciunea 1 nu reprezint o aciune primitiv, impunndu-se n acest sens o rafinare (descompunere) a acestora (aciunile 1.1, ..., 1.6). Pentru rafinarea aci unii neprimitive 1, vom folosi metoda analizei descendente (top-down). Prezentar ea algoritmului n limbaj natural structurat are, dup cum ai putut constata i singuri urmtoarele dezavantaje: exprimri lungi, greoaie etc. Varianta 2 n figura 3.7 se prezint pseudocodul n scriere formalizat (Varianta 2). Pseudocodul ( Varianta 2) REZERVOARE INIT INIT PRELUCRRI BEGIN BEGIN Citete densitatea benzinei (d) s=0 END BEGIN DO LINIUTZA WRITE(RAZA+---+MA SA); DO LINIUTZA FOR(r=2;r<=10;r++) 3 v=2r m=d*v s=s+m WRITE(r+...+m) ENDFOR END DO LINIUTZA WRITE(MASA TOTALA+ +s) END BEGIN Afieaz un rnd de 30 liniue END PENTRU PENTRU PRELUCRRI REZERVOARE LINIUTZA Figura 3.7 LINIUTZ Remarci: n general, script-urile conin secvene alctuite din grupuri de instruciuni care se exe cut numai n anumite condiii, ct i grupuri de instruciuni care se execut de attea ori imp sau pn cnd este ndeplinit o condiie. Formatul general al blocului de secven este strat n figura 3.8. 98 Eticheta Figura 3.8 Eticheta unde, BEGIN Grup de instruciuni END BEGIN i END joac rolul de delimitatori; ei reprezint punctul unic de intrare, respe ctiv punctul unic de ieire din bloc i poart aceeai etichet (cu majuscule sau minuscul e). Formatul general al structurii de iteraie FOR este ilustrat n figura 3.9. Eticheta Figura 3.9 Eticheta unde, FOR(v=vi;v<=vf;v++) Corpul buclei ENDFOR v reprezint variabila de control a buclei; vi reprezint valoarea iniial a variabilei v; vf reprezint valoarea final a variabilei v, iar v++ servete, n general la increm entarea variabilei v. FOR i ENDFOR sunt delimitatorii structurii. Codificarea n limbajul JavaScript n figura 3.10 este prezentat documentul (X)HTML complet. Figura 3.10 n figura 3.11 i figura 3.12 se prezint rezultatele execuiei script-ului.

99 Figura 3.11 Figura 3.12 Comentarii Funcia liniutza() este apelat din trei puncte ale corpului (<body>...</ body>) al documentului. Funcia liniutza() mai poate fi scris i sub forma (vezi figu ra 3.13). principal function liniutza(){ document.write(<br />); for(i=1;i<=30;i++){ document.write(-); } Figura 3.13 } Pentru calculul volumului rezervorului cilindric echilateral am utilizat proprie tatea Math.PI i metoda Math.pow(r,3) care aparin obiectului Math (vezi obiectul matemati c Math).

100 Aplicaii Scriei un script care calculeaz i afieaz suma primelor 100 numere ntregi. Ind caie. n figura 3.14 este prezentat script-ul aplicaiei. Inserai acest script ntr-un d ocument (X)HTML. Figura 3.14 Scriei un script care genereaz 25 de seturi de coordonate, generate de dou bucle for imbricate: (0,0), (0,1), (0,2), (0,3), (0,4), (0,5) (1,0), (1,1), (1,2), (1,3), (1,4), (1,5 ) (2,0), (2,1), (2,2), (2,3), (2,4), (2,5) (3,0), (3,1), (3,2), (3,3), (3,4), (3 ,5) (4,0), (4,1), (4,2), (4,3), (4,4), (4,5) (5,0), (5,1), (5,2), (5,3), (5,4), (5,5) Indicaie. n figura 3.15 este prezentat script-ul aplicaiei. Inserai acest scri pt ntr-un document (X)HTML.

Figura 3.15 Scriei dou bucle imbricate care genereaz i afieaz tabla nmulirii. Indica figura 3.16 este prezentat script-ul aplicaiei. Inserai acest script ntr-un documen t (X)HTML. 101 Figura 3.16 Scriei un script care calculeaz (cu o structur iterativ) i afieaz: 1!+2!+ 7! Indicaie. n figura 3.17 este prezentat script-ul aplicaiei. Inserai acest script n tr-un document (X)HTML. Figura 3.17 Scriei un script care editeaz urmtorul triunghi al numerelor (figura 3. 18). 1 1 1 1 1 1 1 1 1 1 Figura 3.18 2 2 2 2 2 2 2 2 2 3 3 3 3 3 3 3 3 4 4 4 4 4 4 4 5 5 5 5 5 5

6 6 6 6 6 7 78 789 7 8 9 10 while (ct timp) Una din instruciunile de iteraie (repetiie) cele mai simple este while, cunoscut i su b denumirea de structur de iteraie cu numr necunoscut de pai, condiionat anterior. Deo sebirea dintre while i for const n faptul c instruciunea while nu include n declaraia a funcia de iniializare a variabilei de control (vezi 102 ExpresieIniial) i funcia de actualizare a variabilei de control (vezi ExpresieFinal). Instruciunea while este prezentat n detaliu n figura 3.19. Instruciune Sintax while while (condiie){ cod JavaScript } Instruciunile (din corpul buclei (cod JavaScript ) sunt executate ct timp rezultat ul evalurii condiie este TRUE. Exemplu: Exemplu: Exemplu: Exemplu: Exemplu: Figura 3.19 <script> i=1; while(i<=7){ document.writeln(i); ++i; } document.writeln(Ati afisa t 7 numere.); </script> <script> x=1; while(x<10){ document.write(x+ <br />); x++; } </script> <script> var k=20; while(k<11){ document.write(k+<br />); k++; } </scr ipt> <script> i=10; while(i>0){ document.write(i); --i; } document.write(La reved ere!); </script> <script> i=1; while(i<=100){ document.writeln(i); i*=2; } </scri pt> 103 Mai multe despre while while este foarte asemntor cu if. if execut o singur dat instruciunile din corpul buclei (cod JavaScript), n timp ce while le execut ntr-o bu cl ct timp rezultatul evalurii condiie este TRUE. n realitate, bucla for nu este dect un caz particular al buclei while, care integreaz direct funciile de iniializare i de incrementare a variabilei de control a buclei. Buclele while au o arie de utiliz are mai larg dect buclele for, dar decizia n a le alege v aparine numai dumneavoastr! Numrul minim de execuii a cod JavaScript este zero. Instruciunea break provoac o ieir e imediat din bucl. Instruciunea continue provoac reluarea buclei fr a mai fi executat e instruciunile care urmeaz. EXEMPLUL 3.2 JAVASCRIPT Problema din EXEMPLUL 3.2 JAVASCRIPT este aceeai cu problema din EXEMPLUL 3.1 JAV ASCRIPT. Singurele deosebiri apar n urmtoarele dou faze: proiectarea script-ului n p seudocod s-a nlocuit for cu while (vezi figura 3.20). Pseudocodul REZERVOARE PREL UCRRI CATTIMP

BEGIN ... BEGIN ... r=2 WHILE(r<=10) 3 v=2r m=d*v s=s+m WRITE(r+...+m) r++ ENDWHILE END END CATTIMP PRELUCRRI Figura 3.20 REZERVOARE 104 codificarea n limbajul JavaScript n script-ul din corpul principal al documentului (X)HTML s-a nlocuit for cu while (figura 3.21). Figura 3.21 Rezultatele obinute sunt evident, identice. do while Dac while execut una sau mai multe instruciuni (corpul buclei) de cel puin zero (0) ori, dowhile execut cel puin o dat instruciunea (instruciunile) din corpul buclei; apo i repet execuia ct timp rezultatul evalurii condiiei (vezi condiie din dowhile) este TRUE. Instruciunea dowhile este prezentat n detaliu n figura 3.22. Instruciune Sintax dowhile do{ cod JavaScript } while (condiie) do...while execut cod JavaScript cel puin o dat, apoi este reexecutat ct timp rezultatul evalurii condiie este TRUE. Exemplu: Figura 3.22 <script> i=0; do{ document.writeln(i+<br />); ++i; } while(i<11); </script> 105 Exemplu: Exemplu: Figura 3.22 (continuare) <script> var i=20; do{ document.write(i+ <br />); i++; } while(i<11); </script> <s cript> s=20; i=1; do{ s+=i; i++; } while(i<=100); alert(Suma primelor 100 de nume re naturale este+s); </script> Mai multe despre do...while

do...while funcioneaz exact ca instruciunea while, cu deosebirea c nu evalueaz condiie dect dup prima iteraie. n felul acesta se garanteaz ript-ul dintre acolade va fi executat cel puin o dat. Instruciunea break provoac o i eire forat din bucl. Instruciunea continue provoac reluarea buclei fr a mai fi execut instruciunile care urmeaz. EXEMPLUL 3.3 JAVASCRIPT Problema din EXEMPLUL 3.3 JAVASCRIPT este aceeai cu problema din EXEMPLUL 3.1 JAV ASCRIPT. Singurele deosebiri apar n fazele de: Proiectarea script-ului n pseudocod s-a nlocuit for cu do...while (vezi figura 3.23).

106 Pseudocodul PRELUCRRI PRELDOWHILE BEGIN ... r=2 DO Figura 3.23 PRELDOWHILE PRELUCRRI v=2r m=d*v s=s+m WRITE(r+...+m) r++ WHILE(r<=10) END 3 Codificarea n limbajul JavaScript n script-ul din corpul principal al documentului (X)HTML s-a nlocuit for cu do...while (figura 3.24). Figura 3.24

for ... in Instruciunea forin este o structur de iteraie care execut aceeai instruciune sau aceea secven de instruciuni pentru toate proprietile unui obiect. Aceast instruciune poate f util, de exemplu, atunci cnd dorii s afiai numele tuturor proprietilor unui obiect. truciunea forin este prezentat n detaliu n figura 3.25. Instruciune Sintax forin for (Proprietate in Obiect) { cod JavaScript } 107 JavaScript. Bucla listeaz proprietile unui obiect. Variabila de control a buclei (P roprietate) reprezint o proprietate a obiectului. Exemplu: unde, Proprietate este un element literal generat de Exemplu: Figura 3.25 <script> //afieaz toate proprietile obiectului window i valorile acestuia for (x in w indow){ document.writeln(x+:+window[x]+<br />); } </script> <script> //afieaz toate pr oprietile unui obiect creat obiect=new object; obiect.nume=maxim; obiect.zi=luni; obie ct.culoare=cepia; for(x in obiect){ document.write(x+:+ obiect[x]+<br />); } </script>

Mai multe despre for...in Pentru a folosi cu uurin instruciunea for...in este bine s avei cunotine elementare d re obiectele JavaScript. Putei folosi for...in cu orice obiect JavaScript, indife rent dac are sau nu proprieti. for...in funcioneaz i cu alte obiecte particularizate, ca de exemplu o variabil. for...in se termin n mod automat, atunci cnd a fost identificat ultima proprietate a obiectului. Decizii

108 n limbajul JavaScript, deciziile (seleciile) se codific cu una din urmtoarele instru ciuni: if (dac) structur de decizie cu o singur alternativ. if else (dac n caz contrar) tur de decizie cu dou alternative. switch structur de decizie cu mai multe alternative. if (dac) Una din principalele faciliti ale unui limbaj de programare este aceea de a putea testa i compara valorile. Putem crea astfel script-uri care vor reaciona n mod dife rit n funcie de valorile variabilelor sau de informaiile furnizate de ctre utilizato r. Principala instruciune de decizie (selecie) a limbajului JavaScript este if. In struciunea if este prezentat n detaliu n figura 3.26. Instruciune Sintax if if (condiie){ cod JavaScript } unde, condiie poate fi orice expresie logic Exemplu: Execut secvena de instruciuni dintre acolade (cod JavaScript) dac rezultatul evalurii condiie este TRUE. n caz contrar, JavaScript ignor cod i continu. Exemplu: Figura 3.26 Exemplu: <script> a=13;b=2; if(a>b){ alert(a este mai mare ca b); } </script> <script> numa rator=4; numitor=0; if(numitor>0){ a=numarator/numitor; document.write(a); } </s cript> <script>

109 var sex=f; if(sex==f){ document.write(Buna ziua, doamna!); } document.write(La reveder !); </script> <script> nume=Popescu; prenume=Ion; if((nume==)||(prenume==)){ documen te(Lipsesc valori!); } </script> <script> if((nume==)&&(prenume==)){ document.write(Li sesc doua valori); } </script> <script> if((a<100)&&(a>250)){ document.write(Ce pa rere aveti de acest test?); } </script> <script> <script> if(a){ if(a==true){ b=AD EVARAT; b=ADEVARAT; } } echivalent cu alert(b); alert(b); </script> </script> Exemplu: Exemplu: Exemplu: Exemplu: Figura 3.26 (continuare) Mai multe despre if if este o structur de decizie (decision structure, n limba englez) care

testeaz i compar diferite valori. Dac partea a doua a unei instruciuni if poate conine orice instruciune JavaScript, prima parte (condiie) trebuie s respecte o sintax pre cis. Condiie (expresie condiional) conine n general dou valori (constante, expresii, variabile etc.) care se compar una cu cealalt. Cele dou valor i sunt separate printr-un operator relaional. Nu confundai operatorul de egalitate (== sau ===) cu operatorul de afectare (=), chiar dac ele se citesc egal. Nu de pui ne ori suntem pui n situaia s comparm o variabil cu mai multe valori sau cu mai multe variabile o dat. Pentru astfel de cazuri folosii operatorii logici.

110 if ... else (dac ... n caz contrar) Uneori, simpla folosire a instruciunii if nu este suficient. n acest caz, completai instruciunea if cu cuvntul cheie else (n caz contrar, n limba romn). else precizeaz in erpretorului ce anume trebuie s fac atunci cnd rezultatul evalurii condiie este false . Instruciunea if else este prezentat n detaliu n figura 3.27. Instruciune Sintax if else

if (condiie) { cod1 JavaScript } else { cod2 JavaScript } unde, cod1 JavaScript: instruciuni executate cnd rezultatul evalurii condiie este TRUE. cod2 JavaScript: in struciuni executate cnd rezultatul evalurii condiie este FALSE. Execut prima secven de instruciuni (cod1 JavaScript) dintre acolade ({}) dac rezultatul evalurii condiie este TRUE. Blocul (cod2 JavaScript) else nu es te obligatoriu. El conine instruciuni care se execut dac rezultatul evalurii condiie e ste FALSE. Dac blocul else nu exis i dac rezultatul evalurii condiie este FALSE, instruciunile blocului if nu sunt executate. Script-ul transmite controlul execuiei instruciunii imediat urmtoare dup bloc. Dac re zultatul evalurii condiie este TRUE instruciunile blocului else nu sunt executate. Script-ul transmite controlul execuiei instruciunii imediat urmtoare dup blocul else . Exemplu: Figura 3.27 <script> var sex=f; if(sex==f){ document.write(Buna ziua, doamna!); } else{ document.w rite(Buna ziua, domnule!); } document.write(<br />La revedere!); </script> 111 Exemplu: Exemplu: Exemplu: Exemplu: Figura 3.27 (continuare)

<script> var sex=f; if((sex==f)||(sex==m)){ document.write(Sex:+sex); } else{ alert( edefinit!); } document.write(<br />); document.write(La revedere!); </script> <script > var oras=Ploiesti; if(oras==Paris){ document.write(Locuinta dumneavoastr este in cap itala Frantei); } else{ if (oras==Sinaia){ document.write(Locuinta dumneavoastr este la Sinaia); } else{ if(oras==Ploiesti){ document.write(Locuinta dumneavoastr este la Ploiesti); } } } </script> <script> var oras=Caracal; if(oras==Paris){ document.write (Locuinta dumneavoastr este in capitala Frantei);} else if (oras==Sinaia){ document.w rite(Locuinta dumneavoastr este la Sinaia);} else if(oras==Ploiesti){ document.write(L ocuinta dumneavoastr este la Ploiesti);} </script> <script> var tara=Romania; var or as=Vaslui; if(tara==Romania){ if(oras==Bucuresti){ document.write(Locuinta ta de vara te in capitala Romaniei);} else{ document.write(Locuinta ta de vara este in Romani a, in provincie);} } else{ document.write(Locuinta ta de vara nu este in Romania); } </script> 112 Mai multe despre if ... else Instruciunile if ... else pot fi imbricate. Ca i instruciunea if, else poate fi urm at de una sau mai multe instruciuni delimitate de acolade ({}). Nu uitai de expres iile condiionale prescurtate (vezi figura 3.28, figura 3.29). <script> x=(a==1)?1 :0; </script> echivalent cu <script> if(a==1){ x=1; } else { x=0; } </script> Figura 3.28 <script> document.write(i+((i==1)?cuvant gasit:cuvinte gasite.)); Figura 3.29 </scri pt> switch Instruciunea switch este prezentat n detaliu n figura 3.30. Instruciune Sintax switch switch (variabila) case Valoare1 cod1 JavaScript break; case Valoare2 cod2 JavaS cript break; default: cod3 JavaScript }

Switch controleaz coninutul unei variabile cu una sau mai multe instruciuni case. Instruciunea break este indispensabil. Instruciunea default este f acultativ. Ea conine instruciunile care urmeaz a fi executate n situaia n care nici un l din Figura 3.30 Exemplu: case-urile precedente nu conin valoarea variabilei testate. <script> var n=100; Figura 3.30 113 switch(n){ case 10: document.write(10); break; case 20: document.write(20); break; c ase 30: document.write(30); break; default: document.write(Alta valoare); } document .write(<br />La revedere!); </script> Aplicaie Precizai dac rezultatele execuiei celor dou script-uri (figura 3.31 i figura 3.32) sunt echivalente. Comentai rezultatele.

<script> var oras=Ploiesti; if (oras==Ploiesti) document.write(Locuiti la Ploiesti); i f (oras==Peris) document.write(Locuiti la Peris); if (oras==Paris) document.write(Locu ti la Paris); if (oras==Roman) document.write(Locuiti la Roman); if (oras==Roma) docum nt.write(Locuiti la Roma); document.write(Sunteti un itinerant!); document.write(La r evedere!); Figura 3.31 </script> <script> var oras=Ploiesti; switch(oras){ case Ploi esti: document.write(Locuiti la Ploiesti); break; case Peris: document.write(Locuiti l

a Peris); break; case Paris: document.write(Locuiti la Paris); break; case Roman: docu ent.write(Locuiti la Roman); break; case Roma: document.write(Locuiti la Roma); break; default: document.write(Sunteti un itinerant!); } document.write(La revedere!); Fig ura 3.32 </script> 114 EXEMPLUL 3.4 JAVASCRIPT Formularea problemei Vom relua problema din EXEMPLUL 3.1 JAVASCRIPT simplificnd-o dup cum urmeaz. Vom co nsidera de aceast dat un singur rezervor cilindric echilateral (generatoarea este egal cu diametrul) plin cu benzin (vezi figura 3.33). R G G=2R V=2R3

Figura 3.33 Dorim s calculm i s afim ntr-o pagin Web cantitatea de lichid (benzin) d zervor. Raza rezervorului trebuie s aib o valoare pozitiv. Densitatea benzinei i raz a se vor introduce n mod dinamic. Analiza problemei Formatul datelor de ieire (fereastra n care se afieaz pagina Web), tabela de variabi le i specificaiile de programare sunt ilustrate n figurile: 3.34, 3.35, 3.36. a) RA ZA -2 b) Figura 3.34 RAZA 3 MASA RAZA NEGATIVA MASA xxxxx.xxxxx Tabela de variabile Variabile de intrare d: densitatea benzinei Figura 3.35 r: raza rezervorului Variabile de stare m: cantitatea de benzin v: volumul rezervorului Variabile de iesire m: cantitatea de benzin

115 Specificaii de programare Descriere. Script-ul calculeaz i afieaz cantitatea de benzi n dintr-un rezervor cilindric echilateral de raz pozitiv. Intrri. Densitatea benzine i, raza rezervorului. Ieiri. Masa de benzin din rezervor. Lista de funciuni ale scr ipt-ului 1. Citete densitate benzin (d) 2. Citete raza rezervorului (r) 3. Afieaz cap ul de tabel 4. Testeaz valoarea (introdus dinamic) razei 5. Calculeaz volumul rezer vorului (v). Figura 3.36 9. 7. 8. 6. Calculeaz masa (m) de benzin din rezervor Afie az raza (r) i masa rezervorului n caz de eroare, afieaz raza (r) i mesajul: RAZA NEGAT V Afieaz un rnd de liniue 10. Stop Proiectarea script-ului n figura 3.37 se prezint pseudocodul n scriere formalizat. Pseudocodul REZERVOR INIT BEGIN BEGIN //Citete densitatea benzinei (d) READ(d) //Citete raza rezervorului (r ) READ(r) INIT PRELUCRRI

END BEGIN DO LINIUTZA WRITE(RAZA+---+MASA); DO LINIUTZA IF(r<0) WRITE(r+ +Raza negat ELSE 3 v=2r m=d*v WRITE(r+...+m) ENDIF END DO LINIUTZA END BEGIN Afieaz un rnd de 30 d e liniue END DECIZIE DECIZIE DECIZIE PRELUCRRI REZERVOR LINIUTZA Figura 3.37 LINIUTZ Remarc. Pseudocodul structurii de selecie IF ... ELSE este ilustrat n figura 3.38.

116 Eticheta Eticheta Figura 3.38 Eticheta IF (condiie) Grup de instruciuni ELSE Grup de instruciuni ENDIF unde, IF, ELSE i ENDIF sunt delimitatori ce poart aceeai etichet. Codificarea n limbajul JavaScript n figura 3.39 este prezentat documentul (X)HTML complet. Figura 3.39 n figura 3.40 i figura 3.41 se prezint rezultatele execuiei script-ului. Figura 3.40 117 Figura 3.41 Instruciunile continue i break continue Atunci cnd interpretorul JavaScript ntlnete instruciunea continue el revine la nceputu l buclei i ignor celelalte instruciuni din interiorul buclei. Instruciunea continue este prezentat n detaliu n figura 3.42. Instruciune Sintax continue; continue Eticheta Instruciunea este utilizat n buclele: while, do ... whi le, continue for. De cele mai multe ori, instruciunea este inclus ntr-o instruciune if. continue poate fi de asemenea utilizat cu o etichet. Exemplu: Figura 3.42 <script> var i=1; while(i<21){ document.write(i); i++; if(i<10){ continue; } doc ument.write(<br />); } </script> 118 Exemplu: Exemplu: Figura 3.42 (continuare) <script> iesire:; for(i=0;i<3;i++){ document.write(i=+i+<br />); for(j=0;j<5;j++){ i f(j==3){ continue iesire; } document.write(j=+j+<br />); } } document.write(SFARSIT); </script> <script> iesire:; for(i=0;i<3;i++){ document.write(i=+i+<br />); for(j=0;j <5;j++){ if(j==3){ continue; } document.write(j=+j+<br />); } } document.write(SFARSI T); </script> break Instruciunea break provoac o ieire imediat din blocul de instruciuni curent. Instruciu nea break este prezentat n detaliu n figura 3.43. Instruciune Sintax

break break; break Eticheta do Provoac o ieire imediat din cele trei bucle: while, while, for i din blocul switch. De cele mai multe ori, instruciunea break este inclus ntr-o instruciune if. Dac rezul tatul evalurii condiiei este TRUE atunci se iese din bucl. break poate fi de asemen ea utilizat cu o etichet (un nume urmat de dou puncte). Exemplu: Figura 3.43 <script> var i=1; j=5; while(i<20){ rezultat=i*j; document.write(rezultat+<br />); if(r>50) break; i++; } </script> 119 Exemplu: Exemplu: Figura 3.43 (continuare) <script> iesire:; for(i=0;i<3;i++){ document.write(i=+i+ <br />); for(j=0;j<5;j++){ if(j==3){ break iesire; } document.write(j=+j+<br />); } } document.write(SFARSIT); </ script> <script> iesire:; for(i=0;i<3;i++){ document.write(i=+i+ <br />); for(j=0;j< 5;j++){ if(j==3){ break; } } } document.write(SFARSIT); </script>

Instruciunea with with simplific scrierea programelor JavaScript sau reduce pe ct posibil cantitatea de cod JavaScript. with permite specificarea unui obiect i este urmat de un bloc de instruciuni plasat ntre acolade. Pentru fiecare din instruciunile blo cului, proprietile menionate fr ca obiectul corespunztor s fie indicat se refer la ob tul specificat prin with. Instruciunea with este prezentat n detaliu n figura 3.44. Instruciune Sintax with with (obiect) { cod JavaScript } Modific temporar contextul punnd n eviden un obiect la care se fac referiri ntr-un blo c de instruciuni. 120 Exemplu: Figura 3.44

<script> //Urmtorul cod repet metoda document.write() de patru ori document.write(P e trotuar, alturi salt+<br />); document.write(Dou fete vesele,+<br />); document.w mi vine s las balt,+<br />); document.write(Toate interesele+<br />); //cuvntul che elimin referinele multiple la obiectul document with(document){ write(Pe trotuar, alturi salt+<br />); write(Dou fete vesele,+<br />); write(Zu c-mi vine s las b (Toate interesele+<br />); } </script>

Pentru un cod scurt (vezi i figura 3.45) interesul utilizrii instruciunii with nu e ste evident, dar cnd trebuie s accesm acelai obiect n cadrul unei proceduri sau cnd ut ilizm un obiect predefinit precum Math, with v ajut s ctigai foarte mult timp. with(nu e){ window.alert(Lungimea numelui este: + length); toUpperCase();} Figura 3.45 121 JavaScript Testai-v cunotinele Tem 1. Ce tipuri de instruciuni JavaScript cunoatei? 2. Ce tip de bucl JavaScript testea z condiia la nceput: for; while; do ... while. 3. Instruciunea do ... while asigur: minimum o iteraie; maximum o iteraie; zero iter aii. 4. Comentai urmtorul script (figura 3.46). <script> i=0; rez=0; stare=true; document.write(0); while(stare){ rez+=++I; if(i== 10){ rez=false; } } document.writeln(=+rez); Figura 3.46 </script> 5. Care este rolul instruciunii switch? 6. Care este rolul instruciunilor break i c ontinue? 7. Scriei un script care calculeaz i afieaz valoarea polinomului: 5X2+4X+10 pentru x=2. 8. Identificai erorile de sintax din urmtoarele script-uri: Figura 11.6 (Conversaia 11); Figura 11.7 (Conversaia 11); Figura 11.8 (Conversaia 11); Figura 11.9 (Conversaia 11); Figura 11.10 (Conversaia 11); 122 Figura 11.12 (Conversaia 11); Figura 11.13 (Conversaia 11). Vizitai site-urile www.bdml.net/listes www.natural.com/JavaScript http://www.webcoder.com http://Ja vaScript.internet.com/miscellaneous/ http://www.geocities.com/jeffery_p_sanders/ http://JavaScript.internet.com/forms/checkbox_changer.html Conversaia 4 Obiectele interne String, Array n aceast conversaie: Obiectele limbajului JavaScript. Prezentare general Obiectele interne Obiectul St ring. Aplicaii Obiectul Array. Aplicaii EXEMPLUL 4 JAVASCRIPT Tem Obiectele limbajului JavaScript. Prezentare general Dup cum ai putut constata, variabilele din programele pe care le-ai realizat pn acum servesc la stocarea valorilor: numerice, caracter, ir de caractere, booleene etc. n egal msur, JavaScript permite i gestionarea obiectelor. Obiectele JavaScript sunt de trei tipuri: Obiecte interne (integrate) fac parte din limbajul JavaScript. O biectele navigatorului Obiecte personalizate nu fac parte din limbajul JavaScrip t, dar sunt recunoscute de navigatoare. obiecte create de utilizator. 124 Obiectele interne Cu trei din obiectele interne ale limbajului JavaScript, dumneavoastr ai fcut deja

cunotin: Math care este un obiect predefinit JavaScript i cuprinde numeroase constan te i funcii; Number i Boolean (vezi Conversaia 2). Lista complet a obiectelor interne (integrate) ale limbajului JavaScript este prezentat (n ordine alfabetic) n figura 4.1. Obiect intern Descriere Reprezint matrice Conine valorile: TRUE (adevrat) sau FALSE (fals). Obiect predefin it JavaScript care permite manipularea orelor i a datelor calendaristice. Numele de obiect al unui obiect Function este considerat ca o variabil reprezentnd valoar ea curent a funciei create cu (sub forma unei matrici) valoarea argumentelor trans mise unei funcii. Arguments Array Boolean Date Function new Function(), n timp ce numele unei funcii JavaScript standard nu este o variabil, ci doar numele unei funcii. Math Number Object RegExp String Figura 4.1 Obiect predefinit JavaScript care conine mai multe funcii i constante matematice. F aciliteaz gestiunea numerelor. Obiect JavaScript din care deriv toate celelalte ob iecte. Obiect predefinit JavaScript dedicat expresiilor regulate. Furnizeaz supor tul pentru manipularea i prelucrarea irurilor de caractere. Obiectul String JavaScript stocheaz irurile de caractere ca obiecte String. Fia obiectului String e ste prezentat n figura 4.2. 125 Fia obiectului String Cum se creeaz obiectul? Proprieti: Metode: Constructorul String() length anchor(), charAt(), fixed(), big(), blink(), bold( ), concat(), fontsize(), match(), substr(), charCodeAt(), fontcolor(), link(), s ub(), fromCharCode(), indexOf(), italics(), lastindexOf(), split(), replace(), search( ), slice(), small(), strike(), sup(), substring(), Figura 4.2 Gestionarii de evenimente: toLowerCase(), toString(), toUpperCase() Constructorul String() Constructorul String() creeaz un nou ir de caractere. Constructorul String() este prezentat n detaliu n figura 4.3. Constructor Sintax String() variabila=new String() variabila=new String(ir) variabila=ir Se poate crea un ir de caractere vid sau transmind ca argument constructorului irul de caractere care va conine noul obiect String. Crearea irurilor de caractere este de cele mai multe ori implicit. Constructorul String() poate fi de asemenea util izat ca funcie. n acest caz el convertete valoarea n ir de caractere. Dac nici o valoa re nu este transmis funciei, atunci acesta returneaz un ir vid. Exemplu:

Figura 4.3 <script> //creare implicit a irurilor de caractere anotimp=toamna; celebrul=702; //Str ing() utilizat ca funcie a=7; b=FALSE; document.write(String(a)+<br />); document.w rite(String(b)+<br />); </script> 126 Proprietile obiectului String Proprietile obiectului String sunt prezentate n detaliu n figura 4.4. Proprietate Sintax length ir.length Conine lungimea irului de caractere. Exemplu: Figura 4.4

<script> demo_sir=nvai s privii dincolo de aparene!; lungime=demo_sir.length; //afi /script> Remarc. Un obiect String (scriei S cu majuscul) este diferit de datele (ir de caract ere) pe care le conine. Metodele obiectului String Metodele obiectului String pot fi clasificate dup cum urmeaz: Metode pentru format area irurilor de caractere big(), blink(), bold(), fontcolor(), fontsize(), italics(), small(), strike(), sub(), sup(). Metode pentru manipularea irurilor de caractere anchor(), charAt(), charCodeAt(), concat(), fixed(), fromCharCode(), indexOf(), lastIndexOf(), link(), match(), replace(), search(), slice(), split(), substr(), substring(), toLowerCase(), toString(), toUpperCase( ). Metode pentru formatarea irurilor de caractere Metodele obiectului String pentru formatarea irurilor de caractere sunt prezentat e n detaliu n figura 4.5. Metode Sintax big() Exemplu:

ir.big() ncadreaz un ir de caractere cu tag-urile <big>...</big>. Figura 4.5

<script> demo_sir=nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.big(); do t.write(nou_demo_sir); </script> 127 blink() ir.blink() ncadreaz un ir de caractere cu tag-urile <blink>...</blink>. Exemplu: <script> demo_sir=nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.blink(); ent.write(nou_demo_sir); </script> bold() ir.bold() ncadreaz un ir de caractere cu tag-urile <bold>...</bold>. Exemplu: <script> demo_sir= nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.bold(); ent.write(nou_demo_sir); </script> fontcolor() ir.fontcolor(ir) Atribuie irului de caractere culoarea indicat n tag-ul <font> de atributul color. Exemplu:

<script> demo_sir= nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.fontcolo 000); document.write(nou_demo_sir); </script> fontsize() ir.fontsize(Valoare) Atribuie irului de caractere dimensiunea indicat cu tag-ul <font> de atributul siz e. Exemplu:

<script> demo_sir= nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.fontsize document.write(nou_demo_sir); </script> italics() ir.italics(ir) ncadreaz un ir de caractere cu tag-urile <i>...</i>. Exemplu:

<script> demo_sir= nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.italics( cument.write(nou_demo_sir); </script> small() ir.small(ir) ncadreaz un ir de caractere cu tag-urile <small>...</small>. Exemplu: (continuare) Figura 4.5

<script> demo_sir= nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.small(); ment.write(nou_demo_sir); </script> 128 strike() ncadreaz Exemplu:

ir.strike() un ir de caractere cu tag-urile

<strike>...</strike>. <script> demo_sir= nvai s privii dincolo de aparene!; nou_demo demo_sir.strike(); document.write(nou_demo_sir); </script> sub() ir.sub() ncadreaz un ir de caractere cu tag-urile _.... Figura 4.5 sup() ir.sup() (continuare) ncadreaz un ir de caractere cu tag-urile ^.... Metode pentru manipularea irurilor de caractere Metodele obiectului String pentru manipularea irurilor de caractere sunt prezenta te n detaliu n figura 4.6. Metode Sintax anchor() atributul name. ir.anchor(ir) Convertete un ir de caractere ntr-o ancor numit cu tag-ul <a> i charAt() ir.charAt(Valoare) Returneaz caracterul poziionat n irul de caractere. Exemplu: <script> vocale=aeiou; r=vocale.charAt(3); document.write(r); //afieaz o </script> c harCodeAt() ir.charCodeAt(Valoare) Returneaz valoarea codului Unicode al caracterului situat n poziia indicat n irul de c aractere. concat() ir.concat(ir) Adaug un nou ir de caractere la sfritul unui alt ir de caractere. Metoda este echival ent cu operatorul +. Exemplu: <script> sir_1=sir_1.concat(Felicitri pentru rbdarea de a ne fi descoperit!); docume nt.write(sir_1); </script> fixed() ir.fixed() ncadreaz un ir de caractere cu tag-urile <tt>...</tt>. Figura 4.6 129 fromCharCode() ir.fromCharCode(Valoare) Returneaz codul Unicode corespunztor caracterului indicat. indexOf()

ir.indexOf(ir,Valoare) Caut un caracter ntr-un ir de caractere i returneaz indexul primei apariii (primul car acter are indexul 0). Metoda face diferen ntre majuscule i minuscule. n caz contrar m etoda returneaz valoarea -1. Exemplu: Exemplu: Exemplu:

<script> email=ld@canaba.com; r=email.indexOf(@); document.write(r); //afieaz 2 </scri pt> <script> email=pepito@brazil.com; r=email.indexOf(i,6); document.write(r); //afie az 11 </script> <script> email=ld@canaba.com; r=email.indexOf(canaba); document.write (r); //afieaz 3 </script> lastIndexOf() ir.lastIndexOf(ir) Caut ultima apariie a irului de caractere i returneaz indexul poziiei sale. n caz de e , se returneaz valoarea 1. Metoda face deosebire ntre majuscule i minuscule. Exemplu: <script> email=ld@canaba.com; r=email.lastindexOf(@); document.write(r); //afieaz 2 </ script> link() ir.link(ir) ncadreaz un ir de caractere cu tag-urile <a>..</a>. match ir.match(expresieregulat)

Caut o expresie regulat ntr-un ir de caractere i returneaz rezultatul ntr-o matrice. az de eec, metoda returneaz valoarea null. Exemplu:

<script> model=/\d{1,3}/; adresa=195.14.45.78; document.write(adresa.match(model)) ; </script> replace() ir.replace(expresieregulat, ir) Caut o expresie regulat i nlocuiete caracterele gsite prin irul de caractere indicat el de-al doilea argument. n caz de eec, nlocuirea nu se efectueaz. (continuare) Figura 4.6 130 Exemplu:

<script> model=/ION/i; text=ion@yahoo.com; r=text.replace(model.ION); document.write (r); //afieaz yahoo.com </script> search() ir.search(expresieregulat) Caut o expresie regulat ntr-un ir de caractere i returneaz valoarea poziiei primului c racter gsit. n caz de eec, metoda returneaz valoarea 1. Exemplu: <script> model=/pion/i; text=Nebunul i Pionul; document.write(text.search(model)); //afieaz 11 </script> slice() ir.slice(Valoare1,Valoare2) Extrage o parte dintr-un ir de caractere i returneaz irul extras. Exemplu: Exemplu:

<script> text=liv@canaba.com; a=text.slice(4,100); document.write(a); //afieaz can aba.com </script> <script> text=ion@yahoo.com; rezultat=text.slice(0,3); document. write(rezultat); //afieaz ion </script> split() ir.split(ir) Divizeaz un ir de caractere n subiruri i returneaz o matrice. Metoda recunoate expresi le regulate. substr() ir.substr(Valoare1,Valoare2) Extrage o parte din irurile de caractere i returneaz irul extras. Exemplu: <script> text=ion@yahoo.com; r=text.substr(0,3); document.write(r); //afieaz ion </s cript> substring() ir.substring(Valoare1,Valoare2) Extrage o parte dintr-un ir de caractere i returneaz irul extras. Exemplu: (continuare) Figura 4.6 <script> email=ion@yahoo.com; r=email.substring(0,3); document.write(r); //afieaz io n </script> 131 toLowerCase() ir.toLowerCase() Convertete un ir de caractere n minuscule. Exemplu:

<script> text=Mitic i Petric; r=text.toLowerCase(); document.write(r); //afieaz mitic etric </script> toString() ir.toString() Convertete o valoare numeric sau boolean n ir de caractere. Exemplu: <script> a=TRUE; b=314; document.write(a.toString()+,); document.write(b.toString( )); //afieaz TRUE,314 </script> toUpperCase() ir.toUpperCase(ir) Convertete un ir de caractere n majuscule. Exemplu: (continuare) Figura 4.6 <script> email=ion@yahoo.com; rezultat=email.toUpperCase(); document.write(rezulta t); //afieaz ION@YAHOO.COM </script> Obiectul Array Aplicaiile din conversaiile anterioare au fost construite pe tipuri de date simple crora le-au fost asociate variabile simple. Suntei un ... gurmand de variabile? D ac da, folosii obiectul intern Array (matrice). O matrice (array) este o list de va lori sau de referine ctre alte obiecte. O matrice poate conine, de exemplu o list de date numerice sau alfanumerice. Fia obiectului intern Array este prezentat n figur a 4.7.

132 Fia obiectului Array Cum se creeaz obiectul? Proprieti: Metode: constructorul Array() length concat(), reverse(), join(), shift(), pop(), slice( ), push(), sort(), splice(), toString(), unshift() Figura 4.7 Gestionarii de evenimente: Constructorul Array() Pentru a crea o nou matrice, utilizai constructorul Array(). Constructorul Array() este prezentat n detaliu n figura 4.8. Constructor Sintax Array() variabila=new Array() variabila=new Array(numr_elemente) variabila=new Array(elem ent1,element2,...) variabila=[] variabila=[,,,,] variabila=[element1,element2,] Creeaz o nou matrice. Noua matrice poate fi vid, dimensiunea sa (numrul de elemente) poate fi predefinit sau poate fi, de asemenea iniializat cu o list de elemente. Num erotarea elementelor unei matrici ncepe de la zero. Spre deosebire de majoritatea tipurilor de variabile JavaScript, array-urile trebuie s fie declarate nainte de a fi utilizate. ncepnd cu versiunea 1.2 JavaScript, instruciunea new Array() nu mai este indispensabil. Se pot utiliza, n mod simplu parantezele drepte ([]). n limbaj ul JavaScript nu se pot crea matrici cu mai multe dimensiuni, dar putei imbrica m ai multe matrici. ncepei prin a crea o matrice clasic (cu o dimensiune) iar apoi, n fiecare element al vectorului inserai cte un array. Exemplu: Exemplu: <script> ListaCulori=new Array(); ListaCulori=[rosu,galben,albastru]; </script> <scrip t> ListaCulori=new Array(7); </script> <script> ListaCulori=new Array(rosu,galben,alb astru); </script> Exemplu: Figura 4.8 133 Exemplu:

<script> ListaCulori=[rosu,galben]; </script> <script> culoare1=rosu; culoare2=galben uloare3=albastru; ListaCulori=[culoare1,culoare2, culoare3]; </script> Tabelul 1 Exemplu: Exemplu: a11 a21 a31 a12 a22 a32

a13 a23 a33 a14 a24 a34 Exemplu: Exemplu: Exemplu: (continuare) Figura 4.8

<script> //creare matrice (vezi tabelul 1) cu trei linii i patru coloane linie=ne w Array(3); linie[0]=new Array(a11,a12,a13,a14); linie[1]=new Array(a21,a22,a23 ew Array(a31,a32,a33,a34); document.write(linie[1][2]+<br>); //Se afieaz a23 docu linie[0]); //Se afieaz a11, a12, a13, a14 </script> <script> ListaCulori=new Array (rosu,galben,albastru,verde); document write(ListaCulori+<br />); //Se afieaz ros albastru, verde ListaCulori[1]=violet; document.write(ListaCulori); //Se afieaz rosu , violet, albastru, verde </script> <script> /*Crearea unei matrici i modificarea celui de-al doilea element*/ mere=new Array(ionatan,cretesti,dulci); document.write(m ere+<br>); //Se afieaz ionatan, creeti, dulci mere[1]=parmen-auriu; document.write(me ; </script> <script> /*Afiarea elementelor unei matrici cu o bucl for*/ student=ne w Array(Alin,Bogdan,Catalin,Dan); for(i=0;i<4;i++){ document.write(student[i]+<br>) cript> 134 Proprietile obiectului Array Proprietile obiectului Array()sunt prezentate n detaliu n figura 4.9. Proprietate Sintax length matrice.length Conine numrul de elemente al unei matrici. Putei modifica valoarea acestei proprieti. Reducnd numrul de elemente, elementele se suprim pornind din dreapta matricii. Exemplu: Exemplu: Figura 4.9 <script> lista_numere=new Array(3,7,9,50,20,23,2); document.write(lista_numere.l ength+ numere); //Se afieaz 7 numere </script> <script> lista_numere=new Array(6,9,7 ,56,48); document.write(lista_numere.length+ numere <br>); for(i=0;i<lista_numere. length,i++){ document.write(lista_numere[i]+); } lista_numere.length=2; document.wri te(<br>+lista_numere.length+ numere <br>); for(i=0;i<lista_numere.length;i++){ docum ent.write(lista_numere[i]+ ); } </script> Metodele obiectului Array Metodele obiectului Array sunt prezentate n detaliu n figura 4.10. Metod Sintax concat() matrice=matrice.concat(matrice) matrice=matrice.concat(Element1, Elemen t2,...) Metoda este utilizat pentru concatenarea a dou matrici. Exemplu:

Figura 4.10 <script language=javascript type=text/javascript> //concatenarea a dou matrici lista_ numere1=new Array(6,9,7); lista_numere2=new Array(5,68); lista_numere3=lista_num ere1.concat(lista_numere2); document.write(lista_numere3.length+ numere <br />); f or(i=0;i<lista_numere3.length;i++){ document.write(lista_numere3[i]+); } </script> 135 Exemplu: <script language=javascript type=text/javascript> //concatenarea a dou matrici lista_ numere1=new Array(6,9,7); lista_numere3=lista_numere1.concat(13,22); document.wr ite(lista_numere3.length+ numere <br />); for(i=0;i<lista_numere3.length;i++){ doc ument.write(lista_numere3[i]+); } </script> join() matrice.join() matrice.join(Separ ator) Metoda este utilizat pentru convertirea unei matrici ntr-un ir de caractere. Argume ntul Separator servete la separarea elementelor in ir. Fr argument, metoda join() util izeaz virgula. Exemplu: <script> subsir=new Array (6,9,7); sir=subsir.join(); document.write(sir+<br />); sir=subsir.join(*); document.write(sir); </script> Rezultatele execuiei script-ului 6,9,7 6*9*7 pop() matrice.pop() Metoda suprim ultimul element al unei matrici. Proprietatea length este modificat n mod automat. Metoda returneaz valoarea elementului suprimat. Metoda pop() nu cer e nici un argument. Exemplu: <script language=javascript type=text/javascript> lista=new Array(1,9,47); el_suprim at=lista.pop(); document.write(Elementul suprimat: +el_suprimat+<br />); document.wr ite(lista); </script> push() Exemplu: matrice.push() Metoda adaug noi elemente la sfritul matricii. Proprietatea length este modificat n m od automat.

<script language=javascript type=text/javascript> culori=new Array(rosu,galben); adau lori.push(albastru); document.write(Numrul de elemente: culori.length+ <br />); docume t.write(culori); </script> reverse() matrice.reverse() Metoda inverseaz ordinea elementelor unei matrici (nu cere nici un argument). Exemplu: Figura 4.10 (continuare)

<script language=javascript type=text/javascript> culori=new Array(rosu,galben,albas document.write(culori+<br />); culori_invers=culori.reverse(); document.write(culo

ri); </script> 136 shift() matrice.shift() Metoda suprim primul element al unei matrici. Elementul de rang 1 devine de rang 0, cel de rang 2 devine de rang 1 .a.m.d. Proprietatea length se modific n mod auto mat. Metoda returneaz valoarea elementului suprimat i nu cere nici un argument. <s cript language=javascript type=text/javascript> lista_numere=new Array(13,20,22); su prim=lista_numere.shift(); document.write(Elementul suprimat: +suprim+<br />); docum ent.write(lista_numere); </script> Exemplu: slice() matrice.slice(ValoareNumerica1, ValoareNumerica2) Metoda extrage elementele unei matrici i returneaz o nou matrice care conine aceste elemente. Matricea iniial nu este modificat. Elementele extrase depind de dou argume nte: ValoareNumerica1 (indic rangul primului element care urmeaz a fi extras), Val oareNumerica2 (indic rangul imediat urmtor ultimului element care urmeaz a fi extra s). Dac primul argument este negativ, atunci rangul se calculeaz pornind de la sfrit ul matricii. El este ntotdeauna de rang 0. Dac cel de-al doilea argument este nega tiv, el indic rangul (calculat, pornind de la sfritul matricii) ultimului element c are urmeaz a fi extras. Dac nu este menionat, caracterele sunt extrase ncepnd cu rang ul furnizat de primul argument pn la sfritul matricii. Exemplu: <script language=javascript type=text/javascript> lista_numere=new Array(1,2,3,4,5,6 ,7,8); lista_1=lista_numere.slice(2,5); document.write(lista_1+<br />); //se afieaz 3,4,5 lista_2=lista_numere.slice(3); document.write(lista_2+<br />); //se afieaz 4,5 ,6,7,8 lista_3=lista_numere.slice(2,1); document.write(lista_3+<br />); //se afieaz 3 ,4,5,6,7 lista_4=lista_numere.slice(2); document.write(lista_4+<br />); //se afieaz 7 ,8 </script> splice() matrice.splice(Rang,NumarElemente, Element1,Element2,...) Metoda suprim elementele unei matrici i le nlocuiete cu altele. Rangul elementului d e la care trebuie s nceap suprimarea elementelor matricii este obligatoriu. Al doil ea argument (NumarElemente) precizeaz numrul elementelor ce urmeaz a fi suprimate. Argumentele urmtoare (Element1,Element2,...) reprezint elementele care urmeaz a fi inserate Figura 4.10 (continuare) n matrice ncepnd cu rangul indicat pentru primul element. Metoda returneaz lista ele mentelor suprimate. 137 Exemplu: <script language=javascript type=text/javascript> lista_numere=new Array(1,2,3,4,5,6 ,7,8); a=lista_numere.splice(2,2,35,36); document.write(Numere: lista_numere+<br />) ; //se afieaz 1,2,35,36,5,6,7,8 </script> toString() matrice.toString() Metoda returneaz coninutul unei matrici sub forma unui ir de caractere. Exemplu:

<script language=javascript type=text/javascript> culori=new Array(rosu,galben,albas a=culori.toString(); document.write(a); //se afieaz rosu,galben,albastru </script> unshift() matrice.unshift(Element1,Element2,..) Metoda insereaz la nceputul matricii elementele pe care le menionai. Proprietatea le ngth este modificat n mod automat. Exemplu:

<script language=javascript type=text/javascript> culori=new Array(rosu,galben,albas culori.unshift(verde,violet); document.write(culori); //se afieaz verde,violet,rosu,ga lben,albastru </script> sort() matrice.sort() matrice.sort(Funcie) matrice.sort() sau metoda sort fr argument sorteaz elementele unei matrici care conine valori alfanumerice; Figura 4.10 (continuare) matrice.sort(Funcie) permite sortarea valorilor numerice. Funcie primete doi parame tri i returneaz o valoare numeric. 138 Exemplu: Rezultatele execuiei script-ului: Figura 4.10 (continuare) 139 Exemplu: Rezultatele execuiei script-ului: Figura 4.10 (continuare) 140 EXEMPLUL 4 JAVASCRIPT Formularea problemei Problema care se pune acum seamn cu celelalte, dar ... este puin mai complicat. Se c itesc de la tastatur, ntr-o matrice livrrile de benzin efectuate zilnic (luni, mari, miercuri, joi, vineri) din cele trei rezervoare (cilindrice echilaterale) R1, R2 , R3. Se dorete ca, pentru fiecare rezervor n parte, s se afieze, pe zile, cantitile d e benzin livrate beneficiarilor. Se va tipri, de asemenea, media livrrilor pe zile i pe rezervoare. La finele raportului se vor afia maximul i minimul livrrilor, preci zndu-se att rezervorul ct i ziua respectiv. Analiza problemei Formatul datelor de input/output (intrare/ieire), tabela de variabile, specificaii le de programare sunt ilustrate n figurile: 4.11, 4.12, 4.13. Figura 4.11 141 Tabela de variabile Variabile de intrare a: matricea livrrilor pe zile i rezervoar e Variabile de stare st: livrrile totale pe zile i rezervoare s: sume pariale, livrr

i pe zile z: vectorul numelor zilelor sptmnii imax, imin, jmax, jmin: indicii livrri lor maxime i minime din matricea a Variabile de iesire b: vectorul livrrilor medii zilnice d: vectorul livrrilor medii pe rezervoare max: maximul livrrilor min: min imul livrrilor Figura 4.12

Specificaii de programare Descriere. Programul editeaz situaia livrrilor de benzin ef ectuate zilnic din trei rezervoare cilindrice echilaterale. Livrrile, pe zile i pe ntru fiecare rezervor n parte, se citesc de la tastatur. Programul mai afieaz maximu l i minimul livrrilor nsoite de rezervorul i ziua respective. Intrri. Matricea livrril r pe rezervoare i zile. Ieiri. Lista cu situaia livrrilor. Lista de funciuni ale scri pt-ului 1. Citete livrrile zilnice de benzin (luni, mari, 2. miercuri, joi, vineri) pentru rezervorul R1. Citete livrrile zilnice de benzin (luni, mari, miercuri, joi, vineri) pentru rezervorul R2. 3. Citete livrrile zilnice de benzin (luni, mari, mier curi, joi, vineri) pentru rezervorul R3. 4. 5. Figura 4.13 Calculeaz media livrril or pe zile. Calculeaz rezervoare. media livrrilor pe 9. 6. 7. 8. Calculeaz maximul livrrilor. Calculeaz minimul livrrilor. Afieaz maximul livrrilor, numrul rezervorului ziua. Afieaz minimul livrrilor, numrul rezervorului i ziua. 10. Trunchiaz media (livrr lor pe zile i pe rezervoare). 11. Stop Proiectarea script-ului n figura 4.14 se prezint pseudocodul, varianta formalizat. 142 Pseudocodul BEGIN //initializeaza vectorul Z cu numele zilelor z=luni,marti,miercuri,joi vin eri //aloca spatiu de memorie si //citeste livrarile pe fiecare rezervor de la t astatura LIVI FOR(i=0;i<3;i++) LIVJ FOR(j=0;j<5;j++) READ ai,j LIVJ ENDFOR LIV E NDFOR // aloca spatiu de memorie pentru vectorul b si d // calculeaza mediile pe rezervoare FORJ FOR(j=0;j<5;j++) s=0 FORI FOR(i=0;i<3;i++) s=s+ai,j FORI ENDFOR bj=s/3 FORJ ENDFOR // calculul mediilor pe rezervoare st=0 FORMEDII FOR(i=0;i<3 ;i++) s=0 FORMEDIIJ FOR(j=0;j<5;j++) s=s+ai,j st=st+aij FORMEDIIJ ENDFOR di=s/5 FORMEDII ENDFOR d3=s/15 // determinarea maximului si minimului max=a0,0 min=a0,0 imax=0 imin=0 jmax=0 jmin=0 FORMAXI FOR(i=0;i<3;i++) FORMAXJ FOR(j=0;j<5;j++) I FMAX IF(max<ai,j) max=aij imax=i jmax=j IFMAX ENDIF IFMIN IF(min>ai,j) min=aij i min=i jmin=j IFMIN ENDIF FORMAXJ ENDFOR FORMAXI ENDFOR imin=imin+1 imax=imax+1 / /afisare rezultate WRITE "SITUATIA REZERVOARELOR R1 R2 R3" WRITE "ZIUA R1 R2 R3 MEDIA" Exemplul5 Figura 4.14 143 FOR(k=0;k<5;k++) WRITE Z[k] FORJ FOR(j=0;j<3;j++) WRITE a[j][k] FORJ ENDFOR WRIT E trunchiaza( b[k]) FORK ENDFOR WRITE "MEDIA" FORTRUNC FOR(j=0;j<4;j++) WRITE tr unchiaza(d[j]) FORTRUNC ENDFOR WRITE "Livrarea maxima: " max WRITE "s-a facut di n rezervorul: R" imax WRITE "in ziua de" Zjmax WRITE "Livrarea minima:" min WRIT E " s-a facut din rezervorul: R"imin WRITE " in ziua de "+Zjmin Exemplul5 END // transforma o valoare reala in sir de caractere // si trunchiaza la doua zecimal e TRUNCHIAZA BEGIN Parametrii: x- valoare reala s=transforma in sir de caractere x i=pozitia punctului zecimal in sir IFCOPY IF(i-1) s=copiazasubsi (s,0,i+2) IFC OPY ENDIF RETURN s TRUNCHIAZA END FORK Figu a 4.14

(continua e) Codifica ea n limbajul JavaSc ipt n figu a 4.15 este p ezentat documentul (X)HTML complet. <html> <head> <title>Exemplul 4</title> <sc ipt language="javasc ipt"> <!--va Z = new A ay("Luni","Ma ti","Mie cu i","Joi","Vine i"); a=new A ay(3); a[0]=new A ay(5); a[1]=new A ay(5); a[2]=new A ay(5); fo (i=0;i<3;i++) fo (j=0;j<5;j+ +) {k=i+1; a[i][j]=pa seFloat(p ompt("Liv a e din eze vo ul R"+k+ " ziua:"+Z[j] ,0)); } // --> </sc ipt> Figu a 4.15 </head> 144 <body> <cente > <h3>SITUATIA LIVRARILOR DE BENZINA PENTRU REZERVOARELE R1 R2 R3 </h3> <sc ipt language="javasc ipt"> function t unchiaza(x) { va s=""+x; i=s.in dexOf("."); if(i!=-1){ s=s.subst ing(0,i+3); } etu n s; } // CALCULUL MEDIILOR PE ZILE va i,j; B = new A ay(5); fo (j=0;j<5;j++) { S=0; fo (i=0;i<3;i++) S=S+ a[i][j]; B[j]=S/3; } // CALCULUL MEDIILOR PE REZERVOARE D = new A ay(4); ST=0; fo (i=0;i<3;i++) { S=0; fo (j=0;j<5;j++){ S=S+a[i][j]; ST=ST+a[i][j]; } D[i]=S/5 ; } D[3]=ST/15; // DETERMINAREA MAXIMULUI SI MINIMULUI max=a[0][0]; min=a[0][0]; imax=0;imin=0; jmax=0;jmin=0; fo (i=0;i<3;i++){ fo (j=0;j<5;j++){ if(max<a[i][j ]){max=a[i][j];imax=i;jmax=j;} if(min>a[i][j]){min=a[i][j];imin=i;jmin=j;} } } F igu a 4.15 imin++;imax++; (continua e) 145 //AFISARE REZULTATE document.w iteln("<cente ><table bo de =1 bgcolo #efefff><t > "); document.w iteln("<td><b>ZIUA</b><td><b>R1</b><td> <b>R2</b><td><b>R3</b><td ><b>MEDIA</b></td></t >"); fo (k=0;k<5;k++) { document.w iteln("<t ><td>" + Z[k] +"</td>"); fo (j=0;j<3;j++) { document.w iteln("<td>" + a[j][k]+ "</td>"); } doc ument.w iteln(" <td> " +t unchiaza( B[k])+ "</td></t >"); } document.w iteln("<t ><td><b>MEDIA</b>"); fo (j=0;j<4;j++) document.w iteln("<td><b>" + t unchiaza(D [j])+" </b></td>"); document.w iteln("</t >"); document.w iteln("</table></cente ><p><p>"); document.w iteln("<font size=+1 colo =g een>Liv a ea maxima:"+max+" s-a facut din eze vo ul: R"+imax+" in ziua de "+Z[jmax]+"</font>"); document.w iteln("<p><font size=+1 colo =g een>Liv a ea minima:"+min+" s-a facut din eze v o ul: R"+imin+" in ziua de "+Z[jmin]+"</font>"); </sc ipt> Figu a 4.15 </body> ( continua e) </html> Rezultatele execuiei script-ului sunt prezentate n figura 4.16. Figura 4.16 146 Aplicaie Problema care se pune acum seamn cu cea din EXEMPLELE precedente, dar este ... puin mai complicat! Se citesc de la tastatur un numr oarecare (maxim 30) de val ori ale razelor unor rezervoare cilindrice echilaterale. Pentru fiecare valoare a razei se calculeaz i afieaz cantitatea de benzin din rezervor. Script-ul verific tot odat ca valorile razelor rezervoarelor s fie numere pozitive. De asemenea, scriptul calculeaz i afieaz masa total de benzin din rezervoare. n felul acesta, cu acelai ipt se pot rezolva probleme ce difer prin numrul de rezervoare. Analiza problemei Problemele care se pun n aceast etap privesc n mod special alctuire a tabelei de variabile, mai precis identificarea variabilelor de intrare ale scr ipt-ului. Numrul rezervoarelor, necunoscut n problem, trebuie furnizat ca o variabi l de intrare (n) n momentul execuiei script-ului, naintea citirii datelor propriu-zi se (razele rezervoarelor). Ct privete numrul variabil de raze, de asemenea necunosc ut n momentul scrierii script-ului vom folosi ca variabil de intrare o matrice(arr ay) cu o singur dimensiune un vector. Remarc. n informatic, se desemneaz prin abuz de limbaj sub numele de vector, mulimea

{V(1), V(2), , V(n)}, unde V(1), V(2), , V(n) sunt elementele vectorului. Aadar, un vector este o mulime de elemente identificate prin poziia pe care acestea o ocup. Prelucrrile ce se efectueaz asupra unui vector sunt funcie de valoarea unui indice de poziie (0<=i<=n). Acestuia i se fixeaz o valoare care, n general, corespunde pri mei poziii, iar prelucrarea se efectueaz ct timp valoarea acestui indice nu depete o v aloare final. n figura 4.17, 4.18, 4.19 sunt prezentate: formatul datelor de ieire, tabela de va riabile, specificaiile de programare. Formatul datelor de ieire RAZA xx xx . xx MASA TOTALA= MASA xxx.xx xxx.xx . xxx.xx xxx.xx TONE Tabela de variabile Figura 4.17 Variabile de intrare n: numrul de rezervoare r: vectorul razelor rezervoarelor Variabile de stare d: densitatea benzinei i: indicele de poziie (indexul) v: volumul rezervorului s: masa total de benzin m: masa de benzin din rezervor Variabile de iesire m: cantitatea de benzin din rezervor s: cantitatea (masa) total de benzin Figura 4.18

147 Specificaii de programare Descriere. Script-ul calculeaz i afieaz cantitatea de benzi n (s) dintr-un numr oarecare (n) de rezervoare cilindrice echilaterale (acest numr este furnizat ca parametru). Script-ul citete valorile razelor rezervoarelor ntr-u n vector de date (r) printr-o procedur de introducere dinamic a datelor (razele cu valori negative nu se iau n considerare!). Pentru raze cu valori negative, scrip t-ul afieaz mesajul: Raza negativ. Valoarea densitii benzinei (d) se introduce n mod tic. Intrri. Se introduc de la tastatur numrul rezervoarelor cilindrice echilateral e i valorile razelor acestora. Ieiri. Masa de benzin (m) din fiecare rezervor i masa total (s) de benzin. Lista de funciuni ale script-ului 1. 2. 3. 4. 5. 6. Citete numr rezervoare (n). Iniializeaz variabila (s). Atribuie variabilei d valoarea 0.7 (de nsitatea benzinei). Afieaz un rnd de 30 de =. Afieaz raza, masa. Pentru fiecare reze (cilindric echilateral): 6.1 6.2 Citete valoarea razei unui rezervor. Valideaz dat ele introduse dup cum urmeaz: pentru fiecare articol se verific dac valoarea razei c itite este negativ. Script-ul afieaz mesajul: Raza negativ. 7. Pentru fiecare rezervor (cilindric echilateral): 7.1 7.2 7.3 7.4 Figura 4.19 9. Stop Calculeaz volumul r ezervorului. Calculeaz masa de benzin din rezervor. nsumeaz m n s. Afieaz r, m 8. Afieaz masa total de benzin Proiectarea programului n figura 4.20 se prezint pseudocodul, varianta formalizat. Pseudocodul REZERVOARE BEGIN d=0.7 s=0 //Citeste numar rezervoare(n) READ(n) BEGIN Do LINIUTZA WRITE(raz a+ +masa); DO LINIUTZA END CAP-TABEL Figura 4.20 CAP-TABEL 148

PREL-VALID VALID FOR(i=1;i<=n;i++) READ(r[i]) WRITE(r[i]); WHILE (r[i]<0) WRITE(Raza negativa) READ (r[i]) WRITE(r[i]) ENDWHILE ENDFOR FOR(i=1;i<=n;i++) m=2dr[i]3 s=s+m WRITE(r[i]+m ) ENDFOR WRITE(s) END BEGIN Afiseaza un rand de 30 de = END VALID PREL-VALID CALC-MASA CALC-MASA REZERVOARE LINIUTZA LINIUTZA Figura 4.20 (continuare) Codificarea n limbajul JavaScript n figura 4.21 este prezentat documentul (X)HTML complet. Figura 4.21 Rezultatele execuiei script-ului sunt prezentate n figurile 4.22, 4.23 . 149 Figura 4.22 Figura 4.23 150 JavaScript Testai-v cunotinele Tem 1. Care sunt obiectele interne (integrate) ale limbajului JavaScript? 2. Cum se creeaz obiectul String? 3. Care sunt proprietile obiectului String? 4. Care sunt me todele pentru formatarea irurilor de caractere? 5. Ce realizeaz urmtoarele metode a le obiectului String: indexOf(); substr(); toLowerCase(). 6. Cum se creeaz obiectul Array? 7. Ce realizeaz urmtoarele metode ale obiectului A rray?

concat(); toString; sort(). 8. Se consider irul de caractere: sir=Protopopescu Augustin; Precizai ce valori retur neaz urmtoarele metode ale obiectului String: alert(sir.charAt(3)); //afieaz ...?... alert(sir.charCodeAt(3)); //afieaz ...?... alert(sir.indexOf(0)); //afieaz ...?... al ert(sir.indexOf(0,8)); //afieaz ...?... alert(sir.indexOf(z,8)); //afieaz ...?... 9. consider irul de caractere: sir=abcdef; Precizai ce valori returneaz urmtoarele metode ale obiectului String: alert(sir.slice(0,3)); //afieaz ...?... alert(sir.slice(1,3 )); //afieaz ...?... alert(sir.slice(3)); //afieaz ...?... alert(sir.slice(2,-1)); / /afieaz ...?... alert(sir.slice(2,-2)); //afieaz ...?... 151 alert(sir.slice(-2,-1)); //afieaz ...?... 10.Se consider irul de caractere: sir=a,b,c ,d,e,f; Precizai ce valori returneaz urmtoarele metode ale obiectului String: alert( sir.split(,)); //afieaz ...?... alert(sir.substr(2,2)); //afieaz ...?... alert(sir.sub str(3)); //afieaz ...?... alert(sir.substr(-3,2)); //afieaz ...?... alert(sir.substr (0,2)); //afieaz ...?... 11.Se consider matricea: g=[1,2,3]; Precizai ce valori retu rneaz urmtoarele metode ale obiectului Array: alert(g.concat(4,5)); //afieaz ...?...

alert(g.concat([4,5])); //afieaz ...?... alert(g.concat([4,5],[6,7])); //afieaz ... ?... alert(g.concat(4,[5,[6,7]])); //afieaz ...?... 12.Se consider matricea: g=[1,2 ,3,4,5]; Precizai ce valori returneaz urmtoarele metode ale obiectului Array: alert (g.slice(0,3)); //afieaz ...?... alert(g.slice(3)); //afieaz ...?... alert(g.slice(1 ,-1); //afieaz ...?... alert(g.slice(-3,-2)); //afieaz ...?... 13.Se consider funcia: function sortare(x,y){ return x-y; } i var g=new array(7,5,100,21); Precizai rezul tatele obinute n urma execuiei urmtoarelor metode: alert(g.sort()); //afieaz ...?... a lert(g.sort(sortare)); //afieaz ...?... 14.Care este efectul metodei join()? Care este relaia sa cu metoda split() a obiectului String? 15.Identificai erorile de si ntax din urmtoarele script-uri: Figura 11.3 (Conversaia 11, pagina 5); Figura 11.5 (Conversaia 11, pagina 5). 152 Vizitai site-urile www.bdml.net/listes www.natural.com/JavaScript http://www.webcoder.com http://ww w,dannyg.com/examples/ol2/index.htm Conversaia 5 Obiectele (interne) RegExp, Date, Arguments n aceast conversaie: Expresii regulate Obiectul RegExp. Aplicaii EXEMPLUL 5 JAVASCRIPT Obiectul Date. Aplicaii Obiectul Arguments. Aplicaii Tem Expresii regulate Expresiile regulate (Regular Expressions, n limba englez) sunt utilizate ca modele (tipare) de cutare pentru regsirea, tergerea i nlocuirea caracterelor. Expresiile re gulate nu sunt primordiale n programarea JavaScript, dar ele sunt universale (foa rte multe limbaje de programare le utilizeaz) i pot s v simplifice ... viaa odat ce el e au fort asimilate. Remarci: Implementarea expresiilor regulate n limbajul JavaScript a fost preluat d irect din limbajul Perl. Expresiile regulate sunt puin mai ... greu de digerat, d ar ele reprezint o funcie puternic a limbajului, ncepnd cu JavaScript 1.4. Versiunile ulterioare ofer numeroase mbuntiri. Expresiile regulate pot fi utilizate n e-commerce (comerul electronic) pentru validarea numerelor crilor de credit, a numerelor de t elefon, a adreselor etc. O expresie regulat este un obiect JavaScript. Utilizai (l a maximum) expresiile regulate n formularele dumneavoastr deoarece ele v garanteaz d ate fiabile (vezi Conversaia 8). Crearea expresiilor regulate este foarte asemntoar e cu crearea irurilor (strings, n limba englez). 154 Obiectul RegExp Obiectul RegExp() este un obiect predefinit (built-in), care nu depinde de navig ator. Fia obiectului RegExp() este prezentat n figura 5.1. Fia obiectului RegExp Cum se creeaz obiectul? Proprieti: constructorul RegExp() $, $&, $_, $\, $+, $n, global, ignoreCase, index, input, l astIndex, lastMatch, lastParen, leftContext, multiline, rightContext, source com pile(), exec(), test() Metode: Figura 5.1 Gestionarii de evenimente: Constructorul RegExp() Constructorul RegExp() este prezentat n detaliu n figura 5.2. Constructor Sintax

RegExp() Variabila=new RegExp(Model,Atribut) Variabila=/Model/Atribut Variabila va conine modelul expresiei regulate transmis ca parametru (Model). Atribu t (cel de-al doilea parametru) stocheaz sub forma unui ir de caractere atributele d e identificare ale modelelor (tiparelor). Cele trei atribute ale obiectului RegE xp sunt urmtoarele:

g cutare global; gsete toate apariiile posibile. i n cursul cutrii nu face deoseb majuscule i minuscule. m cutare multilinie (vezi zona textarea din cadrul unui fo rmular). gi cumuleaz opiunile g i i. Expresiile regulate pot fi create i n mod implicit. n acest caz, se atribuie modelu l (tiparul) ncadrat ntre mai multe bare oblice, direct unei variabile. Cele dou met ode de definire a unei expresii regulate sunt riguros echivalente. Slash-urile ( /) nu sunt necesare n constructorul RegExp(), deoarece Figura 5.2 se poate face d istincie ntre acesta i constructorul String(). 155 Caracterele de repetiie utilizate n identificarea modelelor (tiparelor) sunt preze ntate n figura 5.3. Caracter Descriere Caracterul precedent (x) este identificat de cel puin m ori, dar nu mai mult de n ori (m i n reprezint numere). Caracterul precedent (x) este identificat de cel pui n m ori. Caracterul precedent este identificat de m ori. Caracterul precedent (x ) este identificat o dat sau nici o dat. Caracterul precedent (x) este identificat cel puin o dat. Cutare multilinie (vezi zona textarea din cadrul unui formular). x{m,n} x{m, } x{m} x? x+ Figura 5.3 x* Clasele de caractere utilizate n identificarea modelelor (tiparelor) sunt prezent ate n figura 5.4: Clasa de caractere Descriere Orice caracter inclus ntre paranteze. Orice caracter, cu excepia caracterului (\n) salt la linie nou. Orice caracter care nu apare ntre paranteze. Orice caracter di n intervalul m la n care apare n irul de cutare. Orice caracter care nu se afl n inte rvalul de la m la n. w mic (\w) identific orice caracter (identic cu [a-z A-Z 0-9 ...]) W mare (\W) este opusul lui (\w) (identic cu [^a-z A-Z 0-9 ...]). s mic ( \s) identific orice caracter de spaiu (identic cu [\t\n\r\v]). S mare (\S) este op usul lui (\s) (identic cu [^\t\n\r\v]). d mic (\d) identific orice cifr ntre 0 i 9 ( identic cu [0-9]). D mare (\D) este opusul lui d mic (\d) (identic cu [^0-9]) Id entificare caracter backspace (\b este plasat ntre paranteze drepte). [...] . [^] [m-n] [^m-n] \w \W \s \S \d \D Figura 5.4 [\b] Remarc. Pentru a defini mai multe modele de cutare n aceeai expresie regulat, utilizai parantezele rotunde i operatorul SAU logic (|).

Indicatorii de poziie pe care i putei folosi n identificarea modelelor sunt prezentai n figura 5.5. Indicator de poziie Poziia n irul de caractere nceputul irului de caractere. Sfritul irului de caractere. Identific o poziie dintre u caracter de text i un caracter care nu este de text. Figura 5.5 ^ $ \b \B

Opusul lui \b. 156 Aplicaie n Tabelul 5.1 sunt prezentate mai multe exemple de utilizare a expresiilo r regulate. Comentai rezultatele cutrii lor. Tabelul 5.1 Atribut /12+3/ /ab?c/ /bon{1,2}us/ /1*2{5}3/ Gsete 123,122223 abc,ac bonus,bonnus 1222223 Nu gsete 12 abbc bonnnus 123,122222 Proprietile obiectului RegExp Proprietile obiectului RegExp sunt prezentate n detaliu (n ordine alfabetic) n figura 5.6. Proprietate $\ Sintax RegExp[$\] Returneaz textul situat la dreapta ultimului text gsit. Echivalent cu RightContext. Exemplu: <script language="javascript" type="text/javascript"> var model=/ion/i; model.te st("Ion Ionescu"); document.write(RegExp["$\"]); //afiseaza Ionescu </script> $& RegExp[$&] Returneaz ultimul text gsit. Echivalent cu lastMatch. Exemplu: <script language="javascript" type="text/javascript"> var model=/ion/i; model.te st("Ion Ionescu"); document.write(RegExp["$&"]); //afiseaza Ion </script> $_ input. RegExp[$_] Returneaz irul de caractere n care a fost efectuat cutarea. Echivalent cu Exemplu: Figura 5.6 <script language="javascript" type="text/javascript"> var model=/ion/i; model.te st("Ion Ionescu"); document.write(RegExp["$_"]); //afiseaza Ion </script> 157 $ LeftContext. Exemplu: RegExp[$] Returneaz textul situat la stnga ultimului text gsit. Echivalent cu <script language="javascript" type="text/javascript"> var model=/ion/i; model.te

st("Nume: Ion Ionescu"); document.write(RegExp["$ "]); //afiseaza Nume: </script > $+ cu lastParen. RegExp[$+] Returneaz textul gsit prin ultima sub-expresie a modelului utilizat. Echivalent Exemplu: <script language="javascript" type="text/javascript"> var model=/(ion)|(ionescu) /ig; model.test("Nume: Ion Ionescu"); document.write(RegExp["$+"]); //afiseaza I onescu </script> $n RegExp.$n $1, $2, , $9 returneaz primele 9 sub-iruri ale modelului. global returneaz false. RegExp.global Returneaz true dac atributul g (cutare global) a fost definit; n caz contrar Exemplu: <script language="javascript" type="text/javascript"> model=/cartof/g; model.tes t("Un cartof sau doi cartofi?"); document.write(model.global); //afiseaza true < /script> ignoreCase RegExp.ignoreCase Returneaz true dac atributul i (n cursul cutrii nu se face deosebire ntre majuscule i inuscule) a fost definit; n caz contrar returneaz false. Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i; model.test(" Ion Ionescu"); document.write(model.ignoreCase); //afiseaza true </script> index RegExp.index Returneaz poziia primului caracter al textului gsit. Exemplu: (continuare) Figura 5.6 <script language="javascript" type="text/javascript"> model=/ion/i; model.test(" Nume: Ion Ionescu"); document.write(RegExp.index); //afiseaza 6 </script> 158 input RegExp.input Returneaz irul de caractere n care a fost efectuat cutarea. Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i; model.test(" Nume: Ion Ionescu"); document.write(RegExp.input); //afiseaza Nume: Ion Ionescu </script> lastIndex RegExp.lastIndex

Returneaz poziia, n irul de caractere de la care va ncepe viitoarea cutare. Primul car acter se afl pe poziia 0. Returneaz 0 dac precedenta cutare a euat. Pentru c viitoarea cutare ncepe cu primul caracter, atribuii valoarea 0 acestei proprieti. Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i; model.test(" Ion Ionescu"); document.write(RegExp.lastIndex); //afiseaza 3 </script> lastMatch RegExp.lastMatch Returneaz ultimul text gsit. Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i; model.test(" Nume: Ion Ionescu"); document.write(RegExp.lastMatch); //afiseaza Ion </script> lastParen RegExp.lastParen Returneaz textul gsit prin ultima sub-expresie a modelului utilizat. Exemplu: <script language="javascript" type="text/javascript"> model=/(ion)|(ionescu)/ig; model.test("Nume: Ion Ionescu"); document.write(RegExp.lastParen); //afiseaza I onescu </script> leftContext RegExp.leftContext Returneaz textul situat la stnga ultimului text gsit. Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i; model.test(" Nume: Ion Ionescu"); document.write(RegExp.leftContext); //afiseaza Nume: </scri pt> multiline regExp.multiline Returneaz true dac atributul m (multilinie) a fost definit; n caz contrar returneaz false. (continuare) Figura 5.6 159 Exemplu: <script language="javascript" type="text/javascript"> model=/ion/m; model.test(" Ion Ionescu"); document.write(model.multiline); //afiseaza true </script> rightContext RegExp.rightContext Returneaz textul situat la dreapta ultimului text gsit. Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i; model.test(" Ion Ionescu"); document.write(RegExp.rightContext); //afiseaza Ionescu </script> source regExp.source Returneaz expresia regulat. Exemplu: (continuare) Figura 5.6

<script language="javascript" type="text/javascript"> model=/ion/i; model.test(" Ion Ionescu"); document.write(model.source); //afiseaza ion </script> Metodele obiectului RegExp Metodele obiectului RegExp, prezentate n detaliu n figura 5.7 servesc pentru ident ificarea modelelor (tiparelor) n obiectul RegExp. Metod Sintax compile() model.compile(model) nlocuiete un model vechi cu unul nou. Exemplu: <script language="javascript" type="text/javascript"> var model=/ftp.*/i; model. compile("http.*","i"); document.write(model.source); </script> exec() model.exec (text) Caut un model n text i returneaz rezultatul (o matrice Array). Exemplu: Figura 5.7 <script language="javascript" type="text/javascript"> var model=/ion/i; rezultat =model.exec("Nume: Ion Ionescu"); document.write(rezultat+"<br />"); //afiseaza Ion document.write(rezultat[0]+"<br />"); //afiseaza Ion </script> 160 test() model.test(text) Caut un model n text i returneaz true/false. Exemplu: (continuare) Remarci: Figura 5.7 <script language="javascript" type="text/javascript"> var model=/ion/i; rezultat =model.test("Nume: Ion Ionescu"); document.write(rezultat); //se afiseaza true < /script> Metodele: compile(), exec() i test() de tip RegExp impun ca obiectul String n care se face cutarea s fie transmis ca argument. Metoda exec() modific de asemenea mai multe proprieti ale matricei returnate, ale modelului i ale obiectului RegExp: Matr icea (Array) index, input; Modelul lastIndex, source, global, ignoreCase; RegExp lastMatch, leftContext, rightContext, multiline.

EXEMPLUL 5 JAVASCRIPT Formularea problemei Se reia problema rezervoarelor din exemplele precedente. n acest exemplu (EXEMPLU L 5 JAVASCRIPT) se dorete ca situaia livrrilor de benzin s fie expediat prin e-mail, l a o adres specificat de ctre utilizator. EXEMPLUL 5 JAVASCRIPT verific dac adresa e-m ail este format din caractere valide. n acest sens se va crea un model RegExp(re) care s includ urmtoarele reguli: adresa trebuie s nceap cu cel puin un caracter (plasa la stnga simbolului @); adresa trebuie s conin simbolul @; adresa trebuie s conin cel puin un caracter dup simbolul @; adresa poate conine caracterele: . sau - dar nu unul

up cellalt; adresa trebuie s se termine cu punct (.) urmat de cel puin dou caractere. caz de eroare, ntr-o caset de dialog se va afia mesajul de avertizare: Adresa E-mail : xxxxxxxx este incorect. Expedierea prin e-mail a situaiei livrrilor de benzin din c ele trei rezervoare se va efectua prin acionarea unui buton Trimite email. Analiza problemei n figura 5.8 este prezentat ecranul cu Situaia livrrilor de benzin pentru rezervoarel e R1, R2, R3, care conine de asemenea i zona de text pentru adresa e-mail (Adresa) i

161 butonul Trimite email. n situaia n care adresa de e-mail introdus n zona Adresa nu est valid se afieaz un mesaj de eroare, ntr-o caset de dialog. Figura 5.8 Tabela de variabile i specificaiile de programare sunt prezentate n figu ra 5.9, respectiv figura 5.10. Tabela de variabile Variabile de intrare adresa: obiect, zon de editare text pentru introducerea adresei de email Variabile de sta re st: suma livrrilor totale pe zile i rezervoare s: sume pariale pe zile rval: sta rea zonei de editare (valid sau nu) x: valoarea real a textului introdus n zona de editare z: numele zilelor sptmnii imax, imin, jmax, jmin: indicii livrrilor maxime i minime din matricea a Variabile de iesire a: matricea livrrilor pe zile i rezervoa re b: vectorul mediilor livrrilor pe zile d: vectorul mediilor livrrilor pe rezerv or max, min: valoarea maxim i minim a livrrilor Figura 5.9 162 Specificaii de programare Descriere. Programul expediaz prin e-mail Situaia livrrilor de benzin pentru rezervoarele R1, R2, R3 la o adres specificat de utilizator. Intrri . Adresa e-mail. Ieiri. Raportul cu situaia livrrilor expediate prin e-mail. Lista de funciuni ale script-ului 1. Afieaz Trimite situaia prin Email. 2. Afieaz forma de roducere a adresei de email. 3. Rspunde la evenimentele generate de butonul Trimit e email. 4. Rspunde la evenimentele generate de Figura 5.10 zona de editare. 5. Va lideaz valoarea introdus n zona de text (adresa). 6. Afieaz mesajul de eroare Adresa E -mail xxx este incorect. 7. Formeaz 8. Stop corpul mesajului ce urmeaz a fi trimis p rin email. Proiectarea script-ului Pseudocodul pentru EXEMPLUL 5 JAVASCRIPT este prezentat n figura 5.11. Pseudocodu l Exemplul5 LIV LIV1 LIV1 LIV FORJ FORI FORI FORJ FORMEDII FORMEDIIJ Figura 5.11 FORMEDIIJ BEGIN //initializeaza vectorul Z cu numele zilelor z=luni,marti,miercuri,joi vin eri //aloca spatiu de memorie si //citeste livrarile pe fiecare rezervor de la t astatura FOR(i=0;i<3;i++) FOR(j=0;j<5;j++) READ ai,j ENDFOR ENDFOR // aloca spat iu de memorie pentru vectorul b si d // calculeaza mediile pe rezervoare FOR(j=0 ;j<5;j++) s=0 FOR(i=0;i<3;i++) s=s+ai,j ENDFOR bj=s/3 ENDFOR // calculul mediilo r pe rezervoare st=0 FOR(i=0;i<3;i++) s=0 FOR(j=0;j<5;j++) s=s+ai,j st=st+aij EN DFOR di=s/5 163 FORMEDII ENDFOR d3=s/15 // determinarea maximului si minimului max=a0,0 min=a0,0 imax=0 i min=0 jmax=0 jmin=0 FOR(i=0;i<3;i++) FOR(j=0;j<5;j++) IF(max<ai,j) max=aij imax=

i jmax=j ENDIF IF(min>ai,j) min=aij imin=i jmin=j ENDIF ENDFOR ENDFOR imin=imin+ 1 imax=imax+1 //formeaza corpul mesajului //ce urmeaza a fi trimis prin email DO formeaza_afis //afisare rezultate WRITE "SITUATIA REZERVOARELOR R1 R2 R3" WRITE "ZIUA R1 R2 R3 MEDIA" FOR(k=0;k<5;k++) WRITE Z[k] FOR(j=0;j<3;j++) WRITE a[j][k ] ENDFOR WRITE trunchiaza( b[k]) ENDFOR WRITE "MEDIA" FOR(j=0;j<4;j++) WRITE tru nchiaza(d[j]) ENDFOR WRITE "Livrarea maxima: " max WRITE "s-a facut din rezervor ul: R" imax WRITE "in ziua de" Zjmax WRITE "Livrarea minima:" min WRITE " s-a fa cut din rezervorul: R"imin WRITE " in ziua de "+Zjmin WRITE " Trimite situatie p rin e-mail" //afiseaza forma de introducere a adresei de email WRITE "<Form> ... " //raspunde la evenimentele generate de butonul Trimite Email IF(se apasa buto nul Trimite Email) DO trimite_email() ENDIF //raspunde la evenimentele generate de zona de editare FORMAXI FORMAXJ IFMAX IFMAX IFMIN IFMIN FORMAXJ FORMAXI FORK FORJA FORJA FORK FORTRUNCJ FORTRUNCJ IFMAIL Figura 5.11 (continuare) IFMAIL 164 IFEDIT IFEDIT Exemplul5 IF(se paraseste zona de editare adresa) DO verificaAdresa() ENDIF END // transforma o valoare reala in sir de caractere // si trunchiaza la doua z ecimale TRUNCHIAZA BEGIN Parametrii: x- valoare reala s=transforma in sir de car actere x i=pozitia punctului zecimal in sir IFCOPY IF(i-1) s=copiazasubsi (s,0,i+ 2) IFCOPY ENDIF RETURN s TRUNCHIAZA END VERIFICAADRESA BEGIN //valideaza valoa e a int odusa in zona de text ad esa val=fals Initializeaza REGEXP e cu modelul: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/ s=ad esa.value val= e.test IFVA LID IF(! val) WRITE mesaj de e oa e: "Ad esa g esita" IFVALID ENDIF RETURN val VERIFICAADRESA END //fo meaza co pul mesajului de email FORMEAZA_AFIS BEGIN sbod y= "SITUATIA REZERVOARELOR R1 R2 R3" sbody+= "ZIUA R1 R2 R3 MEDIA" FORKMESAJ FOR (k=0;k<5;k++) sbody+= Z[k] FORJMESAJ FOR(j=0;j<3;j++) sbody+= a[j][k] FORJMESAJ ENDFOR sbody+= t unchiaza( b[k]) FORKMESAJ ENDFOR sbody+= "MEDIA" FORTRUNC FOR(j =0;j<4;j++) sbody+= t unchiaza(d[j]) FORTRUNC ENDFOR sbody+= "Liv a ea maxima: " max sbody+= "s-a facut din eze vo ul: R" imax sbody+= "in ziua de" Zjmax sbody += "Liv a ea minima:" min sbody+= " s-a facut din eze vo ul: R"imin Figu a 5.11 sbody+= " in ziua de "+Zjmin (continua e) FORMEAZA_AFIS END Codifica ea n limbajul JavaSc ipt 165 n figu a 5.12 este p ezentat documentul (X)HTML complet. <html> <head> <title>Exemplul 5</title> <sc ipt language="javasc ipt"> <!--va Z = new A ay(" Luni "," Ma ti ","Mie cu i"," Joi "," Vine i "); va sbody; a=new A ay(3); a[0]=new A ay(5); a[1]=new A ay(5); a[2]=new A ay(5); fo (i=0;i<3; i++) fo (j=0;j<5;j++) { k=i+1; a[i][j]=pa seFloat(p ompt("Liv a e din eze vo ul R"+k+" ziua:"+Z[j],0)); } B = new A ay(5); D = new A ay(4); function t imite_ email() { va sad =document.f2.ad esa.value; document.location.h ef="mailto:"+sa

d +"?subject= teste"+"&body="+sbody; } function ve ificaAd esa() { va val=fals e; va e; e = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/; va s=document.f 2.ad esa.value; val= e.test(s); if ( ! val) { ale t( Ad esa E-mail: +s+ este i nco ecta ); document.f2.ad esa.focus(); document.f2.ad esa.select(); } etu n v al; } function t unchiaza(x) { va s=""+x; i=s.indexOf("."); if(i!=-1){ s=s.subs t ing(0,i+3); } else { s=s+".00"; } etu n s; } function fo meaza_afis(){ sbody= "| ZIUA | R1 | R2 | R3 | MEDIA |"+"&lt;b &gt;"; fo (k=0;k<5;k++) { sbody+="|" + Z[k]; fo (j=0;j<3;j++) { sbody+="|" + t unchiaza(a[j][k]); } Figu a 5.12 166 sbody+="|" +t unchiaza( B[k])+ "|%13"; } sbody+="| MEDIA "; fo (j=0;j<4;j++) sbody+="|" + t unchiaza(D[j]); sbody+="| \ \ n \ \n"; sbody+="Liv a ea maxima:"+max+" s-a facut din eze vo ul: R"+imax+" in ziua de "+Z[jmax]+"\ \n"; sbody+=" Liv a ea minima:"+min+" s-a facut din eze vo ul: R"+imin+" in ziua de "+Z[jmin]+"\ \n"; } // --> </sc ipt> </head> <body> <c ente > <h3>SITUATIA LIVRARILOR DE BENZINA PENTRU REZERVOARELE R1 R2 R3</h3> <sc ipt language="javasc ipt"> // CALCULUL MEDIILOR PE ZILE va i,j; fo (j=0;j<5;j++ ){ S=0; fo (i=0;i<3;i++) S=S+a[i][j]; B[j]=S/3; } // CALCULUL MEDIILOR PE REZERV OARE ST=0; fo (i=0;i<3;i++){ S=0; fo (j=0;j<5;j++){ S=S+a[i][j]; ST=ST+a[i][j]; } D[i]=S/5; } D[3]=ST/15; // DETERMINAREA MAXIMULUI SI MINIMULUI max=a[0][0]; mi n=a[0][0]; imax=0;imin=0; jmax=0;jmin=0; fo (i=0;i<3;i++){ fo (j=0;j<5;j++){ if( max<a[i][j]){max=a[i][j];imax=i;jmax=j;} if(min>a[i][j]){min=a[i][j];imin=i;jmin =j;} }} imin++;imax++; 167 //AFISARE REZULTATE fo meaza_afis(); document.w iteln("<cente ><table bo de =1 b gcolo =#efefff><t >"); document.w iteln("<td><b>ZIUA</b><td><b>R1</b><td> <b>R2< /b><td><b>R3</b><td><b>MEDIA</b></td></t >"); fo (k=0;k<5;k++){ document.w iteln ("<t ><td>" + Z[k]+"</td>"); fo (j=0;j<3;j++){ document.w iteln("<td>" + a[j][k] + "</td>"); } document.w iteln(" <td> " +t unchiaza( B[k])+ "</TD></T >"); } doc ument.w iteln("<t ><td><b>MEDIA</b>"); fo (j=0;j<4;j++) document.w iteln("<td><b >" + t unchiaza(D[j])+" </b></td>"); document.w iteln("</t >"); document.w iteln ("</table></cente ><p><p>"); document.w iteln("<font size=+1 colo =g een>Liv a e a maxima:"+max+" s-a facut din eze vo ul: R"+imax+" in ziua de "+Z[jmax]+"</fon t>"); document.w iteln("<p><font size=+1 colo =g een>Liv a ea minima:"+min+" s-a facut din eze vo ul: R"+imin+" in ziua de "+Z[jmin]+"</font>"); document.w ite ln("<p><p><font size=+2 colo =#0000ff>T imite situatia p in Email </font><p>"); document.w iteln("<p><p><fo m name=\"f2\" enctype=\"text/plain\">"); document.w iteln("<p>Ad esa:<input type=\"text\" name=\"ad esa\" size=\"30\" onBlu =\"ve if icaAd esa();\">"); document.w iteln("<p><input type=\"button\" value=\"T imite e mail\" onClick=\"t imite_email();\">"); </sc ipt> </body> </html> n figu a 5.13 i figura 5.14 se prezint rezultatele execuiei script-ului. Figura 5.12 (continuare) Figura 5.12 (continuare) 168 Figura 5.13 169

Figura 5.14 Comentarii: Verificarea adresei de e-mail se realizeaz cu gestionarul de evenimen te onBlur care lanseaz n execuie funcia VerificaAdresa()(figura 5.12). Funcia Verific aAdresa() utilizeaz obiectul re cu modelul prezentat n figura 5.15. Figura 5.15 re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/; Expedierea prin e-mail a raportului se realizeaz prin acionarea butonului Trimite e mail care lanseaz n execuie funcia trimite_email() (figura 5.12). Corpul mesajului tr imis prin email este generat de funcia formeaza_afis(figura 5.12). Aplicaie

170 Scriei un program JavaScript care verific data calendaristic n formatul zz/ll/aa. In dicaie. O dat calendaristic trebuie format dintr-un ir de caractere de forma zz/ll/aa aa. Zilele trebuie s aib valori cuprinse n intervalul 1 i 31. Prima cifr (dac sunt dou trebuie s fie maxim 3, urmat eventual de 0 sau 1. Prima cifr poate fi de asemenea 0 urmat de cifre cuprinse n intervalul 1-9. Urmeaz caracterul /. Lunile trebuie s aib alori cuprinse n intervalul 1 i 12. Prima cifr poate fi 0 urmat de cifre cuprinse n i ntervalul 1-9 sau poate fi urmat de 0, 1 sau 2. Urmeaz caracterul /. Anul este un nu mr alctuit din patru cifre. n figura 5.16 este prezentat documentul XHTML complet. Figura 5.16 Rezultatele execuiei script-ului sunt prezentate n figura 5.17. Figura 5.17

171 Obiectul Date Date este un obiect predefinit al limbajului JavaScript care v permite s lucrai cu valori reprezentnd orele i datele calendaristice. Remarci: JavaScript consider c data iniial (de referin) este 1 ianuarie 1970 (convenia UNIX). JavaScript ine evidena valorilor: or sau data calendaristic n milisecunde, ncep d cu 1 ianuarie 1970. Fia obiectului Date este prezentat n figura 5.18. Fia obiectului DATE Cum se creeaz obiectul? Proprieti: Metode: constructorul Date() getDate(), getDay(), getFullYear(), getHours(), getMillisec onds(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimezoneOffset(), getUTCDate(), getUTCDay(), getUTCFullYear(), getUTCHours(), getUTCMilliseconds() , getUTCMinutes(), getUTCMonth(), getUTCSeconds(), getVarDate(), getYear(), pars e(), setDate(), setFullYear(), SetHours(), SetMilliseconds(), SetMinutes, SetTim e(), setUTCDate(), setUTCFullYear(), setUTCHours(), setUTCMilliseconds, setUTCMi nutes, setUTCMonth(), setUTCSeconds(), setYear, toDateString(), toGMTString(), t oLocalDateString(), toLocaleString(), toLocalTimeString(), toString(), toTimeStr ing(), toUTCString(), valueOf() Figura 5.18 Gestionarii de evenimente: Constructorul Date() Constructorul Date() creeaz o nou dat. Constructorul Date() este prezentat n detaliu n figura 5.19. 172 Constructor

Date() Sintax Variabila=new Date() Variabila=new Date(An, Lun, Zi, Ore, Minute, Secunde, Milise cunde) new Date() creeaz un obiect avnd data i ora curente. Cel de-al doilea format creeaz un obiect cu data i ora specificate. Putei crea un obiect Date folosind num ai argumentele: An, Lun, Zi. Respectai ordinea argumentelor. Lunile se numr de la ze ro. Crearea unui obiect Date este similar cu crearea obiectelor String, Array. Exemplu: <script> azi=new Date(); document.write(azi); //afieaz data i ora curente </script> <script> azi=new Date(2002,5,9); alert(azi); //obiectul Date conine 9 mai 2002 < /script> Exemplu: Figura 5.19 Metodele obiectului Date Metodele obiectului Date permit: definirea valorilor obiectelor Date (setDate(); setMonth(); (getDate(); setFullYear(); getMonth(); setTime(); setHours(); setMinutes(); setSeconds() etc.); citirea valorilor obiectelor Date getFullYear(); toLocalString() getTime(); getHours() etc.); gestionarea fusurilor orare i a orelor locale (getTimeZoneOffset(); toUTCString(); etc.); conversia ntre formatele datelor (Date.parse(); Date.UTC() etc.). Metodele obiectului Date sunt prezentate n detaliu n figura 5.20. 173

Metod Sintax getDate() Exemplu: Data.getDate() Metoda returneaz ziua din lun. <script> data=new Date(2004,4,1); a=data.getDate(); document.write(a); ...//afiea z 1 </script> getDay() Data.getDay() Metoda returneaz un numr care corespunde zilei sptmnii: 0 pentru duminic; 1 pentru lun i etc. Exemplu: <script> data=new Date(2004,4,1); //1 aprilie 2004 ...a=data.getDay() document.w rite(a); ...//afieaz 4 (pentru joi) </script> getFullYear() Data.getFullYear() Metoda returneaz anul n 4 cifre. Exemplu: <script> data=new Date(2004,4,1); a=data.getFullYear(); document.write(a); ...// afieaz 2004 </script> getHours() Data.getHours() Metoda returneaz numrul de ore (ntre 0 i 23). Exemplu: <script> data=new Date(2004,5,9,8,25,0); a=data.getHours(); document.write(a);.. .//afieaz 8 </script> getMilliseconds() Data.getMilliseconds() Metoda returneaz numrul de milisecunde. Exemplu: <script> data=new Date(2004,5,9,8,25,8,750); a=data.getMilliseconds(); document. write(a); ...//afieaz 750 </script> getMinutes() Data.getMinutes() Metoda returneaz numrul de minute. Figura 5.20 174 Exemplu: <script> data=new Date(2004,5,9,8,25,8,750); a=data.getMinutes(); document.write (a); ...//afieaz 25 </script> getMonth() Data.getMonth() Metoda returneaz numrul lunii (de la 0 la 11). Exemplu:

<script> data=new Date(2004,4,1); a=data.getMonth(); document.write(a+1); ...//a fieaz 4 </script> <script> luna=new Array(ianuarie,februarie,martie,aprilie,mai, t, septembrie,octombrie,noiembrie,decembrie); data=new Date(2004,4,1); a=data.getMon document.write(luna[a]); ...//afieaz aprilie </script> getSeconds() Data.getSecon ds() Metoda returneaz numrul de secunde (ntre 0 i 59). Exemplu: Exemplu:

<script> data=new Date(2004,5,9,8,25,8,750); a=data.getSeconds(); document.write (a);...//afieaz 8 </script> getTime() Data.getTime() Metoda returneaz data n milisecunde, calculat de la 1 ianuarie 1970. Exemplu: <script> data=new Date(2002,5,9,8,25,8,750); a=data.getTime(); document.write(a) ; ..//afieaz 1023603908750 </script> getUTCDate() Coordinated Time). Data.getUTCDa te() Metoda returneaz zona din lun transpus n timp UTC (Universal Exemplu: Figura 5.20 (continuare) <script> data=new Date(2004,4,1); //1 aprilie 2004 a=data.getUTCDate(); ...//afie az 1 </script> 175 getUTCDay() Data.getUTCDay() Metoda returneaz ziua din sptmn transpus n timp UTC (0 pentru duminic; 1 pentru luni .). Exemplu:

<script> data=new Date(2002,5,9); //9 mai 2002 a=data.getUTCDay(); document.writ e(a); ...//afieaz 0 (pentru duminic) </script> <script> ziua=new Array(duminic,luni, rcuri,joi,vineri, smbt); data=new Date(2002,5,9); //9 mai 2002 a=data.getUTCDay(); t.write(ziua[a]); ...//afieaz duminic </script> getUTCFullYear() Data.getUTCFullYea r() Metoda returneaz anul transpus n timp UTC, n format de 4 cifre. Exemplu: Exemplu: <script> data=new Date(2004,4,1); //1 aprilie 2004 a=data.getUTCFullYear(); docu ment.write(a);...//afieaz 2004 </script> getUTCHours() Data.getUTCHours() Metoda returneaz ora (ntre 0 i 23) transpus n timp UTC. Exemplu: <script> data=new Date(2002,5,9,8,25,0); a=data.getUTCHours(); document.write(a) ;...//afieaz 6 </script> getUTCMilliseconds() Data.getUTCMilliseconds() Metoda returneaz numrul de milisecunde (transpus n timp UTC). Exemplu: <script> data=new Date(2002,5,9,8,25,8,750); a=data.getUTCMilliseconds(); docume nt.write(a);...//afieaz 750 </script> getUTCMinutes() Data.getUTCMinutes() Metoda returneaz numrul de minute (transpus n timp UTC). Exemplu: Figura 5.20 (continuare) <script> data=new Date(2002,5,9,8,25,8,750); a=data.getUTCMinutes(); document.wr

ite(a);...//afieaz 25 </script> 176 getUTCMonth() Data.getUTCMonth() Metoda returneaz numrul lunii (transpus n timp UTC). Exemplu:

<script> data=new Date(2002,5,9); //9 mai 2002 a=data.getUTCMonth(); document.wr ite(a); ...//afieaz 5 </script> <script> luna=new Array(Ianuarie,Februarie,Martie,Ap ai,Iunie,Iulie, August, Septembie,Octombrie,Noiembrie,Decembrie); data=new Dat aprilie 2004 a=data.getUTCMonth(); document.write(luna[a1]); ...//afieaz aprilie </ script> getUTCSeconds Data.getUTCSeconds() Returneaz numrul de secunde (ntre 0 i 59) transpus n timp UTC. Exemplu: Exemplu: <script> data=new Date(2002,5,9,8,25,8,750); a=data.getUTCSeconds(); document.wr ite(a);...//afieaz 8 </script> getVarDate() Data.getVarDate() Returneaz data i ora n litere (n limba englez). Exemplu: <script> data=new Date(2004,4,1); a=data.getVarDate(); document.write(a);...//af ieaz Sun Jun 9 00:00:00 UTC+0200 2002 </script> setDate() Data.setDate(Numr) Metoda modific ziua din lun ntr-un obiect Date. Metoda accept un argument (un numr cu prins ntre 1 i 31) i returneaz noua dat n milisecunde. Exemplu: Figura 5.20 (continuare) <script> data=new Date(2002,7,15); //15 august 2004 a=data.setDate(3); document. write(a+<br/>); afieaz 10283256000000 document.write(data.toString()); ...//afieaz Sat Aug 3 00:00:00 UTC+0200 2002 </script> 177 setFullYear() Data.setFullYear(Numr) Metoda modific anul ntr-un obiect Date. Aceast metod accept un argument (anul n patru cifre) i returneaz noua dat n milisecunde. Exemplu:

<script> data=new Date(2002,7,15); //15 august 2002 a=data.setFullYear(2004); do cument.write(a+<br/>); ...//afieaz 109252 08 00000 document.write(data.toString()); //afieaz Sun Aug 15 00:00:00 UTC+0200 2004 </script> setHours() Data.setHours(Numr) Metoda modific ora ntr-un obiect Date. Aceast metod accept un argument ntre (0 i 23) eturneaz noua dat n milisecunde. Exemplu: <script> data=new Date(2002,7,15,14,25,32); //15 august 2002 a=data.setHours(3); document.write(a+<br/>); ...//afieaz 1029374732000 document.write(data.toString()); //afieaz Thu Aug 15 03 25:32 UTC+ 0200 2002 </script> setMilliseconds() Data.setM illiseconds(Numr) Metoda modific numrul de secunde ntr-un obiect Date. Aceast metod accept un argument ( numrul de milisecunde) i returneaz noua dat n milisecunde.

Exemplu: <script> data=new Date(2002,7,15,14,25,32,750); a=data.setMilliseconds(3); docum ent.write(a+<br/>); document.write(data.toString()); ...//afieaz The Aug 15 14 25:32 UTC+0200 2002 </script> setMinutes() Data.setMinutes(Numr) Date. Aceast metod Metoda modific minutele ntr-un obiect accept un argument (minutele ntre 0 i 59) i returneaz noua dat n milisecunde. setMonth() Figura 5.20 (continuare) Data.setMonth(Numr)

Metoda modific luna ntr-un obiect Date. Aceast metod accept un argument (luna ntre 0 i 12) i returneaz noua dat n milisecunde. 178 setSeconds() Data.setSeconds(Numr) Metoda modific secundele ntr-un obiect Date. Aceast metod accept un argument (numrul d e secunde ntre 0 i 59) i returneaz noua dat n milisecunde. setTime() Data.setTime() Metoda modific data ntr-un obiect Date. Aceast metod accept un argument (data n milise cunde) i returneaz noua dat n milisecunde. setUTCDate() Data.setUTCDate()

Modific ziua din lun ntr-un obiect Date (transpus n UTC). Aceast metod accept un argu t (un numr cuprins ntre 1 i 31) i returneaz noua dat n milisecunde. setUTCFullYear() Data.setUTCFullYear() Modific anul (n timp UTC) ntr-un obiect Date. Aceast metod accept un argument (anul n atru cifre) i returneaz noua dat n milisecunde. setUTCHours() Data.setUTCHours() Modific ora UTC ntr-un obiect Date. Aceast metod accept un argument (ora cuprins ntre i 23) i returneaz noua dat n milisecunde. Exemplu: <script> data=new Date(2002,7,15,14,25,32); a=data.setUTCHours(3); document.writ e(a+<br/>);...//afieaz 1029381932000 document.write(data.toString()); //afieaz Thu Aug 15 05:25:32 UTC+0200 2002 </script> setUTCMilliseconds() Data.setUTCMillisecond s() Metoda modific numrul UTC de milisecunde ntr-un obiect Date. Aceast metod accept un ar gument (numrul de milisecunde) i returneaz noua dat n milisecunde.

setUTCMinutes() Data.setUTCMinutes() Metoda modific minutele UTC ntr-un obiect Date. Aceast metod accept un argument (minu tele ntre 0 i 59) i returneaz noua dat n milisecunde. setUTCMonth() Data.setUTCMonth() Metoda modific luna UTC ntr-un obiect Date. Aceast metod Figura 5.20 (continuare) accept un argument (luna ntre 0 i 11) i returneaz noua dat n milisecunde. 179 setUTCSeconds() Data.setUTCSeconds() Metoda modific secundele n timp universal (UTC) ntr-un obiect Date. Aceast metod acce pt un argument (numrul de secunde ntre 0 i 59) i returneaz noua dat n milisecunde. setYear() Data.setYear(Numr) Metoda modific anul ntr-un obiect Date. Aceast metod accept un argument (anul cu dou c ifre) i returneaz noua dat n milisecunde. Dat fiind interpretarea foarte diferit a nav igatoarelor, este mai bine s utilizai n locul acestei metode, metoda setFullYear(). toDateString() Data.toDateString() Metoda returneaz data n litere, n limba englez. Exemplu:

<script> data=new Date(2002,7,15,14,25,32,750); a=data.toDateString(); document. write(a+<br/>); ...//afieaz The Aug 15 2002 </script> toGMTString() Data.toGMTString () Metoda returneaz data i ora GMT n litere, n limba englez. Este bine s utilizai n locu cestei metode, din motive de interpretare diferit de ctre browser, metoda toString (). toLocalDateString() este executat script-ul. Exemplu: Data.toLocalDateString() Metoda returneaz data n litere, n formatul i n limba mainii pe care

<script> data=new Date(2002,7,15,14,25,32,750); a=data.toLocalDateString(); docu ment.write(a+<br />); ...//afieaz Jeudi 15 aot 2002 </script> toLocaleString() Data.t oLocaleString() Metoda returneaz data i ora n litere, n formatul i n limba mainii pe care este executa script-ul. toLocalTimeString()

script-ul. Figura 5.20 (continuare) Data.toLocalTimeString() Metoda returneaz ora n formatul mainii pe care este executat toString() Data.toString() Metoda returneaz data i ora n litere, n limba englez. Exemplu: <script> 180 data=new Date(2002,7,15,14,25,32,750); a=data.toString(); document.write(a+<br/>); ...//afieaz Thu Aug 15 14:32 UTC+0200 2002 </script> toTimeString() Data.toTimeSt ring() Metoda returneaz ora n format englezesc. Exemplu: <script> data=new Date(2002,7,15,14,25,32,750); a=data.toTimeString(); document. write(a+<br/>); ...//afieaz 14:25:32 UTC+0200 </script> toUTCString() Data.toUTCStri ng() Metoda returneaz data i ora UTC n litere, n limba englez. valueOf() Data.valueOf() Metoda returneaz data i ora n milisecunde. Exemplu: Figura 5.20 (continuare) <script> data=new Date(2002,7,15,14,25,32,750); a=data.valueOf(); document.write (a+<br/>);...//afieaz 1029414332750 </script> Aplicaii Inserai data i ora ntr-o pagin Web. Indicaie. Utilizai formatul: zz/ll/aaaa. Exemplu, 30/1/2004 10:25 PM). n figura 5.21 este prezentat documentul HTML ([4]) complet al aplicaiei. 181 Figura 5.21 n figura 5.22 sunt vizualizate rezultatele execuiei script-ului. Figura 5.22 Personalizai script-ul din aplicaia precedent. Afiai data calendaristic n itere, n limba romn (Exemplu, joi 1 aprilie 2004). n figura 5.23 este prezentat docu mentul HTML ([4]) complet. 182

Figura 5.23 Rezultatele execuiei script-ului sunt vizualizate n figura 5.24. Figura 5.24 Obiectul Arguments Obiectul Arguments reprezint sub forma unei matrici (Array) valoarea argumentelor transmise unei funcii. n figura 5.25 este prezentat fia obiectului Arguments. 183 Fia obiectului Arguments Cum se creeaz obiectul? Proprieti: Metode: Figura 5.25 Gestionarii de evenimente: C onstructorul Function() calee, length Obiectul Arguments este prezentat n detaliu n figura 5.26. Obiect Sintax Arguments funcie.arguments Arguments este un subobiect al obiectului (intern) Function. Atunci cnd apelai o funcie, putei s-i transmitei argumente. Aceste argumente sunt disponibile sub numele lor dar i ca elemente ale unei matrici Array: arguments[]. Exemplu: Rezultatele execuiei script-ului: Figura 5.26 184 Proprietile obiectului Arguments Proprietile obiectului Arguments sunt prezentate n detaliu n figura 5.27. Proprietate callee Sintax funcie.arguments.calle Returneaz coninutul complet al funciei. Exemplu: Rezultatele execuiei script-ului: Figura 5.27 185 Rezultatele execuiei script-ului: length funcie.arguments.length Exemplu:

Returneaz numrul de argumente transmise funciei atunci cnd ea este apelat. Figura 5.27 (continuare) 186 Exemplu: Rezultatele execuiei script-ului: Figura 5.27 (continuare) 187 JavaScript Testai-v cunotinele 1. Ce reprezint expresiile regulate? 2. Cum se creeaz obiectul RegExp? Tem 3. Care sunt proprietile i metodele obiectului RegExp? 4. Care sunt caracterele de repetiie utilizate n identificarea modelelor (tiparelor)? 5. Care sunt clasele de caractere utilizate n identificarea modelelor? 6. Care sunt identificatorii de po ziie utilizai n identificarea modelelor? 7. Care este efectul utilizrii urmtoarelor m etode RegExp: compile(); test(). 8. Urmtoarele dou script-uri verific un cod potal ( figura 5.28) i o adres de e-mail (figura 5.29). Comentai structura expresiilor din cadrul celor dou script-uri.

<script> cod=85015; model=/^[09]{5}$/; if(model.test(cod)){ document.write(OK); } els e{ document.write(cod eronat); } Figura 5.28 </script> <script> adresa=vasile@vasil e.com; model=/^[azAZ09._]+@[azAZ09._]+\.[azAZ09._]{2,4}/$; if(model.test(adresa) rite(OK); } else{ document.write(adresa e-mail eronat); Figura 5.29 } </script> 9. Analizai funcia compdate() din figura 5.30. 188 function compdate(data1,data2){ difMilisecunde=data1data2; difSecunde=difMilisecu nde/1000; difMinute=difSecunde/60; difOre=difMinute/60; difZi=difOre/24; return difZi; Figura 5.30 } 10.Cum creai un obiect Date care conine data i ora curente? 11.Ce reprezint GMT i UTC ? 12.Care sunt proprietile obiectului Date? 13.Precizai rezultatul execuiei urmtoarel or instruciuni JavaScript (figura 5.31). <script> astzi=new Date(); a=atzi.toLocalesString(); alert(a); //afieaz ...?... b=as tzi.toString(); alert(b); //afieaz ...?... c=astzi.getTime(); alert(c); //afieaz ...?. .. d=astzi.getTimezoneOffset(); //afieaz ...?... Figura 5.31 </script> 14.Precizai care este efectul urmtoarelor metode JavaScript (figura 5.32). <script> var data=new Date(May 13, 2004 21:40:00); alert(data.toGMTString()); //af ieaz ...?... alert(data.setMonth(9)); //afieaz ...?... Figura 5.32 </script> 15.Care este diferena ntre metodele getDay() i getDate()? 16.Cum se creeaz obiectul Arguments? 17.Care sunt proprietile i metodele obiectului Arguments? Vizitai site-urile http://www.webreference.com/programming/Javascript.html http://scriptsearch.inte rnet.com microsoft.public.scripting.jscript netscape.public.beta.feedback.javasc ript netscape-devs.javascript comp.infosystems.www.authoring.html

Conversaia 6 Gestionarii de evenimente JavaScript n aceast conversaie: Evenimente i gestionari de evenimente Gestionarii de evenimente JavaScript Aplicai i Tem Evenimente i gestionari de evenimente Dup cum am afirmat, JavaScript este un limbaj condus de evenimente. Foarte multe din programele pe care le scriei n limbajul JavaScript vor rspunde la un eveniment iniiat fie de ctre utilizator, fie de ctre browser. Reacia la un eveniment este cunoscut sub numele de prelucrarea evenimentului, iar codul JavaScript corespunztor (pe care l scriei) este cunoscut sub numele de gestio nar de evenimente. Un gestionar de evenimente este o metod puin special care va fi apelat n mod automat de ctre navigator ori de cte ori va surveni un eveniment partic ular. Gestionarii de evenimente sunt funcii puternice JavaScript. Din fericire ei sunt foarte uor de programat. De foarte multe ori este suficient o sin gur instruciune pentru a putea fi creai.

190 Remarci: Un eveniment este o aciune care se produce n raport cu un element (fereas tr, document, buton etc.). El poate fi detectat i prelucrat de ctre un script care va declana o aciune. Script-ul este executat dac evenimentul se produce pe obiectul cruia i este asociat. Aciunile utilizatorilor sunt elementele cele mai frecvente. Evenimentele generate de utilizator nu sunt singurele evenimente generate de Jav aScript. De exemplu, evenimentul load, declanat automat de ctre navigator, nu se p roduce dect atunci cnd este ncheiat ncrcarea unui document (X)HTML ntr-un navigator. A elai eveniment se poate aplica mai multor obiecte. Evenimentele stau la baza inte ractivitii documentelor Web. Cteva din evenimentele care survin n mod frecvent ct i mo mentul n care acestea se declaneaz sunt prezentate n figura 6.1. Eveniment Se declaneaz atunci cnd ncrcarea unui obiect este ntrerupt. un element nu este activat. utilizatorul execut c lic pe un obiect. valoarea unui element este modificat. se produce o eroare la ncrc area unui document sau a unei imagini. un element devine inactiv. un document sa u o imagine se ncarc. mouse-ul se deplaseaz n afara elementului. mouse-ul se deplase az pe deasupra elementului. datele introduse ntr-un formular sunt terse. utilizator ul selecteaz un cmp ntr-un formular. utilizatorul expediaz un formular. un document este descrcat. abort blur click change error focus load mouseOut mouseOver reset select submit Figura 6.1 unload

Dup cum ai putut observa, fiecare element are propriul su nume. De exemplu, evenime ntul click se produce atunci cnd utilizatorul execut clic pe un obiect. n acest caz , evenimentul click este trimis gestionarului de evenimente, dac acesta exist. Pen tru a defini un gestionar de evenimente adugai prefixul on la numele evenimentului . Codul gestionarului de evenimente trebuie s fie inclus ca un atribut al unui ta g (X)HTML care declaneaz evenimentul: <tag (X)HTML gestionarEvenimente=cod JavaScript> Remarci: Codul JavaScript al unui gestionar de evenimente este inclus ntre ghilim ele. Observai combinaia ciudat de majuscule i minuscule la notaia standard a gestiona rilor de evenimente: on este scris mereu cu minuscule iar iniiala fiecrui cuvnt al evenimentului, cu majuscule. Exemple: onAbort, onBlur, onClick, 191 onChange, onError, onFocus, onLoad, onMouseOut, onMouseOver, onReset, onSelect, onSubmit, onUnLoad. n figura 6.2 sunt listai, n ordine alfabetic gestionarii de evenimente ai limbajului JavaScript. onAbort onAfterUpdate onBeforeCut onBeforePaste onBeforeUpdate onCh ange onControlSelect onDblClick onDragDrop onDrop onFocusIn onKeyDown onLoad onM ouseOut onMove onReset onResizeEnd Figura 6.2 onActivate onBeforeActivate onBeforeDeActivate onBeforePrint onBlur onClick onCo py onDeActivate onDragEnd onError onFocusOut onKeyPress onMouseDown onMouseOver onMoveEnd onResize onResizeStart onSubmit onAfterPrint onBeforeCopy onBeforeEditFocus onBeforeUnload onCellChange onContex tMenu onCut onDrag onDragStart onFocus onHelp onKeyUp onMouseMove onMouseUp onPr opertyChange onResizeError onScroll onUnLoad onSelect Gestionarii de evenimente JavaScript Gestionarii de evenimente JavaScript sunt prezentai n detaliu n figura 6.3. Gestionari de evenimente onAbort Se declaneaz atunci cnd ncrcarea unui element este anulat. Se aplic la: document onActivate Se declaneaz atunci cnd elementul devine element activ. Figura 6.3 Se aplic la: window, document, frame, form 192 onAfterPrint Se declaneaz dup imprimarea unui element. Se aplic la: window, frame onAfterUpDate Se declaneaz dup actualizarea datelor surs ale elementului.

Se aplic la: document, frame, form.button, form.checkbox, form.fileupdate, form.hidden, form. password, form.select, onBeforeActivate Se declaneaz nainte ca elementul s devin element activ. form.radio, form.reset, form.text, form.textarea, form.submit Se aplic la: window, form onBeforeCopy Se declaneaz nainte ca datele s fie copiate (Copy). Se aplic la: form onBeforeCut Se declaneaz nainte ca datele s fie mutate (Cut). Se aplic la: document, form onBeforeDeActivate Se declaneaz nainte ca un alt element s devin activ n documentul printe. Se aplic la: document, form onBeforeEditFocus Se declaneaz nainte ca elementul s primeasc focus-ul pentru a fi editat. Se aplic la: document, form onBeforePaste Se declaneaz nainte ca elementul int s primeasc datele (Paste). Se aplic la: document, form onBeforePrint Se declaneaz nainte ca datele elementului s fie imprimate sau personalizate. (continuare) Figura 6.3 Se aplic la: window, frame onBeforeUnload 193 Se declaneaz nainte ca elementul s fie descrcat. Se aplic la: window onBeforeUpdate Se declaneaz nainte ca datele surs ale elementului s fie actualizate. Se aplic la:

document, form.button, form.checkbox, form.fileupdate, form.hidden, form.passwor d, form.select, form.radio, form.reset, form.text, form.textarea, form.submit on Blur Se declaneaz atunci cnd elementul pierde focus-ul. Se aplic la: window, frame, form, form.button, form.checkbox, form.fileupdate, form.password, form.select, form.radio, form.reset, form.text, form.textarea, form.submit onCe llChange Se declaneaz atunci cnd datele se schimb n obiectul surs. Se aplic la: document onChange Se declaneaz atunci cnd elementul pierde focus-ul iar coninutul su a fost schimbat. Se aplic la: form.fileupdate, form.password, form.select, form.textarea onClick Se declaneaz atunci cnd se execut clic pe un element. Se aplic la: document, form, form.button, form.checkbox, form.option, form.radio, form.reset, form.text, form.submit onContextMenu Se declaneaz atunci cnd se execut clic cu butonul drept al mouse-ului pentru a desch ide meniul contextual. Se aplic la: document, form onControlSelect Se declaneaz nainte ca elementul s fie selectat. Se aplic la: window, document, frame, form onCopy Se declaneaz atunci cnd se copiaz un element. (continuare) Figura 6.3 Se aplic la: form onCut Se declaneaz atunci cnd se mut (Cut) un element. 194 Se aplic la: document, form onDblClick Se declaneaz atunci cnd se execut dublu click pe element. Se aplic la: document, form,

form.button, form.checkbox, form.option, form.reset onDeActivate Se declaneaz atunci cnd un alt element devine activ n documentul printe. Se aplic la: window, frame, form onDrag Se declaneaz atunci cnd un element este deplasat. Se aplic la: document, form onDragDrop Se declaneaz atunci cnd ceva este deplasat i apoi eliberat. Se aplic la: window, frame onDragEnd Se declaneaz atunci cnd un element deplasat este la finele deplasrii. Se aplic la: document, form onDragStart Se declaneaz la nceputul deplasrii elementului. Se aplic la: document, form, form.fileupdate, form.select, form.textarea onDrop Se declaneaz atunci cnd un obiect este depus peste un element dup deplasare. Se aplic la: document, form onError Se declaneaz atunci cnd se genereaz o eroare n raport cu un element. (continuare) Figura 6.3 Se aplic la: window, frame onFocus Se declaneaz atunci cnd elementul primete focus-ul. Se aplic la: window, frame, form, form.button, form.checkbox, 195 form.fileupdate, form.password, form.select, form.radio, form.reset, form.text, form.textarea, form.submit onFocusIn Se declaneaz nainte ca elementul s primeasc focus-ul (naintea evenimentului focus). Se aplic la:

form onFocusOut Se declaneaz dup ce elementul pierde focus-ul, imediat dup ce un alt element a primi t focus-ul. Se aplic la: form onHelp Se declaneaz atunci cnd se acioneaz tasta F1 n fereastra activ. Se aplic la: window, document, frame, form, form.button, form.checkbox, form.fileupdate, form .hidden, form.password, form.select, form.option, form.radio, form.reset, form.t ext, form.textarea, form.submit onKeyDown Se declaneaz atunci cnd se acioneaz o tast n timp ce elementul a primit focus-ul. Se aplic la:

document, form, form.button, form.checkbox, form.fileupdate, form.password, form .select, form.option, form.radio, form.reset, form.text, form.textarea, form.sub mit onKeyPress Se declaneaz atunci cnd se menine apsat o tast, n timp ce elementul a primit focus-ul Se aplic la: document, form, form.button, form.checkbox, form.fileupdate, form.password, form .select, form.option, form.radio, form.reset, form.text, form.textarea, form.sub mit onKeyUp Se declaneaz atunci cnd este eliberat o tast n timp ce elementul a primit focus-ul. (continuare) Figura 6.3 Se aplic la: document, form, form.button, form.checkbox, form.fileupdate, form.password, form .select, form.option, form.radio, form.reset, form.text, form.textarea, form.sub mit 196 onLoad Se declaneaz atunci cnd elementul este complet ncrcat. Se aplic la: window, frame onMouseDown Se declaneaz atunci cnd se acioneaz un buton al mouse-ului n timp ce elementul a primi t focus-ul. Se aplic la: document, form, form.button, form.checkbox, form.fileupdate, form.password, form .select, form.option, form.reset, form.text, form.textarea, form.submit onMouseM ove Se declaneaz atunci cnd se deplaseaz mouse-ul iar pointer-ul este deasupra elementul ui. Se aplic la:

window, frame, form, form.button, form.checkbox, form.fileupdate, form.password, form.select, form.option, form.reset, form.text, form.textarea, form.submit onM ouseOut Se declaneaz atunci cnd pointer-ul mouse-ului prsete elementul. Se aplic la: document, form, form.button, form.checkbox, form.fileupdate, form.password, form .select, form.option, form.reset, form.text, form.textarea, form.submit onMouseO ver Se declaneaz atunci cnd pointer-ul mouse-ului trece pe deasupra elementului. Se aplic la: document, form, form.button, form.fileupdate, form.password, form.option, form.r eset, form.textarea, form.submit form.checkbox, form.select, form.text, onMouseUp Se declaneaz atunci cnd un buton al mouse-ului se relaxeaz n timp ce elementul a prim it focus-ul. Se aplic la: (continuare) Figura 6.3 document, form, form.button, form.checkbox, form.fileupdate, form.password, form .select, form.option, form.reset, form.text, form.textarea, form.submit onMove Se declaneaz atunci cnd elementul este deplasat de ctre utilizator sau de script. Se aplic la: window, frame, form onMoveEnd Se declaneaz la finele deplasrii elementului. Se aplic la: window, frame, form 197 onPropertyChange Se Se aplic la: declaneaz atunci cnd se modific o proprietate

a elementului. document, form onReset Se declaneaz atunci cnd formularul este resetat (se execut clic pe butonul Reset). Se aplic la: form onResize Se declaneaz nainte ca elementul s fie redimensionat. Se aplic la: window, frame, form, form.fileupdate, form.password, form.select onResizeEnd Se declaneaz la finele redimensionrii elementului. Se aplic la: window, frame, form onResizeStart Se declaneaz atunci cnd utilizatorul ncepe redimensionarea elementului. Se aplic la: window, frame, form onScroll Se declaneaz atunci cnd fereastra ncepe s defileze. Se aplic la: window, frame onSelect Se declaneaz atunci cnd este selectat coninutul elementului. Se aplic la: form.fileupdate, onSubmit form.password, form.text, form.textarea, form.submit Se declaneaz naintea expedierii unui formular. Se aplic la: (continuare) Figura 6.3 form onUnLoad (continuare) Figura 6.3 Se declaneaz nainte ca elementul s fie descrcat. Se aplic la: window Aplicaii Creai gestionarul de evenimente onLoad.

198 Iat cum procedm pentru a crea gestionarul de evenimente onLoad, care conine o instr uciune (alert) care afieaz o caset de avertisment ce conine mesajul: nvai s privi e aparene!. 1. Definii evenimentul care urmeaz a fi declanat. Evenimentul care se declaneaz (atun ci cnd ultimul caracter al unui document HTML a fost ncrcat n navigator) este load cr uia i corespunde gestionarul de evenimente onLoad. 2. Introducei numele gestionaru lui (onLoad) n tag-ul body (figura 6.4). Figura 6.4 3. Introducei, n continuare dup semnul egal, instruciunea JavaScript aler t, plasat ntre ghilimele (figura 6.5). Figura 6.5

Remarci: n aceast etap este important s v ntrebai: ce va produce gestionarul de evenim nte onLoad? Atunci cnd definii un gestionar de evenimente onLoad pentru tag-ul <bo dy> evenimentul (Load) este declanat la finele ncrcrii documentului. Gestionarul de evenimente onLoad (definit n tag-ul <body>) afieaz o caset de avertisment odat cu ter minarea ncrcrii paginii Web. Navigatorul verific dac un gestionar de evenimente onLoa d este definit n tag-ul <body>. n situaia n care acesta este identificat, se execut i nstruciunea JavaScript plasat ntre ghilimele, dup semnul egal. Astfel, dup ncrcarea pa inii se afieaz o caset de avertisment pentru a v avertiza c nu este ru s nvai s p o de aparene! n msura n care gestionarul de evenimente este declanat odat ce documentu l (X)HTML a fost ncrcat i afiat nu putei utiliza n gestionarul de evenimente onLoad in struciunea document.write sau document.open. ncepnd cu versiunea 1.1 a limbajului J avaScript, imaginile pot avea i ele un gestionar de evenimente onLoad. Atunci cnd definii un gestionar de evenimente onLoad pentru un tag <img>, evenimentul (Load) este declanat la finele ncrcrii imaginii. n tag-ul <body> putei de asemenea defini ge stionarul de evenimente onUnLoad. Evenimentul UnLoad este declanat atunci cnd se nc arc un nou document sau cnd fereastra navigatorului este nchis. 199 4. Completai structura HTML a documentului (figura 6.6). Figura 6.6 5. Afiai pagina Web ntr-un browser (figura 6.7).

Figura 6.7 Remarci: Atunci cnd utilizatorul ncarc aceast pagin Web ntr-un navigator, gestionarul de evenimente onLoad asociat paginii Web (sau documentului) unde se execut aceast aciune, va fi activat. ncrcarea acestei pagini Web are ca efect apariia mesajului: nv privii dincolo de aparene!. Modificai structura gestionarului de evenimente onLoad pe care l-ai creat n aplicaia precedent, utiliznd mai multe instruciuni JavaScript. Iat cum modificm (Varianta 1, Varianta 2) structura gestionarului de evenimente onLoad pe care l-am creat n aplicaia precedent, utiliznd de aceast dat mai multe instruciuni JavaScript. Varianta 1 (figura 6.8) 200

Figura 6.8 Remarci: n aceast variant, gestionarul nu conine dect dou instruciuni (separate prin p nct i virgul) dar el poate s conin foarte bine oricte instruciuni dorim. Codul JavaScr

pt al gestionarului de evenimente are acces complet la variabila global: pagina_i ncarcata. Nu uitai c variabilele globale JavaScript sunt accesibile peste tot, inc lusiv n gestionarul de evenimente. n aceast variant instruciunea de atribuire. pagina_incarcata=true; este necesar pentru a indica navigatorului c poate interaciona cu utilizatorul. Varianta 2 (figura 6.9) Figura 6.9 Remarci: Gestionarul de evenimente onLoad apeleaz o funcie (execut_Incrcare) cu un p arametru. Parametrul incarca al funciei definite primete valoarea TRUE ce se atrib uie variabilei (locale) pagina_incarcata. Utilizai un formular (X)HTML pentru afiarea urmtoarelor mesaje de ncrcare i descrcare unei pagini Web. Pagina este n curs de ncrcare!; 201 Pagina a fost ncrcat La revedere! (mesajul se va afia ntr-o caset de avertisment!) Remarc. Obiectul Form este prezentat n detaliu n Conversaia 8. n figura 6.10 se prezint documentul (X)HTML complet.

Figura 6.10 Remarci: Tag-ul <body> conine doi gestionari de evenimente: onLoad; onUnLoad. Ges tionarul onLoad este activat n momentul n care pagina a fost ncrcat integral. Gestion arul onUnLoad este activat n momentul n care ncrcai o alt pagin Web n navigator. Nu e ntotdeauna recomandabil s afiai o caset de avertisment atunci cnd vizitatorul prset agin Web. Numeroi vizitatori nu agreeaz ideea de a executa clic ntr-o caset de averti sment pentru a putea prsi pagina dumneavoastr Web. n consecin, aceast tehnic trebuie loatat cu pruden! Creai script-uri care afieaz mesaje n bara de stare a navigatorului. Indicaie. Una di n aplicaiile curente ale gestionarilor de evenimente este afiarea unui mesaj n bara de stare a navigatorului atunci cnd vizitatorul execut clic pe un link. Pentru li nk-uri dou sunt evenimentele care se execut n paralel: MouseOver i

MouseOut. Evenimentul MouseOver se produce atunci cnd trecei cu mouse-ul pe deasupra link-ul ui, iar evenimentul MouseOut se produce atunci cnd v deplasai cu mouse-ul n zona ext erioar legturii. Cele dou evenimente sunt utilizate pentru a modifica textul care s e afieaz n bara de stare a navigatorului. Remarc. n mod implicit, URL-ul unei legturi se afieaz n bara de stare a navigatorului momentul n care trecei cu mouse-ul pe deasupra legturii. 202 Gestionarul de evenimente onMouseOver v permite s afiai un mesaj personalizat n bara de stare a navigatorului, care corespunde unui link anume. Pentru aceasta, utili zai proprietatea JavaScript status. Gestionarul de evenimente onMouseOut este uti lizat pentru a terge textul afiat n bara de stare n momentul n care mouse-ul este dep lasat n exteriorul legturii. Remarci: Atunci cnd utilizai gestionarul de evenimente onMouseOver pentru a afia me saje n bara de stare, n momentul n care executai clic pe un link, mesajul personaliz at nlocuiete URL-ul afiat n mod implicit. Asigurai-v c mesajul dumneavoastr este cel puin la fel de util ca URL-ul! Gestionarul de evenimente onM ouseOver se aplic la: document; form; form.button; form.checkbox; form.fileupdate

; form.password; form.select; form.option; form.reset; form.text; form.textarea; form.submit. Gestionarul de evenimente onMouseOut se aplic la aceleai elemente ca i onMouseOver. Iat cum crem un script care afieaz urmtoarele mesaje n bara de stare:

comandai cartea (X)HTML; comandai cartea DREAMWEAVER MX; comandai cartea XML. Aceste mesaje vor dispare atunci cnd mouse-ul nu se va afla deasupra acestor mesa je, care reprezint link-uri ce se afieaz ntr-o list simpl. 1. Definii o funcie (descr e) care accept un parametru (text) pentru a afia un mesaj n bara de stare (figura 6 .11). Figura 6.11 Remarci: Parametrul text conine mesajul care se va afia n bara de stare a navigatorului. ntru ct funcia returneaz TRUE, n bara de stare se va continua s se afieze mesajul pn cnd a va fi ters. 2. Definii o funcie (tergere) pentru a terge mesajul, apelabil din gestionarul de eve nimente onMouseOut (figura 6.12). Figura 6.12 203 3. Completai script-ul, adugnd cunoscutele tag-uri <script> (figura 6.13). Figura 6.13 4. Completai structura (X)HTML a documentului adugnd: link-urile propri u-zise i gestionarii de evenimente (onMouseOver, onMouseOut) care apeleaz cele dou funcii: descriere, stergere (figura 6.14). Figura 6.14 Remarci: Funciile (descriere, stergere) sunt definite n header-ul documentului. Fi ecare link conine un gestionar onMouseOver i onMouseOut pentru a apela funciile de afiare i tergere a mesajelor n bara de stare. 5. Afiai pagina Web ntr-un navigator (figura 6.15). 204 Figura 6.15 6. Testai script-ul (figura 6.16). Figura 6.16 Utilizai gestionarul de evenimente combinat cu metoda onMouseOver setTimeOut. Indicaie. JavaScript include o metod setTimeOut care permite instalarea evenimente lor temporizator (cronometrate). De exemplu, putei utiliza metoda

setTimeOut mpreun cu onMouseOver pentru a afia un mesaj n bara de stare a navigatorului ntr-o perioad de timp predefinit i a-l terge dup aceea. n principiu, fun a necesar pentru tergerea textului din bara de stare trebuie s cuprind dou etape: Eta pa 1 Definirea mesajului (textului) care urmeaz s se afieze n bara de stare, ca un ir de caractere specific; Etapa 2 Ateptarea unei perioade de timp predefinite i apoi tergerea mesajului afiat n bara de stare. 205 Iat cum crem un script care afieaz timp de 4 secunde n bara de stare a navigatorului

mesajul: Singurtatea este mai grea dect orice boal! pe care apoi l terge! 1. Definii uncie (descriere) n care includei instruciunea window.status (figura 6.17). Figura 6.17 2. Adugai metoda setTimeOut (figura 6.18). Figura 6.18 Remarci: Primul parametru definete starea ferestrei la o valoare null (); Al doilea parametr u precizeaz perioada de timp predefinit trebuie ateptat 4 secunde. 3. Adugai instruciunea return true (figura 6.19). Figura 6.19 Remarc. Instruciunea return true precizeaz navigatorului c funcia descriere este pregt it pentru a interaciona cu utilizatorul. 4. Completai script-ul i plasai-l n antet-ul documentului (figura 6.20). 206 Figura 6.20 5. Adugai n corpul documentului n tag-ul <a>, instruciunea onMouseOver=descriere(); return true; (figura 6.21). Figura 6.21 6. Afiai pagina Web ntr-un navigator (figura 6.22). Figura 6.22 7. Testai script-ul (figura 6.23). 207 Figura 6.23 Creai gestionari de evenimente dinamici. Indicaie. n loc s creai un gesti onar de evenimente n interiorul unui document (X)HTML, putei crea o funcie JavaScri pt care va face oficiul de gestionar de evenimente. Avei de asemenea posibilitate a s creai gestionari de evenimente condiionali, de a-i activa sau a-i dezactiva, sa u nc de a modifica funcia (ca gestionar de evenimente) de o manier dinamic. Pentru ac easta este suficient de a crea funcia i de a o defini ca gestionar de evenimente. Iat cum creai pentru un document gestionarul de evenimente dinamic onMouseDown. 1. Creai o funcie (clicmouse) pe care o definii ca gestionar de evenimente (figura 6. 24). Figura 6.24 2. Atribuii funcia (clicmouse) gestionarului de evenimente onMouseDown (figura 6.25). Figura 6.25 Remarc. Gestionarii de evenimente dinamici sunt stocai sub form de proprieti ale obie ctului Document sau ale unui alt obiect cruia i se poate atribui un eveniment. 3. Completai script-ul i structura (X)HTML a documentului (figura 6.26). 208

Figura 6.26 4. Afiai pagina Web ntr-un navigator (figura 6.27). Figura 6.27 5. Testai script-ul (figura 6.28). Figura 6.28 Creai un script care afieaz ntr-o caset de dialog de avertizare care buto n al mouse-ului a fost utilizat. Creai un script care afieaz n bara de stare a navig atorului Internet Explorer, Netscape caracterele pe care le-ai tastat. 209 JavaScript Testai-v cunotinele Tem 1. Ce este un gestionar de evenimente. Exemple. 2. Care sunt gestionarii de even imente care permit detectarea unui clic pe un link? 3. Cnd se execut gestionarul d e evenimente onLoad din tag-ul <body>? 4. Care este rolul proprietii event.KeyCode n Internet Explorer? 5. Cnd se apeleaz urmtorii gestionari de evenimente: onUnLoad; onMouseOver; onMouseOut; onMouseDown; onClick; onDblClick; onChange; o nMouseUp; onKeyPress; onSubmit; onReset; 210 onSelect. 6. Comentai urmtorul script (figura 6.29). <script language="javascript" type="text/javascript"> function test (text){ wind ow.status=text; return true; } Figura 6.29 </script> 7. Comentai urmtoarea instruciune JavaScript: <b onDblClick=alert (Nu este nimic ntmpltor!)> Test </b> Vizitai site-urile javascript.internet.com www.javascripts.com www.javascript.com comp.lang.javascr ipt livesoftware.javascript.developer livesoftware.javascript.examples de.comp.l ang.javascript Conversaia 7 Obiectele navigatorului n aceast conversaie: Document Object Model (DOM) Obiectul Window. Aplicaii Obiecte de nivelul 1 Obiect e de nivelul al doilea Obiecte de nivelul al treilea Obiecte de nivelul al patru lea Obiectul Navigator. Aplicaii Tem Document Object Model (DOM) n conversaiile anterioare am acordat atenie limbajului de programare JavaScript i ob iectelor interne ale acestuia (Arguments, Array, Boolean, Date, Function, Math, Number, Object, RegExp, String, This). Obiectele pe care le vei utiliza cel mai des, pe parte de client

sunt cele care aparin DOM-ului (Document Object Model), cu ajutorul crora script-u rile dumneavoastr vor putea manipula paginile Web, ferestrele i documentele. Obiec tivul acestui model (DOM) este acela de a v oferi o interfa (ntre dou fee exist ... o nterfa!) simpl i coerent ntre programele JavaScript i navigatorul Web. DOM-ul definete obiectele disponibile, proprietile, metodele i evenimentele acestora. Cu o parte din obiectele DOM-ului ai fcut deja cunotin. 212 n afar de aceste obiecte, DOM-ul mai conine i alte obiecte ierarhizate (structur arbo rescent), obiectul Window aflndu-se n vrful arborescenei.

Ierarhia obiectelor Cnd examinai ndeaproape ierarhia general a obiectelor n JavaScript, putei vedea c cele mai multe obiecte sunt fie pe parte de client sau pe parte de server. n aceast luc rare vom examina obiectele numai pe parte de client i vom prezenta proprietile i met odele lor. Remarc. Majoritatea obiectelor JavaScript sunt reprezentri ca obiecte ale tag-uril or (X)HTML. n figura 7.1 sunt prezentate obiectele pe parte de client i tag-urile (X)HTML core spunztoare. Obiect JavaScript Tag (X)HTML corespondent Figura 7.1 Button Checkbox Hidden Fileupload Password Radio Reset Select Frame Document Lay er Link Image Area Anchor Applet Plugin Form Submit Text Textarea Option <input type=button /> <input type=checkbox /> <input type=hidden /> <input type=file <input type=password /> <input type=radio /> <input type=reset /> <select> <frame> <bo dy> <layer> sau <ilayer> <a href= /> <img /> <map> <a name= /> <applet> <embed> <f orm> <input type=submit /> <input type=text /> <textarea> <option>

Pe msur ce vei examina aceste obiecte vei vedea modalitile diverse n care ele sunt pre entate utilizatorilor i programatorilor n limbajul JavaScript. Lista obiectelor Ja vaScript este prezentat n ordine alfabetic n figura 7.2, iar ierarhia obiectelor est e ilustrat n figura 7.3. 213 button event hidden MimeType option plugins screen Figura 7.2 checkbox fileUpload history navigator Option() radio select textarea document form location obiecte n general password reset submit window Button Checkbox FileUpload Hidden Password Radio Reset Submit Select Text Textar ea text Document Anchor Area Applet Form Image Layer Link Plugin Option Window Frame History Location Event Style

Figura 7.3 Obiectele sunt ierarhizate dup cum urmeaz: Obiectul Window, de nivelul cel mai nalt (nivelul 0), pe parte de client; Obiecte de nivelul 1: Document, Frame, History, Location, Event, Style; Obiecte de nivelul al doilea: Anchor, Area, Applet, Form, Image, Layer, Link, Plugin; Obiecte de nivelul al treilea: Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Submit, Select, Text, Textarea; Obiecte de nivelul al patrulea: Option. Remarci: Obiectele limbajului JavaScript pe parte de client reprezint instrumente importante cu ajutorul crora putei genera script-uri. n cea mai mare parte modelul obiectului este constituit din elemente (X)HTML care sunt transpuse n obiecte. Dac pn acum ai programat n limbajului (X)HTML, din acest moment trebuie s abordai elemente le (X)HTML ca fiind nu tag-uri, ci obiecte. 214 JavaScript utilizeaz o ierarhie de obiecte: printe-fiu, cunoscute sub numele de Do cument Object Model (DOM). Aceste obiecte, organizate ntr-o structur arborescent re prezint coninutul i componentele unui document Web. Iat un exemplu simplu (figura 7.4) care ilustreaz modul n care un fiier (X)HTML stab ilete corespondena cu DOM-ul navigatorului. Figura 7.4 n cursul ncrcrii fiierului XHTML, navigatorul Web folosete un ansamblu complet de obie cte ale DOM-ului pentru a le reprezenta (vezi figura 7.5). Obiect Obiectul Window Obiectul Document Un obiect demo Figura 7.5 Form cu numele Descriere Reprezint navigatorul Web Reprezint fiierul XHTML Reprezint tag-ul <form> definit n f iierul XHTML Reprezint zonele de text definite n formular Trei obiecte input cu numele: nume, prenume, email Remarc. Evident, mai sunt create i alte obiecte, ca de exemplu matricea formularel or forms[]. n figura 7.6 se prezint modul de imbricare al obiectelor create. 215 Obiectul Window Obiectul Document Obiectul Form demo Obiectul Input nume Obiectul In put prenume Figura 7.6 Obiectul Input email Istoricul DOM-ului Obiectele navigatorului sunt exterioare limbajului JavaScript dar sunt recunoscu

te de ctre navigatoare. Din pcate exist nc diferene ntre navigatoare, care nu de puin ri se manifest n mod suprtor. Dup Netscape 3.0 i Internet Explorer 4.0 toate obiectele de baz sunt luate n considerare de ctre cele dou browser-e, iar noile norme DOM sun t recunoscute de ultimele versiuni Netscape i Internet Explorer. W3C (World Wide Web Consortium) a pus recent la punct norma DOM de nivel 1. Aceast norm nu conine d ect obiectele de baz, toate obiectele acoperind integral componentele unui documen t (X)HTML. O norm de nivel 2 este n curs de apariie. Ierarhia obiectelor de care no i vorbim n aceast conversaie este cunoscut sub numele de DOM 0 iar obiectele sunt in cluse n norma DOM 1. Remarc. Obiectele DOM de nivel 1 i 2 permit modificarea unei pagini Web n timp real , dup ncrcarea sa (Dinamic HTML). Obiectul Window Obiectul Window de nivelul cel mai nalt reprezint fereastra navigatorului n care es te afiat obiectul Document. Fiecare fereastr a navigatorului i fiecare cadru au pro priul lor obiect Window. Fia obiectului Window este prezentat n figura 7.7. Remarc. Nu uitai c un obiect Window i proprietile sale pot fi atribuite unei variabile JavaScript ca orice alt obiect. 216 Spre deosebire de alte obiecte care pot s fie prezente sau nu, obiectul Window ex ist permanent. Remarci: Mai multe obiecte window pot exista n acelai timp, fiecare reprezentnd o f ereastr a navigatorului deschis. Cadrele (frames, n limba englez) sunt de asemenea r eprezentate prin obiecte Window (vezi Conversaia 10). Straturile (layers, n limba englez) care permit modificarea n mod dinamic a coninutului unui document Web sunt analoage obiectelor Window (vezi Conversaia 10). Fia obiectului Window Subobiecte: Proprieti: document, event, history, location, navigator, style content, clientinformation, clipboard, closed, defaultstatus, dialogArguments, dialogHeight, dialogLeft, di alogTop, dialogWidth, document, event, frames[], history, innerHeight, innerWidt h, length, name, navigator, offscreenBuffering, opener, outerHeight, outerWidth, pageXOFFset, pageYOffset, parent, returnValue, screen, screenLeft, screenTop, s creenX, screenY, self, status, style, top, window alert(), back(), blur(), clear Interval(), clearTimeout(), close(), confirm(), createPopup(), execScript(), foc us(), forward(), home(), moveBy(), moveTo(), navigate(), open(), print(), prompt (), resizeBy(), resizeTo(), scroll(), scrollBy(), scrollTo(), setActive(), setIn terval(), setTimeout(), showHelp(), showModaldialog(), showModelessDialog(), sto p() onActivate, onAfterPrint, onBeforeActivate, onBeforePrint, onBeforeUnload, o nBlur, onControlSelect, onDeActivate, onDragDrop, onError, onFocus, onHelp, onLo ad, onMouseMove, onMove, onMoveEnd, onMoveStart, onResize, onResizeEnd, onResize Start, onScroll, onUnload Metode: Gestionarii de evenimente: Figura 7.7 Proprietile fundamentale ale obiectului Window Cele mai importante proprieti ale obiectului Window sunt prezentate n detaliu n figu ra 7.8. Proprietate Sintax closed este deschis).

window.closed Conine valoarea true (fereastra este nchis) sau false (fereastra defaultStatus window.defaultStatus Conine un ir de caractere reprezentnd textul afiat n mod implicit n bara de stare. El rmne valabil atta timp ct coninutul ferestrei nu Figura 7.8 se schimb. Exemplu: <script>window.defaultStatus=La muli ani mpreun! </script> 217 document window.document Proprietatea document corespunde obiectului Document. frames[] window.frames[] Conine un obiect window pentru fiecare cadru al site-ului Web. history obiectul History). window.history Un obiect care conine lista de site-uri (istoricul) Web vizitate (vezi length window.length Numrul de cadre coninute n fereastr. name window.name Numele obiectului Window. Acest nume este diferit de numele variabilei JavaScrip t care conine obiectul Window. ... var catwindow=window.open(); catwindow.name=cat; Exemplu: navigator window.nav igator Obiectul Navigator conine informaii cu privire la navigator. Exemplu: ... for (x in navigator) document.write(x+=+navigator[x]+<br />; ... opener window.o pener Corespunde ferestrei n care a fost creat o alt fereastr (prin metoda window.open(). Marea majoritate a proprietilor i metodelor obiectului window pot fi aplicate propr ietii opener). outerHeight

window.outerHeight

nlimea (n pixeli) documentului afiat n fereastr (incluznd bara de meniuri, bara de in umente, bara de stare). outerWidth window.outerWidth

Limea (n pixeli) documentului afiat n fereastr (incluznd bara de meniuri, bara de inst umente, bara de stare). parent window.parent Referin la fereastra/cadrul printe al ferestrei/cadrului curent. screen Figura 7.8 window.screen (continuare) Conine informaii privind configuraia ecranului de pe monitorul clientului. self window.self 218 Referina la fereastra curent. Identic cu window (window.window). Exemplu: window.close() identic cu: window.self.close status window.status Conine un ir de caractere care va fi temporar afiat n bara de stare a navigatorului. top window.top Referina ctre fereastra navigatorului situat n prim plan. window (continuare) window.window Figura 7.8 Identic cu window.self. Metodele fundamentale ale obiectului Window Metodele fundamentale ale obiectului Window sunt prezentate n detaliu n figura 7.9 .

Metode Sintax alert() window.alert (Mesaj) alert (Mesaj) Afieaz o caset de dialog care conine un buton OK i mesajul specificat. Apelarea metod ei oprete execuia programului JavaScript pn cnd utilizatorul execut clic pe butonul OK pentru a continua. Metoda alert() este folosit i ca instrument de depanare a scri pt-urilor (vezi Conversaia 11). back() window.back() back() Retur la pagina precedent afiat n fereastr (vezi obiectul History). blur() window.blur() blur() Retrage focus-ul ferestrei curente. Exemplu: <script>window.blur()</script> close() window.close() close() window.confirm(Mesaj) confirm(Mesaj) nchide fereastra curent (dup confirmarea de ctre utilizator). confirm() Figura 7.9 Afieaz o caset de dialog care conine mesajul specificat, un buton OK i un buton de an ulare. Returneaz TRUE dac utilizatorul execut clic pe butonul OK i FALSE dac utilizat orul execut clic pe butonul de anulare. Exemplu: <script> a=window.confirm(Deschide o nou fereastr); 219 if (a==true) { window.open(nou.htm); document.write(Noua fereastr este deschis); } if (a==false) { window.open(nou.htm); document.write(Noua fereastr nu va fi deschis); } < /script> execScript() window.execScript(Expresie,Limbaj) execScript(Expresie,Lim baj) Execut expresia menionat ca i cnd ar fi un script, n limbajul indicat. Exemplu: <scrip t> window.execScript(alert(Fatalitate),JavaScript); </script> focus() window.focus() focus() window.forward() forward() window.home() home() Transmite focus-ul ferestrei curente. forward() Oblig navigatorul s ncarce documentul urmtor n istoric.

home() Navigatorul ncarc pagina definit ca pagin de index de ctre utilizator. window.moveBy(x,y) moveBy(x,y) Deplaseaz fereastra cu x pixeli orizontal i cu y pi xeli vertical. Cele dou valori pot fi pozitive sau negative. Exemplu: <script> moveBy() valori au ca origine colul superior stnga al ecranului. Exemplu: <script> (continuare) window.moveTo(x,y) moveTo(x,y) Deplaseaz fereastra la poziia x (orizontal) i y (ver tical). Cele dou window.moveBy(100,200); </script> moveTo() Figura 7.9 window.moveTo(0,0); </script> open() window.open(URL,Nume,Atribute, nlocuiete)

220 open(URL,Nume,Atribute, nlocuiete) Deschide o nou fereastr a navigatorului i returneaz un obiect Window pentru a o repr ezenta. Dac apelai metoda open() fr parametri, vei obine o fereastr vid. Pentru a ved ceva mai interesant, transmitei urmtorii patru parametri respectnd secvena de mai jo s: URL adresa Web a paginii Web care dorii s se ncarce automat n noua fereastr. Nume r de caractere care va fi plasat n proprietatea window.name a noii ferestre. Atri bute width, height, menubar, resizable, scrollbars, status, directories. nlocuiete este o valoare logic (true, dac istoricul ferestrei este ters). Metoda returneaz o referin la noua fereastr. Atributele pot lua valoarea adevrat sub forma true, yes sa u 1 sau valoarea false sub forma false, no sau 0. Semnificaia atributelor este ur mtoarea: toolbar afieaz/ascunde bara de instrumente a browser-ului location prezena barei de adrese directories afieaz/ascunde o bar de instrumente (Netscape) secundar cu butoane familiare status afieaz/ascunde bara de stare a navigatorului menubar a fieaz/ascunde bara de meniuri a navigatorului scrollbars afieaz/ascunde barele de de rulare pe vertical i orizontal ale browser-ului resizable permite/interzice redimen sionarea ferestrei de browser width limea n pixeli a ferestrei height nlimea n pix ferestrei <script> newfereastra=window.open(test.htm,titlu,toolbarno, location=no, di rectories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=100, hei ght=100); </script> Exemplu: print() Imprim coninutul ferestrei. window.print() print() window.prompt(Mesaj,ConinutImplicit) prompt(Mesaj,ConinutImplic it) prompt() (continuare) Exemplu:

Figura 7.9 Afieaz o caset de dialog care conine mesajul specificat, o zon de text pe care o comp leteaz utilizatorul, butonul OK i butonul de anulare. Al doilea argument este facu ltativ. Rspunsul implicit specificat n prompt() este afiat n zona de text. Utilizato rul poate introduce o alt valoare sau poate executa clic pe butonul OK pentru a a ccepta rspunsul implicit. Dac el execut clic pe butonul OK, valoarea coninut n zona de text este returnat script-ului; dac el execut clic pe butonul de anulare, atunci v aloarea null este returnat script-ului. Valoarea null reprezint nimic sau un obiect vid. <script> var raspuns=prompt(Care este culoarea preferata?, cepia); if (raspuns==null ){ 221 alert(Ati apasat butonul Cancel); } else{ alert(Raspunsul dumneavoastr este +raspuns) ; } </script> resizeTo() window.resizeTo(Lungime,Lime) resizeTo(Lungime,Lime) Redime sioneaz fereastra navigatorului la Lungime i Lime <script> self.resizeTo(50,325); </ script> scroll() specificate (n pixeli). Exemplu: window.scroll(x,y) scroll(x,y) Face s defileze coninutul unei ferestre pn la poziia specificat (x i y) n raport cu colul din stnga sus al ferestrei. Remarc. Metoda este depit. scrollTo() Exemplu: (continuare) (lime) n raport cu colul din stnga sus al ferestrei. window.scrollTo(x,y) scrollTo(x,y) Face s defileze coninutul unei ferestre pn la poz iia x (lungime), y <script> window.scrollTo(0,100); </script> Figura 7.9 window.setInterval(Expresie, Interval,Argumente) setInterval(Expresie, Interval, Argumente) Execut Expresie n intervalele fixate. Expresie poate fi o instruciune JavaScript sau apelul unei funcii. Interval este prezentat n milisecunde. Argument e sunt transmise funciei apelate. Remarci: Metoda setInterval() clearInterval() anuleaz efectul metodei setInterval(). Metoda setInterval() este aproape identic cu metoda setTimeout(). Principala diferen ntre cele dou metode (vezi setTimeout()) este aceea c parametrul Expresie, care poate fi o instruciune sau apelul unei funcii executat fr sfrit. 222 Exemplu:

window.setTimeOut(Expresie, Durata,Argumente) setTimeOut(Expresie, Durata,Argume nte) Execut Expresie dup Durata (n milisecunde). Expresie poate fi apelul unei funcii. Argumentele (facultative) sunt transmise funciei apelate. Remarc. Metoda setTimeout() clearTimeOut() anuleaz efectul metodei setTimeOut(). Exemplu: (continuare) Figura 7.9 223 Rezultatele execuiei script-ului. (continuare) Figura 7.9 Aplicaii ale obiectului Window Una din aplicaiile cele mai interesante ale obiectului Window este crearea i nchide rea unei noi ferestre. V prezentm n cele ce urmeaz cteva aplicaii simple, reprezentati ve pentru metodele i proprietile obiectului Window. Creai un document (X)HTML care c onine un script (simplu) ce utilizeaz butoane pentru crearea i nchiderea unei ferest re. Indicaie. Folosii metodele: open() i close() prezentate n figura 7.9. n figura 7. 10 este prezentat documentul (X)HTML complet. 224 Figura 7.10 Remarci: Documentul XHTML permite deschiderea unei noi ferestre executnd clic pe un buton (primul buton). A doua fereastr este foarte mic pentru a se putea disting e de prima fereastr. Al doilea buton permite nchiderea acestei ferestre. Al treile a buton nchide fereastra principal a navigatorului, dup acordul utilizatorului. Ace st document face apel la gestionarii de evenimente onClick (cte unul pentru fieca re buton). n figura 7.11 este prezentat pagina Web afiat n Internet Explorer, cu noua fereastr de schis. Figura 7.11 225 Creai un document (X)HTML care conine un script (simplu) pentru deplasarea i modifi carea ferestrelor. n figura 7.12 este prezentat documentul XHTML complet. Figura 7.12

Remarci:

Funcia Demo() este apelat ca un gestionar de evenimente atunci cnd executai clic pe butonul modificai dimensiunile ferestrei. Funcia Demo() verific dac ai introdus valori pentru lungime i lime. Dac aceste valori au fost introduse se apeleaz metoda self.res izeTo() pentru a modifica dimensiunile ferestrei curente. Funcia Demo() verific da c ai introdus valori pentru abscis(x) i ordonat(y). Dac aceste valori au fost introdus e se apeleaz metoda self.moveTo() pentru a deplasa fereastra.

Creai un mic dicionar pentru vizitatorii site-ului dumneavoastr. Afiai n bleu cuvintel e pe care le definii. Ori de cte ori utilizatorul va executa un clic pe unul din a ceste cuvinte, se va deschide o fereastr n care se afieaz o scurt definiie a cuvntului selectat (figura 7.13). Personalizai script-ul creat. 226 coriamb Un dactil si un troheu Figura 7.13 Scriei un program JavaScript care ajusteaz n mod automat dimensiunea caracterelor u nui text la dimensiunile ferestrei. Cu ct fereastra este mai mare, cu att caracter ele sunt mai mari. Punerea n pagin va fi asigurat n toate circumstanele. Definii dimen siunea de baz a caracterelor pentru dimensiuni precise ale ferestrei. Dimensiunea caracterelor se va recalcula la fiecare redimensionare a ferestrei. Script-ul r edefinete stilul caracterelor pentru ntreg documentul de fiecare dat cnd fereastra i s chimb dimensiunile (figura 7.14, figura 7.15). Figura 7.14 227 Figura 7.15 Comentai urmtorul document XHTML care conine un script pentru actualizarea periodic a coninutului unei pagini Web (figura 7.16). Indicaie. Revedei metoda setTimeOut() prezentat n figura 7.9. Figura 7.16 Creai un script pentru a afia trei casete de dialog cu ajutorul metodelor alert(), confirm(), prompt(). n figura 7.17 este afiat documentul complet XHTML. 228 Figura 7.17 Remarc. Documentul afieaz trei butoane, fiecare dintre ele apelnd cte un gestionar de evenimente pentru a afia o caset de dialog. n figurile 7.18, 7.19, 7.20 sunt prezentate rezultatele execuiei programului JavaS cript. Figura 7.18 229

Figura 7.19 Figura 7.20 Obiecte de nivelul 1 Obiectul Window, considerat ca fiind obiectul de cel mai nalt nivel n ierarhia obi ectelor JavaScript pe parte de client conine toate celelalte obiecte pe parte de client, cu excepia obiectului Navigator. Este important s facei cunotin cu aceste obie cte, i ... s rmnei mpreun! Ele sunt: Document; Frame; History; Location; Event; Style. Remarc. Aceste obiecte sunt considerate obiecte de nivelul 1. 230 Obiectul Document Manipularea documentelor Web Obiectul Document reprezint pagina Web afiat ntr-o fereastr a navigatorului. Nu pare deci surprinztor faptul c obiectele Document sunt fii ai ob iectelor Window. n msura n care obiectul Window reprezint ntotdeauna fereastra activ ( cea care conine script-ul), putei utiliza window.document pentru a v referi la docu mentul curent sau, mai simplu, utilizai numai document. Remarc. n programele JavaScript din conversaiile precedente ai fcut apel la metoda do cument.write pentru a afia un text ntr-un document Web. Programele la care ne refe rim nu utilizau dect o fereastr; n consecin, era inutil s folosii descrierea complet dow.document.write. Dac mai multe ferestre sau mai multe cadre sunt deschise, atunci vor exista mai m ulte obiecte window i un singur obiect Document pentru fiecare dintre ele. Pentru a utiliza un astfel de obiect Document ne folosim de numele ferestrei urmat de numele obiectului. Fia obiectului Document este prezentat n figura 7.21. Fia obiectului Document Obiectul printe: Subobiecte: Proprieti: Metode: Gestionarii de evenimente: Figura 7.21 Window Anchor, Area, Applet, Form, Image, Layer, Link, Plugin activeElement, ali nkColor, all[], anchors[], applets[], attributes[], background, bgColor, body, c haracterSet, charSet, childNodes[], cookie, defaultcharset, domain, embeds[], fg color, fileCreatedDate, fileModifiedDate, fileSize, forms[], frames[], height, i mages[], innerHTML, innerText, lastModified, layers[], links[], location, outerH TML, outerText, parentWindow, plugins[], protocol, readyState, referrer, scripts [], selection, style, stylesheets[], title, URL, vlinkColor, width clear(), clos e(), createElement(), createStyleSheet(), elementFormPoint(), getElementByld(), getElementsByName(), getElementsByTagName(), getSelection(), open(), setActive() , write(), writeln onActivate, onBeforeCut, onBeforeDeActivate, onBeforeEditFocu s, onBeforePaste, onBeforeUpdate, onCellChange, onClick, onContextMenu, onContro lSelect, onCut, onDblClick, onDrag, onDragEnd, onDragEnter, onDragLeave, onDragO ver, onDragStart, onDrop, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, o nMouseOut, onMouseOver, onMouseUp, onPaste, onPropertyChange, onSelectionChange,

onSelectStart, onStop 231 Proprietile fundamentale ale obiectului Document Proprietile fundamentale ale obiectului Document sunt prezentate n detaliu n figura 7.22. Proprietate Sintax alinkColor document.alinkColor Exemplu: Conine culoarea atribuit link-urilor active, definit prin atributul alink al tag-ul ui <body>. Pentru a modifica culoarea link-ului, atribuii o nou valoare a culorii. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh tml"> <head> <title>Aplicatie</title> <meta http-equiv="Content-Type" content="t ext/html; charset=iso-8859-1" /> <script language="JavaScript" type="text/JavaSc ript"> document.write("<br />Legaturi active: "+document.alinkColor); document.w rite("<br />Legaturi: "+document.linkColor); document.write("<br />Legaturi vizi tate: "+document.vlinkColor); </script> </head> <body link="blue" alink="yellow" vlink="purple"> </body> </html> all[] document.all[] Toate elementele documentului. Fiecare element este o dat al matricii (array) all []. Elementele sunt referite prin numrul lor de ordine sau prin numele lor. Utili zai metoda tags() pentru a obine setul de elemente ale unui tag precis. Exemplu: Figura 7.22 <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>all[]</title> </head> <body> <p id="unu">O imagine <img src="sigla.jpg" name="sigla1" width="15" heigh t="30" border="0" id="sigla1" /></p> <p id="doi">A doua imagine <img src="sigla. jpg" name="sigla2" width="15" height="30" border="0" id="sigla2" /></p> <script language="JavaScript" type="text/javascript"> //Afiseaza id-ul tag-urilor para=d ocument.all.tags("p"); document.write(para[0].id+"<br />"); document.write(para[ 1].id+"<br />"); </script> </body> </html> 232 anchors[] document.anchors[] Matricea anchors[] conine un obiect Anchor (ancor) pentru fiecare set de tag-uri: <a name=...> ... </a>. applets[] documet.applets[] Matricea applets[] conine toate applet-urile Java inserate n documentul (X)HTML. F iecare element al matricii corespunde unui set de tag-uri <applet> ... </applet> . document.applets.length returneaz numrul de applet-uri ale documentului. bgColor document.bgColor

Culoarea de fond a documentului numai atributul bgColor al tag-ului <body> (vezi proprietatea alinkColor). body document.body Referin la seciunea body a documentului. body este un obiect care recunoate proprietile obiectului document. Exemplu: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh tml"> <head> <title>document.body</title> <meta http-equiv="Content-Type" conten t="text/html; charset=iso-8859-1" /> </head> <body> <script language="JavaScript " type="text/JavaScript"> nouFer=window.open("","nou","height=200, width=200"); nouFer.document.write("<head><title>demo</title></head><body><b>La multi ani imp reuna!</b></body>"); document.write(nouFer.document.body.innerHTML); nouFer.clos e(); </script> </body> </html> cookie document.cookie Permite citirea i configurarea valorii cookie-ului clientului pentru un document (X)HTML. Citirea i nregistrarea cookie-ului sunt foarte simple. Remarc. Utilizarea unui cookie este puin mai complicat. Exemplu: Figura 7.22 (continuare) ... //citeste cookie var numCookie=document.cookie; //scrie cookie document.cook ie=numCookie; ... 233 embeds[] document.embeds[] Matricea embeds[] conine toate elementele incorporate n documentul (X)HTML. ntr-o p agin Web, un element incorporat este plasat ntre tag-urile <embed> i </embed>. docu ment.embeds.length returneaz numrul de elemente incorporate n document. fgColor document.fgColor Culoarea textului. Corespunde atributului text al tag-ului <body> (vezi propriet atea alinkColor). forms[] document.forms[] Setul de formulare coninute n documentul (X)HTML. Formularele sunt reprezentate n d ocumentul (X)HTML prin tag-ul <form>. Fiecare formular este un element al matric ii (array) forms[]. Primul formular are rangul 0. document.forms.length returneaz numrul de formulare ale documentului. Exemplu: Figura 7.22 (continuare)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh tml"> <head> <title>form</title> </head> <body> <form name="form1"> <input name= "zona1" type="text" id="zona1" /> <br /> <input name="zona2" type="text" id="zon a2" /> </form> <form name="form2" id="form2" method="post" action=""> <input nam e="zona3" type="text" id="zona3" /> <br /> <input name="zona4" type="text" id="z ona4" /> </form> <form name="form3" id="form3" method="post" action=""> <p> <inp ut name="zona5" type="text" id="zona5" /> <br /> <input name="zona6" type="text" id="zona6" /> </p> </form> <script language="JavaScript" type="text/JavaScript" > for(i=0;i<document.forms.length;i++){ document.write(document.forms[i].name+"< br />"); } </script> </body> </html> 234 frames[] document.frames[] Setul de cadre (frames, n limba englez) afiate. Fiecare cadru este un element al ma tricii frames[]. Ele sunt referite prin numrul lor de ordine sau prin numele lor. Primul este de rang 0. Document.frames.length returneaz numrul de cadre ale docum entului. images[] document.images[] Setul de imagini ale documentului. Ele sunt inserate cu tag-ul <img/>. Fiecare i magine este un element al matricii (array) images[]. Ele sunt referite prin numru l lor de ordine sau prin numele lor. document.images.length returneaz numrul de im agini ale documentului. Imaginile recunosc proprietile care corespund atributelor tag-ului <img/>: border, height, hspace, lowsrc, name, src, vspace, width. n plus, proprie tatea complete conine valoarea true dac Exemplu: imaginea s-a ncrcat integral. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or g/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xh tml"> <head> <title>demo</title> </head> <body> <img src="sigla.jpg" name="sigla " width="150" height="300" hspace="5" vspace="10" border="0" lowsrc="siglamin.JP G" id="sigla" /> <script language="JavaScript" type="text/JavaScript"> text="Pro prietatile imaginii: <br />"; text+="border= "+document.sigla.border+"<br />"; t ext+="complet= "+document.sigla.complete+"<br />"; text+="height= "+document.sig la.height+"<br />"; text+="hspace= "+document.sigla.hspace+"<br />"; text+="lows rc= "+document.sigla.lowsrc+"<br />"; text+="name= "+document.sigla.name+"<br /> "; text+="src= "+document.sigla.src+"<br />"; text+="vspace= "+document.sigla.vs pace+"<br />"; text+="width= "+document.sigla.width+"<br />"; document.write(tex t); </script> </body> </html> innerHTML document.innerHTML Conine codul HTML al documentului. Acest atribut poate fi aplicat ntregului obiect din document pentru a recupera sau pentru a modifica codul (X)HTML care l nchide. Figura 7.22 (continuare) 235 Exemplu:

<body> <p id=paragraf><b>text</b>demo</p> <script> element=document.getElementBy ld(paragraf); alert(element.innerHTML); </script> innerText document.innerText Recupereaz sau definete codul (X)HTML ca pe un text, fr interpretarea tag-urilor. lastModified document.lastModified Data i ora ultimei modificri a documentului. Este un obiect String. Exemplu: <script> Document.write(document.lastModified); </script> layers[] document.laye rs[] Setul de straturi reprezentate n pagina (X)HTML prin tag-urile <div> sau <layer>. Pot fi accesate prin atributele id sau name. document.layers.length returneaz numrul de straturi ale documentului. Remarc. Setul de layer-e nu este recunoscut de Netscape. linkColor document.linkColor Codul culorii atribuite link-urilor din documentul (X)HTML, definite prin atribu tul link al tag-ului <body>. links[] document.links[] Matricea links[] conine un obiect Link pentru fiecare tag <a Exemplu: href=...> </a> prezent n documentul (X)HTML. Obiectele links au aceleai proprieti ca obiectul location. ... <a href=http://www.dumitrascu.ro>Link</a> <form> <input type=button value=Schimba link-ul onClick=document.links[0].href=http://www.upg-ploiesti.ro> </form> location document.location Conine URL-ul documentului. Figura 7.22 (continuare) 236 Exemplu: ... <body> <script> document.write(document.location); //se afieaz, de exemplu http:// www.dumitrascu.ro </script> </body> Exemplu: <script> document.write(adresa actua

la: +document.location); document.location=http://www.multimedia.fr; </script> plug ins[] document.plugins[] Setul de plug-ins coninute n documentul (X)HTML. Fiecare plug-in este un element a l matricii plugins[]. Ele sunt referite prin numrul lor de ordine. document.plugins.length returneaz numrul de plug-ins ale documentului. referrer document.referrer URL-ul documentului de la care documentul curent a fost ncrcat. scripts[] document.scripts[] Setul de script-uri coninute n documentul (X)HTML. Ele sunt reprezentate n document prin tag-ul <script>. Fiecare script este un element al matricii (array) script s[]. Ele sunt referite prin numrul lor de ordine. document.scripts.length returneaz numrul de script-uri ale documentului. title document.title Titlul documentului, cel care este specificat n tag-ul <title>. URL document.URL URL-ul documentului. Aceast proprietate este puin utilizat cci ea este echivalent cu document.location.href. vlinkColor document.vlinkColor Codul culorii atribuit link-urilor vizitate n document, acelai care este Figura 7. 22 (continuare) definit prin atributul vlink al tag-ului <body> (vezi proprietatea alinkColor). 237 Metodele fundamentale ale obiectului Document Cele mai utilizate metode ale obiectului Document sunt prezentate n detaliu n figu ra 7.23. Metod Sintax close() document.close()

Afieaz datele ncrcate dar care nu sunt nc afiate i oprete fluxul de intrare al datel ocument. Dac toate datele nu au fost ncrcate, documentul nu este afiat integral. Ace ast metod nu cere nici un argument. Metoda nu este indispensabil ntruct metoda write( ) care scrie n document realizeaz n mod automat deschiderea (open) i nchiderea (close ) fluxului de date (vedei paragraful urmtor: tergerea i rescrierea coninutului unui do cument). document.getElementById(id) Returneaz sub form de matrice (array) lista elementelo r identificate prin nume sau id-ul indicat. Dac nu exist nici un element de tipul indicat, metoda returneaz null. Elementele dispun de proprieti i de metode specifice obiectelor. Aceast metod este fo losit de asemenea pentru detectarea navigatorului. getElementById() Exemplu: <body> <p id="unu">Primul paragraf </p> <p id="doi">Al doilea paragraf </p> <script lan guage="JavaScript" type="text/JavaScript"> //Modifica aliniamentul unui paragraf para=document.getElementById("unu"); para.align="center"; </script> </body> <sc ript language="JavaScript" type="text/JavaScript"> //Detecteaza navigatorul if(d ocument.layers) Nav="NN4"; else if((document.all)&&(document.getElementById)) Na v="IE5-IE6"; else if(document.getElementByID)Nav="NN6"; alert(Nav); </script> ge tElementsByName() document.getElementsByName(Nume) Returneaz sub form de matrice (array) lista elementelor identificate prin nume sau id-ul indicat. Dac nu exist nici un element de tipul indicat, metoda returneaz nul l. Exemplu: <body> Figura 7.23 <p id="unu">Primul paragraf </p> <p id="doi">Al doilea paragraf </p> <script lan guage="JavaScript" type="text/JavaScript"> //Modifica aliniamentul unui paragraf para=document.getElementsByName("unu"); para[0].align="center"; </script> </bod y> 238 getElementsByTagName() document.getElementsByTagName(tag) Returneaz sub form de ma trice (array) lista elementelor identificate prin tag-ul indicat. Dac nu exist nic i un element de tipul indicat, metoda returneaz null. Exemplu: <body> <p id="unu">Primul paragraf </p> <p id="doi">Al doilea paragraf </p> <script lan guage="JavaScript" type="text/JavaScript"> //Modifica aliniamentul unui paragraf el=document.getElementsByTagName("p"); el[0].align="center"; </script> </body> open() document.open(TipMime,replace) Deschide documentul pentru a trimite datele care vor fi afiate cu metoda write(). Primul argument indic tipul MIME al datelor (text/html; text/plain; imag e/gif; image/jpeg; image/sc-bitmap; plugIn (orice model plug-in Netscape de tip MIME)). Al doilea argument precizeaz dac datele vor nlocui documentul deja prezent n fereast ra navigatorului (true) sau se vor aduga celor existente (false). Cele dou argumen te sunt facultative. Aceast metod nu este indispensabil ntruct metoda write() care sc rie n document realizeaz n mod automat deschiderea (open) i nchiderea (close) fluxulu i de date. Remarc. Cele dou script-uri sunt echivalente.

Exemplu: <script language="JavaScript" type="text/JavaScript"> fernoua=window.open("","nou","height=200, width=400"); fernoua.document.open(); fernoua.document.write("<head><title>demo</title></head> <body><b>La multi ani i mpreuna!</b></body>"); fernoua.document.close(); </script> Exemplu: <script language="JavaScript" type="text/JavaScript"> fernoua=window.open("","nou","height=200, width=400"); fernoua.document.write("< head><title>demo</title></head><body><b>La multi ani impreuna!</b></body>"); </s cript> write() document.write(ir1,ir2) Introduce n document: date de tip caracter, variabile i tag-uri. Pentru Figura 7.2 3 (continuare) caractere speciale (apostrof, de exemplu) introducei caracterele corespunztoare. 239 Exemplu: <script> document.write(D\ ale Carnavalului); //Afieaz Dale Carnavalului </script> writeln() do cument.writeln(ir1, ir2) Introduce date de tip caracter, variabile i tag-uri i insereaz un salt de Figura 7. 23 (continuare) linie la sfrit. Cum salturile de linie sunt ignorate de ctre navigatoare, aceast met od este identic cu write().

Revenind la metodele open() i close() ale obiectului Document Obiectul Document conine metodele open() i close() (vezi metodele obiectului Docum ent, figura 7.23). Atunci cnd utilizai metoda write() sau writeln() (vezi metodele obiectului Document, figura 7.23) trimitei, de fapt, datele ctre ceva care se che am stream (flux), care corespunde unei zone rezervate de date. Datele rmn n stream pn momentul n care navigatorul este pregtit s le afieze n fereastra sa. Va trebui s desc hidei (open) iar stream-ul nainte de a-l utiliza apoi s-l nchidei (close). Metodele o pen() i close() efectueaz cele dou aciuni. Metoda open() indic navigatorului c dorii s criei un nou flux de date n obiectul Document curent. Metoda close() semnaleaz sfritu l aciunii de scriere; ea oblig navigatorul s afieze toate datele care au mai rmas n fl ux (stream). Utilizarea celor dou metode nu este ns obligatorie ntruct write() i writeln() realizeaz n mod automat deschiderea (open) i nchiderea (close) stream-ului. n concluzie, pentru a trimite un flux de date ctre fereastra navigatorului, parcurgei urmtorii pai: Utilizai document.open() pentru a deschide ob iectul Document i pentru a putea din nou scrie. Utilizai document.write()/document .writeln().

240 Utilizai document.close() pentru a indica navigatorului c ai terminat de scris n fer eastra sa. Remarci: Metodele open() i close() nu deschid i nici nu nchid noile ferestre. Dac ut ilizai metoda document.open(), n fereastra curent, script-ul dumneavoastr, care face parte din documentul curent, va fi ters i n consecin va nceta s se execute. Mult mai ine este s utilizai metodele open() i close() cu ferestre sau cadre separate. Cu metoda document.open putei specifica un tip MIME care v ofer posibilitatea de a crea un document de un anume tip ce conine imagini i documente utilizate n cadrul p lug-ins. Remarc. MIME (Multipurpose Internet Mail Extension) este un standard pentru docum entele Internet. Atunci cnd server-ul trimite un document unui browser, i se indi c i tipul MIME al documentului pentru ca navigatorul s tie cum s-l afieze. Printre tip urile MIME cele mai rspndite amintim formatul HTML (tipul MIME text/html) i formatu l text (tipul text/plain). Aplicaii ale metodelor open() i close() Analizai urmtorul document HTML (vezi figura 7.24). Precizai rolul instruciunilor: d ocument.open() i document.close(). Figura 7.24 Script-ul prezentat ([1]) n figura 7.25 evalueaz browser-ul (Netscape, Internet Ex plorer) i modific textul n funcie de tipul su. Comentai script-ul. 241 Figura 7.25 Remarc. Nu uitai c atunci cnd folosii metodele write () sau writeln() nu putei schimba coninutul documentului curent fr s rencrcai complet pagina. Obiectul Frame Atunci cnd o fereastr conine mai multe cadre, fiecare dintre ele este reprezentat n JavaScript printr-un obiect Frame. Remarc. Obiectul Frame este prezentat n detaliu n Conversaia 10. Obiectul Location Obiectul Location este un fiu al obiectului Window. El stocheaz informaii despre a dresa URL a unei ferestre specificate. Fia obiectului Location este prezentat n fig ura 7.26. Remarc. Dei utilizatorii vd URL-ul afiat n caseta de locaie (Location) a navigatorului , programatorii JavaScript lucreaz cu obiectul Location. Fia obiectului Location Obiectul printe: Proprieti: Window hash, host, hostname, href, pathname, port, protocol, search Metode: Figura 7.26 Gestionarii de evenimente: assign(), reload(), replace() 242 Proprietile obiectului Location Proprietile obiectului Location sunt prezentate n detaliu, n figura 7.27. Ele reprez

int pri ale URL-ului. Proprietate Sintax hash document.location.hash Conine partea # (diez) a adresei Web specificate n URL. Exemplu: <script> document.write(document.location.hash); //afieaz top, dac adresa este http ://www.ionescu.com/index.htm#top </script> host document.location.host Numele server-ului i postul URL. Exemplu: <script> document.write(document.location.host); //afieaz www.ionescu.com (vezi ha sh) </script> hostname Numele server-ului. document.location.hostname Exemplu: <script> document.write(document.location.hostname); //afieaz www.ionescu.com (vez i hash) </script> href document.location.href Adresa Web (URL-ul) complet. Exemplu: <script> document.write(document.location.href); /*afieaz www.ionescu.com/linkuri/ pref.htm dac pagina afiat este la adresa http://www.ionescu.com/linkuri/pref.html * / </script> pathname Calea de acces la document. document.location.pathname Exemplu: <script> document.write(document.location.pathname); //afieaz /linkuri/pref.html ( vezi href) </script> port document.location.port Numrul de port al URL-ului (n general 80). Exemplu: Figura 7.27 <script> document.write(document.location.port); /*afieaz 80, dac adresa este http: //www.ionescu.com:80/linkuri/pref.html*/ </script> 243 protocol document.location.protocol Partea protocol a URL-ului (n general http). search document.location.search Partea de cutare a adresei URL de dup semnul ?

Exemplu: Figura 7.27 (continuare) <script> document.write(document.location.search); </script> Metodele obiectului Location Metodele obiectului Location sunt prezentate n detaliu n figura 7.28. Metod Sintax assign() document.location.assign(URL) Modific URL-ul documentului. Exemplu:

<form> <input type=button value=Yahoo! onClick=window.location.assign(http://www.yahoo .com)> </form> <form> <input type=button value=Yahoo! onClick=window.location=http:// .yahoo.com> </form> reload() document.location.reload() Rencarc documentul curent n fereastra browser-ului. Dac argumentul (rencrcare) are val oarea logic true documentul este rencrcat de pe server; n caz contrar el este recupe rat n cache-ul navigatorului. Exemplu: replace() document.location.replace(URL) Figura 7.28 Aplicaii nlocuiete pagina curent cu o nou pagin. Metoda nu afecteaz istoricul navigatorului. Ut ilizarea metodei este justificat pentru a evita revenirea la ecranele de prezenta re sau la paginile temporare de interes minim. Modificai URL-ul documentului curent. n figura 7.29 este prezentat secvena HTML core spunztoare. Figura 7.29 244 Modificai URL-ul documentului ntr-o fereastr secundar pornind de la fereastra princi pal. n figura 7.30 este prezentat documentul XHTML complet al aplicaiei. Figura 7.30 Obiectul History Obiectul History este un alt obiect fiu al obiectului Window. Acest obiect conine URL-ul paginilor vizitate nainte i dup pagina curent. Fia obiectului History este pr ezentat n figura 7.31. Fia obiectului History Obiectul printe: Proprieti: Metode: Figura 7.31 Gestionarii de evenimente: window length back(), forward(), go() Proprietile obiectului History Proprietile obiectului History sunt prezentate n detaliu n figura 7.32.

Proprietate Sintax length() window.history.length Numrul de pagini din istoric. Exemplu: Figura 7.32 <body> <a href=JavaScript: window.history.go(window.history.length-1) >Ultimele pa gini </a> </body> 245 Remarci: Obiectul History mai conine i proprietile: current, previous i next care sto cheaz URL-ul curent, anterior i urmtor al documentului n lista de istoric. Din motiv e de securitate, aceste obiecte sunt normal inaccesibile n browser-ele actuale. Metodele obiectului History Trei metode ale obiectului History permit deplasarea n lista de istoric (vezi fig ura 7.33). Metod Sintax back() window.history.back() Retur la URL-ul precedent n istoric. Aceast metod corespunde unui clic pe butonul b ack al navigatorului. Exemplu: <body> <form> <input type=button value=Pagina precedenta onClick=window.history.back( )> </form> </body> forward() window.history.forward() Trece la URL-ul urmtor n istoric. Aceast metod corespunde unui clic pe butonul forwa rd al navigatorului. go() window.history.go(Numr) Avanseaz sau se ntoarce n istoric cu numrul de pagini indicate. Exemplu: Figura 7.33 <body> <a href=JavaScript:window.history.go(-2)> Mergi inapoi cu 2 pagini</a><br / > <a href=JavaScript:window.history.go(2)> Mergi inainte cu 2 pagini</a> </body> Obiectul Event Obiectul Event este un alt fiu al obiectului Window. Fia obiectului Event este pr ezentat n figura 7.34. Fia obiectului Event Obiectul printe: window

246 Proprieti: altkey, ctrlKey, button, cancelable, clientX, data, layerX, pageY, currentTarget, height, keyCode, pageX, fromElement, layerY, modifiers, reason, returnValue, screenX, screenY, shiftkey, srcElement, srcFilter, target, toElement, type, which, width, x, y Metode: Figura 7.34 Gestionarii de evenimente: Proprietile obiectului Event Cteva din proprietile obiectului Event sunt prezentate n detaliu n figura 7.35. Proprietate Sintax altkey acionat. event.altkey Returneaz valoarea logic true (adevrat) dac tasta Alt a fost button event.button Determin care din butoanele mouse-ului a fost acionat: left, right sau middle. clientX event.clientX Returneaz coordonata orizontal de amplasare a evenimentului. clientY event.clientY Returneaz coordonata vertical de amplasare a evenimentului. data event.data Atunci cnd se genereaz evenimentul dragdrop, proprietatea conine o matrice (array) cu URL-ul obiectului stocat. height

event.height Atunci cnd se genereaz evenimentul resize, proprietatea conine noua valoare a nlimii e lementului. layerX Figura 7.35 event.layerX Coordonata orizontal a stratului n raport cu stratul care o conine. layerY event.layerY Coordonata vertical a stratului n raport cu stratul care o conine. 247 pageX event.pageX Coordonata orizontal de amplasare a evenimentului care se produce. pageY event.pageY Coordonata vertical de amplasare a evenimentului care se produce. returnValue event.returnValue Aceast proprietate are prioritate n raport cu valoarea returnat de ctre un gestionar de evenimente. Pentru a anula efectul evenimentului, modificai coninutul su atribu indu-i valoarea logic false. srcElement event.srcElement Referin la elementul care a generat evenimentul. type Figura 7.35 (continuare) event.type Specific numele evenimentului care se produce. Obiecte de nivelul al doilea Aa cum exist subobiecte ale obiectului Window, tot aa exist i subobiecte obiecte de n ivelul al doilea ale obiectului Document. Subobiectele obiectului Document sunt urmtoarele: Anchor; Area; Applet; Form; Image; Layer; Link; Plugin. Obiectul Anchor

248 Obiectele Anchor sunt fii ai obiectului Document. Fiecare obiect Anchor reprezin t o ancor a documentului curent, adic un loc specific n document care poate fi atins direct printr-un link. Matricea anchors[] Singurul mod n care putei folosi realmente un obiect Anchor n limbajul JavaScript e ste prin intermediul matricii anchors[] al obiectului Document (document.anchors[]). Folosii matricea document.anchors[] pentru a determina numrul de ancore dintr-un d ocument (figura 7.36). Folosii proprietatea name pentru a recupera numele unei an core i proprietatea innerText pentru a recupera textul su (figura 7.36). ... <a name=ancora1>test1</a><br> <a name=ancora2>test2</a><br> <script> document.wr ite(document.anchors.length+ancore numite); //afieaz dou ancore numite <//script> <a name=ancora1>test1</a><br> <a name=ancora2>test2</a><br> <script> document.write(doc ument.anchors[0].name); document.write( ); document.write(document.anchors[1].inne rText); //afieaz ancora 1 test2 </script> Figura 7.36 Obiectul Area Obiectul Area v permite s definii o suprafa a unei imagini reactive. Proprietile obiectului Area ancora, inclusiv simbolul #); l specificate n adresa URL); ; href (adresa URL complet); sunt: hash (poriunea de adres URL care este host (numele calculatorului gazd (adresa IP) i portu hostname (numele calculatorului gazd specificat n URL) pathname (calea fiierului

249 specificat n adresa URL, ncepnd cu simbolul (/); port (portul specificat n adresa URL) ; protocol (protocolul specificat n adresa URL, inclusiv simbolul final (:); search (partea de cutare a adresei URL, inclusiv simbolul (?); target (numele ferestrei int n care se afieaz adresa URL); text (textul care apare ntre tag-urile <area> ...</area>). Obiectul Applet Obiectul Applet reprezint echivalentul JavaScript al tag-ului (X)HTML <applet>. Obiectul Form Obiectul Form este un obiect JavaScript reprezentat prin perechea de tag-uri (X) HTML: <form> i </form>. Remarc. Obiectul Form este prezentat n detaliu n Conversaia 8. Obiectul Image Obiectul Image este echivalentul JavaScript al tag-ului (X)HTML <img />. Remarc. Obiectul Image este prezentat n detaliu n Conversaia 9. Obiectul Layer Obiectul Layer permite accesarea straturilor n interiorul documentelor. Remarc. Obiectul Layer este prezentat n detaliu n Conversaia 10. Obiectul Link Obiectul Link este echivalentul JavaScript al unei legturi hipertext. Fia obiectul ui Link este prezentat n figura 7.37.

250 Fia obiectului Link Obiectul printe: Proprieti: Document hash, pathname, host, port, hostname, protocol, href, search, target (vezi obiectul Location) Figura 7.37 Gestionarii de evenimente: Un document poate avea mai multe obiecte Link, fiecare dintre ele coninnd informaii cu privire la URL-ul sau ancora corespunztoare. Remarc. Ancorele sunt elemente numite ale unui document (X)HTML la care putei avea acces direct. Pentru a defini o ancor se utilizeaz o sintax de tipul <a name=ancora 2>. Pentru a crea dup aceea un link ctre aceast ancor, se utilizeaz un tag de tipul <a href=#ancora2>. Matricea links[] Obiectele Link nu au o proprietate name, deci nu putei referi un obiect Link prin el nsui. Putei accesa obiecte Link cu ajutorul matricii links[] (document.links[]) care este o colecie a tuturor legturilor din documentul curent. Ordinea din matrice se bazeaz pe ordinea n care sunt localizate legturile n fiierul surs. O proprietate a matricii, documents.links.length precizeaz numrul de link-uri ale paginii. Remarci: Obiectul Link v permite s lucrai cu legturi n limbajul JavaScript. Obiectul Link este similar cu obiectul Location, care conine aceleai informaii pentru pagina (X)HTML curent.

Proprietile obiectului Link Obiectul Link conine numeroase proprieti (acelai ca i obiectul Location) care permit cunoaterea cu precizie a legturii (X)HTML care l reprezint. Aceste proprieti reprezint pri ale adresei URL. Proprietile obiectului Link sunt prezentate n detaliu n figura 7. 38. 251 Proprietate Sintax hash ncepe cu caracterul #. Link.hash Reprezint o denumire de ancor n adresa URL pentru legtur, care host

legtur. Link.host Reprezint poriunea de calculator gazd din adresa URL asociat cu o hostname asociat cu o legtur. Link.hostname Reprezint poriunea de nume al calculatorului gazd din adresa URL href Link.href Reprezint adresa URL complet asociat cu o legtur. pathname Link.pathname Reprezint poriunea numelui de cale a legturii URL. port Link.port Reprezint poriunea de port a legturii URL. protocol Link.protocol Reprezint poriunea de protocol a legturii URL. search Link.search Reprezint poriunea de interogare a legturii. target Figura 7.38 Link.target Reprezint numele obiectului Window n care este afiat legtura. Aplicaie Comentai secvena de cod HTML prezentat n figura 7.39.

<a href=http://www.altavista.fr>Legtur</a> <form> <input type=button value=Schimbai l ra onCLick=document.links[o].href=http://www.yahoo.com> Figura 7.39 </form> Obiectul Plugin Obiectul Plugin, foarte asemntor obiectului Applet reprezint o modalitate de accesa re a modulelor plug-in instalate n browser.

252 Proprietile obiectului Plugin sunt: description (conine descrierea modulului plug-in); filename (conine numele fiierului unui program plug-in); length (conine numrul de tipuri MIME acceptate de modulul plug-in); name (conine numele modulului plug-in). Obiecte de nivelul al treilea Urmtorul nivel de obiecte pe parte de client ale limbajului JavaScript este nivel ul al treilea. Toate obiectele de nivelul al treilea sunt subobiecte ale obiectu lui Form: Button; Checkbox; FileUpload; Hidden; Password; Radio; Reset; Submit; Sele ct; Text; Textarea. Remarc. Obiectele de nivelul al treilea pe parte de client sunt prezentate n Conve rsaia 8. Obiecte de nivelul al patrulea Ultimul nivel de obiecte pe parte de client ale limbajului JavaScript este nivel ul al patrulea. Exist un singur obiect de nivelul al patrulea: obiectul Option, c are este un subobiect al obiectului Select. Obiectul Option este folosit pentru referirea la elementele <option> care apar ntre tag-urile <select> ... </select>. Obiectul Option Fia obiectului Option este prezentat n figura 7.40. Fia obiectului Option Obiectul printe: Cum se creeaz obiectul? Proprieti: Select Constructorul option() defaultSelected, disabled, form, index, label, selected, text, value 253 Metode: Gestionarii de evenimente: onClick, onDblClick, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMous eMove, Figura 7.40 onMouseOut, onMouseOver, onMouseUp Obiectul Option este prezentat n detaliu n figura 7.41. Obiect Sintax Option() document.forms[].option Reprezint, n cadrul unui formular o list derulant de opiuni incluse ntre tag-urile <se lect> i </select>. Ea este definit prin tagurile (X)HTML <option> ... </option>. O biectul este accesat prin proprietatea form.select.elements[] sau prin numele su. Pot fi create noi opiuni cu ajutorul constructorului Option(). Exemplu Figura 7.41 <form name=form1> <select name=optiune> <option value=optiune1>prima optiune</option> <option value=optiune2>a doua optiune</option> <option value=optiune3>a treia optiun

e</option> </select> </form> Proprietile obiectului Option Proprietile obiectului Option sunt prezentate n detaliu n figura 7.42. Proprietate Sintax defaultSelected document.forms[].option. defaultSelected Valoare logic (true/false) indic dac o opiune este implicit. disabled activat (false). document.forms[].option.disabled Valoare logic (true/false) opiunea este dezactivat (true) sau form document.forms[].option.form Renun la formularul care conine zona. index document.forms[].option.index 254 Rangul opiunii n lista select. label document.forms[].option.label Textul alternativ al opiunii. Proprietatea corespunde atributului label al tag-ul ui. selected (false). document.forms[].option.selected Valoare logic (true/false) opiune selectat (true) sau nu text Textul opiunii. document.forms[].option.text value Figura 7.42 document.forms[].option.value Valoarea opiunii. Aceast proprietate corespunde atributului value al tag-ului <opt ion>.

Obiectul Navigator Noul standard DOM (Document Object Model) a eliminat multe dintre diferenele care exist (nc!) ntre navigatoare, dar vei ntlni numeroase situaii care impun scrierea un

script pentru fiecare navigator, separat. Putei utiliza JavaScript pentru a ident ifica navigatorul pe care l utilizai, folosind obiectul window.navigator. Obiectul Navigator nu face parte din DOM deci, l putei referi direct. El este unic i deci, imposibil de instaniat (creat). Putei aduga proprieti personale obiectului Na vigator. Ele sunt disponibile pentru toate obiectele Window ale navigatorului Ne tscape. Spre deosebire de Netscape Navigator, Internet Explorer creeaz un obiect Window pentru fiecare o nou fereastr. Noile proprieti rmn deci limitate la obiectul Wi ndow n care ele au fost create. Fia obiectului Navigator este prezentat n figura 7.4 3. Fia obiectului Navigator 255 Obiectul printe: Subobiecte: Proprieti: Figura 7.43 Metode: Gestionarii de evenimente: window mimeType, plugin appCodename, appMinorVersion, appName, appVersion, brows erLanguage, cooKieEnabled, cpuclass, language, mimeTypes[], onLine, platform, pl ugins[], product, productSub, systemLanguage, userAgent, userLanguage, vendor ja vaEnabled() Proprietile obiectului Navigator Proprietile obiectului Navigator sunt prezentate n detaliu n figura 7.44. Proprietate Sintax appCodeName navigator.appCodeName Returneaz numele codului intern al navigatorului n general Mozilla. Exemplu: <script> x=navigator.appCodeName; document.write(x); // afieaz, de exemplu Mozilla </script> appName sau Netscape. navigator.appName Returneaz numele oficial al navigatorului: Microsoft Internet Explorer Figura 7.4 4 Exemplu: <script> x=navigator.appName; document.write(x); // afieaz, de exemplu Microsoft I nternet Explorer </script> appVersion navigator.appVersion Returneaz numrul versiunii navigatorului actualizate i versiunea sistemului de oper are. Opera este polimorf. Exemplu: <script> x=navigator.appVersion; document.write(x); /* afieaz, de exemplu 4.0 (com patible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.0.3705)*/ </script> browserLanguag e navigator.browserLanguage Returneaz limba navigatorului. Aceast proprietate este recunoscut numai de Internet Explorer.

256 Exemplu: <script> x=navigator.browserLanguage; document.write(x); // afieaz, de exemplu en </script> cookieEnabled navigator.cookieEnabled Returneaz true sau false numai dac cookies-urile sunt activate sau nu n navigator. Exemplu: <script> x=navigator.cookieEnabled; document.write(x); // afieaz, de exemplu true </script> language numai de Netscape. navigator.language Returneaz limba navigatorului . Aceast proprietate este recunoscut Exemplu: <script> x=navigator.language; document.write(x); // afieaz, de exemplu ro </scrip t> mimeTypes[] navigator.mimeTypes[] Vezi obiectul mimeType. platform Returneaz sistemul de operare. navigator.platform Exemplu: Figura 7.44 (continuare) <script> x=navigator.platform; document.write(x); // afieaz, de exemplu Win32 </sc ript> plugins[] navigator.plugins[] Matricea plugins[] conine lista tuturor extensiilor instalate n navigator. Vezi ob iectul Plugin. userAgent navigator.userAgent Returneaz numele navigatorului urmat de numrul su de versiune. De fapt, este o comb inaie de proprieti appCodename i appVersion. Opera este polimorf. Exemplu: <script> x=navigator.userAgent; document.write(x); /* afieaz, de exemplu Mozilla / 4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.0.3705)*/ </script> vendor navigator.vendor 257 Returneaz numele navigatorului dac este vorba de Netscape 6. Pentru orice alt navi gator, returneaz undefined. Exemplu: Figura 7.44 (continuare) <script> x=navigator.vendor; document.write(x); // afieaz, de exemplu Netscape 6 < /script>

Metodele obiectului Navigator Metoda JavaEnabled() a obiectului Navigator este prezentat n figura 7.45. Metod Sintax JavaEnabled() activat sau nu n navigator. Exemplu: navigator.JavaEnabled() Returneaz valoarea logic true sau false numai dac Java este Figura 7.45 <script> x=navigator.JavaEnabled(); document.write(x); // afieaz, de exemplu true </script> Aplicaii ale obiectului Navigator Creai un document (X)HTML simplu care conine un script ce afieaz proprietile obiectulu i Afiai Navigator proprietile: cu ajutorul instruciunii document.write. appVersion, appCodeName, appName, userAgent, language, platform n cele dou

navigatoare Netscape i Internet Explorer. Indicaie. Folosii o list neordonat. n figur 7.46 este prezentat documentul XHTML complet n care s-a inserat script-ul aplicai ei. 258 Figura 7.46 n figura 7.47 i figura 7.48 se prezint cele dou pagini Web afiate n Netscape 6, respec tiv Internet Explorer. Figura 7.47 259

Figura 7.48 Remarc. Dou elemente rein atenia: proprietatea navigator.language este afiat ca nedefi nit (undefined) n Internet Explorer; Mozilla apare n cmpurile: Nume cod i Agent utili zator. Scriei un script care afieaz urmtoarea pagin Web (figura 7.49). 260 Figura 7.49 Indicaie. Script-ul afieaz patru butoane n pagina Web. Executnd clic pe fiecare din c ele patru butoane se vor afia proprietile obiectului Navigator: userAgent; platform; appName. Folosii gestionarul de evenimente onClick i metoda a lert(). n figura 7.50 este prezentat documentul XHTML complet n care s-a inserat script-ul aplicaiei. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http: //www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3. org/1999/xhtml"> <head> <title>Identificare navigator</title> <script language=" javascript" type="text/javascript"> function idnavig(){ nav=navigator.userAgent; alert(nav); } function platforma(){ platf=navigator.platform; alert(platf); } f unction numenavig(){ nume=navigator.appName; alert(nume); Figura 7.50 } 261 function numereal(){ nav=navigator.userAgent; if(nav.indexOf("Opera")>-1) {navig ="Opera";} if(nav.indexOf("Opera")==-1&&nav.indexOf("MSIE 4")>-1) {navig="Intern et Explorer 4";} if(nav.indexOf("Opera")==-1&&nav.indexOf("MSIE 5")>-1) {navig=" Internet Explorer 5";} if(nav.indexOf("Opera")==-1&&nav.indexOf("MSIE 6")>-1) {n avig="Internet Explorer 6";} if(nav.indexOf("Netscape 6")>-1) {navig="Netscape 6 ";} if(nav.indexOf("Opera")==-1&&nav.indexOf("MSIE")==-1&&nav.indexOf("Netscape 6")==-1) {navig="Netscape 4";} alert(navig); } </script> </head> <body> <h1>Iden tificare navigator </h1> <hr /> <form name="form1" id="form1" method="post" acti on=""> <p> <input type="button" name="Button" value="Identificare completa navig ator" onClick="idnavig();" /> </p> <p> <input type="button" name="Submit2" value ="Sistem de operare" onClick="platforma();" /> </p> <p> <input type="button" nam e="Submit3" value="Nume oficial navigator" onClick="numenavig();" /> </p> <p> <i nput type="button" name="Submit4" value="Nume real navigator" onClick="numereal( );" /> </p> </form> <p><img src="vxhtml10.gif" width="88" height="31" /></p> <ul > </ul> Figura 7.50 </body> (continuare) </html> n figura 7.51, figura 7.52, figu ra 7.53, figura 7.54 sunt prezentate rezultatele afirii paginii Web n navigatorul I nternet Explorer. 262 Figura 7.51 Figura 7.52 263 Figura 7.53 Figura 7.54 Personalizai script-ul pe care l-ai creat n aplicaia precedent. Utilizai cele patru fu

ncii numai n script-urile pe care le exploatai.

264 Indicaie. Definii gestionarul de evenimente onLoad n tag-ul <body> dup cum urmeaz: <b ody onLoad=idnavig()>. Scriei o funcie simpl care s v permit s recunoatei browserpe sau Internet Explorer sau pe nici unul dintre ele. n figura 7.55 se prezint o s oluie a aplicaiei pe care v rugm s o comentai. Figura 7.55 Cum procedai pentru a detecta navigatorul i versiunea sa n JavaScript? Subobiectele obiectului Navigator Obiectul MimeType Obiectul MimeType este un subobiect al obiectului Navigator. El v permite s accesai informaii despre tipurile MIME pe care le recunosc modulele plug-in. Ca i obiectu l Plugin, el nu este recunoscut de Internet Explorer. Instanele obiectului MimeTy pe sunt accesibile prin intermediul matricii navigator.mimeTypes[] ale crei elemente reprezint tipurile MIME. Fia obiectului MimeType este prezentat n figura 7.56. Fia obiectului MimeType 265 Obiectul printe: Proprieti: Navigator description, enabledPlugin, length, name, suffixes, type Metode: Figura 7.56 Gestionarii de evenimente: Obiectul MimeType este prezentat n detaliu n figura 7.57. Obiect Sintax MimeType Exemplu: navigator.mimeTypes[] Face referire la aplicaiile i tipurile de fiiere recunoscute de navigator. Figura 7.57 <script> for(tip in navigator.mimeTypes){ document.write(tip) } </script> Proprietile obiectului MimeType Proprietile obiectului MimeType sunt prezentate n detaliu n figura 7.58. Proprietate Sintax description Exemplu: navigator.MimeTypes[].description

Descrierea obiectului MimeType. <script> for(i=0; i<navigator.mimeType.length;i++){ tip=navigator.mimeTypes[i].d escription; //afiseaza descrierea plug-ins } </script> enabledPlugin navigator.M imeTypes[]. enabledPlugin Determin dac un plug-in este disponibil. Nu este suficient ca un plugin s fie numai instalat; el trebuie s fie i disponibil. Exemplu: Figura 7.58 <script> tip=navigator.mimeTypes[application/pdf].enablePlugin; // afieaz [object pl ugin] dac plugin este disponibil </script> length navigator.MimeTypes.length Numrul de tipuri MIME recunoscute. Exemplu: <script> a=navigator.mimeTypes.length document.write(a); /*afiseaz, de exemplu 7* / </script> 266 name Numele plug-ins. Exemplu: navigator.MimeTypes[].name <script> for(i=0;i<navigator.mimeTypes.length;i++){ tip=navigator.mimeTypes[i].n ame; document.write(tip+<br />); } </script> suffixes navigator.MimeTypes[].suffix es Extensia de fiier pentru Mimetype. Exemplu: <script> for(i=0;i<navigator.mimeTypes.length;i++){ tip=navigator.mimeTypes[i].s uffixes; document.write(tip+<br />); /*afieaz wjp, wpg, */ } </script> type navigator .MimeTypes[].type Tipul de fiiere recunoscute de plug-ins. Exemplu: Figura 7.58 (continuare) <script> for(i=0;i<navigator.mimeTypes.length;i++){ tip=navigator.mimeTypes[i].t ype; document.write(tip+<br />); //afieaz, de exemplu image/x-quicktime }</script> Aplicaie Scriei un script care afieaz tipurile MIME recunoscute de navigator. Indicaie. Folosii o bucl for-in. n figura 7.59 este prezentat script-ul aplicaiei. Figura 7.59 267 Obiectul Plugin Obiectul Plugin este un subobiect al obiectului Navigator. El este creat prin in

stalarea de module plug-in pentru browser. Obiectul Plugin conine o matrice de el emente i tipuri MIME tratate de fiecare modul plug-in. n figura 7.60 este prezenta t fia obiectului Plugin. Fia obiectului Plugin Obiectul printe: Proprieti: Metode: Figura 7.60 Gestionarii de evenimente: Remarci: Navigator description, filename, length, name description filename length name Aplicaie face face face face referire referire referire referire la la la la o descriere a modulului plug-in; numele fiierului unui program plug-in; numrul de tipuri MIME coninute n matrice; numele modulului plug-in. Folosii obiectul Plugin cu metoda document.write pentru a afia informaii despre mod ulele plug-in instalate. Manipularea plug-ins cu ajutorul obiectelor Plug-ins au aprut cu versiunea 3.0 a navigatorului Netscape. Exist sute de plug-in pentru Internet Explorer i Netscape. Prezentm n continuare pe cele mai cunoscute: Macromedia Shockwave i Flash; Adobe Acrobat; Real Player; Beatnik. Obiectul JavaS cript Navigator posed un obiect fiu numit Plugins. Acest obiect este o matrice, f iecare plug-in instalat n navigator reprezentnd un element al matricii. Obiectul Plugins Obiectul Plugins face referire la plug-ins instalate n navigator. 268 Instanele obiectului Plugins sunt accesibile prin matricea navigator.plugins[] ale crei elemente reprezint plug-ins. Fiecare plug-in este de asemenea inclus n matricea MimeTypes[]. Remarci: Nu confundai obiectele Plugin, proprieti ale obiectului Navigator, cu obie ctele Embed, proprieti ale obiectului Document. Primele fac parte din Navigator n t imp ce urmtoarele sunt incorporate n document cu ajutorul tag-ului <object> (pentr u Internet Explorer) sau <embed> pentru Netscape. Obiectul Plugins nu este recun oscut n mod constant de ctre toate versiunile navigatoarelor. Pe de alt parte, Inte rnet Explorer recunoate plug-ins i ignor obiectele Plugin. Fia obiectului Plugins este prezentat n figura 7.61.

Fia obiectului Plugins Obiectul printe: Proprieti: Metode: Figura 7.61 Gestionarii de evenimente: Aplicaie Generai lista tipurilor MIME recunoscute de ctre navigatorul Internet Explorer. Navigator description, filename, length, name n figura 7.62 este prezentat script-ul aplicaiei. Figura 7.62 Proprietile obiectului Plugins Proprietile obiectului Plugins sunt prezentate n detaliu n figura 7.63. 269 Proprietate Sintax description Descrierea plug-ins. Exemplu: navigator.plugins[].description <script> for(i=0;i<navigator.plugins.length;i++){ plug=navigator.plugins[i].desc ription; document.write(plug+<br />); //afieaz descrierea plug-ins } </script> filen ame navigator.plugins[].filename Numele i amplasarea fiierelor plug-ins. <script> for(i=0;i<navigator.plugins.length;i++){ plug=navigator.plugins[i].file name; document.write(plug+<br />); //afieaz numele fiierelor de plug-ins } </script> length Numrul de plug-ins. Exemplu: navigator.plugins.length <script> x=navigator.plugins.length; document.write(x); //afieaz, de exemplu 13 </ script> name Numele plug-ins. navigator.plugins[].name Exemplu: Figura 7.63 <script> for(i=0;i<navigator.plugins.length;i++){ plug=navigator.plugins[i].name ; document.write(plug+<br />); //afieaz numele plug-ins } </script> Remarc. Obiectului Navigator posed de asemenea un alt obiect fiu numit MimeTypes, care conine cte un element al matricii pentru fiecare tip MIME. 270 Aplicaie Analizai documentul (X)HTML din figura 7.64. Analizai script-ul inserat i i nstruciunile document.write() utilizate. Afiai documentul n navigatorul Netscape 6. Figura 7.64

Rezultatele execuiei script-ului (figura 7.65). Figura 7.65 271 JavaScript Tem Testai-v cunotinele: 1. Ce este obiectul Document? 2. Care este coninutul matricii all[]? 3. Ce conine matricea anchors[]? 4. Care este coninutul matricii applets[]? 5. Care este coninu tul matricii forms[]? 6. Care este coninutul matricii frames[]? 7. Care este conin utul matricii layers[]? 8. Ce semnificaie are proprietatea lastModified? 9. Care este coninutul matricii links[]? 10.Ce este obiectul Location? 11.Ce este MIME? 1 2.Care este rolul metodelor document.open() i document.close()? 13.Care este deos ebirea dintre metodele document.write() i document.writeln()? 14.Ce este obiectul Link? 15.Ce este obiectul Layer? Vizitai site-urile http://www.hkedcity.net/ http://webdesign.about.com http://www.useit.com http:// www.bigonion.com Conversaia 8 Obiectul Form. Validarea formularelor n aceast conversaie: Obiectul Form. Aplicaii (Sub)obiectele Form. Aplicaii Validai un formular cu JavaSc ript. Aplicaii EXEMPLUL 8 JAVASCRIPT (varianta 1) EXEMPLUL 8 JAVASCRIPT (varianta 2) Tem Obiectul Form Momentul apariiei formularelor (X)HTML a fost considerat ca decisiv n evoluia Web-u lui. Formularele, structurate n cmpuri i zone de date sunt ideale pentru a realiza o interactivitate ntre dumneavoastr i vizitatorii site-ului pe care l-ai creat. O da t cu apariia limbajului JavaScript puterea formularelor (X)HTML a crescut i mai mul t. Cu JavaScript putei modifica n mod dinamic coninutul elementelor unui formular ( zon simpl de text, zon de text multilinie, caset de validare etc.). JavaScript v perm ite s adugai noi funcii de prelucrare a formularelor dumneavoastr (X)HTML, att pe part ea de client ct i pe partea de server. n concluzie, crearea unui site Web cu adevrat performant presupune cunoaterea att a facilitilor formularelor (X)HTML ct i a obiectu lui Form al limbajului JavaScript. 274 Fia obiectului Form este prezentat n figura 8.1. Fia obiectului Form Obiectul printe: Subobiecte:

Document button, input, checkbox, password, fileupload, option, hidden, radio, select, reset, text, textarea, submit Proprieti: acceptCharset, action, elements[], encoding, enctype, length, method, name, target Metode: Gestionarii de eveniment e: reset(), submit(), tags() onContextMenu, onControlSelect, onCopy, onCut, onDblClick, onDeActivate, onDrag, onDragend, onDragOver, onHelp, onDragen ter, onDragStart, onDragLeave, onFocusOut, onKeyUp, onKeyDown, onKeyPress, onMouseDown, onMouseMove, onMouseUp, onMoveend, onMouseEnter, onMouseOut, onMouseLeave, onMouseOver, onMove, onPaste, onResize, onMousewheel, onMovestart, onReset, onPropertyChange, onResizeEnd, Figura 8.1 onResizeStart, onSelectStart, onSubmit (vezi Conversaia 6). Relaia dintre obiectul Form i tag-ul <form> Fiecare formular care aparine unei pagini (X)HTML este reprezentat n JavaScript pr intr-un obiect Form, al crui nume este identic cu atributul name al tag-ului

<form>. Aadar, obiectul Form este un obiect JavaScript reprezentat prin perechea de tag-u ri (X)HTML: <form> i </form>. Remarci: Obiectul Document conine o matrice de obiecte Form care poart numele de f orms. Dup ncrcarea i analiza documentului (X)HTML, aceast matrice (forms) va conine ct un obiect Form pentru fiecare pereche de tag-uri <form> i </form> prezentat n docu mentul (X)HTML. Documentul (X)HTML din figura 8.2 conine trei obiecte Form. 275 Figura 8.2 Deoarece matricea forms este o proprietate a obiectului Document putei referi cel e trei obiecte Form dup cum urmeaz (figura 8.3). Figura 8.3 Dac nu agreai referinele cu numere (forms[0], forms[1], ...) putei atribui un nume f iecrui obiect Form (vezi figura 8.4). Figura 8.4

Atunci cnd documentul (X)HTML va fi analizat, obiectele Form ale limbajului JavaS cript vor avea proprietatea name atribuit n mod automat cu numele: formularZero; F ormularUnu; formularDoi. Putei accesa cele trei obiecte Form, dup cum urmeaz (figur a 8.5). Figura 8.5 276 Remarci: Este important s observai c numele atribuite obiectelor Form sunt n totalit ate nume de variabile JavaScript valide (formularZero; formularUnu; formularDoi) . (X)HTML nu impune nici o limit valorilor posibile pentru un atribut; n consecin, n umele celor trei atribute name (conin spaii) din figura 8.6 sunt perfect valabile. Figura 8.6 Dac dorim s referim aceste nume n JavaScript, vom scrie urmtorul cod JavaScript (fig ura 8.7). Figura 8.7 Din nefericire, nici una din cele trei instruciuni nu este valid (!) deoarece Java Script nu va ti s trateze spaiul (blank-ul) din mijlocul fiecrui nume. Aadar, singuru l mod de a accesa obiectele Form este acela de a utiliza matricea forms. Pentru a atribui un nume elementelor ce aparin documentelor (X)HTML va trebui s folosii nu me valide pentru variabilele JavaScript. Relaia dintre elementele (obiectele) Form i obiectul Form Proprietatea cea mai important a obiectului Form este elements care conine un obie ct pentru fiecare din elementele formularului. Proprietatea elements poate fi folosit fie pentru referirea unui element (obiect) dintr-un formular, fie pentru validarea tuturor elementelor dintr-un formular. 277 Aplicaie Analizai documentul (X)HTML din figura 8.8. Scriei instruciunile JavaScript pentru accesul la cele trei obiecte (Text) ale formularului. Figura 8.8 Pentru a avea acces la toate cele trei obiecte text ale formularului, putem scrie (fr efort!) urmtorul cod JavaScript (figura 8.9). Figura 8.9 Remarc. Am specificat un atribut formularelor). pentru fiecare obiect Text (ca i n cazul name

S presupunem c dorii s ncrcai documentul (X)HTML din figura 8.8 ntr-un browser, iar a introducei numele dumneavoastr (exemplu, Popescu) n zona simpl de text nume. Cum procedai pentru a extrage (afia) aceast valoare? Rspunsul nu este complicat! Cu mici diferene, toate obiectele dintr-un formular respect acelai forma t de baz; n particular ele posed proprietatea value care conine valoarea de control curent. Conceptul de valoare de control depinde de tipul de control; n cazul unei zone simple de text, proprietatea value va conine irul de caractere curent n obiect ul afiat n fereastra navigatorului. Revenind la aplicaia noastr, pentru a afia numele pe care l-ai introdus, scriei codul (figura 8.10): 278

Figura 8.10 n mod analog, pentru a defini numele dumneavoastr, scriei codul (figura 8.11): Figura 8.11 Remarc. Fiecare obiect JavaScript al unui formular conine propriile proprieti i metod e care permit i alte aciuni n afar de citirea i definirea valorilor acestora. Matricea elements Este agreabil s poi avea acces la un element (obiect) al formularului direct prin numele su, dar uneori dorim s prelucrm n mod automat obiectele formularului. n plus, obiectele nu au tot timpul un nume, sau numele lor nu este valid pentru o variab il JavaScript. Pentru astfel de situaii, vei putea folosi matricea elements a obiec tului Form. Exist dou variante de acces la elementele matricii: prin numrul de inde x; prin nume. Iat cum procedm pentru a accesa prin numrul de index, elementele form ularului din figura 8.12. Varianta 1 Figura 8.12 279 Remarc. n acest formular am definit trei obiecte Text. Ultimele dou obiecte au un n ume care nu este un nume de variabil JavaScript valid. n figura 8.13 este prezentat codul surs JavaScript pentru Varianta 1. Figura 8.13 Varianta 2 n figura 8.14 este prezentat codul surs JavaScript pentru Varianta 2. Figura 8.14 Proprietile obiectului Form Proprietile obiectului Form sunt prezentate n detaliu n figura 8.15. Proprietate Sintax acceptCharset document.form.acceptCharset Setul de caractere acceptat de ctre server-ul care prelucreaz datele. action Figura 8.15 document.form.action Corespunde atributului action al tag-ului <form>. elements[] document.form.elements[] 280 Elementele unui formular (zone de text i butoane). Fiecare element este o dat a ma tricii (array) elements[]. Ele sunt referite prin numrul de ordine (exemplu: elem ents[2]) sau prin numele lor (exemplu: elements[zona1]). Proprietatea returneaz numr

ul de elemente: length elemente: form.elements.length. Un formular poate conine urmtoarele tipuri de button, checkbox, fileUpload, hidden, input, password, select, option, radio, reset, text, textarea. Fiecrui el ement i corespunde un obiect. Exemplu: encoding document.form.encoding Corespunde atributului encoding al tag-ului <form>. enctype document.form.enctype Corespunde atributului enctype al tag-ului <form>. length document.form.length Numrul de elemente ale formularului. Figura 8.15 (continuare) method document.form.method Corespunde atributului method al tag-ului <form>. name document.form.name 281 Corespunde atributului name al tag-ului <form>. target Figura 8.15 (continuare) document.form.target Corespunde atributului target al tag-ului <form>.

Metodele obiectului Form Metodele obiectului Form sunt prezentate n detaliu n figura 8.16. Metod Sintax reset() document.form.reset() Corespunde aciunii butonului reset. submit() document.form.submit() Corespunde aciunii butonului submit. tags() Figura 8.16 document.form.tags(tag) Recupereaz toate elementele introduse cu tag-ul menionat ca argument. Subobiectele Form Dup cum am precizat n Conversaia anterioar, toate obiectele de nivelul al treilea, p e parte de client sunt subobiecte ale obiectului Form: Button, Checkbox, FileUpload, Hidden, Password, Radio, Reset, Submit, Select, Text, Text area. Vom prezenta n continuare, n ordine alfabetic toate subobiectele obiectului Form. 282 (sub)Obiectul Button Fia obiectului (subobiectului) Button este prezentat n figura 8.17. Fia (sub)obiectului Button Obiectul printe: Proprieti: Form align, defaultValue, disabled, form, name, size, type, value Metode: Gestionarii de evenimente: blur(), click(), focus() onAfterUpdate, onBeforeUpdate, onBlur, onClick, onDblCl ick, onFocus, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, Figura 8.17 onMouseOver, onMouseUp (vezi Conversaia 6). (sub)Obiectul Button este prezentat n detaliu n figura 8.18. Obiect Sintax Button document.forms[].button Reprezint un obiect generic ntr-un formular. Subobiectul Button este versiunea tran

spus n obiect a tag-ului (X)HTML <input type=button>. A nu se confunda cu butoanele reset i submit. Subobiectul Button poat e fi accesat prin proprietatea form.elements[] sau prin numele su. Exemplu: Figura 8.18 <form name=form1> <input type=button name=Button1 value=calcul/> </value> Proprietile (sub)obiectului Button Proprietile (sub)obiectului Button sunt prezentate n detaliu n figura 8.19. 283 Metod Sintax align Alinierea butonului. document.forms[].button.align Proprietatea poate conine valorile: left, center, right. defaultValue document.forms[].button. defaultValue document.forms[].button.disabled Valoarea implicit a butonului. disabled Valoarea logic (true/false) care indic starea butonului: dezactivat (true), activa t (false). form document.forms[].button.form Referin la formularul care conine butonul. name document.forms[].button.name Numele butonului. Corespunde atributului name al tag-ului <input>. size tag-ului <input>. document.forms[].button.size Dimensiunea (n pixeli) butonului. Corespunde atributului size al type document.forms[].button.type

Tipul de element n cadrul formularului. n acest caz, proprietatea returneaz button. Corespunde atributului type al tag-ului <input>. value Figura 8.19 Valoarea butonului. document.forms[].button.value Corespunde atributului value al tag-ului <input>. Metodele obiectului Button Metodele obiectului Button sunt prezentate n detaliu n figura 8.20. Metod Sintax blur() Butonul pierde focus-ul. document.form.button.blur() click() document.form.button.click() Simularea clic-ului mouse-ului pe buton. Aceast metod nu este detectat de onClick. focus() Figura 8.20 Butonul preia focus-ul. document.form.button.focus() 284 (sub)Obiectul Checkbox Fia (sub)obiectului Checkbox este prezentat n figura 8.21. Fia (sub)obiectului Checkbox Obiectul printe: Proprieti: Form align, checked, defaultChecked, defaultValue, disabled, form, name, size, status , type, value, width Metode: Gestionarii de evenimente: blur(), click(), focus() onAfterUpdate, onClick, onKeyDown, onMouseDown, onBefor eUpdate, onFocus, onBlur, onHelp, onKeyUp, onMouseOut, onDblClick, onKeyPress, onMouseMove, Figura 8.21

onMouseOver, onMouseUp (vezi Conversaia 6). Obiectul Checkbox este prezentat n detaliu n figura 8.22. Obiect Sintax checkbox document.forms[].checkbox Reprezint o caset de validare n formular. Subobiectul Checkbox este versiunea transp us n obiect a tag-ului (X)HTML <input type=checkbox>. Subobiectul Checkbox poate fi accesat prin proprietatea form.elements[] sau prin numele su. Exemplu: Figura 8.22

<head> <script> function calcule() { document.calcul.elements[0].value=0; for(i=0; i<document.calcul.elements.length;i++) { if(document.calcul.elements[0].value= p arseInt(document.calcul.elements[0].value) +parseInt(document.calcul.elements[i] .value) } } </script> </head> <form name=calcul> TOTAL:<input type=text size=9/> euro <br />; <input type=checkbox value=2 onClick=calcule()/>Articolul2<br /> <input type=c eckbox value=3 onClick=calcule()/>Articolul3<br /> <input type=checkbox value=4 onCl lcule()/>Articolul4<br /> <input type=checkbox value=5 onClick=calcule()/>Articolul5<b /> </form> </body> </html> 285 Proprietile obiectului Checkbox Proprietile obiectului Checkbox sunt prezentate n detaliu n figura 8.23. Proprietate Sintax align center sau right. checked document.forms[].checkbox.align Alinierea casetei de validare. Proprietatea poate conine valorile: left, document.forms[].checkbox.checked Valoare logic (true/false) care indic starea casetei de validare: activat (true) sa u dezactivat (false). defaultchecked document.forms[].checkbox. defaultchecked Valoarea implicit a casetei de validare (true sau false). defaultValue document.forms[].checkbox. defaultValue Valoarea implicit a casetei de validare. disabled document.forms[].checkbox.disabled

Valoare logic (true/false) care indic starea casetei de validare: dezactivat (true) sau activat (false). form document.forms[].checkbox.form Referin la formularul care conine caseta de validare. name document.forms[].checkbox.name Numele casetei de validare; corespunde atributului name al tag-ului <input>. size document.forms[].checkbox.size Dimensiunea (n pixeli) a casetei de validare. Corespunde atributului size al tagului <input>. status document.forms[].checkbox.status Valoare logic (true/false) care indic starea casetei de validare: activat (true) sa u dezactivat (false). type document.forms[].checkbox.type Tipul de element n cadrul formularului. n acest caz, proprietatea returneaz checkbo x. Corespunde atributului type al tag-ului <input>. value document.forms[].checkbox.value Valoarea casetei de validare. Corespunde atributului value al tag-ului <input>. width Figura 8.23 document.forms[].checkbox.width Dimensiunea (n pixeli) casetei de validare. Metodele (sub)obiectului Checkbox 286 Metodele (sub)obiectului Checkbox sunt prezentate n detaliu n figura 8.24. Metod Sintax blur() document.form.checkbox.blur()

Caseta de validare pierde focus-ul. click() document.form.checkbox.click() Simularea clic-ului mouse-ului pe caseta de validare. Aceast metod nu este detecta t de onClick. focus() Figura 8.24 document.form.checkbox.focus() Caseta de validare preia focus-ul. (sub)Obiectul FileUpload Fia (sub)obiectului FileUpload este prezentat n figura 8.25. Fia (sub)obiectului FileUpload Obiectul printe: Proprieti: Form defaultValue, disabled, form, name, size, type, value, width Metode: Gestionarii de evenimente: blur(), focus(), select() onAfterUpdate, onBeforeUpdate, onBlur, onChange, onHel p, onKeyUp, onMouseOut, onDragStart, onKeyDown, onMouseDown, onMouseOver, onFocu s, onKeyPress, onMouseMove, onMouseUp, onResize, onSelect, onSelectStart (vezi Figura 8.25 Conversaia 6). (sub)Obiectul FileUpload este prezentat n detaliu n figura 8.26. Obiect Sintax fileUpload document.forms[].fileUpload Figura 8.26 Reprezint o zon de text n care utilizatorul poate introduce numele unui fiier care u rmeaz a fi transmis server-ului. Subobiectul fileUpload este versiunea transpus n ob iect a tag-ului (X)HTML <input type=file>. Subobiectul fileUpload poate fi accesat prin proprietatea form.elements[] sau prin numele su. Figura 8.26 (continuare) 287 Exemplu: <form name=form > <input type=file name=fiier1/> </form> Proprietile (sub)obiectului FileUpload Proprietile (sub)obiectului FileUpload sunt prezentate n detaliu n figura 8.27. Proprietate Sintax

defaultValue document.forms[].fileUpload. defaultValue Coninutul implicit al zonei. disabled document.forms[].fileUpload.disabled Valoare logic (true/false) care indic starea zonei: dezactivat (true) sau activat (f alse). form document.forms[].fileUpload.form Referin la formularul care conine zona. name document.forms[].fileUpload.name Numele zonei. Corespunde atributului name al tag-ului <input>. size <input>. type document.forms[].fileUpload.size Dimensiunea (n pixeli) zonei. Corespunde atributului size al tag-ului document.forms[].fileUpload.type Tipul de element n cadrul formularului. n acest caz proprietatea returneaz file. Co respunde atributului type al tag-ului <input>. value document.forms[].fileUpload.value Coninutul zonei. Corespunde atributului value al tag-ului <input>. width Figura 8.27 document.forms[].fileUpload.width Dimensiunea (n pixeli) casetei de validare. Metodele (sub)obiectului FileUpload 288 Metodele (sub)obiectului FileUpload sunt prezentate n detaliu n figura 8.28. Metod Sintax blur() Zona pierde focus-ul. document.form.fileUpload.blur()

focus() Zona preia focus-ul. document.form.fileUpload.focus() select() Figura 8.28 document.form.fileUpload.select() Selecteaz coninutul zonei. (sub)Obiectul Hidden Fia (sub)obiectului Hidden este prezentat n figura 8.29. Fia (sub)obiectului Hidden Obiectul printe: Proprieti: Form defaultValue, disabled, form, name, readOnly, size, type, value Metode: Gestionarii de evenimente: Figura 8.29 onAfterUpdate, onBeforeUpdate, onHelp (vezi Conversaia 6) (sub)Obiectul Hidden este prezentat n detaliu n figura 8.30. Obiect Sintax hidden document.forms[].hidden Reprezint o zon de text ascuns pentru utilizator. Subobiectul Hidden este versiunea transpus n obiect a tag-ului (X)HTML <input type=hidden>. Subobiectul Hidden poate fi accesat prin proprietatea form.elements[] sau prin numele su. Exemplu: Figura 8.30 <form name=form1> <input type=hidden name=Ascuns/> </form> Proprietile (sub)obiectului Hidden Proprietile (sub)obiectului Hidden sunt prezentate n detaliu n figura 8.31. Proprietate Sintax 289 defaultValue document.forms[].hidden. defaultValue Coninutul implicit al zonei. disabled document.forms[].hidden.disabled Valoare logic (true/false) care indic starea zonei: dezactivat (true) sau activat (f alse). form

document.forms[].hidden.form Referin la formularul care conine zona. name document.forms[].hidden.name Numele zonei. Corespunde atributului name al tag-ului <input>. readOnly document.forms[].hidden.readOnly Valoare logic (true/false) care indic starea zonei. size document.forms[].hidden.size Dimensiunea (n pixeli) zonei. Corespunde atributului size al tag-ului <input>. type returneaz text. document.forms[].hidden.type Tipul de element n cadrul formularului. n acest caz proprietatea value Figura 8.31 document.forms[].hidden.value Coninutul zonei. Corespunde atributului value al tag-ului <input>. (sub)Obiectul Password Fia (sub)obiectului Password este prezentat n figura 8.32. Fia (sub)obiectului Password Obiectul printe: Proprieti: Form defaultValue, disabled, form, maxLength, name, readOnly, size, type, value select(), blur(), click(), focus() onAfterUpdate, onBeforeUpdate, onBlur, onChan ge, onFocus, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, o nMouseOut, onMouseOver, onMouseUp, onResize, onSelect, onSelectStart (vezi Conve rsaia 6). Metode: Gestionarii de evenimente: Figura 8.32 (sub)Obiectul Password este prezentat n detaliu n figura 8.33. 290 Obiect Sintax Password document.forms[].password

Reprezint un cmp n cadrul unui formular care afieaz asteriscuri atunci cnd utilizatoru l introduce parola. Subobiectul Password este versiunea transpus n obiect a tag-ului (X)HTML <input type=password>. Subobiectul Password poate fi accesat prin proprietatea form.elements[] sau prin numele su. Exemplu: Figura 8.33 <form name=f1> <input type=password name=Pass /> </form> Proprietile (sub)obiectului Password Proprietile (sub)obiectului Password sunt prezentate n detaliu n figura 8.34. Proprietate Sintax defaultValue document.forms[].password. defaultValue document.forms[].password.disabled Coninutul implicit al zonei. disabled Valoare logic (true/false) care indic starea zonei: dezactivat (true), activat (fals e). form document.forms[].password.form Referin la formularul care conine zona. maxLength document.forms[].password.maxLength Numrul maxim de caractere care pot fi introduse n zon. name document.forms[].password.name Numele zonei. Proprietatea corespunde atributului name al tag-ului <input>. readOnly document.forms[].password.readOnly Valoare logic (true/false) dac zona este numai citit (true) sau nu (false). size document.forms[].password.size Dimensiunea (n pixeli) zonei. Corespunde atributului size al tag-ului <input>.

type Figura 8.34 document.forms[].password.type Tipul elementului n cadrul formularului. n acest caz, proprietatea returneaz text. Aceast proprietate corespunde atributului type al tag-ului <input>. value Figura 8.34 (continuare) document.forms[].password.value 291 Coninutul zonei. Proprietatea corespunde atributului value al tag-ului <input>. value.length returneaz numrul de caractere al zonei. Metodele (sub)obiectului Password Metodele (sub)obiectului Password sunt prezentate n detaliu n figura 8.35. Metod Sintax blur() Zona pierde focus-ul. document.form.password.blur() click() detectat prin onClick. document.form.password.click() Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este focus() document.form.password.focus() Zona de text preia focus-ul. select() Figura 8.35 document.form.password.select() Selecteaz coninutul zonei. (sub)Obiectul Radio Fia (sub)obiectului Radio este prezentat n figura 8.36. Fia (sub)obiectului Radio Obiectul printe: Proprieti: Form align, checked, defaultChecked, form, name, defaultValue, Metode: Gestionarii de evenimente: disabled,

size, status, type, value, width blur(), click(), focus() onAfterUpdate, onBefor eUpdate, onBlur, onClick, onErrorUpdate, onFilterChange, onFocus, onHelp, onKeyD own, onKeyPress, onKeyUp (vezi Figura 8.36 Conversaia 6). 292 (sub)Obiectul Radio este prezentat n detaliu n figura 8.37. Obiect Sintax radio document.forms[].radio Reprezint un s selecteze ea transpus accesat prin Exemplu: Figura 8.37 <form name=form1> <input type=radio name=optiune /> </form> Proprietile (sub)obiectului Radio Proprietile (sub)obiectului Radio sunt prezentat n detaliu n figura 8.38. Metod Sintax align document.forms[].radio.align Alinierea butonului radio. Proprietatea poate conine valorile: left, center, righ t. checked document.forms[].radio.checked Valoare logic (true/false) butonul este activat (true) sau dezactivat (false). document.forms[].radio. defaultChecked Valoarea implicit a butonului radio (true/ false). defaultValue document.forms[].radio. defaultValue document.forms[].radio .disabled defaultChecked Valoarea implicit a butonului radio. disabled Valoarea logic (true/false) care indic starea butonului: dezactivat (true), activa t (false). form document.forms[].radio.form Referin la formularul care conine butonul radio. buton radio ntr-un formular. Subobiectul Radio permite utilizatorului o singur opiune dintr-un grup de aciuni. Subobiectul Radio este versiun n obiect a tag-ului (X)HTML <input type=radio>. Subobiectul Radio poate fi proprietatea form.elements[] sau prin numele su.

name Figura 8.38 document.forms[].radio.name Numele butonului radio. Aceast proprietate corespunde atributului name al tag-ulu i <input />. 293 size document.forms[].radio.size Dimensiunea (n pixeli) butonului radio. Aceast proprietate corespunde atributului size al tag-ului <input />. status document.forms[].radio.status Valoare logic (true/false) butonul este activat (true) sau nu (false). type document.forms[].radio.type Tipul de element n cadrul formularului. n acest caz, proprietatea returneaz radio. Aceast proprietate corespunde atributului type al tag-ului <input />. value document.forms[].radio.value Valoarea butonului radio. Corespunde atributului value al tag-ului <input>. width Figura 8.38 (continuare) document.forms[].radio.width Mrimea (n pixeli) butonului radio. Metodele (sub)obiectului Radio Metodele (sub)obiectului Radio sunt prezentate n detaliu n figura 8.39. Metod Sintax blur() document.form.radio.blur() Butonul radio pierde focus-ul. click() detectat prin onClick. document.form.radio.click() Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este focus()

Figura 8.39 document.form.radio.focus() Butonul radio preia focus-ul. (sub)Obiectul Reset 294 Fia obiectului Reset este prezentat n figura 8.40. Fia (sub)obiectului Reset Obiectul printe: Proprieti: Form align, defaultValue, disabled, form, name, type, value Metode: Gestionarii de evenimente: blur(), click(), focus() onAfterDate, onBeforeUpdate, onBlur, onClick, onDblClick, onFocus, onHelp, onKeyDown, Figura 8.40 onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp (vezi conversaia 6) (sub)Obiectul Reset este prezentat n detaliu n figura 8.41. Obiect Sintax reset document.forms[].reset Exemplu: Reprezint un buton care terge valorile din toate zonele formularului curent. Subob iectul Reset este versiunea transpus n obiect a tag-ului (X)HTML <input type=reset>. C a i n cazul butonului submit, pentru executarea aciunii nu este necesar cod surs Jav aScript. Figura 8.41 <form name=form1> <input type=reset /> </form> Proprietile (sub)obiectului Reset Proprietile (sub)obiectului Reset sunt prezentate n detaliu n figura 8.42. Proprietate Sintax align document.forms[].reset.align Alinierea butonului. Proprietatea poate conine valoarea: left, center sau right. defaultValue document.forms[].reset.defaultValue

Valoarea implicit a butonului. disabled Figura 8.42 document.forms[].reset.disabled Valoare logic (true/false) butonul este dezactivat (true) sau activat (false). form document.forms[].reset.form 295 Referin la formularul care conine butonul. name document.forms[].reset.name Numele butonului. Aceast proprietate corespunde atributului name al tag-ului <inp ut />. type document.forms[].reset.type Tipul de element n cadrul formularului. n acest caz, proprietatea returneaz reset. Aceast proprietate corespunde atributului type al tag-ului <input />. value Figura 8.42 document.forms[].reset.value Valoarea butonului. Aceast proprietate corespunde atributului value al tag-ului < input />. (continuare) Metodele (sub)obiectului Reset Metodele (sub)obiectului Reset sunt prezentate n detaliu n figura 8.43. Metod Sintax blur() Butonul pierde focus-ul. document.form.reset.blur() click() detectat prin onClick. document.form.reset.click() Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este focus() Figura 8.43 Butonul preia focus-ul.

document.form.reset.focus() (sub)Obiectul Submit 296 Fia (sub)obiectului Submit este prezentat n figura 8.44. Fia (sub)obiectului Submit Obiectul printe: Proprieti: Form align, value disabled, form, name, type, Metode: Gestionarii de evenimente: blur(), click(), focus() onAfterUpdate, onBeforeUpdate, onBlur, onClick, onDblCl ick, onFocus, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, Figura 8.44 onMouseOver, onMouseUp (vezi conversaia 6). (sub)Obiectul Submit este prezentat n detaliu n figura 8.45. Obiect Sintax Submit document.forms[].submit Exemplu: Reprezint un buton care nainteaz server-ului datele coninute n formular. Subobiectul submit este versiunea transpus n obiect a tag-ului (X)HTML <input type=submit>. Subobi ectul submit poate fi accesat prin proprietatea form.elements[] sau prin numele su. Pentru executarea aciunii nu este necesar cod surs JavaScript. Figura 8.45 <form name=form1> <input type=submit name=init /> </form> Proprietile (sub)obiectului Submit Proprietile (sub)obiectului Submit sunt prezentate n detaliu n figura 8.46. Proprietate Sintax align document.forms[].submit.align Alinierea butonului. Proprietatea poate conine valoarea: left, center sau right. disabled document.forms[].submit.disabled Valoare logic (true/false) butonul este dezactivat (true) sau activat (false). form Figura 8.46 document.forms[].submit.form

Referin la formularul care conine butonul. name document.forms[].submit.name 297 Numele butonului. Aceast proprietate corespunde atributului name al tag-ului <inp ut />. type document.forms[].submit.type Tipul de element n cadrul formularului. n acest caz, proprietatea returneaz submit. Aceast proprietate corespunde atributului type al tag-ului <input />. value Figura 8.46 (continuare) document.forms[].submit.value Valoarea butonului. Aceast proprietate corespunde atributului value al tag-ului < input />. Metodele (sub)obiectului Submit Metodele (sub)obiectului Submit sunt prezentate n detaliu n figura 8.47. Metod Sintax blur() Butonul pierde focus-ul. document.form.submit.blur() click() document.form.submit.click() Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este detectat prin onClick. focus() Figura 8.47 Butonul preia focus-ul. document.form.submit.focus() (sub)Obiectul Select Fia (sub)obiectului Select este prezentat n figura 8.48. Fia (sub)obiectului Select Obiectul printe: Subobiecte: Proprieti: Form Option disabled, form, length, multiple, name, options[], selectedIndex, si ze, type, value add(), blur(), focus(), option.add(), option.remove(), remove() onAfterDate, onBeforeUpdate, onBlur, onChange, onDregStart, onFocus, onHelp, onK eyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onResize, onRowExit, onSelectStart (vezi conversaia 6) Metode: Gestionarii de evenimente:

Figura 8.48 (sub)Obiectul Select este prezentat n detaliu n figura 8.49. 298 Obiect Sintax Select document.forms[].select

Reprezint o list derulant care afieaz o serie de opiuni ntr-un formular. Subobiectul S lect este versiunea transpus n obiect a tag-ului (X)HTML <select> ... </select>. Subobiectul Select poate fi accesat prin proprietatea form.elements[] sau prin numele su. Exemplu: Figura 8.49

<form name=form1> <select name=optiuni> <option value=opiune1>Prima opiune</option> < ion value=opiune2>A doua opiune</option> <option value=opiune3>A treia opiune</option /select> </form> Proprietile (sub)obiectului Select Proprietile (sub)obiectului Select sunt prezentate n detaliu n figura 8.50. Proprietate Sintax disabled document.forms[].select.disabled Valoare logic (true/false) zona este dezactivat (true) sau activat (false). form document.forms[].select.form Referin la formularul care conine zona. length document.forms[].select.length Numrul de opiuni din list. multiple document.forms[].select.multiple

Valoare logic (true/false) selecia multipl este autorizat (true) sau nu (false). name document.forms[].select.name Numele zonei. Aceast proprietate corespunde atributului name al tag-ului <select/ >. options[] document.forms[].select.options[] Setul de opiuni propuse n list. selectedIndex document.forms[].select.selectedIndex Figura 8.50 Valoare care indic rangul opiunii selectate n list. Aceast proprietate co nine valoarea 1 dac nici o opiune nu este selectat. Size document.forms[].select.size 299 Valoare care indic numrul de opiuni vizibile simultan n list. type document.forms[].select.type Aceast proprietate conine fie select-one fie select-multiple. value Figura 8.50 (continuare) document.forms[].select.value Valoarea opiunii selectate. Metodele (sub)obiectului Select Metodele (sub)obiectului Select sunt prezentate n detaliu n figura 8.51. Metod Sintax add() document.form.select.add(Element, Amonte)

Adaug n list opiunea referit prin argumentul Element i o insereaz naintea opiunii re e prin argumentul Amonte. Dac argumentul Amonte este omis, elementul este adugat la finele listei. blur() Zona pierde focus-ul. document.form.select.blur() focus() Zona preia focus-ul.

document.form.select.focus() document.form.select.option. add(Element,Amonte) Adaug n list opiunea referit prin ar gumentul Element i o insereaz naintea opiunii referite prin argumentul Amonte. Dac argumentul option.add() Amonte este omis, elementul este adugat la finele listei. option.remove() documen t.form.select.option.remove (Rang) Elimin din list opiunea al crei rang este indicat n argument. remove() Figura 8.51 document.form.select.remove(Rang) Elimin din list opiunea al crei rang este indicat n argument. (sub)Obiectul Text Fia (sub)obiectului Text este prezentat n figura 8.52. Fia (sub)obiectului Text 300 Obiectul printe: Proprieti: Form defaultValue, disabled, form, maxLength, name, readOnly, size, type, value Metode: Gestionarii de evenimente: blur(), click(), focus(), select() onAfterUpdate, onBeforeUpdate, onBlur, onClic k, onFocus, onHelp, onKeyDown, onKeyPress, Figura 8.52 onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onSelect (vezi conversaia 6). (s ub)Obiectul Text este prezentat n detaliu n figura 8.53. Obiect Sintax Text document.forms[].text Reprezint o zon de text format dintr-o singur linie. Subobiectul Text este versiunea transpus n obiect a tag-ului (X)HTML <input type=text>. Subobiectu l Text poate fi accesat prin proprietatea form.elements[] sau prin numele su. Exemplu: Figura 8.53 <form name=form1> <input type=text name=text1 /> </form>

Proprietile (sub)obiectului Text Proprietile (sub)obiectului Text sunt prezentate n detaliu n figura 8.54. Proprietate Sintax defaultValue document.form[].text.defaultValue Coninutul implicit al zonei. disabled document.form[].text.disabled Valoare logic (true/false) zona este dezactivat (true) sau activat (false). form Figura 8.54 document.form[].text.form Referin la formularul care conine zona. maxLength document.form[].text.maxLength 301 Numrul maxim de caractere care pot fi introduse n zon. name document.form[].text.name Numele zonei. Aceast proprietate corespunde atributului name al tag-ului <input / >. readOnly document.form[].text.readOnly Valoare logic (true/false) zona este numai citit (true) sau nu (false). size document.form[].text.size Mrimea (n pixeli) zonei. Aceast proprietate corespunde atributului size al tag-ului <input />. type document.form[].text.type Tipul elementului n cadrul formularului. n acest caz, proprietatea returneaz text. Aceast proprietate corespunde atributului type al tag-ului <input />. value Figura 8.54 (continuare) document.form[].text.value

Coninutul zonei. Aceast proprietate corespunde atributului value al tag-ului <inpu t />. value.length returneaz numrul de caractere ale zonei. Metodele (sub)obiectului Text Metodele (sub)obiectului Text sunt prezentate n detaliu n figura 8.55. Metod Sintax blur() Zona pierde focus-ul. document.form.text.blur() click() document.form.text.click() Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este detectat prin onClick. focus() Zona de text preia focus-ul. document.form.text.focus() select() Figura 8.55 Selecteaz coninutul zonei. document.form.text.select() (sub)Obiectul Textarea 302 Fia (sub)obiectului Textarea este prezentat n figura 8.56. Fia (sub)obiectului Textarea Obiectul printe: Proprieti: Form cols, defaultValue, disabled, form, maxLength, name, readOnly, rows, size, type, value, wrap Metode: Gestionarii de evenimente: blur(), click(), focus(), select() onAfterUpdate, onBeforeUnload, onBeforeUpdate , onBlur, onChange, onDragStart, onErrorUpdate, onFilterChange, onFocus, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOv er, onMouseUp, onRowEnter, onRowExit, onSelect, onSelectStart (vezi Figura 8.56 conversaia 6). (sub)obiectul Textarea este prezentat n detaliu n figura 8.57. Obiect Sintax Textarea document.form[].textarea Reprezint o zon de text multilinie. Subobiectul Textarea este versiunea transpus n ob iect a tag-ului (X)HTML

<input type=textarea>. Subobiectul Textarea poate fi accesat prin proprietatea form.elements[] sau prin numele su. Exemplu: Figura 8.57 <html> <head> <title>demo</title> <script> function control(f){ lungmax=30; docu ment.form1.numar.value=f.value.length; if(f.value.length>lungmax){ f.value=f.val ue.substring(0,lungmax); document.form1.numar.value=lungmax; } } </script> </hea d> <body> <form name=form1>

303 <input type=text name=numar size=1> caractere<br> <textarea name=text cols=40 row= ontrol(this)> </textarea> </form> </body> </html> Rezultatele execuiei script-ului . Proprietile (sub)obiectului Textarea Proprietile (sub)obiectului Textarea sunt prezentate n detaliu n figura 8.58. Proprietate Sintax cols document.forms[].textarea.cols Numrul de coloane ale zonei. defaultValue document.forms[].textarea.defaultValue Coninutul implicit al zonei. disabled document.forms[].textarea.disabled Valoare logic (true/false) zona este dezactivat (true) sau activat (false). form document.forms[].textarea.form Referin la formularul care conine zona. maxLength document.forms[].textarea.maxLength Numrul maxim de caractere care pot fi introduse n zon. name <input />. readOnly Figura 8.58 document.forms[].textarea.name Numele zonei. Aceast proprietate corespunde atributului name al tag-ului

document.forms[].textarea.readOnly Valoare logic (true/false) zona este numai citit (true) sau nu (false). rows document.forms[].textarea.rows Numrul de linii ale zonei. 304 size document.forms[].textarea.size Dimensiunea (n pixeli) zonei. Aceast proprietate corespunde atributului size al ta g-ului <input />. type document.forms[].textarea.type Tipul elementului n formular. n acest caz, proprietatea returneaz text. Aceast propr ietate corespunde atributului type al tag-ului <input />. value document.forms[].textarea.value Coninutul zonei. Aceast proprietate corespunde atributului value al tag-ului <inpu t />. value.length returneaz numrul de caractere al zonei. wrap document.forms[].textarea.wrap Figura 8.58 (continuare) Indic modul de gestionare al sfritului de linie. Aceast proprietate poate conine trei valori: hard (un <CR> este inserat la sfritul fiecrei linii), soft (textul trece p e linia urmtoare fr <CR>), none (fr trecere la linia urmtoare n mod automat). Metodele (sub)obiectului Textarea Metodele (sub)obiectului Textarea sunt prezentate n detaliu n figura 8.59. Metod Sintax blur() Zona pierde focus-ul. document.form.textarea.blur() click() detectat prin onClick(). document.form.textarea.click() Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este focus() Zona de text preia focus-ul.

document.form.textarea.focus() select() Figura 8.59 Selecteaz coninutul zonei. document.form.textarea.select()

Aplicaii Creai un formular care afieaz o list de cri (pe care le-am folosit n cadrul stei lucrri) JavaScript cu preul de vnzare, precedate de o caset de validare. n momen tul selectrii/deselectrii crilor, totalul este recalculat i afiat ntr-o zon de text ( ura 8.60). 305 Figura 8.60 n figura 8.61 este prezentat documentul XHTML n care s-a inserat scrip t-ul de calcul. Rezultatele execuiei sunt prezentate n figura 8.62. Figura 8.61 306

Figura 8.62 Comentarii: Formularul (calcul) este clasic; el conine o zon de text (pentru TOTAL ) i cte o caset de validare pentru fiecare articol. Bifai un articol! Preul su este ad unat la totalul deja prezent n cmpul TOTAL. Dezactivai un articol! Preul su este sczut din total. Zona care afieaz totalul general este un cmp text a crui dimensiune a fo st limitat la 10. Urmeaz definiiile casetelor de validare (checkbox). Valoarea (val ue) fiecrei casete de validare reprezint preul articolului: 20, 9.90, 20, 18.30. Pe ntru fiecare caset de validare n tag-ul <input> s-a definit gestionarul de evenime nte onClick, care execut funcia JavaScript calcule() al crui cod este definit n seciu nea <head> a paginii Web (figura 8.61). Fiecare element (subobiect) al formularu lui este identificat prin numrul de ordine: elements[0] pentru primul subobiect ( total), elements[1] pentru al doilea subobiect etc. Sintaxa pentru identificarea unui subobiect (element) precis al formularului este puin lung, dar logic. De exem plu, elementul (subobiectul) 0 este situat n formularul cu numele calcul, el nsui s ituat n documentul curent. Valoarea 0 este atribuit proprietii value. n consecin, atun i cnd activez sau dezactivez un articol, totalul existent este anulat. Prin inter mediul unei bucle for, poate fi recuperat valoarea fiecrui subarticol (element) al formularului. Bucla for execut instruciunile cuprinse ntre cele dou acolade ({ i }), figura 8.63. Figura 8.63 Observai cei trei parametrii ai buclei, plasai ntre paranteze: 1. Variabila de cont rol a buclei i este iniializat cu 1. Primul element are rangul 0, dar, n acest caz el nu trebuie prelucrat de ctre bucla for ntruct este vorba de cmpul Total. 2. Testu l de ieire din bucl: i<document.calcul.elements.length. Dac n urma evalurii condiiei r ezultatul este FALSE, atunci instruciunile din corpul buclei nu mai sunt efectuat e. Aici testul compar valoarea variabilei i cu numrul de elemente ale formularului . Putem simplifica testul scriind i<4. Dar, dac se adaug ori se suprim o caset de va lidare, trebuie modificat de asemenea i condiia de test. Este mai uor s utilizm propri etatea length a setului de elemente; ea returneaz n mod automat numrul de elemente ale formularului. 3. Pasul. El indic modul n care evolueaz variabila de control a b uclei la fiecare trecere. Aici se adaug 1 la valoarea variabilei i (i++). 307 Proprietatea checked (caset bifat) a fiecrei casete de validare a formularului este

testat n continuare. Aceast proprietate returneaz valoarea TRUE sau FALSE. Dac testu l este TRUE, atunci TOTAL (elements[0]) este recalculat; valoarea sa este adugat l a valoarea elementului ce urmeaz a fi testat (figura 8.64).

Figura 8.64 Funcia parseFloat este obligatorie ntruct valorile checkbox-urilor sunt date de tip text. ParseFloat convertete un ir de caractere ntr-o valoare numeric real. ParseFloa t este indispensabil dac valoarea unui cmp urmeaz s fie utilizat ntr-o expresie aritme ic. Simulai funcionarea buclei for din aplicaia precedent pentru cazul n care articolul 1 a fost bifat (activat), figura 8.65. Figura 8.65 1. Variabila i ia valoarea 1. 2. Proprietatea checked a elementului (subobiectului) 1 al formularului este testat. if(document.calcul.elements[1].checked); valoarea TRUE. ea returneaz 3. Valoarea elementului 1 este adugat la coninutul cmpului TOTAL. 4. Sfritul buclei si mbolizat prin acolada }. 5. Cel de-al treilea parametru al buclei este executat: i++. Variabila i ia valoarea 2. 6. Testul (al doilea argument al buclei) buclei este efectuat: i<4. El returneaz

valoarea FALSE. Bucla este executat nc o dat. Personalizai script-ul din aplicaia precedent. Putei aduga oricte articole dorii, avn rij de a preciza valoarea fiecruia dintre ele. Expresia:

308 document.calcul.elemnts.length din iniializarea buclei va furniza tot timpul numrul de elemente fr a mai fi nevoie ca dumneavoastr s mai intervenii. Dac lucrai nu cu valori ntregi, utilizai funcia parseInt. nlocuii n acest caz funcia parseFloat cu funcia parseInt (figura 8.66). Figura 8.66 Scriei un program JavaScript care calculeaz suma primelor n numere nat urale. Indicaie. Introducei valoarea lui n ntr-o zon simpl de text, subobiect al obie ctului Form. n figura 8.67 este prezentat codul surs (X)HTML complet (vezi script-ul aplicaiei). Figura 8.67 n figura 8.68 este prezentat rezultatul execuiei programului JavaScrip t pentru 13 numere naturale. 309 Figura 8.68 Scriei un program JavaScript pentru expedierea (coninutului) formularu lui din figura 8.69, prin pot electronic la adresa (fictiv) webmaster@abc.ro. Person alizai script-ul.

Figura 8.69 n figura 8.70 se prezint documentul XHTML. Figura 8.70 310 Remarci: Pentru a personaliza acest formular, nlocuii webmaster@abc.ro cu propria dumneavoastr adres de e-mail. Atributul enctype=text/plain al tag-ului form asigur ut ilizatorul c informaiile din cadrul mesajului vor fi expediate ntr-o form lizibil. Ac east tehnic prezint avantajul c permite citirea rapid a datelor care aparin unui formu lar. Exist numeroase script-uri i servicii CGI gratuite (vezi http://www.jsworksho p.com/). Validai un formular cu JavaScript Validarea formularelor reprezint, fr ndoial aplicaia cea mai preioas a

limbajului JavaScript. Validarea unui formular const n verificarea, cu ajutorul un ui script a corectitudinii informaiilor introduse de ctre utilizator. Putei utiliza limbajul JavaScript pentru: validarea datelor introduse de utilizator. Putei val ida cmpuri de intrare, grupuri de cmpuri sau ntregul formular, utiliznd gestionari d e evenimente i funcii JavaScript. construirea formularelor interactive, n care o pa rte sau ntreaga prelucrare are loc pe parte de client. a testa conformitatea date lor introduse de utilizator cu politicile de procedur impuse (exemplu de politic d e procedur: data de livrare a unei comenzi nu poate fi n ziua de smbt/duminic a sptm a testa prezena datelor n cmpurile obligatorii ale unui formular (un cmp este preze nt dac nu este vid). Aplicaii Calculai rdcin ptrat dintr-un numr ( x ). Validai datele introduse de utilizator

( x 0 ). n caz de eroare (x<0) se va afia mesajul: Rdcin imaginar. n figura 8.71 e zentat codul (X)HTML complet, n care s-a inserat script-ul de calcul. 311 Figura 8.71 n figurile 8.72 i 8.73 se prezint rezultatele execuiei programului pentr u x=-16 i pentru x=16. Figura 8.72 312 Figura 8.73 Comentai codul XHTML al aplicaiei. Scriei un program JavaScript care verific dac coninutul celor trei cmpuri ale unui fo rmular: nume, prenume, codcard nu este vid. n caz de eroare afiai unul din mesajele de mai jos:

Ai uitat s introducei numele dumneavoastr! Ai uitat s introducei prenumele dumneavo tat s introducei numrul dumneavoastr de card! n figura 8.74 se prezint codul complet al documentului HTML. 313 Figura 8.74 n figura 8.75, figura 8.76 se prezint rezultatele execuiei programului

JavaScript. Figura 8.75 314 Figura 8.76 Remarc. Comentai linia de cod onsubmit=return verif() (vezi tag-ul form). Scriei un script care valideaz adresa de e-mail introdus ntr-o zon de tip text din ca drul unui formular (figura 8.77). Dac zona de e-mail este vid se va genera mesajul de eroare: V rog, introducei adresa de e-mail!. Dac din adresa de e-mail lipsesc @ sau punctul (.), atunci adre sa de e-mail va fi considerat incorect. n acest caz, se va genera mesajul de eroare: Adres a de e-mail este incorect! V rog, s-o corectai!. Formularul poart numele de aplicaie. Acest nume va fi utilizat n cadrul script-ului. De notat c formularul va fi expedi at la adresa e-mail (imaginar) webmaster@abc.ro. Figura 8.77 315 Figura 8.78 n figura 8.79, figura 8.80 se prezint cteva exemple de test ale scriptului pe care l-ai realizat. Figura 8.79 316 Figura 8.80 Remarci Dac dorii, putei personaliza script-ul. Pentru informaii suplimentare privin d o validare mai complex a unei adrese e-mail consultai site-ul: http://developer. netscape.com/library/exemples/javascript/ formval/overview.html. Simulai funcionarea urmtorului program JavaScript (figura 8.81). Figura 8.81

317 EXEMPLUL 8 JAVASCRIPT (varianta 1) Vom aborda i n cadrul acestei conversaii aceeai problem pe care am abordat-o n convers aia precedent (EXEMPLUL 7 JAVASCRIPT), cu singura deosebire (important!) c datele su nt introduse cu ajutorul unui formular (X)HTML, care d un plus de interactivitate paginilor Web. Datele care se vor introduce vor fi validate, iar n caz de eroare se vor afia mesaje corespunztoare. Se vor realiza dou variante: Varianta 1 Introdu cerea livrrilor se face ntr-o zon text asociat fiecrei zile i fiecrui rezervor. Afiar rezultatelor se face n aceeai fereastr n zone de text distincte. Varianta 2 Introduc erea livrrilor se face printr-o singur zon de text. Selecia rezervorului i a zilei se face printr-o list de selectare. Afiarea rezultatelor se face ntr-o fereastr distin ct. Specificaii de programare n figurile 8.82 i 8.83 sunt prezentate: ecranul (intrare/ieire) cu Situaia livrrilor d

e benzin pentru rezervoarele R1 R2 R3 i specificaiile de programare. Mesajele de val idare a datelor i tabela de variabile sunt prezentate n figura 8.84, respectiv fig ura 8.85. 318 Figura 8.82 Specificaii de programare Descriere. Programul editeaz ntr-o pagin Web situaia livrril or de benzin efectuate zilnic din trei rezervoare cilindrice echilaterale (R1, R2 , R3). De asemenea programul afieaz livrrile maxime i minime (valoare, ziua, rezervo r). Afiarea tuturor rezultatelor se realizeaz atunci cnd se execut clic pe butonul R ezultate (vezi figura 8.82). Livrrile, pe zile (luni, mari, miercuri, joi, vineri) i pe rezervoare (R1, R2, R3) se introduc ntr-un formular (vezi figura 8.82) de la tastatur. Intrri. Valorile livrrilor, pe zile, pentru fiecare rezervor (R1, R2, R3 ). n situaia n care datele de intrare nu sunt numerice i nu respect intervalul (0, 20 ) se genereaz Figura 8.83 un mesaj de eroare. 319 Ieiri. Media livrrilor pe zile i pe rezervoare (n cadrul aceluiai formular); livrarea maxim (valoare, ziua, rezervor); livrarea minim (valoare, ziua, rezervor). Lista de funciuni ale programului 1. Creare i iniializare matrice livrri. 2. Validare date . 3. Trunchiere valori. Figura 8.83 (continuare) 5. Plasare valoare n matrice livrri. 6. Calculul mediilor livrrilor pe zile i pe rez ervoare. 7. Afiarea rezultatelor. 8. Stop. 4. Plasare valori valide (ntregi) n formular. Mesaje Mesaj Valoare greit pentru ...! Caractere invalide. Valoare greit pentru ...! Valoarea trebuie s fie >0. Valoare greit pentru ...! Valoarea trebuie Figura 8.84 s fie <20. Descriere Valorile introduse nu sunt numerice. Valoarea introdus este n egativ. Valoarea introdus este mai mare ca 20. Tabela de variabile Variabile de intrare T11,T12, T13,T21, Variabile de stare st : (real) folosit pentru calculul sumei livrrilor totale pe zile i rezervoare s: (r eal) folosit pentru calculul sumelor pariale pe zile rval: (logic) indic faptul c v aloarea introdus n zona de editare este valid sau nu x: (real) valoarea real a textu lui introdus n zona de editare Z: (vector) numele zilelor sptmnii imax,imin,jmax,jmi n: numere ntregi, pstreaz indicii livrrilor maxime i minime din matricea a Variabile de ieire a: matrice de numere reale, pstreaz valorile livrrilor pe zile i rezervoare M1, M2,M3, M4, M5, M6, T61, T62, T63, M6, vmax, zmax, vmin, zmin, rmax, rmin: Ob iecte, zone de text pentru afiarea rezultatelor mediilor b: vector de numere real e, pstreaz mediile livrrilor pe zile d: vector de numere reale, pstreaz mediile livrri lor pe rezervor max,min: numere reale, pstreaz valoarea maxim i minim pentru livrri T22, T23, T31, T32, T33, T41, T42, T43, T51, T52, zone T53: de Obiecte, editare text pentru introducerea valorilor livrrilor pe fiecare rezervor, n fiecar e zi Figura 8.85 Documentaia de proiectare Pseudocodul pentru EXEMPLUL 8 JAVASCRIPT (Varianta 1) este prezentat n figura 8.8 5.

320 Pseudocodul BEGIN //initializeaza vectorul Z cu numele zilelor z=luni,marti,mier curi,joi vineri //aloca spatiu de memorie si //initializeaza matricea livrarilor FORI FOR(i=0;i<3;i++) FORJ FOR(j=0;j<5;j++) ai,j=0.0 FORJ ENDFOR FORI ENDFOR // raspunde la evenimentele generate de butonul Rezultate IF1 IF(se apasa butonul R ezultate) DO calculeaza IF1 ENDIF //raspunde la evenimentele generate de zonele de editare IF2 IF(se paraseste zona de editare) DO valideaza(zona_de_editare,0,2 0) IF2 ENDIF EXEMPLUL8 END // transforma o valoare reala in sir de caractere // si trunchiaza la doua zecimale TRUNCHIAZA BEGIN Parametrii: x- valoare reala s=t ransforma in sir de caractere x i=pozitia punctului zecimal in sir IF3 IF(i-1) s= copiazasubsi (s,0,i+2) IF3 ENDIF RETURN s TRUNCHIAZA END EXEMPLUL8 VALIDEAZA IF4 IF4 IF5 IF5 IF6 IF6 Figu a 8.86 BEGIN //valideaza valoa ea int odusa in zona de text Date int a e: item-zona de text ca e a gene at evenimentul onBlu min- valoa ea minima pe misa max- valoa e a maxima pe misa val=fals x=t ansfo ma in eal item.value IF(x nu este numa ) A fiseaza mesaj de e oa e: Valoa e g esita pent u cantitate ELSE IF(x<min) Afiseaz a mesaj de e oa e: Valoa ea este p ea mica ELSE IF(x>max) Afiseaza mesaj e oa e: Valoa ea este p ea ma e ELSE Rval=adeva at DO puneVal(item,x) 321 IF6 IF5 IF4 VALIDEAZA PUNEVAL ENDIF ENDIF ENDIF RETURN val END

322 ENDIF IF(min>ai,j) min=aij imin=i jmin=j IF8 ENDIF FORJ2 ENDFOR FORI2 ENDFOR imi n=imin+1 imax=imax+1 //afisa e ezultate M1.value=t unchiaza(B[0]) M2.value=t un chiaza(B[1]) M3.value=t unchiaza(B[2]) M4.value=t unchiaza(B[3]) M5.value=t unch iaza(B[4]) T61.value=t unchiaza(D[0]) T62.value=t unchiaza(D[1]) T63.value=t unc hiaza(D[2]) M6.value=t unchiaza(D[3]) vmax.value=t unchiaza(max) vmin.value=t un chiaza(min) max.value="R"+imax min.value="R"+imin zmax.value=Zjmax Figu a 8.86 zmin.value=Zjmin (continua e) CALCULEAZA END IF7 IF8 Codifica ea n limbajul JavaSc ipt Documentul complet (X)HTML, n ca e s-a inse at sc ipt-ul (p og amul JavaSc ipt) e ste p ezentat n figu a 8.87.

//depune valoa ea din zona de edita e in mat icea liv a ilo a BEGIN Date int a e: item-zona de text ca e a gene at evenimentul onBlu x- valoa ea ce va fi depu sa s=item.nume s1=ext age_subsi ul(s,1,2) si =t ansfo ma_in_intege (s1)-1 s1= ex t age_subsi ul(s,2,3) ic= t ansfo ma_in_intege (s1)-1 ai ,ic=t ansfo ma_in_ eal( T1.value) PUNEVAL END // calculeaza mediile dete mina valo ile minime si maxime si afiseaza ezultatele CALCULEAZA BEGIN // aloca spatiu de memo ie pent u vecto ul b si d // calculeaza mediile pe eze voa e FORJ FOR(j=0;j<5;j++) s=0 FORI FO R(i=0;i<3;i++) s=s+ai,j FORI ENDFOR bj=s/3 FORJ ENDFOR // calculul mediilo pe eze voa e st=0 FORI1 FOR(i=0;i<3;i++) s=0 FORJ1 FOR(j=0;j<5;j++) s=s+ai,j st=st+ aij FORJ1 ENDFOR di=s/5 FORI1 ENDFOR d3=s/15 // dete mina ea maximului si minimu lui max=a0,0 min=a0,0 imax=0 imin=0 jmax=0 jmin=0 FORI2 FOR(i=0;i<3;i++) FORJ2 F OR(j=0;j<5;j++) IF7 IF(max<ai,j) max=aij imax=i Figu a 8.86 jmax=j (continua e)

<html> <head> <title>Exemplul 8</title> <sc ipt language="JavaSc ipt"> <!--a=new A ay(3); a[0]=new A ay(5); a[1]=new A ay(5); a[2]=new A ay(5); fo (i=0;i<3; i++) fo (j=0;j<5;j++) a[i][j]=0.0; va Z = new A ay("Luni","Ma ti","Mie cu i"," Joi","Vine i"); function t unchiaza(x) { va s=""+x; i=s.indexOf("."); if(i!=-1) { s=s.subst ing(0,i+3); } etu n s; Figu a 8.87 } 323 function puneVal(item,x) { s=item.name; va ic=pa seInt(s.subst ing(1,2))-1; va i =pa seInt(s.subst ing(2,3))-1; a[i ][ic]=x; } function valideaza(item, min, m ax) { va Val = false; va x=pa seFloat(item.value); if(isNaN(x)){ ale t("Valoa e g esita pent u " + item.name + "!Ca acte e invalide"); } else if (x < min) al e t("Valoa e g esita pent u " + item.name + "!Valoa ea t ebuie >" + min); else i f (x> max) ale t("Valoa e g esita pent u " + item.name + "! Valoa ea t ebuie sa fie < " + max); else { Val = t ue; puneVal(item,x); } etu n Val; } function c alculeaza() { va i,j; B = new A ay(5); fo (j=0;j<5;j++) { S=0; fo (i=0;i<3;i++ ) S=S+a[i][j]; B[j]=S/3; } // CALCULUL MEDIILOR PE REZERVOARE D = new A ay(4); ST=0; fo (i=0;i<3;i++) { S=0; fo (j=0;j<5;j++){ S=S+a[i][j]; ST=ST+a[i][j]; } D[ i]=S/5; } D[3]=ST/15; // DETERMINAREA MAXIMULUI SI MINIMULUI max=a[0][0]; min=a[ 0][0]; imax=0;imin=0; jmax=0;jmin=0; Figu a 8.87 fo (i=0;i<3;i++){ (continua e) fo (j=0;j<5;j++){ 324 if(max<a[i][j]){max=a[i][j];imax=i;jmax=j;} if(min>a[i][j]){min=a[i][j];imin=i;j min=j;} }} imin++;imax++; document.input_fo m.M1.value=t unchiaza(B[0]); documen t.input_fo m.M2.value=t unchiaza(B[1]); document.input_fo m.M3.value=t unchiaza( B[2]); document.input_fo m.M4.value=t unchiaza(B[3]); document.input_fo m.M5.val ue=t unchiaza(B[4]); document.input_fo m.T61.value=t unchiaza(D[0]); document.in put_fo m.T62.value=t unchiaza(D[1]); document.input_fo m.T63.value=t unchiaza(D[ 2]); document.input_fo m.M6.value=t unchiaza(D[3]); document.f1.vmax.value=t unc hiaza(max); document.f1.vmin.value=t unchiaza(min); document.f1. max.value="R"+i max; document.f1. min.value="R"+imin; document.f1.zmax.value=Z[jmax]; document.f 1.zmin.value=Z[jmin]; } // --> </SCRIPT> </head> <body> <cente ><h3>SITUATIA LIV RARILOR DE BENZINA PENTRU REZERVOARELE R1 R2 R3</h3> <fo m name = "input_fo m"> <table Bo de =1> <t ><td><b>Ziua</b><td><b>REZERVORUL 1</b><td><b>REZERVORUL 2</ b> <td><b>REZERVORUL 3</b><td> Media</td></t > <t > <td><b>LUNI:</b></td> <td><i nput type="text" name="T11" size="7" onBlu ="valideaza(this,0,20);"> <td><input type="text" name="T12" size="7" onBlu ="valideaza(this,0,20);"> <td><input type= "text" name="T13" size="7" onBlu ="valideaza(this,0,20);"> <td><input type="text " name="M1" size="7" eadonly> <t > <td><b>MARTI:</b> <td><input type="text" nam e="T21" size="7" onBlu ="valideaza(this,0,20);"> <td><input type="text" name="T2 2" size="7" onBlu ="valideaza(this,0,20);"> <td><input type="text" name="T23" si ze="7" onBlu ="valideaza(this,0,20);"> <td><input type="text" name="M2" size="7" eadonly> <t > <td><b>MIERCURI:</b> <td><input type="text" name="T31" size="7" onBlu ="valideaza(this,0,20);"> <td><input type="text" name="T32" size="7" onBlu ="valideaza(this,0,20);"> Figu a 8.87 <td><input type="text" name="T33" size="7 " onBlu ="valideaza(this,0,20);"> (continua e) <td><input type="text" name="M3" size="7" eadonly> 325 <t > <td><b>JOI:</b> <td><input type="text" name="T41" size="7" onBlu ="valideaz a(this,0,20);"> <td><input type="text" name="T42" size="7" onBlu ="valideaza(thi s,0,20);"> <td><input type="text" name="T43" size="7" onBlu ="valideaza(this,0,2 0);"> <td><input type="text" name="M4" size="7" eadonly> <t > <td><b>VINERI:</b > <td><input type="text" name="T51" size="7" onBlu ="valideaza(this,0,20);"> <td ><input type="text" name="T52" size="7" onBlu ="valideaza(this,0,20);"> <td><inp ut type="text" name="T53" size="7" onBlu ="valideaza(this,0,20);"> <td><input ty

pe="text" name="M5" size="7" eadonly> <t > <td><b>Media</b> <td><input type="te xt" name="T61" size="7" eadonly> <td><input type="text" name="T62" size="7" ea donly> <td><input type="text" name="T63" size="7" eadonly> <td><input type="tex t" name="M6" size="7" eadonly> </t > </table> <p><input type="button" value="Re zultate" name="B1" onClick="calculeaza();"></p> </fo m> <P> <P> <P> <fo m name=" f1"> <table bo de =1><t ><td owspan=3> Liv a ea maxima <td>Valoa e:<td><input t ype="text" name="vmax" size="7" eadonly> <t > <td>Ziua:<td><input type="text" n ame="zmax" size="7" eadonly> <t > <td>Reze vo ul:<td><input type="text" name=" max" size="7" eadonly> <t ><td ROWSPAN=3> Liv a ea minima<td>Valoa ea:<td><inpu t type="text" name="vmin" size="7" eadonly> <t > <td>Ziua:<td><input type="text " name="zmin" size="7" eadonly> <t > <td>Reze vo ul<td><input type="text" name= " min" size="7" eadonly> </table> Figu a 8.87 </body> (continua e) </html> Comenta ii: Sc ipt-ul (inse at n seciunea <head> a documentului HTML) conine patru funcii: trunchiaz(x); puneVal(item, x); validate(item, min, max); compute(). Pentru calculul mediei mediilor livrrilor s-a utilizat instruciunea de atribuire D [3]=ST/15 unde: D este vectorul mediilor livrrilor pe rezervoare iar ST reprezint total livrri. S-au folosit gestionarii de evenimente onBlur, cu funcia de validare date validate() pentru obiectele zone de text i onClick cu funcia compute() pentr u butonul de calcul rezultate. 326 Vizualizai documentul ntr-un browser (figura 8.88) i testai script-ul. Figura 8.88 n figura 8.89 se prezint rezultatele execuiei programului JavaScript pe ntru un set de date ilustrat n cadrul formularului afiat. 327 Figura 8.89 EXEMPLUL 8 JAVASCRIPT (varianta 2) Specificaii de programare n figurile 8.90, 8.91, 8.92 i 8.93 sunt prezentate: ecranul pentru introducerea li vrrilor (pe zile i pe rezervoare); ecranul cu Situaia livrrilor de benzin pentru rezer voarele R1, R2, R3; specificaiile de programare respectiv tabela de variabile. 328 Figura 8.90 Figura 8.91 Specificaii de programare Descriere. Programul editeaz ntr-o pagin Web situaia livrril or de benzin efectuate zilnic din trei rezervoare cilindrice echilaterale (R1, R2 , R3). Programul afieaz de asemenea livrrile maxime i minime cu precizarea numrului r ezervorului i a zilei n care s-a efectuat livrarea respectiv. Afiarea tuturor rezult atelor se face ntr-o fereastr distinct, n momentul n care se execut clic pe Figura 8.9 2 butonul Afieaz (vezi figura 8.90). 329 Livrrile, pe zile (luni, mari, miercuri, joi, vineri) i pe rezervoare (Rezervor1, R ezervor2, Rezervor3) se introduc printr-o singur zon de text a unui formular (vezi figura 8.90). Selecia rezervorului i a zilei se face printr-o list de selectare. I ntrri. Valorile livrrilor, pe zile, pentru fiecare rezervor se introduc printr-o s

ingur zon de text a unui formular. n caz de eroare datele de intrare nu sunt numeri ce i nu respect intervalul (0, 20) se genereaz un mesaj de eroare. La acionarea buto nului Livreaz se vor depune livrrile din zona Cantitatea n matricea a, pe linia i co loana corespunztoare rezervorului i zilei respective (vezi funcia Livreaz()). Ieiri. Situaia livrrilor, mediile (pe zile i pe rezervoare) sub form de tabel; livrarea max im (valoare, ziua, rezervor); livrarea minim (valoare, ziua, rezervor). Lista de f unciuni ale programului 1. Iniializeaz vectorul z cu numele zilelor sptmnii. 2. Aloc s aiu de memorie i iniializeaz matricea livrrilor. 3. Rspunde la evenimentele generate d e butonul Livreaz. 4. Rspunde la evenimentele generate de butonul Afieaz. 5. Rspunde la evenimentele generate de zona de editare T1. 6. Transform n ir de caractere i tru nchiaz la dou zecimale. 7. Valideaz valoarea introdus n zona de text. 8. Depune valoa rea din zona de editare n matricea livrrilor a. 9. Calculeaz mediile pe zile i pe re zervoare. 10. Determin valorile maxime i minime. Figura 8.92 (continuare) 11. Afieaz rezultatele n fereastra RezWindow. 12. Stop.

Tabela de variabile Variabile de intrare Rezervor: obiect, list simpl de selecie pe ntru cele trei rezervoare Zile: obiect, list simpl de opiuni pentru selecia zilei di n sptmn T1: obiect, zona de editare n care se va introduce valoarea livrrilor Figura 8 .93 Variabile de stare st: (real) folosit pentru calculul sumei livrrilor totale pe zile i rezervoare s: (real) folosit pentru calculul sumelor pariale pe zile rva l: (logic) indic faptul c valoarea introdus n zona de editare este valid sau nu x: (r eal) valoarea real a textului introdus n zona de editare Z: (vector) numele zilelo r sptmnii imax,imin,jmax,jmin: (numere ntregi) pstreaz indicii livrrilor maxime i min din matricea a Variabile de ieire RezWindow: obiect, fereastra n care se vor afia rezultatele b: vector de numere reale, pstreaz mediile livrrilor d: vector de numer e reale, pstreaz mediile livrrilor a: matrice de numere reale, pstreaz valorile livrri lor pe zile i rezervoare max,min: numere reale, pstreaz valoarea maxim i minim pentru livrri 330 Documentaia de proiectare Pseudocodul pentru EXEMPLUL 8 JAVASCRIPT (Varianta 2) este prezentat n figura 8.9 4. Pseudocodul 331 BEGIN //initializeaza vectorul Z cu numele zilelor z=luni,marti,miercuri,joi vin eri //aloca spatiu de memorie si initializeaza matricea livrarilor FOR1 FOR(i=0; i<3;i++) FOR2 FOR(j=0;j<5;j++) ai,j=0.0 FOR2 ENDFOR FOR1 ENDFOR Initializeaza Re zWindow //raspunde la evenimentele generate de butonul Livreaza IF1 IF(se apasa butonul Livreaza) DO livreaza IF1 ENDIF //raspunde la evenimentele generate de b utonul Afiseaza IF2 IF(se apasa butonul Afiseaza) DO afis IF2 ENDIF //raspunde l a evenimentele generate de zona de editare T1 IF3 IF(se paraseste zona T1) DO va lideaza(T1,0,20) IF3 ENDIF EXEMPLUL8 END EXEMPLUL8 // transforma in sir de caractere si trunchiaza la doua zecimale TRUNCHIAZA BEGIN Parametrii: x- valoare reala s=transforma in sir de caractere x i=pozitia punctu lui zecimal in sir IF4 IF(i-1) s=copiazasubsi (s,0,i+2) IF4 ENDIF RETURN s TRUNCH IAZA END VALIDEAZA

IF5 Figu a 8.94 IF5 BEGIN //valideaza valoa ea int odusa in zona de text Date int a e: item-zona de text ca e a gene at evenimentul onBlu min- valoa ea minima pe misa max- valoa e a maxima pe misa val=fals x=t ansfo ma in eal item.value IF(x nu este numa ) A fiseaza mesaj de e oa e: Valoa e g esita pent u cantitate ELSE 332 IF6 IF6 IF7 IF7 IF7 IF6 IF5 VALIDEAZA LIVREAZA IF(x<min) Afiseaza mesaj de e oa e: Valoa ea este p ea mica ELSE IF(x>max) Afise aza mesaj e oa e: Valoa ea este p ea ma e ELSE Rval=adeva at ENDIF ENDIF ENDIF R ETURN val END //depune valoa ea din zona de edita e in mat icea liv a ilo a BEGIN i =indicele elementului selectat in lista Reze vo ic=indicele elementului selectat in list a Zile ai ,ic=t ansfo ma_in_ eal(T1.value) LIVREAZA END // calculeaza mediile de te mina valo ile minime si maxime si afiseaza ezultatele AFIS BEGIN // aloca sp atiu de memo ie pent u vecto ul b si d // calculeaza mediile pe eze voa e FOR3 FOR(j=0;j<5;j++) s=0 FOR4 FOR(i=0;i<3;i++) s=s+ai,j FOR4 ENDFOR bj=s/3 FOR3 ENDF OR // calculul mediilo pe eze voa e st=0 FOR5 FOR(i=0;i<3;i++) s=0 FOR6 FOR(j= 0;j<5;j++) s=s+ai,j st=st+aij FOR6 ENDFOR di=s/5 FOR5 ENDFOR d3=s/15 // dete min a ea maximului si minimului max=a0,0 min=a0,0 imax=0 imin=0 jmax=0 jmin=0 FOR(i= 0;i<3;i++) Figu a 8.94 FOR7 FOR(j=0;j<5;j++) (continua e) FOR8 333 IF8 IF(max<ai,j) max=aij imax=i jmax=j ENDIF IF(min>ai,j) min=aij imin=i jmin=j ENDI F ENDFOR ENDFOR imin=imin+1 imax=imax+1 //afisa e ezultate IF(RezWindow exista) nchide RezWindow ENDIF C eaza RezWindow //sc ie ea ezultatelo in fe east a Rez Window RezWindow.WRITE "SITUATIA REZERVOARELOR R1 R2 R3" RezWindow.WRITE "ZIUA R 1 R2 R3 MEDIA" FOR(k=0;k<5;k++) RezWindow.WRITE Z[k] FOR(j=0;j<3;j++) RezWindow. WRITE a[j][k] ENDFOR RezWindow.WRITE t unchiaza( b[k]) ENDFOR RezWindow.WRITE "M EDIA" FOR(j=0;j<4;j++) RezWindow.WRITE t unchiaza(d[j]) ENDFOR RezWindow.WRITE " Liv a ea maxima: " max RezWindow.WRITE "s-a facut din eze vo ul: R" imax RezWin dow.WRITE "in ziua de" Zjmax RezWindow.WRITE "Liv a ea minima:" min RezWindow.WR ITE " s-a facut din eze vo ul: R"imin RezWindow.WRITE " in ziua de "+Zjmin END IF8 IF9 IF9 FOR8 FOR7 IF10 IF10 FOR9 FOR10 FOR10 FOR9 FOR11 FOR11 Figu a 8.94 (continua e) AFIS Codifica ea n limbajul JavaSc ipt Documentul complet (X)HTML este p ezentat n figu a 8.95. <html> <head> <title>Exemplul 8</title> <sc ipt language="JavaSc ipt"> <!--va Z = new A ay("Luni","Ma ti","Mie cu i","Joi","Vine i"); function t unchiaza(x) {

336 <body> <cente > <fo m name="f1"> <table bo de =0> <t ><td><b>REZERVORUL</b><td>< b>Ziua</b> <t ><td><select size="1" name="Reze vo "> <option selected>Reze vo 1< /option> <option>Reze vo 2</option> <option>Reze vo 3</option> </select> <td> <s elect size="1" name="Zile"> <option>Luni</option> <option>Ma ti</option> <option >Mie cu i</option> <option>Joi</option> <option>Vine i</option> </select> <t > < td>Cantitatea <td><input type="text" name="T1" size="7" value="0.0" onChange="va lidate(this,0,20);"> <t > <td><input type="button" value="Liv eaza" onClick="t i mite();"> <td><input type="button" value="Afiseaza" onClick="afis();"> </table> </cente > </fo m> Figu a 8.95 </body> (continua e) </html> Comenta ii: Sc ipt-ul (inse at n seciunea <head> a documentului XHTML) conine patru funcii: trunchiaz(x); afi(). ivalidate(item, min, max);

335 // CALCULUL MEDIILOR PE REZERVOARE D = new A ay(4); ST=0; fo (i=0;i<3;i++) { S= 0; fo (j=0;j<5;j++){ S=S+a[i][j]; ST=ST+a[i][j]; } D[i]=S/5; } D[3]=ST/15; // DE TERMINAREA MAXIMULUI SI MINIMULUI max=a[0][0]; min=a[0][0]; imax=0;imin=0; jmax= 0;jmin=0; fo (i=0;i<3;i++){ fo (j=0;j<5;j++){ if(max<a[i][j]){max=a[i][j];imax=i ;jmax=j;} if(min>a[i][j]){min=a[i][j];imin=i;jmin=j;} }} imin++;imax++; //AFISAR E REZULTATE if(RezWindow!=null)RezWindow.close(); RezWindow=window.open( , , toolba =yes,sc ollba s=yes,menuba =no, width=500,height=300 ); RezWindow.documen t.w iteln("<cente ><p>SITUATIA REZERVOARELOR R1 R2 R3</p></cente >"); RezWindow. document.w iteln("<cente ><table bo de =1 bgcolo =#EFEFFF><t >"); RezWindow.docu ment.w iteln("<td><b>ZIUA</b><td><b>R1</b><td> <b>R2</b><td><b>R3</b><td><b>MEDI A</b></td></t >"); fo (k=0;k<5;k++) { RezWindow.document.w iteln("<t ><td>" + Z[ k]+"</td>"); fo (j=0;j<3;j++) { RezWindow.document.w iteln("<td>" + a[j][k]+ "</ td>"); } RezWindow.document.w iteln(" <td> " +t unchiaza( B[k])+ "</td></t >"); } RezWindow.document.w iteln("<t ><td><b>MEDIA</b>"); fo (j=0;j<4;j++) RezWindow .document.w iteln("<td><b>" + t unchiaza(D[j])+" </b></td>"); RezWindow.document .w iteln("</t >"); RezWindow.document.w iteln("</table></cente ><p><p>"); RezWin dow.document.w iteln("<font colo =g een>Liv a ea maxima:"+max+" s-a facut din e ze vo ul: R"+imax+" in ziua de "+Z[jmax]+"</font>"); RezWindow.document.w iteln( "<p><font colo =g een>Liv a ea minima:"+min+" s-a facut din eze vo ul: R"+imin+ " in ziua de "+Z[jmin]+"</font>"); RezWindow.document.w iteln("</html>"); } // -> Figu a 8.95 </sc ipt> (continua e) </head>

334 va s=""+x; i=s.indexOf("."); if(i!=-1){ s=s.subst ing(0,i+3); } etu n s; } fun ction validate(item, min, max) { va Val = false; va x=pa seFloat(item.value); if(isNaN(x)) ale t("Valoa e g esita pent u cantitate!"); else if (x < min) ale t("Valoa e g esita pent u cantitate!Valoa ea t ebuie >" + min); else if (x> max) ale t("Valoa e g esita pent u cantitate! Valoa ea t ebuie sa fie < " + max); el se Val = t ue; etu n Val; } a=new A ay(3); a[0]=new A ay(5); a[1]=new A ay (5); a[2]=new A ay(5); fo (i=0;i<3;i++) fo (j=0;j<5;j++) a[i][j]=0.0; va RezWi ndow=null; function liv eaza() { va i =f1.Reze vo .selectedIndex; va z=f1.Zile .selectedIndex; a[i ][z]+=pa seFloat(f1.T1.value); } function afis(){ // CALCULU L MEDIILOR PE ZILE va i,j; B = new A ay(5); fo (j=0;j<5;j++) { S=0; fo (i=0;i< 3;i++) S=S+a[i][j]; B[j]=S/3; Figu a 8.95 }

livreaz();

Formularul conine subobiectele: Select i Option; Text; butoanele Livreaz i Afieaz. Val idarea datelor de intrare introduse n zona de text se realizeaz cu gestionarul de evenimente onBlur (vezi funcia valideaz()). Depunerea livrrilor din zona de editare (subobiectul Text) n matricea livrrilor se realizeaz cu gestionarul de evenimente onClick (vezi funcia Livreaz()). Afiarea rezultatelor se realizeaz cu gestionarul de evenimente onClick (vezi funcia afis()). Prin acionarea butonului Afieaz se deschid e o nou fereastr care va afia: situaia livrrilor; mediile livrrilor pe zile i rezervoa e; livrrile maxime i minime. Pentru crearea unei ferestre, am utilizat metoda wind ow.open() (figura 8.96). Figura 8.96 337 Pentru crearea listei de selectare a rezervoarelor i a zilelor sptmnii am utilizat s ubobiectele Form: Select i Option (vezi figura 8.97). Figura 8.97 Subobiectul Select este versiunea transpus n obiect a tag-ului (X)HTML <select> ... </select>. Subobiectul Select este unul dintre cele mai utile i mai flexibile sub obiecte ale obiectului Form. Subobiectul Select permite crearea urmtoarelor tipur i de liste: list de selectare (o list de opiuni n care utilizatorul poate selecta un singur element. Pentru a v asigura c lista afieaz o singur linie la un moment dat at ribuii proprietii size valoarea 1 sau nu-l folosii deloc). list derulant (o list care fieaz la un moment dat un anumit numr de elemente. Ea include bare de derulare. Pen tru a defini o list derulant atribuii lui size o valoare mai mare ca 1). list derula nt cu selectri multiple (din acest tip de obiect Select, putei selecta unul sau mai multe elemente. Pentru a defini o list derulant cu selectri multiple, adugai proprie tatea multiple la definirea obiectului Select). Subobiectul Option este versiune a transpus n obiect a tag-ului (X)HTML <option> ... </option>. Vizualizai documentul ntr-un browser (figura 8.98) i testai script-ul. Figura 8.98 n figura 8.99 se prezint rezultatele execuiei programului JavaScript pe ntru un set de date afiat. 338 Figura 8.99 Aplicaie Scriei un program JavaScript pentru afiarea datelor coninute n f ormularul din figura 8.100, ntr-o nou fereastr. Personalizai script-ul. Figura 8.100 339 n figura 8.101 se prezint documentul complet XHTML, n care s-a inserat script-ul ap licaiei. Figura 8.101 n figura 8.102 este prezentat rezultatul execuiei script-ului. Figura 8.102 340 Testai script-ul (figura 8.103) executnd clic pe butonul Afiai. Figura 8.103

Remarc. Informaiile din cadrul formularului sunt afiate ntr-o nou fereastr (figura 8.1 03). JavaScript Testai-v cunotinele Tem 1. Care din atributele tag-ului <form> determin locul unde vor fi expediate datel e? action; method; name. 2. Care sunt subobiectele obiectului Form? 3. Care sunt proprietile obiectului For m? 4. Care sunt metodele obiectului Form? 5. Care sunt gestionarii de evenimente ai obiectului Form? 6. Care este relaia dintre obiectul Form i tag-ul <form>? 7. Care este relaia dintre subobiectele unui formular i obiectul Form? 8. Care este s intaxa subobiectelor: Text; Textarea; Submit; Checkbox; Radio; Select? 9. Care sunt proprietile subobiectului Select? 10.Care sunt metodele subobiectelor : Text; Textarea; Submit; Reset; Button; Checkbox; Select; Fileupload; Option? 341 11.Care sunt gestionarii de evenimente au subobiectelor: Reset; Option;

Checkbox. 12.Cum putei utiliza limbajul JavaScript pentru validarea unui formular? 13.Scriei un program JavaScript care calculeaz i afieaz produsul primelor n numere naturale. Utilizai un formular (X)HTML. 14.Scriei un program JavaScript care afieaz un numr, in tervalul [0, 9] n cuvinte. Utilizai un formular (X)HTML. 15.Scriei un program JavaS cript care genereaz seria Ulam. Utilizai un formular XHTML. Indicaie. Seria Ulam se genereaz dup cum urmeaz: se pornete de la un numr ntreg pozitiv(n) i se ajunge la 1 p dou ci: dac numrul este par, noul numr se obine ca rezultat al mpririi cu 2. (exemp , 4, 2, 1). dac numrul este impar, noul numr se obine cu formula: 3*n+1 (exemplu: 5, 16, 8, 4, 2, 1). 16.Simulai funcionarea urmtoarelor script-uri (vezi figura 8.104 i figura 8.105). Figura 8.104 342 Figura 8.105 17.nlocuii liniile de cod (vezi figura 8.104). onClick="document.form1.text1.Focus()" onClick="document.form1.text2.Focus()" on Click="document.form1.text3.Focus()" prin: onClick="document.form1.text1.blur()" onClick="document.form1.text2.blur()" onCl

ick="document.form1.text2.blur()" Precizai rezultatele execuiei noului script. Vizitai site-urile http://www.javascriptgate.com/ http://www.gatescript.com/ http://www.biblioscrip t.com/ http://www.w3schools.com/ http://www.siteexperts.com/ http://developer.ir t.org/script/script.htm http://www.wsabsract.com/cutpastejava.shtml Conversaia 9 Obiectul Image n aceast conversaie: Obiectul Image. Aplicaii Creai un rollover cu JavaScript Creai un joc cu JavaScript Creai animaii simple cu JavaScript Creai imagini reactive (client) cu JavaScript. Aplicaii EXEMPLUL 9 JAVASCRIPT Tem Obiectul Image Ca urmare a popularitii lor, imaginile au ptruns n aproape toate domeniile navigrii p e Web. De exemplu, n numeroase site-uri Web, butoanele (X)HTML au fost nlocuite pr in imagini clicabile (rollovere) care se transform atunci cnd trecei mouse-ul pe de asupra acestora. Cu siguran c apreciai aceste interesante efecte grafice dar ignorai poate faptul c puterea acestora se afl n limbajul JavaScript. n consecin, crearea unui site Web cu adevrat puternic presupune cunoaterea facilitilor imaginilor (X)HTML i a obiectului Image al limbajului JavaScript. Fia obiectului Image este prezentat n f igura 9.1. 344 Fia obiectului Image Obiectul printe Cum se creeaz obiectul? Proprieti: Metode: Document Constructorul Image() border, complete, height, width, hspace, vspace, name, src, lowsrc Obiectul Image nu posed nici o metod dar putei modifica proprietile imaginilor n mod d inamic. Gestionarii de evenimente: onAbort, onError, onKeyDown, onKeyPress, onKeyUp, Conversaia 6). onLoad, onClick, onDblClick, onMouseDown, onMouseOut, onMouseOver (vezi Figura 9.1 Relaia dintre obiectul Image i tag-ul <img> Manipularea imaginilor din cadrul unui document (X)HTML depinde n mare msur de obie ctul Image al limbajului JavaScript. n cursul ncrcrii documentului (X)HTML n navigato rul Web, interpretorul JavaScript creeaz un obiect Image pentru fiecare tag <img> prezent n document. El plaseaz toate obiectele Image ntr-o matrice images (subobie ct al obiectului Document). n loc s utilizai matricea images, putei specifica pentru fiecare tag <img> un atribut name=, care va da un acces direct obiectelor Image.

Iat cum procedm pentru a accesa obiectul Image asociat tag-ului <img> din figura 9 .2, care reprezint prima imagine a unui document (X)HTML. <img src=sigla.jpg name=LU MINABLANDA /> Figura 9.2 Obiectul Image poate fi accesat cu una din instruciunile prezentate mai jos: document.images[0]; document.LUMINABLANDA. Remarc. Dac dintr-un motiv sau altul nu ai putut da imaginilor dumneavoastr un nume valid de variabil JavaScript, atunci accesul prin nume rmne posibil numai prin inte rmediul matricei images, ca i n cazul matricei elements din obiectul Form. De exem plu, definiia imaginii: <img name=PLOIESTI VEST src=gara.jpg /> este accesibil prin ut ilizarea matricei images, dup cum urmeaz: var gara=document.images[PLOIESTI VEST]. Constructorul Image()

345 Interpretorul JavaScript creeaz un obiect Image pentru fiecare tag <img> pe care l ntlnete ntr-un document (X)HTML, dar atenie, chiar i dumneavoastr l putei crea f a unui tag <img>, utiliznd constructorul de obiecte Image() (vezi figura 9.3). Figura 9.3 var imagine1=new Image(); Remarci Instruciunea JavaScript din figura 9.3 genereaz un obiect Image fr a mai fi nevoie de un tag <img>. Putei ncrca un fiier imagine n obiectul Image atribuind n mod simplu o adres Web proprietii src (figura 9.4). Figura 9.4

... imagine1.src=sigla.jpg Dup ncrcarea acestei imagini, s-a creat un obiect Image care conine o imagine (ncrcat) dar non vizibil n navigatorul Web. Pentru ca o imagine s se afieze n navigatorul Web , ea trebuie s fie asociat n mod obligatoriu unui tag <img> aflat n documentul (X)HT ML; n caz contrar, navigatorul Web ignor totul!

Iat cum folosim imagini fr a utiliza tag-ul <img> (vezi figura 9.5). <img src=moara. jpg name=MOULINROUGE /> document.MOULINROUGE.src=MOARACUNOROC.src; Imaginea coninut n document.MOULINROUGE va fi nlocuit prin imaginea coninut n MOARACUNOROC. n plus, ntruc document.MOULINROUGE este asociat unui tag <img> noua imagine va fi afiat n locul p recedentei imagini. Figura 9.5 Proprietile obiectului Image Proprietile obiectului Image sunt prezentate n detaliu n figura 9.6. Proprietate Sintaxa border document.images[].border Corespunde atributului border al tag-ului <img>. complete Figura 9.6 document.images[].complete

Valoare logic (true/false); true - imaginea a fost n ntregime ncrcat; false imaginea u a fost ncrcat n ntregime. height document.images[].height Corespunde atributului height al tag-ului <img>. 346 width document.images[].width Corespunde atributului width al tag-ului <img>. hspace document.images[].hspace Corespunde atributului hspace al tag-ului <img>. vspace document.images[].vspace Corespunde atributului vspace al tag-ului <img>. name document.images[].name Corespunde atributului name al tag-ului <img>. src document.images[].src Corespunde atributului src al tag-ului <img>. lowsrc (continuare) document.images[].lowsrc Figura 9.6 Corespunde atributului lowsrc al tag-ului <img>. Aplicaii Precizai rezultatul execuiei urmtorului program JavaScript (figura 9.7). Figura 9.7 n figura 9.8 este prezentat rezultatul execuiei programului JavaScript, pe care v rugm s-l comentai. 347 Figura 9.8 Comentai urmtorul program JavaScript (figura 9.9). Figura 9.9 Scriei un program JavaScript care afieaz proprietile unui obiect Image. n f igura 9.10 este prezentat documentul (X)HTML complet.

348 Figura 9.10 Comentarii: Obiectul Document (tot ceea ce se gsete ntre tag-urile <body> i </body>) conine imaginea cu numele sigla.jpg. La rndul su, aceast imagine conine proprietile: rc, name, height, width, border i complete. Aceast ierarhie explic modul n care sunt accesate proprietile imaginii: document.test.src, document.test.width etc. Valori le proprietilor (src, name, height, width, border) sunt extrase din definiia acestu i obiect. Valoarea true (vezi proprietatea complete) rezult din modul n care imagi nea a putut fi corect ncrcat n navigator. n caz contrar valoarea va fi false.

Creai un joc cu JavaScript De la joc la program Vom prsi pentru scurt timp problema rezervoarelor cu care v-am pisat n conversaiile anterioare, invitndu-v n cele ce urmeaz s v jucai puin! Da, ai neles bine! Ne vo n! Despre ce este vorba? Vom proiecta i realiza un program JavaScript pentru jocul : ZECE BEE DE CHIBRIT! Pentru aceia dintre dumneavoastr care nu cunosc acest joc d eoarece pn n prezent au avut doar preocupri serioase, precizm n cele ce urmeaz care t regulile jocului.

349 Exist la nceput 10 bee de chibrit i doi juctori. Cnd i vine rndul, un juctor poate r un b, cel mult dou! Va pierde (!) acel juctor care rmne cu ultimul b de chibrit. Cee e se cere este s realizai un program JavaScript pentru jocul ZECE BEE DE CHIBRIT avndu-i ca juctori pe dumneavoastr i Mria sa calculatorul! Specificaii de programare n figurile 9.11 i 9.12 sunt prezentate: ecranul cu 10 bee de chibrit, specificaiile de programare. Tabela de variabile, mesajele generate n timpul jocului sunt preze ntate n figurile 9.13, respectiv 9.14. Figura 9.11 Specificaii de programare Descriere. Programul afieaz zece bee de chibrit (1-10) i un buton Joc Nou care permite reluarea jocului. Lista de funcii ale programului 1. Permite 2. Stabilete Figura 9.12 juctorului strategia s de extrag joc a 4. Stabilete ctigtorul (n final). 5. Permite reluarea jocului. 6. Stop. unu/dou bee. calculatorului . 3. Actualizeaz numrul de bee rmase.

350 Tabela de variabile Variabile de intrare Variabile de stare i: variabila de control a buclei for x: numrul bului extras (1-10) bete: numrul de bee (rmase) nsrc: rangul obiectului Image n matricea images chibrit1-chibrit10: numele imaginilor cu cele 10 chibrite f1: nu mele formularului Buton: numele butonului Joc Nou Variabile de ieire Figura 9.13

Mesaje Mesaj Jocul s-a terminat! Ai ctigat! Jocul s-a terminat! Ai pierdut! Calculatorul intervine: Acum e rndul meu! Descriere Desemneaz ctigtorul Desemneaz nvinsul. Este rn calculatorului s joace. Este rndul juctorului. Figura 9.14 Calculatorul intervine: Acum e rndul tu! Documentaia de proiectare

Pseudocodul este prezentat n figura 9.15. Pseudocodul 10Betechibrit BEGIN //formeaza pagina html cu imaginile chibritului bete=10 //Trateaza evenime ntele generate IF(se apasa butonul Joc Nou) DO actualizare ENDIF IF(se executa c lick pe imagine chibrit) DO alegeChibrit(numar_bat_chibrit) ENDIF END BEGIN bete =10 FOR(i=1;i<=bete;i++) nsrc=chibrit+i imagine_nsrc.src=chibrit.gif ENDFOR END BEGI N Date intrare: x-numarul batului de chibrit extras //se verifica daca extragere a batului a fost //din pozitia corecta IF1 IF1 IF2 IF2 10betechibrit ACTUALIZARE FOR1 FOR1 ACTUALIZARE AlegeChibrit Figura 9.15 351 IF(x<=bete) AND (bete-x)<2 //se sterge imaginea betelor de chibrit extrase FOR2 FOR(i=x;i<=bete;i++) inlocuieste imaginea chibrit.jpg prin gol.jpg FOR2 ENDFOR / /se actualizeaza numarul de bete ramase bete=x-1; //verifica numarul de bete ram ase si //stabileste castigatorul daca este cazul IF4 IF(bete<=0) WRITE "Jocul sa terminat! Ai pierdut!" IF4 ELSE IF5 IF(bete==1) //inlocuie imaginea primului b at de chibrit chibrit1.src=gol.gif bete=0 WRITE "Jocul s-a terminat!Ai Castigat! " IF5 ELSE WRITE "Calculatorul zice:\n Acum e randul meu"); //inteligenta calcul atorului este aleatoare rand=genereaza_numar_aleator IF6 IF(rand<0.5) x=bete IF6 ELSE x=bete-1 IF6 ENDIF FOR3 FOR(i=x;i<=bete;i++) nsrc= chibrit +i imaginea_nsr c.src="gol.gif" FOR3 ENDFOR bete=x-1 IF7 IF(bete==0) WRITE "Jocul s-a terminat! Ai pierdut!" IF7 ELSE WRITE " Acum e randul tau!" IF7 ENDIF IF5 ENDIF IF4 ENDIF Figura 9.15 IF3 ENDIF (continuare) Alegechibrit END IF3 Codificarea n limbajul JavaScript Documentul complet (X)HTML este prezentat n figu ra 9.16. <html> <head> <title>10 Bete de chibrit</title> <script language="JavaS cript"> <!--function AlegeChibrit(x) { //se verifica daca extragerea batului a f ost din pozitia corecta if((x<=bete)&&((bete-x)<2)) { //se sterg betele extrase for(i=x;i<=bete;i++){ nsrc= chibrit +i; document.images[nsrc].src="gol.gif"; Fig ura 9.16 } 352 //se actualizeaza numarul de bete ramase bete=x-1; //verifica numarul de bete ra mase si //stabileste castigatorul daca este cazul if(bete<=0) { alert("Jocul s-a terminat! Ai pierdut!"); }else if(bete==1) { document.images[ chibrit1 ].src="g ol.gif"; bete=0; alert("Jocul s-a terminat!Ai Castigat!"); } else{ alert("Calcul atorul zice:\n Acum e randul meu"); //inteligenta calculatorului este aleatoare rand=Math.random(); if(rand<0.5)x=bete; else x=bete-1; for(i=x;i<=bete;i++){ nsr c= chibrit +i; document.images[nsrc].src="gol.gif"; } bete=x-1; if(bete==0) aler t("Jocul s-a terminat! Ai pierdut!"); else alert("Calculatorul zice:\n Acum e ra ndul tau!"); } } } bete=10; function actualizare() {bete=10; for(i=1;i<=bete;i++ ){ nsrc= chibrit +i; document.images[nsrc].src="chibrit.gif"; } } // --> </scrip t> </head> <body> <center> <h3>Zece bete de chibrit</h3> <table border=1> <tr><t d> <img src="chibrit.gif" name="chibrit1" border="0" width="27" height="110" onM ouseDown="AlegeChibrit(1)" loop="0"> <td> <img src="chibrit.gif" name="chibrit2" border="0" width="27" height="110" Figura 9.16 onMouseDown="AlegeChibrit(2)" lo op="0"> (continuare) 353 <td> <img src="chibrit.gif" name="chibrit3" border="0" width="27" height="110" o nMouseDown="AlegeChibrit(3)" loop="0"> <td> <img src="chibrit.gif" name="chibrit 4" border="0" width="27" height="110" onMouseDown="AlegeChibrit(4)" loop="0"> <t d> <img src="chibrit.gif" name="chibrit5" border="0" width="27" height="110" onM

ouseDown="AlegeChibrit(5)" loop="0"> <td> <img src="chibrit.gif" name="chibrit6" border="0" width="27" height="110" onMouseDown="AlegeChibrit(6)" loop="0"> <td> <img src="chibrit.gif" name="chibrit7" border="0" width="27" height="110" onMou seDown="AlegeChibrit(7)" loop="0"> <td> <img src="chibrit.gif" name="chibrit8" b order="0" width="27" height="110" onMouseDown="AlegeChibrit(8)" loop="0"> <td> < img src="chibrit.gif" name="chibrit9" border="0" width="27" height="110" onMouse Down="AlegeChibrit(9)" loop="0"> <td> <img src="chibrit.gif" name="chibrit10" bo rder="0" width="27" height="110" onMouseDown="AlegeChibrit(10)" loop="0"> </td>< tr> <tr><td>1<td>2<td>3<td>4<td>5<td>6<td>7<td>8<td>9<td>10</td></tr> </table> < form name="f1"> <p><p><input type="button" value="Joc Nou" name="Buton" onClick= "actualizare();"></p> </form> Figura 9.16 </body> (continuare) </html> Remarci Script-ul (inserat n seciunea <head> a documentului HTML) conine dou funcii: AlegeChibrit(x) i actualizare(). Funcia AlegeChibrit(x) permite juctorului s extrag u nul sau dou bee; stabilete strategia de joc a calculatorului; actualizeaz numrul de b ee rmase, stabilete ctigtorul. Argumentul x ia valori de la 1 la 10. Funcia actualizar () permite reluarea jocului la acionarea butonului Joc Nou. Gestionarii de evenim ente utilizai sunt: onMouseDown i onClick (tag-ul <input />). n figura 9.17, 9.18, 9.19 sunt prezentate secvene din timpul jocului. 354 Figura 9.17 Figura 9.18 355 Figura 9.19 Creai un rollover cu JavaScript Una din aplicaiile JavaScript de mare succes n domeniul imaginilor o constituie cr earea de rollovers (survols, n limba francez; rollovers, n limba englez). Un rollove r este o imagine folosit n general pentru navigare al crui aspect se modific atunci cnd se trece cu mouse-ul pe deasupra acesteia. Remarci Un rollover este o metod asociat unui eveniment de mouse: mouseOver, mouse Out, mouseDown, mouseUp. Exist mai multe tipuri de metode rollover: metoda rollov er pentru imagine; metoda rollover strat (layer). Va trebui s decidei singuri: ce tip de metod rollover necesit aplicaia dumneavoastr i cum dorii s-o implementai. Iat cum crem un buton IMAG1 care se afieaz normal la ncrcarea paginii i se schimb n la trecerea mouse-ului pe deasupra acestuia. 1. Introducei ntre tag-urile <head> i </head> ale documentului HTML, script-ul de prencrcare al imaginii (imag2.gif) ut ilizat n rollover (figura 9.20). 356 Figura 9.20 2. Stabilii o legtur (link) ctre o imagine (figura 9.21). Figura 9.21 3. Introducei (n tag-ul <a>) gestionarii de evenimente onMouseOver i

onMouseOut (figura 9.22). Figura 9.22 4. Testai script-ul (figura 9.23, figura 9.24). Figura 9.23 357 Figura 9.24 Remarci Nu v lsai impresionai de dimensiunea codului JavaScript, deoarece este foart e simplu! Am definit im1 ca fiind un nou obiect Image cruia i atribuim calea imag2 .gif. La trecerea mouse-ului peste butonul IMAG1, proprietatea src a imaginii ce poart numele img1 devine imag2.gif, care provoac efectul de rollover. Dac dorii s ap licai un rollover peste mai multe imagini prezentate ntr-o pagin, va trebui: S adugai noi linii de prencrcare im2=new Image; im2.src=imag3.gif; S schimbai numele imaginii respective: <img src=imag1.gif border=0 name=img2>. Aplicaii Creai acelai rollover utiliznd matricea images. n figura 9.25 este prezentat documentul HTML complet. Figura 9.25 Rezultatele execuiei sunt prezentate n figura 9.26, respectiv figura 9 .27. 358 Figura 9.26

Figura 9.27 Remarci Exist i alte tehnici de a modifica imaginile, dup cum urmeaz: afiarea unei bo rduri n jurul fiecrei imagini; afiarea unei imagini n miniatur (de exemplu, o sgeat mi alturi de imaginea propriu-zis, unde se gsete pointer-ul mouse-ului. Exist mai multe soluii de implementare a metodelor rollover pentru imagini, dar cea mai simpl est e urmtoarea: creai matricea care s conin imagini; prencrcai imaginile n matrice; cre uncie care s realizeze schimbarea imaginilor; introducei gestionarii de evenimente onMouseOver i onMouseOut.

Scriei o funcie pentru a verifica dac o imagine este complet ncrcat. n figura 9.28 est prezentat script-ul aplicaiei. Figura 9.28 Comentai urmtorul program JavaScript (figura 9.29). 359 Figura 9.29 n figura 9.30, respectiv figura 9.31 sunt prezentate rezultatele exec uiei programului JavaScript. Figura 9.30 Figura 9.31

360 Iat cum crem un mic catalog ilustrat care conine ultimele trei cri ale autorului aces tei lucrri: (X)HTML, Dreamweaver MX, XML, care au aprut n Editura Universitii din Plo ieti. Pornind de la o list ordonat ale crei elemente conin titlurile celor trei cri, s afieaz coperta nti a crii selectate trecnd cursorul pe deasupra unuia din cele trei t tluri de carte afiate (figura 9.32). Figura 9.32 Documentul complet XHTML este prezentat n figura 9.33. 361 Figura 9.33 Remarci

Funcia carte(nume,numr) conine dou argumente: numele fiierului utilizat (nume) i numru imaginii (numr). Pentru ca proporia imaginilor s fie respectat este necesar ca ele s aib aceleai dimensiuni. Afiarea imaginii (prima copert) se produce atunci cnd deplas ai mouse-ul pe linia unde se gsete numele crii i nu doar pe numele afiat al crii. Pu ita acest lucru, modificnd puin codul JavaScript. Succes! n figura 9.34 se prezint un document (X)HTML care ilustreaz tehnica rollovers-urilor. 362 Figura 9.34 Atunci cnd se ncarc acest document se obine imaginea din figura 9.35. Figura 9.35 n momentul n care plimbai mouse-ul (fr a executa clic) pe una din cele tr ei imagini (figura 9.35) obinei ceea ce este ilustrat n figura 9.36. 363

Figura 9.36 Analizai documentul XHTML i rspundei la urmtoarele ntrebri: Ce semnific n a this.id? Care este rolul gestionarilor de evenimente:

onClick=location=ldXHTML.htm onClick=location=ldDREAMWEAVER.htm onClick=location=ld Care sunt deficienele acestui document. Precizai cel puin dou!

Creai animaii simple cu JavaScript Chiar dac rollover-ul este aplicaia cea mai folosit a imaginilor dinamice, JavaScri pt poate fi de asemenea utilizat i pentru crearea animaiilor simple. Pentru animaii mai complexe va trebui ns s folosii Java sau un soft dedicat, ca de exemplu, Macrom edia Flash. Pentru a crea o animaie simpl cu JavaScript [3] se recomand parcurgerea urmtoarelor etape: salvai cadrele de animaie ntr-o matrice; prencrcai imaginile (cadr le de animaie); 364 stabilii viteza de derulare a animaiei. Pentru mai multe detalii privind crearea animaiilor simple JavaScript, consultai: Michael Moncur, JavaScript 1.5 Nouvelle edition, Campus Press, 2003, pag. 227-23 4 Michael Dreyfus, Codes en Stock JavaScript, Ed. Campus Press, 2001 Micro Appli cation, JavaScript Professionel, Paris, 2001 David Flanagan, JavaScript, La rfrenc e 4 dition, Ed. OReilly, 2002 Jean-Christophe Gigniac, Cdric Nilly, JavaScript, Micr o Application 2002, Paris, pag. 250 260 http://JavaScript.Internet.com/scrolls/a nimated-message.html http://www.wsabstract.com/cutplastejava.shtml http://hotvir

ed.lycos.com/webmonkey/reference/ JavaScript_code_library http://webopedia.Inter net.com/TERM/J/JavaScript.html http://Javascript.internet.com/message/animated-t ooltip.html http://Javascript.internet.com/page-details/delayed-gif.html Creai imagini reactive (client) cu JavaScript Imaginile reactive (imagemaps, n limba englez) reprezint un mijloc practic de simpl ificare a navigrii ntr-un site Web. Exist dou tipuri de imagini reactive: client i se rver. Zonele (cu un anume contur geometric) unei imagini reactive client se defi nesc direct n codul (X)HTML, fiecare dintre acestea jucnd rolul unui link. n consec in, acest tip de imagine map poate fi combinat cu JavaScript. n cazul unei imagini reactive server, zonele sunt definite ntr-un fiier dedicat care se afl pe server. C rearea unei imagini reactive (client) necesit urmtoarele resurse: o imagine n forma t GIF sau JPEG; un fiier (MAP) care conine zonele imaginii; atributul USEMAP. Remarci Navigatoarele recente nu afieaz descrierea unei imagini reactive n bara de stare, atunci cnd atributul href figureaz n link-uri. Dac utilizai imagini reactive c a link-uri, putei folosi gestionarul de evenimente onClick cu location.href. 365 Pentru a descrie fiecare zon a imaginii reactive va trebui s cunoatei coordonatele p unctelor care le delimiteaz. Exist numeroase programe, printre care: MapEdit sau L iveImage. Zonele imaginii reactive sunt definite cu tag-urile (X)HTML: <map> i <a rea>. Iat cum procedm pentru a crea cu limbajul JavaScript o imagine reactiv client, porn ind de la imaginea follow.jpg. n momentul n care plasai mouse-ul deasupra zonei rea ctive de form dreptunghiular decupate n imaginea follow.jpg, PETII. 1. Inserai uind semnul map (figura Figura 9.37 3. Introducei tag-ul <map name=?>, nlocuind semnul de ntrebare (?) cu numele pe care l-ai atribuit imaginii map (figura 9.38). Figura 9.38 4. Introducei, n tag-ul <area> atributele shape, target i coords (figura 9.39). Figura 9.39 5. Introducei n tag-ul <area> gestionarul de evenimente asociat onMouseOver care afieaz n bara de stare mesajul: ZIUA N CARE VIN PETII. 366 Figura 9.40 n bara de stare se va afia mesajul: ZIUA N CARE VIN imaginea follow.jpg. 2. Introducei n tag-ul <img> atributul usemap=#?, nloc de ntrebare (?) cu numele (JOHNSON) pe care dorii s-l atribuii imaginii 9.37).

6. Introducei tag-ul final </map> (figura 9.41). Figura 9.41 7. Validai documentul HTML 4 strict cu aplicaia validator. 8. Inserai codul HTML ca re afieaz icon-ul de conformitate W3C. 9. Vizualizai pagina Web ntr-un browser (figu ra 9.42). Figura 9.42 367 EXEMPLUL 9 JAVASCRIPT Vom relua n cadrul acestui exemplu problema rezervoarelor (cilindrice echilateral e), invitndu-v n cele ce urmeaz s utilizai imagini reactive client pentru generarea ra portului Situaia livrrilor. Zonele reactive (client) se refer la cele trei rezervoare (figura 9.43).

Figura 9.43 V-am pregtit i o surpriz! De aceast dat v vom lsa dumneavoastr plcerea d ealiza singuri documentaia de analiz i proiectare a programului JavaScript corespun ztoare acestui exemplu. Succes! Codificarea n limbajul JavaScript (figura 9.44) 368 <html> <head> <title>Exemplul 9</title> <script language="JavaScript"> <!--var Z = new Array("Luni","Marti","Miercuri","Joi","Vineri"); function trunchiaza(x) { var s=""+x; i=s.indexOf("."); if(i!=-1){ s=s.substring(0,i+3); } return s; Figu ra 9.44 } 369 function validate(item, min, max) { var rVal = false; var x=parseFloat(item.valu e); if(isNaN(x)) alert("Valoare gresita pentru cantitate!"); else if (x < min) a lert("Valoare gresita pentru cantitate!Valoarea trebuie >" + min); else if (x> m ax) alert("Valoare gresita pentru cantitate! Valoarea trebuie sa fie < " + max); else rVal = true; return rVal; } a=new Array(3); a[0]=new Array(5); a[1]=new Ar ray(5); a[2]=new Array(5); for(i=0;i<3;i++) for(j=0;j<5;j++) a[i][j]=0.0; var Re zWindow=null; function trimite(){ var ir=f1.Rezervor.selectedIndex; var z=f1.Zil e.selectedIndex; a[ir][z]+=parseFloat(f1.T1.value); } function afispartial(rez){ var i,j,k; //CALCUL TOTAL LIVRARI s=0.0; for(j=0;j<5;j++) s+=a[rez][j] //CALCUL MEDIE PE ZI med=s/5; //CALCUL MAX SI MIN max=a[rez][0]; min=a[rez][0]; jmax=0;j min=0; for(j=0;j<5;j++){ if(max<a[rez][j]){max=a[rez][j];jmax=j;} if(min>a[rez][ j]){min=a[rez][j];jmin=j;} } //AFISARE REZULTATE if(RezWindow!=null)RezWindow.cl ose(); RezWindow=window.open( , , toolbar=yes,scrollbars=yes,menubar=no, widt h=500,height=350 ); k=rez+1; RezWindow.document.writeln("<center><p><b>SITUATIA LIVRARILOR REZERVOR R"+k+"</B></p></center>"); Figura 9.44 RezWindow.document.wr iteln("<center><table border=1 bgcolor=#efefff><tr>"); (continuare) RezWindow.do cument.writeln("<td><b>ZIUA</b><td><b>REZERVOR R"+k+"</b></td></tr>"); 370 for(i=0;i<5;i++) { RezWindow.document.writeln("<tr><td>" + Z[i]+"</td>"); RezWin dow.document.writeln("<td>" + a[rez][i]+ "</td></tr>"); } RezWindow.document.wri teln("</table></center><p><p>"); RezWindow.document.writeln("<p><font color=gree n size=+1>Total Livrari:"+s+"</font>"); RezWindow.document.writeln("<br><font co lor=green size=+1>Media Zilnica:" + trunchiaza(med) + "</font>"); RezWindow.docu

ment.writeln("<br><font color=green>Livrarea maxima:"+max+" s-a facut in ziua de "+Z[jmax]+"</font>"); RezWindow.document.writeln("<br><font color=green>Livrare a minima:"+min+" s-a facut in ziua de "+Z[jmin]+"</font>"); RezWindow.document.w riteln("</html>"); } // --> </script> </head> <body> <center> <form name="f1"><t able border=0> <tr><td><b>REZERVORUL</b><td><b>Ziua</b> <tr><td><select size="1" name="Rezervor"> <option selected>Rezervor1</option> <option>Rezervor2</option> <option>Rezervor3</option> </select> <td> <select size="1" name="Zile"> <option >Luni</option> <option>Marti</option> <option>Miercuri</option> <option>Joi</opt ion> <option>Vineri</option> </select> <tr> <td>Cantitatea <td><input type="text " name="T1" size="7" value="0.0" onChange="validate(this,0,20);"> <tr> <td><inpu t type="button" value="Livreaza" onClick="trimite();"> </table> </center> </form > <center> <h3> Situatia Livrarilor </h3> <map name="rezervorMap"> <area name="R 1" coords="16,18,91,125" href="javascript:afispartial(0)" onMouseOver="window.st atus= Rezervorul R1 ;return true" onMouseOut="window.status= ;return true"> <a rea name="R2" coords="105,18,180,125" href="javascript:afispartial(1)" Figura 9. 44 onMouseOver="self.status= Rezervorul R2 ;return true" (continuare) onMouseOut ="self.status= ;return true"> 371 <area name="R3" coords="195,18,272,125" href="javascript:afispartial(2)" onMouse Over="window.status= Rezervorul R3 ;return true" onMouseOut="window.status= ;re turn true"> </map> <img src="rezervoare.jpg" align="top" usemap="#rezervorMap"> Figura 9.44 </body> (continuare) </html> Remarci Script-ul (inserat n seciunea <head> a documentului (X)HTML) conine funciile cunoscute din exemplele anterioare. Pentru crearea celor trei imagini reactive, corespunztoare rezervoarelor R1, R2, R3 s-a folosit imaginea rezervoare.jpg; zon ele imaginilor reactive (R1, R2, R3) au fost definite cu tag-urile (X)HTML <map> i <area>. n toate cele trei tag-uri <area> au fost definite atributele: name, coo rds, href i gestionarii de evenimente onMouseOver i onMouseOut. Tag-ul <img> conine n mod obligatoriu usemap=#rezervorMap.

n continuare, v invitm s testai script-ul, plasnd mouse-ul i executnd clic deasupra f ei zone reactive R1, R2, R3. Analizai rezultatele execuiei programului (figura 9.4 5, figura 9.46, figura 9.47). Figura 9.45 372 Figura 9.46 Figura 9.47

373 Aplicaie Realizai o pagin Web care conine o hart interactiv a Europei. Atunci cnd util zatorul plimb mouse-ul (fr a executa clic) pe una din rile Europei se vor afia pentru ra respectiv, ntr-un formular, urmtoarele informaii: ara, capitala, populaia, suprafaa moneda (figura. 9.48). Figura 9.48 Indicaii: Limitai (nu din motive politice!) numrul rilor la cel mult 12. Utilizai tagul <area> cu atributele: coords, shape, href (vezi figura 8.49) i cu gestionarii de documente: onMouseOver i onMouseOut.

Figura 9.49 Formularul nu conine nici un buton ci numai zone (5) de tip text pentru afiarea in formaiilor privind rile Europei. Aceste informaii sunt coninute n script, mai precis n

12 matrice cu urmtoarele elemente: numele rii, capitala, populaia, suprafaa, moneda ( vezi figura 9.50). Script-ul conine de asemenea i funcia afieaz(). 374 Figura 9.50 JavaScript Tem Testai-v cunotinele 1. Ce reprezint obiectul Image? 2. Care sunt proprietile i metodele obiectului Image ? 3. Care sunt gestionarii de evenimente ai obiectului Image? 4. Cum creai o inst an a unui obiect Image? 5. Ce este un rollover? 6. Care sunt resursele necesare pe ntru crearea unei imagini reactive client? 7. Poate fi plasat un rollover ntr-o i magine reactiv? 8. n figura 9.51 se prezint un document HTML care conine titlul: Ziua n care vin petii. 375 Figura 9.51 Atunci cnd se ncarc acest document HTML se obine ceea ce este ilustrat n figura 9.52.

Figura 9.52 n momentul n care plimbai mouse-ul (fr a executa clic) pe titlul afiat n p gina Web se obine ceea ce este ilustrat n figura 9.53. Figura 9.53 Ce semnific: onMouseOver=peste(follow.jpg) document.images[0].src=nume. Perfecionai acest mic program dup cum urmeaz (figura 9.54). 376 Figura 9.54 Precizai care este rolul gestionarului de evenimente onMouseOut pe ca re l-am introdus n tag-ul <h1>. 9. Care este obiectul JavaScript care reprezint a doua imagine din cadrul unei pagini Web: image[2]; images[2]; images[1]. 10.Anim aiile JavaScript par a fi puin simpliste! Pot fi create n JavaScript animaii mai com plexe? Vizitai site-urile http://Javascript.internet.com/games/terablox.htm; http://JavaScript.Internet.co m http://www.geoticies.com/Silicon Valley/7116/ http://www.serve.com/hotsyte/ ht tp://Javascript.internet.com/page-details/delayed-gif.html http://Javascript.int ernet.com/bgeffects/mouse-fireworks.html http://Javascript.internet.com/messages /elastic-bullets.html http://Javascript.internet.com/miscellaneous/image-slidesh ow.html http://Javascript.internet.com/navigation/thumbmail-navigator.html http: //Javascript.internet.com/miscellaneous/kitykitys--photo-album.html http://www.ki tykity.com/photoalbum http://Javascript.internet.com/scrolls/animated-message.ht ml http://Javascript.internet.com/bgeffects/persistent-layer.html http://Javascr ipt.internet.com/navigation/over-line-text-link.html http://www.webwizguide.info /directory/directory/asp?cat=java&PagePosition=1 Conversaia 10 Obiectele Frame i Layer

 n Obiectele Frame EXEMPLUL 10.1 JAVASCRIPT Obiectul Layer. Aplicaii EXEMPLUL 10.2 J AVASCRIPT Tem Obiectele Frame Cea mai mare parte a navigatoarelor actuale (n particular, navigatoarele recente Netscape i Microsoft) recunosc cadrele (frames, n limba englez) care permit divizar ea paginii Web n mai multe zone. n fiecare zon a paginii se poate afia un document ( X)HTML sau rezultatul unui script. Decizia de a utiliza cadre v aparine! Indiferen t dac apreciai sau nu cadrele, site-urile Web bazate pe cadre exist i vor mai exista . Din punct de vedere al programatorului JavaScript, este la fel de uor s lucrezi pe un site care conine cadre sau s lucrezi pe un site fr cadre. Atunci cnd o fereastr conine mai multe cadre, fiecare dintre ele este reprezentat n JavaScript printr-un obiect Frame. Acest obiect este echivalent cu un obiect Window atta timp ct el se rvete la manipularea cadrelor i nu a ferestrelor. Numele obiectului Frame este ace lai cu cel pe care l afectai atributului name al tag-ului <frame>. 378 Remarci: Cuvintele cheie window i self permit referirea la cadrul curent. Cuvntul cheie parent permite referirea la fereastra de nivel superior (cel mai des, fere astra principal). Fiecare din obiectele Frame ale unei ferestre este un fiu al ob iectului printe Window. Documentul (X)HTML din figura 10.1 mparte fereastra n patru zone. Dac ai inserat un script JavaScript n documentul stngasus.htm, el va face referire la documentele ca re aparin altor cadre: parent.dreaptasus, parent.stngajos etc. Cuvintele cheie window i self vor face referire la nsui cadrul stngasus. Figura 10.1 Remarc. Dac utilizai cadre situate n interiorul altor cadre (imbricate) lucrurile se complic puin: window reprezint ntotdeauna cadrul curent, parent reprezint setul de c adre (frameset) care conine cadrul curent, iar top reprezint setul de cadre princi pal care le conine pe celelalte. Matricea frames Matricea frames conine un obiect Window pentru fiecare cadru al paginii Web (vezi figura 10.2). n loc s v referii la cadrele unui document prin numele lor, utilizai matricea frames. Aceast matrice stocheaz informaiile pentru fiecare din cadrele unui document. Numrul de indice (index) al cadrelor ncepe ntotdeauna cu zero i cu primul tag <frame> al setului de cadre al documentului. Iat cum putei referi cadrele din figura 10.1 cu ajutorul matricii frames, (vezi fi gura 10.2). 379 Figura 10.2 Remarci:

Putei folosi oricare din cele dou metode de acces la elementele matricii frames (p rin numrul de index/prin nume). Dac documentul dumneavoastr conine de exemplu 13 cad re, fr ndoial este mult mai simplu s utilizai matricea frames. Dac ns, documentul co ect dou cadre, evident este mult mai bine s utilizai numele cadrelor. Iat cum creai un cadru de navigare (vezi figura 10.3) care s permit modificarea conin utului unui alt cadru. (X)HTML Dreamweaver MX XML Figura 10.3 JavaScript 1. Creai un document (X)HTML care divizeaz fereastra n dou cadre (figura 10.4). Figura 10.4 Remarci: Programul din figura 10.4 creeaz dou cadre (la stnga i la dreapta ferestrei ). Tag-urile <body> sunt nlocuite cu tag-urile <frameset>. 2. Creai documentul (X)HTML pentru cadrul din stnga, care va servi pentru navigare a n site (figura 10.5). 380 Figura 10.5 Remarci: Gestionarii de evenimente onClick se repet (cu mici modificri) pentru fie care din cele patru link-uri (vezi tag-urile <a>). Gestionarii de evenimente onC lick sunt declanai prin evenimentul click, care afieaz un document n cadrul din dreap ta. Deoarece script-ul se gsete (el nsui) ntr-un cadru, numele celuilalt cadru trebui e s fie precedat de cuvntul cheie parent. Fiecare din obiectele frame ale unei fer estre este un fiu al obiectului printe Window. Cuvintele cheie window i self permi t referirea cadrului curent. Cuvntul cheie parent permite referirea la fereastra de nivel superior (de regul fereastra principal). Utilizarea limbajului JavaScript permite modificarea simultan a coninutului mai multor cadre. 3. Testai script-ul. 3.1 Salvai documentul XHTML al cadrului de navigare sub numel e stnga.html. 3.2 Deschidei n browser documentul HTML care divizeaz fereastra n dou cadre (vezi fig ura 10.6). 381 Figura 10.6 3.3 Testai link-urile din cadrul din stnga. n figura 10.7 se prezint rezultatul exec uiei script-ului n navigatorul Internet Explorer. Figura 10.7 EXEMPLUL 10.1 JAVASCRIPT Formularea problemei Vom aborda i n cadrul acestei conversaii aceeai problem pe care am abordat-o n convers aia precedent (EXEMPLUL 9 JAVASCRIPT), cu singura deosebire (important!) c pentru af iarea rezultatelor vom folosi obiectele Frame (Rezultatele vor fi afiate ntr-un cad ru inserat n documentul curent i nu ntr-o fereastr distinct). 382

Introducerea valorilor pentru livrri se face printr-o singur zon de text (vezi EXEM PLUL 9 JavaScript, Varianta 2). Selecia rezervorului i a zilei se fac printr-o lis t de selectare. Specificaii de programare n figura 10.8 este prezentat ecranul (intrare/ieire) cu RAPORT LIVRRI REZERVOR R1. Ta bela de variabile este prezentat n figura 10.9. Figura 10.8 Tabela de variabile Variabile de intrare Rezervor: (obiect) list simpl de selecie pentru cele trei rezervoare Zile: (obiect) list simpl de opiuni pentru selecia zilei din sptmn T1: (obiect) zona de editare n se va introduce valoarea livrrilor Inputd: (obiect) frame-ul ce conine obiectele R ezervor, Zile, T1 sit: (obiect) frame ce conine zonele reactive pentru afiare Variabile de stare s: (real) folosit pentru calculul sumelor pariale pe zile rval: (logic) indic fapt ul ca valoarea introdus n zona de editare este valid sau nu x: (real) valoarea real a textului introdus n zona de editare Z: (vector) numele zilelor sptmnii jmax,jmin: (numere ntregi) pstreaz indicii livrrilor maxime i minime din matricea a

Variabile de ieire raport: (obiect) frame-ul n care se vor afia rezultatele pentru un rezervor med: ( real) folosit pentru calculul mediei zilnice pe rezervor max,min: (numere reale) pstreaz valoarea maxim i minim pentru livrri a: (matrice de numere reale) pstreaz va ile livrrilor pe zile i rezervoare Figura 10.9 383 Documentaia de proiectare Pseudocodul pentru EXEMPLUL 10.1 JAVASCRIPT este prezentat n figura 10.10. Pseudo codul EXEMPLUL10.1 BEGIN //initializeaza vectorul Z cu numele zilelor z=luni,marti,miercuri,joi, vi neri //aloca spatiu de memorie si initializeaza matricea livrarilor FOR(i=0;i<3; i++) FOR(j=0;j<5;j++) ai,j=0.0 ENDFOR ENDFOR Afiseaza pagina ce contine frame-ur i //raspunde la evenimentele generate de butonul Livreaza IF(se apasa butonul Li vreaza) DO livreaza ENDIF //raspunde la evenimentele generate de zonele reactive IF(se executa click pe zona unui rezervor) DO afispartial(rezervor) ENDIF //ras punde la evenimentele generate de zona de editare T1 IF(se paraseste zona T1) DO valideaza(T1,0,20) ENDIF END BEGIN Date intrare: rez-indicele rezervorului // c alculeaza total livrari s=0 FOR(j=0;j<5;j++) s=s+arez,j ENDFOR med=s/5 // determ inarea maximului si minimului max=arez,0 min=arez,0 jmax=0 jmin=0 FOR(j=0;j<5;j+ +) IF(max<arez,j) max=arez,j jmax=j ENDIF IF(min>ai,j) min=arez,j jmin=j ENDIF E NDFOR //afisare rezultate //scrierea rezultatelor in frame-ul report k=rez+1 rap ort.WRITE "SITUATIA REZERVORULUI R"+k raport.WRITE "ZIUA R"+k FOR(j=0;j<5;j++) r aport.WRITE zi, arez,j ENDFOR FORI FORJ FORJ FORI IFL IFL IFA IFA IFV IFV EXEMPLUL10.1 AFISPARTIAL FORS FORS FORMAXMIN IFMAX IFMAX IFMIN IFMIN FORMAXMIN FORRAP Figura 10.10 FORRAP 384 raport.WRITE "Total livrari: ",s raport.WRITE "Media: ",s raport.WRITE "Livrarea maxima: ",max,Zjmax raport.WRITE "Livrarea minima: ",min,Zjmin Figura 10.10 (co

ntinuare) AFISPARTIAL END Codificarea n limbajul JavaScript Documentul complet (X)HTML este prezentat n figura 10.11. <html> <head> <script language="JavaScript"> <!--// DEFINESTE VECTORUL CU ZILELE DIN SAPTAMANA var Z = new Array("Luni","Marti","Miercuri","Joi","Vineri"); //fu nctia de transformare intr-un sir de caractere a unui numar function trunchiaza( x){ var s=""+x; i=s.indexOf("."); if(i!=-1){ s=s.substring(0,i+3); } return s; } //VALIDAREA UNUI CAMP NUMERIC function valideaza(item, min, max) { var rVal = f alse; var x=parseFloat(item.value); if(isNaN(x)) alert("Valoare gresita pentru c antitate!"); else if (x < min) alert("Valoare gresita pentru cantitate!Valoarea trebuie >" + min); else if (x> max) alert("Valoare gresita pentru cantitate! Val oarea trebuie sa fie < " + max); else rVal = true; return rVal; } // DECLARAREA MATRICEI IN CARE SE VOR PASTRA CANTITATILE LIVRATE a=new Array(3); a[0]=new Arra y(5); a[1]=new Array(5); a[2]=new Array(5); for(i=0;i<3;i++) for(j=0;j<5;j++) a[ i][j]=0.0; //SALVAREA CAMPULUI NUMERIC DIN INPUT TEXT IN MATRICEA LIVRARILOR fun ction livreaza(){ //DETERMINA REZERVORUL Figura 10.11 var ir=inputd.f1.Rezervor. selectedIndex; //DETERMINA ZIUA 385 var z=inputd.f1.Zile.selectedIndex; //ADAUGA CANTITATEA IN MATRICEA LIVRARILOR a [ir][z]+=parseFloat(inputd.f1.T1.value); } //CALCULEAZA SI AFISEAZA LIVRARILE DI NTR-UN REZERVOR function afispartial(rez){ var i,j,k; //calcul total livrari s=0 .0; for(j=0;j<5;j++) s+=a[rez][j] //CALCUL MEDIE PE ZI med=s/5; //CALCUL MAX SI MIN max=a[rez][0]; min=a[rez][0]; jmax=0;jmin=0; for(j=0;j<5;j++){ if(max<a[rez] [j]){max=a[rez][j];jmax=j;} if(min>a[rez][j]){min=a[rez][j];jmin=j;} } //AFISARE REZULTATE k=rez+1; raport.document.open(); raport.document.writeln("<center><p> <b>RAPORT LIVRARI REZERVOR R"+k+"</b></p></center>"); raport.document.writeln("< center><table border=1 bgcolor=#efefff><tr>"); raport.document.writeln("<td><b>Z IUA</b><td><b>REZERVOR R"+k+"</b></td></tr>"); for(i=0;i<5;i++) { raport.documen t.writeln("<tr><td>" + Z[i]+"</td>"); raport.document.writeln("<td>" + a[rez][i] + "</td></tr>"); } raport.document.writeln("</table></center><p><p>"); raport.do cument.writeln("<center><p><font color=green size=+1>Total Livrari:"+s+"</font>" ); raport.document.writeln("<br><font color=green size=+1>Media Zilnica:"+trunch iaza(med)+"</font>"); raport.document.writeln("<br><font color=green>Livrarea ma xima:"+max+" s-a facut in ziua de" +Z[jmax]+"</font>"); raport.document.writeln( "<br><font color=green>Livrarea minima:"+min+" s-a facut in ziua de " +Z[jmin]+" </font>"); raport.document.writeln("</center></html>"); raport.document.close(); } // --> </script> </head> <title>Exemplul 4 utilizand frame-uri</title> </head > <frameset rows="60%,40%"> <frameset cols="30%,70%"> <frame scrolling="no" nore size src="inputdata.html" name="inputd"> <frame src="raport.html" name="raport"> </frameset> <frame scrolling="no" noresize src="situatie.html" name="sit"> Figu ra 10.11 </frameset> (continuare) </html> 386 // INPUTDATA.HTML <html> <head> </head> <body> <center> <form name="f1"> <table border=0> <tr><td><b>REZERVORUL</b><td><b>Ziua</b> <tr><td><select size="1" name ="Rezervor"> <option selected>Rezervor1</option> <option>Rezervor2</option> <opt ion>Rezervor3</option> </select> <td> <select size="1" name="Zile"> <option>Luni </option> <option>Marti</option> <option>Miercuri</option> <option>Joi</option> <option>Vineri</option> </select> <tr><td>Cantitatea <td><input type="text" name ="T1" size="7" value="0.0" onChange="parent.validate(this,0,20);"> <tr><td><inpu t type="button" value="Livreaza" onClick="parent.trimite();"> </table> </center> </form> </body> </html> //RAPORT.HTML <html> <head> </head> <body> <center><p>< b>RAPORT LIVRARI REZERVOR R1 </b></p></center> <center><table border=1 bgcolor=# efefff><tr> <td><b>ZIUA</b><td><b>REZERVOR R1</b></td></tr> <tr><td>Luni</td><td >0</td></tr> <tr><td>Marti</td><td>0</td></tr> <tr><td>Miercuri</td><td>0</td></

tr> <tr><td>Joi</td><td>0</td></tr> <tr><td>Vineri</td><td>0</td></tr> </table>< /center><p><p> <center> <p><font color=green size=+1>Total Livrari:0</font> <br> <font color=green size=+1>Media Zilnica:0 </font> <br><font color=green>Livrare a maxima: 0 s-a facut in ziua de Luni </font> <br><font color=green>Livrarea min ima: 0 s-a facut in ziua de luni </font> Figura 10.11 (continuare) </center> </h tml> 387 //SITUATIE.HTML <html> <body> <center> <h3> Afiseaza Livrari pentru Rezervoarele : </h3> <map name="rezervorMap"> <area name="R1" coords="16,18,91,125" href="jav ascript:parent.afispartial(0)" onMouseOver="window.status= Rezervorul R1 ;return true" onMouseOut="window.status= ;return true"> <area name="R2" coords="105,1 8,180,125" href="javascript:parent.afispartial(1)" onMouseOver="self.status= Rez ervorul R2 ;return true" onMouseOut="self.status= ;return true"> <area name="R 3" coords="195,18,272,125" href="javascript:parent.afispartial(2)" onMouseOver=" window.status= Rezervorul R3 ;return true" onMouseOut="window.status= ;return true"> </map> <img src="rezervoare.jpg" align="top" usemap="#rezervorMap"> Figur a 10.11 </body> (continuare) </html> Vizualizai documentul ntr-un browser i testai script-ul (vezi EXEMPLUL 9 JAVASCRIPT) . n figura 10.12 se prezint rezultatele execuiei programului JavaScript pentru un s et de date (Rezervorul 1). Figura 10.12 388 Obiectul Layer Obiectul Layer este un fiu al obiectului Document. Obiectul Layer permite limbaj ului JavaScript s acceseze straturile n interiorul documentelor. Remarc. Pentru mai multe informaii privind straturile i modul n care acestea funcione az n browser, consultai lucrrile: Liviu Dumitracu, Dreamweaver MX, Editura Universitii din Ploieti, 2003. Richard Wagn er, R.Allen Wyke, JavaScript, Editura Teora, Traducere Cora Rdulescu i Dan Paveles cu, 2002. Fia obiectului Layer este prezentat n figura 10.13. Fia obiectului Layer Obiectul printe Proprieti Document above, background, bellow, bgColor, clip.bottom, clip.height, clip.left , clip.right, clip.top, clip.width, document, left, name, pageX, pageY, parentLa yer, siblingAbove, siblingBellow, src, top, visibility, window, zIndex load(), m oveAbove(), moveBellow(), moveBy(), moveTo(), moveToAbsolute(), releaseEvents(), resizeBy(), resizeTo(), routeEvent() Metode Figura 10.13 Gestionarii de evenimente: Matricea Layers[] Matricea layers[] (document.layers[]) conine setul de straturi (layers, n limba en glez) reprezentate n pagina (X)HTML prin tag-urile <div> sau <layer>. Matricea lay ers[] este recunoscut numai de browser-ul Netscape. Remarci: n Netscape putei accesa proprietile unui strat cu ajutorul matricii layers[ ]. Numele stratului poate fi specificat prin atributul id sau name ale tag-ului div. n Netscape putei accesa proprietile unui strat imediat dup instruciunea document.layers[numestrat].

Matricea all[] Matricea all[] conine setul de straturi ale unui document (X)HTML recunoscute de Internet Explorer. Valoarea pe care o transferai pentru a

389 specifica stratul pe care dorii s l accesai nu este pstrat n atributul name al tag-ulu <div> ci n atributul <id> al aceluiai tag. Remarc. n Internet Explorer putei accesa proprietile unui strat prin intermediul matr icii style, ceea ce nseamn c sintaxa pe care o vei folosi va fi: document.all[numestr at].style. Corespondena ntre atributele HTML ale straturilor i proprietile JavaScript Un layer este un obiect plan rectangular care conine mai multe proprieti: dimensiuni, culoare, coninut i vizibilitate. O pagin Web poate conine mai multe straturi care s e pot suprapune precum straturile, parial sau total. Straturile sunt de regul obie cte statice, dar ele pot fi modificate i deplasate cu ajutorul unui script. Natur al, limbajul de script ales de Netscape este JavaScript ntruct el este creatorul l imbajului. Remarci: Straturile au fost implementate de Netscape ncepnd cu versiunea 4 a brows er-ului Netscape Navigator. Pentru gestiunea straturilor, Netscape a creat trei noi tag-uri: <LAYER> ... </LAYER>; <ILAYER> ... </ILAYER> i <NOLAYER> ... </NOLAY ER>. Cel mai important este de departe primul tag. Al doilea este o form inline iar cel de-al treilea joac acelai rol n raport cu elementul LAYER ca NOFRAMES n raport cu FRAMESET. Elementul LAYER conine 13 proprieti, dintre care cea mai mare parte au valori impli cite. nainte de a trece la corespondena: atribute HTML proprieti JavaScript vom prezenta un exemplu de declarare a unui strat (figura 10.14). Figura 10.14 390 n figura 10.15 este prezentat stratul afiat de Netscape. Figura 10.15 Pentru a putea modifica atributele elementului LAYER n vederea dinamizrii unei pag ini Web va trebui s cunoatem corespondena dintre atributele HTML ale straturilor i p roprietile JavaScript (vezi figura 10.16). Atribut HTML Proprieti JavaScript NAME ID

name Numele stratului (identic cu id). Nemodificabil. id Numele stratului (identic cu name). Nemodificabil. LEFT Coordonata X a stratului. left TOP Coordonata Y a stratului. top PAGEX pagex Coordonata X a stratului fa de document. PAGEY pagey Coordonata Y a stratului fa de document. Z-INDEX zindex Ordinea z a stratului n raport cu fiii si. VISIBILITY Figura 10.16 visibility Starea de vizibilitate a stratului. 391 BACKGROUND background Imaginea de fundal a stratului. BGCOLOR bgColor Culoarea de fundal a stratului. PARENTLAYER parentLayer Numele obiectului care conine stratul curent. SRC src

URL-ul fiierului care reprezint coninutul stratului. CLIP clip.top, clip.left, clip .right, clip.bottom, clip.width, clip.height Proprietile suprafeei decupate a stratului. ABOVE above Numele elementului HTML de deasupra stratului curent. BELOW Figura 10.16 (continuare) below Numele elementului HTML de Remarc. Pentru o mai bun HTML cu majuscule, dar ... cript se scriu ntotdeauna dedesubtul stratului curent. lizibilitate am procedat la scrierea numelor atributelor nu este obligatoriu. n schimb, numele proprietilor JavaS cu minuscule!

Metodele obiectului Layer Metodele obiectului Layer sunt prezentate n detaliu n figura 10.17. Metod Sintax load() ncarc o nou adres URL. document.layers[].load() moveAbove() document.layers[].moveAbove() Deplaseaz stratul deasupra altui strat. moveBelow() document.layers[].moveBelow() Deplaseaz stratul dedesubtul altui strat. moveBy() document.layers[].moveBy() Deplaseaz stratul ntr-o poziie specific. moveTo() Figura 10.17 document.layers[].moveTo() Deplaseaz colul din stnga-sus al ferestrei la coordonatele specificate ale ecranulu i.

392 moveToAbsolute() document.layers[].moveToAbsolute() Modific poziia stratului n pagin, conform coordonatelor specificate n pixeli. releaseEvents() document.layers[].releaseEvents() Stabilete ca stratul s elibereze evenimentele capturate de tipul specificat. resizeBy() document.layers[].resizeBy() Redimensioneaz stratul cu valorile de nlime i lime specificate. routeEvent() Figura 10.17 (continuare) document.layers[].routeEvent() Transfer un eveniment capturat prin ierarhia normal a evenimentelor. Aplicaie Analizai documentul XHTML din figura 10.18 n care s-a inserat un script ca re conine metoda moveBy(). Figura 10.18 n figura 10.19 este prezentat rezultatul execuiei programului JavaScript n navigato rul Netscape. 393 Figura 10.19 Figura 10.19 (continuare) 394 EXEMPLUL 10.2 JAVASCRIPT Formularea problemei Vom aborda i n cadrul acestei conversaii aceeai problem pe care am abordat-o n convers aia precedent, cu singura deosebire c de data acesta vom folosi pentru afiarea rezul tatelor obiectul Layer. Introducerea valorilor pentru livrri se realizeaz printr-o singur zon de text, iar selecia rezervorului i a zilei din lista de opiuni. Specificaii de programare n figura 10.20 este prezentat ecranul (intrare/ieire) n care se afieaz pagina Web. Ta bela de variabile este prezentat n figura 10.21. Figura 10.20 395 Tabela de variabile Variabile de intrare Rezervor: (obiect) lista simpla de sele cie pentru cele trei rezervoare Zile: (obiect) lista simpl de opiuni pentru selecia zilei din sptmn T1: (obiect) zona de editare n care se va introduce valoarea livrrilor a: (matrice de numere reale) pstreaz valorile livrrilor pe zile i rezervoare Figura

10.21 Variabile de stare s: (real) folosit pentru calculul sumelor pariale pe zi le rval: (logic) precizeaz dac valoarea introdus n zona de editare este valid sau nu x: (real) valoarea real a textului introdus n zona de editare Z: (vector) numele z ilelor sptmnii jmax,jmin: (numere ntregi) pstreaz indicii livrrilor maxime i minime d matricea a Variabile de ieire f2: (obiect) formular coninut n layer-ul R1 n care se vor afia rezultatele pentru un rezervor med: (real) folosit pentru calculul medie i zilnice pe rezervor max,min: (numere reale) pstreaz valoarea maxim i minim pentru l ivrri rnume,Z1, Z2, Z3, Z4, Z5, Tot, Med, emax, emin, zmax, zmin: (obiect) zone t ext pentru afiarea rezultatelor Documentaia de proiectare Pseudocodul pentru EXEMPLUL 10.2 JAVASCRIPT este prezentat n figura 10.22. Pseudo codul EXEMPLUL10.2 BEGIN //initializeaza vectorul Z cu numele zilelor z=luni,marti,miercuri,joi vineri // aloca spatiu de memorie si //initializeaza matricea livrarilor FOR(i=0;i<3;i++) FOR(j=0;j<5;j++) ai,j=0.0 ENDFOR ENDFOR Afiseaza pagina ce contine layer R2 //ra spunde la evenimentele generate de butonul Livreaza IF(se apasa butonul Livreaza ) DO livreaza ENDIF //raspunde la evenimentele generate zonele reactive IF(curso r mouse pe zona unui rezervor) DO afispartial(rezervor) ENDIF //raspunde la even imentele generate de zona de editare T1 IF(se paraseste zona T1) DO valideaza(T1 ,0,20) ENDIF Date intrare: rez-indicele rezervorului // calculeaza total livrari s=0 FOR(j=0;j<5;j++) s=s+arez,j ENDFOR FORI FORJ FORJ FORI IFL IFL IFAFIS IFAFIS IFVALID IFVALID EXEMPLUL10.2 END AFISPARTIAL BEGIN FORS Figura 10.22 FORS 396 med=s/5 // determinarea maximului si minimului max=arez,0 min=arez,0 jmax=0 jmin =0 FOR(j=0;j<5;j++) IF(max<arez,j) max=arez,j jmax=j ENDIF IF(min>ai,j) min=arez ,j jmin=j ENDIF ENDFOR //afisare rezultate //depune rezultate in zonele din laye rul R1 k=rez+1 f2.rnume.value="R"+k; f2.Z1.value=a[rez][0]; f2.Z2.value=a[rez][1 ]; f2.Z3.value=a[rez][2]; f2.Z4.value=a[rez][3]; f2.Z5.value=a[rez][4]; f2.Tot.v alue=s; f2.Med.value=trunchiaza(med); f2.emax.value=max; f2.zmax.value=Z[jmax]; f2.emin.value=min; f2.zmin.value=Z[jmin]; END //Afiseaza layerul cu rezultate BE GIN R1.style.visibility = "visible" END // Ascunde layerul cu rezultate BEGIN R1 .style.visibility = "hidden" END FORMAXMIN IFMAX IFMAX IFMIN IFMIN FORMAXMIN AFISPARTIAL ARATA ARATA ASCUNDE Figura 10.22 (continuare) ASCUNDE Codificarea n limbajul JavaScript Documentul complet (X)HTML este prezentat n figura 10.23.

<html> <head> <title>Exemplul 10.2</title> <script language=JavaScript> <!--var Z = new Array(Luni,Marti,Miercuri,Joi,Vineri); function trunchiaza(x) { var s=+x; i ; if(i!=-1){ s=s.substring(0,i+3); Figura 10.23 } 397 return s; } function validate(item, min, max) { var rVal = false; var x=parseFlo at(item.value); if(isNaN(x)) alert(Valoare gresita pentru cantitate!); else if (x

< min) alert(Valoare gresita pentru cantitate!Valoarea trebuie > + min); else if ( x> max) alert(Valoare gresita pentru cantitate! Valoarea trebuie sa fie < + max); else rVal = true; return rVal; } a=new Array(3); a[0]=new Array(5); a[1]=new Ar ray(5); a[2]=new Array(5); for(i=0;i<3;i++) for(j=0;j<5;j++) a[i][j]=0.0; functi on trimite() { var ir=f1.Rezervor.selectedIndex; var z=f1.Zile.selectedIndex; a[ ir][z]+=parseFloat(f1.T1.value); } function afispartial(rez) { var i,j,k; //CALC UL TOTAL LIVRARI s=0.0; for(j=0;j<5;j++) s+=a[rez][j] //calcul medie pe zi med=s /5; //calcul max si min max=a[rez][0]; min=a[rez][0]; jmax=0;jmin=0; for(j=0;j<5 ;j++){ if(max<a[rez][j]){max=a[rez][j];jmax=j;} if(min>a[rez][j]){min=a[rez][j]; jmin=j;} } //AFISARE REZULTATE k=rez+1; f2.rnume.value="R"+k; document.f2.Z1.val ue=a[rez][0]; document.f2.Z2.value=a[rez][1]; Figura 10.23 document.f2.Z3.value= a[rez][2]; (continuare) document.f2.Z4.value=a[rez][3]; 398 document.f2.Z5.value=a[rez][4]; document.f2.Tot.value=s; document.f2.Med.value=t runchiaza(med); document.f2.emax.value=max; document.f2.zmax.value=Z[jmax]; docu ment.f2.emin.value=min; document.f2.zmin.value=Z[jmin]; } function arata() { doc ument.all[ R1 ].style.visibility = "visible"; } function ascunde() { document.al l[ R1 ].style.visibility = "hidden"; } // --> </script> </head> <body> <center> <form name="f1"> <table border=0> <tr><td><b>REZERVORUL</b><td><b>Ziua</b> <tr>< td><select size="1" name="Rezervor"> <option selected>Rezervor1</option> <option >Rezervor2</option> <option>Rezervor3</option> </select> <td> <select size="1" n ame="Zile"> <option>Luni</option> <option>Marti</option> <option>Miercuri</optio n> <option>Joi</option> <option>Vineri</option> </select> <tr> <td>Cantitatea <t d><input type="text" name="T1" size="7" value="0.0" onChange="validate(this,0,20 );"> <tr> <td><input type="button" value="Livreaza" onClick="trimite();"> </tabl e> </center> </form> <h3>Situatia Livrarilor</h3> <table> <tr><td><a href="javas cript:void(0)" onMouseOver="afispartial(0);arata();" onMouseOut="ascunde( R1 );" > Rezervor R1</a> <tr><td><a href="javascript:void(0)" onMouseOver="afispartial( 1);arata();" onMouseOut="ascunde();">Rezervor R2 <tr><td><a href="javascript:voi d(0)" onMouseOver="afispartial(2);arata();" Figura 10.23 onMouseOut="ascunde();" >Rezervor R3 (continuare) 399 </tr> </table> <div id="r1" style="position: absolute;top: 120px;z-index: 2; vis ibility: hidden; top:190; left: 120px;"> <form name = "f2"> <center><p><b>SITUAT IA LIVRARILOR REZERVOR <input type="text" name="rnume" size="2"></b></p></center > <center><table border=1 bgcolor=#efefff><tr> <td><b>ZIUA</b><td><b>Livrare</b> </td></tr> <tr><td>Luni</td><td><input type="text" name="Z1" size="7" value="0.0 "></td></tr> <tr><td>Marti</td><td><input type="text" name="Z2" size="7" value=" 0.0"></td></tr> <tr><td>Miercuri</td><td><input type="text" name="Z3" size="7" v alue="0.0"></td></tr> <tr><td>Joi</td><td><input type="text" name="Z4" size="7" value="0.0"></td></tr> <tr><td>Vineri</td><td><input type="text" name="Z5" size= "7" value="0.0"></td></tr> </table></center><p><p> <center> <table bgcolor=#efef ff> <tr><td><font color=green size=+1>Total Livrari</font><td><input type="text" name="Tot" size="7" value="0.0"><tr> <tr><td><font color=green size=+1>Media Zi lnica</font><td><input type="text" name="Med" size="7" value="0.0"> </table> <ta ble bgcolor=#efefff> <tr><td><font color=green>Livrarea maxima:</font><td> <inpu t type="text" name="emax" size="7" value="0.0"> <td> <input type="text" name="zm ax" size="7" value="Luni"> <tr><td><font color=green>Livrarea minima:</font> <td ><input type="text" name="emin" size="7" value="0.0"> <td> <input type="text" na me="zmin" size="7" value="Luni"> </table> </form> </div> Figura 10.23 </body> (c ontinuare) </html> Vizualizai documentul ntr-un browser i testai script-ul numai n In ternet Explorer. Se introduc livrrile; se poziioneaz mouse-ul deasupra legturii: Rez ervor R1/ Rezervor R2/ Rezervor R3. n figura 10.24 se prezint rezultatele execuiei programului JavaScript pentru un set de date.

400 Figura 10.24 401 JavaScript Tem Testai-v cunotinele 1. Cnd utilizai obiectele Frame? 2. Care este rolul obiectului Layer? 3. Care sunt proprietile obiectului Layer? 4. Care sunt metodele obiectului Layer? Vizitai site-urile http://Javascript.internet.com/messages/description-layer.htm; http://Javascript .internet.com/bgeffects/floating-transparent-slideshow.html http://Javascript.in ternet.com/bgeffects/write-layer.html http://www.dannyg.com/examples/ol2/index.h tm http://www.dannyg.com/examples/dh2/index.htm Conversaia 11 Depanarea aplicaiilor JavaScript n aceast conversaie: Tipuri de erori JavaScript. Aplicaii Tehnici de depanare a script-urilor Instrume nte pentru depanarea script-urilor. Aplicaii Instruciunile throw i try catch. Aplic aii Tem

Evitai erorile frecvente JavaScript Trebuie s recunoatei, chiar dac nu v face plcere c, nu de puine ori, dar mai ales atu cnd ai mrit gradul de complexitate al aplicaiilor JavaScript ai fcut i greeli! Est mal s fie aa! n aceast conversaie, ne vom apropia cu respect fa de erorile curente Jav Script, vom ncerca o clasificare a acestora urmnd ca apoi s precizm regulile pentru evitarea acestor erori frecvente JavaScript. De asemenea, nu vor lipsi din preze ntarea noastr nici tehnicile i instrumentele de depanare folosite curent n activita tea de testare i depanare a programelor JavaScript. Tipuri de erori JavaScript Fiecare dintre noi poate comite erori particulare la scrierea unui program JavaS cript, dar foarte multe dintre acestea sunt curente. 404 Erorile JavaScript sunt identificate de browser la ncrcarea paginii Web. Ele pot f i clasificate n urmtoarele categorii: erori de sintax; erori de logic; erori generat e de incompatibilitatea ntre navigatoare. Erori de sintax Erorile de sintax JavaScript sunt erorile cele mai frecvente i cele mai uor de core ctat. De cele mai multe ori, interpretorul JavaScript identific corect sursa eror ilor n programele pe care le-ai realizat, dar sunt i cazuri cnd lucrurile nu stau ch iar aa! n general, erorile de sintax provin din: greeli de tastare confuzia ntre maju scule i minuscule; inversarea literelor; greeli de punctuaie tag-uri i paranteze orf eline; ghilimele i apostrofuri plasate greit; greeli de plasare a instruciunilor Jav aScript confuzia ntre irurile de caractere i numere numerele sunt tratate ca iruri d e caractere; irurile de caractere sunt tratate ca numere.

Aplicaie Urmtoarele script-uri conin erori de sintax, dup cum urmeaz: greeli de tastar , greeli de punctuaie figura 11.1, figura 11.2, figura 11.3, figura 11.4, figura 1 1.5, figura 11.6, figura 11.7, figura 11.8, figura 11.9 greeli de plasare a instr uciunilor JavaScript figura 11.10, figura 11.11, figura 11.12, figura 11.13, figu ra 11.14 greeli de tratare a irurilor de caractere i a numerelor figura 11.15, figu ra 11.16, figura 11.17 405 Identificai i corectai erorile de sintax din toate aceste script-uri.

<script> document.write (<font size=+5>); document.write (La revedere! x=8 y=3 z=120; document.write (La revedere!+<br>); </script> <script> DOCUMENT.write (S nu uitai s fi fericii!); Document.Write (S nu uitai s fii fericii!); Document.WRITE (S nu uita ii!); </script> <script> Salut=ir; Figura 11.3 var Salut=ir_1; </script> <script> Figura 11.4 Figura 11.1 Figura 11.2

onClick=alert(calculeaz); onClick=alert(Afieaz); </script> <script> a=new Array; b=Arr y(5); c=[2,5,7; </script> <script> if (a==10); alert (a=10); if (b==5 alert (b=5); i f (c==7), alert (c=7); if (d=8) alert (d=8); if (m=7) this alert (m=7); Figura 11.5 Figura 11.6

406 <script> if (c=3) alert (c=3) else; document.write (c!=3); if (d=7) { alert (d=7) } el se (document.write (EROARE); if (r=33) alert (FELICITRI!) else document.write (EROARE /script> <script> while (i<=7);{} document.writeln(i); ++i; while (j<=9; documen t.writeln(j) { ++j; } </script> <script> do while (i<7) { } alert (La revedere!); } do { while (i<10) alert (Bucla do while!); } do { alert (FATALITATE!); while (i<7) Figura 11.9 Figura 11.7 Figura 11.8 } </script> <script> for (var i=0, i<13, ++i) alert (La muli ani frumoi!); for { ale rt (La revedere!); } while (var i=0; i<13; ++i) for (i=0; i<7); alert (La revedere!) ; ++i; </script> Figura 11.10 <script> s=O; //iniializare cu litera O! for (i=0; i<=10; i++) { s=s+i; Figura 11 .11 } </script> 407 <script> s=0; for (i=0; I<=10; i++) { s=s+i; } Figura 11.12 </script> } <script> for (i=0; i<=10; i++) { p_2=i*i; p_3=i*i*i; document.write (p_2); docum ent.write (p_3); <script> s=0; for (i=0; i<=10; ++i++) { s=s+i; } write(s); </sc

ript> Figura 11.13 Figura 11.14 <script> function demo (Valoare) { document.write (valoare.bold()+<br/>) } </scrip t> </head> <body> <form> <input type=button value=BOLD onClick=demo(3.14)> </form> Fig ura 11.15 </body> </html> <html> <head> <title> aplicaie </title> <script> functi on test (valoare) { alert (Valoare) } </script> function adunare (unu, doi) { re turn unu+doi } </head> Figura 11.16 </body> </html>

408 <script> function TVA (valoare) { return valoare*0.19 } </script> </head> <body> <form> <input type=button value=calcul TVA onClick=alert (TVA:+TVA(treisprezece))> > Figura 11.17 </body> </html>

Erori de logic Erorile de logic se genereaz atunci cnd nu se obin rezultatele scontate! Dei codul su rs JavaScript este corect din punct de vedere sintactic, dei nu sunt generate eror i n timpul execuiei programului (apeluri de funcii incorecte; atribuiri de valori p entru variabile nedeclarate; imposibiliti aritmetice mprire la zero etc.), totui prog amul conine erori de logic (semantice)! Identificarea erorilor de logic constituie o piatr grea de ncercare pentru nceptori, dar nu trebuie s disperai! Foarte multe eror i de logic sunt generate de o analiz superficial a aplicaiei, o proiectare defectuoa s a programului JavaScript, i ca urmare de un cod surs JavaScript incorect! Aplicaie Identificai i corectai erorile de logic din urmtoarele script-uri (vezi figur ile 11.18, 11.19, 11.20, 11.21). <script> stud=parseInt (prompt(Introducei numrul de studeni, 0)); teste=parseInt (pro mpt(Introducei numrul de teste, 0)); for (i=1; i<=stud; i++) { nt=0; media=0; for (j =1; j<=teste; j++) { nota=parseInt (rezultate[i][j]); if(nota) { media+=nota; } } media=media/nt; Figura 11.18 media=Math.flor(media*100)/100; }

409 Remarci: Aplicaia ilustreaz o eroare generat n timpul execuiei script-ului, datorat de o mprire la zero: media=media/nt unde, nt=0. Corectai eroarea, introducnd n instruciu ea if, instruciunea nt++ (figura 11.19). nt=0; media=0; for (j=1; j<=teste; j++){ nota=parseInt (rezultate [i][j]) ; if n ota { media+=nota; nt++; } } Figura 11.19 media=media/nt; } <script> //Conversat ia 3 function rotunjeste (x) { } //Calculul mediilor pe zile //Calculul mediilor pe rezervoare d=new Array (4); st=0; for (i=0; i<3; i++) { s=0; for (j=0; j<5; j++) { s=s+a[i][j]; st=st+a[i][j]; } d[i]=s/5; } Figura 11.20 d[3]=st/14; Remarci: Eroarea de logic provine de la numitorul fraciei, din enunul de atribuire d[3]=st/14; Enunul trebuie corectat, dup cum urmeaz: d[3]=st/15; De ce 15? Rspunsul este simplu: 5 zile (luni, mari, miercuri, joi, vineri) * 3 rezervoare (R1, R2, R 3), (vezi Conversaia 3). <script> var Constant=13; i=7; for (i<=7; i>0; i--) { document.write (i+++Constant+=+ (i+Constant)+<br>); } </script> Figura 11.21 410 Remarci: Rezultatele afiate (vezi figura 11.22) sunt incorecte, chiar dac execuia s -a ncheiat fr incidente.

Figura 11.22 JavaScript evalueaz rezultatul expresiei (i+Constant) ca ir i concateneaz cei doi op eranzi.

Erori generate de incompatibilitatea ntre navigatoare Nimic nu este mai neplcut dect s constai c dup ce ai reuit s creezi (cu efort!) scrip ri pe care le consideri nemaipomenite, s primeti ntr-o bun zi un mesaj din partea un ui vizitator care s-i semnaleze faptul c script-urile tale nu merg cu navigatorul ace lui vizitator. Nu uitai c exist un turn Babel al navigatoarelor! Morala: testai scri pt-urile dumneavoastr cu mai multe browser-e, nainte de a le plasa pe server-ul We b; consultai manualele de utilizare a celor mai importante browser-e: http://deve loper.netscape.com/docs/manuals/jsref/ http://msdn.microsoft.com/scripting/jsscr ipting/jsscript/ default.htm detectai tipul de navigator utilizat de ctre vizitato rii dumneavoastr. 411 Tehnici de depanare a script-urilor n vremurile mai de demult programatorii ncepeau depanarea prin a desena scheme log ice complicate pentru a urmri secvenial, logica programului. n prezent, schemele lo gice au fost nlocuite cu pseudocodul, care este o combinaie de JavaScript i limbaj natural structurat. Acest mod de descriere a unui algoritm s-a dovedit a fi indi spensabil atunci cnd dorii s localizai zona n care ar putea fi eroarea generat. Utilizai comentariile Pentru a v crea primele reflexe JavaScript inserai ct mai multe comentarii n scripturile dumneavoastr. Observaie. Comentariile JavaScript (// sau /* i */) au fost prezentate n Conversaia 2). Pentru a elimina anumite poriuni din codul JavaScript (pn la eliminarea erorilor) u tilizai comentariile conform procedurii de mai jos [1]: transformai n comentariu un a sau mai multe linii ale programului; salvai programul; rencrcai pagina Web n browse r; analizai rezultatul (efectul); modificai codul surs sau transformai n comentariu m ai multe linii de cod; repetai aceast procedur pn cnd ai eliminat eroarea. Afiai valorile variabilelor O alt tehnic de depanare frecvent folosit este aceea de a aduga instruciuni JavaScrip t pentru a putea cunoate strile script-ului. n acest sens, utilizai metoda alert() p entru a: afia valorile variabilelor, matricelor i valorile returnate de funcii; afia rezultatele expresiilor. 412 De asemenea, putei afia mesaje n bara de stare cu ajutorul proprietii status. Putei de asemenea afia informaii din procesul de depanare, ntr-o alt fereastr a naviga torului sau ntr-un cadru anume. n anumite cazuri, folosii document.write, dar atenie (!), aceast metod nu funcioneaz dect atunci cnd documentul a fost complet ncrcat! Descompunei script-urile complexe n mai multe funcii Pentru a mri gradul de reutilizare a codului JavaScript este bine s limitai dimensi unea funciilor pe care urmeaz s le creai. Cu ct dimensiunile unei funcii sunt mai mici cu att mai mult cresc ansele de reutilizare a acesteia n diferite zone ale program ului.

Verificai documentul (X)HTML Nu trebuie s uitai c JavaScript nu este singurul limbaj pe care trebuie s-l utilizai; el interacioneaz de obicei cu codul surs (X)HTML. Morala este urmtoarea: asigurai-v c

documentul (X)HTML nu conine erori! Este foarte simplu de a comite erori n documentul (X)HTML care conine script-ul. A uita tag-ul de nchidere </table> sau </script> este o eroare frecvent (X)HTML. Dei (X)HTML nu reprezint obiectul de studiu al nostru (vezi L. Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003) este bine s tii c o eroare (X)HTML poate genera erori n programul JavaScript.

Verificai codul JavaScript Atribuire i egalitate. n JavaScript una din erorile cele mai frecvente comise de ct re nceptori este confuzia ntre operatorul de afectare (=) i operatorul de egalitate (==). Aceste erori sunt cteodat dificil de identificat n msura n care ele nu genereaz totdeauna un mesaj de eroare.

413 Dac nu tii ce operator s folosii, amintii-v simplu c = servete la schimbarea valor ariabile, iar == servete la compararea a dou valori. Iat o instruciune eronat (figura 1.23). <script> Figura 11.23 if (x=7) alert (La revedere!); </script> Aceast instruciune pare logic la prima veder e, dar x=7 va avea ca efect atribuirea valorii 7 variabilei x, i nu compararea ce lor dou. Netscape detecteaz de cele mai multe ori acest tip de eroare i afieaz un mes aj la consol. Eroarea invers (== n loc de =) nu va fi niciodat detectat! Variabile gl obale i locale. O alt eroare frecvent este confuzia ntre variabilele globale i locale , atunci cnd se dorete de exemplu a utiliza n exteriorul unei funcii o variabil care a fost declarat n interiorul unei funcii. Remarc. Diferena dintre variabilele locale i globale este explicat n Conversaia 2. Facei referiri corecte la obiecte. Nu de puine ori se fac referiri la obiecte n mod incorect. Este important de a utiliza numele exacte ale obiectelor i de a numi e xplicit prinii unui obiect. Astfel, este posibil de a ne referi la metoda window.a lert scriind simplu alert. Dar sunt i cazuri cnd utilizarea lui window.alert este obligatorie. O alt eroare frecvent const n neglijarea utilizrii numelui obiectului Document, scriind de exemplu write n loc de document.write.

Instrumente pentru depanarea script-urilor Depanarea codului surs ocup un loc deosebit de important n dezvoltarea aplicaiilor J avaScript. Dac ai verificat absena erorilor clasice n script-urile dumneavoastr, care otui nu funcioneaz este momentul s trecei la depanare, adic la cutarea i eliminarea e ilor din program, utiliznd instrumentele simple de depanare pe care le prezentm n c ontinuare. 414 Consola JavaScript Primul lucru pe care trebuie s-l facei atunci cnd script-ul dumneavoastr nu funcionea z este consultarea mesajelor de erori afiate. n Netscape, ncepnd cu versiunea 4.5, me sajele de eroare nu se afieaz direct, ele fiind nregistrate n consola JavaScript. Ia t cum procedm pentru a accesa consola JavaScript. 1. Introducei JavaScript n cmpul Ad dress (figura 11.24). Figura 11.24 sau,

2. Executai clic pe Tools Web Development JavaScript Console (figura 11.25). Figura 11.25 Remarc. Consola JavaScript afieaz ultimele mesaje de eroare (figura 11.26). Figura 11.26 Consola JavaScript nu permite numai vizualizarea erorilor, ea permite de asemene a introducerea unei instruciuni/expresii, pentru a vedea apoi rezultatul. 415 Aceast funcie este util pentru a verifica existena erorilor de sintax n liniile de cod ale script-ului dumneavoastr. Afiarea Internet re. Iat clic pe mesajelor de eroare cu Internet Explorer Explorer i versiunile mai recente nu afieaz n mod implicit mesajele de eroa cum procedm pentru a afia mesajele de eroare n Internet Explorer. 1. Executai Tools Internet Options Advanced (figura 11.27).

Figura 11.27 2. Dezactivai Disable script debugging i activai opiunea Display a notification abou t every script error (figura 11.28). 416 Figura 11.28 Figura 11.29 417 Remarci: Dac nu ai activat afiarea mesajelor de erori, Internet Explorer afieaz n bara de stare un icon atunci cnd se genereaz o eroare. Executai dublu clic pe acest ico n pentru a afia mesajul de eroare (figura 11.29). Dup cum ai putut constata i Micros oft dispune de un instrument de depanare la fel de eficient ca i consola Netscape . Indiferent de preferinele dumneavoastr, testai script-urile cu cele dou navigatoar e.

Alte instrumente de depanare Mesajele de avertizare (vezi metoda alert()) i puin fler v pot ajuta s gsii cu uurin a unei erori ntr-un script simplu dar aceste metode sunt insuficiente pentru depa narea script-urilor de dimensiuni mari. n consecin, v recomandm s utilizai unul din in trumentele specializate, prezentate mai jos: W3C validator, instrument de depana re a documentelor (X)HTML, care poate fi descrcat gratuit, de la adresa: http://v alidator.W3.org/ Remarc. Consultai lucrarea L. Dumitracu (X)HTML, Editura Universitii din Ploieti 2003. Netscape JavaScript Debugger, instrument de depanare a aplicaiilor JavaScript, ca re poate fi descrcat gratuit, de la adresa: http://developer.netscape.com/softwar e/jsdebug.html sau, http://www.mozilla.org/projector/venkman/ Remarc. Principalele caracteristici [1] ale instrumentului Netscape JavaScript De bugger sunt: fereastra Source View; ntrerupere; puncte de ntrerupere; parcurgerea

pas cu pas a codului surs; omiterea liniilor din procedurile apelate; parcurgerea liniilor din procedurile apelate; fereastra Console; Object Inspector; fereastr a de dialog Error Reporter. Microsoft Script Debugger (MSSD), instrument de depanare a script-urilor, parte integrant din Internet Explorer, care poate fi descrcat gratuit, de la adresa: htt p://msdn.microsoft.com/library/en-us/sdbug/html/sdbug_1.asp Remarc. Principalele caracteristici [1] ale instrumentului Microsoft Script Debug ger sunt: imagine dinamic a structurii (X)HTML; integrarea mai multor limbaje (Ja vaScript, VBScript i Java din acelai document); puncte de ntrerupere; parcurgerea p as cu pas a codului surs; omiterea liniilor din procedurile apelate; parcurgerea liniilor din procedurile apelate; stiv de apeluri integrat; fereastra de expresii evaluate imediat. Editoarele de text i de (X)HTML sunt foarte bune instrumente pentru procesarea de baz; ele v pot de asemenea asista n timpul depanrii, 418 afind numerele de linii i punnd n relief tag-urile corecte cu ajutorul codurilor de c ulori. Aplicaie Scriei un program JavaScript care calculeaz i afieaz determinantul unei matri ce de dimensiune 3*3. Indicaie. a b d e g h c f = a*(e*if*h)b*(d*if*g)+c*(d*he*g) i Iat cum procedm pentru a scrie programul JavaScript care calculeaz i 1 2 3 afieaz determinantul matricei 4 5 6 . 7 8 9 1. Creai documentul (X)HTML (figura 11.30). Figura 11.30 2. Plasai script-ul de calcul al determinantului n documentul (X)HTML (figura 11.3 1). 419 Figura 11.31 3. Validai n figura documentul (X)HTML cu aplicaia validator (http://validator.w3.org). 11.32 este prezentat rezultatul validrii obinut cu apli caia validator.

Figura 11.32 420 Remarc. Nimic nu este perfect! Ai identificat eroarea? Dei l pronun bine pe r, n loc d e r am tastat l (</sclipt>). Se ntmpl, nu-i aa! Corectai </script>! 4. Corectai eroarea i validai documentul (X)HTML cu aplicaia validator (http://validator.w3.org), figura 11.33. Figura 11.33 5. Inserai codul HTML care afieaz icon-ul de conformitate (figura 11.34). Figura 11.34 6. Vizualizai pagina Web ntr-un browser (Internet Explorer), figura 11.35. 421 Figura 11.35 Remarc. Internet Explorer afieaz icon-ul de conformitate la baza paginii. 7. Testai script-ul (figura 11.36). Figura 11.36 Instruciunile throw i try catch Instruciunea throw genereaz o eroare. Un bloc try conine instruciuni JavaScript; la apariia unei erori, programul execut blocul catch. Instruciunea throw Sintaxa instruciunii throw este prezentat n figura 11.37. Instruciune Figura 11.37 throw Sintax throw mesaj eroare Remarc. Instruciunea throw este utilizat frecvent ntr-o instruciune try catch; ea tra nsfer eroarea blocului catch.

422 Iat cum procedm pentru a genera dou mesaje de eroare: Eroare 1, Eroare 2 n situaia numrul de rezervoare cilindrice echilaterale care a fost introdus de la tastatur e ste zero, respectiv negativ (vezi EXEMPLELE JAVASCRIPT). n figura 11.38 este prez entat script-ul aplicaiei. <script> try { n=prompt (Introducei numrul de rezervoare (n),0); if (n==0) throw Eroare 1 else if (n<0> throw Eroare 2 } catch (er) { if (er==E roare 1) alert (Eroare 1 numr rezervoare=0) if (er==Eroare 2) alert(Eroare 2 numr oare negativ) } Figura 11.38 </script> Comentarii: Programul execut blocul try. n situaia n care n nu este egal cu zero i ni ci negativ, nu se genereaz nici o eroare iar blocul catch nu este executat. Pentr u utilizator nu se ntmpl absolut nimic. n cazul n care valoarea variabilei n a fost f ixat la 0 n cursul instruciunilor executate anterior, eroarea Eroare 1 este generat (a ceast eroare este de acelai tip cu erorile de sintax). Programul prsete blocul try i e ecut blocul catch, furnizndu-i ca parametru tipul de eroare returnat prin throw. n definitiv, el afieaz un mesaj alert(). Instruciunea try catch Try catch servete la testarea unei poriuni de cod JavaScript i la depistarea eventualelor erori. Ea este alctuit din trei blocuri: try, catch i finally. Sintaxa instruciunii este prezentat n figura 11.39. Instruciune Sintax try ... catch try { cod1 } catch (Eroare) { cod2 } finally { cod3 } Figura 11.39 423 Remarci: Try conine instruciuni (cod1) JavaScript care ar putea fi sursa problemei. n cazul apariiei unei erori, script-ul sare imediat n blocul catch transmindu-i ca parametru obiectul Error generat. Dac instruciunile din blocul try nu depisteaz nici o eroar e, script-ul trece imediat la blocul finally, evitnd blocul catch. Iat cum calculm aria unui rezervor sferic ( a = 4R 2 ) cu raza de 3m utiliznd funcia intern eval(). Dac eval() recunoate instruciunea JavaScript a=4*Math.PI*Math.pow(3,2) atunci ea evalueaz textul primit ca argument i returneaz rezultatul. n caz contrar, navigatorul afieaz un mesaj de eroare . n figura 11.40 este prezentat script-ul aplicaiei. <script> try { a=prompt (Intro ducei a=4*Math.PI*Math.pow(3,2),); aeval=eval(a); alert (Aria rezervorului sferic cu raza de 3m este:+aeval); } catch(err) { if (err.name==SyntaxError) alert (Eroare de sintax!) else alert (Expresia nu poate fi evaluat) Figura 11.40 } </script> Comentarii:

try ateapt o eroare! eval() accept un ir de instruciuni JavaScript i l evalueaz ca cod surs. Dac utilizatorul introduce a=4*Math.PI*Math.pow(3,2), JavaScript poate evalua expresia i va afia 113.097. Dac utilizatorul introduce a=4*Math.PI*pow(3,2)+, spunem c avem de-a face cu o eroare de sintax. n sfrit, dac utilizatorul introduce Dro py, JavaScript ncearc s evalueze valoarea variabilei Droopy, care nu exist. Nu este v orba de o eroare de sintax ci de o eroare de referin. Expresia nu poate fi evaluat se va afia n acest caz pe ecran. JavaScript recunoate ase tipuri de erori (vezi figura 11.41). Numele erorii Descriere

Utilizare greit a metodei eval() O valoare numeric este foarte important Referin la o variabil, sau referin necunoscut sau invalid Eroare de sintax Tipul de variabil este g eit Utilizare greit a URL-ului EvalError RangeError ReferenceError SyntaxError TypeError Figura 11.41 URLError Remarc. Nu uitai c i dumneavoastr putei genera cu throw propriile erori. Succes! 424 JavaScript Tem

Testai-v cunotinele 1. Dac la crearea unui script, comitei greeli de tastare, ce tip de eroare este gen erat? eroare de sintax eroare de logic eroare de intrare/ieire 2. De regul, greelile de punctuaie care se comit la crearea unui script sunt: confuzia ntre majuscule i m inuscule paranteze orfeline inversarea literelor 3. Foarte multe erori de logic s unt generate de: o proiectare defectuoas a programului JavaScript confuzia ntre iru rile de caractere i numere greeli de plasare a instruciunilor JavaScript 4. Inserar ea comentariilor n programele JavaScript contribuie la: crearea unor reflexe Java Script eliminarea erorilor de sintax eliminarea erorilor de logic 5. n JavaScript u na din erorile cele mai frecvente comise de nceptori este confuzia dintre: operato rul de atribuire i operatorul de egalitate operatorul == i operatorul === operatorul | operatorul && 6. Consola JavaScript este: un instrument simplu pentru afiarea mesa jelor de eroare cu Netscape un instrument simplu pentru afiarea mesajelor de eroa re cu Internet Explorer un buton ncastrat 7. W3C validator este un instrument de depanare a documentelor: (X)HTML XML JavaScript 425 8. Instruciunea throw genereaz: o eroare un tabel un formular 9. JavaScript recuno ate urmtoarele tipuri de erori: EvalError SintaxError TypeError FormatError LogicalError Vizitai site-urile http://developer.netscape.com/docs/manuals/jsref/objintro.htm http://msdn.micros oft.com/scripting/jsscript/default.htm Conversaia 12 Crearea obiectelor personalizate n aceast conversaie: Utilizarea obiectelor personalizate pentru simplificarea script-urilor Definii un obiect Definii o metod pentru un obiect Creai o instan a unui obiect Aplicaii EXEMPLU L 12 JAVASCRIPT Tem

Utilizarea obiectelor personalizate pentru simplificarea script-urilor Fr s greim, putem afirma c avei deja o experien (un background) n utilizarea obiecte redefinite ale limbajului JavaScript. Suntei de asemenea familiarizai cu obiectele frecvente n programarea JavaScript. Dar ... putei de asemenea s creai propriile dum neavoastr obiecte, ceea ce trebuie s recunoatem este ceva nemaipomenit! Dac variabil ele i matricile permit stocarea datelor sub diverse forme, uneori este necesar s f

acem apel la structuri mai sofisticate! S presupunem c dorii s creai un script care s gestioneze coordonatele persoanelor de contact (nume, adresa site, adresa email) din activitatea dumneavoastr profesional. DOM-ului (Document Object Model) care permit manipularea documentelor Web. Aceste obiecte sunt cele mai

428 n situaia n care utilizai variabile normale vei fi obligat s definii o variabil pen care coordonat a fiecrei persoane (pentru fiecare nume, fiecare adres site i fiecare adres email) ceea ce este foarte complicat! Utilizarea matricilor simplific puin l ucrurile, dar nu este ideal! Obiectele (aici am vrut s ajungem!) permit stocarea informaiilor bazei de date ntr-o manier mult mai logic. Fiecare persoan este reprezent t printr-un obiect Contact care dispune de proprietile: nume, adres site i adres email . Putei aduga dup aceea obiectului Contact, metode pentru afiarea/manipularea informaiilor coninute. Definii un obiect Prima etap n crearea unui obiect const n a-i da un nume. Am decis s numim obiectul Co ntact. Fiecare obiect Contact conine urmtoarele proprieti: nume; site (adresa de sit e (personal)); email (adresa de email (personal)). Pentru a putea utiliza obiectul , va trebui mai nti s crem o funcie Constructor care are rolul de a crea noi obiecte Contact. Iat cum crem n JavaScript o funcie Constructor (Contact) cu trei parametri pentru in iializarea noului obiect i atribuirea proprietilor corespunztoare. n figura 12.1 este prezentat codul JavaScript al funciei Constructor. Figura 12.1 429 Remarci: Constructorul este o funcie simpl care accept mai muli parametri ale cror va lori sunt atribuite proprietilor obiectului. Obiectul are acelai nume ca i funcia Con tact. Cuvntul cheie this se refer la obiectul curent, acela creat cu ajutorul funci ei. Definii o metod pentru un obiect Obiectele devin cu adevrat interesante i comode atunci cnd ele sunt dotate cu metod e. n JavaScript, definirea unei metode pentru un obiect se realizeaz n dou etape: De finii metoda n funcia Constructor ntr-o linie de cod n care vei atribui metodei un num e, apoi asociai-i funcia de prelucrare. Scriei funcia de prelucrare. Iat cum definim metoda afiareContact n funcia Constructor Contact. n figura 12.2 este prezentat codu l complet JavaScript al funciei Constructor. Figura 12.2 Remarci: Funcia afiareContact afieaz coordonatele de contact ale unei persoane. Instruciunea c

are a fost adugat seamn cu o definiie a proprietii, dar se refer la funcia afiareCo Putei utiliza aceast sintax din momentul n care funcia afiareContact a fost definit. F ncia afiareContact este utilizat ca metod, fr parametri! Cuvntul cheie this se refer obiectul curent. Iat cum scriem n JavaScript funcia de prelucrare afiareContact asociat metodei cu ace lai nume. n figura 12.3 este prezentat codul JavaScript al funciei afiareContact. 430 Figura 12.3 Remarc. Cuvntul cheie this se refer la proprietile obiectului. Creai o instan a unui obiect n continuare, vom utiliza definiia obiectului pe care urmeaz s-l crem. Pentru a utili za o definiie a obiectului va trebui s crem un nou obiect cu ajutorul cuvntului chei e new (vezi obiectele Array, Date, String). n figura 12.4 se prezint codul JavaScr ipt care creeaz un nou obiect Contact numit Droopy.

Figura 12.4 Remarci: Crearea unui obiect nu este o operaie complicat. Tot ceea ce trebuie fcut este apelarea funciei Contact(), care este funcia de definire a obiectului, i indic area coordonatelor n aceeai ordine ca n definiie. Odat executat instruciunea din figur 12.4, un nou obiect a fost creat, care conine informaii despre Droopy. Acest obie ct (Droopy) este o instan a obiectului Contact. n figura 12.5 se prezint o secven de c od JavaScript care creeaz un obiect Contact vid (Romic) i definete apoi proprietile sa le. Figura 12.5

431 Odat creat instana obiectului Contact cu ajutorul uneia din metodele prezentate, ut ilizai metoda afiareContact pentru a afia informaiile corespunztoare. Proprietile pers anei de contact Droopy sunt afiate ca n figura 12.6. Figura 12.6 Aplicaii Creai un document (X)HTML care afieaz n Internet Explorer lista de contact a trei persoane (vezi figura 12.7). Indicaie. Utilizai obiectul Contact . Figura 12.7 432 n figura 12.8 este prezentat documentul XHTML complet n care s-a inserat script-ul aplicaiei. Figura 12.8 Remarc. n cadrul acestei aplicaii baza de date utilizat are dimensiuni extrem de red use. Un obiect asemntor poate stoca date care provin dintr-o baz de date extern care conine mii de nregistrri. Modificai definiia obiectului Contact pentru a include o proprietate adresa care p ermite stocarea adresei persoanei de contact. Modificai funcia afiareContact.

433 EXEMPLUL 12 JAVASCRIPT Definirea problemei Aplicaia pe care urmeaz s o realizai n cadrul acestei ultime conversaii (!) este o mic

baz de date care conine notele obinute la mai multe materii, de ctre studenii unei gr upe. Pentru gestionarea automat a acestor date, vom folosi facilitile JavaScript (t abelul pe parte de client), pentru a rspunde cerinelor conducerii unei instituii de nvmnt.

Cerine de prelucrare Se vor avea n vedere cerinele de prelucrare prezentate mai jos: studenii sunt ident ificai prin: cod, nume, prenume; materiile de studiu sunt identificate prin: cod, denumire; nota 0 (zero) semnific absena studentului de la examen sau verificare. rapoartele generate sunt de unul din urmtoarele tipuri: raport general studenii su nt afiai n ordine alfabetic (nume, prenume i notele obinute la toate materiile); rapor t pe materii pentru o materie selectat din lista de materii, studenii sunt listai n dou moduri: ordine alfabetic; ordine descresctoare a notelor; raport restanieri pen ru fiecare materie se afieaz studenii care nu au obinut nota 5 de promovare; cereril e de cutare n baza de date sunt: identificarea unui student i afiarea notelor obinute la toate materiile; identificarea studenilor restanieri pentru o materie selectat.

434 Proiectarea programului Crearea tabelelor de cutare Se vor utiliza obiecte personalizate care s simuleze o baz de date. Documentul (X) HTML va conine informaii despre dou entiti: materie conine atributele: cod (numrul d dentificare al materiei), denumirea materiei (ir de caractere); student conine atr ibutele: numele i prenumele studentului; notele obinute la materiile de studiu. Remarc. A fost aleas o soluie simplificat care prezint dezavantajul unei flexibiliti r duse la modificarea numrului materiilor de studiu i la adugarea mai multor ani de s tudiu, dar ... din punct de vedere didactic este mult mai uor de neles. Tabelul entiti materii pe parte de client i tabelul entiti student pe parte de client se vor implementa dup cum urmeaz: tabelul materii se va utiliza un vector ir de ca ractere; codul de identificare al materiei va fi indicele materiei iar elementel e vectorului, un ir de caractere ce reprezint denumirea materiei. tabelul student se va utiliza un vector de obiecte personalizate n care indicele vectorului va re prezenta numrul de identificare al studentului iar obiectul personalizat va fi fo rmat din dou iruri de caractere: Nume, Prenume reprezint numele i prenumele studentu lui; Note vector de numere ntregi reprezentnd notele obinute de student (dimensiune a vectorului de note trebuie s fie egal cu dimensiunea vectorului materii care def inete numele materiilor de studiu). Definii obiectul student (vezi metoda construc tor, def_student (Nume,

Prenume, Note) din figura 12.9) i creai instane de acest tip. Pentru aceasta va trebui s creai mai nti lista cu note i apoi s apelai metoda construc or (def_student) a obiectului student (vezi figura 12.10). function def_student(Nume,Prenume,note){ this.Nume=Nume; this.Prenume=Prenume; t his.Note=Note; Figura 12.9 } ... var lista_stud=new Array(); var note1=new Array (5,6,7,10,10); lista_stud[0]=new def_student(Avram,Nicolae,note1); } Figura 12.10 435 Crearea interfeei cu utilizatorul Interfaa cu utilizatorul trebuie s asigure afiarea facil a tuturor cerinelor de prelu crare. Pentru a afia simultan opiunile de prelucrare, criteriile i rezultatele prel

ucrrii cererilor de cutare se va folosi o fereastr cu mai multe (4) cadre (vezi fig ura 12.11). Cadrul titlu Cadrul inputd Cadrul subrap Cadrul fraport Figura 12.11 Vom prezenta n cele ce urmeaz funciile celor patru cadre n care a fost m prit fereastra browser-ului. Cadrul titlu Cadrul titlu afieaz textul Intranet Baza de Date cu Studeni (vezi figura 12.12). Figura 12.12 Cadrul inputd Cadrul inputd afieaz tipul prelucrrii. Se afieaz dou butoane radio (Rapoarte, Cutare) cu ajutorul crora utilizatorul poate selecta tipul de raport (General, Pe Materii, Restanieri) i tipul cutrii (Dup studeni, Restanieri). n figura 12.13 se prezint cadrul inputd al ferestrei interfeei cu utilizatorul cu t ipul prelucrrii RAPOARTE iar n figura 12.14 se prezint acelai cadru cu tipul prelucrr ii: CUTARE. 436 Figura 12.13 Figura 12.14 Cadrul subrap Cadrul subrap este cadrul prin intermediul cruia se introduc datele necesare efec turii prelucrrilor cerute de utilizator prin selecia unei opiuni din cadrul inputd. El este generat dinamic. n figurile 12.15, 12.16, 12.17, 12.18, 12.19 este prezen tat coninutul cadrului subrap pentru opiunile RAPOARTE i CUTARE. Figura 12.15 437 Figura 12.16 Figura 12.17 Figura 12.18 438 Figura 12.19 Remarc. Observai n figurile 12.15, 12.16, 12.17, 12.18, 12.19 prezena butonului EXEC UT.

Cadrul fraport Cadrul fraport este cadrul n care se afieaz rezultatele prelucrrilor. Coninutul acest uia este dinamic, fiind generat n funcie de cererea de cutare selectat. n figura 12.2 0 este prezentat cadrul fraport al ferestrei interfeei cu utilizatorul pentru RAPORT GENERAL (Rapoarte General, n cadrul inputd). Figura 12.20 439 Crearea funciilor de prelucrare a datelor Aplicaia poate genera trei rapoarte i execut dou cereri de cutare. Tipul raportului s au al cutrii este selectat de utilizator prin intermediul cadrului inputd. Corespu nztor seleciei utilizatorului, n cadrul subrap se vor modifica zonele de interaciune cu utilizatorul. Astfel, dac utilizatorul selecteaz generarea raportului general atunci cadrul subrap va afia un buton pentru a lansa n execuie prelucrarea (vezi figura 12.18). Cadrul inputd permite i schimbarea tipului de pr elucrare (raport sau cutare) prin afiarea a dou butoane radio prin care utilizatoru l poate realiza selecia. Acionarea unuia din aceste butoane radio lanseaz n execuie f uncia afisrap care modific opiunile listei tiprap. n figura 12.21 este prezentat pse udocodul funciei afisrap(). Pseudocodul AFISRAP BEGIN Parametrii: t- valoare intreaga IFAFIS IF (t==0) //afisare tip raport //fi xeaza trei optiuni in lista tiprap tiprap.optiune[0]=General tiprap.optiune[1]=Mate rii tiprap.optiune[2]=Restantieri IFAFIS ELSE tiprap.optiune[0]=Student tiprap.optiun e[1]=Restantieri IFAFIS ENDIF Figura 12.21 AFISRAP END AFISRAP Selectarea unei opiuni din lista tiprap va duce la afiarea n cadrul subrap a elemen telor de interfa ce asigur introducerea informaiilor necesare pentru fiecare tip de prelucrare i lansarea n execuie a prelucrrii respective. Astfel, se gestioneaz evenim entul onChange care va executa funcia afis_subopt. Pseudocodul funciei afis_subopt() este prezentat n figura 12.22. Pseudocodul AFIS_SUBOPT AFIS_SUBOPT BEGIN IF1 CASE1 //determinarea indexului optiunii selectate ir=tiprap.selectedIndex IF (raport[0 ].checked) CASE (ir) 0:DO afis_subrap0 1:DO afis_subrap1 2:DO afis_subrap2 ENDCA SE ELSE CASE (ir) 0:DO afis_subrap3 1:DO afis_subrap4 ENDCASE ENDIF CASE1 IF1 CASE2 CASE2 IF1 AFIS_SUBOPT END Figura 12.22 440 Funcia afis_subrap0 construiete interfaa cu utilizatorul pentru prelucrarea datelor n cazul generrii raportului general (figura 12.20). Interfaa va fi afiat n frame-ul s ubrap i conine ca element de aciune doar butonul Executa care prin apsare va apela f uncia executaRG() care va afia raportul general (vezi pseudocodul din figura 12.23 ). Pseudocodul AFIS_SUBRAPO, EXECUTARG BEGIN //afiarea informaiilor despre raport subrap.WRITE Raport General subrap.WRITE A fiseaza toata grupa si toate notele genereaza html pentru form f2 ce contine buto nul executa IF1 IF (clic pe butonul Executa) DO executaRG IF1 ENDIF AFIS_SUBRAP0 END AFIS_SUBRAP0

EXECUTARG BEGIN //afiarea studentilor din grupa subrap.WRITE Raport General subrap.WRITE Nume prenume FOR(i=0;i<materii.length;i++) subrap.WRITE materii[i] ENDFOR FOR(i=0;i<li sta_stud.length;i++) subrap.WRITE lista_stud[i].nume lista_stud[i].prenume FOR(j =0;j<materii.length;j++) subrap.WRITE lista_stud[i].Note[j] ENDFOR ENDFOR END FOR1 FOR1 FOR2 FOR3 FOR3 FOR2 Figura 12.23 EXECUTARG Funcia afis_subrap1 construiete interfaa cu utilizatorul pentru generarea raportului pe materii (figura 12.24).

Figura 12.24 Interfaa va fi afiat n frame-ul subrap i conine dou liste de opiuni i b l Executa. Lista de opiuni smaterii conine lista materiilor, iar lista sordine permite selecia modului de ordonare al studenilor: ordinea alfabetic sau ordinea da t de notele la materia respectiv. 441 Figura 12.25 Butonul Execut prin apsare va apela funcia executaRM() care va afia

raportul pe materii (vezi figura 12.25). Afiarea studenilor se va face n funcie de ordinea impus de vectorul asociat vord. Pentru afiarea studenilor n funcie de nume , ordinea este cea n care sunt pstrate n vectorul lista_stud informaiile despre stud eni. n cazul ordonrii descresctoare dup note, vord va conine indicii studenilor din ve torul list_stud n ordinea descresctoare a notelor. Astfel, vord[0] va conine indice le elementului din lista_stud al studentului care are nota cea mai mare la mater ia respectiv. Algoritmul de sortare implementat este un algoritm clasic bubble-sort (vezi pseudocodul din figura 12.26). Pseudocodul AFIS_SUBRAP1, EXECUTARM AFIS_SUBRAP1 BEGIN //afiarea informaiilor despre raport subrap.WRITE Raport pe Materii generaza html pe ntru forma f2 IF (clic pe butonul Executa) DO executaRG ENDIF IF1 IF1 AFIS_SUBRAP1 END EXECUTARM BEGIN FOR1 Figura 12.26 FOR1 //afiarea raportului pe materii al studentilor din grupa subrap.WRITE Raport pe Ma terii //determina selectiile utilizatorului imat=smaterii.selectedIndex; iord=sor dine.selectedIndex; //aloca spatiu pentru vectorul vord new vord //se plaseaza o rdinea initiala in vector FOR(i=0;i<vord.length;i++) vord[i]=i; ENDFOR 442 IF2 IF(iord==1) //ordinea in functie de note // ordoneaza lista_stud descrescator du pa note // se aplica algoritmul de sortate bubble_sort neordonat=true; WHILE (ne ordonat) neordonat=false; FOR(i=0;i<lista_stud.length-1;i++) IF(lista_stud[vord[ i]].Note[imat]< lista_stud[vord[i+1]].Note[imat]) j=vord[i]; vord[i]=vord[i+1]; vord[i+1]=j; neordonat=true; ENDIF ENDFOR ENDWHILE // afiseaza studenti FOR(i=0; i<lista_stud.length;i++) subrap.WRITE lista_stud[vord[i]].nume subrap.WRITE list a_stud[vord[i]].prenume subrap.WRITE lista_stud[i].Note[imat] ENDFOR ENDIF END

WHILE1 FOR2 IF3 IF3 FOR2 WHILE1 FOR3 FOR3 Figura 12.26 IF2 (continuare) EXECUTARM Funcia afis_subrap2 construiete interfaa cu utilizatorul pentru generarea raportulu i ce afieaz studenii restanieri (figura12.27). Figura 12.27 Interfaa conine doar butonul Executa care prin apsare va apela funcia executaRR() care va afia raportul studenilor restanieri (vezi figura 12.28). 443 Figura 12.28 Pentru afiarea studenilor pe materii se apeleaz funcia afis_restantieri care are ca parametru indicele materiei ce urmeaz a fi prelucrat (vezi pseudocodu l din figura 12.29). Pseudocodul AFIS_SUBRAP2 AFIS_SUBRAP2 BEGIN //afiarea informaiilor despre raport subrap.WRITE Raport Restantieri generaza html p entru forma f2 ce conine butonul Executa IF (clic pe butonul Executa) DO EXECUTAR R ENDIF //afiarea raportului restantieri pe materii subrap.WRITE Raport Restantier i FOR(j=0;j<materii.length;j++) fraport.WRITE "Materia:",materii[j], DO afis_rest antieri(j); ENDFOR END Parametrii imat- indicele materiei nrest=0; //determina n umarul de restantieri FOR(i=0;i<lista_stud.length;i++) IF (lista_stud[i].Note[im at]<5) nrest++; ENDIF ENDFOR IF(nrest>0) //afiseaza in tabel studentii restantie ri fraport.WRITE "Numar restantieri:",nrest fraport.WRITE "NR. Nume Prenume Nota IF1 IF1 AFIS_SUBRAP2 END EXECUTARR BEGIN FOR1 FOR1 EXECUTARR AFIS_RESTANTIERI BEGIN FOR2 IFF IFF FOR2 IF2 Figura 12.29 444 FOR3 IF3 IF4 IF4 lista_stud[i].Note[imat] k=0; FOR(i=0;i<lista_stud.length;i++) IF(lista_stud[i]. Note[imat]<5) fraport.WRITE i+1, lista_stud[i].Nume fraport.WRITE lista_stud[i]. Prenume IF(lista_stud[i].Note[imat]==0) fraport.WRITE"absent" ELSE fraport.WRITE ENDIF ENDIF ENDFOR ELSE fraport.WRITE "Nu esista restantieri" IF4 IF3 FOR3 IF2 Figura 12.29 IF2 ENDIF (continuare) AFIS_RESTANTIERI END Funcia afis_subrap3 construiete interf aa cu utilizatorul pentru cutarea unui student dup nume, prenume (figura 12.30). Figura 12.30 Interfaa conine dou zone de editare (Nume student, Prenume student) pe ntru specificarea numelui, respectiv prenumelui studentului cutat i butonul Executa. Prin acionarea butonului Executa se va apela funcia executaCS() (vezi pseudocodul prezentat n figura 12.31) care va afia rezultatele studentului d orit sau un mesaj de eroare dac acesta nu exist n baza de date (vezi figura 12.32). Pseudocodul AFIS_SUBRAP3, EXECUTACS AFIS_SUBRAP3 BEGIN //afiarea informaiilor despre raport subrap.WRITE Cautare rezultate student generaza html pentru forma f2 IF (clic pe butonul Executa) DO EXECUTACS ENDIF //afiarea r ezultatelor unui student //transferul datelor introduse in zonele de editare sn= snume.value; pn=spnume.value; fraport.WRITE"Cautare rezultate student" IF(sn!=""

) IF1 IF1 AFIS_SUBRAP3 END EXECUTACS BEGIN Figura 12.31 IF2 445 IF3 IF(pn!="") // determina numarul de studenti ce au numele // si prenumele specifi cat nr=0; FOR(i=0;i<lista_stud.length;i++) IF((lista_stud[i].Nume==sn)&& (lista_ stud[i].Prenume==pn)) Nr=nr+1 ENDIF ENDFOR IF(nr>0) fraport.WRITE "NR. Nume Pren ume FOR(i=0;i<materii.length;i++) fraport.WRITE materii[i] FOR(i=0;i<lista_stud. length;i++) IF((lista_stud[i].Nume==sn)&& (lista_stud[i].Prenume==pn)) fraport.W RITE i+1, lista_stud[i].Nume fraport.WRITE lista_stud[i].Prenume FOR(j=0;j<mater ii.length;j++) fraport.WRITE lista_stud[i].Note[j] ENDFOR ENDIF ENDFOR ENDFOR EL SE fraport.WRITE "Nu exista nici un student cu numele:", sn," Prenumele:",pn END IF ELSE //determina numarul de studenti cu numele sn nr=0; FOR(i=0;i<lista_stud. length;i++) IF(lista_stud[i].Nume==sn) nr=nr+1 ENDIF ENDFOR IF(nr>0) fraport.WRI TE "Numar Studenti:",nr fraport.WRITE "NR. Nume Prenume " FOR(i=0;i<materii.leng th;i++) fraport.WRITE materii[i] ENDFOR FOR(i=0;i<lista_stud.length;i++) IF(list a_stud[i].Nume==sn) fraport.WRITE i+1, lista_stud[i].Nume, fraport.WRITE lista_s tud[i].Prenume FOR(j=0;j<materii.length;j++) fraport.WRITE lista_stud[i].Note[j] ENDFOR ENDIF ENDFOR ELSE fraport.WRITE "Nu exista nici un student cu numele:", sn ENDIF ENDIF FOR1 IF4 IF4 FOR1 IF5 FOR2 FOR3 IF6 FOR4 FOR4 IF6 FOR3 FOR2 IF5 IF5 IF3 FOR5 IF7 IF7 FOR5 IF8 FOR6 FOR6 FOR7 IF9 FOR 8 FOR8 IF9 FOR7 IF8 IF8 Figura 12.31 IF3 ENDIF (continuare) IF2 EXECUTACS END 446 sau Figura 12.32 Funcia afis_subrap4 construiete interfaa cu utilizatorul pentru genera rea afirii studenilor restanieri la o singur materie(figura 12.33). Figura 12.33 Interfaa conine o list de opiuni, (smaterii), pentru selecia materiei dorite i butonul Executa care prin apsare va apela funcia executaCR() ce va afia raportul studenilor restanieri la materia respectiv(vezi figura 12.34). Figura 12.34 Pentru afiarea studenilor restanieri la o materie se apeleaz funcia afis_restantieri pe care am prezentat-o anterior (vezi pseudocodul prezentat n figura 12.35). Pseudocodul AFIS_SUBRAP4, EXECUTACR 447 AFIS_SUBRAP4 BEGIN //afiarea informaiilor despre raport subrap.WRITE Restantieri la o Materie generaza html pentru forma f2 IF (clic pe butonul Executa) DO EXECUTACR ENDIF END //deter minarea indexului materiei selectate imat=smaterii.selectedIndex; subrap.WRITE CA UTARE RESTANTIERI LA MATERIA: subrap.WRITE materii[imat] DO afis_restantieri(imat ); IF1 IF1 AFIS_SUBRAP4 EXECUTACR

BEGIN Figura 12.35 EXECUTACR END Codificarea n limbajul JavaScript n figurile 12.36, 12.37, 12.38, 12.39, 12.40 sun t prezentate, pentru fiecare cadru n parte, documentele HTML complete. Codul HTML pentru interfaa cu utilizatorul <html> <head> <title>Intranet baza de date cu studenti</title> <script language= "JavaScript"> <!--//CREAREA TABELULUI CU MATERII var materii = new Array("Algebr a superioara", "Fizica","Chimie","Informatica", "Analiza Functionala"); //CREARE A TABELULUI DE STUDENTI var lista_stud=new Array(); //DEFINIREA CONSTRUCTORULUI OBIECTULUI PERSONALIZAT function def_student(Nume,Prenume,Note){ this.Nume=Nume; this.Prenume=Prenume; this.Note=Note; } //CREEAZA LISTA DE STUDENTI var note1=n ew Array(5,6,7,10,10); lista_stud[0]=new def_student("Avram","Nicolae", note1); note1=new Array(4,9,5,7,8); lista_stud[1]=new def_student("Berbecaru","Catalin", note1); note1=new Array(10,9,8,10,10); lista_stud[2]=new def_student("Botea","I on", note1); note1=new Array(6,8,7,7,5); lista_stud[3]=new def_student("Cazacu", "Marin", note1); Figura 12.36 note1=new Array(9,8,0,7,8); lista_stud[4]=new def_ student("Ciufu","Gheorge", note1); 448 note1=new Array(8,6,8,6,5); lista_stud[5]=new def_student("Codescu","Petre", not e1); note1=new Array(4,4,0,5,5); lista_stud[6]=new def_student("Dinu","Mihaela", note1); note1=new Array(5,6,5,4,4); lista_stud[7]=new def_student("Dobre","Magd alena", note1); note1=new Array(9,4,7,0,5); lista_stud[8]=new def_student("Georg escu","Dragos", note1); note1=new Array(6,8,9,6,6); lista_stud[9]=new def_studen t("Ionescu","Ludovic", note1); note1=new Array(4,0,4,4,5); lista_stud[10]=new de f_student("Mihail","Gheorghe", note1); note1=new Array(8,7,7,8,6); lista_stud[11 ]=new def_student("Nastase","Stefan", note1); note1=new Array(7,5,8,7,8); lista_ stud[12]=new def_student("Neagu","Constanta", note1); note1=new Array(9,9,8,8,9) ; lista_stud[13]=new def_student("Oprea","Tudor", note1); note1=new Array(8,8,6, 9,9); lista_stud[14]=new def_student("Panait","Gabriel Andrei", note1); note1=ne w Array(5,8,5,6,7); lista_stud[15]=new def_student("Patrichi","Mihai Ioan", note 1); note1=new Array(9,8,6,5,8); lista_stud[16]=new def_student("Radoiu","Alin", note1); note1=new Array(6,5,8,6,8); lista_stud[17]=new def_student("Savu","Ion M ihut", note1); note1=new Array(7,5,5,5,7); lista_stud[18]=new def_student("Stane scu","Stelian", note1); note1=new Array(8,5,5,4,6); lista_stud[19]=new def_stude nt("Stoian","Daniel", note1); note1=new Array(6,9,8,7,8); lista_stud[20]=new def _student("Trifu","Mihaela Elena", note1); note1=new Array(7,5,8,7,6); lista_stud [21]=new def_student("Ungureanu","Eliza", note1); note1=new Array(6,6,5,6,7); li sta_stud[22]=new def_student("Zaharescu","Danut", note1); function rotunjeste(x) { var s=""+x; i=s.indexOf("."); if(i!=-1){ s=s.substring(0,i+3); } return s; } //FUNCTIA CARE REALIZEAZA RAPORTUL GENERAL function executaRG(){ VAR I,J,K; //AF ISARE REZULTATE PENTRU RAPORT GENERAL fraport.document.open(); Figura 12.36 frap ort.document.writeln("<center><p><b>RAPORT GENERAL </b></p></center>"); (continu are) fraport.document.writeln("<center><table border=1 bgcolor=#efefff><tr>"); f raport.document.writeln("<td bgcolor=#8bd3e9><b>NR.</b>", 449 "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>"); for(i=0;i<materii.length;i++) { fraport.document.writeln("<td bgcolor=#8bd3e9><b>"+ materii[i]+" </b></td>"); } for(i=0;i<lista_stud.length;i++) { k=i+1; if(i%2){bgc="#c0e7ed";}else{bgc="#d9

f0f4";} fraport.document.writeln("<tr><td bgcolor="+bgc+"><b>"+k+" </b></td>"); fraport.document.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].Nume+" "+lista_ stud[i].Prenume+"</b></td>"); for(j=0;j<materii.length;j++) {fraport.document.wr iteln("<td bgcolor="+bgc+"><b>"+lista_stud[i].Note[j]+" </b></td>"); } } fraport .document.writeln("</tr></table>");fraport.document.close(); } //FUNCTIA CE REAL IZEAZA RAPORTUL PE MATERII function executaRM(){ var i,j,k; //AFISARE REZULTATE PENTRU RAPORT MATERIE var imat=subrap.f2.smaterii.selectedIndex; var iord=subrap .f2.sordine.selectedIndex; fraport.document.open(); fraport.document.writeln("<c enter><p><b>RAPORT NOTE MATERIA:"); fraport.document.writeln(materii[imat]," </b ></p></center>"); vord=new Array(lista_stud.length); for(i=0;i<lista_stud.length ;i++)vord[i]=i; if(iord==1) { //ORDONEAZA VECTORUL DUPA NOTE neordonat=true; whi le (neordonat) { neordonat=false; for(i=0;i<lista_stud.length-1;i++) if(lista_st ud[vord[i]].Note[imat]< lista_stud[vord[i+1]].Note[imat]) { j=vord[i]; vord[i]=v ord[i+1]; vord[i+1]=j; neordonat=true; } } } fraport.document.writeln("<center>< table border=1 bgcolor=#efefff><tr>"); fraport.document.writeln("<td bgcolor=#8b d3e9><b>NR.</b>", "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>"); fraport.docu ment.writeln("<td bgcolor=#8bd3e9><b> Nota </b></td>"); for(i=0;i<lista_stud.len gth;i++) { k=i+1; if(i%2){bgc="#c0e7ed";}else{bgc="#d9f0f4";} fraport.document.w riteln("<tr><td bgcolor="+bgc+"><b>"+k+" </b></td>"); fraport.document.writeln(" <td bgcolor="+bgc+"><b>"+lista_stud[vord[i]].Nume+" Figura 12.36 "+lista_stud[vo rd[i]].Prenume+"</b></td>"); (continuare) fraport.document.writeln("<td bgcolor= "+bgc+"><b>"+lista_stud[vord[i]].Note[imat]+" </b></td>"); } 450 fraport.document.writeln("</tr></table>"); fraport.document.close(); } // FUNCTI A CE REALIZEAZA AFISAREA RESTANTIERILOR LA O MATERIE function afis_restantieri(i mat){ var i,j,k,nrest; nrest=0; //DETERMINA NUMARUL DE RESTANTIERI for(i=0;i<lis ta_stud.length;i++) if(lista_stud[i].Note[imat]<5)nrest++; if(nrest>0) { //AFISE AZA IN TABEL STUDENTII RESTANTIERI fraport.document.writeln("<center>Numar resta ntieri:",nrest,"<br></center>"); fraport.document.writeln("<center><table border =1 bgcolor=#efefff><tr>"); fraport.document.writeln("<td bgcolor=#8bd3e9><b>NR.< /b>", "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>"); fraport.document.writeln ("<td bgcolor=#8bd3e9><b> Nota </b></td>"); k=0; for(i=0;i<lista_stud.length;i++ ) if(lista_stud[i].Note[imat]<5) { if(k%2){bgc="#c0e7ed";}else{bgc="#d9f0f4";} k ++; fraport.document.writeln("<tr><td bgcolor="+bgc+"><b>"+k+" </b></td>"); frap ort.document.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].Nume+" "+lista_stud [i].Prenume+"</b></td>"); if(lista_stud[i].Note[imat]==0) fraport.document.write ln("<td bgcolor="+bgc+"><b> absent </b></td>"); else fraport.document.writeln("< td bgcolor="+bgc+"><b>"+lista_stud[i].Note[imat]+" </b></td>"); } fraport.docume nt.writeln("</tr></table>"); } else fraport.document.writeln("<p> Nu esista rest antieri"); } //RAPORT RESTANTIERI function executaRR(){ var i,j,k; var nrest; fr aport.document.open(); fraport.document.writeln("<center><p><b>RAPORT RESTANTIER I </b></p></center>"); for(j=0;j<materii.length;j++){ fraport.document.writeln(" <center><p><b>Materia:",materii[j]," </b></p></center>"); afis_restantieri(j); } //de la for j fraport.document.close(); } Figura 12.36 //CAUTARE DUPA STUDENT (continuare) function executaCS(){ var i,j,k,nr; 451 var sn=subrap.f2.snume.value; var pn=subrap.f2.spnume.value; fraport.document.op en(); fraport.document.writeln("<center><p><b>Cautare rezultate student </b></p> </center>"); if(sn!=""){ if(pn!="") { nr=0; for(i=0;i<lista_stud.length;i++) if( (lista_stud[i].Nume==sn)&&(lista_stud[i].Prenume==pn))nr++; if(nr>0) { fraport.d ocument.writeln("<center><table border=1 bgcolor=#efefff><tr>"); fraport.documen t.writeln("<td bgcolor=#8bd3e9><b>NR.</b>", "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>"); for(i=0;i<materii.length;i++) fraport.document.writeln("<td bgcolo

r=#8bd3e9><b>"+ materii[i]+" </b></td>"); k=0; for(i=0;i<lista_stud.length;i++) if((lista_stud[i].Nume==sn)&&(lista_stud[i].Prenume==pn)) { if(k%2) bgc="#c0e7ed "; else bgc="#d9f0f4"; k++; fraport.document.writeln("<tr><td bgcolor="+bgc+"><b >"+k+" </b></td>"); fraport.document.writeln("<td bgcolor="+bgc+"><b>"+lista_stu d[i].Nume+" "+lista_stud[i].Prenume+"</b></td>"); for(j=0;j<materii.length;j++) fraport.document.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].Note[j]+" </b>< /td>"); } fraport.document.writeln("</tr></table>"); } else fraport.document.wri teln("<center><p>Nu exista nici un student cu numele:", sn," Prenumele:",pn); } else { //DETERMINA NUMARUL DE STUDENTI CU NUMELE SN nr=0; for(i=0;i<lista_stud.l ength;i++) if(lista_stud[i].Nume==sn)nr++; if(nr>0) { fraport.document.writeln(" <center>Numar Studenti:",nr); fraport.document.writeln("<center><table border=1 bgcolor=#efefff><tr>"); fraport.document.writeln("<td bgcolor=#8bd3e9><b>NR.</b> ", "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>"); for(i=0;i<materii.length;i+ +) fraport.document.writeln("<td bgcolor=#8bd3e9><b>"+ materii[i]+" </b></td>"); k=0; for(i=0;i<lista_stud.length;i++) if(lista_stud[i].Nume==sn) { if(k%2)bgc=" #c0e7ed";else bgc="#d9f0f4"; k++; fraport.document.writeln("<tr><td bgcolor="+bg c+"><b>"+k+" </b></td>"); fraport.document.writeln("<td bgcolor="+bgc+"><b>"+lis ta_stud[i].Nume+" "+lista_stud[i].Prenume+"</b></td>"); Figura 12.36 for(j=0;j<m aterii.length;j++) (continuare) fraport.document.writeln("<td bgcolor="+bgc+"><b >"+lista_stud[i].Note[j]+" </b></td>"); 452 } fraport.document.writeln("</tr></table>"); } else fraport.document.writeln("<c enter><p>Nu exista nici un student cu numele:", sn); } }// if sn fraport.documen t.close(); } // CAUTAREA RESTANTIERILOR LA O MATERIE function executaCR(){ var i ,j,k; var nrest; var imat=subrap.f2.smaterii.selectedIndex; fraport.document.ope n(); fraport.document.writeln("<center><p><b>CAUTARE RESTANTIERI LA MATERIA: "); fraport.document.writeln(materii[imat]," </b></p></center>"); afis_restantieri( imat); fraport.document.close(); } // --> </script> </head> <frameset rows="10%, 30%,60%"> <frame scrolling="no" noresize src="btitlu.html" name="titlu"> <frames et cols="30%,70%"> <frame scrolling="no" noresize src="tipraport.html" name="inp utd"> <frame src="btiprap0.html" name="subrap"> </frameset> Figura 12.36 <frame src="bsit.html" name="fraport"> (continuare) </frameset> </html> Codul HTML pentru cadrul titlu <html> <head> </head> <body> <center> <font size=+3 color=green> Intranet- Baza de Date cu Studenti</font> </center> </body> Figura 12.37 </html> Codul HTML pentru cadrul inputd 453 <html> <head> <script language="JavaScript"> <!--var sel=0; function afis_subrap 0(){ parent.subrap.document.open(); //AFISAREA DATELOR GENERALE parent.subrap.do cument.writeln("<font color=green size=+1>Raport general</font>"); parent.subrap .document.writeln("<hr>"); parent.subrap.document.writeln("<p>Afiseaza toata gru pa si toate notele</p>"); parent.subrap.document.writeln("<p>"); //FORMAREA ELEM ENTELOR DE INTERFATA -BUTONUL DE EXECUTIE AL RAPORTULUI parent.subrap.document.w riteln("<form name=\"f2\">"); parent.subrap.document.writeln("<p><input type=\"b utton\" value=\"Executa\" onClick=\"parent.executaRG();\">"); parent.subrap.docu ment.writeln("</form>"); parent.subrap.document.close(); } function afis_subrap1 (){ parent.subrap.document.open(); parent.subrap.document.writeln("<font color=g reen size=+1>Raport pe Materii</font>"); parent.subrap.document.writeln("<hr>"); parent.subrap.document.writeln("<table border=\"0\"><tr><td>Selecteaza materia" ); parent.subrap.document.writeln(" <td> Ordonare rezultate dupa</td></tr>"); // FORMA F2 DE INTERFATA CU UTILIZATORUL parent.subrap.document.writeln("<form name =\"f2\">"); parent.subrap.document.writeln("<tr><td><select size=\"1\" name=\"sm aterii\">"); for(i=0;i<parent.materii.length;i++) parent.subrap.document.writeln

("<option>",parent.materii[i],"</option>"); parent.subrap.document.writeln("</se lect>"); parent.subrap.document.writeln("<td><select size=\"1\" name=\"sordine\" >"); parent.subrap.document.writeln("<option>Alfabetica studenti</option>"); par ent.subrap.document.writeln("<option> Descrescatoare Note</option>"); parent.sub rap.document.writeln("</select>"); parent.subrap.document.writeln("<tr><td colsp an=2><input type=\"button\" value=\"Executa\" onClick=\"parent.executaRM();\">") ; parent.subrap.document.writeln("</form>"); parent.subrap.document.writeln("</t able>"); parent.subrap.document.close(); } function afis_subrap2(){ parent.subra p.document.open(); parent.subrap.document.writeln("<font color=green size=+1>Rap ort Restantieri</font>"); parent.subrap.document.writeln("<hr>"); parent.subrap. document.writeln("<p>Afiseaza Studentii Restantieri din Grupa</p>"); parent.subr ap.document.writeln("<p>"); parent.subrap.document.writeln("<form name=\"f2\">") ; parent.subrap.document.writeln("<p><input type=\"button\" value=\"Executa\" Fi gura 12.38 onClick=\"parent.executaRR();\">"); parent.subrap.document.writeln("< /form>"); 454 parent.subrap.document.close(); } function afis_subrap3(){ parent.subrap.documen t.open(); parent.subrap.document.writeln("<font color=green size=+1>Cautare Rezu ltate Student</font>"); parent.subrap.document.writeln("<hr>"); parent.subrap.do cument.writeln("<p>"); parent.subrap.document.writeln("<form name=\"f2\">"); par ent.subrap.document.writeln("<table border=\"0\"><tr><td>Nume student:"); parent .subrap.document.writeln("<td><input type=\"text\" name=\"snume\" size=\"20\">") ; parent.subrap.document.writeln("<tr><td>Prenume student:"); parent.subrap.docu ment.writeln("<td><input type=\"text\" name=\"spnume\" size=\"20\">"); parent.su brap.document.writeln("<tr><td colspan=2><input type=\"button\" value=\"Executa\ " onClick=\"parent.executaCS();\">"); parent.subrap.document.writeln("</form>"); parent.subrap.document.writeln("</table>"); parent.subrap.document.close(); } f unction afis_subrap4(){ parent.subrap.document.open(); parent.subrap.document.wr iteln("<font color=green size=+1>Cautare Restantieri la o Materie</font>"); pare nt.subrap.document.writeln("<hr>"); parent.subrap.document.writeln("<table borde r=\"0\"><tr><td>Selecteaza materia"); parent.subrap.document.writeln("</td></tr> "); parent.subrap.document.writeln("<form name=\"f2\">"); parent.subrap.document .writeln("<tr><td><select size=\"1\" name=\"smaterii\">"); for(i=0;i<parent.mate rii.length;i++) parent.subrap.document.writeln("<option>",parent.materii[i],"</o ption>"); parent.subrap.document.writeln("</select>"); parent.subrap.document.wr iteln("<tr><td colspan=2><input type=\"button\" value=\"Executa\" onClick=\"pare nt.executaCR();\">"); parent.subrap.document.writeln("</form>"); parent.subrap.d ocument.writeln("</table>"); parent.subrap.document.close(); } function afisrap( t) { if(t==0) { f1.tiprap.options[0].text ="General"; f1.tiprap.options[1].text ="Pe Materii"; f1.tiprap.options[2].text ="Restantieri"; } else { f1.tiprap.opti ons[0].text ="Dupa Student"; f1.tiprap.options[1].text ="Restantieri"; f1.tiprap .options[2].text =""; } Figura 12.38 f1.tiprap.selectedIndex=0; afis_subopt(this ); (continuare) }

455 function afis_subopt(t){ var ir=f1.tiprap.selectedIndex; if(f1.raport[0].checked ) { // ESTE SELECTAT RAPORT switch(ir) { case 0: afis_subrap0(); break; case 1: afis_subrap1(); break; case 2: afis_subrap2(); } window.status="Tip Raport"; } e lse { // ESTE SELECTAT CAUTARE switch(ir) { case 0: afis_subrap3(); break; case 1: afis_subrap4(); break; } window.status=Tip Cautare; } } // </script> </head> <b ody> <center> <form name=f1> <p><font size=+2 color=green>Tipul Prelucrarii</font> <p> <table border=0> <tr><td><input type=radio name=raport checked value=0 onClick=if (this.checked) {afisrap(0)} > <b>RAPOARTE</b> <td> <input type=radio name=raport value onClick=if (this.checked) {afisrap(1)} > <b>CAUTARE</b></tr> <tr><td colspan=2><sele ct size=3 name=tiprap onChange=afis_subopt(this)> <option selected>General</option> <o ption>Pe Materii</option> <option>Restantieri</option> </select> </table> </cent er> Figura 12.38 </form> (continuare) </body> </html>

456 Codul HTML pentru cadrul subrap <html> <head> <title>Aplicatie</title> <head> <body> <font color=green size=+1>R aport general</font> <hr> <p>Afiseaza toata grupa si toate notele</p> <form name ="f2"> <input type="button" value="Executa" onClick="parent.executaRG();"> </for m> </body> Figura 12.39 </html> Codul HTML pentru cadrul fraport <html> <head> </head> <body> Figura 12.40 <h3>Rezultatele studentilor</h3></body > </html> JavaScript Testai-v cunotinele Tem 1. Cum creai obiecte fiu personalizate. Exemple. 2. Cum creai matrici de obiecte p ersonalizate? 3. Care sunt navigatoarele care recunosc obiectele personalizate? 4. Care este cuvntul cheie JavaScript care permite crearea unei instane a unui obi ect: instance; object; new. 5. Care este semnificaia cuvntului cheie this? obiect curent; script curent; nici a, nici b. 6. Care este diferena dintre o funcie constructor i o funcie ordinar? 457 7. Cum putei avea acces la obiectele pe care le-ai creat? 8. Care este diferena din tre o metod i o funcie? 9. Care sunt etapele pe care trebuie s le parcurgei pentru a defini o metod pentru un obiect personalizat? Vizitai site-urile http://www.wdvl.com http://msdn.microsoft.com/library http://www.databasejournal .com http://hotwired.lycos.com/webmonkey/programing

BIBLIOGRAFIE 1. 2. 3. 4. 5. 6. 7. 8. 9. Richard Wagner, R. Allen Wyke, JavaScript, traducere de Cora Radulian i Dan Pavelescu, Editura Teora, 2001, Bucureti Jean-Paul Mesters, Aide-mmoire JavaScript, OEM-Eyrolles, Paris, 2003 Michael Moncur, JavaScript 1.5 , CampusPress, Paris, 2002 Jean-Paul Mesters, JavaScript, Exercices et corriges, Collection LAtelier, EM-Eyrolles, Paris, 2003 Cdric Nilly, Jean-Christophe Gignia c, JavaScript, MicroApplication, Paris, 2003 Jean-Christophe Gigniac, Cdric Nilly , JavaScript, e-Poche, Paris, 2002 Emily A. Vander Veer, JavaScript pour les nul s, Editions First Interactive, Paris, 2002 Steven W. Disbrow, JavaScript Web Tr@ ining, OEM, Paris, 2002 Mike Robertshaw, Web Site Design (U234), The Open Univer sity of Hong Kong, 2002 10. Liviu Dumitracu, nvm ... BASIC conversnd cu calculatorul, Editura Tehnic, 2 volume, 1989 11. Floarea Nstase, Pavel Nstase, Tehnologia aplicaii lor Web (XML-DOM-ASP), Editura Economic, 2002 12. Liviu Dumitracu, (X)HTML, Editur a Universitii din Ploieti, 2003 13. Liviu Dumitracu, Dreamweaver MX, Editura Univers itii din Ploieti, 2003 14. Liviu Dumitracu, XML, Editura Universitii din Ploieti, 2003 15. Michel Drewfus, HTML 4, Student Edition, Campus Press, Paris, 2003