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 Conceptele programrii JavaScript Cum inserai un script n documentele (X)HTML, Dreamweaver MX i XML? EXEMPLUL 1 JAVASCRIPT Oferta de editoare JavaScript Resursele JavaScript 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 rezervate JavaScript Tem

Conversaia 2 (continuare). Operatorii JavaScript. Obiecte matematice .................................................. 57

Operatorii JavaScript Asociativitatea i prioritatea operatorilor Obiectul Math Obiectul 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. Aplicaii EXEMPLUL 3.2 JAVASCRIPT do ... while. Aplicaii EXEMPLUL 3.3 JAVASCRIPT for ... in. Aplicaii if, if...else, switch. Aplicaii EXEMPLUL 3.4 JAVASCRIPT Instruciunile continue i break Instruciunea with Tem

Conversaia 4. Obiectele interne String, Array ...................................... 123

Obiectele limbajului JavaScript. Prezentare general Obiectele interne Obiectul String. 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 Aplicaii Tem

Conversaia 7. Obiectele navigatorului .................................................. 211

Document Object Model (DOM) Obiectul Window. Aplicaii Obiecte de nivelul 1 Obiecte de nivelul al doilea Obiecte de nivelul al treilea Obiecte de nivelul al patrulea Obiectul Navigator. Aplicaii Tem

Conversaia 8. Obiectul Form. Validarea formularelor ......................... 273

Obiectul Form. Aplicaii (Sub)Obiectele Form. Aplicaii Validai un formular cu JavaScript. 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 JAVASCRIPT Tem

Conversaia 11. Depanarea aplicaiilor JavaScript ............................... 403

Tipuri de erori JavaScript. Aplicaii Tehnici de depanare a script-urilor Instrumente pentru depanarea script-urilor. Aplicaii Instruciunile throw i try catch. Aplicaii 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 EXEMPLUL 12 JAVASCRIPT Tem

Bibliografie .............................................................................................. 459

Conversaia 1

JavaScript i HTML 4.0, XHTML, XML

n aceast conversaie:
f f f f f f f f f f f f

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 Conceptele programrii JavaScript Cum inserai un script n documentele (X)HTML, Dreamweaver MX i XML? EXEMPLUL 1 JAVASCRIPT Oferta de editoare JavaScript Resursele JavaScript 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 serviciilor online au dus la nfiinarea stilului de via Web, iar Web-ul devine ncet, ncet o parte integrant a vieii noastre personale i profesionale. Natura interactiv a World Web face posibil existena stilului de via Web. Cum pot fi fcute paginile Web interactive? n principal, exist trei niveluri de interactivitate:

4
9 Elementele hiperlink Cel mai simplu nivel de interactivitate pe care l ofer Web-ul. 9 Interactivitatea funcional Se refer la abilitatea de a executa sarcini specifice i funcii ntr-un site Web. 9 Interactivitatea comunitar Permite vizitatorilor s se ntlneasc 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 deosebirea 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 i limbajul de programare JavaScript, evident dup ce ai terminat de citit aceast carte! JavaScript 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 instruciuni 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 Script prezint mari avantaje pentru cei care cunosc deja Visual Basic. VB Script poate fi de asemenea integrat cu Active X, standardul Microsoft pentru integrarea aplicaiilor 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 este numele unei insule din Indonezia, dar JavaScript? JavaScript i Java sunt dou limbaje pentru Web. De ce numele lor sunt att de apropiate? Cel puin trei ar putea fi rspunsurile la aceast ntrebare, pe care v invitm s le analizai i apoi s decidei! 1. JavaScript este 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 Java. 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 nume numeroi sunt cei care cred c JavaScript nu este dect o versiune simplificat a limbajului Java (1). Aceasta este fals. Java i JavaScript sunt dou tehnologii separate avnd doar numele i originea apropiate. Sintaxa limbajului JavaScript este parial inspirat din cea a limbajului Java (2). Diferena esenial ntre cele dou limbaje este aceea 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: 9 este un limbaj uor de nvat;

6
9 sunt suficiente cteva linii de cod pentru a mri gradul de interactivitate al paginilor Web; 9 este un limbaj care poate fi interpretat de browser-e; 9 programele JavaScript pot fi incluse direct n documentele (X)HTML. Limbajul JavaScript poate servi la: 9 generarea paginilor Web personalizate i modificarea dinamic a prezentrii lor; 9 realizarea calculelor matematice; 9 validarea coninutului unui formular; 9 comunicarea cu applet-urile Java; 9 crearea animaiilor personalizate; 9 afiarea unor mesaje care defileaz n bara de stare a navigatorului; 9 afiarea unor mesaje ntr-o pagin Web sau ntr-o caset de dialog; 9 crearea unor butoane animate; 9 identificarea navigatorului n care se afieaz pagina Web; 9 executarea funciilor clasice ale unui limbaj de programare. Evident, aceast list nu este exhaustiv; mai exist numeroase aplicaii posibile n JavaScript. 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 JavaScript pentru navigatorul Netscape) care permit scrierea de programe JavaScript capabile 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, 9 JavaScript nu poate citi, scrie, crea i terge fiiere de pe hard disc; 9 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
9 JavaScript nu poate crea aplicaii autonome. Pentru a scrie astfel de aplicaii va trebui 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 conceptele 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. Este o entitate cu parte ntreag, ca de exemplu o minge de volei, o main etc. n JavaScript, 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 lui un obiect: paragrafe, formulare, tablouri, imagini, link-uri etc. Exemplele pot continua. n JavaScript exist trei tipuri de obiecte: 1. obiecte interne furnizate 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) sunt exterioare limbajului dar sunt recunoscute de browser-e. Reprezint diferite componente ale navigatorului i ale documentului (X)HTML curent.

8
Standardul DOM (Document Object Model) definete obiectele navigatorului n mod ierarhic, 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, Option(), 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 (proprietile) 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 poate fi de asemenea un obiect care la rndul lui dispune de proprieti. De exemplu, farurile sunt proprieti ale obiectului main. Dar acestea sunt de asemenea obiecte care pot avea diverse proprieti: form, culoare, putere. n JavaScript, document este o proprietate a obiectului Window i este n egal msur un obiect care are de asemenea proprieti. 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 navigatorului (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 obiect. Metodele disponibile pentru fiecare obiect descriu ceea ce putei face cu acest obiect. Metoda deschide a obiectului maina are ca funcie deschiderea uilor. n JavaScript, metoda close() a obiectului window are ca funcie nchiderea ferestrei. Fiecare obiect posed o colecie de metode, iar fiecare metod aparine cel puin unui obiect. 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(), log(), 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 navigatorului (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, proprieti i metode (substantive, adjective i verbe). n figura 1.5 este prezentat un exemplu de script care conine instruciuni simple JavaScript. <script language = JavaScript 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 este un obiect care conine cod executabil. Spre deosebire de metode, funciile nu sunt asociate nici unui obiect particular. Funciile pot fi comparate cu electronii liberi 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 utilizator: 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 agenda dumneavoastr (Or la dentist, Aniversarea lui Droopy, Ziua efului) sunt evenimente. Diferite evenimente pot fi imprevizibile: contravenie pentru depire viteza legal n localitate; o nunt cu dar la rudele nevestii; vizita neateptat a soacrei etc. Dac aceste evenimente sunt prevzute sau nu, este problema dumneavoastr de a le gestiona. Gestiunea 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 pentru a demonstra c nu

suntei acas!
Un eveniment JavaScript este o aciune care se produce n raport cu un element (fereastr, 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: 9 utilizatorul ncarc o pagin Web n browser; 9 utilizatorul oprete ncrcarea paginii Web n browser; 9 utilizatorul a introdus sau a modificat coninutul unui cmp de text al unui formular; 9 utilizatorul a executat clic pe o imagine sau pe un buton; 9 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 produce atunci cnd mouse-ul se poziioneaz deasupra unui obiect. Dac mouse-ul trece pe deasupra unui link (legtur), evenimentul MouseOver este expediat gestionarului de evenimente 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 F1 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 unei funcii JavaScript pe care o creai special pentru a prelucra un anume tip de eveniment, 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 defini un gestionar de evenimente, adugai on la nceputul numelui evenimentului. Astfel, gestionarul de evenimente onMouseOver este apelat atunci cnd mouse-ul trece pe deasupra legturii (Gestionarul de evenimente este plasat n tag-ul (X)HTML <a> al link-ului corespunztor).
Remarci: 9 Poate ai observat combinaia de majuscule i minuscule (exemplu: onMouseOver, onMouseOut). Este vorba de notaia standard a gestionarilor de evenimente: on este scris ntotdeauna cu minuscule, iar iniiala fiecruia din cuvintele evenimentului, cu majuscule. 9 Evenimentele i gestionarii de evenimente JavaScript sunt tratate n detaliu n Conversaia 6.

13
Variabile
Variabilele reprezint un element fundamental al limbajului JavaScript. Ele pot conine: 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 variabile 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: 9 sintaxa JavaScript; 9 DOM-ul (Document Object Model modelul obiectelor documentului). Sintaxa definete un ansamblu de reguli care trebuie respectate atunci cnd scriei cod 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! Procedai 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 JavaScript.

14 Cum inserai un script ntr-un document (X)HTML?

Extinderea paginilor (X)HTML prin folosirea limbajului JavaScript confer paginilor Web mai mult putere, iar (X)HTML-ului mai mult flexibilitate. JavaScript, prin inserarea unui script n documentele (X)HTML existent permite programatorilor s creeze 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: 9 type indic tipul limbajului de script. Valoarea sa trebuie s fie un Internet (figura 1.9).
Figura 1.9

Media

Type (un tip MIME), de

exemplu text/JavaScript sau text/vbscript <script type=text/JavaScript> ...cod JavaScript </script> 9 language identific limbajul de script i facultativ versiunea (vezi figura 1.10). <script type=text/JavaScript language=JavaScript> ...cod JavaScript Figura 1.10 </script> 9 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 el 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.12). <script type=text/JavaScript> cod JavaScript </script> <noscript> Regretm c navigatorul 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 documentul (X)HTML. Pentru inserarea script-urilor n documentele dumneavoastr (X)HTML folosii una din metodele prezentate mai jos: 9 Metoda 1 plasai script-ul n corpul paginii (ntre <body> i

</body>);
9 Metoda 2 plasai script-ul n antet-ul paginii (ntre <head> i

</head>);
9 Metoda 3 utilizai fiiere surs externe; 9 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 Web 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: 9 Floarea Nstase, Pavel Nstase, Tehnologia aplicaiilor Web (XML, DOM, ASP), Editura Economic 2002, Bucureti 9 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 inserarea 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) script-ul n corpul documentului (X)HTML. Mesajul va fi afiat cu italice. Dac dorii s inserai un script scurt, reprezentat prin cteva linii de cod JavaScript, cel mai simplu este s-l plasai n corpul paginii. 1. Creai documentul (X)HTML (figura 1.13) cu Notepad.

Figura 1.13 2. Plasai elementul script n locul n care dorii s apar script-ul dumneavoastr (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 // naintea 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 navigatoarele care nu-l recunosc.

5. Inserai instruciunea JavaScript document.write() care afieaz mesajul: mi place s fiu ntotdeuna aa cum sunt. n pagina Web (atunci cnd ea este ncrcat!), figura 1.17.

Figura 1.17

18
Remarci:

9 JavaScript ofer mai multe soluii pentru afiarea informaiilor, una dintre cele mai simple fiind instruciunea document.write. 9 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, rezultatul va fi afiat direct n pagin. 9 Tag-urile (X)HTML, <i> de exemplu, sunt plasate ntre 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. 9 Facilitatea de combinare a tag-urilor (X)HTML i a instruciunilor 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 Dreamweaver MX. 1. n grupul de panouri Insert, executai clic pe subpanoul HTML (figura 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-urile 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 funciile ce urmeaz a fi utilizate de ctre alte script-uri ale paginii. 1. Creai documentul (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:

9 O funcie este un grup de instruciuni tratate ca o singur entitate. Pentru a utiliza o

funcie, va trebuie mai nti s o definii.

9 Funcia mesaj are rolul de a afia (cu italice) mesajul: mi place s fiu ntotdeauna aa
cum sunt. n pagina web.

9 Funcia mesaj ncepe cu cuvntul rezervat function urmat de numele funciei (mesaj). Dup numele funciei urmeaz parantezele vide (). Dup cum vei vedea mai trziu, aceste paranteze nu sunt ntotdeauna vide! Acoladele de deschidere ({) i de nchidere (}) servesc la delimitarea instruciunilor JavaScript care alctuiesc corpul
funciei i permit navigatorului s tie unde ncepe i unde se termin o funcie. n exemplul nostru, o singur linie de cod JavaScript apeleaz funcia document.write (o metod a obiectului Document) care permite afiarea cu italice 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 apelai. Pentru a apela o funcie, va trebui s utilizai numele su ntr-o instruciune a script-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 pentru afiarea mesajului indicat. Dac dorii s utilizai funciile de script n mai multe documente, atunci plasai-le ntr-un fiier separat (cu extensia .js) pe care-l referii apoi 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 atributul 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 icon-ul de conformitate i afiai pagina Web ntr-un browser. Rezultatul vizualizrii paginii 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 indicat 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 (vezi figura 1.40).

Figura 1.40
Remarci:

9 Nu este obligatoriu ca toate script-urile JavaScript s se gseasc n interiorul 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
9 Gestionarii de evenimente sunt funcii puternice JavaScript. Din fericire, ele sunt uor de
programat. Uneori este suficient o singur instruciune pentru a-l activa.

9 Fiecare eveniment are propriul su nume, de exemplu click. Pentru a defini un gestionar de evenimente, adugai on la nceputul numelui evenimentului (de exemplu, onClick). 9 Gestionarul de evenimente onClick este activat atunci cnd se execut clic pe butonul logo. Gestionarul de evenimente onClick este plasat n interiorul tag-ului <input /> al formularului, ca un atribut al acestui tag. 9 Instruciunea JavaScript care reacioneaz la eveniment trebuie s fie plasat ntre
ghilimele. De cele mai multe ori aceast instruciune va fi o funcie, n msura n care funciile au avantajul de-a avea un nume precis, semnificativ i de a conine mai multe instruciuni. 9 Obiectul Window conine trei metode (alert, confirm, prompt) practice pentru afiarea mesajelor i interactivitatea cu utilizatorul. Metoda alert() afieaz o caset de dialog de avertizare. Ea servete pentru transmiterea informaiilor utilizatorului. 9 Metoda alert() este prezentat 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 gestionarul 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 care vi le recomandm: Homesite; Macromedia Dreamweaver; Adobe GoLive; Microsoft Front Page 2003; Netobjects Script Builder; Text Pad; Web Expert; Ultra Edit; Edit Plus; Script Edit; Top Style.
Remarc. Dei oferta de editoare JavaScript este considerabil, v sugerm s nu renunai la editorul 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: 9 un editor de text (simplu); 9 un navigator.
Remarc. nainte de a v lansa n provocarea JavaScript pe care v-am lansat-o, v sugerm s v formai un background (X)HTML care s cuprind: tag-urile (X)HTML, cadrele i n mod special 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 pentru a fi afiate. Dar, navigatoarele nu interpreteaz instruciunile n acelai mod. (X)HTML are puine probleme, dar consecinele unei incompatibiliti JavaScript pot fi semnificative. La ora actual, dou navigatoare domin piaa: Netscape i Microsoft Internet Explorer. Cele dou navigatoare rmn n continuare; nu uitai acest lucru atunci cnd v creai propriile pagini.
Remarc. JavaScript 1.5, nu este recunoscut oficial dect de Netscape 6.0 i de Internet Explorer 5.5 i urmtoarele.

29
Dup cum am menionat, JavaScript nu este interptetat n aceeai manier de ctre toate navigatoarele. Incompatibilitatea se manifest n urmtoarele moduri: 9 ignorare un element de cod nu este vzut de navigator, i-n consecin nu este interpretat; 9 eroare un element de cod provoac o eroare ntruct sintaxa nu este recunoscut de navigator; 9 interpretare un element poate fi interpretat diferit de ctre navigator. Ideal ar fi o compatibilitate cu toate versiunile tuturor navigatoarelor. Dar, este aproape imposibil. Totui, JavaScript poate detecta versiunea navigatorului, ceea ce permite ca anumite 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 precedentele.
Remarc. La nceput (anul 1995), JavaScript se chema Live Script. El a fost rebotezat 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 care se regsete cea mai mare parte a elementelor limbajului de origine la care a adugat propriile sale specificaii.

Rezultatul: JavaScript nu este un standard. Navigatoarele

Netscape ignor specificaiile JScript iar Internet Explorer ignor pe cele ale lui JavaScript. Opera a introdus JavaScript ncepnd cu versiunea 3 a navigatorului su. Prezentm n continuare (vezi figura 1.45 i figura 1.46) navigatoarele i versiunile JavaScript 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 JavaScript 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 DOM. 9 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 conform cu ECMA 262, versiunea 3. Netscape funcioneaz de asemenea cu ECMA sub JavaScript 2.0, viitoarea versiune care va corespunde celei de-a patra ediii a normei ECMA Script. JavaScript 2.0 va constitui o versiune mult mbuntit fa de precedentele. 9 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:

9 La ora actual dou navigatoare domin piaa: Netscape i Microsoft Internet Explorer,
dar nu trebuie neglijai nici utilizatorii altor navigatoare.

9 Acordai toat atenia navigatorului (i versiunile acestora) care prelucreaz JavaScript.

Atenie la incompatibiliti! 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 deci de la versiunea 1.5 la 2.0. Motivul principal al dezvoltrii JavaScript este creterea 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: 9 semne de punctuaie suplimentare: #; &&=; ->; ..; ; @; ^^; ^^=; !=;

32
9 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 limbajului 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 script-urilor cu Dreamweaver MX? 8. Care sunt resursele necesare pentru crearea script-urilor JavaScript? 9. Cum se relaioneaz JavaScript cu navigatoarele?

Vizitai site-urile
9 http://JavaScript.Internet.com 9 http://www.pageresource.com/jscript/index4.htm 9 http://www.pageresource.com/jscript/index2.htm 9 http://www.pageresource.com/jscript/index6.htm 9 http://www.webreference.com/js 9 http://www.Javasciptcity.com/tutorials/jltuto1.htm 9 http://www.jscripts.com 9 http://javascript.internet.com/books/ 9 http://www.dannyg.com/pubs/index.html

Conversaia 2

Variabile i funcii
n aceast conversaie:
f f f f f f

Tipurile de date i valorile speciale JavaScript Variabile i funcii. Aplicaii Crearea automat a script-urilor cu Dreamweaver MX EXEMPLUL 2 JAVASCRIPT Cuvinte rezervate 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: tipurile 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 reprezenta o variabil, n plus se genereaz o eroare atunci cnd ncercai s-i atribuii variabilei un alt tip de date. Din fericire, aa ceva nu se ntmpl n JavaScript, care este un limbaj flexibil. Variabilele JavaScript pot accepta oricnd un nou tip de date, fapt care duce la modificarea tipului variabilei.

34
La nivel elementar, n JavaScript nu exist dect patru tipuri de date: 9 numerice ntregi; 9 numerice n virgul flotant; 9 caracter; 9 boolean. Toate celelalte tipuri de date pe care 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 diferite: ntreg, virgul flotant, octal i hexazecimal. Cu siguran, cunoatei numerele ntregi (integer, n limba englez) i numerele n virgul flotant (floating point, n limba englez), dar poate cunoatei mai puin pe cele exprimate n octal i n hexazecimal. Prin definiie, numerele n octal i n hexazecimal sunt numere ntregi care sunt exprimate ntr-un sistem de numeraie 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:

9 JavaScript recunoate numerele ntregi (n baza 10; pozitive sau negative) cuprinse 9 Un numr ntreg hexazecimal (hexadecimal, n limba englez) ncepe n mod obligatoriu
ntre: +/1.7976931348623157 E 308 i +/5 E 324. cu OX sau ox i este compus din urmtoarele simboluri: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Putei utiliza majuscule sau minuscule (figura 2.1).

Figura 2.1

<script> x=0x3F; //x ia valoarea 3F (63 n zecimal) </script>

9 Un numr ntreg octal ncepe obligatoriu cu 0 (zero) i este compus din urmtoarele
simboluri: 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
9 Dac suntei cumva nelinitii, nu v alarmai cci sunt foarte rare cazurile n programele
JavaScript 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! 9 Un numr n virgul flotant este n baza 10. El poate 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 (alfanumerice). Un ir de caractere (string, n limba englez) este compus din litere, cifre, simboluri, caractere speciale i secvene de ieire. Coninutul unui ir de caractere este considerat tot timpul ca fiind text, chiar dac el const din cifre i simboluri numerice. Un ir de caractere este ncadrat de ghilimele simple sau duble. Un ir de caractere ncadrat de ghilimele duble poate fi inclus ntr-un ir ncadrat de ghilimele simple i vice versa.
Aplicaie Testai irurile de caractere: septembrie; 9.80; Salut, Droopy!; a=01; anume=minim cu urmtorul 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 gsesc pe tastatur. n acest caz, utilizai o secven de ieire (escape sequence, n limba englez) 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 pentru a indica dac rezultatul evalurii unei condiii este adevrat sau nu. Nu v lsai impresionai de aceti termeni! n figura 2.5 se prezint un exemplu de utilizare a celor dou valori booleene. <script> x=true; y=false; </script>
Remarc. Cele dou valori nu sunt plasate ntre ghilimele, ntruct true i false sunt cuvinte cheie (vezi figura 2.5) JavaScript, avnd o semnificaie precis pentru interpretorul 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 superior 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.NEGATIVE_INFINITY pentru a testa dac Infinity este pozitiv sau negativ (vezi Conversaia 2 (continuare)).

Atunci cnd o expresie aritmetic conine o valoare Infinity, ea returneaz ntotdeauna infinity (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:

9 null nu este egal nici cu zero i nici cu undefined; 9 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:

9 undefined nu este egal nici cu null nici cu zero. 9 Valoarea undefined este returnat n cazul utilizrii unei variabile care nu a fost 9 Valoarea undefined este des confundat cu null de ctre navigatoare.
definit sau n cazul unei variabile care a fost declarat dar fr coninut (figura 2.9).

38

Figura 2.9

Variabile i funcii
Variabile JavaScript
Spre deosebire de alte limbaje de programare care impun declararea prealabil a variabilelor, cu specificarea tipului de date pe care acestea le conin (ntregi, reale, caracter etc.) JavaScript procedeaz puin altfel: o variabil este creat prin simpla 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 aceast 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!; //mesaj 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 script (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:
9 numele variabilelor pot conine toate literele alfabetului (majuscule sau minuscule), cifre (0 la 9) i caracterul de subliniere (_); 9 numele variabilelor nu trebuie s conin spaii i semne de punctuaie; 9 numele variabilelor sunt sensibile la majuscule i minuscule; 9 primul caracter al numelui unei variabile trebuie s fie o liter sau un caracter de subliniere; 9 nu este o limit teoretic pentru numrul de caractere al numelui unei variabile dar nu uitai c trebuie s tastai corect de dou ori numele unei variabile 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

9 n afar de variabilele scalare, care nu reprezint dect o singur entitate mai exist i
matrici (vezi Conversaia 4).

9 n general, variabilele scalare nu sunt declarate, dar n diferite cazuri ele pot fi declarate ca fiind de un tip particular (boolean, number sau string). 9 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 foarte multe cazuri, putei s-l omitei. Variabila va fi n mod automat declarat n momentul n care i atribuii o valoare. Pentru a ti n care situaie o variabil trebuie s fie declarat 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
9 variabile globale 9 variabile locale - sunt definite n exteriorul oricrei funcii JavaScript (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 bine conceptul 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 exerciiu, 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: 9 n mod static 9 n mod dinamic
Remarci:

- utilizai semnul = pentru a afecta o valoare unei variabile (instruciunea de atribuire). - utilizai metoda prompt().

9 Structura instruciunii de atribuire este foarte simpl: variabila din stnga semnului egal
(=) ia valoarea indicat n dreapta semnului egal (vezi figura 2.15).

<script> pi=3.14159; i=i+1; nume=Droopy; prenume=Ion; Figura 2.15 </script>

9 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 fiecare instruciune (figura 2.16).

<script> pi=3.14159; i=i+1; nume=Droopy; prenume=Ion; Figura 2.16 </script>

9 Metoda prompt() (vezi obiectul Window, Conversaia 7) deschide o caset de dialog
care conine: mesajul indicat (primul argument), o zon de text ce urmeaz a fi completat de utilizator (al doilea argument), butonul OK i butonul Cancel. Cel de-al doilea argument este facultativ. Dac el este absent, zona de text afieaz implicit undefined. Utilizatorul poate s introduc o alt valoare sau s execute clic pe butonul OK pentru a accepta rspunsul implicit. Dac utilizatorul execut clic pe butonul OK, valoarea coninut n zona de text este returnat script-ului; dac execut clic pe butonul Cancel, 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: 9 parseInt() - convertete un ir de caractere ntr-un numr ntreg. 9 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 unul din numere nu este gsit la nceputul irului de caractere, funciile returneaz valoarea 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 mesajul: 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 logo(){ alert(Imi place sa fiu intotdeauna asa cum sunt.); Figura 2.19 } Funcia este foarte simpl, dar vom analiza rapid fiecare din elementele sale. 9 Primul element este cuvntul cheie function (figura 2.20) care indic interpretorului JavaScript c blocul 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

} 9 Al doilea element este numele funciei (figura 2.21), aici logo. Regulile de formare a numelui funciei sunt identice cu cele ale numelui variabilelor (vezi paragraful Variabile). function logo () {

Figura 2.21

} 9 Al treilea element este setul de paranteze (figura 2.22) care conine lista parametrilor funciei (n exemplul nostru, nu este cazul!) function logo( ) {

Figura 2.22

} 9 Al patrulea element este acolada de deschidere, care marcheaz debutul corpului funciei (vezi figura 2.22). 9 Al cincilea element, pe linia urmtoare (figura 2.23) este 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 } 9 Ultimul element este acolada de nchidere (figura 2.24), care marcheaz 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 ori aceasta este apelat. Putei, de exemplu s utilizai un parametru mesaj ce reprezint logo-ul pe care dorii s-l afiai. Funcia logo() modificat este prezentat n figura 2.25. function logo(mesaj){ alert(mesaj); Figura 2.25 } De bun seam, pentru a putea utiliza 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 funcia 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 nimic. 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 a script-ului i s includei parantezele i parametrii. n figura 2.27 este prezentat documentul (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, pentru a afia dou logo-uri diferite (vezi figura 2.27).
Remarci:

9 Documentul XHTML (vezi figura 2.27) conine al doilea set de tag-uri <script> inserat 9 n cel de-al doilea script vei gsi dou apeluri ale funciei logo(), fiecare cu un mesaj
diferit (vezi figura 2.28). n corpul paginii.

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 poate, de asemenea returna o valoare script-ului apelant. Iat cum procedm pentru a defini 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){ rezultat=(a+b+c)/3.0; return rezultat; Figura 2.30 }
Remarci:

9 Funcia ncepe cu function cuvnt rezervat, urmat de numele funciei media i de

trei parametrii a, b, c pentru cele trei valori (numerice).

9 Acolada de deschidere a fost plasat la sfritul primei linii, dar putei foarte bine s o 9 Variabila (local) rezultat stocheaz media aritmetic a celor 3 valori numerice. 9 Pentru a returna rezultatul (rezultat) script-ului, utilizm cuvntul rezervat return
(vezi figura 2.31). izolai pe o singur linie, sau s o plasai la nceputul liniei urmtoare.

...
Figura 2.31

return rezultat; }

47
n figura 2.32 se prezint documentul complet (X)HTML. Acest document conine de asemenea, n seciunea <body> un mic script care apeleaz funcia

media() i afieaz rezultatul.

Figura 2.32
Remarci:

9 Pentru apelul funciei putei folosi o variabil de stare (mediaaritmetic, n

exemplul nostru).

9 Putei plasa apelul unei funcii ntr-o expresie. 9 n paralel cu variabilele i valorile constantelor, putei utiliza apelul funciilor care
returneaz rezultatele n interiorul 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 editare a script-urilor. n figura 2.34 sunt prezentate cele mai utilizate funcii JavaScript 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>

</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 documentului.

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 constituie definirea obiectivului script-ului. n consecin, luai o foaie de hrtie i pre de cteva minute adunai cuvintele ... potrivite pentru a descrie pe scurt modul de rezolvare 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. Desigur, ea poate fi rezolvat foarte bine i de ctre un elev de coal elementar sau chiar de un adult (prinii elevului!). Obiectivul nostru, ns este rezolvarea informatic a problemei utiliznd limbajul JavaScript.
Remarci:

9 Procesul de alctuire a unui script, pe care il vom urma pe tot parcursul lucrrii, const
din urmtoarele faze: analiza problemei; proiectarea programului (script-ului); codificarea n limbajul JavaScript; testare i depanare. 9 n cadrul fazei de analiz se definesc: formatul datelor de ieire; tabela de variabile; specificaiile de programare (descriere script, intrri, ieiri, list funciuni). 9 Asigurndu-ne c nu s-au strecurat greeli n faza de analiz a problemei, putem aborda n continuare faza de proiectare a script-ului, utiliznd ca instrumente de proiectare: pseudocodul, diagrama de structur a prelucrrilor etc. 9 Pseudocodul este un limbaj independent de limbajul de programare (nu exist un standard!). Limbajul pseudocod pe care vi-l propunem este alctuit din cteva instruciuni standard ce definesc structurile algoritmice fundamentale (secvena, iteraia, selecia) la care se adaug instruciuni, n bun parte aflate la latitudinea celui care realizeaz documentaia de analiz i proiectare a programului.

53
Analiza problemei nainte de a scrie un program (JavaScript) trebuie s cunoatem i s nelegem foarte bine problema (Analiza problemei). n cazul nostru, problema este una dintre cele mai simple: calculul ariei unui rezervor sferic atunci cnd se cunoate raza. n rezolvarea acestei probleme se urmrete crearea unei pagini Web, n care s se afieze simplu, ntr-o form 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=4R2).

Tabela de variabile
n figura 2.45 sunt prezentate: variabilele de ieire, variabilele de intrare i variabilele 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 suficiente, 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 prezentate n figura 2.46.

54
Specificaii de programare Descrierea programului Script-ul calculeaz i afieaz aria unui 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 variabilei r (de stare) valoarea 3. Calculeaz aria rezervorului sferic. Afieaz raza i aria rezervorului sferic (aria). Stop.

Asigurndu-ne c nu s-au strecurat greeli n faza de analiz a problemei, putem aborda n continuare 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: 9 Varianta 1 scrierea n limbaj natural structurat; 9 Varianta 2 scriere formalizat (apropiat de limbajul JavaScript). Iat cum procedm pentru a construi pseudocodul n ambele variante. Varianta 1 n figura 2.47 se prezint pseudocodul n limbaj natural structurat. Pseudocodul (Varianta 1) 1. Atribuii razei (r) valoarea 3. 2. Calculai aria (aria) rezervorului 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 etc.

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

55
n consecin, s-o folosim ct este cu putin pe aceasta. n figura 2.48 se prezint pseudocodul 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 JavaScript

Anumite cuvinte nu pot 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 debugger

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 valorile 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 prima dat un navigator? un script din antet-ul paginii; un script din corpul paginii; un gestionar de evenimente plasat n tag-ul <body>. 6. O funcie JavaScript: accept parametrii; returneaz o valoare; ambele variante. 7. Care sunt cele dou constante booleene? 8. Cum definii o funcie JavaScript? 9. Cum atribuii valori variabilelor? 10.Ce realizeaz funcia parseInt()? 11.Care este semnificaia cuvntului rezervat return?

Vizitai site-urile
9 www.glscript.com 9 www.toutJavascript.com 9 www.javanett.com 9 www.webcoder.com 9 www.script-masters.com 9 www.javascript.internet.com

57
9 www.javascripts.com 9 www.bratta.com 9 www.javascript.com

Conversaia 2
(continuare)

Operatorii JavaScript. Obiecte matematice

n aceast conversaie:
f f f f f f f

Operatorii JavaScript Asociativitatea i prioritatea operatorilor Obiectul Math Obiectul Number Obiectul Boolean EXEMPLUL 2 JAVASCRIPT (continuare) Tem

Operatorii JavaScript
Pentru a crea programe utile JavaScript, trebuie s evaluai sau chiar s modificai datele 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 binari (necesit existena a doi operanzi n expresie) ct i operatorii unari (necesit existena 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 aritmetici) relaionali (de comparaie) booleeni (logici) operatori pentru funcii operatori pentru structuri de date operatori condiionali operatori pentru iruri operatorul operatorul operatorul Figura 2.50 operatorul

Operatorii JavaScript
% (modulo); ++ (increment); (decrement); + (adunare); (scdere); * (nmulire); / (mprire) = (atribuire simpl); += (atribuire cu adunare); = (atribuire cu scdere); *= (atribuire 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 comparaie) 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. 9 Operator aritmetic.

Remarc. Dac unul din operatori este NaN, rezultatul este NaN.

2. Tip de date: alfanumeric (ir de caractere). 9 Operator de concatenare.

Remarc. Operatorul + servete n general pentru efectuarea convertirii tuturor tipurilor 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 </script>

<script> prenume=Vasile; nume=Adam; numecomplet=Domnul + prenume+ +nume; alert(numecomplet); // afieaz Domnul Vasile Adam </script>

59
+= operand1 += operand2

Adunare sau concatenare asociat unei atribuiri. 1. Tip de date: numeric. 9 Operator aritmetic i de atribuire.
Remarc. Echivalent cu: operand1= operand1 + operand2.

2. Tip de date: alfanumeric. 9 Operator de concatenare i de atribuire.

Remarc. Coninutul variabilei situate la stnga operatorului este completat cu data alfanumeric din dreapta operatorului.

Exemplu:

<script> a=3; a+=6; alert(a); //afieaz 9 </script> ++ ++ operand operand++

<script> numecomplet=Dumitrescu; nume=Vasile; numecomplet+=nume; alert(numecomplet); // afieaz Dumitrescu Vasile </script>

Incrementare. 1. Tipul de date: numeric. 9 Operator aritmetic.

Remarci: 9 Pre-incrementare (++ operand): valoarea variabilei este mrit cu 1, apoi este utilizat. 9 Post-incrementare (operand ++): valoarea variabilei este utilizat apoi este mrit cu 1. 9 Este imposibil de a combina post-incrementarea cu pre-incrementarea. 9 Acest operator se aplic numai variabilelor. Este foarte des utilizat n bucle. 9 Este echivalent cu: operand1= operand1 + operand2. 9 ++x++ returneaz un mesaj de eroare. 9 x++ este echivalent cu: x=x+1.

Exemplu:

<script> //post-incrementare a=5; alert(a++); // afieaz 5 alert(a); //afieaz 6 </script>

<script> //pre-incrementare a=5; alert(++a); // afieaz 6 alert(a); //afieaz 6 </script>

<script> //post-incrementare ntro bucl for(i=0;i<5; i++){ document.write(i); // afieaz 0 1 2 3 4 } </script>

operand1 operand2

Figura 2.51
(continuare)

Scdere sau negare. 1. Tipul de date: numeric. 9 Operator aritmetic. 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 </script> =
Tipul de date: numeric. 9 Operator aritmetic i de afectare.

<script> a=-7; a=-a; alert(a); // afieaz 7 </script>

operand1 = operand2

Exemplu:

Remarc. Este echivalent cu: operand 1= operand 1 operand 2.

<script> a=4; a-=6; alert(a); // afieaz -2 </script> operand operand

Decrementare. 1. Tipul de date: numeric. 9 Operator aritmetic.

Remarci: 9 Pre-decrementare (-- operand): valoarea variabilei este diminuat cu 1 i apoi este evaluat. 9 Post-decrementare (operand --): valoarea variabilei este evaluat apoi este diminuat cu 1. 9 Acest operator se aplic numai variabilelor. Este des utilizat n bucle. 9 Este echivalent cu: operand1= operand1 1. 9 x este echivalent cu x=x1.

Exemplu:

<script> //post-decrementare a=5; alert(a--);//afieaz 5 alert(a);// afieaz 4 </script> *

<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

Exemplu:

nmulire. 1. Tipul de date: numeric. 9 Operator aritmetic.

Figura 2.51
(continuare)

<script> a=7; b=8; c=3*6; d=a*b; alert(c); // afieaz 18 alert(d); // afieaz 56 </script>

61
*= operand1 *= operand2

Exemplu:

nmulire i atribuire. 1. Tipul de date: numeric. 9 Operator aritmetic i de atribuire.

Remarc. Este echivalent cu: operand1= operand1 * operand2.

<script> a=2; a*=5; alert(a); // afieaz 10 </script> / operand1 / operand2

mprire. 1. Tipul de date: numeric. 9 Operator aritmetic.
Remarci: 9 Dac unul din operanzi este NaN, rezultatul este NaN. 9 mprirea 0/0 d NaN. 9 mprirea 0/valoare_finit d 0.

Exemplu:

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

Exemplu:

<script> a=5; a/=2; alert(a); // afieaz 2.5 </script> %

Modulo. 1. Tipul de date: numeric. 9 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 doilea numr.

Figura 2.51
(continuare)

<script> a=18; a=a%5; alert(a); // afieaz 3 </script>

62
%= operand1 %= operand2

Exemplu:

Modulo i afectare. 1. Tipul de date: numeric. 9 Operator aritmetic i de afectare.

Remarc. Este echivalent cu: operand1= operand1 % operand2.

<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

Exemplu:

1. Tipul de date: numeric, alfanumeric i logic.

Remarc. A nu se confunda cu operatorul ==.

<script> a=20; nume=Droopy; b=a+3; //b are valoarea 23 </script> <

<script> //atribuire multipl var a=b=c=13; // cele trei variabile vor avea aceeai valoare: 13 </script> operand1 < operand2

Strict mai mic. 1. Tipul de date: numeric, alfanumeric i logic. 9 Operator relaional (de comparare).
Remarci: 9 Se returneaz TRUE, dac rezultatul evalurii condiiei este adevrat. 9 Se returneaz undefined dac una din valorile care se compar este NaN. 9 n cazul comparrii valorilor alfanumerice se ia n considerare codul ISO.

<=

operand1 <= operand2

Mai mic sau egal. 1. Tipul de date: numeric, alfanumeric i logic. 9 Operator relaional (de comparare).
Remarci: 9 Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 <= operand2) este adevrat. 9 Se returneaz undefined dac una din valorile care se compar este NaN. 9 n cazul 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; document.write(<br />+nume1<=nume2); // afieaz true </script>

63
> operand1 > operand2

Strict mai mare. 1. Tipul de date: numeric, alfanumeric i logic. 9 Operator relaional (de comparare).
Remarci: 9 Se returneaz TRUE dac rezultatul evalurii condiiei (operand1>operand2) este adevrat. 9 Se returneaz undefined dac una din valorile care se compar este NaN. 9 n cazul comparrii valorilor alfanumerice se ia n considerare codul ISO.

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 >= operand2
Mai mare sau egal. 1. Tipul de date: numeric, alfanumeric i logic. 9 Operator relaional (de comparare).
Remarci: 9 Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 >= operand2) este adevrat. 9 Se returneaz undefined dac una din valorile care se compar este NaN. 9 n cazul 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. 9 Operator relaional (de comparare).
Remarci: 9 Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 este egal cu operand2) este adevrat. 9 Se returneaz undefined dac una din valorile care se compar este NaN. 9 n cazul comparrii valorilor alfanumerice se ia n considerare codul ISO. 9 Compararea unei valori numerice (de exemplu, 7) cu o aceeai valoare alfanumeric (de exemplu, 7) returneaz TRUE.

Exemplu:

Figura 2.51
(continuare)

<script> a=6; b=7; nume=MIRCEA; document.write(nume==a); // afieaz false; document.write(<br />); document.write(a==6); // afieaz true; document.write(<br />); document.write(a==b); // afieaz false; </script> === operand1 === operand2

64

Identic cu. 1. Tipul de date: numeric, alfanumeric i logic. 9 Operator relaional (de comparare): egalitate de valori i de tip de date.
Remarc. Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 este egal cu operand2 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); // afieaz false; document.write(<br />+(nume1===MAXITAXI)); // afieaz true; </script> != operand1 != operand2
Diferit de. 1. Tipul de date: numeric, alfanumeric i logic. 9 Operator relaional (de comparare): non-egalitate de valori.
Remarc. Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 este diferit de operand2) este adevrat.

Exemplu:

<script> a=7; b=7; c=8; nume1=Maxim; document.write(nume1!=a); // afieaz true; document.write(<br />); document.write(a!=b); // afieaz false; document.write(<br />); document.write(nume1!=maxim); // afieaz true; document.write(<br />+(nume1!=Maxim)); // afieaz false document.write(<br />+(c!=a)); // afieaz true </script> !== operand1 !== operand2
Non identic cu. 1. Tipul de date: numeric, alfanumeric i logic. 9 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 nici de acelai tip cu operand2) este adevrat.

Exemplu:

Figura 2.51
(continuare)

<script> a=7; b=7; nume1=Maxim; document.write(nume1!==a); // afieaz true; document.write(<br />); document.write(a!==b); // afieaz true; document.write(<br />); document.write(nume1!==maxim); // afieaz true; document.write(<br />+(nume1!==Maxim)); // afieaz false </script>

65
&& operand1 && operand2

I.
Remarci: 9 Operator logic I (AND). 9 Returneaz TRUE dac cele dou expresii returneaz valoarea TRUE. 9 Acest operator este foarte des utilizat n bucle (for, while) i n teste (if ... else).

Exemplu:

Exemplu:

<script> a=4; b=6; nume1=Maxim; document.write((a>2)&&(b==6)); // afieaz true; document.write(<br />); document.write((a>2)&&(b==nume1)); // afieaz false; </script> <script> 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> || operand1 || operand2
SAU (OR).
Remarci: 9 Operator logic SAU (OR). 9 Returneaz TRUE dac una din cele dou expresii returneaz valoarea TRUE. 9 Acest operator este foarte des utilizat n bucle (for, while) i teste (if ... else).

Exemplu:

Exemplu:

<script> a=4; b=6; nume1=Maxim; document.write((a>2)||(b==6)); // afieaz true document.write(<br />); document.write((a>2)||(b==nume1)); // afieaz false </script> <script> a=4;b=6;nume1=Maxim; if((a>2)||(b==6)){ document.write(a este mai mare ca 2); document.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 singur instruciune.
Remarci: 9 Valoarea returnat este cea care aparine ultimei instruciuni. 9 Acest operator 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=+c); // afieaz c=6; document.write(<br />); document.write(d=+d); // afieaz d=7; </script> ?: condiie1 ? cod1:cod2

Condiie. 1. Tipul de date: numeric, alfanumeric i logic. 9 Operator de test (condiie).

Remarci: 9 Este utilizat pentru a crea un test rapid sub forma: expresielogic ? DacDa: DacNu. 9 Expresielogic este o expresie care returneaz TRUE sau FALSE. 9 DacDa: instruciune care va fi executat dac rezultatul evalurii expresielogic este TRUE. 9 DacNu: instruciune care va fi executat dac rezultatul evalurii expresielogic este FALSE.

Exemplu:

<script> a=2; (a>10)?alert(adevarat):alert(false); </script>

delete

<script> a=2; if(a>10) alert(adevarat); else echivalent cu alert(false); </script> delete obiect delete obiect.Proprietate delete Array[Index]

tergere. 1. Tipul de date: obiect. 9 Operator de tergere a proprietii obiectului.

Remarci: 9 terge o proprietate a unui obiect creat cu new. 9 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); document.write(v); //afieaz 1,2,3,7 delete v[2]; //este ters al 3-lea element document.write(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 true i azi este undefined </script>

67
a=new Number(); a.valoare=13; x=delete a.valoare; //x ia valoarea true i a.valoare este nedefinit </script> new obiect= new Constructor

Nou. 1. Tipul de date: obiect. 9 Operator de creare a unui nou obiect.

Remarci: 9 Creeaz o nou instan a unui obiect cu ajutorul unui constructor. 9 new este utilizat pentru crearea instanelor urmtoarelor obiecte: Array;

Boolean; Date; Function, Number; Object; RegExp; String.

Exemplu:

<script> //crearea obiectului astzi var astazi=new Date(); //crearea obiectului matrice var matrice=new Array(); //crearea obiectului Object var obiect=new Object(); obiect.prenume=stejrel </script>
. (punct) obiect.Proprietate obiect.Metoda obiect.Eveniment

Exemplu:

Punctul (.) este utilizat pentru a putea accesa proprieti, metode sau evenimente ale unui obiect. 1. Tipul de date: obiect. 9 Operator de acces.

<script> //acces la metoda write() a obiectului document document.write(Au nnebunit salcmii!); </script> typeof typeof(operand) typeof operand
Tipul de date.
Remarci: 9 Returneaz sub form de ir de caractere tipul de date al obiectului sau al variabilei indicate. 9 n tabelul 1 se prezint pe dou coloane: tipul de dat i irul de caractere 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 salcamii</a> </body> ( ) Function(Argumente)
Utilizat pentru invocarea metodei unui obiect sau parametrii unei funcii. 1. Tipul de date: obiect. 9 Operator de invocare.

Exemplu:

<script> /*Argumentul Bine ati venit! este transmis metodei write() a obiectului Document*/ document.write(Bine ati venit!); /*argumentele 8,10 sunt transmise functiei 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. 9 Operator de matrice.

Exemplu:

Figura 2.51
(continuare)

<script> //acces la elementele unei matrici var matrice=[7,5,3,1]; document.write(matrice[0]); document.write(<br />); //afieaz 7 document.write(matrice[2]); document.write(<br />); //afieaz 3 </script>

69
! !Operand

Exemplu:

Operator logic (NOT). Returneaz TRUE dac data este FALSE i invers.

<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 returneaz 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 asociativitii i prioritii acestora.
Rang de prioritate
1 2 3 4 5 Figura 2.52 6 . [] () ++ acces la proprieti acces la matrici (arrays) regrupare 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:

! delete new typeof void */% + + < <= > >= == != === !== && || ?: = *= , /= +==

%=

NOT logic tergerea unei proprieti sau a valorii unei matrici crearea unui obiect determinarea tipului de date evaluarea fr returnarea valorii nmulire, mprire, modulo adunare, scdere concatenare mai mic, mai mic sau egal mai mare, mai mare sau egal egal diferit identic (egalitate de valori i de tip) non-identic I SAU condiie afectare (atribuire/asignare) afectare cu calcul evaluare multipl

9 Expresiile sunt evaluate n funcie de prioritatea operatorilor. 9 Parantezele au o prioritate foarte ridicat. Expresiile din paranteze sunt evaluate primele.

Dac exist mai multe nivele de paranteze, expresiile sunt evaluate ncepnd cu parantezele aflate cel mai n interior. 9 Asociativitatea joac un rol, de exemplu, n cazul combinrii unei adunri i unei concatenri (vezi figura 2.53).

<script> document.write((7+9+abc)); //afieaz 16abc document.write(<br />); document.write((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, Number, Boolean v pot fi de un real folos. Ele v permit s accesai constante ( , true, false) 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() etc.). Nu este nevoie s creai obiectul Math: el se creeaz n mod automat de ctre navigator (exist n toate programele JavaScript). Proprietile obiectului Math sunt constante matematice iar metodele sale sunt funcii matematice.

Number, cel de-al doilea obiect matematic, este un obiect predefinit al limbajului
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 (Not a Number). JavaScript reprezint aceste valori ca proprieti ale obiectului Number. Pentru a crea un nou obiect Number, utilizai funcia special numit constructor, Number() i cuvntul cheie new (figura 2.54). <script> var numar_clienti=1234; //declarare 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 sau 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, SQRT2 abs(), acos(), asin(), atan(), ceil(), cos(), exp(), floor(), log(), max(), min(), 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

Math.E

Constanta lui Euler.

Exemplu:

<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 Math.LOG10E

Logaritm n baz 10 din e.

Figura 2.56

Exemplu:

<script> document.write(Math.LOG10E); //afieaz 0.4342944819032518 </script> LOG2E Math.LOG2E

73

Exemplu:

Logaritm n baza 2 din e.

<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 Math.SQRT1_2

Exemplu:

1/ 2 .
<script> document.write(Math.SQRT1_2); //afieaz 0.7071067811865476 </script> SQRT2 Math.SQRT2

Figura 2.56
(continuare)

2.
<script> document.write(Math.SQRT2); //afieaz 1.4142135623730951 </script>

Exemplu:

Metodele obiectului Math

Metodele cele mai frecvent folosite ale obiectului Math sunt prezentate n detaliu n figura 2.57.
Metod Sintax

abs()

Math.abs(ValoareNumeric)

Valoare absolut.
Remarc. n Tabelul 2 se prezint rezultatele funciei abs() pentru cteva argumente speciale. 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+)=+rez1); //afieaz abs(-57)=57

74
document.write(<br />); document.write(abs(+b+)=+rez2); //afieaz abs(85)=85 </script> acos() Math.acos(ValoareNumeric)

Exemplu:

Arc cosinus.
Remarc. Pentru valori ale argumentului: >1; < 1; NaN rezultatul este NaN.

<script> a=0.9965; rezultat=Math.acos(a); document.write(acos(+a+)=+rezultat); </script> asin() Math.asin(ValoareNumeric)

Arc sinus.
Remarc. n Tabelul 3 se prezint rezultatele funciei asin() pentru cteva argumente speciale. 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); </script> atan() Math.atan(ValoareNumeric)

Arc tangent.

Exemplu:

<script> a=0.9965; rezultat=Math.atan(a); document.write(atan(+a+)=+rezultat); </script> ceil() Math.ceil(ValoareNumeric)

Numr ntreg superior cel mai apropiat.
Remarc. n Tabelul 4 se prezint cteva argumente speciale i rezultatul corespunztor. Tabelul 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); //afieaz ceil(-4.223)=-4 </script>

75
cos() Math.cos(ValoareNumeric)

Cosinus.

Exemplu:

<script> a=0.9965; rezultat=Math.cos(a); document.write(cos(+a+)=+rezultat); </script> exp() Math.exp(ValoareNumeric)

Exponeniala.

Exemplu:

<script> a=5; rezultat=Math.exp(a); document.write(exp(+a+)=+rezultat); </script> floor() Math.floor(ValoareNumeric)

Numr ntreg inferior cel mai apropiat.

Exemplu:

<script> a=-4.223; rezultat=Math.floor(a); document.write(floor(+a+)=+rezultat); //afieaz 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.609437912431002 </script> max() Math.max(ValoareNumeric1, ValoareNumeric2)
Valoare maxim.
Remarc. n Tabelul 5 se prezint cteva argumente speciale ale metodei i rezultatele corespunztoare. 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 corespunztoare. 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); //afieaz 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=Math.random(); document.write(a+<br />); } </script>

<script> /*genereaz 4 numere aleatoare cuprinse ntre 0 i 25*/ for(i=0;i<5;i++){ a=Math.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 corespunztoare. 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); rezultat3=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.sin(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 corespunztoare. 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 sqrt(25)=5 </script> tan() Math.tan(ValoareNumeric)

Tangent

Figura 2.57
(continuare)

Exemplu:

<script> a=0.9965;

78
rezultat=Math.tan(a); document.write(tan(+a+)=+rezultat); //afieaz tan(0.9965)=1.545483358938326 </script>

Mai multe despre obiectul matematic Math

Exist dou inconveniente majore ale limbajului JavaScript, pe care le putei ntlni n efectuarea calculelor matematice care conin numere zecimale: 9 timpul de execuie (JavaScript este relativ lent!); 9 precizia.
Aplicaie Scriei un program JavaScript care calculeaz i afieaz ct fac:

9 0.121*100; 9 0.119*100. n figura 2.58 se prezint documentul (X)HTML complet n care s-a inserat script-ul aplicaiei [3].

Figura 2.58

Rezultatele execuiei script-ului sunt afiate n figura 2.59.

Figura 2.59

Remarci:

9 Rutinele interne ale limbajului JavaScript nu sunt att de precise pe ct ne 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 conin multe zecimale! 9 Nici precizia funciilor trigonometrice nu este infailibil! 9 Pentru a rezolva problema afirii rezultatelor cu multe zecimale scriei o funcie personalizat care trunchiaz numrul zecimal la un numr de zecimale dorit, nainte de a-l afia (vezi Conversaia 8).

Obiectul Number
Obiectul Number faciliteaz gestiunea numerelor. Proprietile sale sunt constante care 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_INFINITY toExponential(), toFixed(), toPrecision(), toString() -

Constructorul Number()
Nu este obligatoriu s creai explicit obiecte Number. Dac totui ... insistai folosii constructorul 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 returneaz 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 </script> 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.NaN

Valoare numeric non valid. Ea este returnat printr-o metod precum parseFloat() sau parseInt() atunci cnd o valoare matematic nu poate fi returnat.

Figura 2.62

NEGATIVE_INFINITY

Number.NEGATIVE_INFINITY

Figura 2.62
(continuare)

Valoarea minus infinit. Identic cu Infinity.

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); //afieaz .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)

Exemplu:

Rotunjete un numr cu precizia indicat ca parametru. Dac acest parametru este egal cu 1, numrul este rotunjit la ntreg.

<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 valorile 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>

9 Obiectul Number este folosit de foarte puine ori. Este util atunci cnd trebuie s accesai anumite constante (vezi proprietile obiectului Number). 9 Crearea obiectelor Number este implicit n cele mai multe cazuri. 9 Putei crea obiecte Number atunci cnd trebuie s le adugai proprieti.

82

Obiectul Boolean
Obiectul Boolean este folosit pentru a transforma o valoare non-boolean ntr-o valoare boolean. Obiectul Boolean nu poate conine dect dou valori: TRUE sau FALSE. Fia obiectului 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

Exemplu:

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.

Boolean()

Figura 2.65
Exemplu:

<script> //crearea unui obiect boolean vid a=new Boolean(); a=true; </script> <script> //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

9 Obiectele booleene care conin una din urmtoarele valori: 0, false, null, NaN, undefined, sunt evaluate FALSE. 9 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 inserai script-ul, cu una din metodele prezentate mai jos: 9 Metoda 1 inserai script-ul n corpul paginii; 9 Metoda 2 plasai script-ul n antet-ul paginii; 9 Metoda 3 utilizai fiiere surs externe; 9 Metoda 4 creai un gestionar de evenimente. Folosii unul din editoarele prezentate mai jos: 9 Notepad; 9 Macromedia Dreamweaver MX. Metoda 1 1. Creai documentul (X)HTML (figura 2.66).

84

Figura 2.66 2. Inserai elementul <script> ... </script> n corpul documentului (figura 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:

9 Proprietatea Math.PI a obiectului Math este prezentat n detaliu n figura 2.57. 9 Metoda pow() a obiectului Math este prezentat n detaliu n figura 2.57. 5. Afiai rezultatele (figura 2.70).

85

Figura 2.70
Remarci:

9 Posibilitatea de combinare a tag-urilor (X)HTML i a instruciunilor JavaScript este una

din caracteristicile cele mai importante ale unui navigator care suport JavaScript. n realitate, aceast facilitate constituie esenialul Web-ului dinamic i interactiv. 9 n figura 2.71 este prezentat documentul (X)HTML complet, editat cu 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 de cuvntul cheie return (vezi figura 2.74).

Figura 2.74
Remarci:

9 Revedei paragraful Definii o funcie (Conversaia 2). 9 Revedei paragraful Returnarea unei valori (Conversaia 2). 9 De regul, cea mai bun locaie pentru definirea unei funcii este antet-ul (<head> ... </head>) documentului. ntruct instruciunile din antet sunt executate primele,
avei certitudinea c funcia este definit nainte de a fi utilizat.

4. Apelai funcia calcul(3) din script-ul plasat n corpul documentului (vezi figura 2.75).

87

Figura 2.75
Remarci:

9 Apelai funcia calcul() pentru mai multe valori ale razei: calcul(4), calcul(5). 9 n figura 2.76 este prezentat documentul XHTML complet editat cu Macromedia
Dreamweaver.

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:

9 Atributul src transmite interpretorului JavaScript c dorii s includei codul JavaScript n fiierul calcul.js. 9 Extensia .js nu este obligatorie dar prezena ei identific fiierele care conin codul
surs JavaScript.

Metoda 4 Indicaie. Folosii gestionarul de evenimente onClick n tag-ul <input> al unui formular (vezi figura 2.80).

...

89
<form name=form1> Raza?<input type=textname=raza /><br /> Aria:<input type=textname=raza /><br /> <input type=button name=buton1 value=calculeaza aria rezervorului sferic onClick=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 matematice pe care le cunoatei? 4. Cum se creeaz obiectul Math? 5. Cum creai un nou obiect Number i un nou obiect Boolean? 6. Precizai rezultatele execuiei urmtoarelor script-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
9 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/ js56jsorijscript.asp 9 http://developer.netscape.com/tech/javascript 9 http://www.zdnet.com/devhead/filters/0,,2133214,00.html 9 http://webdeveloper.earthweb.com/webjs 9 http://javascript.about.com/?once=true&

Conversaia 3

Instruciunile limbajului JavaScript

n aceast conversaie:
f f f f f f f f f f f f f

Tipuri de instruciuni JavaScript for. Aplicaii EXEMPLUL 3.1 JAVASCRIPT while. Aplicaii EXEMPLUL 3.2 JAVASCRIPT do ... while. Aplicaii EXEMPLUL 3.3 JAVASCRIPT for ... in. Aplicaii if, if...else, switch. Aplicaii EXEMPLUL 3.4 JAVASCRIPT Instruciunile continue i break Instruciunea with Tem

Instruciunile limbajului JavaScript

JavaScript este un limbaj de nivel nalt, bazat pe obiecte, care permite programatorilor 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 decizie, s creeze bucle (iteraii) etc. Cea mai mare parte a instruciunilor JavaScript sunt recunoscute de toate navigatoarele, dar ... mai exist i divergene!

92
Pentru a programa n limbajul JavaScript folosii urmtoarele tipuri de instruciuni (vezi 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 poriuni de cod i interceptarea eventualelor erori declararea unei variabile simplificarea 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 instruciuni: 9 for (pentru) 9 for...in structur de iteraie cu numr cunoscut de pai; structur de tip for care permite baleierea tuturor elementelor unei matrici sau ale unui obiect; 9 while (ct timp) structur de iteraie cu numr necunoscut de pai, condiionat anterior; 9 do...while structur de tip while, condiionat posterior.

for (pentru)
Utilizai instruciunea for pentru a crea cicluri (bucle) n programele dumneavoastr JavaScript. 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 actualizeaz valoarea variabilei de control a instruciunii. Bucla este executat ct timp CondiieContinuare returneaz TRUE.

unde,

Exemplu: <script>

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 continuati?); } </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

9 for conine trei parametrii separai prin punct i virgul.

94
9 Cei trei parametrii ai instruciunii for sunt opionali; dac omitei unul dintre ei, separatorul punct i virgul (;) este obligatoriu. 9 Acoladele nu sunt indispensabile n iteraiile care conin o singur instruciune, dar se recomand s le folosii fr a ine cont de numrul de instruciuni din corpul iteraiei. Procednd n acest mod vei putea aduga cu uurin noi instruciuni fr a provoca erori de sintax. 9 Vei constata c utilizm foarte des numele de variabil i, ca identificator al variabilei de control. Este o tradiie (vezi limbajul Forth) n programare. 9 Instruciunile for pot fi imbricate (suprapuse) dar nu trebuie s se intersecteze. 9 Principiul de funcionare al instruciunii for este urmtorul: 1. Se iniializeaz variabila de control a instruciunii (ExpresieIniial). 2. Se testeaz CondiieContinuare. 3. Dac rezultatul evalurii CondiieContinuare este true se execut instruciunile din corpul buclei; n caz contrar script-ul execut instruciunea imediat urmtoare dup acolada de sfrit (}). 4. Se execut ExpresieFinal i se testeaz CondiieContinuare. 9 Pentru a provoca o ieire imediat din bucla for folosii instruciunea

break.
9 Pentru a relua ciclul fr a mai fi executate instruciunile care urmeaz folosii instruciunea 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 egal cu diametrul) toate pline cu benzin. Raza acestora variaz de la 2 la 10 m (vezi figura 3.3) cu pasul 1 (2, 3, ..., 10 m). Dorim s calculm i s afim ntr-o pagin Web cantitatea de lichid (benzin) din cele nou rezervoare cilindrice echilaterale, iar n final 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 rezolva aceast problem? Cei mai grbii dintre dumneavoastr se i gndesc deja la instruciunile JavaScript necesare scrierii script-ului. Banal, extrem de banal vor exclama poate muli dintre dumneavoastr! Formulele de calcul pot constitui un impediment, dar vi le vom aminti noi:

m (1) V

unde, este densitatea, m reprezint masa, iar V este volumul.

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! Este 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 pare 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 variabile 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 benzin 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 din fiecare rezervor i masa total de benzin. Lista de funciuni ale script-ului 1. Citete densitate benzin (d) 2. Iniializeaz variabila s cu zero 3. Tiprete cap tabel 4. Calculeaz volumul rezervorului (V) 5. Calculeaz masa (m) de benzin din fiecare rezervor 6. nsumeaz m n s Figura 3.5 7. Afieaz raza (r) i masa rezervorului (m) 8. Iniializeaz 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 Conversaia 2): 9 Varianta 1 limbaj natural structurat; 9 Varianta 2 scriere formalizat (apropiat de limbajul JavaScript). Varianta 1 n figura 3.6 se prezint pseudocodul n limbajul natural structurat (Varianta 1). Pseudocodul (Varianta 1) 1. Citete densitatea benzinei, afieaz capul de tabel, calculeaz, nsumeaz i afieaz cantitatea de benzin din 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 benzin. 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 echilateral a crui raz variaz de la 2 la 10 m, cu pasul de 1 m, repet aciunile: 1.6.1. Calculeaz volumul. 1.6.2. Calculeaz masa de benzin. 1.6.3. nsumeaz masa de benzin n cantitatea total de benzin. 1.6.4. Afieaz raza i masa de benzin. 2. Tiprete un rnd de 30 de liniue. Figura 3.6 3. Afieaz masa total de benzin. 4. Stop.

(continuare)

Remarci:

9 Evident, aciunea 1 nu reprezint o aciune primitiv, impunndu-se n acest sens o 9 Pentru rafinarea aciunii neprimitive 1, vom folosi metoda analizei descendente
(top-down). rafinare (descompunere) a acestora (aciunile 1.1, ..., 1.6).

9 Prezentarea 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+---+MASA); 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:

9 n general, script-urile conin secvene alctuite din grupuri de instruciuni care se

execut numai n anumite condiii, ct i grupuri de instruciuni care se execut de attea ori ct timp sau pn cnd este ndeplinit o condiie. 9 Formatul general al blocului de secven este ilustrat 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, respectiv punctul unic de ieire din bloc i poart aceeai etichet (cu majuscule sau minuscule). 9 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 incrementarea 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 9 Funcia liniutza() este apelat din trei puncte ale corpului (<body>...</body>) al documentului. 9 Funcia liniutza() mai poate fi scris i sub forma (vezi figura 3.13).

principal

function liniutza(){ document.write(<br />); for(i=1;i<=30;i++){ document.write(-); } Figura 3.13 }

9 Pentru calculul volumului rezervorului cilindric echilateral am utilizat proprietatea Math.PI i metoda Math.pow(r,3) care aparin obiectului Math (vezi obiectul matematic Math).

100
Aplicaii Scriei un script care calculeaz i afieaz suma primelor 100 numere ntregi. Indicaie. n figura 3.14 este prezentat script-ul aplicaiei. Inserai acest script ntr-un document (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 script ntr-un document (X)HTML.

Figura 3.15 Scriei dou bucle imbricate care genereaz i afieaz tabla nmulirii. Indicaie. n figura 3.16 este prezentat script-ul aplicaiei. Inserai acest script ntr-un document (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 ntr-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 sub denumirea de structur de iteraie cu numr necunoscut de pai, condiionat anterior. Deosebirea dintre while i for const n faptul c instruciunea while nu include n declaraia sa 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 }

Exemplu:

Instruciunile (din corpul buclei (cod JavaScript ) sunt executate ct timp rezultatul evalurii condiie este TRUE.

Exemplu:

Exemplu:

Exemplu:

Exemplu:

Figura 3.19

<script> i=1; while(i<=7){ document.writeln(i); ++i; } document.writeln(Ati afisat 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++; } </script> <script> i=10; while(i>0){ document.write(i); --i; } document.write(La revedere!); </script> <script> i=1; while(i<=100){ document.writeln(i); i*=2; } </script>

103
Mai multe despre while
9 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 bucl ct timp rezultatul evalurii condiie este TRUE. 9 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. 9 Buclele while au o arie de utilizare mai larg dect buclele for, dar decizia n a le alege v aparine numai dumneavoastr! 9 Numrul minim de execuii a cod JavaScript este zero. 9 Instruciunea break provoac o ieire imediat din bucl. 9 Instruciunea continue provoac reluarea buclei fr a mai fi executate instruciunile care urmeaz.

EXEMPLUL 3.2 JAVASCRIPT

Problema din EXEMPLUL 3.2 JAVASCRIPT este aceeai cu problema din EXEMPLUL 3.1 JAVASCRIPT. Singurele deosebiri apar n urmtoarele dou faze: 9 proiectarea script-ului n pseudocod s-a nlocuit for cu while (vezi figura 3.20). Pseudocodul REZERVOARE PRELUCRRI 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
9 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; apoi 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)

Exemplu:

do...while execut cod JavaScript cel puin o dat, apoi este

reexecutat ct timp rezultatul evalurii condiie este TRUE.

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> <script> s=20; i=1; do{ s+=i; i++; } while(i<=100); alert(Suma primelor 100 de numere naturale este+s); </script>

Mai multe despre do...while

9 do...while funcioneaz exact ca instruciunea

while, cu

deosebirea c nu evalueaz condiie dect dup prima iteraie. n felul acesta se garanteaz c script-ul dintre acolade va fi executat cel puin o dat. 9 Instruciunea break provoac o ieire forat din bucl. 9 Instruciunea continue provoac reluarea buclei fr a mai fi executate instruciunile care urmeaz.

EXEMPLUL 3.3 JAVASCRIPT

Problema din EXEMPLUL 3.3 JAVASCRIPT este aceeai cu problema din EXEMPLUL 3.1 JAVASCRIPT. Singurele deosebiri apar n fazele de: 9 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

9 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 aceeai secven de instruciuni pentru toate proprietile unui obiect. Aceast instruciune poate fi util, de exemplu, atunci cnd dorii s afiai numele tuturor proprietilor unui obiect. Instruciunea 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 (Proprietate) reprezint o proprietate a obiectului.

unde, Proprietate este un element literal generat de

Exemplu:

Exemplu:

Figura 3.25

<script> //afieaz toate proprietile obiectului window i valorile acestuia for (x in window){ document.writeln(x+:+window[x]+<br />); } </script> <script> //afieaz toate proprietile unui obiect creat obiect=new object; obiect.nume=maxim; obiect.zi=luni; obiect.culoare=cepia; for(x in obiect){ document.write(x+:+ obiect[x]+<br />); } </script>

Mai multe despre for...in

9 Pentru a folosi cu uurin instruciunea for...in este bine s avei cunotine elementare despre obiectele JavaScript. 9 Putei folosi for...in cu orice obiect JavaScript, indiferent dac are sau nu proprieti. 9 for...in funcioneaz i cu alte obiecte particularizate, ca de exemplu o variabil. 9 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 instruciuni: 9 if (dac) structur de decizie cu o singur alternativ. 9 if else (dac n caz contrar) structur de decizie cu dou alternative. 9 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 diferit n funcie de valorile variabilelor sau de informaiile furnizate de ctre utilizator. Principala instruciune de decizie (selecie) a limbajului JavaScript este if. Instruciunea 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> numarator=4; numitor=0; if(numitor>0){ a=numarator/numitor; document.write(a); } </script> <script>

109
var sex=f; if(sex==f){ document.write(Buna ziua, doamna!); } document.write(La revedere!); </script> <script> nume=Popescu; prenume=Ion; if((nume==)||(prenume==)){ document.write(Lipsesc valori!); } </script> <script> if((nume==)&&(prenume==)){ document.write(Lipsesc doua valori); } </script> <script> if((a<100)&&(a>250)){ document.write(Ce parere aveti de acest test?); } </script> <script> <script> if(a){ if(a==true){ b=ADEVARAT; b=ADEVARAT; } } echivalent cu alert(b); alert(b); </script> </script>

Exemplu:

Exemplu:

Exemplu:

Exemplu:

Figura 3.26
(continuare)

Mai multe despre if

9 if este o structur de decizie (decision structure, n limba englez) care testeaz i compar diferite valori. 9 Dac partea a doua a unei instruciuni if poate conine orice instruciune JavaScript, prima parte (condiie) trebuie s respecte o sintax precis. 9 Condiie (expresie condiional) conine n general dou valori (constante, expresii, variabile etc.) care se compar una cu cealalt. Cele dou valori sunt separate printr-un operator relaional. 9 Nu confundai operatorul de egalitate (== sau ===) cu operatorul de afectare (=), chiar dac ele se citesc egal. 9 Nu de puine 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 interpretorului 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: instruciuni 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 este obligatoriu. El conine instruciuni care se execut dac rezultatul evalurii condiie este

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 rezultatul 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.write(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(Sex nedefinit!); } document.write(<br />); document.write(La revedere!); </script> <script> var oras=Ploiesti; if(oras==Paris){ document.write(Locuinta dumneavoastr este in capitala 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.write(Locuinta dumneavoastr este la Sinaia);} else if(oras==Ploiesti){ document.write(Locuinta dumneavoastr este la Ploiesti);} </script> <script> var tara=Romania; var oras=Vaslui; if(tara==Romania){ if(oras==Bucuresti){ document.write(Locuinta ta de vara este in capitala Romaniei);} else{ document.write(Locuinta ta de vara este in Romania, in provincie);} } else{ document.write(Locuinta ta de vara nu este in Romania); } </script>

112
Mai multe despre if ... else
9 Instruciunile if ... else pot fi imbricate. 9 Ca i instruciunea if, else poate fi urmat de una sau mai multe instruciuni delimitate de acolade ({}). 9 Nu uitai de expresiile 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 </script>

switch
Instruciunea switch este prezentat n detaliu n figura 3.30.
Instruciune Sintax

switch

switch (variabila) case Valoare1 cod1 JavaScript break; case Valoare2 cod2 JavaScript break; default: cod3 JavaScript }

Switch controleaz coninutul unei variabile cu una sau mai multe

instruciuni case. Instruciunea break este indispensabil. Instruciunea default este facultativ. Ea conine instruciunile care urmeaz a fi executate n situaia n care nici unul 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; case 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); if (oras==Peris) document.write(Locuiti la Peris); if (oras==Paris) document.write(Locuiti la Paris); if (oras==Roman) document.write(Locuiti la Roman); if (oras==Roma) document.write(Locuiti la Roma); document.write(Sunteti un itinerant!); document.write(La revedere!); Figura 3.31 </script> <script> var oras=Ploiesti; switch(oras){ case Ploiesti: document.write(Locuiti la Ploiesti); break; case Peris: document.write(Locuiti la Peris); break; case Paris: document.write(Locuiti la Paris); break; case Roman: document.write(Locuiti la Roman); break; case Roma: document.write(Locuiti la Roma); break; default: document.write(Sunteti un itinerant!); } document.write(La revedere!); Figura 3.32 </script>

114 EXEMPLUL 3.4 JAVASCRIPT

Formularea problemei Vom relua problema din EXEMPLUL 3.1 JAVASCRIPT simplificnd-o dup cum urmeaz. Vom considera 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) din rezervor. Raza rezervorului trebuie s aib o valoare pozitiv. Densitatea benzinei i raza se vor introduce n mod dinamic.

Analiza problemei Formatul datelor de ieire (fereastra n care se afieaz pagina Web), tabela de variabile i specificaiile de programare sunt ilustrate n figurile: 3.34, 3.35, 3.36. a) RAZA -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 benzin dintr-un rezervor cilindric echilateral de raz pozitiv. Intrri. Densitatea benzinei, raza rezervorului. Ieiri. Masa de benzin din rezervor. Lista de funciuni ale script-ului 1. Citete densitate benzin (d) 2. Citete raza rezervorului (r) 3. Afieaz capul de tabel 4. Testeaz valoarea (introdus dinamic) razei 5. Calculeaz volumul rezervorului (v). Figura 3.36 9. 7. 8. 6. Calculeaz masa (m) de benzin din rezervor Afieaz raza (r) i masa rezervorului n caz de eroare, afieaz raza (r) i mesajul: RAZA NEGATIV 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 negativa); ELSE 3 v=2r m=d*v WRITE(r+...+m) ENDIF END DO LINIUTZA END BEGIN Afieaz un rnd de 30 de 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 nceputul 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 ... while, 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; } document.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++){ if(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(SFARSIT); </script>

break
Instruciunea break provoac o ieire imediat din blocul de instruciuni curent. Instruciunea 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 rezultatul evalurii condiiei este TRUE atunci se iese din bucl. break poate fi de asemenea 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 blocului, proprietile menionate fr ca obiectul corespunztor s fie indicat se refer la obiectul 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 bloc de instruciuni.

120
Exemplu:

Figura 3.44

<script> //Urmtorul cod repet metoda document.write() de patru ori document.write(Pe trotuar, alturi salt+<br />); document.write(Dou fete vesele,+<br />); document.write(Zu c-mi vine s las balt,+<br />); document.write(Toate interesele+<br />); //cuvntul cheie with 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 balt,+<br />); write(Toate interesele+<br />); } </script>

Pentru un cod scurt (vezi i figura 3.45) interesul utilizrii instruciunii with nu este evident, dar cnd trebuie s accesm acelai obiect n cadrul unei proceduri sau cnd utilizm un obiect predefinit precum Math, with v ajut s ctigai foarte mult timp. with(nume){ 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 testeaz condiia la nceput: for; while; do ... while. 3. Instruciunea do ... while asigur: minimum o iteraie; maximum o iteraie; zero iteraii. 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 continue? 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
9 www.bdml.net/listes 9 www.natural.com/JavaScript 9 http://www.webcoder.com 9 http://JavaScript.internet.com/miscellaneous/ 9 http://www.geocities.com/jeffery_p_sanders/ 9 http://JavaScript.internet.com/forms/checkbox_changer.html

Conversaia 4

Obiectele interne String, Array

n aceast conversaie:
f f f f f f

Obiectele limbajului JavaScript. Prezentare general Obiectele interne Obiectul String. 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: 9 Obiecte interne (integrate) fac parte din limbajul JavaScript. 9 Obiectele navigatorului 9 Obiecte personalizate nu fac parte din limbajul JavaScript, 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 constante 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 predefinit JavaScript care permite manipularea orelor i a datelor calendaristice. Numele de obiect al unui obiect Function este considerat ca o variabil reprezentnd valoarea curent a funciei create cu (sub forma unei matrici) valoarea argumentelor transmise 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. Faciliteaz gestiunea numerelor. Obiect JavaScript din care deriv toate celelalte obiecte. Obiect predefinit JavaScript dedicat expresiilor regulate. Furnizeaz suportul pentru manipularea i prelucrarea irurilor de caractere.

Obiectul String
JavaScript stocheaz irurile de caractere ca obiecte String. Fia obiectului String este 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(), sub(),

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 utilizat ca funcie. n acest caz el convertete valoarea n ir de caractere. Dac nici o valoare 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; //String() utilizat ca funcie a=7; b=FALSE; document.write(String(a)+<br />); document.write(String(b)+<br />); </script>

126
Proprietile obiectului String
Proprietile obiectului String sunt prezentate n detaliu n figura 4.4.
Proprietate Sintax

length

ir.length

Exemplu:

Conine lungimea irului de caractere.

Figura 4.4

<script> demo_sir=nvai s privii dincolo de aparene!; lungime=demo_sir.length; //afieaz 40 </script>

Remarc. Un obiect String (scriei S cu majuscul) este diferit de datele (ir de caractere) pe care le conine.

Metodele obiectului String

Metodele obiectului String pot fi clasificate dup cum urmeaz: 9 Metode pentru formatarea irurilor de caractere big(), blink(),

bold(),

fontcolor(),

fontsize(),

italics(),

small(), strike(), sub(), sup().

9 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 prezentate n detaliu n figura 4.5.
Metode Sintax

big()

ir.big()

Figura 4.5

ncadreaz un ir de caractere cu tag-urile <big>...</big>.

Exemplu:

<script> demo_sir=nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.big(); document.write(nou_demo_sir); </script>

127
blink() ir.blink()

Exemplu:

ncadreaz un ir de caractere cu tag-urile <blink>...</blink>.

<script> demo_sir=nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.blink(); document.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(); document.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.fontcolor(#FF0000); document.write(nou_demo_sir); </script> fontsize() ir.fontsize(Valoare)
Atribuie irului de caractere dimensiunea indicat cu tag-ul <font> de atributul size.

Exemplu:

<script> demo_sir= nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.fontsize(4); 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(); document.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(); document.write(nou_demo_sir); </script>

128

Exemplu:

strike()
ncadreaz un

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

<strike>...</strike>. <script> demo_sir= nvai s privii dincolo de aparene!; nou_demo_sir=demo_sir.strike(); document.write(nou_demo_sir); </script> sub() ir.sub()

(continuare)

ncadreaz un ir de caractere cu tag-urile _....

Figura 4.5

sup()

ir.sup()

ncadreaz un ir de caractere cu tag-urile ^....

Metode pentru manipularea irurilor de caractere

Metodele obiectului String pentru manipularea irurilor de caractere sunt prezentate n detaliu n figura 4.6.
Metode Sintax

anchor()

ir.anchor(ir)

Convertete un ir de caractere ntr-o ancor numit cu tag-ul <a> i atributul name.

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> charCodeAt() ir.charCodeAt(Valoare)

Returneaz valoarea codului Unicode al caracterului situat n poziia indicat n irul de caractere.

Exemplu:

concat()

ir.concat(ir)

Adaug un nou ir de caractere la sfritul unui alt ir de caractere. Metoda este echivalent cu operatorul +.

<script> sir_1=sir_1.concat(Felicitri pentru rbdarea de a ne fi descoperit!); document.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)

Exemplu:

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 caracter are indexul 0). Metoda face diferen ntre majuscule i minuscule. n caz contrar metoda returneaz valoarea -1.

Exemplu:

Exemplu:

<script> email=ld@canaba.com; r=email.indexOf(@); document.write(r); //afieaz 2 </script> <script> email=pepito@brazil.com; r=email.indexOf(i,6); document.write(r); //afieaz 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 eec, 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>.

Exemplu:

match

ir.match(expresieregulat)

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

<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 n cel 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 caracter 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 canaba.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 expresiile regulate.

Exemplu:

substr()

ir.substr(Valoare1,Valoare2)

Extrage o parte din irurile de caractere i returneaz irul extras.

<script> text=ion@yahoo.com; r=text.substr(0,3); document.write(r); //afieaz ion </script> 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 ion </script>

131
toLowerCase() ir.toLowerCase()

Exemplu:

Convertete un ir de caractere n minuscule.

<script> text=Mitic i Petric; r=text.toLowerCase(); document.write(r); //afieaz mitic i petric </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(rezultat); //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? Dac da, folosii obiectul intern Array (matrice). O matrice (array) este o list de valori 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 figura 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(element1,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. Numerotarea 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 limbajul JavaScript nu se pot crea matrici cu mai multe dimensiuni, dar putei imbrica mai 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> <script> ListaCulori=new Array(7); </script> <script> ListaCulori=new Array(rosu,galben,albastru); </script>

Exemplu:

Figura 4.8

133
Exemplu:

<script> ListaCulori=[rosu,galben]; </script> <script> culoare1=rosu; culoare2=galben; culoare3=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=new Array(3); linie[0]=new Array(a11,a12,a13,a14); linie[1]=new Array(a21,a22,a23,a24); linie[2]=new Array(a31,a32,a33,a34); document.write(linie[1][2]+<br>); //Se afieaz a23 document.write(linie[0]); //Se afieaz a11, a12, a13, a14 </script> <script> ListaCulori=new Array(rosu,galben,albastru,verde); document write(ListaCulori+<br />); //Se afieaz rosu, galben, 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(mere+<br>); //Se afieaz ionatan, creeti, dulci mere[1]=parmen-auriu; document.write(mere); </script> <script> /*Afiarea elementelor unei matrici cu o bucl for*/ student=new Array(Alin,Bogdan,Catalin,Dan); for(i=0;i<4;i++){ document.write(student[i]+<br>); } </script>

134
Proprietile obiectului Array
Proprietile obiectului Array()sunt prezentate n detaliu n figura 4.9.
Proprietate Sintax

length

matrice.length

Exemplu:

Conine numrul de elemente al unei matrici. Putei modifica valoarea acestei proprieti. Reducnd numrul de elemente, elementele se suprim pornind din dreapta matricii.

Exemplu:

Figura 4.9

<script> lista_numere=new Array(3,7,9,50,20,23,2); document.write(lista_numere.length+ 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.write(<br>+lista_numere.length+ numere <br>); for(i=0;i<lista_numere.length;i++){ document.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, Element2,...)

Exemplu:

Metoda este utilizat pentru concatenarea a dou matrici.

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_numere1.concat(lista_numere2); document.write(lista_numere3.length+ numere <br />); for(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.write(lista_numere3.length+ numere <br />); for(i=0;i<lista_numere3.length;i++){ document.write(lista_numere3[i]+); } </script> join() matrice.join() matrice.join(Separator)
Metoda este utilizat pentru convertirea unei matrici ntr-un ir de caractere. Argumentul Separator servete la separarea elementelor in ir. Fr argument, metoda join() utilizeaz 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()

Exemplu:

Metoda suprim ultimul element al unei matrici. Proprietatea length este modificat n mod automat. Metoda returneaz valoarea elementului suprimat. Metoda pop() nu cere nici un argument. <script language=javascript type=text/javascript> lista=new Array(1,9,47); el_suprimat=lista.pop(); document.write(Elementul suprimat: +el_suprimat+<br />); document.write(lista); </script>

push()

matrice.push()

Exemplu:

Metoda adaug noi elemente la sfritul matricii. Proprietatea length este modificat n mod automat.

<script language=javascript type=text/javascript> culori=new Array(rosu,galben); adaug=culori.push(albastru); document.write(Numrul de elemente: culori.length+ <br />); document.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,albastru); document.write(culori+<br />); culori_invers=culori.reverse(); document.write(culori); </script>

136
shift() matrice.shift()

Exemplu:

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 automat. Metoda returneaz valoarea elementului suprimat i nu cere nici un argument. <script language=javascript type=text/javascript> lista_numere=new Array(13,20,22); suprim=lista_numere.shift(); document.write(Elementul suprimat: +suprim+<br />); document.write(lista_numere); </script>

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 argumente: ValoareNumerica1 (indic rangul primului element care urmeaz a fi extras), ValoareNumerica2 (indic rangul imediat urmtor ultimului element care urmeaz a fi extras). Dac primul argument este negativ, atunci rangul se calculeaz pornind de la sfritul matricii. El este ntotdeauna de rang 0. Dac cel de-al doilea argument este negativ, el indic rangul (calculat, pornind de la sfritul matricii) ultimului element care urmeaz a fi extras. Dac nu este menionat, caracterele sunt extrase ncepnd cu rangul 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 de la care trebuie s nceap suprimarea elementelor matricii este obligatoriu. Al doilea argument (NumarElemente) precizeaz numrul elementelor ce urmeaz a fi suprimate. Argumentele urmtoare (Element1,Element2,...) reprezint elementele care urmeaz a fi inserate n matrice ncepnd cu rangul indicat pentru primul element. Metoda returneaz lista elementelor suprimate.

Figura 4.10
(continuare)

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,albastru); 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 length este modificat n mod automat.

Exemplu:

Figura 4.10
(continuare)

<script language=javascript type=text/javascript> culori=new Array(rosu,galben,albastru); culori.unshift(verde,violet); document.write(culori); //se afieaz verde,violet,rosu,galben,albastru </script> sort() matrice.sort() matrice.sort(Funcie) matrice.sort() sau metoda sort fr argument sorteaz
elementele unei matrici care conine valori alfanumerice;

matrice.sort(Funcie) permite sortarea valorilor numerice. Funcie primete doi parametri 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 citesc 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 de 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, precizndu-se att rezervorul ct i ziua respectiv.

Analiza problemei Formatul datelor de input/output (intrare/ieire), tabela de variabile, specificaiile 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 rezervoare Variabile de stare st: livrrile totale pe zile i rezervoare s: sume pariale, livrri pe zile z: vectorul numelor zilelor sptmnii imax, imin, jmax, jmin: indicii livrrilor maxime i minime din matricea a Variabile de iesire b: vectorul livrrilor medii zilnice d: vectorul livrrilor medii pe rezervoare max: maximul livrrilor min: minimul livrrilor

Figura 4.12

Specificaii de programare Descriere. Programul editeaz situaia livrrilor de benzin efectuate zilnic din trei rezervoare cilindrice echilaterale. Livrrile, pe zile i pentru fiecare rezervor n parte, se citesc de la tastatur. Programul mai afieaz maximul i minimul livrrilor nsoite de rezervorul i ziua respective. Intrri. Matricea livrrilor pe rezervoare i zile. Ieiri. Lista cu situaia livrrilor. Lista de funciuni ale script-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, miercuri, joi, vineri) pentru rezervorul R3. 4. 5. Figura 4.13 Calculeaz media livrrilor pe zile. Calculeaz rezervoare. media livrrilor pe 9. 6. 7. 8. Calculeaz maximul livrrilor. Calculeaz minimul livrrilor. Afieaz maximul livrrilor, numrul rezervorului i ziua. Afieaz minimul livrrilor, numrul rezervorului i ziua. 10. Trunchiaz media (livrrilor 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 vineri //aloca spatiu de memorie si //citeste livrarile pe fiecare rezervor de la tastatura LIVI FOR(i=0;i<3;i++) LIVJ FOR(j=0;j<5;j++) READ ai,j LIVJ ENDFOR LIV ENDFOR // 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++) IFMAX IF(max<ai,j) max=aij imax=i jmax=j IFMAX ENDIF IFMIN IF(min>ai,j) min=aij imin=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 WRITE trunchiaza( b[k]) FORK ENDFOR WRITE "MEDIA" FORTRUNC FOR(j=0;j<4;j++) WRITE trunchiaza(d[j]) FORTRUNC ENDFOR WRITE "Livrarea maxima: " max WRITE "s-a facut din rezervorul: R" imax WRITE "in ziua de" Zjmax WRITE "Livrarea minima:" min WRITE " 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 zecimale TRUNCHIAZA BEGIN Parametrii: x- valoare reala s=transforma in sir de caractere x i=pozitia punctului zecimal in sir IFCOPY IF(i-1) s=copiazasubsir(s,0,i+2) IFCOPY ENDIF RETURN s TRUNCHIAZA END

FORK

Figura 4.14
(continuare)

Codificarea n limbajul JavaScript

n figura 4.15 este prezentat documentul (X)HTML complet.

<html> <head> <title>Exemplul 4</title> <script language="javascript"> <!--var Z = new Array("Luni","Marti","Miercuri","Joi","Vineri"); a=new Array(3); a[0]=new Array(5); a[1]=new Array(5); a[2]=new Array(5); for(i=0;i<3;i++) for(j=0;j<5;j++) {k=i+1; a[i][j]=parseFloat(prompt("Livrare din rezervorul R"+k+ " ziua:"+Z[j],0)); } // --> </script> Figura 4.15 </head>

144
<body> <center> <h3>SITUATIA LIVRARILOR DE BENZINA PENTRU REZERVOARELE R1 R2 R3 </h3> <script language="javascript"> function trunchiaza(x) { var s=""+x; i=s.indexOf("."); if(i!=-1){ s=s.substring(0,i+3); } return s; } // CALCULUL MEDIILOR PE ZILE var i,j; B = new Array(5); for(j=0;j<5;j++) { S=0; for(i=0;i<3;i++) S=S+a[i][j]; B[j]=S/3; } // 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; } D[3]=ST/15; // DETERMINAREA MAXIMULUI SI MINIMULUI max=a[0][0]; min=a[0][0]; imax=0;imin=0; jmax=0;jmin=0; for(i=0;i<3;i++){ for(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;} } } Figura 4.15 imin++;imax++; (continuare)

145
//AFISARE REZULTATE document.writeln("<center><table border=1 bgcolor#efefff><tr>"); document.writeln("<td><b>ZIUA</b><td><b>R1</b><td> <b>R2</b><td><b>R3</b><td><b>MEDIA</b></td></tr>"); for(k=0;k<5;k++) { document.writeln("<tr><td>" + Z[k]+"</td>"); for(j=0;j<3;j++) { document.writeln("<td>" + a[j][k]+ "</td>"); } document.writeln(" <td> " +trunchiaza( B[k])+ "</td></tr>"); } document.writeln("<tr><td><b>MEDIA</b>"); for(j=0;j<4;j++) document.writeln("<td><b>" + trunchiaza(D[j])+" </b></td>"); document.writeln("</tr>"); document.writeln("</table></center><p><p>"); document.writeln("<font size=+1 color=green>Livrarea maxima:"+max+" s-a facut din rezervorul: R"+imax+" in ziua de "+Z[jmax]+"</font>"); document.writeln("<p><font size=+1 color=green>Livrarea minima:"+min+" s-a facut din rezervorul: R"+imin+" in ziua de "+Z[jmin]+"</font>"); </script> Figura 4.15 </body> (continuare) </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 valori ale razelor unor rezervoare cilindrice echilaterale. Pentru fiecare valoare a razei se calculeaz i afieaz cantitatea de benzin din rezervor. Script-ul verific totodat ca valorile razelor rezervoarelor s fie numere pozitive. De asemenea, script-ul calculeaz i afieaz masa total de benzin din rezervoare. n felul acesta, cu acelai script se pot rezolva probleme ce difer prin numrul de rezervoare.

Analiza problemei Problemele care se pun n aceast etap privesc n mod special alctuirea tabelei de variabile, mai precis identificarea variabilelor de intrare ale script-ului. Numrul rezervoarelor, necunoscut n problem, trebuie furnizat ca o variabil de intrare (n) n momentul execuiei script-ului, naintea citirii datelor propriu-zise (razele rezervoarelor). Ct privete numrul variabil de raze, de asemenea necunoscut n momentul scrierii script-ului vom folosi ca variabil de intrare o matrice(array) 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 primei poziii, iar prelucrarea se efectueaz ct timp valoarea acestui indice nu depete o valoare final.

n figura 4.17, 4.18, 4.19 sunt prezentate: formatul datelor de ieire, tabela de variabile, 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 benzin (s) dintr-un numr oarecare (n) de rezervoare cilindrice echilaterale (acest numr este furnizat ca parametru). Script-ul citete valorile razelor rezervoarelor ntr-un 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, script-ul afieaz mesajul: Raza negativ. Valoarea densitii benzinei (d) se introduce n mod static. Intrri. Se introduc de la tastatur numrul rezervoarelor cilindrice echilaterale 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 (densitatea benzinei). Afieaz un rnd de 30 de =. Afieaz raza, masa. Pentru fiecare rezervor (cilindric echilateral): 6.1 6.2 Citete valoarea razei unui rezervor. Valideaz datele introduse dup cum urmeaz: pentru fiecare articol se verific dac valoarea razei citite 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 rezervorului. 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(raza+ +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 metodele pentru formatarea irurilor de caractere? 5. Ce realizeaz urmtoarele metode ale obiectului String:

indexOf(); substr();
toLowerCase(). 6. Cum se creeaz obiectul Array? 7. Ce realizeaz urmtoarele metode ale obiectului Array?

concat(); toString;
sort(). 8. Se consider irul de caractere: sir=Protopopescu Augustin; Precizai ce valori returneaz urmtoarele metode ale obiectului String: alert(sir.charAt(3)); //afieaz ...?... alert(sir.charCodeAt(3)); //afieaz ...?... alert(sir.indexOf(0)); //afieaz ...?... alert(sir.indexOf(0,8)); //afieaz ...?... alert(sir.indexOf(z,8)); //afieaz ...?... 9. Se 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.substr(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 returneaz 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 rezultatele obinute n urma execuiei urmtoarelor metode: alert(g.sort()); //afieaz ...?... alert(g.sort(sortare)); //afieaz ...?... 14.Care este efectul metodei join()? Care este relaia sa cu metoda split() a obiectului String? 15.Identificai erorile de sintax din urmtoarele script-uri: Figura 11.3 (Conversaia 11, pagina 5); Figura 11.5 (Conversaia 11, pagina 5).

152
Vizitai site-urile
9 www.bdml.net/listes 9 www.natural.com/JavaScript 9 http://www.webcoder.com 9 http://www,dannyg.com/examples/ol2/index.htm

Conversaia 5

Obiectele (interne) RegExp, Date, Arguments

n aceast conversaie:
f f f f f f

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 regulate nu sunt primordiale n programarea JavaScript, dar ele sunt universale (foarte multe limbaje de programare le utilizeaz) i pot s v simplifice ... viaa odat ce ele au fort asimilate.
Remarci:

9 Implementarea expresiilor regulate n limbajul JavaScript a fost preluat direct din

limbajul Perl.

9 Expresiile regulate sunt puin mai ... greu de digerat, dar ele reprezint o funcie 9 9 9 9

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 telefon, a adreselor etc. O expresie regulat este un obiect JavaScript. Utilizai (la maximum) expresiile regulate n formularele dumneavoastr deoarece ele v garanteaz date fiabile (vezi Conversaia 8). Crearea expresiilor regulate este foarte asemntoare cu crearea irurilor (strings, n limba englez).

154 Obiectul RegExp

Obiectul RegExp() este un obiect predefinit (built-in), care nu depinde de navigator. Fia obiectului RegExp() este prezentat n figura 5.1.
Fia obiectului RegExp
Cum se creeaz obiectul? Proprieti:

constructorul RegExp() $, $&, $_, $\, $+, $n, global, ignoreCase, index, input, lastIndex, lastMatch, lastParen, leftContext, multiline, rightContext, source compile(), 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). Atribut (cel de-al doilea parametru) stocheaz sub forma unui ir de caractere atributele de identificare ale modelelor (tiparelor). Cele trei atribute ale obiectului RegExp sunt urmtoarele:

g cutare global; gsete toate apariiile posibile. i n cursul cutrii nu face deosebire ntre majuscule i minuscule. m cutare multilinie (vezi zona textarea din cadrul unui formular). gi cumuleaz opiunile g i i.

Expresiile regulate pot fi create i n mod implicit. n acest caz, se atribuie modelul (tiparul) ncadrat ntre mai multe bare oblice, direct unei variabile. Cele dou metode de definire a unei expresii regulate sunt riguros echivalente. Slash-urile (/) nu sunt necesare n constructorul RegExp(), deoarece Figura 5.2 se poate face distincie ntre acesta i constructorul

String().

155
Caracterele de repetiie utilizate n identificarea modelelor (tiparelor) sunt prezentate 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 puin 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 prezentate 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 din intervalul m la n care apare n irul de cutare. Orice caracter care nu se afl n intervalul 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 opusul 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]) Identificare 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 un 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 expresiilor 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[$\]

Exemplu:

Returneaz textul situat la dreapta ultimului text gsit. Echivalent cu

RightContext. <script language="javascript" type="text/javascript"> var model=/ion/i; model.test("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.test("Ion Ionescu"); document.write(RegExp["$&"]); //afiseaza Ion </script>
$_ RegExp[$_]
Returneaz irul de caractere n care a fost efectuat cutarea. Echivalent cu

Exemplu:

input.

Figura 5.6

<script language="javascript" type="text/javascript"> var model=/ion/i; model.test("Ion Ionescu"); document.write(RegExp["$_"]); //afiseaza Ion </script>

157
$ RegExp[$]

Exemplu:

Returneaz textul situat la stnga ultimului text gsit. Echivalent cu

LeftContext.

<script language="javascript" type="text/javascript"> var model=/ion/i; model.test("Nume: Ion Ionescu"); document.write(RegExp["$'"]); //afiseaza Nume: </script>
$+ RegExp[$+]
Returneaz textul gsit prin ultima sub-expresie a modelului utilizat. Echivalent cu lastParen.

Exemplu:

<script language="javascript" type="text/javascript"> var model=/(ion)|(ionescu)/ig; model.test("Nume: Ion Ionescu"); document.write(RegExp["$+"]); //afiseaza Ionescu </script>
$n RegExp.$n
$1, $2, , $9 returneaz primele 9 sub-iruri ale modelului.

Exemplu:

global
returneaz false.

RegExp.global

Returneaz true dac atributul g (cutare global) a fost definit; n caz contrar

<script language="javascript" type="text/javascript"> model=/cartof/g; model.test("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 minuscule) 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.

Figura 5.6

Exemplu:

(continuare)

<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

Exemplu:

Returneaz irul de caractere n care a fost efectuat cutarea.

<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 caracter 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 Ionescu </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: </script>
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.

Figura 5.6

Exemplu:

(continuare)

<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 identificarea 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)

Figura 5.7

Caut un model n text i returneaz true/false.

Exemplu:

(continuare)
Remarci:

<script language="javascript" type="text/javascript"> var model=/ion/i; rezultat=model.test("Nume: Ion Ionescu"); document.write(rezultat); //se afiseaza true </script>

9 Metodele: compile(), exec() i test() de tip RegExp impun ca obiectul String n care se face cutarea s fie transmis ca argument. 9 Metoda exec() modific de asemenea mai multe proprieti ale matricei returnate, ale modelului i ale obiectului RegExp: Matricea (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 (EXEMPLUL 5 JAVASCRIPT) se dorete ca situaia livrrilor de benzin s fie expediat prin e-mail, la o adres specificat de ctre utilizator. EXEMPLUL 5 JAVASCRIPT verific dac adresa e-mail este format din caractere valide. n acest sens se va crea un model RegExp(re) care s includ urmtoarele reguli: 9 adresa trebuie s nceap cu cel puin un caracter (plasat la stnga simbolului @); 9 adresa trebuie s conin simbolul @; 9 adresa trebuie s conin cel puin un caracter dup simbolul @; 9 adresa poate conine caracterele: . sau - dar nu unul dup cellalt; 9 adresa trebuie s se termine cu punct (.) urmat de cel puin dou caractere. n 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 cele 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 rezervoarele 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 este 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 figura 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 stare st: suma livrrilor totale pe zile i rezervoare s: sume pariale pe zile rval: starea 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 rezervoare b: vectorul mediilor livrrilor pe zile d: vectorul mediilor livrrilor pe rezervor 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 introducere a adresei de email. 3. Rspunde la evenimentele generate de butonul Trimite email. 4. Rspunde la evenimentele generate de Figura 5.10 zona de editare. 5. Valideaz 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 prin email.

Proiectarea script-ului Pseudocodul pentru EXEMPLUL 5 JAVASCRIPT este prezentat n figura 5.11. Pseudocodul

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 vineri //aloca spatiu de memorie si //citeste livrarile pe fiecare rezervor de la tastatura FOR(i=0;i<3;i++) FOR(j=0;j<5;j++) READ ai,j ENDFOR ENDFOR // aloca spatiu 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 mediilor 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 ENDFOR di=s/5

163
FORMEDII
ENDFOR d3=s/15 // determinarea maximului si minimului max=a0,0 min=a0,0 imax=0 imin=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 trunchiaza(d[j]) ENDFOR WRITE "Livrarea maxima: " max WRITE "s-a facut din rezervorul: R" imax WRITE "in ziua de" Zjmax WRITE "Livrarea minima:" min WRITE " s-a facut din rezervorul: R"imin WRITE " in ziua de "+Zjmin WRITE " Trimite situatie prin e-mail" //afiseaza forma de introducere a adresei de email WRITE "<Form> ... " //raspunde la evenimentele generate de butonul Trimite Email IF(se apasa butonul 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 zecimale TRUNCHIAZA BEGIN Parametrii: x- valoare reala s=transforma in sir de caractere x i=pozitia punctului zecimal in sir IFCOPY IF(i-1) s=copiazasubsir(s,0,i+2) IFCOPY ENDIF RETURN s TRUNCHIAZA END VERIFICAADRESA BEGIN //valideaza valoarea introdusa in zona de text adresa rval=fals Initializeaza REGEXP re cu modelul: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/ s=adresa.value rval=re.test IFVALID IF(!rval) WRITE mesaj de eroare: "Adresa gresita" IFVALID ENDIF RETURN rval VERIFICAADRESA END //formeaza corpul mesajului de email FORMEAZA_AFIS BEGIN sbody= "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+= trunchiaza( b[k]) FORKMESAJ ENDFOR sbody+= "MEDIA" FORTRUNC FOR(j=0;j<4;j++) sbody+= trunchiaza(d[j]) FORTRUNC ENDFOR sbody+= "Livrarea maxima: " max sbody+= "s-a facut din rezervorul: R" imax sbody+= "in ziua de" Zjmax sbody+= "Livrarea minima:" min sbody+= " s-a facut din rezervorul: R"imin Figura 5.11 sbody+= " in ziua de "+Zjmin (continuare) FORMEAZA_AFIS END

Codificarea n limbajul JavaScript

165
n figura 5.12 este prezentat documentul (X)HTML complet.

<html> <head> <title>Exemplul 5</title> <script language="javascript"> <!--var Z = new Array(" Luni "," Marti ","Miercuri"," Joi "," Vineri "); var sbody; a=new Array(3); a[0]=new Array(5); a[1]=new Array(5); a[2]=new Array(5); for(i=0;i<3;i++) for(j=0;j<5;j++) { k=i+1; a[i][j]=parseFloat(prompt("Livrare din rezervorul R"+k+" ziua:"+Z[j],0)); } B = new Array(5); D = new Array(4); function trimite_email() { var sadr=document.f2.adresa.value; document.location.href="mailto:"+sadr+"?subject= teste"+"&body="+sbody; } function verificaAdresa() { var rval=false; var re; re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/; var s=document.f2.adresa.value; rval=re.test(s); if ( !rval) { alert('Adresa E-mail:'+s+' este incorecta'); document.f2.adresa.focus(); document.f2.adresa.select(); } return rval; } function trunchiaza(x) { var s=""+x; i=s.indexOf("."); if(i!=-1){ s=s.substring(0,i+3); } else { s=s+".00"; } return s; } function formeaza_afis(){ sbody="| ZIUA | R1 | R2 | R3 | MEDIA |"+"&lt;br&gt;"; for(k=0;k<5;k++) { sbody+="|" + Z[k]; for(j=0;j<3;j++) { sbody+="|" + trunchiaza(a[j][k]); }
Figura 5.12

166
sbody+="|" +trunchiaza( B[k])+ "|%13"; }

sbody+="| MEDIA "; for(j=0;j<4;j++) sbody+="|" + trunchiaza(D[j]); sbody+="| \r\n \r\n"; sbody+="Livrarea maxima:"+max+" s-a facut din rezervorul: R"+imax+" in ziua de "+Z[jmax]+"\r\n"; sbody+=" Livrarea minima:"+min+" s-a facut din rezervorul: R"+imin+" in ziua de "+Z[jmin]+"\r\n"; } // --> </script> </head> <body> <center> <h3>SITUATIA LIVRARILOR DE BENZINA PENTRU REZERVOARELE R1 R2 R3</h3> <script language="javascript"> // CALCULUL MEDIILOR PE ZILE var i,j; for(j=0;j<5;j++){ S=0; for(i=0;i<3;i++) S=S+a[i][j]; B[j]=S/3; } // CALCULUL MEDIILOR PE REZERVOARE 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; } D[3]=ST/15; // DETERMINAREA MAXIMULUI SI MINIMULUI max=a[0][0]; min=a[0][0]; imax=0;imin=0; jmax=0;jmin=0; for(i=0;i<3;i++){ for(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 formeaza_afis(); document.writeln("<center><table border=1 bgcolor=#efefff><tr>"); document.writeln("<td><b>ZIUA</b><td><b>R1</b><td> <b>R2</b><td><b>R3</b><td><b>MEDIA</b></td></tr>"); for(k=0;k<5;k++){ document.writeln("<tr><td>" + Z[k]+"</td>"); for(j=0;j<3;j++){ document.writeln("<td>" + a[j][k]+ "</td>"); } document.writeln(" <td> " +trunchiaza( B[k])+ "</TD></Tr>"); } document.writeln("<tr><td><b>MEDIA</b>"); for(j=0;j<4;j++) document.writeln("<td><b>" + trunchiaza(D[j])+" </b></td>"); document.writeln("</tr>"); document.writeln("</table></center><p><p>"); document.writeln("<font size=+1 color=green>Livrarea maxima:"+max+" s-a facut din rezervorul: R"+imax+" in ziua de "+Z[jmax]+"</font>"); document.writeln("<p><font size=+1 color=green>Livrarea minima:"+min+" s-a facut din rezervorul: R"+imin+" in ziua de "+Z[jmin]+"</font>"); document.writeln("<p><p><font size=+2 color=#0000ff>Trimite situatia prin Email </font><p>"); document.writeln("<p><p><form name=\"f2\" enctype=\"text/plain\">"); document.writeln("<p>Adresa:<input type=\"text\" name=\"adresa\" size=\"30\" onBlur=\"verificaAdresa();\">"); document.writeln("<p><input type=\"button\" value=\"Trimite email\" onClick=\"trimite_email();\">"); </script> </body> </html>
n figura 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: 9 Verificarea adresei de e-mail se realizeaz cu gestionarul de evenimente onBlur care lanseaz n execuie funcia VerificaAdresa()(figura 5.12). 9 Funcia VerificaAdresa() utilizeaz obiectul re cu modelul prezentat n figura 5.15.

Figura 5.15 re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/;

9 Expedierea prin e-mail a raportului se realizeaz prin acionarea butonului Trimite email care lanseaz n execuie funcia trimite_email() (figura 5.12). 9 Corpul mesajului trimis 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. Indicaie. O dat calendaristic trebuie format dintr-un ir de caractere de forma zz/ll/aaaa. 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 valori cuprinse n intervalul 1 i 12. Prima cifr poate fi 0 urmat de cifre cuprinse n intervalul 1-9 sau poate fi urmat de 0, 1 sau 2. Urmeaz caracterul /. Anul este un numr 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:

9 JavaScript consider c data iniial (de referin) este 1 ianuarie 1970 (convenia
UNIX).

9 JavaScript ine evidena valorilor: or sau data calendaristic n milisecunde, ncepnd 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(), getMilliseconds(), getMinutes(), getMonth(), getSeconds(), getTime(), getTimezoneOffset(), getUTCDate(), getUTCDay(), getUTCFullYear(), getUTCHours(), getUTCMilliseconds(), getUTCMinutes(), getUTCMonth(), getUTCSeconds(), getVarDate(), getYear(), parse(), setDate(), setFullYear(), SetHours(), SetMilliseconds(), SetMinutes, SetTime(), setUTCDate(), setUTCFullYear(), setUTCHours(), setUTCMilliseconds, setUTCMinutes, setUTCMonth(), setUTCSeconds(), setYear, toDateString(), toGMTString(), toLocalDateString(), toLocaleString(), toLocalTimeString(), toString(), toTimeString(), 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, Milisecunde) 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 numai argumentele: An, Lun, Zi. Respectai ordinea argumentelor. Lunile se numr de la zero. 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()

Data.getDate()

Metoda returneaz ziua din lun.

Exemplu:

<script> data=new Date(2004,4,1); a=data.getDate(); document.write(a); ...//afieaz 1 </script> getDay() Data.getDay()

Metoda returneaz un numr care corespunde zilei sptmnii: 0 pentru duminic; 1 pentru luni etc.

Exemplu:

<script> data=new Date(2004,4,1); //1 aprilie 2004 ...a=data.getDay() document.write(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); ...//afieaz 4 </script> <script> luna=new Array(ianuarie,februarie,martie,aprilie,mai,iunie,iulie,august, septembrie,octombrie,noiembrie,decembrie); data=new Date(2004,4,1); a=data.getMonth(); document.write(luna[a]); ...//afieaz aprilie </script> getSeconds() Data.getSeconds()
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() Data.getUTCDate()
Metoda returneaz zona din lun transpus n timp UTC (Universal

Exemplu:

Coordinated Time). <script> data=new Date(2004,4,1); //1 aprilie 2004 a=data.getUTCDate(); ...//afieaz 1 </script>

Figura 5.20
(continuare)

175
getUTCDay() Data.getUTCDay()

Exemplu:

Metoda returneaz ziua din sptmn transpus n timp UTC (0 pentru duminic; 1 pentru luni etc.).

<script> data=new Date(2002,5,9); //9 mai 2002 a=data.getUTCDay(); document.write(a); ...//afieaz 0 (pentru duminic) </script> <script> ziua=new Array(duminic,luni,mari,miercuri,joi,vineri, smbt); data=new Date(2002,5,9); //9 mai 2002 a=data.getUTCDay(); document.write(ziua[a]); ...//afieaz duminic </script> getUTCFullYear() Data.getUTCFullYear()
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(); document.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(); document.write(a);...//afieaz 750 </script> getUTCMinutes() Data.getUTCMinutes()

Metoda returneaz numrul de minute (transpus n timp UTC).

Figura 5.20
(continuare)

Exemplu:

<script> data=new Date(2002,5,9,8,25,8,750); a=data.getUTCMinutes(); document.write(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.write(a); ...//afieaz 5 </script> <script> luna=new Array(Ianuarie,Februarie,Martie,Aprilie,Mai,Iunie,Iulie, August, Septembie,Octombrie,Noiembrie,Decembrie); data=new Date(2004,4,1); //1 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.write(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);...//afieaz 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 cuprins 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)

Exemplu:

Metoda modific anul ntr-un obiect Date. Aceast metod accept un argument (anul n patru cifre) i returneaz noua dat n milisecunde.

<script> data=new Date(2002,7,15); //15 august 2002 a=data.setFullYear(2004); document.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) i returneaz 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.setMilliseconds(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); document.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 de 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 milisecunde) i returneaz noua dat n milisecunde.

setUTCDate()

Data.setUTCDate()

Modific ziua din lun ntr-un obiect Date (transpus n UTC). Aceast metod accept un argument (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 patru cifre) i returneaz noua dat n milisecunde.

setUTCHours()

Data.setUTCHours()

Exemplu:

Modific ora UTC ntr-un obiect Date. Aceast metod accept un argument (ora cuprins ntre 0 i 23) i returneaz noua dat n milisecunde.

<script> data=new Date(2002,7,15,14,25,32); a=data.setUTCHours(3); document.write(a+<br/>);...//afieaz 1029381932000 document.write(data.toString()); //afieaz Thu Aug 15 05:25:32 UTC+0200 2002 </script> setUTCMilliseconds() Data.setUTCMilliseconds()
Metoda modific numrul UTC de milisecunde ntr-un obiect Date. Aceast metod accept un argument (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 (minutele ntre 0 i 59) i returneaz noua dat n milisecunde.

setUTCMonth()

Data.setUTCMonth()

Figura 5.20
(continuare)

Metoda modific luna UTC ntr-un obiect Date. Aceast metod 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 accept 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 cifre) i returneaz noua dat n milisecunde. Dat fiind interpretarea foarte diferit a navigatoarelor, 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 locul acestei metode, din motive de interpretare diferit de ctre browser, metoda toString().

toLocalDateString()

Data.toLocalDateString()

Exemplu:

Metoda returneaz data n litere, n formatul i n limba mainii pe care este executat script-ul.

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

Figura 5.20
(continuare)

toLocalTimeString()
script-ul.

Data.toLocalTimeString()

Metoda returneaz ora n formatul mainii pe care este executat

toString()

Data.toString()

Exemplu:

Metoda returneaz data i ora n litere, n limba englez.

<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.toTimeString()

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.toUTCString()
Metoda returneaz data i ora UTC n litere, n limba englez.

Exemplu:

valueOf()

Data.valueOf()

Metoda returneaz data i ora n milisecunde.

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 litere, n limba romn (Exemplu, joi 1 aprilie 2004). n figura 5.23 este prezentat documentul 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: Constructorul 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 poziie utilizai n identificarea modelelor? 7. Care este efectul utilizrii urmtoarelor metode 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); } else{ document.write(cod eronat); } Figura 5.28 </script> <script> adresa=vasile@vasile.com; model=/^[azAZ09._]+@[azAZ09._]+\.[azAZ09._]{2,4}/$; if(model.test(adresa)){ document.write(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=difMilisecunde/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 urmtoarelor instruciuni JavaScript (figura 5.31).

<script> astzi=new Date(); a=atzi.toLocalesString(); alert(a); //afieaz ...?... b=astzi.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()); //afieaz ...?... 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
9 http://www.webreference.com/programming/Javascript.html 9 http://scriptsearch.internet.com 9 microsoft.public.scripting.jscript 9 netscape.public.beta.feedback.javascript 9 netscape-devs.javascript 9 comp.infosystems.www.authoring.html

Conversaia 6

Gestionarii de evenimente JavaScript

n aceast conversaie:
f f f f

Evenimente i gestionari de evenimente Gestionarii de evenimente JavaScript Aplicaii 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 gestionar 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 particular.

Gestionarii

de

evenimente sunt funcii puternice JavaScript. Din

fericire ei sunt foarte uor de programat. De foarte multe ori este suficient o singur instruciune pentru a putea fi creai.

190
Remarci:

9 Un eveniment este o aciune care se produce n raport cu un element (fereastr,

9 9 9

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 JavaScript. De exemplu, evenimentul load, declanat automat de ctre navigator, nu se produce dect atunci cnd este ncheiat ncrcarea unui document (X)HTML ntr-un navigator. Acelai eveniment se poate aplica mai multor obiecte. Evenimentele stau la baza interactivitii documentelor Web. Cteva din evenimentele care survin n mod frecvent ct i momentul 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 clic pe un obiect. valoarea unui element este modificat. se produce o eroare la ncrcarea unui document sau a unei imagini. un element devine inactiv. un document sau o imagine se ncarc. mouse-ul se deplaseaz n afara elementului. mouse-ul se deplaseaz pe deasupra elementului. datele introduse ntr-un formular sunt terse. utilizatorul 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, evenimentul click se produce atunci cnd utilizatorul execut clic pe un obiect. n acest caz, evenimentul click este trimis gestionarului de evenimente, dac acesta exist. Pentru 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 tag (X)HTML care declaneaz evenimentul:

<tag (X)HTML gestionarEvenimente=cod JavaScript>

Remarci:

9 Codul JavaScript al unui gestionar de evenimente este inclus ntre ghilimele. 9 Observai combinaia ciudat de majuscule i minuscule la notaia standard a gestionarilor 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 onChange onControlSelect onDblClick onDragDrop onDrop onFocusIn onKeyDown onLoad onMouseOut onMove onReset onResizeEnd
Figura 6.2

onActivate onBeforeActivate onBeforeDeActivate onBeforePrint onBlur onClick onCopy onDeActivate onDragEnd onError onFocusOut onKeyPress onMouseDown onMouseOver onMoveEnd onResize onResizeStart onSubmit

onAfterPrint onBeforeCopy onBeforeEditFocus onBeforeUnload onCellChange onContextMenu onCut onDrag onDragStart onFocus onHelp onKeyUp onMouseMove onMouseUp onPropertyChange 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 form.radio, form.reset, form.text, form.textarea, form.submit

Se aplic la:

Se declaneaz nainte ca elementul s devin element activ.

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 aplic la:

Se declaneaz nainte ca elementul s fie descrcat.

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.password, form.select, form.radio, form.reset, form.text, form.textarea, form.submit onBlur
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 onCellChange
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 deschide 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 aplic la:

Se declaneaz atunci cnd un alt element devine activ n documentul printe.

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 aplic la:

Se declaneaz atunci cnd un obiect este depus peste un element dup deplasare.

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. window, frame, form, form.button, form.checkbox,

Se aplic la:

195
form.fileupdate, form.password, form.select, form.radio, form.reset, form.text, form.textarea, form.submit

onFocusIn

Se aplic la:

Se declaneaz nainte ca elementul s primeasc focus-ul (naintea evenimentului focus).

form onFocusOut
Se declaneaz dup ce elementul pierde focus-ul, imediat dup ce un alt element a primit 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.text, form.textarea, form.submit onKeyDown

Se aplic la:

Se declaneaz atunci cnd se acioneaz o tast n timp ce elementul a primit focus-ul.

document, form, form.button, form.checkbox, form.fileupdate, form.password, form.select, form.option, form.radio, form.reset, form.text, form.textarea, form.submit onKeyPress

Se aplic la:

Se declaneaz atunci cnd se menine apsat o tast, n timp ce elementul a primit focus-ul.

document, form, form.button, form.checkbox, form.fileupdate, form.password, form.select, form.option, form.radio, form.reset, form.text, form.textarea, form.submit onKeyUp

(continuare)

Figura 6.3

Se aplic la:

Se declaneaz atunci cnd este eliberat o tast n timp ce elementul a primit focus-ul.

document, form, form.button, form.checkbox, form.fileupdate, form.password, form.select, form.option, form.radio, form.reset, form.text, form.textarea, form.submit

196
onLoad

Se aplic la:

Se declaneaz atunci cnd elementul este complet ncrcat.

window, frame onMouseDown

Se declaneaz atunci cnd se acioneaz un buton al mouse-ului 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.reset, form.text, form.textarea, form.submit onMouseMove
Se declaneaz atunci cnd se deplaseaz mouse-ul iar pointer-ul este deasupra elementului.

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 onMouseOut
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 onMouseOver
Se declaneaz atunci cnd pointer-ul mouse-ului trece pe deasupra elementului. document, form, form.button, form.fileupdate, form.password, form.option, form.reset, form.textarea, form.submit form.checkbox, form.select, form.text,

Se aplic la:

onMouseUp

Se aplic la: (continuare)

Se declaneaz atunci cnd un buton al mouse-ului se relaxeaz n timp ce elementul a primit focus-ul. document, form, form.button, form.checkbox, form.fileupdate, form.password, form.select, form.option, form.reset, form.text, form.textarea, form.submit

Figura 6.3

onMove

Se aplic la:

Se declaneaz atunci cnd elementul este deplasat de ctre utilizator sau de script.

window, frame, form onMoveEnd

Se declaneaz la finele deplasrii elementului.

Se aplic la:

window, frame, form

197
onPropertyChange

Se aplic la:

Se

declaneaz

atunci

cnd

se

modific

proprietate

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

(continuare)

Figura 6.3

Se declaneaz naintea expedierii unui formular.

Se aplic la:

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 instruciune (alert) care afieaz o caset de avertisment ce conine mesajul: nvai s privii dincolo de aparene!.
1. Definii evenimentul care urmeaz a fi declanat. Evenimentul care se declaneaz (atunci cnd ultimul caracter al unui document HTML a fost ncrcat n navigator) este load cruia i corespunde gestionarul de evenimente onLoad. 2. Introducei numele gestionarului (onLoad) n tag-ul body (figura 6.4).

Figura 6.4 3. Introducei, n continuare dup semnul egal, instruciunea JavaScript alert, plasat ntre ghilimele (figura 6.5).

Figura 6.5

Remarci:

9 n aceast etap este important s v ntrebai: ce va produce gestionarul de evenimente onLoad? 9 Atunci cnd definii un gestionar de evenimente onLoad pentru tag-ul <body> evenimentul (Load) este declanat la finele ncrcrii documentului. 9 Gestionarul de evenimente onLoad (definit n tag-ul <body>) afieaz o caset de
avertisment odat cu terminarea ncrcrii paginii Web. Navigatorul verific dac un gestionar de evenimente onLoad este definit n tag-ul <body>. n situaia n care acesta este identificat, se execut instruciunea JavaScript plasat ntre ghilimele, dup semnul egal. Astfel, dup ncrcarea paginii se afieaz o caset de avertisment pentru a v avertiza c nu este ru s nvai s privii dincolo de aparene! 9 n msura n care gestionarul de evenimente este declanat odat ce documentul (X)HTML a fost ncrcat i afiat nu putei utiliza n gestionarul de evenimente onLoad instruciunea document.write sau document.open. 9 ncepnd cu versiunea 1.1 a limbajului JavaScript, 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. 9 n tag-ul <body> putei de asemenea defini gestionarul de evenimente onUnLoad. Evenimentul UnLoad este declanat atunci cnd se ncarc 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:

9 Atunci cnd utilizatorul ncarc aceast pagin Web ntr-un navigator, gestionarul de evenimente onLoad asociat paginii Web (sau documentului) unde se execut aceast 9 ncrcarea acestei pagini Web are ca efect apariia mesajului: nvai s privii dincolo
de aparene!.
aciune, va fi activat.

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:

9 n aceast variant, gestionarul nu conine dect dou instruciuni (separate prin punct
i virgul) dar el poate s conin foarte bine oricte instruciuni dorim.

9 Codul JavaScript al gestionarului de evenimente are acces complet la variabila global: pagina_incarcata. Nu uitai c variabilele globale JavaScript sunt accesibile peste
tot, inclusiv n gestionarul de evenimente.

9 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:

9 Gestionarul de evenimente onLoad apeleaz o funcie (execut_Incrcare) cu 9 Parametrul incarca al funciei definite primete valoarea TRUE ce se atribuie variabilei (locale) pagina_incarcata.
un parametru.

Utilizai un formular (X)HTML pentru afiarea urmtoarelor mesaje de ncrcare i descrcare a unei pagini Web. 9 Pagina este n curs de ncrcare!;

201
9 Pagina a fost ncrcat 9 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:

9 Tag-ul <body> conine doi gestionari de evenimente: onLoad; onUnLoad. 9 Gestionarul onLoad este activat n momentul n care pagina a fost ncrcat integral. 9 Gestionarul onUnLoad este activat n momentul n care ncrcai o alt pagin Web n
navigator.

9 Nu este ntotdeauna recomandabil s afiai o caset de avertisment atunci cnd

vizitatorul prsete o pagin Web. Numeroi vizitatori nu agreeaz ideea de a executa clic ntr-o caset de avertisment pentru a putea prsi pagina dumneavoastr Web. n consecin, aceast tehnic trebuie exploatat cu pruden!

Creai script-uri care afieaz mesaje n bara de stare a navigatorului. Indicaie. Una din 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 link-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-ului, iar evenimentul MouseOut se produce atunci cnd v deplasai cu mouse-ul n zona exterioar legturii. Cele dou evenimente sunt utilizate pentru a modifica textul care se afieaz n bara de stare a navigatorului.
Remarc. n mod implicit, URL-ul unei legturi se afieaz n bara de stare a navigatorului n 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, utilizai proprietatea JavaScript status. Gestionarul de evenimente onMouseOut este utilizat pentru a terge textul afiat n bara de stare n momentul n care mouse-ul este deplasat n exteriorul legturii.
Remarci:

9 Atunci cnd utilizai gestionarul de evenimente onMouseOver pentru a afia mesaje n

bara de stare, n momentul n care executai clic pe un link, mesajul personalizat nlocuiete URL-ul afiat n mod implicit. Asigurai-v c mesajul

dumneavoastr este cel puin la fel de util ca URL-ul! 9 Gestionarul de evenimente onMouseOver 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. 9 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 mesaje, care reprezint link-uri ce se afieaz ntr-o list simpl. 1. Definii o funcie (descriere) care accept un parametru (text) pentru a afia un mesaj n bara de stare (figura 6.11).

Figura 6.11
Remarci:

9 Parametrul text conine mesajul care se va afia n bara de stare a navigatorului. 9 ntruct funcia returneaz TRUE, n bara de stare se va continua s se afieze mesajul
pn cnd acesta va fi ters.

2. Definii o funcie (tergere) pentru a terge mesajul, apelabil din gestionarul de evenimente 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 propriu-zise i gestionarii de evenimente (onMouseOver, onMouseOut) care apeleaz cele dou funcii: descriere, stergere (figura 6.14).

Figura 6.14
Remarci:

9 Funciile (descriere, stergere) sunt definite n header-ul documentului. 9 Fiecare 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 evenimentelor 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, funcia necesar pentru tergerea textului din bara de stare trebuie s cuprind dou etape: 9 Etapa 1 Definirea mesajului (textului) care urmeaz s se afieze n bara de stare, ca un ir de caractere specific; 9 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 o funcie (descriere) n care includei instruciunea

window.status (figura 6.17).

Figura 6.17 2. Adugai metoda setTimeOut (figura 6.18).

Figura 6.18
Remarci:

9 Primul parametru definete starea ferestrei la o valoare null (); 9 Al doilea parametru 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 pregtit 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 gestionar de evenimente n interiorul unui document (X)HTML, putei crea o funcie JavaScript care va face oficiul de gestionar de evenimente. Avei de asemenea posibilitatea s creai gestionari de evenimente condiionali, de a-i activa sau a-i dezactiva, sau nc de a modifica funcia (ca gestionar de evenimente) de o manier dinamic. Pentru aceasta 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 obiectului 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 buton al mouse-ului a fost utilizat. Creai un script care afieaz n bara de stare a navigatorului 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 evenimente care permit detectarea unui clic pe un link? 3. Cnd se execut gestionarul de 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; onMouseUp; onKeyPress; onSubmit;
onReset;

210
onSelect. 6. Comentai urmtorul script (figura 6.29).

<script language="javascript" type="text/javascript"> function test (text){ window.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
9 javascript.internet.com 9 www.javascripts.com 9 www.javascript.com 9 comp.lang.javascript 9 livesoftware.javascript.developer 9 livesoftware.javascript.examples 9 de.comp.lang.javascript

Conversaia 7

Obiectele navigatorului
n aceast conversaie:
f f f f f f f f

Document Object Model (DOM) Obiectul Window. Aplicaii Obiecte de nivelul 1 Obiecte de nivelul al doilea Obiecte de nivelul al treilea Obiecte de nivelul al patrulea Obiectul Navigator. Aplicaii Tem

Document Object Model (DOM)

n conversaiile anterioare am acordat atenie limbajului de programare JavaScript i obiectelor 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-urile dumneavoastr vor putea manipula paginile Web, ferestrele i documentele. Obiectivul acestui model (DOM) este acela de a v oferi o interfa (ntre dou fee exist ... o interfa!) 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 arborescent), 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 lucrare vom examina obiectele numai pe parte de client i vom prezenta proprietile i metodele lor.
Remarc. Majoritatea obiectelor JavaScript sunt reprezentri ca obiecte ale tag-urilor (X)HTML.

n figura 7.1 sunt prezentate obiectele pe parte de client i tag-urile (X)HTML corespunztoare.
Obiect JavaScript Tag (X)HTML corespondent

Figura 7.1

Button Checkbox Hidden Fileupload Password Radio Reset Select Frame Document Layer 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> <body> <layer> sau <ilayer> <a href= /> <img /> <map> <a name= /> <applet> <embed> <form> <input type=submit /> <input type=text /> <textarea> <option>

Pe msur ce vei examina aceste obiecte vei vedea modalitile diverse n care ele sunt prezentate utilizatorilor i programatorilor n limbajul JavaScript. Lista obiectelor JavaScript este prezentat n ordine alfabetic n figura 7.2, iar ierarhia obiectelor este 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 Textarea

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: 9 Obiectul Window, de nivelul cel mai nalt (nivelul 0), pe parte de client; 9 Obiecte de nivelul 1:

Document,

Frame,

History,

Location, Event, Style;

9 Obiecte de nivelul al doilea: Anchor, Area, Applet, Form,

Image, Layer, Link, Plugin;

9 Obiecte de nivelul al treilea: Button, Checkbox, FileUpload,

Hidden, Password, Radio, Reset, Submit, Select, Text, Textarea;

9 Obiecte de nivelul al patrulea: Option.
Remarci:

9 Obiectele limbajului JavaScript pe parte de client reprezint instrumente importante cu

ajutorul crora putei genera script-uri. transpuse n obiecte.

9 n cea mai mare parte modelul obiectului este constituit din elemente (X)HTML care sunt 9 Dac pn acum ai programat n limbajului (X)HTML, din acest moment trebuie s
abordai elementele (X)HTML ca fiind nu tag-uri, ci obiecte.

214
9 JavaScript utilizeaz o ierarhie de obiecte: printe-fiu, cunoscute sub numele de Document Object Model (DOM). Aceste obiecte, organizate ntr-o structur
arborescent reprezint coninutul i componentele unui document Web.

Iat un exemplu simplu (figura 7.4) care ilustreaz modul n care un fiier (X)HTML stabilete corespondena cu DOM-ul navigatorului.

Figura 7.4

n cursul ncrcrii fiierului XHTML, navigatorul Web folosete un ansamblu complet de obiecte 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 fiierul 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 formularelor 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 Input prenume Figura 7.6 Obiectul Input email

Istoricul DOM-ului
Obiectele navigatorului sunt exterioare limbajului JavaScript dar sunt recunoscute de ctre navigatoare. Din pcate exist nc diferene ntre navigatoare, care nu de puine ori 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 sunt 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 dect obiectele de baz, toate obiectele acoperind integral componentele unui document (X)HTML. O norm de nivel 2 este n curs de apariie. Ierarhia obiectelor de care noi vorbim n aceast conversaie este cunoscut sub numele de DOM 0 iar obiectele sunt incluse 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 este afiat obiectul Document. Fiecare fereastr a navigatorului i fiecare cadru au propriul 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 exist permanent.
Remarci: 9 Mai multe obiecte window pot exista n acelai timp, fiecare reprezentnd o fereastr a navigatorului deschis. 9 Cadrele (frames, n limba englez) sunt de asemenea reprezentate prin obiecte Window (vezi Conversaia 10). 9 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, dialogTop, dialogWidth, document, event, frames[], history, innerHeight, innerWidth, length, name, navigator, offscreenBuffering, opener, outerHeight, outerWidth, pageXOFFset, pageYOffset, parent, returnValue, screen, screenLeft, screenTop, screenX, screenY, self, status, style, top, window alert(), back(), blur(), clearInterval(), clearTimeout(), close(), confirm(), createPopup(), execScript(), focus(), forward(), home(), moveBy(), moveTo(), navigate(), open(), print(), prompt(), resizeBy(), resizeTo(), scroll(), scrollBy(), scrollTo(), setActive(), setInterval(), setTimeout(), showHelp(), showModaldialog(), showModelessDialog(), stop() onActivate, onAfterPrint, onBeforeActivate, onBeforePrint, onBeforeUnload, onBlur, onControlSelect, onDeActivate, onDragDrop, onError, onFocus, onHelp, onLoad, onMouseMove, onMove, onMoveEnd, onMoveStart, onResize, onResizeEnd, onResizeStart, 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 figura 7.8.
Proprietate Sintax

closed

window.closed

Figura 7.8

Conine valoarea true (fereastra este nchis) sau false (fereastra este deschis).

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 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 JavaScript care conine obiectul Window.

... var catwindow=window.open(); catwindow.name=cat; Exemplu: navigator window.navigator

Exemplu:

Obiectul Navigator conine informaii cu privire la navigator.

... for (x in navigator) document.write(x+=+navigator[x]+<br />; ... opener window.opener

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 proprietii opener).

(continuare)

outerHeight

window.outerHeight

nlimea (n pixeli) documentului afiat n fereastr (incluznd bara de meniuri, bara de instrumente, bara de stare).

outerWidth

window.outerWidth

Limea (n pixeli) documentului afiat n fereastr (incluznd bara de meniuri, bara de instrumente, bara de stare).

parent

window.parent

Referin la fereastra/cadrul printe al ferestrei/cadrului curent.

screen
Figura 7.8

window.screen

Conine informaii privind configuraia ecranului de pe monitorul clientului.

self

window.self

218

Exemplu:

Referina la fereastra curent. Identic cu window (window.window).

window.close() identic cu: window.self.close status

window.status

(continuare)

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
Figura 7.8

window.window

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)

eaz o caset de dialog care conine un buton OK i mesajul Afi specificat. Apelarea metodei 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 script-urilor (vezi Conversaia 11).

back()
la pagina Retur History).

window.back() back()
precedent afiat n fereastr (vezi obiectul

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()
eaz o caset de dialog care conine mesajul specificat, un buton Afi OK i un buton de anulare. Returneaz TRUE dac utilizatorul execut Figura 7.9 clic pe butonul OK i FALSE dac utilizatorul 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,Limbaj)
Exemplu: <script>

Execut indicat.

expresia menionat ca i cnd ar fi un script, n limbajul

window.execScript(alert(Fatalitate),JavaScript); </script>

focus()

window.focus() focus() window.forward() forward() window.home() home()

ncarc pagina definit ca pagin de index de ctre

Transmite focus-ul ferestrei curente.

forward()

Oblig navigatorul s ncarce documentul urmtor n istoric.

home()

Navigatorul
utilizator.

dou valori pot fi pozitive sau negative.

Exemplu: <script>

window.moveBy(x,y) moveBy(x,y) Deplaseaz fereastra cu x pixeli orizontal i cu y pixeli vertical. Cele 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 (vertical). 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)

Exemplu:

Deschide o nou fereastr a navigatorului i returneaz un obiect Window pentru a o reprezenta. Dac apelai metoda open() fr parametri, vei obine o fereastr vid. Pentru a vedea ceva mai interesant, transmitei urmtorii patru parametri respectnd secvena de mai jos: URL adresa Web a paginii Web care dorii s se ncarce automat n noua fereastr. Nume ir de caractere care va fi plasat n proprietatea window.name a noii ferestre. Atribute 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 sau 1 sau valoarea false sub forma false, no sau 0. Semnificaia atributelor este urmtoarea: 9 toolbar afieaz/ascunde bara de instrumente a browser-ului 9 location prezena barei de adrese 9 directories afieaz/ascunde o bar de instrumente (Netscape) secundar cu butoane familiare 9 status afieaz/ascunde bara de stare a navigatorului 9 menubar afieaz/ascunde bara de meniuri a navigatorului 9 scrollbars afieaz/ascunde barele de derulare pe vertical i orizontal ale browser-ului 9 resizable permite/interzice redimensionarea ferestrei de browser 9 width limea n pixeli a ferestrei 9 height nlimea n pixeli a ferestrei <script> newfereastra=window.open(test.htm,titlu,toolbarno, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=100, height=100); </script>

print()

window.print() print() window.prompt(Mesaj,ConinutImplicit) prompt(Mesaj,ConinutImplicit)

Imprim coninutul ferestrei.

prompt()

(continuare) Exemplu:

Figura 7.9

Afieaz o caset de dialog care conine mesajul specificat, o zon de text pe care o completeaz utilizatorul, butonul OK i butonul de anulare. Al doilea argument este facultativ. Rspunsul implicit specificat n prompt() este afiat n zona de text. Utilizatorul poate introduce o alt valoare sau poate executa clic pe butonul OK pentru a accepta 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 valoarea 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) Redimesioneaz fereastra navigatorului la Lungime i Lime <script> self.resizeTo(50,325); </script> scroll()

Exemplu:

specificate (n pixeli).

Face s defileze coninutul unei ferestre pn la poziia specificat (x i

window.scroll(x,y) scroll(x,y)

y) n raport cu colul din stnga sus al ferestrei.

Remarc. Metoda este depit.

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 poziia x (lungime), y scrollTo() <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 setInterval()
JavaScript sau apelul unei funcii. Interval este prezentat n milisecunde. Argumente sunt transmise funciei apelate.
Remarci: 9Metoda

clearInterval() anuleaz efectul metodei setInterval(). 9Metoda 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:

Exemplu:

window.setTimeOut(Expresie, Durata,Argumente) setTimeOut(Expresie, Durata,Argumente) Execut Expresie dup Durata (n milisecunde). Expresie poate fi apelul setTimeout()
unei funcii. Argumentele (facultative) sunt transmise funciei apelate.
Remarc. Metoda

clearTimeOut()

anuleaz

efectul

metodei

setTimeOut().

(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 nchiderea unei noi ferestre. V prezentm n cele ce urmeaz cteva aplicaii simple, reprezentative pentru metodele i proprietile obiectului Window. Creai un document (X)HTML care conine un script (simplu) ce utilizeaz butoane pentru crearea i nchiderea unei ferestre. 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: 9 Documentul XHTML permite deschiderea unei noi ferestre executnd clic pe un buton (primul buton). 9 A doua fereastr este foarte mic pentru a se putea distinge de prima fereastr. 9 Al doilea buton permite nchiderea acestei ferestre. 9 Al treilea buton nchide fereastra principal a navigatorului, dup acordul utilizatorului. 9 Acest document face apel la gestionarii de evenimente onClick (cte unul pentru fiecare buton).

n figura 7.11 este prezentat pagina Web afiat n Internet Explorer, cu noua fereastr deschis.

Figura 7.11

225
Creai un document (X)HTML care conine un script (simplu) pentru deplasarea i modificarea ferestrelor. n figura 7.12 este prezentat documentul XHTML complet.

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

Creai un mic dicionar pentru vizitatorii site-ului dumneavoastr. Afiai n bleu cuvintele pe care le definii. Ori de cte ori utilizatorul va executa un clic pe unul din aceste 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 unui text la dimensiunile ferestrei. Cu ct fereastra este mai mare, cu att caracterele sunt mai mari. Punerea n pagin va fi asigurat n toate circumstanele. Definii dimensiunea de baz a caracterelor pentru dimensiuni precise ale ferestrei. Dimensiunea caracterelor se va recalcula la fiecare redimensionare a ferestrei. Script-ul redefinete stilul caracterelor pentru ntreg documentul de fiecare dat cnd fereastra i schimb 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 JavaScript.

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 obiectelor JavaScript pe parte de client conine toate celelalte obiecte pe parte de client, cu excepia obiectului Navigator. Este important s facei cunotin cu aceste obiecte, i ... s rmnei mpreun! Ele sunt:

9 9 9 9 9 9

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 obiectelor 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 documentul curent sau, mai simplu, utilizai numai

document.
Remarc. n programele JavaScript din conversaiile precedente ai fcut apel la metoda document.write pentru a afia un text ntr-un document Web. Programele la care ne referim nu utilizau dect o fereastr; n consecin, era inutil s folosii descrierea complet window.document.write.

Dac mai multe ferestre sau mai multe cadre sunt deschise, atunci vor exista mai multe 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, alinkColor, all[], anchors[], applets[], attributes[], background, bgColor, body, characterSet, charSet, childNodes[], cookie, defaultcharset, domain, embeds[], fgcolor, fileCreatedDate, fileModifiedDate, fileSize, forms[], frames[], height, images[], innerHTML, innerText, lastModified, layers[], links[], location, outerHTML, outerText, parentWindow, plugins[], protocol, readyState, referrer, scripts[], selection, style, stylesheets[], title, URL, vlinkColor, width clear(), close(), createElement(), createStyleSheet(), elementFormPoint(), getElementByld(), getElementsByName(), getElementsByTagName(), getSelection(), open(), setActive(), write(), writeln onActivate, onBeforeCut, onBeforeDeActivate, onBeforeEditFocus, onBeforePaste, onBeforeUpdate, onCellChange, onClick, onContextMenu, onControlSelect, onCut, onDblClick, onDrag, onDragEnd, onDragEnter, onDragLeave, onDragOver, onDragStart, onDrop, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseOut, 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-ului <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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Aplicatie</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <script language="JavaScript" type="text/JavaScript"> document.write("<br />Legaturi active: "+document.alinkColor); document.write("<br />Legaturi: "+document.linkColor); document.write("<br />Legaturi vizitate: "+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. Utilizai 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" height="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=document.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. Fiecare element al matricii corespunde unui set de tag-uri <applet> ... </applet>. document.applets.length returneaz numrul de applet-uri ale documentului.

bgColor

document.bgColor

Exemplu:

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. <!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>document.body</title> <meta http-equiv="Content-Type" content="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 impreuna!</b></body>"); document.write(nouFer.document.body.innerHTML); nouFer.close(); </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.cookie=numCookie; ...

233
embeds[] document.embeds[]

Matricea embeds[] conine toate elementele incorporate n documentul (X)HTML. ntr-o pagin Web, un element incorporat este plasat ntre tag-urile <embed> i </embed>. document.embeds.length returneaz numrul de elemente incorporate n document.

fgColor

document.fgColor

Culoarea textului. Corespunde atributului text al tag-ului <body> (vezi proprietatea alinkColor).

forms[]

document.forms[]

Setul de formulare coninute n documentul (X)HTML. Formularele sunt reprezentate n documentul (X)HTML prin tag-ul <form>. Fiecare formular este un element al matricii (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.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>form</title> </head> <body> <form name="form1"> <input name="zona1" type="text" id="zona1" /> <br /> <input name="zona2" type="text" id="zona2" /> </form> <form name="form2" id="form2" method="post" action=""> <input name="zona3" type="text" id="zona3" /> <br /> <input name="zona4" type="text" id="zona4" /> </form> <form name="form3" id="form3" method="post" action=""> <p> <input 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 matricii 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 documentului.

images[]

document.images[]

Setul de imagini ale documentului. Ele sunt inserate cu tag-ul <img/>. Fiecare imagine este un element al matricii (array) images[]. Ele sunt referite prin numrul lor de ordine sau prin numele lor. document.images.length returneaz numrul de imagini ale documentului. Imaginile recunosc proprietile care corespund atributelor tag-ului

<img/>: border, height, hspace, lowsrc, name, src, vspace, width. n plus, proprietatea complete conine valoarea true dac
Exemplu:

imaginea s-a ncrcat integral.

<!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>demo</title> </head> <body> <img src="sigla.jpg" name="sigla" width="150" height="300" hspace="5" vspace="10" border="0" lowsrc="siglamin.JPG" id="sigla" /> <script language="JavaScript" type="text/JavaScript"> text="Proprietatile imaginii: <br />"; text+="border= "+document.sigla.border+"<br />"; text+="complet= "+document.sigla.complete+"<br />"; text+="height= "+document.sigla.height+"<br />"; text+="hspace= "+document.sigla.hspace+"<br />"; text+="lowsrc= "+document.sigla.lowsrc+"<br />"; text+="name= "+document.sigla.name+"<br />"; text+="src= "+document.sigla.src+"<br />"; text+="vspace= "+document.sigla.vspace+"<br />"; text+="width= "+document.sigla.width+"<br />"; document.write(text); </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.getElementByld(paragraf); alert(element.innerHTML); </script> innerText document.innerText

Exemplu:

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. <script> Document.write(document.lastModified); </script> layers[] document.layers[]

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

Exemplu:

Codul culorii atribuite link-urilor din documentul (X)HTML, definite prin atributul link al tag-ului <body>.

links[]

document.links[]

Matricea links[] conine un obiect Link pentru fiecare tag

<a

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

Figura 7.22
(continuare)

Conine URL-ul documentului.

236
Exemplu:

...

<body> <script> document.write(document.location); //se afieaz, de exemplu http://www.dumitrascu.ro </script> </body> Exemplu: <script> document.write(adresa actuala: +document.location); document.location=http://www.multimedia.fr; </script> plugins[] document.plugins[]

Setul de plug-ins coninute n documentul (X)HTML. Fiecare plug-in este un element al 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) scripts[]. Ele sunt referite prin numrul lor de ordine.

document.scripts.length returneaz numrul de script-uri ale

documentului.

title

document.title

Figura 7.22
(continuare)

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 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 figura 7.23.
Metod Sintax

close()

document.close()

eaz datele ncrcate dar care nu sunt nc afiate i oprete fluxul de Afi intrare al datelor n document. Dac toate datele nu au fost ncrcate,

documentul nu este afiat integral. Aceast 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 document).

document.getElementById(id) 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 null. getElementById()
Elementele dispun de proprieti i de metode specifice obiectelor. Aceast metod este folosit de asemenea pentru detectarea navigatorului.

Exemplu: <body>

<p id="unu">Primul paragraf </p> <p id="doi">Al doilea paragraf </p> <script language="JavaScript" type="text/JavaScript"> //Modifica aliniamentul unui paragraf para=document.getElementById("unu"); para.align="center"; </script> </body> <script language="JavaScript" type="text/JavaScript"> //Detecteaza navigatorul if(document.layers) Nav="NN4"; else if((document.all)&&(document.getElementById)) Nav="IE5-IE6"; else if(document.getElementByID)Nav="NN6"; alert(Nav); </script> getElementsByName() 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 null.
Exemplu: <body>

Figura 7.23

<p id="unu">Primul paragraf </p> <p id="doi">Al doilea paragraf </p> <script language="JavaScript" type="text/JavaScript"> //Modifica aliniamentul unui paragraf para=document.getElementsByName("unu"); para[0].align="center"; </script> </body>

238
getElementsByTagName() document.getElementsByTagName(tag)

Returneaz sub form de matrice (array) lista elementelor identificate prin tag-ul indicat. Dac nu exist nici un element de tipul indicat, metoda returneaz null.

Exemplu: <body>

<p id="unu">Primul paragraf </p> <p id="doi">Al doilea paragraf </p> <script language="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; image/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 fereastra navigatorului (true) sau se vor aduga celor existente (false). Cele dou argumente sunt facultative. Aceast metod nu este indispensabil ntruct metoda write() care scrie n document realizeaz n mod automat deschiderea (open) i nchiderea (close) fluxului 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 impreuna!</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>"); </script> write() document.write(ir1,ir2)

Introduce n document: date de tip caracter, variabile i tag-uri. Pentru

Figura 7.23
(continuare)

caractere

speciale

(apostrof,

de

exemplu)

introducei

caracterele

corespunztoare.

239
Exemplu: <script>

document.write(D\ ale Carnavalului); //Afieaz Dale Carnavalului </script> writeln() document.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 metod este identic cu write().

Revenind la metodele open() i close() ale obiectului Document

Obiectul Document conine metodele open() i close() (vezi metodele obiectului Document, 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 cheam stream (flux), care corespunde unei zone rezervate de date. Datele rmn n stream pn n momentul n care navigatorul este pregtit s le afieze n fereastra sa. Va trebui s deschidei (open) iar stream-ul nainte de a-l utiliza apoi s-l nchidei (close). Metodele open() i close() efectueaz cele dou aciuni. Metoda open() indic navigatorului c dorii s scriei un nou flux de date n obiectul Document curent. Metoda close() semnaleaz sfritul aciunii de scriere; ea oblig navigatorul s afieze toate datele care au mai rmas n flux (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: 9 Utilizai document.open() pentru a deschide obiectul Document i pentru a putea din nou scrie. 9 Utilizai document.write()/document.writeln().

240
9 Utilizai document.close() pentru a indica navigatorului c ai terminat de scris n fereastra sa.
Remarci: 9 Metodele open() i close() nu deschid i nici nu nchid noile ferestre. 9 Dac utilizai 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 bine 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 plug-ins.
Remarc. MIME (Multipurpose Internet Mail Extension) este un standard pentru documentele Internet. Atunci cnd server-ul trimite un document unui browser, i se indic i tipul MIME al documentului pentru ca navigatorul s tie cum s-l afieze. Printre tipurile MIME cele mai rspndite amintim formatul HTML (tipul MIME text/html) i formatul text (tipul text/plain).

Aplicaii ale metodelor open() i close()

Analizai urmtorul document HTML (vezi figura 7.24). Precizai rolul instruciunilor: document.open() i document.close().

Figura 7.24

Script-ul prezentat ([1]) n figura 7.25 evalueaz browser-ul (Netscape, Internet Explorer) 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 adresa URL a unei ferestre specificate. Fia obiectului Location este prezentat n figura 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 reprezint pri ale URL-ului.
Proprietate Sintax

hash

document.location.hash

Exemplu:

Conine partea # (diez) a adresei Web specificate n URL.

<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 hash) </script> hostname document.location.hostname

Numele server-ului.

Exemplu:

<script> document.write(document.location.hostname); //afieaz www.ionescu.com (vezi 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 document.location.pathname
Calea de acces la document.

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

Exemplu:

Partea protocol a URL-ului (n general http).

search

document.location.search

Partea de cutare a adresei URL de dup semnul ?

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://www.yahoo.com> </form> reload() document.location.reload()
Rencarc documentul curent n fereastra browser-ului. Dac argumentul (rencrcare) are valoarea logic true documentul este rencrcat de pe server; n caz contrar el este recuperat n cache-ul navigatorului.

Exemplu:

Figura 7.28 Aplicaii

replace()

document.location.replace(URL)

nlocuiete pagina curent cu o nou pagin. Metoda nu afecteaz istoricul navigatorului. Utilizarea metodei este justificat pentru a evita revenirea la ecranele de prezentare sau la paginile temporare de interes minim.

Modificai URL-ul documentului curent. n figura 7.29 este prezentat secvena HTML corespunztoare.

Figura 7.29

244
Modificai URL-ul documentului ntr-o fereastr secundar pornind de la fereastra principal. 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 prezentat 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

Figura 7.32

Numrul de pagini din istoric.

Exemplu:

<body> <a href=JavaScript: window.history.go(window.history.length-1) >Ultimele pagini </a> </body>

245
Remarci: 9 Obiectul History mai conine i proprietile: current, previous i next care stocheaz URL-ul curent, anterior i urmtor al documentului n lista de istoric. 9 Din motive 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 figura 7.33).
Metod Sintax

back()

window.history.back()

Exemplu:

Retur la URL-ul precedent n istoric. Aceast metod corespunde unui clic pe butonul back al navigatorului.

<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 forward 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 prezentat 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

event.altkey

Figura 7.35

Returneaz valoarea logic true (adevrat) dac tasta Alt a fost acionat.

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 elementului.

layerX

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 atribuindu-i valoarea logic false.

srcElement

event.srcElement

Figura 7.35
(continuare)

Referin la elementul care a generat evenimentul.

type

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 nivelul al doilea ale obiectului Document. Subobiectele obiectului

Document sunt urmtoarele: 9 Anchor; 9 Area; 9 Applet; 9 Form; 9 Image; 9 Layer; 9 Link;
9 Plugin.

Obiectul Anchor

248
Obiectele Anchor sunt fii ai obiectului Document. Fiecare obiect Anchor reprezint 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 este prin intermediul matricii anchors[] al obiectului Document

(document.anchors[]).
Folosii matricea document.anchors[] pentru a determina numrul de ancore dintr-un document (figura 7.36). Folosii proprietatea name pentru a recupera numele unei ancore 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.write(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(document.anchors[0].name); document.write(); document.write(document.anchors[1].innerText); //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 sunt: hash (poriunea de adres URL care este
ancora, inclusiv simbolul #); host (numele calculatorului gazd (adresa IP) i portul specificate n adresa URL); hostname (numele calculatorului gazd specificat n URL); href (adresa URL complet); 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 obiectului 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=ancora2>. 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: 9 Obiectul Link v permite s lucrai cu legturi n limbajul JavaScript. 9 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

Link.hash

Figura 7.38

Reprezint o denumire de ancor n adresa URL pentru legtur, care ncepe cu caracterul #.

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

Link.target

Aplicaie

Reprezint numele obiectului Window n care este afiat legtura.

Comentai secvena de cod HTML prezentat n figura 7.39.

<a href=http://www.altavista.fr>Legtur</a> <form> <input type=button value=Schimbai legtura 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 accesare 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 nivelul al treilea. Toate obiectele de nivelul al treilea sunt subobiecte ale obiectului

Form: Button; Checkbox; FileUpload; Hidden; Password; Radio; Reset; Submit; Select; Text; Textarea.
Remarc. Obiectele de nivelul al treilea pe parte de client sunt prezentate n Conversaia 8.

Obiecte de nivelul al patrulea

Ultimul nivel de obiecte pe parte de client ale limbajului JavaScript este nivelul al patrulea. Exist un singur obiect de nivelul al patrulea: obiectul Option, care 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, onMouseMove,

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 <select> i </select>. Ea este definit prin tagurile (X)HTML <option> ... </option>. Obiectul 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 optiune</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

Figura 7.42

Rangul opiunii n lista select.

label

document.forms[].option.label

Textul alternativ al opiunii. Proprietatea corespunde atributului label al tag-ului.

selected
(false).

document.forms[].option.selected

Valoare logic (true/false) opiune selectat (true) sau nu

text
Textul opiunii.

document.forms[].option.text

value

document.forms[].option.value

Valoarea opiunii. Aceast proprietate corespunde atributului value al tag-ului <option>.

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 unui script pentru fiecare navigator, separat. Putei utiliza JavaScript pentru a identifica 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 Navigator. Ele sunt disponibile pentru toate obiectele Window ale navigatorului Netscape. Spre deosebire de Netscape Navigator, Internet Explorer creeaz un obiect Window pentru fiecare o nou fereastr. Noile proprieti rmn deci limitate la obiectul Window n care ele au fost create. Fia obiectului Navigator este prezentat n figura 7.43.
Fia obiectului Navigator

255
Obiectul printe: Subobiecte: Proprieti:

Figura 7.43

Metode: Gestionarii de evenimente:

window mimeType, plugin appCodename, appMinorVersion, appName, appVersion, browserLanguage, cooKieEnabled, cpuclass, language, mimeTypes[], onLine, platform, plugins[], product, productSub, systemLanguage, userAgent, userLanguage, vendor javaEnabled() -

Proprietile obiectului Navigator

Proprietile obiectului Navigator sunt prezentate n detaliu n figura 7.44.
Proprietate Sintax

appCodeName

navigator.appCodeName

Exemplu:

Returneaz numele codului intern al navigatorului n general Mozilla.

<script> x=navigator.appCodeName; document.write(x); // afieaz, de exemplu Mozilla </script> appName

sau Netscape.

navigator.appName

Figura 7.44

Exemplu:

Returneaz numele oficial al navigatorului: Microsoft Internet Explorer

<script> x=navigator.appName; document.write(x); // afieaz, de exemplu Microsoft Internet Explorer </script> appVersion navigator.appVersion
Returneaz numrul versiunii navigatorului actualizate i versiunea sistemului de operare. Opera este polimorf.

Exemplu:

<script> x=navigator.appVersion; document.write(x); /* afieaz, de exemplu 4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR 1.0.3705)*/ </script> browserLanguage 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

Exemplu:

Returneaz limba navigatorului . Aceast proprietate este recunoscut

Exemplu:

<script> x=navigator.language; document.write(x); // afieaz, de exemplu ro </script> mimeTypes[] navigator.mimeTypes[] Vezi obiectul mimeType. platform navigator.platform
Returneaz sistemul de operare.

Figura 7.44
(continuare)

<script> x=navigator.platform; document.write(x); // afieaz, de exemplu Win32 </script> plugins[] navigator.plugins[]

Matricea plugins[] conine lista tuturor extensiilor instalate n navigator. Vezi obiectul Plugin.

Exemplu:

userAgent

navigator.userAgent

Returneaz numele navigatorului urmat de numrul su de versiune. De fapt, este o combinaie de proprieti appCodename i

appVersion. Opera este polimorf. <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

Exemplu:

Returneaz numele navigatorului dac este vorba de Netscape 6. Pentru orice alt navigator, returneaz undefined.

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()

navigator.JavaEnabled()

Exemplu:

Returneaz valoarea logic true sau false numai dac Java este activat sau nu n navigator.

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 obiectului 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 figura 7.46 este prezentat documentul XHTML complet n care s-a inserat script-ul aplicaiei.

258

Figura 7.46

n figura 7.47 i figura 7.48 se prezint cele dou pagini Web afiate n Netscape 6, respectiv Internet Explorer.

Figura 7.47

259

Figura 7.48
Remarc. Dou elemente rein atenia: proprietatea navigator.language este afiat ca nedefinit (undefined) n Internet Explorer; Mozilla apare n cmpurile: Nume cod i Agent utilizator.

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 cele patru butoane se vor afia proprietile obiectului Navigator:

userAgent; platform; appName. Folosii gestionarul de evenimente onClick i metoda alert().

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); } function 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="Internet 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) {navig="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>Identificare navigator </h1> <hr /> <form name="form1" id="form1" method="post" action=""> <p> <input type="button" name="Button" value="Identificare completa navigator" onClick="idnavig();" /> </p> <p> <input type="button" name="Submit2" value="Sistem de operare" onClick="platforma();" /> </p> <p> <input type="button" name="Submit3" value="Nume oficial navigator" onClick="numenavig();" /> </p> <p> <input 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, figura 7.53, figura 7.54 sunt prezentate rezultatele afirii paginii Web n navigatorul Internet 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 funcii numai n script-urile pe care le exploatai.

264
Indicaie. Definii gestionarul de evenimente onLoad n tag-ul <body> dup cum urmeaz: <body onLoad=idnavig()>. Scriei o funcie simpl care s v permit s recunoatei browser-ul Netscape sau Internet Explorer sau pe nici unul dintre ele. n figura 7.55 se prezint o soluie 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 obiectul Plugin, el nu este recunoscut de Internet Explorer. Instanele obiectului MimeType 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

navigator.mimeTypes[]

Exemplu:

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

navigator.MimeTypes[].description

Exemplu:

Descrierea obiectului MimeType.

<script> for(i=0; i<navigator.mimeType.length;i++){ tip=navigator.mimeTypes[i].description; //afiseaza descrierea plug-ins } </script> enabledPlugin navigator.MimeTypes[]. 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 plugin] 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 navigator.MimeTypes[].name

Exemplu:

Numele plug-ins.

<script> for(i=0;i<navigator.mimeTypes.length;i++){ tip=navigator.mimeTypes[i].name; document.write(tip+<br />); } </script> suffixes navigator.MimeTypes[].suffixes

Extensia de fiier pentru Mimetype.

Exemplu:

<script> for(i=0;i<navigator.mimeTypes.length;i++){ tip=navigator.mimeTypes[i].suffixes; document.write(tip+<br />); /*afieaz wjp, wpg, */ } </script> type navigator.MimeTypes[].type
Tipul de fiiere recunoscute de plug-ins. <script> for(i=0;i<navigator.mimeTypes.length;i++){ tip=navigator.mimeTypes[i].type; document.write(tip+<br />); //afieaz, de exemplu image/x-quicktime }</script>

Exemplu:

Figura 7.58
(continuare)

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 instalarea de module plug-in pentru browser. Obiectul Plugin conine o matrice de elemente i tipuri MIME tratate de fiecare modul plug-in. n figura 7.60 este prezentat fia obiectului Plugin.
Fia obiectului Plugin
Obiectul printe: Proprieti: Metode: Figura 7.60 Gestionarii de evenimente:
Remarci: 9 description 9 filename 9 length 9 name

Navigator description, filename, length, name

-

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.

Aplicaie Folosii obiectul Plugin cu metoda document.write pentru a afia informaii despre modulele 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: 9 Macromedia Shockwave i Flash; 9 Adobe Acrobat; 9 Real Player; 9 Beatnik. Obiectul JavaScript Navigator posed un obiect fiu numit Plugins. Acest obiect este o matrice, fiecare 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: 9 Nu confundai obiectele Plugin, proprieti ale obiectului Navigator, cu obiectele Embed, proprieti ale obiectului Document. Primele fac parte din Navigator n timp ce urmtoarele sunt incorporate n document cu ajutorul tag-ului <object> (pentru Internet Explorer) sau <embed> pentru Netscape. 9 Obiectul Plugins nu este recunoscut n mod constant de ctre toate versiunile navigatoarelor. Pe de alt parte, Internet 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

navigator.plugins[].description

Exemplu:

Descrierea plug-ins.

<script> for(i=0;i<navigator.plugins.length;i++){ plug=navigator.plugins[i].description; document.write(plug+<br />); //afieaz descrierea plug-ins } </script> filename navigator.plugins[].filename
Numele i amplasarea fiierelor plug-ins.

<script> for(i=0;i<navigator.plugins.length;i++){ plug=navigator.plugins[i].filename; document.write(plug+<br />); //afieaz numele fiierelor de plug-ins } </script> length navigator.plugins.length

Exemplu:

Numrul de plug-ins.

<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 instruciunile

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 coninutul matricii forms[]? 6. Care este coninutul matricii frames[]? 7. Care este coninutul matricii layers[]? 8. Ce semnificaie are proprietatea lastModified? 9. Care este coninutul matricii links[]? 10.Ce este obiectul Location? 11.Ce este MIME? 12.Care este rolul metodelor document.open() i document.close()? 13.Care este deosebirea dintre metodele

document.write()

document.writeln()?
14.Ce este obiectul Link? 15.Ce este obiectul Layer?

Vizitai site-urile
9 http://www.hkedcity.net/ 9 http://webdesign.about.com 9 http://www.useit.com 9 http://www.bigonion.com

Conversaia 8

Obiectul Form. Validarea formularelor

n aceast conversaie:
f f f f f f

Obiectul Form. Aplicaii (Sub)obiectele Form. Aplicaii Validai un formular cu JavaScript. 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-ului. 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 dat cu apariia limbajului JavaScript puterea formularelor (X)HTML a crescut i mai mult. 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 permite s adugai noi funcii de prelucrare a formularelor dumneavoastr (X)HTML, att pe partea 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 obiectului 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 evenimente: reset(), submit(), tags() onContextMenu, onControlSelect, onCopy,

onCut, onDblClick, onDeActivate, onDrag, onDragend, onDragOver, onHelp, onDragenter, 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 printr-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-uri (X)HTML: <form> i </form>.
Remarci: 9 Obiectul Document conine o matrice de obiecte Form care poart numele de forms. 9 Dup ncrcarea i analiza documentului (X)HTML, aceast matrice (forms) va conine cte un obiect Form pentru fiecare pereche de tag-uri <form> i </form> prezentat n documentul (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 cele 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 fiecrui obiect Form (vezi figura 8.4).

Figura 8.4

Atunci cnd documentul (X)HTML va fi analizat, obiectele Form ale limbajului JavaScript vor avea proprietatea name atribuit n mod automat cu numele: formularZero; FormularUnu; formularDoi. Putei accesa cele trei obiecte Form, dup cum urmeaz (figura 8.5).

Figura 8.5

276
Remarci: 9 Este important s observai c numele atribuite obiectelor Form sunt n totalitate nume de variabile JavaScript valide (formularZero; formularUnu; formularDoi). 9 (X)HTML nu impune nici o limit valorilor posibile pentru un atribut; n consecin, numele celor trei atribute name (conin spaii) din figura 8.6 sunt perfect valabile.

Figura 8.6
9 Dac dorim s referim aceste nume n JavaScript, vom scrie urmtorul cod JavaScript (figura 8.7).

Figura 8.7
9 Din nefericire, nici una din cele trei instruciuni nu este valid (!) deoarece JavaScript nu va ti s trateze spaiul (blank-ul) din mijlocul fiecrui nume. Aadar, singurul mod de a accesa obiectele Form este acela de a utiliza matricea forms. 9 Pentru a atribui un nume elementelor ce aparin documentelor (X)HTML va trebui s folosii nume valide pentru variabilele JavaScript.

Relaia dintre elementele (obiectele) Form i obiectul Form

Proprietatea cea mai important a obiectului Form este elements care conine un obiect 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 apoi 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 format 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 obiectul 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 metode 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 variabil JavaScript. Pentru astfel de situaii, vei putea folosi matricea elements a obiectului Form. Exist dou variante de acces la elementele matricii: 9 prin numrul de index; 9 prin nume. Iat cum procedm pentru a accesa prin numrul de index, elementele formularului din figura 8.12.

Varianta 1

Figura 8.12

279
Remarc. n acest formular am definit trei obiecte Text. Ultimele dou obiecte au un nume 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

Figura 8.15

Setul de caractere acceptat de ctre server-ul care prelucreaz datele.

action

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 matricii (array) elements[]. Ele sunt referite prin numrul de ordine (exemplu: elements[2]) sau prin numele lor (exemplu: elements[zona1]). Proprietatea returneaz numrul 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 element i corespunde un
obiect.
Exemplu:

Figura 8.15
(continuare)

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.

method

document.form.method

Corespunde atributului method al tag-ului <form>.

name

document.form.name

281

Figura 8.15
(continuare)

Corespunde atributului name al tag-ului <form>.

target

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()

Figura 8.16

Corespunde aciunii butonului reset.

submit()

document.form.submit()

Corespunde aciunii butonului submit.

tags()

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, pe parte de client sunt subobiecte ale obiectului Form: Button,

Checkbox, FileUpload, Hidden, Password, Radio, Reset, Submit, Select, Text, Textarea.
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, onDblClick, 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 transpus n obiect a tag-ului (X)HTML

<input

type=button>. A nu se confunda cu butoanele reset i submit. Subobiectul Button poate 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

document.forms[].button.align
butonului. Proprietatea poate conine valorile:

Figura 8.19

Alinierea

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), activat (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

document.forms[].button.value
butonului. Corespunde atributului

Valoarea

value

al

tag-ului

<input>.

Metodele obiectului Button

Metodele obiectului Button sunt prezentate n detaliu n figura 8.20.
Metod Sintax

blur()

document.form.button.blur()

Figura 8.20

Butonul pierde focus-ul.

click()

document.form.button.click()

Simularea clic-ului mouse-ului pe buton. Aceast metod nu este detectat de onClick.

focus()

document.form.button.focus()

Butonul preia focus-ul.

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, onBeforeUpdate, 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 transpus 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= parseInt(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=checkbox value=3 onClick=calcule()/>Articolul3<br /> <input type=checkbox value=4 onClick=calcule()/>Articolul4<br /> <input type=checkbox value=5 onClick=calcule()/>Articolul5<br /> </form> </body> </html>

285
Proprietile obiectului Checkbox
Proprietile obiectului Checkbox sunt prezentate n detaliu n figura 8.23.
Proprietate Sintax

align
Alinierea casetei de validare. center sau right.

document.forms[].checkbox.align
Proprietatea poate conine valorile: left,

checked

document.forms[].checkbox.checked

logic (true/false) care indic starea casetei de validare: activat (Valoare true) sau 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
starea casetei de validare: logic (true/false) care indic Valoare dezactivat (true) sau activat (false).

form

document.forms[].checkbox.form

Referin la formularul care conine caseta de validare.

name
casetei Numele <input>.

document.forms[].checkbox.name
de validare; corespunde atributului name al tag-ului

size

document.forms[].checkbox.size

Dimensiunea (n pixeli) a casetei de validare. Corespunde atributului size al tag-ului <input>.

status

document.forms[].checkbox.status
starea casetei de validare:

Valoare logic (true/false) care indic activat (true) sau dezactivat (false).

type

document.forms[].checkbox.type

de element n cadrul formularului. n acest caz, proprietatea returneaz Tipul checkbox. Corespunde atributului type al tag-ului <input>.

value
casetei Valoarea <input>.

document.forms[].checkbox.value
de validare. Corespunde atributului value al tag-ului

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 detectat 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, onHelp, onKeyUp, onMouseOut, onDragStart, onKeyDown, onMouseDown, onMouseOver, onFocus, 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 urmeaz a fi transmis server-ului. Subobiectul fileUpload este versiunea transpus n obiect 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
care indic starea zonei: dezactivat logic (true/false) Valoare (true) sau activat (false).

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 document.forms[].fileUpload.size
(n pixeli) zonei. Corespunde atributului size al tag-ului

Dimensiunea
<input>. type

document.forms[].fileUpload.type
de element n cadrul formularului. n acest caz proprietatea

Tipul

returneaz file. Corespunde 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()

document.form.fileUpload.blur()

Figura 8.28

Zona pierde focus-ul.

focus()
Zona preia focus-ul.

document.form.fileUpload.focus()

select()

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

Exemplu:

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.

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

Figura 8.31

Coninutul implicit al zonei.

disabled

document.forms[].hidden.disabled

Valoare logic (true/false) care indic starea zonei: dezactivat (true) sau activat (false).

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

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, onChange, onFocus, onHelp, onKeyDown, onKeyPress, onKeyUp, onMouseDown, onMouseMove, onMouseOut, onMouseOver, onMouseUp, onResize, onSelect, onSelectStart (vezi Conversaia 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 utilizatorul 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

Figura 8.34

Coninutul implicit al zonei.

disabled

Valoare logic (true/false) care indic starea zonei: dezactivat (true), activat (false).

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

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()

document.form.password.blur()

Figura 8.35

Zona pierde focus-ul.

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()

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, onBeforeUpdate, onBlur, onClick, onErrorUpdate, onFilterChange, onFocus, onHelp, onKeyDown, 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 buton radio ntr-un formular. Subobiectul Radio permite utilizatorului s selecteze o singur opiune dintr-un grup de aciuni. Subobiectul Radio este versiunea transpus n obiect a tag-ului (X)HTML <input type=radio>. Subobiectul Radio poate fi accesat prin proprietatea form.elements[] sau prin numele su.

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

Figura 8.38

Alinierea butonului radio. Proprietatea poate conine valorile: left, center, right.

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), activat (false).

form

document.forms[].radio.form

Referin la formularul care conine butonul radio.

name

document.forms[].radio.name

Numele butonului radio. Aceast proprietate corespunde atributului name al tag-ului <input />.

293
size document.forms[].radio.size

Figura 8.38
(continuare)

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

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()

Figura 8.39

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()

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. Subobiectul Reset este versiunea transpus n obiect a tag-ului (X)HTML <input type=reset>. Ca i n cazul butonului submit, pentru executarea aciunii nu este necesar cod surs JavaScript.

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

Figura 8.42

Alinierea butonului. Proprietatea poate conine valoarea: left, center sau right.

defaultValue

document.forms[].reset.defaultValue

Valoarea implicit a butonului.

disabled

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 <input />.

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

(continuare)

Valoarea butonului. Aceast proprietate corespunde atributului value al tag-ului <input />.

Metodele (sub)obiectului Reset

Metodele (sub)obiectului Reset sunt prezentate n detaliu n figura 8.43.
Metod Sintax

blur()

document.form.reset.blur()

Figura 8.43

Butonul pierde focus-ul.

click()
detectat prin onClick.

document.form.reset.click()

Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este

focus()

document.form.reset.focus()

Butonul preia focus-ul.

(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, onDblClick, 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>. Subobiectul 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

Figura 8.46

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

document.forms[].submit.form

Referin la formularul care conine butonul.

name

document.forms[].submit.name

297

Figura 8.46
(continuare)

Numele butonului. Aceast proprietate corespunde atributului name al tag-ului <input />.

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

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()

document.form.submit.blur()

Figura 8.47

Butonul pierde focus-ul.

click()

document.form.submit.click()

Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este detectat prin onClick.

focus()

document.form.submit.focus()

Butonul preia focus-ul.

(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, size, type, value add(), blur(), focus(), option.add(), option.remove(), remove() onAfterDate, onBeforeUpdate, onBlur, onChange, onDregStart, onFocus, onHelp, onKeyDown, 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 Select 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> <option 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

Figura 8.50

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

Valoare care indic rangul opiunii selectate n list. Aceast proprietate conine valoarea 1 dac nici o opiune nu este selectat.

Size

document.forms[].select.size

299

Figura 8.50
(continuare)

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

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 referite prin argumentul Amonte. Dac argumentul

Amonte este omis, elementul este adugat la finele listei. blur() document.form.select.blur()

Zona pierde focus-ul.

focus()
Zona preia focus-ul.

document.form.select.focus()

document.form.select.option. add(Element,Amonte) Adaug n list opiunea referit prin argumentul 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() document.form.select.option.remove (Rang)

Figura 8.51

Elimin din list opiunea al crei rang este indicat n argument.

remove()

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, onClick, onFocus, onHelp, onKeyDown,

onKeyPress,
Figura 8.52

onKeyUp,

onMouseDown,

onMouseMove, onMouseOut, onMouseOver, onMouseUp, onSelect (vezi conversaia 6). (sub)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>. Subobiectul 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

Figura 8.54

Coninutul implicit al zonei.

disabled

document.form[].text.disabled

Valoare logic (true/false) zona este dezactivat (true) sau activat (false).

form

document.form[].text.form

Referin la formularul care conine zona.

maxLength

document.form[].text.maxLength

301

Figura 8.54
(continuare)

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

document.form[].text.value

Coninutul zonei. Aceast proprietate corespunde atributului value al tag-ului <input />. 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()

document.form.text.blur()

Figura 8.55

Zona pierde focus-ul.

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()

document.form.text.select()

Selecteaz coninutul zonei.

(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, onMouseOver, 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 obiect 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; document.form1.numar.value=f.value.length; if(f.value.length>lungmax){ f.value=f.value.substring(0,lungmax); document.form1.numar.value=lungmax; } } </script> </head> <body> <form name=form1>

303
<input type=text name=numar size=1> caractere<br> <textarea name=text cols=40 row=5 onKeyUp=control(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

Figura 8.58

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

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 tag-ului <input />.

type

document.forms[].textarea.type

Tipul elementului n formular. n acest caz, proprietatea returneaz text. Aceast proprietate corespunde atributului type al tag-ului <input />.

value

document.forms[].textarea.value

Coninutul zonei. Aceast proprietate corespunde atributului value al tag-ului <input />. 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 pe 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()

document.form.textarea.blur()

Figura 8.59

Zona pierde focus-ul.

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()

document.form.textarea.select()

Aplicaii

Selecteaz coninutul zonei.

Creai un formular care afieaz o list de cri (pe care le-am folosit n cadrul acestei lucrri) JavaScript cu preul de vnzare, precedate de o caset de validare. n momentul selectrii/deselectrii crilor, totalul este recalculat i afiat ntr-o zon de text (figura 8.60).

305

Figura 8.60 n figura 8.61 este prezentat documentul XHTML n care s-a inserat script-ul de calcul. Rezultatele execuiei sunt prezentate n figura 8.62.

Figura 8.61

306

Figura 8.62
Comentarii: 9 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 adunat la totalul deja prezent n cmpul TOTAL. Dezactivai un articol! Preul su este sczut din total. 9 Zona care afieaz totalul general este un cmp text a crui dimensiune a fost limitat la 10. 9 Urmeaz definiiile casetelor de validare (checkbox). Valoarea (value) fiecrei casete de validare reprezint preul articolului: 20, 9.90, 20, 18.30. 9 Pentru fiecare caset de validare n tag-ul <input> s-a definit gestionarul de evenimente onClick, care execut funcia JavaScript calcule() al crui cod este definit n seciunea <head> a paginii Web (figura 8.61). 9 Fiecare element (subobiect) al formularului 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 exemplu, elementul (subobiectul) 0 este situat n formularul cu numele calcul, el nsui situat n documentul curent. Valoarea 0 este atribuit proprietii value. n consecin, atunci cnd activez sau dezactivez un articol, totalul existent este anulat. 9 Prin intermediul 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 control 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. Testul de ieire din bucl: i<document.calcul.elements.length. Dac n urma evalurii condiiei rezultatul este FALSE, atunci instruciunile din corpul buclei nu mai sunt efectuate. 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 validare, trebuie modificat de asemenea i condiia de test. Este mai uor s utilizm proprietatea 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 buclei la fiecare trecere. Aici se adaug 1 la valoarea variabilei i (i++).

307
9 Proprietatea checked (caset bifat) a fiecrei casete de validare a formularului este testat n continuare. Aceast proprietate returneaz valoarea TRUE sau FALSE. Dac testul este TRUE, atunci TOTAL (elements[0]) este recalculat; valoarea sa este adugat la valoarea elementului ce urmeaz a fi testat (figura 8.64).

Figura 8.64
9 Funcia parseFloat este obligatorie ntruct valorile checkbox-urilor sunt date de tip text. ParseFloat convertete un ir de caractere ntr-o valoare numeric real. ParseFloat este indispensabil dac valoarea unui cmp urmeaz s fie utilizat ntr-o expresie aritmetic.

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 simbolizat 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, avnd grij 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 numai 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 naturale. Indicaie. Introducei valoarea lui n ntr-o zon simpl de text, subobiect al obiectului

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 JavaScript pentru 13 numere naturale.

309

Figura 8.68 Scriei un program JavaScript pentru expedierea (coninutului) formularului din figura 8.69, prin pot electronic la adresa (fictiv) webmaster@abc.ro. Personalizai script-ul.

Figura 8.69 n figura 8.70 se prezint documentul XHTML.

Figura 8.70

310
Remarci: 9 Pentru a personaliza acest formular, nlocuii webmaster@abc.ro cu propria dumneavoastr adres de e-mail. 9 Atributul enctype=text/plain al tag-ului form asigur utilizatorul c informaiile din cadrul mesajului vor fi expediate ntr-o form lizibil. Aceast tehnic prezint avantajul c permite citirea rapid a datelor care aparin unui formular. 9 Exist numeroase script-uri i servicii CGI gratuite (vezi http://www.jsworkshop.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 unui script a corectitudinii informaiilor introduse de ctre utilizator. Putei utiliza limbajul JavaScript pentru: 9 validarea datelor introduse de utilizator. Putei valida cmpuri de intrare, grupuri de cmpuri sau ntregul formular, utiliznd gestionari de evenimente i funcii JavaScript. 9 construirea formularelor interactive, n care o parte sau ntreaga prelucrare are loc pe parte de client. 9 a testa conformitatea datelor introduse de utilizator cu politicile de procedur impuse (exemplu de politic de procedur: data de livrare a unei comenzi nu poate fi n ziua de smbt/duminic a sptmnii). 9 a testa prezena datelor n cmpurile obligatorii ale unui formular (un cmp este prezent 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 este prezentat 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 pentru 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 formular: nume, prenume, codcard nu este vid. n caz de eroare afiai unul din mesajele de mai jos: 9 Ai uitat s introducei numele dumneavoastr! 9 Ai uitat s introducei prenumele dumneavoastr! 9 Ai uitat 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 cadrul 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 adresa de
e-mail va fi considerat incorect. n acest caz, se va genera mesajul de eroare: Adresa

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 expediat 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 script-ului pe care l-ai realizat.

Figura 8.79

316

Figura 8.80
Remarci 9 Dac dorii, putei personaliza script-ul. 9 Pentru informaii suplimentare privind 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 conversaia precedent (EXEMPLUL 7 JAVASCRIPT), cu singura deosebire (important!) c datele sunt 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: 9 Varianta 1 Introducerea livrrilor se face ntr-o zon text asociat fiecrei zile i fiecrui rezervor. Afiarea rezultatelor se face n aceeai fereastr n zone de text distincte. 9 Varianta 2 Introducerea 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 distinct.

Specificaii de programare n figurile 8.82 i 8.83 sunt prezentate: ecranul (intrare/ieire) cu Situaia livrrilor de benzin pentru rezervoarele R1 R2 R3 i specificaiile de programare. Mesajele de validare a datelor i tabela de variabile sunt prezentate n figura 8.84, respectiv figura 8.85.

318

Figura 8.82

Specificaii de programare Descriere. Programul editeaz ntr-o pagin Web situaia livrrilor de benzin efectuate zilnic din trei rezervoare cilindrice echilaterale (R1, R2, R3). De asemenea programul afieaz livrrile maxime i minime (valoare, ziua, rezervor). Afiarea tuturor rezultatelor se realizeaz atunci cnd se execut clic pe butonul Rezultate (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 rezervoare. 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 negativ. 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: (real) folosit pentru calculul sumelor pariale pe zile rval: (logic) indic faptul c 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 imax,imin,jmax,jmin: 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: Obiecte, zone de text pentru afiarea rezultatelor mediilor b: vector de numere reale, pstreaz mediile livrrilor pe zile d: vector de numere reale, pstreaz mediile livrrilor 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 fiecare zi

Figura 8.85

Documentaia de proiectare Pseudocodul pentru EXEMPLUL 8 JAVASCRIPT (Varianta 1) este prezentat n figura 8.85.

320
Pseudocodul BEGIN //initializeaza vectorul Z cu numele zilelor z=luni,marti,miercuri,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 Rezultate) 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,20) IF2 ENDIF EXEMPLUL8 END // transforma o valoare reala in sir de caractere // si trunchiaza la doua zecimale TRUNCHIAZA BEGIN Parametrii: x- valoare reala s=transforma in sir de caractere x i=pozitia punctului zecimal in sir IF3 IF(i-1) s=copiazasubsir(s,0,i+2) IF3 ENDIF RETURN s TRUNCHIAZA END

EXEMPLUL8

VALIDEAZA

IF4 IF4 IF5 IF5 IF6 IF6

Figura 8.86

BEGIN //valideaza valoarea introdusa in zona de text Date intrare: item-zona de text care a generat evenimentul onBlur min- valoarea minima permisa max- valoarea maxima permisa rval=fals x=transforma in real item.value IF(x nu este numar) Afiseaza mesaj de eroare: Valoare gresita pentru cantitate ELSE IF(x<min) Afiseaza mesaj de eroare: Valoarea este prea mica ELSE IF(x>max) Afiseaza mesaj eroare: Valoarea este prea mare ELSE Rval=adevarat DO puneVal(item,x)

321
IF6 IF5 IF4 VALIDEAZA PUNEVAL
ENDIF ENDIF ENDIF RETURN rval END

//depune valoarea din zona de editare in matricea livrarilor a BEGIN Date intrare: item-zona de text care a generat evenimentul onBlur x- valoarea ce va fi depusa s=item.nume s1=extrage_subsirul(s,1,2) sir=transforma_in_integer(s1)-1 s1= extrage_subsirul(s,2,3) ic= transforma_in_integer(s1)-1 air,ic=transforma_in_real(T1.value) PUNEVAL END // calculeaza mediile determina valorile minime si maxime si afiseaza rezultatele CALCULEAZA BEGIN // 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 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 // determinarea maximului si minimului max=a0,0 min=a0,0 imax=0 imin=0 jmax=0 jmin=0 FORI2 FOR(i=0;i<3;i++) FORJ2 FOR(j=0;j<5;j++) IF7 IF(max<ai,j) max=aij imax=i Figura 8.86 jmax=j (continuare)

322
ENDIF IF(min>ai,j) min=aij imin=i jmin=j IF8 ENDIF FORJ2 ENDFOR FORI2 ENDFOR imin=imin+1 imax=imax+1 //afisare rezultate M1.value=trunchiaza(B[0]) M2.value=trunchiaza(B[1]) M3.value=trunchiaza(B[2]) M4.value=trunchiaza(B[3]) M5.value=trunchiaza(B[4]) T61.value=trunchiaza(D[0]) T62.value=trunchiaza(D[1]) T63.value=trunchiaza(D[2]) M6.value=trunchiaza(D[3]) vmax.value=trunchiaza(max) vmin.value=trunchiaza(min) rmax.value="R"+imax rmin.value="R"+imin zmax.value=Zjmax Figura 8.86 zmin.value=Zjmin (continuare) CALCULEAZA END

IF7 IF8

Codificarea n limbajul JavaScript Documentul complet (X)HTML, n care s-a inserat script-ul (programul JavaScript) este prezentat n figura 8.87.

<html> <head> <title>Exemplul 8</title> <script language="JavaScript"> <!--a=new Array(3); a[0]=new Array(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; 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; Figura 8.87 }

323
function puneVal(item,x) { s=item.name; var ic=parseInt(s.substring(1,2))-1; var ir=parseInt(s.substring(2,3))-1; a[ir][ic]=x; } function valideaza(item, min, max) { var rVal = false; var x=parseFloat(item.value); if(isNaN(x)){ alert("Valoare gresita pentru " + item.name + "!Caractere invalide"); } else if (x < min) alert("Valoare gresita pentru " + item.name + "!Valoarea trebuie >" + min); else if (x> max) alert("Valoare gresita pentru " + item.name + "! Valoarea trebuie sa fie < " + max); else { rVal = true; puneVal(item,x); } return rVal; } function calculeaza() { var i,j; B = new Array(5); for(j=0;j<5;j++) { S=0; for(i=0;i<3;i++) S=S+a[i][j]; B[j]=S/3; } // 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; } D[3]=ST/15; // DETERMINAREA MAXIMULUI SI MINIMULUI max=a[0][0]; min=a[0][0]; imax=0;imin=0; jmax=0;jmin=0; Figura 8.87 for(i=0;i<3;i++){ (continuare) for(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;jmin=j;} }} imin++;imax++; document.input_form.M1.value=trunchiaza(B[0]); document.input_form.M2.value=trunchiaza(B[1]); document.input_form.M3.value=trunchiaza(B[2]); document.input_form.M4.value=trunchiaza(B[3]); document.input_form.M5.value=trunchiaza(B[4]); document.input_form.T61.value=trunchiaza(D[0]); document.input_form.T62.value=trunchiaza(D[1]); document.input_form.T63.value=trunchiaza(D[2]); document.input_form.M6.value=trunchiaza(D[3]); document.f1.vmax.value=trunchiaza(max); document.f1.vmin.value=trunchiaza(min); document.f1.rmax.value="R"+imax; document.f1.rmin.value="R"+imin; document.f1.zmax.value=Z[jmax]; document.f1.zmin.value=Z[jmin]; } // --> </SCRIPT> </head> <body> <center><h3>SITUATIA LIVRARILOR DE BENZINA PENTRU REZERVOARELE R1 R2 R3</h3> <form name = "input_form"> <table Border=1> <tr><td><b>Ziua</b><td><b>REZERVORUL 1</b><td><b>REZERVORUL 2</b> <td><b>REZERVORUL 3</b><td> Media</td></tr> <tr> <td><b>LUNI:</b></td> <td><input type="text" name="T11" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="T12" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="T13" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="M1" size="7" readonly> <tr> <td><b>MARTI:</b> <td><input type="text" name="T21" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="T22" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="T23" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="M2" size="7" readonly> <tr> <td><b>MIERCURI:</b> <td><input type="text" name="T31" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="T32" size="7" onBlur="valideaza(this,0,20);"> Figura 8.87 <td><input type="text" name="T33" size="7" onBlur="valideaza(this,0,20);"> (continuare) <td><input type="text" name="M3" size="7" readonly>

325
<tr> <td><b>JOI:</b> <td><input type="text" name="T41" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="T42" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="T43" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="M4" size="7" readonly> <tr> <td><b>VINERI:</b> <td><input type="text" name="T51" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="T52" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="T53" size="7" onBlur="valideaza(this,0,20);"> <td><input type="text" name="M5" size="7" readonly> <tr> <td><b>Media</b> <td><input type="text" name="T61" size="7" readonly> <td><input type="text" name="T62" size="7" readonly> <td><input type="text" name="T63" size="7" readonly> <td><input type="text" name="M6" size="7" readonly> </tr> </table> <p><input type="button" value="Rezultate" name="B1" onClick="calculeaza();"></p> </form> <P> <P> <P> <form name="f1"> <table border=1><tr><td rowspan=3> Livrarea maxima <td>Valoare:<td><input type="text" name="vmax" size="7" readonly> <tr> <td>Ziua:<td><input type="text" name="zmax" size="7" readonly> <tr> <td>Rezervorul:<td><input type="text" name="rmax" size="7" readonly> <tr><td ROWSPAN=3> Livrarea minima<td>Valoarea:<td><input type="text" name="vmin" size="7" readonly> <tr> <td>Ziua:<td><input type="text" name="zmin" size="7" readonly> <tr> <td>Rezervorul<td><input type="text" name="rmin" size="7" readonly> </table> Figura 8.87 </body> (continuare) </html>
Comentarii: 9 Script-ul (inserat n seciunea <head> a documentului HTML) conine patru funcii:

trunchiaz(x); puneVal(item, x); validate(item, min, max); compute().

9 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. 9 S-au folosit gestionarii de evenimente onBlur, cu funcia de validare date validate() pentru obiectele zone de text i onClick cu funcia compute() pentru 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 pentru 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 livrrilor (pe zile i pe rezervoare); ecranul cu Situaia livrrilor de benzin pentru rezervoarele 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 livrrilor de benzin efectuate zilnic din trei rezervoare cilindrice echilaterale (R1, R2, R3). Programul afieaz de asemenea livrrile maxime i minime cu precizarea numrului rezervorului i a zilei n care s-a efectuat livrarea respectiv. Afiarea tuturor rezultatelor se face ntr-o fereastr distinct, n momentul n care se execut clic pe Figura 8.92 butonul Afieaz (vezi figura 8.90).

329
Livrrile, pe zile (luni, mari, miercuri, joi, vineri) i pe rezervoare (Rezervor1, Rezervor2, 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. Intrri. Valorile livrrilor, pe zile, pentru fiecare rezervor se introduc printr-o singur zon de text a unui formular. n caz de eroare datele de intrare nu sunt numerice i nu respect intervalul (0, 20) se genereaz un mesaj de eroare. La acionarea butonului Livreaz se vor depune livrrile din zona Cantitatea n matricea a, pe linia i coloana corespunztoare rezervorului i zilei respective (vezi funcia Livreaz()). Ieiri. Situaia livrrilor, mediile (pe zile i pe rezervoare) sub form de tabel; livrarea maxim (valoare, ziua, rezervor); livrarea minim (valoare, ziua, rezervor). Lista de funciuni ale programului 1. Iniializeaz vectorul z cu numele zilelor sptmnii. 2. Aloc spaiu de memorie i iniializeaz matricea livrrilor. 3. Rspunde la evenimentele generate de 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 trunchiaz la dou zecimale. 7. Valideaz valoarea introdus n zona de text. 8. Depune valoarea din zona de editare n matricea livrrilor a. 9. Calculeaz mediile pe zile i pe rezervoare. 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 pentru cele trei rezervoare Zile: obiect, list simpl de opiuni pentru selecia zilei din 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 rval: (logic) indic faptul c 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 imax,imin,jmax,jmin: (numere ntregi) pstreaz indicii livrrilor maxime i minime 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 numere reale, pstreaz mediile livrrilor a: matrice de numere reale, pstreaz valorile livrrilor 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.94.

Pseudocodul

331
BEGIN //initializeaza vectorul Z cu numele zilelor z=luni,marti,miercuri,joi vineri //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 RezWindow //raspunde la evenimentele generate de butonul Livreaza IF1 IF(se apasa butonul Livreaza) DO livreaza IF1 ENDIF //raspunde la evenimentele generate de butonul Afiseaza IF2 IF(se apasa butonul Afiseaza) DO afis IF2 ENDIF //raspunde la evenimentele generate de zona de editare T1 IF3 IF(se paraseste zona T1) DO valideaza(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 punctului zecimal in sir IF4 IF(i-1) s=copiazasubsir(s,0,i+2) IF4 ENDIF RETURN s TRUNCHIAZA END

VALIDEAZA

IF5
Figura 8.94 IF5

BEGIN //valideaza valoarea introdusa in zona de text Date intrare: item-zona de text care a generat evenimentul onBlur min- valoarea minima permisa max- valoarea maxima permisa rval=fals x=transforma in real item.value IF(x nu este numar) Afiseaza mesaj de eroare: Valoare gresita pentru cantitate ELSE

332
IF6 IF6 IF7 IF7 IF7 IF6 IF5 VALIDEAZA LIVREAZA
IF(x<min) Afiseaza mesaj de eroare: Valoarea este prea mica ELSE IF(x>max) Afiseaza mesaj eroare: Valoarea este prea mare ELSE Rval=adevarat ENDIF ENDIF ENDIF RETURN rval END

//depune valoarea din zona de editare in matricea livrarilor a BEGIN ir=indicele elementului selectat in lista Rezervor ic=indicele elementului selectat in lista Zile air,ic=transforma_in_real(T1.value) LIVREAZA END // calculeaza mediile determina valorile minime si maxime si afiseaza rezultatele AFIS BEGIN // aloca spatiu de memorie pentru vectorul b si d // calculeaza mediile pe rezervoare 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 ENDFOR // calculul mediilor pe rezervoare 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 // determinarea maximului si minimului max=a0,0 min=a0,0 imax=0 imin=0 jmax=0 jmin=0 FOR(i=0;i<3;i++) Figura 8.94 FOR7 FOR(j=0;j<5;j++) (continuare) FOR8

333
IF8
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 //afisare rezultate IF(RezWindow exista) nchide RezWindow ENDIF Creaza RezWindow //scrierea rezultatelor in fereastra RezWindow RezWindow.WRITE "SITUATIA REZERVOARELOR R1 R2 R3" RezWindow.WRITE "ZIUA R1 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 trunchiaza( b[k]) ENDFOR RezWindow.WRITE "MEDIA" FOR(j=0;j<4;j++) RezWindow.WRITE trunchiaza(d[j]) ENDFOR RezWindow.WRITE "Livrarea maxima: " max RezWindow.WRITE "s-a facut din rezervorul: R" imax RezWindow.WRITE "in ziua de" Zjmax RezWindow.WRITE "Livrarea minima:" min RezWindow.WRITE " s-a facut din rezervorul: R"imin RezWindow.WRITE " in ziua de "+Zjmin END

IF8 IF9

IF9 FOR8 FOR7

IF10 IF10

FOR9 FOR10 FOR10 FOR9 FOR11 FOR11

Figura 8.94
(continuare)

AFIS

Codificarea n limbajul JavaScript Documentul complet (X)HTML este prezentat n figura 8.95.

<html> <head> <title>Exemplul 8</title> <script language="JavaScript"> <!--var Z = new Array("Luni","Marti","Miercuri","Joi","Vineri"); function trunchiaza(x) {

334
var s=""+x; i=s.indexOf("."); if(i!=-1){ s=s.substring(0,i+3); } return s; } function validate(item, min, max) { var rVal = false; var x=parseFloat(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 Array(5); a[2]=new Array(5); for(i=0;i<3;i++) for(j=0;j<5;j++) a[i][j]=0.0; var RezWindow=null; function livreaza() { var ir=f1.Rezervor.selectedIndex; var z=f1.Zile.selectedIndex; a[ir][z]+=parseFloat(f1.T1.value); } function afis(){ // CALCULUL MEDIILOR PE ZILE var i,j; B = new Array(5); for(j=0;j<5;j++) { S=0; for(i=0;i<3;i++) S=S+a[i][j]; B[j]=S/3; Figura 8.95 }

335
// 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; } D[3]=ST/15; // DETERMINAREA MAXIMULUI SI MINIMULUI max=a[0][0]; min=a[0][0]; imax=0;imin=0; jmax=0;jmin=0; for(i=0;i<3;i++){ for(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++; //AFISARE REZULTATE if(RezWindow!=null)RezWindow.close(); RezWindow=window.open('','', 'toolbar=yes,scrollbars=yes,menubar=no, width=500,height=300'); RezWindow.document.writeln("<center><p>SITUATIA REZERVOARELOR R1 R2 R3</p></center>"); RezWindow.document.writeln("<center><table border=1 bgcolor=#EFEFFF><tr>"); RezWindow.document.writeln("<td><b>ZIUA</b><td><b>R1</b><td> <b>R2</b><td><b>R3</b><td><b>MEDIA</b></td></tr>"); for(k=0;k<5;k++) { RezWindow.document.writeln("<tr><td>" + Z[k]+"</td>"); for(j=0;j<3;j++) { RezWindow.document.writeln("<td>" + a[j][k]+ "</td>"); } RezWindow.document.writeln(" <td> " +trunchiaza( B[k])+ "</td></tr>"); } RezWindow.document.writeln("<tr><td><b>MEDIA</b>"); for(j=0;j<4;j++) RezWindow.document.writeln("<td><b>" + trunchiaza(D[j])+" </b></td>"); RezWindow.document.writeln("</tr>"); RezWindow.document.writeln("</table></center><p><p>"); RezWindow.document.writeln("<font color=green>Livrarea maxima:"+max+" s-a facut din rezervorul: R"+imax+" in ziua de "+Z[jmax]+"</font>"); RezWindow.document.writeln("<p><font color=green>Livrarea minima:"+min+" s-a facut din rezervorul: R"+imin+" in ziua de "+Z[jmin]+"</font>"); RezWindow.document.writeln("</html>"); } // --> Figura 8.95 </script> (continuare) </head>

336
<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" 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="validate(this,0,20);"> <tr> <td><input type="button" value="Livreaza" onClick="trimite();"> <td><input type="button" value="Afiseaza" onClick="afis();"> </table> </center> </form> Figura 8.95 </body> (continuare) </html>
Comentarii: 9 Script-ul (inserat n seciunea <head> a documentului XHTML) conine patru funcii:

trunchiaz(x); afi().

ivalidate(item,

min,

max);

livreaz();

9 Formularul conine subobiectele: Select i Option; Text; butoanele Livreaz i Afieaz. 9 Validarea datelor de intrare introduse n zona de text se realizeaz cu gestionarul de evenimente onBlur (vezi funcia valideaz()). 9 Depunerea livrrilor din zona de editare (subobiectul Text) n matricea livrrilor se realizeaz cu gestionarul de evenimente onClick (vezi funcia Livreaz()). 9 Afiarea rezultatelor se realizeaz cu gestionarul de evenimente onClick (vezi funcia afis()). Prin acionarea butonului Afieaz se deschide o nou fereastr care va afia: situaia livrrilor; mediile livrrilor pe zile i rezervoare; livrrile maxime i minime. 9 Pentru crearea unei ferestre, am utilizat metoda window.open() (figura 8.96).

Figura 8.96

337
9 Pentru crearea listei de selectare a rezervoarelor i a zilelor sptmnii am utilizat subobiectele Form: Select i Option (vezi figura 8.97).

Figura 8.97
9 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 subobiecte ale obiectului Form. Subobiectul Select permite crearea urmtoarelor tipuri 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 atribuii proprietii size valoarea 1 sau nu-l folosii deloc). list derulant (o list care afieaz la un moment dat un anumit numr de elemente. Ea include bare de derulare. Pentru a defini o list derulant atribuii lui size o valoare mai mare ca 1). list derulant 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 proprietatea multiple la definirea obiectului Select). 9 Subobiectul Option este versiunea 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 pentru un set de date afiat.

338

Figura 8.99 Aplicaie Scriei un program JavaScript pentru afiarea datelor coninute n formularul 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 aplicaiei.

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.103).

JavaScript
Testai-v cunotinele

Tem

1. Care din atributele tag-ului <form> determin locul unde vor fi expediate datele?

action; method; name.

2. Care sunt subobiectele obiectului Form? 3. Care sunt proprietile obiectului Form? 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 sintaxa 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, intervalul [0, 9] n cuvinte. Utilizai un formular (X)HTML. 15.Scriei un program JavaScript 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 pe dou ci: 9 dac numrul este par, noul numr se obine ca rezultat al mpririi cu 2. (exemplu: 8, 4, 2, 1). 9 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()" onClick="document.form1.text3.Focus()"

prin:

onClick="document.form1.text1.blur()" onClick="document.form1.text2.blur()" onClick="document.form1.text2.blur()"

Precizai rezultatele execuiei noului script.

Vizitai site-urile
9 http://www.javascriptgate.com/ 9 http://www.gatescript.com/ 9 http://www.biblioscript.com/ 9 http://www.w3schools.com/ 9 http://www.siteexperts.com/ 9 http://developer.irt.org/script/script.htm 9 http://www.wsabsract.com/cutpastejava.shtml

Conversaia 9

Obiectul Image
n aceast conversaie:
f f f f f f f

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 pe Web. De exemplu, n numeroase site-uri Web, butoanele (X)HTML au fost nlocuite prin imagini clicabile (rollovere) care se transform atunci cnd trecei mouse-ul pe deasupra 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 figura 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 dinamic.

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 obiectul Image al limbajului JavaScript. n cursul ncrcrii documentului (X)HTML n navigatorul Web, interpretorul JavaScript creeaz un obiect Image pentru fiecare tag <img> prezent n document. El plaseaz toate obiectele Image ntr-o matrice images (subobiect 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=LUMINABLANDA />
Figura 9.2

Obiectul Image poate fi accesat cu una din instruciunile prezentate mai jos:

9 document.images[0];
9 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 intermediul matricei images, ca i n cazul matricei elements din obiectul Form. De exemplu, definiia imaginii: <img name=PLOIESTI VEST src=gara.jpg /> este accesibil prin utilizarea 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 fr asocierea unui tag <img>, utiliznd constructorul de obiecte Image() (vezi figura 9.3).
Figura 9.3

var imagine1=new Image();

Remarci 9 Instruciunea JavaScript din figura 9.3 genereaz un obiect Image fr a mai fi nevoie de un tag <img>. 9 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
9 Dup ncrcarea acestei imagini, s-a creat un obiect Image care conine o imagine (ncrcat), dar non vizibil n navigatorul Web. 9 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)HTML; 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, ntruct document.MOULINROUGE este asociat unui tag <img> noua imagine va fi afiat n locul precedentei imagini.

Figura 9.5

Proprietile obiectului Image

Proprietile obiectului Image sunt prezentate n detaliu n figura 9.6.
Proprietate Sintaxa

border

document.images[].border

Figura 9.6

Corespunde atributului border al tag-ului <img>.

complete

document.images[].complete

Valoare logic (true/false); true - imaginea a fost n ntregime ncrcat; false imaginea nu a fost ncrcat n ntregime.

height

document.images[].height

Corespunde atributului height al tag-ului <img>.

346
width document.images[].width

(continuare)

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
Figura 9.6

document.images[].lowsrc

Aplicaii

Corespunde atributului lowsrc al tag-ului <img>.

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 figura 9.10 este prezentat documentul (X)HTML complet.

348

Figura 9.10
Comentarii: 9 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: src, name, height, width, border i complete. Aceast ierarhie explic modul n care sunt accesate proprietile imaginii: document.test.src, document.test.width etc. 9 Valorile proprietilor (src, name, height, width, border) sunt extrase din definiia acestui obiect. 9 Valoarea true (vezi proprietatea complete) rezult din modul n care imaginea 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 vom juca mpreun! 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 deoarece pn n prezent au avut doar preocupri serioase, precizm n cele ce urmeaz care sunt regulile jocului.

349
Exist la nceput 10 bee de chibrit i doi juctori. Cnd i vine rndul, un juctor poate ridica un b, cel mult dou! Va pierde (!) acel juctor care rmne cu ultimul b de chibrit. Ceea ce 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 prezentate 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: numele 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 rndul 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 evenimentele generate IF(se apasa butonul Joc Nou) DO actualizare ENDIF IF(se executa click 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 BEGIN Date intrare: x-numarul batului de chibrit extras //se verifica daca extragerea 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 ramase si //stabileste castigatorul daca este cazul IF4 IF(bete<=0) WRITE "Jocul s-a terminat! Ai pierdut!" IF4 ELSE IF5 IF(bete==1) //inlocuie imaginea primului bat 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 calculatorului 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_nsrc.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 figura 9.16. <html> <head> <title>10 Bete de chibrit</title> <script language="JavaScript"> <!--function AlegeChibrit(x) { //se verifica daca extragerea batului a fost 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"; Figura 9.16 }

352
//se actualizeaza numarul de bete ramase bete=x-1; //verifica numarul de bete ramase si //stabileste castigatorul daca este cazul if(bete<=0) { alert("Jocul s-a terminat! Ai pierdut!"); }else if(bete==1) { document.images['chibrit1'].src="gol.gif"; bete=0; alert("Jocul s-a terminat!Ai Castigat!"); } else{ alert("Calculatorul 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++){ nsrc='chibrit'+i; document.images[nsrc].src="gol.gif"; } bete=x-1; if(bete==0) alert("Jocul s-a terminat! Ai pierdut!"); else alert("Calculatorul zice:\n Acum e randul tau!"); } } } bete=10; function actualizare() {bete=10; for(i=1;i<=bete;i++){ nsrc='chibrit'+i; document.images[nsrc].src="chibrit.gif"; } } // --> </script> </head> <body> <center> <h3>Zece bete de chibrit</h3> <table border=1> <tr><td> <img src="chibrit.gif" name="chibrit1" border="0" width="27" height="110" onMouseDown="AlegeChibrit(1)" loop="0"> <td> <img src="chibrit.gif" name="chibrit2" border="0" width="27" height="110" Figura 9.16 onMouseDown="AlegeChibrit(2)" loop="0"> (continuare)

353
<td> <img src="chibrit.gif" name="chibrit3" border="0" width="27" height="110" onMouseDown="AlegeChibrit(3)" loop="0"> <td> <img src="chibrit.gif" name="chibrit4" border="0" width="27" height="110" onMouseDown="AlegeChibrit(4)" loop="0"> <td> <img src="chibrit.gif" name="chibrit5" border="0" width="27" height="110" onMouseDown="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" onMouseDown="AlegeChibrit(7)" loop="0"> <td> <img src="chibrit.gif" name="chibrit8" border="0" width="27" height="110" onMouseDown="AlegeChibrit(8)" loop="0"> <td> <img src="chibrit.gif" name="chibrit9" border="0" width="27" height="110" onMouseDown="AlegeChibrit(9)" loop="0"> <td> <img src="chibrit.gif" name="chibrit10" border="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 9 Script-ul (inserat n seciunea <head> a documentului HTML) conine dou funcii: AlegeChibrit(x) i actualizare(). 9 Funcia AlegeChibrit(x) permite juctorului s extrag unul sau dou bee; stabilete strategia de joc a calculatorului; actualizeaz numrul de bee rmase, stabilete ctigtorul. Argumentul x ia valori de la 1 la 10. 9 Funcia actualizare() permite reluarea jocului la acionarea butonului Joc Nou. 9 Gestionarii de evenimente 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 crearea de rollovers (survols, n limba francez; rollovers, n limba englez). Un rollover este o imagine folosit n general pentru navigare al crui aspect se modific atunci cnd se trece cu mouse-ul pe deasupra acesteia.
Remarci 9 Un rollover este o metod asociat unui eveniment de mouse: mouseOver, mouseOut, mouseDown, mouseUp. 9 Exist mai multe tipuri de metode rollover: metoda rollover pentru imagine; metoda rollover strat (layer). 9 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 IMAG2 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) utilizat 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 9 Nu v lsai impresionai de dimensiunea codului JavaScript, deoarece este foarte simplu! 9 Am definit im1 ca fiind un nou obiect Image cruia i atribuim calea imag2.gif. 9 La trecerea mouse-ului peste butonul IMAG1, proprietatea src a imaginii ce poart numele img1 devine imag2.gif, care provoac efectul de rollover. 9 Dac dorii s aplicai 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 9 Exist i alte tehnici de a modifica imaginile, dup cum urmeaz: afiarea unei borduri n jurul fiecrei imagini; afiarea unei imagini n miniatur (de exemplu, o sgeat mic) alturi de imaginea propriu-zis, unde se gsete pointer-ul mouse-ului. 9 Exist mai multe soluii de implementare a metodelor rollover pentru imagini, dar cea mai simpl este urmtoarea: creai matricea care s conin imagini; prencrcai imaginile n matrice; creai o funcie 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 este 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 execuiei programului JavaScript.

Figura 9.30

Figura 9.31

360
Iat cum crem un mic catalog ilustrat care conine ultimele trei cri ale autorului acestei lucrri: (X)HTML, Dreamweaver MX, XML, care au aprut n Editura Universitii din Ploieti. Pornind de la o list ordonat ale crei elemente conin titlurile celor trei cri, se afieaz coperta nti a crii selectate trecnd cursorul pe deasupra unuia din cele trei titluri de carte afiate (figura 9.32).

Figura 9.32 Documentul complet XHTML este prezentat n figura 9.33.

361

Figura 9.33
Remarci 9 Funcia carte(nume,numr) conine dou argumente: numele fiierului utilizat (nume) i numrul imaginii (numr). 9 Pentru ca proporia imaginilor s fie respectat este necesar ca ele s aib aceleai dimensiuni. 9 Afiarea imaginii (prima copert) se produce atunci cnd deplasai mouse-ul pe linia unde se gsete numele crii i nu doar pe numele afiat al crii. Putei evita 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 trei 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: 9 Ce semnific notaia this.id? 9 Care este rolul gestionarilor de evenimente:

onClick=location=ldXHTML.htm onClick=location=ldDREAMWEAVER.htm
onClick=location=ldXML.htm 9 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, JavaScript 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, Macromedia Flash. Pentru a crea o animaie simpl cu JavaScript [3] se recomand parcurgerea urmtoarelor etape: 9 salvai cadrele de animaie ntr-o matrice; 9 prencrcai imaginile (cadrele de animaie);

364
9 stabilii viteza de derulare a animaiei.
Pentru mai multe detalii privind crearea animaiilor simple JavaScript, consultai: 9 Michael Moncur, JavaScript 1.5 Nouvelle edition, Campus Press, 2003, pag. 227-234 9 Michael Dreyfus, Codes en Stock JavaScript, Ed. Campus Press, 2001 9 Micro Application, JavaScript Professionel, Paris, 2001 9 David Flanagan, JavaScript, La rfrence 4 dition, Ed. OReilly, 2002 9 Jean-Christophe Gigniac, Cdric Nilly, JavaScript, Micro Application 2002, Paris, pag. 250 260 9 http://JavaScript.Internet.com/scrolls/animated-message.html 9 http://www.wsabstract.com/cutplastejava.shtml 9 http://hotvired.lycos.com/webmonkey/reference/ JavaScript_code_library 9 http://webopedia.Internet.com/TERM/J/JavaScript.html 9 http://Javascript.internet.com/message/animated-tooltip.html 9 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 simplificare a navigrii ntr-un site Web. Exist dou tipuri de imagini reactive: client i server. Zonele (cu un anume contur geometric) unei imagini reactive client se definesc direct n codul (X)HTML, fiecare dintre acestea jucnd rolul unui link. n consecin, 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. Crearea unei imagini reactive (client) necesit urmtoarele resurse: 9 o imagine n format GIF sau JPEG; 9 un fiier (MAP) care conine zonele imaginii; 9 atributul USEMAP.
Remarci 9 Navigatoarele recente nu afieaz descrierea unei imagini reactive n bara de stare, atunci cnd atributul href figureaz n link-uri. Dac utilizai imagini reactive ca link-uri, putei folosi gestionarul de evenimente onClick cu location.href.

365
9 Pentru a descrie fiecare zon a imaginii reactive va trebui s cunoatei coordonatele punctelor care le delimiteaz. Exist numeroase programe, printre care: MapEdit sau LiveImage. 9 Zonele imaginii reactive sunt definite cu tag-urile (X)HTML: <map> i <area>.

Iat cum procedm pentru a crea cu limbajul JavaScript o imagine reactiv client, pornind de la imaginea follow.jpg. n momentul n care plasai mouse-ul deasupra zonei reactive de form dreptunghiular decupate n imaginea

follow.jpg, n bara de stare se va afia mesajul: ZIUA N CARE VIN

PETII.
1. Inserai imaginea follow.jpg. 2. Introducei n tag-ul <img> atributul usemap=#?, nlocuind semnul de ntrebare (?) cu numele (JOHNSON) pe care dorii s-l atribuii imaginii map (figura 9.37).

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

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 care afieaz icon-ul de conformitate W3C. 9. Vizualizai pagina Web ntr-un browser (figura 9.42).

Figura 9.42

367

EXEMPLUL 9 JAVASCRIPT
Vom relua n cadrul acestui exemplu problema rezervoarelor (cilindrice echilaterale), invitndu-v n cele ce urmeaz s utilizai imagini reactive client pentru generarea raportului 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 de a realiza singuri documentaia de analiz i proiectare a programului JavaScript corespunztoare 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; Figura 9.44 }

369
function validate(item, min, max) { var rVal = false; var x=parseFloat(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 Array(5); a[2]=new Array(5); for(i=0;i<3;i++) for(j=0;j<5;j++) a[i][j]=0.0; var RezWindow=null; function 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; //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 if(RezWindow!=null)RezWindow.close(); RezWindow=window.open('','', 'toolbar=yes,scrollbars=yes,menubar=no, width=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.writeln("<center><table border=1 bgcolor=#efefff><tr>"); (continuare) RezWindow.document.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>"); RezWindow.document.writeln("<td>" + a[rez][i]+ "</td></tr>"); } RezWindow.document.writeln("</table></center><p><p>"); RezWindow.document.writeln("<p><font color=green size=+1>Total Livrari:"+s+"</font>"); RezWindow.document.writeln("<br><font color=green size=+1>Media Zilnica:" + trunchiaza(med) + "</font>"); RezWindow.document.writeln("<br><font color=green>Livrarea maxima:"+max+" s-a facut in ziua de "+Z[jmax]+"</font>"); RezWindow.document.writeln("<br><font color=green>Livrarea minima:"+min+" s-a facut in ziua de "+Z[jmin]+"</font>"); RezWindow.document.writeln("</html>"); } // --> </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" 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="validate(this,0,20);"> <tr> <td><input type="button" value="Livreaza" onClick="trimite();"> </table> </center> </form> <center> <h3> Situatia Livrarilor </h3> <map name="rezervorMap"> <area name="R1" coords="16,18,91,125" href="javascript:afispartial(0)" onMouseOver="window.status='Rezervorul R1';return true" onMouseOut="window.status=' ';return true"> <area 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)" onMouseOver="window.status='Rezervorul R3';return true" onMouseOut="window.status='';return true"> </map> <img src="rezervoare.jpg" align="top" usemap="#rezervorMap"> Figura 9.44 </body> (continuare) </html>
Remarci 9 Script-ul (inserat n seciunea <head> a documentului (X)HTML) conine funciile cunoscute din exemplele anterioare. 9 Pentru crearea celor trei imagini reactive, corespunztoare rezervoarelor R1, R2, R3 s-a folosit imaginea rezervoare.jpg; zonele 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, coords, href i gestionarii de evenimente onMouseOver i onMouseOut. 9 Tag-ul <img> conine n mod obligatoriu usemap=#rezervorMap.

n continuare, v invitm s testai script-ul, plasnd mouse-ul i executnd clic deasupra fiecrei zone reactive R1, R2, R3. Analizai rezultatele execuiei programului (figura 9.45, 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 utilizatorul plimb mouse-ul (fr a executa clic) pe una din rile Europei se vor afia pentru ara respectiv, ntr-un formular, urmtoarele informaii: ara, capitala, populaia, suprafaa, moneda (figura. 9.48).

Figura 9.48
Indicaii: 9 Limitai (nu din motive politice!) numrul rilor la cel mult 12. 9 Utilizai tag-ul <area> cu atributele: coords, shape, href (vezi figura 8.49) i cu gestionarii de documente: onMouseOver i onMouseOut.

Figura 9.49
9 Formularul nu conine nici un buton ci numai zone (5) de tip text pentru afiarea informaiilor 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 instan a unui obiect Image? 5. Ce este un rollover? 6. Care sunt resursele necesare pentru crearea unei imagini reactive client? 7. Poate fi plasat un rollover ntr-o imagine 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 pagina Web se obine ceea ce este ilustrat n figura 9.53.

Figura 9.53 Ce semnific:

9 onMouseOver=peste(follow.jpg) 9 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 care 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.Animaiile JavaScript par a fi puin simpliste! Pot fi create n JavaScript animaii mai complexe?

Vizitai site-urile
9 http://Javascript.internet.com/games/terablox.htm; 9 http://JavaScript.Internet.com 9 http://www.geoticies.com/Silicon Valley/7116/ 9 http://www.serve.com/hotsyte/ 9 http://Javascript.internet.com/page-details/delayed-gif.html 9 http://Javascript.internet.com/bgeffects/mouse-fireworks.html 9 http://Javascript.internet.com/messages/elastic-bullets.html 9 http://Javascript.internet.com/miscellaneous/image-slideshow.html 9 http://Javascript.internet.com/navigation/thumbmail-navigator.html 9 http://Javascript.internet.com/miscellaneous/kitykitys--photo-album.html 9 http://www.kitykity.com/photoalbum 9 http://Javascript.internet.com/scrolls/animated-message.html 9 http://Javascript.internet.com/bgeffects/persistent-layer.html 9 http://Javascript.internet.com/navigation/over-line-text-link.html 9 http://www.webwizguide.info/directory/directory/asp?cat=java&PagePosition=1

Conversaia 10

Obiectele Frame i Layer

n aceast conversaie:
f f f f f

Obiectele Frame EXEMPLUL 10.1 JAVASCRIPT Obiectul Layer. Aplicaii EXEMPLUL 10.2 JAVASCRIPT 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 divizarea 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! Indiferent 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 servete la manipularea cadrelor i nu a ferestrelor. Numele obiectului Frame este acelai cu cel pe care l afectai atributului name al tag-ului <frame>.

378
Remarci: 9 Cuvintele cheie window i self permit referirea la cadrul curent. 9 Cuvntul cheie parent permite referirea la fereastra de nivel superior (cel mai des, fereastra principal). 9 Fiecare din obiectele Frame ale unei ferestre este un fiu al obiectului 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 care 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 cadre (frameset) care conine cadrul curent, iar top reprezint setul de cadre principal 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 figura 10.2).

379

Figura 10.2
Remarci: 9 Putei folosi oricare din cele dou metode de acces la elementele matricii frames (prin numrul de index/prin nume). 9 Dac documentul dumneavoastr conine de exemplu 13 cadre, fr ndoial este mult mai simplu s utilizai matricea frames. Dac ns, documentul conine dect 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 coninutului 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: 9 Programul din figura 10.4 creeaz dou cadre (la stnga i la dreapta ferestrei). 9 Tag-urile <body> sunt nlocuite cu tag-urile <frameset>.

2. Creai documentul (X)HTML pentru cadrul din stnga, care va servi pentru navigarea n site (figura 10.5).

380

Figura 10.5
Remarci: 9 Gestionarii de evenimente onClick se repet (cu mici modificri) pentru fiecare din cele patru link-uri (vezi tag-urile <a>). 9 Gestionarii de evenimente onClick sunt declanai prin evenimentul click, care afieaz un document n cadrul din dreapta. 9 Deoarece script-ul se gsete (el nsui) ntr-un cadru, numele celuilalt cadru trebuie s fie precedat de cuvntul cheie parent. 9 Fiecare din obiectele frame ale unei ferestre este un fiu al obiectului printe Window. 9 Cuvintele cheie window i self permit referirea cadrului curent. 9 Cuvntul cheie parent permite referirea la fereastra de nivel superior (de regul fereastra principal). 9 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 numele

stnga.html.
3.2 Deschidei n browser documentul HTML care divizeaz fereastra n dou cadre (vezi figura 10.6).

381

Figura 10.6

3.3 Testai link-urile din cadrul din stnga. n figura 10.7 se prezint rezultatul execuiei 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 conversaia precedent (EXEMPLUL 9 JAVASCRIPT), cu singura deosebire (important!) c pentru afiarea rezultatelor vom folosi obiectele Frame (Rezultatele vor fi afiate ntr-un cadru inserat n documentul curent i nu ntr-o fereastr distinct).

382
Introducerea valorilor pentru livrri se face printr-o singur zon de text (vezi EXEMPLUL 9 JavaScript, Varianta 2). Selecia rezervorului i a zilei se fac printr-o list de selectare.

Specificaii de programare n figura 10.8 este prezentat ecranul (intrare/ieire) cu RAPORT LIVRRI REZERVOR R1. Tabela 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 care se va introduce valoarea livrrilor Inputd: (obiect) frame-ul ce conine obiectele Rezervor, 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 faptul 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 valorile livrrilor pe zile i rezervoare

Figura 10.9

383
Documentaia de proiectare Pseudocodul pentru EXEMPLUL 10.1 JAVASCRIPT este prezentat n figura 10.10. Pseudocodul EXEMPLUL10.1
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 frame-uri //raspunde la evenimentele generate de butonul Livreaza IF(se apasa butonul Livreaza) DO livreaza ENDIF //raspunde la evenimentele generate de zonele reactive IF(se executa click pe zona unui rezervor) DO afispartial(rezervor) ENDIF //raspunde 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 // calculeaza total livrari s=0 FOR(j=0;j<5;j++) s=s+arez,j ENDFOR 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 //scrierea rezultatelor in frame-ul report k=rez+1 raport.WRITE "SITUATIA REZERVORULUI R"+k raport.WRITE "ZIUA R"+k FOR(j=0;j<5;j++) raport.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 (continuare) 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"); //functia 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 = false; var x=parseFloat(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; } // DECLARAREA MATRICEI IN CARE SE VOR PASTRA CANTITATILE LIVRATE a=new Array(3); a[0]=new Array(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 function 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 DINTR-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>ZIUA</b><td><b>REZERVOR R"+k+"</b></td></tr>"); for(i=0;i<5;i++) { raport.document.writeln("<tr><td>" + Z[i]+"</td>"); raport.document.writeln("<td>" + a[rez][i]+ "</td></tr>"); } raport.document.writeln("</table></center><p><p>"); raport.document.writeln("<center><p><font color=green size=+1>Total Livrari:"+s+"</font>"); raport.document.writeln("<br><font color=green size=+1>Media Zilnica:"+trunchiaza(med)+"</font>"); raport.document.writeln("<br><font color=green>Livrarea maxima:"+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" noresize src="inputdata.html" name="inputd"> <frame src="raport.html" name="raport"> </frameset> <frame scrolling="no" noresize src="situatie.html" name="sit"> Figura 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> <option>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><input 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>Livrarea maxima: 0 s-a facut in ziua de Luni </font> <br><font color=green>Livrarea minima: 0 s-a facut in ziua de luni </font> Figura 10.11 (continuare) </center> </html>

387
//SITUATIE.HTML <html> <body> <center> <h3> Afiseaza Livrari pentru Rezervoarele: </h3> <map name="rezervorMap"> <area name="R1" coords="16,18,91,125" href="javascript:parent.afispartial(0)" onMouseOver="window.status='Rezervorul R1';return true" onMouseOut="window.status=' ';return true"> <area name="R2" coords="105,18,180,125" href="javascript:parent.afispartial(1)" onMouseOver="self.status='Rezervorul R2';return true" onMouseOut="self.status=' ';return true"> <area name="R3" 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"> Figura 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 set de date (Rezervorul 1).

Figura 10.12

388 Obiectul Layer

Obiectul Layer este un fiu al obiectului Document. Obiectul Layer permite limbajului JavaScript s acceseze straturile n interiorul documentelor.
Remarc. Pentru mai multe informaii privind straturile i modul n care acestea funcioneaz n browser, consultai lucrrile: 9 Liviu Dumitracu, Dreamweaver MX, Editura Universitii din Ploieti, 2003. 9 Richard Wagner, R.Allen Wyke, JavaScript, Editura Teora, Traducere Cora Rdulescu i Dan

Pavelescu, 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, parentLayer, siblingAbove, siblingBellow, src, top, visibility, window, zIndex load(), moveAbove(), 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 englez) reprezentate n pagina (X)HTML prin tag-urile <div> sau <layer>. Matricea layers[] este recunoscut numai de browser-ul Netscape.
Remarci: 9 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. 9 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-ului <div> ci n atributul <id> al aceluiai tag.
Remarc. n Internet Explorer putei accesa proprietile unui strat prin intermediul matricii style, ceea ce nseamn c sintaxa pe care o vei folosi va fi: document.all[numestrat].style.

Corespondena

ntre

atributele

HTML

ale

straturilor

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 se pot suprapune precum straturile, parial sau total. Straturile sunt de regul obiecte statice, dar ele pot fi modificate i deplasate cu ajutorul unui script. Natural, limbajul de script ales de Netscape este JavaScript ntruct el este creatorul limbajului.
Remarci: 9 Straturile au fost implementate de Netscape ncepnd cu versiunea 4 a browser-ului Netscape Navigator. 9 Pentru gestiunea straturilor, Netscape a creat trei noi tag-uri: <LAYER> ... </LAYER>; <ILAYER> ... </ILAYER> i <NOLAYER> ... </NOLAYER>. 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 implicite. 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 pagini Web va trebui s cunoatem corespondena dintre atributele HTML ale straturilor i proprietile JavaScript (vezi figura 10.16).
Atribut HTML Proprieti JavaScript

NAME

Figura 10.16

name Numele stratului (identic cu id). Nemodificabil. id

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

visibility

Starea de vizibilitate a stratului.

391
BACKGROUND background

Figura 10.16
(continuare)

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

below

Numele elementului HTML de dedesubtul stratului curent.

Remarc. Pentru o mai bun lizibilitate am procedat la scrierea numelor atributelor HTML cu majuscule, dar ... nu este obligatoriu. n schimb, numele proprietilor JavaScript se scriu ntotdeauna cu minuscule!

Metodele obiectului Layer

Metodele obiectului Layer sunt prezentate n detaliu n figura 10.17.
Metod Sintax

load()

document.layers[].load()

Figura 10.17

ncarc o nou adres URL.

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()

document.layers[].moveTo()

Deplaseaz colul din stnga-sus al ferestrei la coordonatele specificate ale ecranului.

392
moveToAbsolute() document.layers[].moveToAbsolute()

Figura 10.17
(continuare)

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()

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 care conine metoda moveBy().

Figura 10.18

n figura 10.19 este prezentat rezultatul execuiei programului JavaScript n navigatorul 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 conversaia precedent, cu singura deosebire c de data acesta vom folosi pentru afiarea rezultatelor 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. Tabela de variabile este prezentat n figura 10.21.

Figura 10.20

395
Tabela de variabile Variabile de intrare Rezervor: (obiect) lista simpla de selecie 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 zile 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 zilelor sptmnii jmax,jmin: (numere ntregi) pstreaz indicii livrrilor maxime i minime din 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 mediei zilnice pe rezervor max,min: (numere reale) pstreaz valoarea maxim i minim pentru livrri rnume,Z1, Z2, Z3, Z4, Z5, Tot, Med, emax, emin, zmax, zmin: (obiect) zone text pentru afiarea rezultatelor

Documentaia de proiectare Pseudocodul pentru EXEMPLUL 10.2 JAVASCRIPT este prezentat n figura 10.22. Pseudocodul 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 //raspunde la evenimentele generate de butonul Livreaza IF(se apasa butonul Livreaza) DO livreaza ENDIF //raspunde la evenimentele generate zonele reactive IF(cursor mouse pe zona unui rezervor) DO afispartial(rezervor) ENDIF //raspunde la evenimentele 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 layerul 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.value=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 BEGIN 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=s.indexOf(.); 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=parseFloat(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 Array(5); a[2]=new Array(5); for(i=0;i<3;i++) for(j=0;j<5;j++) a[i][j]=0.0; function 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; //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; f2.rnume.value="R"+k; document.f2.Z1.value=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=trunchiaza(med); document.f2.emax.value=max; document.f2.zmax.value=Z[jmax]; document.f2.emin.value=min; document.f2.zmin.value=Z[jmin]; } function arata() { document.all['R1'].style.visibility = "visible"; } function ascunde() { document.all['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" 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="validate(this,0,20);"> <tr> <td><input type="button" value="Livreaza" onClick="trimite();"> </table> </center> </form> <h3>Situatia Livrarilor</h3> <table> <tr><td><a href="javascript: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:void(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; visibility: hidden; top:190; left: 120px;"> <form name = "f2"> <center><p><b>SITUATIA 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" value="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=#efefff> <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 Zilnica</font><td><input type="text" name="Med" size="7" value="0.0"> </table> <table bgcolor=#efefff> <tr><td><font color=green>Livrarea maxima:</font><td> <input type="text" name="emax" size="7" value="0.0"> <td> <input type="text" name="zmax" 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" name="zmin" size="7" value="Luni"> </table> </form> </div> Figura 10.23 </body> (continuare) </html> Vizualizai documentul ntr-un browser i testai script-ul numai n Internet Explorer. Se introduc livrrile; se poziioneaz mouse-ul deasupra legturii: Rezervor 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
9 http://Javascript.internet.com/messages/description-layer.htm; 9 http://Javascript.internet.com/bgeffects/floating-transparent-slideshow.html 9 http://Javascript.internet.com/bgeffects/write-layer.html 9 http://www.dannyg.com/examples/ol2/index.htm 9 http://www.dannyg.com/examples/dh2/index.htm

Conversaia 11

Depanarea aplicaiilor JavaScript

n aceast conversaie:
f f f f f

Tipuri de erori JavaScript. Aplicaii Tehnici de depanare a script-urilor Instrumente pentru depanarea script-urilor. Aplicaii Instruciunile throw i try catch. Aplicaii Tem

Evitai erorile frecvente JavaScript

Trebuie s recunoatei, chiar dac nu v face plcere c, nu de puine ori, dar mai ales atunci cnd ai mrit gradul de complexitate al aplicaiilor JavaScript ai fcut i greeli! Este normal s fie aa! n aceast conversaie, ne vom apropia cu respect fa de erorile curente JavaScript, vom ncerca o clasificare a acestora urmnd ca apoi s precizm regulile pentru evitarea acestor erori frecvente JavaScript. De asemenea, nu vor lipsi din prezentarea noastr nici tehnicile i instrumentele de depanare folosite curent n activitatea de testare i depanare a programelor JavaScript.

Tipuri de erori JavaScript

Fiecare dintre noi poate comite erori particulare la scrierea unui program JavaScript, dar foarte multe dintre acestea sunt curente.

404
Erorile JavaScript sunt identificate de browser la ncrcarea paginii Web. Ele pot fi clasificate n urmtoarele categorii: 9 erori de sintax; 9 erori de logic; 9 erori generate de incompatibilitatea ntre navigatoare.

Erori de sintax
Erorile de sintax JavaScript sunt erorile cele mai frecvente i cele mai uor de corectat. De cele mai multe ori, interpretorul JavaScript identific corect sursa erorilor n programele pe care le-ai realizat, dar sunt i cazuri cnd lucrurile nu stau chiar aa! n general, erorile de sintax provin din: 9 greeli de tastare confuzia ntre majuscule i minuscule; inversarea literelor; 9 greeli de punctuaie tag-uri i paranteze orfeline; ghilimele i apostrofuri plasate greit; 9 greeli de plasare a instruciunilor JavaScript 9 confuzia ntre irurile de caractere i numere numerele sunt tratate ca iruri de caractere; irurile de caractere sunt tratate ca numere.
Aplicaie Urmtoarele script-uri conin erori de sintax, dup cum urmeaz: 9 greeli de tastare, greeli de punctuaie figura 11.1, figura 11.2, figura 11.3, figura 11.4, figura 11.5, figura 11.6, figura 11.7, figura 11.8, figura 11.9 9 greeli de plasare a instruciunilor JavaScript figura 11.10, figura 11.11, figura 11.12, figura 11.13, figura 11.14 9 greeli de tratare a irurilor de caractere i a numerelor figura 11.15, figura 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 fii fericii!); Document.Write (S nu uitai s fii fericii!); Document.WRITE (S nu uitai s fii fericii!); </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=Array(5); c=[2,5,7; </script> <script> if (a==10); alert (a=10); if (b==5 alert (b=5); if (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) } else (document.write (EROARE); if (r=33) alert (FELICITRI!) else document.write (EROARE); </script> <script> while (i<=7);{} document.writeln(i); ++i; while (j<=9; document.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 { alert (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); document.write (p_3); <script> s=0; for (i=0; i<=10; ++i++) { s=s+i; } write(s); </script>

Figura 11.13

Figura 11.14

<script> function demo (Valoare) { document.write (valoare.bold()+<br/>) } </script> </head> <body> <form> <input type=button value=BOLD onClick=demo(3.14)> </form> Figura 11.15 </body> </html> <html> <head> <title> aplicaie </title> <script> function test (valoare) { alert (Valoare) } </script> function adunare (unu, doi) { return 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))> </form> Figura 11.17 </body> </html>

Erori de logic
Erorile de logic se genereaz atunci cnd nu se obin rezultatele scontate! Dei codul surs JavaScript este corect din punct de vedere sintactic, dei nu sunt generate erori n timpul execuiei programului (apeluri de funcii incorecte; atribuiri de valori pentru variabile nedeclarate; imposibiliti aritmetice mprire la zero etc.), totui programul conine erori de logic (semantice)! Identificarea erorilor de logic constituie o piatr grea de ncercare pentru nceptori, dar nu trebuie s disperai! Foarte multe erori de logic sunt generate de o analiz superficial a aplicaiei, o proiectare defectuoas a programului JavaScript, i ca urmare de un cod surs JavaScript incorect!
Aplicaie Identificai i corectai erorile de logic din urmtoarele script-uri (vezi figurile 11.18, 11.19, 11.20, 11.21).

<script> stud=parseInt (prompt(Introducei numrul de studeni, 0)); teste=parseInt (prompt(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:

9 Aplicaia ilustreaz o eroare generat n timpul execuiei script-ului, datorat de o

mprire la zero: media=media/nt unde, nt=0. 9 Corectai eroarea, introducnd n instruciunea if, instruciunea nt++ (figura 11.19).

nt=0; media=0; for (j=1; j<=teste; j++){ nota=parseInt (rezultate [i][j]) ; if nota { media+=nota; nt++; } } Figura 11.19 media=media/nt; } <script> //Conversatia 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:

9 Eroarea de logic provine de la numitorul fraciei, din enunul de atribuire

d[3]=st/14;

9 Enunul trebuie corectat, dup cum urmeaz:

d[3]=st/15;

9 De ce 15? Rspunsul este simplu: 5 zile (luni, mari, miercuri, joi, vineri) * 3 rezervoare
(R1, R2, R3), (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:

9 Rezultatele afiate (vezi figura 11.22) sunt incorecte, chiar dac execuia s-a ncheiat
fr incidente.

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

Erori generate de incompatibilitatea ntre navigatoare

Nimic nu este mai neplcut dect s constai c dup ce ai reuit s creezi (cu efort!) script-uri pe care le consideri nemaipomenite, s primeti ntr-o bun zi un mesaj din partea unui vizitator care s-i semnaleze faptul c script-urile tale nu merg cu navigatorul acelui vizitator. Nu uitai c exist un turn Babel al navigatoarelor! Morala: 9 testai script-urile dumneavoastr cu mai multe browser-e, nainte de a le plasa pe server-ul Web; 9 consultai manualele de utilizare a celor mai importante browser-e: http://developer.netscape.com/docs/manuals/jsref/ http://msdn.microsoft.com/scripting/jsscripting/jsscript/ default.htm 9 detectai tipul de navigator utilizat de ctre vizitatorii dumneavoastr.

411 Tehnici de depanare a script-urilor

n vremurile mai de demult programatorii ncepeau depanarea prin a desena scheme logice complicate pentru a urmri secvenial, logica programului. n prezent, schemele logice 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 indispensabil 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 script-urile dumneavoastr.
Observaie. Comentariile JavaScript (// sau /* i */) au fost prezentate n Conversaia 2).

Pentru a elimina anumite poriuni din codul JavaScript (pn la eliminarea erorilor) utilizai comentariile conform procedurii de mai jos [1]: 9 transformai n comentariu una sau mai multe linii ale programului; 9 salvai programul; 9 rencrcai pagina Web n browser; 9 analizai rezultatul (efectul); 9 modificai codul surs sau transformai n comentariu mai multe linii de cod; 9 repetai aceast procedur pn cnd ai eliminat eroarea.

Afiai valorile variabilelor

O alt tehnic de depanare frecvent folosit este aceea de a aduga instruciuni JavaScript pentru a putea cunoate strile script-ului. n acest sens, utilizai metoda alert() pentru a: 9 afia valorile variabilelor, matricelor i valorile returnate de funcii; 9 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 navigatorului 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 dimensiunea 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 programului.

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 ctre 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 ntotdeauna un mesaj de eroare.

413
Dac nu tii ce operator s folosii, amintii-v simplu c = servete la schimbarea valorii unei variabile, iar == servete la compararea a dou valori. Iat o instruciune eronat (figura 11.23). <script>
Figura 11.23

if (x=7) alert (La revedere!); </script> Aceast instruciune pare logic la prima vedere, dar x=7 va avea ca efect atribuirea valorii 7 variabilei x, i nu compararea celor dou. Netscape detecteaz de cele mai multe ori acest tip de eroare i afieaz un mesaj la consol. Eroarea invers (== n loc de =) nu va fi niciodat detectat! Variabile globale 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 explicit prinii unui obiect. Astfel, este posibil de a ne referi la metoda window.alert 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 JavaScript. Dac ai verificat absena erorilor clasice n script-urile dumneavoastr, care totui nu funcioneaz este momentul s trecei la depanare, adic la cutarea i eliminarea erorilor din program, utiliznd instrumentele simple de depanare pe care le prezentm n continuare.

414
Consola JavaScript
Primul lucru pe care trebuie s-l facei atunci cnd script-ul dumneavoastr nu funcioneaz este consultarea mesajelor de erori afiate. n Netscape, ncepnd cu versiunea 4.5, mesajele de eroare nu se afieaz direct, ele fiind nregistrate n consola JavaScript. Iat cum procedm pentru a accesa consola JavaScript. 1. Introducei JavaScript n cmpul Address (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 asemenea 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 mesajelor de eroare cu Internet Explorer

Internet Explorer i versiunile mai recente nu afieaz n mod implicit mesajele de eroare. Iat cum procedm pentru a afia mesajele de eroare n Internet Explorer. 1. Executai clic pe Tools Internet Options Advanced (figura 11.27).

Figura 11.27

2. Dezactivai Disable script debugging i activai opiunea Display a notification about every script error (figura 11.28).

416

Figura 11.28

Figura 11.29

417
Remarci:

9 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 icon pentru a afia mesajul de eroare (figura 11.29). 9 Dup cum ai putut constata i Microsoft dispune de un instrument de depanare la fel de eficient ca i consola Netscape. Indiferent de preferinele dumneavoastr, testai script-urile cu cele dou navigatoare.

Alte instrumente de depanare

Mesajele de avertizare (vezi metoda alert()) i puin fler v pot ajuta s gsii cu uurin cauza unei erori ntr-un script simplu dar aceste metode sunt insuficiente pentru depanarea script-urilor de dimensiuni mari. n consecin, v recomandm s utilizai unul din instrumentele specializate, prezentate mai jos:
9

W3C validator, instrument de depanare a documentelor (X)HTML, care poate fi descrcat gratuit, de la adresa: http://validator.W3.org/
Remarc. Consultai lucrarea L. Dumitracu (X)HTML, Editura Universitii din Ploieti 2003.

Netscape JavaScript Debugger, instrument de depanare a aplicaiilor JavaScript, care poate fi descrcat gratuit, de la adresa: http://developer.netscape.com/software/jsdebug.html

sau,
http://www.mozilla.org/projector/venkman/
Remarc. Principalele caracteristici [1] ale instrumentului Netscape JavaScript Debugger 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; fereastra de dialog Error Reporter. 9

Microsoft Script Debugger (MSSD), instrument de depanare a script-urilor, parte integrant din Internet Explorer, care poate fi descrcat gratuit, de la adresa: http://msdn.microsoft.com/library/en-us/sdbug/html/sdbug_1.asp

Remarc. Principalele caracteristici [1] ale instrumentului Microsoft Script Debugger sunt: imagine dinamic a structurii (X)HTML; integrarea mai multor limbaje (JavaScript, VBScript i Java din acelai document); puncte de ntrerupere; parcurgerea pas cu pas a codului surs; omiterea liniilor din procedurile apelate; parcurgerea liniilor din procedurile apelate; stiv de apeluri integrat; fereastra de expresii evaluate imediat. 9

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 culori.
Aplicaie Scriei un program JavaScript care calculeaz i afieaz determinantul unei matrice 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.31).

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 aplicaia

validator.

Figura 11.32

420
Remarc. Nimic nu este perfect! Ai identificat eroarea? Dei l pronun bine pe r, n loc de r am tastat l (</sclipt>). Se ntmpl, nu-i aa! Corectai </script>!

4. Corectai

eroarea

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 transfer eroarea blocului catch.

422
Iat cum procedm pentru a genera dou mesaje de eroare: Eroare 1, Eroare 2 n situaia n care numrul de rezervoare cilindrice echilaterale care a fost introdus de la tastatur este zero, respectiv negativ (vezi EXEMPLELE JAVASCRIPT). n figura 11.38 este prezentat 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==Eroare 1) alert (Eroare 1 numr rezervoare=0) if (er==Eroare 2) alert(Eroare 2 numr rezervoare negativ) } Figura 11.38 </script>
Comentarii: 9 Programul execut blocul try. 9 n situaia n care n nu este egal cu zero i nici negativ, nu se genereaz nici o eroare iar blocul catch nu este executat. Pentru utilizator nu se ntmpl absolut nimic. 9 n cazul n care valoarea variabilei n a fost fixat la 0 n cursul instruciunilor executate anterior, eroarea Eroare 1 este generat (aceast eroare este de acelai tip cu erorile de sintax). Programul prsete blocul try i execut 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:

9 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. 9 Dac instruciunile din blocul try nu depisteaz nici o eroare, 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 (Introducei 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: 9 try ateapt o eroare! 9 eval() accept un ir de instruciuni JavaScript i l evalueaz ca fiind cod surs. 9 Dac utilizatorul introduce a=4*Math.PI*Math.pow(3,2), JavaScript poate evalua expresia i va afia 113.097. 9 Dac utilizatorul introduce a=4*Math.PI*pow(3,2)+, spunem c avem de-a face cu o eroare de sintax. 9 n sfrit, dac utilizatorul introduce Droopy, JavaScript ncearc s evalueze valoarea variabilei Droopy, care nu exist. Nu este vorba 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 greit 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 generat? 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 minuscule paranteze orfeline inversarea literelor 3. Foarte multe erori de logic sunt generate de: o proiectare defectuoas a programului JavaScript confuzia ntre irurile de caractere i numere greeli de plasare a instruciunilor JavaScript 4. Inserarea comentariilor n programele JavaScript contribuie la: crearea unor reflexe JavaScript eliminarea erorilor de sintax eliminarea erorilor de logic 5. n JavaScript una din erorile cele mai frecvente comise de nceptori este confuzia dintre: operatorul de atribuire i operatorul de egalitate operatorul == i operatorul === operatorul || i operatorul && 6. Consola JavaScript este: un instrument simplu pentru afiarea mesajelor de eroare cu Netscape un instrument simplu pentru afiarea mesajelor de eroare 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 recunoate urmtoarele tipuri de erori: EvalError

SintaxError TypeError FormatError LogicalError

Vizitai site-urile
9 http://developer.netscape.com/docs/manuals/jsref/objintro.htm 9 http://msdn.microsoft.com/scripting/jsscript/default.htm

Conversaia 12

Crearea obiectelor personalizate

n aceast conversaie:
f f f f f f f

Utilizarea obiectelor personalizate pentru simplificarea script-urilor Definii un obiect Definii o metod pentru un obiect Creai o instan a unui obiect Aplicaii EXEMPLUL 12 JAVASCRIPT Tem

Utilizarea obiectelor personalizate pentru simplificarea script-urilor

Fr s greim, putem afirma c avei deja o experien (un background) n utilizarea obiectelor predefinite ale limbajului JavaScript. Suntei de asemenea familiarizai cu obiectele frecvente n programarea JavaScript. Dar ... putei de asemenea s creai propriile dumneavoastr obiecte, ceea ce trebuie s recunoatem este ceva nemaipomenit! Dac variabilele i matricile permit stocarea datelor sub diverse forme, uneori este necesar s facem 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 pentru fiecare coordonat a fiecrei persoane (pentru fiecare nume, fiecare adres site i fiecare adres email) ceea ce este foarte complicat! Utilizarea matricilor simplific puin lucrurile, 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 reprezentat 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 Contact. Fiecare obiect Contact conine urmtoarele proprieti: 9 nume; 9 site (adresa de site (personal)); 9 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 iniializarea noului obiect i atribuirea proprietilor corespunztoare. n figura 12.1 este prezentat codul JavaScript al funciei Constructor.

Figura 12.1

429
Remarci: 9 Constructorul este o funcie simpl care accept mai muli parametri ale cror valori sunt atribuite proprietilor obiectului. 9 Obiectul are acelai nume ca i funcia Contact. 9 Cuvntul cheie this se refer la obiectul curent, acela creat cu ajutorul funciei.

Definii o metod pentru un obiect

Obiectele devin cu adevrat interesante i comode atunci cnd ele sunt dotate cu metode. n JavaScript, definirea unei metode pentru un obiect se realizeaz n dou etape: 9 Definii metoda n funcia Constructor ntr-o linie de cod n care vei atribui metodei un nume, apoi asociai-i funcia de prelucrare. 9 Scriei funcia de prelucrare. Iat cum definim metoda afiareContact n funcia Constructor Contact. n figura 12.2 este prezentat codul complet JavaScript al funciei

Constructor.

Figura 12.2
Remarci: 9 Funcia afiareContact afieaz coordonatele de contact ale unei persoane. 9 Instruciunea care a fost adugat seamn cu o definiie a proprietii, dar se refer la funcia afiareContact. Putei utiliza aceast sintax din momentul n care funcia afiareContact a fost definit. 9 Funcia afiareContact este utilizat ca metod, fr parametri! 9 Cuvntul cheie this se refer la obiectul curent.

Iat cum scriem n JavaScript funcia de prelucrare afiareContact asociat metodei cu acelai 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 utiliza o definiie a obiectului va trebui s crem un nou obiect cu ajutorul cuvntului cheie new (vezi obiectele Array, Date, String). n figura 12.4 se prezint codul JavaScript care creeaz un nou obiect Contact numit Droopy.

Figura 12.4
Remarci: 9 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 indicarea coordonatelor n aceeai ordine ca n definiie. 9 Odat executat instruciunea din figura 12.4, un nou obiect a fost creat, care conine informaii despre Droopy. Acest obiect (Droopy) este o instan a obiectului Contact. 9 n figura 12.5 se prezint o secven de cod JavaScript care creeaz un obiect Contact vid (Romic) i definete apoi proprietile sale.

Figura 12.5

431
Odat creat instana obiectului Contact cu ajutorul uneia din metodele prezentate, utilizai metoda afiareContact pentru a afia informaiile corespunztoare. Proprietile persoanei 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 reduse. 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 permite 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 grupe. Pentru gestionarea automat a acestor date, vom folosi facilitile JavaScript (tabelul 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: 9 studenii sunt identificai prin: cod, nume, prenume; 9 materiile de studiu sunt identificate prin: cod, denumire; 9 nota 0 (zero) semnific absena studentului de la examen sau verificare. 9 rapoartele generate sunt de unul din urmtoarele tipuri: raport general studenii sunt afiai n ordine alfabetic (nume, prenume i notele obinute la toate materiile); raport pe materii pentru o materie selectat din lista de materii, studenii sunt listai n dou moduri: ordine alfabetic; ordine descresctoare a notelor; raport restanieri pentru fiecare materie se afieaz studenii care nu au obinut nota 5 de promovare; 9 cererile 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: 9 materie conine atributele: cod (numrul de identificare al materiei), denumirea materiei (ir de caractere); 9 student conine atributele: numele i prenumele studentului; notele obinute la materiile de studiu.
Remarc. A fost aleas o soluie simplificat care prezint dezavantajul unei flexibiliti reduse la modificarea numrului materiilor de studiu i la adugarea mai multor ani de studiu, 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: 9 tabelul materii se va utiliza un vector ir de caractere; codul de identificare al materiei va fi indicele materiei iar elementele vectorului, un ir de caractere ce reprezint denumirea materiei. 9 tabelul student se va utiliza un vector de obiecte personalizate n care indicele vectorului va reprezenta numrul de identificare al studentului iar obiectul personalizat va fi format din dou iruri de caractere: Nume, Prenume reprezint numele i prenumele studentului; Note vector de numere ntregi reprezentnd notele obinute de student (dimensiunea vectorului de note trebuie s fie egal cu dimensiunea vectorului materii care definete numele materiilor de studiu). Definii obiectul student (vezi metoda constructor,

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 constructor (def_student) a obiectului student (vezi figura 12.10).

function def_student(Nume,Prenume,note){ this.Nume=Nume; this.Prenume=Prenume; this.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 prelucrare. Pentru a afia simultan opiunile de prelucrare, criteriile i rezultatele prelucrrii cererilor de cutare se va folosi o fereastr cu mai multe (4) cadre (vezi figura 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 mprit 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 tipul prelucrrii RAPOARTE iar n figura 12.14 se prezint acelai cadru cu tipul prelucrrii:

CUTARE.

436

Figura 12.13

Figura 12.14

Cadrul subrap
Cadrul subrap este cadrul prin intermediul cruia se introduc datele necesare efecturii 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 prezentat 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 EXECUT.

Cadrul fraport
Cadrul fraport este cadrul n care se afieaz rezultatele prelucrrilor. Coninutul acestuia este dinamic, fiind generat n funcie de cererea de cutare selectat. n figura 12.20 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 sau al cutrii este selectat de utilizator prin intermediul cadrului inputd. Corespunztor 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 prelucrare (raport sau cutare) prin afiarea a dou butoane radio prin care utilizatorul poate realiza selecia. Acionarea unuia din aceste butoane radio lanseaz n execuie funcia afisrap care modific opiunile listei tiprap. n figura 12.21 este prezentat pseudocodul funciei afisrap(). Pseudocodul AFISRAP
BEGIN Parametrii: t- valoare intreaga IFAFIS IF (t==0) //afisare tip raport //fixeaza trei optiuni in lista tiprap tiprap.optiune[0]=General tiprap.optiune[1]=Materii tiprap.optiune[2]=Restantieri IFAFIS ELSE tiprap.optiune[0]=Student tiprap.optiune[1]=Restantieri IFAFIS ENDIF Figura 12.21 AFISRAP END

AFISRAP

Selectarea unei opiuni din lista tiprap va duce la afiarea n cadrul subrap a elementelor de interfa ce asigur introducerea informaiilor necesare pentru fiecare tip de prelucrare i lansarea n execuie a prelucrrii respective. Astfel, se gestioneaz evenimentul 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 ENDCASE 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 subrap i conine ca element de aciune doar butonul Executa care prin apsare va apela funcia 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 Afiseaza toata grupa si toate notele genereaza html pentru form f2 ce contine butonul 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<lista_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 butonul

Executa. Lista de opiuni smaterii conine lista materiilor, iar lista sordine
permite selecia modului de ordonare al studenilor: ordinea alfabetic sau ordinea dat 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 studeni. n cazul ordonrii descresctoare dup note, vord va conine indicii studenilor din vectorul list_stud n ordinea descresctoare a notelor. Astfel, vord[0] va conine indicele elementului din lista_stud al studentului care are nota cea mai mare la materia 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 pentru 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 Materii //determina selectiile utilizatorului imat=smaterii.selectedIndex; iord=sordine.selectedIndex; //aloca spatiu pentru vectorul vord new vord //se plaseaza ordinea 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 dupa note // se aplica algoritmul de sortate bubble_sort neordonat=true; WHILE (neordonat) 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 lista_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 raportului 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 pseudocodul din figura 12.29). Pseudocodul AFIS_SUBRAP2 AFIS_SUBRAP2 BEGIN
//afiarea informaiilor despre raport subrap.WRITE Raport Restantieri generaza html pentru forma f2 ce conine butonul Executa IF (clic pe butonul Executa) DO EXECUTARR ENDIF //afiarea raportului restantieri pe materii subrap.WRITE Raport Restantieri FOR(j=0;j<materii.length;j++) fraport.WRITE "Materia:",materii[j], DO afis_restantieri(j); ENDFOR END Parametrii imat- indicele materiei nrest=0; //determina numarul de restantieri FOR(i=0;i<lista_stud.length;i++) IF (lista_stud[i].Note[imat]<5) nrest++; ENDIF ENDFOR IF(nrest>0) //afiseaza in tabel studentii restantieri 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 interfaa 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) pentru 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 dorit 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 rezultatelor 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 specificat 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 Prenume 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.WRITE i+1, lista_stud[i].Nume fraport.WRITE lista_stud[i].Prenume FOR(j=0;j<materii.length;j++) fraport.WRITE lista_stud[i].Note[j] ENDFOR ENDIF ENDFOR ENDFOR ELSE fraport.WRITE "Nu exista nici un student cu numele:", sn," Prenumele:",pn ENDIF 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.WRITE "Numar Studenti:",nr fraport.WRITE "NR. Nume Prenume " FOR(i=0;i<materii.length;i++) fraport.WRITE materii[i] ENDFOR FOR(i=0;i<lista_stud.length;i++) IF(lista_stud[i].Nume==sn) fraport.WRITE i+1, lista_stud[i].Nume, fraport.WRITE lista_stud[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 FOR8 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 generarea 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 //determinarea indexului materiei selectate imat=smaterii.selectedIndex; subrap.WRITE CAUTARE 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 sunt 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("Algebra superioara", "Fizica","Chimie","Informatica", "Analiza Functionala"); //CREAREA 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=new 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","Ion", 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", note1); 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","Magdalena", note1); note1=new Array(9,4,7,0,5); lista_stud[8]=new def_student("Georgescu","Dragos", note1); note1=new Array(6,8,9,6,6); lista_stud[9]=new def_student("Ionescu","Ludovic", note1); note1=new Array(4,0,4,4,5); lista_stud[10]=new def_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=new Array(5,8,5,6,7); lista_stud[15]=new def_student("Patrichi","Mihai Ioan", note1); 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 Mihut", note1); note1=new Array(7,5,5,5,7); lista_stud[18]=new def_student("Stanescu","Stelian", note1); note1=new Array(8,5,5,4,6); lista_stud[19]=new def_student("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); lista_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; //AFISARE REZULTATE PENTRU RAPORT GENERAL fraport.document.open(); Figura 12.36 fraport.document.writeln("<center><p><b>RAPORT GENERAL </b></p></center>"); (continuare) fraport.document.writeln("<center><table border=1 bgcolor=#efefff><tr>"); fraport.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="#d9f0f4";} 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.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].Note[j]+" </b></td>"); } } fraport.document.writeln("</tr></table>");fraport.document.close(); } //FUNCTIA CE REALIZEAZA 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("<center><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; while (neordonat) { 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; } } } 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>"); for(i=0;i<lista_stud.length;i++) { k=i+1; if(i%2){bgc="#c0e7ed";}else{bgc="#d9f0f4";} fraport.document.writeln("<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[vord[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(); } // FUNCTIA CE REALIZEAZA AFISAREA RESTANTIERILOR LA O MATERIE function afis_restantieri(imat){ var i,j,k,nrest; nrest=0; //DETERMINA NUMARUL DE RESTANTIERI for(i=0;i<lista_stud.length;i++) if(lista_stud[i].Note[imat]<5)nrest++; if(nrest>0) { //AFISEAZA IN TABEL STUDENTII RESTANTIERI fraport.document.writeln("<center>Numar restantieri:",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>"); fraport.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.writeln("<td bgcolor="+bgc+"><b> absent </b></td>"); else fraport.document.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].Note[imat]+" </b></td>"); } fraport.document.writeln("</tr></table>"); } else fraport.document.writeln("<p> Nu esista restantieri"); } //RAPORT RESTANTIERI function executaRR(){ var i,j,k; var nrest; fraport.document.open(); fraport.document.writeln("<center><p><b>RAPORT RESTANTIERI </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.open(); 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.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)&&(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_stud[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.writeln("<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.length;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="+bgc+"><b>"+k+" </b></td>"); fraport.document.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].Nume+" "+lista_stud[i].Prenume+"</b></td>"); Figura 12.36 for(j=0;j<materii.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("<center><p>Nu exista nici un student cu numele:", sn); } }// if sn fraport.document.close(); } // CAUTAREA RESTANTIERILOR LA O MATERIE function executaCR(){ var i,j,k; var nrest; var imat=subrap.f2.smaterii.selectedIndex; fraport.document.open(); 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"> <frameset cols="30%,70%"> <frame scrolling="no" noresize src="tipraport.html" name="inputd"> <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_subrap0(){ parent.subrap.document.open(); //AFISAREA DATELOR GENERALE parent.subrap.document.writeln("<font color=green size=+1>Raport general</font>"); parent.subrap.document.writeln("<hr>"); parent.subrap.document.writeln("<p>Afiseaza toata grupa si toate notele</p>"); parent.subrap.document.writeln("<p>"); //FORMAREA ELEMENTELOR DE INTERFATA -BUTONUL DE EXECUTIE AL RAPORTULUI parent.subrap.document.writeln("<form name=\"f2\">"); parent.subrap.document.writeln("<p><input type=\"button\" value=\"Executa\" onClick=\"parent.executaRG();\">"); parent.subrap.document.writeln("</form>"); parent.subrap.document.close(); } function afis_subrap1(){ parent.subrap.document.open(); parent.subrap.document.writeln("<font color=green 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=\"smaterii\">"); for(i=0;i<parent.materii.length;i++) parent.subrap.document.writeln("<option>",parent.materii[i],"</option>"); parent.subrap.document.writeln("</select>"); parent.subrap.document.writeln("<td><select size=\"1\" name=\"sordine\">"); parent.subrap.document.writeln("<option>Alfabetica studenti</option>"); parent.subrap.document.writeln("<option> Descrescatoare Note</option>"); parent.subrap.document.writeln("</select>"); parent.subrap.document.writeln("<tr><td colspan=2><input type=\"button\" value=\"Executa\" onClick=\"parent.executaRM();\">"); parent.subrap.document.writeln("</form>"); parent.subrap.document.writeln("</table>"); parent.subrap.document.close(); } function afis_subrap2(){ parent.subrap.document.open(); parent.subrap.document.writeln("<font color=green size=+1>Raport Restantieri</font>"); parent.subrap.document.writeln("<hr>"); parent.subrap.document.writeln("<p>Afiseaza Studentii Restantieri din Grupa</p>"); parent.subrap.document.writeln("<p>"); parent.subrap.document.writeln("<form name=\"f2\">"); parent.subrap.document.writeln("<p><input type=\"button\" value=\"Executa\" Figura 12.38 onClick=\"parent.executaRR();\">"); parent.subrap.document.writeln("</form>");

454
parent.subrap.document.close(); } function afis_subrap3(){ parent.subrap.document.open(); parent.subrap.document.writeln("<font color=green size=+1>Cautare Rezultate Student</font>"); parent.subrap.document.writeln("<hr>"); parent.subrap.document.writeln("<p>"); parent.subrap.document.writeln("<form name=\"f2\">"); parent.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.document.writeln("<td><input type=\"text\" name=\"spnume\" size=\"20\">"); parent.subrap.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(); } function afis_subrap4(){ parent.subrap.document.open(); parent.subrap.document.writeln("<font color=green size=+1>Cautare Restantieri la o Materie</font>"); parent.subrap.document.writeln("<hr>"); parent.subrap.document.writeln("<table border=\"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.materii.length;i++) parent.subrap.document.writeln("<option>",parent.materii[i],"</option>"); parent.subrap.document.writeln("</select>"); parent.subrap.document.writeln("<tr><td colspan=2><input type=\"button\" value=\"Executa\" onClick=\"parent.executaCR();\">"); parent.subrap.document.writeln("</form>"); parent.subrap.document.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.options[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"; } else { // ESTE SELECTAT CAUTARE switch(ir) { case 0: afis_subrap3(); break; case 1: afis_subrap4(); break; } window.status=Tip Cautare; } } // </script> </head> <body> <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=1 onClick=if (this.checked) {afisrap(1)} > <b>CAUTARE</b></tr> <tr><td colspan=2><select size=3 name=tiprap onChange=afis_subopt(this)> <option selected>General</option> <option>Pe Materii</option> <option>Restantieri</option> </select> </table> </center> 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>Raport general</font> <hr> <p>Afiseaza toata grupa si toate notele</p> <form name="f2"> <input type="button" value="Executa" onClick="parent.executaRG();"> </form> </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 personalizate? 3. Care sunt navigatoarele care recunosc obiectele personalizate? 4. Care este cuvntul cheie JavaScript care permite crearea unei instane a unui obiect: 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 dintre 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
9 http://www.wdvl.com 9 http://msdn.microsoft.com/library 9 http://www.databasejournal.com 9 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 Gigniac, JavaScript, MicroApplication, Paris, 2003 Jean-Christophe Gigniac, Cdric Nilly, JavaScript, e-Poche, Paris, 2002 Emily A. Vander Veer, JavaScript pour les nuls, Editions First Interactive, Paris, 2002 Steven W. Disbrow, JavaScript Web Tr@ining, OEM, Paris, 2002 Mike Robertshaw, Web Site Design (U234), The Open University of Hong Kong, 2002 10. Liviu Dumitracu, nvm ... BASIC conversnd cu calculatorul, Editura Tehnic, 2 volume, 1989 11. Floarea Nstase, Pavel Nstase, Tehnologia aplicaiilor Web (XML-DOM-ASP), Editura Economic, 2002 12. Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003 13. Liviu Dumitracu, Dreamweaver MX, Editura Universitii din Ploieti, 2003 14. Liviu Dumitracu, XML, Editura Universitii din Ploieti, 2003 15. Michel Drewfus, HTML 4, Student Edition, Campus Press, Paris, 2003