JavaScript

CUPRINS
Conversaţia 1. JavaScript şi HTML 4.0, XHTML şi XML ........................ 3
Stilul de viaţă Web De ce JavaScript şi Java au nume atât de apropiate? Ce puteţi realiza cu JavaScript? Ce nu puteţi realiza cu JavaScript? Terminologia JavaScript Conceptele programării JavaScript Cum inseraţi un script în documentele (X)HTML, Dreamweaver MX şi XML? EXEMPLUL 1 JAVASCRIPT Oferta de editoare JavaScript Resursele JavaScript de care aveţi nevoie Versiunile JavaScript Temă

Conversaţia 2. Variabile şi funcţii ........................................................... 33
Tipurile de date şi valorile speciale JavaScript Variabile şi funcţii. Aplicaţii Crearea automată a script-urilor cu Dreamweaver MX EXEMPLUL 2 JAVASCRIPT Cuvinte rezervate JavaScript Temă

Conversaţia 2 (continuare). Operatorii JavaScript. Obiecte matematice .................................................. 57
Operatorii JavaScript Asociativitatea şi prioritatea operatorilor Obiectul Math Obiectul Number Obiectul Boolean EXEMPLUL 2 JAVASCRIPT (continuare) Temă

Conversaţia 3. Instrucţiunile limbajului JavaScript ............................... 91
Tipuri de instrucţiuni JavaScript for. Aplicaţii EXEMPLUL 3.1 JAVASCRIPT while. Aplicaţii EXEMPLUL 3.2 JAVASCRIPT do ... while. Aplicaţii EXEMPLUL 3.3 JAVASCRIPT for ... in. Aplicaţii if, if...else, switch. Aplicaţii EXEMPLUL 3.4 JAVASCRIPT Instrucţiunile continue şi break Instrucţiunea with Temă

Conversaţia 4. Obiectele interne String, Array ...................................... 123
Obiectele limbajului JavaScript. Prezentare generală Obiectele interne Obiectul String. Aplicaţii Obiectul Array. Aplicaţii EXEMPLUL 4 JAVASCRIPT Temă

Conversaţia 5. Obiectele (interne) RegExp, Date, Arguments .............. 153
Expresii regulate Obiectul RegExp. Aplicaţii EXEMPLUL 5 JAVASCRIPT Obiectul Date. Aplicaţii Obiectul Arguments. Aplicaţii Temă

Conversaţia 6. Gestionarii de evenimente JavaScript .......................... 189
Evenimente şi gestionari de evenimente Gestionarii de evenimente JavaScript Aplicaţii Temă

Conversaţia 7. Obiectele navigatorului .................................................. 211
Document Object Model (DOM) Obiectul Window. Aplicaţii Obiecte de nivelul 1 Obiecte de nivelul al doilea Obiecte de nivelul al treilea Obiecte de nivelul al patrulea Obiectul Navigator. Aplicaţii Temă

Conversaţia 8. Obiectul Form. Validarea formularelor ......................... 273
Obiectul Form. Aplicaţii (Sub)Obiectele Form. Aplicaţii Validaţi un formular cu JavaScript. Aplicaţii EXEMPLUL 8 JAVASCRIPT (varianta 1) EXEMPLUL 8 JAVASCRIPT (varianta 2) Temă

Conversaţia 9. Obiectul Image ................................................................ 343
Obiectul Image. Aplicaţii Creaţi un rollover cu JavaScript Creaţi un joc cu JavaScript Creaţi animaţii simple cu JavaScript Creaţi imagini reactive (client) cu JavaScript. Aplicaţii EXEMPLUL 9 JAVASCRIPT Temă

Conversaţia 10. Obiectele Frame şi Layer ............................................. 377
Obiectele Frame EXEMPLUL 10.1 JAVASCRIPT Obiectul Layer. Aplicaţii EXEMPLUL 10.2 JAVASCRIPT Temă

Conversaţia 11. Depanarea aplicaţiilor JavaScript ............................... 403
Tipuri de erori JavaScript. Aplicaţii Tehnici de depanare a script-urilor Instrumente pentru depanarea script-urilor. Aplicaţii Instrucţiunile throw şi try … catch. Aplicaţii Temă

Conversaţia 12. Crearea obiectelor personalizate ................................ 427
Utilizarea obiectelor personalizate pentru simplificarea script-urilor Definiţi un obiect Definiţi o metodă pentru un obiect Creaţi o instanţă a unui obiect Aplicaţii EXEMPLUL 12 JAVASCRIPT Temă

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

Conversaţia 1

JavaScript şi HTML 4.0, XHTML, XML
••••••••••••••••••••••••••••••••••••••••••••• În această conversaţie:
f f f f f f f f f f f f

•••••••••••••••••••••••••••••••••••••••••••••

Stilul de viaţă Web De ce JavaScript şi Java au nume atât de apropiate? Ce puteţi realiza cu JavaScript? Ce nu puteţi realiza cu JavaScript? Terminologia JavaScript Conceptele programării JavaScript Cum inseraţi un script în documentele (X)HTML, Dreamweaver MX şi XML? EXEMPLUL 1 JAVASCRIPT Oferta de editoare JavaScript Resursele JavaScript de care aveţi 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 funcţiilor şi serviciilor online au dus la înfiinţarea „stilului de viaţă Web”, iar Web-ul devine încet, încet o parte integrantă a vieţii noastre personale şi profesionale. Natura interactivă a World Web face posibilă existenţa „stilului de viaţă Web”. Cum pot fi făcute 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 funcţională – Se referă la abilitatea de a executa sarcini specifice şi funcţii într-un site Web. 9 Interactivitatea comunitară – Permite vizitatorilor să se întâlnească şi să interacţioneze unul cu altul. Interactivitatea comunitară este adesea considerată o strategie promoţională online.

Interactivitatea vă obligă să apelaţi la un limbaj de programare sau un limbaj de
script. Limbajele de script destinate Web-ului permit combinarea script-urilor şi a instrucţiunilor (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 căruia vă adresaţi: noi vorbim în această carte de limbajul de script JavaScript, dar nimeni nu vă împiedică să menţionaţi în CV-ul dumneavoastră, în lista de limbaje pe care le cunoaşteţi şi limbajul de programare JavaScript, evident după ce aţi 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 situaţii este mult mai bun decât JavaScript. Chiar dacă numele lor şi câteva instrucţiuni se aseamănă, Java şi JavaScript sunt limbaje total diferite.

VB Script (Visual Basic Scripting Edition) este răspunsul 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

răspândit. 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 aplicaţiilor în paginile Web.

5 De ce JavaScript şi Java au nume atât de apropiate?
Nu este nimic grav dacă nu ştiţi să răspundeţi la această întrebare! Cu toţii ştim că Java este numele unei insule din Indonezia, dar … JavaScript? JavaScript şi Java sunt două limbaje pentru Web. De ce numele lor sunt atât de apropiate? Cel puţin trei ar putea fi răspunsurile la această întrebare, pe care vă invităm să le analizaţi şi apoi să decideţi! 1. JavaScript este o versiune „simplificată” a limbajului Java. 2. Sintaxa limbajului JavaScript este parţial inspirată din cea a limbajului Java. 3. Cele două limbaje provin din insula Java. Răspunsul corect este 2: Sintaxa

limbajului JavaScript este

parţial inspirată din cea a limbajului Java. Să mă explic.
În ciuda tuturor aparenţelor, JavaScript şi Java sunt diferite. Din cauza asemănării de nume numeroşi sunt cei care cred că JavaScript nu este decât o versiune „simplificată” a limbajului Java (1). Aceasta este fals. Java şi JavaScript sunt două tehnologii separate având doar numele şi originea apropiate. Sintaxa limbajului JavaScript este parţial inspirată din cea a limbajului Java (2). Diferenţa esenţială între cele două limbaje este aceea că spre deosebire de JavaScript, Java permite crearea de aplicaţii 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 ceaşcă de cafea caldă (un detaliu amuzant, nu-i aşa?).

Ce puteţi realiza cu JavaScript?
JavaScript este limbajul favorit al creatorilor de site-uri Web deoarece: 9 este un limbaj uşor de învăţat;

6
9 sunt suficiente câteva linii de cod pentru a mări 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 prezentării lor; 9 realizarea calculelor matematice; 9 validarea conţinutului unui formular; 9 comunicarea cu applet-urile Java; 9 crearea animaţiilor personalizate; 9 afişarea unor mesaje care defilează în bara de stare a navigatorului; 9 afişarea unor mesaje într-o pagină Web sau într-o casetă de dialog; 9 crearea unor butoane animate; 9 identificarea navigatorului în care se afişează pagina Web; 9 executarea funcţiilor clasice ale unui limbaj de programare. Evident, această listă nu este exhaustivă; mai există numeroase aplicaţii 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 afişării informaţiilor într-o pagină Web.

Ce nu puteţi realiza cu JavaScript?
Desigur, JavaScript nu este cum urmează. Din motive de securitate, 9 JavaScript nu poate citi, scrie, crea şi şterge fişiere de pe hard disc; 9 JavaScript nu poate executa operaţii în reţea; perfect. Cine este perfect! Deşi JavaScript este

puternic, el este limitat de restricţii severe impuse de navigatoarele Web, după

7
9 JavaScript nu poate crea aplicaţii autonome. Pentru a scrie astfel de aplicaţii va trebui să utilizaţi unul din limbajele clasice: Java, C sau C++.

Terminologia JavaScript
Pentru a lucra cu limbajul JavaScript, va trebui să vă familiarizaţi cu termenii şi conceptele prezentate în cele ce urmează: Obiect;

Proprietate;

Metodă; Instrucţiune; Funcţie; Eveniment; Gestionar de evenimente; Variabilă.
Să facem cunoştinţă cu fiecare, înarmându-vă cu răbdare şi nu doar atât!

Obiect
Desigur dumneavoastră ştiţi foarte bine ce este un obiect cel puţin din viaţa cotidiană. Este o entitate cu parte întreagă, ca de exemplu o minge de volei, o maşină 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 rândul 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 Conversaţiile 2, 4, 5): Arguments, Array, Boolean, Date, Function,

Math, Number, Object, RegExp, String, This.
2. obiecte personalizate, create de utilizator în funcţie de cerinţele script-urilor (vezi Conversaţia 12); 3. obiectele navigatorului (vezi Conversaţiile 7, 8, 9, 10) sunt exterioare limbajului dar sunt recunoscute de browser-e. Reprezintă diferite componente ale navigatorului şi ale documentului (X)HTML curent.

radio. ƒ Lista obiectelor navigatorului (în ordine alfabetică) este următoarea: button. SQRT length . location. putere. LN10. Event. MimeType. History şi Location. Navigator.1 String Proprietăţi length E. event. checkbox. select. Poate avea valoarea „bleu”.1 sunt prezentate câteva exemple de proprietăţi ale unor obiecte interne JavaScript (vezi Conversaţiile 2 şi 4). după cum urmează: Window. În JavaScript height este o proprietate a obiectului window. option.8 ƒ Standardul DOM (Document Object Model) defineşte obiectele navigatorului în mod ierarhic. Option(). O proprietate poate fi de asemenea un obiect care la rândul lui dispune de proprietăţi. În JavaScript. Culoarea reprezintă unul din atributele (proprietăţile) obiectului maşină. textarea. LOG2E. document este o proprietate a obiectului Window şi este în egală măsură un obiect care are de asemenea proprietăţi. Objects password. navigator. ea poate avea ca valoare 200. LOG10E. history. (în submit. culoare. În figura 1. Remarcă. SQRT1_2. farurile sunt proprietăţi ale obiectului maşină. Dar acestea sunt de asemenea obiecte care pot avea diverse proprietăţi: formă. PI. De exemplu. Denumire obiect intern Array Math Figura 1. LN2. document. Document. De exemplu. window. form. general). text. Screen. plugins. screen. În JavaScript obiectele sunt considerate ca „substantive”. Proprietate O proprietate descrie un obiect. fileUpload. reset. hidden.

unShift() Math abs(). round(). type. sort(). defaultValue. log(). splice(). enctype. În JavaScript proprietăţile sunt considerate ca „adjective”. toString(). Fiecare obiect posedă o colecţie de metode. iar fiecare metodă aparţine cel puţin unui obiect. join(). status. Figura 1. action. În figura 1. target Remarcă. checked. Metoda deschide a obiectului maşina are ca funcţie deschiderea uşilor. Denumire obiect navigator Button Checkbox Proprietăţi align. name. sqrt(). size. În JavaScript. size. form. align. form. encoding. name. pow(). sin(). reverse(). type. Metodele disponibile pentru fiecare obiect descriu ceea ce puteţi face cu acest obiect. value. disabled. max(). asn(). Metodă O metodă este o funcţie care defineşte un anumit comportament caracteristic al unui obiect. push(). Denumire obiect intern Array Metode concat(). tan() . length. random().2 sunt prezentate câteva exemple de proprietăţi ale unor obiecte ale navigatorului (Conversaţia 7).2 acceptcharset. cos(). pop(). slice(). name.3 sunt prezentate câteva exemple de metode ale unor obiecte interne (vezi Conversaţiile 2 şi 4).3 acos(). exp(). elements[]. value defaultchecked. width Form Figura 1. ceil(). floar(). atan(). disabled. method. min(). defaultValue. metoda close() a obiectului window are ca funcţie închiderea ferestrei.9 În figura 1. shift().

Denumire obiect navigator Button Figura 1. b=13. atribuirea unei variabile a unui nou conţinut).4 Checkbox Metode blur().10 În figura 1. Figura 1. Instrucţiunile combină obiecte. funcţiile nu sunt asociate nici unui obiect particular.4 sunt prezentate câteva exemple de metode ale unor obiecte ale navigatorului (vezi Conversaţia 7). . <script language = ”JavaScript” type = ”text/JavaScript”> a=4. Spre deosebire de metode. parseInt()).5 Funcţie O funcţie este un grup de instrucţiuni tratate ca o singură entitate. proprietăţi şi metode (substantive. o funcţie este un obiect care conţine cod executabil. Nu trebuie să vă surprindă următoarea afirmaţie: chiar dumneavoastră puteţi să vă creaţi propriile funcţii! Ceea ce este nemaipomenit! În figura 1. Instrucţiunile limbajului JavaScript sunt prezentate în Conversaţia 3. În JavaScript metodele sunt considerate ca „verbe”. document. focus() Remarcă. Numeroase funcţii sunt interne: ele sunt incluse în limbajul JavaScript (Exemple: eval().6 se prezintă un exemplu de funcţie definită de utilizator: calculul diametrului unui cerc de rază r. Sau.write (”Suma: ” +c). parseFloat(). În figura 1. c=a+b. click(). focus() blur(). click(). Funcţiile pot fi comparate cu „electronii liberi” care pot fi reutilizaţi în orice circumstanţă. Instrucţiune O instrucţiune produce o acţiune (afişarea unui text. modificarea proprietăţii unui obiect.5 este prezentat un exemplu de script care conţine instrucţiuni simple JavaScript. </script> Remarcă. adjective şi verbe).

9 utilizatorul a introdus sau a modificat conţinutul unui câmp de text al unui formular. 9 utilizatorul a executat clic pe o imagine sau pe un buton. 9 utilizatorul a expediat conţinutul unui formular sau l-a reiniţializat. Fiecare eveniment este asociat unui obiect. 9 utilizatorul opreşte încărcarea paginii Web în browser. Iată o listă cu cele mai frecvente evenimente JavaScript: 9 utilizatorul încarcă o pagină Web în browser. Alte evenimente nu privesc direct utilizatorul. } </script> Remarcă. „Ziua şefului”) sunt evenimente. informaţiile pe care le notaţi în agenda dumneavoastră („Oră la dentist”. Dacă aceste evenimente sunt prevăzute sau nu. În sens larg. este problema dumneavoastră de a le gestiona. „Aniversarea lui Droopy”. Gestiunea evenimentului „Aniversarea lui Droopy” va consta probabil în a-i cumpăra un cadou. Funcţiile sunt tratate în detaliu în Conversaţia 2.) sunt provocate de utilizator.11 <script language = ”JavaScript”> function diametru (r) { temp = 2*r. return temp. vizita neaşteptată a soacrei etc. Diferite evenimente pot fi imprevizibile: contravenţie pentru depăşire viteza legală în localitate. Cât priveşte vizita soacrei reacţia dumneavoastră poate fi una normală: stingeţi lumina pentru a demonstra că nu sunteţi acasă! Un eveniment JavaScript este o acţiune care se produce în raport cu un element (fereastră.6 Evenimente Un eveniment este ceva care se întâmplă. document. În JavaScript numeroase evenimente (clic. . un buton). dublu clic etc. o nuntă cu … dar la rudele nevestii. Figura 1.

Este vorba de notaţia standard a gestionarilor de evenimente: on este scris întotdeauna cu minuscule. 9 Evenimentele şi gestionarii de evenimente JavaScript sunt tratate în detaliu în Conversaţia 6. În general.12 Fiecare eveniment are propriul său nume. dacă există. Dacă mouse-ul trece pe deasupra unui link (legătură).7 sunt prezentate câteva exemple de evenimente JavaScript dintre cele mai cunoscute. Remarci: 9 Poate aţi observat combinaţia de majuscule şi minuscule (exemplu: onMouseOver. adăugaţi on la începutul numelui evenimentului. Pentru a defini un gestionar de evenimente. Astfel. onMouseOut). evenimentul MouseOver este expediat gestionarului de evenimente al acestei legături. gestionarul de evenimente onMouseOver este apelat atunci când mouse-ul trece pe deasupra legăturii (Gestionarul de evenimente este plasat în tag-ul (X)HTML <a> al link-ului corespunzător). Denumire eveniment click dblclick help Figura 1.7 keypress Se declanşează atunci când … se execută clic pe un element se execută dublu clic pe un element se activează tasta F1 în fereastra activă se acţionează o tastă a claviaturii Gestionarii de evenimente Gestionarii de evenimente JavaScript indică navigatorului cum să reacţioneze atunci când se produc diferite evenimente. evenimentul MouseOver se produce atunci când mouse-ul se poziţionează deasupra unui obiect. cu majuscule. . De exemplu. un gestionar de evenimente ia forma unei funcţii JavaScript pe care o creaţi special pentru a prelucra un anume tip de eveniment. iar iniţiala fiecăruia din cuvintele evenimentului. care sunt integrate în codul (X)HTML de definire al evenimentului. În figura 1. dar el poate fi totodată o instrucţiune sau mai multe instrucţiuni JavaScript.

Figura 1. nume_prof nume_student_olimpic a _var13 stoc Remarcă. 9 DOM-ul (Document Object Model – modelul obiectelor documentului). Variabilele JavaScript sunt tratate în detaliu în Conversaţia 2.8 se prezintă câteva exemple de nume de variabile JavaScript (valide). Conversaţia 12.8 Conceptele programării JavaScript Utilizarea limbajului JavaScript se reduce în principal la două concepte de bază: 9 sintaxa JavaScript. Obiectele interne. obiectele pe care le puteţi accesa şi pe care le puteţi manipula cu ajutorul limbajului JavaScript. în Conversaţia 4. obiectele navigatorului şi obiectele personalizate sunt tratate în detaliu. Remarcă. Fiecare variabilă poartă un nume care respectă anumite reguli de sintaxă. Nu ştiu cum este mai bine: să staţi cu regulile în cap sau cu capul în reguli! Procedaţi cum credeţi! DOM-ul se referă la componentele paginii Web. . Este bine să le cunoaşteţi ca apoi să le aplicaţi.13 Variabile Variabilele reprezintă un element fundamental al limbajului JavaScript. Trebuie să vă însuşiţi foarte bine DOM-ul JavaScript pentru a putea scrie un script JavaScript. În figura 1. Ele pot conţine: un număr. Sintaxa defineşte un ansamblu de reguli care trebuie respectate atunci când scrieţi cod JavaScript. Aceste reguli nu sunt numeroase. Conversaţia 5. Conversaţia 7. un şir de caractere sau un obiect.

prin inserarea unui script în documentele (X)HTML existent permite programatorilor să creeze pagini Web mult mai dinamice. Elementul script este alcătuit din: tag-ul de început <script>. Tag-ul <script> conţine următoarele atribute: 9 type – indică tipul limbajului de script.. Elementul script Script-urile JavaScript sunt inserate într-un document (X)HTML cu elementul <script> . Valoarea sa trebuie să fie un Internet (figura 1.. JavaScript.js”> .9 Media Type (un tip MIME).11 </script> ..cod JavaScript </script> 9 language – identifică limbajul de script şi facultativ versiunea (vezi figura 1. Figura 1.11). de exemplu text/JavaScript sau text/vbscript <script type=”text/JavaScript”> ..10).10 </script> 9 src – facultativ. iar (X)HTML-ului mai multă flexibilitate. precizează URL-ul fişierului extern care conţine script-ul (vezi figura 1. conţinutul propriu-zis şi tag-ul de sfârşit </script>.14 Cum inseraţi un script într-un document (X)HTML? Extinderea paginilor (X)HTML prin folosirea limbajului JavaScript conferă paginilor Web mai multă putere. </script>.cod JavaScript Figura 1.cod JavaScript Figura 1. <script type=”text/JavaScript” src=”functie.. <script type=”text/JavaScript” language=”JavaScript”> ....9).

Pentru inserarea script-urilor în documentele dumneavoastră (X)HTML folosiţi una din metodele prezentate mai jos: 9 Metoda 1 – plasaţi script-ul în corpul paginii (între <body> şi </body>). 9 Metoda 2 – plasaţi script-ul în antet-ul paginii (între <head> şi </head>). 9 Metoda 3 – utilizaţi fişiere sursă externe.12). fie el nu recunoaşte limbajul desemnat prin atributul type. fie utilizatorul a dezactivat (nu are încredere!) prelucrarea script-urilor. 9 Metoda 4 – creaţi un gestionar de evenimente..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. . <script type=”text/JavaScript”> cod JavaScript </script> <noscript> Regretăm că navigatorul dumneavoastră nu recunoaşte script-urile! Figura 1.15 Elementul noscript Incapacitatea navigatorului de a prelucra un script poate avea trei cauze: fie el nu ştie să prelucreze script-urile în general. Pentru a construi pagini Web interactive cu XML folosiţi tehnicile specifice ale DOM-ului XML şi ale limbajului JavaScript.. Din acest motiv se utilizează elementul <noscript> . </noscript> în interiorul căruia puteţi plasa elementele (X)HTML care vor fi ignorate de navigatoarele capabile să exploateze un script (vezi figura 1. Cum inseraţi un script în documentele XML Cu JavaScript puteţi crea şi manipula obiectele DOM XML.

Mesajul va fi afişat cu italice.” Pentru inserarea script-ului într-un document (X)HTML utilizaţi toate cele patru metode pe care le-am prezentat anterior. Bucureşti 9 http://www. XML. DOM. Editura Economică 2002.dannyg.com/examples/xmltable/index.13 2. Pavel Năstase.16 În lucrarea Liviu Dumitra•cu. ASP).14). Dacă doriţi să inseraţi un script scurt. 1. Plasaţi elementul script în locul în care doriţi să apară script-ul dumneavoastră (figura 1. Tehnologia aplicaţiilor Web (XML. Metoda 1 Iată cum procedăm pentru a insera (cu Notepad) script-ul în corpul documentului (X)HTML.html EXEMPLUL 1 JAVASCRIPT Scrieţi un script care afişează mesajul: „Îmi place să fiu întotdeauna aşa cum sunt. Editura Universit••ii din Ploie•ti.13) cu Notepad. cel mai simplu este să-l plasaţi în corpul paginii. Creaţi documentul (X)HTML (figura 1. . reprezentat prin câteva linii de cod JavaScript. Figura 1. în conversaţia 9 se prezintă în detaliu modul de inserare a script-urilor în documentele XML. Consultaţi de asemenea următoarele resurse: 9 Floarea Năstase.

Figura 1.write() care afişează mesajul: „Îmi place s• fiu întotdeuna a•a cum sunt.17 Figura 1.şi --> şi plasaţi „//” înaintea tag-ului de sfârşit de comentariu XHTML pentru a ascunde sfârşitul de comentariu de interpretorul JavaScript (figura 1. Liniile de comentariu au fost inserate pentru a ascunde script-ul de navigatoarele care nu-l recunosc. figura 1. figura 1.16 Remarcă. Introduceţi î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). 5.15 4.17 .17.15.14 3. Inseraţi instrucţiunea JavaScript document. Figura 1.16). Figura 1.” în pagina Web (atunci când ea este încărcată!). Inseraţi tag-ul de comentariu XHTML standard (<!-.

9 Tag-urile (X)HTML. 6. În măsura în care programul dumneavoastră JavaScript va fi inserat într-o pagină Web. <i> de exemplu.1 cu aplicaţia validator (vezi figura 1. rezultatul va fi afişat direct în pagină. 9 Facilitatea de combinare a tag-urilor (X)HTML şi a instrucţiunilor JavaScript reprezintă una din caracteristicile cele mai puternice ale unui navigator care recunoaşte JavaScript. Figura 1.write (vezi Conversaţia 7) permite afişarea unui text. 9 Instrucţiunea document.20).18 7. Inseraţi codul XHTML care afişează iconul de conformitate (figura 1.write. această facilitate constituie esenţa Web-ului dinamic şi interactiv pe care dumneavoastră urmează să-l aplicaţi.19 8. tag-urile (X)HTML sunt interpretate de către navigator ca şi când ar aparţine (X)HTML-ului. În realitate. Afişaţi pagina Web într-un browser (figura 1. Figura 1.18). sunt plasate între ghilimele. Validaţi documentul XHTML 1.19). una dintre cele mai simple fiind instrucţiunea document.18 Remarci: 9 JavaScript oferă mai multe soluţii pentru afişarea informaţiilor.20 . a valorilor numerice şi a altor informaţii. Figura 1. Tag-urile (X)HTML nu sunt interzise în interiorul tag-urilor <script>. Plasate între ghilimele.

În grupul de panouri Insert.21). Figura 1. Figura 1. executaţi clic pe subpanoul HTML (figura 1. 1.23. Figura 1.21 2.23 . figura 1. Executaţi clic pe butonul (Script).22).19 Procedura de creare automată a script-ului cu Dreamweaver MX Iată cum procedăm pentru a crea documentul XHTML pentru EXEMPLUL 1 JAVASCRIPT cu Dreamweaver MX.22 3. Executaţi clic în locul în care doriţi să inseraţi script-ul (figura 1.

26 .26).24). Figura 1. Figura 1. Se deschide caseta de dialog Script (figura 1.25 5.20 Remarcă. Introduceţi script-ul (figura 1.24 4. Executaţi clic pe butonul OK al ferestrei de dialog Script (figura 1.25). Figura 1.

28 Metoda 2 Iată cum procedăm pentru a insera (cu Notepad) script-ul în antet-ul paginii.27 6. 2. Tag-urile şi script-urile cuprinse în această secţiune sunt interpretate întotdeauna primele. Creaţi documentul (X)HTML cu Notepad. Plasaţi tag-urile script în elementul head al documentului (X)HTML (figura 1.. </head>..27). Se inserează elementul <script> . Figura 1. Vizualizaţi pagina Web într-un browser (figura 1. . 1.28). Secţiunea <head> a unei pagini (X)HTML precede secţiunea <body>..29). Figura 1.21 Remarcă.. Din acest motiv în mod frecvent se plasează în această secţiune un script care defineşte variabilele şi funcţiile ce urmează a fi utilizate de către alte script-uri ale paginii. în secţiunea <head> . </script> (figura 1.

După cum veţi vedea mai târziu. 4.. o singură linie de cod JavaScript apelează funcţia document. va trebui să utilizaţi numele său într-o instrucţiune a script-ului (vezi figura 1. Figura 1. . 9 Funcţia mesaj începe cu cuvântul rezervat function urmată de numele funcţiei (mesaj).30 Remarci: 9 O funcţie este un grup de instrucţiuni tratate ca o singură entitate.” în pagina web. aceste paranteze nu sunt întotdeauna vide! Acoladele de deschidere (”{”) şi de închidere (”}”) servesc la delimitarea instrucţiunilor JavaScript care alcătuiesc corpul funcţiei şi permit navigatorului să ştie unde începe şi unde se termină o funcţie. Introduceţi funcţia mesaj() (figura 1. 9 Funcţia mesaj are rolul de a afişa (cu italice) mesajul: „Îmi place să fiu întotdeauna aşa cum sunt. va trebuie mai întâi să o definiţi.write (o metodă a obiectului Document) care permite afişarea cu italice a mesajului „Îmi place să fiu întotdeauna aşa cum sunt. inutilizabilă în acest moment. Pentru a putea utiliza o funcţie. Funcţia este acum definită şi inserată în documentul (X)HTML. Pentru a apela o funcţie.29 3.. În exemplul nostru.30).22 Figura 1. Apelaţi funcţia mesaj(). va trebui s-o apelaţi. dar . După numele funcţiei urmează parantezele vide ”()”.31).”. Pentru a utiliza o funcţie.

34). 5.33 7. Validaţi documentul XHTML 1.31 Remarcă. Afişaţi pagina într-un browser (figura 1. Mai multe detalii despre funcţii (definire.34 . Figura 1.23 Figura 1.33). Figura 1. Figura 1.1 cu aplicaţia validator (vezi figura 1.32). apel) găsiţi în Conversaţia 2.32 6. Inseraţi codul XHTML care afişează iconul de conformitate (figura 1.

Dacă doriţi să utilizaţi funcţiile de script în mai multe documente.37 se prezintă documentul XHTML complet.35).js) pe care-l referiţi apoi din documentul dumneavoastră. Pentru a continua exemplul nostru.js (vezi figura 1. atunci plasaţi-le într-un fişier separat (cu extensia . func•ie1.35 Pentru a utiliza acest script extern indicaţi numele fişierului în atributul src al tag-ului script (figura 1.36). Figura 1. Figura 1. în care plasăm script-ul pentru afişarea mesajului indicat. În figura 1.36 Remarcă. creaţi un script extern. Figura 1.37 .24 Metoda 3 Iată cum procedăm pentru a utiliza un fişier extern. Acelaşi script poate fi utilizat în mai multe pagini Web diferite.

38. </script>.38 Metoda 4 Iată cum procedăm pentru a crea un script care afişează mesajul indicat cu ajutorul gestionarului de evenimente onClick. Figura 1. inseraţi codul XHTML care afişează icon-ul de conformitate şi afişaţi pagina Web într-un browser.39 2. Rezultatul vizualizării paginii Web în Internet Explorer este ilustrat în figura 1..39). Figura 1.40).. Introduceţi în tag-ul <input /> gestionarul de evenimente onClick (vezi figura 1.25 Validaţi documentul XHTML 1.1 cu aplicaţia validator. care indică navigatorului cum să reacţioneze atunci când se produc anumite evenimente.40 Remarci: 9 Nu este obligatoriu ca toate script-urile JavaScript să se găsească în interiorul tag-urilor <script> . 1. Creaţi documentul XHTML (figura 1. de asemenea la script-uri sub forma gestionarilor de evenimente. . Puteţi apela. Figura 1.

prompt) practice pentru afişarea mesajelor şi interactivitatea cu utilizatorul. Metoda alert() afişează o casetă de dialog de avertizare.42).41 4.26 9 Gestionarii de evenimente sunt funcţii puternice JavaScript. 9 Gestionarul de evenimente onClick este activat atunci când se execută clic pe butonul „logo”.42 . adăugaţi on la începutul numelui evenimentului (de exemplu. Ea serveşte pentru transmiterea informaţiilor utilizatorului. semnificativ şi de a conţine mai multe instrucţiuni. Inseraţi codul XHTML care afişează icon-ul de conformitate 5. Din fericire. . 9 Fiecare eveniment are propriul său nume. ca un atribut al acestui tag. De cele mai multe ori această instrucţiune va fi o funcţie. Validaţi documentul (X)HTML 1. Figura 1. 9 Instrucţiunea JavaScript care reacţionează la eveniment trebuie să fie plasată între ghilimele. 3. 9 Metoda alert() este prezentată în detaliu în Conversaţia 2. Afişaţi pagina Web într-un browser (figura 1.41). Pentru a defini un gestionar de evenimente. de exemplu click. onClick). 9 Obiectul Window conţine trei metode (alert. Gestionarul de evenimente onClick este plasat în interiorul tag-ului <input /> al formularului. ele sunt uşor de programat. în măsura în care funcţiile au avantajul de-a avea un nume precis. Uneori este suficientă o singură instrucţiune pentru a-l activa.1 cu aplicaţia validator (vezi figura 1. Figura 1. confirm.

43 Rezultatul execuţiei script-ului este prezentat în figura 1.44 Figura 1.44 (continuare) Oferta de editoare JavaScript Script-urile JavaScript sunt salvate ca fişiere de tip text.27 Aplicaţie ‰ Modificaţi documentul XHTML din figura 1. Figura 1. .43). Figura 1.44.40 astfel încât funcţia apelată din gestionarul de evenimente onClick să fie programată într-un script situat în secţiunea <head> a documentului (figura 1.

Remarcă. . vă sugerăm să vă formaţi un … background (X)HTML care să cuprindă: tag-urile (X)HTML. Ultra Edit. Remarcă. Înainte de a vă lansa în provocarea … JavaScript pe care v-am lansat-o.5. nu este recunoscut oficial decât de Netscape 6.28 În consecinţă. de regulă funcţii specifice JavaScript. Un mare număr de editoare (X)HTML pot fi folosite cu JavaScript.w3. Dar. JavaScript 1. Procedaţi cum credeţi. cadrele şi în mod special formularele.5 şi următoarele. dar consecinţele unei incompatibilităţi JavaScript pot fi semnificative. Top Style.htmlreference.w3. Aceste editoare conţin. Cele două navigatoare rămân în continuare.com ƒ www.0 şi de Internet Explorer 5.org/TR/2001/REC-xhtml11-20020531/ JavaScript şi navigatoarele Ca şi documentele (X)HTML. Remarcă. 9 un navigator. pe care vi le recomandăm: Homesite. Text Pad. ca de exemplu colorarea automată a instrucţiunilor sau crearea automată a script-urilor simple. navigatoarele nu interpretează instrucţiunile în acelaşi mod. Web – Expert. Consultaţi următoarea listă de site-uri: ƒ www. două navigatoare domină piaţa: Netscape şi Microsoft Internet Explorer. nu uitaţi acest lucru atunci când vă creaţi propriile pagini. (X)HTML are puţine probleme. Deşi oferta de editoare JavaScript este considerabilă. Edit Plus. La ora actuală. Script Edit. Iată câteva editoare sub Windows. Netobjects Script Builder. vă sugerăm să nu renunţaţi la editorul de text standard Notepad. Adobe GoLive. script-urile JavaScript au nevoie de un navigator pentru a fi afişate. Microsoft Front Page 2003. Macromedia Dreamweaver. Resursele JavaScript de care aveţi nevoie Pentru script-urile (JavaScript) pe care urmează să le creaţi nu aveţi nevoie decât de două instrumente de bază: 9 un editor de text (simplu). puteţi folosi orice editor de text care generează fişiere text ASCII.org ƒ www.

Totuşi. şi-n consecinţă nu este interpretat. Dar. 9 interpretare – un element poate fi interpretat diferit de către navigator. este aproape imposibil. ceea ce permite ca anumite blocuri de cod să poată fi prevăzute pentru fiecare navigator. Incompatibilitatea se manifestă în următoarele moduri: 9 ignorare – un element de cod nu este „văzut” de navigator. 9 eroare – un element de cod provoacă o eroare întrucât sintaxa nu este recunoscută de navigator. JavaScript nu este interptetat în aceeaşi manieră de către toate navigatoarele.29 După cum am menţionat. . Ideală ar fi o compatibilitate cu toate versiunile tuturor navigatoarelor. Dar această soluţie nu este întotdeauna realistă. JavaScript poate detecta versiunea navigatorului.

0) JavaScript a evoluat considerabil.5 4.1.0) lansată în anul 1995 de către Netscape (Netscape 2. Rezultatul: JavaScript nu este un standard.0 – 4. Microsoft a dezvoltat propriul său limbaj JavaScript denumit JScript în care se regăseşte cea mai mare parte a elementelor limbajului de origine la care a adăugat propriile sale specificaţii. Versiunea limbajului JavaScript JavaScript 1. În paralel.45 JavaScript 1. 1.x 4. Prezentăm în continuare (vezi figura 1. Există în prezent cinci versiuni: 1.2.x 3.0 JavaScript 1.3 Figura 1. El a fost … rebotezat JavaScript pentru a evoca marketingul comun cu limbajul Java. 1.46) navigatoarele şi versiunile JavaScript sau JS pe care acestea le recunosc.0.2 JavaScript 1.5 După prima sa versiune (JavaScript 1.45 şi figura 1.30 Versiunile JavaScript JavaScript 1. Remarcă. Navigatoarele Netscape ignoră specificaţiile JScript iar Internet Explorer ignoră pe cele ale lui JavaScript. Opera a introdus JavaScript începând cu versiunea 3 a navigatorului său.5 fiecare dintre acestea aducând îmbunătăţiri importante în raport cu precedentele. JavaScript este primul limbaj de script dezvoltat pentru Web.7 6 .3 şi 1. JavaScript se chema Live Script. La început (anul 1995).1 JavaScript 1.5 Netscape 2. 1.6 – 4.

0 va constitui o versiune mult îmbunătăţită faţă de precedentele. …. dar şi a capacităţii sale de a se alinia la alte standarde precum: C++ şi Java. ^^=.0 La data redactării acestei lucrări.0 era în curs de lansare. @. viitoarea versiune care va corespunde celei de-a patra ediţii a normei ECMA Script. Motivul principal al dezvoltării JavaScript este creşterea puterii limbajului. ->.0.0 JScript 5.5 6 Pentru a pune capăt acestor divergenţe a fost necesară crearea a două standarde: ECMA şi DOM..31 Versiunea limbajului JScript JScript 1. 9 W3C (World Wide Web Consortium) a creat DOM (Document Object Model) care descrie elementele paginii Web (obiectele) şi modul în care acestea se relaţionează.0.0 5. ^^. Atenţie la incompatibilităţi! Implementarea JavaScript pe Internet Explorer şi Netscape Navigator nu este identică. Netscape funcţionează de asemenea cu ECMA sub JavaScript 2. JavaScript 2.5 este conformă cu ECMA – 262. Remarci: 9 La ora actuală două navigatoare domină piaţa: Netscape şi Microsoft Internet Explorer. Vom trece deci de la versiunea 1. .3 este conformă cu norma ECMA – 262 iar JavaScript 1. JavaScript 2.6 Internet Explorer 3. !=.5 Figura 1..0 JScript 3. . 9 Acordaţi toată atenţia navigatorului (şi versiunile acestora) care prelucrează JavaScript. o versiune standardizată a limbajului JavaScript.5 la 2.46 JavaScript 5.0 5. 9 ECMA (European Computer Makers Association) a publicat norma ECMA – 262.0 JScript 5. dar nu trebuie neglijaţi nici utilizatorii altor navigatoare. JavaScript 2. &&=. versiunea 3. Ca elemente de noutate ale versiunii JavaScript 2.0 amintim: 9 semne de punctuaţie suplimentare: ƒ #.02 4. JavaScript 1. cunoscută sub numele de ECMA Script.

native. despre goto. throws.32 9 cuvinte rezervate suplimentare: ƒ abstact. mult enum. Remarcă.0. . JavaScript 2.org/js/language/js20/. debugger.mozilla. vizitaţi site-ul protected. Dacă doriţi să cunoaşteţi mai http://www. transient. synchronized.

Prin ce se deosebesc limbajele Java şi JavaScript? 3. Care este procedura de creare automată a script-urilor cu Dreamweaver MX? 8.com/books/ 9 http://www.jscripts.pageresource.dannyg. Ce înţelegeţi prin stilul de viaţă Web? Temă 2.internet. Care sunt resursele necesare pentru crearea script-urilor JavaScript? 9.33 JavaScript Testaţi-vă cunoştinţele 1. XHTML. Dreamweaver MX şi XML? 5.htm 9 http://www.htm 9 http://www.com/jscript/index4.webreference.com/js 9 http://www.com 9 http://javascript.com/tutorials/jltuto1. Cum pot fi inserate script-urile în documentele HTML 4.pageresource.htm 9 http://www.Javasciptcity.pageresource.com/pubs/index.Internet.html .com/jscript/index6.htm 9 http://www.com 9 http://www. Când folosiţi elementul noscript? 7.com/jscript/index2.0. Care sunt obiectele interne ale limbajului JavaScript? 6. Cum se relaţionează JavaScript cu navigatoarele? Vizitaţi site-urile 9 http://JavaScript. Care sunt virtuţile limbajului JavaScript? 4.

fapt care duce la modificarea tipului variabilei. Boolean) şi nu doar atât. . Din fericire. Tipurile de date şi valorile speciale JavaScript De obicei. Number. Aplicaţii Crearea automată a script-urilor cu Dreamweaver MX EXEMPLUL 2 JAVASCRIPT Cuvinte rezervate JavaScript Temă Înainte de a începe să scrieţi cel de-al doilea script – EXEMPLUL 2 JAVASCRIPT va trebui să vă familiarizaţi cu elementele de bază ale limbajului JavaScript. obiectele matematice (Math. Ele vă vor fi de folos pentru a înţelege cum să scrieţi programul. limbajele de programare cer să definiţi tipul de date pe care-l va reprezenta o variabilă.Conversaţia 2 Variabile şi funcţii ••••••••••••••••••••••••••••••••••••••••• •••• În această conversaţie: f f f f f f ••••••••••••••••••••••••••••••••••••••••• •••• Tipurile de date şi valorile speciale JavaScript Variabile şi funcţii. aşa ceva nu se întâmplă în JavaScript. variabilele şi funcţiile JavaScript. care este un limbaj flexibil. Variabilele JavaScript pot accepta oricând un nou tip de date. în plus se generează o eroare atunci când încercaţi să-i atribuiţi variabilei un alt tip de date. Următoarele secţiuni vă vor ajuta să înţelegeţi: tipurile de date şi valorile speciale ale limbajului JavaScript. operatorii.

6. Toate celelalte tipuri de date pe care le veţi întâlni în limbajul JavaScript sunt obiecte – combinaţii ale celor patru tipuri de bază. De exemplu. 6.7976931348623157 E 308 şi +/–5 E – 324. C.1). Cu siguranţă. 2. 1. cunoaşteţi numerele întregi (integer. 1. 5. E. în JavaScript nu există decât patru tipuri de date: 9 numerice întregi. F. 8. 3. 9 numerice în virgulă flotantă. 7 (figura 2. Prin definiţie. în limba engleză) şi numerele în virgulă flotantă (floating – point.” Remarci: 9 JavaScript recunoaşte numerele întregi (în baza 10. 9 boolean. în limba engleză). A. Puteţi utiliza majuscule sau minuscule (figura 2. 5. numerele în octal şi în hexazecimal sunt numere întregi care sunt exprimate într-un sistem de numeraţie cu baza 8. Figura 2. 4. pozitive sau negative) cuprinse 9 Un număr întreg hexazecimal (hexadecimal. 9.2 <script> x=077. 7. în limba engleză) începe în mod obligatoriu între: +/–1. 3. B. 4. Figura 2. şirurile de caractere sunt obiecte care reprezintă o colecţie de caractere. Date numerice Limbajul JavaScript permite specificarea datelor numerice în patru formate diferite: întreg. În JavaScript un număr întreg octal este precedat de zero iar un număr hexazecimal este precedat de caracterele ”ox” sau ”OX. virgulă flotantă. //x ia valoarea 3F (63 în zecimal) </script> 9 Un număr întreg octal începe obligatoriu cu 0 (zero) şi este compus din următoarele simboluri: 0.1 <script> x=0x3F. 9 caracter. 2. cu OX sau ox şi este compus din următoarele simboluri: 0. respectiv baza 16.2). D.34 La nivel elementar. //x ia valoarea 63 în zecimal </script> . dar poate cunoaşteţi mai puţin pe cele exprimate în octal şi în hexazecimal. octal şi hexazecimal.

7976931348623157 E 308 şi +/–5 E –324 (vezi figura 2.22. caractere speciale şi secvenţe de ieşire. Figura 2. Aplicaţie ‰ Testaţi şirurile de caractere: ”septembrie”. Important este să ştiţi că ele există şi le puteţi recunoaşte! 9 Un număr în virgulă flotantă este în baza 10. Figura 2. ’a=”01”’. Un şir de caractere (string. .4 Indicaţie. Introduceţi în variabila sir datele de test (şirurile de caractere indicate).13. Droopy!”. Un şir de caractere încadrat de ghilimele duble poate fi inclus într-un şir încadrat de ghilimele simple şi vice versa.3 <script> x=8. </script> Şir de caractere Cu siguranţă că dumneavoastră veţi lucra foarte mult cu tipul de date şir de caractere (alfanumerice). El poate de asemenea include un exponent pozitiv sau negativ. JavaScript recunoaşte numerele cuprinse între: +/–1. ”Salut. nu vă alarmaţi căci sunt foarte rare cazurile în programele JavaScript care necesită cunoştinţe de sisteme de numeraţie în baza 8 sau în baza 16. El poate fi pozitiv sau negativ şi poate conţine zecimale. ”anume=’minim’” cu următorul script (figura 2.80”.3). ”9. chiar dacă el constă din cifre şi simboluri numerice.4).55201. Conţinutul unui şir de caractere este considerat tot timpul ca fiind text. x=-. Un şir de caractere este încadrat de ghilimele simple sau duble. simboluri.887. Separatorul zecimal este întotdeauna punctul.35 9 Dacă sunteţi cumva neliniştiţi. în limba engleză) este compus din litere.885E+9. x=0. x=76. cifre. prin E. x=.

5 Valorile speciale JavaScript În limbajul JavaScript puteţi întâlni de asemenea şi anumite valori speciale pe care vi le semnalăm în cele ce urmează: Infinity. Nu vă lăsaţi impresionaţi de aceşti termeni! În figura 2.POSITIVE_INFINITY şi Number. Remarcă. Figura 2. În acest caz. <script> x=true.5 se prezintă un exemplu de utilizare a celor două valori booleene. Cele două valori se folosesc pentru a indica dacă rezultatul evaluării unei condiţii este adevărat sau nu. </script> Remarcă. Cele două valori nu sunt plasate între ghilimele.6). NaN.NEGATIVE_INFINITY pentru a testa dacă Infinity este pozitiv sau negativ (vezi Conversaţia 2 (continuare)).5) JavaScript. Infinity Este o valoare numerică specială care se returnează dacă un număr în virgulă flotantă este superior valorii maxime autorizate sau este inferior valorii minime autorizate. Atunci când o expresie aritmetică conţine o valoare Infinity. null. Infinity poate fi pozitiv sau negativ. Valori logice sau booleene Ele sunt în număr de două: true (adevărat) şi false (fals). în limba engleză) care începe întotdeauna cu „\” urmat de un semn sau un cod numeric.36 Remarcă. utilizaţi o secvenţă de ieşire (escape sequence. Folosiţi proprietăţile obiectului Number: Number. având o semnificaţie precisă pentru interpretorul JavaScript. Într-un şir de caractere puteţi introduce de asemenea şi caractere care nu se găsesc pe tastatură. întrucât true şi false sunt cuvinte cheie (vezi figura 2. ea returnează întotdeauna infinity (vezi figura 2. y=false. .

8 <script> document. Figura 2. Remarci: 9 null nu este egal nici cu zero şi nici cu undefined.write(figura). . NaN semnifică: „acesta nu este un număr!” Figura 2. definită sau în cazul unei variabile care a fost declarată dar fără conţinut (figura 2. în limba engleză) este o valoare specială furnizată ca rezultat de câteva operaţii aritmetice (vezi figura 2. 9 Valoarea null se poate simula cu operatorul void: var null=void(0).6 NaN NaN (Not a Number. //afişează null. </script> undefined undefined este o valoare specială nedefinită.8).37 Figura 2.7). Remarci: 9 undefined nu este egal nici cu null nici cu zero.9).7 null null este o valoare specială care indică absenţa valorii (figura 2. Remarcă. 9 Valoarea undefined este returnată în cazul utilizării unei variabile care nu a fost 9 Valoarea undefined este des confundată cu null de către navigatoare.

din acel moment ea devenind disponibilă. Dacă sunteţi obişnuit cu declararea prealabilă a variabilelor.11). Atunci când creaţi o variabilă. valoarea pe care o atribuiţi determină tipul variabilei (vezi figura 2.. în mod dinamic. Figura 2. <script> b=”nemaipomenit”. cu specificarea tipului de date pe care acestea le conţin (întregi.9 Variabile şi funcţii Variabile JavaScript Spre deosebire de alte limbaje de programare care impun declararea prealabilă a variabilelor. //mesaj este o variabilă de tip şir de caractere Figura 2. b=10. //a este o variabilă de tip numeric mesaj=”Au înnebunit salcâmii!”.. Tipuri de variabile În limbajul JavaScript nu trebuie să specificaţi tipul variabilelor.) JavaScript procedează puţin altfel: o variabilă este creată prin simpla afectare (atribuire) a unei valori. caracter etc. O variabilă poate să-şi schimbe tipul. reale. <script> a=83.38 Figura 2.10).10 </script> Remarcă. cu puţină practică veţi aprecia cu siguranţă această virtute deosebită a limbajului JavaScript. în interiorul aceluiaşi script (vezi figura 2. vă va trebui puţin timp pentru a vă acomoda cu acest mod de lucru rapid şi .11 </script> .

care nu reprezintă decât o singură entitate mai există şi matrici (vezi Conversaţia 4). 9 JavaScript recunoaşte mai multe tipuri de constante: întregi (pot fi exprimate în sistem zecimal. dar în diferite cazuri ele pot fi declarate ca fiind de un tip particular (boolean. Totuşi. boolean. Variabile locale şi globale În JavaScript.39 Numele variabilelor Fiecare variabilă are un nume. 9 primul caracter al numelui unei variabile trebuie să fie o literă sau un caracter de subliniere. Nume valide Nume invalide nr_persoane Num•rPersoane a1 b Figura 2. number sau string).12 Remarci: π TURCA <abc a–1 b>1a +a13 _var13 9 În afară de variabilele scalare. în foarte multe cazuri. cuvântul cheie var poate servi la declararea unei variabile. Regulile după care se formează numele variabilelor sunt următoarele: 9 numele variabilelor pot conţine toate literele alfabetului (majuscule sau minuscule). şiruri de caractere. Portabilitatea unei variabile (sau funcţii) indică dacă variabila (sau funcţia) definite într-o zonă a programului sunt accesibile dintr-o altă zonă a programului. 9 În general.12 se prezintă câteva exemple de nume de variabile valide şi invalide. cifre (0 la 9) şi caracterul de subliniere (_). 9 nu este o limită teoretică pentru numărul de caractere al numelui unei variabile dar nu uitaţi că trebuie să tastaţi corect de două ori numele unei variabile pentru a putea fi utilizată (nu vă complicaţi viaţa!) În figura 2. 9 numele variabilelor sunt sensibile la majuscule şi minuscule. variabilele scalare nu sunt declarate. flotante. puteţi să-l omiteţi. Există două tipuri de variabile: . Pentru a şti în care situaţie o variabilă trebuie să fie declarată trebuie să înţelegem mai întâi conceptul de portabilitate (scope. Variabila va fi în mod automat declarată în momentul în care îi atribuiţi o valoare. în limba engleză). 9 numele variabilelor nu trebuie să conţină spaţii şi semne de punctuaţie. octal sau hexazecimal).

Figura 2.14 este prezentat rezultatul execuţiei script-ului. ..).40 9 variabile globale 9 variabile locale .14 .sunt definite în exteriorul oricărei funcţii JavaScript (funcţiile sunt întotdeauna globale).13 În figura 2. Figura 2.13 vă va ajuta să înţelegeţi mai bine conceptul de portabilitate (Teoria fără praxă .sunt definite în interiorul unei funcţii.. Exemplul din figura 2. Utilizaţi cuvântul cheie var pentru a evita confuzia între o variabilă locală şi o variabilă globală cu acelaşi nume (omonimă).

9 Structura instrucţiunii de atribuire este foarte simplă: variabila din stânga semnului egal (=) ia valoarea indicată în dreapta semnului egal (vezi figura 2. Cel de-al doilea argument este facultativ. nume=”Droopy”. Figura 2.13).14159. Dacă şi după acest exerciţiu. conceptul de portabilitate vi se pare şi mai confuz. . Conversaţia 7) deschide o casetă de dialog care conţine: mesajul indicat (primul argument).16). var raspuns=prompt(”Care este numele tatalui?”. sau nu! Dacă doriţi să plasaţi mai mult de o instrucţiune pe o linie. Instrucţiunea următoare: deschide caseta de dialog prezentată în figura 2. butonul OK şi butonul Cancel.17.” ”). zona de text afişează implicit undefined. i=i+1. o zonă de text ce urmează a fi completată de utilizator (al doilea argument). <script> pi=3.utilizaţi semnul ”=” pentru a afecta o valoare unei variabile (instrucţiunea de atribuire). Utilizatorul poate să introducă o altă valoare sau să execute clic pe butonul OK pentru a accepta răspunsul implicit. prenume=’Ion’. <script> pi=3.15 </script> 9 Instrucţiunile JavaScript trebuie să se termine cu punct şi virgulă .16 </script> 9 Metoda prompt() (vezi obiectul Window. nume=”Droopy”.15).41 Aplicaţie ‰ Simulaţi funcţionarea acestui script (vezi figura 2. valoarea conţinută în zona de text este returnată script-ului. Dacă utilizatorul execută clic pe butonul OK. Dacă el este absent.utilizaţi metoda prompt(). dacă execută clic pe butonul Cancel.. prenume=’Ion’. i=i+1.. Figura 2. Figura 2. punct şi virgulă este obligatoriu după fiecare instrucţiune (figura 2.14159.17 . valoarea null este returnată script-ului. nu disperaţi! Vom reveni cu explicaţii suplimentare! Cum atribuiţi valori variabilelor? Două sunt modurile prin care se atribuie valori variabilelor JavaScript: 9 în mod static 9 în mod dinamic Remarci: .

Aplicaţie ‰ Simulaţi funcţionarea următorului script (vezi figura 2.converteşte un şir de caractere într-un număr în virgulă mobilă. Pentru a utiliza o funcţie va trebui mai întâi s-o definiţi. Dacă nici unul din numere nu este găsit la începutul şirului de caractere.18 Funcţii JavaScript Definiţi o funcţie O funcţie este un grup de instrucţiuni tratate ca o singură entitate. Pentru conversia tipurilor de date. 9 parseFloat() .18). Cele două funcţii detectează numerele la începutul şirului de caractere. Iată cum definim o funcţie (logo()) care afişează mesajul: ”Îmi place să fiu întotdeauna aşa cum sunt”. Remarcă.converteşte un şir de caractere într-un număr întreg. funcţiile returnează valoarea NaN (Not a Number). JavaScript propune următoarele două funcţii: 9 parseInt() . Figura 2. .42 Conversia tipurilor de date Ori de câte ori este posibil JavaScript converteşte în mod automat tipul de date întâlnit.

function logo(){ alert(”Imi place sa fiu intotdeauna asa cum sunt. . Exemplul nostru (func•ia Ceea ce nu este nemaipomenit! logo()) face întotdeauna acelaşi lucru: ea va afişa acelaşi mesaj ori de câte ori este apelată. care afişează într-o casetă de dialog textul indicat în interiorul parantezelor. function logo () { Figura 2.20) care indică interpretorului JavaScript că blocul de cod care urmează trebuie să fie tratat ca pe o funcţie şi numai după aceea el este apelat în mod explicit. Figura 2. Regulile de formare a numelui funcţiei sunt identice cu cele ale numelui variabilelor (vezi paragraful Variabile).19 } Funcţia este foarte simplă. function logo (){ Figura 2.21 } 9 Al treilea element este setul de paranteze (figura 2.22) care conţine lista parametrilor funcţiei (în exemplul nostru. Figura 2. aici logo.22). pe linia următoare (figura 2. 9 Al cincilea element.”). nu este cazul!) function logo( ) { Figura 2. function logo(){ Figura 2.”).24 } Să revenim la paranteze.22 } 9 Al patrulea element este acolada de deschidere.23 } 9 Ultimul element este acolada de închidere (figura 2. care marchează sfârşitul funcţiei. 9 Primul element este cuvântul cheie function (figura 2.21). care marchează debutul corpului funcţiei (vezi figura 2.20 } 9 Al doilea element este numele funcţiei (figura 2. dar vom analiza rapid fiecare din elementele sale.24).23) este metoda alert.19 este prezentată funcţia pe care ne-am propus s-o construim.43 În figura 2. function logo(){ alert(”Imi place sa fiu intotdeauna asa cum sunt.

44 Pentru a exploata din plin o funcţie.26 este prezentat documentul (X)HTML incomplet în care s-a inclus. În general.26 Apelaţi funcţia În acest moment funcţia (logo(mesaj)) este definită şi inserată într-un document (X)HTML. Funcţia logo() modificată este prezentată în figura 2. . Puteţi. pentru a putea utiliza o astfel de funcţie. de exemplu să utilizaţi un parametru mesaj ce reprezintă logo-ul pe care doriţi să-l afişaţi. Deoarece instrucţiunile antet-ului sunt executate primele. se recomandă utilizarea parametrilor. cea mai bună zonă pentru definirea unei funcţii este antet-ul <head> al documentului. … </head> script-ul ce conţine funcţia logo() Figura 2. pe care îi vom numi argumente. Figura 2.25 } De bună seamă.25. În figura 2. veţi avea certitudinea că funcţia este definită înainte de a fi utilizată. în secţiunea <head> modificată. Este vorba de variabile utilizate de către funcţie ori de câte ori aceasta este apelată. function logo(mesaj){ alert(mesaj). va trebui s-o includeţi într-un document (X)HTML.

45 Dacă afişaţi documentul (X)HTML (vezi figura 2.27 Pentru a înţelege mai bine cum … lucrează funcţia logo(mesaj). Pentru a afişa cel de-al doilea logo executaţi clic pe butonul OK. pentru a afişa două logo-uri diferite (vezi figura 2. nu se întâmplă absolut nimic. cu definiţia funcţiei şi apelul funcţiei în corpul documentului (X)HTML. Pentru a apela o funcţie.26) într-un browser.28). în corpul paginii. În figura 2.27) conţine al doilea set de tag-uri <script> inserat 9 În cel de-al doilea script veţi găsi două apeluri ale funcţiei logo(). Figura 2.27 este prezentat documentul (X)HTML complet. apelaţi funcţia de două ori. fiecare cu un mesaj diferit (vezi figura 2. Remarci: 9 Documentul XHTML (vezi figura 2. Figura 2. .27). va trebui să utilizaţi numele său într-o instrucţiune a script-ului şi să includeţi parantezele şi parametrii. Funcţia este pregătită.28 În figura 2.29 se prezintă rezultatul execuţiei funcţiei logo(). dar … inutilizabilă! Pentru a putea utiliza o funcţie va trebui s-o apelaţi.

return rezultat.30 este prezentată funcţia pe care ne-am propus s-o construim. } . urmat de numele funcţiei – media şi de trei parametrii – a. c pentru cele trei valori (numerice).b. .31). Iată cum procedăm pentru a defini şi apela o funcţie care calculează media aritmetică a trei valori.30 } Remarci: 9 Funcţia începe cu function – cuvânt rezervat. În figura 2.. dar puteţi foarte bine să o 9 Variabila (locală) rezultat stochează media aritmetică a celor 3 valori numerice.29 Figura 2. sau să o plasaţi la începutul liniei următoare.29 (continuare) Returnarea unei valori Funcţia (logo()) pe care am creat-o în aplicaţia precedentă afişează un mesaj.0. b. 9 Pentru a returna rezultatul (rezultat) script-ului. function media(a. O funcţie poate.46 Figura 2. de asemenea returna o valoare script-ului apelant. izolaţi pe o singură linie. 9 Acolada de deschidere a fost plasată la sfârşitul primei linii.c){ rezultat=(a+b+c)/3.31 return rezultat.. utilizăm cuvântul rezervat return (vezi figura 2. Figura 2. Figura 2.

în exemplul nostru).32 Remarci: 9 Pentru apelul funcţiei puteţi folosi o variabilă de stare (mediaaritmetic•. Crearea automată a script-urilor cu Macromedia DREAMWEAVER După cum am precizat în Conversaţia 1 (vezi paragraful: Oferta de editoare JavaScript). 9 Puteţi plasa apelul unei funcţii într-o expresie.47 În figura 2. Figura 2. . modul simplu de utilizare îl recomandă ca pe un excelent instrument de editare a script-urilor.9)).. .33 alert(media(7.32 se prezintă documentul complet (X)HTML. 9 În paralel cu variabilele şi valorile constantelor.. .33).34 sunt prezentate cele mai utilizate funcţii JavaScript puse la dispoziţie de Dreamweaver.. Figura 2. În figura 2. puteţi utiliza apelul funcţiilor care returnează rezultatele în interiorul unei expresii (vezi figura 2. Macromedia Dreamweaver MX poate fi folosit şi ca editor JavaScript.. Acest document conţine de asemenea. Funcţiile sale specifice. în secţiunea <body> un mic script care apelează funcţia media() şi afişează rezultatul.8.

Executaţi clic pe butonul Figura 2. executaţi clic pe subpanoul HTML (figura 2.48 Figura 2. 1.36. Figura 2. În grupul de panouri Insert. 3. (Script). figura 2. Se deschide caseta de dialog Script (figura 2.34 Iată cum procedăm pentru a crea un script care calculează aria unei sfere (Area of Sphere).35 2. .36 Remarcă. Executaţi clic în locul în care doriţi să inseraţi script-ul.35).37).

. Executaţi clic pe butonul OK al ferestrei de dialog Script (figura 2.38 Remarcă. </script> (figura 2. Figura 2..49 Figura 2.. Se inserează elementul <script> .39).38).37 4.

figura 2. Figura 2. Între tag-urile <script> şi </script> inseraţi funcţia areaOfSphere (figura 2.50 Figura 2.40.41).39 5.40 .

42 7. în corpul documentului. pentru radius=3 (figura 2.51 Figura 2. . Figura 2.43). Vizualizaţi pagina Web într-un browser (figura 2.41 6.42). Apelaţi funcţia areaOfSphere (radius).

selecţia) la care se adaugă instrucţiuni. utilizând ca instrumente de proiectare: pseudocodul. ƒ specificaţiile de programare (descriere script. 9 Pseudocodul este un limbaj independent de limbajul de programare (nu există un standard!). potrivite pentru a descrie pe scurt modul de rezolvare informatică a problemei. Altfel spus. ea poate fi rezolvată foarte bine şi de către un elev de şcoală elementară sau chiar de un adult (părinţii elevului!). ƒ proiectarea programului (script-ului).43 Remarcă. diagrama de structură a prelucrărilor etc. dar trebuie să recunoaştem că ceea ce pare simplu pentru unii este foarte complicat pentru alţii. Succes! Iată cum formulăm pe scurt problema pe care dorim să o rezolvăm cu JavaScript: creaţi o pagină Web care să afişeze aria unui rezervor sferic cu raza de 3m. listă funcţiuni). veţi exclama! Într-adevăr. intrări. Desigur. 9 Asigurându-ne că nu s-au strecurat greşeli în faza de analiză a problemei. constă din următoarele faze: ƒ analiza problemei. însă este rezolvarea informatică a problemei utilizând limbajul JavaScript. Ce problemă simplă.52 Figura 2. putem aborda în continuare faza de proiectare a script-ului. iteraţia. Obiectivul nostru. Pentru afişarea rezultatului cu două zecimale consultaţi Conversaţia 8. În consecinţă. Limbajul pseudocod pe care vi-l propunem este alcătuit din câteva instrucţiuni standard ce definesc structurile algoritmice fundamentale (secvenţa. Remarci: 9 Procesul de alcătuire a unui script. pe care il vom urma pe tot parcursul lucrării.. 9 În cadrul fazei de analiză se definesc: ƒ formatul datelor de ieşire. ƒ testare şi depanare. redactaţi cu cuvinte obişnuite acest mic „caiet de sarcini”. . EXEMPLUL 2 JAVASCRIPT ‰ De la problemă la script Prima etapă pe care trebuie s-o parcurgeţi în lungul drum al problemei către script o constituie definirea obiectivului script-ului. ieşiri. în bună parte aflate la latitudinea celui care realizează documentaţia de analiză şi proiectare a programului. ƒ tabela de variabile. ƒ codificarea în limbajul JavaScript. problema nu este dificilă. luaţi o foaie de hârtie şi preţ de câteva minute adunaţi cuvintele ..

problema este una dintre cele mai simple: calculul ariei unui rezervor sferic atunci când se cunoaşte raza. variabilele de intrare şi variabilele de stare. Cam dificilă această exprimare.46. . nu vi se pare? Să alegem pentru arie şi rază câte un nume de variabilă semnificativ. Tabela de variabile Variabile de intrare Figura 2.45 sunt prezentate: variabilele de ieşire. într-o formă deloc pretenţioasă. Descrierea script-ului JavaScript. Figura 2.44 Remarcă.53 ‰ Analiza problemei Înainte de a scrie un program (JavaScript) trebuie să cunoaştem şi să înţelegem foarte bine problema (Analiza problemei). care nu sunt nici de intrare şi nici de ieşire. În rezolvarea acestei probleme se urmăreşte crearea unei pagini Web. document care se realizează în faza de analiză structurată a problemei. Tabela de variabile În figura 2. precum şi lista principalelor funcţiuni sunt prezentate în figura 2. structurate într-o tabelă de variabile.44). în care să se afişeze simplu. urmând apoi să codificăm în JavaScript formula de calcul prezentată (A=4ПR2). căci despre ea este vorba.44 reprezintă formatul datelor de ieşire.45 Variabile de stare r: raza cercului Variabile de iesire aria: aria rezervorului sferic Remarcă. În cazul nostru. Se înmulţesc: patru cu trei şi paisprezece (П) şi cu pătratul razei. Vă mai amintiţi cum se calculează aria unei sfere. definiţi un al treilea tip de variabilă: variabile de stare. Ecranul din figura 2. În situaţia în care variabilele de ieşire şi variabilele de intrare nu sunt suficiente. cele două valori pentru rază (3) şi arie (vezi figura 2.

Remarcă. Afişaţi rezultatul (aria). 2. afişează) care să pună în evidenţă atât variabilele de intrare/ieşire cât şi variabilele de stare. 3.54 Specificaţii de programare Descrierea programului Script-ul calculează şi afişează aria unui rezervor sferic cu raza de 3 m. putem aborda în continuare faza de proiectare a script-ului. . 2. Prezentarea algoritmului în limbaj natural structurat are. pseudocodul. Stop. Se preferă o formalizare a acţiunilor primitive (atribuie. Stop. Intrări: Ieşiri: Aria rezervorului sferic cu raza de 3 m. Asigurându-ne că nu s-au strecurat greşeli în faza de analiz• a problemei. greoaie etc. exprimări lungi. Afişează raza şi aria rezervorului sferic (aria). Afişaţi raza (r) 4. Figura 2. Atribuiţi razei (r) valoarea 3. Calculează aria rezervorului sferic.47 5. ‰ Proiectarea script-ului Pentru proiectarea script-ului vom folosi ca instrument de proiectare. Lista de funcţiuni ale script-ului 1. Iată cum procedăm pentru a construi pseudocodul în ambele variante. Varianta 2 Varianta prezentării algoritmului de o manieră formalizată este de preferat celei narative (Varianta 1). Varianta 1 În figura 2. 9 Varianta 2 – scriere formalizată (apropiată de limbajul JavaScript). calculează. după cum aţi putut constata şi unele dezavantaje: lizibilitate redusă. Atribuie variabilei r (de stare) valoarea 3. Figura 2.46 4. Calculaţi aria (aria) rezervorului sferic.47 se prezintă pseudocodul în limbaj natural structurat. 3. Pseudocodul (Varianta 1) 1. cu una din variantele prezentate mai jos: 9 Varianta 1 – scrierea în limbaj natural structurat.

Pseudocodul (Varianta 2) REZERVOR BEGIN r=3 2 aria=4π r WRITE(r) WRITE(aria) END Figura 2.55 În consecinţă.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 .49 se prezintă lista cuvintelor rezervate. funcţii.48 REZERVOR Cuvintele rezervate JavaScript Anumite cuvinte nu pot fi utilizate ca nume de variabile.48 se prezintă pseudocodul în manieră formalizată. s-o folosim cât este cu putinţă pe aceasta. break continue delete with default do double extends final long goto Figura 2. În figura 2. În figura 2. obiecte şi metode.

com 9 www.Ce realizează funcţia parseInt()? 11.2 (Conversaţia 11). ƒ Figura 11.internet.glscript. Cum definiţi o funcţie JavaScript? 9. ƒ Figura 11. O funcţie JavaScript: ƒ acceptă parametrii.com 9 www. Identificaţi erorile de sintaxă din următoarele script-uri: ƒ Figura 11. Care sunt cele două constante booleene? 8.com 9 www.Care este semnificaţia cuvântului rezervat return? Vizitaţi site-urile 9 www. 6. Ce tip de date puteţi atribui unei variabile JavaScript? 4. Care sunt valorile speciale JavaScript? 3. 2. 7.com .com 9 www. ƒ returnează o valoare.webcoder.toutJavascript.56 JavaScript Testaţi-vă cunoştinţele Temă 1. ƒ ambele variante.script-masters.1 (Conversaţia 11).javascript. Ce execută prima dată un navigator? ƒ un script din antet-ul paginii.com 9 www. ƒ un script din corpul paginii. Cum atribuiţi valori variabilelor? 10. ƒ un gestionar de evenimente plasat în tag-ul <body>.3 (Conversaţia 11).javanett. Care este deosebirea dintre o variabilă locală şi o variabilă globală? 5.

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

dar .Conversaţia 2 (continuare) Operatorii JavaScript. Instrumentele necesare pentru realizarea acestor operaţii se numesc operatori. fie felul în care este evaluată o combinaţie de expresii. Cei mai mulţi dintre operatorii JavaScript sunt recunoscuţi de către toate navigatoarele. JavaScript recunoaşte atât operatorii binari (necesită existenţa a doi operanzi în expresie) cât şi operatorii unari (necesită existenţa unui singur operand în expresie).. Obiecte matematice ••••••••••••••••••••••••••••••••••••••••••••• În această conversaţie: 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. mai există şi divergenţe! . trebuie să evaluaţi sau chiar să modificaţi datele pe care le prelucrează script-urile dumneavoastră.. Operatorii [1] sunt simbolurile şi identificatorii care reprezintă fie felul în care sunt modificate datele.

// afişează 15 </script> <script> prenume=”Vasile”. <= (mai mic sau egal). numecomplet=”Domnul ”+ prenume+” “+nume. 9 Operator de concatenare. Operatorul + serveşte în general pentru efectuarea convertirii tuturor tipurilor de date în şiruri de caractere. vom proceda la o clasificare a operatorilor din limbajul JavaScript urmând ca apoi să-i examinăm pe fiecare în parte (vezi figura 2. (virgula) . ! (NOT) (). * (înmulţire). 2. + (adunare). Tip de date: alfanumeric (şir de caractere). rezultatul este NaN. [] ?: toţi operatorii relaţionali (de comparaţie) şi operatorul de concatenare (+) typeof delete new void Operatorii JavaScript sunt prezentaţi în detaliu în figura 2. Tipuri de operatori aritmetici atribuire plus combinaţii (între operatorul de atribuire şi operatorii aritmetici) relaţionali (de comparaţie) booleeni (logici) operatori pentru funcţii operatori pentru structuri de date operatori condiţionali operatori pentru şiruri operatorul operatorul operatorul Figura 2.51.50). 1. == (egalitate).50 operatorul Operatorii JavaScript % (modulo). += (atribuire cu adunare). z=3+8. Remarcă. ++ (increment). Operator Sintaxă + operand1 + operand2 Adunare sau concatenare. Dacă unul din operatori este NaN. – – (decrement). b=7. (punctul). > (mai mare). === (identitate).51 <script> a=8. >= (mai mare sau egal). // afişează 11 alert(c). / (împărţire) = (atribuire simplă). != (non egal). Remarcă. || (OR). Tip de date: numeric. c=a+b. . – (scădere). 9 Operator aritmetic. alert(numecomplet). *= (atribuire cu înmulţire). Exemplu: Figura 2. alert(z). !== (non identic) && (AND).58 În continuare. –= (atribuire cu scădere). // afişează Domnul Vasile Adam </script> . %= (atribuire cu modulo) < (mai mic). /= (atribuire cu împărţire). ^ (SAU EXCLUSIV). nume=”Adam”.

//afişează 9 </script> ++ ++ operand operand++ <script> numecomplet=”Dumitrescu”. Echivalent cu: operand1= operand1 + operand2. Este foarte des utilizat în bucle. 9 Operator aritmetic şi de atribuire. 1. // afişează 5 alert(a). Remarcă.59 += operand1 += operand2 Adunare sau concatenare asociată unei atribuiri. a+=6. 9 Operator de concatenare şi de atribuire. . Remarci: 9 Pre-incrementare (++ operand): valoarea variabilei este mărită cu 1. alert(numecomplet). // afişează 6 alert(a). Exemplu: <script> a=3. apoi este utilizată.51 (continuare) Scădere sau negare. 1. i++){ document. 2. 9 Acest operator se aplică numai variabilelor. 1. alert(++a). Tip de date: numeric.write(i). 9 Operator aritmetic. //afişează 6 </script> – <script> //pre-incrementare a=5. // afişează 0 1 2 3 4 } </script> operand1 – operand2 Figura 2. Tipul de date: numeric. 9 Post-incrementare (operand ++): valoarea variabilei este utilizată apoi este mărită cu 1. alert(a++). 9 x++ este echivalent cu: x=x+1. 9 Este imposibil de a combina post-incrementarea cu pre-incrementarea. Converteşte o valoare pozitivă într-o valoare negativă. Tipul de date: numeric. nume=”Vasile”. Exemplu: <script> //post-incrementare a=5. 2. Tip de date: alfanumeric. 9 Operator aritmetic. //afişează 6 </script> <script> //post-incrementare întro buclă for(i=0. Conţinutul variabilei situate la stânga operatorului este completat cu data alfanumerică din dreapta operatorului. 9 ++x++ returnează un mesaj de eroare. Operator de negare.i<5. // afişează Dumitrescu Vasile </script> Incrementare. alert(a). numecomplet+=nume. 9 Este echivalent cu: operand1= operand1 + operand2. Remarcă.

operand): valoarea variabilei este diminuată cu 1 şi apoi este evaluată. c=a-b. b=8. <script> a=4. alert(a).write(a). //afişează 4 alert(a)// afişează 4 </script> <script> //post-decrementare în bucla for for(a=7. alert(--a). // afişează -2 </script> – – operand – – – – operand Decrementare. alert(d). Tipul de date: numeric. a--){ document. // afişează 56 </script> . b=13.//afişează 5 alert(a). a-=6. Este des utilizat în bucle.60 Exemplu: <script> a=20. alert(a). d=8-2. Exemplu: <script> //post-decrementare a=5. alert(a--). 9 Operator aritmetic.// afişează 4 </script> * <script> //pre-decrementare a=5. // afişează 6 alert(c). 1. c=3*6.a<=1. 9 x– – este echivalent cu x=x–1. Este echivalent cu: operand 1= operand 1 – operand 2.51 (continuare) <script> a=7. // afişează 18 alert(d). <script> a=-7. 9 Operator aritmetic. // afişează 7 </script> operand1 –= operand2 Exemplu: Remarcă. a=-a. Tipul de date: numeric. 9 Operator aritmetic şi de afectare. alert(c). // afişează 7 </script> –= Tipul de date: numeric. // afişează 6 5 4 3 2 1 </script> operand1 * operand2 Exemplu: Înmulţire. 9 Post-decrementare (operand --): valoarea variabilei este evaluată apoi este diminuată cu 1. 1. 9 Este echivalent cu: operand1= operand1 – 1. 9 Acest operator se aplică numai variabilelor. Remarci: 9 Pre-decrementare (-. Figura 2. d=a*b.

Este echivalent cu: operand1= operand1 * operand2. Å echivalent cu Æ <script> a=5. // afişează 4 </script> /= operand1 /= operand2 Împărţire şi atribuire. // afişează 2. Este echivalent cu: operand1= operand1 / operand2. // afişează 2. Exemplu: <script> a=12. Exemplu: <script> a=5. Tipul de date: numeric. alert(c). <script> a=2.5 </script> % Modulo.51 (continuare) <script> a=18. // afişează 3 </script> . alert(a). 1. 9 Operator aritmetic şi de atribuire. Remarcă. 9 Operator aritmetic şi de atribuire. a/=2. d=a/b. alert(a). Remarcă. a*=5. 9 Operator aritmetic. 1.61 *= operand1 *= operand2 Exemplu: Înmulţire şi atribuire. 9 Operator aritmetic. Remarci: 9 Dacă unul din operanzi este NaN. b=3. Tipul de date: numeric. 9 Împărţirea 0/valoare_finită dă 0. Calculează restul întreg al împărţirii întregi a primului număr prin cel de-al doilea număr. c=5/2. a=a%5. Tipul de date: numeric. 1. alert(a).5 </script> operand1 % operand2 Exemplu: Remarcă. Figura 2. a=a/2. rezultatul este NaN. // afişează 2.5 alert(d). // afişează 10 </script> / operand1 / operand2 Împărţire. alert(a). 1. Tipul de date: numeric. 9 Împărţirea 0/0 dă NaN.

1.62 %= operand1 %= operand2 Exemplu: Modulo şi afectare. // afişează 3 </script> Variabila = Valoare Exemplu: 1.51 (continuare) <script> a=6. Este echivalent cu: operand1= operand1 % operand2. Tipul de date: numeric. alert(a).write(a<=b). 9 Operator relaţional (de comparare). document. Remarcă. 9 Operator aritmetic şi de afectare. <= operand1 <= operand2 Mai mic sau egal. alert(a). 9 Operator relaţional (de comparare). dacă rezultatul evaluării condiţiei este adevărat. nume2=”SPENCER”. 9 În cazul comparării valorilor alfanumerice se ia în considerare codul ISO. Remarci: 9 Se returnează TRUE dacă rezultatul evaluării condiţiei (operand1 <= operand2) este adevărat. nume=”Droopy”. // cele trei variabile vor avea aceeaşi valoare: 13 </script> operand1 < operand2 Strict mai mic.// afişează 3 </script> = Atribuire. 9 În cazul comparării valorilor alfanumerice se ia în considerare codul ISO. a%=5. 9 Se returnează undefined dacă una din valorile care se compară este NaN. Tipul de date: numeric. document. Tipul de date: numeric. //b are valoarea 23 </script> < <script> //atribuire multiplă var a=b=c=13. alfanumeric şi logic. <script> a=18. Exemplu: Figura 2. //afişează true nume1= “MARK”.write(“<br />”+nume1<=nume2). alfanumeric şi logic. Remarcă. a=a%5. A nu se confunda cu operatorul ==. 9 Se returnează undefined dacă una din valorile care se compară este NaN. // afişează true </script> . 1. b=a+3. Tipul de date: numeric. Å echivalent cu Æ <script> a=18. b=6. 1. <script> a=20. alfanumeric şi logic. Remarci: 9 Se returnează TRUE.

9 Se returnează undefined dacă una din valorile care se compară este NaN. document.write(“<br />”+nume1>nume2). document. 1. // afişează false. // afişează false </script> == operand1 == operand2 Egal cu. 9 În cazul comparării valorilor alfanumerice se ia în considerare codul ISO. Remarci: 9 Se returnează TRUE dacă rezultatul evaluării condiţiei (operand1 este egal cu operand2) este adevărat.write(a>=7).write(a>b). ”7”) returnează TRUE. </script> >= operand1 >= operand2 Mai mare sau egal. // afişează false.write(nume==a). document. alfanumeric şi logic. 9 În cazul comparării valorilor alfanumerice se ia în considerare codul ISO. alfanumeric şi logic. b=7. 9 În cazul comparării valorilor alfanumerice se ia în considerare codul ISO. 9 Se returnează undefined dacă una din valorile care se compară este NaN. nume=”MIRCEA”. Remarci: 9 Se returnează TRUE dacă rezultatul evaluării condiţiei (operand1 >= operand2) este adevărat. 1. //afişează true nume1= “M1”.write(a==b’). 9 Operator relaţional (de comparare). 9 Compararea unei valori numerice (de exemplu. document.51 (continuare) <script> a=6. 9 Operator relaţional (de comparare). Exemplu: <script> a=6. document. Tipul de date: numeric. 1. alfanumeric şi logic. nume2=”POLEVOI”.write(“<br />”). 7) cu o aceeaşi valoare alfanumerică (de exemplu. Remarci: 9 Se returnează TRUE dacă rezultatul evaluării condiţiei (operand1>operand2) este adevărat.write(“<br />”+nume1>=nume2). document. Tipul de date: numeric. 9 Se returnează undefined dacă una din valorile care se compară este NaN. </script> === operand1 === operand2 . 9 Operator relaţional (de comparare). Exemplu: Figura 2. nume2=”P1”. //afişează false nume1= “MICIURIN”. Exemplu: <script> a=7.63 > operand1 > operand2 Strict mai mare. document.write(a==’6’). b=6. // afişează true. document. Tipul de date: numeric. document.write(“<br />”). // afişează false.

document. // afişează true. // afişează true. document. // afişează true. b=7. Exemplu: <script> a=”7”. // afişează false. 9 Operator relaţional (de comparare): non-egalitate de valori. document. 9 Operator relaţional (de comparare): non-egalitate de valoare şi de tip de date. c=8. 1. // afişează true.write(nume1!=a). // afişează true </script> !== operand1 !== operand2 Non identic cu.write(nume1==a). b=7.write(nume1!==a). b=7. 1.write(“<br />”). nume1=”Maxim”. Tipul de date: numeric.64 Identic cu. nume1=”MAXITAXI”. document. document. 1. Remarcă. alfanumeric şi logic. document. // afişează false document. Remarcă. // afişează false. // afişează false. document.write(”<br />”+(nume1!==”Maxim”)). // afişează false document. // afişează true. document. document.write(a!=b). Se returnează TRUE dacă rezultatul evaluării condiţiei (operand1 nu este egal şi nici de acelaşi tip cu operand2) este adevărat. Remarcă.write(nume1!==”maxim”).write(nume1!=”maxim”). document.write(“<br />”).write(“<br />”+(a===b)). nume1=”Maxim”. document. Se returnează TRUE dacă rezultatul evaluării condiţiei (operand1 este diferit de operand2) este adevărat. alfanumeric şi logic. Se returnează TRUE dacă rezultatul evaluării condiţiei (operand1 este egal cu operand2 şi de acelaşi tip de date) este adevărat. Tipul de date: numeric. // afişează false </script> . document.write(“<br />”+(nume1===”MAXITAXI”)).write(“<br />”). document. </script> != operand1 != operand2 Diferit de. Exemplu: <script> a=”7”.write(”<br />”+(nume1!=”Maxim”)). Tipul de date: numeric. document.write(a!==b). Exemplu: Figura 2. document. // afişează true. alfanumeric şi logic.write(“<br />”). 9 Operator relaţional (de comparare): egalitate de valori şi de tip de date.write(“<br />”+(c!=a)).51 (continuare) <script> a=”7”.write(“<br />”+(nume1===”maxitaxi”).

Remarci: 9 Valoarea returnată este cea care aparţine ultimei instrucţiuni. 9 Acest operator este foarte des utilizat în bucle (for. if((a>2)&&(b==6)){ document.. // afişează true. Remarci: 9 Operator logic ŞI (AND).b=6.b=6.write(“a este mai mare ca 2”).. document.nume1=”Maxim”. document. nume1=”Maxim”.write((a>2)||(b==nume1)). document.write((a>2)||(b==6)). </script> <script> a=4. 9 Returnează TRUE dacă cele două expresii returnează valoarea TRUE. while) şi teste (if . b=6. while) şi în teste (if .write(“ şi b este egal cu 6”).nume1=”Maxim”.write(“<br />”). Exemplu: Exemplu: <script> a=4.. else). // afişează false </script> <script> a=4.write((a>2)&&(b==nume1)). nume1=”Maxim”. (virgulă) Operator care permite mai multor instrucţiuni de a fi executate ca şi când ar fi o singură instrucţiune. // afişează false.write((a>2)&&(b==6)).write(“ sau b este egal cu 6”). else).51 (continuare) Exemplu: <script> . Exemplu: Exemplu: <script> a=4. } </script> . 9 Acest operator este utilizat de asemenea pentru transferarea mai multor parametrii unei funcţii. document.write(“a este mai mare ca 2”). document.65 && operand1 && operand2 ŞI. if((a>2)||(b==6)){ document.write(“<br />”). document. b=6. 9 Returnează TRUE dacă una din cele două expresii returnează valoarea TRUE. Figura 2. document. Remarci: 9 Operator logic SAU (OR). // afişează true document. 9 Acest operator este foarte des utilizat în bucle (for.. } </script> || operand1 || operand2 SAU (OR).

write(“<br />”). 9 Operator de test (condiţie).write(v).7 </script> <script> //Ştergerea unei proprietăţi a unui obiect <script> azi=new Date(). Tipul de date: obiect. </script> delete <script> a=2. // afişează d=7. 1. document.write(“a=”+a). //afişează 1.c.51 (continuare) Exemplu: <script> //ştergerea unui element al unei matrici var v=new Array(1.d. // afişează c=6. // afişează a=7.write(“c=”+c). Remarci: 9 Este utilizat pentru a crea un test rapid sub forma: expresielogică ? DacăDa: DacăNu. // x ia valoarea true şi azi este undefined </script> . Exemplu: Figura 2. document. 9 DacăNu: instrucţiune care va fi executată dacă rezultatul evaluării expresielogică este FALSE. Exemplu: <script> a=2. (a>10)?alert(”adevarat”):alert(”false”). </script> delete obiect delete obiect. Tipul de date: numeric. if(a>10) alert(”adevarat”).3. document.66 var a.write(“b=”+b).b.7 delete v[2]. alfanumeric şi logic.c=6.write(v). //ştergerea unui obiect x=delete azi.7).3.d=7).write(“<br />”). 9 Operator de ştergere a proprietăţii obiectului. document. Remarci: 9 Şterge o proprietate a unui obiect creat cu new.2. 9 Şterge un element al unei matrici (Array) indicând numărul său de ordine (primul element este de rang zero). 1.2. document. 9 DacăDa: instrucţiune care va fi executată dacă rezultatul evaluării expresielogică este TRUE. document. </script> ?: condiţie1 ? cod1:cod2 Condiţie. //este şters al 3-lea element document. // afişează b=5.write(“d=”+d). else Å echivalent cu Æ alert(”false”).write(“<br />”). 9 Expresielogică este o expresie care returnează TRUE sau FALSE. document. //afişează 1.2.Proprietate delete Array[Index] Ştergere. document. a=(b=5.

1. RegExp. Function. obiect. String. Date. metode sau evenimente ale unui obiect.Eveniment Exemplu: Punctul (. Number. Exemplu: <script> //crearea obiectului astăzi var astazi=new Date(). <script> //acces la metoda write() a obiectului document document. 9 Operator de acces. x=delete a. Tipul de date: obiect. Remarci: 9 Returnează sub formă de şir de caractere tipul de date al obiectului sau al variabilei indicate. 9 Operator de creare a unui nou obiect.Proprietate obiect. 1. //crearea obiectului Object var obiect=new Object().) este utilizat pentru a putea accesa proprietăţi.valoare este nedefinit </script> new obiect= new Constructor Nou. Object. Tipul de date: obiect. Figura 2.prenume=”stejărel” </script> .write(“Au înnebunit salcâmii!”). Boolean.67 a=new Number(). (punct) obiect.Metoda obiect.valoare=13. 9 În tabelul 1 se prezintă pe două coloane: tipul de dată şi şirul de caractere returnat de Typeof.valoare. Remarci: 9 Creează o nouă instanţă a unui obiect cu ajutorul unui constructor.51 (continuare) #______________________________________________________________ ________________________________________________________________ ________________________________________________________________ ________________________________________________________________ Tabelul 1 . 9 new este utilizat pentru crearea instanţelor următoarelor obiecte: Array. //x ia valoarea true şi a. a. </script> typeof typeof(operand) typeof operand Tipul de date. //crearea obiectului matrice var matrice=new Array().

write(“<br />”+typeof(nume)).write(”<br />”).write(typeof a).5. //afişează 7 document. document. document. // afişează string </script> void void Expresie void(Expresie) Nedefinit. //afişează number document. </script> [] matrice[] obiect[“Proprietate”] Utilizat pentru accesarea unei proprietăţi a unui obiect sau a unui element al unei matrici.51 (continuare) <script> //acces la elementele unei matrici var matrice=[7.write(”<br />”). 9 Operator de matrice. Exemplu: <script> /*Argumentul „Bine ati venit!” este transmis metodei write() a obiectului Document*/ document. 1. 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 funcţii. nume=”salcam”. Evaluează o expresie şi returnează ca rezultat undefined.1]. //afişează 3 </script> .3.write(”Bine ati venit!”). document. 1. 9 Operator de invocare. Exemplu: Figura 2. Tipul de date: obiect.68 Tabelul 1 Tipul de dată logic număr infinit şir de caractere obiect funcţie nedefinit null Exemplu: Şirul de caractere returnat de typeof boolean number number string object function undefined object <script> a=7. /*argumentele 8.write(matrice[2]).write(matrice[0]).10). Tipul de date: obiect. document.10 sunt transmise functiei media() media(8.

write(“sau a>2 sau b=6”). b=6.69 ! !Operand Exemplu: Operator logic (NOT). [] () ++ –– – → → → ← ← ← acces la proprietăţi acces la matrici (arrays) regrupare sau funcţie incrementare decrementare negare aritmetică Operatori Asociativitate Semnificaţie . Prioritatea (precedenţa) indică ordinea în care expresiile sunt evaluate. Returnează TRUE dacă data este FALSE şi invers. if((a>2)^(b==6)){ document.52 ([2]) sunt prezentaţi toţi operatorii JavaScript cu precizarea asociativităţii şi priorităţii acestora. } </script> Asociativitatea şi prioritatea operatorilor Asociativitatea indică sensul (→ sau ←) în care expresia care conţine operatorul este evaluată. Returnează TRUE dacă una şi numai una din expresii returnează TRUE.51 (continuare) <script> a=4. Exemplu: Exemplu: Figura 2. alert(!(a>b)). //afişează TRUE </script> ^ operand1 ^ operand2 Operator logic SAU exclusiv.b=6. <script> a=true. alert(!a).52 6 . În figura 2. //afişează FALSE <script> <script> a=5. Rang de prioritate 1 2 3 4 5 Figura 2.

70 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 Figura 2.write((7+9+”abc”)).write(”<br />”)). Dacă există mai multe nivele de paranteze. în cazul combinării unei adunări şi unei concatenări (vezi figura 2. mai mare sau egal egal diferit identic (egalitate de valori şi de tip) non-identic ŞI SAU condiţie afectare (atribuire/asignare) afectare cu calcul evaluare multiplă 9 Expresiile sunt evaluate în funcţie de prioritatea operatorilor. de exemplu. Figura 2. 9 Asociativitatea joacă un rol. Expresiile din paranteze sunt evaluate primele. scădere concatenare mai mic.53 </script> Obiecte matematice .53). document. expresiile sunt evaluate începând cu parantezele aflate cel mai în interior.52 (continuare) 26 Remarci: ! delete new typeof void */% +– + < <= > >= == != === !== && || ?: = *= . modulo adunare. mai mic sau egal mai mare. /= +=–= ← ← ← ← ← → → → → → → → → → → → ← → %= ← → NOT logic ştergerea unei proprietăţi sau a valorii unei matrici crearea unui obiect determinarea tipului de date evaluarea fără returnarea valorii înmulţire.write(”<br />”). //afişează 16abc document. <script> document.write((”abc”+7+9)). împărţire. 9 Parantezele au o prioritate foarte ridicată. //afişează abc79 document.

NaN (Not a Number). floor().54 </script> Boolean este un alt obiect predefinit al limbajului JavaScript pe care îl veţi găsi util atunci când doriţi să transformaţi o valoare non-booleană într-o valoare booleană (true sau false). false) şi să executaţi diferite funcţii matematice (sqrt(). Number. plus şi minus infinit.).). Nu este nevoie să creaţi obiectul Math: el se creează în mod automat de către navigator (există în toate programele JavaScript). sqrt() etc. <script> var numar_clienti=1234. Number. este un obiect predefinit al limbajului JavaScript pe care îl veţi găsi util atunci când trebuie să accesaţi anumite constante: cel mai mare şi cel mai mic număr care poate fi reprezentat. SQRT2 etc.) şi funcţii (abs(). Ele vă permit să accesaţi constante ( π . true. cel de-al doilea obiect matematic. Pentru a crea un nou obiect Number. obiectele matematice: Math. Number() şi cuvântul cheie new (figura 2. E. //declarare explicita Figura 2. Proprietăţile obiectului Math sunt constante matematice iar metodele sale sunt funcţii matematice. Boolean vă pot fi de un real folos. În acest caz. Pentru a crea un nou obiect Boolean utilizaţi constructorul Boolean() şi cuvântul cheie new. utilizaţi funcţia specială numită constructor. exp() etc. JavaScript reprezintă aceste valori ca proprietăţi ale obiectului Number. Math este un obiect predefinit al limbajului JavaScript care conţine numeroase constante (PI.71 Cu siguranţă că veţi avea nevoie în programele dumneavoastră de formule matematice care să nu folosească doar simple adunări şi înmulţiri. LN2. LN10. Obiectul Math .54). //declarare implicita var numar_clienti=new Number(1234). pow().

write(Math. //afişează 2.E Constanta lui Euler.56 Exemplu: <script> document.write(Math. ceil().LOG2E . Math.write(Math. sin(). asin().LOG10E). log(). random(). SQRT1_2. LOG10E. pow().55.6931471805599453 </script> LOG10E Math. tan() - Figura 2. //afişează 0.LN10 Exemplu: <script> document.LOG10E Logaritm în bază 10 din e.55 Gestionarii de evenimente: Proprietăţile obiectului Math Proprietăţile obiectului Math sunt prezentate în detaliu în figura 2. atan(). round().LN10).56. //afişează 2.4342944819032518 </script> LOG2E Math.30258509294046 </script> LN2 Logaritm natural de 2. Proprietate Sintaxa E Math. LOG2E. LN10. cos(). acos().72 Fişa obiectului Math este prezentată în figura 2.write(Math. Figura 2.71821828459045 </script> LN10 Logaritm natural de 10. //afişează 0. SQRT2 abs(). LN2. floor(). exp(). sqrt().LN2). Exemplu: <script> document.LN2 Exemplu: <script> document. Math. min(). E.E). PI. max(). Fişa obiectului Cum creăm obiectul? Proprietăţi: Metode: Math Se creează automat de către navigator.

4426950408889633 </script> PI Math.73 Exemplu: Logaritm în baza 2 din e.abs(b). Remarcă. //afişează 0.4142135623730951 </script> Exemplu: Metodele obiectului Math Metodele cele mai frecvent folosite ale obiectului Math sunt prezentate în detaliu în figura 2.57. rez2=Math.write(Math. //afişează 3.write(Math.57 Exemplu: abs(0) abs(NaN) abs(-Infinity) <script> a=-57.PI).56 (continuare) 2. document. b=85.abs(ValoareNumerică) Valoare absolută.write(Math. //afişează abs(-57)=57 .write(“abs(“+a+”)=”+rez1). <script> document. În Tabelul 2 se prezintă rezultatele funcţiei abs() pentru câteva argumente speciale.abs(a).7071067811865476 </script> SQRT2 Math.SQRT2 Figura 2. //afişează 1.SQRT2). <script> document.141592653589793 </script> SQRT1_2 Math.PI Constanta PI. //afişează 1. <script> document. rez1=Math.write(Math.SQRT1_2). Exemplu: <script> document. Metodă Sintaxă abs() Math.LOG2E).SQRT1_2 Exemplu: 1/ 2 . Tabelul 2 Argument Rezultat 0 NaN +Infinity Figura 2.

write(“<br />”).write(“abs(“+b+”)=”+rez2).57 (continuare) Exemplu: <script> a=-4. document. Tabelul 4 Argument +Infinity Între -1 şi 0 -Infinity 0 NaN Rezultat +Infinity 0 -Infinity 0 NaN Figura 2. </script> atan() Math. document. //afişează abs(85)=85 </script> acos() Math.write(”ceil(”+a+”)=”+rezultat). Remarcă.acos(ValoareNumerică) Exemplu: Arc cosinus. document. Tabelul 3 Argument 0 >1 <-1 NaN Rezultat 0 NaN NaN NaN Exemplu: <script> a=0. În Tabelul 3 se prezintă rezultatele funcţiei asin() pentru câteva argumente speciale.ceil(ValoareNumerică) Număr întreg superior cel mai apropiat. document.9965. rezultat=Math. Pentru valori ale argumentului: >1. NaN rezultatul este NaN. document.223.atan(ValoareNumerică) Arc tangentă. rezultat=Math.asin(ValoareNumerică) Arc sinus.asin(a). Remarcă. Remarcă. Exemplu: <script> a=0. În Tabelul 4 se prezintă câteva argumente speciale şi rezultatul corespunzător.write(”asin(”+a+”)=”+rezultat). </script> asin() Math. </script> ceil() Math. //afişează ceil(-4.atan(a). rezultat=Math.ceil(a).write(”acos(”+a+”)=”+rezultat). rezultat=Math.9965. < –1.74 document.223)=-4 </script> .9965. <script> a=0.acos(a).write(”atan(”+a+”)=”+rezultat).

Exemplu: <script> a=0. rezultat=Math.log(ValoareNumerică) Logaritm.max(a.b). Remarcă.floor(a). Exemplu: <script> a=5.609437912431002 </script> max() Math. Exemplu: <script> a=-4. Exemplu: <script> a=5.exp(ValoareNumerică) Exponenţiala.223.log(a).336.exp(a).cos(ValoareNumerică) Cosinus.336)=13. //afişează floor(-4.”+b+”)=”+rezultat). document.write(”log(”+a+”)=”+rezultat).write(”max(”+a+”. //afişează max(7.write(”floor(”+a+”)=”+rezultat). În Tabelul 5 se prezintă câteva argumente speciale ale metodei şi rezultatele corespunzătoare. b=13. document.write(”exp(”+a+”)=”+rezultat).write(”cos(”+a+”)=”+rezultat). </script> floor() Math. ValoareNumerică2) Valoare maximă.floor(ValoareNumerică) Număr întreg inferior cel mai apropiat.13.9965.cos(a).57 (continuare) Argument 1 Orice valoare NaN Argument 2 NaN Orice valoare Rezultat NaN NaN Exemplu: <script> a=7. document.max(ValoareNumerică1.223)=-5 </script> log() Math.75 cos() Math. document. document. //afişează 1. rezultat=Math.336 </script> . rezultat=Math. </script> exp() Math. rezultat=Math. Tabelul 5 Figura 2. rezultat=Math.

var m=48. rezultat=Math.”+b+”)=”+rezultat).min(a.2)=9 </script> random() Math. b=2. document. } </script> <script> /*generează 4 numere aleatoare cuprinse între 0 şi 25*/ for(i=0.336)=7 </script> pow() Math. 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.13.min(ValoareNumerică1.round(Math.i++){ a=Math. document.write(a+”<br />”).i++){ a=Math.round(Math. } </script> Exemplu: <script> /*generează 5 numere aleatoare cuprinse între 12 şi 48*/ var n=12.57 (continuare) <script> /*generează 3 numere aleatoare cuprinse între 0 şi 1*/ for(i=0. . //afişează pow(3.pow(a. Exemplu: <script> a=7.i<5.random()*(m-n)+n).i++){ a=Math.write(a+”<br />”).b). document.random().write(”pow(”+a+”. ValoareNumerică2) Valoarea minimă. rezultat=Math. //afişează min(7.”+b+”)=”+rezultat).pow(ValoareNumerică1. Remarcă. Returnează un număr aleator cuprins între 0 şi 1.random()*25).76 min() Math.write(a+”<br />”). for(i=0.random() Numere aleatoare. document.i<3. document.write(”min(”+a+”. b=13.i<5.336. valoareNumerică2) Returnează ValoareNumerică1 la puterea ValoareNumerică2. În Tabelul 6 se prezintă câteva argumente speciale ale metodei şi rezultatele corespunzătoare. Exemplu: Figura 2.b).

57 (continuare) <script> a=25.9965. Exemplu: <script> a=0. . rezultat2=Math.sqrt(ValoareNumerică) Rădăcina pătrată. document.write(”sin(”+a+”)=”+rezultat).sqrt(a). Tabelul 8 Argument +Infinity 0 <0 NaN Rezultat +Infinity 0 NaN NaN Exemplu: Figura 2. rezultat=Math.9965)=0. rezultat1=Math. //afişează round(8. Remarcă.write(“round(“+y+”)=”+rezultat2).8395747765937453 </script> sqrt() Math. //afişează sqrt(25)=5 </script> tan() Math.88.sin(ValoareNumerică) Sinus. document. y=8.sin(a). rezultat3=Math.write(”sqrt(”+a+”)=”+rezultat).tan(ValoareNumerică) Tangentă Figura 2.77 } </script> round() Math. În Tabelul 7 se prezintă câteva argumente speciale ale metodei şi rezultatele corespunzătoare.336.9965. //afişează round(-5.round(ValoareNumerică) Returnează valoarea numerică rotunjită la întregul inferior.round(z). Remarcă.57 (continuare) Exemplu: <script> a=0.round(x).336)=8 </script> sin() Math.88)=-6 document. În Tabelul 8 se prezintă câteva argumente speciale ale metodei şi rezultatele corespunzătoare. rezultat=Math. //afişează sin(0. Tabelul 7 Argument +Infinity 0 NaN Rezultat +Infinity 0 NaN Exemplu: <script> x=-5.round(y).write(“round(“+x+”)=”+rezultat1). document.

tan(a).545483358938326 </script> Mai multe despre obiectul matematic Math Există două inconveniente majore ale limbajului JavaScript. Figura 2. Script-ul dumneavoastră este corect dar rezultatul este diferit faţă de cel scontat. 9 precizia. //afişează tan(0.78 rezultat=Math.9965)=1.58 se prezintă documentul (X)HTML complet în care s-a inserat script-ul aplicaţiei [3].write(”tan(”+a+”)=”+rezultat).59 Remarci: 9 Rutinele interne ale limbajului JavaScript nu sunt atât de precise pe cât ne aşteptam. Figura 2.59. document. Aplicaţie ‰ Scrieţi un program JavaScript care calculează şi afişează cât fac: 9 0.119*100. 9 0.58 Rezultatele execuţiei script-ului sunt afişate în figura 2. pe care le puteţi întâlni în efectuarea calculelor matematice care conţin numere zecimale: 9 timpul de execuţie (JavaScript este relativ lent!). În figura 2. .121*100.

Obiectul Number Obiectul Number facilitează gestiunea numerelor. toFixed(). Fişa obiectului Cum creăm obiectul? Proprietăţi Metode Figura 2. insistaţi folosiţi constructorul Number() care este prezentat în detaliu. în figura 2. Fişa obiectului Number este prezentată în figura 2.. NaN. toPrecision().60. înainte de a-l afişa (vezi Conversaţia 8). Constructor Sintaxă Number() Variabila=new Number(Num•r) . NEGATIVE_INFINITY. Dacă totuşi .. POSITIVE_INFINITY toExponential(). toString() - Constructorul Number() Nu este obligatoriu să creaţi explicit obiecte Number. Proprietăţile sale sunt constante care permit definirea valorilor de bază indiferent de navigator.60 Gestionarii de evenimente Number Constructorul Number() MAX_VALUE.79 Aşteptaţi-vă la astfel de surprize (neplăcute!) mai ales atunci când folosiţi numere care conţin multe zecimale! 9 Nici precizia funcţiilor trigonometrice nu este infailibilă! 9 Pentru a rezolva problema afişării rezultatelor cu multe zecimale scrieţi o funcţie personalizată care trunchiază numărul zecimal la un număr de zecimale dorit. MIN_VALUE.61.

//afişează 5e. </script> Proprietăţile obiectului Number Proprietăţile obiectului Number() sunt prezentate în detaliu în figura 2. ea returnează valoarea argumentului transmis ca parametru (Tabelul 9). Ea este returnată printr-o metodă precum parseFloat() sau parseInt() atunci când o valoare matematică nu poate fi returnată.write(Number.62 (continuare) Valoarea minus infinit. Tabelul 9 Argument null false true număr şir de caractere alfanumerice şir de caractere numerice Rezultat 0 0 1 număr NaN număr Exemplu: Figura 2.62 NEGATIVE_INFINITY Number.NaN Valoare numerică non validă. Proprietate Sintaxă MAX_VALUE Number.MIN_VALUE Cea mai mică valoare pozitivă a obiectelor Number.61 <script> x=”14. POSITIVE_INFINITY Number. //afişează 1.NEGATIVE_INFINITY Figura 2.79769931348623157e+308 </script> MIN_VALUE Number.MAX_VALUE Cea mai mare valoare pozitivă a obiectelor Number.253”.write(x+”-“+y). Exemplu: <script> document.-324 </script> NaN Number.62. Exemplu: <script> document. Figura 2. Identic cu –Infinity. În acest caz.MIN_VALUE).MAX_VALUE).POSITIVE_INFINITY .write(Number. y=Number(x).80 Variabila=new Number() Variabila=Num•r Constructorul Number() poate fi folosit în egală măsură ca funcţie. document.

63.81 Valoarea plus infinit.toFixed() Rotunjeşte un număr la întregul cel mai apropiat superior sau inferior.5. b=a.toString() Converteşte un număr într-un şir de caractere. b=a. document.toPrecision(Număr) Exemplu: Rotunjeşte un număr cu precizia indicată ca parametru. </script> 9 Obiectul Number este folosit de foarte puţine ori.596. Exemplu: <script> a=8.toPrecision(4).toExponential(NumărZecimal) Afişează un număr în format exponenţial cu rotunjire. Dacă acest parametru este egal cu 1. document.63 Remarci: <script> a=88. Exemplu: <script> a=4. Metoda este foarte puţin utilizată întrucât valorile numerice sunt imediat şi în mod automat convertite în caractere atunci când ele sunt introduse într-un şir de caractere.write(b). Metodă Sintaxă toExponential() Number. document.toString(). //afişează . //afişează 4.write(b). document.445845558555588574. 9 Crearea obiectelor Number este implicită în cele mai multe cazuri. Este util atunci când trebuie să accesaţi anumite constante (vezi proprietăţile obiectului Number). Exemplu: Figura 2.write(b). b=a.445845558555588574. //afişează 8 </script> toPrecision() Number. . 9 Puteţi crea obiecte Number atunci când trebuie să le adăugaţi proprietăţi. <script> a=4.446 </script> toString() Number.toFixed().toExponential(2).45e+0 </script> toFixed() Number.write(b). Metodele obiectului Number Metodele obiectului Number sunt prezentate în detaliu în figura 2. b=a. numărul este rotunjit la întreg. Identic cu +Infinity.

El poate fi creat cu operatorul new sau implicit. Obiectul Boolean nu poate conţine decât două valori: TRUE sau FALSE. a=true. </script> <script> //crearea şi iniţializarea simultană a unui obiect boolean a=new Boolean(true).64. Boolean() Figura 2.65. Fişa obiectului Boolean este prezentată în figura 2.65 Exemplu: <script> //crearea unui obiect boolean vid a=new Boolean(). prototype permite adăugarea de proprietăţi şi metode obiectului Boolean. Constructor Sintaxă Exemplu: Variabila=new Boolean() Variabila=new Boolean(Valoare) Variabila=true Variabila=false Creează un nou obiect Boolean. atribuind o valoare logică (true/false) unei variabile.82 Obiectul Boolean Obiectul Boolean este folosit pentru a transforma o valoare non-booleană într-o valoare booleană.64 Gestionarii de evenimente: Number Constructorul Boolean() prototype toString() - Remarcă. Constructorul Boolean() Constructorul Boolean() este prezentat în detaliu în figura 2. Fişa obiectului Cum creăm obiectul? Proprietăţi: Metode: Figura 2. </script> <script> Exemplu: Figura 2.65 (continuare) .

</script> Mai multe despre obiectul Boolean 9 Obiectele booleene care conţin una din următoarele valori: ƒ 0. creaţi documentul (X)HTML (utilizaţi Notepad sau Macromedia Dreamweaver) în care inseraţi script-ul. 9 Metoda 2 – plasaţi script-ul în antet-ul paginii. ”text oarecare”. undefined. 9 Metoda 4 – creaţi un gestionar de evenimente.83 //crearea implicită a unui obiect boolean a=true. Metoda 1 1. cu una din metodele prezentate mai jos: 9 Metoda 1 – inseraţi script-ul în corpul paginii. 58. false. –96 sunt evaluate TRUE.66). Creaţi documentul (X)HTML (figura 2. . NaN. EXEMPLUL 2 JAVASCRIPT (continuare) ‰ Codificarea în limbajul JavaScript (continuare din Conversaţia 2) Pentru a codifica în limbajul JavaScript algoritmul prezentat în conversaţia precedentă. 9 Macromedia Dreamweaver MX. 9 Metoda 3 – utilizaţi fişiere sursă externe. 9 Obiectele booleene care conţin una din următoarele valori: ƒ true. null. ”” sunt evaluate FALSE. Folosiţi unul din editoarele prezentate mai jos: 9 Notepad.

Figura 2.68). (vezi figura 2. Afişaţi rezultatele (figura 2. Inseraţi elementul <script> . Atribuiţi variabilei r valoarea 3 (figura 2.67).57. Codificaţi formula de calcul a ariei rezervorului sferic.70).67 3..69)..66 2. 5. Figura 2. Figura 2. 9 Metoda pow() a obiectului Math este prezentată în detaliu în figura 2.84 Figura 2. </script> în corpul documentului (figura 2.69 Remarci: 9 Proprietatea Math.PI (pentru constanta π ) şi metoda Math.68 4.57. . folosind proprietatea Math.pow() (pentru codificarea lui r2.PI a obiectului Math este prezentată în detaliu în figura 2.

85 Figura 2. .72). Afişaţi pagina Web într-un navigator (figura 2.71 este prezentat documentul (X)HTML complet.71 6. editat cu Macromedia Dreamweaver. această facilitate constituie esenţialul Web-ului dinamic şi interactiv. 9 În figura 2. În realitate. Figura 2.70 Remarci: 9 Posibilitatea de combinare a tag-urilor (X)HTML şi a instrucţiunilor JavaScript este una din caracteristicile cele mai importante ale unui navigator care suportă JavaScript.

. 4.73 3. aveţi certitudinea că funcţia este definită înainte de a fi utilizată.. .72 Metoda 2 1. Definiţi funcţia calcul() în care introduceţi formula de calcul precedată de cuvântul cheie return (vezi figura 2...73). Introduceţi elementul <script> . 2.86 Figura 2. </head> a documentului (vezi figura 2..74). cea mai bună locaţie pentru definirea unei funcţii este antet-ul (<head> . 9 De regulă. Creaţi documentul (X)HTML. Figura 2. Apelaţi funcţia calcul(3) din script-ul plasat în corpul documentului (vezi figura 2. Întrucât instrucţiunile din antet sunt executate primele.74 Remarci: 9 Revedeţi paragraful „Definiţi o funcţie” (Conversaţia 2).. Figura 2. </head>) documentului. </script> în secţiunea <head> . 9 Revedeţi paragraful „Returnarea unei valori” (Conversaţia 2).75).

77). calcul(5).76 5. Afişaţi pagina Web într-un navigator (vezi figura 2. Figura 2. 9 În figura 2. .87 Figura 2.75 Remarci: 9 Apelaţi funcţia calcul() pentru mai multe valori ale razei: calcul(4).76 este prezentat documentul XHTML complet editat cu Macromedia Dreamweaver.

js care conţine funcţia calcul()..js. . 9 Extensia .77 Metoda 3 1.js” în tag-ul de deschidere al elementului <script> (figura 2.js nu este obligatorie dar prezenţa ei identifică fişierele care conţin codul sursă JavaScript. Figura 2.79). Introduceţi atributul src=”calcul.80). Folosiţi gestionarul de evenimente onClick în tag-ul <input> al unui formular (vezi figura 2. figura 2. Figura 2. Metoda 4 Indicaţie.78 2.. .78.88 Figura 2. Creaţi fişierul calcul.79 Remarci: 9 Atributul src transmite interpretorului JavaScript că doriţi să includeţi codul JavaScript în fişierul calcul.

form1. .80 .aria. Vezi Conversaţia 8.PI.89 <form name=”form1”> Raza?<input type=”text”name=”raza” /><br /> Aria:<input type=”text”name=”raza” /><br /> <input type=”button” name=”buton1” value=”calculeaza aria rezervorului sferic” onClick=”document.value=document.form1.value= document.raza.raza. Remarcă.” /> </form> Figura 2..form1..value=4*Math.

Figura 2. *=. Care va fi rezultatul expresiei: 25+”de zile”? ƒ un mesaj de eroare. z=2. Cum creaţi un nou obiect Number şi un nou obiect Boolean? 6. Precizaţi rezultatele execuţiei următoarelor script-uri (figura 2.com/devhead/filters/0. y=4.00.netscape. document. x*=z++*++y.com/library/default.asp 9 http://developer.write(x). %=? 3.com/?once=true& . /=.microsoft. ƒ ”25 de zile”.earthweb. <script> y=75.com/tech/javascript 9 http://www. –=. Care sunt obiectele matematice pe care le cunoaşteţi? 4..81): <script> x=12. </script> Vizitaţi site-urile 9 http://msdn.90 JavaScript Testaţi-vă cunoştinţele 1. Cum clasificaţi operatorii JavaScript? Temă 2. x=(y=100)?29:42.com/webjs 9 http://javascript.asp?url=/library/en-us/script56/html/ js56jsorijscript. document.2133214.81 </script> 7. Care este semnificaţia operatorilor: +=.write(x).html 9 http://webdeveloper.zdnet. Cum se creează obiectul Math? 5. ƒ 26.about.

in.4 JAVASCRIPT Instrucţiunile continue şi break Instrucţiunea with Temă Instrucţiunile limbajului JavaScript JavaScript este un limbaj de nivel înalt. Ele pilotează script-ul.. Instrucţiunile limbajului JavaScript sunt uşor de înţeles şi aplicat. Cea mai mare parte a instrucţiunilor JavaScript sunt recunoscute de toate navigatoarele. while..3 JAVASCRIPT for . care permite programatorilor să creeze cu uşurinţă documente (pagini) Web interactive.. mai există şi divergenţe! .. Aplicaţii EXEMPLUL 3. Aplicaţii if. dar .Conversaţia 3 Instrucţiunile limbajului JavaScript ••••••••••••••••••••••••••••••••••••••••• •••• În această conversaţie: f f f f f f f f f f f f f ••••••••••••••••••••••••••••••••••••••••• •••• Tipuri de instrucţiuni JavaScript for. bazat pe obiecte. switch. Aplicaţii EXEMPLUL 3.else. permiţându-i să ia o decizie...1 JAVASCRIPT while. să creeze bucle (iteraţii) etc.. Aplicaţii EXEMPLUL 3.. Aplicaţii EXEMPLUL 3.2 JAVASCRIPT do . if.

..*/. do. testarea unei porţiuni de cod şi interceptarea eventualelor erori declararea unei variabile simplificarea efortului de programare (reducerea codului) Figura 3.in.while decizii documentarea script-urilor funcţii generarea unei erori.catch var with Iteraţii În limbajul JavaScript. continue if.. condiţionată anterior... if... return throw şi try. for (pentru) Utilizaţi instrucţiunea for pentru a crea cicluri (bucle) în programele dumneavoastră JavaScript.1). 9 do.while – structură de tip while... while. // function(). for.else. Tipuri de instrucţiuni iteraţii (cicluri) Instrucţiuni JavaScript for. 9 while (cât timp) – structură de iteraţie cu număr necunoscut de paşi... – structură de tip for care permite baleierea tuturor elementelor unei matrici sau ale unui obiect.92 Pentru a programa în limbajul JavaScript folosiţi următoarele tipuri de instrucţiuni (vezi figura 3. switch /*. Instrucţiunea for este folosită pentru a repeta o instrucţiune sau o secvenţă de instrucţiuni cât timp rezultatul evaluării unei condiţii este TRUE. condiţionată posterior... .1 instrucţiunile break..in – structură de iteraţie cu număr cunoscut de paşi. iteraţiile (repetiţiile) se codifică cu una din următoarele instrucţiuni: 9 for (pentru) 9 for.

93 Instrucţiunea for este prezentată în detaliu în figura 3. ExpresieFinală){ cod JavaScript ExpresieIniţială este expresia de iniţializare a variabilei de control a instrucţiunii. .){ i=confirm(” Doriti sa continuati?”). } </script> <script> for(var i=true.i<13.i+=2){ document.2. Bucla este executată cât timp CondiţieContinuare returnează TRUE.y<11. care reprezintă o expresie logică ce se evaluează la valoarea true sau false.write(”Iar innebunesc salcamii!”). CondiţieContinuare este cel de-al doilea parametru al instrucţiunii.y++){ document. } </script> <script> for(i=1.i++){ . for(.){ document. } document. ExpresieFinală actualizează valoarea variabilei de control a instrucţiunii.write(i+” <br />”).write(x*y+” “).i==true.2 for(i=1.CondiţieContinuare. } Exemplu: <script> Exemplu: Exemplu: Exemplu: Exemplu: Exemplu: Figura 3.i<13.i<13. } </script> <script> //două bucle imbricate (nested) for(x=1.//instructiunile ciclului } </script> Mai multe despre for 9 for conţine trei parametrii separaţi prin punct şi virgulă.write(i+” <br />”).i++){ document. Instrucţiune Sintaxă for for(ExpresieIniţială. } </script> <script> for(i=0.. } </script> <script> //ciclu infinit. unde.write(”<br />”).x++){ for(y=1.x<11.

9 Pentru a provoca o ieşire imediată din bucla for folosiţi instrucţiunea break. iar în final să afişăm cantitatea totală de benzină din toate rezervoarele.94 9 Cei trei parametrii ai instrucţiunii for sunt opţionali.3) cu pasul 1 (2... 10 m). 4. Se testează CondiţieContinuare. Dacă rezultatul evaluării CondiţieContinuare este true se execută instrucţiunile din corpul buclei.1 JAVASCRIPT ‰ Formularea problemei Vom relua problema din conversaţia precedentă (vezi EXEMPLUL 2 JAVASCRIPT) considerând de această dată mai multe rezervoare cilindrice echilaterale (generatoarea este egală cu diametrul) toate pline cu benzină. Se iniţializează variabila de control a instrucţiunii (ExpresieIniţială).. 3.) este obligatoriu. 9 Acoladele nu sunt indispensabile în iteraţiile care conţin o singură instrucţiune. 9 Veţi constata că utilizăm foarte des numele de variabilă i. 2. EXEMPLUL 3. dacă omiteţi unul dintre ei. . 9 Pentru a relua ciclul fără a mai fi executate instrucţiunile care urmează folosiţi instrucţiunea Continue. în caz contrar script-ul execută instrucţiunea imediat următoare după acolada de sfârşit (}). Este o tradiţie (vezi limbajul Forth) în programare. Se execută ExpresieFinală şi se testează CondiţieContinuare. Procedând în acest mod veţi putea adăuga cu uşurinţă noi instrucţiuni fără a provoca erori de sintaxă. 9 Principiul de funcţionare al instrucţiunii for este următorul: 1. . Dorim să calculăm şi să afişăm într-o pagină Web cantitatea de lichid (benzină) din cele nouă rezervoare cilindrice echilaterale. Raza acestora variază de la 2 la 10 m (vezi figura 3. 9 Instrucţiunile for pot fi imbricate (suprapuse) dar nu trebuie să se intersecteze. separatorul punct şi virgulă (. dar se recomandă să le folosiţi fără a ţine cont de numărul de instrucţiuni din corpul iteraţiei. ca identificator al variabilei de control. 3.

iar V este volumul.XX XXX. G este generatoarea cilindrului. . V = πR 2 * G (2) unde. Cum s-ar putea rezolva această problemă? Cei mai grăbiţi dintre dumneavoastră se şi gândesc deja la instrucţiunile JavaScript necesare scrierii script-ului.4 Variabile de stare Variabile de iesire . . V este volumul cilindrului echilateral. 10 MASA TOTALA Figura 3. dintr-o dată! Este adevărat. XXX.7 g/cm3) se va introduce în mod dinamic. A gândi în limbaj informatic (JavaScript) încă de la formularea problemei ni se pare o concepţie total greşită! Vă propunem metodologia de analiză. .5.XX XXX.XX . tabela de variabile şi specificaţiile de programare sunt ilustrate în figurile: 3. proiectare şi realizare a aplicaţiilor pe care v-am prezentat-o în Conversaţia precedentă. m reprezintă masa. Cam multe formule. extrem de banal vor exclama poate mulţi dintre dumneavoastră! Formulele de calcul pot constitui un impediment. ρ este densitatea. .3 Tabela de variabile Variabile de intrare Figura 3. Formatul datelor de ieşire MASA XXX. V = πR 2 * 2 R = 2πR 3 (3) unde. dar vi le vom aminti noi: ρ= m (1) V unde. Banal.4.XX TONE RAZA 2 3 . dar cu siguranţă că ele nu vă vor strica viaţa personală! Promitem! Remarcă. 3. ‰ Analiza problemei Formatul datelor de ieşire (fereastra în care se afişează pagina Web).95 Densitatea benzinei (0.3. 3.

Varianta 1 În figura 3. Stop ‰ Proiectarea script-ului Vom folosi pentru proiectarea script-ului cele două variante de pseudocod (vezi Conversaţia 2): 9 Varianta 1 – limbaj natural structurat. MASA). Iniţializează variabila s cu zero 3. Afişează masa totală de benzină (s) 11. Tipăreşte un rând de 30 de liniuţe. 1. Însumează m în s Figura 3. .5 7.1.7 g/cm3). 9 Varianta 2 – scriere formalizată (apropiată de limbajul JavaScript). Afişează raza (r) şi masa rezervorului (m) 8. afişează capul de tabel. Intrări. însumează şi afişează cantitatea de benzină din rezervoarele cilindrice echilaterale a căror rază variază de la 2 la 10 m cu pasul de 1 m. Iniţializează variabila de control a buclei (r) 9.6 se prezintă pseudocodul în limbajul natural structurat (Varianta 1).6 1. Script-ul calculează şi afişează cantitatea de benzină din mai multe rezervoare cilindrice echilaterale a căror rază variază de la 2 la 10 m.2.96 d: densitatea benzinei v: volumul cilindrului echilateral r: raza rezervorului s: masa totală de benzină m: masa de benzină Specificaţii de programare Descriere. Tipăreşte capul de tabel (RAZA. 1. calculează. Citeşte densitate benzină (d) 2.4. Iniţializează cu zero masa totală de benzină. Calculează masa (m) de benzină din fiecare rezervor 6. 1. Figura 3. Masa de benzină din fiecare rezervor şi masa totală de benzină. Incrementează şi testează variabila de control a buclei (r) 10. Densitatea benzinei (0. Calculează volumul rezervorului (V) 5. Tipăreşte cap tabel 4.3. Pseudocodul (Varianta 1) 1. Citeşte densitatea benzinei. Ieşiri. Citeşte densitatea benzinei. Lista de funcţiuni ale script-ului 1. cu pasul de 1 m.

1.6 3...6. vom folosi metoda analizei descendente (top-down)..4. 1. cât şi grupuri de instrucţiuni care se execută de atâtea ori cât timp sau până când este îndeplinită o condiţie.1. Tipăreşte un rând de 30 de liniuţe. 9 Prezentarea algoritmului în limbaj natural structurat are..6. . greoaie etc. rafinare (descompunere) a acestora (acţiunile 1. acţiunea 1 nu reprezintă o acţiune primitivă. repet• acţiunile: 1. Însumează masa de benzină în cantitatea totală de benzină. Stop. 2.3. Calculează masa de benzină. Afişează masa totală de benzină. Varianta 2 În figura 3. Tipăreşte un rând de 30 de liniuţe. Calculează volumul. 1. script-urile conţin secvenţe alcătuite din grupuri de instrucţiuni care se execută numai în anumite condiţii. după cum aţi putut constata şi singuri următoarele dezavantaje: exprimări lungi.r<=10. 9 Formatul general al blocului de secvenţă este ilustrat în figura 3.6.7 se prezintă pseudocodul în scriere formalizată (Varianta 2). .6.7 LINIUTZ• Remarci: 9 În general. 4.1. impunându-se în acest sens o 9 Pentru rafinarea acţiunii neprimitive 1..r++) 3 v=2∏r m=d*v s=s+m WRITE(r+’. Figura 3.’+m) ENDFOR END DO LINIUTZA WRITE(‘MASA TOTALA’+’ ‘+s) END BEGIN Afişează un rând de 30 liniuţe END PENTRU PENTRU PRELUCR•RI REZERVOARE LINIUTZA Figura 3. Pentru fiecare rezervor cilindric echilateral a cărui rază variază de la 2 la 10 m. 1.6).6. 1.5.8. cu pasul de 1 m.2. (continuare) Remarci: 9 Evident. DO LINIUTZA FOR(r=2. Afişează raza şi masa de benzină.97 1. Pseudocodul (Varianta 2) REZERVOARE INIT INIT PRELUCR•RI BEGIN BEGIN Citeşte densitatea benzinei (d) s=0 END BEGIN DO LINIUTZA WRITE(‘RAZA’+’---‘+’MASA’).

10 este prezentat documentul (X)HTML complet. ‰ Codificarea în limbajul JavaScript În figura 3. vf reprezintă valoarea finală a variabilei v.11 şi figura 3. .12 se prezintă rezultatele execuţiei script-ului. 9 Formatul general al structurii de iteraţie FOR este ilustrat în figura 3.v<=vf. Figura 3.v++) Corpul buclei ENDFOR v reprezintă variabila de control a buclei. FOR(v=vi. BEGIN Grup de instrucţiuni END BEGIN şi END joacă rolul de delimitatori.9. în general la incrementarea variabilei v.98 Eticheta Figura 3. ei reprezintă punctul unic de intrare. FOR şi ENDFOR sunt delimitatorii structurii.8 Eticheta unde. Eticheta Figura 3.10 În figura 3.9 Eticheta unde. iar v++ serveşte. respectiv punctul unic de ieşire din bloc şi poartă aceeaşi etichetă (cu majuscule sau minuscule). vi reprezintă valoarea iniţială a variabilei v.

.3) care aparţin obiectului Math (vezi obiectul matematic Math). for(i=1.11 Figura 3.pow(r.</body>) al documentului.13).13 } 9 Pentru calculul volumului rezervorului cilindric echilateral am utilizat proprietatea Math. 9 Funcţia liniutza() mai poate fi scrisă şi sub forma (vezi figura 3.99 Figura 3.i++){ document. principal function liniutza(){ document. . } Figura 3.i<=30.write(’-’).12 Comentarii 9 Funcţia liniutza() este apelată din trei puncte ale corpului (<body>..write(’<br />’).PI şi metoda Math.

5) (1.0).2). În figura 3. (5. Indicaţie.0).15 ‰ Scrieţi două bucle imbricate care generează şi afişează tabla înmulţirii.3). (4. generate de două bucle for imbricate: (0. (1. (2.2).4).3). În figura 3. (3. (5. (4. Figura 3. (1.1). (2. (3. (3. (2.1). (5. (5. Indicaţie.5) (2.1).15 este prezentat script-ul aplicaţiei.0). Inseraţi acest script într-un document (X)HTML. Inseraţi acest script într-un document (X)HTML. (0. (0. (2.4).2). (3.3).14 este prezentat script-ul aplicaţiei. (3.0).1).0).16 este prezentat script-ul aplicaţiei. (5. (0.1).3).5) (3. Figura 3.4). . (1. (4. (2.4). În figura 3. (1.4). (1.5) Indicaţie. (0.0).14 ‰ Scrieţi un script care generează 25 de seturi de coordonate.5) (5.3).5) (4.2).4). (4.2). Inseraţi acest script într-un document (X)HTML. (0.1).100 Aplicaţii ‰ Scrieţi un script care calculează şi afişează suma primelor 100 numere întregi.3).2). (4.

17 este prezentat script-ul aplicaţiei.17 ‰ Scrieţi un script care editează următorul triunghi al numerelor (figura 3. Figura 3.16 ‰ Scrieţi un script care calculează (cu o structură iterativă) şi afişează: 1!+2!+ … +7! Indicaţie. În figura 3. Deosebirea dintre while şi for constă în faptul că instrucţiunea while nu include în declaraţia sa funcţia de iniţializare a variabilei de control (vezi . 1 1 1 1 1 1 1 1 1 1 Figura 3.101 Figura 3. condiţionată anterior. cunoscută şi sub denumirea de structură de iteraţie cu număr necunoscut de paşi.18). Inseraţi acest script într-un document (X)HTML.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 (cât timp) Una din instrucţiunile de iteraţie (repetiţie) cele mai simple este while.

x++. while(i<=7){ document. while(x<10){ document. Exemplu: Exemplu: Exemplu: Exemplu: Figura 3. i*=2.write(i).102 ExpresieIniţială) şi funcţia de actualizare a variabilei de control (vezi ExpresieFinală). while(i<=100){ document. } document.writeln(i). ++i. Instrucţiunea while este prezentată în detaliu în figura 3. while(k<11){ document.”). } document. k++. } </script> <script> var k=20.write(k+”<br />”). </script> <script> x=1. } </script> <script> i=10. --i. </script> <script> i=1. } </script> . Instrucţiune Sintaxă while while (condiţie){ cod JavaScript } Exemplu: Instrucţiunile (din corpul buclei (cod JavaScript ) sunt executate cât timp rezultatul evaluării condiţie este TRUE.19.write(x+” <br />”). while(i>0){ document.write(”La revedere!”).writeln(”Ati afisat 7 numere.writeln(i).19 <script> i=1.

1 JAVASCRIPT.’+m) r++ ENDWHILE END END CATTIMP PRELUCR•RI Figura 3. Pseudocodul REZERVOARE PRELUCR•RI CATTIMP BEGIN . 9 În realitate. în timp ce while le execută într-o buclă cât timp rezultatul evaluării condiţie este TRUE. care ”integrează” direct funcţiile de iniţializare şi de incrementare a variabilei de control a buclei.2 JAVASCRIPT Problema din EXEMPLUL 3.103 Mai multe despre while 9 while este foarte asemănător cu if.. if execută o singură dată instrucţiunile din corpul buclei (cod JavaScript)..20). 9 Instrucţiunea continue provoacă reluarea buclei fără a mai fi executate instrucţiunile care urmează... BEGIN . r=2 WHILE(r<=10) 3 v=2∏r m=d*v s=s+m WRITE(r+’. EXEMPLUL 3.20 REZERVOARE .. 9 Instrucţiunea break provoacă o ieşire imediată din buclă. Singurele deosebiri apar în următoarele două faze: 9 proiectarea script-ului – în pseudocod s-a înlocuit for cu while (vezi figura 3.2 JAVASCRIPT este aceeaşi cu problema din EXEMPLUL 3. bucla for nu este decât un caz particular al buclei while.. 9 Buclele while au o arie de utilizare mai largă decât buclele for. dar decizia în a le alege vă aparţine numai dumneavoastră! 9 Numărul minim de execuţii a cod JavaScript este zero.

21). Figura 3. Instrucţiunea do…while este prezentată în detaliu în figura 3. Figura 3.21 Rezultatele obţinute sunt evident. Instrucţiune Sintaxă do…while do{ cod JavaScript } while (condiţie) Exemplu: do. </script> . ++i.while execută cod JavaScript cel puţin o dată. } while(i<11).. do…while execută cel puţin o dată instrucţiunea (instrucţiunile) din corpul buclei.104 9 codificarea în limbajul JavaScript – în script-ul din corpul principal al documentului (X)HTML s-a înlocuit for cu while (figura 3. do{ document.22 <script> i=0. apoi este reexecutat cât timp rezultatul evaluării condiţie este TRUE.. do while Dacă while execută una sau mai multe instrucţiuni (corpul buclei) de cel puţin zero (0) ori. apoi repetă execuţia cât timp rezultatul evaluării condiţiei (vezi condiţie din do…while) este TRUE. identice.22.writeln(i+”<br />”).

i=1.while 9 do. alert(‘Suma primelor 100 de numere naturale este’+s). i++. } while(i<11). .while funcţionează exact ca instrucţiunea while.... </script> Mai multe despre do. Singurele deosebiri apar în fazele de: 9 Proiectarea script-ului – în pseudocod s-a înlocuit for cu do. EXEMPLUL 3. 9 Instrucţiunea break provoacă o ieşire forţată din buclă..22 (continuare) <script> var i=20.while (vezi figura 3.. do{ document.3 JAVASCRIPT este aceeaşi cu problema din EXEMPLUL 3. } while(i<=100). 9 Instrucţiunea continue provoacă reluarea buclei fără a mai fi executate instrucţiunile care urmează.105 Exemplu: Exemplu: Figura 3. În felul acesta se garantează că script-ul dintre acolade va fi executat cel puţin o dată.. do{ s+=i. i++. cu deosebirea că nu evaluează condiţie decât după prima iteraţie. </script> <script> s=20.3 JAVASCRIPT Problema din EXEMPLUL 3.1 JAVASCRIPT.23).write(i+” <br />”).

.. r=2 DO Figura 3. Instrucţiune Sintaxă for…in for (Proprietate in Obiect) { cod JavaScript } .. Această instrucţiune poate fi utilă.while (figura 3. Instrucţiunea for…in este prezentată în detaliu în figura 3.’+m) r++ WHILE(r<=10) END 3 9 Codificarea în limbajul JavaScript – în script-ul din corpul principal al documentului (X)HTML s-a înlocuit for cu do.. Figura 3.25....24 for ..23 PRELDOWHILE PRELUCR•RI v=2∏r m=d*v s=s+m WRITE(r+’. atunci când doriţi să afişaţi numele tuturor proprietăţilor unui obiect. de exemplu. in Instrucţiunea for…in este o structură de iteraţie care execută aceeaşi instrucţiune sau aceeaşi secvenţă de instrucţiuni pentru toate proprietăţile unui obiect.24).106 Pseudocodul PRELUCR•RI PRELDOWHILE BEGIN .

in cu orice obiect JavaScript.culoare=”cepia”.in este bine să aveţi cunoştinţe elementare despre obiectele JavaScript. } </script> <script> //afişează toate proprietăţile unui obiect creat obiect=new object. Variabila de control a buclei (Proprietate) reprezintă o proprietate a obiectului. 9 for. Proprietate este un element literal generat de Exemplu: Exemplu: Figura 3. for(x in obiect){ document. ca de exemplu o variabilă..in se termină în mod automat..25 <script> //afişează toate proprietăţile obiectului window şi valorile acestuia for (x in window){ document. indiferent dacă are sau nu proprietăţi. 9 Puteţi folosi for.nume=”maxim”. atunci când a fost identificată ultima proprietate a obiectului. unde.in 9 Pentru a folosi cu uşurinţă instrucţiunea for. obiect.. 9 for. obiect...in funcţionează şi cu alte obiecte particularizate.write(x+”:”+ obiect[x]+”<br />”). Bucla listează proprietăţile unui obiect.. obiect. } </script> Mai multe despre for... Decizii .writeln(x+”:”+window[x]+”<br />”)..107 JavaScript..zi=”luni”.

Principala instrucţiune de decizie (selecţie) a limbajului JavaScript este if. } </script> <script> . if(numitor>0){ a=numarator/numitor. În caz contrar. Instrucţiunea if este prezentată în detaliu în figura 3. if (dacă) Una din principalele facilităţi ale unui limbaj de programare este aceea de a putea testa şi compara valorile. Putem crea astfel script-uri care vor reacţiona în mod diferit în funcţie de valorile variabilelor sau de informaţiile furnizate de către utilizator.b=2. condiţie poate fi orice expresie logică Exemplu: Execută secvenţa de instrucţiuni dintre acolade (cod JavaScript) dacă rezultatul evaluării condiţie este TRUE. Instrucţiune Sintaxă if if (condiţie){ cod JavaScript } unde. 9 if … else (dacă … în caz contrar) – structură de decizie cu două alternative.write(a).26 Exemplu: <script> a=13. if(a>b){ alert(”a este mai mare ca b”).26. document. } </script> <script> numarator=4. 9 switch – structură de decizie cu mai multe alternative. deciziile (selecţiile) se codifică cu una din următoarele instrucţiuni: 9 if (dacă) – structură de decizie cu o singură alternativă.108 În limbajul JavaScript. Exemplu: Figura 3. JavaScript ignoră cod şi continuă. numitor=0.

write(”Lipsesc valori!”).write(”Ce parere aveti de acest test?”). } } ← echivalent cu → alert(b). . 9 Condiţie (expresie condiţională) conţine în general două valori (constante. if((nume==””)||(prenume==””)){ document. alert(b). Cele două valori sunt separate printr-un operator relaţional.write(”Lipsesc doua valori”). 9 Nu de puţine ori suntem puşi în situaţia să comparăm o variabilă cu mai multe valori sau cu mai multe variabile o dată. variabile etc. 9 Dacă partea a doua a unei instrucţiuni if poate conţine orice instrucţiune JavaScript. prenume=”Ion”. b=”ADEVARAT”. </script> </script> Exemplu: Exemplu: Exemplu: Exemplu: Figura 3. Pentru astfel de cazuri folosiţi operatorii logici. } </script> <script> <script> if(a){ if(a==true){ b=”ADEVARAT”. în limba engleză) care testează şi compară diferite valori. expresii. } document.109 var sex=”f”. </script> <script> nume=”Popescu”. if(sex==”f”){ document. 9 Nu confundaţi operatorul de egalitate (== sau ===) cu operatorul de afectare (=).) care se compară una cu cealaltă. } </script> <script> if((nume==””)&&(prenume==””)){ document.26 (continuare) Mai multe despre if 9 if este o structură de decizie (decision structure. prima parte (condiţie) trebuie să respecte o sintaxă precisă. chiar dacă ele se citesc „egal”.write(”Buna ziua.write(”La revedere!”). } </script> <script> if((a<100)&&(a>250)){ document. doamna!”).

cod2 JavaScript: instrucţiuni executate când rezultatul evaluării condiţie este FALSE. cod1 JavaScript: instrucţiuni executate când rezultatul evaluării condiţie este TRUE. } else{ document.110 if .. El conţine instrucţiuni care se execută dacă rezultatul evaluării condiţie este FALSE. instrucţiunile blocului if nu sunt executate.. Exemplu: Figura 3.27. Instrucţiunea if … else este prezentată în detaliu în figura 3. </script> .27 <script> var sex=”f”... Dacă rezultatul evaluării condiţie este TRUE instrucţiunile blocului else nu sunt executate. Execută prima secvenţă de instrucţiuni (cod1 JavaScript) dintre acolade ({}) dacă rezultatul evaluării condiţie este TRUE. } document. în limba română).write(”<br />La revedere!”). Script-ul transmite controlul execuţiei instrucţiunii imediat următoare după bloc.write(”Buna ziua.write(”Buna ziua. Instrucţiune Sintaxă if … else if (condiţie) { cod1 JavaScript } else { cod2 JavaScript } unde. Script-ul transmite controlul execuţiei instrucţiunii imediat următoare după blocul else. completaţi instrucţiunea if cu cuvântul cheie else (în caz contrar. simpla folosire a instrucţiunii if nu este suficientă. Dacă blocul else nu exisă şi dacă rezultatul evaluării condiţie este FALSE. else (dacă . Blocul (cod2 JavaScript) else nu este obligatoriu. if(sex==”f”){ document. else precizează interpretorului ce anume trebuie să facă atunci când rezultatul evaluării condiţie este false. domnule!”). doamna!”). În acest caz. în caz contrar) Uneori.

var oras=”Vaslui”. } else{ if(oras==”Ploiesti”){ document. </script> <script> var oras=”Ploiesti”. if(tara==””Romania”){ if(oras==”Bucuresti”){ document.write(”Locuinta dumneavoastră este la Sinaia”).} else{ document.write(”<br />”).write(”La revedere!”). if((sex==”f”)||(sex==”m”)){ document.} else if(oras==”Ploiesti”){ document.27 (continuare) <script> var sex=”f”. in provincie”).write(”Locuinta dumneavoastră este in capitala Frantei”).write(”Sex:”+sex). document. } else{ alert(”Sex nedefinit!”). } document.write(”Locuinta ta de vara este in Romania. } </script> . } else{ if (oras==”Sinaia”){ document. if(oras==”Paris”){ document.write(”Locuinta dumneavoastră este la Ploiesti”).} else if (oras==”Sinaia”){ document. } } } </script> <script> var oras=”Caracal”.write(”Locuinta dumneavoastră este la Ploiesti”).write(”Locuinta ta de vara nu este in Romania”).write(”Locuinta dumneavoastră este la Sinaia”).} } else{ document. if(oras==”Paris”){ document.111 Exemplu: Exemplu: Exemplu: Exemplu: Figura 3.} </script> <script> var tara=”Romania”.write(”Locuinta dumneavoastră este in capitala Frantei”).write(”Locuinta ta de vara este in capitala Romaniei”).

. <script> x=(a==1)?1:0.”)).28 <script> document. else 9 Instrucţiunile if . } else { x=0.112 Mai multe despre if . case Valoare2 cod2 JavaScript break.. } </script> Figura 3. </script> Å echivalent cu Æ <script> if(a==1){ x=1. default: cod3 JavaScript } Switch controlează conţinutul unei variabile cu una sau mai multe instrucţiuni case. 9 Nu uitaţi de expresiile condiţionale prescurtate (vezi figura 3..28.30. 9 Ca şi instrucţiunea if. Figura 3. figura 3. Instrucţiunea default este facultativă.. Figura 3. else pot fi imbricate. Instrucţiune Sintaxă switch switch (variabila) case Valoare1 cod1 JavaScript break.29 </script> switch Instrucţiunea switch este prezentată în detaliu în figura 3.30 Exemplu: case-urile precedente nu conţin valoarea variabilei testate. <script> var n=100. else poate fi urmat de una sau mai multe instrucţiuni delimitate de acolade ({}). Ea conţine instrucţiunile care urmează a fi executate în situaţia în care nici unul din Figura 3. Instrucţiunea break este indispensabilă.29).write(i+((i==1)?”cuvant gasit”:”cuvinte gasite.30 .

Figura 3. break. case 30: document. <script> var oras=”Ploiesti”. if (oras==”Roman”) document. case ”Roma”: document. break.write(”30”).write(”20”).32) sunt echivalente.write(”Locuiti la Paris”). default: document.32 </script> . } document. break. </script> Aplicaţie ‰ Precizaţi dacă rezultatele execuţiei celor două script-uri (figura 3. } document.write(”Locuiti la Roman”). if (oras==”Peris”) document. case 20: document.write(”Locuiti la Peris”).write(”Locuiti la Ploiesti”).write(”Locuiti la Ploiesti”).write(”La revedere!”). document.write(”Locuiti la Roma”). if (oras==”Paris”) document.write(”Locuiti la Paris”).write(”Locuiti la Roman”). break. case ”Peris”: document. if (oras==”Ploiesti”) document.write(”Locuiti la Roma”).write(”La revedere!”). break.31 şi figura 3. default: document. if (oras==”Roma”) document. break.write(”<br />La revedere!”).write(”Alta valoare”). Comentaţi rezultatele. switch(oras){ case ”Ploiesti”: document.113 switch(n){ case 10: document. document. break. case ”Roman”: document. case ”Paris”: document.31 </script> <script> var oras=”Ploiesti”.write(”10”).write(”Sunteti un itinerant!”). break. Figura 3.write(”Locuiti la Peris”).write(”Sunteti un itinerant!”).

35 r: raza rezervorului Variabile de stare m: cantitatea de benzină v: volumul rezervorului Variabile de iesire m: cantitatea de benzină .33). Vom considera de această dată un singur rezervor cilindric echilateral (generatoarea este egală cu diametrul) plin cu benzină (vezi figura 3.35. 3. Densitatea benzinei şi raza se vor introduce în mod dinamic. ‰ Analiza problemei Formatul datelor de ieşire (fereastra în care se afişează pagina Web).34 RAZA 3 MASA RAZA NEGATIVA MASA xxxxx.114 EXEMPLUL 3.xxxxx Tabela de variabile Variabile de intrare d: densitatea benzinei Figura 3.4 JAVASCRIPT ‰ Formularea problemei Vom relua problema din EXEMPLUL 3. a) RAZA -2 b) Figura 3. Raza rezervorului trebuie să aibă o valoare pozitivă.1 JAVASCRIPT simplificând-o după cum urmează.34. R G G=2R V=2∏R3 Figura 3.36.33 Dorim să calculăm şi să afişăm într-o pagină Web cantitatea de lichid (benzină) din rezervor. 3. tabela de variabile şi specificaţiile de programare sunt ilustrate în figurile: 3.

Afişează capul de tabel 4. Calculează masa (m) de benzină din rezervor Afişează raza (r) şi masa rezervorului În caz de eroare.. Calculează volumul rezervorului (v). Citeşte raza rezervorului (r) 3.. ELSE 3 v=2∏r m=d*v WRITE(r+’. Citeşte densitate benzină (d) 2. ELSE este ilustrat în figura 3. raza rezervorului. Intrări.36 9.115 Specificaţii de programare Descriere. Testează valoarea (introdusă dinamic) razei 5. Pseudocodul structurii de selecţie IF . Ieşiri.37 se prezintă pseudocodul în scriere formalizată. Figura 3.. Densitatea benzinei. 8.. .38. Pseudocodul REZERVOR INIT BEGIN BEGIN //Citeşte densitatea benzinei (d) READ(d) //Citeşte raza rezervorului (r) READ(r) INIT PRELUCR•RI END BEGIN DO LINIUTZA WRITE(‘RAZA’+’---‘+’MASA’). afişează raza (r) şi mesajul: ”RAZA NEGATIVĂ” Afişează un rând de liniuţe 10.’+m) ENDIF END DO LINIUTZA END BEGIN Afişează un rând de 30 de liniuţe END DECIZIE DECIZIE DECIZIE PRELUCR•RI REZERVOR LINIUTZA Figura 3. DO LINIUTZA IF(r<0) WRITE(r+’ ‘+’Raza negativa’). Masa de benzină din rezervor. Lista de funcţiuni ale script-ului 1. 6. Stop ‰ Proiectarea script-ului În figura 3. 7.37 LINIUTZ• Remarcă. Script-ul calculează şi afişează cantitatea de benzină dintr-un rezervor cilindric echilateral de rază pozitivă.

38 Eticheta IF (condiţie) Grup de instrucţiuni ELSE Grup de instrucţiuni ENDIF unde. ‰ Codificarea în limbajul JavaScript În figura 3.39 este prezentat documentul (X)HTML complet. Figura 3.41 se prezintă rezultatele execuţiei script-ului. IF.116 Eticheta Eticheta Figura 3.40 şi figura 3. ELSE şi ENDIF sunt delimitatori ce poartă aceeaşi etichetă. Figura 3.40 .39 În figura 3.

do .write(i). continue Eticheta Instrucţiunea este utilizată în buclele: while. De cele mai multe ori. while(i<21){ document.117 Figura 3. Exemplu: Figura 3. continue poate fi de asemenea utilizată cu o etichetă. Instrucţiune Sintaxă continue. instrucţiunea este inclusă într-o instrucţiune if. } document.42.write(”<br />”). i++. } </script> . continue for..41 Instrucţiunile continue şi break continue Atunci când interpretorul JavaScript întâlneşte instrucţiunea continue el revine la începutul buclei şi ignoră celelalte instrucţiuni din interiorul buclei. Instrucţiunea continue este prezentată în detaliu în figura 3.. if(i<10){ continue. while.42 <script> var i=1.

write(”SFARSIT”).write(”i=”+i+”<br />”).write(”SFARSIT”). } </script> . j=5. for şi din blocul switch.118 Exemplu: Exemplu: Figura 3. for(j=0. De cele mai multe ori.i++){ document. document. if(r>50) break.write(”j=”+j+”<br />”). } document. </script> <script> iesire:.j++){ if(j==3){ continue iesire.j++){ if(j==3){ continue. while(i<20){ rezultat=i*j. Instrucţiunea break este prezentată în detaliu în figura 3. break Eticheta do … Provoacă o ieşire imediată din cele trei bucle: while. Exemplu: Figura 3. for(i=0. for(j=0.j<5.43 <script> var i=1.i++){ document. i++.i<3. break poate fi de asemenea utilizat cu o etichetă (un nume urmat de două puncte). for(i=0. Dacă rezultatul evaluării condiţiei este TRUE atunci se iese din buclă.i<3. while. } document.43. instrucţiunea break este inclusă într-o instrucţiune if.42 (continuare) <script> iesire:. Instrucţiune Sintaxă break break. } } document.write(rezultat+”<br />”).write(”j=”+j+”<br />”). } } document. </script> break Instrucţiunea break provoacă o ieşire imediată din blocul de instrucţiuni curent.j<5.write(”i=”+i+”<br />”).

j++){ if(j==3){ break. </script> <script> iesire:. } document.write(”SFARSIT”).j++){ if(j==3){ break iesire. Pentru fiecare din instrucţiunile blocului.write(”i=”+i+” <br />”). </script> Instrucţiunea with with simplifică scrierea programelor JavaScript sau reduce pe cât posibil cantitatea de cod JavaScript.i<3.i++){ document. for(i=0. Instrucţiune Sintaxă with with (obiect) { cod JavaScript } Modifică temporar contextul punând în evidenţă un obiect la care se fac referiri într-un bloc de instrucţiuni.i++){ document. for(j=0.j<5. with permite specificarea unui obiect şi este urmat de un bloc de instrucţiuni plasat între acolade.write(”i=”+i+” <br />”).write(”j=”+j+”<br />”). Instrucţiunea with este prezentată în detaliu în figura 3. for(i=0.j<5. proprietăţile menţionate fără ca obiectul corespunzător să fie indicat se referă la obiectul specificat prin with. .119 Exemplu: Exemplu: Figura 3. } } document.i<3.43 (continuare) <script> iesire:.44.write(”SFARSIT”). } } } document. for(j=0.

document. write(”Două fete vesele. alături saltă”+”<br />”). dar când trebuie să accesăm acelaşi obiect în cadrul unei proceduri sau când utilizăm un obiect predefinit precum Math.45 .45) interesul utilizării instrucţiunii with nu este evident.write(”Două fete vesele.write(”Pe trotuar.”+”<br />”). write(”Zău că-mi vine să las baltă.write(”Zău că-mi vine să las baltă. with(nume){ window.write() de patru ori document.alert(”Lungimea numelui este:” + length).”+”<br />”).} Figura 3. //cuvântul cheie with elimină referinţele multiple la obiectul document with(document){ write(”Pe trotuar.44 <script> //Următorul cod repetă metoda document.120 Exemplu: Figura 3.”+”<br />”). } </script> Pentru un cod scurt (vezi şi figura 3. with vă ajută să câştigaţi foarte mult timp.”+”<br />”). write(”Toate interesele”+”<br />”). document. toUpperCase(). document. alături saltă”+”<br />”).write(”Toate interesele”+”<br />”).

8 (Conversaţia 11).6 (Conversaţia 11).write(“0”). Ce tipuri de instrucţiuni JavaScript cunoaşteţi? 2. while asigură: ƒ minimum o iteraţie. ƒ Figura 11.121 JavaScript Testaţi-vă cunoştinţele Temă 1. 3.46)..9 (Conversaţia 11). Ce tip de buclă JavaScript testează condiţia la început: ƒ for. while(stare){ rez+=++I. ƒ Figura 11. ƒ Figura 11. Instrucţiunea do . ƒ maximum o iteraţie. <script> i=0.writeln(“=”+rez). . document.10 (Conversaţia 11). ƒ do . Care este rolul instrucţiunilor break şi continue? 7. if(i==10){ rez=false. Care este rolul instrucţiunii switch? 6. Scrieţi un script care calculează şi afişează valoarea polinomului: 5X2+4X+10 pentru x=2.7 (Conversaţia 11). 8. rez=0. ƒ zero iteraţii.. Identificaţi erorile de sintaxă din următoarele script-uri: ƒ Figura 11.. while. stare=true. ƒ Figura 11.46 </script> 5. } } document. 4. ƒ while. Comentaţi următorul script (figura 3. Figura 3..

bdml.geocities.webcoder.13 (Conversaţia 11).122 ƒ Figura 11.com 9 http://JavaScript.com/jeffery_p_sanders/ 9 http://JavaScript.com/forms/checkbox_changer. Vizitaţi site-urile 9 www.internet.natural.net/listes 9 www.com/miscellaneous/ 9 http://www.html .com/JavaScript 9 http://www. ƒ Figura 11.internet.12 (Conversaţia 11).

Prezentare generală Obiectele interne Obiectul String. Obiectele JavaScript sunt de trei tipuri: 9 Obiecte interne (integrate) – fac parte din limbajul JavaScript.Conversaţia 4 Obiectele interne String. – obiecte create de utilizator. Aplicaţii EXEMPLUL 4 JAVASCRIPT Temă Obiectele limbajului JavaScript. şir de caractere. 9 Obiectele navigatorului 9 Obiecte personalizate – nu fac parte din limbajul JavaScript. În egală măsură. Prezentare generală După cum aţi putut constata. Array ••••••••••••••••••••••••••••••••••••••••• •••• În această conversaţie: f f f f f f ••••••••••••••••••••••••••••••••••••••••• •••• Obiectele limbajului JavaScript. Aplicaţii Obiectul Array. booleene etc. dar sunt recunoscute de navigatoare. JavaScript permite şi gestionarea obiectelor. caracter. variabilele din programele pe care le-aţi realizat până acum servesc la stocarea valorilor: numerice. .

Number şi Boolean (vezi Conversaţia 2). Obiectul String JavaScript stochează şirurile de caractere ca obiecte String. în timp ce numele unei funcţii JavaScript standard nu este o variabilă.1. dumneavoastră aţi făcut deja cunoştinţă: Math care este un obiect predefinit JavaScript şi cuprinde numeroase constante şi funcţii. Fişa obiectului String este prezentată în figura 4. Obiect predefinit JavaScript care permite manipularea orelor şi a datelor calendaristice. Obiect intern Descriere Reprezintă matrice Conţine valorile: TRUE (adevărat) sau FALSE (fals). Obiect predefinit JavaScript dedicat expresiilor regulate.1 Obiect predefinit JavaScript care conţine mai multe funcţii şi constante matematice.124 Obiectele interne Cu trei din obiectele interne ale limbajului JavaScript. Math Number Object RegExp String Figura 4. ci doar numele unei funcţii. Arguments Array Boolean Date Function new Function(). Numele de obiect al unui obiect Function este considerat ca o variabilă reprezentând valoarea curentă a funcţiei create cu (sub forma unei matrici) valoarea argumentelor transmise unei funcţii. Obiect JavaScript din care derivă toate celelalte obiecte. . Lista completă a obiectelor interne (integrate) ale limbajului JavaScript este prezentată (în ordine alfabetică) în figura 4. Facilitează gestiunea numerelor.2. Furnizează suportul pentru manipularea şi prelucrarea şirurilor de caractere.

Crearea şirurilor de caractere este de cele mai multe ori implicită. Exemplu: Figura 4. match(). Dacă nici o valoare nu este transmisă funcţiei. bold().3 <script> //creare implicită a şirurilor de caractere anotimp=”toamna”. big(). charCodeAt(). b=FALSE. charAt(). small(). italics(). replace().write(String(a)+”<br />”). substring().2 Gestionarii de evenimente: toLowerCase(). Constructorul String() poate fi de asemenea utilizat ca funcţie.write(String(b)+”<br />”). sup(). toString(). fontcolor(). blink(). Constructorul String() este prezentat în detaliu în figura 4. toUpperCase() - Constructorul String() Constructorul String() creează un nou şir de caractere. search().125 Fişa obiectului String Cum se creează obiectul? Proprietăţi: Metode: Constructorul String() length anchor(). substr(). document.3. Figura 4. celebrul=”702”. Constructor Sintaxă String() variabila=new String() variabila=new String(şir) variabila=şir Se poate crea un şir de caractere vid sau transmiţând ca argument constructorului şirul de caractere care va conţine noul obiect String. atunci acesta returnează un şir vid. //String() utilizat ca funcţie a=7. sub(). split(). concat(). fontsize(). fixed(). document. lastindexOf(). slice(). indexOf(). strike(). </script> . În acest caz el converteşte valoarea în şir de caractere. fromCharCode(). link().

write(nou_demo_sir). charCodeAt(). search().. lungime=demo_sir. fontcolor(). fontsize(). Proprietate Sintaxă length şir. link(). toString().</big>. substring().4 <script> demo_sir=”Învăţaţi să priviţi dincolo de aparenţe!”. split(). sup(). nou_demo_sir=demo_sir.4. blink(). document. Figura 4. concat(). Metode pentru formatarea şirurilor de caractere Metodele obiectului String pentru formatarea şirurilor de caractere sunt prezentate în detaliu în figura 4. charAt().5. toUpperCase(). sub(). //afişează 40 </script> Remarcă. small()..126 Proprietăţile obiectului String Proprietăţile obiectului String sunt prezentate în detaliu în figura 4.length Exemplu: Conţine lungimea şirului de caractere. Metodele obiectului String Metodele obiectului String pot fi clasificate după cum urmează: 9 Metode pentru formatarea şirurilor de caractere – big().big(). lastIndexOf(). match(). bold().5 Încadrează un şir de caractere cu tag-urile <big>. strike(). fromCharCode(). fixed().length. replace(). slice(). Metode Sintaxă big() şir. substr(). Exemplu: <script> demo_sir=”Învăţaţi să priviţi dincolo de aparenţe!”. italics(). </script> . 9 Metode pentru manipularea şirurilor de caractere – anchor().big() Figura 4. toLowerCase(). indexOf(). Un obiect String (scrieţi S cu majusculă) este diferit de datele (şir de caractere) pe care le conţine.

. </script> italics() şir. </script> .fontsize(4). nou_demo_sir=demo_sir.. document. Exemplu: <script> demo_sir= ”Învăţaţi să priviţi dincolo de aparenţe!”. </script> bold() şir. </script> fontsize() şir.blink().bold(). nou_demo_sir=demo_sir. document.small(). document. nou_demo_sir=demo_sir...5 <script> demo_sir= ”Învăţaţi să priviţi dincolo de aparenţe!”. document.blink() Exemplu: Încadrează un şir de caractere cu tag-urile <blink>.</blink>.write(nou_demo_sir).. Exemplu: <script> demo_sir= ”Învăţaţi să priviţi dincolo de aparenţe!”. Exemplu: <script> demo_sir= ”Învăţaţi să priviţi dincolo de aparenţe!”.write(nou_demo_sir).small(şir) Încadrează un şir de caractere cu tag-urile <small>.bold() Încadrează un şir de caractere cu tag-urile <bold>.write(nou_demo_sir). document.. </script> fontcolor() şir.. Exemplu: <script> demo_sir= ”Învăţaţi să priviţi dincolo de aparenţe!”.127 blink() •ir.italics().fontcolor(”#FF0000”). Exemplu: (continuare) Figura 4. <script> demo_sir=”Învăţaţi să priviţi dincolo de aparenţe!”. </script> small() şir. document. nou_demo_sir=demo_sir.. nou_demo_sir=demo_sir.fontcolor(şir) Atribuie şirului de caractere culoarea indicată în tag-ul <font> de atributul color.</small>.fontsize(Valoare) Atribuie şirului de caractere dimensiunea indicată cu tag-ul <font> de atributul size.write(nou_demo_sir).write(nou_demo_sir).</i>.write(nou_demo_sir). nou_demo_sir=demo_sir.</bold>.italics(şir) Încadrează un şir de caractere cu tag-urile <i>.

r=vocale. document.concat(”Felicitări pentru răbdarea de a ne fi descoperit!”)..charAt(Valoare) Returnează caracterul poziţionat în şirul de caractere.write(sir_1). charAt() şir.. <script> demo_sir= ”Învăţaţi să priviţi dincolo de aparenţe!”.write(r). Metode Sintaxă anchor() şir.5 sup() şir. document..strike().</tt>.charCodeAt(Valoare) Returnează valoarea codului Unicode al caracterului situat în poziţia indicată în şirul de caractere.... <script> sir_1=sir_1.strike() şir de caractere cu tag-urile <strike>.write(nou_demo_sir). document.</strike>.. Metode pentru manipularea şirurilor de caractere Metodele obiectului String pentru manipularea şirurilor de caractere sunt prezentate în detaliu în figura 4.concat(şir) Adaugă un nou şir de caractere la sfârşitul unui alt şir de caractere. </script> sub() şir.fixed() Încadrează un şir de caractere cu tag-urile <tt>. //afişează o </script> charCodeAt() şir. Metoda este echivalentă cu operatorul +.sup() Încadrează un şir de caractere cu tag-urile <sup>.sub() (continuare) Încadrează un şir de caractere cu tag-urile <sub>. Figura 4. </script> fixed() şir.6 . nou_demo_sir=demo_sir. Exemplu: concat() şir.</sup>. Exemplu: <script> vocale=”aeiou”..</sub>. Figura 4.128 Exemplu: strike() Încadrează un şir.6.charAt(3).anchor(şir) Converteşte un şir de caractere într-o ancoră numită cu tag-ul <a> şi atributul name.

write(adresa. r=email. şir) Caută o expresie regulată şi înlocuieşte caracterele găsite prin şirul de caractere indicat în cel de-al doilea argument. document. Metoda face deosebire între majuscule şi minuscule. indexOf() şir.lastindexOf(”@”).indexOf(”@”).indexOf(”i”. Metoda face diferenţă între majuscule şi minuscule. În caz contrar metoda returnează valoarea -1.match(expresieregulată) Caută o expresie regulată într-un şir de caractere şi returnează rezultatul într-o matrice.indexOf(Şir. În caz de eşec. adresa=”195. //afişează 3 </script> lastIndexOf() şir.</a>.write(r). r=email. document. //afişează 11 </script> <script> email=”ld@canaba.129 fromCharCode() şir.lastIndexOf(şir) Caută ultima apariţie a şirului de caractere şi returnează indexul poziţiei sale. r=email.3}/.14. înlocuirea nu se efectuează.Valoare) Caută un caracter într-un şir de caractere şi returnează indexul primei apariţii (primul caracter are indexul 0).6 .write(r).match(model)). document. //afişează 2 </script> link() şir.com”.indexOf(”canaba”).com”.45. Exemplu: <script> email=”ld@canaba.replace(expresieregulată. document.com”.78”. (continuare) Figura 4. </script> replace() şir. <script> model=/\d{1.. În caz de eşec.com”. document.fromCharCode(Valoare) Exemplu: Returnează codul Unicode corespunzător caracterului indicat. se returnează valoarea –1. În caz de eşec. Exemplu: Exemplu: <script> email=”ld@canaba. metoda returnează valoarea null.link(şir) Încadrează un şir de caractere cu tag-urile <a>. //afişează 2 </script> <script> email=”pepito@brazil.6).write(r).write(r). r=email. Exemplu: match şir.

document. document.3).substr(0. <script> text=”ion@yahoo.write(r). document. //afişează ion </script> substring() şir.com”. text=”ion@yahoo.6 <script> email=”ion@yahoo.com </script> search() şir. //afişează ion </script> . document. rezultat=text.130 Exemplu: <script> model=/ION/i.100). document.replace(model.com.write(r).write(a). Exemplu: <script> model=/pion/i.Valoare2) Extrage o parte dintr-un şir de caractere şi returnează şirul extras.substring(0.slice(4. document.substr(Valoare1. Exemplu: (continuare) Figura 4.write(text.com”. r=text.3).write(rezultat). //afişează yahoo. //afişează ion </script> split() şir. Exemplu: substr() şir.search(model)).”ION”). r=text.Valoare2) Extrage o parte dintr-un şir de caractere şi returnează şirul extras.search(expresieregulată) Caută o expresie regulată într-un şir de caractere şi returnează valoarea poziţiei primului caracter găsit. //afişează canaba.slice(0. r=email.write(r). //afişează 11 </script> slice() şir.split(şir) Divizează un şir de caractere în subşiruri şi returnează o matrice. text=”Nebunul şi Pionul”.com”. a=text.Valoare2) Extrage o parte din şirurile de caractere şi returnează şirul extras. metoda returnează valoarea –1. În caz de eşec.substring(Valoare1.com </script> <script> text=”ion@yahoo. Metoda recunoaşte expresiile regulate. Exemplu: Exemplu: <script> text=liv@canaba.3).slice(Valoare1.com”.

131 toLowerCase() şir.COM </script> Obiectul Array Aplicaţiile din conversaţiile anterioare au fost construite pe tipuri de date simple cărora le-au fost asociate variabile simple..314 </script> toUpperCase() şir. Fişa obiectului intern Array este prezentată în figura 4.toLowerCase() Exemplu: Converteşte un şir de caractere în minuscule.7.”). b=314. . //afişează mitică şi petrică </script> toString() şir.toString() Converteşte o valoare numerică sau booleană în şir de caractere.toLowerCase(). Exemplu: (continuare) Figura 4. folosiţi obiectul intern Array (matrice).write(a. rezultat=email. <script> text=”Mitică şi Petrică”. Exemplu: <script> a=TRUE.toString()+”..toUpperCase(). //afişează TRUE. gurmand de variabile? Dacă da.write(r). document. de exemplu o listă de date numerice sau alfanumerice. //afişează ION@YAHOO. document. O matrice (array) este o listă de valori sau de referinţe către alte obiecte.com”.write(rezultat).toUpperCase(şir) Converteşte un şir de caractere în majuscule. O matrice poate conţine.toString()).6 <script> email=”ion@yahoo. document. document. Sunteţi un .write(b. r=text.

”albastru”]. unshift() Figura 4.”galben”.. În limbajul JavaScript nu se pot crea matrici cu mai multe dimensiuni. Constructorul Array()este prezentat în detaliu în figura 4.8 . splice(). Se pot utiliza. de asemenea iniţializată cu o listă de elemente. Exemplu: Exemplu: <script> ListaCulori=new Array().7 Gestionarii de evenimente: - Constructorul Array() Pentru a crea o nouă matrice. </script> <script> ListaCulori=new Array(“rosu”.element2.. array-urile trebuie să fie declarate înainte de a fi utilizate.132 Fişa obiectului Array Cum se creează obiectul? Proprietăţi: Metode: constructorul Array() length concat(). toString().. dimensiunea sa (numărul de elemente) poate fi predefinită sau poate fi. în mod simplu parantezele drepte ([]). shift().2 JavaScript. Constructor Sintaxă Array() variabila=new Array() variabila=new Array(număr_elemente) variabila=new Array(element1. reverse(). utilizaţi constructorul Array(). în fiecare element al vectorului inseraţi câte un array.. Începând cu versiunea 1. Spre deosebire de majoritatea tipurilor de variabile JavaScript. pop(). Numerotarea elementelor unei matrici începe de la zero.”albastru”). push().. instrucţiunea new Array() nu mai este indispensabilă. Începeţi prin a crea o matrice clasică (cu o dimensiune) iar apoi. ListaCulori=[“rosu”. dar puteţi imbrica mai multe matrici.”galben”..…] Creează o nouă matrice.) variabila=[] variabila=[.] variabila=[element1. sort(). slice().element2.8. </script> Exemplu: Figura 4. Noua matrice poate fi vidă. join(). </script> <script> ListaCulori=new Array(7).

”albastru”.”verde”). //Se afişează rosu. albastru.”cretesti”. culoare2=”galben”.”galben”.”a14”).write(mere+”<br>”). //Se afişează a11.culoare2. </script> <script> culoare1=”rosu”.”a23”.”a24”).i<4. culoare3].i++){ document. } </script> . document.”a33”.”a13”.”Dan”).133 Exemplu: <script> ListaCulori=[“rosu”. for(i=0.”a32”.”a22”. linie[2]=new Array(“a31”.”a12”. a12. //Se afişează rosu.write(linie[0]).”dulci”). a13.8 <script> //creare matrice (vezi tabelul 1) cu trei linii şi patru coloane linie=new Array(3).write(linie[1][2]+”<br>”). document write(ListaCulori+”<br />”).write(student[i]+”<br>”).write(mere).”galben”].”Bogdan”.”a34”).”Catalin”. creţeşti. verde </script> <script> /*Crearea unei matrici şi modificarea celui de-al doilea element*/ mere=new Array(”ionatan”. //Se afişează ionatan. </script> <script> /*Afişarea elementelor unei matrici cu o buclă for*/ student=new Array(”Alin”. linie[1]=new Array(“a21”. //Se afişează a23 document. linie[0]=new Array(“a11”. </script> Tabelul 1 Exemplu: Exemplu: a11 a21 a31 a12 a22 a32 a13 a23 a33 a14 a24 a34 Exemplu: Exemplu: Exemplu: (continuare) Figura 4. culoare3=”albastru”. violet. ListaCulori=[culoare1.write(ListaCulori). document. document. galben. document. a14 </script> <script> ListaCulori=new Array(”rosu”. dulci mere[1]=”parmen-auriu”. verde ListaCulori[1]=”violet”. albastru.

length. for(i=0. for(i=0. } </script> .7).9. } </script> Metodele obiectului Array Metodele obiectului Array sunt prezentate în detaliu în figura 4.i++){ document. document. for(i=0. } lista_numere.i++){ document.length+” numere <br>”).length+” numere <br />”).20.i<lista_numere. lista_numere2=new Array(5.write(”<br>”+lista_numere.2).9.length.50. Figura 4. Proprietate Sintaxă length matrice.length+” numere <br>”).length.write(lista_numere3. Reducând numărul de elemente.10 <script language=”javascript” type=”text/javascript”> //concatenarea a două matrici lista_numere1=new Array(6.i<lista_numere. Puteţi modifica valoarea acestei proprietăţi.9.10. Element2. lista_numere3=lista_numere1. document.write(lista_numere[i]+’–’).concat(matrice) matrice=matrice. document. Metodă Sintaxă concat() matrice=matrice.9 <script> lista_numere=new Array(3.write(lista_numere[i]+” –”).68).concat(lista_numere2).write(lista_numere. Exemplu: Figura 4.23..i++){ document.48).9. document.134 Proprietăţile obiectului Array Proprietăţile obiectului Array()sunt prezentate în detaliu în figura 4.7. //Se afişează 7 numere </script> <script> lista_numere=new Array(6.length+” numere”). elementele se suprimă pornind din dreapta matricii..concat(Element1.56.length–=2.i<lista_numere3.length Exemplu: Conţine numărul de elemente al unei matrici.) Exemplu: Metoda este utilizată pentru concatenarea a două matrici.write(lista_numere3[i]+”–“).7..write(lista_numere.

adaugă=culori.9.7 6*9*7 pop() matrice.length. </script> push() matrice.47). } </script> join() matrice.7). Metoda pop() nu cere nici un argument.write(lista).push(”albastru”). culori_invers=culori.”galben”. document.write(”Elementul suprimat: ”+el_suprimat+”<br />”).push() Exemplu: Metoda adaugă noi elemente la sfârşitul matricii.7). metoda join() utilizează virgula.i<lista_numere3. lista_numere3=lista_numere1. document.i++){ document. Proprietatea length este modificată în mod automat.length+ ”<br />”).join(”Separator”) Metoda este utilizată pentru convertirea unei matrici într-un şir de caractere. for(i=0.9.”galben”).write(”Numărul de elemente: ”culori. Metoda returnează valoarea elementului suprimat. document. sir=subsir.join(”*”). Exemplu: <script> subsir=new Array (6.write(lista_numere3[i]+”–“).pop().concat(13.9. document.reverse().write(sir).9. document.write(sir+”<br />”). </script> reverse() matrice.write(culori).”albastru”). Proprietatea length este modificată în mod automat.write(culori+”<br />”). Fără argument. document.length+” numere <br />”).135 Exemplu: <script language=”javascript” type=”text/javascript”> //concatenarea a două matrici lista_numere1=new Array(6.reverse() Metoda inversează ordinea elementelor unei matrici (nu cere nici un argument). <script language=”javascript” type=”text/javascript”> lista=new Array(1. Argumentul ”Separator” serveşte la separarea elementelor in şir.join() matrice.10 (continuare) <script language=”javascript” type=”text/javascript”> culori=new Array(”rosu”.pop() Exemplu: Metoda suprimă ultimul element al unei matrici. Exemplu: Figura 4.write(culori). </script> Rezultatele execuţiei script-ului 6. document. document. <script language=”javascript” type=”text/javascript”> culori=new Array(”rosu”.22). el_suprimat=lista. sir=subsir. document.join(). </script> .write(lista_numere3.

//se afişează 3. <script language=”javascript” type=”text/javascript”> lista_numere=new Array(13.slice(–2).6.write(lista_numere). el indică rangul (calculat.10 (continuare) .) reprezintă elementele care urmează a fi inserate în matrice începând cu rangul indicat pentru primul element.Element2. Figura 4..write(”Elementul suprimat: ”+suprim+”<br />”). Al doilea argument (NumarElemente) precizează numărul elementelor ce urmează a fi suprimate. Rangul elementului de la care trebuie să înceapă suprimarea elementelor matricii este obligatoriu. ValoareNumerica2 (indică rangul imediat următor ultimului element care urmează a fi extras). //se afişează 3.) Metoda suprimă elementele unei matrici şi le înlocuieşte cu altele.5. document.write(lista_1+”<br />”).22).NumarElemente. Dacă cel de-al doilea argument este negativ. //se afişează 4.slice(2. cel de rang 2 devine de rang 1 ş. //se afişează 7. Elementul de rang 1 devine de rang 0. document.5 lista_2=lista_numere.shift().5).7. atunci rangul se calculează pornind de la sfârşitul matricii.d. document..slice(ValoareNumerica1. Exemplu: <script language=”javascript” type=”text/javascript”> lista_numere=new Array(1.6.shift() Exemplu: Metoda suprimă primul element al unei matrici. Dacă primul argument este negativ.write(lista_2+”<br />”).6.slice(2.write(lista_3+”<br />”). ValoareNumerica2) Metoda extrage elementele unei matrici şi returnează o nouă matrice care conţine aceste elemente.5. lista_1=lista_numere. document. document.slice(3)..2.splice(Rang.20. Element1.Element2..8 lista_3=lista_numere. caracterele sunt extrase începând cu rangul furnizat de primul argument până la sfârşitul matricii. Metoda returnează lista elementelor suprimate. Argumentele următoare (Element1. Proprietatea length se modifică în mod automat.. Dacă nu este menţionat..7 lista_4=lista_numere.136 shift() matrice. </script> slice() matrice.4. Elementele extrase depind de două argumente: ValoareNumerica1 (indică rangul primului element care urmează a fi extras).8). document.m. pornind de la sfârşitul matricii) ultimului element care urmează a fi extras.4.8 </script> splice() matrice.4.write(lista_4+”<br />”). Metoda returnează valoarea elementului suprimat şi nu cere nici un argument.5.a.7. suprim=lista_numere.–1).3. El este întotdeauna de rang 0. Matricea iniţială nu este modificată.

Element2.8 </script> toString() matrice. Func•ie primeşte doi parametri şi returnează o valoare numerică.35.7. //se afişează 1.toString().5..”galben”. document.sort(Funcţie) matrice.2.8).galben.sort(Func•ie) permite sortarea valorilor numerice.rosu. //se afişează rosu.) Metoda inserează la începutul matricii elementele pe care le menţionaţi.5.albastru </script> unshift() matrice. document. //se afişează verde.sort() matrice.”albastru”).137 Exemplu: <script language=”javascript” type=”text/javascript”> lista_numere=new Array(1.6.”galben”.unshift(Element1.2.6. matrice.”violet”).35.write(a).”albastru”).. . Exemplu: Figura 4. a=lista_numere.7.3.sort() sau metoda sort fără argument sortează elementele unei matrici care conţine valori alfanumerice.violet.write(culori).10 (continuare) <script language=”javascript” type=”text/javascript”> culori=new Array(”rosu”.toString() Metoda returnează conţinutul unei matrici sub forma unui şir de caractere.splice(2.unshift(”verde”.4.36.2.36).galben. Proprietatea length este modificată în mod automat. culori. document. a=culori. Exemplu: <script language=”javascript” type=”text/javascript”> culori=new Array(”rosu”.albastru </script> sort() matrice.write(”Numere: ”lista_numere+”<br />”).

10 (continuare) .138 Exemplu: Rezultatele execuţiei script-ului: Figura 4.

139 Exemplu: Rezultatele execuţiei script-ului: Figura 4.10 (continuare) .

140 EXEMPLUL 4 JAVASCRIPT ‰ Formularea problemei Problema care se pune acum seamănă cu celelalte.. vineri) din cele trei rezervoare (cilindrice echilaterale) R1. Se doreşte ca.. miercuri. 4. R3. precizându-se atât rezervorul cât şi ziua respectivă. ‰ Analiza problemei Formatul datelor de input/output (intrare/ieşire). dar . este puţin mai complicată. Se citesc de la tastatură.12.11. La finele raportului se vor afişa maximul şi minimul livrărilor. 4.11 . cantităţile de benzină livrate beneficiarilor. să se afişeze. Se va tipări. de asemenea. Figura 4. pentru fiecare rezervor în parte.13. R2. tabela de variabile. joi. pe zile. marţi. într-o matrice livrările de benzină efectuate zilnic (luni. specificaţiile de programare sunt ilustrate în figurile: 4. media livrărilor pe zile şi pe rezervoare.

Afişează maximul livrărilor. Afişează minimul livrărilor. miercuri. Stop ‰ Proiectarea script-ului În figura 4. numărul rezervorului şi ziua. jmax. vineri) pentru rezervorul R3. marţi. jmin: indicii livrărilor maxime şi minime din matricea a Variabile de iesire b: vectorul livrărilor medii zilnice d: vectorul livrărilor medii pe rezervoare max: maximul livrărilor min: minimul livrărilor Figura 4. varianta formalizată. Livrările. marţi. 6. Citeşte livrările zilnice de benzină (luni. Citeşte livrările zilnice de benzină (luni. Ieşiri. vineri) pentru rezervorul R2. Lista de funcţiuni ale script-ului 1. 8. 2. joi. Figura 4. Trunchiază media (livrărilor pe zile şi pe rezervoare). 5. Matricea livrărilor pe rezervoare şi zile. numărul rezervorului şi ziua. joi.141 Tabela de variabile Variabile de intrare a: matricea livrărilor pe zile şi rezervoare Variabile de stare st: livrările totale pe zile şi rezervoare s: sume parţiale. 10. joi. livrări pe zile z: vectorul numelor zilelor săptămânii imax. Calculează rezervoare. Calculează maximul livrărilor. Calculează minimul livrărilor. 3. media livrărilor pe 9. miercuri. Lista cu situaţia livrărilor. Programul mai afişează maximul şi minimul livrărilor însoţite de rezervorul şi ziua respective. 11. Programul editează situaţia livrărilor de benzină efectuate zilnic din trei rezervoare cilindrice echilaterale. se citesc de la tastatură.14 se prezintă pseudocodul. 7. imin. pe zile şi pentru fiecare rezervor în parte. . Intrări. marţi. miercuri. 4. Citeşte livrările zilnice de benzină (luni. vineri) pentru rezervorul R1.12 Specificaţii de programare Descriere.13 Calculează media livrărilor pe zile.

j st=st+aij FORMEDIIJ ENDFOR di=s/5 FORMEDII ENDFOR d3=s/15 // determinarea maximului si minimului max=a0.j FORI ENDFOR bj=s/3 FORJ ENDFOR // calculul mediilor pe rezervoare st=0 FORMEDII FOR(i=0.142 Pseudocodul BEGIN //initializeaza vectorul Z cu numele zilelor z=luni.miercuri.0 min=a0.j++) s=s+ai.marti.i++) LIVJ FOR(j=0.i<3.j++) IFMAX IF(max<ai.j<5.j) max=aij imax=i jmax=j IFMAX ENDIF IFMIN IF(min>ai.j++) s=0 FORI FOR(i=0.i++) s=s+ai.i++) FORMAXJ FOR(j=0.j LIVJ ENDFOR LIV ENDFOR // aloca spatiu de memorie pentru vectorul b si d // calculeaza mediile pe rezervoare FORJ FOR(j=0.i<3.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.j<5.i++) s=0 FORMEDIIJ FOR(j=0.j++) READ ai.j<5.i<3.joi vineri //aloca spatiu de memorie si //citeste livrarile pe fiecare rezervor de la tastatura LIVI FOR(i=0.0 imax=0 imin=0 jmax=0 jmin=0 FORMAXI FOR(i=0.14 .j<5.i<3.

15 este prezentat documentul (X)HTML complet.143 FOR(k=0.valoare reala s=transforma in sir de caractere x i=pozitia punctului zecimal in sir IFCOPY IF(i≠-1) s=copiazasubsir(s. a[i][j]=parseFloat(prompt("Livrare din rezervorul R"+k+ " ziua:"+Z[j]. } // --> </script> Figura 4.j++) {k=i+1.0)).j++) WRITE a[j][k] FORJ ENDFOR WRITE trunchiaza( b[k]) FORK ENDFOR WRITE "MEDIA" FORTRUNC FOR(j=0.15 </head> ."Vineri"). a[0]=new Array(5). <html> <head> <title>Exemplul 4</title> <script language="javascript"> <!--var Z = new Array("Luni".j<3.k++) WRITE Z[k] FORJ FOR(j=0.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."Marti"."Joi". a[2]=new Array(5). a[1]=new Array(5).j<5. a=new Array(3).i+2) IFCOPY ENDIF RETURN s TRUNCHIAZA END FORK Figura 4.14 (continuare) ‰ Codificarea în limbajul JavaScript În figura 4."Miercuri".i<3.0. for(i=0.i++) for(j=0.j<4.k<5.

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

j++) { document.writeln("<tr><td>" + Z[k]+"</td>").writeln("<td>" + a[j][k]+ "</td>").j<3.j++) document. for(j=0. document. document.16.145 //AFISARE REZULTATE document.16 . for(j=0.k<5.writeln("<td><b>" + trunchiaza(D[j])+" </b></td>"). document.writeln("<td><b>ZIUA</b><td><b>R1</b><td> <b>R2</b><td><b>R3</b><td><b>MEDIA</b></td></tr>"). document.k++) { 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(" <td> " +trunchiaza( B[k])+ "</td></tr>").j<4.writeln("<tr><td><b>MEDIA</b>"). </script> Figura 4. for(k=0.15 </body> (continuare) </html> Rezultatele execuţiei script-ului sunt prezentate în figura 4.writeln("</table></center><p><p>").writeln("</tr>"). } document. Figura 4. document.writeln("<font size=+1 color=green>Livrarea maxima:"+max+" s-a facut din rezervorul: R"+imax+" in ziua de "+Z[jmax]+"</font>").writeln("<center><table border=1 bgcolor’#efefff><tr>").

17 Variabile de intrare n: numărul de rezervoare r: vectorul razelor rezervoarelor Variabile de stare d: densitatea benzinei i: indicele de poziţie (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. Aşadar.18. mulţimea {V(1). specificaţiile de programare. iar prelucrarea se efectuează cât timp valoarea acestui indice nu depăşeşte o valoare finală. În figura 4. înaintea citirii datelor propriu-zise (razele rezervoarelor). un vector este o mulţime de elemente identificate prin poziţia pe care acestea o ocupă. Formatul datelor de ieşire RAZA xx xx . Pentru fiecare valoare a razei se calculează şi afişează cantitatea de benzină din rezervor. necunoscut în problemă. 4.146 Aplicaţie ‰ Problema care se pune acum seamănă cu cea din EXEMPLELE precedente. De asemenea. V(n)}.xx . În informatică. unde V(1). xxx. …. se desemnează prin abuz de limbaj sub numele de vector. Prelucrările ce se efectuează asupra unui vector sunt funcţie de valoarea unui indice de poziţie (0<=i<=n). Cât priveşte numărul variabil de raze.xx xxx. dar este . cu acelaşi script se pot rezolva probleme ce diferă prin numărul de rezervoare. de asemenea necunoscut în momentul scrierii script-ului vom folosi ca variabilă de intrare o matrice(array) cu o singură dimensiune – un vector. În felul acesta.. V(2). trebuie furnizat ca o variabilă de intrare (n) în momentul execuţiei script-ului. Acestuia i se fixează o valoare care. V(2).xx TONE Tabela de variabile Figura 4. tabela de variabile.18 . puţin mai complicată! Se citesc de la tastatură un număr oarecare (maxim 30) de valori ale razelor unor rezervoare cilindrice echilaterale. Numărul rezervoarelor. în general. V(n) sunt elementele vectorului.17. Analiza problemei Problemele care se pun în această etapă privesc în mod special alcătuirea tabelei de variabile..19 sunt prezentate: formatul datelor de ieşire.xx xxx. 4. …. script-ul calculează şi afişează masa totală de benzină din rezervoare. xx MASA TOTALA= MASA xxx. Remarcă. mai precis identificarea variabilelor de intrare ale script-ului. corespunde primei poziţii. Script-ul verifică totodată ca valorile razelor rezervoarelor să fie numere pozitive.

1 6. 6.20 CAP-TABEL .20 se prezintă pseudocodul. Script-ul citeşte 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!).147 Specificaţii de programare Descriere. 3. 7. 4. Script-ul afişează mesajul: ”Raza negativă”. Citeşte număr rezervoare (n). Afişează un rând de 30 de ”=”. Afişează r. Iniţializează variabila (s). Ieşiri.2 Citeşte valoarea razei unui rezervor.7 s=0 //Citeste numar rezervoare(n) READ(n) BEGIN Do LINIUTZA WRITE(‘raza’+’ ‘+’masa’). Pentru fiecare rezervor (cilindric echilateral): 6. Validează datele introduse după cum urmează: pentru fiecare articol se verifică dacă valoarea razei citite este negativă. m 8.2 7. Însumează m în s. script-ul afişează mesajul: „Raza negativă”. Afişează ”raza. Se introduc de la tastatură numărul rezervoarelor cilindrice echilaterale şi valorile razelor acestora. Lista de funcţiuni ale script-ului 1. Stop Calculează volumul rezervorului. Pseudocodul REZERVOARE BEGIN d=0.19 9. Masa de benzină (m) din fiecare rezervor şi masa totală (s) de benzină. Pentru raze cu valori negative. 5. Script-ul calculează şi afişează cantitatea de benzină (s) dintr-un număr oarecare (n) de rezervoare cilindrice echilaterale (acest număr este furnizat ca parametru). masa”.7 (densitatea benzinei). Intrări. Afişează masa totală de benzină Proiectarea programului În figura 4. Pentru fiecare rezervor (cilindric echilateral): 7. Atribuie variabilei d valoarea 0. DO LINIUTZA END CAP-TABEL Figura 4. varianta formalizată. 2.4 Figura 4. Calculează masa de benzină din rezervor.3 7.1 7. Valoarea densităţii benzinei (d) se introduce în mod static.

i++) m=2∏dr[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. . Figura 4.20 (continuare) Codificarea în limbajul JavaScript În figura 4.22.23.21 Rezultatele execuţiei script-ului sunt prezentate în figurile 4.i<=n.i++) READ(r[i]) WRITE(r[i]).i<=n.21 este prezentat documentul (X)HTML complet. WHILE (r[i]<0) WRITE(‘Raza negativa’) READ(r[i]) WRITE(r[i]) ENDWHILE ENDFOR FOR(i=1.148 PREL-VALID VALID FOR(i=1. 4.

22 Figura 4.149 Figura 4.23 .

indexOf(”0”.charAt(3)). Care sunt metodele pentru formatarea şirurilor de caractere? 5.?. Cum se creează obiectul String? 3.?... 6..... ƒ alert(sir.8)). ƒ alert(sir.. //afişează . Care sunt obiectele interne (integrate) ale limbajului JavaScript? 2. //afişează . 8.. ƒ substr().indexOf(”z”.. Se consideră şirul de caractere: sir=”abcdef”. //afişează ...indexOf(”0”)). //afişează . ƒ alert(sir... Precizaţi ce valori returnează următoarele metode ale obiectului String: ƒ alert(sir.?...?.slice(0.?. //afişează . Se consideră şirul de caractere: sir=”Protopopescu Augustin”. ƒ alert(sir. ƒ alert(sir.3)).....?. //afişează . ƒ alert(sir... ƒ alert(sir. ƒ toLowerCase(). Precizaţi ce valori returnează următoarele metode ale obiectului String: ƒ alert(sir.-2)). //afişează ......?. ƒ alert(sir. Ce realizează următoarele metode ale obiectului String: ƒ indexOf().150 JavaScript Testaţi-vă cunoştinţele Temă 1. Care sunt proprietăţile obiectului String? 4. .?.charCodeAt(3)). Ce realizează următoarele metode ale obiectului Array? ƒ concat()..?.slice(3)). 9.?.slice(2....slice(2. //afişează .-1)).8))...slice(1. Cum se creează obiectul Array? 7... ƒ sort().. ƒ toString. //afişează . //afişează ..3)).....

. Precizaţi ce valori returnează următoarele metode ale obiectului Array: ƒ alert(g..concat(4...”)).7])). ƒ Figura 11.?.... //afişează ...3 (Conversaţia 11. //afişează .4.substr(2.?..substr(-3.b.Care este efectul metodei join()? Care este relaţia sa cu metoda split() a obiectului String? 15. 12. ƒ alert(sir..?..Se consideră funcţia: function sortare(x.3]..concat(4. 10.-2)).[6. //afişează .?. ƒ alert(sir..slice(-2.21). ..7]])).... ƒ alert(sir.100..?. ƒ alert(g.?..slice(3))...5. ƒ alert(g... //afişează . //afişează ....?...?. //afişează ... //afişează . Precizaţi ce valori returnează următoarele metode ale obiectului Array: ƒ alert(g....Identificaţi erorile de sintaxă din următoarele script-uri: ƒ Figura 11.2)).Se consideră şirul de caractere: sir=”a.[5.?.sort()).... ƒ alert(sir. pagina 5). ƒ alert(g.5]. pagina 5)..sort(sortare))..2. 13..Se consideră matricea: g=[1. //afişează ...slice(-3.substr(0.. 14.?.151 ƒ alert(sir.[6...5)).f”.5].c.2. ƒ alert(g.....e. //afişează .y){ return x-y... ƒ alert(g.?.. //afişează .-1).concat([4.3.?. //afişează ..slice(1...?.. ƒ alert(g.-1)). //afişează .. 11.substr(3)).2)). Precizaţi ce valori returnează următoarele metode ale obiectului String: ƒ alert(sir.?.slice(0. //afişează ..5 (Conversaţia 11.d.5])).concat([4.split(”.?. //afişează ..?.3)).. } şi var g=new array(7..Se consideră matricea: g=[1... ƒ alert(g. //afişează .. //afişează . Precizaţi rezultatele obţinute în urma execuţiei următoarelor metode: ƒ alert(g.2)).

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

. în limba engleză) sunt utilizate ca modele (tipare) de căutare pentru regăsirea. a adreselor etc. Utilizaţi (la maximum) expresiile regulate în formularele dumneavoastră deoarece ele vă garantează date fiabile (vezi Conversaţia 8). greu de digerat. Expresiile regulate nu sunt primordiale în programarea JavaScript.4. viaţa odată ce ele au fort asimilate. dar ele sunt universale (foarte multe limbaje de programare le utilizează) şi pot să vă simplifice .Conversaţia 5 Obiectele (interne) RegExp. Aplicaţii Obiectul Arguments. Versiunile ulterioare oferă numeroase îmbunătăţiri. dar ele reprezintă o funcţie 9 9 9 9 puternică a limbajului. Date... Crearea expresiilor regulate este foarte asemănătoare cu crearea şirurilor (strings. . Expresiile regulate pot fi utilizate în e-commerce (comerţul electronic) pentru validarea numerelor cărţilor de credit. O expresie regulată este un obiect JavaScript. Aplicaţii EXEMPLUL 5 JAVASCRIPT Obiectul Date. Arguments ••••••••••••••••••••••••••••••••••••••••• •••• În această conversaţie: f f f f f f ••••••••••••••••••••••••••••••••••••••••• •••• Expresii regulate Obiectul RegExp. Aplicaţii Temă Expresii regulate Expresiile regulate (Regular Expressions. 9 Expresiile regulate sunt puţin mai . în limba engleză). ştergerea şi înlocuirea caracterelor. începând cu JavaScript 1.. a numerelor de telefon. Remarci: 9 Implementarea expresiilor regulate în limbajul JavaScript a fost preluată direct din limbajul Perl.

Cele două metode de definire a unei expresii regulate sunt riguros echivalente. . lastMatch. Constructor Sintaxă RegExp() Variabila=new RegExp(”Model”.1 Gestionarii de evenimente: Constructorul RegExp() Constructorul RegExp() este prezentat în detaliu în figura 5. direct unei variabile. multiline. test() - Metode: Figura 5. global. care nu depinde de navigator. m – căutare multilinie (vezi zona textarea din cadrul unui formular).2 se poate face distincţie între acesta şi constructorul String(). găseşte toate apariţiile posibile.154 Obiectul RegExp Obiectul RegExp() este un obiect predefinit (built-in). source compile(). gi – cumulează opţiunile g şi i. exec(). $&.”Atribut”) Variabila=/Model/Atribut Variabila va conţine modelul expresiei regulate transmis ca parametru (”Model”). $_. input. i – în cursul căutării nu face deosebire între majuscule şi minuscule.1. deoarece Figura 5. ignoreCase. $n. $\. se atribuie modelul (tiparul) – încadrat între mai multe bare oblice. Cele trei atribute ale obiectului RegExp sunt următoarele: ƒ ƒ ƒ ƒ g – căutare globală. Fişa obiectului RegExp() este prezentată în figura 5. Fişa obiectului RegExp Cum se creează obiectul? Proprietăţi: constructorul RegExp() $’. ”Atribut” (cel de-al doilea parametru) stochează sub forma unui şir de caractere atributele de identificare ale modelelor (tiparelor). În acest caz. lastIndex. Expresiile regulate pot fi create şi în mod implicit.2. $+. lastParen. leftContext. Slash-urile (/) nu sunt necesare în constructorul RegExp(). index. rightContext.

Identifică o poziţie dintre un caracter de text şi un caracter care nu este de text.. Pentru a defini mai multe modele de căutare în aceeaşi expresie regulată.. Caracterul precedent (x) este identificat o dată sau nici o dată.. . Caracterul precedent (x) este identificat de cel puţin m ori. Indicatorii de poziţie pe care îi puteţi folosi în identificarea modelelor sunt prezentaţi în figura 5. Sfârşitul şirului de caractere.4 [\b] Remarcă. Caracterul precedent (x) este identificat cel puţin o dată.] . Caracter Descriere Caracterul precedent (x) este identificat de cel puţin m ori.3 x* Clasele de caractere utilizate în identificarea modelelor (tiparelor) sunt prezentate în figura 5. x{m. Orice caracter care nu se află în intervalul de la m la n.]) W mare (\W) este opusul lui (\w) (identic cu [^a-z A-Z 0-9 . Căutare multilinie (vezi zona textarea din cadrul unui formular). Orice caracter. Orice caracter din intervalul m la n care apare în şirul de căutare.5 ^ $ \b \B Opusul lui \b. w mic (\w) identifică orice caracter (identic cu [a-z A-Z 0-9 . [^…] [m-n] [^m-n] \w \W \s \S \d \D Figura 5... Orice caracter care nu apare între paranteze. S mare (\S) este opusul lui (\s) (identic cu [^\t\n\r\v]).155 Caracterele de repetiţie utilizate în identificarea modelelor (tiparelor) sunt prezentate în figura 5. Indicator de poziţie Poziţia în şirul de caractere Începutul şirului de caractere. Caracterul precedent este identificat de m ori.4: Clasa de caractere Descriere Orice caracter inclus între paranteze. d mic (\d) identifică orice cifră între 0 şi 9 (identic cu [0-9]). [. dar nu mai mult de n ori (m şi n reprezintă numere).5. s mic (\s) identifică orice caracter de spaţiu (identic cu [\t\n\r\v]). D mare (\D) este opusul lui d mic (\d) (identic cu [^0-9]) Identificare caracter backspace (\b este plasat între paranteze drepte).n} x{m. utilizaţi parantezele rotunde şi operatorul SAU logic (”|”). Figura 5.3. } x{m} x? x+ Figura 5. cu excepţia caracterului (\n) – salt la linie nouă.])..

document.156 Aplicaţie ‰ În Tabelul 5.1 sunt prezentate mai multe exemple de utilizare a expresiilor regulate.test("Ion Ionescu").write(RegExp["$&"]). //afiseaza Ion </script> . document.6. model.1 Atribut /12+3/ /ab?c/ /bon{1. //afiseaza Ionescu </script> $& RegExp[”$&”] Returnează ultimul text găsit. Comentaţi rezultatele căutării lor. Exemplu: <script language="javascript" type="text/javascript"> var model=/ion/i. Figura 5. model.122223 abc.bonnus 1222223 Nu găseşte 12 abbc bonnnus 123. Echivalent cu RightContext.test("Ion Ionescu"). document. //afiseaza Ion </script> $_ RegExp[”$_”] Returnează şirul de caractere în care a fost efectuată căutarea.test("Ion Ionescu").122222 Proprietăţile obiectului RegExp Proprietăţile obiectului RegExp sunt prezentate în detaliu (în ordine alfabetică) în figura 5. Echivalent cu Exemplu: input. Echivalent cu lastMatch.ac bonus.6 <script language="javascript" type="text/javascript"> var model=/ion/i.write(RegExp["$_"]). model.2}us/ /1*2{5}3/ Găseşte 123. Proprietate $\’ Sintaxă RegExp[”$\’”] Exemplu: Returnează textul situat la dreapta ultimului text găsit. <script language="javascript" type="text/javascript"> var model=/ion/i.write(RegExp["$\"]). Tabelul 5.

document. document.global Returnează true dacă atributul g (căutare globală) a fost definit.global).$n $1. document. Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i. model. //afiseaza Nume: </script> $+ RegExp[”$+”] Returnează textul găsit prin ultima sub-expresie a modelului utilizat.157 $’ RegExp[”$’”] Exemplu: Returnează textul situat la stânga ultimului text găsit.test("Ion Ionescu"). RegExp. Exemplu: global returnează false. $2.test("Nume: Ion Ionescu").write(RegExp.test("Un cartof sau doi cartofi?"). document. model. $9 returnează primele 9 sub-şiruri ale modelului. //afiseaza Ionescu </script> $n RegExp. Echivalent cu LeftContext.6 Exemplu: (continuare) <script language="javascript" type="text/javascript"> model=/ion/i. model. //afiseaza true </script> ignoreCase RegExp.index). în caz contrar returnează false.test("Nume: Ion Ionescu"). document. model. Exemplu: <script language="javascript" type="text/javascript"> var model=/(ion)|(ionescu)/ig.test("Nume: Ion Ionescu"). …. <script language="javascript" type="text/javascript"> var model=/ion/i.ignoreCase). //afiseaza true </script> index RegExp.write(RegExp["$'"]). Echivalent cu lastParen.ignoreCase Returnează true dacă atributul i (în cursul căutării nu se face deosebire între majuscule şi minuscule) a fost definit. Figura 5.index Returnează poziţia primului caracter al textului găsit.write(model. model. în caz contrar <script language="javascript" type="text/javascript"> model=/cartof/g.write(model. //afiseaza 6 </script> .write(RegExp["$+"]).

lastParen Returnează textul găsit prin ultima sub-expresie a modelului utilizat.lastParen).write(RegExp.leftContext).input).158 input RegExp. Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i. model.lastMatch). Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i. //afiseaza Ionescu </script> leftContext RegExp. Pentru că viitoarea căutare începe cu primul caracter. Exemplu: <script language="javascript" type="text/javascript"> model=/(ion)|(ionescu)/ig.test("Ion Ionescu"). model. în caz contrar returnează false.lastIndex Returnează poziţia. Primul caracter se află pe poziţia 0.6 . atribuiţi valoarea 0 acestei proprietăţi. document. model.multiline Returnează true dacă atributul m (multilinie) a fost definit. //afiseaza Nume: Ion Ionescu </script> lastIndex RegExp. document.write(RegExp.leftContext Returnează textul situat la stânga ultimului text găsit.lastMatch Returnează ultimul text găsit.input Exemplu: Returnează şirul de caractere în care a fost efectuată căutarea.write(RegExp. document. //afiseaza Ion </script> lastParen RegExp. model. Returnează 0 dacă precedenta căutare a eşuat. model.write(RegExp. (continuare) Figura 5.write(RegExp. //afiseaza 3 </script> lastMatch RegExp. Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i. <script language="javascript" type="text/javascript"> model=/ion/i.test("Nume: Ion Ionescu"). document. document. în şirul de caractere de la care va începe viitoarea căutare.test("Nume: Ion Ionescu").test("Nume: Ion Ionescu"). //afiseaza Nume: </script> multiline regExp.test("Nume: Ion Ionescu").lastIndex).

test("Ion Ionescu").write(rezultat+"<br />"). document."i").write(rezultat[0]+"<br />"). Exemplu: <script language="javascript" type="text/javascript"> var model=/ftp.6 Exemplu: (continuare) <script language="javascript" type="text/javascript"> model=/ion/i. model. //afiseaza Ionescu </script> source regExp. //afiseaza Ion </script> .*/i. prezentate în detaliu în figura 5.write(model.source Returnează expresia regulată. //afiseaza true </script> rightContext RegExp. document.test("Ion Ionescu").compile(model) Înlocuieşte un model vechi cu unul nou. </script> exec() model.*". document.rightContext Returnează textul situat la dreapta ultimului text găsit. model. rezultat=model. Figura 5.7 servesc pentru identificarea modelelor (tiparelor) în obiectul RegExp. Metodă Sintaxă compile() model.write(model.exec("Nume: Ion Ionescu"). Exemplu: <script language="javascript" type="text/javascript"> model=/ion/i.exec(”text”) Caută un model în ”text” şi returnează rezultatul (o matrice Array).rightContext).source). model. //afiseaza ion </script> Metodele obiectului RegExp Metodele obiectului RegExp. document. //afiseaza Ion document. model.write(RegExp.write(model.multiline).test("Ion Ionescu").7 <script language="javascript" type="text/javascript"> var model=/ion/i.159 Exemplu: <script language="javascript" type="text/javascript"> model=/ion/m. document. Exemplu: Figura 5.compile("http.source).

În acest sens se va crea un model RegExp(re) care să includă următoarele reguli: 9 adresa trebuie să înceapă cu cel puţin un caracter (plasat la stânga simbolului @). într-o casetă de dialog se va afişa mesajul de avertizare: „Adresa E-mail: xxxxxxxx este incorectă”. 9 adresa trebuie să conţină simbolul @. multiline.”) urmat de cel puţin două caractere.test("Nume: Ion Ionescu").write(rezultat).test(”text”) Figura 5. care conţine de asemenea şi zona de text pentru adresa e-mail (Adresa) şi . ignoreCase. source.160 test() model. În caz de eroare. 9 Metoda exec() modifică de asemenea mai multe proprietăţi ale matricei returnate. ‰ Analiza problemei În figura 5. Exemplu: (continuare) Remarci: <script language="javascript" type="text/javascript"> var model=/ion/i.” sau „-” dar nu unul după celălalt. la o adresă specificată de către utilizator. leftContext. rezultat=model. //se afiseaza true </script> 9 Metodele: compile(). rightContext. R2. 9 adresa poate conţine caracterele: „. 9 adresa trebuie să se termine cu punct („. Expedierea prin e-mail a situaţiei livrărilor de benzină din cele trei rezervoare se va efectua prin acţionarea unui buton „Trimite email”. 9 adresa trebuie să conţină cel puţin un caracter după simbolul @. R3”.7 Caută un model în ”text” şi returnează true/false. document. exec() şi test() de tip RegExp impun ca obiectul String în care se face căutarea să fie transmis ca argument. ƒ RegExp – lastMatch. În acest exemplu (EXEMPLUL 5 JAVASCRIPT) se doreşte ca situaţia livrărilor de benzină să fie expediată prin e-mail. ƒ Modelul lastIndex. EXEMPLUL 5 JAVASCRIPT ‰ Formularea problemei Se reia problema rezervoarelor din exemplele precedente. global. ale modelului şi ale obiectului RegExp: ƒ Matricea (Array) index. input.8 este prezentat ecranul cu „Situaţia livrărilor de benzină pentru rezervoarele R1. EXEMPLUL 5 JAVASCRIPT verifică dacă adresa e-mail este formată din caractere valide.

8 Tabela de variabile şi specificaţiile de programare sunt prezentate în figura 5. În situaţia în care adresa de e-mail introdusă în zona Adresa nu este validă se afişează un mesaj de eroare. Figura 5.10. Tabela de variabile Variabile de intrare adresa: obiect. imin. min: valoarea maximă şi minimă a livrărilor Figura 5. zonă de editare text pentru introducerea adresei de email Variabile de stare st: suma livrărilor totale pe zile şi rezervoare s: sume parţiale pe zile rval: starea zonei de editare (validă sau nu) x: valoarea reală a textului introdus în zona de editare z: numele zilelor săptămânii imax. într-o casetă de dialog.9. jmin: indicii livrărilor maxime şi minime din matricea a Variabile de iesire a: matricea livrărilor pe zile şi rezervoare b: vectorul mediilor livrărilor pe zile d: vectorul mediilor livrărilor pe rezervor max.9 . respectiv figura 5. jmax.161 butonul „Trimite email”.

Validează valoarea introdusă în zona de text (adresa). 4. Afişează „Trimite situaţia prin Email”.i<3. Afişează forma de introducere a adresei de email.j++) s=s+ai.j<5.i<3.i++) FOR(j=0.10 zona de editare.j ENDFOR ENDFOR // aloca spatiu de memorie pentru vectorul b si d // calculeaza mediile pe rezervoare FOR(j=0.i<3. R3” la o adresă specificată de utilizator. Lista de funcţiuni ale script-ului 1.11. Ieşiri. 3.j ENDFOR bj=s/3 ENDFOR // calculul mediilor pe rezervoare st=0 FOR(i=0.j++) READ ai. Adresa e-mail. ‰ Proiectarea script-ului Pseudocodul pentru EXEMPLUL 5 JAVASCRIPT este prezentat în figura 5.j st=st+aij ENDFOR di=s/5 .i++) s=s+ai. R2. 6. 2. Formează 8. 5. Stop corpul mesajului ce urmează a fi trimis prin email.marti.j<5. Afişează mesajul de eroare „Adresa E-mail xxx este incorectă”. Răspunde la evenimentele generate de butonul „Trimite email”.miercuri. Pseudocodul Exemplul5 LIV LIV1 LIV1 LIV FORJ FORI FORI FORJ FORMEDII FORMEDIIJ Figura 5.162 Specificaţii de programare Descriere.j++) s=0 FOR(i=0. Intrări.i++) s=0 FOR(j=0.j<5. 7.joi vineri //aloca spatiu de memorie si //citeste livrarile pe fiecare rezervor de la tastatura FOR(i=0.11 FORMEDIIJ BEGIN //initializeaza vectorul Z cu numele zilelor z=luni. Răspunde la evenimentele generate de Figura 5. Programul expediază prin e-mail „Situaţia livrărilor de benzină pentru rezervoarele R1. Raportul cu situaţia livrărilor expediate prin e-mail.

j<5.j++) IF(max<ai.0 imax=0 imin=0 jmax=0 jmin=0 FOR(i=0. " //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.k<5.0 min=a0.j++) WRITE a[j][k] ENDFOR WRITE trunchiaza( b[k]) ENDFOR WRITE "MEDIA" FOR(j=0.11 (continuare) IFMAIL .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.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> .j<3.k++) WRITE Z[k] FOR(j=0..163 FORMEDII ENDFOR d3=s/15 // determinarea maximului si minimului max=a0..i++) FOR(j=0.i<3.j) max=aij imax=i jmax=j ENDIF IF(min>ai.j<4.

\w{2.0.j++) sbody+= a[j][k] FORJMESAJ ENDFOR sbody+= trunchiaza( b[k]) FORKMESAJ ENDFOR sbody+= "MEDIA" FORTRUNC FOR(j=0.j<3.11 sbody+= " in ziua de "+Zjmin (continuare) FORMEAZA_AFIS END ‰ Codificarea în limbajul JavaScript .-]?\w+)*@\w+([\.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.-]?\w+)*(\.value rval=re.k<5.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.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+([\.j<4.})+$/ s=adresa.k++) sbody+= Z[k] FORJMESAJ FOR(j=0.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.valoare reala s=transforma in sir de caractere x i=pozitia punctului zecimal in sir IFCOPY IF(i≠-1) s=copiazasubsir(s.

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

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 execuţiei 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 execuţie funcţia VerificaAdresa()(figura 5.12). 9 Funcţia 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 acţionarea butonului „Trimite email” care lansează în execuţie funcţia trimite_email() (figura 5.12). 9 Corpul mesajului trimis prin email este generat de funcţia formeaza_afis(figura 5.12).

Aplicaţie

170
‰ Scrieţi un program JavaScript care verifică data calendaristică în formatul zz/ll/aa. Indicaţie. 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 număr alcătuit din patru cifre. În figura 5.16 este prezentat documentul XHTML complet.

Figura 5.16 Rezultatele execuţiei 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ă lucraţi
cu valori reprezentând orele şi datele calendaristice.
Remarci:

9 JavaScript consideră că data iniţială (de referinţă) este 1 ianuarie 1970 (convenţia
UNIX).

9 JavaScript ţine evidenţa valorilor: oră sau data calendaristică în milisecunde, începând cu
1 ianuarie 1970.

Fişa obiectului Date este prezentată în figura 5.18.
Fişa obiectului DATE
Cum se creează obiectul? Proprietăţi: 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 având data şi ora curente. Cel de-al doilea format creează un obiect cu data şi ora specificate. Puteţi crea un obiect Date folosind numai argumentele: An, Lună, Zi. Respectaţi ordinea argumentelor. Lunile se numără de la zero. Crearea unui obiect Date este similară cu crearea obiectelor

String, Array.
Exemplu:

<script> azi=new Date(); document.write(azi); //afişează data şi ora curente </script> <script> azi=new Date(2002,5,9); alert(azi); //obiectul Date conţine 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); ...//afişează 1 </script> getDay() Data.getDay()
Metoda returnează un număr care corespunde zilei săptămânii: 0 pentru duminică; 1 pentru luni etc.

Exemplu:

<script> data=new Date(2004,4,1); //1 aprilie 2004 ...a=data.getDay() document.write(a); ...//afişează 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); ...//afişează 2004 </script> getHours() Data.getHours()
Metoda returnează numărul de ore (între 0 şi 23).

Exemplu:

<script> data=new Date(2004,5,9,8,25,0); a=data.getHours(); document.write(a);...//afişează 8 </script> getMilliseconds() Data.getMilliseconds()
Metoda returnează numărul de milisecunde.

Exemplu:

<script> data=new Date(2004,5,9,8,25,8,750); a=data.getMilliseconds(); document.write(a); ...//afişează 750 </script> getMinutes() Data.getMinutes()
Metoda returnează numărul de minute.

Figura 5.20

174
Exemplu:

<script> data=new Date(2004,5,9,8,25,8,750); a=data.getMinutes(); document.write(a); ...//afişează 25 </script> getMonth() Data.getMonth()
Metoda returnează numărul lunii (de la 0 la 11).

Exemplu:

<script> data=new Date(2004,4,1); a=data.getMonth(); document.write(a+1); ...//afişează 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]); ...//afişează aprilie </script> getSeconds() Data.getSeconds()
Metoda returnează numărul 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);...//afişează 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); ..//afişează 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(); ...//afişează 1 </script>

Figura 5.20
(continuare)

”joi”.getUTCDay(). a=data.getUTCDay().write(a).8. . Exemplu: <script> data=new Date(2002.getUTCHours().. document. document.8.getUTCMinutes().getUTCHours() Metoda returnează ora (între 0 şi 23) transpus în timp UTC..//afişează 2004 </script> getUTCHours() Data. Exemplu: <script> data=new Date(2002. „sâmbătă”).5. 1 pentru luni etc.9).//afişează 25 </script> .175 getUTCDay() Data.write(ziua[a])..getUTCDay() Exemplu: Metoda returnează ziua din săptămână transpusă în timp UTC (0 pentru duminică.750).4.9.//afişează 750 </script> getUTCMinutes() Data.25. Exemplu: Exemplu: <script> data=new Date(2004.write(a). //9 mai 2002 a=data.//afişează 6 </script> getUTCMilliseconds() Data..5.. document.20 (continuare) Exemplu: <script> data=new Date(2002...750).5.5. document.1).. în format de 4 cifre. data=new Date(2002. . //9 mai 2002 a=data.9.//afişează 0 (pentru duminică) </script> <script> ziua=new Array(”duminică”.)...”marţi”.8.25.”miercuri”.8.getUTCFullYear().8..”vineri”. //1 aprilie 2004 a=data.25. a=data..9)..getUTCMilliseconds() Metoda returnează numărul de milisecunde (transpus în timp UTC).9..0).write(a).”luni”.write(a). document.. document.getUTCMilliseconds().getUTCFullYear() Metoda returnează anul transpus în timp UTC. <script> data=new Date(2002.. a=data.//afişează duminică </script> getUTCFullYear() Data.getUTCMinutes() Metoda returnează numărul de minute (transpus în timp UTC).5.write(a). Figura 5.

document.15).write(data..5..20 (continuare) <script> data=new Date(2002. Exemplu: Figura 5. document. document.25..//afişează 8 </script> getVarDate() Data. document.8...9..toString()). afişează 10283256000000 document.”Aprilie”. data=new Date(2004.”Octombrie”.4.9). //15 august 2004 a=data. Exemplu: Exemplu: <script> data=new Date(2002.//afişează 5 </script> <script> luna=new Array(”Ianuarie”. ”Septembie”.write(a). Exemplu: <script> data=new Date(2004.//afişează aprilie </script> getUTCSeconds Data. a=data.”Decembrie”).”Iulie”.. a=data. .5.setDate(3). ”August”.”Mai”.write(a).176 getUTCMonth() Data.getUTCMonth().7. //9 mai 2002 a=data.”Noiembrie”.//afişează Sun Jun 9 00:00:00 UTC+0200 2002 </script> setDate() Data.”Martie”..getUTCMonth()..getVarDate() Returnează data şi ora în litere (în limba engleză).write(a).. .//afişează Sat Aug 3 00:00:00 UTC+0200 2002 </script> .getUTCSeconds() Returnează numărul de secunde (între 0 şi 59) transpus în timp UTC.”Iunie”. Exemplu: <script> data=new Date(2002.write(luna[a–1]).”Februarie”. document. Metoda acceptă un argument (un număr cuprins între 1 şi 31) şi returnează noua dată în milisecunde.getVarDate().1).8.4..write(a+”<br/>”).getUTCSeconds(). .setDate(Număr) Metoda modifică ziua din lună într-un obiect Date.. //1 aprilie 2004 a=data.750).getUTCMonth() Metoda returnează numărul lunii (transpus în timp UTC).1).

32. //15 august 2002 a=data.setMilliseconds(3).write(a+”<br/>”).//afişează The Aug 15 14 25:32 UTC+0200 2002 </script> setMinutes() Data..write(data. //15 august 2002 a=data. Această metodă acceptă un argument între (0 şi 23) şi returnează noua dată în milisecunde.toString()).setFullYear(Număr) Exemplu: Metoda modifică anul într-un obiect Date.setMilliseconds(Număr) Metoda modifică numărul de secunde într-un obiect Date. //afişează Thu Aug 15 03 25:32 UTC+ 0200 2002 </script> setMilliseconds() Data. document. .15.toString()). . setMonth() Figura 5.25. Exemplu: <script> data=new Date(2002.setHours(3).7.15. . Exemplu: <script> data=new Date(2002. //afişează Sun Aug 15 00:00:00 UTC+0200 2004 </script> setHours() Data.20 (continuare) Data..write(a+”<br/>”)..setFullYear(2004).toString()).15). Această metodă acceptă un argument (numărul de milisecunde) şi returnează noua dată în milisecunde.14. document.//afişează 109252 08 00000 document. Această metodă Metoda modifică minutele într-un obiect acceptă un argument (minutele între 0 şi 59) şi returnează noua dată în milisecunde.write(a+”<br/>”). Această metodă acceptă un argument (luna între 0 şi 12) şi returnează noua dată în milisecunde. document.14.write(data. document.setMinutes(Număr) Date.25..7.//afişează 1029374732000 document.7.setHours(Număr) Metoda modifică ora într-un obiect Date. Această metodă acceptă un argument (anul în patru cifre) şi returnează noua dată în milisecunde.750)...write(data. <script> data=new Date(2002.177 setFullYear() Data. a=data.32). .setMonth(Număr) Metoda modifică luna într-un obiect Date.

setTime() Data.178 setSeconds() Data. a=data.setUTCMinutes() Metoda modifică minutele UTC într-un obiect Date. setUTCFullYear() Data. Această metodă acceptă un argument (un număr cuprins între 1 şi 31) şi returnează noua dată în milisecunde. Această metodă acceptă un argument (ora cuprinsă între 0 şi 23) şi returnează noua dată în milisecunde.setUTCHours() Exemplu: Modifică ora UTC într-un obiect Date. document. Această metodă acceptă un argument (minutele între 0 şi 59) şi returnează noua dată în milisecunde.25.write(data. Această metodă acceptă un argument (anul în patru cifre) şi returnează noua dată în milisecunde.setUTCMonth() Figura 5. <script> data=new Date(2002.setUTCDate() Modifică ziua din lună într-un obiect Date (transpusă în UTC).. .write(a+”<br/>”).toString()). setUTCMinutes() Data.14. setUTCHours() Data. setUTCMonth() Data.32).7.15. setUTCDate() Data. Această metodă acceptă un argument (data în milisecunde) şi returnează noua dată în milisecunde.setTime() Metoda modifică data într-un obiect Date.//afişează 1029381932000 document.setUTCMilliseconds() Metoda modifică numărul UTC de milisecunde într-un obiect Date.setUTCHours(3). Această metodă acceptă un argument (numărul de secunde între 0 şi 59) şi returnează noua dată în milisecunde. Această metodă acceptă un argument (numărul de milisecunde) şi returnează noua dată în milisecunde. //afişează Thu Aug 15 05:25:32 UTC+0200 2002 </script> setUTCMilliseconds() Data..20 (continuare) Metoda modifică luna UTC într-un obiect Date.setSeconds(Număr) Metoda modifică secundele într-un obiect Date.setUTCFullYear() Modifică anul (în timp UTC) într-un obiect Date.. Această metodă acceptă un argument (luna între 0 şi 11) şi returnează noua dată în milisecunde.

Este bine să utilizaţi în locul acestei metode. document.toLocalTimeString() Metoda returnează ora în formatul maşinii pe care este executat toString() Data. <script> . Data. Această metodă acceptă un argument (anul cu două cifre) şi returnează noua dată în milisecunde..7.toLocaleString() Metoda returnează data şi ora în litere.setUTCSeconds() Metoda modifică secundele în timp universal (UTC) într-un obiect Date. a=data.toLocalDateString().toDateString().32.toString() Exemplu: Metoda returnează data şi ora în litere.14.32.750). din motive de interpretare diferită de către browser. setYear() Data. .toGMTString() Metoda returnează data şi ora GMT în litere. document.//afişează Jeudi 15 août 2002 </script> toLocaleString() Data.179 setUTCSeconds() Data. metoda toString(). în limba engleză.14.750).25. <script> data=new Date(2002. în limba engleză.toLocalDateString() Exemplu: Metoda returnează data în litere. a=data. toDateString() Data. toLocalDateString() Data..7. Această metodă acceptă un argument (numărul de secunde între 0 şi 59) şi returnează noua dată în milisecunde.25. este mai bine să utilizaţi în locul acestei metode.write(a+”<br/>”). în formatul şi în limba maşinii pe care este executat script-ul. metoda setFullYear(). Dată fiind interpretarea foarte diferită a navigatoarelor. .setYear(Număr) Metoda modifică anul într-un obiect Date.20 (continuare) toLocalTimeString() script-ul.15.toDateString() Metoda returnează data în litere. în limba engleză..//afişează The Aug 15 2002 </script> toGMTString() Data.15..write(a+”<br />”). în formatul şi în limba maşinii pe care este executat script-ul. Figura 5. Exemplu: <script> data=new Date(2002.

(Exemplu. document.15..32.15.valueOf() Metoda returnează data şi ora în milisecunde. Figura 5. document. În figura 5.32.//afişează 1029414332750 </script> Aplicaţii ‰ Inseraţi data şi ora într-o pagină Web. a=data.toUTCString() Metoda returnează data şi ora UTC în litere.15. a=data..//afişează 14:25:32 UTC+0200 </script> toUTCString() Data.7.toString(). 30/1/2004 – 10:25 PM). Exemplu: valueOf() Data..write(a+”<br/>”)..toTimeString() Metoda returnează ora în format englezesc. document.180 data=new Date(2002.7. ..valueOf().write(a+”<br/>”).write(a+”<br/>”).25. Indicaţie. Exemplu: <script> data=new Date(2002.14.21 este prezentat documentul HTML ([4]) complet al aplicaţiei. ..14.. Utilizaţi formatul: zz/ll/aaaa.7.750). . a=data.25.750).25.32.toTimeString().20 (continuare) <script> data=new Date(2002. în limba engleză.14.750).//afişează Thu Aug 15 14:32 UTC+0200 2002 </script> toTimeString() Data.

23 este prezentat documentul HTML ([4]) complet.21 În figura 5. În figura 5.181 Figura 5.22 sunt vizualizate rezultatele execuţiei script-ului. Figura 5.22 ‰ Personalizaţi script-ul din aplicaţia precedentă. ‰ Afişaţi data calendaristică în litere. joi 1 aprilie 2004). . în limba română (Exemplu.

. Figura 5.23 Rezultatele execuţiei script-ului sunt vizualizate în figura 5. În figura 5.24 Obiectul Arguments Obiectul Arguments reprezintă sub forma unei matrici (Array) valoarea argumentelor transmise unei funcţii.182 Figura 5.24.25 este prezentată fişa obiectului Arguments.

length - Obiectul Arguments este prezentat în detaliu în figura 5.183 Fişa obiectului Arguments Cum se creează obiectul? Proprietăţi: Metode: Figura 5.25 Gestionarii de evenimente: Constructorul Function() calee.arguments Arguments este un subobiect al obiectului (intern) Function. Aceste argumente sunt disponibile sub numele lor dar şi ca elemente ale unei matrici Array: arguments[]. Exemplu: Rezultatele execuţiei script-ului: Figura 5. puteţi să-i transmiteţi argumente. Obiect Sintaxă Arguments funcţie.26. Atunci când apelaţi o funcţie.26 .

Proprietate callee Sintaxă funcţie.184 Proprietăţile obiectului Arguments Proprietăţile obiectului Arguments sunt prezentate în detaliu în figura 5.27 . Exemplu: Rezultatele execuţiei script-ului: Figura 5.calle Returnează conţinutul complet al funcţiei.27.arguments.

185 Rezultatele execuţiei script-ului: length funcţie.length Exemplu: Returnează numărul de argumente transmise funcţiei atunci când ea este apelată.27 (continuare) .arguments. Figura 5.

186 Exemplu: Rezultatele execuţiei script-ului: Figura 5.27 (continuare) .

_–]+@[a–zA–Z0–9. model=/^[0–9]{5}$/.write(“cod eronat”). .com”. Care sunt proprietăţile şi metodele obiectului RegExp? 4.28) şi o adresă de e-mail (figura 5. Cum se creează obiectul RegExp? Temă 3.28 </script> <script> adresa=”vasile@vasile. Care sunt identificatorii de poziţie utilizaţi în identificarea modelelor? 7. Analizaţi funcţia compdate() din figura 5.[a–zA–Z0–9.test(cod)){ document. if(model.187 JavaScript Testaţi-vă cunoştinţele 1. Care sunt caracterele de repetiţie utilizate în identificarea modelelor (tiparelor)? 5.write(“adresa e-mail eronată”). Care sunt clasele de caractere utilizate în identificarea modelelor? 6.4}/$._–]+\. Ce reprezintă expresiile regulate? 2. } else{ document. Care este efectul utilizării următoarelor metode RegExp: ƒ compile().write(“OK”). ƒ test(). 8.29). } else{ document. Următoarele două script-uri verifică un cod poştal (figura 5. } Figura 5.30. Comentaţi structura expresiilor din cadrul celor două script-uri.29 } </script> 9. if(model.test(adresa)){ document._–]{2.write(“OK”). Figura 5. model=/^[a–zA–Z0–9. <script> cod=”85015”.

. //afişează .internet.javascript 9 netscape-devs. <script> astăzi=new Date(). alert(data..?. alert(b).?.. Figura 5.scripting.188 function compdate(data1. //afişează .Care sunt proprietăţile şi metodele obiectului Arguments? Vizitaţi site-urile 9 http://www..toString(). difZi=difOre/24. //afişează .Precizaţi rezultatul execuţiei următoarelor instrucţiuni JavaScript (figura 5. alert(c).Ce reprezintă GMT şi UTC? 12.. b=astăzi...30 } 10.www..32 </script> 15. difMinute=difSecunde/60.getTime().webreference..authoring. 2004 21:40:00”)...?. return difZi.Precizaţi care este efectul următoarelor metode JavaScript (figura 5.beta.... c=astăzi.... //afişează .. a=atăzi.html 9 http://scriptsearch.Cum creaţi un obiect Date care conţine data şi ora curente? 11.?. difSecunde=difMilisecunde/1000..?.. d=astăzi.31).?.32). difOre=difMinute/60.toLocalesString(). alert(a). <script> var data=new Date(”May 13.Care sunt proprietăţile obiectului Date? 13. alert(data.javascript 9 comp.31 </script> 14. Figura 5..feedback.getTimezoneOffset().html . //afişează . //afişează . Figura 5.Cum se creează obiectul Arguments? 17.public.jscript 9 netscape.com/programming/Javascript.Care este diferenţa între metodele getDay() şi getDate()? 16.setMonth(9)).infosystems.public.toGMTString())...com 9 microsoft..data2){ difMilisecunde=data1–data2.

Din fericire ei sunt foarte uşor de programat. iar codul JavaScript corespunzător (pe care îl scrieţi) este cunoscut sub numele de gestionar de evenimente. Foarte multe din programele pe care le scrieţi în limbajul JavaScript vor răspunde la un eveniment iniţiat fie de către utilizator. Gestionarii de evenimente sunt funcţii puternice JavaScript.Conversaţia 6 Gestionarii de evenimente JavaScript ••••••••••••••••••••••••••••••••••••••••• •••• În această conversaţie: f f f f ••••••••••••••••••••••••••••••••••••••••• •••• Evenimente şi gestionari de evenimente Gestionarii de evenimente JavaScript Aplicaţii Temă Evenimente şi gestionari de evenimente După cum am afirmat. Reacţia la un eveniment este cunoscută sub numele de prelucrarea evenimentului. . Un gestionar de evenimente este o metodă puţin specială care va fi apelată în mod automat de către navigator ori de câte ori va surveni un eveniment particular. JavaScript este un limbaj condus de evenimente. De foarte multe ori este suficientă o singură instrucţiune pentru a putea fi creaţi. fie de către browser.

9 Observaţi combinaţia … ciudată de majuscule şi minuscule la notaţia standard a gestionarilor de evenimente: on este scris mereu cu minuscule iar iniţiala fiecărui cuvânt al evenimentului. evenimentul click este trimis gestionarului de evenimente. Câteva din evenimentele care survin în mod frecvent cât şi momentul în care acestea se declanşează sunt prezentate în figura 6.1. cu majuscule. valoarea unui element este modificată. utilizatorul selectează un câmp într-un formular. onClick. Exemple: onAbort. Script-ul este executat dacă evenimentul se produce pe obiectul căruia îi este asociat. datele introduse într-un formular sunt şterse. El poate fi detectat şi prelucrat de către un script care va declanşa o acţiune. nu se produce decât atunci când este încheiată încărcarea unui document (X)HTML într-un navigator. Acţiunile utilizatorilor sunt elementele cele mai frecvente. un element nu este activat. Evenimentele stau la baza interactivităţii documentelor Web. evenimentul load. . un element devine inactiv. De exemplu. utilizatorul expediază un formular. dacă acesta există. se produce o eroare la încărcarea unui document sau a unei imagini. mouse-ul se deplasează pe deasupra elementului. Acelaşi eveniment se poate aplica mai multor obiecte. Codul gestionarului de evenimente trebuie să fie inclus ca un atribut al unui tag (X)HTML care declanşează evenimentul: <tag (X)HTML gestionarEvenimente=”cod JavaScript”> Remarci: 9 Codul JavaScript al unui gestionar de evenimente este inclus între ghilimele. 9 9 9 9 document. evenimentul click se produce atunci când utilizatorul execută clic pe un obiect. Pentru a defini un gestionar de evenimente adăugaţi prefixul on la numele evenimentului. mouse-ul se deplasează în afara elementului. buton etc.). un document sau o imagine se încarcă. un document este descărcat. Evenimentele generate de utilizator nu sunt singurele evenimente generate de JavaScript. În acest caz. utilizatorul execută clic pe un obiect. declanşat automat de către navigator.190 Remarci: 9 Un eveniment este o acţiune care se produce în raport cu un element (fereastră. abort blur click change error focus load mouseOut mouseOver reset select submit Figura 6. Eveniment Se declanşează atunci când … încărcarea unui obiect este întreruptă. fiecare element are propriul său nume. onBlur. De exemplu.1 unload După cum aţi putut observa.

2 sunt listaţi. în ordine alfabetică gestionarii de evenimente ai limbajului JavaScript. În figura 6. onLoad. Gestionari de evenimente onAbort Se declanşează atunci când încărcarea unui element este anulată. onSelect. Se aplică la: document onActivate Se declanşează atunci când elementul devine element activ. onSubmit. document. frame. onUnLoad. onError. onMouseOver. form . Figura 6.191 onChange. 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 prezentaţi în detaliu în figura 6. onMouseOut.3.3 Se aplică la: window. onReset. onFocus.

Se aplică la: document. form onBeforeDeActivate Se declanşează înainte ca un alt element să devină activ în documentul părinte.radio. form.submit Se aplică la: Se declanşează înainte ca elementul să devină element activ. frame onAfterUpDate Se declanşează după actualizarea datelor sursă ale elementului. form. form.text.password.192 onAfterPrint Se declanşează după imprimarea unui element.button. frame. (continuare) Figura 6. form onBeforeCopy Se declanşează înainte ca datele să fie copiate (Copy).textarea. form onBeforePaste Se declanşează înainte ca elementul ţintă să primească datele (Paste).checkbox. form. Se aplică la: document. form onBeforeEditFocus Se declanşează înainte ca elementul să primească focus-ul pentru a fi editat.reset.3 Se aplică la: window. form. form. onBeforeActivate form. form. Se aplică la: window. frame onBeforeUnload . form onBeforePrint Se declanşează înainte ca datele elementului să fie imprimate sau personalizate.hidden. Se aplică la: document.select. Se aplică la: document. Se aplică la: document. Se aplică la: form onBeforeCut Se declanşează înainte ca datele să fie mutate (Cut). form.fileupdate. form. window. form.

text.textarea. form.text. form. form.password. form. form. form. form.fileupdate.button.checkbox.193 Se aplică la: Se declanşează înainte ca elementul să fie descărcat. frame. window onBeforeUpdate Se declanşează înainte ca datele sursă ale elementului să fie actualizate. form.3 Se aplică la: form onCut Se declanşează atunci când se mută (Cut) un element. Se aplică la: window. form. form. form.select.text.select. form. Se aplică la: document onChange Se declanşează atunci când elementul pierde focus-ul iar conţinutul său a fost schimbat. form.fileupdate. form.radio. form. form. form. form. .reset.button. form. form.submit onBlur Se declanşează atunci când elementul pierde focus-ul.option.submit onContextMenu Se declanşează atunci când se execută clic cu butonul drept al mouse-ului pentru a deschide meniul contextual. form. form.checkbox. frame. form.select.password.button.radio.password. Se aplică la: document.fileupdate. Se aplică la: document. form. Se aplică la: form.radio.reset. form onControlSelect Se declanşează înainte ca elementul să fie selectat.textarea.reset. form. form. (continuare) Figura 6. form. form. form. form onCopy Se declanşează atunci când se copiază un element. form. Se aplică la: document.hidden. form.submit onCellChange Se declanşează atunci când datele se schimbă în obiectul sursă.checkbox. Se aplică la: window.textarea onClick Se declanşează atunci când se execută clic pe un element. form. form. document.

194
Se aplică la:

document, form onDblClick
Se declanşează atunci când se execută dublu click pe element.

Se aplică la:

document,

form,

form.button,

form.checkbox,

form.option, form.reset onDeActivate

Se aplică la:

Se declanşează atunci când un alt element devine activ în documentul părinte.

window, frame, form onDrag
Se declanşează atunci când un element este deplasat.

Se aplică la:

document, form onDragDrop
Se declanşează atunci când ceva este deplasat şi apoi eliberat.

Se aplică la:

window, frame onDragEnd
Se declanşează atunci când un element deplasat este la finele deplasării.

Se aplică la:

document, form onDragStart
Se declanşează la începutul deplasării elementului.

Se aplică la:

document, form, form.fileupdate, form.select, form.textarea onDrop

Se aplică la:

Se declanşează atunci când un obiect este depus peste un element după deplasare.

document, form onError
Se declanşează atunci când se generează o eroare în raport cu un element.

(continuare)

Figura 6.3

Se aplică la:

window, frame

onFocus

Se declanşează atunci când elementul primeşte 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 declanşează înainte ca elementul să primească focus-ul (înaintea evenimentului focus).

form onFocusOut
Se declanşează după ce elementul pierde focus-ul, imediat după ce un alt element a primit focus-ul.

Se aplică la:

form onHelp
Se declanşează atunci când se acţionează 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 declanşează atunci când se acţionează 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 declanşează atunci când se menţine apăsată 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 declanşează atunci când 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 declanşează atunci când elementul este complet încărcat.

window, frame onMouseDown
Se declanşează atunci când se acţionează 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 declanşează atunci când 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 declanşează atunci când pointer-ul mouse-ului părăseşte 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 declanşează atunci când 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 declanşează atunci când 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 declanşează atunci când elementul este deplasat de către utilizator sau de script.

window, frame, form onMoveEnd
Se declanşează la finele deplasării elementului.

Se aplică la:

window, frame, form

197
onPropertyChange

Se aplică la:

Se

declanşează

atunci

când

se

modifică

o

proprietate

a

elementului.

document, form onReset
Se declanşează atunci când formularul este resetat (se execută clic pe butonul Reset).

Se aplică la:

form onResize
Se declanşează înainte ca elementul să fie redimensionat.

Se aplică la:

window, frame, form, form.fileupdate, form.password, form.select onResizeEnd
Se declanşează la finele redimensionării elementului.

Se aplică la:

window, frame, form onResizeStart
Se declanşează atunci când utilizatorul începe redimensionarea elementului.

Se aplică la:

window, frame, form onScroll
Se declanşează atunci când fereastra începe să defileze.

Se aplică la:

window, frame onSelect
Se declanşează atunci când este selectat conţinutul elementului.

Se aplică la:

form.fileupdate, onSubmit

form.password,

form.text,

form.textarea, form.submit

(continuare)

Figura 6.3

Se declanşează înaintea expedierii unui formular.

Se aplică la:

form onUnLoad

(continuare)

Figura 6.3

Se declanşează înainte ca elementul să fie descărcat.

Se aplică la:

window

Aplicaţii ‰ Creaţi gestionarul de evenimente onLoad.

198
Iată cum procedăm pentru a crea gestionarul de evenimente onLoad, care conţine o instrucţiune (alert) care afişează o casetă de avertisment ce conţine mesajul: ”Învăţaţi să priviţi dincolo de aparenţe!”.
1. Definiţi evenimentul care urmează a fi declanşat. Evenimentul care se declanşează (atunci când ultimul caracter al unui document HTML a fost încărcat în navigator) este load căruia îi corespunde gestionarul de evenimente onLoad. 2. Introduceţi numele gestionarului (onLoad) în tag-ul body (figura 6.4).

Figura 6.4 3. Introduceţi, în continuare după semnul egal, instrucţiunea JavaScript alert, plasată între ghilimele (figura 6.5).

Figura 6.5

Remarci:

9 În această etapă este important să vă întrebaţi: ce va produce gestionarul de evenimente onLoad? 9 Atunci când definiţi un gestionar de evenimente onLoad pentru tag-ul <body> evenimentul (Load) este declanşat la finele încărcării documentului. 9 Gestionarul de evenimente onLoad (definit în tag-ul <body>) afişează o casetă de
avertisment odată cu terminarea încărcării paginii Web. Navigatorul verifică dacă un gestionar de evenimente onLoad este definit în tag-ul <body>. În situaţia în care acesta este identificat, se execută instrucţiunea JavaScript plasată între ghilimele, după semnul egal. Astfel, după încărcarea paginii se afişează o casetă de avertisment pentru a vă avertiza că nu este rău să învăţaţi să priviţi dincolo de aparenţe! 9 În măsura în care gestionarul de evenimente este declanşat odată ce documentul (X)HTML a fost încărcat şi afişat nu puteţi utiliza în gestionarul de evenimente onLoad instrucţiunea document.write sau document.open. 9 Începând cu versiunea 1.1 a limbajului JavaScript, imaginile pot avea şi ele un gestionar de evenimente onLoad. Atunci când definiţi un gestionar de evenimente onLoad pentru un tag <img>, evenimentul (Load) este declanşat la finele încărcării imaginii. 9 În tag-ul <body> puteţi de asemenea defini gestionarul de evenimente onUnLoad. Evenimentul UnLoad este declanşat atunci când se încarcă un nou document sau când fereastra navigatorului este închisă.

199
4. Completaţi structura HTML a documentului (figura 6.6).

Figura 6.6 5. Afişaţi pagina Web într-un browser (figura 6.7).

Figura 6.7
Remarci:

9 Atunci când utilizatorul încarcă această pagină Web într-un navigator, gestionarul de evenimente onLoad asociat paginii Web (sau documentului) unde se execută această 9 Încărcarea acestei pagini Web are ca efect apariţia mesajului: ”Învăţaţi să priviţi dincolo
de aparenţe!”.
acţiune, va fi activat.

‰ Modificaţi structura gestionarului de evenimente onLoad pe care l-aţi creat în aplicaţia precedentă, utilizând mai multe instrucţiuni JavaScript. Iată cum modificăm (Varianta 1, Varianta 2) structura gestionarului de evenimente

onLoad pe care l-am creat în aplicaţia precedentă, utilizând de această dată mai multe
instrucţiuni JavaScript.

Varianta 1 (figura 6.8)

200

Figura 6.8
Remarci:

9 În această variantă, gestionarul nu conţine decât două instrucţiuni (separate prin punct
şi virgulă) dar el poate să conţină foarte bine oricâte instrucţiuni dorim.

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

9 În această variantă instrucţiunea de atribuire. pagina_incarcata=true;
este necesară pentru a indica navigatorului că poate interacţiona cu utilizatorul.

Varianta 2 (figura 6.9)

Figura 6.9

Remarci:

9 Gestionarul de evenimente onLoad apelează o funcţie (execut•_Inc•rcare) cu 9 Parametrul incarca al funcţiei definite primeşte valoarea TRUE ce se atribuie variabilei (locale) pagina_incarcata.
un parametru.

‰ Utilizaţi un formular (X)HTML pentru afişarea următoarelor mesaje de încărcare şi descărcare a unei pagini Web. 9 ”Pagina este în curs de încărcare!”;

201
9 ”Pagina a fost încărcată” 9 ”La revedere!” (mesajul se va afişa într-o casetă de avertisment!)
Remarcă. Obiectul Form este prezentat în detaliu în Conversaţia 8.

În figura 6.10 se prezintă documentul (X)HTML complet.

Figura 6.10
Remarci:

9 Tag-ul <body> conţine doi gestionari de evenimente: ƒ onLoad; ƒ onUnLoad. 9 Gestionarul onLoad este activat în momentul în care pagina a fost încărcată integral. 9 Gestionarul onUnLoad este activat în momentul în care încărcaţi o altă pagină Web în
navigator.

9 Nu este întotdeauna recomandabil să afişaţi o casetă de avertisment atunci când

vizitatorul părăseşte o pagină Web. Numeroşi vizitatori nu agreează ideea de a executa clic într-o casetă de avertisment pentru a putea părăsi pagina dumneavoastră Web. În consecinţă, această tehnică trebuie exploatată cu prudenţă!

‰ Creaţi script-uri care afişează mesaje în bara de stare a navigatorului. Indicaţie. Una din aplicaţiile curente ale gestionarilor de evenimente este afişarea unui mesaj în bara de stare a navigatorului atunci când 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 când treceţi cu mouse-ul pe deasupra link-ului, iar evenimentul MouseOut se produce atunci când vă deplasaţi cu mouse-ul în zona exterioară legăturii. Cele două evenimente sunt utilizate pentru a modifica textul care se afişează în bara de stare a navigatorului.
Remarcă. În mod implicit, URL-ul unei legături se afişează în bara de stare a navigatorului în momentul în care treceţi cu mouse-ul pe deasupra legăturii.

202
Gestionarul de evenimente onMouseOver vă permite să afişaţi un mesaj personalizat în bara de stare a navigatorului, care corespunde unui link anume. Pentru aceasta, utilizaţi proprietatea JavaScript status. Gestionarul de evenimente onMouseOut este utilizat pentru a şterge textul afişat în bara de stare în momentul în care mouse-ul este deplasat în exteriorul legăturii.
Remarci:

9 Atunci când utilizaţi gestionarul de evenimente onMouseOver pentru a afişa mesaje în
bara de stare, în momentul în care executaţi clic pe un link, mesajul personalizat înlocuieşte URL-ul afişat în mod implicit. Asigura•i-v• c• mesajul

dumneavoastr• este cel pu•in 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 aceleaşi elemente ca şi onMouseOver. Iată cum creăm un script care afişează următoarele mesaje în bara de stare: ƒ comandaţi cartea (X)HTML; ƒ comandaţi cartea DREAMWEAVER MX; ƒ comandaţi cartea XML. Aceste mesaje vor dispare atunci când mouse-ul nu se va afla deasupra acestor mesaje, care reprezintă link-uri ce se afişează într-o listă simplă. 1. Definiţi o funcţie (descriere) care acceptă un parametru (text) pentru a afişa un mesaj în bara de stare (figura 6.11).

Figura 6.11
Remarci:

9 Parametrul text conţine mesajul care se va afişa în bara de stare a navigatorului. 9 Întrucât funcţia returnează TRUE, în bara de stare se va continua să se afişeze mesajul
până când acesta va fi şters.

2. Definiţi o funcţie (•tergere) pentru a şterge mesajul, apelabilă din gestionarul de evenimente onMouseOut (figura 6.12).

Figura 6.12

adăugând cunoscutele tag-uri <script> (figura 6. 9 Fiecare link conţine un gestionar onMouseOver şi onMouseOut pentru a apela funcţiile de afişare şi ştergere a mesajelor în bara de stare. onMouseOut) care apelează cele două funcţii: descriere.203 3. stergere) sunt definite în header-ul documentului. stergere (figura 6. Afişaţi pagina Web într-un navigator (figura 6. Completaţi structura (X)HTML a documentului adăugând: link-urile propriu-zise şi gestionarii de evenimente (onMouseOver.13 4.15). Figura 6. Completaţi script-ul.13). Figura 6.14 Remarci: 9 Funcţiile (descriere. .14). 5.

204 Figura 6. .16 Utilizaţi gestionarul de evenimente combinat cu metoda ‰ onMouseOver setTimeOut. funcţia necesară pentru ştergerea textului din bara de stare trebuie să cuprindă două etape: 9 Etapa 1 – Definirea mesajului (textului) care urmează să se afişeze în bara de stare. De exemplu. ca un şir de caractere specific. JavaScript include o metodă setTimeOut care permite instalarea evenimentelor temporizator (cronometrate).16). Figura 6. puteţi utiliza metoda setTimeOut împreună cu onMouseOver pentru a afişa un mesaj în bara de stare a navigatorului într-o perioadă de timp predefinită şi a-l şterge după aceea. 9 Etapa 2 – Aşteptarea unei perioade de timp predefinite şi apoi ştergerea mesajului afişat în bara de stare. Testaţi script-ul (figura 6. Indicaţie.15 6. În principiu.

20).17).18). Adăugaţi instrucţiunea return true (figura 6.status (figura 6. 4.205 Iată cum creăm un script care afişează timp de 4 secunde în bara de stare a navigatorului mesajul: ”Singurătatea este mai grea decât orice boală!” pe care apoi îl şterge! 1. Completaţi script-ul şi plasaţi-l în antet-ul documentului (figura 6. Definiţi o funcţie (descriere) în care includeţi instrucţiunea window. Figura 6. 9 Al doilea parametru precizează perioada de timp predefinită – trebuie aşteptat 4 secunde. 3. Instrucţiunea return true precizează navigatorului că funcţia descriere este pregătită pentru a interacţiona cu utilizatorul.19 Remarcă.18 Remarci: 9 Primul parametru defineşte starea ferestrei la o valoare null (’’). . Figura 6. Figura 6.19). Adăugaţi metoda setTimeOut (figura 6.17 2.

Adăugaţi în corpul documentului în tag-ul <a>. Afişaţi pagina Web într-un navigator (figura 6.21 6.21).206 Figura 6.23).22). instrucţiunea onMouseOver=”descriere().22 7.” (figura 6.20 5. . Figura 6. Testaţi script-ul (figura 6. Figura 6. return true.

Atribuiţi funcţia (clicmouse) gestionarului de evenimente onMouseDown (figura 6.25).25 Remarcă. Aveţi de asemenea posibilitatea să creaţi gestionari de evenimente condiţionali. puteţi crea o funcţie JavaScript care va face oficiul de gestionar de evenimente.24). Iată cum creaţi pentru un document gestionarul de evenimente dinamic onMouseDown.207 Figura 6. . Gestionarii de evenimente dinamici sunt stocaţi sub formă de proprietăţi ale obiectului Document sau ale unui alt obiect căruia i se poate atribui un eveniment.24 2.26). 3. În loc să creaţi un gestionar de evenimente în interiorul unui document (X)HTML. Figura 6. Completaţi script-ul şi structura (X)HTML a documentului (figura 6. de a-i activa sau a-i dezactiva. sau încă de a modifica funcţia (ca gestionar de evenimente) de o manieră dinamică. Figura 6. Creaţi o funcţie (clicmouse) pe care o definiţi ca gestionar de evenimente (figura 6. 1.23 ‰ Creaţi gestionari de evenimente dinamici. Pentru aceasta este suficient de a crea funcţia şi de a o defini ca gestionar de evenimente. Indicaţie.

Afişaţi pagina Web într-un navigator (figura 6. Figura 6. .26 4. Testaţi script-ul (figura 6. ‰ Creaţi un script care afişează în bara de stare a navigatorului Internet Explorer.208 Figura 6.27).28).28 ‰ Creaţi un script care afişează într-o casetă de dialog de avertizare care buton al mouse-ului a fost utilizat. Figura 6.27 5. Netscape caracterele pe care le-aţi tastat.

KeyCode în Internet Explorer? 5. ƒ onClick. ƒ onDblClick. ƒ onReset. ƒ onKeyPress. 2. ƒ onMouseOver. ƒ onMouseUp. Exemple. Care este rolul proprietăţii event. . Ce este un gestionar de evenimente. ƒ onChange.209 JavaScript Testaţi-vă cunoştinţele Temă 1. ƒ onMouseDown. Când se apelează următorii gestionari de evenimente: ƒ onUnLoad. ƒ onMouseOut. Care sunt gestionarii de evenimente care permit detectarea unui clic pe un link? 3. ƒ onSubmit. Când se execută gestionarul de evenimente onLoad din tag-ul <body>? 4.

developer 9 livesoftware.javascript.comp.status=text.com 9 www. Comentaţi următoarea instrucţiune JavaScript: <b onDblClick=”alert (’Nu este nimic întâmplător!’)”> Test </b> Vizitaţi site-urile 9 javascript.javascripts.examples 9 de.javascript 9 livesoftware.lang. return true.javascript. <script language="javascript" type="text/javascript"> function test (text){ window.lang.210 ƒ onSelect.29). 6. Comentaţi următorul script (figura 6.com 9 www.javascript.javascript .internet.com 9 comp.29 </script> 7. } Figura 6.

Number. cu ajutorul cărora script-urile dumneavoastră vor putea manipula paginile Web. . Obiectivul acestui model (DOM) este acela de a vă oferi o interfaţă (între două feţe există . RegExp.Conversaţia 7 Obiectele navigatorului ••••••••••••••••••••••••••••••••••••••••• •••• În această conversaţie: f f f f f f f f ••••••••••••••••••••••••••••••••••••••••• •••• Document Object Model (DOM) Obiectul Window. Function. Obiectele pe care le veţi utiliza cel mai des. Cu o parte din obiectele DOM-ului aţi făcut deja cunoştinţă. proprietăţile. Date. Aplicaţii Obiecte de nivelul 1 Obiecte de nivelul al doilea Obiecte de nivelul al treilea Obiecte de nivelul al patrulea Obiectul Navigator. Aplicaţii Temă Document Object Model (DOM) În conversaţiile anterioare am acordat atenţie limbajului de programare JavaScript şi obiectelor interne ale acestuia (Arguments. metodele şi evenimentele acestora. pe parte de client sunt cele care aparţin DOM-ului (Document Object Model).. String. Object. Math. Array. This).. ferestrele şi documentele. Boolean. o interfaţă!) simplă şi coerentă între programele JavaScript şi navigatorul Web. DOM-ul defineşte obiectele disponibile.

2. puteţi vedea că cele mai multe obiecte sunt fie pe parte de client sau pe parte de server.1 sunt prezentate obiectele pe parte de client şi tag-urile (X)HTML corespunzătoare. Lista obiectelor JavaScript este prezentată în ordine alfabetică în figura 7. DOM-ul mai conţine şi alte obiecte ierarhizate (structură arborescentă). Obiect JavaScript Tag (X)HTML corespondent Figura 7. Majoritatea obiectelor JavaScript sunt reprezentări ca obiecte ale tag-urilor (X)HTML.3. Remarcă.212 În afară de aceste obiecte. Ierarhia obiectelor Când examinaţi îndeaproape ierarhia generală a obiectelor în JavaScript. obiectul Window aflându-se în vârful arborescenţei.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 măsură ce veţi examina aceste obiecte veţi vedea modalităţile diverse în care ele sunt prezentate utilizatorilor şi programatorilor în limbajul JavaScript. iar ierarhia obiectelor este ilustrată în figura 7. În figura 7. În această lucrare vom examina obiectele numai pe parte de client şi vom prezenta proprietăţile şi metodele lor. .

9 Obiecte de nivelul al patrulea: Option. pe parte de client. Submit. Form. Style. Event. Textarea. History. Reset. ci obiecte. . Layer. 9 În cea mai mare parte modelul obiectului este constituit din elemente (X)HTML care sunt 9 Dacă până acum aţi programat în limbajului (X)HTML. „transpuse în obiecte”. Plugin. Area. Remarci: 9 Obiectele limbajului JavaScript pe parte de client reprezintă instrumente importante cu ajutorul cărora puteţi genera script-uri. Radio. Image.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. Link. Password.3 Obiectele sunt ierarhizate după cum urmează: 9 Obiectul Window. Text. Location.213 button event hidden MimeType option plugins screen Figura 7. Checkbox. de nivelul cel mai înalt (nivelul 0). Hidden. din acest moment trebuie să abordaţi elementele (X)HTML ca fiind nu tag-uri. FileUpload. Select. 9 Obiecte de nivelul al treilea: Button. Applet. 9 Obiecte de nivelul al doilea: Anchor. Frame. 9 Obiecte de nivelul 1: Document.

organizate într-o structură arborescentă reprezintă conţinutul şi componentele unui document Web.5 Form cu numele Descriere Reprezintă navigatorul Web Reprezintă fişierul XHTML Reprezintă tag-ul <form> definit în fişierul XHTML Reprezintă zonele de text definite în formular Trei obiecte input cu numele: „nume”. „prenume”.4) care ilustrează modul în care un fişier (X)HTML stabileşte corespondenţa cu DOM-ul navigatorului. cunoscute sub numele de Document Object Model (DOM). Aceste obiecte. . navigatorul Web foloseşte un ansamblu complet de obiecte ale DOM-ului pentru a le reprezenta (vezi figura 7. Iată un exemplu simplu (figura 7. Obiect Obiectul Window Obiectul Document Un obiect „demo” Figura 7. Evident.214 9 JavaScript utilizează o ierarhie de obiecte: părinte-fiu.6 se prezintă modul de imbricare al obiectelor create.4 În cursul încărcării fişierului XHTML.5). mai sunt create şi alte obiecte. „emai”l Remarcă. Figura 7. ca de exemplu matricea formularelor forms[]. În figura 7.

6 Obiectul Input – „email” Istoricul DOM-ului Obiectele navigatorului sunt exterioare limbajului JavaScript dar sunt recunoscute de către navigatoare. Această normă nu conţine decât obiectele de bază.215 Obiectul Window Obiectul Document Obiectul Form “demo” Obiectul Input – „nume” Obiectul Input – „prenume” Figura 7. după încărcarea sa (Dinamic HTML). Ierarhia obiectelor de care noi vorbim în această conversaţie este cunoscută sub numele de DOM 0 iar obiectele sunt incluse în norma DOM 1.0 toate obiectele de bază sunt luate în considerare de către cele două browser-e. Remarcă. Obiectele DOM de nivel 1 şi 2 permit modificarea unei pagini Web în timp real. . Remarcă. După Netscape 3. O normă de nivel 2 este în curs de apariţie. Fişa obiectului Window este prezentată în figura 7.0 şi Internet Explorer 4. W3C (World Wide Web Consortium) a pus recent la punct norma DOM de nivel 1.7. Din păcate există încă diferenţe între navigatoare. Obiectul Window Obiectul Window de nivelul cel mai înalt reprezintă fereastra navigatorului în care este afişat obiectul Document. Fiecare fereastră a navigatorului şi fiecare cadru au propriul lor obiect Window. toate obiectele acoperind integral componentele unui document (X)HTML. Nu uitaţi că un obiect Window şi proprietăţile sale pot fi atribuite unei variabile JavaScript ca orice alt obiect. care nu de puţine ori se manifestă în mod supărător. iar noile norme DOM sunt recunoscute de ultimele versiuni Netscape şi Internet Explorer.

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 acelaşi timp, fiecare reprezentând o fereastră a navigatorului deschisă. 9 Cadrele (frames, în limba engleză) sunt de asemenea reprezentate prin obiecte Window (vezi Conversaţia 10). 9 Straturile (layers, în limba engleză) care permit modificarea în mod dinamic a conţinutului unui document Web sunt analoage obiectelor Window (vezi Conversaţia 10).

Fişa obiectului Window
Subobiecte: Proprietăţi:

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

Proprietăţile fundamentale ale obiectului Window
Cele mai importante proprietăţi ale obiectului Window sunt prezentate în detaliu în figura 7.8.
Proprietate Sintaxă

closed

window.closed

Figura 7.8

Conţine valoarea true (fereastra este închisă) sau false (fereastra este deschisă).

defaultStatus

window.defaultStatus

Conţine un şir de caractere reprezentând textul afişat în mod implicit în bara de stare. El rămâne valabil atâta timp cât conţinutul ferestrei nu se schimbă.

Exemplu:

<script>window.defaultStatus=”La mulţi ani împreună!” </script>

217
document window.document

Proprietatea document corespunde obiectului Document.

frames[]

window.frames[]

Conţine un obiect window pentru fiecare cadru al site-ului Web.

history
obiectul History).

window.history

Un obiect care conţine lista de site-uri (istoricul) Web vizitate (vezi

length

window.length

Numărul de cadre conţinute în fereastră.

name

window.name

Numele obiectului Window. Acest nume este diferit de numele variabilei JavaScript care conţine obiectul Window.

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

Exemplu:

Obiectul Navigator conţine informaţii 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 proprietăţilor şi metodelor obiectului window pot fi aplicate proprietăţii opener).

(continuare)

outerHeight

window.outerHeight

Înălţimea (în pixeli) documentului afişat în fereastră (incluzând bara de meniuri, bara de instrumente, bara de stare).

outerWidth

window.outerWidth

Lăţimea (în pixeli) documentului afişat în fereastră (incluzând bara de meniuri, bara de instrumente, bara de stare).

parent

window.parent

Referinţă la fereastra/cadrul părinte al ferestrei/cadrului curent.

screen
Figura 7.8

window.screen

Conţine informaţii privind configuraţia ecranului de pe monitorul clientului.

self

window.self

218

Exemplu:

Referinţa la fereastra curentă. Identică cu window (window.window).

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

window.status

(continuare)

Conţine un şir de caractere care va fi temporar afişat în bara de stare a navigatorului.

top

window.top

Referinţa către 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 conţine un buton OK şi mesajul Afi specificat. Apelarea metodei opreşte execuţia programului JavaScript până când utilizatorul execută clic pe butonul OK pentru a continua. Metoda alert() este folosită şi ca instrument de depanare a script-urilor (vezi Conversaţia 11).

back()
la pagina Retur History).

window.back() back()
precedentă afişată î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 către utilizator).
confirm()
şează o casetă de dialog care conţine 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 menţionată ca şi când 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 către

Transmite focus-ul ferestrei curente.
forward()

Obligă navigatorul să încarce documentul următor î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 colţul superior stânga al ecranului.
Exemplu: <script> (continuare)

window.moveTo(x,y) moveTo(x,y) Deplasează fereastra la poziţia 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, Înlocuieşte)

220
open(URL,Nume,Atribute, Înlocuieşte)

Exemplu:

Deschide o nouă fereastră a navigatorului şi returnează un obiect Window pentru a o reprezenta. Dacă apelaţi metoda open() fără parametri, veţi obţine o fereastră vidă. Pentru a vedea ceva mai interesant, transmiteţi următorii patru parametri respectând secvenţa de mai jos: ƒ URL – adresa Web a paginii Web care doriţi 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. ƒ Înlocuieşte este o valoare logică (true, dacă istoricul ferestrei este şters). Metoda returnează o referinţă la noua fereastră. Atributele pot lua valoarea adev•rat sub forma true, yes sau 1 sau valoarea false sub forma false, no sau 0. Semnificaţia atributelor este următoarea: 9 toolbar – afişează/ascunde bara de instrumente a browser-ului 9 location – prezenţa barei de adrese 9 directories – afişează/ascunde o bară de instrumente (Netscape) secundară cu butoane familiare 9 status – afişează/ascunde bara de stare a navigatorului 9 menubar – afişează/ascunde bara de meniuri a navigatorului 9 scrollbars – afişează/ascunde barele de derulare pe verticală şi orizontală ale browser-ului 9 resizable – permite/interzice redimensionarea ferestrei de browser 9 width – lăţimea în pixeli a ferestrei 9 height – înălţimea în pixeli a ferestrei <script> newfereastra=window.open(”test.htm”,”titlu”,”toolbar’no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, width=100, height=100”); </script>

print()

window.print() print() window.prompt(”Mesaj”,ConţinutImplicit) prompt(”Mesaj”,ConţinutImplicit)

Imprimă conţinutul ferestrei.

prompt()

(continuare) Exemplu:

Figura 7.9

Afişează o casetă de dialog care conţine mesajul specificat, o zonă de text pe care o completează utilizatorul, butonul OK şi butonul de anulare. Al doilea argument este facultativ. Răspunsul implicit specificat în prompt() este afişat în zona de text. Utilizatorul poate introduce o altă valoare sau poate executa clic pe butonul OK pentru a accepta răspunsul implicit. Dacă el execută clic pe butonul OK, valoarea conţinută î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,Lăţime) resizeTo(Lungime,Lăţime) Redimesionează fereastra navigatorului la Lungime şi Lăţime <script> self.resizeTo(50,325); </script> scroll()

Exemplu:

specificate (în pixeli).

Face să defileze conţinutul unei ferestre până la poziţia specificată (x şi

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

y) în raport cu colţul din stânga sus al ferestrei.
Remarcă. Metoda este depăşită.

Exemplu: (continuare)

(lăţime) în raport cu colţul din stânga sus al ferestrei.

window.scrollTo(x,y) scrollTo(x,y) Face să defileze conţinutul unei ferestre până la poziţia 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 instrucţiune setInterval()
JavaScript sau apelul unei funcţii. Interval este prezentat în milisecunde. Argumente sunt transmise funcţiei 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
instrucţiune sau apelul unei funcţii executată fără sfârşit.

222
Exemplu:

Exemplu:

window.setTimeOut(Expresie, Durata,Argumente) setTimeOut(Expresie, Durata,Argumente) Execută Expresie după Durata (în milisecunde). Expresie poate fi apelul setTimeout()
unei funcţii. Argumentele (facultative) sunt transmise funcţiei apelate.
Remarcă. Metoda

clearTimeOut()

anulează

efectul

metodei

setTimeOut().

(continuare)

Figura 7.9

223
Rezultatele execuţiei script-ului.

(continuare)

Figura 7.9

Aplicaţii ale obiectului Window
Una din aplicaţiile cele mai interesante ale obiectului Window este crearea şi închiderea unei noi ferestre. Vă prezentăm în cele ce urmează câteva aplicaţii simple, reprezentative pentru metodele şi proprietăţile obiectului Window. ‰ Creaţi un document (X)HTML care conţine un script (simplu) ce utilizează butoane pentru crearea şi închiderea unei ferestre. Indicaţie. Folosiţi 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 executând 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 (câte unul pentru fiecare buton).

În figura 7.11 este prezentată pagina Web afişată în Internet Explorer, cu noua fereastră deschisă.

Figura 7.11

Afişaţi în bleu cuvintele pe care le definiţi. Dacă aceste valori au fost introduse se apelează metoda self. 9 Funcţia Demo() verifică dacă aţi introdus valori pentru abscisă(x) şi ordonată(y). Dacă aceste valori au fost introduse se apelează metoda self.12 este prezentat documentul XHTML complet. 9 Funcţia Demo() verifică dacă aţi introdus valori pentru lungime şi lăţime.moveTo() pentru a deplasa fereastra. ‰ Creaţi un mic dicţionar pentru vizitatorii site-ului dumneavoastră.12 Remarci: 9 Funcţia Demo() este apelată ca un gestionar de evenimente atunci când executaţi clic pe butonul „modificaţi dimensiunile ferestrei”.resizeTo() pentru a modifica dimensiunile ferestrei curente. . se va deschide o fereastră în care se afişează o scurtă definiţie a cuvântului selectat (figura 7. În figura 7. Personalizaţi script-ul creat.225 ‰ Creaţi un document (X)HTML care conţine un script (simplu) pentru deplasarea şi modificarea ferestrelor. Figura 7.13). Ori de câte ori utilizatorul va executa un clic pe unul din aceste cuvinte.

14 . Punerea în pagină va fi asigurată în toate circumstanţele.13 ‰ Scrieţi un program JavaScript care ajustează în mod automat dimensiunea caracterelor unui text la dimensiunile ferestrei. Dimensiunea caracterelor se va recalcula la fiecare redimensionare a ferestrei. cu atât caracterele sunt mai mari.14. Cu cât fereastra este mai mare.226 coriamb Un dactil si un troheu Figura 7. figura 7. Script-ul redefineşte stilul caracterelor pentru întreg documentul de fiecare dată când fereastra îşi schimbă dimensiunile (figura 7. Figura 7. Definiţi dimensiunea de bază a caracterelor pentru dimensiuni precise ale ferestrei.15).

16 ‰ Creaţi un script pentru a afişa trei casete de dialog cu ajutorul metodelor alert().15 ‰ Comentaţi următorul document XHTML care conţine un script pentru actualizarea periodică a conţinutului unei pagini Web (figura 7. Indicaţie. . Figura 7.16). confirm(). Revedeţi metoda setTimeOut() prezentată în figura 7.17 este afişat documentul complet XHTML. În figura 7.227 Figura 7.9. prompt().

19. 7. fiecare dintre ele apelând câte un gestionar de evenimente pentru a afişa o casetă de dialog.228 Figura 7.20 sunt prezentate rezultatele execuţiei programului JavaScript. 7.17 Remarcă. În figurile 7. Figura 7.18. Documentul afişează trei butoane.18 .

229 Figura 7.20 Obiecte de nivelul 1 Obiectul Window. Remarcă. Aceste obiecte sunt considerate obiecte de nivelul 1. cu excepţia obiectului Navigator.. Style. Este important să faceţi cunoştinţă cu aceste obiecte. History. să rămâneţi împreună! Ele sunt: 9 9 9 9 9 9 Document. Event.. şi . Location. considerat ca fiind obiectul de cel mai înalt nivel în ierarhia obiectelor JavaScript pe parte de client conţine toate celelalte obiecte pe parte de client. .19 Figura 7. Frame.

Programele la care ne referim nu utilizau decât o fereastră. anchors[]. era inutil să folosiţi descrierea completă window. close(). createStyleSheet().230 Obiectul Document Manipularea documentelor Web Obiectul Document reprezintă pagina Web afişată într-o fereastră a navigatorului. onMouseOut. title. scripts[]. onBeforeEditFocus. write(). onBeforeDeActivate. getSelection(). getElementsByName(). setActive(). onPaste. fileCreatedDate. Applet. location. style. plugins[]. characterSet. layers[]. childNodes[]. onKeyUp. background. onPropertyChange. URL. onMouseDown. onSelectStart. innerText. parentWindow. readyState. Form. height. links[]. onMouseUp. onBeforePaste. onDragEnter. onHelp. protocol. bgColor. outerHTML. selection.document pentru a vă referi la documentul curent sau. În programele JavaScript din conversaţiile precedente aţi făcut apel la metoda document. onDrop. alinkColor. createElement(). puteţi utiliza window. embeds[]. Fişa obiectului Document este prezentată în figura 7. onMouseOver. attributes[]. images[]. onDragStart. frames[]. Nu pare deci surprinzător faptul că obiectele Document sunt fii ai obiectelor Window. utilizaţi numai document. fileSize. getElementByld(). cookie. onDrag. onKeyPress. Image. vlinkColor. getElementsByTagName(). onClick. charSet. onBeforeUpdate. onSelectionChange. onCellChange.write pentru a afişa un text într-un document Web. lastModified. onDragEnd. onBeforeCut. Link.document. outerText. Dacă mai multe ferestre sau mai multe cadre sunt deschise. onKeyDown. Pentru a utiliza un astfel de obiect Document ne folosim de numele ferestrei urmat de numele obiectului. onCut. elementFormPoint(). în consecinţă. mai simplu.write.21 Window Anchor. domain. Layer. forms[]. open(). Fişa obiectului Document Obiectul părinte: Subobiecte: Proprietăţi: Metode: Gestionarii de evenimente: Figura 7. stylesheets[]. innerHTML. onDblClick. onContextMenu. Remarcă. fgcolor. onDragLeave. onStop . body. onControlSelect. Area. width clear(). În măsura în care obiectul Window reprezintă întotdeauna fereastra activă (cea care conţine script-ul). Plugin activeElement. fileModifiedDate. all[]. referrer. atunci vor exista mai multe obiecte window şi un singur obiect Document pentru fiecare dintre ele. applets[]. defaultcharset.21. writeln onActivate. onDragOver.

231 Proprietăţile fundamentale ale obiectului Document Proprietăţile fundamentale ale obiectului Document sunt prezentate în detaliu în figura 7.alinkColor).tags("p"). Elementele sunt referite prin numărul lor de ordine sau prin numele lor. Fiecare element este o dată al matricii (array) all[].write("<br />Legaturi vizitate: "+document. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. atribuiţi o nouă valoare a culorii.write("<br />Legaturi: "+document.all[] Toate elementele documentului. document. document.write("<br />Legaturi active: "+document. Proprietate Sintaxă alinkColor document. Exemplu: Figura 7.22.org/TR/xhtml1/DTD/xhtml1-transitional.w3.write(para[0].org/1999/xhtml"> <head> <title>Aplicatie</title> <meta http-equiv="Content-Type" content="text/html.alinkColor Exemplu: Conţine culoarea atribuită link-urilor active. definită prin atributul alink al tag-ului <body>. charset=iso-8859-1" /> <script language="JavaScript" type="text/JavaScript"> document.22 <html xmlns="http://www.dtd"> <html xmlns="http://www.0 Transitional//EN" "http://www. Pentru a modifica culoarea link-ului. </script> </head> <body link="blue" alink="yellow" vlink="purple"> </body> </html> all[] document.id+"<br />").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. document.vlinkColor).jpg" name="sigla1" width="15" height="30" border="0" id="sigla1" /></p> <p id="doi">A doua imagine <img src="sigla. Utilizaţi metoda tags() pentru a obţine setul de elemente ale unui tag precis.w3. </script> </body> </html> . document.linkColor).org/1999/xhtml"> <head> <title>all[]</title> </head> <body> <p id="unu">O imagine <img src="sigla.w3.all.id+"<br />").write(para[1].

.. body document.232 anchors[] document. charset=iso-8859-1" /> </head> <body> <script language="JavaScript" type="text/JavaScript"> nouFer=window.close().body.body Referinţă la secţiunea body a documentului.cookie. Utilizarea unui cookie este puţin mai complicată. nouFer. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. </script> </body> </html> cookie document. body este un obiect care recunoaşte proprietăţile obiectului document.write(nouFer. .applets[] Matricea applets[] conţine toate applet-urile Java inserate în documentul (X)HTML..document."nou".dtd"> <html xmlns="http://www. </a>. bgColor document.write("<head><title>demo</title></head><body><b>La multi ani impreuna!</b></body>")..”> . applets[] documet."height=200.cookie Permite citirea şi configurarea valorii cookie-ului clientului pentru un document (X)HTML..anchors[] Matricea anchors[] conţine un obiect Anchor (ancoră) pentru fiecare set de tag-uri: <a name=”.. width=200"). Remarcă.cookie=numCookie.applets. .org/TR/xhtml1/DTD/xhtml1-transitional.0 Transitional//EN" "http://www. document..org/1999/xhtml"> <head> <title>document.body</title> <meta http-equiv="Content-Type" content="text/html.. //scrie cookie document. </applet>.open("".w3.length returnează numărul de applet-uri ale documentului.bgColor Exemplu: Culoarea de fond a documentului – numai atributul bgColor al tag-ului <body> (vezi proprietatea alinkColor).22 (continuare) . Citirea şi înregistrarea cookie-ului sunt foarte simple. Exemplu: Figura 7.document.. document. //citeste cookie var numCookie=document. Fiecare element al matricii corespunde unui set de tag-uri <applet> .innerHTML). nouFer..w3.

} </script> </body> </html> . un element incorporat este plasat între tag-urile <embed> şi </embed>.fgColor Culoarea textului.name+"<br />").embeds.forms[i]. document.embeds[] Matricea embeds[] conţine toate elementele incorporate în documentul (X)HTML.0 Transitional//EN" "http://www. Într-o pagină Web.org/TR/xhtml1/DTD/xhtml1-transitional.w3.w3.233 embeds[] document.forms. fgColor document.22 (continuare) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.length returnează numărul de elemente incorporate în document. Corespunde atributului text al tag-ului <body> (vezi proprietatea alinkColor).i<document. Formularele sunt reprezentate în documentul (X)HTML prin tag-ul <form>. document.write(document. Primul formular are rangul 0.length returnează numărul de formulare ale documentului.dtd"> <html xmlns="http://www.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. Fiecare formular este un element al matricii (array) forms[].length.i++){ document. forms[] document. Exemplu: Figura 7.forms[] Setul de formulare conţinute în documentul (X)HTML.forms.

Figura 7. text+="lowsrc= "+document.sigla.dtd"> <html xmlns="http://www. hspace.src+"<br />". Imaginile recunosc proprietăţile care corespund atributelor tag-ului <img/>: border.innerHTML Conţine codul HTML al documentului. În plus.sigla.hspace+"<br />".sigla. text+="vspace= "+document. width.w3. text+="height= "+document. Primul este de rang 0.write(text). text+="src= "+document. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. text+="complet= "+document.JPG" id="sigla" /> <script language="JavaScript" type="text/JavaScript"> text="Proprietatile imaginii: <br />". Fiecare imagine este un element al matricii (array) images[]. lowsrc. Ele sunt referite prin numărul lor de ordine sau prin numele lor.images. images[] document.border+"<br />". Ele sunt referite prin numărul lor de ordine sau prin numele lor. Document. text+="width= "+document.images[] Setul de imagini ale documentului.length returnează numărul de cadre ale documentului.vspace+"<br />".complete+"<br />". în limba engleză) afişate. document.234 frames[] document. src.frames[] Setul de cadre (frames.height+"<br />".sigla.org/1999/xhtml"> <head> <title>demo</title> </head> <body> <img src="sigla.0 Transitional//EN" "http://www.w3. document.name+"<br />". text+="hspace= "+document.22 (continuare) .sigla.width+"<br />". name.lowsrc+"<br />".sigla. vspace. </script> </body> </html> innerHTML document.sigla. text+="name= "+document.sigla. text+="border= "+document.length returnează numărul de imagini ale documentului. Ele sunt inserate cu tag-ul <img/>.sigla. Fiecare cadru este un element al matricii frames[].frames.jpg" name="sigla" width="150" height="300" hspace="5" vspace="10" border="0" lowsrc="siglamin. Acest atribut poate fi aplicat întregului obiect din document pentru a recupera sau pentru a modifica codul (X)HTML care îl închide. height.org/TR/xhtml1/DTD/xhtml1-transitional. proprietatea complete conţine valoarea true dacă Exemplu: imaginea s-a încărcat integral.

Este un obiect String.. definite prin atributul link al tag-ului <body>.layers.235 Exemplu: … <body> <p id=paragraf><b>text</b>demo</p> <script> element=document. alert(element.links[] Matricea links[] conţine un obiect Link pentru fiecare tag <a href=”.ro’”> </form> location document. linkColor document.length returnează numărul de straturi ale documentului.ro”>Link</a> <form> <input type=”button” value=”Schimba link-ul” onClick=”document. Setul de layer-e nu este recunoscut de Netscape. </script> … innerText document. Obiectele links au aceleaşi proprietăţi ca obiectul location. </script> layers[] document.lastModified Data şi ora ultimei modificări a documentului.href=’http://www.linkColor Exemplu: Codul culorii atribuite link-urilor din documentul (X)HTML.links[0].. links[] document. fără interpretarea tag-urilor.layers[] Setul de straturi reprezentate în pagina (X)HTML prin tag-urile <div> sau <layer>.getElementByld(”paragraf”). lastModified document..lastModified). <a href=”http://www.upg-ploiesti.write(document..”> </a> prezent în documentul (X)HTML.dumitrascu.location Figura 7.innerHTML). Pot fi accesate prin atributele id sau name. . <script> Document. document. Remarcă.innerText Exemplu: Recuperează sau defineşte codul (X)HTML ca pe un text.22 (continuare) Conţine URL-ul documentului. .

236 Exemplu: .fr”. Fiecare script este un element al matricii (array) scripts[].vlinkColor Codul culorii atribuit link-urilor vizitate în document. document. de exemplu http://www.write(“adresa actuala: ”+document..referrer URL-ul documentului de la care documentul curent a fost încărcat.dumitrascu. referrer document.22 (continuare) Titlul documentului. vlinkColor document. . scripts[] document.location. Această proprietate este puţin utilizată căci ea este echivalentă cu document.URL URL-ul documentului.length returnează numărul de script-uri ale documentului.location).plugins.scripts[] Setul de script-uri conţinute în documentul (X)HTML. Ele sunt reprezentate în document prin tag-ul <script>. <body> <script> document. </script> plugins[] document.title Figura 7.location=”http://www. Fiecare plug-in este un element al matricii plugins[]. acelaşi care este definit prin atributul vlink al tag-ului <body> (vezi proprietatea alinkColor). Ele sunt referite prin numărul lor de ordine. title document.scripts.href. document.plugins[] Setul de plug-ins conţinute în documentul (X)HTML.write(document. //se afişează.length returnează numărul de plug-ins ale documentului. document. cel care este specificat în tag-ul <title>.location). URL document.multimedia.ro </script> </body> Exemplu: … <script> document. Ele sunt referite prin numărul lor de ordine..

metoda returnează null.getElementById(id) Returnează sub formă de matrice (array) lista elementelor identificate prin nume sau id-ul indicat.align="center".237 Metodele fundamentale ale obiectului Document Cele mai utilizate metode ale obiectului Document sunt prezentate în detaliu în figura 7. </script> </body> . para[0]. documentul nu este afişat integral. Metoda nu este indispensabilă întrucât metoda write() care scrie în document realizează în mod automat deschiderea (open) şi închiderea (close) fluxului de date (vedeţi paragraful următor: „Ştergerea şi rescrierea conţinutului unui document”). Dacă nu există nici un element de tipul indicat.23. alert(Nav).close() şează datele încărcate dar care nu sunt încă afişate şi opreşte fluxul de Afi intrare al datelor în document. else if((document.getElementsByName("unu").getElementById)) Nav="IE5-IE6".align="center". Această metodă nu cere nici un argument.getElementsByName(Nume) Returnează sub formă de matrice (array) lista elementelor identificate prin nume sau id-ul indicat. </script> </body> <script language="JavaScript" type="text/JavaScript"> //Detecteaza navigatorul if(document.layers) Nav="NN4". Exemplu: <body> Figura 7. Dacă nu există nici un element de tipul indicat. Metodă Sintaxă close() document. else if(document.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.getElementByID)Nav="NN6". 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. para. Această metodă este folosită de asemenea pentru detectarea navigatorului. getElementById() Elementele dispun de proprietăţi şi de metode specifice obiectelor. metoda returnează null.getElementById("unu"). </script> getElementsByName() document. Dacă toate datele nu au fost încărcate.all)&&(document. document.

Exemplu: <script language="JavaScript" type="text/JavaScript"> fernoua=window. fernoua. . Cele două argumente sunt facultative.23 (continuare) caractere speciale (apostrof. text/plain."nou".open("".write(şir1.open(TipMime. </script> write() document.document.getElementsByTagName("p"). Al doilea argument precizează dacă datele vor înlocui documentul deja prezent în fereastra navigatorului (true) sau se vor adăuga celor existente (false). image/sc-bitmap. el[0]. width=400"). image/jpeg.open("". fernoua.write("<head><title>demo</title></head><body><b>La multi ani impreuna!</b></body>").document."height=200.write("<head><title>demo</title></head> <body><b>La multi ani impreuna!</b></body>").238 getElementsByTagName() document.document. de exemplu) introduceţi caracterele corespunzătoare.şir2) Introduce în document: date de tip caracter.getElementsByTagName(tag) Returnează sub formă de matrice (array) lista elementelor identificate prin tag-ul indicat. </script> Exemplu: <script language="JavaScript" type="text/JavaScript"> fernoua=window.document. fernoua. Remarcă.replace) Deschide documentul pentru a trimite datele care vor fi afişate cu metoda write().close(). metoda returnează null.align="center"."nou". fernoua. Pentru Figura 7. Această metodă nu este indispensabilă întrucât metoda write() care scrie în document realizează în mod automat deschiderea (open) şi închiderea (close) fluxului de date. 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. variabile şi tag-uri. plugIn (orice model plug-in Netscape de tip MIME)). image/gif. </script> </body> open() document. Cele două script-uri sunt echivalente."height=200. Primul argument indică tipul MIME al datelor (text/html. width=400").open(). Dacă nu există nici un element de tipul indicat.

figura 7.writeln(şir1. figura 7. În concluzie.write()/document.23) trimiteţi. care corespunde unei zone rezervate de date. Revenind la metodele open() şi close() ale obiectului Document Obiectul Document conţine metodele open() şi close() (vezi metodele obiectului Document. 9 Utilizaţi document. variabile şi tag-uri şi inserează un salt de Figura 7. Utilizarea celor două metode nu este însă obligatorie întrucât write() şi writeln() realizează în mod automat deschiderea (open) şi închiderea (close) stream-ului. de fapt. Cum salturile de linie sunt ignorate de către navigatoare.writeln(). ea obligă navigatorul să afişeze toate datele care au mai rămas în flux (stream). această metodă este identică cu write().239 Exemplu: <script> document. pentru a trimite un flux de date către fereastra navigatorului. Metoda open() indică navigatorului că doriţi să scrieţi un nou flux de date în obiectul Document curent.open() pentru a deschide obiectul Document şi pentru a putea din nou scrie. Metodele open() şi close() efectuează cele două acţiuni. Datele rămân în stream până în momentul în care navigatorul este pregătit să le afişeze în fereastra sa. Metoda close() semnalează sfârşitul acţiunii de scriere. Va trebui să deschideţi (open) iar stream-ul înainte de a-l utiliza apoi să-l închideţi (close). //Afişează D’ale Carnavalului </script> writeln() document.write(”D\’ ale Carnavalului”). . şir2) Introduce date de tip caracter. Atunci când utilizaţi metoda write() sau writeln() (vezi metodele obiectului Document.23 (continuare) linie la sfârşit. datele către ceva care se cheamă stream (flux). parcurgeţi următorii paşi: 9 Utilizaţi document.23).

va fi şters şi în consecinţă va înceta să se execute.open puteţi specifica un tip MIME care vă oferă posibilitatea de a crea un document de un anume tip ce conţine imagini şi documente utilizate în cadrul plug-ins.25 evaluează browser-ul (Netscape. Cu metoda document. Mult mai bine este să utilizaţi metodele open() şi close() cu ferestre sau cadre separate. MIME (Multipurpose Internet Mail Extension) este un standard pentru documentele Internet. Internet Explorer) şi modifică textul în funcţie de tipul său.24). Atunci când server-ul trimite un document unui browser.open(). Remarci: 9 Metodele open() şi close() nu deschid şi nici nu închid noile ferestre. Remarcă.240 9 Utilizaţi document. 9 Dacă utilizaţi metoda document. Aplicaţii ale metodelor open() şi close() ‰ Analizaţi următorul document HTML (vezi figura 7. în fereastra curentă. Precizaţi rolul instrucţiunilor: document. Figura 7.close() pentru a indica navigatorului că aţi terminat de scris în fereastra sa.24 ‰ Script-ul prezentat ([1]) în figura 7. . Printre tipurile MIME cele mai răspândite amintim formatul HTML (tipul MIME text/html) şi formatul text (tipul text/plain). Comentaţi script-ul.close().open() şi document. care face parte din documentul curent. script-ul dumneavoastră. i se indică şi tipul MIME al documentului pentru ca navigatorul să ştie cum să-l afişeze.

25 Remarcă. href. reload(). Obiectul Frame este prezentat în detaliu în Conversaţia 10. Nu uitaţi că atunci când folosiţi metodele write () sau writeln() nu puteţi schimba conţinutul documentului curent fără să reîncărcaţi complet pagina.26 Gestionarii de evenimente: assign(). replace() - . Obiectul Location Obiectul Location este un fiu al obiectului Window.26. Deşi utilizatorii văd URL-ul afişat în caseta de locaţie (Location) a navigatorului. Remarcă. Obiectul Frame Atunci când o fereastră conţine mai multe cadre. fiecare dintre ele este reprezentat în JavaScript printr-un obiect Frame. El stochează informaţii despre adresa URL a unei ferestre specificate. programatorii JavaScript lucrează cu obiectul Location. Fişa obiectului Location Obiectul părinte: Proprietăţi: Window hash. search Metode: Figura 7.241 Figura 7. pathname. host. port. Remarcă. Fişa obiectului Location este prezentată în figura 7. hostname. protocol.

write(document.href).location. Ele reprezintă părţi ale URL-ului.location.htm#top </script> host document. Exemplu: <script> document.write(document.27.com:80/linkuri/pref.hash Exemplu: Conţine partea # (diez) a adresei Web specificate în URL.com/index.location.27 <script> document.location.location.write(document.242 Proprietăţile obiectului Location Proprietăţile obiectului Location sunt prezentate în detaliu.com (vezi hash) </script> hostname document.hash).ionescu.location.htm dacă pagina afişată este la adresa http://www.html (vezi href) </script> port document.ionescu.location.hostname Numele server-ului.ionescu. Exemplu: <script> document.hostname).com (vezi hash) </script> href document.port). //afişează top.href Adresa Web (URL-ul) completă. dacă adresa este http://www.port Numărul de port al URL-ului (în general 80).html*/ </script> . în figura 7. Exemplu: <script> document.ionescu. //afişează www.write(document. <script> document. Proprietate Sintaxă hash document.pathname).pathname Calea de acces la document.com/linkuri/pref.write(document.location.location. //afişează /linkuri/pref.ionescu. //afişează www.ionescu.write(document.html */ </script> pathname document. /*afişează www. /*afişează 80.location. Exemplu: <script> document.com/linkuri/pref. dacă adresa este http://www.host Numele server-ului şi postul URL.location.host). Exemplu: Figura 7.location.

‰ Modificaţi URL-ul documentului curent.protocol Exemplu: Partea „protocol” a URL-ului (în general http).write(document. Metodă Sintaxă assign() document.replace(URL) Înlocuieşte pagina curentă cu o nouă pagină.assign(”http://www. Utilizarea metodei este justificată pentru a evita revenirea la ecranele de prezentare sau la paginile temporare de interes minim.com”)’> </form> <form> <input type=”button” value=”Yahoo!” onClick=’window.location.location=”http://www.location. Dacă argumentul (reîncărcare) are valoarea logică true documentul este reîncărcat de pe server.location. Metoda nu afectează istoricul navigatorului.location.search).yahoo. search document. Exemplu: <form> <input type=”button” value=”Yahoo!” onClick=’window.28.assign(URL) Modifică URL-ul documentului.yahoo.location.29 este prezentată secvenţa HTML corespunzătoare.27 (continuare) <script> document.com”’> </form> reload() document.28 Aplicaţii replace() document.location. Exemplu: Figura 7.29 .search Partea de căutare a adresei URL de după semnul ? Figura 7. În figura 7.reload() Reîncarcă documentul curent în fereastra browser-ului. Figura 7.location. </script> Metodele obiectului Location Metodele obiectului Location sunt prezentate în detaliu în figura 7. în caz contrar el este recuperat în cache-ul navigatorului.243 protocol document.

Fişa obiectului History este prezentată în figura 7. forward().31 Gestionarii de evenimente: window length back(). Fişa obiectului History Obiectul părinte: Proprietăţi: Metode: Figura 7. Acest obiect conţine URL-ul paginilor vizitate înainte şi după pagina curentă.32.go(window.history.244 ‰ Modificaţi URL-ul documentului într-o fereastră secundară pornind de la fereastra principală. go() - Proprietăţile obiectului History Proprietăţile obiectului History sunt prezentate în detaliu în figura 7. Proprietate Sintaxă length() window.history.30 este prezentat documentul XHTML complet al aplicaţiei. Exemplu: <body> <a href=”JavaScript: window.length Figura 7.length-1) ”>Ultimele pagini </a> </body> . Figura 7.30 Obiectul History Obiectul History este un alt obiect fiu al obiectului Window.32 Numărul de pagini din istoric. În figura 7.history.31.

33).back() Exemplu: Retur la URL-ul precedent în istoric. 9 Din motive de securitate.history.go(2)”> Mergi inainte cu 2 pagini</a> </body> Obiectul Event Obiectul Event este un alt fiu al obiectului Window.go(Număr) Avansează sau se întoarce în istoric cu numărul de pagini indicate. <body> <form> <input type=”button” value=”Pagina precedenta” onClick=”window.history. Fişa obiectului Event Obiectul părinte: window . anterior şi următor al documentului în lista de istoric. Această metodă corespunde unui clic pe butonul forward al navigatorului. Această metodă corespunde unui clic pe butonul back al navigatorului.245 Remarci: 9 Obiectul History mai conţine şi proprietăţile: current. go() window. Exemplu: Figura 7. Metodele obiectului History Trei metode ale obiectului History permit deplasarea în lista de istoric (vezi figura 7.history. aceste obiecte sunt normal inaccesibile în browser-ele actuale.go(-2)”> Mergi inapoi cu 2 pagini</a><br /> <a href=”JavaScript:window.history.forward() Trece la URL-ul următor în istoric. Fişa obiectului Event este prezentată în figura 7. previous şi next care stochează URL-ul curent.34.history. Metodă Sintaxă back() window.33 <body> <a href=”JavaScript:window.history.back()”> </form> </body> forward() window.

cancelable. height event. width. y Metode: Figura 7. reason. shiftkey. button event. . which.layerY Coordonata verticală a stratului în raport cu stratul care o conţine.34 Gestionarii de evenimente: - Proprietăţile obiectului Event Câteva din proprietăţile obiectului Event sunt prezentate în detaliu în figura 7. currentTarget. data event.clientX Returnează coordonata orizontală de amplasare a evenimentului. right sau middle.35. clientX.246 Proprietăţi: altkey. srcFilter. returnValue. layerX event. keyCode.button Determină care din butoanele mouse-ului a fost acţionat: left.altkey Figura 7. height. x.layerX Coordonata orizontală a stratului în raport cu stratul care o conţine. layerY event. screenX. pageX. target.data Atunci când se generează evenimentul dragdrop. ctrlKey. srcElement. toElement. type.clientY Returnează coordonata verticală de amplasare a evenimentului. pageY. clientY event. button. layerX. layerY. clientX event. proprietatea conţine noua valoare a înălţimii elementului. Proprietate Sintaxă altkey event. screenY. data. modifiers. proprietatea conţine o matrice (array) cu URL-ul obiectului stocat. fromElement.height Atunci când se generează evenimentul resize.35 Returnează valoarea logică true (adevărat) dacă tasta Alt a fost acţionată.

9 Form.returnValue Această proprietate are prioritate în raport cu valoarea returnată de către un gestionar de evenimente.35 (continuare) Referinţă la elementul care a generat evenimentul. 9 Plugin. modificaţi conţinutul său atribuindu-i valoarea logică false. 9 Area. Obiecte de nivelul al doilea Aşa cum există subobiecte ale obiectului Window. type event.247 pageX event. 9 Applet. 9 Link. 9 Image. 9 Layer.type Specifică numele evenimentului care se produce.srcElement Figura 7. tot aşa există şi subobiecte – obiecte de nivelul al doilea ale obiectului Document. Pentru a anula efectul evenimentului.pageX Coordonata orizontală de amplasare a evenimentului care se produce. srcElement event. returnValue event. Subobiectele obiectului Document sunt următoarele: 9 Anchor.pageY Coordonata verticală de amplasare a evenimentului care se produce. pageY event. Obiectul Anchor .

anchors[0]. pathname (calea fişierului . Matricea anchors[] Singurul mod în care puteţi folosi realmente un obiect Anchor în limbajul JavaScript este prin intermediul matricii anchors[] al obiectului Document (document.248 Obiectele Anchor sunt fii ai obiectului Document.length+”ancore numite”). Fiecare obiect Anchor reprezintă o ancoră a documentului curent.36 … Obiectul Area Obiectul Area vă permite să definiţi o suprafaţă a unei imagini reactive.anchors. . document.write(document. Proprietăţile obiectului Area sunt: hash (porţiunea de adresă URL care este ancora. href (adresa URL completă). <a name=”ancora1”>test1</a><br> <a name=”ancora2”>test2</a><br> <script> document.anchors[]).write(“Æ”). //afişează ancora 1Æ test2 </script> Figura 7.anchors[] pentru a determina numărul de ancore dintr-un document (figura 7. host (numele calculatorului gazdă (adresa IP) şi portul specificate în adresa URL).anchors[1].name). Folosiţi proprietatea name pentru a recupera numele unei ancore şi proprietatea innerText pentru a recupera textul său (figura 7. hostname (numele calculatorului gazdă specificat în URL). inclusiv simbolul #).write(document. Folosiţi matricea document..36).36).innerText). //afişează două ancore numite <//script> … <a name=”ancora1”>test1</a><br> <a name=”ancora2”>test2</a><br> <script> document.write(document.. adică un loc specific în document care poate fi atins direct printr-un link. document.

</area>). Fişa obiectului Link este prezentată în figura 7. Obiectul Link Obiectul Link este echivalentul JavaScript al unei legături hipertext. Remarcă. Obiectul Applet Obiectul Applet reprezintă echivalentul JavaScript al tag-ului (X)HTML <applet>. inclusiv simbolul (”?”).. începând cu simbolul (”/”). Obiectul Layer Obiectul Layer permite accesarea straturilor în interiorul documentelor. . Obiectul Image Obiectul Image este echivalentul JavaScript al tag-ului (X)HTML <img />. text (textul care apare între tag-urile <area> . 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 Conversaţia 8. target (numele ferestrei ţintă în care se afişează adresa URL). Remarcă. protocol (protocolul specificat în adresa URL. search (partea de căutare a adresei URL. port (portul specificat în adresa URL). Obiectul Image este prezentat în detaliu în Conversaţia 9. inclusiv simbolul final (”:”).37.249 specificat în adresa URL. Obiectul Layer este prezentat în detaliu în Conversaţia 10.

search. protocol. Proprietăţile obiectului Link Obiectul Link conţine numeroase proprietăţi (acelaşi ca şi obiectul Location) care permit cunoaşterea cu precizie a legăturii (X)HTML care îl reprezintă. Puteţi accesa obiecte Link cu ajutorul matricii links[] (document. hostname. host. . port. Remarci: 9 Obiectul Link vă permite să lucraţi cu legături în limbajul JavaScript.38. Ancorele sunt elemente numite ale unui document (X)HTML la care puteţi avea acces direct. documents. Pentru a crea după aceea un link către această ancoră. care conţine aceleaşi informaţii pentru pagina (X)HTML curentă. O proprietate a matricii. Aceste proprietăţi reprezintă părţi ale adresei URL.links[]) care este o colecţie a tuturor legăturilor din documentul curent. 9 Obiectul Link este similar cu obiectul Location. Pentru a defini o ancoră se utilizează o sintaxă de tipul <a name=”ancora2”>.links. Ordinea din matrice se bazează pe ordinea în care sunt localizate legăturile în fişierul sursă. href. target (vezi obiectul Location) Figura 7. deci nu puteţi referi un obiect Link prin el însuşi. Matricea links[] Obiectele Link nu au o proprietate name. Proprietăţile obiectului Link sunt prezentate în detaliu în figura 7. Remarcă. pathname. fiecare dintre ele conţinând informaţii cu privire la URL-ul sau ancora corespunzătoare. se utilizează un tag de tipul <a href=#ancora2”>.37 Gestionarii de evenimente: - Un document poate avea mai multe obiecte Link.250 Fişa obiectului Link Obiectul părinte: Proprietăţi: Document hash.length precizează numărul de link-uri ale paginii.

href=’http://www.pathname Reprezintă porţiunea numelui de cale a legăturii URL.hostname Reprezintă porţiunea de nume al calculatorului gazdă din adresa URL href Link. foarte asemănător obiectului Applet reprezintă o modalitate de accesare a modulelor plug-in instalate în browser.251 Proprietate Sintaxă hash Link. Link.target Aplicaţie Reprezintă numele obiectului Window în care este afişată legătura. search Link.39. port Link. <a href=”http://www.com’”> Figura 7. pathname Link.port Reprezintă porţiunea de port a legăturii URL. host legătură.host Reprezintă porţiunea de calculator gazdă din adresa URL asociată cu o hostname asociată cu o legătură. Link.yahoo. ‰ Comentaţi secvenţa de cod HTML prezentată în figura 7. protocol Link.38 Reprezintă o denumire de ancoră în adresa URL pentru legătură.altavista.39 </form> Obiectul Plugin Obiectul Plugin. target Link. care începe cu caracterul #.hash Figura 7.links[o]. .fr”>Legătură</a> <form> <input type=”button” value=”Schimbaţi legătura” onCLick=”document.search Reprezintă porţiunea de interogare a legăturii.protocol Reprezintă porţiunea de protocol a legăturii URL.href Reprezintă adresa URL completă asociată cu o legătură.

Select. Hidden. form. Remarcă. Obiectul Option Fişa obiectului Option este prezentată în figura 7.252 Proprietăţile obiectului Plugin sunt: description (conţine descrierea modulului plug-in). Reset. Submit. care este un subobiect al obiectului Select. Radio. Există un singur obiect de nivelul al patrulea: obiectul Option. Text. index. Obiecte de nivelul al patrulea Ultimul nivel de obiecte pe parte de client ale limbajului JavaScript este nivelul al patrulea. filename (conţine numele fişierului unui program plug-in). label. Obiectele de nivelul al treilea pe parte de client sunt prezentate în Conversaţia 8. selected... Fişa obiectului Option Obiectul părinte: Cum se creează obiectul? Proprietăţi: Select Constructorul option() defaultSelected. text. Textarea. Toate obiectele de nivelul al treilea sunt subobiecte ale obiectului Form: Button. FileUpload. Checkbox. Obiecte de nivelul al treilea Următorul nivel de obiecte pe parte de client ale limbajului JavaScript este nivelul al treilea. name (conţine numele modulului plug-in). disabled.40. value . </select>. Password. Obiectul Option este folosit pentru referirea la elementele <option> care apar între tag-urile <select> . length (conţine numărul de tipuri MIME acceptate de modulul plug-in).

Proprietate Sintaxă defaultSelected document. index document. disabled activată (false).form Renunţă la formularul care conţine zona.select. Figura 7.forms[]. onMouseMove.option.option Reprezintă. onKeyPress.40 onMouseOut.. Obiect Sintaxă Option() document. onHelp.option.option. onKeyDown.index .. onMouseDown. Pot fi create noi opţiuni cu ajutorul constructorului Option().41.forms[].42. onMouseOver.forms[]. document. onMouseUp Obiectul Option este prezentat în detaliu în figura 7.253 Metode: Gestionarii de evenimente: onClick. în cadrul unui formular o listă derulantă de opţiuni incluse între tag-urile <select> şi </select>. Ea este definită prin tagurile (X)HTML <option> .elements[] sau prin numele său. </option>. Obiectul este accesat prin proprietatea form. onKeyUp.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> Proprietăţile obiectului Option Proprietăţile obiectului Option sunt prezentate în detaliu în figura 7. defaultSelected Valoare logică (true/false) – indică dacă o opţiune este implicită.disabled Valoare logică (true/false) – opţiunea este dezactivată (true) sau form document.forms[]. Exemplu Figura 7.forms[].option. onDblClick.

43.42 Rangul opţiunii în lista select. label document. Obiectul Navigator Noul standard DOM (Document Object Model) a eliminat multe dintre diferenţele care există (încă!) între navigatoare. îl puteţi referi direct. Ele sunt disponibile pentru toate obiectele Window ale navigatorului Netscape.option. Puteţi utiliza JavaScript pentru a identifica navigatorul pe care îl utilizaţi.forms[]. document. Proprietatea corespunde atributului label al tag-ului. imposibil de instanţiat (creat).text value document. Internet Explorer creează un obiect Window pentru fiecare o nouă fereastră. folosind obiectul window. Spre deosebire de Netscape Navigator. document. Fişa obiectului Navigator este prezentată în figura 7. Această proprietate corespunde atributului value al tag-ului <option>.selected Valoare logică (true/false) – opţiune selectată (true) sau nu text Textul opţiunii. dar veţi întâlni numeroase situaţii care impun scrierea unui script pentru fiecare navigator.forms[].value Valoarea opţiunii.254 Figura 7.option. Fişa obiectului Navigator .option. Obiectul Navigator nu face parte din DOM deci. Puteţi adăuga proprietăţi personale obiectului Navigator.option.forms[]. separat.navigator. Noile proprietăţi rămân deci limitate la obiectul Window în care ele au fost create. selected (false). El este unic şi deci.forms[].label Textul alternativ al opţiunii.

43 Metode: Gestionarii de evenimente: window mimeType. Windows NT 5. de exemplu Mozilla </script> appName sau Netscape. cooKieEnabled. Opera este polimorf. MSIE 6. appVersion. document.appCodeName Exemplu: Returnează numele codului intern al navigatorului în general ”Mozilla”.appName. platform.44 Exemplu: Returnează numele oficial al navigatorului: Microsoft Internet Explorer <script> x=navigator. . plugin appCodename. productSub. Exemplu: <script> x=navigator.NET CLR 1. navigator. // afişează. Proprietate Sintaxă appCodeName navigator.appVersion.0. de exemplu 4.3705)*/ </script> browserLanguage navigator.appCodeName. onLine. Această proprietate este recunoscută numai de Internet Explorer. /* afişează. appMinorVersion. de exemplu Microsoft Internet Explorer </script> appVersion navigator.write(x). mimeTypes[].44. language.write(x). . vendor javaEnabled() - Proprietăţile obiectului Navigator Proprietăţile obiectului Navigator sunt prezentate în detaliu în figura 7. product.appName Figura 7. cpuclass.appVersion Returnează numărul versiunii navigatorului actualizate şi versiunea sistemului de operare. document.255 Obiectul părinte: Subobiecte: Proprietăţi: Figura 7.0 (compatible. userAgent.1. // afişează. systemLanguage.browserLanguage Returnează limba navigatorului. appName. userLanguage.write(x). <script> x=navigator. plugins[]. document.0. browserLanguage.

Opera este polimorf. Vezi obiectul Plugin. platform navigator.platform. // afişează. // afişează. <script> x=navigator.write(x).3705)*/ </script> vendor navigator.mimeTypes[] Vezi obiectul mimeType. document. document. document.1.browserLanguage.userAgent. Exemplu: userAgent navigator.plugins[] Matricea plugins[] conţine lista tuturor extensiilor instalate în navigator. de exemplu Win32 </script> plugins[] navigator.44 (continuare) <script> x=navigator. de exemplu en </script> cookieEnabled navigator.write(x). Figura 7. navigator.language Exemplu: Returnează limba navigatorului .256 Exemplu: <script> x=navigator. /* afişează. Exemplu: <script> x=navigator. // afişează.cookieEnabled Returnează true sau false numai dacă cookies-urile sunt activate sau nu în navigator.0. .vendor .NET CLR 1. De fapt.cookieEnabled. document. // afişează. Windows NT 5.0.language. de exemplu Mozilla /4. de exemplu ro </script> mimeTypes[] navigator. MSIE 6.platform Returnează sistemul de operare.0 (compatible. este o combinaţie de proprietăţi appCodename şi appVersion.write(x). Această proprietate este recunoscută Exemplu: <script> x=navigator.userAgent Returnează numele navigatorului urmat de numărul său de versiune. de exemplu true </script> language numai de Netscape.write(x).write(x). document.

document. platform în cele două navigatoare – Netscape şi Internet Explorer. language.vendor.45 <script> x=navigator. Figura 7. appName.46 este prezentat documentul XHTML complet în care s-a inserat script-ul aplicaţiei.write(x). returnează undefined.write(x). Folosiţi o listă neordonată. // afişează. În figura 7.JavaEnabled(). . document.44 (continuare) <script> x=navigator.257 Exemplu: Returnează numele navigatorului dacă este vorba de Netscape 6. Metodă Sintaxă JavaEnabled() navigator. appCodeName. Pentru orice alt navigator. Indicaţie. // afişează.45.write. Figura 7. appVersion. de exemplu Netscape 6 </script> Metodele obiectului Navigator Metoda JavaEnabled() a obiectului Navigator este prezentată în figura 7. de exemplu true </script> Aplicaţii ale obiectului Navigator ‰ Creaţi un document (X)HTML simplu care conţine un script ce afişează proprietăţile obiectului Afişaţi Navigator proprietăţile: cu ajutorul instrucţiunii document.JavaEnabled() Exemplu: Returnează valoarea logică true sau false numai dacă Java este activat sau nu în navigator. userAgent.

Figura 7.48 se prezintă cele două pagini Web afişate în Netscape 6.47 şi figura 7.258 Figura 7. respectiv Internet Explorer.47 .46 În figura 7.

48 Remarcă. . Două elemente reţin atenţia: ƒ proprietatea navigator. ‰ Scrieţi un script care afişează următoarea pagină Web (figura 7.language este afişată ca nedefinită (undefined) în Internet Explorer. ƒ Mozilla apare în câmpurile: Nume cod şi Agent utilizator.259 Figura 7.49).

49 Indicaţie. În figura 7. } function platforma(){ platf=navigator. appName.50 } .0 Transitional//EN" "http://www.50 este prezentat documentul XHTML complet în care s-a inserat script-ul aplicaţiei.userAgent.platform. alert(nav). Executând clic pe fiecare din cele patru butoane se vor afişa proprietăţile obiectului Navigator: userAgent. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.appName. alert(nume). alert(platf).org/1999/xhtml"> <head> <title>Identificare navigator</title> <script language="javascript" type="text/javascript"> function idnavig(){ nav=navigator.dtd"> <html xmlns="http://www. } function numenavig(){ nume=navigator. Figura 7. platform.w3.org/TR/xhtml1/DTD/xhtml1-transitional. Script-ul afişează patru butoane în pagina Web.260 Figura 7.w3. Folosiţi gestionarul de evenimente onClick şi metoda alert().

if(nav.indexOf("Opera")==-1&&nav." /> </p> <p> <input type="button" name="Submit3" value="Nume oficial navigator" onClick="numenavig().indexOf("Opera")>-1) {navig="Opera".} if(nav.indexOf("MSIE 5")>-1) {navig="Internet Explorer 5".} alert(navig).} if(nav." /> </p> <p> <input type="button" name="Submit4" value="Nume real navigator" onClick="numereal().} if(nav.} if(nav. } </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().indexOf("MSIE")==-1&&nav.gif" width="88" height="31" /></p> <ul> </ul> Figura 7. ." /> </p> <p> <input type="button" name="Submit2" value="Sistem de operare" onClick="platforma(). figura 7.53. figura 7.indexOf("Netscape 6")==-1) {navig="Netscape 4". figura 7.51.50 </body> (continuare) </html> În figura 7.indexOf("Netscape 6")>-1) {navig="Netscape 6".indexOf("MSIE 4")>-1) {navig="Internet Explorer 4".indexOf("MSIE 6")>-1) {navig="Internet Explorer 6"." /> </p> </form> <p><img src="vxhtml10.} if(nav.54 sunt prezentate rezultatele afişării paginii Web în navigatorul Internet Explorer.indexOf("Opera")==-1&&nav.indexOf("Opera")==-1&&nav.261 function numereal(){ nav=navigator.userAgent.52.indexOf("Opera")==-1&&nav.

262 Figura 7.52 .51 Figura 7.

263 Figura 7.54 ‰ Personalizaţi script-ul pe care l-aţi creat în aplicaţia precedentă.53 Figura 7. . Utilizaţi cele patru funcţii numai în script-urile pe care le exploataţi.

Ca şi obiectul Plugin. Fişa obiectului MimeType .56. ‰ Scrieţi o funcţie simplă care să vă permită să recunoaşteţi browser-ul Netscape sau Internet Explorer sau pe nici unul dintre ele. El vă permite să accesaţi informaţii despre tipurile MIME pe care le recunosc modulele plug-in.55 se prezintă o soluţie a aplicaţiei pe care vă rugăm să o comentaţi.mimeTypes[] ale cărei elemente reprezintă tipurile MIME. În figura 7. Fişa obiectului MimeType este prezentată în figura 7. Instanţele obiectului MimeType sunt accesibile prin intermediul matricii navigator.264 Indicaţie. Figura 7. Definiţi gestionarul de evenimente onLoad în tag-ul <body> după cum urmează: <body onLoad=”idnavig()”>. el nu este recunoscut de Internet Explorer.55 ‰ Cum procedaţi pentru a detecta navigatorul şi versiunea sa în JavaScript? Subobiectele obiectului Navigator Obiectul MimeType Obiectul MimeType este un subobiect al obiectului Navigator.

enablePlugin. enabledPlugin Determină dacă un plug-in este disponibil.length document.58 <script> tip=navigator.mimeTypes[i]. Obiect Sintaxă MimeType navigator.mimeType.i++){ tip=navigator.58.57 <script> for(tip in navigator. i<navigator. de exemplu 7*/ </script> . Proprietate Sintaxă description navigator. type Metode: Figura 7. <script> for(i=0.length. //afiseaza descrierea plug-ins } </script> enabledPlugin navigator.write(a).mimeTypes){ document.description. suffixes.write(tip) } </script> Proprietăţile obiectului MimeType Proprietăţile obiectului MimeType sunt prezentate în detaliu în figura 7. Nu este suficient ca un plugin să fie numai instalat. name. /*afisează. length.description Exemplu: Descrierea obiectului MimeType.56 Gestionarii de evenimente: Obiectul MimeType este prezentat în detaliu în figura 7.MimeTypes.mimeTypes[”application/pdf”].length Numărul de tipuri MIME recunoscute.mimeTypes.57.265 Obiectul părinte: Proprietăţi: Navigator description.mimeTypes[] Exemplu: Face referire la aplicaţiile şi tipurile de fişiere recunoscute de navigator.MimeTypes[]. Figura 7. - enabledPlugin. el trebuie să fie şi disponibil.MimeTypes[]. Exemplu: Figura 7. Exemplu: <script> a=navigator. // afişează [object plugin] dacă plugin este disponibil </script> length navigator.

name.mimeTypes[i].mimeTypes[i].i<navigator.266 name navigator. document.suffixes. …*/ } </script> type navigator. Folosiţi o buclă for-in. <script> for(i=0. Indicaţie.i<navigator. <script> for(i=0.suffixes Extensia de fişier pentru Mimetype.i++){ tip=navigator.MimeTypes[].length.58 (continuare) Aplicaţie ‰ Scrieţi un script care afişează tipurile MIME recunoscute de navigator.length. de exemplu image/x-quicktime }</script> Exemplu: Figura 7. wpg.type. //afişează.59 este prezentat script-ul aplicaţiei. În figura 7.MimeTypes[].i<navigator.length. /*afişează wjp.i++){ tip=navigator.MimeTypes[]. document.write(tip+”<br />”).mimeTypes. document.write(tip+”<br />”).i++){ tip=navigator.mimeTypes[i].59 . Exemplu: <script> for(i=0. } </script> suffixes navigator.name Exemplu: Numele plug-ins.type Tipul de fişiere recunoscute de plug-ins.write(tip+”<br />”).mimeTypes.mimeTypes. Figura 7.

numele fişierului unui program plug-in. Prezentăm în continuare pe cele mai cunoscute: 9 Macromedia Shockwave şi Flash. name - – – – – face face face face referire referire referire referire la la la la o descriere a modulului plug-in. Acest obiect este o matrice. fiecare plug-in instalat în navigator reprezentând un element al matricii.267 Obiectul Plugin Obiectul Plugin este un subobiect al obiectului Navigator. numele modulului plug-in.write pentru a afişa informaţii despre modulele plug-in instalate. Fişa obiectului Plugin Obiectul părinte: Proprietăţi: Metode: Figura 7. numărul de tipuri MIME conţinute în matrice.60 este prezentată fişa obiectului Plugin. Obiectul Plugin conţine o matrice de elemente şi tipuri MIME tratate de fiecare modul plug-in. 9 Adobe Acrobat. length. 9 Real Player. Obiectul Plugins Obiectul Plugins face referire la plug-ins instalate în navigator.60 Gestionarii de evenimente: Remarci: 9 description 9 filename 9 length 9 name Navigator description. Manipularea plug-ins cu ajutorul obiectelor Plug-ins au apărut cu versiunea 3. Există sute de plug-in pentru Internet Explorer şi Netscape. filename.0 a navigatorului Netscape. Obiectul JavaScript Navigator posedă un obiect fiu numit Plugins. În figura 7. El este creat prin instalarea de module plug-in pentru browser. 9 Beatnik. Aplicaţie ‰ Folosiţi obiectul Plugin cu metoda document. .

268 Instanţele obiectului Plugins sunt accesibile prin matricea navigator.62 Proprietăţile obiectului Plugins Proprietăţile obiectului Plugins sunt prezentate în detaliu în figura 7. Navigator description. Remarci: 9 Nu confundaţi obiectele Plugin. proprietăţi ale obiectului Document.plugins[] ale cărei elemente reprezintă plug-ins. cu obiectele Embed. Primele fac parte din Navigator în timp ce următoarele sunt incorporate în document cu ajutorul tag-ului <object> (pentru Internet Explorer) sau <embed> pentru Netscape. Fişa obiectului Plugins este prezentată în figura 7. Fişa obiectului Plugins Obiectul părinte: Proprietăţi: Metode: Figura 7. proprietăţi ale obiectului Navigator.62 este prezentat script-ul aplicaţiei. 9 Obiectul Plugins nu este recunoscut în mod constant de către toate versiunile navigatoarelor.61. Internet Explorer recunoaşte plug-ins şi ignoră obiectele Plugin. Figura 7. filename. Fiecare plug-in este de asemenea inclus în matricea MimeTypes[]. . length.61 Gestionarii de evenimente: Aplicaţie ‰ Generaţi lista tipurilor MIME recunoscute de către navigatorul Internet Explorer.63. Pe de altă parte. name - În figura 7.

plugins.plugins.plugins[i]. //afişează numele plug-ins } </script> Remarcă.description Exemplu: Descrierea plug-ins. care conţine câte un element al matricii pentru fiecare tip MIME.plugins.write(plug+”<br />”). //afişează numele fişierelor de plug-ins } </script> length navigator. .write(plug+”<br />”).plugins[]. document.description.length.plugins[].length.i<navigator. Obiectului Navigator posedă de asemenea un alt obiect fiu numit MimeTypes. document.filename. navigator.length.plugins[]. <script> x=navigator.i++){ plug=navigator. <script> for(i=0.write(x).length.plugins[i].plugins. document. de exemplu 13 </script> name Numele plug-ins. <script> for(i=0.name Exemplu: Figura 7.plugins.63 <script> for(i=0. document.i<navigator.plugins[i].length Exemplu: Numărul de plug-ins. //afişează descrierea plug-ins } </script> filename navigator.i++){ plug=navigator.i++){ plug=navigator.name. //afişează.i<navigator.269 Proprietate Sintaxă description navigator.filename Numele şi amplasarea fişierelor plug-ins.write(plug+”<br />”).

64.270 Aplicaţie ‰ Analizaţi documentul (X)HTML din figura 7. Analizaţi script-ul inserat şi instrucţiunile document.65).65 . Afişaţi documentul în navigatorul Netscape 6.64 Rezultatele execuţiei script-ului (figura 7. Figura 7.write() utilizate. Figura 7.

Ce semnificaţie are proprietatea lastModified? 9. Ce conţine matricea anchors[]? 4.Ce este MIME? 12.271 JavaScript Temă Testaţi-vă cunoştinţele: 1.net/ 9 http://webdesign.com .Care este rolul metodelor document.com 9 http://www.open() şi document.Ce este obiectul Location? 11.hkedcity. Care este conţinutul matricii all[]? 3.about. Care este conţinutul matricii forms[]? 6. Care este conţinutul matricii applets[]? 5. Care este conţinutul matricii layers[]? 8. Care este conţinutul matricii links[]? 10. Care este conţinutul matricii frames[]? 7.Ce este obiectul Link? 15.close()? 13.Care este deosebirea dintre metodele document.write() şi document. Ce este obiectul Document? 2.writeln()? 14.useit.bigonion.com 9 http://www.Ce este obiectul Layer? Vizitaţi site-urile 9 http://www.

). . O dată cu apariţia limbajului JavaScript puterea formularelor (X)HTML a crescut şi mai mult. Aplicaţii Validaţi un formular cu JavaScript. În concluzie. atât pe partea de client cât şi pe partea de server. Validarea formularelor ••••••••••••••••••••••••••••••••••••••••••••• În această conversaţie: f f f f f f ••••••••••••••••••••••••••••••••••••••••••••• Obiectul Form. Aplicaţii (Sub)obiectele Form.Conversaţia 8 Obiectul Form. Cu JavaScript puteţi modifica în mod dinamic conţinutul elementelor unui formular (zonă simplă de text. JavaScript vă permite să adăugaţi noi funcţii de prelucrare a formularelor dumneavoastră (X)HTML. structurate în câmpuri şi zone de date sunt ideale pentru a realiza o interactivitate între dumneavoastră şi vizitatorii site-ului pe care l-aţi creat. casetă de validare etc. Formularele. zonă de text multilinie. crearea unui site Web cu adevărat performant presupune cunoaşterea atât a facilităţilor formularelor (X)HTML cât şi a obiectului Form al limbajului JavaScript. Aplicaţii EXEMPLUL 8 JAVASCRIPT (varianta 1) EXEMPLUL 8 JAVASCRIPT (varianta 2) Temă Obiectul Form Momentul apariţiei formularelor (X)HTML a fost considerat ca decisiv în evoluţia Web-ului.

select. Remarci: 9 Obiectul Document conţine o matrice de obiecte Form care poartă numele de forms. onMouseUp. textarea. radio. . elements[]. onCut. input. action. onHelp. Figura 8. al cărui nume este identic cu atributul name al tag-ului <form>. onDrag. onMouseEnter. onPropertyChange. submit Proprietăţi: acceptCharset. onDragOver.1. onMove. onDragLeave. Aşadar. onKeyUp. name. onResize. onMouseDown.1 onResizeStart. onDblClick. method. onMoveend. onPaste. enctype. onDragenter.2 conţine trei obiecte Form. text. onResizeEnd. onMousewheel. onReset. onControlSelect.274 Fişa obiectului Form este prezentată în figura 8. onSubmit (vezi Conversaţia 6). onMovestart. option. onMouseLeave. target Metode: Gestionarii de evenimente: reset(). obiectul Form este un obiect JavaScript reprezentat prin perechea de tag-uri (X)HTML: <form> şi </form>. onDragend. onKeyPress. onMouseOut. onMouseOver. onKeyDown. onDragStart. submit(). Fişa obiectului Form Obiectul părinte: Subobiecte: Document button. onFocusOut. onMouseMove. checkbox. tags() onContextMenu. 9 După încărcarea şi analiza documentului (X)HTML. onDeActivate. fileupload. onSelectStart. encoding. reset. Documentul (X)HTML din figura 8. hidden. această matrice (forms) va conţine câte un obiect Form pentru fiecare pereche de tag-uri <form> şi </form> prezentată în documentul (X)HTML. onCopy. length. password. Relaţia dintre obiectul Form şi tag-ul <form> Fiecare formular care aparţine unei pagini (X)HTML este reprezentat în JavaScript printr-un obiect Form.

Puteţi accesa cele trei obiecte Form.3). după cum urmează (figura 8.5 . forms[1]. formularDoi. . FormularUnu.) puteţi atribui un nume fiecărui obiect Form (vezi figura 8.3 Dacă nu agreaţi referinţele cu numere (forms[0].2 Deoarece matricea forms este o proprietate a obiectului Document puteţi referi cele trei obiecte Form după cum urmează (figura 8. Figura 8.. obiectele Form ale limbajului JavaScript vor avea proprietatea name atribuită în mod automat cu numele: formularZero.5). Figura 8.4 Atunci când documentul (X)HTML va fi analizat..4). Figura 8.275 Figura 8.

Proprietatea elements poate fi folosită fie pentru referirea unui element (obiect) dintr-un formular.6 sunt perfect valabile. fie pentru validarea tuturor elementelor dintr-un formular. Figura 8. 9 (X)HTML nu impune nici o limită valorilor posibile pentru un atribut. . 9 Pentru a atribui un nume elementelor ce aparţin documentelor (X)HTML va trebui să folosiţi nume valide pentru variabilele JavaScript. vom scrie următorul cod JavaScript (figura 8. Aşadar. în consecinţă. numele celor trei atribute name (conţin spaţii) din figura 8.276 Remarci: 9 Este important să observaţi că numele atribuite obiectelor Form sunt în totalitate nume de variabile JavaScript valide (formularZero.6 9 Dacă dorim să referim aceste nume în JavaScript.7 9 Din nefericire. Figura 8. singurul mod de a accesa obiectele Form este acela de a utiliza matricea forms. formularUnu. Relaţia dintre elementele (obiectele) Form şi obiectul Form Proprietatea cea mai importantă a obiectului Form este elements care conţine un obiect pentru fiecare din elementele formularului.7). nici una din cele trei instrucţiuni nu este validă (!) deoarece JavaScript nu va şti să trateze spaţiul (blank-ul) din mijlocul fiecărui nume. formularDoi).

scrieţi codul (figura 8.10): . proprietatea value va conţine şirul de caractere curent în obiectul afişat în fereastra navigatorului.8 Pentru a avea acces la toate cele trei obiecte text ale formularului. toate obiectele dintr-un formular respectă acelaşi format de bază. pentru a afişa numele pe care l-aţi introdus. Figura 8. Scrieţi instrucţiunile JavaScript pentru accesul la cele trei obiecte (Text) ale formularului.8. iar apoi introduceţi numele dumneavoastră (exemplu. Am specificat un atribut formularelor). pentru fiecare obiect Text (ca şi în cazul name Să presupunem că doriţi să încărcaţi documentul (X)HTML din figura 8. Revenind la aplicaţia noastră. în particular ele posedă proprietatea value care conţine valoarea de control curentă. Conceptul de valoare de control depinde de tipul de control.9). Popescu) în zona simplă de text nume.9 Remarcă. Cum procedaţi pentru a extrage (afişa) această valoare? Răspunsul nu este complicat! Cu mici diferenţe. Figura 8. în cazul unei zone simple de text.277 Aplicaţie ‰ Analizaţi documentul (X)HTML din figura 8. putem scrie (fără efort!) următorul cod JavaScript (figura 8.8 într-un browser.

Există două variante de acces la elementele matricii: 9 prin numărul de index. 9 prin nume. obiectele nu au tot timpul un nume. Fiecare obiect JavaScript al unui formular conţine propriile proprietăţi şi metode care permit şi alte acţiuni în afară de citirea şi definirea valorilor acestora. sau numele lor nu este valid pentru o variabilă JavaScript. Matricea elements Este agreabil să poţi avea acces la un element (obiect) al formularului direct prin numele său.12 . În plus.11): Figura 8.11 Remarcă. veţi putea folosi matricea elements a obiectului Form.278 Figura 8.10 În mod analog. Iată cum procedăm pentru a accesa prin numărul de index. Pentru astfel de situaţii. dar uneori dorim să prelucrăm în mod automat obiectele formularului. scrieţi codul (figura 8.12. Varianta 1 Figura 8. elementele formularului din figura 8. pentru a defini numele dumneavoastră.

14 este prezentat codul sursă JavaScript pentru Varianta 2.14 Proprietăţile obiectului Form Proprietăţile obiectului Form sunt prezentate în detaliu în figura 8.acceptCharset Figura 8. Proprietate Sintaxă acceptCharset document. elements[] document.15.form. În acest formular am definit trei obiecte Text.action Corespunde atributului action al tag-ului <form>. Ultimele două obiecte au un nume care nu este un nume de variabilă JavaScript valid.form.13 Varianta 2 În figura 8.15 Setul de caractere acceptat de către server-ul care prelucrează datele. În figura 8.form. action document.279 Remarcă.elements[] . Figura 8.13 este prezentat codul sursă JavaScript pentru Varianta 1. Figura 8.

text. fileUpload. option.length Numărul de elemente ale formularului.15 (continuare) encoding document. textarea. Fiecărui element îi corespunde un obiect. select. Un formular poate conţine următoarele tipuri de button. Proprietatea returnează numărul de elemente: length elemente: form.elements. length document. input. radio.form.length. name document. checkbox.enctype Corespunde atributului enctype al tag-ului <form>. enctype document. password. reset.method Corespunde atributului method al tag-ului <form>. Ele sunt referite prin numărul de ordine (exemplu: elements[2]) sau prin numele lor (exemplu: elements[”zona1”]). hidden.280 Elementele unui formular (zone de text şi butoane). method document. Fiecare element este o dată a matricii (array) elements[].form.form.encoding Corespunde atributului encoding al tag-ului <form>.form.form.name . Exemplu: Figura 8.

în ordine alfabetică toate subobiectele obiectului Form.target Corespunde atributului target al tag-ului <form>.form.281 Figura 8.form. Reset.reset() Figura 8. Vom prezenta în continuare. target document. Password. Metodă Sintaxă reset() document.submit() Corespunde acţiunii butonului submit.16 Corespunde acţiunii butonului reset. . Text. FileUpload.15 (continuare) Corespunde atributului name al tag-ului <form>. tags() document.tags(tag) Recuperează toate elementele introduse cu tag-ul menţionat ca argument. Checkbox. toate obiectele de nivelul al treilea. Textarea.form. Submit. Metodele obiectului Form Metodele obiectului Form sunt prezentate în detaliu în figura 8. Select. submit() document. Radio. Subobiectele Form După cum am precizat în Conversaţia anterioară. pe parte de client sunt subobiecte ale obiectului Form: Button.16.form. Hidden.

click(). onHelp. . name. Obiect Sintaxă Button document. Figura 8. Fişa (sub)obiectului Button Obiectul părinte: Proprietăţi: Form align. onMouseDown. A nu se confunda cu butoanele reset şi submit.17. onDblClick.forms[].282 (sub)Obiectul Button Fişa obiectului (subobiectului) Button este prezentată în figura 8. (sub)Obiectul Button este prezentat în detaliu în figura 8.elements[] sau prin numele său. type. onKeyDown. Subobiectul Button poate fi accesat prin proprietatea form. value Metode: Gestionarii de evenimente: blur(). defaultValue. Exemplu: Figura 8. onBlur.button Reprezintă un obiect generic într-un formular. onMouseUp (vezi Conversaţia 6). onBeforeUpdate. disabled.17 onMouseOver. Subobiectul Button este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”button”>. onKeyUp. onMouseOut. onFocus. focus() onAfterUpdate.19.18 <form name=”form1”> <input type=”button” name=”Button1” value=”calcul”/> </value> Proprietăţile (sub)obiectului Button Proprietăţile (sub)obiectului Button sunt prezentate în detaliu în figura 8. onClick. form. onKeyPress. onMouseMove.18. size.

button.focus() Butonul preia focus-ul.19 Alinierea left.forms[].forms[]. Corespunde atributului size al type document. Metodă Sintaxă blur() document.button.button.disabled Valoarea implicită a butonului. În acest caz.click() Simularea clic-ului mouse-ului pe buton. Corespunde atributului name al tag-ului <input>.283 Metodă Sintaxă align document. right. document.button. defaultValue document. Corespunde atributului Valoarea value al tag-ului <input>. proprietatea returnează button.blur() Figura 8.forms[].forms[]. value document. Proprietatea poate conţine valorile: Figura 8.button. . defaultValue document. focus() document. Această metodă nu este detectată de onClick.button.button. size tag-ului <input>. form document.form.name Numele butonului.form.button. center. disabled Valoarea logică (true/false) care indică starea butonului: dezactivat (true).value butonului. Corespunde atributului type al tag-ului <input>.form Referinţă la formularul care conţine butonul.forms[]. name document.button.type Tipul de element în cadrul formularului. click() document.button.size Dimensiunea (în pixeli) butonului.forms[]. activat (false).form.button.forms[].forms[].20. Metodele obiectului Button Metodele obiectului Button sunt prezentate în detaliu în figura 8.20 Butonul pierde focus-ul.align butonului.

calcul. onMouseDown.i<document. onBeforeUpdate.i++) { if(document.length. onBlur. Obiectul Checkbox este prezentat în detaliu în figura 8. value.calcul.284 (sub)Obiectul Checkbox Fişa (sub)obiectului Checkbox este prezentată în figura 8. type. onFocus. size. click(). onMouseUp (vezi Conversaţia 6).calcul. onMouseOut. checked. onKeyDown. focus() onAfterUpdate. defaultChecked.value) } } </script> </head> <form name=”calcul”> TOTAL:<input type=”text” size=”9”/> euro <br />. width Metode: Gestionarii de evenimente: blur(). defaultValue.elements. onKeyUp.21 onMouseOver.value= parseInt(document.elements[] sau prin numele său. onDblClick. name.elements[0].elements[0].21.22. Fişa (sub)obiectului Checkbox Obiectul părinte: Proprietăţi: Form align. form.22 <head> <script> function calcule() { document.value=”0”. for(i=0.elements[i]. Obiect Sintaxă checkbox document.value) +parseInt(document.checkbox Reprezintă o casetă de validare în formular.calcul. status. Exemplu: Figura 8. disabled. onHelp.elements[0]. Subobiectul Checkbox poate fi accesat prin proprietatea form. <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> .calcul. onMouseMove. onKeyPress. Figura 8. onClick.forms[]. Subobiectul Checkbox este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”checkbox”>.

type document.checked logică (true/false) care indică starea casetei de validare: activată (Valoare true) sau dezactivată (false). form document.forms[]. status document.forms[].checkbox.checkbox. document.23.width Dimensiunea (în pixeli) casetei de validare.23 document.forms[]. value casetei Valoarea <input>.value de validare. Metodele (sub)obiectului Checkbox . defaultchecked document. document.checkbox. checked document.name de validare.checkbox. În acest caz.checkbox.align Proprietatea poate conţine valorile: left.forms[]. defaultValue Valoarea implicită a casetei de validare. proprietatea returnează Tipul checkbox.forms[].checkbox. defaultchecked Valoarea implicită a casetei de validare (true sau false).285 Proprietăţile obiectului Checkbox Proprietăţile obiectului Checkbox sunt prezentate în detaliu în figura 8. defaultValue document.forms[].status starea casetei de validare: Valoare logică (true/false) care indică activat ă (true) sau dezactivată (false).type de element în cadrul formularului.checkbox. center sau right. Corespunde atributului value al tag-ului width Figura 8.forms[].size Dimensiunea (în pixeli) a casetei de validare. Corespunde atributului size al tag-ului <input>.forms[].checkbox.forms[].form Referinţă la formularul care conţine caseta de validare.checkbox. Proprietate Sintaxă align Alinierea casetei de validare.disabled starea casetei de validare: logică (true/false) care indică Valoare dezactivată (true) sau activată (false).checkbox. corespunde atributului name al tag-ului size document. disabled document.checkbox. name casetei Numele <input>.forms[].forms[].forms[]. Corespunde atributului type al tag-ului <input>.checkbox. document.

24 document.checkbox. form.click() Simularea clic-ului mouse-ului pe caseta de validare. focus() Figura 8. focus(). onBeforeUpdate. (sub)Obiectul FileUpload este prezentat în detaliu în figura 8.form. onResize.elements[] sau prin numele său.25. Această metodă nu este detectată de onClick. Subobiectul fileUpload este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”file”>. (sub)Obiectul FileUpload Fişa (sub)obiectului FileUpload este prezentată în figura 8.focus() Caseta de validare preia focus-ul. onKeyDown.24.checkbox.26 Reprezintă o zonă de text în care utilizatorul poate introduce numele unui fişier care urmează a fi transmis server-ului.25 Conversaţia 6). onMouseOut. onMouseOver. onKeyPress. onMouseMove.checkbox. onDragStart.form. onKeyUp. click() document.26 (continuare) . name.forms[]. onSelectStart (vezi Figura 8.fileUpload Figura 8. onSelect. disabled.26. onHelp. type. width Metode: Gestionarii de evenimente: blur().286 Metodele (sub)obiectului Checkbox sunt prezentate în detaliu în figura 8. Metodă Sintaxă blur() document. Fişa (sub)obiectului FileUpload Obiectul părinte: Proprietăţi: Form defaultValue. Obiect Sintaxă fileUpload document. Figura 8. Subobiectul fileUpload poate fi accesat prin proprietatea form. onChange. onMouseDown. onBlur. select() onAfterUpdate.form. onFocus. onMouseUp. value.blur() Caseta de validare pierde focus-ul. size.

form Referinţă la formularul care conţine zona.fileUpload.forms[]. Corespunde atributului size al tag-ului Dimensiunea <input>.forms[].forms[].type de element în cadrul formularului.name Numele zonei. Corespunde atributului value al tag-ului <input>.forms[]. disabled document.fileUpload. name document. value document.forms[]. form document.fileUpload. Proprietate Sintaxă defaultValue document. În acest caz proprietatea Tipul returnează file. Corespunde atributului type al tag-ului <input>. Corespunde atributului name al tag-ului <input>.fileUpload.287 Exemplu: <form name=”form” > <input type=”file” name=”fişier1”/> </form> Proprietăţile (sub)obiectului FileUpload Proprietăţile (sub)obiectului FileUpload sunt prezentate în detaliu în figura 8.fileUpload.27. Metodele (sub)obiectului FileUpload .fileUpload.value Conţinutul zonei.width Dimensiunea (în pixeli) casetei de validare.fileUpload.27 document. size document.forms[]. type document.forms[].disabled care indică starea zonei: dezactivată logică (true/false) Valoare (true) sau activată (false).forms[]. width Figura 8. defaultValue Conţinutul implicit al zonei.size (în pixeli) zonei.fileUpload.

size.select() Selectează conţinutul zonei. readOnly.blur() Figura 8. Obiect Sintaxă hidden document. Figura 8. name. Metodă Sintaxă blur() document.28 Zona pierde focus-ul.forms[]. Proprietate Sintaxă .fileUpload. onBeforeUpdate. Subobiectul Hidden poate fi accesat prin proprietatea form.form.fileUpload. disabled. Subobiectul Hidden este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”hidden”>. document. (sub)Obiectul Hidden Fişa (sub)obiectului Hidden este prezentată în figura 8.29.31. value Metode: Gestionarii de evenimente: Figura 8.fileUpload.elements[] sau prin numele său.28.form. focus() Zona preia focus-ul.focus() select() document. onHelp (vezi Conversaţia 6) (sub)Obiectul Hidden este prezentat în detaliu în figura 8. Fişa (sub)obiectului Hidden Obiectul părinte: Proprietăţi: Form defaultValue.hidden Exemplu: Reprezintă o zonă de text ascunsă pentru utilizator.30 <form name=”form1”> <input type=”hidden” name=”Ascuns”/> </form> Proprietăţile (sub)obiectului Hidden Proprietăţile (sub)obiectului Hidden sunt prezentate în detaliu în figura 8. form.288 Metodele (sub)obiectului FileUpload sunt prezentate în detaliu în figura 8.30.29 onAfterUpdate. type.form.

Corespunde atributului value al tag-ului <input>. name. onKeyPress.hidden.size Dimensiunea (în pixeli) zonei. Corespunde atributului name al tag-ului <input>. Fişa (sub)obiectului Password Obiectul părinte: Proprietăţi: Form defaultValue. (sub)Obiectul Password Fişa (sub)obiectului Password este prezentată în figura 8. onMouseOut. maxLength. name document. onMouseUp. document. onSelectStart (vezi Conversaţia 6). onResize.289 defaultValue document.readOnly Valoare logică (true/false) care indică starea zonei. form document. onMouseMove.hidden.form Referinţă la formularul care conţine zona. type. click().forms[]. Corespunde atributului size al tag-ului <input>.hidden. onSelect.value Conţinutul zonei. onHelp. onFocus. onKeyDown. size. onMouseOver. blur(). readOnly. onMouseDown.name Numele zonei.forms[]. readOnly document.32. disabled document. onBeforeUpdate. onBlur. .31 Conţinutul implicit al zonei.hidden. type returnează text.forms[].forms[]. form. onChange.hidden. size document. Metode: Gestionarii de evenimente: Figura 8.hidden.forms[]. În acest caz proprietatea value document.type Tipul de element în cadrul formularului. onKeyUp.disabled Valoare logică (true/false) care indică starea zonei: dezactivată (true) sau activată (false).forms[].forms[]. value select(). disabled. defaultValue Figura 8. focus() onAfterUpdate.33.hidden.hidden.forms[].32 (sub)Obiectul Password este prezentat în detaliu în figura 8.

readOnly Valoare logică (true/false) – dacă zona este numai citită (true) sau nu (false).34 (continuare) document.password.290 Obiect Sintaxă Password document.disabled Figura 8. name document.size Dimensiunea (în pixeli) zonei. proprietatea returnează text. disabled Valoare logică (true/false) care indică starea zonei: dezactivată (true). type document.34.password.type Tipul elementului în cadrul formularului. form document.form Referinţă la formularul care conţine zona. Subobiectul Password este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”password”>.password Reprezintă un câmp în cadrul unui formular care afişează asteriscuri atunci când utilizatorul introduce parola.forms[].forms[].password.password. defaultValue document.forms[].33 <form name=”f1”> <input type=”password” name=”Pass” /> </form> Proprietăţile (sub)obiectului Password Proprietăţile (sub)obiectului Password sunt prezentate în detaliu în figura 8. Proprietate Sintaxă defaultValue document. Exemplu: Figura 8.maxLength Numărul maxim de caractere care pot fi introduse în zonă.34 Conţinutul implicit al zonei.name Numele zonei. Subobiectul Password poate fi accesat prin proprietatea form. activată (false).forms[]. Proprietatea corespunde atributului name al tag-ului <input>.password.forms[]. În acest caz.forms[].password. Această proprietate corespunde atributului type al tag-ului <input>.password. Corespunde atributului size al tag-ului <input>.forms[].forms[].elements[] sau prin numele său. size document.forms[]. readOnly document.password.value . value Figura 8.forms[].password. maxLength document.

name. defaultValue.form.291 Conţinutul zonei. click(). onClick. focus() onAfterUpdate. onBlur. checked.blur() Figura 8.length returnează numărul de caractere al zonei.select() Selectează conţinutul zonei. select() document. status.36 Conversaţia 6). onFocus.form. onKeyUp (vezi Figura 8. value.focus() Zona de text preia focus-ul. Metodă Sintaxă blur() document.password. onKeyPress. type.36. width blur(). onKeyDown. Proprietatea corespunde atributului value al tag-ului <input>. onFilterChange. document.password.form.form. onBeforeUpdate. onHelp.35 Zona pierde focus-ul. defaultChecked.35. (sub)Obiectul Radio Fişa (sub)obiectului Radio este prezentată în figura 8.password. size. click() detectată prin onClick. value. .password.click() Simularea clic-ului mouse-ului pe zona de text. Metode: Gestionarii de evenimente: disabled. onErrorUpdate. form. Această metodă nu este focus() document. Metodele (sub)obiectului Password Metodele (sub)obiectului Password sunt prezentate în detaliu în figura 8. Fişa (sub)obiectului Radio Obiectul părinte: Proprietăţi: Form align.

radio.forms[].forms[]. Exemplu: Figura 8. disabled Valoarea logică (true/false) care indică starea butonului: dezactivat (true).radio. activat (false). name document.checked Valoare logică (true/false) – butonul este activat (true) sau dezactivat (false).37. Această proprietate corespunde atributului name al tag-ului <input />.radio. Metodă Sintaxă align document.form Referinţă la formularul care conţine butonul radio.forms[]. Obiect Sintaxă radio document. defaultChecked Valoarea implicită a butonului radio (true/false). defaultValue document.radio Reprezintă un buton radio într-un formular.radio. .forms[]. Subobiectul Radio poate fi accesat prin proprietatea form.38 Alinierea butonului radio.forms[]. Subobiectul Radio este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”radio”>.name Numele butonului radio. defaultValue document.align Figura 8.elements[] sau prin numele său.radio.292 (sub)Obiectul Radio este prezentat în detaliu în figura 8.radio.forms[]. form document.radio. Subobiectul Radio permite utilizatorului să selecteze o singură opţiune dintr-un grup de acţiuni.38.forms[]. document. Proprietatea poate conţine valorile: left. checked document. center.forms[].disabled defaultChecked Valoarea implicită a butonului radio. right.37 <form name=”form1”> <input type=”radio” name=”optiune” /> </form> Proprietăţile (sub)obiectului Radio Proprietăţile (sub)obiectului Radio sunt prezentat în detaliu în figura 8.

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

onKeyUp. Proprietate Sintaxă align document. onBeforeUpdate.41 <form name=”form1”> <input type=”reset” /> </form> Proprietăţile (sub)obiectului Reset Proprietăţile (sub)obiectului Reset sunt prezentate în detaliu în figura 8.40.reset Exemplu: Reprezintă un buton care şterge valorile din toate zonele formularului curent. form document.reset.defaultValue Valoarea implicită a butonului. onMouseUp (vezi conversaţia 6) (sub)Obiectul Reset este prezentat în detaliu în figura 8. click().disabled Valoare logică (true/false) – butonul este dezactivat (true) sau activat (false).reset.form . pentru executarea acţiunii nu este necesar cod sursă JavaScript. type. onDblClick. Figura 8.forms[].40 onKeyPress. value Metode: Gestionarii de evenimente: blur(). onMouseMove. focus() onAfterDate.294 Fişa obiectului Reset este prezentată în figura 8.42 Alinierea butonului.forms[]. onClick. center sau right. name. form. onFocus.forms[]. onKeyDown.42. Ca şi în cazul butonului submit. onBlur. Proprietatea poate conţine valoarea: left. defaultValue document.41. Subobiectul Reset este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”reset”>. disabled.reset. onHelp. Fişa (sub)obiectului Reset Obiectul părinte: Proprietăţi: Form align. Figura 8. Obiect Sintaxă reset document. disabled document. onMouseOut. onMouseDown.forms[].forms[].align Figura 8.reset. onMouseOver. defaultValue.

295 Referinţă la formularul care conţine butonul. Metodele (sub)obiectului Reset Metodele (sub)obiectului Reset sunt prezentate în detaliu în figura 8.forms[].blur() Figura 8.form. click() detectată prin onClick.reset. proprietatea returnează reset.click() Simularea clic-ului mouse-ului pe zona de text.forms[].42 document. Această proprietate corespunde atributului value al tag-ului <input />.reset. Această metodă nu este focus() document. value Figura 8. În acest caz. document.form. Această proprietate corespunde atributului name al tag-ului <input />.43.reset. Această proprietate corespunde atributului type al tag-ului <input />.focus() Butonul preia focus-ul. name document.reset.type Tipul de element în cadrul formularului.reset. type document.43 Butonul pierde focus-ul.form. (sub)Obiectul Submit .value (continuare) Valoarea butonului.forms[]. Metodă Sintaxă blur() document.reset.name Numele butonului.

46. Pentru executarea acţiunii nu este necesar cod sursă JavaScript. click().46 Alinierea butonului. onBeforeUpdate. onMouseDown. Obiect Sintaxă Submit document.submit. name document. Fişa (sub)obiectului Submit Obiectul părinte: Proprietăţi: Form align.forms[].submit. onMouseUp (vezi conversaţia 6).44.45 <form name=”form1”> <input type=”submit” name=”init” /> </form> Proprietăţile (sub)obiectului Submit Proprietăţile (sub)obiectului Submit sunt prezentate în detaliu în figura 8. form document.296 Fişa (sub)obiectului Submit este prezentată în figura 8. Proprietatea poate conţine valoarea: left.align Figura 8.name . onBlur. type. center sau right. onDblClick. form. Figura 8.45. Proprietate Sintaxă align document.forms[].submit Exemplu: Reprezintă un buton care înaintează server-ului datele conţinute în formular.forms[].form Referinţă la formularul care conţine butonul. value disabled. Metode: Gestionarii de evenimente: blur(). onClick. onKeyUp.submit. Subobiectul submit este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”submit”>. onMouseMove. name.44 onMouseOver.forms[]. onKeyDown.submit. disabled document. onHelp. onMouseOut.disabled Valoare logică (true/false) – butonul este dezactivat (true) sau activat (false). onFocus. Subobiectul submit poate fi accesat prin proprietatea form.elements[] sau prin numele său. onKeyPress. (sub)Obiectul Submit este prezentat în detaliu în figura 8. Figura 8.forms[]. focus() onAfterUpdate.

form. length. . onFocus.add().focus() Butonul preia focus-ul.49. onMouseOver. onKeyUp. onMouseMove.click() Simularea clic-ului mouse-ului pe zona de text. onResize.46 (continuare) Numele butonului.value Valoarea butonului.forms[].remove(). Metodele (sub)obiectului Submit Metodele (sub)obiectului Submit sunt prezentate în detaliu în figura 8. Această proprietate corespunde atributului type al tag-ului <input />. onMouseOut. (sub)Obiectul Select Fişa (sub)obiectului Select este prezentată în figura 8. proprietatea returnează submit.blur() Figura 8.submit. size. type. onBlur. focus() document. Această metodă nu este detectată prin onClick. options[].47 Butonul pierde focus-ul.form. onHelp. Metodă Sintaxă blur() document. form.type Tipul de element în cadrul formularului. blur(). option.48 (sub)Obiectul Select este prezentat în detaliu în figura 8. remove() onAfterDate.submit. type document. onKeyDown. onRowExit.47. value add().297 Figura 8. option.submit. value document. onChange. focus(). onMouseUp. onBeforeUpdate. onDregStart. click() document. name. În acest caz. Această proprietate corespunde atributului name al tag-ului <input />.form. selectedIndex.48.submit. onKeyPress. Această proprietate corespunde atributului value al tag-ului <input />. multiple. onMouseDown.submit. onSelectStart (vezi conversaţia 6) Metode: Gestionarii de evenimente: Figura 8. Fişa (sub)obiectului Select Obiectul părinte: Subobiecte: Proprietăţi: Form Option disabled.forms[].

50 Valoare logică (true/false) – zona este dezactivată (true) sau activată (false).form Referinţă la formularul care conţine zona.name Numele zonei.select..forms[].forms[]. form document.select. Această proprietate conţine valoarea –1 dacă nici o opţiune nu este selectată. length document.select. name document.size .elements[] sau prin numele său.298 Obiect Sintaxă Select document.select.select.selectedIndex Valoare care indică rangul opţiunii selectate în listă.length Numărul de opţiuni din listă.select Reprezintă o listă derulantă care afişează o serie de opţiuni într-un formular. Subobiectul Select poate fi accesat prin proprietatea form.forms[].forms[].forms[]..forms[]. </select>.forms[].disabled Figura 8. selectedIndex document.forms[]. Exemplu: Figura 8.49 <form name=”form1”> <select name=”optiuni”> <option value=”opţiune1”>Prima opţiune</option> <option value=”opţiune2”>A doua opţiune</option> <option value=”opţiune3”>A treia opţiune</option> </select> </form> Proprietăţile (sub)obiectului Select Proprietăţile (sub)obiectului Select sunt prezentate în detaliu în figura 8.select.50. Această proprietate corespunde atributului name al tag-ului <select/>. Size document.select.options[] Setul de opţiuni propuse în listă. Subobiectul Select este versiunea „transpusă în obiect” a tag-ului (X)HTML <select> .select. options[] document. multiple document. Proprietate Sintaxă disabled document.forms[].multiple Valoare logică (true/false) – selecţia multiplă este autorizată (true) sau nu (false).

52.remove(Rang) Elimină din listă opţiunea al cărei rang este indicat în argument.select. elementul este adăugat la finele listei.299 Figura 8. Fişa (sub)obiectului Text .form. remove() document.remove() document.51 Elimină din listă opţiunea al cărei rang este indicat în argument.value Valoarea opţiunii selectate. focus() Zona preia focus-ul. Dacă argumentul option.remove (Rang) Figura 8.form. document. Dacă argumentul Amonte este omis. option.select. Amonte) Adaugă în listă opţiunea referită prin argumentul Element şi o inserează înaintea opţiunii referite prin argumentul Amonte.form.forms[].option.select.option.forms[].form. blur() document.form.form.51.select. value document.Amonte) Adaugă în listă opţiunea referită prin argumentul Element şi o inserează înaintea opţiunii referite prin argumentul Amonte.add(Element. add(Element.select. type document. Metodă Sintaxă add() document. Metodele (sub)obiectului Select Metodele (sub)obiectului Select sunt prezentate în detaliu în figura 8. (sub)Obiectul Text Fişa (sub)obiectului Text este prezentată în figura 8.blur() Zona pierde focus-ul.add() Amonte este omis.focus() document.select.select.select.50 (continuare) Valoare care indică numărul de opţiuni vizibile simultan în listă.type Această proprietate conţine fie select-one fie select-multiple. elementul este adăugat la finele listei.

onClick. maxLength. click(). onSelect (vezi conversaţia 6). form document.form[]. Subobiectul Text este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”text”>.text.text Reprezintă o zonă de text formată dintr-o singură linie.form[].maxLength . onMouseUp.52 onKeyUp. onMouseOut. disabled document.text. type.defaultValue Figura 8.54. Obiect Sintaxă Text document.300 Obiectul părinte: Proprietăţi: Form defaultValue.elements[] sau prin numele său. onBeforeUpdate. disabled. name. Figura 8. Proprietate Sintaxă defaultValue document.text. onFocus. onKeyDown.form[].disabled Valoare logică (true/false) – zona este dezactivată (true) sau activată (false). onKeyPress.form Referinţă la formularul care conţine zona. onHelp. focus().53 <form name=”form1”> <input type=”text” name=”text1” /> </form> Proprietăţile (sub)obiectului Text Proprietăţile (sub)obiectului Text sunt prezentate în detaliu în figura 8. form.53. size.forms[]. onMouseMove. onMouseOver. maxLength document. Subobiectul Text poate fi accesat prin proprietatea form. Exemplu: Figura 8. select() onAfterUpdate. onBlur.text. readOnly. onMouseDown.form[]. (sub)Obiectul Text este prezentat în detaliu în figura 8. value Metode: Gestionarii de evenimente: blur().54 Conţinutul implicit al zonei.

form[].text.text.form.type Tipul elementului în cadrul formularului.click() Simularea clic-ului mouse-ului pe zona de text.size Mărimea (în pixeli) zonei.form[]. name document. Metodă Sintaxă blur() document.focus() select() document. proprietatea returnează text.length returnează numărul de caractere ale zonei. value. Această proprietate corespunde atributului type al tag-ului <input />.text. Această proprietate corespunde atributului value al tag-ului <input />. (sub)Obiectul Textarea . size document.form.name Numele zonei. readOnly document.text. Metodele (sub)obiectului Text Metodele (sub)obiectului Text sunt prezentate în detaliu în figura 8.text. value document. click() document.text.select() Selectează conţinutul zonei.54 (continuare) Numărul maxim de caractere care pot fi introduse în zonă.text. Această proprietate corespunde atributului size al tag-ului <input />.text. focus() Zona de text preia focus-ul.readOnly Valoare logică (true/false) – zona este numai citită (true) sau nu (false).form[].blur() Figura 8.form.form[]. Această proprietate corespunde atributului name al tag-ului <input />.form[]. type document.form.55. document.301 Figura 8.value Conţinutul zonei. În acest caz.55 Zona pierde focus-ul. Această metodă nu este detectată prin onClick.text.

onBeforeUpdate.elements[] sau prin numele său. onKeyUp.56 conversaţia 6). focus(). onFilterChange. wrap Metode: Gestionarii de evenimente: blur(). Subobiectul Textarea poate fi accesat prin proprietatea form.56.form1.value=f.length>lungmax){ f.value. } } </script> </head> <body> <form name=”form1”> . onRowEnter. size. rows. document. maxLength. onErrorUpdate.value=f. onBlur. type. onSelectStart (vezi Figura 8. Fişa (sub)obiectului Textarea Obiectul părinte: Proprietăţi: Form cols.lungmax). onDragStart. onHelp. select() onAfterUpdate.57 <html> <head> <title>demo</title> <script> function control(f){ lungmax=30. value. defaultValue. onKeyDown.value. if(f. onMouseUp. onBeforeUnload. onMouseDown. (sub)obiectul Textarea este prezentat în detaliu în figura 8. Exemplu: Figura 8.numar. document.value=lungmax. Subobiectul Textarea este versiunea „transpusă în obiect” a tag-ului (X)HTML <input type=”textarea”>.substring(0. name. readOnly. onChange. onKeyPress. Obiect Sintaxă Textarea document. onMouseOver.numar.value. form.302 Fişa (sub)obiectului Textarea este prezentată în figura 8.57.form1. onMouseOut. click().length. onRowExit. disabled.form[]. onFocus. onMouseMove. onSelect.textarea Reprezintă o zonă de text multilinie.

form Referinţă la formularul care conţine zona. name <input />.forms[].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 execuţiei script-ului.forms[]. . rows document.58 Numărul de coloane ale zonei. Proprietate Sintaxă cols document. readOnly document.cols Figura 8.textarea.forms[].name Numele zonei.forms[].forms[].forms[].readOnly Valoare logică (true/false) – zona este numai citită (true) sau nu (false). disabled document.forms[].textarea.maxLength Numărul maxim de caractere care pot fi introduse în zonă.disabled Valoare logică (true/false) – zona este dezactivată (true) sau activată (false).textarea. form document.58.forms[].textarea. Proprietăţile (sub)obiectului Textarea Proprietăţile (sub)obiectului Textarea sunt prezentate în detaliu în figura 8. defaultValue document.rows Numărul de linii ale zonei.textarea. Această proprietate corespunde atributului name al tag-ului document.textarea.textarea.defaultValue Conţinutul implicit al zonei.textarea. maxLength document.

Această proprietate corespunde atributului type al tag-ului <input />. type document.forms[].size Dimensiunea (în pixeli) zonei.length returnează numărul de caractere al zonei. În acest caz.value Conţinutul zonei.blur() Figura 8. ‰ Creaţi un formular care afişează o listă de cărţi (pe care le-am folosit în cadrul acestei lucrări) JavaScript cu preţul de vânzare. none (fără trecere la linia următoare în mod automat). .textarea. wrap document.textarea. proprietatea returnează text. Această proprietate corespunde atributului size al tag-ului <input />.forms[].type Tipul elementului în formular.60). Această proprietate poate conţine trei valori: hard (un <CR> este inserat la sfârşitul fiecărei linii). document. Această metodă nu este focus() Zona de text preia focus-ul. În momentul selectării/deselectării cărţilor. click() detectată prin onClick(). value.forms[]. Această proprietate corespunde atributului value al tag-ului <input />.59.forms[].select() Aplicaţii Selectează conţinutul zonei.textarea.form.focus() select() document. Metodele (sub)obiectului Textarea Metodele (sub)obiectului Textarea sunt prezentate în detaliu în figura 8. precedate de o casetă de validare.59 Zona pierde focus-ul. totalul este recalculat şi afişat într-o zonă de text (figura 8.58 (continuare) Indică modul de gestionare al sfârşitului de linie.wrap Figura 8.textarea. Metodă Sintaxă blur() document.form.textarea.textarea. value document. soft (textul trece pe linia următoare fără <CR>).304 size document.textarea. document.form.textarea.click() Simularea clic-ului mouse-ului pe zona de text.form.

60 În figura 8. Figura 8.61 este prezentat documentul XHTML în care s-a inserat script-ul de calcul.61 . Rezultatele execuţiei sunt prezentate în figura 8.62.305 Figura 8.

62 Comentarii: 9 Formularul (calcul) este clasic. 9 Pentru fiecare casetă de validare în tag-ul <input> s-a definit gestionarul de evenimente onClick.61). De exemplu.63 Observaţi cei trei parametrii ai buclei. el însuşi situat în documentul curent.elements. Aici se adaugă 1 la valoarea variabilei i (i++). trebuie modificată de asemenea şi condiţia de test. Bifaţi un articol! Preţul său este adunat la totalul deja prezent în câmpul TOTAL. 20. poate fi recuperată valoarea fiecărui subarticol (element) al formularului. 3. el conţine o zonă de text (pentru TOTAL) şi câte o casetă de validare pentru fiecare articol. Primul element are rangul 0.length. 9 Urmează definiţiile casetelor de validare (checkbox).90. 2. 9 Zona care afişează totalul general este un câmp text a cărui dimensiune a fost limitată la 10. atunci când activez sau dezactivez un articol. Figura 8. Dar. Testul de ieşire din buclă: i<document. dacă se adaugă ori se suprimă o casetă de validare. 9.306 Figura 8. elementul (subobiectul) 0 este situat în formularul cu numele calcul. În consecinţă. Valoarea (value) fiecărei casete de validare reprezintă preţul articolului: 20. atunci instrucţiunile din corpul buclei nu mai sunt efectuate. Pasul. Putem simplifica testul scriind i<4. Este mai uşor să utilizăm proprietatea length a setului de elemente. .calcul. totalul existent este anulat.63. dar logică. Valoarea 0 este atribuită proprietăţii value. figura 8. Aici testul compară valoarea variabilei i cu numărul de elemente ale formularului. 18. Dezactivaţi un articol! Preţul său este scăzut din total. dar. 9 Fiecare element (subobiect) al formularului este identificat prin numărul de ordine: elements[0] pentru primul subobiect (total). Variabila de control a buclei i este iniţializată cu 1. elements[1] pentru al doilea subobiect etc. Sintaxa pentru identificarea unui subobiect (element) precis al formularului este puţin lungă. Bucla for execută instrucţiunile cuprinse între cele două acolade ({ şi }). care execută funcţia JavaScript calcule() al cărui cod este definit în secţiunea <head> a paginii Web (figura 8. în acest caz el nu trebuie prelucrat de către bucla for întrucât este vorba de câmpul Total. plasaţi între paranteze: 1. 9 Prin intermediul unei bucle for.30. Dacă în urma evaluării condiţiei rezultatul este FALSE. El indică modul în care evoluează variabila de control a buclei la fiecare trecere. ea returnează în mod automat numărul de elemente ale formularului.

Figura 8.65. Bucla este executată încă o dată. Variabila i ia valoarea 2. Cel de-al treilea parametru al buclei este executat: i++. Proprietatea checked a elementului (subobiectului) 1 al formularului este testată. ParseFloat converteşte un şir de caractere într-o valoare numerică reală. Dacă testul este TRUE. Puteţi adăuga oricâte articole doriţi.64).64 9 Funcţia parseFloat este obligatorie întrucât valorile checkbox-urilor sunt date de tip text. El returnează valoarea FALSE. Această proprietate returnează valoarea TRUE sau FALSE. 4. Expresia: . 2. Figura 8. Variabila i ia valoarea 1. 5.307 9 Proprietatea checked (casetă bifată) a fiecărei casete de validare a formularului este testată în continuare.calcul. Testul (al doilea argument al buclei) buclei este efectuat: i<4.65 1.checked). if(document. ea returnează 3. Sfârşitul buclei simbolizat prin acolada }. 6. Valoarea elementului 1 este adăugată la conţinutul câmpului TOTAL. ParseFloat este indispensabilă dacă valoarea unui câmp urmează să fie utilizată într-o expresie aritmetică. valoarea TRUE. atunci TOTAL (elements[0]) este recalculat. ‰ Simulaţi funcţionarea buclei for din aplicaţia precedentă pentru cazul în care articolul 1 a fost bifat (activat). figura 8. valoarea sa este adăugată la valoarea elementului ce urmează a fi testat (figura 8.elements[1]. ‰ Personalizaţi script-ul din aplicaţia precedentă. având grijă de a preciza valoarea fiecăruia dintre ele.

Figura 8.67 În figura 8. Introduceţi valoarea lui n într-o zonă simplă de text.length din iniţializarea buclei va furniza tot timpul numărul de elemente fără a mai fi nevoie ca dumneavoastră să mai interveniţi.66). . utilizaţi funcţia parseInt. Indicaţie. Dacă lucraţi numai cu valori întregi. subobiect al obiectului Form.308 document.67 este prezentat codul sursă (X)HTML complet (vezi script-ul aplicaţiei). Figura 8.calcul.elemnts.66 ‰ Scrieţi un program JavaScript care calculează suma primelor n numere naturale.68 este prezentat rezultatul execuţiei programului JavaScript pentru 13 numere naturale. În figura 8. Înlocuiţi în acest caz funcţia parseFloat cu funcţia parseInt (figura 8.

prin poştă electronică la adresa (fictivă) webmaster@abc.69. Figura 8. Figura 8.70 .68 ‰ Scrieţi un program JavaScript pentru expedierea (conţinutului) formularului din figura 8.69 În figura 8.309 Figura 8.70 se prezintă documentul XHTML. Personalizaţi script-ul.ro.

jsworkshop. cu ajutorul unui script a corectitudinii informaţiilor introduse de către utilizator.71 este prezentat codul (X)HTML complet. fără îndoială aplicaţia cea mai preţioasă a limbajului JavaScript. Puteţi valida câmpuri de intrare. Validaţi un formular cu JavaScript Validarea formularelor reprezintă. Această tehnică prezintă avantajul că permite citirea rapidă a datelor care aparţin unui formular. . Puteţi utiliza limbajul JavaScript pentru: 9 validarea datelor introduse de utilizator.310 Remarci: 9 Pentru a personaliza acest formular. În caz de eroare (x<0) se va afişa mesajul: „Rădăcină imaginară”. în care o parte sau întreaga prelucrare are loc pe parte de client. Aplicaţii ‰ Calculaţi rădăcină pătrată dintr-un număr ( x ). Validaţi datele introduse de utilizator ( x ≥ 0 ). utilizând gestionari de evenimente şi funcţii JavaScript. 9 a testa prezenţa datelor în câmpurile obligatorii ale unui formular (un câmp este prezent dacă nu este vid). în care s-a inserat script-ul de calcul. 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 sâmbătă/duminică a săptămânii).ro cu propria dumneavoastră adresă de e-mail. 9 construirea formularelor interactive. 9 Există numeroase script-uri şi servicii CGI gratuite (vezi http://www. grupuri de câmpuri sau întregul formular. Validarea unui formular constă în verificarea. 9 Atributul enctype=”text/plain” al tag-ului form asigură utilizatorul că informaţiile din cadrul mesajului vor fi expediate într-o formă lizibilă. înlocuiţi webmaster@abc.com/). În figura 8.

311 Figura 8.72 . Figura 8.73 se prezintă rezultatele execuţiei programului pentru x=-16 şi pentru x=16.71 În figurile 8.72 şi 8.

74 se prezintă codul complet al documentului HTML. . În caz de eroare afişaţi unul din mesajele de mai jos: 9 „Aţi uitat să introduceţi numele dumneavoastră!” 9 „Aţi uitat să introduceţi prenumele dumneavoastră!” 9 „Aţi uitat să introduceţi numărul dumneavoastră de card!” În figura 8. codcard nu este vid. ‰ Scrieţi un program JavaScript care verifică dacă conţinutul celor trei câmpuri ale unui formular: nume.73 Comentaţi codul XHTML al aplicaţiei.312 Figura 8. prenume.

75.75 .76 se prezintă rezultatele execuţiei programului JavaScript. Figura 8.74 În figura 8. figura 8.313 Figura 8.

În acest caz.77). Formularul poartă numele de „aplicaţie”. Comentaţi linia de cod onsubmit=”return verif()” (vezi tag-ul form).314 Figura 8. s-o corectaţi!”. se va genera mesajul de eroare: „Adresa de e-mail este incorectă! Vă rog.). introduceţi adresa de e-mail!”. Acest nume va fi utilizat în cadrul script-ului.76 Remarcă. Figura 8. Dacă din adresa de e-mail lipsesc @ sau punctul (. Dacă zona de e-mail este vidă se va genera mesajul de eroare: „Vă rog.77 . atunci adresa de e-mail va fi considerată incorectă.ro. ‰ Scrieţi un script care validează adresa de e-mail introdusă într-o zonă de tip text din cadrul unui formular (figura 8. De notat că formularul va fi expediat la adresa e-mail (imaginară) webmaster@abc.

78 În figura 8.79.79 . figura 8.315 Figura 8.80 se prezintă câteva exemple de test ale script-ului pe care l-aţi realizat. Figura 8.

9 Pentru informaţii suplimentare privind o validare mai complexă a unei adrese e-mail consultaţi site-ul: http://developer. ‰ Simulaţi funcţionarea următorului program JavaScript (figura 8.80 Remarci 9 Dacă doriţi.81).netscape.com/library/exemples/javascript/ formval/overview.316 Figura 8.html.81 . Figura 8. puteţi personaliza script-ul.

iar în caz de eroare se vor afişa mesaje corespunzătoare. Afişarea rezultatelor se face într-o fereastră distinctă.85. Datele care se vor introduce vor fi validate.83 sunt prezentate: ecranul (intrare/ieşire) cu „Situaţia livrărilor de benzină pentru rezervoarele R1 R2 R3” şi specificaţiile de programare. cu singura deosebire (importantă!) că datele sunt introduse cu ajutorul unui formular (X)HTML. care dă un plus de interactivitate paginilor Web. 9 Varianta 2 – Introducerea livrărilor se face printr-o singură zonă de text. ‰ Specificaţii de programare În figurile 8. Se vor realiza două variante: 9 Varianta 1 – Introducerea livrărilor se face într-o zonă text asociată fiecărei zile şi fiecărui rezervor.82 şi 8. .84. Afişarea rezultatelor se face în aceeaşi fereastră în zone de text distincte. Selecţia rezervorului şi a zilei se face printr-o listă de selectare. Mesajele de validare a datelor şi tabela de variabile sunt prezentate în figura 8.317 EXEMPLUL 8 JAVASCRIPT (varianta 1) Vom aborda şi în cadrul acestei conversaţii aceeaşi problemă pe care am abordat-o în conversaţia precedentă (EXEMPLUL 7 JAVASCRIPT). respectiv figura 8.

82) de la tastatură. Livrările. Valorile livrărilor. pentru fiecare rezervor (R1. miercuri. marţi. Intrări. rezervor).83 un mesaj de eroare.82 Specificaţii de programare Descriere. Programul editează într-o pagină Web situaţia livrărilor de benzină efectuate zilnic din trei rezervoare cilindrice echilaterale (R1. vineri) şi pe rezervoare (R1. R2. ziua. joi. Afişarea tuturor rezultatelor se realizează atunci când se execută clic pe butonul Rezultate (vezi figura 8. 20) se generează Figura 8. pe zile (luni. R3) se introduc într-un formular (vezi figura 8. De asemenea programul afişează livrările maxime şi minime (valoare. În situaţia în care datele de intrare nu sunt numerice şi nu respectă intervalul (0. R2. pe zile. . R3).318 Figura 8. R3).82). R2.

Valoarea introdusă este mai mare ca 20..85. T31. .jmin: numere întregi. rezervor). M4. rezervor).! Valoarea trebuie să fie >0. Afişarea rezultatelor. Creare şi iniţializare matrice livrări.jmax.imin.84 să fie <20.T21. păstrează mediile livrărilor pe rezervor max. în fiecare zi Figura 8. ziua.! Valoarea trebuie Figura 8. T43.. Media livrărilor pe zile şi pe rezervoare (în cadrul aceluiaşi formular).85 ‰ Documentaţia de proiectare Pseudocodul pentru EXEMPLUL 8 JAVASCRIPT (Varianta 1) este prezentat în figura 8. Plasare valori valide (întregi) în formular. Variabile de stare st: (real) folosit pentru calculul sumei livrărilor totale pe zile şi rezervoare s: (real) folosit pentru calculul sumelor parţiale 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 săptămânii imax. M5. Descriere Valorile introduse nu sunt numerice. zmax. Lista de funcţiuni ale programului 1. 3..M3. M2.! Caractere invalide. T33. M6. 2. rmax. Trunchiere valori.83 (continuare) 5. Plasare valoare în matrice livrări. T42. T63. T13. Valoare greşită pentru . T41.. 8. vmin. Validare date. zone de text pentru afişarea rezultatelor mediilor b: vector de numere reale. Figura 8. T52. T61. păstrează mediile livrărilor pe zile d: vector de numere reale. T62. rmin: Obiecte. ziua. T23. editare text pentru introducerea valorilor livrărilor pe fiecare rezervor. T32.. T51. 4.min: numere reale.T12. Tabela de variabile Variabile de intrare T11. vmax. Stop. Calculul mediilor livrărilor pe zile şi pe rezervoare. M6.319 Ieşiri. păstrează indicii livrărilor maxime şi minime din matricea a Variabile de ieşire a: matrice de numere reale. 6. zone T53: de Obiecte. Mesaje Mesaj Valoare greşită pentru . 7. Valoare greşită pentru . păstrează valorile livrărilor pe zile şi rezervoare M1.. Valoarea introdusă este negativă. păstrează valoarea maximă şi minimă pentru livrări T22. zmin. livrarea maximă (valoare. livrarea minimă (valoare.

j++) ai.valoare reala s=transforma in sir de caractere x i=pozitia punctului zecimal in sir IF3 IF(i≠-1) s=copiazasubsir(s.320 Pseudocodul BEGIN //initializeaza vectorul Z cu numele zilelor z=luni.j<5.20) IF2 ENDIF EXEMPLUL8 END // transforma o valoare reala in sir de caractere // si trunchiaza la doua zecimale TRUNCHIAZA BEGIN Parametrii: x.0.marti.valoarea maxima permisa rval=fals x=transforma in real item.i++) FORJ FOR(j=0.0.valoarea minima permisa max.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.miercuri.x) .i+2) IF3 ENDIF RETURN s TRUNCHIAZA END EXEMPLUL8 VALIDEAZA IF4 IF4 IF5 IF5 IF6 IF6 Figura 8.joi vineri //aloca spatiu de memorie si //initializeaza matricea livrarilor FORI FOR(i=0.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.j=0.86 BEGIN //valideaza valoarea introdusa in zona de text Date intrare: item-zona de text care a generat evenimentul onBlur min.i<3.

86 jmax=j (continuare) .j++) IF7 IF(max<ai.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.1.0 imax=0 imin=0 jmax=0 jmin=0 FORI2 FOR(i=0.nume s1=extrage_subsirul(s.j++) s=s+ai.i<3.i++) s=s+ai.j st=st+aij FORJ1 ENDFOR di=s/5 FORI1 ENDFOR d3=s/15 // determinarea maximului si minimului max=a0.i++) s=0 FORJ1 FOR(j=0.j FORI ENDFOR bj=s/3 FORJ ENDFOR // calculul mediilor pe rezervoare st=0 FORI1 FOR(i=0.j<5.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.j<5.i<3.j) max=aij imax=i Figura 8.i++) FORJ2 FOR(j=0.0 min=a0.2) sir=transforma_in_integer(s1)-1 s1= extrage_subsirul(s.3) ic= transforma_in_integer(s1)-1 air.i<3.ic=transforma_in_real(T1.j++) s=0 FORI FOR(i=0.valoarea ce va fi depusa s=item.j<5.2.

value=trunchiaza(B[4]) T61. a[2]=new Array(5).322 ENDIF IF(min>ai.value=trunchiaza(B[2]) M4. în care s-a inserat script-ul (programul JavaScript) este prezentat în figura 8."Miercuri".j) min=aij imin=i jmin=j IF8 ENDIF FORJ2 ENDFOR FORI2 ENDFOR imin=imin+1 imax=imax+1 //afisare rezultate M1."). i=s."Joi".value=Zjmax Figura 8. <html> <head> <title>Exemplul 8</title> <script language="JavaScript"> <!--a=new Array(3). function trunchiaza(x) { var s=""+x.0. a[0]=new Array(5).86 zmin.value=trunchiaza(max) vmin.value=Zjmin (continuare) CALCULEAZA END IF7 IF8 ‰ Codificarea în limbajul JavaScript Documentul complet (X)HTML.value=trunchiaza(D[0]) T62.value=trunchiaza(D[1]) T63."Marti".value=trunchiaza(D[3]) vmax.j++) a[i][j]=0. Figura 8.value=trunchiaza(min) rmax. var Z = new Array("Luni".87 } . } return s.i++) for(j=0. a[1]=new Array(5). if(i!=-1){ s=s.87.substring(0.j<5.i+3).value=trunchiaza(D[2]) M6.value=trunchiaza(B[0]) M2.i<3.value=trunchiaza(B[3]) M5.value="R"+imin zmax. for(i=0."Vineri").indexOf(".value="R"+imax rmin.value=trunchiaza(B[1]) M3.

for(j=0. } D[i]=S/5.87 for(i=0. min.2))-1.j. } D[3]=ST/15.j++){ S=S+a[i][j].jmin=0.i++){ (continuare) for(j=0.imin=0. // DETERMINAREA MAXIMULUI SI MINIMULUI max=a[0][0].x).j<5. if(isNaN(x)){ alert("Valoare gresita pentru " + item. var x=parseFloat(item. for(i=0. puneVal(item. for(j=0.j++){ . jmax=0. var ic=parseInt(s. else if (x> max) alert("Valoare gresita pentru " + item.i++) S=S+a[i][j]. } return rVal. } else if (x < min) alert("Valoare gresita pentru " + item. B[j]=S/3. ST=ST+a[i][j]. for(i=0.i<3.name + "!Valoarea trebuie >" + min).value).323 function puneVal(item. a[ir][ic]=x.i++) { S=0.x) { s=item. } function calculeaza() { var i. } // CALCULUL MEDIILOR PE REZERVOARE D = new Array(4).j<5. min=a[0][0].j++) { S=0. var ir=parseInt(s.substring(1.substring(2. else { rVal = true. imax=0.j<5.name + "!Caractere invalide"). Figura 8. max) { var rVal = false. } function valideaza(item.name. ST=0.i<3.i<3.3))-1.name + "! Valoarea trebuie sa fie < " + max). B = new Array(5).

"> <td><input type="text" name="T13" size="7" onBlur="valideaza(this.input_form.value=trunchiaza(max).jmin=j.0. document.20).} }} imin++."> Figura 8.T63.M3.0.324 if(max<a[i][j]){max=a[i][j].M2.input_form.imin=i. document.20). document.value=trunchiaza(D[0]).vmax."> <td><input type="text" name="T23" size="7" onBlur="valideaza(this.vmin. document.20).value=trunchiaza(D[2]). document.jmax=j."> <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.value=trunchiaza(B[0])."> <td><input type="text" name="T12" size="7" onBlur="valideaza(this. document.0.87 <td><input type="text" name="T33" size="7" onBlur="valideaza(this.f1.0.value=trunchiaza(B[4]).20).M1.value=trunchiaza(B[2]).value=Z[jmax].input_form.input_form.imax=i.f1. document. document.value=Z[jmin].value=trunchiaza(B[3]).0.input_form.20).} if(min>a[i][j]){min=a[i][j].value=trunchiaza(B[1]).input_form. document. document. document."> <td><input type="text" name="T32" size="7" onBlur="valideaza(this.value=trunchiaza(min).0.f1.value=trunchiaza(D[3]).T61.input_form. document.20).0.20).f1. document.M5.0.rmax."> (continuare) <td><input type="text" name="M3" size="7" readonly> .value="R"+imin.M6."> <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. document.20). } // --> </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.input_form.zmin.f1.input_form.0. document.20).imax++.f1.value=trunchiaza(D[1]).rmin.value="R"+imax.T62.zmax."> <td><input type="text" name="T22" size="7" onBlur="valideaza(this.M4.

x).0."> <td><input type="text" name="T43" size="7" onBlur="valideaza(this.20). cu funcţia de validare date validate() pentru obiectele zone de text şi onClick cu funcţia compute() pentru butonul de calcul rezultate.0. min."></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 secţiunea <head> a documentului HTML) conţine patru funcţii: trunchiaz•(x).0.0."> <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().20). 9 Pentru calculul mediei mediilor livrărilor s-a utilizat instrucţiunea de atribuire D[3]=ST/15 unde: D este vectorul mediilor livrărilor pe rezervoare iar ST reprezintă total livrări."> <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. .20)."> <td><input type="text" name="T42" size="7" onBlur="valideaza(this. validate(item.20). compute(). max).20)."> <td><input type="text" name="T52" size="7" onBlur="valideaza(this. puneVal(item.0.325 <tr> <td><b>JOI:</b> <td><input type="text" name="T41" size="7" onBlur="valideaza(this."> <td><input type="text" name="T53" size="7" onBlur="valideaza(this.0.20). 9 S-au folosit gestionarii de evenimente onBlur.

88 În figura 8.89 se prezintă rezultatele execuţiei programului JavaScript pentru un set de date ilustrat în cadrul formularului afişat. Figura 8.326 Vizualizaţi documentul într-un browser (figura 8. .88) şi testaţi script-ul.

specificaţiile de programare respectiv tabela de variabile.93 sunt prezentate: ecranul pentru introducerea livrărilor (pe zile şi pe rezervoare). R3. R2. 8. .91.90. 8.92 şi 8.327 Figura 8. ecranul cu „Situaţia livrărilor de benzină pentru rezervoarele R1.89 EXEMPLUL 8 JAVASCRIPT (varianta 2) ‰ Specificaţii de programare În figurile 8.

91 Specificaţii de programare Descriere. R2.90 Figura 8.90). Afişarea tuturor rezultatelor se face într-o fereastră distinctă.328 Figura 8. R3). . Programul afişează de asemenea livrările maxime şi minime cu precizarea numărului rezervorului şi a zilei în care s-a efectuat livrarea respectivă. în momentul în care se execută clic pe Figura 8. Programul editează într-o pagină Web situaţia livrărilor de benzină efectuate zilnic din trei rezervoare cilindrice echilaterale (R1.92 butonul Afi•eaz• (vezi figura 8.

Tabela de variabile Variabile de intrare Rezervor: obiect. Ieşiri. păstrează mediile livrărilor a: matrice de numere reale. mediile (pe zile şi pe rezervoare) sub formă de tabel. pentru fiecare rezervor se introduc printr-o singură zonă de text a unui formular. vineri) şi pe rezervoare (Rezervor1. Iniţializează vectorul z cu numele zilelor săptămânii. pe linia şi coloana corespunzătoare rezervorului şi zilei respective (vezi funcţia Livreaz•()). miercuri. 3. 5. livrarea maximă (valoare. Răspunde la evenimentele generate de butonul Afi•eaz•. păstrează valorile livrărilor pe zile şi rezervoare max. Selecţia rezervorului şi a zilei se face printr-o listă de selectare. livrarea minimă (valoare. Stop. Depune valoarea din zona de editare în matricea livrărilor a. 7. rezervor).jmax. Răspunde la evenimentele generate de zona de editare T1. Calculează mediile pe zile şi pe rezervoare. Afişează rezultatele în fereastra RezWindow. Valorile livrărilor. Rezervor3) se introduc printr-o singură zonă de text a unui formular (vezi figura 8. Validează valoarea introdusă în zona de text. rezervor). Lista de funcţiuni ale programului 1. 10.92 (continuare) 11. fereastra în care se vor afişa rezultatele b: vector de numere reale.min: numere reale. La acţionarea butonului Livreaz• se vor depune livrările din zona Cantitatea în matricea a. păstrează valoarea maximă şi minimă pentru livrări . Determină valorile maxime şi minime. Transformă în şir de caractere şi trunchiază la două zecimale.93 Variabile de stare st: (real) folosit pentru calculul sumei livrărilor totale pe zile şi rezervoare s: (real) folosit pentru calculul sumelor parţiale 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 săptămânii imax. listă simplă de opţiuni pentru selecţia zilei din săptămână T1: obiect. Figura 8. zona de editare în care se va introduce valoarea livrărilor Figura 8. Intrări. Rezervor2. 6. ziua. 9.90). ziua. 4.329 Livrările. pe zile (luni. 8. Răspunde la evenimentele generate de butonul Livreaz•.imin. listă simplă de selecţie pentru cele trei rezervoare Zile: obiect. În caz de eroare – datele de intrare nu sunt numerice şi nu respectă intervalul (0. Alocă spaţiu de memorie şi iniţializează matricea livrărilor. Situaţia livrărilor. 12. 20) se generează un mesaj de eroare. pe zile.jmin: (numere întregi) păstrează indicii livrărilor maxime şi minime din matricea a Variabile de ieşire RezWindow: obiect. marţi. păstrează mediile livrărilor d: vector de numere reale. joi. 2.

94. Pseudocodul .330 ‰ Documentaţia de proiectare Pseudocodul pentru EXEMPLUL 8 JAVASCRIPT (Varianta 2) este prezentat în figura 8.

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.j++) ai.331 BEGIN //initializeaza vectorul Z cu numele zilelor z=luni.miercuri.marti.94 IF5 BEGIN //valideaza valoarea introdusa in zona de text Date intrare: item-zona de text care a generat evenimentul onBlur min.value IF(x nu este numar) Afiseaza mesaj de eroare: Valoare gresita pentru cantitate ELSE .0.valoarea maxima permisa rval=fals x=transforma in real item.i++) FOR2 FOR(j=0.joi vineri //aloca spatiu de memorie si initializeaza matricea livrarilor FOR1 FOR(i=0.20) IF3 ENDIF EXEMPLUL8 END EXEMPLUL8 // transforma in sir de caractere si trunchiaza la doua zecimale TRUNCHIAZA BEGIN Parametrii: x.j<5.valoare reala s=transforma in sir de caractere x i=pozitia punctului zecimal in sir IF4 IF(i≠-1) s=copiazasubsir(s.valoarea minima permisa max.i+2) IF4 ENDIF RETURN s TRUNCHIAZA END VALIDEAZA IF5 Figura 8.0.i<3.

j FOR4 ENDFOR bj=s/3 FOR3 ENDFOR // calculul mediilor pe rezervoare st=0 FOR5 FOR(i=0.j++) s=0 FOR4 FOR(i=0.ic=transforma_in_real(T1.i<3.i++) s=0 FOR6 FOR(j=0.j++) (continuare) FOR8 .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.i++) s=s+ai.94 FOR7 FOR(j=0.j<5.0 min=a0.0 imax=0 imin=0 jmax=0 jmin=0 FOR(i=0.j<5.i++) Figura 8.j++) s=s+ai.i<3.j<5.i<3.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 st=st+aij FOR6 ENDFOR di=s/5 FOR5 ENDFOR d3=s/15 // determinarea maximului si minimului max=a0.

WRITE "ZIUA R1 R2 R3 MEDIA" FOR(k=0.94 (continuare) AFIS ‰ Codificarea în limbajul JavaScript Documentul complet (X)HTML este prezentat în figura 8.j++) RezWindow.WRITE "Livrarea minima:" min RezWindow.95.333 IF8 IF(max<ai.WRITE "s-a facut din rezervorul: R" imax RezWindow."Marti".WRITE "SITUATIA REZERVOARELOR R1 R2 R3" RezWindow.j<4.j) max=aij imax=i jmax=j ENDIF IF(min>ai.WRITE "MEDIA" FOR(j=0.WRITE a[j][k] ENDFOR RezWindow.j++) RezWindow. <html> <head> <title>Exemplul 8</title> <script language="JavaScript"> <!--var Z = new Array("Luni".j<3.WRITE " s-a facut din rezervorul: R"imin RezWindow.k<5."Joi".WRITE " in ziua de "+Zjmin END IF8 IF9 IF9 FOR8 FOR7 IF10 IF10 FOR9 FOR10 FOR10 FOR9 FOR11 FOR11 Figura 8.WRITE Z[k] FOR(j=0."Miercuri".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 trunchiaza( b[k]) ENDFOR RezWindow.WRITE trunchiaza(d[j]) ENDFOR RezWindow. function trunchiaza(x) { ."Vineri").k++) RezWindow.WRITE "Livrarea maxima: " max RezWindow.WRITE "in ziua de" Zjmax RezWindow.

} function validate(item. var x=parseFloat(item. return rVal.i+3). a[2]=new Array(5).").Rezervor. } a=new Array(3).i<3.selectedIndex.value). B[j]=S/3. else if (x> max) alert("Valoare gresita pentru cantitate! Valoarea trebuie sa fie < " + max).0. else rVal = true. } function afis(){ // CALCULUL MEDIILOR PE ZILE var i.j<5.i++) for(j=0.value). for(j=0.indexOf(". Figura 8.selectedIndex.j++) a[i][j]=0. var z=f1.95 } . } return s. min.T1. max) { var rVal = false. else if (x < min) alert("Valoare gresita pentru cantitate!Valoarea trebuie >" + min).Zile. if(isNaN(x)) alert("Valoare gresita pentru cantitate!").j++) { S=0.334 var s=""+x. a[1]=new Array(5). for(i=0. i=s. B = new Array(5).j. function livreaza() { var ir=f1.i<3. a[0]=new Array(5). var RezWindow=null.i++) S=S+a[i][j]. for(i=0. a[ir][z]+=parseFloat(f1.j<5. if(i!=-1){ s=s.substring(0.

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

"> <td><input type="button" value="Afiseaza" onClick="afis()."> <tr> <td><input type="button" value="Livreaza" onClick="trimite().96). max). livreaz•()."> </table> </center> </form> Figura 8.0" onChange="validate(this. 9 Pentru crearea unei ferestre.20). 9 Afişarea rezultatelor se realizează cu gestionarul de evenimente onClick (vezi funcţia afis()). Figura 8. min.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. afi•(). butoanele Livreaz• şi Afi•eaz•. mediile livrărilor pe zile şi rezervoare. Text.95 </body> (continuare) </html> Comentarii: 9 Script-ul (inserat în secţiunea <head> a documentului XHTML) conţine patru funcţii: trunchiaz•(x). 9 Formularul conţine subobiectele: Select şi Option. 9 Validarea datelor de intrare introduse în zona de text se realizează cu gestionarul de evenimente onBlur (vezi funcţia valideaz•()). 9 Depunerea livrărilor din zona de editare (subobiectul Text) în matricea livrărilor se realizează cu gestionarul de evenimente onClick (vezi funcţia Livreaz•()). am utilizat metoda window. ivalidate(item.0.open() (figura 8. livrările maxime şi minime. Prin acţionarea butonului Afi•eaz• se deschide o nouă fereastră care va afişa: situaţia livrărilor.96 .

ƒ listă derulantă cu selectări multiple (din acest tip de obiect Select..97).98) şi testaţi script-ul.. </select>.97 9 Subobiectul Select este versiunea „transpusă în obiect” a tag-ului (X)HTML <select> .99 se prezintă rezultatele execuţiei programului JavaScript pentru un set de date afişat. </option>. Pentru a defini o listă derulantă cu selectări multiple. ƒ listă derulantă (o listă care afişează la un moment dat un anumit număr de elemente. . Figura 8. Figura 8.337 9 Pentru crearea listei de selectare a rezervoarelor şi a zilelor săptămânii am utilizat subobiectele Form: Select şi Option (vezi figura 8. Pentru a defini o listă derulantă atribuiţi lui size o valoare mai mare ca 1).. Subobiectul Select permite crearea următoarelor tipuri de liste: ƒ listă de selectare (o listă de opţiuni în care utilizatorul poate selecta un singur element. adăugaţi proprietatea multiple la definirea obiectului Select). puteţi selecta unul sau mai multe elemente. 9 Subobiectul Option este versiunea „transpusă în obiect” a tag-ului (X)HTML <option> . Pentru a vă asigura că lista afişează o singură linie la un moment dat atribuiţi proprietăţii size valoarea 1 sau nu-l folosiţi deloc). Subobiectul Select este unul dintre cele mai utile şi mai flexibile subobiecte ale obiectului Form. Vizualizaţi documentul într-un browser (figura 8. Ea include bare de derulare..98 În figura 8.

338 Figura 8.100 . Figura 8.99 Aplicaţie ‰ Scrieţi un program JavaScript pentru afişarea datelor conţinute în formularul din figura 8. într-o nouă fereastră. Personalizaţi script-ul.100.

339 În figura 8. Figura 8.101 se prezintă documentul complet XHTML. în care s-a inserat script-ul aplicaţiei. Figura 8.101 În figura 8.102 .102 este prezentat rezultatul execuţiei script-ului.

Option? . Care este relaţia dintre subobiectele unui formular şi obiectul Form? 8. Informaţiile din cadrul formularului sunt afişate într-o nouă fereastră (figura 8. Textarea. Care sunt subobiectele obiectului Form? 3. Care sunt metodele obiectului Form? 5. ƒ method. Submit.103 Remarcă. Fileupload.340 Testaţi script-ul (figura 8. Care sunt gestionarii de evenimente ai obiectului Form? 6. Reset.103). 2. Submit. Figura 8. Care din atributele tag-ului <form> determină locul unde vor fi expediate datele? ƒ action. Care este relaţia dintre obiectul Form şi tag-ul <form>? 7. Care sunt proprietăţile obiectului Form? 4. ƒ name. Checkbox. JavaScript Testaţi-vă cunoştinţele Temă 1. Select? 9.103) executând clic pe butonul Afi•a•i.Care sunt metodele subobiectelor: Text. Checkbox. Radio. Select. Care este sintaxa subobiectelor: Text. Button. Textarea. Care sunt proprietăţile subobiectului Select? 10.

104 şi figura 8. Utilizaţi un formular (X)HTML. intervalul [0. 1). Utilizaţi un formular XHTML. 1). 4. Checkbox. Figura 8. Seria Ulam se generează după cum urmează: se porneşte de la un număr întreg pozitiv(n) şi se ajunge la 1 pe două căi: 9 dacă numărul este par.Cum puteţi utiliza limbajul JavaScript pentru validarea unui formular? 13. 2. 8. noul număr se obţine cu formula: 3*n+1 (exemplu: 5. 14.Scrieţi un program JavaScript care generează seria Ulam. Indicaţie. 4. Option.Scrieţi un program JavaScript care calculează şi afişează produsul primelor n numere naturale.105).341 11. 15. 9] în cuvinte. (exemplu: 8.Scrieţi un program JavaScript care afişează un număr. Utilizaţi un formular (X)HTML. 9 dacă numărul este impar.104 . noul număr se obţine ca rezultat al împărţirii cu 2. 16. 12.Simulaţi funcţionarea următoarelor script-uri (vezi figura 8.Care sunt gestionarii de evenimente au subobiectelor: Reset. 2. 16.

com/ 9 http://www.text1.104).org/script/script.form1.biblioscript.shtml .342 Figura 8.Înlocuiţi liniile de cod (vezi figura 8.Focus()" prin: onClick="document.form1.blur()" onClick="document.com/ 9 http://www.htm 9 http://www.text2.irt.com/ 9 http://www.text2.text1. Vizitaţi site-urile 9 http://www.text3.blur()" onClick="document.javascriptgate.form1.form1.gatescript.Focus()" onClick="document.Focus()" onClick="document.com/ 9 http://www.text2.form1.blur()" Precizaţi rezultatele execuţiei noului script.w3schools. onClick="document.105 17.siteexperts.form1.wsabsract.com/cutpastejava.com/ 9 http://developer.

Conversaţia 9 Obiectul Image ••••••••••••••••••••••••••••••••••••••••••••• În această conversaţie: f f f f f f f ••••••••••••••••••••••••••••••••••••••••••••• Obiectul Image.1. imaginile au pătruns în aproape toate domeniile navigării pe Web. În consecinţă. . în numeroase site-uri Web. butoanele (X)HTML au fost înlocuite prin imagini clicabile (rollovere) care se transformă atunci când treceţi mouse-ul pe deasupra acestora. Aplicaţii Creaţi un rollover cu JavaScript Creaţi un joc cu JavaScript Creaţi animaţii simple cu JavaScript Creaţi imagini reactive (client) cu JavaScript. Aplicaţii EXEMPLUL 9 JAVASCRIPT Temă Obiectul Image Ca urmare a popularităţii lor. crearea unui site Web cu adevărat puternic presupune cunoaşterea facilităţilor imaginilor (X)HTML şi a obiectului Image al limbajului JavaScript. Fişa obiectului Image este prezentată în figura 9. De exemplu. Cu siguranţă că apreciaţi aceste interesante efecte grafice dar ignoraţi poate faptul că puterea acestora se află în limbajul JavaScript.

jpg” name=”LUMINABLANDA” /> Figura 9. onDblClick. onError.images[’PLOIESTI VEST’]. onMouseOut. În cursul încărcării documentului (X)HTML în navigatorul Web. onKeyPress.344 Fişa obiectului Image Obiectul părinte Cum se creează obiectul? Proprietăţi: Metode: Document Constructorul Image() border. după cum urmează: var gara=document. complete. Remarcă. name. onLoad. ca şi în cazul matricei elements din obiectul Form. height. Conversaţia 6). Constructorul Image() . width. onMouseDown. onKeyUp.1 Relaţia dintre obiectul Image şi tag-ul <img> Manipularea imaginilor din cadrul unui document (X)HTML depinde în mare măsură de obiectul Image al limbajului JavaScript. Gestionarii de evenimente: onAbort. vspace. De exemplu. hspace. src. care va da un acces direct obiectelor Image. care reprezintă prima imagine a unui document (X)HTML. atunci accesul prin nume rămâne posibil numai prin intermediul matricei images. 9 document. puteţi specifica pentru fiecare tag <img> un atribut ”name=”. lowsrc Obiectul Image nu posedă nici o metodă dar puteţi modifica proprietăţile imaginilor în mod dinamic. … <img src=”sigla. onKeyDown.jpg” /> este accesibilă prin utilizarea matricei images. interpretorul JavaScript creează un obiect Image pentru fiecare tag <img> prezent în document. În loc să utilizaţi matricea images. El plasează toate obiectele Image într-o matrice images (subobiect al obiectului Document).LUMINABLANDA.2. definiţia imaginii: <img name=”PLOIESTI VEST” src=”gara. Iată cum procedăm pentru a accesa obiectul Image asociat tag-ului <img> din figura 9. onMouseOver (vezi Figura 9.images[0].2 … Obiectul Image poate fi accesat cu una din instrucţiunile prezentate mai jos: 9 document. onClick. Dacă dintr-un motiv sau altul nu aţi putut da imaginilor dumneavoastră un nume valid de variabilă JavaScript.

height Corespunde atributului height al tag-ului <img>. Remarci 9 Instrucţiunea JavaScript din figura 9.imaginea a fost în întregime încărcată.3 generează un obiect Image fără a mai fi nevoie de un tag <img>.jpg” … 9 După încărcarea acestei imagini.border Figura 9.3 … var imagine1=new Image().MOULINROUGE. 9 Pentru ca o imagine să se afişeze în navigatorul Web. height document. întrucât document.4 . ea trebuie să fie asociată în mod obligatoriu unui tag <img> aflat în documentul (X)HTML.images[]. utilizând constructorul de obiecte Image() (vezi figura 9.MOULINROUGE este asociat unui tag <img> noua imagine va fi afişată în locul precedentei imagini. navigatorul Web ignoră … totul! Iată cum folosim imagini fără a utiliza tag-ul <img> (vezi figura 9. imagine1.images[]. 9 Puteţi încărca un fişier imagine în obiectul Image atribuind în mod simplu o adresă Web proprietăţii src (figura 9.jpg” name=”MOULINROUGE” /> document. Figura 9. dar … atenţie. în caz contrar. Figura 9.3).src=”sigla. s-a creat un obiect Image care conţine o imagine (încărcată).src=MOARACUNOROC.5).images[].4)..MOULINROUGE va fi înlocuită prin imaginea conţinută în MOARACUNOROC.5 Proprietăţile obiectului Image Proprietăţile obiectului Image sunt prezentate în detaliu în figura 9.345 Interpretorul JavaScript creează un obiect Image pentru fiecare tag <img> pe care îl întâlneşte într-un document (X)HTML. false – imaginea nu a fost încărcată în întregime.. true .complete Valoare logică (true/false). .6 Corespunde atributului border al tag-ului <img>. complete document. dar non vizibilă în navigatorul Web.6. În plus. Proprietate Sintaxa border document. Figura 9. chiar şi dumneavoastră îl puteţi crea fără asocierea unui tag <img>.src. <img src=”moara. … Imaginea conţinută în document.

‰ Precizaţi rezultatul execuţiei următorului program JavaScript (figura 9.width (continuare) Corespunde atributului width al tag-ului <img>. Figura 9. vspace document.7).images[].images[]. pe care vă rugăm să-l comentaţi.346 width document.images[]. .images[]. src document.name Corespunde atributului name al tag-ului <img>.8 este prezentat rezultatul execuţiei programului JavaScript. hspace document.images[]. lowsrc Figura 9.src Corespunde atributului src al tag-ului <img>.vspace Corespunde atributului vspace al tag-ului <img>.images[].hspace Corespunde atributului hspace al tag-ului <img>. name document.lowsrc Aplicaţii Corespunde atributului lowsrc al tag-ului <img>.6 document.7 În figura 9.

8 ‰ Comentaţi următorul program JavaScript (figura 9.9 ‰ Scrieţi un program JavaScript care afişează proprietăţile unui obiect Image.10 este prezentat documentul (X)HTML complet. Figura 9. În figura 9.9). .347 Figura 9.

10 Comentarii: 9 Obiectul Document (tot ceea ce se găseşte între tag-urile <body> şi </body>) conţine imaginea cu numele sigla. 9 Valoarea true (vezi proprietatea complete) rezultă din modul în care imaginea a putut fi corect încărcată în navigator. height.test. width. border) sunt extrase din definiţia acestui obiect. invitându-vă în cele ce urmează să … vă jucaţi puţin! Da. height. 9 Valorile proprietăţilor (src.src.width etc. width. name. La rândul său.test. precizăm în cele ce urmează care sunt regulile jocului.jpg. această imagine conţine proprietăţile: src. . Creaţi un joc cu JavaScript ‰ De la joc la program Vom părăsi pentru scurt timp problema rezervoarelor cu care v-am pisat în conversaţiile anterioare. border •i complete. aţi înţeles bine! Ne vom juca împreună! Despre ce este vorba? Vom proiecta şi realiza un program JavaScript pentru jocul: ZECE BE•E DE CHIBRIT! Pentru aceia dintre dumneavoastră care nu cunosc acest joc deoarece până în prezent au avut doar preocupări … serioase. Această ierarhie explică modul în care sunt accesate proprietăţile imaginii: document.348 Figura 9. În caz contrar valoarea va fi false. document. name.

respectiv 9. Figura 9. . Permite reluarea jocului. Stabileşte câştigătorul (în final). Permite 2.349 Există la început 10 beţe de chibrit şi doi jucători. 5. 6. Când îi vine rândul.11 Specificaţii de programare Descriere. Stabileşte Figura 9. specificaţiile de programare. unu/două beţe. un jucător poate ridica un bâţ. Actualizează numărul de beţe rămase. Ceea ce se cere este să realizaţi un program JavaScript pentru jocul „ZECE BE•E DE CHIBRIT” avându-i ca jucători pe dumneavoastră şi Măria sa … calculatorul! ‰ Specificaţii de programare În figurile 9.13.11 şi 9.12 sunt prezentate: ecranul cu 10 beţe de chibrit. cel mult două! Va pierde (!) acel jucător care rămâne cu ultimul băţ de chibrit. 3. Programul afişează zece beţe de chibrit (1-10) şi un buton Joc Nou care permite reluarea jocului.12 jucătorului strategia să de extragă joc a 4. Stop. mesajele generate în timpul jocului sunt prezentate în figurile 9. calculatorului. Tabela de variabile. Lista de funcţii ale programului 1.14.

src=”chibrit. 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.15.13 Mesaje Mesaj Jocul s-a terminat! Ai câştigat! Jocul s-a terminat! Ai pierdut! Calculatorul intervine: Acum e rândul meu! Descriere Desemnează câştigătorul Desemnează învinsul. Este rândul jucătorului.i++) nsrc=’chibrit’+i imagine_nsrc.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. Este rândul calculatorului să joace. Figura 9.350 Tabela de variabile Variabile de intrare Variabile de stare i: variabila de control a buclei for x: numărul băţului extras (1-10) bete: numărul de beţe (rămase) 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 ieşire Figura 9.14 Calculatorul intervine: Acum e rândul tău! ‰ Documentaţia de proiectare Pseudocodul este prezentat în figura 9.15 .i<=bete.

15 IF3 ENDIF (continuare) Alegechibrit END IF3 ‰ Codificarea în limbajul JavaScript Documentul complet (X)HTML este prezentat în figura 9.i<=bete.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.i++) inlocuieste imaginea chibrit.16. document.jpg prin gol.gif bete=0 WRITE "Jocul s-a terminat!Ai Castigat!" IF5 ELSE WRITE "Calculatorul zice:\n Acum e randul meu").src="gol. //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. <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.16 } .i<=bete.src=gol.i<=bete.351 IF(x<=bete) AND (bete-x)<2 //se sterge imaginea betelor de chibrit extrase FOR2 FOR(i=x.i++) nsrc='chibrit'+i imaginea_nsrc.images[nsrc].jpg FOR2 ENDFOR //se actualizeaza numarul de bete ramase bete=x-1. //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. Figura 9.gif".i++){ nsrc='chibrit'+i.

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 secţiunea <head> a documentului HTML) conţine două funcţii: AlegeChibrit(x) şi actualizare(). 9 Funcţia AlegeChibrit(x) permite jucătorului să extragă unul sau două beţe; stabileşte strategia de joc a calculatorului; actualizează numărul de beţe rămase, stabileşte câştigătorul. Argumentul x ia valori de la 1 la 10. 9 Funcţia actualizare() permite reluarea jocului la acţionarea butonului Joc Nou. 9 Gestionarii de evenimente utilizaţi sunt: onMouseDown şi onClick (tag-ul <input />).

În figura 9.17, 9.18, 9.19 sunt prezentate secvenţe din timpul jocului.

354

Figura 9.17

Figura 9.18

355

Figura 9.19

Creaţi un rollover cu JavaScript
Una din aplicaţiile 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 cărui aspect se modifică atunci când 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ă decideţi singuri: ce tip de metodă rollover necesită aplicaţia dumneavoastră şi cum doriţi s-o implementaţi.

Iată cum creăm un buton IMAG1 care se afişează normal la încărcarea paginii şi se schimbă în IMAG2 la trecerea mouse-ului pe deasupra acestuia. 1. Introduceţi între tag-urile <head> şi </head> ale documentului HTML, script-ul de preîncărcare al imaginii (imag2.gif) utilizată în

rollover (figura 9.20).

356

Figura 9.20

2. Stabiliţi o legătură (link) către o imagine (figura 9.21).

Figura 9.21

3. Introduceţi (în tag-ul <a>) gestionarii de evenimente onMouseOver şi

onMouseOut (figura 9.22).

Figura 9.22

4. Testaţi script-ul (figura 9.23, figura 9.24).

Figura 9.23

357

Figura 9.24
Remarci 9 Nu vă lăsaţi impresionaţi de dimensiunea codului JavaScript, deoarece este foarte simplu! 9 Am definit im1 ca fiind un nou obiect Image căruia î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ă doriţi să aplicaţi un rollover peste mai multe imagini prezentate într-o pagină, va trebui: ƒ Să adăugaţi noi linii de preîncărcare

im2=new Image; im2.src=”imag3.gif”;
ƒ Să schimbaţi numele imaginii respective:

<img src=”imag1.gif” border=”0” name=”img2”>.

Aplicaţii ‰ Creaţi acelaşi rollover utilizând matricea images. În figura 9.25 este prezentat documentul HTML complet.

Figura 9.25 Rezultatele execuţiei 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ă: ƒ afişarea unei borduri în jurul fiecărei imagini; ƒ afişarea unei imagini în miniatură (de exemplu, o săgeată mică) alături de imaginea propriu-zisă, unde se găseşte pointer-ul mouse-ului. 9 Există mai multe soluţii de implementare a metodelor rollover pentru imagini, dar cea mai simplă este următoarea: ƒ creaţi matricea care să conţină imagini; ƒ preîncărcaţi imaginile în matrice; ƒ creaţi o funcţie care să realizeze schimbarea imaginilor; ƒ introduceţi gestionarii de evenimente onMouseOver şi onMouseOut.

‰ Scrieţi o funcţie pentru a verifica dacă o imagine este complet încărcată. În figura 9.28 este prezentat script-ul aplicaţiei.

Figura 9.28 ‰ Comentaţi următorul program JavaScript (figura 9.29).

359

Figura 9.29 În figura 9.30, respectiv figura 9.31 sunt prezentate rezultatele execuţiei programului JavaScript.

Figura 9.30

Figura 9.31

360
Iată cum creăm un mic catalog ilustrat care conţine ultimele trei cărţi ale autorului acestei lucrări: (X)HTML, Dreamweaver MX, XML, care au apărut în Editura Universităţii din Ploieşti. Pornind de la o listă ordonată ale cărei elemente conţin titlurile celor trei cărţi, se afişează coperta întâi a cărţii selectate trecând cursorul pe deasupra unuia din cele trei titluri de carte afişate (figura 9.32).

Figura 9.32 Documentul complet XHTML este prezentat în figura 9.33.

Puteţi evita acest lucru.num•r) conţine două argumente: numele fişierului utilizat (nume) şi numărul imaginii (num•r).33 Remarci 9 Funcţia carte(nume.361 Figura 9. Succes! ‰ În figura 9. 9 Afişarea imaginii (prima copertă) se produce atunci când deplasaţi mouse-ul pe linia unde se găseşte numele cărţii şi nu doar pe numele afişat al cărţii.34 se prezintă un document (X)HTML care ilustrează tehnica rollovers-urilor. 9 Pentru ca proporţia imaginilor să fie respectată este necesar ca ele să aibă aceleaşi dimensiuni. . modificând puţin codul JavaScript.

35) obţineţi ceea ce este ilustrat în figura 9.36.34 Atunci când se încarcă acest document se obţine imaginea din figura 9.35.362 Figura 9. . Figura 9.35 În momentul în care plimbaţi mouse-ul (fără a executa clic) pe una din cele trei imagini (figura 9.

. Pentru a crea o animaţie simplă cu JavaScript [3] se recomandă parcurgerea următoarelor etape: 9 salvaţi cadrele de animaţie într-o matrice. Pentru animaţii mai complexe va trebui însă să folosiţi Java sau un soft dedicat. 9 preîncărcaţi imaginile (cadrele de animaţie). ca de exemplu.363 Figura 9. JavaScript poate fi de asemenea utilizat şi pentru crearea animaţiilor simple.id? 9 Care este rolul gestionarilor de evenimente: ƒ onClick=”location=’ldXHTML.36 Analizaţi documentul XHTML şi răspundeţi la următoarele întrebări: 9 Ce semnifică notaţia this.htm’” ƒ onClick=”location=’ldDREAMWEAVER.htm’” ƒ onClick=”location=’ldXML. Precizaţi cel puţin două! Creaţi animaţii simple cu JavaScript Chiar dacă rollover-ul este aplicaţia cea mai folosită a imaginilor dinamice.htm’” 9 Care sunt deficienţele acestui document. Macromedia Flash.

Paris. La référence 4’ édition. pag. puteţi folosi gestionarul de evenimente onClick cu location.com/cutplastejava.364 9 stabiliţi viteza de derulare a animaţiei. Pentru mai multe detalii privind crearea animaţiilor simple JavaScript.html 9 http://Javascript. Ed. zonele sunt definite într-un fişier dedicat care se află pe server. O’Reilly. în limba engleză) reprezintă un mijloc practic de simplificare a navigării într-un site Web.com/scrolls/animated-message. Ed.internet. 2002 9 Jean-Christophe Gigniac. acest tip de imagine map poate fi combinat cu JavaScript. 227-234 9 Michael Dreyfus. fiecare dintre acestea jucând rolul unui link. 250 – 260 9 http://JavaScript.lycos.html 9 http://Javascript.Internet. Dacă utilizaţi imagini reactive ca link-uri. consultaţi: 9 Michael Moncur. Micro Application 2002. 2001 9 David Flanagan. Crearea unei imagini reactive (client) necesită următoarele resurse: 9 o imagine în format GIF sau JPEG.Internet. Există două tipuri de imagini reactive: client şi server.href. 9 atributul USEMAP. Cédric Nilly. Campus Press.com/page-details/delayed-gif.5 Nouvelle edition.com/message/animated-tooltip. 2001 9 Micro Application. În cazul unei imagini reactive server.shtml 9 http://hotvired. JavaScript 1.internet. . Paris. Campus Press. Zonele (cu un anume contur geometric) unei imagini reactive client se definesc direct în codul (X)HTML. Remarci 9 Navigatoarele recente nu afişează descrierea unei imagini reactive în bara de stare.com/webmonkey/reference/ JavaScript_code_library 9 http://webopedia.wsabstract. pag. 2003. JavaScript.com/TERM/J/JavaScript.html Creaţi imagini reactive (client) cu JavaScript Imaginile reactive (imagemaps. În consecinţă. Codes en Stock JavaScript.html 9 http://www. JavaScript. atunci când atributul href figurează în link-uri. 9 un fişier (MAP) care conţine zonele imaginii. JavaScript Professionel.

Introduceţi tag-ul <map name=”?”>. Figura 9. Inseraţi imaginea follow. în tag-ul <area> atributele shape.37 3.jpg. target şi coords (figura 9. Introduceţi în tag-ul <area> gestionarul de evenimente asociat onMouseOver care afişează în bara de stare mesajul: „ZIUA ÎN CARE VIN PEŞTII”.38).jpg. Introduceţi. .37). printre care: MapEdit sau LiveImage. Introduceţi în tag-ul <img> atributul usemap=”#?”. În momentul în care plasaţi mouse-ul deasupra zonei reactive de formă dreptunghiulară decupate în imaginea follow. înlocuind semnul de întrebare (?) cu numele (JOHNSON) pe care doriţi să-l atribuiţi imaginii map (figura 9.38 4.jpg. Figura 9. Iată cum procedăm pentru a crea cu limbajul JavaScript o imagine reactivă client. Figura 9. Există numeroase programe.39 5.365 9 Pentru a descrie fiecare zonă a imaginii reactive va trebui să cunoaşteţi coordonatele punctelor care le delimitează. înlocuind semnul de întrebare (?) cu numele pe care l-aţi atribuit imaginii map (figura 9. în bara de stare se va afişa mesajul: „ZIUA ÎN CARE VIN PEŞTII”. pornind de la imaginea follow. 9 Zonele imaginii reactive sunt definite cu tag-urile (X)HTML: <map> şi <area>. 1. 2.39).

Figura 9. Figura 9.42). 9.41 7.40 6. Introduceţi tag-ul final </map> (figura 9.366 Figura 9.41). Validaţi documentul HTML 4 strict cu aplicaţia validator. Vizualizaţi pagina Web într-un browser (figura 9. Inseraţi codul HTML care afişează icon-ul de conformitate W3C. 8.42 .

Succes! ‰ Codificarea în limbajul JavaScript (figura 9.367 EXEMPLUL 9 JAVASCRIPT Vom relua în cadrul acestui exemplu problema rezervoarelor (cilindrice echilaterale). Zonele reactive (client) se referă la cele trei rezervoare (figura 9.44) .43). invitându-vă în cele ce urmează să utilizaţi imagini reactive client pentru generarea raportului „Situa•ia livr•rilor”.43 V-am pregătit şi o surpriză! De această dată vă vom lăsa dumneavoastră plăcerea de a realiza singuri documentaţia de analiză şi proiectare a programului JavaScript corespunzătoare acestui exemplu. Figura 9.

44 } .indexOf("."Marti"."Joi".368 <html> <head> <title>Exemplul 9</title> <script language="JavaScript"> <!--var Z = new Array("Luni".substring(0.i+3). Figura 9. if(i!=-1){ s=s. } return s."). i=s. function trunchiaza(x) { var s=""+x."Vineri")."Miercuri".

value).} if(min>a[rez][j]){min=a[rez][j]. else rVal = true.selectedIndex. a[0]=new Array(5).document.k.''. for(j=0. min.writeln("<td><b>ZIUA</b><td><b>REZERVOR R"+k+"</b></td></tr>").j++){ if(max<a[rez][j]){max=a[rez][j]. a[ir][z]+=parseFloat(f1.369 function validate(item. if(isNaN(x)) alert("Valoare gresita pentru cantitate!"). a[1]=new Array(5).document. for(i=0. //CALCUL MAX SI MIN max=a[rez][0]. function trimite(){ var ir=f1. 'toolbar=yes. //CALCUL TOTAL LIVRARI s=0. RezWindow.height=350').i++) for(j=0. var z=f1.close(). } function afispartial(rez){ var i. RezWindow=window.jmin=0.open(''. (continuare) RezWindow. width=500.writeln("<center><table border=1 bgcolor=#efefff><tr>"). } a=new Array(3). k=rez+1.Zile.j. jmax=0.selectedIndex.jmax=j.j++) s+=a[rez][j] //CALCUL MEDIE PE ZI med=s/5.i<3.jmin=j. a[2]=new Array(5).0.44 RezWindow.} } //AFISARE REZULTATE if(RezWindow!=null)RezWindow.j<5. for(j=0. var RezWindow=null. max) { var rVal = false.document.T1. min=a[rez][0].scrollbars=yes.menubar=no.Rezervor.value). else if (x < min) alert("Valoare gresita pentru cantitate!Valoarea trebuie >" + min).j<5. return rVal.j<5. . var x=parseFloat(item. Figura 9. else if (x> max) alert("Valoare gresita pentru cantitate! Valoarea trebuie sa fie < " + max).0.writeln("<center><p><b>SITUATIA LIVRARILOR REZERVOR R"+k+"</B></p></center>").j++) a[i][j]=0.

return true"> .writeln("<p><font color=green size=+1>Total Livrari:"+s+"</font>").document.125" href="javascript:afispartial(0)" onMouseOver="window. } RezWindow.18.44 onMouseOver="self. RezWindow.370 for(i=0. } // --> </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.document.return true"> <area name="R2" coords="105.status='Rezervorul R2'.status=' '.document.writeln("<br><font color=green>Livrarea minima:"+min+" s-a facut in ziua de "+Z[jmin]+"</font>"). RezWindow.document.writeln("<br><font color=green size=+1>Media Zilnica:" + trunchiaza(med) + "</font>").91.document."> <tr> <td><input type="button" value="Livreaza" onClick="trimite().return true" onMouseOut="window.writeln("<br><font color=green>Livrarea maxima:"+max+" s-a facut in ziua de "+Z[jmax]+"</font>").document.status='Rezervorul R1'. RezWindow.125" href="javascript:afispartial(1)" Figura 9.0" onChange="validate(this. RezWindow.i<5.writeln("</table></center><p><p>")."> </table> </center> </form> <center> <h3> Situatia Livrarilor </h3> <map name="rezervorMap"> <area name="R1" coords="16.180.writeln("<tr><td>" + Z[i]+"</td>").0.return true" (continuare) onMouseOut="self.document.writeln("</html>").i++) { RezWindow.20).document. RezWindow.18. RezWindow.writeln("<td>" + a[rez][i]+ "</td></tr>").status=''.

9 Tag-ul <img> conţine în mod obligatoriu usemap=”#rezervorMap”.45 . R3. figura 9. coords.45. În continuare. Analizaţi rezultatele execuţiei programului (figura 9. R2.47).status=''.272. zonele imaginilor reactive (R1. În toate cele trei tag-uri <area> au fost definite atributele: name. 9 Pentru crearea celor trei imagini reactive. R3 s-a folosit imaginea rezervoare.18. corespunzătoare rezervoarelor R1. href şi gestionarii de evenimente onMouseOver şi onMouseOut. figura 9.125" href="javascript:afispartial(2)" onMouseOver="window.return true" onMouseOut="window. Figura 9. vă invităm să testaţi script-ul. plasând mouse-ul şi executând clic deasupra fiecărei zone reactive R1. R2.46.44 </body> (continuare) </html> Remarci 9 Script-ul (inserat în secţiunea <head> a documentului (X)HTML) conţine funcţiile cunoscute din exemplele anterioare.jpg.371 <area name="R3" coords="195.return true"> </map> <img src="rezervoare. R3) au fost definite cu tag-urile (X)HTML <map> şi <area>.status='Rezervorul R3'. R2.jpg" align="top" usemap="#rezervorMap"> Figura 9.

46 Figura 9.372 Figura 9.47 .

48). populaţia.48 Indicaţii: 9 Limitaţi (nu din motive politice!) numărul ţărilor la cel mult 12. într-un formular. suprafaţa. mai precis în 12 matrice cu următoarele elemente: numele ţării. 9 Utilizaţi tag-ul <area> cu atributele: coords.50). Figura 9. Aceste informaţii sunt conţinute în script. suprafaţa. . capitala. Figura 9.49) şi cu gestionarii de documente: onMouseOver şi onMouseOut. 9. populaţia. Script-ul conţine de asemenea şi funcţia afi•eaz•(). Atunci când utilizatorul plimbă mouse-ul (fără a executa clic) pe una din ţările Europei se vor afişa pentru ţara respectivă. href (vezi figura 8. capitala.49 9 Formularul nu conţine nici un buton ci numai zone (5) de tip text pentru afişarea informaţiilor privind ţările Europei. moneda (vezi figura 9. moneda (figura. următoarele informaţii: ţara.373 Aplicaţie ‰ Realizaţi o pagină Web care conţine o hartă interactivă a Europei. shape.

Care sunt resursele necesare pentru crearea unei imagini reactive client? 7. Ce este un rollover? 6. Ce reprezintă obiectul Image? 2.51 se prezintă un document HTML care conţine titlul: „Ziua în care vin peştii”. .374 Figura 9. Care sunt gestionarii de evenimente ai obiectului Image? 4. Cum creaţi o instanţă a unui obiect Image? 5. Poate fi plasat un rollover într-o imagine reactivă? 8. Care sunt proprietăţile şi metodele obiectului Image? 3.50 JavaScript Temă Testaţi-vă cunoştinţele 1. În figura 9.

Figura 9.375 Figura 9.53 Ce semnifică: 9 onMouseOver=”peste(’follow.images[0]. .52.54).52 În momentul în care plimbaţi mouse-ul (fără a executa clic) pe titlul afişat în pagina Web se obţine ceea ce este ilustrat în figura 9. Figura 9.src=nume. Perfecţionaţi acest mic program după cum urmează (figura 9.51 Atunci când se încarcă acest document HTML se obţine ceea ce este ilustrat în figura 9.53.jpg’)” 9 document.

html 9 http://www. 9.internet.com/miscellaneous/image-slideshow.com/photoalbum 9 http://Javascript.com/miscellaneous/kitykity’s--photo-album. ƒ images[2].internet.com/page-details/delayed-gif.com/games/terablox.com 9 http://www.internet. 9 http://JavaScript.html 9 http://Javascript.webwizguide. Care este obiectul JavaScript care reprezintă a doua imagine din cadrul unei pagini Web: ƒ image[2].html 9 http://www.54 Precizaţi care este rolul gestionarului de evenimente onMouseOut pe care l-am introdus în tag-ul <h1>.html 9 http://Javascript.html 9 http://Javascript.html 9 http://Javascript.internet.com/navigation/over-line-text-link.com/navigation/thumbmail-navigator.com/bgeffects/mouse-fireworks. ƒ images[1].info/directory/directory/asp?cat=java&PagePosition=1 .internet.internet.com/messages/elastic-bullets.serve.html 9 http://Javascript.internet.geoticies.kitykity.internet.htm. 10.Internet.com/scrolls/animated-message.com/hotsyte/ 9 http://Javascript.html 9 http://Javascript.internet.376 Figura 9.internet.Animaţiile JavaScript par a fi puţin … simpliste! Pot fi create în JavaScript animaţii mai complexe? Vizitaţi site-urile 9 http://Javascript.com/Silicon Valley/7116/ 9 http://www.com/bgeffects/persistent-layer.html 9 http://Javascript.

Numele obiectului Frame este acelaşi cu cel pe care îl afectaţi atributului name al tag-ului <frame>. Atunci când o fereastră conţine mai multe cadre. în limba engleză) care permit divizarea paginii Web în mai multe zone.Conversaţia 10 Obiectele Frame şi Layer • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •• În această conversaţie: f f f f f • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •• Obiectele Frame EXEMPLUL 10. . Din punct de vedere al programatorului JavaScript.2 JAVASCRIPT Temă Obiectele Frame Cea mai mare parte a navigatoarelor actuale (în particular. fiecare dintre ele este reprezentat în JavaScript printr-un obiect Frame. Aplicaţii EXEMPLUL 10. este la fel de uşor să lucrezi pe un site care conţine cadre sau să lucrezi pe un site fără cadre. site-urile Web bazate pe cadre există şi vor mai exista. Acest obiect este echivalent cu un obiect Window atâta timp cât el serveşte la manipularea cadrelor şi nu a ferestrelor. În fiecare zonă a paginii se poate afişa un document (X)HTML sau rezultatul unui script. navigatoarele recente Netscape şi Microsoft) recunosc cadrele (frames.1 JAVASCRIPT Obiectul Layer. Decizia de a utiliza cadre vă aparţine! Indiferent dacă apreciaţi sau nu cadrele.

parent reprezintă setul de cadre (frameset) care conţine cadrul curent. Dacă aţi inserat un script JavaScript în documentul stângasus. parent.1 cu ajutorul matricii frames. Figura 10.2). Cuvintele cheie window şi self vor face referire la însuşi cadrul stângasus. Matricea frames Matricea frames conţine un obiect Window pentru fiecare cadru al paginii Web (vezi figura 10. Iată cum puteţi referi cadrele din figura 10.stângajos etc.1 împarte fereastra în patru zone.2).htm.dreaptasus. . fereastra principală). el va face referire la documentele care aparţin altor cadre: parent. 9 Fiecare din obiectele Frame ale unei ferestre este un fiu al obiectului părinte Window. 9 Cuvântul cheie parent permite referirea la fereastra de nivel superior (cel mai des. utilizaţi matricea frames. Această matrice stochează informaţiile pentru fiecare din cadrele unui document. Numărul de indice (index) al cadrelor începe întotdeauna cu zero şi cu primul tag <frame> al setului de cadre al documentului. În loc să vă referiţi la cadrele unui document prin numele lor.378 Remarci: 9 Cuvintele cheie window şi self permit referirea la cadrul curent. (vezi figura 10. Documentul (X)HTML din figura 10. Dacă utilizaţi cadre situate în interiorul altor cadre (imbricate) lucrurile se complică puţin: window reprezintă întotdeauna cadrul curent. iar top reprezintă setul de cadre principal care le conţine pe celelalte.1 Remarcă.

Dacă însă. 2.4).4 creează două cadre (la stânga şi la dreapta ferestrei). Iată cum creaţi un cadru de navigare (vezi figura 10. Creaţi documentul (X)HTML pentru cadrul din stânga. evident este mult mai bine să utilizaţi numele cadrelor.4 Remarci: 9 Programul din figura 10. documentul conţine decât două cadre.379 Figura 10.2 Remarci: 9 Puteţi folosi oricare din cele două metode de acces la elementele matricii frames (prin numărul de index/prin nume). fără îndoială este mult mai simplu să utilizaţi matricea frames. Creaţi un document (X)HTML care divizează fereastra în două cadre (figura 10.3) care să permită modificarea conţinutului unui alt cadru. 9 Dacă documentul dumneavoastră conţine de exemplu 13 cadre. care va servi pentru navigarea în site (figura 10. • (X)HTML • Dreamweaver MX • XML Figura 10. 9 Tag-urile <body> sunt înlocuite cu tag-urile <frameset>.5).3 • JavaScript 1. . Figura 10.

.2 Deschideţi în browser documentul HTML care divizează fereastra în două cadre (vezi figura 10.5 Remarci: 9 Gestionarii de evenimente onClick se repetă (cu mici modificări) pentru fiecare din cele patru link-uri (vezi tag-urile <a>). 9 Gestionarii de evenimente onClick sunt declanşaţi prin evenimentul click. care afişează un document în cadrul din dreapta. 3. 3.380 Figura 10. Testaţi script-ul. numele celuilalt cadru trebuie să fie precedat de cuvântul cheie parent. 3. 9 Fiecare din obiectele frame ale unei ferestre este un fiu al obiectului părinte Window.1 Salvaţi documentul XHTML al cadrului de navigare sub numele stânga.6). 9 Cuvântul cheie parent permite referirea la fereastra de nivel superior (de regulă fereastra principală). 9 Cuvintele cheie window şi self permit referirea cadrului curent. 9 Deoarece script-ul se găseşte (el însuşi) într-un cadru. 9 Utilizarea limbajului JavaScript permite modificarea simultană a conţinutului mai multor cadre.html.

În figura 10. cu singura deosebire (importantă!) că pentru afişarea rezultatelor vom folosi obiectele Frame (Rezultatele vor fi afişate într-un cadru inserat în documentul curent şi nu într-o fereastră distinctă).3 Testaţi link-urile din cadrul din stânga.1 JAVASCRIPT ‰ Formularea problemei Vom aborda şi în cadrul acestei conversaţii aceeaşi problemă pe care am abordat-o în conversaţia precedentă (EXEMPLUL 9 JAVASCRIPT). .6 3.7 EXEMPLUL 10. Figura 10.381 Figura 10.7 se prezintă rezultatul execuţiei script-ului în navigatorul Internet Explorer.

Tabela de variabile este prezentată în figura 10.9. ‰ Specificaţii de programare În figura 10.9 .min: (numere reale) păstrează valoarea maximă şi minimă pentru livrări a: (matrice de numere reale) păstrează valorile livrărilor pe zile şi rezervoare Figura 10. Selecţia rezervorului şi a zilei se fac printr-o listă de selectare. Varianta 2).8 este prezentat ecranul (intrare/ieşire) cu „RAPORT LIVRĂRI REZERVOR R1”. T1 sit:– (obiect) frame ce conţine zonele reactive pentru afişare Variabile de stare s: (real) folosit pentru calculul sumelor parţiale 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 săptămânii jmax. Zile.jmin: (numere întregi) păstrează indicii livrărilor maxime şi minime din matricea a Variabile de ieşire raport: (obiect) frame-ul în care se vor afişa rezultatele pentru un rezervor med: (real) folosit pentru calculul mediei zilnice pe rezervor max. Figura 10.8 Tabela de variabile Variabile de intrare Rezervor: (obiect) listă simplă de selecţie pentru cele trei rezervoare Zile: (obiect) listă simplă de opţiuni pentru selecţia zilei din săptămână T1: (obiect) zona de editare în care se va introduce valoarea livrărilor Inputd: (obiect) frame-ul ce conţine obiectele Rezervor.382 Introducerea valorilor pentru livrări se face printr-o singură zonă de text (vezi EXEMPLUL 9 JavaScript.

j ENDFOR med=s/5 // determinarea maximului si minimului max=arez.j<5. Pseudocodul EXEMPLUL10.1 BEGIN //initializeaza vectorul Z cu numele zilelor z=luni.20) ENDIF END BEGIN Date intrare: rez-indicele rezervorului // calculeaza total livrari s=0 FOR(j=0.WRITE zi.miercuri.marti.j++) ai.j=0.j++) IF(max<arez.i<3.0.383 ‰ Documentaţia de proiectare Pseudocodul pentru EXEMPLUL 10.j) min=arez.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.j++) s=s+arez.j<5.j ENDFOR FORI FORJ FORJ FORI IFL IFL IFA IFA IFV IFV EXEMPLUL10.j<5.1 JAVASCRIPT este prezentat în figura 10.j<5.1 AFISPARTIAL FORS FORS FORMAXMIN IFMAX IFMAX IFMIN IFMIN FORMAXMIN FORRAP Figura 10.j jmax=j ENDIF IF(min>ai.j) max=arez.i++) FOR(j=0.WRITE "ZIUA R"+k FOR(j=0.10.joi.j jmin=j ENDIF ENDFOR //afisare rezultate //scrierea rezultatelor in frame-ul report k=rez+1 raport. vineri //aloca spatiu de memorie si initializeaza matricea livrarilor FOR(i=0.0 jmax=0 jmin=0 FOR(j=0.0 min=arez.j++) raport.10 FORRAP . arez.WRITE "SITUATIA REZERVORULUI R"+k raport.

"Joi". } //VALIDAREA UNUI CAMP NUMERIC function valideaza(item.j<5. max) { var rVal = false.max. a[1]=new Array(5).j++) a[i][j]=0. if(i!=-1){ s=s. else if (x> max) alert("Valoare gresita pentru cantitate! Valoarea trebuie sa fie < " + max).i<3. <html> <head> <script language="JavaScript"> <!--// DEFINESTE VECTORUL CU ZILELE DIN SAPTAMANA var Z = new Array("Luni".selectedIndex.value). min.i++) for(j=0.min.s raport. //functia de transformare intr-un sir de caractere a unui numar function trunchiaza(x){ var s=""+x.384 raport. if(isNaN(x)) alert("Valoare gresita pentru cantitate!"). else if (x < min) alert("Valoare gresita pentru cantitate!Valoarea trebuie >" + min).i+3).WRITE "Media: ".10 (continuare) AFISPARTIAL END ‰ Codificarea în limbajul JavaScript Documentul complet (X)HTML este prezentat în figura 10.Rezervor.Zjmax raport. var x=parseFloat(item."Vineri"). i=s. else rVal = true. } return s.WRITE "Total livrari: ".0. return rVal. a[0]=new Array(5)."Marti".s raport.11. //SALVAREA CAMPULUI NUMERIC DIN INPUT TEXT IN MATRICEA LIVRARILOR function livreaza(){ //DETERMINA REZERVORUL Figura 10.11 var ir=inputd.indexOf("."Miercuri".WRITE "Livrarea maxima: ". for(i=0.f1.substring(0.WRITE "Livrarea minima: ". a[2]=new Array(5). } // DECLARAREA MATRICEI IN CARE SE VOR PASTRA CANTITATILE LIVRATE a=new Array(3).Zjmin Figura 10."). //DETERMINA ZIUA .

writeln("<center><p><font color=green size=+1>Total Livrari:"+s+"</font>").document. } //CALCULEAZA SI AFISEAZA LIVRARILE DINTR-UN REZERVOR function afispartial(rez){ var i.document.f1.writeln("</center></html>").70%"> <frame scrolling="no" noresize src="inputdata. min=a[rez][0]. jmax=0. raport. raport.} } //AFISARE REZULTATE k=rez+1.jmin=0.i++) { raport.html" name="inputd"> <frame src="raport.} if(min>a[rez][j]){min=a[rez][j]. raport.document. raport. for(j=0.jmin=j.writeln("<br><font color=green>Livrarea minima:"+min+" s-a facut in ziua de " +Z[jmin]+"</font>").html" name="raport"> </frameset> <frame scrolling="no" noresize src="situatie. raport.value). } raport. raport.11 </frameset> (continuare) </html> .0.writeln("<center><table border=1 bgcolor=#efefff><tr>").385 var z=inputd.document.j<5.writeln("<td>" + a[rez][i]+ "</td></tr>").writeln("<td><b>ZIUA</b><td><b>REZERVOR R"+k+"</b></td></tr>").writeln("<br><font color=green>Livrarea maxima:"+max+" s-a facut in ziua de" +Z[jmax]+"</font>").40%"> <frameset cols="30%.html" name="sit"> Figura 10.document. for(j=0. raport.document.k.writeln("<br><font color=green size=+1>Media Zilnica:"+trunchiaza(med)+"</font>").j++) s+=a[rez][j] //CALCUL MEDIE PE ZI med=s/5. } // --> </script> </head> <title>Exemplul 4 utilizand frame-uri</title> </head> <frameset rows="60%.close().selectedIndex.jmax=j.document.document. //CALCUL MAX SI MIN max=a[rez][0].Zile. raport.j. //ADAUGA CANTITATEA IN MATRICEA LIVRARILOR a[ir][z]+=parseFloat(inputd.T1.f1.j++){ if(max<a[rez][j]){max=a[rez][j].document.writeln("<center><p><b>RAPORT LIVRARI REZERVOR R"+k+"</b></p></center>"). raport. for(i=0.i<5. //calcul total livrari s=0. raport. raport.document.j<5.document.open().document.writeln("<tr><td>" + Z[i]+"</td>").writeln("</table></center><p><p>").document.

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."> </table> </center> </form> </body> </html> //RAPORT.20).0" onChange="parent.0."> <tr><td><input type="button" value="Livreaza" onClick="parent.validate(this.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> .trimite().386 // INPUTDATA.

12 se prezintă rezultatele execuţiei programului JavaScript pentru un set de date (Rezervorul 1).status='Rezervorul R2'.return true" onMouseOut="self.afispartial(0)" onMouseOver="window. Figura 10.18.180.jpg" align="top" usemap="#rezervorMap"> Figura 10.afispartial(2)" onMouseOver="window.125" href="javascript:parent.status=' '.return true" onMouseOut="window.HTML <html> <body> <center> <h3> Afiseaza Livrari pentru Rezervoarele: </h3> <map name="rezervorMap"> <area name="R1" coords="16. În figura 10.return true"> </map> <img src="rezervoare.status=' '.return true"> <area name="R3" coords="195.125" href="javascript:parent.18.387 //SITUATIE.return true"> <area name="R2" coords="105.return true" onMouseOut="window.status='Rezervorul R1'.afispartial(1)" onMouseOver="self.status=' '.status='Rezervorul R3'.272.18.11 </body> (continuare) </html> Vizualizaţi documentul într-un browser şi testaţi script-ul (vezi EXEMPLUL 9 JAVASCRIPT).125" href="javascript:parent.91.12 .

src. siblingBellow. resizeTo(). parentLayer. Editura Teora.right. Fişa obiectului Layer este prezentată în figura 10. bgColor. top. clip. Numele stratului poate fi specificat prin atributul id sau name ale tag-ului div. R. clip. Matricea all[] Matricea all[] conţine setul de straturi ale unui document (X)HTML recunoscute de Internet Explorer. routeEvent() - Metode Figura 10. clip. Remarci: 9 În Netscape puteţi accesa proprietăţile unui strat cu ajutorul matricii layers[]. Pentru mai multe informaţii privind straturile şi modul în care acestea funcţionează în browser. 9 În Netscape puteţi accesa proprietăţile unui strat imediat după instrucţiunea document. clip. Fişa obiectului Layer Obiectul părinte Proprietăţi Document above. clip. pageY. name. Obiectul Layer permite limbajului JavaScript să acceseze straturile în interiorul documentelor. bellow.width. siblingAbove. 2003.layers[’numestrat’]. 9 Richard Wagner.layers[]) conţine setul de straturi (layers. JavaScript. document. Traducere Cora Rădulescu şi Dan Pavelescu. moveBellow(). clip. Valoarea pe care o transferaţi pentru a . moveTo(). în limba engleză) reprezentate în pagina (X)HTML prin tag-urile <div> sau <layer>. window.13. resizeBy().bottom. releaseEvents(). pageX. moveBy(). left.13 Gestionarii de evenimente: Matricea Layers[] Matricea layers[] (document.Allen Wyke. Remarcă. zIndex load(). moveAbove().top. Editura Universităţii din Ploieşti. Matricea layers[] este recunoscută numai de browser-ul Netscape. moveToAbsolute(). background.left. Dreamweaver MX. consultaţi lucrările: 9 Liviu Dumitraşcu.388 Obiectul Layer Obiectul Layer este un fiu al obiectului Document. visibility.height. 2002.

conţinut şi vizibilitate. 9 Pentru gestiunea straturilor. Netscape a creat trei noi tag-uri: <LAYER> . În Internet Explorer puteţi accesa proprietăţile unui strat prin intermediul matricii style.style.. <ILAYER> .. limbajul de script ales de Netscape este JavaScript întrucât el este creatorul limbajului.389 specifica stratul pe care doriţi să îl accesaţi nu este păstrată în atributul name al tag-ului <div> ci în atributul <id> al aceluiaşi tag. culoare. Elementul LAYER conţine 13 proprietăţi. parţial sau total. ceea ce înseamnă că sintaxa pe care o veţi folosi va fi: document. Corespondenţa între atributele HTML ale straturilor şi proprietăţile JavaScript Un „layer” este un obiect plan rectangular care conţine mai multe proprietăţi: dimensiuni. dar ele pot fi modificate şi deplasate cu ajutorul unui script. Remarcă.. O pagină Web poate conţine mai multe straturi care se pot suprapune precum straturile. Figura 10. dintre care cea mai mare parte au valori implicite..14 . Înainte de a trece la corespondenţa: atribute HTML – propriet••i JavaScript vom prezenta un exemplu de declarare a unui strat (figura 10.14). Cel mai important este de departe primul tag.. Straturile sunt de regulă obiecte statice.all[’numestrat’]. </NOLAYER>. </ILAYER> şi <NOLAYER> .. Al doilea este o formă „inline” iar cel de-al treilea joacă acelaşi rol în raport cu elementul LAYER ca NOFRAMES în raport cu FRAMESET. </LAYER>. Remarci: 9 Straturile au fost implementate de Netscape începând cu versiunea 4 a browser-ului Netscape Navigator. Natural.

16). . id ID Numele stratului (identic cu name). Nemodificabil. LEFT Coordonata X a stratului. top PAGEX pagex Coordonata X a stratului faţă de document. PAGEY pagey Coordonata Y a stratului faţă de document. VISIBILITY visibility Starea de vizibilitate a stratului. Z-INDEX zindex Ordinea – z a stratului în raport cu fiii săi. Atribut HTML Proprietăţi JavaScript NAME Figura 10. left TOP Coordonata Y a stratului.15 este prezentat stratul afişat de Netscape.16 name Numele stratului (identic cu id).15 Pentru a putea modifica atributele elementului LAYER în vederea dinamizării unei pagini Web va trebui să cunoaştem corespondenţa dintre atributele HTML ale straturilor şi proprietăţile JavaScript (vezi figura 10. Figura 10.390 În figura 10. Nemodificabil.

height Proprietăţile suprafeţei decupate a stratului. Metodă Sintaxă load() document. clip.moveBelow() Deplasează stratul dedesubtul altui strat.layers[]. Remarcă. BELOW below Numele elementului HTML de dedesubtul stratului curent.left. clip.layers[].top. SRC src URL-ul fişierului care reprezintă conţinutul stratului. În schimb. moveBy() document. moveTo() document.17.moveAbove() Deplasează stratul deasupra altui strat.17 Încarcă o nouă adresă URL.width.16 (continuare) Imaginea de fundal a stratului. clip.391 BACKGROUND background Figura 10. numele proprietăţilor JavaScript se scriu întotdeauna cu minuscule! Metodele obiectului Layer Metodele obiectului Layer sunt prezentate în detaliu în figura 10.bottom.layers[]. . BGCOLOR bgColor Culoarea de fundal a stratului. Pentru o mai bună lizibilitate am procedat la scrierea numelor atributelor HTML cu majuscule. dar ..right. clip. PARENTLAYER parentLayer Numele obiectului care conţine stratul curent. CLIP clip. nu este obligatoriu.load() Figura 10.layers[]. clip.layers[]. moveBelow() document.moveBy() Deplasează stratul într-o poziţie specifică. ABOVE above Numele elementului HTML de deasupra stratului curent.moveTo() Deplasează colţul din stânga-sus al ferestrei la coordonatele specificate ale ecranului.. moveAbove() document.

resizeBy() Redimensionează stratul cu valorile de înălţime şi lăţime specificate. Figura 10. . releaseEvents() document.layers[].18 În figura 10.19 este prezentat rezultatul execuţiei programului JavaScript în navigatorul Netscape. routeEvent() document.releaseEvents() Stabileşte ca stratul să elibereze evenimentele capturate de tipul specificat.layers[].392 moveToAbsolute() document.layers[].layers[].moveToAbsolute() Figura 10.17 (continuare) Modifică poziţia stratului în pagină. Aplicaţie ‰ Analizaţi documentul XHTML din figura 10. resizeBy() document.routeEvent() Transferă un eveniment capturat prin ierarhia normală a evenimentelor. conform coordonatelor specificate în pixeli.18 în care s-a inserat un script care conţine metoda moveBy().

19 Figura 10.393 Figura 10.19 (continuare) .

‰ Specificaţii de programare În figura 10.21. Introducerea valorilor pentru livrări se realizează printr-o singură zonă de text.2 JAVASCRIPT ‰ Formularea problemei Vom aborda şi în cadrul acestei conversaţii aceeaşi problemă pe care am abordat-o în conversaţia precedentă. Tabela de variabile este prezentată în figura 10.20 este prezentat ecranul (intrare/ieşire) în care se afişează pagina Web. Figura 10.394 EXEMPLUL 10. iar selecţia rezervorului şi a zilei din lista de opţiuni.20 . cu singura deosebire că de data acesta vom folosi pentru afişarea rezultatelor obiectul Layer.

j++) ai.j<5. emin. Pseudocodul EXEMPLUL10.min: (numere reale) păstrează valoarea maximă şi minimă pentru livrări rnume.jmin: (numere întregi) păstrează indicii livrărilor maxime şi minime din matricea a Variabile de ieşire f2: (obiect) formular conţinut în layer-ul R1 în care se vor afişa rezultatele pentru un rezervor med: (real) folosit pentru calculul mediei zilnice pe rezervor max.i++) FOR(j=0. Z4.2 BEGIN //initializeaza vectorul Z cu numele zilelor z=luni.22 FORS .395 Tabela de variabile Variabile de intrare Rezervor: (obiect) lista simpla de selecţie pentru cele trei rezervoare Zile: (obiect) lista simplă de opţiuni pentru selecţia zilei din săptămână T1: (obiect) zona de editare în care se va introduce valoarea livrărilor a: (matrice de numere reale) păstrează valorile livrărilor pe zile şi rezervoare Figura 10. emax.joi vineri //aloca spatiu de memorie si //initializeaza matricea livrarilor FOR(i=0.j ENDFOR FORI FORJ FORJ FORI IFL IFL IFAFIS IFAFIS IFVALID IFVALID EXEMPLUL10. zmax.21 Variabile de stare s: (real) folosit pentru calculul sumelor parţiale 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 săptămânii jmax.miercuri. Med.j<5.20) ENDIF Date intrare: rez-indicele rezervorului // calculeaza total livrari s=0 FOR(j=0.j++) s=s+arez.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. Z5.marti.2 END AFISPARTIAL BEGIN FORS Figura 10. Tot.22. Z2.Z1. Z3.i<3.j=0. zmin: (obiect) zone text pentru afişarea rezultatelor ‰ Documentaţia de proiectare Pseudocodul pentru EXEMPLUL 10.0.2 JAVASCRIPT este prezentat în figura 10.

Z4.style. f2.value=trunchiaza(med).2</title> <script language=”JavaScript”> <!--var Z = new Array(”Luni”.zmax.0 min=arez.j jmin=j ENDIF ENDFOR //afisare rezultate //depune rezultate in zonele din layerul R1 k=rez+1 f2.substring(0.value=a[rez][1].value=Z[jmax].j) max=arez.23 } .emax. f2.value=a[rez][4].value=a[rez][3].value=min.”).emin.value=s.value=max.value=a[rez][0]. f2.0 jmax=0 jmin=0 FOR(j=0.22 (continuare) ASCUNDE ‰ Codificarea în limbajul JavaScript Documentul complet (X)HTML este prezentat în figura 10.396 med=s/5 // determinarea maximului si minimului max=arez. f2.i+3). f2. f2.visibility = "hidden" END FORMAXMIN IFMAX IFMAX IFMIN IFMIN FORMAXMIN AFISPARTIAL ARATA ARATA ASCUNDE Figura 10.style.zmin.”Joi”. f2.indexOf(„.Z3. f2. f2. Figura 10.”Vineri”). if(i!=-1){ s=s. f2.value=Z[jmin].23.j++) IF(max<arez. f2. END //Afiseaza layerul cu rezultate BEGIN R1. function trunchiaza(x) { var s=””+x.value="R"+k.rnume.Z2.j jmax=j ENDIF IF(min>ai.j) min=arez.value=a[rez][2].j<5.”Marti”.Z1.Z5.”Miercuri”.Tot.Med.visibility = "visible" END // Ascunde layerul cu rezultate BEGIN R1. i=s. <html> <head> <title>Exemplul 10.

Z2. document.value=a[rez][1].jmax=j.value=a[rez][3]. } function afispartial(rez) { var i. max) { var rVal = false.} } //AFISARE REZULTATE k=rez+1.} if(min>a[rez][j]){min=a[rez][j].i++) for(j=0. for(i=0. a[0]=new Array(5).selectedIndex. min.23 document. } a=new Array(3).j.Zile.jmin=j.selectedIndex.value=a[rez][0]. Figura 10. for(j=0.value=a[rez][2].0. f2. a[ir][z]+=parseFloat(f1.Z1.Rezervor.Z4.0.j<5. .f2. var z=f1. if(isNaN(x)) alert(„Valoare gresita pentru cantitate!”).jmin=0. (continuare) document.f2.k. } function validate(item.j++) s+=a[rez][j] //calcul medie pe zi med=s/5.397 return s. else if (x < min) alert(„Valoare gresita pentru cantitate!Valoarea trebuie >” + min). document.value="R"+k.rnume.f2.T1.value). jmax=0. //CALCUL TOTAL LIVRARI s=0. else if (x> max) alert(„Valoare gresita pentru cantitate! Valoarea trebuie sa fie < „ + max).j++) a[i][j]=0. a[1]=new Array(5). a[2]=new Array(5). min=a[rez][0]. else rVal = true. return rVal.j<5. var x=parseFloat(item. for(j=0. function trimite() { var ir=f1.Z3.i<3.j++){ if(max<a[rez][j]){max=a[rez][j].value).j<5. //calcul max si min max=a[rez][0].f2.

style.visibility = "hidden".zmin. document.arata(). document.emax.Tot." Figura 10." onMouseOut="ascunde('R1').f2.f2.">Rezervor R3 (continuare) .value=Z[jmin].value=max.style.f2. } function arata() { document.value=min. document.0. document." onMouseOut="ascunde().value=trunchiaza(med).zmax.f2.20). document.arata().emin.f2."> Rezervor R1</a> <tr><td><a href="javascript:void(0)" onMouseOver="afispartial(1).">Rezervor R2 <tr><td><a href="javascript:void(0)" onMouseOver="afispartial(2).23 onMouseOut="ascunde()."> <tr> <td><input type="button" value="Livreaza" onClick="trimite().all['R1'].f2.visibility = "visible". } // --> </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.all['R1'].value=a[rez][4].Z5.Med.f2.value=Z[jmax]. } function ascunde() { document.arata().398 document.value=s.0" onChange="validate(this. document."> </table> </center> </form> <h3>Situatia Livrarilor</h3> <table> <tr><td><a href="javascript:void(0)" onMouseOver="afispartial(0).

0"></td></tr> <tr><td>Marti</td><td><input type="text" name="Z2" size="7" value="0.top: 120px. În figura 10."> <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>Vineri</td><td><input type="text" name="Z5" size="7" value="0. left: 120px.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></tr> <tr><td>Joi</td><td><input type="text" name="Z4" size="7" value="0.z-index: 2. se poziţionează mouse-ul deasupra legăturii: Rezervor R1/ Rezervor R2/ Rezervor R3.23 </body> (continuare) </html> Vizualizaţi documentul într-un browser şi testaţi script-ul numai în Internet Explorer.0"></td></tr> <tr><td>Miercuri</td><td><input type="text" name="Z3" 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"></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.399 </tr> </table> <div id="r1" style="position: absolute. visibility: hidden.0"> </table> <table bgcolor=#efefff> <tr><td><font color=green>Livrarea maxima:</font><td> <input type="text" name="emax" size="7" value="0.24 se prezintă rezultatele execuţiei programului JavaScript pentru un set de date.0"> <td> <input type="text" name="zmin" size="7" value="Luni"> </table> </form> </div> Figura 10. top:190. Se introduc livrările.

24 .400 Figura 10.

com/bgeffects/floating-transparent-slideshow.dannyg.htm 9 http://www.401 JavaScript Temă Testaţi-vă cunoştinţele 1.internet.com/messages/description-layer.html 9 http://www.htm .html 9 http://Javascript.com/examples/dh2/index.dannyg.com/bgeffects/write-layer. 9 http://Javascript. Care este rolul obiectului Layer? 3.internet.internet.htm. Când utilizaţi obiectele Frame? 2.com/examples/ol2/index. Care sunt metodele obiectului Layer? Vizitaţi site-urile 9 http://Javascript. Care sunt proprietăţile obiectului Layer? 4.

nu de puţine ori. dar mai ales atunci când aţi mărit gradul de complexitate al aplicaţiilor JavaScript aţi făcut şi … greşeli! Este normal să fie aşa! În această conversaţie. vom încerca o clasificare a acestora urmând ca apoi să precizăm regulile pentru evitarea acestor erori frecvente JavaScript. Tipuri de erori JavaScript Fiecare dintre noi poate comite erori particulare la scrierea unui program JavaScript. Aplicaţii Tehnici de depanare a script-urilor Instrumente pentru depanarea script-urilor. . Aplicaţii Temă Evitaţi erorile frecvente JavaScript Trebuie să recunoaşteţi. ne vom apropia cu respect faţă de erorile curente JavaScript. De asemenea. dar foarte multe dintre acestea sunt curente. nu vor lipsi din prezentarea noastră nici tehnicile şi instrumentele de depanare folosite curent în activitatea de testare şi depanare a programelor JavaScript. Aplicaţii Instrucţiunile throw şi try … catch. chiar dacă nu vă face plăcere că.Conversaţia 11 Depanarea aplicaţiilor JavaScript ••••••••••••••••••••••••••••••••••••••••••••• În această conversaţie: f f f f f ••••••••••••••••••••••••••••••••••••••••••••• Tipuri de erori JavaScript.

figura 11.12.17 . Ele pot fi clasificate în următoarele categorii: 9 erori de sintaxă. greşeli de punctuaţie ƒ figura 11.14 9 greşeli de tratare a şirurilor de caractere şi a numerelor ƒ figura 11. figura 11.13. figura 11. după cum urmează: 9 greşeli de tastare.2. figura 11.1.3.16. ƒ inversarea literelor. 9 greşeli de plasare a instrucţiunilor JavaScript 9 confuzia între şirurile de caractere şi numere ƒ numerele sunt tratate ca şiruri de caractere. 9 greşeli de punctuaţie ƒ tag-uri şi paranteze orfeline. figura 11.11. figura 11. figura 11. figura 11. erorile de sintaxă provin din: 9 greşeli de tastare ƒ confuzia între majuscule şi minuscule. interpretorul JavaScript identifică corect sursa erorilor în programele pe care le-aţi realizat. figura 11. ƒ ghilimele şi apostrofuri plasate greşit.10. De cele mai multe ori. figura 11. Aplicaţie ‰ Următoarele script-uri conţin erori de sintaxă.8.404 Erorile JavaScript sunt identificate de browser la încărcarea paginii Web.5. 9 erori generate de incompatibilitatea între navigatoare.9 9 greşeli de plasare a instrucţiunilor JavaScript ƒ figura 11. figura 11. 9 erori de logică. Erori de sintaxă Erorile de sintaxă JavaScript sunt erorile cele mai frecvente şi cele mai uşor de corectat.7. figura 11. ƒ şirurile de caractere sunt tratate ca numere.4.15.6. figura 11. dar … sunt şi cazuri când lucrurile nu stau chiar aşa! În general. figura 11.

write (”La revedere!” x=8 y=3 z=120. </script> <script> ”Salut”=şir.WRITE (”Să nu uitaţi să fiţi fericiţi!”). </script> <script> Figura 11. </script> <script> a=new Array.2 onClick=”alert(calculează).write (”La revedere!”+<br>). alert (”c=7”).405 Identificaţi şi corectaţi erorile de sintaxă din toate aceste script-uri.7. document. Figura 11. if (c==7).write (”<font size=’+5’>”). if (d=8) alert (”d=8”). if (m=7) this alert (”m=7”).5 Figura 11.Write (”Să nu uitaţi să fiţi fericiţi!”). Document. Document. if (b==5 alert (”b=5”). b=Array(5). Figura 11. </script> <script> DOCUMENT. document.” onClick=alert(’Afişează’).1 Figura 11.3 var ”Salut”=şir_1. </script> <script> if (a==10).write (”Să nu uitaţi să fiţi fericiţi!”). c=[2.5.6 .4 Figura 11. <script> document. alert (”a=10”).

//iniţializare cu litera O! for (i=0. ++i. Figura 11. ++i) alert (”La mulţi ani frumoşi!”). document. while (j<=9. </script> Figura 11. while (i<7) Figura 11. ++i) for (i=0.8 } </script> <script> for (var i=0. } </script> <script> do while (i<7) { } alert (”La revedere!”). i++) { s=s+i.writeln(j) { ++j. i<=10. if (r=33) alert (”FELICITĂRI!”) else ”document.writeln(i).406 <script> if (c=3) alert (”c=3”) else.7 Figura 11. document. for { alert (”La revedere!”). } while (var i=0. i<13.9 Figura 11.{} document. ++i. alert (”La revedere!”).write (’EROARE’)”. i<13. } do { alert (”FATALITATE!”). if (d=7) { alert (”d=7”) } else (document.write (”c!=3”).write (”EROARE”).11 } </script> . </script> <script> while (i<=7). i<7). } do { while (i<10) alert (”Bucla do … while!”).10 <script> s=O.

bold()+”<br/>”) } </script> </head> <body> <form> <input type=”button” value=”BOLD” onClick=”demo(3.12 </script> } <script> for (i=0.write (valoare. p_3=i*i*i. i<=10. document. </script> Figura 11. ++i++) { s=s+i. i++) { p_2=i*i. i<=10.13 Figura 11. for (i=0. } Figura 11. I<=10. } write(s). doi) { return unu+doi } </head> Figura 11.write (p_3).16 </body> </html> .407 <script> s=0.write (p_2). document. <script> s=0. i++) { s=s+i.14)’> </form> Figura 11.14 <script> function demo (Valoare) { document. for (i=0.15 </body> </html> <html> <head> <title> aplicaţie </title> <script> function test (valoare) { alert (Valoare) } </script> function adunare (unu.

atribuiri de valori pentru variabile nedeclarate. i<=stud.408 <script> function TVA (valoare) { return valoare*0. } } media=media/nt.flor(media*100)/100.19 } </script> </head> <body> <form> <input type=”button” value=”calcul TVA” onClick=’alert (”TVA:”+TVA(”treisprezece”))>” </form> Figura 11. 11. totuşi programul conţine erori de logică (semantice)! Identificarea erorilor de logică constituie o piatră grea de încercare pentru începători. if(nota) { media+=nota.20.17 </body> </html> Erori de logică Erorile de logică se generează atunci când nu se obţin rezultatele scontate! Deşi codul sursă JavaScript este corect din punct de vedere sintactic. şi ca urmare de un cod sursă JavaScript incorect! Aplicaţie ‰ Identificaţi şi corectaţi erorile de logică din următoarele script-uri (vezi figurile 11. media=0. i++) { nt=0.18. deşi nu sunt generate erori în timpul execuţiei programului (apeluri de funcţii incorecte. for (i=1.19. 11.). 0)).21). j<=teste. 11.18 media=Math. Figura 11. o proiectare defectuoasă a programului JavaScript. for (j=1. teste=parseInt (prompt(”Introduceţi numărul de teste”. 0)). imposibilităţi aritmetice – împărţire la zero etc. } . j++) { nota=parseInt (rezultate[i][j]). <script> stud=parseInt (prompt(”Introduceţi numărul de studenţi”. dar nu trebuie să disperaţi! Foarte multe erori de logică sunt generate de o analiză superficială a aplicaţiei.

datorată de o împărţire la zero: media=media/nt unde. 9 Corectaţi eroarea. j++){ nota=parseInt (rezultate [i][j]) . i=7. } Figura 11. (vezi Conversaţia 3).409 Remarci: 9 Aplicaţia ilustrează o eroare generată în timpul execuţiei script-ului. j<=teste. după cum urmează: d[3]=st/15. 9 De ce 15? Răspunsul este simplu: 5 zile (luni. i<3. joi. Remarci: 9 Eroarea de logică provine de la numitorul fracţiei. 9 Enunţul trebuie corectat. vineri) * 3 rezervoare (R1. <script> var Constant=”13”. for (i=0. } d[i]=s/5.write (i+”+”+Constant+”=”+ (i+Constant)+”<br>”).19 media=media/nt. R3). nt=0. nt=0. i--) { document. for (j=0. i>0. } </script> Figura 11. j++) { s=s+a[i][j]. } <script> //Conversatia 3 function rotunjeste (x) { } //Calculul mediilor pe zile //Calculul mediilor pe rezervoare d=new Array (4). media=0. if nota { media+=nota. j<5.20 d[3]=st/14. st=st+a[i][j]. nt++. din enunţul de atribuire d[3]=st/14. marţi. for (i<=7. instrucţiunea nt++ (figura 11. st=0. R2. introducând în instrucţiunea if. for (j=1.21 . } } Figura 11. miercuri. i++) { s=0.19).

Erori generate de incompatibilitatea între navigatoare Nimic nu este mai neplăcut decât să constaţi că după ce ai reuşit să creezi (cu efort!) script-uri pe care le consideri nemaipomenite.netscape. Figura 11.com/scripting/jsscripting/jsscript/ default.htm 9 detectaţi tipul de navigator utilizat de către vizitatorii dumneavoastră. înainte de a le plasa pe server-ul Web.22 9 JavaScript evaluează rezultatul expresiei (i+Constant) ca şir şi concatenează cei doi operanzi. să primeşti î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 uitaţi că există un turn Babel al navigatoarelor! Morala: 9 testaţi script-urile dumneavoastră cu mai multe browser-e.microsoft. 9 consultaţi manualele de utilizare a celor mai importante browser-e: ƒ http://developer. .com/docs/manuals/jsref/ ƒ http://msdn. chiar dacă execuţia s-a încheiat fără incidente.410 Remarci: 9 Rezultatele afişate (vezi figura 11.22) sunt incorecte.

Pentru a elimina anumite porţiuni din codul JavaScript (până la eliminarea erorilor) utilizaţi comentariile conform procedurii de mai jos [1]: 9 transformaţi în comentariu una sau mai multe linii ale programului. 9 analizaţi rezultatul (efectul). 9 afişa rezultatele expresiilor. În prezent. utilizaţi metoda alert() pentru a: 9 afişa valorile variabilelor. 9 reîncărcaţi pagina Web în browser. Utilizaţi comentariile Pentru a vă crea primele reflexe JavaScript inseraţi cât mai multe comentarii în script-urile dumneavoastră. În acest sens. Observaţie. 9 salvaţi programul. Afişaţi valorile variabilelor O altă tehnică de depanare frecvent folosită este aceea de a adăuga instrucţiuni JavaScript pentru a putea cunoaşte stările script-ului. Comentariile JavaScript (// sau /* şi */) au fost prezentate în Conversaţia 2). 9 repetaţi această procedură până când aţi eliminat eroarea. 9 modificaţi codul sursă sau transformaţi în comentariu mai multe linii de cod. schemele logice au fost înlocuite cu pseudocodul. care este o combinaţie de JavaScript şi limbaj natural structurat. logica programului. Acest mod de descriere a unui algoritm s-a dovedit a fi indispensabil atunci când doriţi să localizaţi zona în care ar putea fi eroarea generată. matricelor şi valorile returnate de funcţii. .411 Tehnici de depanare a script-urilor În vremurile … mai de demult programatorii începeau depanarea prin a desena scheme logice complicate pentru a urmări secvenţial.

În JavaScript una din erorile cele mai frecvente comise de către începători este confuzia între operatorul de afectare (=) şi operatorul de egalitate (==). Morala este următoarea: asiguraţi-vă că documentul (X)HTML nu conţine erori! Este foarte simplu de a comite erori în documentul (X)HTML care conţine script-ul. Dumitraşcu. În anumite cazuri. Cu cât dimensiunile unei funcţii sunt mai mici cu atât mai mult cresc şansele de reutilizare a acesteia în diferite zone ale programului. Editura Universităţii din Ploieşti. Deşi (X)HTML nu reprezintă obiectul de studiu al nostru (vezi L. Aceste erori sunt câteodată dificil de identificat în măsura în care ele nu generează întotdeauna un mesaj de eroare. Puteţi de asemenea afişa informaţii din procesul de depanare. într-o altă fereastră a navigatorului sau într-un cadru anume. 2003) este bine să ştiţi că o eroare (X)HTML poate genera erori în programul JavaScript. Verificaţi codul JavaScript Atribuire şi egalitate. . (X)HTML. puteţi afişa mesaje în bara de stare cu ajutorul proprietăţii status. această metodă nu funcţionează decât atunci când documentul a fost complet încărcat! Descompuneţi script-urile complexe în mai multe funcţii Pentru a mări gradul de reutilizare a codului JavaScript este bine să limitaţi dimensiunea funcţiilor pe care urmează să le creaţi.write. folosiţi document.412 De asemenea. A uita tag-ul de închidere </table> sau </script> este o eroare frecventă (X)HTML. Verificaţi documentul (X)HTML Nu trebuie să uitaţi că JavaScript nu este singurul limbaj pe care trebuie să-l utilizaţi. dar … atenţie (!). el interacţionează de obicei cu codul sursă (X)HTML.

alert este obligatorie. dar x=7 va avea ca efect atribuirea valorii 7 variabilei x.alert scriind simplu alert. este posibil de a ne referi la metoda window. Astfel. <script> Figura 11. Remarcă. iar ”==” serveşte la compararea a două valori.23 if (x=7) alert (”La revedere!”).413 Dacă nu ştiţi ce operator să folosiţi. Faceţi referiri corecte la obiecte. amintiţi-vă simplu că ”=” serveşte la schimbarea valorii unei variabile.write. Nu de puţine ori se fac referiri la obiecte în mod incorect. Netscape detectează de cele mai multe ori acest tip de eroare şi afişează un mesaj la consolă. Este important de a utiliza numele exacte ale obiectelor şi de a numi explicit părinţii unui obiect. scriind de exemplu write în loc de document. adică la căutarea şi eliminarea erorilor din program. atunci când se doreşte de exemplu a utiliza în exteriorul unei funcţii o variabilă care a fost declarată în interiorul unei funcţii. . Iată o instrucţiune eronată (figura 11. O altă eroare frecventă este confuzia între variabilele globale şi locale. O altă eroare frecventă constă în neglijarea utilizării numelui obiectului Document. Dar sunt şi cazuri când utilizarea lui window. </script> Această instrucţiune pare logică la prima vedere. care totuşi nu funcţionează este momentul să treceţi la depanare. Eroarea inversă (== în loc de =) nu va fi niciodată detectată! Variabile globale şi locale. şi nu compararea celor două.23). utilizând instrumentele simple de depanare pe care le prezentăm în continuare. Instrumente pentru depanarea script-urilor Depanarea codului sursă ocupă un loc deosebit de important în dezvoltarea aplicaţiilor JavaScript. Diferenţa dintre variabilele locale şi globale este explicată în Conversaţia 2. Dacă aţi verificat absenţa erorilor „clasice” în script-urile dumneavoastră.

1. Figura 11. ea permite de asemenea introducerea unei instrucţiuni/expresii. mesajele de eroare nu se afişează direct.24).25 Remarcă. Figura 11. pentru a vedea apoi rezultatul. Executaţi clic pe Tools → Web Development → JavaScript Console (figura 11. .5. Consola JavaScript afişează ultimele mesaje de eroare (figura 11. 2. ele fiind înregistrate în consola JavaScript.26). începând cu versiunea 4. Iată cum procedăm pentru a accesa consola JavaScript.414 Consola JavaScript Primul lucru pe care trebuie să-l faceţi atunci când script-ul dumneavoastră nu funcţionează este consultarea mesajelor de erori afişate.24 sau.26 Consola JavaScript nu permite numai vizualizarea erorilor. Introduceţi JavaScript în câmpul Address (figura 11. În Netscape.25). Figura 11.

Executaţi clic pe Tools → Internet Options → Advanced (figura 11.27 2.415 Această funcţie este utilă pentru a verifica existenţa erorilor de sintaxă în liniile de cod ale script-ului dumneavoastră. Afişarea mesajelor de eroare cu Internet Explorer Internet Explorer şi versiunile mai recente nu afişează în mod implicit mesajele de eroare.27). 1.28). Dezactivaţi Disable script debugging şi activaţi opţiunea Display a notification about every script error (figura 11. Iată cum procedăm pentru a afişa mesajele de eroare în Internet Explorer. Figura 11. .

416 Figura 11.29 .28 Figura 11.

care poate fi descărcat gratuit. Indiferent de preferinţele dumneavoastră. 9 Microsoft Script Debugger (MSSD). prezentate mai jos: 9 W3C validator. fereastra de expresii evaluate imediat. În consecinţă. instrument de depanare a aplicaţiilor JavaScript.W3. întrerupere. Principalele caracteristici [1] ale instrumentului Netscape JavaScript Debugger sunt: fereastra Source View. Internet Explorer afişează în bara de stare un icon atunci când se generează o eroare.netscape. Principalele caracteristici [1] ale instrumentului Microsoft Script Debugger sunt: imagine dinamică a structurii (X)HTML. fereastra Console. fereastra de dialog Error Reporter.mozilla. Consultaţi lucrarea L.com/software/jsdebug. stivă de apeluri integrată. testaţi script-urile cu cele două navigatoare.29). omiterea liniilor din procedurile apelate. parcurgerea pas cu pas a codului sursă. puncte de întrerupere. de la adresa: http://developer. parcurgerea liniilor din procedurile apelate. parcurgerea pas cu pas a codului sursă. care poate fi descărcat gratuit. Editura Universităţii din Ploieşti 2003. http://www.html sau.org/projector/venkman/ Remarcă. ele vă pot de asemenea asista în timpul depanării. de la adresa: http://validator.com/library/en-us/sdbug/html/sdbug_1. integrarea mai multor limbaje (JavaScript. parcurgerea liniilor din procedurile apelate. puncte de întrerupere. Executaţi dublu clic pe acest icon pentru a afişa mesajul de eroare (figura 11. Dumitraşcu (X)HTML.asp Remarcă. omiterea liniilor din procedurile apelate.org/ Remarcă. VBScript şi Java din acelaşi document). Object Inspector. vă recomandăm să utilizaţi unul din instrumentele specializate. care poate fi descărcat gratuit. instrument de depanare a script-urilor. Alte instrumente de depanare Mesajele de avertizare (vezi metoda alert()) şi puţin … fler vă pot ajuta să găsiţi cu uşurinţă cauza unei erori într-un script simplu dar … aceste metode sunt insuficiente pentru depanarea script-urilor de dimensiuni mari. 9 Editoarele de text şi de (X)HTML sunt foarte bune instrumente pentru procesarea de bază. parte integrantă din Internet Explorer. 9 Netscape JavaScript Debugger.417 Remarci: 9 Dacă nu aţi activat afişarea mesajelor de erori. 9 După cum aţi putut constata şi Microsoft dispune de un instrument de depanare la fel de eficient ca şi consola Netscape. de la adresa: http://msdn. .microsoft. instrument de depanare a documentelor (X)HTML.

Indicaţie.31).30 2. Creaţi documentul (X)HTML (figura 11.30).418 afişând numerele de linii şi punând în relief tag-urile corecte cu ajutorul codurilor de culori. . Figura 11. Aplicaţie ‰ Scrieţi un program JavaScript care calculează şi afişează determinantul unei matrice de dimensiune 3*3. Plasaţi script-ul de calcul al determinantului în documentul (X)HTML (figura 11. 7 8 9 1. a b d e g h c f = a*(e*i–f*h)–b*(d*i–f*g)+c*(d*h–e*g) i Iată cum procedăm pentru a scrie programul JavaScript care calculează şi 1 2 3 afişează determinantul matricei 4 5 6 .

31 3. Figura 11.419 Figura 11.org).32 . Validaţi În figura documentul (X)HTML cu aplicaţia validator (http://validator.32 este prezentat rezultatul validării obţinut cu aplicaţia validator. 11.w3.

34). Figura 11.w3. Nimic nu este perfect! Aţi identificat eroarea? Deşi îl pronunţ bine pe r. Corectaţi eroarea şi validaţi documentul (X)HTML cu aplicaţia validator (http://validator. Vizualizaţi pagina Web într-un browser (Internet Explorer).33. Figura 11.34 6.33 5. Inseraţi codul HTML care afişează icon-ul de conformitate (figura 11. . nu-i aşa! Corectaţi </script>! 4. în loc de r am tastat l (</sclipt>). figura 11.35.420 Remarcă.org). Se întâmplă. figura 11.

. ea transferă eroarea blocului catch.37. la apariţia unei erori.36 Instrucţiunile throw şi try … catch Instrucţiunea throw generează o eroare. Instrucţiunea throw Sintaxa instrucţiunii throw este prezentată în figura 11. Figura 11. 7. programul execută blocul catch. Instrucţiunea throw este utilizată frecvent într-o instrucţiune try … catch. Instrucţiune Figura 11. Un bloc try conţine instrucţiuni JavaScript.36). Internet Explorer afişează icon-ul de conformitate la baza paginii.35 Remarcă.421 Figura 11.37 throw Sintaxă throw ”mesaj eroare” Remarcă. Testaţi script-ul (figura 11.

catch try { cod1 } catch (Eroare) { cod2 } finally { cod3 } Figura 11.. În figura 11. Ea este alcătuită din trei blocuri: try. eroarea ”Eroare 1” este generată (această eroare este de acelaşi tip cu erorile de sintaxă).39 . furnizându-i ca parametru tipul de eroare returnat prin throw.. În definitiv. ”Eroare 2” în situaţia în care numărul de rezervoare cilindrice echilaterale care a fost introdus de la tastatură este zero. Instrucţiunea try … catch Try … catch serveşte la testarea unei porţiuni de cod JavaScript şi la depistarea eventualelor erori. <script> try { n=prompt (’Introduceţi numărul de rezervoare (n)’.422 Iată cum procedăm pentru a genera două mesaje de eroare: ”Eroare 1”. el afişează un mesaj alert(). 9 În cazul în care valoarea variabilei n a fost fixată la 0 în cursul instrucţiunilor executate anterior. catch şi finally. Instrucţiune Sintaxă try . if (n==0) throw ”Eroare 1” else if (n<0> throw ”Eroare 2” } catch (er) { if (er==”Eroare 1”) alert (”Eroare 1 – număr rezervoare=0”) if (er==”Eroare 2”) alert(”Eroare 2 – număr rezervoare negativ”) } Figura 11. nu se generează nici o eroare iar blocul catch nu este executat. 9 În situaţia în care n nu este egal cu zero şi nici negativ. Pentru utilizator nu se întâmplă absolut nimic. respectiv negativ (vezi EXEMPLELE JAVASCRIPT).38 </script> Comentarii: 9 Programul execută blocul try.38 este prezentat script-ul aplicaţiei.39.0). Sintaxa instrucţiunii este prezentată în figura 11. Programul părăseşte blocul try şi execută blocul catch.

9 Dacă instrucţiunile din blocul try nu depistează nici o eroare.2)+”. Numele erorii Descriere Utilizare greşită a metodei eval() O valoare numerică este foarte importantă Referinţă la o variabilă. Iată cum calculăm aria unui rezervor sferic ( a = 4πR 2 ) cu raza de 3m utilizând funcţia internă eval(). } catch(err) { if (err.pow(3.PI*Math. 9 În sfârşit. 9 Dacă utilizatorul introduce ”a=4*Math.40 } </script> Comentarii: 9 try aşteaptă … o eroare! 9 eval() acceptă un şir de instrucţiuni JavaScript şi îl evaluează ca fiind cod sursă. care nu există. spunem că avem de-a face cu o eroare de sintaxă.2) atunci ea evaluează textul primit ca argument şi returnează rezultatul.2)”.097.PI*pow(3.PI*Math. JavaScript recunoaşte şase tipuri de erori (vezi figura 11.””). evitând blocul catch.pow(3. <script> try { a=prompt (”Introduceţi a=4*Math.PI*Math.name==”SyntaxError”) alert (”Eroare de sintaxă!”) else alert (”Expresia nu poate fi evaluată”) Figura 11. ”Expresia nu poate fi evaluat•” se va afişa în acest caz pe ecran. script-ul trece imediat la blocul finally. aeval=eval(a).pow(3. Nu este vorba de o eroare de sintaxă ci de o eroare de referinţă. În cazul apariţiei unei erori. navigatorul afişează un mesaj de eroare. Nu uitaţi că şi dumneavoastră puteţi genera cu throw propriile erori. alert (”Aria rezervorului sferic cu raza de 3m este:”+aeval).40 este prezentat script-ul aplicaţiei.41 URLError Remarcă. JavaScript poate evalua expresia şi va afişa 113. Dacă eval() recunoaşte instrucţiunea JavaScript a=4*Math. Succes! . JavaScript încearcă să evalueze valoarea variabilei Droopy. 9 Dacă utilizatorul introduce ”a=4*Math. dacă utilizatorul introduce ”Droopy”.423 Remarci: 9 Try conţine instrucţiuni (cod1) JavaScript care ar putea fi sursa problemei.2)”. script-ul sare imediat în blocul catch transmiţându-i ca parametru obiectul Error generat. În figura 11.41). sau referinţă necunoscută sau invalidă Eroare de sintaxă Tipul de variabilă este greşit Utilizare greşită a URL-ului EvalError RangeError ReferenceError SyntaxError TypeError Figura 11. În caz contrar.

Dacă la crearea unui script. Foarte multe erori de logică sunt generate de: ƒ o proiectare defectuoasă a programului JavaScript ƒ confuzia între şirurile de caractere şi numere ƒ greşeli de plasare a instrucţiunilor JavaScript 4. W3C validator este un instrument de depanare a documentelor: ƒ (X)HTML ƒ XML ƒ JavaScript . În JavaScript una din erorile cele mai frecvente comise de începători este confuzia dintre: ƒ operatorul de atribuire şi operatorul de egalitate ƒ operatorul ”==” şi operatorul ”===” ƒ operatorul ”||” şi operatorul ”&&” 6. comiteţi greşeli de tastare. greşelile de punctuaţie care se comit la crearea unui script sunt: ƒ confuzia între majuscule şi minuscule ƒ paranteze orfeline ƒ inversarea literelor 3. Inserarea comentariilor în programele JavaScript contribuie la: ƒ crearea unor reflexe JavaScript ƒ eliminarea erorilor de sintax㠃 eliminarea erorilor de logică 5.424 JavaScript Temă Testaţi-vă cunoştinţele 1. De regulă. ce tip de eroare este generat? ƒ eroare de sintax㠃 eroare de logic㠃 eroare de intrare/ieşire 2. Consola JavaScript este: ƒ un instrument simplu pentru afişarea mesajelor de eroare cu Netscape ƒ un instrument simplu pentru afişarea mesajelor de eroare cu Internet Explorer ƒ un buton încastrat 7.

com/docs/manuals/jsref/objintro. Instrucţiunea throw generează: ƒ o eroare ƒ un tabel ƒ un formular 9. JavaScript recunoaşte următoarele tipuri de erori: ƒ EvalError ƒ SintaxError ƒ TypeError ƒ FormatError ƒ LogicalError Vizitaţi site-urile 9 http://developer.netscape.com/scripting/jsscript/default.htm 9 http://msdn.microsoft.425 8.htm .

DOM-ului (Document Object Model) care permit manipularea documentelor Web.Conversaţia 12 Crearea obiectelor personalizate ••••••••••••••••••••••••••••••••••••••••••••• În această conversaţie: f f f f f f f ••••••••••••••••••••••••••••••••••••••••••••• Utilizarea obiectelor personalizate pentru simplificarea script-urilor Definiţi un obiect Definiţi o metodă pentru un obiect Creaţi o instanţă a unui obiect Aplicaţii EXEMPLUL 12 JAVASCRIPT Temă Utilizarea obiectelor personalizate pentru simplificarea script-urilor Fără să greşim. uneori este necesar să facem apel la structuri mai sofisticate! Să presupunem că doriţi să creaţi un script care să gestioneze coordonatele persoanelor de contact (nume. Aceste obiecte sunt cele mai .. adresa site. ceea ce trebuie să recunoaştem este ceva nemaipomenit! Dacă variabilele şi matricile permit stocarea datelor sub diverse forme. putem afirma că aveţi deja o experienţă (un background) în utilizarea obiectelor predefinite ale limbajului JavaScript. Dar . Sunteţi de asemenea familiarizaţi cu obiectele frecvente în programarea JavaScript. adresa email) din activitatea dumneavoastră profesională. puteţi de asemenea să creaţi propriile dumneavoastră obiecte..

Figura 12.428 În situaţia în care utilizaţi variabile „normale” veţi fi obligat să definiţi o variabilă pentru fiecare coordonată a fiecărei persoane (pentru fiecare nume. Iată cum creăm în JavaScript o funcţie Constructor (Contact) cu trei parametri pentru iniţializarea noului obiect şi atribuirea proprietăţilor corespunzătoare. Pentru a putea utiliza obiectul. 9 email (adresa de email (personală)). adresă site şi adresă email. fiecare adresă site şi fiecare adresă email) ceea ce este foarte complicat! Utilizarea matricilor simplifică puţin lucrurile.1 este prezentat codul JavaScript al funcţiei Constructor.1 . va trebui mai întâi să creăm o funcţie Constructor care are rolul de a crea noi obiecte Contact. Fiecare obiect Contact conţine următoarele proprietăţi: 9 nume. Am decis să numim obiectul Contact. Definiţi un obiect Prima etapă în crearea unui obiect constă în a-i da un nume. metode pentru afişarea/manipularea informaţiilor conţinute. 9 site (adresa de site (personală)). Fiecare persoană este reprezentată printr-un obiect Contact care dispune de proprietăţile: nume. Puteţi adăuga după aceea obiectului Contact. dar nu este ideal! Obiectele (aici am vrut să ajungem!) permit stocarea informaţiilor bazei de date într-o manieră mult mai „logică”. În figura 12.

2 Remarci: 9 Funcţia afi•areContact afişează coordonatele de contact ale unei persoane. Iată cum definim metoda afi•areContact în funcţia Constructor Contact. În figura 12.429 Remarci: 9 Constructorul este o funcţie simplă care acceptă mai mulţi parametri ale căror valori sunt atribuite proprietăţilor obiectului. 9 Funcţia afi•areContact este utilizată ca metodă. În JavaScript. Puteţi utiliza această sintaxă din momentul în care funcţia afi•areContact a fost definită.2 este prezentat codul complet JavaScript al funcţiei Constructor. apoi asociaţi-i funcţia de prelucrare. Figura 12. 9 Instrucţiunea care a fost adăugată seamănă cu o definiţie a proprietăţii. definirea unei metode pentru un obiect se realizează în două etape: 9 Definiţi metoda în funcţia Constructor într-o linie de cod în care veţi atribui metodei un nume. Definiţi o metodă pentru un obiect Obiectele devin cu adevărat interesante şi comode atunci când ele sunt dotate cu metode. 9 Obiectul are acelaşi nume ca şi funcţia Contact. În figura 12. dar se referă la funcţia afi•areContact.3 este prezentat codul JavaScript al funcţiei afi•areContact. 9 Cuvântul cheie this se referă la obiectul curent. acela creat cu ajutorul funcţiei. Iată cum scriem în JavaScript funcţia de prelucrare afi•areContact asociată metodei cu acelaşi nume. 9 Scrieţi funcţia de prelucrare. . fără parametri! 9 Cuvântul cheie this se referă la obiectul curent.

Acest obiect (Droopy) este o instanţă a obiectului Contact. Figura 12. În figura 12. Cuvântul cheie this se referă la proprietăţile obiectului.4. Pentru a utiliza o definiţie a obiectului va trebui să creăm un nou obiect cu ajutorul cuvântului cheie new (vezi obiectele Array. Figura 12.4 Remarci: 9 Crearea unui obiect nu este o operaţie complicată. care conţine informaţii despre Droopy. Date. Tot ceea ce trebuie făcut este apelarea funcţiei Contact(). un nou obiect a fost creat. Creaţi o instanţă a unui obiect În continuare. care este funcţia de definire a obiectului.5 se prezintă o secvenţă de cod JavaScript care creează un obiect Contact vid (Romică) şi defineşte apoi proprietăţile sale. 9 În figura 12. String).430 Figura 12. şi indicarea coordonatelor în aceeaşi ordine ca în definiţie.3 Remarcă. vom utiliza definiţia obiectului pe care urmează să-l creăm.5 .4 se prezintă codul JavaScript care creează un nou obiect Contact numit Droopy. 9 Odată executată instrucţiunea din figura 12.

Indicaţie. Figura 12.6 Aplicaţii ‰ Creaţi un document (X)HTML care afişează în Internet Explorer lista de contact a trei persoane (vezi figura 12. Proprietăţile persoanei de contact Droopy sunt afişate ca în figura 12.6. Utilizaţi obiectul Contact.7).7 .431 Odată creată instanţa obiectului Contact cu ajutorul uneia din metodele prezentate. Figura 12. utilizaţi metoda afi•areContact pentru a afişa informaţiile corespunzătoare.

8 Remarcă. Un obiect asemănător poate stoca date care provin dintr-o bază de date externă care conţine mii de înregistrări. .432 În figura 12. Figura 12.8 este prezentat documentul XHTML complet în care s-a inserat script-ul aplicaţiei. În cadrul acestei aplicaţii baza de date utilizată are dimensiuni extrem de reduse. ‰ Modificaţi definiţia obiectului Contact pentru a include o proprietate adresa care permite stocarea adresei persoanei de contact. Modificaţi funcţia afi•areContact.

433 EXEMPLUL 12 JAVASCRIPT ‰ Definirea problemei Aplicaţia pe care urmează să o realizaţi în cadrul acestei ultime conversaţii (!) este o mică bază de date care conţine notele obţinute la mai multe materii. 9 rapoartele generate sunt de unul din următoarele tipuri: ƒ raport general – studenţii sunt afişaţi în ordine alfabetică (nume. Pentru gestionarea automată a acestor date. pentru a răspunde cerinţelor conducerii unei instituţii de învăţământ. ƒ identificarea studenţilor restanţieri pentru o materie selectată. prenume. 9 cererile de căutare în baza de date sunt: ƒ identificarea unui student şi afişarea notelor obţinute la toate materiile. vom folosi facilităţile JavaScript (tabelul pe parte de client). ‰ Cerinţe de prelucrare Se vor avea în vedere cerinţele de prelucrare prezentate mai jos: 9 studenţii sunt identificaţi prin: cod. • ordine descrescătoare a notelor. ƒ raport pe materii – pentru o materie selectată din lista de materii. denumire. prenume şi notele obţinute la toate materiile). . nume. 9 materiile de studiu sunt identificate prin: cod. ƒ raport restanţieri – pentru fiecare materie se afişează studenţii care nu au obţinut nota 5 de promovare. studenţii sunt listaţi în două moduri: • ordine alfabetică. 9 nota 0 (zero) semnifică absenţa studentului de la examen sau verificare. de către studenţii unei grupe.

denumirea materiei (şir de caractere). 9 student – conţine atributele: numele şi prenumele studentului. this. Prenume.9 } . Pentru aceasta va trebui să creaţi mai întâi lista cu note şi apoi să apelaţi metoda constructor (def_student) a obiectului student (vezi figura 12. var lista_stud=new Array().. Documentul (X)HTML va conţine informaţii despre două entităţi: 9 materie – conţine atributele: cod (numărul de identificare al materiei).10 .7. var note1=new Array(5.note){ this.note1). un şir de caractere ce reprezintă denumirea materiei..434 ‰ Proiectarea programului Crearea tabelelor de căutare Se vor utiliza obiecte personalizate care să simuleze o bază de date. Remarcă. } Figura 12.10). dar .Nume=Nume.Note=Note. din punct de vedere didactic este mult mai uşor de înţeles. Note) din figura 12. ƒ Note – vector de numere întregi reprezentând notele obţinute de student (dimensiunea vectorului de note trebuie să fie egală cu dimensiunea vectorului materii care defineşte numele materiilor de studiu).. notele obţinute la materiile de studiu. lista_stud[0]=new def_student(”Avram”.. A fost aleasă o soluţie simplificată care prezintă dezavantajul unei flexibilităţi reduse la modificarea numărului materiilor de studiu şi la adăugarea mai multor ani de studiu.6. Prenume – reprezintă numele şi prenumele studentului.Prenume. codul de identificare al materiei va fi indicele materiei iar elementele vectorului. Tabelul entităţi materii pe parte de client şi tabelul entităţi student pe parte de client se vor implementa după cum urmează: 9 tabelul materii – se va utiliza un vector şir de caractere. Figura 12. function def_student(Nume.”Nicolae”.10. this.Prenume=Prenume.9) şi creaţi instanţe de acest tip. 9 tabelul student – se va utiliza un vector de obiecte personalizate în care indicele vectorului va reprezenta numărul de identificare al studentului iar obiectul personalizat va fi format din două şiruri de caractere: ƒ Nume. Definiţi obiectul student (vezi metoda constructor. def_student (Nume.10).

12). . C•utare) cu ajutorul cărora utilizatorul poate selecta tipul de raport (General. Restan•ieri) şi tipul căutării (Dup• studen•i.11 Vom prezenta în cele ce urmează funcţiile celor patru cadre în care a fost împărţită fereastra browser-ului. Cadrul titlu Cadrul titlu afişează textul Intranet – Baza de Date cu Studen•i (vezi figura 12. Figura 12. Pentru a afişa simultan opţiunile de prelucrare. Se afişează două butoane radio (Rapoarte. Restan•ieri).14 se prezintă acelaşi cadru cu tipul prelucrării: C•UTARE.11). Pe Materii. Cadrul titlu Cadrul inputd Cadrul subrap Cadrul fraport Figura 12.13 se prezintă cadrul inputd al ferestrei interfeţei cu utilizatorul cu tipul prelucrării RAPOARTE iar în figura 12.435 Crearea interfeţei cu utilizatorul Interfaţa cu utilizatorul trebuie să asigure afişarea facilă a tuturor cerinţelor de prelucrare.12 Cadrul inputd Cadrul inputd afişează tipul prelucrării. În figura 12. criteriile şi rezultatele prelucrării cererilor de căutare se va folosi o fereastră cu mai multe (4) cadre (vezi figura 12.

12.15 . 12. 12.18. El este generat dinamic.17.13 Figura 12.436 Figura 12.16.14 Cadrul subrap Cadrul subrap este cadrul prin intermediul căruia se introduc datele necesare efectuării prelucrărilor cerute de utilizator prin selecţia unei opţiuni din cadrul inputd. În figurile 12.15.19 este prezentat conţinutul cadrului subrap pentru opţiunile RAPOARTE şi C•UTARE. 12. Figura 12.

18 .17 Figura 12.437 Figura 12.16 Figura 12.

16.15.438 Figura 12. Conţinutul acestuia este dinamic.18. fiind generat în funcţie de cererea de căutare selectată. Cadrul fraport Cadrul fraport este cadrul în care se afişează rezultatele prelucrărilor. Observaţi în figurile 12. În figura 12. 12.19 prezenţa butonului EXECUTĂ.19 Remarcă.20 . Figura 12.17.20 este prezentat cadrul fraport al ferestrei interfeţei cu utilizatorul pentru RAPORT GENERAL (Rapoarte → General. în cadrul inputd). 12. 12. 12.

22.optiune[1]=’Materii’ tiprap.22 . Astfel. Pseudocodul AFISRAP BEGIN Parametrii: t. Corespunzător selecţiei utilizatorului. În figura 12.18).21 este prezentat pseudocodul funcţiei afisrap().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. în cadrul subrap se vor modifica zonele de interacţiune cu utilizatorul. se gestionează evenimentul onChange care va executa funcţia afis_subopt.selectedIndex IF (raport[0]. dacă utilizatorul selectează generarea raportului general atunci cadrul subrap va afişa un buton pentru a lansa în execuţie prelucrarea (vezi figura 12. Acţionarea unuia din aceste butoane radio lansează în execuţie funcţia afisrap care modifică opţiunile listei tiprap.optiune[0]=’Student’ tiprap. Astfel.optiune[2]=’Restantieri’ IFAFIS ELSE tiprap.optiune[0]=’General’ tiprap. Cadrul inputd permite şi schimbarea tipului de prelucrare (raport sau c•utare) prin afişarea a două butoane radio prin care utilizatorul poate realiza selecţia.439 ‰ Crearea funcţiilor de prelucrare a datelor Aplicaţia poate genera trei rapoarte şi execută două cereri de căutare.21 AFISRAP END AFISRAP Selectarea unei opţiuni din lista tiprap va duce la afişarea în cadrul subrap a elementelor de interfaţă ce asigură introducerea informaţiilor necesare pentru fiecare tip de prelucrare şi lansarea în execuţie a prelucrării respective. Pseudocodul AFIS_SUBOPT AFIS_SUBOPT BEGIN IF1 CASE1 //determinarea indexului optiunii selectate ir=tiprap. Pseudocodul funcţiei afis_subopt() este prezentat în figura 12.valoare intreaga IFAFIS IF (t==0) //afisare tip raport //fixeaza trei optiuni in lista tiprap tiprap.optiune[1]=’Restantieri’ IFAFIS ENDIF Figura 12. Tipul raportului sau al căutării este selectat de utilizator prin intermediul cadrului inputd.

prenume FOR(j=0.WRITE materii[i] ENDFOR FOR(i=0. . iar lista sordine permite selecţia modului de ordonare al studenţilor: ordinea alfabetică sau ordinea dată de notele la materia respectivă.23 EXECUTARG Funcţia afis_subrap1 construieşte interfaţa cu utilizatorul pentru generarea raportului pe materii (figura 12.23).length. Interfaţa va fi afişată în frame-ul subrap şi conţine ca element de acţiune doar butonul Executa care prin apăsare va apela funcţia executaRG() care va afişa raportul general (vezi pseudocodul din figura 12.WRITE lista_stud[i].WRITE ’Nume prenume’ FOR(i=0.i++) subrap.i++) subrap.24 Interfaţa va fi afişată în frame-ul subrap şi conţine două liste de opţiuni şi butonul Executa.20).j++) 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 //afişarea studentilor din grupa subrap.i<materii. Figura 12.length.440 Funcţia afis_subrap0 construieşte interfaţa cu utilizatorul pentru prelucrarea datelor în cazul generării raportului general (figura 12.j<materii. Pseudocodul AFIS_SUBRAPO.Note[j] ENDFOR ENDFOR END FOR1 FOR1 FOR2 FOR3 FOR3 FOR2 Figura 12.24). Lista de opţiuni smaterii conţine lista materiilor.WRITE ’Raport General’ subrap.WRITE lista_stud[i].length.i<lista_stud.nume lista_stud[i]. EXECUTARG BEGIN //afişarea informaţiilor despre raport subrap.WRITE ’Raport General’ subrap.

vord va conţine indicii studenţilor din vectorul list_stud în ordinea descrescătoare a notelor. EXECUTARM AFIS_SUBRAP1 BEGIN //afişarea informaţiilor despre raport subrap. Pentru afişarea studenţilor în funcţie de nume.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. //aloca spatiu pentru vectorul vord new vord //se plaseaza ordinea initiala in vector FOR(i=0. ordinea este cea în care sunt păstrate în vectorul lista_stud informaţiile despre studenţi.length. iord=sordine. Astfel.25 Butonul Execut• prin apăsare va apela funcţia executaRM() care va afişa raportul pe materii (vezi figura 12. Afişarea studenţilor se va face în funcţie de ordinea impusă de vectorul asociat vord.selectedIndex. Algoritmul de sortare implementat este un algoritm clasic bubble-sort (vezi pseudocodul din figura 12. ENDFOR . vord[0] va conţine indicele elementului din lista_stud al studentului care are nota cea mai mare la materia respectivă. Pseudocodul AFIS_SUBRAP1.25).i<vord.26 FOR1 //afişarea raportului pe materii al studentilor din grupa subrap.i++) vord[i]=i.26). În cazul ordonării descrescătoare după note.WRITE ’Raport pe Materii’ //determina selectiile utilizatorului imat=smaterii.441 Figura 12.selectedIndex.

WRITE lista_stud[vord[i]].length. FOR(i=0. vord[i]=vord[i+1].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.nume subrap. ENDIF ENDFOR ENDWHILE // afiseaza studenti FOR(i=0. WHILE (neordonat) neordonat=false.Note[imat]< lista_stud[vord[i+1]].Note[imat] ENDFOR ENDIF END WHILE1 FOR2 IF3 IF3 FOR2 WHILE1 FOR3 FOR3 Figura 12.i<lista_stud. vord[i+1]=j.27).Note[imat]) j=vord[i].WRITE lista_stud[vord[i]].28). neordonat=true.i++) IF(lista_stud[vord[i]]. .WRITE lista_stud[i].i<lista_stud.26 IF2 (continuare) EXECUTARM Funcţia afis_subrap2 construieşte interfaţa cu utilizatorul pentru generarea raportului ce afişează studenţii restanţieri (figura12.length-1.i++) subrap.prenume subrap.27 Interfaţa conţine doar butonul Executa care prin apăsare va apela funcţia executaRR() care va afişa raportul studenţilor restanţieri (vezi figura 12. Figura 12.

29).WRITE "Numar restantieri:".nrest fraport. //determina numarul de restantieri FOR(i=0.WRITE "Materia:".443 Figura 12.length.j<materii.WRITE ’Raport Restantieri’ FOR(j=0.29 .Note[imat]<5) nrest++.j++) fraport.WRITE ’Raport Restantieri’ generaza html pentru forma f2 ce conţine butonul Executa IF (clic pe butonul Executa) DO EXECUTARR ENDIF //afişarea raportului restantieri pe materii subrap.indicele materiei nrest=0.WRITE "NR. ENDIF ENDFOR IF(nrest>0) //afiseaza in tabel studentii restantieri fraport. DO afis_restantieri(j).materii[j]. ENDFOR END Parametrii imat.i<lista_stud.28 Pentru afişarea studenţilor pe materii se apelează funcţia afis_restantieri care are ca parametru indicele materiei ce urmează a fi prelucrată (vezi pseudocodul din figura 12. Nume Prenume Nota IF1 IF1 AFIS_SUBRAP2 END EXECUTARR BEGIN FOR1 FOR1 EXECUTARR AFIS_RESTANTIERI BEGIN FOR2 IFF IFF FOR2 IF2 Figura 12.length.i++) IF (lista_stud[i]. Pseudocodul AFIS_SUBRAP2 AFIS_SUBRAP2 BEGIN //afişarea informaţiilor despre raport subrap.

31 IF2 .WRITE ENDIF ENDIF ENDFOR ELSE fraport. prenume (figura 12. pn=spnume.i<lista_stud.Note[imat] k=0.Note[imat]<5) fraport. FOR(i=0. Pseudocodul AFIS_SUBRAP3. lista_stud[i].30 Interfaţa conţine două zone de editare (Nume student. fraport. Prin acţionarea butonului Executa se va apela funcţia executaCS() (vezi pseudocodul prezentat în figura 12.30).WRITE"absent" ELSE fraport.Nume fraport.WRITE ’Cautare rezultate student’ generaza html pentru forma f2 IF (clic pe butonul Executa) DO EXECUTACS ENDIF //afişarea rezultatelor unui student //transferul datelor introduse in zonele de editare sn=snume.WRITE i+1. Prenume student) pentru specificarea numelui.29 IF2 ENDIF (continuare) AFIS_RESTANTIERI END Funcţia afis_subrap3 construieşte interfaţa cu utilizatorul pentru căutarea unui student după nume.WRITE "Nu esista restantieri" IF4 IF3 FOR3 IF2 Figura 12.Prenume IF(lista_stud[i].WRITE"Cautare rezultate student" IF(sn!="") IF1 IF1 AFIS_SUBRAP3 END EXECUTACS BEGIN Figura 12.value. respectiv prenumelui studentului căutat şi butonul Executa.value.Note[imat]==0) fraport.444 FOR3 IF3 IF4 IF4 lista_stud[i].length.32). EXECUTACS AFIS_SUBRAP3 BEGIN //afişarea informaţiilor despre raport subrap.WRITE lista_stud[i].31) care va afişa rezultatele studentului dorit sau un mesaj de eroare dacă acesta nu există în baza de date (vezi figura 12. Figura 12.i++) IF(lista_stud[i].

WRITE materii[i] FOR(i=0.Nume fraport.Note[j] ENDFOR ENDIF ENDFOR ENDFOR ELSE fraport.j++) fraport.i<lista_stud.Prenume FOR(j=0. 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.WRITE lista_stud[i].i++) IF((lista_stud[i].Prenume==pn)) fraport.pn ENDIF ELSE //determina numarul de studenti cu numele sn nr=0.length.WRITE "Numar Studenti:"." Prenumele:".WRITE "Nu exista nici un student cu numele:".j<materii.length.WRITE i+1.Nume==sn) fraport.WRITE i+1.Prenume==pn)) Nr=nr+1 ENDIF ENDFOR IF(nr>0) fraport.length.i<lista_stud.Nume.WRITE materii[i] ENDFOR FOR(i=0.i<materii. FOR(i=0.i<lista_stud.Prenume FOR(j=0.i++) IF(lista_stud[i].WRITE lista_stud[i].Note[j] ENDFOR ENDIF ENDFOR ELSE fraport.445 IF3 IF(pn!="") // determina numarul de studenti ce au numele // si prenumele specificat nr=0. FOR(i=0. Nume Prenume " FOR(i=0.i<materii.Nume==sn)&& (lista_stud[i].length.i<lista_stud.WRITE lista_stud[i].i++) fraport.j++) fraport. Nume Prenume FOR(i=0.length.length.i++) fraport.WRITE "NR.j<materii.length.i++) IF((lista_stud[i].WRITE "Nu exista nici un student cu numele:". sn.WRITE "NR. fraport.Nume==sn)&& (lista_stud[i]. lista_stud[i].length.31 IF3 ENDIF (continuare) IF2 EXECUTACS END .i++) IF(lista_stud[i]. lista_stud[i].WRITE lista_stud[i].nr fraport.Nume==sn) nr=nr+1 ENDIF ENDFOR IF(nr>0) fraport.

Pseudocodul AFIS_SUBRAP4. (smaterii).35).34).33 Interfaţa conţine o listă de opţiuni.33). EXECUTACR .32 Funcţia afis_subrap4 construieşte interfaţa cu utilizatorul pentru generarea afişării studenţilor restanţieri la o singură materie(figura 12.34 Pentru afişarea studenţilor restanţieri la o materie se apelează funcţia afis_restantieri pe care am prezentat-o anterior (vezi pseudocodul prezentat în figura 12. pentru selecţia materiei dorite şi butonul Executa care prin apăsare va apela funcţia executaCR() ce va afişa raportul studenţilor restanţieri la materia respectivă(vezi figura 12. Figura 12. Figura 12.446 sau Figura 12.

Prenume. //DEFINIREA CONSTRUCTORULUI OBIECTULUI PERSONALIZAT function def_student(Nume.36. note1). note1).7.8. note1=new Array(6. IF1 IF1 AFIS_SUBRAP4 EXECUTACR BEGIN Figura 12.447 AFIS_SUBRAP4 BEGIN //afişarea informaţiilor despre raport subrap. //CREAREA TABELULUI DE STUDENTI var lista_stud=new Array()."Ion"."Informatica".WRITE materii[imat] DO afis_restantieri(imat). 12. lista_stud[4]=new def_student("Ciufu".7.8). lista_stud[2]=new def_student("Botea".6.10).38."Catalin".8.7.5). lista_stud[3]=new def_student("Cazacu".Prenume=Prenume. note1). lista_stud[0]=new def_student("Avram".9.selectedIndex. this.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.37.0.39. note1). note1=new Array(4. pentru fiecare cadru în parte.10.7.10). 12. this. "Fizica".WRITE ’CAUTARE RESTANTIERI LA MATERIA:’ subrap. Codul HTML pentru interfaţa 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".8). subrap. note1).7."Marin". lista_stud[1]=new def_student("Berbecaru". Figura 12.Nume=Nume. } //CREEAZA LISTA DE STUDENTI var note1=new Array(5. documentele HTML complete. "Analiza Functionala"). 12."Chimie".Note){ this."Gheorge".40 sunt prezentate.5.36 note1=new Array(9. .Note=Note.35 EXECUTACR END ‰ Codificarea în limbajul JavaScript În figurile 12.10."Nicolae". 12. note1=new Array(10.8.9.

note1). note1).36 fraport. note1).7.0."Eliza".5.writeln("<center><table border=1 bgcolor=#efefff><tr>"). note1). note1=new Array(9. note1). lista_stud[21]=new def_student("Ungureanu". lista_stud[22]=new def_student("Zaharescu"."Danut".8.8.7. lista_stud[6]=new def_student("Dinu".9. i=s. note1=new Array(7. lista_stud[11]=new def_student("Nastase". note1=new Array(9."Ion Mihut".8. lista_stud[20]=new def_student("Trifu".8. note1=new Array(6. note1). note1).5."Mihai Ioan". note1=new Array(9."Mihaela".8). note1=new Array(6.448 note1=new Array(8. note1).5.5.writeln("<center><p><b>RAPORT GENERAL </b></p></center>").6. } return s.5).5. Figura 12. note1=new Array(4. note1).8.6.8.9.8.4.5.document. (continuare) fraport.7)."Daniel". lista_stud[12]=new def_student("Neagu". lista_stud[9]=new def_student("Ionescu". note1=new Array(8.6.5.9). //AFISARE REZULTATE PENTRU RAPORT GENERAL fraport.document. note1).8.9.document.0.5. note1).6. note1=new Array(6.5).0.document."). lista_stud[13]=new def_student("Oprea". note1).4."Petre". if(i!=-1){ s=s. lista_stud[17]=new def_student("Savu".7.9). note1=new Array(7.6."Dragos".8)."Stelian"."Tudor". note1=new Array(5. lista_stud[10]=new def_student("Mihail". lista_stud[14]=new def_student("Panait". note1=new Array(5."Magdalena".7).5. lista_stud[7]=new def_student("Dobre". fraport."Gabriel Andrei".8). note1). note1).writeln("<td bgcolor=#8bd3e9><b>NR.8. lista_stud[15]=new def_student("Patrichi"."Gheorghe".J.indexOf(". function rotunjeste(x) { var s=""+x.8.8). note1).4.6.9. note1).K.7.4."Mihaela Elena". } //FUNCTIA CARE REALIZEAZA RAPORTUL GENERAL function executaRG(){ VAR I. lista_stud[18]=new def_student("Stanescu". note1=new Array(6.6. lista_stud[16]=new def_student("Radoiu".5.6. note1).6).</b>".7.open(). note1=new Array(7."Alin".4).5). note1=new Array(4.6). note1=new Array(8. lista_stud[5]=new def_student("Codescu"."Stefan". . lista_stud[8]=new def_student("Georgescu".4. note1=new Array(8.5.5. note1).5).substring(0.6).8.6).5.8.6.6. lista_stud[19]=new def_student("Stoian"."Constanta"."Ludovic".4.i+3).7.7).

} //FUNCTIA CE REALIZEAZA RAPORTUL PE MATERII function executaRM(){ var i.length.document. for(i=0.document.document.document.Prenume+"</b></td>"). "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>"). if(iord==1) { //ORDONEAZA VECTORUL DUPA NOTE neordonat=true. vord[i]=vord[i+1].i++) { fraport.writeln("<tr><td bgcolor="+bgc+"><b>"+k+" </b></td>").i++) if(lista_stud[vord[i]]. fraport.length.fraport.i<lista_stud.writeln("<td bgcolor=#8bd3e9><b>"+ materii[i]+" </b></td>").length.i++)vord[i]=i.} fraport.j.selectedIndex.document.document.document." </b></p></center>"). } } } fraport.document. if(i%2){bgc="#c0e7ed". while (neordonat) { neordonat=false. var iord=subrap.writeln("<center><table border=1 bgcolor=#efefff><tr>").i<lista_stud. fraport. fraport.writeln("<td bgcolor=#8bd3e9><b> Nota </b></td>").selectedIndex.j<materii.Note[imat]< lista_stud[vord[i+1]].smaterii.sordine. if(i%2){bgc="#c0e7ed".document.449 "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>").document.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].length).i<materii.writeln("<td bgcolor=#8bd3e9><b>NR.i++) { k=i+1. //AFISARE REZULTATE PENTRU RAPORT MATERIE var imat=subrap.k.</b>". } for(i=0.document.f2.Nume+" "+lista_stud[i]. for(i=0.j++) {fraport. (continuare) fraport.document. for(j=0.document. fraport.Note[imat]) { j=vord[i].Note[imat]+" </b></td>"). } . fraport. for(i=0. } } fraport.length.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].length-1.}else{bgc="#d9f0f4". vord=new Array(lista_stud. neordonat=true.f2.i<lista_stud.i<lista_stud.} fraport. for(i=0.writeln("<tr><td bgcolor="+bgc+"><b>"+k+" </b></td>").Note[j]+" </b></td>"). vord[i+1]=j.document.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[vord[i]].Nume+" Figura 12.writeln("<center><p><b>RAPORT NOTE MATERIA:").Prenume+"</b></td>").open(). fraport.close().writeln("<td bgcolor="+bgc+"><b>"+lista_stud[vord[i]].writeln(materii[imat].36 "+lista_stud[vord[i]].document.writeln("</tr></table>").}else{bgc="#d9f0f4".i++) { k=i+1.length. fraport.

. k=0.i<lista_stud.document.writeln("</tr></table>")." </b></p></center>").Nume+" "+lista_stud[i].nrest.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i]. else fraport.k.Note[imat]+" </b></td>"). } fraport. fraport. fraport. } //RAPORT RESTANTIERI function executaRR(){ var i.length.length.document.}else{bgc="#d9f0f4".i++) if(lista_stud[i].document. fraport.j.document. var nrest.writeln("</tr></table>").document.i<lista_stud.document.j<materii.nrest.document.Note[imat]<5)nrest++.document. if(nrest>0) { //AFISEAZA IN TABEL STUDENTII RESTANTIERI fraport. } Figura 12.writeln("<td bgcolor="+bgc+"><b> absent </b></td>"). for(j=0.writeln("<center><p><b>Materia:".} k++.document. "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>").document.Prenume+"</b></td>").i++) if(lista_stud[i].writeln("<center>Numar restantieri:". } else fraport.writeln("<td bgcolor=#8bd3e9><b> Nota </b></td>").k. }//de la for j fraport.j.open().document.close().document.writeln("<td bgcolor=#8bd3e9><b>NR.nr.materii[j].length.36 //CAUTARE DUPA STUDENT (continuare) function executaCS(){ var i.document. fraport. fraport. fraport.j.Note[imat]==0) fraport.writeln("<center><p><b>RAPORT RESTANTIERI </b></p></center>").document."<br></center>").close().writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i]. if(lista_stud[i].j++){ fraport.writeln("<center><table border=1 bgcolor=#efefff><tr>"). afis_restantieri(j). for(i=0.writeln("<p> Nu esista restantieri").</b>".writeln("<tr><td bgcolor="+bgc+"><b>"+k+" </b></td>"). fraport. fraport.Note[imat]<5) { if(k%2){bgc="#c0e7ed".450 fraport.k. //DETERMINA NUMARUL DE RESTANTIERI for(i=0. } // FUNCTIA CE REALIZEAZA AFISAREA RESTANTIERILOR LA O MATERIE function afis_restantieri(imat){ var i.document.document. nrest=0.

j++) fraport.Nume==sn) { if(k%2)bgc="#c0e7ed".Prenume+"</b></td>").Nume+" "+lista_stud[i].document. for(i=0.i<lista_stud.value.document.Prenume==pn))nr++.document. "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>"). fraport.document.Note[j]+" </b></td>").length.open(). if(nr>0) { fraport. Figura 12.Prenume==pn)) { if(k%2) bgc="#c0e7ed". sn.snume.length.i++) fraport.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].Nume+" "+lista_stud[i].writeln("<center><table border=1 bgcolor=#efefff><tr>").document.length.writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i]. for(i=0.writeln("<center>Numar Studenti:". fraport.document.Nume==sn)&&(lista_stud[i].writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].451 var sn=subrap. fraport.i++) if((lista_stud[i].writeln("<td bgcolor="+bgc+"><b>"+lista_stud[i].writeln("<td bgcolor=#8bd3e9><b>"+ materii[i]+" </b></td>"). for(i=0.length.i<materii.i++) if(lista_stud[i].36 for(j=0.j++) (continuare) fraport.writeln("<tr><td bgcolor="+bgc+"><b>"+k+" </b></td>").f2.document.i<lista_stud.i++) fraport.document. k=0. .document.spnume. var pn=subrap.writeln("</tr></table>").writeln("<td bgcolor=#8bd3e9><b>NR.document.document. } else { //DETERMINA NUMARUL DE STUDENTI CU NUMELE SN nr=0.i++) if((lista_stud[i].i<materii.length.document. if(nr>0) { fraport. for(i=0. for(i=0.i++) if(lista_stud[i]. "<td bgcolor=#8bd3e9><b>Nume Prenume </b></td>"). fraport.document. } else fraport." Prenumele:".Nume==sn)nr++. if(sn!=""){ if(pn!="") { nr=0.writeln("<tr><td bgcolor="+bgc+"><b>"+k+" </b></td>"). k=0.else bgc="#d9f0f4".</b>". fraport.document.writeln("<td bgcolor=#8bd3e9><b>NR.length. } fraport.writeln("<center><p><b>Cautare rezultate student </b></p></center>").</b>". for(j=0.i<lista_stud.writeln("<center><table border=1 bgcolor=#efefff><tr>").writeln("<center><p>Nu exista nici un student cu numele:".Note[j]+" </b></td>").pn). fraport. k++.length. fraport.document.f2. fraport.document. fraport. k++.j<materii.writeln("<td bgcolor=#8bd3e9><b>"+ materii[i]+" </b></td>").length.value.document.Nume==sn)&&(lista_stud[i].Prenume+"</b></td>").j<materii.i<lista_stud. else bgc="#d9f0f4".nr). for(i=0.

document.j.Baza de Date cu Studenti</font> </center> </body> Figura 12. sn).30%. } // --> </script> </head> <frameset rows="10%. var imat=subrap.document.37 </html> Codul HTML pentru cadrul inputd .html" name="inputd"> <frame src="btiprap0.document.f2. } }// if sn fraport. fraport.document. fraport. fraport. } else fraport.document.html" name="titlu"> <frameset cols="30%.60%"> <frame scrolling="no" noresize src="btitlu.writeln("<center><p><b>CAUTARE RESTANTIERI LA MATERIA: ").selectedIndex.writeln("<center><p>Nu exista nici un student cu numele:".document.36 <frame src="bsit.writeln("</tr></table>"). fraport.html" name="fraport"> (continuare) </frameset> </html> Codul HTML pentru cadrul titlu <html> <head> </head> <body> <center> <font size=+3 color=green> Intranet.smaterii.close().html" name="subrap"> </frameset> Figura 12.452 } fraport.k.document." </b></p></center>"). } // CAUTAREA RESTANTIERILOR LA O MATERIE function executaCR(){ var i. afis_restantieri(imat). var nrest.close().writeln(materii[imat].open().70%"> <frame scrolling="no" noresize src="tipraport.

document.close().document.\">").writeln("<option>Alfabetica studenti</option>").document.writeln("<p>Afiseaza Studentii Restantieri din Grupa</p>").i<parent.subrap. parent. //AFISAREA DATELOR GENERALE parent.parent.subrap.close().writeln("</form>"). parent.writeln("<form name=\"f2\">").subrap.document.subrap.document.writeln("</select>").writeln("<font color=green size=+1>Raport general</font>"). parent.subrap. parent. parent.document.38 onClick=\"parent.subrap.subrap. parent.subrap.\">").writeln("<font color=green size=+1>Raport Restantieri</font>").document.document.writeln("<p>Afiseaza toata grupa si toate notele</p>").writeln("<p><input type=\"button\" value=\"Executa\" Figura 12. parent.document.453 <html> <head> <script language="JavaScript"> <!--var sel=0.document.subrap. } function afis_subrap2(){ parent. parent. parent.writeln(" <td> Ordonare rezultate dupa</td></tr>").subrap.open(). parent.document.writeln("</form>").subrap. parent.document. parent.document.document.writeln("<option> Descrescatoare Note</option>").executaRM().document.subrap.writeln("<option>".materii[i]. parent.materii. parent.subrap.subrap.executaRG(). parent. //FORMAREA ELEMENTELOR DE INTERFATA -BUTONUL DE EXECUTIE AL RAPORTULUI parent.subrap.writeln("</select>").subrap.subrap.open().document. parent. parent.executaRR().writeln("<p><input type=\"button\" value=\"Executa\" onClick=\"parent.i++) parent.document.document.document.document.subrap.open(). parent.document.subrap. parent. //FORMA F2 DE INTERFATA CU UTILIZATORUL parent. for(i=0.subrap.subrap. parent.subrap.document.document. parent.writeln("<p>").subrap.subrap.\">"). parent.subrap.writeln("<hr>").writeln("<font color=green size=+1>Raport pe Materii</font>").writeln("</form>").document.document.writeln("<hr>").writeln("</table>").document.document.writeln("<td><select size=\"1\" name=\"sordine\">").document. .subrap."</option>"). parent.writeln("<hr>").writeln("<tr><td colspan=2><input type=\"button\" value=\"Executa\" onClick=\"parent.subrap.subrap.document. parent.writeln("<p>").subrap. parent.document. function afis_subrap0(){ parent.subrap.subrap.writeln("<tr><td><select size=\"1\" name=\"smaterii\">").document. parent.length.document.writeln("<form name=\"f2\">"). parent.document.subrap.writeln("<table border=\"0\"><tr><td>Selecteaza materia").writeln("<form name=\"f2\">"). } function afis_subrap1(){ parent.subrap.document.subrap.

afis_subopt(this).subrap. } Figura 12.document.\">"). f1. f1. parent.writeln("</table>"). parent.options[1].document.options[1].subrap.close(). parent.subrap.subrap.tiprap.454 parent.close().\">").options[2]. parent.document.writeln("<option>".tiprap.writeln("<form name=\"f2\">"). parent.writeln("<p>").subrap.writeln("<hr>").executaCR().document.open().open().parent.document.subrap.writeln("<tr><td colspan=2><input type=\"button\" value=\"Executa\" onClick=\"parent.document.subrap.writeln("<form name=\"f2\">"). parent.subrap.subrap. parent.document.document.subrap.writeln("<font color=green size=+1>Cautare Restantieri la o Materie</font>"). parent.subrap. parent.i<parent. parent.subrap.document. parent.tiprap. parent. } function afis_subrap3(){ parent. parent.document.subrap. parent.subrap.writeln("<tr><td>Prenume student:"). parent. parent.subrap. parent.materii.document.document.document.text ="Restantieri".document.i++) parent. (continuare) } .writeln("</form>").document. } function afisrap(t) { if(t==0) { f1. parent.subrap.tiprap.document.options[2].writeln("<tr><td colspan=2><input type=\"button\" value=\"Executa\" onClick=\"parent. parent.text ="". } function afis_subrap4(){ parent.writeln("</select>").text ="Pe Materii".subrap.document.subrap.tiprap.document.options[0].subrap. } else { f1.document.writeln("<table border=\"0\"><tr><td>Selecteaza materia"). parent.text ="Dupa Student".close().writeln("<font color=green size=+1>Cautare Rezultate Student</font>").38 f1.writeln("<td><input type=\"text\" name=\"snume\" size=\"20\">"). for(i=0.subrap.document. f1.materii[i].document.text ="General".subrap.document.executaCS(). f1.text ="Restantieri".writeln("</form>").writeln("<td><input type=\"text\" name=\"spnume\" size=\"20\">").writeln("</table>"). parent.selectedIndex=0.subrap.options[0].subrap.document.subrap.length.subrap.document.writeln("<hr>").document.document. parent.subrap.writeln("<table border=\"0\"><tr><td>Nume student:"). parent.subrap."</option>").tiprap.writeln("</td></tr>").document.writeln("<tr><td><select size=\"1\" name=\"smaterii\">").tiprap.

break.selectedIndex. case 2: afis_subrap2().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. break.455 function afis_subopt(t){ var ir=f1.checked) {afisrap(‚0’)}” > <b>RAPOARTE</b> <td> <input type=”radio” name=”raport” value=”1” onClick=”if (this. break. } else { // ESTE SELECTAT CAUTARE switch(ir) { case 0: afis_subrap3().status=”Tip Cautare”. if(f1. case 1: afis_subrap4(). } } // Æ </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.38 </form> (continuare) </body> </html> . } window. case 1: afis_subrap1(). break.raport[0].status="Tip Raport".tiprap. } window.checked) { // ESTE SELECTAT RAPORT switch(ir) { case 0: afis_subrap0().

39 </html> Codul HTML pentru cadrul fraport <html> <head> </head> <body> Figura 12. Cum creaţi matrici de obiecte personalizate? 3.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. Care sunt navigatoarele care recunosc obiectele personalizate? 4. Cum creaţi obiecte fiu personalizate. Care este diferenţa dintre o funcţie constructor şi o funcţie ordinară? . ƒ object. Exemple. Care este cuvântul cheie JavaScript care permite crearea unei instanţe a unui obiect: ƒ instance. ƒ nici a. ƒ new. 2. 6.executaRG(). ƒ script curent. Care este semnificaţia cuvântului cheie this? ƒ obiect curent. nici b."> </form> </body> Figura 12.40 <h3>Rezultatele studentilor</h3></body> </html> JavaScript Testaţi-vă cunoştinţele Temă 1. 5.

com 9 http://hotwired. Cum puteţi avea acces la obiectele pe care le-aţi creat? 8.databasejournal.com/webmonkey/programing . Care sunt etapele pe care trebuie să le parcurgeţi pentru a defini o metodă pentru un obiect personalizat? Vizitaţi site-urile 9 http://www.lycos.wdvl.com 9 http://msdn. Care este diferenţa dintre o metodă şi o funcţie? 9.457 7.microsoft.com/library 9 http://www.

Floarea Năstase. 2 volume. Disbrow. JavaScript Web Tr@ining. 2002 12. Campus Press. Paris. traducere de Cora Radulian şi Dan Pavelescu.BIBLIOGRAFIE 1. EM-Eyrolles. Tehnologia aplicaţiilor Web (XML-DOM-ASP). 2003 Cédric Nilly. R. 2002 10. Pavel Năstase. Liviu Dumitraşcu. OEM-Eyrolles. Editura Universităţii din Ploieşti. MicroApplication. JavaScript pour les nuls. JavaScript. BASIC conversând cu calculatorul. Student Edition. 2003 . Editions First Interactive. 9. Aide-mémoire JavaScript. Învăţăm . Paris. Editura Economică. e-Poche. 6. OEM. Michel Drewfus. 2002 Emily A. 2. JavaScript. 2002 Jean-Paul Mesters. 2003 Jean-Christophe Gigniac. Allen Wyke. Editura Universităţii din Ploieşti. Jean-Christophe Gigniac. 2001. 2003 14.5. Web Site Design (U234). 1989 11. JavaScript 1. 5. Richard Wagner. 2002 Mike Robertshaw. Bucureşti Jean-Paul Mesters. (X)HTML. JavaScript. 2003 Michael Moncur. HTML 4. Editura Teora. Liviu Dumitraşcu.. 8. XML. Paris. The Open University of Hong Kong. 2002 Steven W. Paris. Paris.. Exercices et corriges. Cédric Nilly. JavaScript. Paris. 2003 13. Liviu Dumitraşcu. 3. 2003 15. Paris. Paris. Collection L’Atelier. Editura Tehnică. Vander Veer. Dreamweaver MX. Liviu Dumitraşcu. CampusPress. 7. Editura Universităţii din Ploieşti. 4.

Sign up to vote on this title
UsefulNot useful