CUPRINS> Obiectele interne String, Array INTRO
INAPOI INAINTE


În această conversație:
Obiectele limbajului JavaScript. Prezentare generală
Obiectele interne
Obiectul String. Aplicații
Constructorul String()
Obiectul Array. Aplicații
Constructorul Array()
EXEMPLUL 4 JAVASCRIPT
Temă


 
  Obiectele limbajului JavaScript. Prezentare generală    
     

După cum ați putut constata, variabilele din programele pe care le-ați realizat până acum servesc la stocarea valorilor: numerice, caracter, șir de caractere, booleene etc.
În egală măsură, JavaScript permite și gestionarea obiectelor.
Obiectele JavaScript sunt de trei tipuri:
– Obiecte interne (integrate) – fac parte din limbajul JavaScript.
– Obiectele navigatorului – nu fac parte din limbajul JavaScript, dar sunt recunoscute de navigatoare.
– Obiecte personalizate – obiecte create de utilizator.

top
 
  Obiectele interne    
     

Cu trei din obiectele interne ale limbajului JavaScript, dumneavoastră ați făcut deja cunoștință: Math care este un obiect predefinit JavaScript și cuprinde numeroase constante și funcții; Number și Boolean (vezi Conversația 2).
Lista completă a obiectelor interne (integrate) ale limbajului JavaScript este prezentată (în ordine alfabetică) în figura 4.1.

Figura 4.1
Obiect intern
Descriere
Arguments Reprezinta (sub forma unei matrici) valoarea argumentelor transmise unei functii.
Array
 matrice
Boolean Contine valorile: TRUE (adevarat) sau FALSE (fals).
Date Obiect predefinit JavaScript care permite manipularea orelor si a datelor calendaristice.
Function Numele de obiect al unui obiect Function este considerat ca o variabila reprezentând valoarea curenta a functiei create cu
new Function(), în timp ce numele unei functii JavaScript standard nu este o variabila, ci doar numele unei functii.
Math Obiect predefinit JavaScript care contine mai multe functii si constante matematice.
Number Faciliteaza gestiunea numerelor.
Object Obiect JavaScript din care deriva toate celelalte obiecte.
RegExp Obiect predefinit JavaScript dedicat expresiilor regulate.
String Furnizeaza suportul pentru manipularea si prelucrarea sirurilor de caractere.

top
 
  Obiectul String. Aplicații    
     

JavaScript stochează șirurile de caractere ca obiecte String.

Fișa obiectului String este prezentată în figura 4.2.
Figura 4.2
Fisa obiectului String
Cum se creeaza obiectul? Constructorul String()
Proprietati:
 length
Metode: anchor(), big(), blink(), bold(), charAt(), charCodeAt(), concat(), fixed(), fontcolor(), fontsize(), fromCharCode(), indexOf(), italics(), lastindexOf(), link(), match(), replace(), search(), slice(), small(), split(), strike(), sub(), substr(), substring(), sup(), toLowerCase(), toString(), toUpperCase()
Gestionarii de evenimente: -

top
 
  Constructorul String()    
     

Constructorul String() creează un nou șir de caractere.

Constructorul String() este prezentat în detaliu în figura 4.3.
Figura 4.3
 
Constructor
 Sintaxa
String() variabila=new String()
variabila=new String(sir)
variabila=sir
Descriere Se poate crea un sir de caractere vid sau transmitând ca argument constructorului sirul de caractere care va contine noul obiect String. Crearea sirurilor de caractere este de cele mai multe ori implicita.
Constructorul String() poate fi de asemenea utilizat ca functie. În acest caz el converteste valoarea în sir de caractere. Daca nici o valoare nu este transmisa functiei, atunci acesta returneaza un sir vid.
Exemplu <script>
   //creare implicita a sirurilor de caractere
   anotimp="toamna";
   celebrul="702";
   //String() utilizat ca functie
   a=7;
   b=FALSE;
   document.write(String(a)+"<br />");
   document.write(String(b)+"<br />");
</script>

Proprietățile obiectului String

Proprietățile obiectului String sunt prezentate în detaliu în figura 4.4.
Figura 4.4
 
Proprietate
 Sintaxa
length sir.length
Descriere Contine lungimea sirului de caractere.
Exemplu <script>
    demo_sir="Învatati sa priviti dincolo de aparente!";
    lungime=demo_sir.length;
    //afiseaza 40
</script>

Remarcă

Un obiect String (scrieți S cu majusculă) este diferit de datele (șir de caractere) pe care le conține.
Metodele obiectului String

Metodele obiectului String pot fi clasificate după cum urmează:

– Metode pentru formatarea șirurilor de caractere – big(), blink(), bold(), fontcolor(), fontsize(), italics(), small(), strike(), sub(), sup().
– Metode pentru manipularea șirurilor de caractere – anchor(), charAt(), charCodeAt(), concat(), fixed(), fromCharCode(), indexOf(), lastIndexOf(), link(), match(), replace(), search(), slice(), split(), substr(), substring(), toLowerCase(), toString(), toUpperCase().

Metode pentru formatarea șirurilor de caractere

Metodele obiectului String pentru formatarea șirurilor de caractere sunt prezentate în detaliu în figura 4.5.
Figura 4.5
 
Metode
 Sintaxa
big() sir.big()
Descriere Încadreaza un sir de caractere cu tag-urile <big>...</big>.
Exemplu <script>
   demo_sir="Învatati sa priviti dincolo de aparente!";
   nou_demo_sir=demo_sir.big();
   document.write(nou_demo_sir);
</script>
  blink() sir.blink()
Descriere Încadreaza un sir de caractere cu tag-urile <blink>...</blink>.
Exemplu <script>
   demo_sir="Învatati sa priviti dincolo de aparente!";
   nou_demo_sir=demo_sir.blink();
   document.write(nou_demo_sir);
</script>
  bold() sir.bold()
Descriere Încadreaza un sir de caractere cu tag-urile <bold>...</bold>.
Exemplu <script>
   demo_sir= "Învatati sa priviti dincolo de aparente!";
   nou_demo_sir=demo_sir.bold();
   document.write(nou_demo_sir);
</script>
  fontcolor() sir.fontcolor(sir)
Descriere Atribuie sirului de caractere culoarea indicata în tag-ul <font> de atributul color.
Exemplu <script>
   demo_sir= "Învatati sa priviti dincolo de aparente!";
   nou_demo_sir=demo_sir.fontcolor("#FF0000");
   document.write(nou_demo_sir);
</script>
  fontsize() sir.fontsize(Valoare)
Descriere Atribuie sirului de caractere dimensiunea indicata cu tag-ul <font> de atributul size.
Exemplu <script>
   demo_sir= "Învatati sa priviti dincolo de aparente!";
   nou_demo_sir=demo_sir.fontsize(4);
   document.write(nou_demo_sir);
</script>
  italics() sir.italics(sir)
Descriere Încadreaza un sir de caractere cu tag-urile <i>...</i>.
Exemplu <script>
   demo_sir= "Învatati sa priviti dincolo de aparente!";
   nou_demo_sir=demo_sir.italics();
   document.write(nou_demo_sir);
</script>
  small() sir.small(sir)
Descriere Încadreaza un sir de caractere cu tag-urile <small>...</small>.
Exemplu <script>
   demo_sir= "Învatati sa priviti dincolo de aparente!";
   nou_demo_sir=demo_sir.small();
   document.write(nou_demo_sir);
</script>
  strike() sir.strike()
Descriere Încadreaza un sir de caractere cu tag-urile <strike>...</strike>.
Exemplu <script>
   demo_sir= "Învatati sa priviti dincolo de aparente!";
   nou_demo_sir=demo_sir.strike();
   document.write(nou_demo_sir);
</script>
  sub() sir.sub()
Descriere Încadreaza un sir de caractere cu tag-urile <sub>...</sub>.
  sup() sir.sup()
Descriere Încadreaza un sir de caractere cu tag-urile <sup>...</sup>.

Metode pentru manipularea șirurilor de caractere

Metodele obiectului String pentru manipularea șirurilor de caractere sunt prezentate în detaliu în figura 4.6.
Figura 4.6
 
Metode
 Sintaxa
anchor() sir.anchor(sir)
Descriere Converteste un sir de caractere într-o ancora numita cu tag-ul <a> si atributul name.
  charAt() sir.charAt(Valoare)
Descriere Returneaza caracterul pozitionat în sirul de caractere.
Exemplu <script>
   vocale="aeiou";
   r=vocale.charAt(3);
   document.write(r);   //afiseaza o
</script>
  charCodeAt() sir.charCodeAt(Valoare)
Descriere Returneaza valoarea codului Unicode al caracterului situat în pozitia indicata în sirul de caractere.
  concat() sir.concat(sir)
Descriere Adauga un nou sir de caractere la sfârsitul unui alt sir de caractere. Metoda este echivalenta cu operatorul +.
Exemplu <script>
   sir_1=sir_1.concat("Felicitari pentru rabdarea de a ne fi descoperit!");
   document.write(sir_1);
</script>
  fixed() sir.fixed()
Descriere Încadreaza un sir de caractere cu tag-urile <tt>...</tt>.
  fromCharCode() sir.fromCharCode(Valoare)
Descriere Returneaza codul Unicode corespunzator caracterului indicat.
  indexOf() sir.indexOf(Sir,Valoare)
Descriere Cauta un caracter într-un sir de caractere si returneaza indexul primei aparitii (primul caracter are indexul 0). Metoda face diferenta între majuscule si minuscule. În caz contrar metoda returneaza valoarea -1.
Exemplu <script>
   email="ld@canaba.com";
   r=email.indexOf("@");
   document.write(r);
   //afiseaza 2
</script>
Exemplu <script>
   email="pepito@brazil.com";
   r=email.indexOf("i",6);
   document.write(r);
   //afiseaza 11
</script>
Exemplu <script>
   email="ld@canaba.com";
   r=email.indexOf("canaba");
   document.write(r); //afiseaza 3
</script>
  lastIndexOf() sir.lastIndexOf(sir)
Descriere Cauta ultima aparitie a sirului de caractere si returneaza indexul pozitiei sale. În caz de esec, se returneaza valoarea -1. Metoda face deosebire între majuscule si minuscule.sup()sir.sup()
Exemplu <script>
   email="ld@canaba.com";
   r=email.lastindexOf("@");
   document.write(r);
   //afiseaza 2
</script>
  link() sir.link(sir)
Descriere Încadreaza un sir de caractere cu tag-urile <a>..</a>.
  match sir.match(expresieregulata)
Descriere Cauta o expresie regulata într-un sir de caractere si returneaza rezultatul într-o matrice. În caz de esec, metoda returneaza valoarea null.
Exemplu <script>
   model=/\d{1,3}/; adresa="195.14.45.78";
   document.write(adresa.match(model));
</script>
  replace() sir.replace(expresieregulata, sir)
Descriere Cauta o expresie regulata si înlocuieste caracterele gasite prin sirul de caractere indicat în cel de-al doilea argument. În caz de esec, înlocuirea nu se efectueaza.
Exemplu <script>
   model=/ION/i;
   text="ion@yahoo.com";
   r=text.replace(model."ION");
   document.write(r); //afiseaza yahoo.com
</script>
  search() sir.search(expresieregulata)
Descriere Cauta o expresie regulata într-un sir de caractere si returneaza valoarea pozitiei primului caracter gasit. În caz de esec, metoda returneaza valoarea -1.
Exemplu <script>
   model=/pion/i;
   text="Nebunul si Pionul";
   document.write(text.search(model));
   //afiseaza 11
</script>
  slice() sir.slice(Valoare1,Valoare2)
Descriere Extrage o parte dintr-un sir de caractere si returneaza sirul extras.
Exemplu <script>
   text=liv@canaba.com;
   a=text.slice(4,100);
   document.write(a);
   //afiseaza canaba.com
</script>
Exemplu <script>
   text="ion@yahoo.com";
   rezultat=text.slice(0,3);
   document.write(rezultat);
   //afiseaza ion
</script>
  split() sir.split(sir)
Descriere Divizeaza un sir de caractere în subsiruri si returneaza o matrice. Metoda recunoaste expresiile regulate.
  substr() sir.substr(Valoare1,Valoare2)
Descriere Extrage o parte din sirurile de caractere si returneaza sirul extras.
Exemplu <script>
   text="ion@yahoo.com";
   r=text.substr(0,3);
   document.write(r);
   //afiseaza ion
</script>
  substring() sir.substring(Valoare1,Valoare2)
Descriere Extrage o parte dintr-un sir de caractere si returneaza sirul extras.
Exemplu <script>
   email="ion@yahoo.com";
   r=email.substring(0,3);
   document.write(r); //afiseaza ion
</script>
  toLowerCase() sir.toLowerCase()
Descriere Converteste un sir de caractere în minuscule.
Exemplu <script>
   text="Mitica si Petrica";
   r=text.toLowerCase();
   document.write(r);
   //afiseaza mitica si petrica
</script>
  toString() sir.toString()
Descriere Converteste o valoare numerica sau booleana în sir de caractere.
Exemplu <script>
   a=TRUE; b=314;
   document.write(a.toString()+",");
   document.write(b.toString());
   //afiseaza TRUE,314
</script>
  toUpperCase() sir.toUpperCase(sir)
Descriere Converteste un sir de caractere în majuscule.
Exemplu <script>
   email="ion@yahoo.com";
   rezultat=email.toUpperCase();
   document.write(rezultat);
   //afiseaza ION@YAHOO.COM
</script>

top
 
  Obiectul Array. Aplicații    
     

Aplicațiile din conversațiile anterioare au fost construite pe tipuri de date simple cărora le-au fost asociate variabile simple.
Sunteți un ... gurmand de variabile? Dacă da, folosiți obiectul intern Array (matrice).
O matrice (array) este o listă de valori sau de referințe către alte obiecte. O matrice poate conține, de exemplu o listă de date numerice sau alfanumerice.

Fișa obiectului intern Array este prezentată în figura 4.7.
Figura 4.7
Fisa obiectului Array
Cum se creeaza obiectul? constructorul Array()
Proprietati:
 length
Metode: concat(), join(), pop(), push(), reverse(), shift(), slice(), sort(), splice(), toString(), unshift()
Gestionarii de evenimente: -

top
 
  Constructorul Array()    
     

Pentru a crea o nouă matrice, utilizați constructorul Array().

Constructorul Array()este prezentat în detaliu în figura 4.8.
Figura 4.8
 
Constructor
 Sintaxa
Array() variabila=new Array()
variabila=new Array(numar_elemente)
variabila=new Array(element1,element2,...)
variabila=[]
variabila=[,,,,]
variabila=[element1,element2,…]
Descriere Creeaza o noua matrice. Noua matrice poate fi vida, dimensiunea sa (numarul de elemente) poate fi predefinita sau poate fi, de asemenea initializata cu o lista de elemente. Numerotarea elementelor unei matrici începe de la zero. Spre deosebire de majoritatea tipurilor de variabile JavaScript, array-urile trebuie sa fie declarate înainte de a fi utilizate. Începând cu versiunea 1.2 JavaScript, instructiunea new Array() nu mai este indispensabila. Se pot utiliza, în mod simplu parantezele drepte ([]). În limbajul JavaScript nu se pot crea matrici cu mai multe dimensiuni, dar puteti imbrica mai multe matrici. Începeti prin a crea o matrice clasica (cu o dimensiune) iar apoi, în fiecare element al vectorului inserati câte un array.
Exemplu <script>
   ListaCulori=new Array();
   ListaCulori=["rosu","galben","albastru"];
</script>
Exemplu <script>
   ListaCulori=new Array(7);
</script>
Exemplu <script>
   ListaCulori=new Array("rosu","galben","albastru");
</script>
Exemplu <script>
   ListaCulori=["rosu","galben"];
</script>
Exemplu <script>
   culoare1="rosu";
   culoare2="galben";
   culoare3="albastru";
   ListaCulori=[culoare1,culoare2, culoare3];
</script>
Exemplu
Tabelul 1
a11 a12 a13 a14
a21 a22 a23 a24
a31
 a32 a33 a34

<script>
   //creare matrice (vezi tabelul 1) cu trei linii si patru coloane
   linie=new Array(3);
   linie[0]=new Array("a11","a12","a13","a14");
   linie[1]=new Array("a21","a22","a23","a24");
   linie[2]=new Array("a31","a32","a33","a34");
   document.write(linie[1][2]+"<br>");
   //Se afiseaza a23
   document.write(linie[0]);
   //Se afiseaza a11, a12, a13, a14
</script>
Exemplu <script>
   ListaCulori=new Array("rosu","galben","albastru","verde");
   document write(ListaCulori+"<br />");
   //Se afiseaza rosu, galben, albastru, verde
   ListaCulori[1]="violet";
   document.write(ListaCulori);
   //Se afiseaza rosu, violet, albastru, verde
</script>
Exemplu <script>
   /*Crearea unei matrici si modificarea celui de-al doilea element*/
   mere=new Array("ionatan","cretesti","dulci");
   document.write(mere+"<br>");
   //Se afiseaza ionatan, cretesti, dulci
   mere[1]="parmen-auriu";
   document.write(mere);
</script>
Exemplu <script>
   /*Afisarea elementelor unei matrici cu o bucla for*/
   student=new Array("Alin","Bogdan","Catalin","Dan");
   for(i=0;i<4;i++){
      document.write(student[i]+"<br>");
   }
</script>

Proprietățile obiectului Array

Proprietățile obiectului Array()sunt prezentate în detaliu în figura 4.9.
Figura 4.9
 
Proprietate
 Sintaxa
length matrice.length
Descriere Contine numarul de elemente al unei matrici. Puteti modifica valoarea acestei proprietati. Reducând numarul de elemente, elementele se suprima pornind din dreapta matricii.
Exemplu <script>
   lista_numere=new Array(3,7,9,50,20,23,2);
   document.write(lista_numere.length+" numere");
  //Se afiseaza 7 numere
</script>
Exemplu <script>
   lista_numere=new Array(6,9,7,56,48);
   document.write(lista_numere.length+" numere <br>");
   for(i=0;i<lista_numere.length,i++){
      document.write(lista_numere[i]+'-');
   }
   lista_numere.length-=2;
   document.write("<br>"+lista_numere.length+" numere <br>");
   for(i=0;i<lista_numere.length;i++){
      document.write(lista_numere[i]+" -");
   }
</script>

Metodele obiectului Array

Metodele obiectului Array sunt prezentate în detaliu în figura 4.10.

Figura 4.10
 
Metoda
 Sintaxa
concat() matrice=matrice.concat(matrice)
matrice=matrice.concat(Element1, Element2,...)
Descriere Metoda este utilizata pentru concatenarea a doua matrici.
Exemplu <script language="javascript" type="text/javascript">
   //concatenarea a doua matrici
   lista_numere1=new Array(6,9,7);
   lista_numere2=new Array(5,68);
   lista_numere3=lista_numere1.concat(lista_numere2);
   document.write(lista_numere3.length+" numere <br />");
   for(i=0;i<lista_numere3.length;i++){
      document.write(lista_numere3[i]+"-");
   }
</script>
Exemplu <script language="javascript" type="text/javascript">
   //concatenarea a doua matrici
   lista_numere1=new Array(6,9,7);
   lista_numere3=lista_numere1.concat(13,22);
   document.write(lista_numere3.length+" numere <br />");
   for(i=0;i<lista_numere3.length;i++){
      document.write(lista_numere3[i]+"-");
   }
</script>
  join() matrice.join()
matrice.join("Separator")
Descriere Metoda este utilizata pentru convertirea unei matrici într-un sir de caractere. Argumentul "Separator" serveste la separarea elementelor in sir. Fara argument, metoda join() utilizeaza virgula.
Exemplu <script>
   subsir=new Array (6,9,7);
   sir=subsir.join();
   document.write(sir+"<br />");
   sir=subsir.join("*"); document.write(sir);
</script>
Rezultatele executiei script-ului
6,9,7    6*9*7
  pop() matrice.pop()
Descriere Metoda suprima ultimul element al unei matrici. Proprietatea length este modificata în mod automat. Metoda returneaza valoarea elementului suprimat. Metoda pop() nu cere nici un argument.
Exemplu <script language="javascript" type="text/javascript">
   lista=new Array(1,9,47);
   el_suprimat=lista.pop();
   document.write("Elementul suprimat: "+el_suprimat+"<br />");
   document.write(lista);
</script>
  push() matrice.push()
Descriere Metoda adauga noi elemente la sfârsitul matricii. Proprietatea length este modificata în mod automat.
Exemplu <script language="javascript" type="text/javascript">
   culori=new Array("rosu","galben");
   adauga=culori.push("albastru");
   document.write("Numarul de elemente: "culori.length+ "<br />");
   document.write(culori);
</script>
  reverse() matrice.reverse()
Descriere Metoda inverseaza ordinea elementelor unei matrici (nu cere nici un argument).
Exemplu <script language="javascript" type="text/javascript">
   culori=new Array("rosu","galben","albastru");
   document.write(culori+"<br />");
   culori_invers=culori.reverse();
   document.write(culori);
</script>
  shift() matrice.shift()
Descriere Metoda suprima primul element al unei matrici. Elementul de rang 1 devine de rang 0, cel de rang 2 devine de rang 1 s.a.m.d. Proprietatea length se modifica în mod automat. Metoda returneaza valoarea elementului suprimat si nu cere nici un argument.
Exemplu <script language="javascript" type="text/javascript">
   lista_numere=new Array(13,20,22);
   suprim=lista_numere.shift();
   document.write("Elementul suprimat: "+suprim+"<br />");
   document.write(lista_numere);
</script>
  slice() matrice.slice(ValoareNumerica1, ValoareNumerica2)
Descriere Metoda extrage elementele unei matrici si returneaza o noua matrice care contine aceste elemente. Matricea initiala nu este modificata. Elementele extrase depind de doua argumente: ValoareNumerica1 (indica rangul primului element care urmeaza a fi extras), ValoareNumerica2 (indica rangul imediat urmator ultimului element care urmeaza a fi extras). Daca primul argument este negativ, atunci rangul se calculeaza pornind de la sfârsitul matricii. El este întotdeauna de rang 0. Daca cel de-al doilea argument este negativ, el indica rangul (calculat, pornind de la sfârsitul matricii) ultimului element care urmeaza a fi extras. Daca nu este mentionat, caracterele sunt extrase începând cu rangul furnizat de primul argument pâna la sfârsitul matricii.
Exemplu <script language="javascript" type="text/javascript">
   lista_numere=new Array(1,2,3,4,5,6,7,8);
   lista_1=lista_numere.slice(2,5);
   document.write(lista_1+"<br />");
   //se afiseaza 3,4,5
   lista_2=lista_numere.slice(3);
   document.write(lista_2+"<br />");
   //se afiseaza 4,5,6,7,8
   lista_3=lista_numere.slice(2,-1);
   document.write(lista_3+"<br />");   //se afiseaza 3,4,5,6,7
   lista_4=lista_numere.slice(-2);
   document.write(lista_4+"<br />"); //se afiseaza 7,8
</script>
  splice() matrice.splice(Rang,NumarElemente, Element1,Element2,...)
Descriere Metoda suprima elementele unei matrici si le înlocuieste cu altele. Rang-ul elementului de la care trebuie sa înceapa suprimarea elementelor matricii este obligatoriu. Al doilea argument (NumarElemente) precizeaza numarul elementelor ce urmeaza a fi suprimate. Argumentele urmatoare (Element1,Element2,...) reprezinta elementele care urmeaza a fi inserate în matrice începând cu rangul indicat pentru primul element. Metoda returneaza lista elementelor suprimate.
Exemplu <script language="javascript" type="text/javascript">
   lista_numere=new Array(1,2,3,4,5,6,7,8);
   a=lista_numere.splice(2,2,35,36);
   document.write("Numere: "lista_numere+"<br />");
   //se afiseaza 1,2,35,36,5,6,7,8
</script>
  toString() matrice.toString()
Descriere Metoda returneaza continutul unei matrici sub forma unui sir de caractere.
Exemplu <script language="javascript" type="text/javascript">
   culori=new Array("rosu","galben","albastru");
   a=culori.toString();
   document.write(a);
   //se afiseaza rosu,galben,albastru
</script>
  unshift() matrice.unshift(Element1,Element2,..)
Descriere Metoda insereaza la începutul matricii elementele pe care le mentionati. Proprietatea length este modificata în mod automat.
Exemplu <script language="javascript" type="text/javascript">
   culori=new Array("rosu","galben","albastru");
   culori.unshift("verde","violet");
   document.write(culori);
   //se afiseaza verde,violet,rosu,galben,albastru
</script>
  sort() matrice.sort()
matrice.sort(Functie)
Descriere matrice.sort() sau metoda sort fara argument sorteaza elementele unei matrici care contine valori alfanumerice; matrice.sort(Functie) permite sortarea valorilor numerice. Functie primeste doi parametri si returneaza o valoare numerica.
Exemplu
  Rezultatele executiei script-ului:
 
Exemplu
Exemplu
Exemplu
Exemplu
Exemplu
  Rezultatele executiei script-ului:
 

top
 
  EXEMPLUL 4 JAVASCRIPT    
     
Formularea problemei

Problema care se pune acum seamănă cu celelalte, dar ... este puțin mai complicată. Se citesc de la tastatură, într-o matrice livrările de benzină efectuate zilnic (luni, marți, miercuri, joi, vineri) din cele trei rezervoare (cilindrice echilaterale) R1, R2, R3. Se dorește ca, pentru fiecare rezervor în parte, să se afișeze, pe zile, cantitățile de benzină livrate beneficiarilor. Se va tipări, de asemenea, media livrărilor pe zile și pe rezervoare. La finele raportului se vor afișa maximul și minimul livrărilor, precizându-se atât rezervorul cât și ziua respectivă.
Analiza problemei

Formatul datelor de input/output (intrare/ieșire), tabela de variabile, specificațiile de programare sunt ilustrate în figurile: 4.11, 4.12, 4.13.

Figura 4.11

Figura 4.12
Tabela de variabile
Variabile de intrare Variabile de stare Variabile de iesire
a: matricea livrarilor pe zile si rezervoare
 st: livrarile totale pe zile si rezervoare
s: sume partiale, livrari pe zile
z: vectorul numelor zilelor saptamânii
imax, imin, jmax, jmin: indicii livrarilor maxime si minime din matricea a
 b: vectorul livrarilor medii zilnice
d: vectorul livrarilor medii pe rezervoare
max: maximul livrarilor
min: minimul livrarilor

Figura 4.13
Specificatii de programare
Descriere. Programul editeaza situatia livrarilor de benzina efectuate zilnic din trei rezervoare cilindrice echilaterale.
Livrarile, pe zile si pentru fiecare rezervor în parte, se citesc de la tastatura. Programul mai afiseaza maximul si minimul livrarilor însotite de rezervorul si ziua respective.
Intrari. Matricea livrarilor pe rezervoare si zile.
Iesiri. Lista cu situatia livrarilor.
Lista de functiuni ale script-ului
1. Citeste livrarile zilnice de benzina (luni, marti, miercuri, joi, vineri) pentru rezervorul R1.
2. Citeste livrarile zilnice de benzina (luni, marti, miercuri, joi, vineri) pentru rezervorul R2.
3. Citeste livrarile zilnice de benzina (luni, marti, miercuri, joi, vineri) pentru rezervorul R3.
4. Calculeaza media livrarilor pe zile.
5. Calculeaza media livrarilor pe rezervoare.
 6. Calculeaza maximul livrarilor.
7. Calculeaza minimul livrarilor.
8. Afiseaza maximul livrarilor, numarul rezervorului si ziua.
9. Afiseaza minimul livrarilor, numarul rezervorului si ziua.
10. Trunchiaza media (livrarilor pe zile si pe rezervoare).
11. Stop

Proiectarea script-ului

În figura 4.14 se prezintă pseudocodul, varianta formalizată.
Figura 4.14
Pseudocodul
 

Exemplul5   BEGIN  
                //initializeaza vectorul Z cu numele zilelor  
                z=luni,marti,miercuri,joi vineri  
                //aloca spatiu de memorie si  
                //citeste livrarile pe fiecare rezervor 
de la tastatura  
LIVI            FOR(i=0;i<3;i++)  
LIVJ                    FOR(j=0;j<5;j++)  
                                READ ai,j  
LIVJ                    ENDFOR  
LIV             ENDFOR  
                // aloca spatiu de memorie pentru vectorul 
b si d  
                // calculeaza mediile pe rezervoare  
FORJ            FOR(j=0;j<5;j++)  
                        s=0  
FORI                    FOR(i=0;i<3;i++)  
                                s=s+ai,j  
FORI                    ENDFOR  
                        bj=s/3  
FORJ            ENDFOR  
                // calculul mediilor pe rezervoare  
                st=0  
FORMEDII        FOR(i=0;i<3;i++)  
                        s=0  
FORMEDIIJ               FOR(j=0;j<5;j++)  
                                s=s+ai,j  
                                st=st+aij  
FORMEDIIJ               ENDFOR  
                        di=s/5  
FORMEDII        ENDFOR  
                d3=s/15  
                // determinarea maximului si minimului  
                max=a0,0  
                min=a0,0  
                imax=0  
                imin=0  
                jmax=0  
                jmin=0  
FORMAXI         FOR(i=0;i<3;i++)  
FORMAXJ                 FOR(j=0;j<5;j++)  
IFMAX                           IF(max<ai,j)  
                                        max=aij  
                                        imax=i  
                                        jmax=j  
IFMAX                           ENDIF  
IFMIN                           IF(min>ai,j)  
                                        min=aij  
                                        imin=i  
                                        jmin=j  
IFMIN                           ENDIF  
FORMAXJ                 ENDFOR  
FORMAXI         ENDFOR  
                imin=imin+1  
                imax=imax+1  
                //afisare rezultate  
                WRITE "SITUATIA REZERVOARELOR R1 R2 R3"  
                WRITE "ZIUA  R1  R2  R3  MEDIA"  
FORK            FOR(k=0;k<5;k++)  
                        WRITE Z[k]  
FORJ                    FOR(j=0;j<3;j++)  
                                 WRITE  a[j][k]  
FORJ                    ENDFOR  
                        WRITE  trunchiaza( b[k])  
FORK            ENDFOR  
                WRITE  "MEDIA"  
FORTRUNC        FOR(j=0;j<4;j++)  
                        WRITE trunchiaza(d[j])  
FORTRUNC        ENDFOR  
                WRITE "Livrarea maxima: " max  
                WRITE "s-a facut din rezervorul: R" imax  
                WRITE "in ziua de" Zjmax  
                WRITE "Livrarea minima:" min  
                WRITE " s-a facut din rezervorul: R"imin  
                WRITE " in ziua de "+Zjmin  
Exemplul5   END  
// transforma o valoare reala in sir de caractere  
// si trunchiaza la doua zecimale  
TRUNCHIAZA  BEGIN  
                Parametrii:  
                    x- valoare reala  
                s=transforma in sir de caractere x  
                i=pozitia punctului zecimal in sir  
IFCOPY          IF(i!=-1)  
                    s=copiazasubsir(s,0,i+2)  
IFCOPY          ENDIF  
                RETURN s  
TRUNCHIAZA  END

Codificarea în limbajul JavaScript

În figura 4.15 este prezentat documentul (X)HTML complet.
Figura 4.15
Codificarea în limbajul JavaScript
 

<html> 
<head> 
<title>Exemplul 4</title> 
<SCRIPT LANGUAGE="JavaScript"> 
 
<!--- 
var Z = new Array("Luni","Marti","Miercuri","Joi","Vineri");  
a=new Array(3); 
a[0]=new Array(5); 
a[1]=new Array(5); 
a[2]=new Array(5); 
for(i=0;i<3;i++) 
 for(j=0;j<5;j++) 
   {k=i+1; 
   a[i][j]=parseFloat(prompt("Livrare din rezervorul R"+k+"
ziua:"+Z[j],0));  
   } 
// --> 
 
</SCRIPT> 
</head> 
 
<body> 
 
<center> 
<h3>SITUATIA LIVRARILOR DE BENZINA PENTRU 
REZERVOARELE R1 R2 R3</h3> 
<SCRIPT language="JavaScript"> 
    function rotunjeste(x) 
      { 
     var s=""+x; 
      i=s.indexOf("."); 
      if(i!=-1){ 
        s=s.substring(0,i+3); 
        } 
      return s; 
      }     
     
    // CALCULUL MEDIILOR PE ZILE 
    var i,j; 
    B = new Array(5); 
    for(j=0;j<5;j++) 
      { 
       S=0; 
        for(i=0;i<3;i++) 
           S=S+a[i][j]; 
       B[j]=S/3; 
      } 
    // CALCULUL MEDIILOR PE REZERVOARE   
    D = new Array(4); 
    ST=0; 
    for(i=0;i<3;i++) 
      { 
       S=0; 
        for(j=0;j<5;j++){ 
             S=S+a[i][j]; 
            ST=ST+a[i][j]; 
         } 
       D[i]=S/5; 
      }    
     D[3]=ST/15; 
   
 
// DETERMINAREA MAXIMULUI SI MINIMULUI 
    max=a[0][0]; 
    min=a[0][0]; 
    imax=0;imin=0; 
     jmax=0;jmin=0; 
     for(i=0;i<3;i++){ 
       for(j=0;j<5;j++){ 
         if(max<a[i][j]){max=a[i][j];imax=i;jmax=j;} 
         if(min>a[i][j]){min=a[i][j];imin=i;jmin=j;} 
   }} 
  imin++;imax++; 
 
    //AFISARE REZULTATE 
     
  document.writeln("<center><table border=1 
BGCOLOR=#EFEFFF><tr>"); 
 
  document.writeln("<td><B>ZIUA</B><td><B>R1</B><td>
<B>R2</B><td><B>R3</B><td><B>MEDIA</B></td></tr>"); 
 
    for(k=0;k<5;k++) 
     { 
     document.writeln("<tr><td>" + Z[k]+"</td>"); 
     for(j=0;j<3;j++) 
      { 
       document.writeln("<td>" + a[j][k]+ "</td>"); 
      } 
     document.writeln(" <td> " +rotunjeste( B[k])+ "</TD></Tr>"); 
    } 
       
    document.writeln("<tr><td><B>MEDIA</B>"); 
   for(j=0;j<4;j++) 
     document.writeln("<td><B>" + rotunjeste(D[j])+" </B></td>");  
   document.writeln("</TR>"); 
   document.writeln("</Table></center><P><P>"); 
   document.writeln("<Font size=+1 color=green>Livrarea maxima:
"+max+" s-a facut din rezervorul: R"+imax+" in ziua de "+Z[jmax]
+"</font>"); 
document.writeln("<P><Font size=+1 color=green>Livrarea minima:
"+min+" s-a facut din rezervorul: R"+imin+" in ziua de "+Z[jmin]
+"</font>"); 
</SCRIPT> 
 
</body> 
 
</html>

Rezultatele execuției script-ului sunt prezentate în figura 4.16.
Figura 4.16

Aplicație

Problema care se pune acum seamănă cu cea din EXEMPLELE precedente, dar este ... puțin mai complicată! Se citesc de la tastatură un număr oarecare (maxim 30) de valori ale razelor unor rezervoare cilindrice echilaterale. Pentru fiecare valoare a razei se calculează și afișează cantitatea de benzină din rezervor. Script-ul verifică totodată ca valorile razelor rezervoarelor să fie numere pozitive. De asemenea, script-ul calculează și afișează masa totală de benzină din rezervoare. În felul acesta, cu același script se pot rezolva probleme ce diferă prin numărul de rezervoare.
Analiza problemei

Problemele care se pun în această etapă privesc în mod special alcătuirea tabelei de variabile, mai precis identificarea variabilelor de intrare ale script-ului.
Numărul rezervoarelor, necunoscut în problemă, trebuie furnizat ca o variabilă de intrare (n) în momentul execuției script-ului, înaintea citirii datelor propriu-zise (razele rezervoarelor). Cât privește numărul variabil de raze, de asemenea necunoscut în momentul scrierii script-ului vom folosi ca variabilă de intrare o matrice(array) cu o singură dimensiune – un vector.
Remarcă

În informatică, se desemnează prin abuz de limbaj sub numele de vector, mulțimea {V(1), V(2), …, V(n)}, unde V(1), V(2), …, V(n) sunt elementele vectorului. Așadar, un vector este o mulțime de elemente identificate prin poziția pe care acestea o ocupă. Prelucrările ce se efectuează asupra unui vector sunt funcție de valoarea unui indice de poziție (0<=i<=n). Acestuia i se fixează o valoare care, în general, corespunde primei poziții, iar prelucrarea se efectuează cât timp valoarea acestui indice nu depășește o valoare finală.

În figura 4.17, 4.18, 4.19 sunt prezentate: formatul datelor de ieșire, tabela de variabile, specificațiile de programare.
Figura 4.17
Formatul datelor de iesire
RAZA MASA
xx
xx
.
xx
 xxx.xx
xxx.xx
.
xxx.xx
MASA TOTALA= xxx.xx TONE

Figura 4.18
Tabela de variabile
Variabile de intrare Variabile de stare Variabile de iesire
n: numarul de rezervoare
r: vectorul razelor rezervoarelor
 d: densitatea benzinei
i: indicele de pozitie (indexul)
v: volumul rezervorului
s: masa totala de benzina
m: cantitatea de benzina din rezervor
 m: cantitatea de benzina din rezervor
s: masa totala de benzina

Figura 4.19
Specificatii de programare
Descriere. Script-ul calculeaza si afiseaza cantitatea de benzina (s) dintr-un numar oarecare (n) de rezervoare cilindrice echilaterale (acest numar este furnizat ca parametru). Script-ul citeste valorile razelor rezervoarelor într-un vector de date (r) printr-o procedura de introducere dinamica a datelor (razele cu valori negative nu se iau în considerare!). Pentru raze cu valori negative, script-ul afiseaza mesajul: "Raza negativa". Valoarea densitatii benzinei (d) se introduce în mod static.
Intrari. Se introduc de la tastatura numarul rezervoarelor cilindrice echilaterale si valorile razelor acestora.
Iesiri. Masa de benzina (m) din fiecare rezervor si masa totala (s) de benzina.
Lista de functiuni ale script-ului
   1. Citeste numar rezervoare (n).
   2. Initializeaza variabila (s).
   3. Atribuie variabilei d valoarea 0.7 (densitatea benzinei).
   4. Afiseaza un rând de 30 de "=".
   5. Afiseaza "raza, masa".
   6. Pentru fiecare rezervor (cilindric echilateral):
      6.1 Citeste valoarea razei unui rezervor.
      6.2 Valideaza datele introduse dupa cum urmeaza: pentru fiecare articol se verifica daca valoarea razei citite este negativa. Script-ul afiseaza mesajul: "Raza negativa".
   7. Pentru fiecare rezervor (cilindric echilateral):
      7.1 Calculeaza volumul rezervorului.
      7.2 Calculeaza masa de benzina din rezervor.
      7.3 Însumeaza m în s.
      7.4 Afiseaza r, m
   8. Afiseaza masa totala de benzina
   9. Stop

Proiectarea programului

În figura 4.20 se prezintă pseudocodul, varianta formalizată.
Figura 4.20
Pseudocodul
 

REZERVOARE  BEGIN 
                d=0.7 
                s=0 
                //Citeste numar rezervoare(n) 
                READ(n) 
CAP-TABEL       BEGIN 
                    Do LINIUTZA 
                    WRITE(‘raza’+’   ‘+’masa’); 
                    DO LINIUTZA 
CAP-TABEL       END 
PREL-VALID      FOR(i=1;i<=n;i++) 
                        READ(r[i]) 
                        WRITE(r[i]); 
VALID                   WHILE (r[i]<0) 
                                WRITE(‘Raza negativa’) 
                                READ(r[i]) 
                                WRITE(r[i]) 
VALID                   ENDWHILE 
PREL-VALID      ENDFOR 
CALC-MASA       FOR(i=1;i<=n;i++) 
                        m=2dr[i]3 
                        s=s+m 
                        WRITE(r[i]+m) 
CALC-MASA       ENDFOR 
                WRITE(s) 
REZERVOARE  END  
LINIUTZA    BEGIN 
                Afiseaza un rand de 30 de “=“ 
LINIUTZA    END

Codificarea în limbajul JavaScript

În figura 4.21 este prezentat documentul (X)HTML complet.
Figura 4.21

Rezultatele execuției script-ului sunt prezentate în figurile 4.22, 4.23.
Figura 4.22

Figura 4.23

top
 
  Temă    
     
Testați-vă cunostințele

1. Care sunt obiectele interne (integrate) ale limbajului JavaScript?

2. Cum se creează obiectul String?

3. Care sunt proprietățile obiectului String?

4. Care sunt metodele pentru formatarea șirurilor de caractere?

5. Ce realizează următoarele metode ale obiectului String:
   indexOf();
   substr();
   toLowerCase().

6. Cum se creează obiectul Array?

7. Ce realizează următoarele metode ale obiectului Array?
   concat();
   toString;
   sort().

8. Se consideră șirul de caractere:
sir=”Protopopescu Augustin”;
Precizați ce valori returnează următoarele metode ale obiectului String:
   alert(sir.charAt(3)); //afișează ...?...
   alert(sir.charCodeAt(3)); //afișează ...?...
   alert(sir.indexOf(”0”)); //afișează ...?...
   alert(sir.indexOf(”0”,8)); //afișează ...?...
   alert(sir.indexOf(”z”,8)); //afișează ...?...

9. Se consideră șirul de caractere:
sir=”abcdef”;
Precizați ce valori returnează următoarele metode ale obiectului String:
   alert(sir.slice(0,3)); //afișează ...?...
   alert(sir.slice(1,3)); //afișează ...?...
   alert(sir.slice(3)); //afișează ...?...
   alert(sir.slice(2,-1)); //afișează ...?...
   alert(sir.slice(2,-2)); //afișează ...?...
   alert(sir.slice(-2,-1)); //afișează ...?...

10. Se consideră șirul de caractere:
sir=”a,b,c,d,e,f”;
Precizați ce valori returnează următoarele metode ale obiectului String:
   alert(sir.split(”,”)); //afișează ...?...
   alert(sir.substr(2,2)); //afișează ...?...
   alert(sir.substr(3)); //afișează ...?...
   alert(sir.substr(-3,2)); //afișează ...?...
   alert(sir.substr(0,2)); //afișează ...?...

11. Se consideră matricea:
g=[1,2,3];
Precizați ce valori returnează următoarele metode ale obiectului Array:
   alert(g.concat(4,5)); //afișează ...?...
   alert(g.concat([4,5])); //afișează ...?...
   alert(g.concat([4,5],[6,7])); //afișează ...?...
   alert(g.concat(4,[5,[6,7]])); //afișează ...?...

12. Se consideră matricea:
g=[1,2,3,4,5];
Precizați ce valori returnează următoarele metode ale obiectului Array:
   alert(g.slice(0,3)); //afișează ...?...
   alert(g.slice(3)); //afișează ...?...
   alert(g.slice(1,-1); //afișează ...?...
   alert(g.slice(-3,-2)); //afișează ...?...

13. Se consideră funcția:
function sortare(x,y){
return x-y;
}
și
var g=new array(7,5,100,21);
Precizați rezultatele obținute în urma execuției următoarelor metode:
   alert(g.sort()); //afișează ...?...
   alert(g.sort(sortare)); //afișează ...?...

14. Care este efectul metodei join()? Care este relația sa cu metoda split() a obiectului String?

15. Identificați erorile de sintaxă din următoarele script-uri:
   Figura 11.3 (Conversația  11)  
Figura 11.5 (Conversația 11).
Vizitați site-urile

www.bdml.net/listes
www.natural.com/JavaScript
www.webcoder.com
www.dannyg.com/examples/ol2/index.htm
top
CUPRINS> Obiectele interne String, Array INTRO
INAPOI INAINTE