Javascript

J avaScript
CUPRINS

Conversaia 1. JavaScript i HTML 4.0, XHTML i XML ........................ 3
Stilul de via Web
De ce JavaScript i Java au nume att de apropiate?
Ce putei realiza cu JavaScript?
Ce nu putei realiza cu JavaScript?
Terminologia JavaScript
Conceptele programrii JavaScript
Cum inserai un script n documentele (X)HTML, Dreamweaver MX i XML?
EXEMPLUL 1 JAVASCRIPT
Oferta de editoare JavaScript
Resursele JavaScript de care avei nevoie
Versiunile JavaScript
Tem

Conversaia 2. Variabile i funcii ........................................................... 33
Tipurile de date i valorile speciale JavaScript
Variabile i funcii. Aplicaii
Crearea automat a script-urilor cu Dreamweaver MX
Cuvinte rezervate JavaScript
Tem

Conversaia 2 (continuare). Operatorii JavaScript. Obiecte
matematice .................................................. 57
Operatorii JavaScript
Asociativitatea i prioritatea operatorilor
Obiectul Math
Obiectul Number
Obiectul Boolean
EXEMPLUL 2 JAVASCRIPT (continuare)
Tem

Conversaia 3. Instruciunile limbajului JavaScript ............................... 91
Tipuri de instruciuni JavaScript
for. Aplicaii
EXEMPLUL 3.1 JAVASCRIPT
while. Aplicaii
do ... while. Aplicaii
for ... in. Aplicaii
if, if...else, switch. Aplicaii
Instruciunile continue i break
Instruciunea with
Tem

Conversaia 4. Obiectele interne String, Array ...................................... 123
Obiectele limbajului JavaScript. Prezentare general
Obiectele interne
Obiectul String. Aplicaii
Obiectul Array. Aplicaii
Tem

Conversaia 5. Obiectele (interne) RegExp, Date, Arguments .............. 153
Expresii regulate
Obiectul RegExp. Aplicaii
Obiectul Date. Aplicaii
Obiectul Arguments. Aplicaii
Tem

Conversaia 6. Gestionarii de evenimente JavaScript .......................... 189
Evenimente i gestionari de evenimente
Gestionarii de evenimente JavaScript
Aplicaii
Tem

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

Conversaia 8. Obiectul Form. Validarea formularelor ......................... 273
Obiectul Form. Aplicaii
(Sub)Obiectele Form. Aplicaii
Validai un formular cu JavaScript. Aplicaii
EXEMPLUL 8 JAVASCRIPT (varianta 1)
Tem

Conversaia 9. Obiectul Image ................................................................ 343
Obiectul Image. Aplicaii
Creai un rollover cu JavaScript
Creai un joc cu JavaScript
Creai animaii simple cu JavaScript
Creai imagini reactive (client) cu JavaScript. Aplicaii
Tem

Conversaia 10. Obiectele Frame i Layer ............................................. 377
Obiectele Frame
Obiectul Layer. Aplicaii
Tem

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

Conversaia 12. Crearea obiectelor personalizate ................................ 427
Utilizarea obiectelor personalizate pentru simplificarea script-urilor
Definii un obiect
Definii o metod pentru un obiect
Creai o instan a unui obiect
Aplicaii
Tem

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

t t

Conversaia 1

JavaScript i HTML 4.0, XHTML, XML

n aceast conversaie:
Stilul de via Web
De ce JavaScript i Java au nume at de apropia e?
Ce pute i realiza cu JavaScript?
Ce nu pute i realiza cu JavaScript?
Cum insera i un script n documen ele (X)HTML, Dreamweaver MX i XML?
Resursele JavaScript de care ave i nevoie
Tem

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

4
Elementele hiperlink Cel mai simplu nivel de interactivitate pe
care l ofer Web-ul.
Interactivitatea funcional Se refer la abilitatea de a executa sarcini
specifice i funcii ntr-un site Web.
Interactivitatea comunitar Permite vizitatorilor s se ntlneasc i s
interacioneze unul cu altul. Interactivitatea
comunitar este adesea considerat o
strategie promoional online.
Interactivitatea v oblig s apelai la un limbaj de programare sau un limbaj de
script.
Limbajele de script destinate Web-ului permit combinarea script-urilor i a
instruciunilor (X)HTML pentru a crea pagini Web interactive.
Care este deosebirea ntre un limbaj de script i un limbaj de programare?
Totul depinde de cel cruia v adresai: noi vorbim n aceast carte de limbajul
de script JavaScript, dar nimeni nu v mpiedic s menionai n CV-ul
dumneavoastr, n lista de limbaje pe care le cunoatei i limbajul de
programare JavaScript, evident dup ce ai terminat de citit aceast carte!
JavaScript nu este singurul limbaj pentru Web.
Java, un limbaj de programare orientat obiect creat de Sun, de exemplu, n
anumite situaii este mult mai bun dect JavaScript. Chiar dac numele lor i
cteva instruciuni se aseamn, Java i JavaScript sunt limbaje total diferite.
VB Script (Visual Basic Scripting Edition) este rspunsul lui Microsoft la
JavaScript. Ca i JavaScript, VB Script este un limbaj de script simplu. El are la
baz sintaxa Visual Basic, un limbaj de programare Windows foarte
rspndit. Script-urile VB Script pot fi direct incluse n documentele (X)HTML.
VB Script prezint mari avantaje pentru cei care cunosc deja Visual Basic.
VB Script poate fi de asemenea integrat cu Active X, standardul Microsoft
pentru integrarea aplicaiilor n paginile Web.

5

Nu este nimic grav dac nu tii s rspundei la aceast ntrebare! Cu toii tim
c Java este numele unei insule din Indonezia, dar JavaScript? JavaScript i
Java sunt dou limbaje pentru Web. De ce numele lor sunt att de apropiate?
Cel puin trei ar putea fi rspunsurile la aceast ntrebare, pe care v invitm s
le analizai i apoi s decidei!
1. JavaScript este o versiune simplificat a limbajului Java.
2. Sintaxa limbajului JavaScript este parial inspirat din cea a limbajului
Java.
3. Cele dou limbaje provin din insula Java.
Rspunsul corect este 2: Sintaxa limbajului JavaScript este
parial inspirat din cea a limbajului Java. S m explic.
n ciuda tuturor aparenelor, JavaScript i Java sunt diferite. Din cauza
asemnrii de nume numeroi sunt cei care cred c JavaScript nu este dect o
versiune simplificat a limbajului Java (1). Aceasta este fals. Java i JavaScript
sunt dou tehnologii separate avnd doar numele i originea apropiate.
Sintaxa limbajului JavaScript este parial inspirat din cea a limbajului Java (2).
Diferena esenial ntre cele dou limbaje este aceea c spre deosebire de
JavaScript, Java permite crearea de aplicaii autonome.
Remarc. Java este numele unei insule din Indonezia, dar el nseamn de asemenea cafea n
vorbirea curent american. Logo-ul limbajului de programare Java este o ceac de cafea cald
(un detaliu amuzant, nu-i aa?).

De ce JavaScript i Java au nume att de apropiate?

Ce putei realiza cu JavaScript?
JavaScript este limbajul favorit al creatorilor de site-uri Web deoarece:
este un limbaj uor de nvat;

6
sunt suficiente cteva linii de cod pentru a mri gradul de interactivitate
al paginilor Web;
este un limbaj care poate fi interpretat de browser-e;
programele JavaScript pot fi incluse direct n documentele (X)HTML.
Limbajul JavaScript poate servi la:
generarea paginilor Web personalizate i modificarea dinamic a
prezentrii lor;
realizarea calculelor matematice;
validarea coninutului unui formular;
comunicarea cu applet-urile Java;
crearea animaiilor personalizate;
afiarea unor mesaje care defileaz n bara de stare a navigatorului;
afiarea unor mesaje ntr-o pagin Web sau ntr-o caset de dialog;
crearea unor butoane animate;
identificarea navigatorului n care se afieaz pagina Web;
executarea funciilor clasice ale unui limbaj de programare.
Evident, aceast list nu este exhaustiv; mai exist numeroase aplicaii posibile
n JavaScript. Multe dintre acestea le vom descoperi mpreun!
Remarc. Utilizarea limbajului JavaScript nu este limitat doar la navigatoarele Web. Exist
versiuni server JavaScript (de exemplu, Live Wise sau Server Side JavaScript pentru navigatorul
Netscape) care permit scrierea de programe JavaScript capabile de a executa, de exemplu
accesul la o baz de date n vederea afirii informaiilor ntr-o pagin Web.

Desigur, JavaScript nu este perfect. Cine este perfect! Dei JavaScript este
puternic, el este limitat de restricii severe impuse de navigatoarele Web, dup
cum urmeaz.
Din motive de securitate,
JavaScript nu poate citi, scrie, crea i terge fiiere de pe hard disc;
JavaScript nu poate executa operaii n reea;

Ce nu putei realiza cu JavaScript?

7
JavaScript nu poate crea aplicaii autonome. Pentru a scrie astfel de
aplicaii va trebui s utilizai unul din limbajele clasice: Java, C sau C++.

Pentru a lucra cu limbajul JavaScript, va trebui s v familiarizai cu termenii i
conceptele prezentate n cele ce urmeaz: Obiect; Proprietate;
Metod; Instruciune; Funcie; Eveniment; Gestionar de
evenimente; Variabil.
S facem cunotin cu fiecare, narmndu-v cu rbdare i nu doar att!

Obiect
Desigur dumneavoastr tii foarte bine ce este un obiect cel puin din viaa
cotidian.
Este o entitate cu parte ntreag, ca de exemplu o minge de volei, o main etc.
n JavaScript, window este un obiect, window este o fereastr a navigatorului.
Pagina Web este de asemenea un obiect. Fiecare element al unui document
(X)HTML este la rndul lui un obiect: paragrafe, formulare, tablouri, imagini,
link-uri etc. Exemplele pot continua.
n JavaScript exist trei tipuri de obiecte:
1. obiecte interne furnizate de limbajul JavaScript (vezi Conversaiile 2,
4, 5): Arguments, Array, Boolean, Date, Function,
Math, Number, Object, RegExp, String, This.
2. obiecte personalizate, create de utilizator n funcie de cerinele
script-urilor (vezi Conversaia 12);
3. obiectele navigatorului (vezi Conversaiile 7, 8, 9, 10) sunt exterioare
limbajului dar sunt recunoscute de browser-e. Reprezint diferite
componente ale navigatorului i ale documentului (X)HTML curent.


8
Standardul DOM (Document Object Model) definete obiectele
navigatorului n mod ierarhic, dup cum urmeaz: Window,
Document, Navigator, Event, Screen, History i
Location.
Lista obiectelor navigatorului (n ordine alfabetic) este urmtoarea:
button, checkbox, document, event, fileUpload,
form, hidden, history, location, MimeType,
navigator, Objects (n general), option,
Option(), password, plugins, radio, reset,
screen, select, submit, text, textarea,
window.
Remarc. n JavaScript obiectele sunt considerate ca substantive.

Proprietate
O proprietate descrie un obiect.
Culoarea reprezint unul din atributele (proprietile) obiectului main. Poate
avea valoarea bleu.
n JavaScript height este o proprietate a obiectului window. De exemplu, ea
poate avea ca valoare 200.
O proprietate poate fi de asemenea un obiect care la rndul lui dispune de
proprieti. De exemplu, farurile sunt proprieti ale obiectului main. Dar
acestea sunt de asemenea obiecte care pot avea diverse proprieti: form,
culoare, putere.
n JavaScript, document este o proprietate a obiectului Window i este n
egal msur un obiect care are de asemenea proprieti.
n figura 1.1 sunt prezentate cteva exemple de proprieti ale unor obiecte
interne JavaScript (vezi Conversaiile 2 i 4).
Denumire obiect intern Proprieti
Array length
Math E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2,
SQRT
String length
Figura 1.1

9
n figura 1.2 sunt prezentate cteva exemple de proprieti ale unor obiecte ale
navigatorului (Conversaia 7).
Denumire obiect navigator Proprieti
Button align, defaultValue, disabled, form,
name, size, type, value
Checkbox align, checked, defaultchecked,
defaultValue, disabled, form, name, size,
status, type, value, width
Form acceptcharset, action, elements[],
encoding, enctype, length, method, name,
target
Remarc. n JavaScript proprietile sunt considerate ca adjective.

Metod
O metod este o funcie care definete un anumit comportament caracteristic al
unui obiect.
Metodele disponibile pentru fiecare obiect descriu ceea ce putei face cu acest
obiect.
Metoda deschide a obiectului maina are ca funcie deschiderea uilor.
n JavaScript, metoda close() a obiectului window are ca funcie nchiderea
ferestrei.
Fiecare obiect posed o colecie de metode, iar fiecare metod aparine cel puin
unui obiect.
n figura 1.3 sunt prezentate cteva exemple de metode ale unor obiecte interne
(vezi Conversaiile 2 i 4).
Denumire obiect intern Metode
Array concat(), join(), pop(), push(),
reverse(), shift(), slice(), sort(),
splice(), toString(), unShift()
Math abs(), acos(), asn(), atan(), ceil(),
cos(), exp(), floar(), log(), max(),
min(), pow(), random(), round(), sin(),
sqrt(), tan()
Figura 1.2
Figura 1.3

10
n figura 1.4 sunt prezentate cteva exemple de metode ale unor obiecte ale
navigatorului (vezi Conversaia 7).
Denumire obiect navigator Metode
Button blur(), click(), focus()
Checkbox blur(), click(), focus()
Remarc. n JavaScript metodele sunt considerate ca verbe.

Instruciune
O instruciune produce o aciune (afiarea unui text, modificarea proprietii unui
obiect, atribuirea unei variabile a unui nou coninut). Instruciunile combin
obiecte, proprieti i metode (substantive, adjective i verbe).
n figura 1.5 este prezentat un exemplu de script care conine instruciuni simple
JavaScript.
<script language = JavaScript type = text/JavaScript>
a=4;
b=13;
c=a+b;
document.write (Suma: +c);
</script>
Figura 1.4
Figura 1.5
Remarc. Instruciunile limbajului JavaScript sunt prezentate n Conversaia 3.

Funcie
O funcie este un grup de instruciuni tratate ca o singur entitate. Sau, o funcie
este un obiect care conine cod executabil. Spre deosebire de metode, funciile
nu sunt asociate nici unui obiect particular. Funciile pot fi comparate cu
electronii liberi care pot fi reutilizai n orice circumstan. Numeroase funcii
sunt interne: ele sunt incluse n limbajul JavaScript (Exemple: eval();
parseFloat(); parseInt()).
Nu trebuie s v surprind urmtoarea afirmaie: chiar dumneavoastr pute i s
v crea i propriile func ii!

Ceea ce este nemaipomenit!
n figura 1.6 se prezint un exemplu de funcie definit de utilizator: calculul
diametrului unui cerc de raz r.

11
<script language = JavaScript>
function diametru (r)
{
temp = 2*r;
return temp;
}
</script>
Figura 1.6
Remarc. Funciile sunt tratate n detaliu n Conversaia 2.

Evenimente
Un eveniment este ceva care se ntmpl.
n sens larg, informaiile pe care le notai n agenda dumneavoastr (Or la
dentist, Aniversarea lui Droopy, Ziua efului) sunt evenimente.
Diferite evenimente pot fi imprevizibile: contravenie pentru depire viteza
legal n localitate; o nunt cu dar la rudele nevestii; vizita neateptat a
soacrei etc.
Dac aceste evenimente sunt prevzute sau nu, este problema dumneavoastr
de a le gestiona. Gestiunea evenimentului Aniversarea lui Droopy va consta
probabil n a-i cumpra un cadou. Ct privete vizita soacrei reacia
dumneavoastr poate fi una normal: stinge i lumina pentru a demonstra c nu
sunte i acas!
Un eveniment JavaScript este o aciune care se produce n raport cu un element

(fereastr, document, un buton).
n JavaScript numeroase evenimente (clic, dublu clic etc.) sunt provocate de
utilizator. Alte evenimente nu privesc direct utilizatorul.
Iat o list cu cele mai frecvente evenimente JavaScript:
utilizatorul ncarc o pagin Web n browser;
utilizatorul oprete ncrcarea paginii Web n browser;
utilizatorul a introdus sau a modificat coninutul unui cmp de text al
unui formular;
utilizatorul a executat clic pe o imagine sau pe un buton;
utilizatorul a expediat coninutul unui formular sau l-a reiniializat.
Fiecare eveniment este asociat unui obiect.

12
Fiecare eveniment are propriul su nume.
De exemplu, evenimentul MouseOver se produce atunci cnd mouse-ul se
poziioneaz deasupra unui obiect. Dac mouse-ul trece pe deasupra unui link
(legtur), evenimentul MouseOver este expediat gestionarului de evenimente
al acestei legturi, dac exist.
n figura 1.7 sunt prezentate cteva exemple de evenimente JavaScript dintre
cele mai cunoscute.
Denumire eveniment Se declaneaz atunci cnd
click se execut clic pe un element
dblclick se execut dublu clic pe un element
help se activeaz tasta F1 n fereastra activ
keypress se acioneaz o tast a claviaturii

Gestionarii de evenimente
Gestionarii de evenimente JavaScript indic navigatorului cum s reacioneze
atunci cnd se produc diferite evenimente.
n general, un gestionar de evenimente ia forma unei funcii JavaScript pe care o
creai special pentru a prelucra un anume tip de eveniment, dar el poate fi
totodat o instruciune sau mai multe instruciuni JavaScript, care sunt integrate
n codul (X)HTML de definire al evenimentului.
Pentru a defini un gestionar de evenimente, adugai on la nceputul numelui
evenimentului. Astfel, gestionarul de evenimente onMouseOver este apelat
atunci cnd mouse-ul trece pe deasupra legturii (Gestionarul de evenimente
este plasat n tag-ul (X)HTML <a> al link-ului corespunztor).
Remarci:
Poate ai observat combinaia de majuscule i minuscule (exemplu: onMouseOver,
onMouseOut). Este vorba de notaia standard a gestionarilor de evenimente: on este
scris ntotdeauna cu minuscule, iar iniiala fiecruia din cuvintele evenimentului, cu
majuscule.
Evenimentele i gestionarii de evenimente JavaScript sunt tratate n detaliu n
Conversaia 6.

Figura 1.7

13
Variabile
Variabilele reprezint un element fundamental al limbajului JavaScript. Ele pot
conine: un numr, un ir de caractere sau un obiect.
Fiecare variabil poart un nume care respect anumite reguli de sintax.
n figura 1.8 se prezint cteva exemple de nume de variabile JavaScript
(valide).
nume_prof
nume_student_olimpic
a
_var13
stoc
Remarc. Variabilele JavaScript sunt tratate n detaliu n Conversaia 2.

Utilizarea limbajului JavaScript se reduce n principal la dou concepte de baz:
sintaxa JavaScript;
DOM-ul (Document Object Model modelul obiectelor documentului).
Sintaxa definete un ansamblu de reguli care trebuie respectate atunci cnd
scriei cod JavaScript. Aceste reguli nu sunt numeroase. Este bine s le
cunoatei ca apoi s le aplicai. Nu tiu cum este mai bine: s stai cu regulile n
cap sau cu capul n reguli! Procedai cum credei!
DOM-ul se refer la componentele paginii Web, obiectele pe care le putei
accesa i pe care le putei manipula cu ajutorul limbajului JavaScript.
Remarc. Obiectele interne, obiectele navigatorului i obiectele personalizate sunt tratate n
detaliu, n Conversaia 4, Conversaia 5, Conversaia 7, Conversaia 12.
Trebuie s v nsuii foarte bine DOM-ul JavaScript pentru a putea scrie un script
JavaScript.

Figura 1.8

14

Cum inserai un script ntr-un document (X)HTML?
Extinderea paginilor (X)HTML prin folosirea limbajului JavaScript confer paginilor
Web mai mult putere, iar (X)HTML-ului mai mult flexibilitate. JavaScript, prin
inserarea unui script n documentele (X)HTML existent permite programatorilor
s creeze pagini Web mult mai dinamice.

Elementul script
Script-urile JavaScript sunt inserate ntr-un document (X)HTML cu elementul
<script> ... </script>.
Elementul script este alctuit din: tag-ul de nceput <script>, coninutul
propriu-zis i tag-ul de sfrit </script>.
Tag-ul <script> conine urmtoarele atribute:
type indic tipul limbajului de script. Valoarea sa trebuie s fie
un Internet Media Type (un tip MIME), de
exemplu text/JavaScript sau text/vbscript
(figura 1.9).
<script type=text/JavaScript>
...cod JavaScript
</script>
language identific limbajul de script i facultativ versiunea (vezi
figura 1.10).
<script type=text/JavaScript language=JavaScript>
...cod JavaScript
</script>
src facultativ, precizeaz URL-ul fiierului extern care conine
script-ul (vezi figura 1.11).
<script type=text/JavaScript src=functie.js>
...cod JavaScript
</script>
Figura 1.9
Figura 1.10
Figura 1.11

15
Elementul noscript
Incapacitatea navigatorului de a prelucra un script poate avea trei cauze: fie el
nu tie s prelucreze script-urile n general; fie el nu recunoate limbajul
desemnat prin atributul type; fie utilizatorul a dezactivat (nu are ncredere!)
prelucrarea script-urilor. Din acest motiv se utilizeaz elementul <noscript>
... </noscript> n interiorul cruia putei plasa elementele (X)HTML care
vor fi ignorate de navigatoarele capabile s exploateze un script (vezi figura
1.12).
<script type=text/JavaScript>
cod JavaScript
</script>
<noscript>
Regretm c navigatorul dumneavoastr nu recunoate script-urile!
</noscript>

Figura 1.12
Metode de inserare a script-urilor ntr-un document (X)HTML
Rolul elementului script este de a defini script-ul care va fi utilizat n
documentul (X)HTML.
Pentru inserarea script-urilor n documentele dumneavoastr (X)HTML folosii
una din metodele prezentate mai jos:
Metoda 1 plasai script-ul n corpul paginii (ntre <body> i
</body>);
Metoda 2 plasai script-ul n antet-ul paginii (ntre <head> i
</head>);
Metoda 3 utilizai fiiere surs externe;
Metoda 4 creai un gestionar de evenimente.

Cum inserai un script n documentele XML
Cu JavaScript putei crea i manipula obiectele DOM XML. Pentru a construi
pagini Web interactive cu XML folosii tehnicile specifice ale DOM-ului XML i ale
limbajului JavaScript.

16
n lucrarea Liviu Dumitracu, XML, Editura Universitii
din Ploieti, n conversaia 9 se prezint n detaliu modul de inserare a
script-urilor n documentele XML.
Consultai de asemenea urmtoarele resurse:
Floarea Nstase, Pavel Nstase, Tehnologia aplicaiilor Web (XML, DOM,
ASP), Editura Economic 2002, Bucureti
http://www.dannyg.com/examples/xmltable/index.html

Scriei un script care afieaz mesajul: mi place s fiu ntotdeauna aa cum sunt.
Pentru inserarea script-ului ntr-un document (X)HTML utilizai toate cele patru metode pe
care le-am prezentat anterior.
Metoda 1
Iat cum procedm pentru a insera (cu Notepad) script-ul n corpul documentului
(X)HTML. Mesajul va fi afiat cu italice.
Dac dorii s inserai un script scurt, reprezentat prin cteva linii de cod JavaScript, cel
mai simplu este s-l plasai n corpul paginii.
1. Creai documentul (X)HTML (figura 1.13) cu Notepad.

Figura 1.13
2. Plasai elementul script n locul n care dorii s apar script-ul
dumneavoastr (figura 1.14).

17

3. Introducei n tag-ul de deschidere <script> atributul type pentru a preciza
tipul MIME al script-ului i atributul language pentru a preciza limbajul de
script (JavaScript), figura 1.15.

4. Inserai tag-ul de comentariu XHTML standard ( i plasai //
naintea tag-ului de sfrit de comentariu XHTML pentru a ascunde sfritul de
comentariu de interpretorul JavaScript (figura 1.16).

Remarc. Liniile de comentariu au fost inserate pentru a ascunde script-ul de navigatoarele care
nu-l recunosc.
5. Inserai instruciunea JavaScript document.write() care afieaz mesajul:
mi place s fiu ntotdeuna aa cum sunt. n pagina Web
(atunci cnd ea este ncrcat!), figura 1.17.

Figura 1.14
Figura 1.15
Figura 1.16
Figura 1.17

18
Remarci:
JavaScript ofer mai multe soluii pentru afiarea informaiilor, una dintre cele mai simple
fiind instruciunea document.write.
Instruciunea document.write (vezi Conversaia 7) permite afiarea unui text, a
valorilor numerice i a altor informaii. n msura n care programul dumneavoastr
JavaScript va fi inserat ntr-o pagin Web, rezultatul va fi afiat direct n pagin.
Tag-urile (X)HTML, <i> de exemplu, sunt plasate ntre ghilimele. Tag-urile (X)HTML nu
sunt interzise n interiorul tag-urilor <script>. Plasate ntre ghilimele, tag-urile
(X)HTML sunt interpretate de ctre navigator ca i cnd ar aparine (X)HTML-ului.
Facilitatea de combinare a tag-urilor (X)HTML i a instruciunilor JavaScript reprezint
una din caracteristicile cele mai puternice ale unui navigator care recunoate JavaScript.
n realitate, aceast facilitate constituie esena Web-ului dinamic i interactiv pe care
dumneavoastr urmeaz s-l aplicai.
6. Validai documentul XHTML 1.1 cu aplicaia validator (vezi figura 1.18).

7. Inserai codul XHTML care afieaz iconul de conformitate (figura 1.19).

8. Afiai pagina Web ntr-un browser (figura 1.20).

Figura 1.19
Figura 1.20
Figura 1.18

19
Procedura de creare automat a script-ului cu Dreamweaver MX
Iat cum procedm pentru a crea documentul XHTML pentru EXEMPLUL 1
JAVASCRIPT cu Dreamweaver MX.
1. n grupul de panouri Insert, executai clic pe subpanoul HTML (figura 1.21).

Figura 1.21
2. Executai clic n locul n care dorii s inserai script-ul (figura 1.22).

Figura 1.22
3. Executai clic pe butonul (Script), figura 1.23.

Figura 1.23

20
Remarc. Se deschide caseta de dialog Script (figura 1.24).

4. Introducei script-ul (figura 1.25).

Figura 1.24
Figura 1.25
5. Executai clic pe butonul OK al ferestrei de dialog Script (figura 1.26).

Figura 1.26

21
Remarc. Se insereaz elementul <script> ... </script> (figura 1.27).

6. Vizualizai pagina Web ntr-un browser (figura 1.28).

Metoda 2
Iat cum procedm pentru a insera (cu Notepad) script-ul n antet-ul paginii, n seciunea
<head> ... </head>.
Seciunea <head> a unei pagini (X)HTML precede seciunea <body>. Tag-urile i
script-urile cuprinse n aceast seciune sunt interpretate ntotdeauna primele. Din acest
motiv n mod frecvent se plaseaz n aceast seciune un script care definete variabilele
i funciile ce urmeaz a fi utilizate de ctre alte script-uri ale paginii.
Figura 1.28
Figura 1.27
1. Creai documentul (X)HTML cu Notepad.
2. Plasai tag-urile script n elementul head al documentului (X)HTML (figura
1.29).

22

3. Introducei funcia mesaj() (figura 1.30).

Figura 1.29
Figura 1.30
Remarci:
O funcie este un grup de instruciuni tratate ca o singur entitate. Pentru a utiliza o
funcie, va trebuie mai nti s o definii.
Funcia mesaj are rolul de a afia (cu italice) mesajul: mi place s fiu ntotdeauna aa
cum sunt. n pagina web.
Funcia mesaj ncepe cu cuvntul rezervat function urmat de numele funciei
(mesaj). Dup numele funciei urmeaz parantezele vide (). Dup cum vei vedea mai
trziu, aceste paranteze nu sunt ntotdeauna vide! Acoladele de deschidere ({) i de
nchidere (}) servesc la delimitarea instruciunilor JavaScript care alctuiesc corpul
funciei i permit navigatorului s tie unde ncepe i unde se termin o funcie. n
exemplul nostru, o singur linie de cod JavaScript apeleaz funcia document.write
(o metod a obiectului Document) care permite afiarea cu italice a mesajului mi
place s fiu ntotdeauna aa cum sunt..
4. Apelai funcia mesaj().
Funcia este acum definit i inserat n documentul (X)HTML, dar ...
inutilizabil n acest moment.
Pentru a putea utiliza o funcie, va trebui s-o apelai. Pentru a apela o funcie,
va trebui s utilizai numele su ntr-o instruciune a script-ului (vezi figura 1.31).

23

Remarc. Mai multe detalii despre funcii (definire, apel) gsii n Conversaia 2.
5. Validai documentul XHTML 1.1 cu aplicaia validator (vezi figura 1.32).

6. Inserai codul XHTML care afieaz iconul de conformitate (figura 1.33).

Figura 1.31
Figura 1.33
Figura 1.32
7. Afiai pagina ntr-un browser (figura 1.34).

Figura 1.34

24
Metoda 3
Iat cum procedm pentru a utiliza un fiier extern, n care plasm script-ul pentru
afiarea mesajului indicat.
Dac dorii s utilizai funciile de script n mai multe documente, atunci plasai-le
ntr-un fiier separat (cu extensia .js) pe care-l referii apoi din documentul
dumneavoastr.
Pentru a continua exemplul nostru, creai un script extern, funcie1.js (vezi figura
1.35).

Pentru a utiliza acest script extern indicai numele fiierului n atributul src al tag-ului
script (figura 1.36).

Figura 1.35
Figura 1.36
Remarc. Acelai script poate fi utilizat n mai multe pagini Web diferite.
n figura 1.37 se prezint documentul XHTML complet.

Figura 1.37

25
Validai documentul XHTML 1.1 cu aplicaia validator, inserai codul XHTML care
afieaz icon-ul de conformitate i afiai pagina Web ntr-un browser.
Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n figura 1.38.

Metoda 4
Iat cum procedm pentru a crea un script care afieaz mesajul indicat cu ajutorul
gestionarului de evenimente onClick.
1. Creai documentul XHTML (figura 1.39).

2. Introducei n tag-ul <input /> gestionarul de evenimente onClick (vezi
figura 1.40).

Remarci:
Nu este obligatoriu ca toate script-urile JavaScript s se gseasc n interiorul tag-urilor
<script> ... </script>. Putei apela, de asemenea la script-uri sub forma
gestionarilor de evenimente, care indic navigatorului cum s reacioneze atunci cnd se
produc anumite evenimente.
Figura 1.39
Figura 1.40
Figura 1.38

26
Gestionarii de evenimente sunt funcii puternice JavaScript. Din fericire, ele sunt uor de
programat. Uneori este suficient o singur instruciune pentru a-l activa.
Fiecare eveniment are propriul su nume, de exemplu click. Pentru a defini un
gestionar de evenimente, adugai on la nceputul numelui evenimentului (de exemplu,
onClick).
Gestionarul de evenimente onClick este activat atunci cnd se execut clic pe
butonul logo. Gestionarul de evenimente onClick este plasat n interiorul tag-ului
<input /> al formularului, ca un atribut al acestui tag.
Instruciunea JavaScript care reacioneaz la eveniment trebuie s fie plasat ntre
ghilimele. De cele mai multe ori aceast instruciune va fi o funcie, n msura n care
funciile au avantajul de-a avea un nume precis, semnificativ i de a conine mai multe
instruciuni.
Obiectul Window conine trei metode (alert, confirm, prompt) practice
pentru afiarea mesajelor i interactivitatea cu utilizatorul. Metoda alert() afieaz o
caset de dialog de avertizare. Ea servete pentru transmiterea informaiilor
utilizatorului.
Metoda alert() este prezentat n detaliu n Conversaia 2.
3. Validai documentul (X)HTML 1.1 cu aplicaia validator (vezi figura 1.41).

4. Inserai codul XHTML care afieaz icon-ul de conformitate .

Figura 1.41
Figura 1.42

27
Aplicaie
Modificai documentul XHTML din figura 1.40 astfel nct funcia apelat din
gestionarul de evenimente onClick s fie programat ntr-un script situat n seciunea
<head> a documentului (figura 1.43).

Rezultatul execuiei script-ului este prezentat n figura 1.44.

Figura 1.44
(continuare)
Figura 1.43
Figura 1.44
Script-urile JavaScript sunt salvate ca fiiere de tip text.

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

Pentru script-urile (JavaScript) pe care urmeaz s le creai nu avei nevoie dect
de dou instrumente de baz:
un editor de text (simplu);
un navigator.
Remarc. nainte de a v lansa n provocarea JavaScript pe care v-am lansat-o, v sugerm s
v formai un background (X)HTML care s cuprind: tag-urile (X)HTML, cadrele i n mod
special formularele. Consultai urmtoarea list de site-uri:
www.htmlreference.com
www.w3.org
www.w3.org/TR/2001/REC-xhtml11-20020531/
JavaScript i navigatoarele
Ca i documentele (X)HTML, script-urile JavaScript au nevoie de un navigator
pentru a fi afiate. Dar, navigatoarele nu interpreteaz instruciunile n acelai
mod.
(X)HTML are puine probleme, dar consecinele unei incompatibiliti JavaScript
pot fi semnificative.
La ora actual, dou navigatoare domin piaa: Netscape i Microsoft Internet
Explorer. Cele dou navigatoare rmn n continuare; nu uitai acest lucru atunci
cnd v creai propriile pagini.
Remarc. JavaScript 1.5, nu este recunoscut oficial dect de Netscape 6.0 i de Internet Explorer
5.5 i urmtoarele.

Resursele JavaScript de care avei nevoie

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

30

JavaScript 1.5
Dup prima sa versiune (JavaScript 1.0) lansat n anul 1995 de ctre Netscape
(Netscape 2.0) JavaScript a evoluat considerabil.
Exist n prezent cinci versiuni: 1.0, 1.1, 1.2, 1.3 i 1.5 fiecare dintre acestea
aducnd mbuntiri importante n raport cu precedentele.
Remarc. La nceput (anul 1995), JavaScript se chema Live Script. El a fost rebotezat JavaScript
pentru a evoca marketingul comun cu limbajul Java. JavaScript este primul limbaj de script
dezvoltat pentru Web.
n paralel, Microsoft a dezvoltat propriul su limbaj JavaScript denumit JScript
n care se regsete cea mai mare parte a elementelor limbajului de origine la
care a adugat propriile sale specificaii.
Rezultatul: JavaScript nu este un standard. Navigatoarele
Netscape ignor specificaiile JScript iar Internet Explorer ignor pe cele ale lui
JavaScript. Opera a introdus JavaScript ncepnd cu versiunea 3 a navigatorului
su.
Prezentm n continuare (vezi figura 1.45 i figura 1.46) navigatoarele i
versiunile JavaScript sau JS pe care acestea le recunosc.
Versiunea limba ului JavaScript j Netscape
JavaScript 1.0 2.x
JavaScript 1.1 3.x
JavaScript 1.2 4.0 4.5
JavaScript 1.3 4.6 4.7
JavaScript 1.5 6

Figura 1.45

31

Versiunea limbajului JScript Internet Explorer
JScript 1.0 3.02
JScript 3.0 4.0
JScript 5.0 5.0
JScript 5.5 5.5
JavaScript 5.6 6
Pentru a pune capt acestor divergene a fost necesar crearea a dou
standarde: ECMA i DOM.
ECMA (European Computer Makers Association) a publicat norma ECMA
262, o versiune standardizat a limbajului JavaScript, cunoscut sub
numele de ECMA Script. JavaScript 1.3 este conform cu norma ECMA
262 iar JavaScript 1.5 este conform cu ECMA 262, versiunea 3.
Netscape funcioneaz de asemenea cu ECMA sub JavaScript 2.0,
viitoarea versiune care va corespunde celei de-a patra ediii a normei
ECMA Script. JavaScript 2.0 va constitui o versiune mult mbuntit
fa de precedentele.
W3C (World Wide Web Consortium) a creat DOM (Document Object
Model) care descrie elementele paginii Web (obiectele) i modul n care
acestea se relaioneaz.

Remarci:
La ora actual dou navigatoare domin piaa: Netscape i Microsoft Internet Explorer,
dar nu trebuie neglijai nici utilizatorii altor navigatoare.
Acordai toat atenia navigatorului (i versiunile acestora) care prelucreaz JavaScript.
Atenie la incompatibiliti! Implementarea JavaScript pe Internet Explorer i Netscape
Navigator nu este identic.

JavaScript 2.0
La data redactrii acestei lucrri, JavaScript 2.0 era n curs de lansare. Vom trece
deci de la versiunea 1.5 la 2.0. Motivul principal al dezvoltrii JavaScript este
creterea puterii limbajului, dar i a capacitii sale de a se alinia la alte
standarde precum: C++ i Java.
Ca elemente de noutate ale versiunii JavaScript 2.0 amintim:
Figura 1.46
semne de punctuaie suplimentare:
#; &&=; ->; ..; ; @; ^^; ^^=; !=;

32
cuvinte rezervate suplimentare:
abstact; debugger; enum; goto; native;
protected; synchronized; throws; transient.
Remarc. Dac dorii s cunoatei mai mult despre JavaScript 2.0, vizitai site-ul
http://www.mozilla.org/js/language/js20/.

33

Tem

JavaScript
Testai-v cunotinele
1. Ce nelegei prin stilul de via Web?
2. Prin ce se deosebesc limbajele Java i JavaScript?
3. Care sunt virtuile limbajului JavaScript?
4. Cum pot fi inserate script-urile n documentele HTML 4.0, XHTML,
Dreamweaver MX i XML?
5. Care sunt obiectele interne ale limbajului JavaScript?
6. Cnd folosii elementul noscript?
7. Care este procedura de creare automat a script-urilor cu Dreamweaver MX?
8. Care sunt resursele necesare pentru crearea script-urilor JavaScript?
9. Cum se relaioneaz JavaScript cu navigatoarele?

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

Conversaia 2

Variabile i funcii

Variabile i func ii. Aplica ii
Crearea automat a script-urilor cu Dreamweaver MX
Cuvinte rezervate JavaScript
Tem

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

De obicei, limbajele de programare cer s definii tipul de date pe care-l va
reprezenta o variabil, n plus se genereaz o eroare atunci cnd ncercai s-i
atribuii variabilei un alt tip de date. Din fericire, aa ceva nu se ntmpl n
JavaScript, care este un limbaj flexibil. Variabilele JavaScript pot accepta oricnd
un nou tip de date, fapt care duce la modificarea tipului variabilei.

34
La nivel elementar, n JavaScript nu exist dect patru tipuri de date:
numerice ntregi;
numerice n virgul flotant;
caracter;
boolean.
Toate celelalte tipuri de date pe care le vei ntlni n limbajul JavaScript sunt
obiecte combinaii ale celor patru tipuri de baz.
De exemplu irurile de caractere sunt obiecte care reprezint o colec ie de
caractere
,
.
t t

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

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

ir de caractere
Cu siguran c dumneavoastr vei lucra foarte mult cu tipul de date ir de
caractere (alfanumerice).
Un ir de caractere (st ing, n limba englez) este compus din litere, cifre,
simboluri, caractere speciale i secvene de ieire. Coninutul unui ir de
caractere este considerat tot timpul ca fiind text, chiar dac el const din cifre i
simboluri numerice. Un ir de caractere este ncadrat de ghilimele simple sau
duble. Un ir de caractere ncadrat de ghilimele duble poate fi inclus ntr-un ir
ncadrat de ghilimele simple i vice versa.
r
Aplicaie
Testai irurile de caractere: septembrie; 9.80; Salut, Droopy!; a=01;
anume=minim cu urmtorul script (figura 2.4).

Indicaie. Introducei n variabila sir datele de test (irurile de caractere indicate).
Figura 2.3
Figura 2.4

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

Valori logice sau booleene
Ele sunt n numr de dou: true (adevrat) i false (fals).
Cele dou valori se folosesc pentru a indica dac rezultatul evalurii unei condiii
este adevrat sau nu.
Nu v lsai impresionai de aceti termeni!
n figura 2.5 se prezint un exemplu de utilizare a celor dou valori booleene.
<script>
x=true;
y=false;
</script>
Remarc. Cele dou valori nu sunt plasate ntre ghilimele, ntruct true i false sunt cuvinte cheie
(vezi figura 2.5) JavaScript, avnd o semnificaie precis pentru interpretorul JavaScript.

Valorile speciale JavaScript
n limbajul JavaScript putei ntlni de asemenea i anumite valori speciale pe
care vi le semnalm n cele ce urmeaz: Infinity, NaN, null.
Infinity
Este o valoare numeric special care se returneaz dac un numr n virgul
flotant este superior valorii maxime autorizate sau este inferior valorii minime
autorizate.
Infinity poate fi pozitiv sau negativ.
Remarc. Folosii proprietile obiectului Number: Number.POSITIVE_INFINITY i
Number.NEGATIVE_INFINITY pentru a testa dac Infinity este pozitiv sau negativ
(vezi Conversaia 2 (continuare)).
Atunci cnd o expresie aritmetic conine o valoare Infinity, ea returneaz
ntotdeauna infinity (vezi figura 2.6).
Figura 2.5

37

NaN
NaN (Not a Number, n limba englez) este o valoare special furnizat ca
rezultat de cteva operaii aritmetice (vezi figura 2.7).
Remarc. NaN semnific: acesta nu este un numr!

null
null este o valoare special care indic absena valorii (figura 2.8).
Remarci:
null nu este egal nici cu zero i nici cu undefined;
Valoarea null se poate simula cu operatorul void: var null=void(0).
<script>
document.write(figura);
//afieaz null;
</script>
undefined
undefined este o valoare special nedefinit.
Remarci:
undefined nu este egal nici cu null nici cu zero.
Valoarea undefined este returnat n cazul utilizrii unei variabile care nu a fost
definit sau n cazul unei variabile care a fost declarat dar fr coninut (figura 2.9).
Figura 2.6
Figura 2.7
Figura 2.8
Valoarea undefined este des confundat cu null de ctre navigatoare.

38

Variabile JavaScript
Spre deosebire de alte limbaje de programare care impun declararea prealabil a
variabilelor, cu specificarea tipului de date pe care acestea le conin (ntregi,
reale, caracter etc.) JavaScript procedeaz puin altfel: o variabil este creat
prin simpla afectare (atribuire) a unei valori, din acel moment ea devenind
disponibil. Dac suntei obinuit cu declararea prealabil a variabilelor, v va
trebui puin timp pentru a v acomoda cu acest mod de lucru rapid i ... cu
puin practic vei aprecia cu siguran aceast virtute deosebit a limbajului
JavaScript.
Tipuri de variabile
n limbajul JavaScript nu trebuie s specificai tipul variabilelor. Atunci cnd creai
o variabil, valoarea pe care o atribuii determin tipul variabilei (vezi figura
2.10).
<script>
a=83;
//a este o variabil de tip numeric
mesaj=Au nnebunit salcmii!;
//mesaj este o variabil de tip ir de caractere
</script>
Remarc. O variabil poate s-i schimbe tipul, n mod dinamic, n interiorul aceluiai script (vezi
figura 2.11).
<script>
b=nemaipomenit;
b=10;
</script>

Variabile i funcii
Figura 2.9
Figura 2.10
Figura 2.11

39
Numele variabilelor
Fiecare variabil are un nume. Regulile dup care se formeaz numele
variabilelor sunt urmtoarele:
numele variabilelor pot conine toate literele alfabetului (majuscule sau
minuscule), cifre (0 la 9) i caracterul de subliniere (_);
numele variabilelor nu trebuie s conin spaii i semne de punctuaie;
numele variabilelor sunt sensibile la majuscule i minuscule;
primul caracter al numelui unei variabile trebuie s fie o liter sau un caracter
de subliniere;
nu este o limit teoretic pentru numrul de caractere al numelui unei variabile
dar nu uitai c trebuie s tastai corect de dou ori numele unei variabile
pentru a putea fi utilizat (nu v complicai viaa!)
n figura 2.12 se prezint cteva exemple de nume de variabile valide i invalide.
Nume valide Nume invalide
nr_persoane TURCA
NumrPersoane <abc
a1 a1
b b>1a
_var13 +a13
Figura 2.12
Remarci:
n afar de variabilele scalare, care nu reprezint dect o singur entitate mai exist i
matrici (vezi Conversaia 4).
n general, variabilele scalare nu sunt declarate, dar n diferite cazuri ele pot fi declarate
ca fiind de un tip particular (boolean, number sau string).
JavaScript recunoate mai multe tipuri de constante: ntregi (pot fi exprimate n sistem
zecimal, octal sau hexazecimal); flotante; iruri de caractere; boolean.
Variabile locale i globale
n JavaScript, cuvntul cheie var poate servi la declararea unei variabile. Totui,
n foarte multe cazuri, putei s-l omitei. Variabila va fi n mod automat declarat
n momentul n care i atribuii o valoare. Pentru a ti n care situaie o variabil
trebuie s fie declarat trebuie s nelegem mai nti conceptul de
portabilitate (scope, n limba englez).
Portabilitatea unei variabile (sau funcii) indic dac variabila (sau funcia)
definite ntr-o zon a programului sunt accesibile dintr-o alt zon a programului.

Exist dou tipuri de variabile:

40
variabile globale - sunt definite n exteriorul oricrei funcii JavaScript
(funciile sunt ntotdeauna globale);
variabile locale - sunt definite n interiorul unei funcii. Utilizai
cuvntul cheie var pentru a evita confuzia ntre o
variabil local i o variabil global cu acelai
nume (omonim).
Exemplul din figura 2.13 v va ajuta s nelegei mai bine conceptul de
portabilitate (Teoria fr prax ...).

n figura 2.14 este prezentat rezultatul execuiei script-ului.

Figura 2.13
Figura 2.14

41
Aplicaie
Simulai funcionarea acestui script (vezi figura 2.13). Dac i dup acest exerciiu,
conceptul de portabilitate vi se pare i mai confuz, nu disperai! Vom reveni cu explicaii
suplimentare!

Cum atribui i valori variabilelor?
Dou sunt modurile prin care se atribuie valori variabilelor JavaScript:
n mod static - utilizai semnul = pentru a afecta o valoare
unei variabile (instruciunea de atribuire).
n mod dinamic - utilizai metoda prompt().
Remarci:
Structura instruciunii de atribuire este foarte simpl: variabila din stnga semnului egal
(=) ia valoarea indicat n dreapta semnului egal (vezi figura 2.15).
<script>
pi=3.14159;
i=i+1;
nume=Droopy;
prenume=Ion;
</script>
Instruciunile JavaScript trebuie s se termine cu punct i virgul ... sau nu! Dac dorii
s plasai mai mult de o instruciune pe o linie, punct i virgul este obligatoriu dup
fiecare instruciune (figura 2.16).
<script>
pi=3.14159; i=i+1; nume=Droopy; prenume=Ion;
</script>
Metoda prompt() (vezi obiectul Window, Conversaia 7) deschide o caset de dialog
care conine: mesajul indicat (primul argument), o zon de text ce urmeaz a fi
completat de utilizator (al doilea argument), butonul OK i butonul Cancel. Cel de-al
doilea argument este facultativ. Dac el este absent, zona de text afieaz implicit
undefined. Utilizatorul poate s introduc o alt valoare sau s execute clic pe
butonul OK pentru a accepta rspunsul implicit. Dac utilizatorul execut clic pe butonul
OK, valoarea coninut n zona de text este returnat script-ului; dac execut clic pe
butonul Cancel, valoarea null este returnat script-ului. Instruciunea urmtoare:
var raspuns=prompt(Care este numele tatalui?, );
deschide caseta de dialog prezentat n figura 2.17.

Figura 2.15
Figura 2.16
Figura 2.17

42
Conversia tipurilor de date
Ori de cte ori este posibil JavaScript convertete n mod automat tipul de date
ntlnit.
Pentru conversia tipurilor de date, JavaScript propune urmtoarele dou funcii:
parseInt() - convertete un ir de caractere ntr-un numr
ntreg.
parseFloat() - convertete un ir de caractere ntr-un numr n
virgul mobil.
Remarc. Cele dou funcii detecteaz numerele la nceputul irului de caractere. Dac nici unul
din numere nu este gsit la nceputul irului de caractere, funciile returneaz valoarea NaN (Not
a Number).

Aplicaie
Simulai funcionarea urmtorului script (vezi figura 2.18).

Funcii JavaScript
Defini i o func ie
O funcie este un grup de instruciuni tratate ca o singur entitate. Pentru a
utiliza o funcie va trebui mai nti s-o definii.
Iat cum definim o funcie (logo()) care afieaz mesajul: mi place s fiu
ntotdeauna aa cum sun . t
Figura 2.18

43
n figura 2.19 este prezentat funcia pe care ne-am propus s-o construim.
function logo(){
alert(Imi place sa fiu intotdeauna asa cum sunt.);
}
Funcia este foarte simpl, dar vom analiza rapid fiecare din elementele sale.
Primul element este cuvntul cheie function (figura 2.20) care indic
interpretorului JavaScript c blocul de cod care urmeaz trebuie s fie
tratat ca pe o funcie i numai dup aceea el este apelat n mod explicit.
function logo (){

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

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

}
Al patrulea element este acolada de deschidere, care marcheaz debutul
corpului funciei (vezi figura 2.22).
Al cincilea element, pe linia urmtoare (figura 2.23) este metoda
alert, care afieaz ntr-o caset de dialog textul indicat n interiorul
parantezelor.
function logo(){
alert(Imi place sa fiu intotdeauna asa cum sunt.);
}
Ultimul element este acolada de nchidere (figura 2.24), care marcheaz
sfritul funciei.
function logo(){

}
Figura 2.19
Figura 2.20
Figura 2.21
Figura 2.22
Figura 2.23
Figura 2.24
S revenim la paranteze. Exemplul nostru (funcia logo()) face
ntotdeauna acelai lucru: ea va afia acelai mesaj ori de cte ori este apelat.
Ceea ce nu este nemaipomenit!

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

Figura 2.25
Figura 2.26
Apela i func ia
n acest moment funcia (logo(mesaj)) este definit i inserat ntr-un
document (X)HTML.

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

Pentru a nelege mai bine cum lucreaz funcia logo(mesaj), apelai
funcia de dou ori, pentru a afia dou logo-uri diferite (vezi figura 2.27).
Remarci:
Documentul XHTML (vezi figura 2.27) conine al doilea set de tag-uri <script> inserat
n corpul paginii.
n cel de-al doilea script vei gsi dou apeluri ale funciei logo(), fiecare cu un mesaj
diferit (vezi figura 2.28).

Figura 2.27
Figura 2.28
n figura 2.29 se prezint rezultatul execuiei funciei logo(). Pentru a afia cel
de-al doilea logo executai clic pe butonul OK.

46

Figura 2.29
Returnarea unei valori
Funcia (logo()) pe care am creat-o n aplicaia precedent afieaz un mesaj.
O funcie poate, de asemenea returna o valoare script-ului apelant.
Iat cum procedm pentru a defini i apela o funcie care calculeaz media
aritmetic a trei valori.
n figura 2.30 este prezentat funcia pe care ne-am propus s-o construim.
function media(a,b,c){
rezultat=(a+b+c)/3.0;
return rezultat;
}
Remarci:
Funcia ncepe cu function cuvnt rezervat, urmat de numele funciei media i de
trei parametrii a, b, c pentru cele trei valori (numerice).
Acolada de deschidere a fost plasat la sfritul primei linii, dar putei foarte bine s o
izolai pe o singur linie, sau s o plasai la nceputul liniei urmtoare.
Variabila (local) rezultat stocheaz media aritmetic a celor 3 valori numerice.
Pentru a returna rezultatul (rezultat) script-ului, utilizm cuvntul rezervat return
(vezi figura 2.31).
...
return rezultat;
}
Figura 2.29
(continuare)
Figura 2.30
Figura 2.31

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

Remarci:
Pentru apelul funciei putei folosi o variabil de stare (mediaaritmetic, n
exemplul nostru).
Putei plasa apelul unei funcii ntr-o expresie.
n paralel cu variabilele i valorile constantelor, putei utiliza apelul funciilor care
returneaz rezultatele n interiorul unei expresii (vezi figura 2.33).
...
alert(media(7,8,9));
...

Crearea automat a script-urilor cu Macromedia
DREAMWEAVER
Figura 2.32
Figura 2.33
Dup cum am precizat n Conversaia 1 (vezi paragraful: Oferta de editoare
JavaScript), Macromedia Dreamweaver MX poate fi folosit i ca editor JavaScript.
Funciile sale specifice, modul simplu de utilizare l recomand ca pe un excelent
instrument de editare a script-urilor.
n figura 2.34 sunt prezentate cele mai utilizate funcii JavaScript puse la
dispoziie de Dreamweaver.

48

Iat cum procedm pentru a crea un script care calculeaz aria unei sfere (Area
of Sphere).
1. n grupul de panouri Insert, executai clic pe subpanoul HTML
(figura 2.35).

2. Executai clic n locul n care dorii s inserai script-ul.
3. Executai clic pe butonul (Script), figura 2.36.

Figura 2.34
Figura 2.35
Figura 2.36
Remarc. Se deschide caseta de dialog Script (figura 2.37).

49

Figura 2.37
4. Executai clic pe butonul OK al ferestrei de dialog Script (figura 2.38).

Figura 2.38
Remarc. Se insereaz elementul <script> ... </script> (figura 2.39).

50

5. ntre tag-urile <script> i </script> inserai funcia
areaOfSphere (figura 2.40, figura 2.41).

Figura 2.39
Figura 2.40

51

6. Apelai funcia areaOfSphere (radius), pentru radius=3 (figura 2.42), n
corpul documentului.

Figura 2.41
Figura 2.42

52

Remarc. Pentru afiarea rezultatului cu dou zecimale consultai Conversaia 8.
Figura 2.43

De la problem la script
Prima etap pe care trebuie s-o parcurgei n lungul drum al problemei ctre script o
constituie definirea obiectivului script-ului. n consecin, luai o foaie de hrtie i pre de
cteva minute adunai cuvintele ... potrivite pentru a descrie pe scurt modul de rezolvare
informatic a problemei. Altfel spus, redactai cu cuvinte obinuite acest mic caiet de
sarcini. Succes!
Iat cum formulm pe scurt problema pe care dorim s o rezolvm cu JavaScript: creai o
pagin Web care s afieze aria unui rezervor sferic cu raza de 3m.
Ce problem simpl, vei exclama! ntr-adevr, problema nu este dificil, dar trebuie s
recunoatem c ceea ce pare simplu pentru unii este foarte complicat pentru alii.
Desigur, ea poate fi rezolvat foarte bine i de ctre un elev de coal elementar sau
chiar de un adult (prinii elevului!). Obiectivul nostru, ns este rezolvarea informatic a
problemei utiliznd limbajul JavaScript.
Remarci:
Procesul de alctuire a unui script, pe care il vom urma pe tot parcursul lucrrii, const
din urmtoarele faze:
analiza problemei;
proiectarea programului (script-ului);
codificarea n limbajul JavaScript;
testare i depanare.
n cadrul fazei de analiz se definesc:
formatul datelor de ieire;
tabela de variabile;
specificaiile de programare (descriere script, intrri, ieiri, list funciuni).
Asigurndu-ne c nu s-au strecurat greeli n faza de analiz a problemei, putem aborda
n continuare faza de proiectare a script-ului, utiliznd ca instrumente de proiectare:
pseudocodul, diagrama de structur a prelucrrilor etc.
Pseudocodul este un limbaj independent de limbajul de programare (nu exist un
standard!). Limbajul pseudocod pe care vi-l propunem este alctuit din cteva
instruciuni standard ce definesc structurile algoritmice fundamentale (secvena, iteraia,
selecia) la care se adaug instruciuni, n bun parte aflate la latitudinea celui care
realizeaz documentaia de analiz i proiectare a programului.


53
Analiza problemei
nainte de a scrie un program (JavaScript) trebuie s cunoatem i s nelegem foarte
bine problema (Analiza problemei). n cazul nostru, problema este una dintre cele mai
simple: calculul ariei unui rezervor sferic atunci cnd se cunoate raza.
n rezolvarea acestei probleme se urmrete crearea unei pagini Web, n care s se
afieze simplu, ntr-o form deloc pretenioas, cele dou valori pentru raz (3) i arie
(vezi figura 2.44).

Remarc. Ecranul din figura 2.44 reprezint formatul datelor de ieire.
V mai amintii cum se calculeaz aria unei sfere, cci despre ea este vorba. Se nmulesc: patru cu
trei i paisprezece () i cu ptratul razei. Cam dificil aceast exprimare, nu vi se pare? S alegem
pentru arie i raz cte un nume de variabil semnificativ, urmnd apoi s codificm n JavaScript
formula de calcul prezentat (A=4R
2
).

Tabela de variabile
n figura 2.45 sunt prezentate: variabilele de ieire, variabilele de intrare i variabilele de stare,
structurate ntr-o tabel de variabile, document care se realizeaz n faza de analiz structurat
a problemei.
Tabela de variabile
Variabile de intrare Variabile de stare Variabile de iesire
r: raza cercului aria: aria rezervorului sferic
Remarc. n situaia n care variabilele de ieire i variabilele de intrare nu sunt suficiente, definii
un al treilea tip de variabil: variabile de stare, care nu sunt nici de intrare i nici de ieire.
Descrierea script-ului JavaScript, precum i lista principalelor funciuni sunt prezentate n
figura 2.46.
Figura 2.44
Figura 2.45

54

Specificaii de programare
Descrierea programului
Script-ul calculeaz i afieaz aria unui rezervor sferic cu raza de 3 m.
Intrri: -
Ieiri: Aria rezervorului sferic cu raza de 3 m.
Lista de funciuni ale script-ului
1. Atribuie variabilei r (de stare) valoarea 3.
2. Calculeaz aria rezervorului sferic.
3. Afieaz raza i aria rezervorului sferic (aria).
4. Stop.

Asigurndu-ne c nu s-au strecurat greeli n faza de analiz a problemei, putem
aborda n continuare faza de proiectare a script-ului.

Proiectarea script-ului
Pentru proiectarea script-ului vom folosi ca instrument de proiectare, pseudocodul, cu
una din variantele prezentate mai jos:
Varianta 1 scrierea n limbaj natural structurat;
Varianta 2 scriere formalizat (apropiat de limbajul JavaScript).
Iat cum procedm pentru a construi pseudocodul n ambele variante.
Varianta 1
n figura 2.47 se prezint pseudocodul n limbaj natural structurat.
Pseudocodul (Varianta 1)
1. Atribuii razei (r) valoarea 3.
2. Calculai aria (aria) rezervorului sferic.
3. Afiai raza (r)
4. Afiai rezultatul (aria).
5. Stop.
Remarc. Prezentarea algoritmului n limbaj natural structurat are, dup cum ai putut constata i
unele dezavantaje: lizibilitate redus, exprimri lungi, greoaie etc.
Varianta 2
Figura 2.47
Figura 2.46
Varianta prezentrii algoritmului de o manier formalizat este de preferat celei narative
(Varianta 1). Se prefer o formalizare a aciunilor primitive (atribuie, calculeaz, afieaz)
care s pun n eviden att variabilele de intrare/ieire ct i variabilele de stare.

55
n consecin, s-o folosim ct este cu putin pe aceasta.
n figura 2.48 se prezint pseudocodul n manier formalizat.
REZERVOR BEGIN
r=3
aria=4 r
2
WRITE(r)
WRITE(aria)
REZERVOR END

Figura 2.48

Anumite cuvinte nu pot fi utilizate ca nume de variabile, funcii, obiecte i
metode. n figura 2.49 se prezint lista cuvintelor rezervate.
break in false this void
continue for new true while
delete function null var typeof
with else return if abstract
default implements private throw boolean
do import protected throws byte
double instanceof public translent case
extends int short try catch
final interface static char finally
long class float native switch
goto package super synchronized const
enum debugger volatile export

Cuvintele rezervate JavaScript
Figura 2.49

56

Tem

Testai-v cunotinele
1. Identificai erorile de sintax din urmtoarele script-uri:
Figura 11.1 (Conversaia 11);
Figura 11.3 (Conversaia 11).
2. Care sunt valorile speciale JavaScript?
3. Ce tip de date putei atribui unei variabile JavaScript?
4. Care este deosebirea dintre o variabil local i o variabil global?
5. Ce execut prima dat un navigator?
un script din antet-ul paginii;
un script din corpul paginii;
un gestionar de evenimente plasat n tag-ul <body>.
6. O funcie JavaScript:
accept parametrii;
returneaz o valoare;
ambele variante.
7. Care sunt cele dou constante booleene?
8. Cum definii o funcie JavaScript?
9. Cum atribuii valori variabilelor?
10. Ce realizeaz funcia parseInt()?
11. Care este semnificaia cuvntului rezervat return?

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

JavaScript

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

r

Conversaia 2
(continuare)

Operatorii JavaScript. Obiecte matematice

Obiectul Math
Obiectul Number
Obiectul Boolean
Tem


Pentru a crea programe utile JavaScript, trebuie s evaluai sau chiar s
modificai datele pe care le prelucreaz script-urile dumneavoastr.
Instrumentele necesare pentru realizarea acestor operaii se numesc ope atori.
Operatorii [1] sunt simbolurile i identificatorii care reprezint fie felul n care
sunt modificate datele, fie felul n care este evaluat o combinaie de expresii.
JavaScript recunoate att operatorii binari (necesit existena a doi operanzi n
expresie) ct i operatorii unari (necesit existena unui singur operand n
expresie).
Cei mai muli dintre operatorii JavaScript sunt recunoscui de ctre toate
navigatoarele, dar ... mai exist i divergene!

58
n continuare, vom proceda la o clasificare a operatorilor din limbajul JavaScript
urmnd ca apoi s-i examinm pe fiecare n parte (vezi figura 2.50).
Tipuri de operatori Operatorii JavaScript
aritmetici % (modulo); ++ (increment); (decrement); +
(adunare); (scdere); * (nmulire); / (mprire)
atribuire plus combinaii
(ntre operatorul de
atribuire i operatorii
aritmetici)
= (atribuire simpl); += (atribuire cu adunare); =
(atribuire cu scdere); *= (atribuire cu nmulire); /=
(atribuire cu mprire); %= (atribuire cu modulo)
relaionali (de comparaie) < (mai mic); > (mai mare); <= (mai mic sau egal); >=
(mai mare sau egal); == (egalitate); === (identitate);
!= (non egal); !== (non identic)
booleeni (logici) && (AND); || (OR); ^ (SAU EXCLUSIV); ! (NOT)
operatori pentru funcii (); , (virgula)
operatori pentru structuri
de date
. (punctul); []
operatori condiionali ?:
operatori pentru iruri toi operatorii relaionali (de comparaie) i operatorul
de concatenare (+)
operatorul typeof
operatorul delete
operatorul new
operatorul void

Operatorii JavaScript sunt prezentai n detaliu n figura 2.51.
Operator Sintax
+ operand1 + operand2

Adunare sau concatenare.
1. Tip de date: numeric.
Operator aritmetic.
Remarc. Dac unul din operatori este NaN, rezultatul este NaN.
2. Tip de date: alfanumeric (ir de caractere).
Operator de concatenare.
Remarc. Operatorul + servete n general pentru efectuarea convertirii
tuturor tipurilor de date n iruri de caractere.

Exemplu:
<script>
a=8;
b=7;
z=3+8;
c=a+b;
alert(z); // afieaz 11
alert(c); // afieaz 15
</script>
<script>
prenume=Vasile;
nume=Adam;
numecomplet=Domnul +
prenume+ +nume;
alert(numecomplet);
// afieaz Domnul Vasile Adam
</script>
Figura 2.50

Figura 2.51

59
+= operand1 += operand2

Adunare sau concatenare asociat unei atribuiri.
1. Tip de date: numeric.
Operator aritmetic i de atribuire.
Remarc. Echivalent cu: operand1= operand1 + operand2.
2. Tip de date: alfanumeric.
Operator de concatenare i de atribuire.
Remarc. Coninutul variabilei situate la stnga operatorului este completat cu
data alfanumeric din dreapta operatorului.

Exemplu:
<script>
a=3;
a+=6;
alert(a);
//afieaz 9
</script>
<script>
numecomplet=Dumitrescu;
nume=Vasile;
numecomplet+=nume;
alert(numecomplet);
// afieaz Dumitrescu Vasile
</script>
++ ++ operand
operand++

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

Exemplu:
<script>
//post-incrementare
a=5;
alert(a++);
// afieaz 5
alert(a);
//afieaz 6
</script>
<script>
//pre-incrementare
a=5;
alert(++a);
// afieaz 6
alert(a);
//afieaz 6
</script>
<script>
//post-incrementare ntr-
o bucl

for(i=0;i<5; i++){
document.write(i);
// afieaz 0 1 2 3 4
}
</script>
operand1 operand2

Scdere sau negare.
Operator aritmetic.
2. Operator de negare.
Convertete o valoare pozitiv ntr-o valoare negativ.

Figura 2.51
(continuare)

60

Exemplu:
<script>
a=20;
b=13;
c=a-b;
d=8-2;
alert(d); // afieaz 6
</script>
<script>
a=-7;
a=-a;
alert(a);
// afieaz 7
</script>
= operand1 = operand2

Tipul de date: numeric.
Operator aritmetic i de afectare.
Remarc. Este echivalent cu: operand 1= operand 1 operand 2.

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

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

Exemplu:
<script>
//post-decrementare

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

a=5;
alert(--a); //afieaz 4
alert(a)// afieaz 4
</script>
<script>
//post-decrementare n
bucla for
for(a=7;a<=1; a--){
document.write(a);
// afieaz 6 5 4 3 2 1
</script>
* operand1 * operand2

nmulire.
Operator aritmetic.

Exemplu:
<script>
a=7;
b=8;
c=3*6;
d=a*b;
</script>
Figura 2.51
(continuare)

61
*= operand1 *= operand2

nmulire i atribuire.
Remarc. Este echivalent cu: operand1= operand1 * operand2.

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

mprire.
Operator aritmetic.
Remarci:
Dac unul din operanzi este NaN, rezultatul este NaN.
mprirea 0/0 d NaN.
mprirea 0/valoare_finit d 0.

Exemplu:
<script>
a=12; b=3;
c=5/2; d=a/b;
alert(c); // afieaz 2.5
</script>
/= operand1 /= operand2

mprire i atribuire.
Remarc. Este echivalent cu: operand1= operand1 / operand2.

Exemplu:
<script>
a=5;
a/=2;
alert(a);
// afieaz 2.5
</script>
echivalent cu
<script>
a=5;
a=a/2;
alert(a);
// afieaz 2.5
</script>
% operand1 % operand2

Modulo.
Operator aritmetic.
Remarc. Calculeaz restul ntreg al mpririi ntregi a primului numr prin cel
de-al doilea numr.

Exemplu:
<script>
a=18;
a=a%5;
</script>
Figura 2.51
(continuare)

62
%= operand1 %= operand2

Modulo i afectare.
Operator aritmetic i de afectare.
Remarc. Este echivalent cu: operand1= operand1 % operand2.

Exemplu:
<script>
a=18;
a%=5;
alert(a);// afieaz 3
</script>
echivalent cu
<script>
a=18;
a=a%5;
</script>
= Variabila = Valoare

Atribuire.
1. Tipul de date: numeric, alfanumeric i logic.
Remarc. A nu se confunda cu operatorul ==.

Exemplu:
<script>
a=20;
nume=Droopy;
b=a+3; //b are valoarea 23
</script>
<script>
//atribuire multipl
var a=b=c=13;
// cele trei variabile vor avea
aceeai valoare: 13
</script>
< operand1 < operand2

Strict mai mic.
Operator relaional (de comparare).
Remarci:
Se returneaz TRUE, dac rezultatul evalurii condiiei este adevrat.
Se returneaz undefined dac una din valorile care se compar este
NaN.
n cazul comparrii valorilor alfanumerice se ia n considerare codul ISO.
<= operand1 <= operand2

Mai mic sau egal.
Remarci:
Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 <=
operand2) este adevrat.
NaN.

Exemplu:
<script>
a=6; b=6;
document.write(a<=b);
//afieaz true
nume1= MARK; nume2=SPENCER;
document.write(<br />+nume1<=nume2);
// afieaz true
</script>
Figura 2.51
( continuare)

63
> operand1 > operand2

Strict mai mare.
Remarci:
Se returneaz TRUE dac rezultatul evalurii condiiei
(operand1>operand2) este adevrat.
NaN.

Exemplu:
<script>
a=6; b=6;
document.write(a>b); //afieaz false
nume1= MICIURIN; nume2=POLEVOI;
document.write(<br />+nume1>nume2); // afieaz false;
</script>
>= operand1 >= operand2

Mai mare sau egal.
Remarci:
Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 >=
operand2) este adevrat.
NaN.

Exemplu:
<script>
a=7;
document.write(a>=7); //afieaz true
nume1= M1; nume2=P1;
document.write(<br />+nume1>=nume2); // afieaz false
</script>
== operand1 == operand2

Egal cu.
Remarci:
Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 este egal
cu operand2) este adevrat.
NaN.
Compararea unei valori numerice (de exemplu, 7) cu o aceeai valoare
alfanumeric (de exemplu, 7) returneaz TRUE.

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

64

Identic cu.
Operator relaional (de comparare): egalitate de valori i de tip de
date.
Remarc. Se returneaz TRUE dac rezultatul evalurii condiiei (operand1
este egal cu operand2 i de acelai tip de date) este adevrat.

Exemplu:
<script>
a=7; b=7;
nume1=MAXITAXI;
document.write(nume1==a); // afieaz false;
document.write(<br />+(a===b)); // afieaz false
document.write(<br />+(nume1===maxitaxi); // afieaz false;
document.write(<br />+(nume1===MAXITAXI)); // afieaz true;
</script>
!= operand1 != operand2

Diferit de.
Operator relaional (de comparare): non-egalitate de valori.
este diferit de operand2) este adevrat.

Exemplu:
<script>
a=7; b=7; c=8; nume1=Maxim;
document.write(nume1!=a); // afieaz true;
document.write(a!=b); // afieaz false;
document.write(nume1!=maxim); // afieaz true;
document.write(<br />+(nume1!=Maxim)); // afieaz false
document.write(<br />+(c!=a)); // afieaz true
</script>
!== operand1 !== operand2

Non identic cu.
Operator relaional (de comparare): non-egalitate de valoare i de
tip de date.
nu este egal i nici de acelai tip cu operand2) este adevrat.

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

65

&& operand1 && operand2

I.
Remarci:
Operator logic I (AND).
Returneaz TRUE dac cele dou expresii returneaz valoarea TRUE.
Acest operator este foarte des utilizat n bucle (for, while) i n teste
(if ... else).
Exemplu:
<script>
document.write((a>2)&&(b==6)); // afieaz true;
document.write((a>2)&&(b==nume1)); // afieaz false;
</script>

Exemplu:
<script>
a=4;b=6;nume1=Maxim;
if((a>2)&&(b==6)){
document.write(a este mai mare ca 2);
document.write( i b este egal cu 6);
}
</script>
|| operand1 || operand2

SAU (OR).
Remarci:
Operator logic SAU (OR).
Returneaz TRUE dac una din cele dou expresii returneaz valoarea
TRUE.
Acest operator este foarte des utilizat n bucle (for, while) i teste
(if ... else).
Exemplu:
<script>
document.write((a>2)||(b==6)); // afieaz true
document.write((a>2)||(b==nume1)); // afieaz false
</script>

Exemplu:
<script>
a=4;b=6;nume1=Maxim;
if((a>2)||(b==6)){
document.write(a este mai mare ca 2);
document.write( sau b este egal cu 6);
}
</script>
, (virgul)

Operator care permite mai multor instruciuni de a fi executate ca i
cnd ar fi o singur instruciune.
Remarci:
Valoarea returnat este cea care aparine ultimei instruciuni.
Acest operator este utilizat de asemenea pentru transferarea mai multor
parametrii unei funcii.

Exemplu:
<script>
Figura 2.51
(continuare)

66
var a,b,c,d;
a=(b=5,c=6,d=7);
document.write(a=+a); // afieaz a=7;
document.write(b=+b); // afieaz b=5;
document.write(c=+c); // afieaz c=6;
document.write(d=+d); // afieaz d=7;
</script>
?: condiie1 ? cod1:cod2

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

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

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

tergere.
1. Tipul de date: obiect.
Operator de tergere a proprietii obiectului.
Remarci:
terge o proprietate a unui obiect creat cu new.
terge un element al unei matrici (Array) indicnd numrul su de
ordine (primul element este de rang zero).

Exemplu:
<script>
//tergerea unui element al unei matrici
var v=new Array(1,2,3,7);
document.write(v);
//afieaz 1,2,3,7
delete v[2];
//este ters al 3-lea element
document.write(v);
//afieaz 1,2,7
</script>

<script>
azi=new Date();
//tergerea unui obiect
x=delete azi;
// x ia valoarea true i azi este
undefined
</script>

Exemplu:
<script>
//tergerea unei proprieti a unui obiect
Figura 2.51
(continuare)

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

Nou.
Operator de creare a unui nou obiect.
Remarci:
Creeaz o nou instan a unui obiect cu ajutorul unui constructor.
new este utilizat pentru crearea instanelor urmtoarelor obiecte: Array;
Boolean; Date; Function, Number; Object; RegExp;
String.

Exemplu:
<script>
//crearea obiectului astzi
var astazi=new Date();
//crearea obiectului matrice
var matrice=new Array();
//crearea obiectului Object
var obiect=new Object();
obiect.prenume=stejrel
</script>

. (punct) obiect.Proprietate
obiect.Metoda
obiect.Eveniment

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

Exemplu:
<script>
//acces la metoda write() a obiectului document
document.write(Au nnebunit salcmii!);
</script>
typeof typeof(operand)
typeof operand

Tipul de date.
Remarci:
Returneaz sub form de ir de caractere tipul de date al obiectului sau al
variabilei indicate.
n tabelul 1 se prezint pe dou coloane: tipul de dat i irul de caractere
returnat de Typeof.

Figura 2.51
(continuare)
______________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
Tabelul 1

68
Tabelul 1

Tipul de dat irul de caractere returnat de typeof
logic boolean
numr number
infinit number
ir de caractere string
obiect object
funcie function
nedefinit undefined
n ll u object

Exemplu:
<script>
a=7; nume=salcam;
document.write(typeof a); //afieaz number
document.write(<br />+typeof(nume)); // afieaz string
</script>
void void Expresie
void(Expresie)

Nedefinit. Evalueaz o expresie i returneaz ca rezultat undefined.

Exemplu:
<body>
<a href=JavaScript: void(alert(Au innebunit salcamii!))>
Iar au innebunit salcamii</a>
</body>
( ) Function(Argumente)

Utilizat pentru invocarea metodei unui obiect sau parametrii unei funcii.
Operator de invocare.

Exemplu:
<script>
/*Argumentul Bine ati venit! este transmis metodei write() a obiectului
Document*/
document.write(Bine ati venit!);
/*argumentele 8,10 sunt transmise functiei media()
media(8,10);
</script>
[] matrice[]
obiect[Proprietate]

Utilizat pentru accesarea unei proprieti a unui obiect sau a unui
element al unei matrici.
Operator de matrice.

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

69
! !Operand

Operator logic (NOT). Returneaz TRUE dac data este FALSE i
invers.
Exemplu:
<script>
a=true; alert(!a); //afieaz FALSE
<script>

Exemplu:
<script>
a=5;b=6;
alert(!(a>b)); //afieaz TRUE
</script>
^ operand1 ^ operand2

Operator logic SAU exclusiv. Returneaz TRUE dac una i numai una
din expresii returneaz TRUE.

Exemplu:
<script>
a=4; b=6;
if((a>2)^(b==6)){
document.write(sau a>2 sau b=6);
}
</script>

Asociativitatea indic sensul ( sau ) n care expresia care conine operatorul
este evaluat.
Prioritatea (precedena) indic ordinea n care expresiile sunt evaluate.
n figura 2.52 ([2]) sunt prezentai toi operatorii JavaScript cu precizarea
asociativitii i prioritii acestora.
Rang de
prioritate
Operatori Asociativitate Semnifica ie
1 . acces la proprieti
2 [] acces la matrici (arrays)
3 () regrupare sau funcie
4 ++ incrementare
5 decrementare
6 negare aritmetic

Figura 2.51
(continuare)
Figura 2.52

70
7 ! NOT logic
8 delete tergerea unei proprieti sau a valorii unei
matrici
9 new crearea unui obiect
10 typeof determinarea tipului de date
11 void evaluarea fr returnarea valorii
12 * / % nmulire, mprire, modulo
13 + adunare, scdere
14 + concatenare
15 < <= mai mic, mai mic sau egal
16 > >= mai mare, mai mare sau egal
17 == egal
18 != diferit
19 === identic (egalitate de valori i de tip)
20 !== non-identic
21 && I
22 || SAU
23 ?: condiie
24 = afectare (atribuire/asignare)
25 *= /= %=
+==
afectare cu calcul
26 , evaluare multipl
Remarci:
Expresiile sunt evaluate n funcie de prioritatea operatorilor.
Parantezele au o prioritate foarte ridicat. Expresiile din paranteze sunt evaluate primele.
Dac exist mai multe nivele de paranteze, expresiile sunt evaluate ncepnd cu
parantezele aflate cel mai n interior.
Asociativitatea joac un rol, de exemplu, n cazul combinrii unei adunri i unei
concatenri (vezi figura 2.53).
<script>
document.write((7+9+abc)); //afieaz 16abc
document.write((abc+7+9)); //afieaz abc79
document.write(<br />));
</script>

Obiecte matematice
Figura 2.53
Figura 2.52
(continuare)

71

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

Boolean este un alt obiect predefinit al limbajului JavaScript pe care l vei gsi
util atunci cnd dorii s transformai o valoare non-boolean ntr-o valoare
boolean (true sau false).
Pentru a crea un nou obiect Boolean utilizai constructorul Boolean() i
cuvntul cheie new.

Obiectul Math
Figura 2.54

72
Fia obiectului Math este prezentat n figura 2.55.
Fia obiectului Math
Cum crem obiectul? Se creeaz automat de ctre navigator.
Proprieti: E, LN10, LN2, LOG10E, LOG2E, PI,
SQRT1_2, SQRT2
Metode: abs(), acos(), asin(), atan(), ceil(),
cos(), exp(), floor(), log(), max(),
min(), pow(), random(), round(),
sin(), sqrt(), tan()
Gestionarii de evenimente: -

Proprietile obiectului Math
Proprietile obiectului Math sunt prezentate n detaliu n figura 2.56.
Proprietate Sintaxa
E Math.E

Constanta lui Euler.

Exemplu:
<script>
document.write(Math.E);
//afieaz 2.71821828459045
</script>
LN10 Math.LN10

Logaritm natural de 10.

Exemplu:
<script>
document.write(Math.LN10);
//afieaz 2.30258509294046
</script>
LN2 Math.LN2

Logaritm natural de 2.

Exemplu:
<script>
document.write(Math.LN2);
//afieaz 0.6931471805599453
</script>
LOG10E Math.LOG10E

Logaritm n baz 10 din e.

Exemplu:
<script>
document.write(Math.LOG10E);
//afieaz 0.4342944819032518
</script>
LOG2E Math.LOG2E
Figura 2.55
Figura 2.56

73

Logaritm n baza 2 din e.

Exemplu:
<script>
document.write(Math.LOG2E);
//afieaz 1.4426950408889633
</script>
PI Math.PI

Constanta PI.

Exemplu:
<script>
document.write(Math.PI);
//afieaz 3.141592653589793
</script>
SQRT1_2 Math.SQRT1_2

2 / 1 .

Exemplu:
<script>
document.write(Math.SQRT1_2);
//afieaz 0.7071067811865476
</script>
SQRT2 Math.SQRT2

2.

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

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

Valoare absolut.
Remarc. n Tabelul 2 se prezint rezultatele funciei abs() pentru cteva
argumente speciale.
Tabelul 2
Argument Rezultat
abs(0) 0
abs(NaN) NaN
abs(-Infinity) +Infinity

Exemplu:
<script>
a=-57; b=85;
rez1=Math.abs(a);
rez2=Math.abs(b);
document.write(abs(+a+)=+rez1);
//afieaz abs(-57)=57
Figura 2.56
(continuare)
Figura 2.57

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

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

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

Arc sinus.
Remarc. n Tabelul 3 se prezint rezultatele funciei asin() pentru cteva
argumente speciale.
Tabelul 3
Argument Rezultat
0 0
>1 NaN
<-1 NaN
NaN NaN

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

Arc tangent.

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

Numr ntreg superior cel mai apropiat.
Remarc. n Tabelul 4 se prezint cteva argumente speciale i rezultatul
corespunztor.
Tabelul 4
Argument Rezultat
+Infinity +Infinity
ntre -1 i 0 0
-Infinity -Infinity
0 0
NaN NaN

Exemplu:
<script>
a=-4.223;
rezultat=Math.ceil(a);
document.write(ceil(+a+)=+rezultat);
//afieaz ceil(-4.223)=-4
</script>
Figura 2.57
( continuare)

75
cos() Math.cos(ValoareNumeric)

Cosinus.

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

Exponeniala.

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

Numr ntreg inferior cel mai apropiat.

Exemplu:
<script>
a=-4.223;
rezultat=Math.floor(a);
document.write(floor(+a+)=+rezultat);
//afieaz floor(-4.223)=-5
</script>
log() Math.log(ValoareNumeric)

Logaritm.

Exemplu:
<script>
a=5;
rezultat=Math.log(a);
document.write(log(+a+)=+rezultat);
//afieaz 1.609437912431002
</script>
max() Math.max(ValoareNumeric1,
ValoareNumeric2)

Valoare maxim.
Remarc. n Tabelul 5 se prezint cteva argumente speciale ale metodei i
rezultatele corespunztoare.
Tabelul 5
Argument 1 Argument 2 Rezultat
Orice valoare NaN NaN
NaN Orice valoare NaN

Exemplu:
<script>
a=7; b=13.336;
rezultat=Math.max(a,b);
document.write(max(+a+,+b+)=+rezultat);
//afieaz max(7,13.336)=13.336
</script>
Figura 2.57
(continuare)

76
min() Math.min(ValoareNumeric1,
ValoareNumeric2)

Valoarea minim.

Exemplu:
<script>
a=7; b=13.336;
rezultat=Math.min(a,b);
document.write(min(+a+,+b+)=+rezultat);
//afieaz min(7,13.336)=7
</script>
pow() Math.pow(ValoareNumeric1,
valoareNumeric2)

Returneaz ValoareNumeric1 la puterea ValoareNumeric2.
Tabelul 6
Argument 1

Argument 2 Rezultat
+0 <0 +Infinity
+Infinity <0 0
+Infinity >0 +Infinity
-Infinity <0 0
-Infinity ntreg par>0 +Infinity
-Infinity ntreg impar>0 -Infinity
0 >0 0
1 orice valoare 1
Orice valoare NaN NaN
NaN Diferit de zero NaN

Exemplu:
<script>
a=3; b=2;
rezultat=Math.pow(a,b);
document.write(pow(+a+,+b+)=+rezultat);
//afieaz pow(3,2)=9
</script>
random() Math.random()

Numere aleatoare. Returneaz un numr aleator cuprins ntre 0 i 1.

Exemplu:
<script>
/*genereaz 3 numere aleatoare
cuprinse ntre 0 i 1*/
for(i=0;i<3;i++){
a=Math.random();
document.write(a+<br />);
}
</script>
<script>
/*genereaz 4 numere aleatoare
cuprinse ntre 0 i 25*/
for(i=0;i<5;i++){
a=Math.round(Math.random()*25);
}
</script>

Exemplu:
<script>
/*genereaz 5 numere aleatoare cuprinse ntre 12 i 48*/
var n=12; var m=48;
for(i=0;i<5;i++){
a=Math.round(Math.random()*(m-n)+n);
Figura 2.57
(continuare)

77
}
</script>
round() Math.round(ValoareNumeric)

Returneaz valoarea numeric rotunjit la ntregul inferior.
Tabelul 7
Argument

Rezultat
+Infinity +Infinity
0 0
NaN NaN

Exemplu:
<script>
x=-5.88; y=8.336;
rezultat1=Math.round(x);
rezultat2=Math.round(y);
rezultat3=Math.round(z);
document.write(round(+x+)=+rezultat1);
//afieaz round(-5.88)=-6
document.write(round(+y+)=+rezultat2);
//afieaz round(8.336)=8
</script>
sin() Math.sin(ValoareNumeric)

Sinus.

Exemplu:
<script>
a=0.9965;
rezultat=Math.sin(a);
document.write(sin(+a+)=+rezultat);
//afieaz sin(0.9965)=0.8395747765937453
</script>
sqrt() Math.sqrt(ValoareNumeric)

Rdcina ptrat.
Tabelul 8
Argument Rezultat
+Infinity +Infinity
0 0
<0 NaN
NaN NaN

Exemplu:
<script>
a=25;
rezultat=Math.sqrt(a);
document.write(sqrt(+a+)=+rezultat); //afieaz sqrt(25)=5
</script>
tan() Math.tan(ValoareNumeric)

Tangent

Exemplu:
<script>
a=0.9965;
Figura 2.57
(continuare)
Figura 2.57
(continuare)

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

Mai multe despre obiectul matematic Math
Exist dou inconveniente majore ale limbajului JavaScript, pe care le putei
ntlni n efectuarea calculelor matematice care conin numere zecimale:
timpul de execuie (JavaScript este relativ lent!);
precizia.
Aplicaie
Scriei un program JavaScript care calculeaz i afieaz ct fac:
0.121*100;
0.119*100.
n figura 2.58 se prezint documentul (X)HTML complet n care s-a inserat
script-ul aplicaiei [3].

Rezultatele execuiei script-ului sunt afiate n figura 2.59.

Remarci:
Rutinele interne ale limbajului JavaScript nu sunt att de precise pe ct ne ateptam.
Script-ul dumneavoastr este corect dar rezultatul este diferit fa de cel scontat.
Figura 2.58
Figura 2.59

79
Ateptai-v la astfel de surprize (neplcute!) mai ales atunci cnd folosii numere care
conin multe zecimale!
Nici precizia funciilor trigonometrice nu este infailibil!
Pentru a rezolva problema afirii rezultatelor cu multe zecimale scriei o funcie
personalizat care trunchiaz numrul zecimal la un numr de zecimale dorit, nainte de
a-l afia (vezi Conversaia 8).

Obiectul Number faciliteaz gestiunea numerelor. Proprietile sale sunt
constante care permit definirea valorilor de baz indiferent de navigator.
Fia obiectului Number este prezentat n figura 2.60.
Fia obiectului Number
Cum crem obiectul? Constructorul Number()
Proprieti MAX_VALUE, MIN_VALUE, NaN,
NEGATIVE_INFINITY, POSITIVE_INFINITY
Metode toExponential(), toFixed(),
toPrecision(), toString()
Gestionarii de evenimente -

Obiectul Number
Figura 2.60
Constructorul Number()
Nu este obligatoriu s creai explicit obiecte Number. Dac totui ... insistai
folosii constructorul Number() care este prezentat n detaliu, n figura 2.61.

Constructor Sintax
Number() Variabila=new
Number(Numr)

80
Variabila=new Number()
Variabila=Numr

Constructorul Number() poate fi folosit n egal msur ca
funcie. n acest caz, ea returneaz valoarea argumentului transmis
ca parametru (Tabelul 9).
Tabelul 9
Argument Rezultat
null 0
false 0
true 1
numr numr
ir de caractere alfanumerice NaN
ir de caractere numerice numr

Exemplu:
<script>
x=14.253; y=Number(x);
document.write(x+-+y);
</script>

Proprietile obiectului Number
Proprietile obiectului Number() sunt prezentate n detaliu n figura 2.62.
Proprietate Sintax
MAX_VALUE Number.MAX_VALUE

Cea mai mare valoare pozitiv a obiectelor Number.

Exemplu:
<script>
document.write(Number.MAX_VALUE);
//afieaz 1.79769931348623157e+308
</script>
MIN_VALUE Number.MIN_VALUE

Cea mai mic valoare pozitiv a obiectelor Number.

Exemplu:
<script>
document.write(Number.MIN_VALUE);
//afieaz 5e.-324
</script>
NaN Number.NaN

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

NEGATIVE_INFINITY Number.NEGATIVE_INFINITY

Valoarea minus infinit. Identic cu Infinity.
POSITIVE_INFINITY Number.POSITIVE_INFINITY
Figura 2.62
(continuare)
Figura 2.61
Figura 2.62

81

Valoarea plus infinit. Identic cu +Infinity.

Metodele obiectului Number
Metodele obiectului Number sunt prezentate n detaliu n figura 2.63.
Metod Sintax
toExponential() Number.toExponential(NumrZecimal)

Afieaz un numr n format exponenial cu rotunjire.

Exemplu:
<script>
a=4.445845558555588574;
b=a.toExponential(2);
document.write(b);
//afieaz .45e+0
</script>
toFixed() Number.toFixed()

Rotunjete un numr la ntregul cel mai apropiat superior sau inferior.

Exemplu:
<script>
a=8.5;
b=a.toFixed();
document.write(b);
//afieaz 8
</script>
toPrecision() Number.toPrecision(Numr)

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

Exemplu:
<script>
a=4.445845558555588574;
b=a.toPrecision(4);
document.write(b); //afieaz 4.446
</script>
toString() Number.toString()

Convertete un numr ntr-un ir de caractere. Metoda este foarte puin
utilizat ntruct valorile numerice sunt imediat i n mod automat
convertite n caractere atunci cnd ele sunt introduse ntr-un ir de
caractere.

Exemplu:
<script>
a=88.596;
b=a.toString();
document.write(b);
</script>
Remarci:
Obiectul Number este folosit de foarte puine ori. Este util atunci cnd trebuie s
accesai anumite constante (vezi proprietile obiectului Number).
Crearea obiectelor Number este implicit n cele mai multe cazuri.
Figura 2.63
Putei crea obiecte Number atunci cnd trebuie s le adugai proprieti.

82

Obiectul Boolean este folosit pentru a transforma o valoare non-boolean
ntr-o valoare boolean.
Obiectul Boolean nu poate conine dect dou valori: TRUE sau FALSE.
Fia obiectului Boolean este prezentat n figura 2.64.
Fia obiectului Number
Cum crem obiectul? Constructorul Boolean()
Proprieti: prototype
Metode: toString()
Remarc. prototype permite adugarea de proprieti i metode obiectului Boolean.

Constructorul Boolean()
Constructorul Boolean() este prezentat n detaliu n figura 2.65.
Constructor Sintax
Boolean() Variabila=new Boolean()
Variabila=new
Boolean(Valoare)
Variabila=true
Variabila=false

Creeaz un nou obiect Boolean. El poate fi creat cu operatorul new
sau implicit, atribuind o valoare logic (true/false) unei variabile.

Exemplu:
<script>
//crearea unui obiect boolean vid
a=new Boolean();
a=true;
</script>

Obiectul Boolean
Figura 2.64
Figura 2.65

Exemplu:
<script>
//crearea i iniializarea simultan a unui obiect boolean
a=new Boolean(true);
</script>

Exemplu:
<script>
Figura 2.65
( continuare)

83
//crearea implicit a unui obiect boolean
a=true;
</script>

Mai multe despre obiectul Boolean
Obiectele booleene care conin una din urmtoarele valori:
0, false, null, NaN, undefined,
sunt evaluate FALSE.
Obiectele booleene care conin una din urmtoarele valori:
true, text oarecare, 58, 96
sunt evaluate TRUE.

Codificarea n limbajul JavaScript (continuare din Conversaia 2)
Pentru a codifica n limbajul JavaScript algoritmul prezentat n conversaia precedent,
creai documentul (X)HTML (utilizai Notepad sau Macromedia Dreamweaver) n care
inserai script-ul, cu una din metodele prezentate mai jos:
Metoda 1 inserai script-ul n corpul paginii;
Metoda 2 plasai script-ul n antet-ul paginii;
Metoda 3 utilizai fiiere surs externe;
Metoda 4 creai un gestionar de evenimente.
Folosii unul din editoarele prezentate mai jos:
Notepad;
Macromedia Dreamweaver MX.
Metoda 1
1. Creai documentul (X)HTML (figura 2.66).

84

2. Inserai elementul <script> ... </script> n corpul documentului
(figura 2.67).

Figura 2.66
Figura 2.67
3. Atribuii variabilei r valoarea 3 (figura 2.68).

Figura 2.68
4. Codificai formula de calcul a ariei rezervorului sferic, folosind proprietatea
Math.PI (pentru constanta ) i metoda Math.pow() (pentru codificarea
lui r
2
, (vezi figura 2.69).

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

85

Remarci:
Posibilitatea de combinare a tag-urilor (X)HTML i a instruciunilor JavaScript este una
din caracteristicile cele mai importante ale unui navigator care suport JavaScript. n
realitate, aceast facilitate constituie esenialul Web-ului dinamic i interactiv.
n figura 2.71 este prezentat documentul (X)HTML complet, editat cu Macromedia
Dreamweaver.

Figura 2.70
Figura 2.71
6. Afiai pagina Web ntr-un navigator (figura 2.72).

86

Metoda 2
1. Creai documentul (X)HTML.
2. Introducei elementul <script> ... </script> n seciunea <head>
... </head> a documentului (vezi figura 2.73).

Figura 2.72
Figura 2.73
3. Definii funcia calcul() n care introducei formula de calcul precedat de
cuvntul cheie return (vezi figura 2.74).

Remarci:
Figura 2.74
Revedei paragraful Definii o funcie (Conversaia 2).
Revedei paragraful Returnarea unei valori (Conversaia 2).
De regul, cea mai bun locaie pentru definirea unei funcii este antet-ul (<head>
... </head>) documentului. ntruct instruciunile din antet sunt executate primele,
avei certitudinea c funcia este definit nainte de a fi utilizat.
4. Apelai funcia calcul(3) din script-ul plasat n corpul documentului (vezi
figura 2.75).

87

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

Figura 2.75
Figura 2.76
5. Afiai pagina Web ntr-un navigator (vezi figura 2.77).

88

Metoda 3
1. Creai fiierul calcul.js care conine funcia calcul(), figura 2.78.

Figura 2.77
Figura 2.78
2. Introducei atributul src=calcul.js n tag-ul de deschidere al
elementului <script> (figura 2.79).

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

...

89
<form name=form1>
Raza?<input type=textname=raza /><br />
Aria:<input type=textname=raza /><br />
<input type=button name=buton1 value=calculeaza aria rezervorului sferic
onClick=document.form1.aria.value=document.form1.raza.value=
document.form1.raza.value=4*Math.PI; />
</form>
...
Figura 2.80
Remarc. Vezi Conversaia 8.

90

Tem

Testai-v cunotinele
1. Cum clasificai operatorii JavaScript?
2. Care este semnificaia operatorilor: +=; =; *=; /=; %=?
3. Care sunt obiectele matematice pe care le cunoatei?
4. Cum se creeaz obiectul Math?
5. Cum creai un nou obiect Number i un nou obiect Boolean?
6. Precizai rezultatele execuiei urmtoarelor script-uri (figura 2.81):
<script>
x=12; y=4; z=2;
x*=z++*++y;
document.write(x);
</script>
<script>
y=75;
x=(y=100)?29:42;
document.write(x);
</script>
7. Care va fi rezultatul expresiei:
25+de zile?
un mesaj de eroare;
26;
25 de zile.

Vizitai site-urile
http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/
js56jsorijscript.asp
http://developer.netscape.com/tech/javascript
http://www.zdnet.com/devhead/filters/0,,2133214,00.html
http://webdeveloper.earthweb.com/webjs
http://javascript.about.com/?once=true&

JavaScript
Figura 2.81

t

.

Conversaia 3

Instruciunile limbajului JavaScript

Tipuri de ins ruc iuni JavaScript
for. Aplica ii
EXEMPLUL 3 1 JAVASCRIPT
while. Aplica ii
do ... while. Aplica ii
for ... in. Aplica ii
if, if...else, switch. Aplica ii
Instruc iunile continue i break
Instruc iunea with
Tem

Instruciunile limbajului JavaScript
JavaScript este un limbaj de nivel nalt, bazat pe obiecte, care permite
programatorilor s creeze cu uurin documente (pagini) Web interactive.
Instruciunile limbajului JavaScript sunt uor de neles i aplicat. Ele piloteaz
script-ul, permindu-i s ia o decizie, s creeze bucle (iteraii) etc.
Cea mai mare parte a instruciunilor JavaScript sunt recunoscute de toate
navigatoarele, dar ... mai exist i divergene!

92
Pentru a programa n limbajul JavaScript folosii urmtoarele tipuri de instruciuni
(vezi figura 3.1).
Tipuri de instruciuni Instruciuni JavaScript
iteraii (cicluri) for, for...in, while,
do...while
decizii if, if...else, switch
documentarea script-urilor /*...*/, //
funcii function(), return
generarea unei erori, testarea unei
poriuni de cod i interceptarea
eventualelor erori
throw i try...catch
declararea unei variabile var
simplificarea efortului de programare
(reducerea codului)
with
instruciunile break, continue

Iteraii
Figura 3.1
n limbajul JavaScript, iteraiile (repetiiile) se codific cu una din urmtoarele
instruciuni:
for (pentru) structur de iteraie cu numr cunoscut de pai;
for...in structur de tip for care permite baleierea tuturor
elementelor unei matrici sau ale unui obiect;
while (ct timp) structur de iteraie cu numr necunoscut de pai,
condiionat anterior;
do...while structur de tip while, condiionat posterior.

for (pentru)
Utilizai instruciunea for pentru a crea cicluri (bucle) n programele
dumneavoastr JavaScript. Instruciunea for este folosit pentru a repeta o
instruciune sau o secven de instruciuni ct timp rezultatul evalurii unei
condiii este TRUE.

93
Instruciunea for este prezentat n detaliu n figura 3.2.
Instruciune Sintax
for for(ExpresieIniial;CondiieContinuare;
ExpresieFinal){
cod JavaScript
}
unde,
ExpresieIni ial este expresia de iniializare a variabilei de
control a instruciunii;
Condi ieContinuare este cel de-al doilea parametru al
instruc
iunii, care reprezint o expresie logic ce se

evalueaz la valoarea true sau false;
ExpresieFinal actualizeaz valoarea variabilei de control a
instruciunii.
Bucla este executat ct timp CondiieContinuare returneaz TRUE.

Exemplu:
<script>
for(i=1;i<13;i++){
document.write(i+ <br />);
}
</script>
Exemplu:
<script>
for(i=1;i<13;i+=2){
}
</script>
Exemplu:
<script> //dou bucle imbricate (nested)
for(x=1;x<11;x++){
for(y=1;y<11;y++){
document.write(x*y+ );
}
}
</script>
Exemplu:
<script>
for(var i=true;i==true;){
i=confirm( Doriti sa continuati?);
}
</script>
Exemplu:
<script> //ciclu infinit;
for(;;){
document.write(Iar innebunesc salcamii!);
}
</script>
Exemplu:
<script>
for(i=0;i<13;i++){
;//instructiunile ciclului
}
</script>

Mai multe despre for
Figura 3.2
for conine trei parametrii separai prin punct i virgul.

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

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

95
Densitatea benzinei (0.7 g/cm
3
) se va introduce n mod dinamic.
Cum s-ar putea rezolva aceast problem?
Cei mai grbii dintre dumneavoastr se i gndesc deja la instruciunile JavaScript
necesare scrierii script-ului.
Banal, extrem de banal vor exclama poate muli dintre dumneavoastr!
Formulele de calcul pot constitui un impediment, dar vi le vom aminti noi:
V
m
= (1)
unde, este densitatea, m reprezint masa, iar V este volumul.
G R V *
2
= (2)
unde, G este generatoarea cilindrului.
3 2
2 2 * R R R V = = (3)
unde, V este volumul cilindrului echilateral.
Cam multe formule, dintr-o dat!
Este adevrat, dar cu siguran c ele nu v vor strica viaa personal! Promitem!
Remarc. A gndi n limbaj informatic (JavaScript) nc de la formularea problemei ni se pare o
concepie total greit! V propunem metodologia de analiz, proiectare i realizare a aplicaiilor
pe care v-am prezentat-o n Conversaia precedent.

Analiza problemei
Formatul datelor de ieire (fereastra n care se afieaz pagina Web), tabela de variabile
i specificaiile de programare sunt ilustrate n figurile: 3.3, 3.4, 3.5.
Formatul datelor de ieire
RAZA MASA
2
3
.
.
.
10
XXX.XX
XXX.XX
.
.
.
XXX.XX
MASA TOTALA XXX.XX TONE

Tabela de variabile
Figura 3.3
Figura 3.4

96
d: densitatea benzinei v: volumul cilindrului echilateral
r: raza rezervorului
s: masa total de benzin
m: masa de benzin

Descriere. Script-ul calculeaz i afieaz cantitatea de benzin din mai multe
rezervoare cilindrice echilaterale a cror raz variaz de la 2 la 10 m, cu pasul de 1 m.
Intrri. Densitatea benzinei (0.7 g/cm
3
).
Ieiri. Masa de benzin din fiecare rezervor i masa total de benzin.
1. Citete densitate benzin (d)
2. Iniializeaz variabila s cu zero
3. Tiprete cap tabel
4. Calculeaz volumul rezervorului (V)
5. Calculeaz masa (m) de benzin din
fiecare rezervor
6. nsumeaz m n s
7. Afieaz raza (r) i masa rezervorului
(m)
8. Iniializeaz variabila de control a
buclei (r)
9. Incrementeaz i testeaz variabila
de control a buclei (r)
10. Afieaz masa total de benzin (s)
11. Stop

Vom folosi pentru proiectarea script-ului cele dou variante de pseudocod (vezi
Conversaia 2):
Varianta 1 limbaj natural structurat;
Varianta 2 scriere formalizat (apropiat de limbajul JavaScript).
Varianta 1
n figura 3.6 se prezint pseudocodul n limbajul natural structurat (Varianta 1).
1. Citete densitatea benzinei, afieaz capul de tabel, calculeaz, nsumeaz i
afieaz cantitatea de benzin din rezervoarele cilindrice echilaterale a cror raz
variaz de la 2 la 10 m cu pasul de 1 m.
1.1. Citete densitatea benzinei.
1.2. Iniializeaz cu zero masa total de benzin.
1.3. Tiprete un rnd de 30 de liniue.
1.4. Tiprete capul de tabel (RAZA, MASA).
Figura 3.5
Figura 3.6

97
1.5. Tiprete un rnd de 30 de liniue.
1.6. Pentru fiecare rezervor cilindric echilateral a crui raz variaz de la 2 la
10 m, cu pasul de 1 m, repet aciunile:
1.6.1. Calculeaz volumul.
1.6.2. Calculeaz masa de benzin.
1.6.3. nsumeaz masa de benzin n cantitatea total de benzin.
1.6.4. Afieaz raza i masa de benzin.
2. Tiprete un rnd de 30 de liniue.
3. Afieaz masa total de benzin.
4. Stop.
Remarci:
Evident, aciunea 1 nu reprezint o aciune primitiv, impunndu-se n acest sens o
rafinare (descompunere) a acestora (aciunile 1.1, ..., 1.6).
Pentru rafinarea aciunii neprimitive 1, vom folosi metoda analizei descendente
(top-down).
Prezentarea algoritmului n limbaj natural structurat are, dup cum ai putut constata i
singuri urmtoarele dezavantaje: exprimri lungi, greoaie etc.

Varianta 2
n figura 3.7 se prezint pseudocodul n scriere formalizat (Varianta 2).
REZERVOARE BEGIN
INIT BEGIN
Citete densitatea benzinei (d)
s=0
INIT END
PRELUCRRI BEGIN
DO LINIUTZA
WRITE(RAZA+---+MASA);
DO LINIUTZA
PENTRU FOR(r=2;r<=10;r++)
v=2r
3
m=d*v
s=s+m
WRITE(r+...+m)
PENTRU ENDFOR
PRELUCRRI END
DO LINIUTZA
WRITE(MASA TOTALA+ +s)
REZERVOARE END
LINIUTZA BEGIN
Afieaz un rnd de 30 liniue
LINIUTZ END
Remarci:
n general, script-urile conin secvene alctuite din grupuri de instruciuni care se
execut numai n anumite condiii, ct i grupuri de instruciuni care se execut de attea
ori ct timp sau pn cnd este ndeplinit o condiie.
Formatul general al blocului de secven este ilustrat n figura 3.8.
Figura 3.7
Figura 3.6
( continuare)

98
Eticheta BEGIN
Grup de instruciuni
Eticheta END
unde,
BEGIN i END joac rolul de delimitatori; ei reprezint punctul unic de intrare,
respectiv punctul unic de ieire din bloc i poart aceeai etichet (cu majuscule sau
minuscule).
Formatul general al structurii de iteraie FOR este ilustrat n figura 3.9.
Eticheta FOR(v=v
i
;v<=v
f
;v++)
Corpul buclei
Eticheta ENDFOR
unde,
v reprezint variabila de control a buclei; v
i
reprezint valoarea iniial a variabilei v;
v
f
reprezint valoarea final a variabilei v, iar v++ servete, n general la incrementarea
variabilei v. FOR i ENDFOR sunt delimitatorii structurii.

Codificarea n limbajul JavaScript
n figura 3.10 este prezentat documentul (X)HTML complet.

Figura 3.8
Figura 3.9
Figura 3.10
n figura 3.11 i figura 3.12 se prezint rezultatele execuiei script-ului.

99

Comentarii
Funcia liniutza() este apelat din trei puncte ale corpului principal
(<body>...</body>) al documentului.
Funcia liniutza() mai poate fi scris i sub forma (vezi figura 3.13).

function liniutza(){
for(i=1;i<=30;i++){
document.write(-);
}
}
Pentru calculul volumului rezervorului cilindric echilateral am utilizat proprietatea
Math.PI i metoda Math.pow(r,3) care aparin obiectului Math (vezi obiectul
matematic Math).

Figura 3.11
Figura 3.12
Figura 3.13

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

Scriei un script care genereaz 25 de seturi de coordonate, generate de dou bucle
for imbricate:
(0,0), (0,1), (0,2), (0,3), (0,4), (0,5)
(1,0), (1,1), (1,2), (1,3), (1,4), (1,5)
(2,0), (2,1), (2,2), (2,3), (2,4), (2,5)
(3,0), (3,1), (3,2), (3,3), (3,4), (3,5)
(4,0), (4,1), (4,2), (4,3), (4,4), (4,5)
(5,0), (5,1), (5,2), (5,3), (5,4), (5,5)
document (X)HTML.
Figura 3.14

Figura 3.15
Scriei dou bucle imbricate care genereaz i afieaz tabla nmulirii.
document (X)HTML.

101

Figura 3.16
Scriei un script care calculeaz (cu o structur iterativ) i afieaz: 1!+2!+ +7!
document (X)HTML.

Scriei un script care editeaz urmtorul triunghi al numerelor (figura 3.18).

Figura 3.17
Figura 3.18
1
1 2
1 2 3
1 2 3 4
1 2 3 4 5
1 2 3 4 5 6
1 2 3 4 5 6 7
1 2 3 4 5 6 7 8
1 2 3 4 5 6 7 8 9
1 2 3 4 5 6 7 8 9 10

while (ct timp)
Una din instruciunile de iteraie (repetiie) cele mai simple este while,
cunoscut i sub denumirea de structur de iteraie cu numr necunoscut de
pai, condiionat anterior.
Deosebirea dintre while i for const n faptul c instruciunea while nu
include n declaraia sa funcia de iniializare a variabilei de control (vezi

102
ExpresieIni ial) i funcia de actualizare a variabilei de control (vezi
ExpresieFinal).

Instruciunea while este prezentat n detaliu n figura 3.19.
Instruciune Sintax
while while (condiie){
cod JavaScript
}
Instruciunile (din corpul buclei (cod JavaScript ) sunt executate ct timp

rezultatul evalurii condi ie este TRUE.
Exemplu:
<script>
i=1;
while(i<=7){
document.writeln(i);
++i;
}
document.writeln(Ati afisat 7 numere.);
</script>
Exemplu:
<script>
x=1;
while(x<10){
document.write(x+ <br />);
x++;
}
</script>
Exemplu:
<script>
var k=20;
while(k<11){
document.write(k+<br />);
k++;
}
</script>
Exemplu:
<script>
i=10;
while(i>0){
document.write(i);
--i;
}
document.write(La revedere!);
</script>
Exemplu:
<script>
i=1;
while(i<=100){
i*=2;
}
</script>

Figura 3.19

103
Mai multe despre while
while este foarte asemntor cu if. if execut o singur dat
instruciunile din corpul buclei (cod JavaScript), n timp ce while le
execut ntr-o bucl ct timp rezultatul evalurii condi ie este TRUE.
n realitate, bucla for nu este dect un caz particular al buclei while,
care integreaz direct funciile de iniializare i de incrementare a
variabilei de control a buclei.
Buclele while au o arie de utilizare mai larg dect buclele for, dar
decizia n a le alege v aparine numai dumneavoastr!
Numrul minim de execuii a cod JavaScript este zero.
Instruciunea break provoac o ieire imediat din bucl.
Instruciunea continue provoac reluarea buclei fr a mai fi
executate instruciunile care urmeaz.

Problema din EXEMPLUL 3.2 JAVASCRIPT este aceeai cu problema din EXEMPLUL
3.1 JAVASCRIPT. Singurele deosebiri apar n urmtoarele dou faze:
proiectarea script-ului n pseudocod s-a nlocuit for cu while (vezi figura
3.20).
Pseudocodul
REZERVOARE BEGIN
...
PRELUCRRI BEGIN
...
r=2
CATTIMP WHILE(r<=10)
v=2r
3
m=d*v
s=s+m
WRITE(r+...+m)
r++
CATTIMP ENDWHILE
PRELUCRRI END
REZERVOARE END Figura 3.20

104
codificarea n limbajul JavaScript n script-ul din corpul principal al
documentului (X)HTML s-a nlocuit for cu while (figura 3.21).

Figura 3.21
Rezultatele obinute sunt evident, identice.

do while
Dac while execut una sau mai multe instruciuni (corpul buclei) de cel puin
zero (0) ori, dowhile execut cel puin o dat instruciunea (instruciunile) din
corpul buclei; apoi repet execuia ct timp rezultatul evalurii condiiei (vezi
condiie din dowhile) este TRUE.
Instruciunea dowhile este prezentat n detaliu n figura 3.22.
Instruciune Sintax
dowhile do{
cod JavaScript
}
while (condiie)
do...while execut cod JavaScript cel puin o dat, apoi este

reexecutat ct timp rezultatul evalurii condiie este TRUE.
Exemplu:
<script>
i=0;
do{
document.writeln(i+<br />);
++i;
}
while(i<11);
</script>

Figura 3.22

105
Exemplu:
<script>
var i=20;
do{
i++;
}
while(i<11);
</script>
Exemplu:
<script>
s=20; i=1;
do{
s+=i;
i++;
}
while(i<=100);
alert(Suma primelor 100 de numere naturale este+s);
</script>

Mai multe despre do...while
do...while funcioneaz exact ca instruciunea while, cu
deosebirea c nu evalueaz condi ie dect dup prima iteraie. n felul
acesta se garanteaz c script-ul dintre acolade va fi executat cel puin o
dat.
Instruciunea break provoac o ieire forat din bucl.
Instruciunea continue provoac reluarea buclei fr a mai fi
executate instruciunile care urmeaz.

Problema din EXEMPLUL 3.3 JAVASCRIPT este aceeai cu problema din EXEMPLUL
3.1 JAVASCRIPT.
Singurele deosebiri apar n fazele de:
Proiectarea script-ului n pseudocod s-a nlocuit for cu do...while (vezi
figura 3.23).

Figura 3.22
(continuare)

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

for ... in
Instruciunea forin este o structur de iteraie care execut aceeai
instruciune sau aceeai secven de instruciuni pentru toate proprietile unui
obiect. Aceast instruciune poate fi util, de exemplu, atunci cnd dorii s
afiai numele tuturor proprietilor unui obiect.
Instruciunea forin este prezentat n detaliu n figura 3.25.

Instruc iune Sintax
forin for (Proprietate in Obiect) {
cod JavaScript
}

Figura 3.23
Figura 3.24

107
unde,
Proprietate este un element literal generat de
JavaScript.
Bucla listeaz proprietile unui obiect. Variabila de control a buclei

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

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

Decizii
Figura 3.25

108

n limbajul JavaScript, deciziile (seleciile) se codific cu una din urmtoarele
instruciuni:
if (dac) structur de decizie cu o singur alternativ.
if else (dac n caz contrar) structur de decizie cu dou
alternative.
switch structur de decizie cu mai multe alternative.

if (dac)
Una din principalele faciliti ale unui limbaj de programare este aceea de a
putea testa i compara valorile.
Putem crea astfel script-uri care vor reaciona n mod diferit n funcie de valorile
variabilelor sau de informaiile furnizate de ctre utilizator.
Principala instruciune de decizie (selecie) a limbajului JavaScript este if.
Instruciunea if este prezentat n detaliu n figura 3.26.
Instruciune Sintax
if if (condiie){
cod JavaScript
}
unde,
condi ie poate fi orice expresie logic
Execut secvena de instruciuni dintre acolade (cod JavaScript) dac

rezultatul evalurii condi ie este TRUE. n caz contrar, JavaScript ignor
cod i continu.
Exemplu:
<script>
a=13;b=2;
if(a>b){
alert(a este mai mare ca b);
}
</script>
Exemplu:
<script>
numarator=4; numitor=0;
if(numitor>0){
a=numarator/numitor;
document.write(a);
}
</script>
Exemplu:
<script>

Figura 3.26

109
var sex=f;
if(sex==f){
document.write(Buna ziua, doamna!);
}
</script>
Exemplu:
<script>
nume=Popescu; prenume=Ion;
if((nume==)||(prenume==)){
document.write(Lipsesc valori!);
}
</script>
Exemplu:
<script>
if((nume==)&&(prenume==)){
document.write(Lipsesc doua valori);
}
</script>

Exemplu:
<script>
if((a<100)&&(a>250)){
document.write(Ce parere aveti de acest test?);
}
</script>

Exemplu:
<script>
if(a==true){
b=ADEVARAT;
} echivalent cu
alert(b);
</script>
<script>
if(a){
b=ADEVARAT;
}
alert(b);
</script>

Figura 3.26
(continuare)
Mai multe despre if
if este o structur de decizie (decision structure, n limba englez) care
testeaz i compar diferite valori.
Dac partea a doua a unei instruciuni if poate conine orice
instruciune JavaScript, prima parte (condi ie) trebuie s respecte o
sintax precis.
Condi ie (expresie condiional) conine n general dou valori
(constante, expresii, variabile etc.) care se compar una cu cealalt.
Cele dou valori sunt separate printr-un operator relaional.
Nu confundai operatorul de egalitate (== sau ===) cu operatorul de
afectare (=), chiar dac ele se citesc egal.
Nu de puine ori suntem pui n situaia s comparm o variabil cu mai
multe valori sau cu mai multe variabile o dat. Pentru astfel de cazuri
folosii operatorii logici.

110
if ... else (dac ... n caz contrar)
Uneori, simpla folosire a instruciunii if nu este suficient. n acest caz,
completai instruciunea if cu cuvntul cheie else (n caz contrar, n limba
romn). else precizeaz interpretorului ce anume trebuie s fac atunci cnd
rezultatul evalurii condi ie este false.

Instruciunea if else este prezentat n detaliu n figura 3.27.
Instruciune Sintax
if else if (condiie) {
cod1 JavaScript
}
else {
cod2 JavaScript
}
unde,
cod1 JavaScript: instruciuni executate cnd
rezultatul evalurii condi ie este TRUE.
cod2 JavaScript: instruciuni executate cnd
rezultatul evalurii condi ie este FALSE.
Execut prima secven de instruciuni (cod1 JavaScript) dintre acolade

({}) dac rezultatul evalurii condi ie este TRUE.
Blocul (cod2 JavaScript) else nu este obligatoriu. El conine
instruciuni care se execut dac rezultatul evalurii condi ie este
FALSE.
Dac blocul else nu exis i dac rezultatul evalurii condiie este
FALSE, instruciunile blocului if nu sunt executate.
Script-ul transmite controlul execuiei instruciunii imediat urmtoare
dup bloc.
Dac rezultatul evalurii condi ie este TRUE instruciunile blocului
else nu sunt executate.
Script-ul transmite controlul execuiei instruciunii imediat urmtoare
dup blocul else.
Exemplu:
<script>
var sex=f;
if(sex==f){
document.write(Buna ziua, doamna!);
}
else{
document.write(Buna ziua, domnule!);
}
document.write(<br />La revedere!);
</script>

Figura 3.27

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

Figura 3.27
(continuare)

112
Mai multe despre if .. else .
Instruciunile if ... else pot fi imbricate.
Ca i instruciunea if, else poate fi urmat de una sau mai multe
instruciuni delimitate de acolade ({}).
Nu uitai de expresiile condiionale prescurtate (vezi figura 3.28, figura
3.29).
<script>
x=(a==1)?1:0; echivalent cu
</script>
<script>
if(a==1){
x=1;
}
else {
x=0;
}
</script>

<script>
document.write(i+((i==1)?cuvant gasit:cuvinte gasite.));
</script>

switch
Instruciunea switch este prezentat n detaliu n figura 3.30.
Instruciune Sintax
switch switch (variabila)
case Valoare1
cod1 JavaScript
break;
case Valoare2
cod2 JavaScript
break;
default:
cod3 JavaScript
}
Switch controleaz coninutul unei variabile cu una sau mai multe

instruciuni case.
Instruciunea break este indispensabil.
Instruciunea default este facultativ. Ea conine instruciunile
care urmeaz a fi executate n situaia n care nici unul din
case-urile precedente nu conin valoarea variabilei testate.
Exemplu:
<script>
var n=100;

Figura 3.28
Figura 3.29
Figura 3.30
Figura 3.30
(continuare)

113
switch(n){
case 10: document.write(10); break;
default: document.write(Alta valoare);
}
document.write(<br />La revedere!);
</script>
Aplicaie
Precizai dac rezultatele execuiei celor dou script-uri (figura 3.31 i figura 3.32) sunt
echivalente. Comentai rezultatele.
<script>
var oras=Ploiesti;
if (oras==Ploiesti)
document.write(Locuiti la Ploiesti);
if (oras==Peris)
document.write(Locuiti la Peris);
if (oras==Paris)
document.write(Locuiti la Paris);
if (oras==Roman)
document.write(Locuiti la Roman);
if (oras==Roma)
document.write(Locuiti la Roma);
document.write(Sunteti un itinerant!);
</script>

<script>
var oras=Ploiesti;
switch(oras){
case Ploiesti:
document.write(Locuiti la Ploiesti); break;
case Peris:
document.write(Locuiti la Peris); break;
case Paris:
document.write(Locuiti la Paris); break;
case Roman:
document.write(Locuiti la Roman); break;
case Roma:
document.write(Locuiti la Roma); break;
default:
document.write(Sunteti un itinerant!);
}
</script>

Figura 3.31
Figura 3.32

114


Vom relua problema din EXEMPLUL 3.1 JAVASCRIPT simplificnd-o dup cum
urmeaz.
Vom considera de aceast dat un singur rezervor cilindric echilateral (generatoarea este
egal cu diametrul) plin cu benzin (vezi figura 3.33).
R
G G=2R
V=2R
3
Dorim s calculm i s afim ntr-o pagin Web cantitatea de lichid (benzin) din
rezervor. Raza rezervorului trebuie s aib o valoare pozitiv. Densitatea benzinei i raza
se vor introduce n mod dinamic.

Analiza problemei
Formatul datelor de ieire (fereastra n care se afieaz pagina Web), tabela de variabile
i specificaiile de programare sunt ilustrate n figurile: 3.34, 3.35, 3.36.
a)
RAZA MASA
-2 RAZA NEGATIVA
b)
RAZA MASA
3 xxxxx.xxxxx

Tabela de variabile
d: densitatea benzinei
r: raza rezervorului
m: cantitatea de benzin
v: volumul rezervorului

Figura 3.33
Figura 3.34
Figura 3.35

115
Descriere. Script-ul calculeaz i afieaz cantitatea de benzin dintr-un rezervor
cilindric echilateral de raz pozitiv.
Intrri. Densitatea benzinei, raza rezervorului.
Ieiri. Masa de benzin din rezervor.
1. Citete densitate benzin (d)
2. Citete raza rezervorului (r)
3. Afieaz capul de tabel
4. Testeaz valoarea (introdus
dinamic) razei
5. Calculeaz volumul rezervorului (v).
6. Calculeaz masa (m) de benzin din
rezervor
7. Afieaz raza (r) i masa rezervorului
8. n caz de eroare, afieaz raza (r) i
mesajul: RAZA NEGATIV
9. Afieaz un rnd de liniue
10. Stop

n figura 3.37 se prezint pseudocodul n scriere formalizat.
Pseudocodul
REZERVOR BEGIN
INIT BEGIN
//Citete densitatea benzinei (d)
READ(d)
//Citete raza rezervorului (r)
READ(r)
INIT END
PRELUCRRI BEGIN
DO LINIUTZA
WRITE(RAZA+---+MASA);
DO LINIUTZA
DECIZIE IF(r<0)
WRITE(r+ +Raza negativa);
DECIZIE ELSE
v=2r
3
m=d*v
WRITE(r+...+m)
DECIZIE ENDIF
PRELUCRRI END
DO LINIUTZA
REZERVOR END
LINIUTZA BEGIN
Afieaz un rnd de 30 de liniue
LINIUTZ END
Remarc. Pseudocodul structurii de selecie IF ... ELSE este ilustrat n figura 3.38.
Figura 3.36
Figura 3.37

116
Eticheta

Eticheta

Eticheta
IF (condiie)
Grup de instruciuni
ELSE
Grup de instruciuni
ENDIF
unde, IF, ELSE i ENDIF sunt delimitatori ce poart aceeai etichet.



Figura 3.40
Figura 3.39
Figura 3.38

117

continue
Atunci cnd interpretorul JavaScript ntlnete instruciunea continue el revine
la nceputul buclei i ignor celelalte instruciuni din interiorul buclei.
Instruciunea continue este prezentat n detaliu n figura 3.42.
Instruciune Sintax
continue continue;
continue Eticheta
Instruciunea este utilizat n buclele: while, do ... while,

for.
De cele mai multe ori, instruciunea este inclus ntr-o instruciune if.
continue poate fi de asemenea utilizat cu o etichet.
Exemplu:
<script>
var i=1;
while(i<21){
document.write(i);
i++;
if(i<10){
continue;
}
}
</script>

Figura 3.41

Instruciunile continue i break
Figura 3.42

118
Exemplu:
<script>
iesire:;
for(i=0;i<3;i++){
document.write(i=+i+<br />);
for(j=0;j<5;j++){
if(j==3){
continue iesire;
}
document.write(j=+j+<br />);
}
}
document.write(SFARSIT);
</script>
Exemplu:
<script>
iesire:;
for(i=0;i<3;i++){
document.write(i=+i+<br />);
for(j=0;j<5;j++){
if(j==3){
continue;
}
}
}
</script>

Figura 3.42
(continuare)
break
Instruciunea break provoac o ieire imediat din blocul de instruciuni curent.
Instruciunea break este prezentat n detaliu n figura 3.43.
Instruciune Sintax
break break;
break Eticheta
Provoac o ieire imediat din cele trei bucle: while, do

while, for i din blocul switch.
De cele mai multe ori, instruciunea break este inclus ntr-o
instruciune if. Dac rezultatul evalurii condiiei este TRUE atunci
se iese din bucl. break poate fi de asemenea utilizat cu o etichet
(un nume urmat de dou puncte).
Exemplu:
<script>
var i=1; j=5;
while(i<20){
rezultat=i*j;
document.write(rezultat+<br />);
if(r>50) break;
i++;
}
</script>

Figura 3.43

119
Exemplu:
<script>
iesire:;
for(i=0;i<3;i++){
document.write(i=+i+ <br />);
for(j=0;j<5;j++){
if(j==3){
break iesire;
}
}
}
</script>
Exemplu:
<script>
iesire:;
for(i=0;i<3;i++){
document.write(i=+i+ <br />);
for(j=0;j<5;j++){
if(j==3){
break;
}
}
}
</script>

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

referiri ntr-un bloc de instruciuni.

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

Pentru un cod scurt (vezi i figura 3.45) interesul utilizrii instruciunii with nu
este evident, dar cnd trebuie s accesm acelai obiect n cadrul unei proceduri
sau cnd utilizm un obiect predefinit precum Math, with v ajut s ctigai
foarte mult timp.
with(nume){
window.alert(Lungimea numelui este: + length);
toUpperCase();}

Figura 3.44
Figura 3.45

121

Tem

Testai-v cunotinele
1. Ce tipuri de instruciuni JavaScript cunoatei?
2. Ce tip de bucl JavaScript testeaz condiia la nceput:
for;
while;
do ... while.
3. Instruciunea do ... while asigur:
minimum o iteraie;
maximum o iteraie;
zero iteraii.
4. Comentai urmtorul script (figura 3.46).
<script>
i=0; rez=0; stare=true;
document.write(0);
while(stare){
rez+=++I;
if(i==10){
rez=false;
}
}
document.writeln(=+rez);
</script>

5. Care este rolul instruciunii switch?
6. Care este rolul instruciunilor break i continue?
7. Scriei un script care calculeaz i afieaz valoarea polinomului:
5X
2
+4X+10
pentru x=2.

JavaScript
Figura 3.46

122
Figura 11.13 (Conversaia 11).

Vizitai site-urile
www.bdml.net/listes
www.natural.com/JavaScript
http://www.webcoder.com
http://JavaScript.internet.com/miscellaneous/
http://www.geocities.com/jeffery_p_sanders/
http://JavaScript.internet.com/forms/checkbox_changer.html

t

Conversaia 4

Obiectele interne String, Array

Obiectele limbajului JavaScrip . Prezentare general
Obiectele interne
Obiectul String. Aplica ii
Obiectul Array. Aplica ii
Tem

Obiectele limbajului JavaScript. Prezentare general
Dup cum ai putut constata, variabilele din programele pe care le-ai realizat
pn acum servesc la stocarea valorilor: numerice, caracter, ir de caractere,
booleene etc.
n egal msur, JavaScript permite i gestionarea obiectelor.
Obiectele JavaScript sunt de trei tipuri:
Obiecte interne (integrate) fac parte din limbajul JavaScript.
Obiectele navigatorului nu fac parte din limbajul JavaScript, dar
sunt recunoscute de navigatoare.
Obiecte personalizate obiecte create de utilizator.

124

Obiectele interne
Cu trei din obiectele interne ale limbajului JavaScript, dumneavoastr ai fcut
deja cunotin: Math care este un obiect predefinit JavaScript i cuprinde
numeroase constante i funcii; Number i Boolean (vezi Conversaia 2).
Lista complet a obiectelor interne (integrate) ale limbajului JavaScript este
prezentat (n ordine alfabetic) n figura 4.1.
Obiect intern Descriere
Arguments Reprezint (sub forma unei matrici) valoarea argumentelor
transmise unei funcii.
Array matrice
Boolean Conine valorile: TRUE (adevrat) sau FALSE (fals).
Date Obiect predefinit JavaScript care permite manipularea orelor i a
datelor calendaristice.
Function Numele de obiect al unui obiect Function este considerat ca o
variabil reprezentnd valoarea curent a funciei create cu
new Function(), n timp ce numele unei funcii JavaScript
standard nu este o variabil, ci doar numele unei funcii.
Math Obiect predefinit JavaScript care conine mai multe funcii i
constante matematice.
Number Faciliteaz gestiunea numerelor.
Object Obiect JavaScript din care deriv toate celelalte obiecte.
RegExp Obiect predefinit JavaScript dedicat expresiilor regulate.
String Furnizeaz suportul pentru manipularea i prelucrarea irurilor de
caractere.

Obiectul String
Figura 4.1
JavaScript stocheaz irurile de caractere ca obiecte String.
Fia obiectului String este prezentat n figura 4.2.

125
Fia obiectului String
Cum se creeaz obiectul? Constructorul String()
Proprieti: 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()

Constructorul String()
Figura 4.2
Constructorul String() creeaz un nou ir de caractere.
Constructorul String() este prezentat n detaliu n figura 4.3.
Constructor Sintax
String() variabila=new String()
variabila=new String(ir)
variabila=ir
Se poate crea un ir de caractere vid sau transmind ca argument

constructorului irul de caractere care va conine noul obiect String.
Crearea irurilor de caractere este de cele mai multe ori implicit.
Constructorul String() poate fi de asemenea utilizat ca funcie. n
acest caz el convertete valoarea n ir de caractere. Dac nici o
valoare nu este transmis funciei, atunci acesta returneaz un ir vid.
Exemplu:
<script>
//creare implicit a irurilor de caractere
anotimp=toamna;
celebrul=702;
//String() utilizat ca funcie
a=7;
b=FALSE;
document.write(String(a)+<br />);
document.write(String(b)+<br />);
</script>

Figura 4.3

126
Proprietile obiectului String
Proprietile obiectului String sunt prezentate n detaliu n figura 4.4.
Proprietate Sintax
length ir.length
Conine lungimea irului de caractere.

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

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

Metodele obiectului String
Metodele obiectului String pot fi clasificate dup cum urmeaz:
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.
Metode Sintax
big() ir.big()
ncadreaz un ir de caractere cu tag-urile <big>...</big>.

Exemplu:
<script>
nou_demo_sir=demo_sir.big();
document.write(nou_demo_sir);
</script>

Figura 4.5
Figura 4.4

127

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

Exemplu:
<script>
nou_demo_sir=demo_sir.blink();
</script>
bold() ir.bold()
ncadreaz un ir de caractere cu tag-urile <bold>...</bold>.

Exemplu:
<script>
demo_sir= nvai s privii dincolo de aparene!;
nou_demo_sir=demo_sir.bold();
</script>
fontcolor() ir.fontcolor(ir)
Atribuie irului de caractere culoarea indicat n tag-ul <font> de

atributul color.
Exemplu:
<script>
nou_demo_sir=demo_sir.fontcolor(#FF0000);
</script>
fontsize() ir.fontsize(Valoare)
Atribuie irului de caractere dimensiunea indicat cu tag-ul <font> de

atributul size.
Exemplu:
<script>
nou_demo_sir=demo_sir.fontsize(4);
</script>
italics() ir.italics(ir)
ncadreaz un ir de caractere cu tag-urile <i>...</i>.

Exemplu:
<script>
nou_demo_sir=demo_sir.italics();
</script>
small() ir.small(ir)
ncadreaz un ir de caractere cu tag-urile <small>...</small>.

Exemplu:
<script>
nou_demo_sir=demo_sir.small();
</script>

Figura 4.5
(continuare)

128

strike() ir.strike()
ncadreaz un ir de caractere cu tag-urile
<strike>...</strike>.
Exemplu:
<script>
nou_demo_sir=demo_sir.strike();
</script>
sub() ir.sub()
ncadreaz un ir de caractere cu tag-urile <sub>...</sub>.

sup() ir.sup()

ncadreaz un ir 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.
Metode Sintax
anchor() ir.anchor(ir)
Convertete un ir de caractere ntr-o ancor numit cu tag-ul <a> i

atributul name.
charAt() ir.charAt(Valoare)

Returneaz caracterul poziionat n irul de caractere.
Exemplu:
<script>
vocale=aeiou;
r=vocale.charAt(3);
document.write(r); //afieaz o
</script>
charCodeAt() ir.charCodeAt(Valoare)
Returneaz valoarea codului Unicode al caracterului situat n poziia

indicat n irul de caractere.
concat() ir.concat(ir)

Adaug un nou ir de caractere la sfritul unui alt ir de caractere.
Metoda este echivalent cu operatorul +.
Exemplu:
<script>
sir_1=sir_1.concat(Felicitri pentru rbdarea de a ne fi descoperit!);
document.write(sir_1);
</script>

fixed() ir.fixed()

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

Figura 4.6
Figura 4.5
(continuare)

129
fromCharCode() ir.fromCharCode(Valoare)

Returneaz codul Unicode corespunztor caracterului indicat.
indexOf() ir.indexOf(ir,Valoare)

Caut un caracter ntr-un ir de caractere i returneaz indexul primei
apariii (primul caracter are indexul 0). Metoda face diferen ntre
majuscule i minuscule. n caz contrar metoda returneaz valoarea -1.
Exemplu:
<script>
email=ld@canaba.com;
r=email.indexOf(@);
document.write(r);
//afieaz 2
</script>
Exemplu:
<script>
email=pepito@brazil.com;
r=email.indexOf(i,6);
document.write(r);
//afieaz 11
</script>

Exemplu:
<script>
r=email.indexOf(canaba);
document.write(r); //afieaz 3
</script>
lastIndexOf() ir.lastIndexOf(ir)

Caut ultima apariie a irului de caractere i returneaz indexul poziiei
sale. n caz de eec, se returneaz valoarea 1. Metoda face deosebire
ntre majuscule i minuscule.
Exemplu:
<script>
r=email.lastindexOf(@);
document.write(r);
//afieaz 2
</script>
link() ir.link(ir)

ncadreaz un ir de caractere cu tag-urile <a>..</a>.
match ir.match(expresieregulat)

Caut o expresie regulat ntr-un ir de caractere i returneaz
rezultatul ntr-o matrice. n caz de eec, metoda returneaz valoarea
null.
Exemplu:
<script>
model=/\d{1,3}/; adresa=195.14.45.78;
document.write(adresa.match(model));
</script>
replace() ir.replace(expresieregulat,
ir)

Caut o expresie regulat i nlocuiete caracterele gsite prin irul de
caractere indicat n cel de-al doilea argument. n caz de eec, nlocuirea
nu se efectueaz.

Figura 4.6
(continuare)

130
Exemplu:
<script>
model=/ION/i;
text=ion@yahoo.com;
r=text.replace(model.ION);
document.write(r); //afieaz yahoo.com
</script>
search() ir.search(expresieregulat)

Caut o expresie regulat ntr-un ir de caractere i returneaz valoarea
poziiei primului caracter gsit. n caz de eec, metoda returneaz
valoarea 1.
Exemplu:
<script>
model=/pion/i;
text=Nebunul i Pionul;
document.write(text.search(model));
//afieaz 11
</script>
slice() ir.slice(Valoare1,Valoare2)

Extrage o parte dintr-un ir de caractere i returneaz irul extras.
Exemplu:
<script>
text=liv@canaba.com;
a=text.slice(4,100);
document.write(a);
//afieaz canaba.com
</script>

Exemplu:
<script>
text=ion@yahoo.com;
rezultat=text.slice(0,3);
document.write(rezultat);
//afieaz ion
</script>
split() ir.split(ir)

Divizeaz un ir de caractere n subiruri i returneaz o matrice.
Metoda recunoate expresiile regulate.
substr() ir.substr(Valoare1,Valoare2)

Extrage o parte din irurile de caractere i returneaz irul extras.
Exemplu:
<script>
text=ion@yahoo.com;
r=text.substr(0,3);
document.write(r);
//afieaz ion
</script>
substring() ir.substring(Valoare1,Valoare2)

Extrage o parte dintr-un ir de caractere i returneaz irul extras.
Exemplu:
<script>
email=ion@yahoo.com;
r=email.substring(0,3);
document.write(r); //afieaz ion
</script>
Figura 4.6
(continuare)

131
toLowerCase() ir.toLowerCase()

Convertete un ir de caractere n minuscule.
Exemplu:
<script>
text=Mitic i Petric;
r=text.toLowerCase();
document.write(r);
//afieaz mitic i petric
</script>
toString() ir.toString()

Convertete o valoare numeric sau boolean n ir de caractere.
Exemplu:
<script>
a=TRUE; b=314;
document.write(a.toString()+,);
document.write(b.toString());
//afieaz TRUE,314
</script>
toUpperCase() ir.toUpperCase(ir)

Convertete un ir de caractere n majuscule.
Exemplu:
<script>
email=ion@yahoo.com;
rezultat=email.toUpperCase();
//afieaz ION@YAHOO.COM
</script>

Obiectul Array
Figura 4.6
(continuare)
Aplicaiile din conversaiile anterioare au fost construite pe tipuri de date simple
crora le-au fost asociate variabile simple.
Suntei un ... gurmand de variabile? Dac da, folosii obiectul intern Array
(matrice).
O matrice (array) este o list de valori sau de referine ctre alte obiecte. O
matrice poate conine, de exemplu o list de date numerice sau alfanumerice.
Fia obiectului intern Array este prezentat n figura 4.7.

132
Fia obiectului Array
Cum se creeaz obiectul? constructorul Array()
Proprieti: length
Metode: concat(), join(), pop(), push(),
reverse(), shift(), slice(), sort(),
splice(), toString(), unshift()

Constructorul Array()
Pentru a crea o nou matrice, utilizai constructorul Array().
Constructorul Array()este prezentat n detaliu n figura 4.8.
Constructor Sintax
Array() variabila=new Array()
variabila=new Array(numr_elemente)
variabila=new
Array(element1,element2,...)
variabila=[]
variabila=[,,,,]
variabila=[element1,element2,]
Creeaz o nou matrice. Noua matrice poate fi vid, dimensiunea sa

(numrul de elemente) poate fi predefinit sau poate fi, de asemenea
iniializat cu o list de elemente. Numerotarea elementelor unei matrici
ncepe de la zero. Spre deosebire de majoritatea tipurilor de variabile
JavaScript, array-urile trebuie s fie declarate nainte de a fi utilizate.
ncepnd cu versiunea 1.2 JavaScript, instruciunea new Array() nu
mai este indispensabil. Se pot utiliza, n mod simplu parantezele
drepte ([]). n limbajul JavaScript nu se pot crea matrici cu mai multe
dimensiuni, dar putei imbrica mai multe matrici. ncepei prin a crea o
matrice clasic (cu o dimensiune) iar apoi, n fiecare element al
vectorului inserai cte un array.
Exemplu:
<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>

Figura 4.7
Figura 4.8

133
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 i patru coloane
linie=new Array(3);
linie[0]=new Array(a11,a12,a13,a14);
document.write(linie[1][2]+<br>);
//Se afieaz a23
document.write(linie[0]);
//Se afieaz a11, a12, a13, a14
</script>
Exemplu:
<script>
ListaCulori=new Array(rosu,galben,albastru,verde);
document write(ListaCulori+<br />);
//Se afieaz rosu, galben, albastru, verde
ListaCulori[1]=violet;
document.write(ListaCulori);
//Se afieaz rosu, violet, albastru, verde
</script>
Exemplu:
<script>
/*Crearea unei matrici i modificarea celui de-al doilea element*/
mere=new Array(ionatan,cretesti,dulci);
document.write(mere+<br>);
//Se afieaz ionatan, creeti, dulci
mere[1]=parmen-auriu;
document.write(mere);
</script>

Exemplu:
<script>
/*Afiarea elementelor unei matrici cu o bucl for*/
student=new Array(Alin,Bogdan,Catalin,Dan);
for(i=0;i<4;i++){
document.write(student[i]+<br>);
}
</script>

Figura 4.8
(continuare)

134
Proprietile obiectului Array
Proprietile obiectului Array()sunt prezentate n detaliu n figura 4.9.
Proprietate Sintax
length matrice.length
Conine numrul de elemente al unei matrici. Putei modifica valoarea

acestei proprieti. Reducnd numrul de elemente, elementele se
suprim pornind din dreapta matricii.
Exemplu:
<script>
lista_numere=new Array(3,7,9,50,20,23,2);
document.write(lista_numere.length+ numere);
//Se afieaz 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>

Figura 4.9

Metodele obiectului Array
Metodele obiectului Array sunt prezentate n detaliu n figura 4.10.
Metod Sintax
concat() matrice=matrice.concat(matrice)
matrice=matrice.concat(Element1,
Element2,...)
Metoda este utilizat pentru concatenarea a dou matrici.

Exemplu:
<script language=javascript type=text/javascript>
//concatenarea a dou matrici
lista_numere1=new Array(6,9,7);
lista_numere2=new Array(5,68);
lista_numere3=lista_numere1.concat(lista_numere2);
document.write(lista_numere3.length+ numere <br />);
for(i=0;i<lista_numere3.length;i++){
document.write(lista_numere3[i]+);
}
</script>

Figura 4.10

135
Exemplu:
//concatenarea a dou matrici
lista_numere1=new Array(6,9,7);
lista_numere3=lista_numere1.concat(13,22);
document.write(lista_numere3.length+ numere <br />);
for(i=0;i<lista_numere3.length;i++){
document.write(lista_numere3[i]+);
}
</script>
join() matrice.join()
matrice.join(Separator)

Metoda este utilizat pentru convertirea unei matrici ntr-un ir de
caractere. Argumentul Separator servete la separarea elementelor in
ir. Fr argument, metoda join() utilizeaz virgula.
Exemplu:
<script>
subsir=new Array (6,9,7);
sir=subsir.join();
document.write(sir+<br />);
sir=subsir.join(*); document.write(sir);
</script>
Rezultatele execu iei script-ului
6,9,7 6*9*7
pop() matrice.pop()

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

Metoda adaug noi elemente la sfritul matricii. Proprietatea length
este modificat n mod automat.
Exemplu:
culori=new Array(rosu,galben);
adaug=culori.push(albastru);
document.write(Numrul de elemente: culori.length+ <br />);
document.write(culori);
</script>
reverse() matrice.reverse()

Metoda inverseaz ordinea elementelor unei matrici (nu cere nici un
argument).
Exemplu:
culori=new Array(rosu,galben,albastru);
document.write(culori+<br />);
culori_invers=culori.reverse();
</script>

Figura 4.10
(continuare)

136

shift() matrice.shift()
Metoda suprim primul element al unei matrici. Elementul de rang 1

devine de rang 0, cel de rang 2 devine de rang 1 .a.m.d. Proprietatea
length se modific n mod automat. Metoda returneaz valoarea
elementului suprimat i nu cere nici un argument.
Exemplu:
lista_numere=new Array(13,20,22);
suprim=lista_numere.shift();
document.write(Elementul suprimat: +suprim+<br />);
document.write(lista_numere);
</script>
slice() matrice.slice(ValoareNumerica1,
ValoareNumerica2)
Metoda extrage elementele unei matrici i returneaz o nou matrice care

conine aceste elemente. Matricea iniial nu este modificat. Elementele
extrase depind de dou argumente: ValoareNumerica1 (indic rangul
primului element care urmeaz a fi extras), ValoareNumerica2 (indic
rangul imediat urmtor ultimului element care urmeaz a fi extras). Dac
primul argument este negativ, atunci rangul se calculeaz pornind de la
sfritul matricii. El este ntotdeauna de rang 0. Dac cel de-al doilea
argument este negativ, el indic rangul (calculat, pornind de la sfritul
matricii) ultimului element care urmeaz a fi extras. Dac nu este
menionat, caracterele sunt extrase ncepnd cu rangul furnizat de primul
argument pn la sfritul matricii.
Exemplu:
lista_numere=new Array(1,2,3,4,5,6,7,8);
lista_1=lista_numere.slice(2,5);
document.write(lista_1+<br />);
//se afieaz 3,4,5
lista_2=lista_numere.slice(3);
document.write(lista_2+<br />);
//se afieaz 4,5,6,7,8
lista_3=lista_numere.slice(2,1);
document.write(lista_3+<br />); //se afieaz 3,4,5,6,7
lista_4=lista_numere.slice(2);
document.write(lista_4+<br />); //se afieaz 7,8
</script>
splice() matrice.splice(Rang,NumarElemente,
Element1,Element2,...)

Metoda suprim elementele unei matrici i le nlocuiete cu altele. Rang-
ul elementului de la care trebuie s nceap suprimarea elementelor
matricii este obligatoriu. Al doilea argument (NumarElemente) precizeaz
numrul elementelor ce urmeaz a fi suprimate. Argumentele urmtoare
(Element1,Element2,...) reprezint elementele care urmeaz a fi inserate
n matrice ncepnd cu rangul indicat pentru primul element. Metoda
returneaz lista elementelor suprimate.

Figura 4.10
(continuare)

137
Exemplu:
lista_numere=new Array(1,2,3,4,5,6,7,8);
a=lista_numere.splice(2,2,35,36);
document.write(Numere: lista_numere+<br />);
//se afieaz 1,2,35,36,5,6,7,8
</script>
toString() matrice.toString()
Metoda returneaz coninutul unei matrici sub forma unui ir de

caractere.
Exemplu:
a=culori.toString();
document.write(a);
//se afieaz rosu,galben,albastru
</script>
unshift() matrice.unshift(Element1,Element2,..)
Metoda insereaz la nceputul matricii elementele pe care le menionai.

Proprietatea length este modificat n mod automat.
Exemplu:
culori.unshift(verde,violet);
//se afieaz verde,violet,rosu,galben,albastru
</script>
sort() matrice.sort()
matrice.sort(Funcie)
matrice.sort() sau metoda sort fr argument sorteaz

elementele unei matrici care conine valori alfanumerice;
matrice.sort(Funcie) permite sortarea valorilor numerice.
Funcie primete doi parametri i returneaz o valoare numeric.

Figura 4.10
(continuare)

138

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

139
Exemplu:


Figura 4.10
(continuare)

140

Problema care se pune acum seamn cu celelalte, dar ... este puin mai complicat. Se
citesc de la tastatur, ntr-o matrice livrrile de benzin efectuate zilnic (luni, mari,
miercuri, joi, vineri) din cele trei rezervoare (cilindrice echilaterale) R1, R2, R3. Se
dorete ca, pentru fiecare rezervor n parte, s se afieze, pe zile, cantitile de benzin
livrate beneficiarilor. Se va tipri, de asemenea, media livrrilor pe zile i pe rezervoare.
La finele raportului se vor afia maximul i minimul livrrilor, precizndu-se att rezervorul
ct i ziua respectiv.

Analiza problemei
Formatul datelor de input/output (intrare/ieire), tabela de variabile, specificaiile de
programare sunt ilustrate n figurile: 4.11, 4.12, 4.13.

Figura 4.11

141
Tabela de variabile
a: matricea livrrilor pe
zile i rezervoare
st: livrrile totale pe zile i
rezervoare
s: sume pariale, livrri pe zile
z: vectorul numelor zilelor
sptmnii
imax, imin, jmax, jmin: indicii
livrrilor maxime i minime din
matricea a
b: vectorul livrrilor
medii zilnice
d: vectorul livrrilor
medii pe rezervoare
max: maximul livrrilor
min: minimul livrrilor

Descriere. Programul editeaz situaia livrrilor de benzin efectuate zilnic din trei
rezervoare cilindrice echilaterale.
Livrrile, pe zile i pentru fiecare rezervor n parte, se citesc de la tastatur. Programul
mai afieaz maximul i minimul livrrilor nsoite de rezervorul i ziua respective.
Intrri. Matricea livrrilor pe rezervoare i zile.
Ieiri. Lista cu situaia livrrilor.
1. Citete livrrile zilnice de benzin (luni,
mari, miercuri, joi, vineri) pentru
rezervorul R1.
2. Citete livrrile zilnice de benzin
(luni, mari, miercuri, joi, vineri) pentru
rezervorul R2.
3. Citete livrrile zilnice de benzin
(luni, mari, miercuri, joi, vineri) pentru
rezervorul R3.
4. Calculeaz media livrrilor pe zile.
5. Calculeaz media livrrilor pe
rezervoare.
6. Calculeaz maximul livrrilor.
7. Calculeaz minimul livrrilor.
8. Afieaz maximul livrrilor, numrul
rezervorului i ziua.
9. Afieaz minimul livrrilor, numrul
rezervorului i ziua.
10. Trunchiaz media (livrrilor pe zile
i pe rezervoare).
11. Stop

Figura 4.12
Figura 4.13

n figura 4.14 se prezint pseudocodul, varianta formalizat.

142
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 a
i,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+a
i,j
FORI ENDFOR
b
j
=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+a
i,j
st=st+a
ij
FORMEDIIJ ENDFOR
d
i
=s/5
FORMEDII ENDFOR
d
3
=s/15
// determinarea maximului si minimului
max=a
0,0
min=a
0,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<a
i,j
)
max=a
ij
imax=i
jmax=j
IFMAX ENDIF
IFMIN IF(min>a
i,j
)
min=a
ij
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"

Figura 4.14

143
FORK FOR(k=0;k<5;k++)
WRITE Z[k]
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" Z
jmax
WRITE "Livrarea minima:" min
WRITE " s-a facut din rezervorul: R"imin
WRITE " in ziua de "+Z
jmin
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

<html>
<head>
<title>Exemplul 4</title>
<script language="javascript">

</script>
</head>

Figura 4.14
(continuare)
Figura 4.15

144
<body>
<center>
<h3>SITUATIA LIVRARILOR DE BENZINA PENTRU REZERVOARELE R1 R2 R3
</h3>
function trunchiaza(x) {
var s=""+x;
i=s.indexOf(".");
if(i!=-1){
s=s.substring(0,i+3);
}
return s;
}

// CALCULUL MEDIILOR PE ZILE
var i,j;
B = new Array(5);
for(j=0;j<5;j++) {
S=0;
for(i=0;i<3;i++)
S=S+a[i][j];
B[j]=S/3;
}
// CALCULUL MEDIILOR PE REZERVOARE
D = new Array(4);
ST=0;
for(i=0;i<3;i++) {
S=0;
for(j=0;j<5;j++){
S=S+a[i][j];
ST=ST+a[i][j];
}
D[i]=S/5;
}
D[3]=ST/15;

// DETERMINAREA MAXIMULUI SI MINIMULUI
max=a[0][0];
min=a[0][0];
imax=0;imin=0;
jmax=0;jmin=0;
for(i=0;i<3;i++){
for(j=0;j<5;j++){
if(max<a[i][j]){max=a[i][j];imax=i;jmax=j;}
if(min>a[i][j]){min=a[i][j];imin=i;jmin=j;}
}
}
imin++;imax++;

Figura 4.15
( continuare)

145
//AFISARE REZULTATE
document.writeln("<center><table border=1 bgcolor#efefff><tr>");
document.writeln("<td><b>ZIUA</b><td><b>R1</b><td>
<b>R2</b><td><b>R3</b><td><b>MEDIA</b></td></tr>");

for(k=0;k<5;k++) {
document.writeln("<tr><td>" + Z[k]+"</td>");
for(j=0;j<3;j++) {
document.writeln("<td>" + a[j][k]+ "</td>");
}
document.writeln(" <td> " +trunchiaza( B[k])+ "</td></tr>");
}
document.writeln("<tr><td><b>MEDIA</b>");
for(j=0;j<4;j++)
document.writeln("<td><b>" + trunchiaza(D[j])+" </b></td>");
document.writeln("</tr>");
document.writeln("</table></center><p><p>");
document.writeln("<font size=+1 color=green>Livrarea maxima:"+max+" s-a facut din
rezervorul: R"+imax+" in ziua de "+Z[jmax]+"</font>");
document.writeln("<p><font size=+1 color=green>Livrarea minima:"+min+" s-a facut din
rezervorul: R"+imin+" in ziua de "+Z[jmin]+"</font>");
</script>
</body>
</html>
Rezultatele execuiei script-ului sunt prezentate n figura 4.16.

Figura 4.16
Figura 4.15
(continuare)

146
Aplicaie
Problema care se pune acum seamn cu cea din EXEMPLELE precedente, dar este
... puin mai complicat! Se citesc de la tastatur un numr oarecare (maxim 30) de valori
ale razelor unor rezervoare cilindrice echilaterale. Pentru fiecare valoare a razei se
calculeaz i afieaz cantitatea de benzin din rezervor. Script-ul verific totodat ca
valorile razelor rezervoarelor s fie numere pozitive. De asemenea, script-ul calculeaz i
afieaz masa total de benzin din rezervoare. n felul acesta, cu acelai script se pot
rezolva probleme ce difer prin numrul de rezervoare.

Analiza problemei
Problemele care se pun n aceast etap privesc n mod special alctuirea tabelei de
variabile, mai precis identificarea variabilelor de intrare ale script-ului.
Numrul rezervoarelor, necunoscut n problem, trebuie furnizat ca o variabil de intrare
(n) n momentul execuiei script-ului, naintea citirii datelor propriu-zise (razele
rezervoarelor). Ct privete numrul variabil de raze, de asemenea necunoscut n
momentul scrierii script-ului vom folosi ca variabil de intrare o matrice(array) cu o
singur dimensiune un vector.
Remarc. n informatic, se desemneaz prin abuz de limbaj sub numele de vector, mulimea
{V(1), V(2), , V(n)}, unde V(1), V(2), , V(n) sunt elementele vectorului. Aadar, un vector este
o mulime de elemente identificate prin poziia pe care acestea o ocup. Prelucrrile ce se
efectueaz asupra unui vector sunt funcie de valoarea unui indice de poziie (0<=i<=n). Acestuia
i se fixeaz o valoare care, n general, corespunde primei poziii, iar prelucrarea se efectueaz
ct timp valoarea acestui indice nu depete o valoare final.
n figura 4.17, 4.18, 4.19 sunt prezentate: formatul datelor de ieire, tabela de variabile,
specificaiile de programare.
Formatul datelor de ieire

RAZA MASA
xx
xx
.
xx
xxx.xx
xxx.xx
.
xxx.xx
MASA TOTALA= xxx.xx TONE

Tabela de variabile
n: numrul de rezervoare
r: vectorul razelor
rezervoarelor
d: densitatea benzinei
i: indicele de poziie (indexul)
v: volumul rezervorului
s: masa total de benzin
m: masa de benzin din rezervor
din rezervor
s: cantitatea (masa) total
de benzin
Figura 4.17
Figura 4.18

147
Descriere. Script-ul calculeaz i afieaz cantitatea de benzin (s) dintr-un numr
oarecare (n) de rezervoare cilindrice echilaterale (acest numr este furnizat ca
parametru). Script-ul citete valorile razelor rezervoarelor ntr-un vector de date (r)
printr-o procedur de introducere dinamic a datelor (razele cu valori negative nu se
iau n considerare!). Pentru raze cu valori negative, script-ul afieaz mesajul: Raza
negativ. Valoarea densitii benzinei (d) se introduce n mod static.
Intrri. Se introduc de la tastatur numrul rezervoarelor cilindrice echilaterale i
valorile razelor acestora.
Ieiri. Masa de benzin (m) din fiecare rezervor i masa total (s) de benzin.
1. Citete numr rezervoare (n).
2. Iniializeaz variabila (s).
3. Atribuie variabilei d valoarea 0.7 (densitatea benzinei).
4. Afieaz un rnd de 30 de =.
5. Afieaz raza, masa.
6. Pentru fiecare rezervor (cilindric echilateral):
6.1 Citete valoarea razei unui rezervor.
6.2 Valideaz datele introduse dup cum urmeaz: pentru fiecare
articol se verific dac valoarea razei citite este negativ.
Script-ul afieaz mesajul: Raza negativ.
7. Pentru fiecare rezervor (cilindric echilateral):
7.1 Calculeaz volumul rezervorului.
7.2 Calculeaz masa de benzin din rezervor.
7.3 nsumeaz m n s.
7.4 Afieaz r, m
8. Afieaz masa total de benzin
9. Stop

Proiectarea programului
n figura 4.20 se prezint pseudocodul, varianta formalizat.
Pseudocodul
REZERVOARE BEGIN
d=0.7
s=0
//Citeste numar rezervoare(n)
READ(n)
CAP-TABEL BEGIN
Do LINIUTZA
WRITE(raza+ +masa);
DO LINIUTZA
CAP-TABEL END
Figura 4.20
Figura 4.19

148
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


Rezultatele execuiei script-ului sunt prezentate n figurile 4.22, 4.23.
Figura 4.21
Figura 4.20
(continuare)

149

Figura 4.22
Figura 4.23

150

Tem

Testai-v cunotinele
1. Care sunt obiectele interne (integrate) ale limbajului JavaScript?
2. Cum se creeaz obiectul String?
3. Care sunt proprietile obiectului String?
4. Care sunt metodele pentru formatarea irurilor de caractere?
5. Ce realizeaz urmtoarele metode ale obiectului String:
indexOf();
substr();
toLowerCase().
6. Cum se creeaz obiectul Array?
7. Ce realizeaz urmtoarele metode ale obiectului Array?
concat();
toString;
sort().
8. Se consider irul de caractere:
sir=Protopopescu Augustin;
Precizai ce valori returneaz urmtoarele metode ale obiectului String:
alert(sir.charAt(3)); //afieaz ...?...
alert(sir.charCodeAt(3)); //afieaz ...?...
alert(sir.indexOf(0)); //afieaz ...?...
alert(sir.indexOf(0,8)); //afieaz ...?...
alert(sir.indexOf(z,8)); //afieaz ...?...
sir=abcdef;
alert(sir.slice(0,3)); //afieaz ...?...
alert(sir.slice(1,3)); //afieaz ...?...
alert(sir.slice(3)); //afieaz ...?...
alert(sir.slice(2,-1)); //afieaz ...?...
alert(sir.slice(2,-2)); //afieaz ...?...

JavaScript

151
alert(sir.slice(-2,-1)); //afieaz ...?...
sir=a,b,c,d,e,f;
alert(sir.split(,)); //afieaz ...?...
alert(sir.substr(2,2)); //afieaz ...?...
alert(sir.substr(3)); //afieaz ...?...
alert(sir.substr(-3,2)); //afieaz ...?...
alert(sir.substr(0,2)); //afieaz ...?...
11. Se consider matricea:
g=[1,2,3];
Precizai ce valori returneaz urmtoarele metode ale obiectului Array:
alert(g.concat(4,5)); //afieaz ...?...
alert(g.concat([4,5])); //afieaz ...?...
alert(g.concat([4,5],[6,7])); //afieaz ...?...
alert(g.concat(4,[5,[6,7]])); //afieaz ...?...
12. Se consider matricea:
g=[1,2,3,4,5];
Precizai ce valori returneaz urmtoarele metode ale obiectului Array:
alert(g.slice(0,3)); //afieaz ...?...
alert(g.slice(3)); //afieaz ...?...
alert(g.slice(1,-1); //afieaz ...?...
alert(g.slice(-3,-2)); //afieaz ...?...
13. Se consider funcia:
function sortare(x,y){
return x-y;
}
i
var g=new array(7,5,100,21);
Precizai rezultatele obinute n urma execuiei urmtoarelor metode:
alert(g.sort()); //afieaz ...?...
alert(g.sort(sortare)); //afieaz ...?...
14. Care este efectul metodei join()? Care este relaia sa cu metoda split()
a obiectului String?
Figura 11.3 (Conversaia 11, pagina 5);
Figura 11.5 (Conversaia 11, pagina 5).

152

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

.

Conversaia 5

Obiectele (interne) RegExp, Date, Arguments

Expresii regulate
Obiectul RegExp. Aplica ii
Obiectul Date. Aplica ii
Obiectul Arguments Aplica ii
Tem

Expresii regulate
Expresiile regulate (Regular Expressions, n limba englez) sunt utilizate ca
modele (tipare) de cutare pentru regsirea, tergerea i nlocuirea caracterelor.
Expresiile regulate nu sunt primordiale n programarea JavaScript, dar ele sunt
universale (foarte multe limbaje de programare le utilizeaz) i pot s v
simplifice ... viaa odat ce ele au fort asimilate.
Remarci:
Implementarea expresiilor regulate n limbajul JavaScript a fost preluat direct din
limbajul Perl.
Expresiile regulate sunt puin mai ... greu de digerat, dar ele reprezint o funcie
puternic a limbajului, ncepnd cu JavaScript 1.4. Versiunile ulterioare ofer numeroase
mbuntiri.
Expresiile regulate pot fi utilizate n e-commerce (comerul electronic) pentru
validarea numerelor crilor de credit, a numerelor de telefon, a adreselor etc.
O expresie regulat este un obiect JavaScript.
Utilizai (la maximum) expresiile regulate n formularele dumneavoastr deoarece ele v
garanteaz date fiabile (vezi Conversaia 8).
Crearea expresiilor regulate este foarte asemntoare cu crearea irurilor (strings, n
limba englez).

154

Obiectul RegExp() este un obiect predefinit (built-in), care nu depinde de
navigator.
Fia obiectului RegExp() este prezentat n figura 5.1.
Fia obiectului RegExp
Cum se creeaz obiectul? constructorul RegExp()
Proprieti: $
, $&, $
_
, $
\
, $+, $n, global,
ignoreCase, index, input, lastIndex,
lastMatch, lastParen, leftContext,
multiline, rightContext, source
Metode: compile(), exec(), test()

Constructorul RegExp()
Constructorul RegExp() este prezentat n detaliu n figura 5.2.
Constructor Sintax
RegExp() Variabila=new
RegExp(Model,Atribut)
Variabila=/Model/Atribut
Variabila va conine modelul expresiei regulate transmis ca parametru

(Model). At ibut (cel de-al doilea parametru) stocheaz sub forma
unui ir de caractere atributele de identificare ale modelelor (tiparelor).
Cele trei atribute ale obiectului RegExp sunt urmtoarele:
g cutare global; gsete toate apariiile posibile.
i n cursul cutrii nu face deosebire ntre majuscule i minuscule.
m cutare multilinie (vezi zona textarea din cadrul unui formular).
gi cumuleaz opiunile g i i.
Expresiile regulate pot fi create i n mod implicit. n acest caz, se
atribuie modelul (tiparul) ncadrat ntre mai multe bare oblice, direct
unei variabile.
Cele dou metode de definire a unei expresii regulate sunt riguros
echivalente. Slash-urile (/) nu sunt necesare n constructorul RegExp(),
deoarece se poate face distincie ntre acesta i constructorul
String().

r

Obiectul RegExp
Figura 5.1
Figura 5.2

155
Caracterele de repetiie utilizate n identificarea modelelor (tiparelor) sunt
prezentate n figura 5.3.
Caracter Descriere
x{m,n} Caracterul precedent (x) este identificat de cel puin m ori, dar nu mai mult de n
ori (m i n reprezint numere).
x{m, } Caracterul precedent (x) este identificat de cel puin m ori.
x{m} Caracterul precedent este identificat de m ori.
x? Caracterul precedent (x) este identificat o dat sau nici o dat.
x+ Caracterul precedent (x) este identificat cel puin o dat.
x* Cutare multilinie (vezi zona textarea din cadrul unui formular).
Clasele de caractere utilizate n identificarea modelelor (tiparelor) sunt
prezentate n figura 5.4:
Clasa de caractere Descriere
[...] Orice caracter inclus ntre paranteze.
. Orice caracter, cu excepia caracterului (\n) salt la linie nou.
[^] Orice caracter care nu apare ntre paranteze.
[m-n] Orice caracter din intervalul m la n care apare n irul de cutare.
[^m-n] Orice caracter care nu se afl n intervalul de la m la n.
\w w mic (\w) identific orice caracter (identic cu [a-z A-Z 0-9 ...])
\W W mare (\W) este opusul lui (\w) (identic cu [^a-z A-Z 0-9 ...]).
\s s mic (\s) identific orice caracter de spaiu (identic cu [\t\n\r\v]).
\S S mare (\S) este opusul lui (\s) (identic cu [^\t\n\r\v]).
\d d mic (\d) identific orice cifr ntre 0 i 9 (identic cu [0-9]).
\D D mare (\D) este opusul lui d mic (\d) (identic cu [^0-9])
[\b] Identificare caracter backspace (\b este plasat ntre paranteze drepte).
Remarc. Pentru a defini mai multe modele de cutare n aceeai expresie regulat, utilizai
parantezele rotunde i operatorul SAU logic (|).
Indicatorii de poziie pe care i putei folosi n identificarea modelelor sunt
prezentai n figura 5.5.
Indicator de poziie Poziia n rul de carac ere i t
^ nceputul irului de caractere.
$ Sfritul irului de caractere.
\b Identific o poziie dintre un caracter de text i un caracter
care nu este de text.
\B Opusul lui \b.
Figura 5.3
Figura 5.4
Figura 5.5

156
Aplicaie
n Tabelul 5.1 sunt prezentate mai multe exemple de utilizare a expresiilor regulate.
Comentai rezultatele cutrii lor.
Tabelul 5.1
Atribut Gsete Nu gsete
/12+3/ 123,122223 12
/ab?c/ abc,ac abbc
/bon{1,2}us/ bonus,bonnus bonnnus
/1*2{5}3/ 1222223 123,122222

Proprietile obiectului RegExp
Proprietile obiectului RegExp sunt prezentate n detaliu (n ordine alfabetic)
n figura 5.6.
Proprietate Sintax
$\ RegExp[$\]
Returneaz textul situat la dreapta ultimului text gsit. Echivalent cu

RightContext.
Exemplu:
<script language="javascript" type="text/javascript">
var model=/ion/i;
model.test("Ion Ionescu");
document.write(RegExp["$\"]); //afiseaza Ionescu
</script>
$& RegExp[$&]
Returneaz ultimul text gsit. Echivalent cu lastMatch.

Exemplu:
var model=/ion/i;
document.write(RegExp["$&"]);
//afiseaza Ion
</script>
$_ RegExp[$_]
Returneaz irul de caractere n care a fost efectuat cutarea. Echivalent cu

input.
Exemplu:
var model=/ion/i;
document.write(RegExp["$_"]); //afiseaza Ion
</script>

Figura 5.6

157
$

RegExp[$]
Returneaz textul situat la stnga ultimului text gsit. Echivalent cu

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

cu lastParen.
Exemplu:
var model=/(ion)|(ionescu)/ig;
document.write(RegExp["$+"]);
//afiseaza Ionescu
</script>
$n RegExp.$n
$1, $2, , $9 returneaz primele 9 sub-iruri ale modelului.

global RegExp.global
Returneaz true dac atributul g (cutare global) a fost definit; n caz contrar
returneaz false.
Exemplu:
model=/cartof/g;
model.test("Un cartof sau doi cartofi?");
document.write(model.global);
//afiseaza true
</script>
ignoreCase RegExp.ignoreCase
Returneaz true dac atributul i (n cursul cutrii nu se face deosebire ntre

majuscule i minuscule) a fost definit; n caz contrar returneaz false.
Exemplu:
model=/ion/i;
document.write(model.ignoreCase);
//afiseaza true
</script>
index RegExp.index
Returneaz poziia primului caracter al textului gsit.

Exemplu:
model=/ion/i;
document.write(RegExp.index);
//afiseaza 6
</script>

Figura 5.6
(continuare)

158
input RegExp.input
Returneaz irul de caractere n care a fost efectuat cutarea.

Exemplu:
model=/ion/i;
document.write(RegExp.input);
//afiseaza Nume: Ion Ionescu
</script>
lastIndex RegExp.lastIndex

Returneaz poziia, n irul de caractere de la care va ncepe viitoarea cutare.
Primul caracter se afl pe poziia 0. Returneaz 0 dac precedenta cutare a
euat. Pentru c viitoarea cutare ncepe cu primul caracter, atribuii valoarea 0
acestei proprieti.

Exemplu:
model=/ion/i;
document.write(RegExp.lastIndex);
//afiseaza 3
</script>

lastMatch RegExp.lastMatch

Returneaz ultimul text gsit.

Exemplu:
model=/ion/i;
document.write(RegExp.lastMatch);
//afiseaza Ion
</script>

lastParen RegExp.lastParen

Returneaz textul gsit prin ultima sub-expresie a modelului utilizat.

Exemplu:
model=/(ion)|(ionescu)/ig;
document.write(RegExp.lastParen);
//afiseaza Ionescu
</script>

leftContext RegExp.leftContext

Returneaz textul situat la stnga ultimului text gsit.

Exemplu:
model=/ion/i;
document.write(RegExp.leftContext); //afiseaza Nume:
</script>

multiline regExp.multiline

Returneaz true dac atributul m (multilinie) a fost definit; n caz contrar
returneaz false.

Figura 5.6
(continuare)

159

Exemplu:
model=/ion/m;
document.write(model.multiline);
//afiseaza true
</script>

rightContext RegExp.rightContext

Returneaz textul situat la dreapta ultimului text gsit.

Exemplu:
model=/ion/i;
document.write(RegExp.rightContext);
//afiseaza Ionescu
</script>

source regExp.source

Returneaz expresia regulat.

Exemplu:
model=/ion/i;
document.write(model.source);
//afiseaza ion
</script>

Metodele obiectului RegExp
Metodele obiectului RegExp, prezentate n detaliu n figura 5.7 servesc pentru
identificarea modelelor (tiparelor) n obiectul RegExp.
Metod Sintax
compile() model.compile(model)

nlocuiete un model vechi cu unul nou.
Exemplu:
var model=/ftp.*/i;
model.compile("http.*","i");
document.write(model.source);
</script>
exec() model.exec(text)

Caut un model n text i returneaz rezultatul (o matrice Array).
Exemplu:
var model=/ion/i;
rezultat=model.exec("Nume: Ion Ionescu");
document.write(rezultat+"<br />");
//afiseaza Ion
document.write(rezultat[0]+"<br />"); //afiseaza Ion
</script>

Figura 5.6
(continuare)
Figura 5.7

160

test() model.test(text)

Caut un model n text i returneaz true/false.

Exemplu:
var model=/ion/i;
rezultat=model.test("Nume: Ion Ionescu");
//se afiseaza true
</script>
Remarci:
Metodele: compile(), exec() i test() de tip RegExp impun ca obiectul
String n care se face cutarea s fie transmis ca argument.
Metoda exec() modific de asemenea mai multe proprieti ale matricei returnate, ale
modelului i ale obiectului RegExp:
Matricea (Array) index, input;
Modelul lastIndex, source, global, ignoreCase;
RegExp lastMatch, leftContext, rightContext, multiline.

Figura 5.7
(continuare)
Se reia problema rezervoarelor din exemplele precedente. n acest exemplu (EXEMPLUL
5 JAVASCRIPT) se dorete ca situaia livrrilor de benzin s fie expediat prin e-mail, la
o adres specificat de ctre utilizator. EXEMPLUL 5 JAVASCRIPT verific dac adresa
e-mail este format din caractere valide. n acest sens se va crea un model RegExp(re)
care s includ urmtoarele reguli:
adresa trebuie s nceap cu cel puin un caracter (plasat la stnga simbolului
@);
adresa trebuie s conin simbolul @;
adresa trebuie s conin cel puin un caracter dup simbolul @;
adresa poate conine caracterele: . sau - dar nu unul dup cellalt;
adresa trebuie s se termine cu punct (.) urmat de cel puin dou caractere.
n caz de eroare, ntr-o caset de dialog se va afia mesajul de avertizare: Adresa
E-mail: xxxxxxxx este incorect. Expedierea prin e-mail a situaiei livrrilor de benzin
din cele trei rezervoare se va efectua prin acionarea unui buton Trimite email.

Analiza problemei
n figura 5.8 este prezentat ecranul cu Situaia livrrilor de benzin pentru rezervoarele
R1, R2, R3, care conine de asemenea i zona de text pentru adresa e-mail (Adresa) i

161
butonul Trimite email. n situaia n care adresa de e-mail introdus n zona Adresa nu
este valid se afieaz un mesaj de eroare, ntr-o caset de dialog.

Tabela de variabile i specificaiile de programare sunt prezentate n figura 5.9, respectiv
figura 5.10.
Tabela de variabile
adresa: obiect, zon
de editare text pentru
introducerea adresei
de email
st: suma livrrilor totale pe
zile i rezervoare
s: sume pariale pe zile
rval: starea zonei de editare
(valid sau nu)
x: valoarea real a textului
introdus n zona de editare
z: numele zilelor sptmnii
imax, imin, jmax, jmin: indicii
livrrilor maxime i minime
din matricea a
a: matricea livrrilor pe zile i
rezervoare
b: vectorul mediilor livrrilor
pe zile
d: vectorul mediilor livrrilor
pe rezervor
max, min: valoarea maxim
i minim a livrrilor

Figura 5.8
Figura 5.9

162
Descriere. Programul expediaz prin e-mail Situaia livrrilor de benzin pentru
rezervoarele R1, R2, R3 la o adres specificat de utilizator.
Intrri. Adresa e-mail.
Ieiri. Raportul cu situaia livrrilor expediate prin e-mail.
1. Afieaz Trimite situaia prin Email.
2. Afieaz forma de introducere a adresei
de email.
3. Rspunde la evenimentele generate de
butonul Trimite email.
4. Rspunde la evenimentele generate de
zona de editare.
5. Valideaz valoarea introdus n zona
de text (adresa).
6. Afieaz mesajul de eroare Adresa
E-mail xxx este incorect.
7. Formeaz corpul mesajului ce
urmeaz a fi trimis prin email.
8. Stop

Pseudocodul pentru EXEMPLUL 5 JAVASCRIPT este prezentat n figura 5.11.
Pseudocodul
Exemplul5 BEGIN
//citeste livrarile pe fiecare rezervor de la tastatura
LIV FOR(i=0;i<3;i++)
LIV1 FOR(j=0;j<5;j++)
READ a
i,j
LIV1 ENDFOR
LIV ENDFOR
s=0
s=s+a
i,j
FORI ENDFOR
b
j
=s/3
FORJ ENDFOR
st=0
FORMEDII FOR(i=0;i<3;i++)
s=0
FORMEDIIJ FOR(j=0;j<5;j++)
s=s+a
i,j
st=st+a
ij
FORMEDIIJ ENDFOR
d
i
=s/5
Figura 5.11
Figura 5.10

163
FORMEDII ENDFOR
d
3
=s/15
max=a
0,0
min=a
0,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<a
i,j
)
max=a
ij
imax=i
jmax=j
IFMAX ENDIF
IFMIN IF(min>a
i,j
)
min=a
ij
imin=i
jmin=j
IFMIN ENDIF
FORMAXJ ENDFOR
FORMAXI 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"
FORK FOR(k=0;k<5;k++)
WRITE Z[k]
FORJA FOR(j=0;j<3;j++)
WRITE a[j][k]
FORJA ENDFOR
WRITE trunchiaza( b[k])
FORK ENDFOR
WRITE "MEDIA"
FORTRUNCJ FOR(j=0;j<4;j++)
WRITE trunchiaza(d[j])
FORTRUNCJ ENDFOR
WRITE "Livrarea maxima: " max
WRITE "s-a facut din rezervorul: R" imax
WRITE "in ziua de" Z
jmax
WRITE "Livrarea minima:" min
WRITE " s-a facut din rezervorul: R"imin
WRITE " in ziua de "+Z
jmin
WRITE " Trimite situatie prin e-mail"
//afiseaza forma de introducere a adresei de email
WRITE "<Form> ... "
//raspunde la evenimentele generate de butonul Trimite Email
IFMAIL IF(se apasa butonul Trimite Email)
DO trimite_email()
IFMAIL ENDIF
//raspunde la evenimentele generate de zona de editare
Figura 5.11
(continuare)

164
IFEDIT IF(se paraseste zona de editare adresa)
DO verificaAdresa()
IFEDIT ENDIF

Exemplul5 END
TRUNCHIAZA BEGIN
Parametrii:
x- valoare reala
IFCOPY IF(i-1)
IFCOPY ENDIF
RETURN s
TRUNCHIAZA END
VERIFICAADRESA BEGIN
//valideaza valoarea introdusa in zona de text adresa
rval=fals
Initializeaza REGEXP re cu
modelul: /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/
s=adresa.value
rval=re.test
IFVALID IF(!rval)
WRITE mesaj de eroare: "Adresa gresita"
IFVALID ENDIF
RETURN rval
VERIFICAADRESA END
//formeaza corpul mesajului de email
FORMEAZA_AFIS BEGIN
sbody= "SITUATIA REZERVOARELOR R1 R2 R3"
sbody+= "ZIUA R1 R2 R3 MEDIA"
FORKMESAJ FOR(k=0;k<5;k++)
sbody+= Z[k]
FORJMESAJ FOR(j=0;j<3;j++)
sbody+= a[j][k]
FORJMESAJ ENDFOR
sbody+= trunchiaza( b[k])
FORKMESAJ ENDFOR
sbody+= "MEDIA"
FORTRUNC FOR(j=0;j<4;j++)
sbody+= trunchiaza(d[j])
FORTRUNC ENDFOR
sbody+= "Livrarea maxima: " max
sbody+= "s-a facut din rezervorul: R" imax
sbody+= "in ziua de" Z
jmax
sbody+= "Livrarea minima:" min
sbody+= " s-a facut din rezervorul: R"imin
sbody+= " in ziua de "+Z
jmin
FORMEAZA_AFIS END
Figura 5.11
(continuare)


165
<html>
<head>

</script>
</head>
<body>
<center>
<h3>SITUATIA LIVRARILOR DE BENZINA PENTRU REZERVOARELE R1 R2 R3</h3>
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;
}
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;
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++){
}}
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>
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
document.writeln("<p><font size=+1 color=green>Livrarea minima:"+min+" s-a facut din
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>
Figura 5.12
(continuare)
Figura 5.12
(continuare)

168

Figura 5.13

169

Comentarii:
Verificarea adresei de e-mail se realizeaz cu gestionarul de evenimente onBlur care
lanseaz n execuie funcia VerificaAdresa()(figura 5.12).
Funcia VerificaAdresa() utilizeaz obiectul re cu modelul prezentat n figura
5.15.

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

Expedierea prin e-mail a raportului se realizeaz prin acionarea butonului Trimite
email care lanseaz n execuie funcia trimite_email() (figura 5.12).
Figura 5.14
Figura 5.15
Corpul mesajului trimis prin email este generat de funcia formeaza_afis(figura
5.12).

Aplicaie

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

Figura 5.16
Rezultatele execuiei script-ului sunt prezentate n figura 5.17.

Figura 5.17

171

Date este un obiect predefinit al limbajului JavaScript care v permite s lucrai
cu valori reprezentnd orele i datele calendaristice.
Remarci:
JavaScript consider c data iniial (de referin) este 1 ianuarie 1970 (convenia
UNIX).
JavaScript ine evidena valorilor: or sau data calendaristic n milisecunde, ncepnd cu
1 ianuarie 1970.
Fia obiectului Date este prezentat n figura 5.18.
Fia obiectului DATE
Cum se creeaz obiectul? constructorul Date()
Proprieti: -
Metode: 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()

Obiectul Date
Figura 5.18
Constructorul Date()
Constructorul Date() creeaz o nou dat.
Constructorul Date() este prezentat n detaliu n figura 5.19.

172
Constructor Sintax
Date() Variabila=new Date()
Variabila=new Date(An, Lun, Zi, Ore,
Minute, Secunde, Milisecunde)
new Date() creeaz un obiect avnd data i ora curente. Cel de-al
doilea format creeaz un obiect cu data i ora specificate.
Putei crea un obiect Date folosind numai argumentele: An, Lun, Zi.
Respectai ordinea argumentelor. Lunile se numr de la zero.
Crearea unui obiect Date este similar cu crearea obiectelor
String, Array.
Exemplu:
<script>
azi=new Date();
document.write(azi);
//afieaz data i ora curente
</script>
Exemplu:
<script>
azi=new Date(2002,5,9);
alert(azi);
//obiectul Date conine 9 mai 2002
</script>

Figura 5.19

Metodele obiectului Date
Metodele obiectului Date permit: definirea valorilor obiectelor Date
(setDate(); setMonth(); setFullYear(); setTime();
setHours(); setMinutes(); setSeconds() etc.); citirea valorilor
obiectelor Date (getDate(); getMonth(); getFullYear();
getTime(); getHours() etc.); gestionarea fusurilor orare i a orelor locale
(getTimeZoneOffset(); toUTCString(); toLocalString()
etc.); conversia ntre formatele datelor (Date.parse(); Date.UTC() etc.).
Metodele obiectului Date sunt prezentate n detaliu n figura 5.20.

173
Metod Sintax
getDate() Data.getDate()
Metoda returneaz ziua din lun.

Exemplu:
<script>
data=new Date(2004,4,1);
a=data.getDate();
document.write(a);
...//afieaz 1
</script>
getDay() Data.getDay()
Metoda returneaz un numr care corespunde zilei sptmnii: 0 pentru

duminic; 1 pentru luni etc.
Exemplu:
<script>
//1 aprilie 2004
...a=data.getDay()
document.write(a);
...//afieaz 4 (pentru joi)
</script>

getFullYear() Data.getFullYear()

Metoda returneaz anul n 4 cifre.

Exemplu:
<script>
a=data.getFullYear();
document.write(a);
...//afieaz 2004
</script>

getHours() Data.getHours()

Metoda returneaz numrul de ore (ntre 0 i 23).

Exemplu:
<script>
data=new Date(2004,5,9,8,25,0);
a=data.getHours();
document.write(a);...//afieaz 8
</script>

getMilliseconds() Data.getMilliseconds()

Metoda returneaz numrul de milisecunde.

Exemplu:
<script>
data=new Date(2004,5,9,8,25,8,750);
a=data.getMilliseconds();
document.write(a);
...//afieaz 750
</script>

getMinutes() Data.getMinutes()

Metoda returneaz numrul de minute.

Figura 5.20

174

Exemplu:
<script>
data=new Date(2004,5,9,8,25,8,750);
a=data.getMinutes();
document.write(a);
...//afieaz 25
</script>

getMonth() Data.getMonth()

Metoda returneaz numrul lunii (de la 0 la 11).
Exemplu:
<script>
a=data.getMonth();
document.write(a+1);
...//afieaz 4
</script>

Exemplu:
<script>
luna=new
Array(ianuarie,februarie,martie,aprilie,mai,iunie,iulie,august,
septembrie,octombrie,noiembrie,decembrie);
a=data.getMonth();
document.write(luna[a]); ...//afieaz aprilie
</script>

getSeconds() Data.getSeconds()

Metoda returneaz numrul de secunde (ntre 0 i 59).

Exemplu:
<script>
data=new Date(2004,5,9,8,25,8,750);
a=data.getSeconds();
</script>

getTime() Data.getTime()

Metoda returneaz data n milisecunde, calculat de la 1 ianuarie 1970.

Exemplu:
<script>
data=new Date(2002,5,9,8,25,8,750);
a=data.getTime();
document.write(a); ..//afieaz 1023603908750
</script>

getUTCDate() Data.getUTCDate()

Metoda returneaz zona din lun transpus n timp UTC (Universal
Coordinated Time).

Exemplu:
<script>
//1 aprilie 2004
a=data.getUTCDate();
...//afieaz 1
</script>
Figura 5.20
(continuare)

175

getUTCDay() Data.getUTCDay()

Metoda returneaz ziua din sptmn transpus n timp UTC (0 pentru
duminic; 1 pentru luni etc.).
Exemplu:
<script>
data=new Date(2002,5,9); //9 mai 2002
a=data.getUTCDay();
document.write(a);
...//afieaz 0 (pentru duminic)
</script>

Exemplu:
<script>
ziua=new Array(duminic,luni,mari,miercuri,joi,vineri, smbt);
data=new Date(2002,5,9); //9 mai 2002
a=data.getUTCDay();
document.write(ziua[a]);
...//afieaz duminic
</script>

getUTCFullYear() Data.getUTCFullYear()

Metoda returneaz anul transpus n timp UTC, n format de 4 cifre.

Exemplu:
<script>
//1 aprilie 2004
a=data.getUTCFullYear();
</script>

getUTCHours() Data.getUTCHours()

Metoda returneaz ora (ntre 0 i 23) transpus n timp UTC.

Exemplu:
<script>
data=new Date(2002,5,9,8,25,0);
a=data.getUTCHours();
</script>

getUTCMilliseconds() Data.getUTCMilliseconds()

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

Exemplu:
<script>
data=new Date(2002,5,9,8,25,8,750);
a=data.getUTCMilliseconds();
</script>

getUTCMinutes() Data.getUTCMinutes()

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

Exemplu:
<script>
data=new Date(2002,5,9,8,25,8,750);
a=data.getUTCMinutes();
</script>

Figura 5.20
(continuare)

176

getUTCMonth() Data.getUTCMonth()

Metoda returneaz numrul lunii (transpus n timp UTC).
Exemplu:
<script>
//9 mai 2002
a=data.getUTCMonth();
document.write(a);
...//afieaz 5
</script>

Exemplu:
<script>
luna=new Array(Ianuarie,Februarie,Martie,Aprilie,Mai,Iunie,Iulie,
August, Septembie,Octombrie,Noiembrie,Decembrie);
//1 aprilie 2004
a=data.getUTCMonth();
document.write(luna[a1]);
...//afieaz aprilie
</script>

getUTCSeconds Data.getUTCSeconds()

Returneaz numrul de secunde (ntre 0 i 59) transpus n timp UTC.

Exemplu:
<script>
data=new Date(2002,5,9,8,25,8,750);
a=data.getUTCSeconds();
</script>

getVarDate() Data.getVarDate()

Returneaz data i ora n litere (n limba englez).

Exemplu:
<script>
a=data.getVarDate();
document.write(a);...//afieaz Sun Jun 9 00:00:00 UTC+0200 2002
</script>

setDate() Data.setDate(Numr)

Metoda modific ziua din lun ntr-un obiect Date. Metoda accept un
argument (un numr cuprins ntre 1 i 31) i returneaz noua dat n
milisecunde.

Exemplu:
<script>
//15 august 2004
a=data.setDate(3);
document.write(a+<br/>);
afieaz 10283256000000
document.write(data.toString());
...//afieaz Sat Aug 3 00:00:00 UTC+0200 2002
</script>

Figura 5.20
(continuare)

177

setFullYear() Data.setFullYear(Numr)

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

Exemplu:
<script>
//15 august 2002
a=data.setFullYear(2004);
...//afieaz 109252 08 00000
//afieaz Sun Aug 15 00:00:00 UTC+0200 2004
</script>

setHours() Data.setHours(Numr)

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

Exemplu:
<script>
data=new Date(2002,7,15,14,25,32);
//15 august 2002
a=data.setHours(3);
...//afieaz 1029374732000
//afieaz Thu Aug 15 03 25:32 UTC+ 0200 2002
</script>

setMilliseconds() Data.setMilliseconds(Numr)

Metoda modific numrul de secunde ntr-un obiect Date. Aceast
metod accept un argument (numrul de milisecunde) i returneaz
noua dat n milisecunde.

Exemplu:
<script>
data=new Date(2002,7,15,14,25,32,750);
a=data.setMilliseconds(3);
...//afieaz The Aug 15 14 25:32 UTC+0200 2002
</script>

setMinutes() Data.setMinutes(Numr)

Metoda modific minutele ntr-un obiect Date. Aceast metod
accept un argument (minutele ntre 0 i 59) i returneaz noua dat n
milisecunde.

setMonth() Data.setMonth(Numr)

Metoda modific luna ntr-un obiect Date. Aceast metod accept un
argument (luna ntre 0 i 12) i returneaz noua dat n milisecunde.

Figura 5.20
(continuare)

178

setSeconds() Data.setSeconds(Numr)

Metoda modific secundele ntr-un obiect Date. Aceast metod
accept un argument (numrul de secunde ntre 0 i 59) i returneaz
noua dat n milisecunde.

setTime() Data.setTime()

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

setUTCDate() Data.setUTCDate()

Modific ziua din lun ntr-un obiect Date (transpus n UTC). Aceast
metod accept un argument (un numr cuprins ntre 1 i 31) i
returneaz noua dat n milisecunde.

setUTCFullYear() Data.setUTCFullYear()

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

setUTCHours() Data.setUTCHours()

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

Exemplu:
<script>
data=new Date(2002,7,15,14,25,32);
a=data.setUTCHours(3);
document.write(a+<br/>);...//afieaz 1029381932000
//afieaz Thu Aug 15 05:25:32 UTC+0200 2002
</script>

setUTCMilliseconds() Data.setUTCMilliseconds()

Metoda modific numrul UTC de milisecunde ntr-un obiect Date.
Aceast metod accept un argument (numrul de milisecunde) i
returneaz noua dat n milisecunde.

setUTCMinutes() Data.setUTCMinutes()

Metoda modific minutele UTC ntr-un obiect Date. Aceast metod
accept un argument (minutele ntre 0 i 59) i returneaz noua dat n
milisecunde.

setUTCMonth() Data.setUTCMonth()

Metoda modific luna UTC ntr-un obiect Date. Aceast metod
accept un argument (luna ntre 0 i 11) i returneaz noua dat n
milisecunde.
Figura 5.20
(continuare)

179

setUTCSeconds() Data.setUTCSeconds()

Metoda modific secundele n timp universal (UTC) ntr-un obiect Date.
Aceast metod accept un argument (numrul de secunde ntre 0 i
59) i returneaz noua dat n milisecunde.

setYear() Data.setYear(Numr)

Metoda modific anul ntr-un obiect Date. Aceast metod accept un
argument (anul cu dou cifre) i returneaz noua dat n milisecunde.
Dat fiind interpretarea foarte diferit a navigatoarelor, este mai bine s
utilizai n locul acestei metode, metoda setFullYear().

toDateString() Data.toDateString()

Metoda returneaz data n litere, n limba englez.

Exemplu:
<script>
data=new Date(2002,7,15,14,25,32,750);
a=data.toDateString();
...//afieaz The Aug 15 2002
</script>

toGMTString() Data.toGMTString()

Metoda returneaz data i ora GMT n litere, n limba englez. Este bine
s utilizai n locul acestei metode, din motive de interpretare diferit de
ctre browser, metoda toString().

toLocalDateString() Data.toLocalDateString()

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

Exemplu:
<script>
data=new Date(2002,7,15,14,25,32,750);
a=data.toLocalDateString();
...//afieaz Jeudi 15 aot 2002
</script>

toLocaleString() Data.toLocaleString()

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

toLocalTimeString() Data.toLocalTimeString()

Metoda returneaz ora n formatul mainii pe care este executat
script-ul.

toString() Data.toString()

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

Exemplu:
<script>
Figura 5.20
(continuare)

180
data=new Date(2002,7,15,14,25,32,750);
a=data.toString();
...//afieaz Thu Aug 15 14:32 UTC+0200 2002
</script>

toTimeString() Data.toTimeString()

Metoda returneaz ora n format englezesc.

Exemplu:
<script>
data=new Date(2002,7,15,14,25,32,750);
a=data.toTimeString();
...//afieaz 14:25:32 UTC+0200
</script>

toUTCString() Data.toUTCString()

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

valueOf() Data.valueOf()

Metoda returneaz data i ora n milisecunde.

Exemplu:
<script>
data=new Date(2002,7,15,14,25,32,750);
a=data.valueOf();
document.write(a+<br/>);...//afieaz 1029414332750
</script>
Figura 5.20
(continuare)

Aplicaii
Inserai data i ora ntr-o pagin Web.
Indicaie. Utilizai formatul: zz/ll/aaaa. (Exemplu, 30/1/2004 10:25 PM).
n figura 5.21 este prezentat documentul HTML ([4]) complet al aplicaiei.

181

n figura 5.22 sunt vizualizate rezultatele execuiei script-ului.

Personalizai script-ul din aplicaia precedent.
Figura 5.21
Figura 5.22
Afiai data calendaristic n litere, n limba romn (Exemplu, joi 1 aprilie 2004).
n figura 5.23 este prezentat documentul HTML ([4]) complet.

182

Rezultatele execuiei script-ului sunt vizualizate n figura 5.24.

Obiectul Arguments
Figura 5.23
Figura 5.24
Obiectul Arguments reprezint sub forma unei matrici (Array) valoarea
argumentelor transmise unei funcii.
n figura 5.25 este prezentat fia obiectului Arguments.

183
Fia obiectului Arguments
Cum se creeaz obiectul? Constructorul Function()
Proprieti: calee, length
Metode: -
Obiectul Arguments este prezentat n detaliu n figura 5.26.
Obiect Sintax
Arguments funcie.arguments
Arguments este un subobiect al obiectului (intern) Function. Atunci

cnd apelai o funcie, putei s-i transmitei argumente. Aceste
argumente sunt disponibile sub numele lor dar i ca elemente ale unei
matrici Array: arguments[].

Exemplu:

Figura 5.25
Figura 5.26

184
Proprietile obiectului Arguments
Proprietile obiectului Arguments sunt prezentate n detaliu n figura 5.27.
Proprietate Sintax
callee funcie.arguments.calle
Returneaz coninutul complet al funciei.

Exemplu:

Figura 5.27

185


length funcie.arguments.length
Returneaz numrul de argumente transmise funciei atunci cnd ea este

apelat.

Exemplu:

Figura 5.27
(continuare)

186

Exemplu:

Figura 5.27
(continuare)

187

Tem

Testai-v cunotinele
1. Ce reprezint expresiile regulate?
2. Cum se creeaz obiectul RegExp?
3. Care sunt proprietile i metodele obiectului RegExp?
4. Care sunt caracterele de repetiie utilizate n identificarea modelelor (tiparelor)?
5. Care sunt clasele de caractere utilizate n identificarea modelelor?
6. Care sunt identificatorii de poziie utilizai n identificarea modelelor?
7. Care este efectul utilizrii urmtoarelor metode RegExp:
compile();
test().
8. Urmtoarele dou script-uri verific un cod potal (figura 5.28) i o adres de
e-mail (figura 5.29). Comentai structura expresiilor din cadrul celor dou
script-uri.
<script>
cod=85015;
model=/^[09]{5}$/;
if(model.test(cod)){
document.write(OK);
}
else{
document.write(cod eronat);
}
</script>

<script>
adresa=vasile@vasile.com;
model=/^[azAZ09._]+@[azAZ09._]+\.[azAZ09._]{2,4}/$;
if(model.test(adresa)){
document.write(OK);
}
else{
document.write(adresa e-mail eronat);
}
</script>

9. Analizai funcia compdate() din figura 5.30.

JavaScript
Figura 5.28
Figura 5.29

188
function compdate(data1,data2){
difMilisecunde=data1data2;
difSecunde=difMilisecunde/1000;
difMinute=difSecunde/60;
difOre=difMinute/60;
difZi=difOre/24;
return difZi;
}
10. Cum creai un obiect Date care conine data i ora curente?
11. Ce reprezint GMT i UTC?
12. Care sunt proprietile obiectului Date?
13. Precizai rezultatul execuiei urmtoarelor instruciuni JavaScript (figura 5.31).
<script>
astzi=new Date();
a=atzi.toLocalesString();
alert(a); //afieaz ...?...
b=astzi.toString();
alert(b); //afieaz ...?...
c=astzi.getTime();
alert(c); //afieaz ...?...
d=astzi.getTimezoneOffset(); //afieaz ...?...
</script>
14. Precizai care este efectul urmtoarelor metode JavaScript (figura 5.32).
<script>
var data=new Date(May 13, 2004 21:40:00);
alert(data.toGMTString()); //afieaz ...?...
alert(data.setMonth(9)); //afieaz ...?...
</script>
15. Care este diferena ntre metodele getDay() i getDate()?
16. Cum se creeaz obiectul Arguments?
17. Care sunt proprietile i metodele obiectului Arguments?

Figura 5.30
Figura 5.31
Figura 5.32
Vizitai site-urile
http://www.webreference.com/programming/Javascript.html
http://scriptsearch.internet.com
microsoft.public.scripting.jscript
netscape.public.beta.feedback.javascript
netscape-devs.javascript
comp.infosystems.www.authoring.html

Conversaia 6


Aplica ii
Tem

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

190
Remarci:
Un eveniment este o aciune care se produce n raport cu un element (fereastr,
document, buton etc.). El poate fi detectat i prelucrat de ctre un script care va
declana o aciune. Script-ul este executat dac evenimentul se produce pe obiectul
cruia i este asociat. Aciunile utilizatorilor sunt elementele cele mai frecvente.
Evenimentele generate de utilizator nu sunt singurele evenimente generate de
JavaScript. De exemplu, evenimentul load, declanat automat de ctre navigator, nu
se produce dect atunci cnd este ncheiat ncrcarea unui document (X)HTML ntr-un
navigator.
Acelai eveniment se poate aplica mai multor obiecte.
Evenimentele stau la baza interactivitii documentelor Web.
Cteva din evenimentele care survin n mod frecvent ct i momentul n care acestea se
declaneaz sunt prezentate n figura 6.1.
Eveniment Se declaneaz atunci cnd
abort ncrcarea unui obiect este ntrerupt.
blur un element nu este activat.
click utilizatorul execut clic pe un obiect.
change valoarea unui element este modificat.
error se produce o eroare la ncrcarea unui document sau a unei imagini.
focus un element devine inactiv.
load un document sau o imagine se ncarc.
mouseOut mouse-ul se deplaseaz n afara elementului.
mouseOver mouse-ul se deplaseaz pe deasupra elementului.
reset datele introduse ntr-un formular sunt terse.
select utilizatorul selecteaz un cmp ntr-un formular.
submit utilizatorul expediaz un formular.
unload un document este descrcat.
Dup cum ai putut observa, fiecare element are propriul su nume. De exemplu,
evenimentul click se produce atunci cnd utilizatorul execut clic pe un obiect.
n acest caz, evenimentul click este trimis gestionarului de evenimente, dac
acesta exist. Pentru a defini un gestionar de evenimente adugai prefixul on la
numele evenimentului.
Codul gestionarului de evenimente trebuie s fie inclus ca un atribut al unui tag
(X)HTML care declaneaz evenimentul:
<tag (X)HTML gestionarEvenimente=cod JavaScript>
Remarci:
Codul JavaScript al unui gestionar de evenimente este inclus ntre ghilimele.
Observai combinaia ciudat de majuscule i minuscule la notaia standard a
gestionarilor de evenimente: on este scris mereu cu minuscule iar iniiala fiecrui cuvnt
al evenimentului, cu majuscule. Exemple: onAbort, onBlur, onClick,
Figura 6.1

191
onChange, onError, onFocus, onLoad, onMouseOut,
onMouseOver, onReset, onSelect, onSubmit, onUnLoad.
n figura 6.2 sunt listai, n ordine alfabetic gestionarii de evenimente ai
onAbort onActivate onAfterPrint
onAfterUpdate onBeforeActivate onBeforeCopy
onBeforeCut onBeforeDeActivate onBeforeEditFocus
onBeforePaste onBeforePrint onBeforeUnload
onBeforeUpdate onBlur onCellChange
onChange onClick onContextMenu
onControlSelect onCopy onCut
onDblClick onDeActivate onDrag
onDragDrop onDragEnd onDragStart
onDrop onError onFocus
onFocusIn onFocusOut onHelp
onKeyDown onKeyPress onKeyUp
onLoad onMouseDown onMouseMove
onMouseOut onMouseOver onMouseUp
onMove onMoveEnd onPropertyChange
onReset onResize onResizeError
onResizeEnd onResizeStart onScroll
onSelect onSubmit onUnLoad

Gestionarii de evenimente JavaScript sunt prezentai n detaliu n figura 6.3.
Gestionari de evenimente
onAbort
Se declaneaz atunci cnd ncrcarea unui element este anulat.

Se aplic la:
document
onActivate
Se declaneaz atunci cnd elementul devine element activ.

Se aplic la: window, document, frame, form

Figura 6.3
Figura 6.2

192
onAfterPrint
Se declaneaz dup imprimarea unui element.

Se aplic la: window, frame
onAfterUpDate
Se declaneaz dup actualizarea datelor surs ale elementului.

Se aplic la: document, frame, form.button, form.checkbox,
form.fileupdate, form.hidden, form.password,
form.select, form.radio, form.reset,
form.text, form.textarea, form.submit
onBeforeActivate
Se declaneaz nainte ca elementul s devin element activ.

Se aplic la: window, form
onBeforeCopy
Se declaneaz nainte ca datele s fie copiate (Copy).

Se aplic la: form
onBeforeCut
Se declaneaz nainte ca datele s fie mutate (Cut).

Se aplic la: document, form
onBeforeDeActivate
Se declaneaz nainte ca un alt element s devin activ n

documentul printe.
onBeforeEditFocus
Se declaneaz nainte ca elementul s primeasc focus-ul pentru a

fi editat.
onBeforePaste
Se declaneaz nainte ca elementul int s primeasc datele

(Paste).
onBeforePrint
Se declaneaz nainte ca datele elementului s fie imprimate sau

personalizate.

onBeforeUnload
Figura 6.3
(continuare)

193

Se declaneaz nainte ca elementul s fie descrcat.
Se aplic la: window
onBeforeUpdate
Se declaneaz nainte ca datele surs ale elementului s fie

actualizate.
Se aplic la: document, form.button, form.checkbox,
form.fileupdate, form.hidden, form.password,
form.select, form.radio, form.reset,
onBlur
Se declaneaz atunci cnd elementul pierde focus-ul.

Se aplic la: window, frame, form, form.button,
form.checkbox, form.fileupdate,
form.password, form.select, form.radio,
form.reset, form.text, form.textarea,
form.submit
onCellChange
Se declaneaz atunci cnd datele se schimb n obiectul surs.

Se aplic la: document
onChange
Se declaneaz atunci cnd elementul pierde focus-ul iar coninutul

su a fost schimbat.
Se aplic la: form.fileupdate, form.password, form.select,
form.textarea
onClick
Se declaneaz atunci cnd se execut clic pe un element.

Se aplic la: document, form, form.button, form.checkbox,
form.option, form.radio, form.reset,
form.text, form.submit
onContextMenu
Se declaneaz atunci cnd se execut clic cu butonul drept al

mouse-ului pentru a deschide meniul contextual.
onControlSelect
Se declaneaz nainte ca elementul s fie selectat.

Se aplic la: window, document, frame, form
onCopy
Se declaneaz atunci cnd se copiaz un element.

Se aplic la: form
onCut
Se declaneaz atunci cnd se mut (Cut) un element.

Figura 6.3
(continuare)

194

onDblClick
Se declaneaz atunci cnd se execut dublu click pe element.

form.option, form.reset
onDeActivate
Se declaneaz atunci cnd un alt element devine activ n

documentul printe.
Se aplic la: window, frame, form
onDrag
Se declaneaz atunci cnd un element este deplasat.

onDragDrop
Se declaneaz atunci cnd ceva este deplasat i apoi eliberat.

onDragEnd
Se declaneaz atunci cnd un element deplasat este la finele

deplasrii.
onDragStart
Se declaneaz la nceputul deplasrii elementului.

Se aplic la: document, form, form.fileupdate, form.select,
form.textarea
onDrop
Se declaneaz atunci cnd un obiect este depus peste un element

dup deplasare.
onError
Se declaneaz atunci cnd se genereaz o eroare n raport cu un

element.

onFocus
Se declaneaz atunci cnd elementul primete focus-ul.

Se aplic la: window, frame, form, form.button, form.checkbox,

Figura 6.3
(continuare)

195
form.fileupdate, form.password, form.select,
form.radio, form.reset, form.text, form.textarea,
form.submit
onFocusIn
Se declaneaz nainte ca elementul s primeasc focus-ul

(naintea evenimentului focus).
Se aplic la: form
onFocusOut
Se declaneaz dup ce elementul pierde focus-ul, imediat dup ce

un alt element a primit focus-ul.
Se aplic la: form
onHelp
Se declaneaz atunci cnd se acioneaz tasta F1 n fereastra

activ.
Se aplic la: window, document, frame, form, form.button,
form.checkbox, form.fileupdate, form.hidden,
form.password, form.select, form.option,
form.radio, form.reset, form.text,
form.textarea, form.submit
onKeyDown
Se declaneaz atunci cnd se acioneaz o tast n timp ce

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

onKeyUp
Se declaneaz atunci cnd este eliberat o tast n timp ce


Figura 6.3
(continuare)

196
onLoad
Se declaneaz atunci cnd elementul este complet ncrcat.

onMouseDown
Se declaneaz atunci cnd se acioneaz un buton al mouse-ului

n timp ce elementul a primit focus-ul.
form.option, form.reset, form.text,
onMouseMove
Se declaneaz atunci cnd se deplaseaz mouse-ul iar pointer-ul

este deasupra elementului.
Se aplic la: window, frame, form, form.button,
form.checkbox, form.fileupdate,
form.password, form.select, form.option,
form.reset, form.text, form.textarea,
form.submit
onMouseOut
Se declaneaz atunci cnd pointer-ul mouse-ului prsete

elementul.
onMouseOver
Se declaneaz atunci cnd pointer-ul mouse-ului trece pe

deasupra elementului.
onMouseUp
Se declaneaz atunci cnd un buton al mouse-ului se relaxeaz n

timp ce elementul a primit focus-ul.
onMove
Se declaneaz atunci cnd elementul este deplasat de ctre

utilizator sau de script.
onMoveEnd
Se declaneaz la finele deplasrii elementului.


Figura 6.3
(continuare)

197
onPropertyChange
Se declaneaz atunci cnd se modific o proprietate a

elementului.
onReset
Se declaneaz atunci cnd formularul este resetat (se execut clic

pe butonul Reset).
Se aplic la: form
onResize
Se declaneaz nainte ca elementul s fie redimensionat.

Se aplic la: window, frame, form, form.fileupdate,
form.password, form.select
onResizeEnd
Se declaneaz la finele redimensionrii elementului.

onResizeStart
Se declaneaz atunci cnd utilizatorul ncepe redimensionarea

elementului.
onScroll
Se declaneaz atunci cnd fereastra ncepe s defileze.

onSelect
Se declaneaz atunci cnd este selectat coninutul elementului.

Se aplic la: form.fileupdate, form.password, form.text,
onSubmit
Se declaneaz naintea expedierii unui formular.

Se aplic la: form
onUnLoad
Se declaneaz nainte ca elementul s fie descrcat.

Se aplic la:
window

Figura 6.3
(continuare)
Figura 6.3
(continuare)

Aplicaii
Creai gestionarul de evenimente onLoad.

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

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

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

199
4. Completai structura HTML a documentului (figura 6.6).


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

Modificai structura gestionarului de evenimente onLoad pe care l-ai creat n
aplicaia precedent, utiliznd mai multe instruciuni JavaScript.
Iat cum modificm (Varianta 1, Varianta 2) structura gestionarului de evenimente
onLoad pe care l-am creat n aplicaia precedent, utiliznd de aceast dat mai multe
instruciuni JavaScript.
Figura 6.6
Figura 6.7

Varianta 1 (figura 6.8)

200

Remarci:
n aceast variant, gestionarul nu conine dect dou instruciuni (separate prin punct
i virgul) dar el poate s conin foarte bine oricte instruciuni dorim.
Codul JavaScript al gestionarului de evenimente are acces complet la variabila global:
pagina_incarcata. Nu uitai c variabilele globale JavaScript sunt accesibile peste
tot, inclusiv n gestionarul de evenimente.
n aceast variant instruciunea de atribuire.
pagina_incarcata=true;
este necesar pentru a indica navigatorului c poate interaciona cu utilizatorul.
Varianta 2 (figura 6.9)

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

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

201
Pagina a fost ncrcat
La revedere! (mesajul se va afia ntr-o caset de avertisment!)
Remarc. Obiectul Form este prezentat n detaliu n Conversaia 8.
n figura 6.10 se prezint documentul (X)HTML complet.

Remarci:
Tag-ul <body> conine doi gestionari de evenimente:
onLoad;
onUnLoad.
Gestionarul onLoad este activat n momentul n care pagina a fost ncrcat integral.
Gestionarul onUnLoad este activat n momentul n care ncrcai o alt pagin Web n
navigator.
Nu este ntotdeauna recomandabil s afiai o caset de avertisment atunci cnd
vizitatorul prsete o pagin Web. Numeroi vizitatori nu agreeaz ideea de a executa
clic ntr-o caset de avertisment pentru a putea prsi pagina dumneavoastr Web. n
consecin, aceast tehnic trebuie exploatat cu pruden!
Creai script-uri care afieaz mesaje n bara de stare a navigatorului.
Indicaie. Una din aplicaiile curente ale gestionarilor de evenimente este afiarea unui
mesaj n bara de stare a navigatorului atunci cnd vizitatorul execut clic pe un link.
Pentru link-uri dou sunt evenimentele care se execut n paralel: MouseOver i
MouseOut.
Evenimentul MouseOver se produce atunci cnd trecei cu mouse-ul pe deasupra
link-ului, iar evenimentul MouseOut se produce atunci cnd v deplasai cu mouse-ul n
zona exterioar legturii. Cele dou evenimente sunt utilizate pentru a modifica textul
care se afieaz n bara de stare a navigatorului.
Remarc. n mod implicit, URL-ul unei legturi se afieaz n bara de stare a navigatorului n
momentul n care trecei cu mouse-ul pe deasupra legturii.
Figura 6.10

202
Gestionarul de evenimente onMouseOver v permite s afiai un mesaj personalizat n
bara de stare a navigatorului, care corespunde unui link anume. Pentru aceasta, utilizai
proprietatea JavaScript status.
Gestionarul de evenimente onMouseOut este utilizat pentru a terge textul afiat n
bara de stare n momentul n care mouse-ul este deplasat n exteriorul legturii.
Remarci:
Atunci cnd utilizai gestionarul de evenimente onMouseOver pentru a afia mesaje n
bara de stare, n momentul n care executai clic pe un link, mesajul personalizat
nlocuiete URL-ul afiat n mod implicit. Asigurai-v c mesajul
dumneavoastr este cel puin la fel de util ca URL-ul!
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.
Gestionarul de evenimente onMouseOut se aplic la aceleai elemente ca i
onMouseOver.
Iat cum crem un script care afieaz urmtoarele mesaje n bara de stare:
comanda i cartea (X)HTML;
;
comanda i cartea DREAMWEAVER MX

comanda i cartea XML.
Aceste mesaje vor dispare atunci cnd mouse-ul nu se va afla deasupra acestor mesaje,
care reprezint link-uri ce se afieaz ntr-o list simpl.
1. Definii o funcie (descriere) care accept un parametru (text) pentru a
afia un mesaj n bara de stare (figura 6.11).

Remarci:
Parametrul text conine mesajul care se va afia n bara de stare a navigatorului.
ntruct funcia returneaz TRUE, n bara de stare se va continua s se afieze mesajul
pn cnd acesta va fi ters.
2. Definii o funcie (tergere) pentru a terge mesajul, apelabil din
gestionarul de evenimente onMouseOut (figura 6.12).

Figura 6.11
Figura 6.12

203
3. Completai script-ul, adugnd cunoscutele tag-uri <script> (figura 6.13).

4. Completai structura (X)HTML a documentului adugnd: link-urile propriu-zise
i gestionarii de evenimente (onMouseOver, onMouseOut) care apeleaz
cele dou funcii: descriere, stergere (figura 6.14).

Figura 6.13
Figura 6.14
Remarci:
Funciile (descriere, stergere) sunt definite n header-ul documentului.
Fiecare link conine un gestionar onMouseOver i onMouseOut pentru a apela
funciile de afiare i tergere a mesajelor n bara de stare.

204

6. Testai script-ul (figura 6.16).

Figura 6.15
Figura 6.16
Utilizai gestionarul de evenimente onMouseOver combinat cu metoda
setTimeOut.
Indicaie. JavaScript include o metod setTimeOut care permite instalarea
evenimentelor temporizator (cronometrate). De exemplu, putei utiliza metoda
setTimeOut mpreun cu onMouseOver pentru a afia un mesaj n bara de stare a
navigatorului ntr-o perioad de timp predefinit i a-l terge dup aceea.
n principiu, funcia necesar pentru tergerea textului din bara de stare trebuie s
cuprind dou etape:
Etapa 1 Definirea mesajului (textului) care urmeaz s se afieze n bara de
stare, ca un ir de caractere specific;
Etapa 2 Ateptarea unei perioade de timp predefinite i apoi tergerea
mesajului afiat n bara de stare.

205
Iat cum crem un script care afieaz timp de 4 secunde n bara de stare a
navigatorului mesajul: Singurtatea este mai grea dect orice boal! pe care apoi l
terge!
1. Definii o funcie (descriere) n care includei instruciunea
window.status (figura 6.17).

2. Adugai metoda setTimeOut (figura 6.18).

Remarci:
Primul parametru definete starea ferestrei la o valoare null ();
Al doilea parametru precizeaz perioada de timp predefinit trebuie ateptat 4
secunde.
3. Adugai instruciunea return true (figura 6.19).

Remarc. Instruciunea return true precizeaz navigatorului c funcia descriere este
pregtit pentru a interaciona cu utilizatorul.
4. Completai script-ul i plasai-l n antet-ul documentului (figura 6.20).

Figura 6.17
Figura 6.18
Figura 6.19

206

5. Adugai n corpul documentului n tag-ul <a>, instruciunea
onMouseOver=descriere(); return true; (figura 6.21).


Figura 6.20
Figura 6.21
Figura 6.22

207

Figura 6.23
Creai gestionari de evenimente dinamici.
Indicaie. n loc s creai un gestionar de evenimente n interiorul unui document
(X)HTML, putei crea o funcie JavaScript care va face oficiul de gestionar de evenimente.
Avei de asemenea posibilitatea s creai gestionari de evenimente condiionali, de a-i
activa sau a-i dezactiva, sau nc de a modifica funcia (ca gestionar de evenimente) de o
manier dinamic.
Pentru aceasta este suficient de a crea funcia i de a o defini ca gestionar de
evenimente.
Iat cum creai pentru un document gestionarul de evenimente dinamic onMouseDown.
1. Creai o funcie (clicmouse) pe care o definii ca gestionar de evenimente
(figura 6.24).

2. Atribuii funcia (clicmouse) gestionarului de evenimente onMouseDown
(figura 6.25).

Remarc. Gestionarii de evenimente dinamici sunt stocai sub form de proprieti ale obiectului
Document sau ale unui alt obiect cruia i se poate atribui un eveniment.
3. Completai script-ul i structura (X)HTML a documentului (figura 6.26).
Figura 6.24
Figura 6.25

208



Figura 6.26
Figura 6.27
Figura 6.28
Creai un script care afieaz ntr-o caset de dialog de avertizare care buton al
mouse-ului a fost utilizat.
Creai un script care afieaz n bara de stare a navigatorului Internet Explorer,
Netscape caracterele pe care le-ai tastat.

209

Tem

JavaScript
Testai-v cunotinele

1. Ce este un gestionar de evenimente. Exemple.
2. Care sunt gestionarii de evenimente care permit detectarea unui clic pe un link?
3. Cnd se execut gestionarul de evenimente onLoad din tag-ul <body>?
4. Care este rolul proprietii event.KeyCode n Internet Explorer?
5. Cnd se apeleaz urmtorii gestionari de evenimente:
onUnLoad;
onMouseOver;
onMouseOut;
onMouseDown;
onClick;
onDblClick;
onChange;
onMouseUp;
onKeyPress;
onSubmit;
onReset;

210
onSelect.
6. Comentai urmtorul script (figura 6.29).
function test (text){
window.status=text;
return true;
}
</script>

7. Comentai urmtoarea instruciune JavaScript:
<b onDblClick=alert (Nu este nimic ntmpltor!)> Test </b>

Figura 6.29
Vizitai site-urile
javascript.internet.com
www.javascripts.com
www.javascript.com
comp.lang.javascript
livesoftware.javascript.developer
livesoftware.javascript.examples
de.comp.lang.javascript

t

Conversaia 7

Obiectele navigatorului

Documen Object Model (DOM)
Obiectul Window. Aplica ii
Obiectul Navigator. Aplica ii
Tem

Document Object Model (DOM)
n conversaiile anterioare am acordat atenie limbajului de programare
JavaScript i obiectelor interne ale acestuia (Ar gument s, Ar r ay,
Bool ean, Dat e, Funct i on, Mat h, Number , Obj ect , RegExp,
St r i ng, Thi s). Obiectele pe care le vei utiliza cel mai des, pe parte de client
sunt cele care aparin DOM-ului (Document Object Model), cu ajutorul crora
script-urile dumneavoastr vor putea manipula paginile Web, ferestrele i
documentele. Obiectivul acestui model (DOM) este acela de a v oferi o interfa
(ntre dou fee exist ... o interfa!) simpl i coerent ntre programele
JavaScript i navigatorul Web.
DOM-ul definete obiectele disponibile, proprietile, metodele i evenimentele
acestora. Cu o parte din obiectele DOM-ului ai fcut deja cunotin.

212
n afar de aceste obiecte, DOM-ul mai conine i alte obiecte ierarhizate
(structur arborescent), obiectul Wi ndowaflndu-se n vrful arborescenei.
Ierarhia obiectelor
Cnd examinai ndeaproape ierarhia general a obiectelor n JavaScript, putei
vedea c cele mai multe obiecte sunt fie pe parte de client sau pe parte de
server.
n aceast lucrare vom examina obiectele numai pe parte de client i vom
prezenta proprietile i metodele lor.
Remarc. Majoritatea obiectelor JavaScript sunt reprezentri ca obiecte ale tag-urilor (X)HTML.
n figura 7.1 sunt prezentate obiectele pe parte de client i tag-urile (X)HTML
corespunztoare.
Obiect JavaScript Tag (X)HTML corespondent
But t on <input type=button />
Checkbox <input type=checkbox />
Hi dden <input type=hidden />
Fi l eupl oad <input type=file />
Passwor d <input type=password />
Radi o <input type=radio />
Reset <input type=reset />
Sel ect <select>
Fr ame <frame>
Document <body>
Layer <layer> sau <ilayer>
Li nk <a href= />
I mage <img />
Ar ea <map>
Anchor <a name= />
Appl et <applet>
Pl ugi n <embed>
For m <form>
Submi t <input type=submit />
Text <input type=text />
Text ar ea <textarea>
Opt i on <option>
Figura 7.1
Pe msur ce vei examina aceste obiecte vei vedea modalitile diverse n care
ele sunt prezentate utilizatorilor i programatorilor n limbajul JavaScript.
Lista obiectelor JavaScript este prezentat n ordine alfabetic n figura 7.2, iar
ierarhia obiectelor este ilustrat n figura 7.3.

213
but t on checkbox document
event f i l eUpl oad f or m
hi dden hi st or y l ocat i on
Mi meType navi gat or obi ect e n gener al
opt i on Opt i on( ) passwor d
pl ugi ns r adi o r eset
scr een sel ect submi t
t ext t ext ar ea wi ndow

Button
Checkbox
Anchor FileUpload
Area Hidden
Applet Password
Document Form Radio
Image Reset
Layer Submit
Link Select Option
Plugin Text
Window Textarea

Frame
History
Location
Event
Style
Obiectele sunt ierarhizate dup cum urmeaz:
Obiectul Wi ndow, de nivelul cel mai nalt (nivelul 0), pe parte de client;
Obiecte de nivelul 1: Document , Fr ame, Hi st or y,
Locat i on, Event , St yl e;
Obiecte de nivelul al doilea: Anchor , Ar ea, Appl et , For m,
I mage, Layer , Li nk, Pl ugi n;
Obiecte de nivelul al treilea: But t on, Checkbox, Fi l eUpl oad,
Hi dden, Passwor d, Radi o, Reset , Submi t , Sel ect ,
Text , Text ar ea;
Obiecte de nivelul al patrulea: Opt i on.
Remarci:
Obiectele limbajului JavaScript pe parte de client reprezint instrumente importante cu
ajutorul crora putei genera script-uri.
n cea mai mare parte modelul obiectului este constituit din elemente (X)HTML care sunt
transpuse n obiecte.
Dac pn acum ai programat n limbajului (X)HTML, din acest moment trebuie s
abordai elementele (X)HTML ca fiind nu tag-uri, ci obiecte.
Figura 7.2
Figura 7.3

214
JavaScript utilizeaz o ierarhie de obiecte: printe-fiu, cunoscute sub numele de
Document Object Model (DOM). Aceste obiecte, organizate ntr-o structur
arborescent reprezint coninutul i componentele unui document Web.
Iat un exemplu simplu (figura 7.4) care ilustreaz modul n care un fiier
(X)HTML stabilete corespondena cu DOM-ul navigatorului.

n cursul ncrcrii fiierului XHTML, navigatorul Web folosete un ansamblu
complet de obiecte ale DOM-ului pentru a le reprezenta (vezi figura 7.5).
Obiect Descriere
Obiectul Window Reprezint navigatorul Web
Obiectul Document Reprezint fiierul XHTML
Un obiect Form cu numele
demo
Reprezint tag-ul <f or m> definit n fiierul
XHTML
Trei obiecte input cu numele:
nume, prenume, email
Reprezint zonele de text definite n formular
Figura 7.5
Figura 7.4
Remarc. Evident, mai sunt create i alte obiecte, ca de exemplu matricea formularelor
f or ms[ ] .
n figura 7.6 se prezint modul de imbricare al obiectelor create.

215

Figura 7.6
Obiectul Window

Obiectul Document

Obiectul Input email
Obiectul Input prenume
Obiectul Form demo

Obiectul Input nume
Istoricul DOM-ului
Obiectele navigatorului sunt exterioare limbajului JavaScript dar sunt recunoscute
de ctre navigatoare. Din pcate exist nc diferene ntre navigatoare, care nu
de puine ori se manifest n mod suprtor.
Dup Netscape 3.0 i Internet Explorer 4.0 toate obiectele de baz sunt luate n
considerare de ctre cele dou browser-e, iar noile norme DOM sunt recunoscute
de ultimele versiuni Netscape i Internet Explorer.
W3C (World Wide Web Consortium) a pus recent la punct norma DOM de nivel 1.
Aceast norm nu conine dect obiectele de baz, toate obiectele acoperind
integral componentele unui document (X)HTML. O norm de nivel 2 este n curs
de apariie. Ierarhia obiectelor de care noi vorbim n aceast conversaie este
cunoscut sub numele de DOM 0 iar obiectele sunt incluse n norma DOM 1.
Remarc. Obiectele DOM de nivel 1 i 2 permit modificarea unei pagini Web n timp real, dup
ncrcarea sa (Dinamic HTML).

Obiectul Window
Obiectul Wi ndow de nivelul cel mai nalt reprezint fereastra navigatorului n
care este afiat obiectul Document . Fiecare fereastr a navigatorului i fiecare
cadru au propriul lor obiect Wi ndow.
Fia obiectului Wi ndoweste prezentat n figura 7.7.
Remarc. Nu uitai c un obiect Window i proprietile sale pot fi atribuite unei variabile
JavaScript ca orice alt obiect.

216
Spre deosebire de alte obiecte care pot s fie prezente sau nu, obiectul Wi ndow
exist permanent.
Remarci:
Mai multe obiecte wi ndowpot exista n acelai timp, fiecare reprezentnd o fereastr a
navigatorului deschis.
Cadrele (frames, n limba englez) sunt de asemenea reprezentate prin obiecte
Window (vezi Conversaia 10).
Straturile (layers, n limba englez) care permit modificarea n mod dinamic a
coninutului unui document Web sunt analoage obiectelor Wi ndow(vezi Conversaia
10).
Fia obiectului Window
Subobiecte: document , event , hi st or y, l ocat i on, navi gat or , st yl e
Proprieti: cont ent , cl i ent i nf or mat i on, cl i pboar d, cl osed,
def aul t st at us, di al ogAr gument s, di al ogHei ght ,
di al ogLef t , di al ogTop, di al ogWi dt h, document , event ,
f r ames[ ] , hi st or y, i nner Hei ght , i nner Wi dt h, l engt h,
name, navi gat or , of f scr eenBuf f er i ng, opener ,
out er Hei ght , out er Wi dt h, pageXOFFset , pageYOf f set ,
par ent , r et ur nVal ue, scr een, scr eenLef t , scr eenTop,
scr eenX, scr eenY, sel f , st at us, st yl e, t op, wi ndow
Metode: al er t ( ) , back( ) , bl ur ( ) , cl ear I nt er val ( ) ,
cl ear Ti meout ( ) , cl ose( ) , conf i r m( ) , cr eat ePopup( ) ,
execScr i pt ( ) , f ocus( ) , f or war d( ) , home( ) , moveBy( ) ,
moveTo( ) , navi gat e( ) , open( ) , pr i nt ( ) , pr ompt ( ) ,
r esi zeBy( ) , r esi zeTo( ) , scr ol l ( ) , scr ol l By( ) ,
scr ol l To( ) , set Act i ve( ) , set I nt er val ( ) ,
set Ti meout ( ) , showHel p( ) , showModal di al og( ) ,
showModel essDi al og( ) , st op( )
Gestionarii de
evenimente:
onAct i vat e, onAf t er Pr i nt , onBef or eAct i vat e,
onBef or ePr i nt , onBef or eUnl oad, onBl ur ,
onCont r ol Sel ect , onDeAct i vat e, onDr agDr op, onEr r or ,
onFocus, onHel p, onLoad, onMouseMove, onMove,
onMoveEnd, onMoveSt ar t , onResi ze, onResi zeEnd,
onResi zeSt ar t , onScr ol l , onUnl oad

Proprietile fundamentale ale obiectului Window
Cele mai importante proprieti ale obiectului Window sunt prezentate n detaliu
n figura 7.8.
Proprietate Sintax
cl osed wi ndow. cl osed

Conine valoarea t r ue (fereastra este nchis) sau f al se (fereastra
este deschis).
def aul t St at us wi ndow. def aul t St at us

Conine un ir de caractere reprezentnd textul afiat n mod implicit n
bara de stare. El rmne valabil atta timp ct coninutul ferestrei nu
se schimb.

Exemplu: <script>window.defaultStatus=La muli ani mpreun! </script>
Figura 7.7
Figura 7.8

217
document wi ndow. document

Proprietatea document corespunde obiectului Document .
f r ames[ ] wi ndow. f r ames[ ]

Conine un obiect wi ndowpentru fiecare cadru al site-ului Web.
hi st or y wi ndow. hi st or y

Un obiect care conine lista de site-uri (istoricul) Web vizitate (vezi
obiectul Hi st or y).
l engt h wi ndow. l engt h

Numrul de cadre coninute n fereastr.
name wi ndow. name

Numele obiectului Window. Acest nume este diferit de numele
variabilei JavaScript care conine obiectul Wi ndow.
Exemplu:
...
var catwindow=window.open();
catwindow.name=cat;

navi gat or wi ndow. navi gat or

Obiectul Navi gat or conine informaii cu privire la navigator.

Exemplu:
...
for (x in navigator)
document.write(x+=+navigator[x]+<br />;
...
opener wi ndow. opener

Corespunde ferestrei n care a fost creat o alt fereastr (prin metoda
wi ndow. open( ) . Marea majoritate a proprietilor i metodelor
obiectului wi ndowpot fi aplicate proprietii opener ).
out er Hei ght wi ndow. out er Hei ght

nlimea (n pixeli) documentului afiat n fereastr (incluznd bara de
meniuri, bara de instrumente, bara de stare).
out er Wi dt h wi ndow. out er Wi dt h

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

Referin la fereastra/cadrul printe al ferestrei/cadrului curent.
scr een wi ndow. scr een

Conine informaii privind configuraia ecranului de pe monitorul
clientului.

sel f wi ndow. sel f

Figura 7.8
(continuare)

218

Referina la fereastra curent. Identic cu wi ndow
(wi ndow. wi ndow).

Exemplu:
window.close()
identic cu:
window.self.close
st at us wi ndow. st at us

Conine un ir de caractere care va fi temporar afiat n bara de stare a
navigatorului.
t op wi ndow. t op

Referina ctre fereastra navigatorului situat n prim plan.
wi ndow wi ndow. wi ndow

Identic cu wi ndow. sel f .

Metodele fundamentale ale obiectului Window
Metodele fundamentale ale obiectului Window sunt prezentate n detaliu n
figura 7.9.
Metode Sintax
al er t ( ) wi ndow. al er t ( Mesaj)
al er t ( Mesaj)

Afieaz o caset de dialog care conine un buton OK i mesajul
specificat. Apelarea metodei oprete execuia programului JavaScript
pn cnd utilizatorul execut clic pe butonul OK pentru a continua.
Metoda al er t ( ) este folosit i ca instrument de depanare a
script-urilor (vezi Conversaia 11).
back( ) wi ndow. back( )
back( )

Retur la pagina precedent afiat n fereastr (vezi obiectul
Hi st or y).
bl ur ( ) wi ndow. bl ur ( )
bl ur ( )

Retrage focus-ul ferestrei curente.

Exemplu:
<script>window.blur()</script>
cl ose( ) wi ndow. cl ose( )
cl ose( )

nchide fereastra curent (dup confirmarea de ctre utilizator).
conf i r m( ) wi ndow. conf i r m( Mesaj)
conf i r m( Mesaj)

Afieaz o caset de dialog care conine mesajul specificat, un buton
OK i un buton de anulare. Returneaz TRUE dac utilizatorul execut
clic pe butonul OK i FALSE dac utilizatorul execut clic pe butonul de
anulare.

Exemplu:
<script>
a=window.confirm(Deschide o nou fereastr);
Figura 7.8
(continuare)
Figura 7.9

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>
execScr i pt ( ) wi ndow. execScr i pt ( Expresie,Limbaj)
execScr i pt ( Expresie,Limbaj)

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

Exemplu:
<script>
window.execScript(alert(Fatalitate),JavaScript);
</script>
f ocus( ) wi ndow. f ocus( )
f ocus( )

Transmite focus-ul ferestrei curente.
f or war d( ) wi ndow. f or war d( )
f or war d( )

Oblig navigatorul s ncarce documentul urmtor n istoric.
home( ) wi ndow. home( )
home( )

Navigatorul ncarc pagina definit ca pagin de index de ctre
utilizator.
moveBy( ) wi ndow. moveBy( x,y)
moveBy( x,y)

Deplaseaz fereastra cu x pixeli orizontal i cu y pixeli vertical. Cele
dou valori pot fi pozitive sau negative.

Exemplu:
<script>
window.moveBy(100,200);
</script>
moveTo( ) wi ndow. moveTo( x,y)
moveTo( x,y)

Deplaseaz fereastra la poziia x (orizontal) i y (vertical). Cele dou
valori au ca origine colul superior stnga al ecranului.

Exemplu:
<script>
window.moveTo(0,0);
</script>

open( ) wi ndow. open( URL,Nume,Atribute,
nlocuiete)
Figura 7.9
(continuare)

220
open( URL,Nume,Atribute,
nlocuiete)

Deschide o nou fereastr a navigatorului i returneaz un obiect
Window pentru a o reprezenta. Dac apelai metoda open( ) fr
parametri, vei obine o fereastr vid. Pentru a vedea ceva mai
interesant, transmitei urmtorii patru parametri respectnd secvena de
mai jos:
URL adresa Web a paginii Web care dorii s se ncarce automat
n noua fereastr.
Nume ir de caractere care va fi plasat n proprietatea
wi ndow. name a noii ferestre.
Atribute wi dt h, hei ght , menubar , r esi zabl e,
scr ol l bar s, st at us, di r ect or i es.
nlocuiete este o valoare logic (true, dac istoricul ferestrei este
ters).
Metoda returneaz o referin la noua fereastr. Atributele pot lua
valoarea adevrat sub forma true, yes sau 1 sau valoarea
false sub forma false, no sau 0.
Semnificaia atributelor este urmtoarea:
t ool bar afieaz/ascunde bara de instrumente a browser-ului
l ocat i on prezena barei de adrese
di r ect or i es afieaz/ascunde o bar de instrumente
(Netscape) secundar cu butoane familiare
st at us afieaz/ascunde bara de stare a navigatorului
menubar afieaz/ascunde bara de meniuri a navigatorului
scr ol l bar s afieaz/ascunde barele de derulare pe vertical
i orizontal ale browser-ului
r esi zabl e permite/interzice redimensionarea ferestrei de
browser
wi dt h limea n pixeli a ferestrei
hei ght nlimea n pixeli a ferestrei

Exemplu:
<script>
newfereastra=window.open(test.htm,titlu,toolbarno,
location=no, directories=no, status=no, menubar=no,
scrollbars=no, resizable=no, width=100, height=100);
</script>
pr i nt ( ) wi ndow. pr i nt ( )
pr i nt ( )

Imprim coninutul ferestrei.
pr ompt ( ) wi ndow. pr ompt ( Mesaj,ConinutImplicit)
pr ompt ( Mesaj,ConinutImplicit)

Afieaz o caset de dialog care conine mesajul specificat, o zon de
text pe care o completeaz utilizatorul, butonul OK i butonul de
anulare. Al doilea argument este facultativ. Rspunsul implicit specificat
n pr ompt ( ) este afiat n zona de text. Utilizatorul poate introduce o
alt valoare sau poate executa clic pe butonul OK pentru a accepta
rspunsul implicit. Dac el execut clic pe butonul OK, valoarea
coninut n zona de text este returnat script-ului; dac el execut clic
pe butonul de anulare, atunci valoarea nul l este returnat script-ului.
Valoarea null reprezint nimic sau un obiect vid.

Exemplu:
<script>
var raspuns=prompt(Care este culoarea preferata?, cepia);
if (raspuns==null){
Figura 7.9
(continuare)

221
alert(Ati apasat butonul Cancel);
}
else{
alert(Raspunsul dumneavoastr este +raspuns);
}
</script>
r esi zeTo( ) wi ndow. r esi zeTo( Lungime,Lime)
r esi zeTo( Lungime,Lime)

Redimesioneaz fereastra navigatorului la Lungime i Lime
specificate (n pixeli).

Exemplu:
<script>
self.resizeTo(50,325);
</script>
scr ol l ( ) wi ndow. scr ol l ( x,y)
scr ol l ( x,y)

Face s defileze coninutul unei ferestre pn la poziia specificat (x i
y) n raport cu colul din stnga sus al ferestrei.
Remarc. Metoda este depit.
scr ol l To( ) wi ndow. scr ol l To( x,y)
scr ol l To( x,y)

Face s defileze coninutul unei ferestre pn la poziia x (lungime), y
(lime) n raport cu colul din stnga sus al ferestrei.

Exemplu:
<script>
window.scrollTo(0,100);
</script>
set I nt er val ( ) wi ndow. set I nt er val ( Expresie,
Interval,Argumente)
set I nt er val ( Expresie,
Interval,Argumente)

Execut Expresie n intervalele fixate. Expresie poate fi o instruciune
JavaScript sau apelul unei funcii. Interval este prezentat n
milisecunde. Argumente sunt transmise funciei apelate.
Remarci:
Metoda cl ear I nt er val ( ) anuleaz efectul metodei
set I nt er val ( ) .
Metoda set I nt er val ( ) este aproape identic cu metoda
setTimeout(). Principala diferen ntre cele dou metode (vezi
set Ti meout ( ) ) este aceea c parametrul Expresie, care poate fi o
instruciune sau apelul unei funcii executat fr sfrit.

Figura 7.9
(continuare)

222

Exemplu:

set Ti meout ( ) wi ndow. set Ti meOut ( Expresie,
Durata,Argumente)
set Ti meOut ( Expresie,
Durata,Argumente)

Execut Expresie dup Durata (n milisecunde). Expresie poate fi apelul
unei funcii. Argumentele (facultative) sunt transmise funciei apelate.
Remarc. Metoda cl ear Ti meOut ( ) anuleaz efectul metodei
set Ti meOut ( ) .

Exemplu:
Figura 7.9
(continuare)

223

Rezultatele execu iei script-ului.

Una din aplicaiile cele mai interesante ale obiectului Window este crearea i
nchiderea unei noi ferestre. V prezentm n cele ce urmeaz cteva aplicaii
simple, reprezentative pentru metodele i proprietile obiectului Window.
Creai un document (X)HTML care conine un script (simplu) ce utilizeaz
butoane pentru crearea i nchiderea unei ferestre.
Indicaie. Folosii metodele: open( ) i cl ose( ) prezentate n figura 7.9.

Aplicaii ale obiectului Window
Figura 7.9
(continuare)

224

Remarci:
Documentul XHTML permite deschiderea unei noi ferestre executnd clic pe un buton
(primul buton).
A doua fereastr este foarte mic pentru a se putea distinge de prima fereastr.
Al doilea buton permite nchiderea acestei ferestre.
Al treilea buton nchide fereastra principal a navigatorului, dup acordul utilizatorului.
Acest document face apel la gestionarii de evenimente onCl i ck (cte unul pentru
fiecare buton).
n figura 7.11 este prezentat pagina Web afiat n Internet Explorer, cu noua
fereastr deschis.

Figura 7.10
Figura 7.11

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

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

Creai un mic dicionar pentru vizitatorii site-ului dumneavoastr. Afiai n
bleu cuvintele pe care le definii. Ori de cte ori utilizatorul va executa un clic pe
unul din aceste cuvinte, se va deschide o fereastr n care se afieaz o scurt
definiie a cuvntului selectat (figura 7.13). Personalizai script-ul creat.

226

Scriei un program JavaScript care ajusteaz n mod automat dimensiunea
caracterelor unui text la dimensiunile ferestrei. Cu ct fereastra este mai mare,
cu att caracterele sunt mai mari. Punerea n pagin va fi asigurat n toate
circumstanele. Definii dimensiunea de baz a caracterelor pentru dimensiuni
precise ale ferestrei. Dimensiunea caracterelor se va recalcula la fiecare
redimensionare a ferestrei.
Script-ul redefinete stilul caracterelor pentru ntreg documentul de fiecare dat
cnd fereastra i schimb dimensiunile (figura 7.14, figura 7.15).

Figura 7.13
Figura 7.14
coriamb
Un dactil si un troheu

227

Comentai urmtorul document XHTML care conine un script pentru
actualizarea periodic a coninutului unei pagini Web (figura 7.16).
Indicaie. Revedei metoda set Ti meOut ( ) prezentat n figura 7.9.

Figura 7.15
Figura 7.16
Creai un script pentru a afia trei casete de dialog cu ajutorul metodelor
al er t ( ) , conf i r m( ) , pr ompt ( ) .
n figura 7.17 este afiat documentul complet XHTML.

228

Remarc. Documentul afieaz trei butoane, fiecare dintre ele apelnd cte un gestionar de
evenimente pentru a afia o caset de dialog.
n figurile 7.18, 7.19, 7.20 sunt prezentate rezultatele execuiei programului
JavaScript.

Figura 7.17
Figura 7.18

229

Obiectul Wi ndow, considerat ca fiind obiectul de cel mai nalt nivel n ierarhia
obiectelor JavaScript pe parte de client conine toate celelalte obiecte pe parte de
client, cu excepia obiectului Navi gat or .
Este important s facei cunotin cu aceste obiecte, i ... s rmnei mpreun!
Ele sunt:
Document ;
Fr ame;
Hi st or y;
Locat i on;
Event ;
St yl e.
Remarc. Aceste obiecte sunt considerate obiecte de nivelul 1.

Figura 7.19
Figura 7.20

230
Obiectul Document
Manipularea documentelor Web
Obiectul Document reprezint pagina Web afiat ntr-o fereastr a
navigatorului. Nu pare deci surprinztor faptul c obiectele Document sunt fii ai
obiectelor Wi ndow. n msura n care obiectul Wi ndowreprezint ntotdeauna
fereastra activ (cea care conine script-ul), putei utiliza wi ndow. document
pentru a v referi la documentul curent sau, mai simplu, utilizai numai
document .
Remarc. n programele JavaScript din conversaiile precedente ai fcut apel la metoda
document . wr i t e pentru a afia un text ntr-un document Web. Programele la care ne referim
nu utilizau dect o fereastr; n consecin, era inutil s folosii descrierea complet
wi ndow. document . wr i t e.
Dac mai multe ferestre sau mai multe cadre sunt deschise, atunci vor exista mai
multe obiecte wi ndowi un singur obiect Document pentru fiecare dintre ele.
Pentru a utiliza un astfel de obiect Document ne folosim de numele ferestrei
urmat de numele obiectului.
Fia obiectului Document este prezentat n figura 7.21.
Fia obiectului Document
Obiectul printe: Wi ndow
Subobiecte: Anchor , Ar ea, Appl et , For m, I mage, Layer , Li nk,
Pl ugi n
Proprieti: act i veEl ement , al i nkCol or , al l [ ] , anchor s[ ] ,
appl et s[ ] , at t r i but es[ ] , backgr ound, bgCol or , body,
char act er Set , char Set , chi l dNodes[ ] , cooki e,
def aul t char set , domai n, embeds[ ] , f gcol or ,
f i l eCr eat edDat e, f i l eModi f i edDat e, f i l eSi ze,
f or ms[ ] , f r ames[ ] , hei ght , i mages[ ] , i nner HTML,
i nner Text , l ast Modi f i ed, l ayer s[ ] , l i nks[ ] ,
l ocat i on, out er HTML, out er Text , par ent Wi ndow,
pl ugi ns[ ] , pr ot ocol , r eadySt at e, r ef er r er ,
scr i pt s[ ] , sel ect i on, st yl e, st yl esheet s[ ] , t i t l e,
URL, vl i nkCol or , wi dt h
Metode: cl ear ( ) , cl ose( ) , cr eat eEl ement ( ) ,
cr eat eSt yl eSheet ( ) , el ement For mPoi nt ( ) ,
get El ement Byl d( ) , get El ement sByName( ) ,
get El ement sByTagName( ) , get Sel ect i on( ) , open( ) ,
set Act i ve( ) , wr i t e( ) , wr i t el n
Gestionarii de
evenimente:
onAct i vat e, onBef or eCut , onBef or eDeAct i vat e,
onBef or eEdi t Focus, onBef or ePast e, onBef or eUpdat e,
onCel l Change, onCl i ck, onCont ext Menu,
onCont r ol Sel ect , onCut , onDbl Cl i ck, onDr ag,
onDr agEnd, onDr agEnt er , onDr agLeave, onDr agOver ,
onDr agSt ar t , onDr op, onHel p, onKeyDown, onKeyPr ess,
onKeyUp, onMouseDown, onMouseOut , onMouseOver ,
onMouseUp, onPast e, onPr oper t yChange,
onSel ect i onChange, onSel ect St ar t , onSt op
Figura 7.21

231
Proprieti e fundamentale ale obiectului Document l

Proprietile fundamentale ale obiectului Document sunt prezentate n detaliu n
figura 7.22.
Proprietate Sintax
al i nkCol or document . al i nkCol or

Conine culoarea atribuit link-urilor active, definit prin atributul
al i nk al tag-ului <body>.
Pentru a modifica culoarea link-ului, atribuii o nou valoare a culorii.

Exemplu:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aplicatie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
document.write("<br />Legaturi active: "+document.alinkColor);
document.write("<br />Legaturi: "+document.linkColor);
document.write("<br />Legaturi vizitate: "+document.vlinkColor);
</script>
</head>
<body link="blue" alink="yellow" vlink="purple">
</body>
</html>
al l [ ] document . al l [ ]

Toate elementele documentului. Fiecare element este o dat al matricii
(array) al l [ ] . Elementele sunt referite prin numrul lor de ordine
sau prin numele lor. Utilizai metoda t ags( ) pentru a obine setul de
elemente ale unui tag precis.

Exemplu:
<head>
<title>all[]</title>
</head>
<body>
<p id="unu">O imagine <img src="sigla.jpg" name="sigla1" width="15"
height="30" border="0" id="sigla1" /></p>
<p id="doi">A doua imagine <img src="sigla.jpg" name="sigla2" width="15"
height="30" border="0" id="sigla2" /></p>
<script language="JavaScript" type="text/javascript">
//Afiseaza id-ul tag-urilor
para=document.all.tags("p");
document.write(para[0].id+"<br />");
document.write(para[1].id+"<br />");
</script>
</body>
</html>

Figura 7.22

232
anchor s[ ] document . anchor s[ ]

Matricea anchor s[ ] conine un obiect Anchor (ancor) pentru
fiecare set de tag-uri: <a name=...> ... </a>.
appl et s[ ] documet . appl et s[ ]

Matricea appl et s[ ] conine toate applet-urile Java inserate n
documentul (X)HTML. Fiecare element al matricii corespunde unui set
de tag-uri <appl et > . . . </ appl et >.
document . appl et s. l engt h returneaz numrul de applet-uri
ale documentului.
bgCol or document . bgCol or

Culoarea de fond a documentului numai atributul bgColor al
tag-ului <body>(vezi proprietatea alinkColor).
body document . body

Referin la seciunea body a documentului.
body este un obiect care recunoate proprietile obiectului
document .

Exemplu:
<head>
<title>document.body</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
</head>
<body>
nouFer=window.open("","nou","height=200, width=200");
nouFer.document.write("<head><title>demo</title></head><body><b>La
multi ani impreuna!</b></body>");
document.write(nouFer.document.body.innerHTML);
nouFer.close();
</script>
</body>
</html>
cooki e document . cooki e

Permite citirea i configurarea valorii cookie-ului clientului pentru un
document (X)HTML. Citirea i nregistrarea cookie-ului sunt foarte
simple.
Remarc. Utilizarea unui cooki e este puin mai complicat.

Exemplu:
...
//citeste cookie
var numCookie=document.cookie;
//scrie cookie
document.cookie=numCookie;
...

Figura 7.22
(continuare)

233
embeds[ ] document . embeds[ ]

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

Culoarea textului. Corespunde atributului t ext al tag-ului <body>
(vezi proprietatea al i nkCol or ).
f or ms[ ] document . f or ms[ ]

Setul de formulare coninute n documentul (X)HTML. Formularele sunt
reprezentate n documentul (X)HTML prin tag-ul <f or m>. Fiecare
formular este un element al matricii (array) f or ms[ ] . Primul formular
are rangul 0.
document . f or ms. l engt h returneaz numrul de formulare ale
documentului.

Exemplu:
<head>
<title>form</title>
</head>
<body>
<form name="form1">
<input name="zona1" type="text" id="zona1" />
<br />
</form>
<form name="form2" id="form2" method="post" action="">
<br />
</form>
<p>
<br />
</p>
</form>
for(i=0;i<document.forms.length;i++){
document.write(document.forms[i].name+"<br />");
}
</script>
</body>
</html>

Figura 7.22
(continuare)

234
f r ames[ ] document . f r ames[ ]

Setul de cadre (frames, n limba englez) afiate. Fiecare cadru este un
element al matricii f r ames[ ] . Ele sunt referite prin numrul lor de
ordine sau prin numele lor. Primul este de rang 0.
Document . f r ames. l engt h returneaz numrul de cadre ale
documentului.
i mages[ ] document . i mages[ ]

Setul de imagini ale documentului. Ele sunt inserate cu tag-ul
<i mg/ >. Fiecare imagine este un element al matricii (array)
i mages[ ] . Ele sunt referite prin numrul lor de ordine sau prin
numele lor.
document . i mages. l engt h returneaz numrul de imagini ale
documentului.
Imaginile recunosc proprietile care corespund atributelor tag-ului
<i mg/ >: bor der , hei ght , hspace, l owsr c, name,
sr c, vspace, wi dt h.
n plus, proprietatea compl et e conine valoarea true dac
imaginea s-a ncrcat integral.

Exemplu:
<head>
<title>demo</title>
</head>
<body>
<img src="sigla.jpg" name="sigla" width="150" height="300" hspace="5"
vspace="10" border="0" lowsrc="siglamin.JPG" id="sigla" />
text="Proprietatile imaginii: <br />";
text+="border= "+document.sigla.border+"<br />";
text+="complet= "+document.sigla.complete+"<br />";
text+="height= "+document.sigla.height+"<br />";
text+="hspace= "+document.sigla.hspace+"<br />";
text+="lowsrc= "+document.sigla.lowsrc+"<br />";
text+="name= "+document.sigla.name+"<br />";
text+="src= "+document.sigla.src+"<br />";
text+="vspace= "+document.sigla.vspace+"<br />";
text+="width= "+document.sigla.width+"<br />";
document.write(text);
</script>
</body>
</html>
i nner HTML document . i nner HTML

Conine codul HTML al documentului. Acest atribut poate fi aplicat
ntregului obiect din document pentru a recupera sau pentru a
modifica codul (X)HTML care l nchide.

Figura 7.22
(continuare)

235

Exemplu:

<body>
<p id=paragraf><b>text</b>demo</p>
<script>
element=document.getElementByld(paragraf);
alert(element.innerHTML);
</script>

i nner Text document . i nner Text

Recupereaz sau definete codul (X)HTML ca pe un text, fr
interpretarea tag-urilor.
l ast Modi f i ed document . l ast Modi f i ed

Data i ora ultimei modificri a documentului. Este un obiect
String.

Exemplu:
<script>
Document.write(document.lastModified);
</script>
l ayer s[ ] document . l ayer s[ ]

Setul de straturi reprezentate n pagina (X)HTML prin
tag-urile <di v>sau <l ayer >. Pot fi accesate prin atributele i d sau
name.
document . l ayer s. l engt h returneaz numrul de straturi ale
documentului.
Remarc. Setul de layer-e nu este recunoscut de Netscape.
l i nkCol or document . l i nkCol or

Codul culorii atribuite link-urilor din documentul (X)HTML, definite prin
atributul l i nk al tag-ului <body>.
l i nks[ ] document.links[]

Matricea l i nks[ ] conine un obiect Li nk pentru fiecare tag
<a hr ef =. . . > </ a> prezent n documentul (X)HTML.
Obiectele l i nks au aceleai proprieti ca obiectul l ocat i on.

Exemplu:
...
<a href=http://www.dumitrascu.ro>Link</a>
<form>
<input type=button value=Schimba link-ul
onClick=document.links[0].href=http://www.upg-ploiesti.ro>
</form>
l ocat i on document . l ocat i on

Conine URL-ul documentului.

Figura 7.22
(continuare)

236
Exemplu:
...
<body>
<script>
document.write(document.location);
//se afieaz, de exemplu http://www.dumitrascu.ro
</script>
</body>

Exemplu:

<script>
document.write(adresa actuala: +document.location);
document.location=http://www.multimedia.fr;
</script>
pl ugi ns[ ] document . pl ugi ns[ ]

Setul de plug-ins coninute n documentul (X)HTML.
Fiecare plug-in este un element al matricii pl ugi ns[ ] . Ele sunt
referite prin numrul lor de ordine.
document . pl ugi ns. l engt h returneaz numrul de plug-ins ale
documentului.
r ef er r er document . r ef er r er

URL-ul documentului de la care documentul curent a fost ncrcat.
scr i pt s[ ] document . scr i pt s[ ]

Setul de script-uri coninute n documentul (X)HTML.
Ele sunt reprezentate n document prin tag-ul <scr i pt >. Fiecare
script este un element al matricii (array) scr i pt s[ ] .
Ele sunt referite prin numrul lor de ordine.
document . scr i pt s. l engt h returneaz numrul de script-uri ale
documentului.
t i t l e document . t i t l e

Titlul documentului, cel care este specificat n tag-ul <t i t l e>.
URL document . URL

URL-ul documentului. Aceast proprietate este puin utilizat cci ea
este echivalent cu document . l ocat i on. hr ef .
vl i nkCol or document . vl i nkCol or

Codul culorii atribuit link-urilor vizitate n document, acelai care este
definit prin atributul vl i nk al tag-ului <body> (vezi proprietatea
al i nkCol or ).

Figura 7.22
(continuare)

237
Metodele fundamentale ale obiectului Document
Cele mai utilizate metode ale obiectului Document sunt prezentate n detaliu n
figura 7.23.
Metod Sintax
cl ose( ) document . cl ose( )

Afieaz datele ncrcate dar care nu sunt nc afiate i oprete fluxul de
intrare al datelor n document. Dac toate datele nu au fost ncrcate,
documentul nu este afiat integral.
Aceast metod nu cere nici un argument. Metoda nu este indispensabil
ntruct metoda wr i t e( ) care scrie n document realizeaz n mod
automat deschiderea (open) i nchiderea (cl ose) fluxului de date
(vedei paragraful urmtor: tergerea i rescrierea coninutului unui
document).
get El ement ByI d( ) document . get El ement ByI d( id)

Returneaz sub form de matrice (array) lista elementelor identificate prin
nume sau id-ul indicat. Dac nu exist nici un element de tipul indicat,
metoda returneaz null.
Elementele dispun de proprieti i de metode specifice obiectelor.
Aceast metod este folosit de asemenea pentru detectarea
navigatorului.

Exemplu:
<body>
<p id="unu">Primul paragraf </p>
<p id="doi">Al doilea paragraf </p>
//Modifica aliniamentul unui paragraf
para=document.getElementById("unu");
para.align="center";
</script>
</body>
//Detecteaza navigatorul
if(document.layers) Nav="NN4";
else if((document.all)&&(document.getElementById))
Nav="IE5-IE6";
else if(document.getElementByID)Nav="NN6";
alert(Nav);
</script>
get El ement sByName( ) document . get El ement sByName( Nume)

nume sau id-ul indicat. Dac nu exist nici un element de tipul indicat,
metoda returneaz null.

Exemplu:
<body>
para=document.getElementsByName("unu");
para[0].align="center";
</script>
</body>
Figura 7.23

238

get El ement sByTagName( ) document . get El ement sByTagName( tag)

tag-ul indicat.
Dac nu exist nici un element de tipul indicat, metoda returneaz null.

Exemplu:
<body>
el=document.getElementsByTagName("p");
el[0].align="center";
</script>
</body>
open( ) document . open( TipMime,replace)

Deschide documentul pentru a trimite datele care vor fi afiate cu metoda
wr i t e( ) . Primul argument indic tipul MIME al datelor (text/html;
text/plain; image/gif; image/jpeg; image/sc-bitmap;
plugIn (orice model plug-in Netscape de tip MIME)).
Al doilea argument precizeaz dac datele vor nlocui documentul deja
prezent n fereastra navigatorului (true) sau se vor aduga celor
existente (false). Cele dou argumente sunt facultative.
Aceast metod nu este indispensabil ntruct metoda wr i t e( ) care
scrie n document realizeaz n mod automat deschiderea (open) i
nchiderea (cl ose) fluxului de date.
Remarc. Cele dou script-uri sunt echivalente.
Exemplu:
fernoua=window.open("","nou","height=200, width=400");
fernoua.document.open();
fernoua.document.write("<head><title>demo</title></head> <body><b>La multi
ani impreuna!</b></body>");
fernoua.document.close();
</script>

Exemplu:
fernoua=window.open("","nou","height=200, width=400");
fernoua.document.write("<head><title>demo</title></head><body><b>La multi
ani impreuna!</b></body>");
</script>
wr i t e( ) document . wr i t e( ir1,ir2)

Introduce n document: date de tip caracter, variabile i tag-uri. Pentru
caractere speciale (apostrof, de exemplu) introducei caracterele
corespunztoare.

Figura 7.23
(continuare)

239

Exemplu:
<script>
document.write(D\ ale Carnavalului);
//Afieaz Dale Carnavalului
</script>
wr i t el n( ) document . wr i t el n( ir1, ir2)

Introduce date de tip caracter, variabile i tag-uri i insereaz un salt de
linie la sfrit. Cum salturile de linie sunt ignorate de ctre navigatoare,
aceast metod este identic cu wr i t e( ) .

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

240
Utilizai document . cl ose( ) pentru a indica navigatorului c ai
terminat de scris n fereastra sa.
Remarci:
Metodele open( ) i cl ose( ) nu deschid i nici nu nchid noile ferestre.
Dac utilizai metoda document . open( ) , n fereastra curent, script-ul
dumneavoastr, care face parte din documentul curent, va fi ters i n consecin va
nceta s se execute. Mult mai bine este s utilizai metodele open( ) i cl ose( ) cu
ferestre sau cadre separate.
Cu metoda document . open putei specifica un tip MIME care v ofer
posibilitatea de a crea un document de un anume tip ce conine imagini i
documente utilizate n cadrul plug-ins.
Remarc. MIME (Multipurpose Internet Mail Extension) este un standard pentru documentele
Internet. Atunci cnd server-ul trimite un document unui browser, i se indic i tipul MIME al
documentului pentru ca navigatorul s tie cum s-l afieze. Printre tipurile MIME cele mai
rspndite amintim formatul HTML (tipul MIME text/html) i formatul text (tipul
text/plain).

Aplicaii ale metodelor open() i close()
Analizai urmtorul document HTML (vezi figura 7.24). Precizai rolul
instruciunilor: document . open( ) i document . cl ose( ) .

Figura 7.24
Script-ul prezentat ([1]) n figura 7.25 evalueaz browser-ul (Netscape,
Internet Explorer) i modific textul n funcie de tipul su. Comentai script-ul.

241

Remarc. Nu uitai c atunci cnd folosii metodele wr i t e ( ) sau wr i t el n( ) nu putei
schimba coninutul documentului curent fr s rencrcai complet pagina.

Obiectul Frame
Atunci cnd o fereastr conine mai multe cadre, fiecare dintre ele este
reprezentat n JavaScript printr-un obiect Fr ame.
Remarc. Obiectul Fr ame este prezentat n detaliu n Conversaia 10.

Obiectul Location
Obiectul Locat i on este un fiu al obiectului Wi ndow. El stocheaz informaii
despre adresa URL a unei ferestre specificate. Fia obiectului Locat i on este
prezentat n figura 7.26.
Remarc. Dei utilizatorii vd URL-ul afiat n caseta de locaie (Locat i on) a navigatorului,
programatorii JavaScript lucreaz cu obiectul Locat i on.

Fia obiectului Location
Obiectul printe: Wi ndow
Proprieti: hash, host , host name, hr ef , pat hname,
por t , pr ot ocol , sear ch
Metode: assi gn( ) , r el oad( ) , r epl ace( )
Gestionarii de evenimente: - Figura 7.26
Figura 7.25

242
Proprieti e obiectului Location l
Proprietate
Proprietile obiectului Locat i on sunt prezentate n detaliu, n figura 7.27. Ele
reprezint pri ale URL-ului.
Sintax
hash document . l ocat i on. hash

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

Exemplu:
<script>
document.write(document.location.hash);
//afieaz top, dac adresa este http://www.ionescu.com/index.htm#top
</script>
host document . l ocat i on. host

Numele server-ului i postul URL.

Exemplu:
<script>
document.write(document.location.host);
//afieaz www.ionescu.com (vezi hash)
</script>
host name document . l ocat i on. host name

Numele server-ului.

Exemplu:
<script>
document.write(document.location.hostname);
//afieaz www.ionescu.com (vezi hash)
</script>
hr ef document . l ocat i on. hr ef

Adresa Web (URL-ul) complet.

Exemplu:
<script>
document.write(document.location.href);
/*afieaz www.ionescu.com/linkuri/pref.htm dac pagina afiat este la adresa
http://www.ionescu.com/linkuri/pref.html */
</script>
pat hname document . l ocat i on. pat hname

Calea de acces la document.
Exemplu:
<script>
document.write(document.location.pathname);
//afieaz /linkuri/pref.html (vezi href)
</script>
por t document . l ocat i on. por t

Numrul de port al URL-ului (n general 80).

Exemplu:
<script>
document.write(document.location.port);
/*afieaz 80, dac adresa este http://www.ionescu.com:80/linkuri/pref.html*/
</script>
Figura 7.27

243
pr ot ocol document . l ocat i on. pr ot ocol

Partea protocol a URL-ului (n general http).
sear ch document . l ocat i on. sear ch

Partea de cutare a adresei URL de dup semnul ?

Exemplu:
<script>
document.write(document.location.search);
</script>

Metodele obiectului Location
Metodele obiectului Location sunt prezentate n detaliu n figura 7.28.
Metod Sintax
assi gn( ) document . l ocat i on. assi gn( URL)

Modific URL-ul documentului.
Exemplu:
<form>
<input type=button value=Yahoo!
onClick=window.location.assign(http://www.yahoo.com)>
</form>

Exemplu:
<form>
<input type=button value=Yahoo!
onClick=window.location=http://www.yahoo.com>
</form>
r el oad( ) document . l ocat i on. r el oad( )

Rencarc documentul curent n fereastra browser-ului. Dac argumentul
(rencrcare) are valoarea logic true documentul este rencrcat de pe
server; n caz contrar el este recuperat n cache-ul navigatorului.
r epl ace( ) document . l ocat i on. r epl ace( URL)

nlocuiete pagina curent cu o nou pagin. Metoda nu afecteaz
istoricul navigatorului. Utilizarea metodei este justificat pentru a evita
revenirea la ecranele de prezentare sau la paginile temporare de interes
minim.
Aplicaii
Modificai URL-ul documentului curent.
n figura 7.29 este prezentat secvena HTML corespunztoare.

Figura 7.29
Figura 7.27
(continuare)
Figura 7.28

244
Modificai URL-ul documentului ntr-o fereastr secundar pornind de la fereastra
principal.
n figura 7.30 este prezentat documentul XHTML complet al aplicaiei.

Obiectul History
Obiectul Hi st or y este un alt obiect fiu al obiectului Wi ndow. Acest obiect
conine URL-ul paginilor vizitate nainte i dup pagina curent.
Fia obiectului Hi st or y este prezentat n figura 7.31.
Fia obiectului History
Obiectul printe: wi ndow
Proprieti: l engt h
Metode: back( ) , f or war d( ) , go( )
Proprieti e obiectului History l
Proprietate
Proprietile obiectului History sunt prezentate n detaliu n figura 7.32.
Sintax
l engt h( ) wi ndow. hi st or y. l engt h

Numrul de pagini din istoric.

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

245
Remarci:
Obiectul History mai conine i proprietile: current, previous i next care
stocheaz URL-ul curent, anterior i urmtor al documentului n lista de istoric.
Din motive de securitate, aceste obiecte sunt normal inaccesibile n browser-ele actuale.

Metodele obiectului H story i

Trei metode ale obiectului History permit deplasarea n lista de istoric (vezi
figura 7.33).
Metod Sintax
back( ) wi ndow. hi st or y. back( )

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

Exemplu:
<body>
<form>
<input type=button value=Pagina precedenta
onClick=window.history.back()>
</form>
</body>
f or war d( ) wi ndow. hi st or y. f or war d( )

Trece la URL-ul urmtor n istoric. Aceast metod corespunde unui clic
pe butonul forward al navigatorului.
go( ) wi ndow. hi st or y. go( Numr)

Avanseaz sau se ntoarce n istoric cu numrul de pagini indicate.

Exemplu:
<body>
<a href=JavaScript:window.history.go(-2)> Mergi inapoi cu 2 pagini</a><br />
<a href=JavaScript:window.history.go(2)> Mergi inainte cu 2 pagini</a>
</body>
Figura 7.33

Obiectul Event
Obiectul Event este un alt fiu al obiectului Wi ndow.
Fia obiectului Event este prezentat n figura 7.34.

Fia obiectului Event

246
Proprieti: al t key, but t on, cancel abl e, cl i ent X,
ct r l Key, cur r ent Tar get , dat a,
f r omEl ement , hei ght , keyCode, l ayer X,
l ayer Y, modi f i er s, pageX, pageY,
r eason, r et ur nVal ue, scr eenX, scr eenY,
shi f t key, sr cEl ement , sr cFi l t er ,
t ar get , t oEl ement , t ype, whi ch, wi dt h,
x, y
Metode: -

Proprieti e obiectului Event l

Cteva din proprietile obiectului Event sunt prezentate n detaliu n figura
7.35.
Proprietate Sintax
al t key event . al t key
Returneaz valoarea logic true (adevrat) dac tasta Alt a fost

acionat.
but t on event . but t on
Determin care din butoanele mouse-ului a fost acionat: left, right

sau middle.
cl i ent X event . cl i ent X
Returneaz coordonata orizontal de amplasare a evenimentului.

cl i ent Y event . cl i ent Y
Returneaz coordonata vertical de amplasare a evenimentului.

dat a event . dat a
Atunci cnd se genereaz evenimentul dr agdr op, proprietatea conine o

matrice (array) cu URL-ul obiectului stocat.
hei ght event . hei ght
Atunci cnd se genereaz evenimentul r esi ze, proprietatea conine

noua valoare a nlimii elementului.
l ayer X event . l ayer X
Coordonata orizontal a stratului n raport cu stratul care o conine.

l ayer Y event . l ayer Y
Coordonata vertical a stratului n raport cu stratul care o conine.

Figura 7.34
Figura 7.35

247
pageX event . pageX
Coordonata orizontal de amplasare a evenimentului care se produce.

pageY event . pageY
Coordonata vertical de amplasare a evenimentului care se produce.

r et ur nVal ue event . r et ur nVal ue
Aceast proprietate are prioritate n raport cu valoarea returnat de ctre

un gestionar de evenimente. Pentru a anula efectul evenimentului,
modificai coninutul su atribuindu-i valoarea logic false.
sr cEl ement event . sr cEl ement
Referin la elementul care a generat evenimentul.

t ype event . t ype
Specific numele evenimentului care se produce.

Figura 7.35
(continuare)
Aa cum exist subobiecte ale obiectului Window, tot aa exist i subobiecte
obiecte de nivelul al doilea ale obiectului Document. Subobiectele obiectului
Document sunt urmtoarele:
Anchor ;
Ar ea;
Appl et ;
For m;
I mage;
Layer ;
Li nk;
Pl ugi n.

Obiectul Anchor

248
Obiectele Anchor sunt fii ai obiectului Document . Fiecare obiect Anchor
reprezint o ancor a documentului curent, adic un loc specific n document
care poate fi atins direct printr-un l i nk.

Matricea anchors[]
Singurul mod n care putei folosi realmente un obiect Anchor n limbajul
JavaScript este prin intermediul matricii anchor s[ ] al obiectului Document
( document . anchor s[ ] ) .
Folosii matricea document . anchor s[ ] pentru a determina numrul de
ancore dintr-un document (figura 7.36).
Folosii proprietatea name pentru a recupera numele unei ancore i proprietatea
i nner Text pentru a recupera textul su (figura 7.36).
...
<a name=ancora1>test1</a><br>
<script>
document.write(document.anchors.length+ancore numite);
//afieaz dou ancore numite
<//script>

<script>
document.write(document.anchors[0].name);
document.write();
document.write(document.anchors[1].innerText);
//afieaz ancora 1 test2
</script>

Figura 7.36

Obiectul Area
Obiectul Ar ea v permite s definii o suprafa a unei imagini reactive.
Proprietile obiectului Ar ea sunt: hash (poriunea de adres URL care este
ancora, inclusiv simbolul #); host (numele calculatorului gazd (adresa IP) i
portul specificate n adresa URL); host name (numele calculatorului gazd
specificat n URL); hr ef (adresa URL complet); pat hname (calea fiierului

249
specificat n adresa URL, ncepnd cu simbolul (/); por t (portul specificat n
adresa URL); pr ot ocol (protocolul specificat n adresa URL, inclusiv simbolul
final (:); sear ch (partea de cutare a adresei URL, inclusiv simbolul (?);
t ar get (numele ferestrei int n care se afieaz adresa URL); t ext (textul
care apare ntre tag-urile <ar ea> . . . </ ar ea>) .

Obiectul Applet
Obiectul Appl et reprezint echivalentul JavaScript al tag-ului (X)HTML
<appl et >.

Obiectul Form
Obiectul For meste un obiect JavaScript reprezentat prin perechea de tag-uri
(X)HTML: <f or m>i </ f or m>.
Remarc. Obiectul For meste prezentat n detaliu n Conversaia 8.

Obiectul Image
Obiectul I mage este echivalentul JavaScript al tag-ului (X)HTML <i mg / >.
Remarc. Obiectul I mage este prezentat n detaliu n Conversaia 9.

Obiectul Layer
Obiectul Layer permite accesarea straturilor n interiorul documentelor.
Remarc. Obiectul Layer este prezentat n detaliu n Conversaia 10.

Obiectul Link
Obiectul Link este echivalentul JavaScript al unei legturi hipertext.
Fia obiectului Link este prezentat n figura 7.37.

250
Fia obiectului Link
Obiectul printe: Document
Proprieti: hash, host , host name, hr ef ,
pat hname, por t , pr ot ocol , sear ch,
t ar get (vezi obiectul Location)
Un document poate avea mai multe obiecte Li nk, fiecare dintre ele coninnd
informaii cu privire la URL-ul sau ancora corespunztoare.
Remarc. Ancorele sunt elemente numite ale unui document (X)HTML la care putei avea acces
direct. Pentru a defini o ancor se utilizeaz o sintax de tipul <a name=ancor a2>. Pentru
a crea dup aceea un link ctre aceast ancor, se utilizeaz un tag de tipul
<a hr ef =#ancor a2>.

Figura 7.37
Matricea links[]
Obiectele Li nk nu au o proprietate name, deci nu putei referi un obiect Li nk
prin el nsui.
Putei accesa obiecte Li nk cu ajutorul matricii l i nks[ ]
(document . l i nks[ ] ) care este o colecie a tuturor legturilor din
documentul curent. Ordinea din matrice se bazeaz pe ordinea n care sunt
localizate legturile n fiierul surs. O proprietate a matricii,
document s. l i nks. l engt h precizeaz numrul de link-uri ale paginii.
Remarci:
Obiectul Li nk v permite s lucrai cu legturi n limbajul JavaScript.
Obiectul Li nk este similar cu obiectul Locat i on, care conine aceleai informaii
pentru pagina (X)HTML curent.

Proprieti e obiectului Link l
Obiectul Li nk conine numeroase proprieti (acelai ca i obiectul Locat i on)
care permit cunoaterea cu precizie a legturii (X)HTML care l reprezint. Aceste
proprieti reprezint pri ale adresei URL.
Proprietile obiectului Li nk sunt prezentate n detaliu n figura 7.38.

251
Proprietate Sintax
hash Li nk. hash

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

Reprezint poriunea de calculator gazd din adresa URL asociat cu o
legtur.
host name Li nk. host name

Reprezint poriunea de nume al calculatorului gazd din adresa URL
asociat cu o legtur.
hr ef Li nk. hr ef

Reprezint adresa URL complet asociat cu o legtur.

pat hname Li nk. pat hname

Reprezint poriunea numelui de cale a legturii URL.
por t Li nk. por t

Reprezint poriunea de port a legturii URL.
pr ot ocol Li nk. pr ot ocol

Reprezint poriunea de protocol a legturii URL.
sear ch Li nk. sear ch

Reprezint poriunea de interogare a legturii.
t ar get Li nk. t ar get

Reprezint numele obiectului Window n care este afiat legtura.

Aplicaie
Comentai secvena de cod HTML prezentat n figura 7.39.
<a href=http://www.altavista.fr>Legtur</a>
<form>
<input type=button value=Schimbai legtura
onCLick=document.links[o].href=http://www.yahoo.com>
</form>
Figura 7.38
Figura 7.39

Obiectul Plugin
Obiectul Pl ugi n, foarte asemntor obiectului Appl et reprezint o modalitate
de accesare a modulelor plug-in instalate n browser.

252
Proprietile obiectului Pl ugi n sunt: descr i pt i on (conine descrierea
modulului plug-in); f i l ename (conine numele fiierului unui program plug-in);
l engt h (conine numrul de tipuri MIME acceptate de modulul plug-in); name
(conine numele modulului plug-in).

Urmtorul nivel de obiecte pe parte de client ale limbajului JavaScript este nivelul
al treilea. Toate obiectele de nivelul al treilea sunt subobiecte ale obiectului
For m: But t on; Checkbox; Fi l eUpl oad; Hi dden; Passwor d;
Radi o; Reset ; Submi t ; Sel ect ; Text ; Text ar ea.
Remarc. Obiectele de nivelul al treilea pe parte de client sunt prezentate n Conversaia 8.

Ultimul nivel de obiecte pe parte de client ale limbajului JavaScript este nivelul al
patrulea. Exist un singur obiect de nivelul al patrulea: obiectul Opt i on, care
este un subobiect al obiectului Sel ect .
Obiectul Opt i on este folosit pentru referirea la elementele <opt i on>care
apar ntre tag-urile <sel ect > . . . </ sel ect >.

Obiectul Option
Fia obiectului Opt i on este prezentat n figura 7.40.
Fia obiectului Option
Obiectul printe: Sel ect
Cum se creeaz obiectul? Const r uct or ul opt i on( )
Proprieti: def aul t Sel ect ed, di sabl ed, f or m,
i ndex, l abel , sel ect ed, t ext , val ue

253
Metode:
Gestionarii de evenimente: onCl i ck, onDbl Cl i ck, onHel p,
onKeyDown, onKeyPr ess, onKeyUp,
onMouseDown, onMouseMove,
onMouseOut , onMouseOver , onMouseUp

Obiectul Opt i on este prezentat n detaliu n figura 7.41.
Obiect Sintax
Opt i on( ) document . f or ms[ ] . opt i on

Reprezint, n cadrul unui formular o list derulant de opiuni incluse
ntre tag-urile <sel ect >i </ sel ect >. Ea este definit prin tag-
urile (X)HTML <opt i on> . . . </ opt i on>. Obiectul este accesat
prin proprietatea f or m. sel ect . el ement s[ ] sau prin numele su.
Pot fi create noi opiuni cu ajutorul constructorului Option().

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

Proprieti e obiectului Option l

Proprietile obiectului Opt i on sunt prezentate n detaliu n figura 7.42.
Proprietate Sintax
def aul t Sel ect ed document . f or ms[ ] . opt i on.
def aul t Sel ect ed

Valoare logic (true/false) indic dac o opiune este implicit.
di sabl ed document . f or ms[ ] . opt i on. di sabl ed

Valoare logic (true/false) opiunea este dezactivat (true) sau
activat (false).
f or m document . f or ms[ ] . opt i on. f or m

Renun la formularul care conine zona.
i ndex document . f or ms[ ] . opt i on. i ndex
Figura 7.41
Figura 7.40

254

Rangul opiunii n lista sel ect .

l abel document . f or ms[ ] . opt i on. l abel

Textul alternativ al opiunii. Proprietatea corespunde atributului l abel al
tag-ului.
sel ect ed document . f or ms[ ] . opt i on. sel ect ed

Valoare logic (true/false) opiune selectat (true) sau nu
(false).
t ext document . f or ms[ ] . opt i on. t ext

Textul opiunii.
val ue document . f or ms[ ] . opt i on. val ue

Valoarea opiunii. Aceast proprietate corespunde atributului value al
tag-ului <opt i on>.

Obiectul Navigator
Figura 7.42
Noul standard DOM (Document Object Model) a eliminat multe dintre diferenele
care exist (nc!) ntre navigatoare, dar vei ntlni numeroase situaii care
impun scrierea unui script pentru fiecare navigator, separat. Putei utiliza
JavaScript pentru a identifica navigatorul pe care l utilizai, folosind obiectul
wi ndow. navi gat or .
Obiectul Navi gat or nu face parte din DOM deci, l putei referi direct.
El este unic i deci, imposibil de instaniat (creat).
Putei aduga proprieti personale obiectului Navi gat or . Ele sunt disponibile
pentru toate obiectele Wi ndowale navigatorului Netscape. Spre deosebire de
Netscape Navigator, Internet Explorer creeaz un obiect Wi ndowpentru fiecare
o nou fereastr. Noile proprieti rmn deci limitate la obiectul Wi ndown care
ele au fost create.
Fia obiectului Navi gat or este prezentat n figura 7.43.
Fia obiectului Navigator

255
Subobiecte: mi meType, pl ugi n
Proprieti: appCodename, appMi nor Ver si on, appName,
appVer si on, br owser Language,
cooKi eEnabl ed, cpucl ass, l anguage,
mi meTypes[ ] , onLi ne, pl at f or m,
pl ugi ns[ ] , pr oduct , pr oduct Sub,
syst emLanguage, user Agent ,
user Language, vendor
Metode: j avaEnabl ed( )

Proprieti e obiectului Navigator l
Proprietile obiectului Navi gat or sunt prezentate n detaliu n figura 7.44.
Proprietate Sintax
appCodeName navi gat or . appCodeName

Returneaz numele codului intern al navigatorului n general Mozilla.

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

Returneaz numele oficial al navigatorului: Microsoft Internet Explorer
sau Netscape.

Exemplu:
<script>
x=navigator.appName;
document.write(x);
// afieaz, de exemplu Microsoft Internet Explorer
</script>
appVer si on navi gat or . appVer si on

Returneaz numrul versiunii navigatorului actualizate i versiunea
sistemului de operare. Opera este polimorf.

Exemplu:
<script>
x=navigator.appVersion;
document.write(x);
/* afieaz, de exemplu 4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR
1.0.3705)*/
</script>
br owser Language navi gat or . br owser Language

Returneaz limba navigatorului. Aceast proprietate este recunoscut
numai de Internet Explorer.
Figura 7.43
Figura 7.44

256

Exemplu:
<script>
x=navigator.browserLanguage;
document.write(x);
// afieaz, de exemplu en
</script>
cooki eEnabl ed navi gat or . cooki eEnabl ed

Returneaz true sau false numai dac cookies-urile sunt activate
sau nu n navigator.

Exemplu:
<script>
x=navigator.cookieEnabled;
document.write(x);
// afieaz, de exemplu true
</script>
l anguage navi gat or . l anguage

Returneaz limba navigatorului . Aceast proprietate este recunoscut
numai de Netscape.

Exemplu:
<script>
x=navigator.language;
document.write(x); // afieaz, de exemplu ro
</script>
mi meTypes[ ] navi gat or . mi meTypes[ ]

Vezi obiectul mimeType.
pl at f or m navi gat or . pl at f or m

Returneaz sistemul de operare.

Exemplu:
<script>
x=navigator.platform;
document.write(x);
// afieaz, de exemplu Win32
</script>
pl ugi ns[ ] navi gat or . pl ugi ns[ ]

Matricea pl ugi ns[ ] conine lista tuturor extensiilor instalate n
navigator. Vezi obiectul Pl ugi n.
user Agent navi gat or . user Agent

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

Exemplu:
<script>
x=navigator.userAgent;
document.write(x);
/* afieaz, de exemplu Mozilla /4.0 (compatible; MSIE 6.0; Windows NT 5.1;
.NET CLR 1.0.3705)*/
</script>
vendor navi gat or . vendor
Figura 7.44
(continuare)

257

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

Exemplu:
<script>
x=navigator.vendor;
document.write(x);
// afieaz, de exemplu Netscape 6
</script>

Metodele obiectului Navigator
Metoda J avaEnabl ed( ) a obiectului Navi gat or este prezentat n figura
7.45.
Metod Sintax
J avaEnabl ed( ) navi gat or . J avaEnabl ed( )

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

Exemplu:
<script>
x=navigator.JavaEnabled();
document.write(x);
// afieaz, de exemplu true
</script>

Figura 7.44
(continuare)
Figura 7.45
Aplicaii ale obiectului Navigator
Creai un document (X)HTML simplu care conine un script ce afieaz
proprietile obiectului Navi gat or cu ajutorul instruciunii
document . wr i t e. Afiai proprietile: appCodeName, appName,
appVer si on, user Agent , l anguage, pl at f or m n cele dou
navigatoare Netscape i Internet Explorer.
Indicaie. Folosii o list neordonat.
n figura 7.46 este prezentat documentul XHTML complet n care s-a inserat
script-ul aplicaiei.

258

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

Figura 7.46
Figura 7.47

259

Remarc. Dou elemente rein atenia:
proprietatea navi gat or . l anguage este afiat ca nedefinit (undefined) n
Internet Explorer;
Mozi l l a apare n cmpurile: Nume cod i Agent utilizator.
Scriei un script care afieaz urmtoarea pagin Web (figura 7.49).
Figura 7.48

260

Indicaie. Script-ul afieaz patru butoane n pagina Web. Executnd clic pe
fiecare din cele patru butoane se vor afia proprietile obiectului Navi gat or :
user Agent ; pl at f or m; appName. Folosii gestionarul de evenimente
onCl i ck i metoda al er t ( ) .
<head>
<title>Identificare navigator</title>
function idnavig(){
nav=navigator.userAgent;
alert(nav);
}
function platforma(){
platf=navigator.platform;
alert(platf);
}
nume=navigator.appName;
alert(nume);
}
function numenavig(){
Figura 7.49
Figura 7.50

261
function numereal(){
nav=navigator.userAgent;
if(nav.indexOf("Opera")>-1)
{navig="Opera";}
if(nav.indexOf("Opera")==-1&&nav.indexOf("MSIE 4")>-1)
{navig="Internet Explorer 4";}
if(nav.indexOf("Netscape 6")>-1)
{navig="Netscape 6";}
if(nav.indexOf("Opera")==-1&&nav.indexOf("MSIE")==-1&&nav.indexOf("Netscape 6")==-1)
{navig="Netscape 4";}
alert(navig);
}
</script>
</head>

<body>
<h1>Identificare navigator
</h1>
<hr />
<p>
<input type="button" name="Button" value="Identificare completa navigator"
onClick="idnavig();" />
</p>
<p> <input type="button" name="Submit2" value="Sistem de operare"
onClick="platforma();" />
</p>
<p> <input type="button" name="Submit3" value="Nume oficial navigator"
onClick="numenavig();" />
</p>
<p> <input type="button" name="Submit4" value="Nume real navigator" onClick="numereal();"
/> </p>
</form>
<p><img src="vxhtml10.gif" width="88" height="31" /></p>
<ul>
</ul>
</body>
</html>
n figura 7.51, figura 7.52, figura 7.53, figura 7.54 sunt prezentate rezultatele
afirii paginii Web n navigatorul Internet Explorer.
Figura 7.50
(continuare)

262

Figura 7.51
Figura 7.52

263

Figura 7.53
Figura 7.54
Personalizai script-ul pe care l-ai creat n aplicaia precedent. Utilizai cele
patru funcii numai n script-urile pe care le exploatai.

264
Indicaie. Definii gestionarul de evenimente onLoad n tag-ul <body>dup
cum urmeaz: <body onLoad=i dnavi g( ) >.
Scriei o funcie simpl care s v permit s recunoatei browser-ul Netscape
sau Internet Explorer sau pe nici unul dintre ele.
n figura 7.55 se prezint o soluie a aplicaiei pe care v rugm s o comentai.

Cum procedai pentru a detecta navigatorul i versiunea sa n JavaScript?

Obiectul MimeType
Obiectul Mi meType este un subobiect al obiectului Navi gat or . El v permite
s accesai informaii despre tipurile MIME pe care le recunosc modulele
plug-in. Ca i obiectul Plugin, el nu este recunoscut de Internet Explorer.
Instanele obiectului MimeType sunt accesibile prin intermediul matricii
navigator.mimeTypes[] ale crei elemente reprezint tipurile MIME.
Fia obiectului MimeType este prezentat n figura 7.56.
Fia obiectului MimeType

Subobiectele obiectului Navigator
Figura 7.55

265
Obiectul printe: Navi gat or
Proprieti: descr i pt i on, enabl edPl ugi n, l engt h,
name, suf f i xes, t ype
Metode: -

Obiectul Mi meType este prezentat n detaliu n figura 7.57.
Obiect Sintax
Mi meType navi gat or . mi meTypes[ ]

Face referire la aplicaiile i tipurile de fiiere recunoscute de navigator.

Exemplu:
<script>
for(tip in navigator.mimeTypes){
document.write(tip)
}
</script>

Proprieti e obiectului MimeType l

Proprietile obiectului Mi meType sunt prezentate n detaliu n figura 7.58.
Proprietate Sintax
descr i pt i on navi gat or . Mi meTypes[ ] . descr i pt i on

Descrierea obiectului MimeType.

Exemplu:
<script>
for(i=0; i<navigator.mimeType.length;i++){
tip=navigator.mimeTypes[i].description;
//afiseaza descrierea plug-ins
}
</script>
enabl edPl ugi n navi gat or . Mi meTypes[ ] .
enabl edPl ugi n

Determin dac un plug-in este disponibil. Nu este suficient ca un plug-
in s fie numai instalat; el trebuie s fie i disponibil.

Exemplu:
<script>
tip=navigator.mimeTypes[application/pdf].enablePlugin;
// afieaz [object plugin] dac plugin este disponibil
</script>
l engt h navi gat or . Mi meTypes. l engt h

Numrul de tipuri MIME recunoscute.

Exemplu:
<script>
a=navigator.mimeTypes.length
document.write(a); /*afiseaz, de exemplu 7*/
</script>
Figura 7.56
Figura 7.57
Figura 7.58

266
name navi gat or . Mi meTypes[ ] . name

Numele plug-ins.

Exemplu:
<script>
for(i=0;i<navigator.mimeTypes.length;i++){
tip=navigator.mimeTypes[i].name;
document.write(tip+<br />);
}
</script>
suf f i xes navi gat or . Mi meTypes[ ] . suf f i xes

Extensia de fiier pentru Mimetype.

Exemplu:
<script>
tip=navigator.mimeTypes[i].suffixes;
document.write(tip+<br />); /*afieaz wjp, wpg, */
}
</script>
t ype navi gat or . Mi meTypes[ ] . t ype

Tipul de fiiere recunoscute de plug-ins.

Exemplu:
<script>
tip=navigator.mimeTypes[i].type;
document.write(tip+<br />);
//afieaz, de exemplu image/x-quicktime
}</script>
Aplicaie
Scriei un script care afieaz tipurile MIME recunoscute de navigator.
Indicaie. Folosii o bucl f or - i n.
n figura 7.59 este prezentat script-ul aplicaiei.

Figura 7.59
Figura 7.58
(continuare)

267
Obiectul Plugin
Obiectul Pl ugi n este un subobiect al obiectului Navi gat or . El este creat prin
instalarea de module plug-in pentru browser. Obiectul Pl ugi n conine o matrice
de elemente i tipuri MIME tratate de fiecare modul plug-in.
n figura 7.60 este prezentat fia obiectului Pl ugi n.
Fia obiectului Plugin
Proprieti: descr i pt i on, f i l ename, l engt h, name
Metode: -
Figura 7.60
Remarci:
descr i pt i on face referire la o descriere a modulului plug-in;
f i l ename face referire la numele fiierului unui program plug-in;
l engt h face referire la numrul de tipuri MIME coninute n matrice;
name face referire la numele modulului plug-in.
Aplicaie
Folosii obiectul Plugin cu metoda document.write pentru a afia informaii
despre modulele plug-in instalate.
Manipularea plug-ins cu ajutorul obiectelor
Plug-ins au aprut cu versiunea 3.0 a navigatorului Netscape.
Exist sute de plug-in pentru Internet Explorer i Netscape. Prezentm n
continuare pe cele mai cunoscute:
Macromedia Shockwave i Flash;
Adobe Acrobat;
Real Player;
Beatnik.
Obiectul JavaScript Navi gat or posed un obiect fiu numit Pl ugi ns. Acest
obiect este o matrice, fiecare plug-in instalat n navigator reprezentnd un
element al matricii.

Obiectul Plugins
Obiectul Pl ugi ns face referire la plug-ins instalate n navigator.

268
Instanele obiectului Pl ugi ns sunt accesibile prin matricea
navi gat or . pl ugi ns[ ] ale crei elemente reprezint plug-ins.
Fiecare plug-in este de asemenea inclus n matricea Mi meTypes[ ] .
Remarci:
Nu confundai obiectele Pl ugi n, proprieti ale obiectului Navi gat or , cu obiectele
Embed, proprieti ale obiectului Document . Primele fac parte din Navi gat or n
timp ce urmtoarele sunt incorporate n document cu ajutorul tag-ului <obj ect >
(pentru Internet Explorer) sau <embed>pentru Netscape.
Obiectul Pl ugi ns nu este recunoscut n mod constant de ctre toate versiunile
navigatoarelor. Pe de alt parte, Internet Explorer recunoate plug-ins i ignor obiectele
Plugin.
Fia obiectului Pl ugi ns este prezentat n figura 7.61.
Fia obiectului Plugins
Proprieti: descr i pt i on, f i l ename, l engt h, name
Metode: -
Aplicaie
Generai lista tipurilor MIME recunoscute de ctre navigatorul Internet Explorer.

Figura 7.62
Figura 7.61

Proprieti e obiectului Plugins l
Proprietile obiectului Pl ugi ns sunt prezentate n detaliu n figura 7.63.

269
Proprietate Sintax
descr i pt i on navi gat or . pl ugi ns[ ] . descr i pt i on

Descrierea plug-ins.

Exemplu:
<script>
for(i=0;i<navigator.plugins.length;i++){
plug=navigator.plugins[i].description;
document.write(plug+<br />);
//afieaz descrierea plug-ins
}
</script>
f i l ename navi gat or . pl ugi ns[ ] . f i l ename

Numele i amplasarea fiierelor plug-ins.
<script>
plug=navigator.plugins[i].filename;
//afieaz numele fiierelor de plug-ins
}
</script>
l engt h navi gat or . pl ugi ns. l engt h

Numrul de plug-ins.

Exemplu:
<script>
x=navigator.plugins.length;
document.write(x);
//afieaz, de exemplu 13
</script>
name navi gat or . pl ugi ns[ ] . name

Numele plug-ins.

Exemplu:
<script>
plug=navigator.plugins[i].name;
//afieaz numele plug-ins
}
</script>
Remarc. Obiectului Navi gat or posed de asemenea un alt obiect fiu numit Mi meTypes,
care conine cte un element al matricii pentru fiecare tip MIME.

Figura 7.63

270
Aplicaie
Analizai documentul (X)HTML din figura 7.64. Analizai script-ul inserat i instruciunile
document . wr i t e( ) utilizate. Afiai documentul n navigatorul Netscape 6.

Rezultatele execu iei script-ului (figura 7.65).

Figura 7.64
Figura 7.65

271

Tem

JavaScript
Testai-v cunotinele:
1. Ce este obiectul Document ?
2. Care este coninutul matricii al l [ ] ?
3. Ce conine matricea anchor s[ ] ?
4. Care este coninutul matricii appl et s[ ] ?
5. Care este coninutul matricii f or ms[ ] ?
6. Care este coninutul matricii f r ames[ ] ?
7. Care este coninutul matricii l ayer s[ ] ?
8. Ce semnificaie are proprietatea l ast Modi f i ed?
9. Care este coninutul matricii l i nks[ ] ?
10. Ce este obiectul Locat i on?
11. Ce este MIME?
12. Care este rolul metodelor document . open( ) i document . cl ose( ) ?
13. Care este deosebirea dintre metodele document . wr i t e( ) i
document . wr i t el n( ) ?
14. Ce este obiectul Li nk?
15. Ce este obiectul Layer ?

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

t
t

Conversaia 8

Obiectul Form. Validarea formularelor

Obiectul Form. Aplica ii
(Sub)obiectele Form. Aplica ii
Valida i un formular cu JavaScript. Aplica ii
EXEMPLUL 8 JAVASCRIPT (varian a 1)
EXEMPLUL 8 JAVASCRIPT (varian a 2)
Tem

Obiectul Form
Momentul apariiei formularelor (X)HTML a fost considerat ca decisiv n evoluia
Web-ului.
Formularele, structurate n cmpuri i zone de date sunt ideale pentru a realiza o
interactivitate ntre dumneavoastr i vizitatorii site-ului pe care l-ai creat.
O dat cu apariia limbajului JavaScript puterea formularelor (X)HTML a crescut i
mai mult.
Cu JavaScript putei modifica n mod dinamic coninutul elementelor unui
formular (zon simpl de text, zon de text multilinie, caset de validare etc.).
JavaScript v permite s adugai noi funcii de prelucrare a formularelor
dumneavoastr (X)HTML, att pe partea de client ct i pe partea de server.
n concluzie, crearea unui site Web cu adevrat performant presupune
cunoaterea att a facilitilor formularelor (X)HTML ct i a obiectului For mal

274
Fia obiectului For meste prezentat n figura 8.1.
Fia obiectului Form
Obiectul printe:
Document
Subobiecte: but t on, checkbox, f i l eupl oad, hi dden,
i nput , passwor d, sel ect , opt i on, r adi o,
r eset , t ext , t ext ar ea, submi t
Proprieti:
accept Char set , act i on, el ement s[ ] ,
encodi ng, enct ype, l engt h, met hod, name,
t ar get
Metode:
r eset ( ) , submi t ( ) , t ags( )
Gestionarii de evenimente:
onCont ext Menu, onCont r ol Sel ect , onCopy,
onCut , onDbl Cl i ck, onDeAct i vat e, onDr ag,
onDr agend, onDr agent er , onDr agLeave,
onDr agOver , onDr agSt ar t , onFocusOut ,
onHel p, onKeyDown, onKeyPr ess, onKeyUp,
onMouseDown, onMouseEnt er , onMouseLeave,
onMouseMove, onMouseOut , onMouseOver ,
onMouseUp, onMousewheel , onMove,
onMoveend, onMovest ar t , onPast e,
onPr oper t yChange, onReset , onResi ze,
onResi zeEnd, onResi zeSt ar t ,
onSel ect St ar t , onSubmi t (vezi Conversaia 6).

Relaia dintre obiectul Form i tag-ul <form>
Fiecare formular care aparine unei pagini (X)HTML este reprezentat n JavaScript
printr-un obiect For m, al crui nume este identic cu atributul name al tag-ului
<f or m>.
Aadar, obiectul For m este un obiect JavaScript reprezentat prin perechea de
tag-uri (X)HTML: <f or m>i </ f or m>.
Remarci:
Obiectul Document conine o matrice de obiecte For m care poart numele de
f or ms.
Dup ncrcarea i analiza documentului (X)HTML, aceast matrice (forms) va conine
cte un obiect For m pentru fiecare pereche de tag-uri <f or m> i </ f or m>
prezentat n documentul (X)HTML.
Documentul (X)HTML din figura 8.2 conine trei obiecte For m.
Figura 8.1

275

Deoarece matricea f or ms este o proprietate a obiectului Document putei
referi cele trei obiecte For mdup cum urmeaz (figura 8.3).

Dac nu agreai referinele cu numere (forms[0], forms[1], ...) putei atribui un
nume fiecrui obiect For m(vezi figura 8.4).

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

Figura 8.2
Figura 8.3
Figura 8.4
Figura 8.5

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

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

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

Relaia dintre elementele (obiectele) Form i obiectul Form
Proprietatea cea mai important a obiectului For meste el ement s care
conine un obiect pentru fiecare din elementele formularului. Proprietatea
el ement s poate fi folosit fie pentru referirea unui element (obiect) dintr-un
formular, fie pentru validarea tuturor elementelor dintr-un formular.

277
Aplicaie
Analizai documentul (X)HTML din figura 8.8. Scriei instruciunile JavaScript pentru
accesul la cele trei obiecte (Text ) ale formularului.

Pentru a avea acces la toate cele trei obiecte t ext ale formularului, putem scrie (fr
efort!) urmtorul cod JavaScript (figura 8.9).

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

278

n mod analog, pentru a defini numele dumneavoastr, scriei codul (figura 8.11):

Remarc. Fiecare obiect JavaScript al unui formular conine propriile proprieti i metode care
permit i alte aciuni n afar de citirea i definirea valorilor acestora.

Matricea elements
Este agreabil s poi avea acces la un element (obiect) al formularului direct prin
numele su, dar uneori dorim s prelucrm n mod automat obiectele
formularului. n plus, obiectele nu au tot timpul un nume, sau numele lor nu este
valid pentru o variabil JavaScript. Pentru astfel de situaii, vei putea folosi
matricea el ement s a obiectului For m.
Exist dou variante de acces la elementele matricii:
prin numrul de index;
prin nume.
Iat cum procedm pentru a accesa prin numrul de index, elementele
formularului din figura 8.12.
Varianta 1

Figura 8.10
Figura 8.11
Figura 8.12

279
Remarc. n acest formular am definit trei obiecte Text . Ultimele dou obiecte au un nume care
nu este un nume de variabil JavaScript valid.
n figura 8.13 este prezentat codul surs JavaScript pentru Varianta 1.

Varianta 2
n figura 8.14 este prezentat codul surs JavaScript pentru Varianta 2.

Proprietile obiectului Form
Proprietile obiectului For msunt prezentate n detaliu n figura 8.15.
Proprietate Sintax
accept Char set document . f or m. accept Char set

Setul de caractere acceptat de ctre server-ul care prelucreaz datele.
act i on document . f or m. act i on

Corespunde atributului act i on al tag-ului <f or m>.
el ement s[ ] document . f or m. el ement s[ ]
Figura 8.13
Figura 8.15
Figura 8.14

280

Elementele unui formular (zone de text i butoane). Fiecare element
este o dat a matricii (array) el ement s[ ] . Ele sunt referite prin
numrul de ordine (exemplu: elements[2]) sau prin numele lor
(exemplu: elements[zona1]).
Proprietatea l engt h returneaz numrul de elemente:
f or m. el ement s. l engt h. Un formular poate conine urmtoarele
tipuri de elemente: button, checkbox, fileUpload,
hidden, input, password, select, option, radio,
reset, text, textarea. Fiecrui element i corespunde un
obiect.

Exemplu:

encodi ng document . f or m. encodi ng
Corespunde atributului encodi ng al tag-ului <f or m>.

enct ype document . f or m. enct ype
Corespunde atributului enct ype al tag-ului <f or m>.
l engt h document . f or m. l engt h
Numrul de elemente ale formularului.

met hod document . f or m. met hod
Corespunde atributului met hod al tag-ului <f or m>.

name document . f or m. name

Figura 8.15
(continuare)

281

Corespunde atributului name al tag-ului <f or m>.
t ar get document . f or m. t ar get
Corespunde atributului t ar get al tag-ului <f or m>.

Metodele obiectului Form
Metodele obiectului For msunt prezentate n detaliu n figura 8.16.
Metod Sintax
r eset ( ) document . f or m. r eset ( )

Corespunde aciunii butonului r eset .
submi t ( ) document . f or m. submi t ( )

Corespunde aciunii butonului submi t .
t ags( ) document . f or m. t ags( t ag)

Recupereaz toate elementele introduse cu tag-ul menionat ca
argument.

Subobiectele Form
Figura 8.15
(continuare)
Figura 8.16
Dup cum am precizat n Conversaia anterioar, toate obiectele de nivelul al
treilea, pe parte de client sunt subobiecte ale obiectului For m: But t on,
Checkbox, Fi l eUpl oad, Hi dden, Passwor d, Radi o, Reset ,
Submi t , Sel ect , Text , Text ar ea.
Vom prezenta n continuare, n ordine alfabetic toate subobiectele obiectului
For m.

282
(sub)Obiectul Button
Fia obiectului (subobiectului) Button este prezentat n figura 8.17.
Fia (sub)ob ectului Button
Obiectul printe: For m
Proprieti: al i gn, def aul t Val ue, di sabl ed, f or m,
name, si ze, t ype, val ue
Metode: bl ur ( ) , cl i ck( ) , f ocus( )
Gestionarii de evenimente: onAf t er Updat e, onBef or eUpdat e, onBl ur ,
onCl i ck, onDbl Cl i ck, onFocus, onHel p,
onMouseDown, onMouseMove, onMouseOut ,
onMouseOver , onMouseUp (vezi Conversaia 6).
i
(sub)Obiectul But t on este prezentat n detaliu n figura 8.18.
Obiect Sintax
But t on document . f or ms[ ] . but t on

Reprezint un obiect generic ntr-un formular. Subobiectul But t on este
versiunea transpus n obiect a tag-ului (X)HTML <i nput
t ype=but t on>. A nu se confunda cu butoanele r eset i
submi t . Subobiectul But t on poate fi accesat prin proprietatea
form.elements[] sau prin numele su.
<form name=form1>
<input type=button name=Button1
value=calcul/>
</value>

Exemplu:

Figura 8.17
Figura 8.18

Proprietile (sub)obiectului Button
Proprietile (sub)obiectului But t on sunt prezentate n detaliu n figura 8.19.

283
Metod Sintax
al i gn document . f or ms[ ] . but t on. al i gn

Alinierea butonului. Proprietatea poate conine valorile: l ef t ,
cent er , r i ght .
def aul t Val ue document . f or ms[ ] . but t on.
def aul t Val ue

Valoarea implicit a butonului.
di sabl ed document . f or ms[ ] . but t on. di sabl ed

Valoarea logic (true/false) care indic starea butonului: dezactivat
(true), activat (false).
f or m document . f or ms[ ] . but t on. f or m

Referin la formularul care conine butonul.
name document . f or ms[ ] . but t on. name

Numele butonului. Corespunde atributului name al tag-ului <i nput >.
si ze document . f or ms[ ] . but t on. si ze

Dimensiunea (n pixeli) butonului. Corespunde atributului size al
tag-ului <i nput >.
t ype document . f or ms[ ] . but t on. t ype

Tipul de element n cadrul formularului. n acest caz, proprietatea
returneaz but t on. Corespunde atributului t ype al tag-ului
<i nput >.

val ue document . f or ms[ ] . but t on. val ue

Valoarea butonului. Corespunde atributului val ue al tag-ului
<i nput >.

Metodele obiectului Button
Metodele obiectului But t on sunt prezentate n detaliu n figura 8.20.
Metod Sintax
bl ur ( ) document . f or m. but t on. bl ur ( )

Butonul pierde focus-ul.
cl i ck( ) document . f or m. but t on. cl i ck( )

Simularea clic-ului mouse-ului pe buton. Aceast metod nu este
detectat de onCl i ck.
f ocus( ) document . f or m. but t on. f ocus( )

Butonul preia focus-ul.

Figura 8.20
Figura 8.19

284
(sub)Obiectul Checkbox
Fia (sub)obiectului Checkbox este prezentat n figura 8.21.
Fia (sub)obiectului Checkbox
Proprieti:
al i gn, checked, def aul t Checked,
def aul t Val ue, di sabl ed, f or m, name, si ze,
st at us, t ype, val ue, wi dt h
Metode:
bl ur ( ) , cl i ck( ) , f ocus( )
onAf t er Updat e, onBef or eUpdat e, onBl ur ,
onMouseOver , onMouseUp (vezi Conversaia 6).
Obiectul Checkbox este prezentat n detaliu n figura 8.22.
Obiect Sintax
checkbox document . f or ms[ ] . checkbox

Reprezint o caset de validare n formular. Subobiectul Checkbox
este versiunea transpus n obiect a tag-ului (X)HTML <i nput
t ype=checkbox>. Subobiectul Checkbox poate fi accesat prin
proprietatea f or m. el ement s[ ] sau prin numele su.
Exemplu:
<head>
<script>
function calcule() {
document.calcul.elements[0].value=0;
for(i=0;i<document.calcul.elements.length;i++) {
if(document.calcul.elements[0].value=
parseInt(document.calcul.elements[0].value)
+parseInt(document.calcul.elements[i].value)
}
}
</script>
</head>
<form name=calcul>
TOTAL:<input type=text size=9/> euro <br />;
<input type=checkbox value=2 onClick=calcule()/>Articolul2<br />
</form>
</body>
</html>

Figura 8.21
Figura 8.22

285
Proprietile obiectului Checkbox
Proprietile obiectului Checkbox sunt prezentate n detaliu n figura 8.23.
Proprietate Sintax
al i gn document . f or ms[ ] . checkbox. al i gn

Alinierea casetei de validare. Proprietatea poate conine valorile: left,

center sau right.
checked document . f or ms[ ] . checkbox. checked

Valoare logic (true/false) care indic starea casetei de validare: activat

(true) sau dezactivat (false).
def aul t checked document . f or ms[ ] . checkbox.
def aul t checked

Valoarea implicit a casetei de validare (true sau false).

def aul t Val ue document . f or ms[ ] . checkbox.
def aul t Val ue

Valoarea implicit a casetei de validare.

di sabl ed document . f or ms[ ] . checkbox. di sabl ed

Valoare logic (true/false) care indic starea casetei de validare:

dezactivat (true) sau activat (false).
f or m document . f or ms[ ] . checkbox. f or m

Referin la formularul care conine caseta de validare.

name document . f or ms[ ] . checkbox. name

Numele casetei de validare; corespunde atributului name al tag-ului

<i nput >.
si ze document . f or ms[ ] . checkbox. si ze

Dimensiunea (n pixeli) a casetei de validare. Corespunde atributului si ze al

tag-ului <i nput >.
st at us document . f or ms[ ] . checkbox. st at us

Valoare logic (true/false) care indic starea casetei de validare:

activat (true) sau dezactivat (false).
t ype document . f or ms[ ] . checkbox. t ype

Tipul de element n cadrul formularului. n acest caz, proprietatea returneaz

checkbox. Corespunde atributului t ype al tag-ului <i nput >.
val ue document . f or ms[ ] . checkbox. val ue

Valoarea casetei de validare. Corespunde atributului val ue al tag-ului

<i nput >.
wi dt h document . f or ms[ ] . checkbox. wi dt h

Dimensiunea (n pixeli) casetei de validare.

Metodele (sub)obiectului Checkbox
Figura 8.23

286
Metodele (sub)obiectului Checkbox sunt prezentate n detaliu n figura 8.24.
Metod Sintax
bl ur ( ) document . f or m. checkbox. bl ur ( )

Caseta de validare pierde focus-ul.

cl i ck( ) document . f or m. checkbox. cl i ck( )

Simularea clic-ului mouse-ului pe caseta de validare. Aceast metod nu

este detectat de onCl i ck.
f ocus( ) document . f or m. checkbox. f ocus( )

Caseta de validare preia focus-ul.

(sub)Obiectul FileUpload
Fia (sub)obiectului Fi l eUpl oad este prezentat n figura 8.25.
Fia (sub)obiectului FileUpload
Proprieti: def aul t Val ue, di sabl ed, f or m, name,
si ze, t ype, val ue, wi dt h
Metode: bl ur ( ) , f ocus( ) , sel ect ( )
onChange, onDr agSt ar t , onFocus,
onHel p, onKeyDown, onKeyPr ess,
onKeyUp, onMouseDown, onMouseMove,
onMouseOut , onMouseOver , onMouseUp,
onResi ze, onSel ect , onSel ect St ar t (vezi
Conversaia 6).
Figura 8.24
(sub)Obiectul Fi l eUpl oad este prezentat n detaliu n figura 8.26.
Obiect Sintax
f i l eUpl oad document . f or ms[ ] . f i l eUpl oad

Reprezint o zon de text n care utilizatorul poate introduce numele
unui fiier care urmeaz a fi transmis server-ului. Subobiectul
f i l eUpl oad este versiunea transpus n obiect a tag-ului (X)HTML
<i nput t ype=f i l e>. Subobiectul f i l eUpl oad poate fi
accesat prin proprietatea f or m. el ement s[ ] sau prin numele su.

Figura 8.25
Figura 8.26
Figura 8.26
(continuare)

287
Exemplu: <form name=form >
<input type=file name=fiier1/>
</form>

Proprietile (sub)obiectului FileUpload
Proprietile (sub)obiectului Fi l eUpl oad sunt prezentate n detaliu n figura
8.27.
Proprietate Sintax
def aul t Val ue document . f or ms[ ] . f i l eUpl oad.
def aul t Val ue

Coninutul implicit al zonei.

di sabl ed document . f or ms[ ] . f i l eUpl oad. di sabl ed

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

(true) sau activat (false).
f or m document . f or ms[ ] . f i l eUpl oad. f or m

Referin la formularul care conine zona.

name document . f or ms[ ] . f i l eUpl oad. name

Numele zonei. Corespunde atributului name al tag-ului <i nput >.

si ze document . f or ms[ ] . f i l eUpl oad. si ze

Dimensiunea (n pixeli) zonei. Corespunde atributului size al tag-ului

<i nput >.
t ype document . f or ms[ ] . f i l eUpl oad. t ype

Tipul de element n cadrul formularului. n acest caz proprietatea

returneaz f i l e. Corespunde atributului type al tag-ului <i nput >.
val ue document . f or ms[ ] . f i l eUpl oad. val ue

Coninutul zonei. Corespunde atributului val ue al tag-ului <i nput >.

wi dt h document . f or ms[ ] . f i l eUpl oad. wi dt h

Dimensiunea (n pixeli) casetei de validare.

Figura 8.27

Metodele (sub)obiectului FileUpload

288
Metodele (sub)obiectului Fi l eUpl oad sunt prezentate n detaliu n figura 8.28.
Metod Sintax
bl ur ( ) document . f or m. f i l eUpl oad. bl ur ( )

Zona pierde focus-ul.
f ocus( ) document . f or m. f i l eUpl oad. f ocus( )

Zona preia focus-ul.
sel ect ( ) document . f or m. f i l eUpl oad. sel ect ( )

Selecteaz coninutul zonei.

(sub)Obiectul Hidden
Fia (sub)obiectului Hi dden este prezentat n figura 8.29.
Fia (sub)ob ectului Hidden
Proprieti: def aul t Val ue, di sabl ed, f or m, name,
r eadOnl y, si ze, t ype, val ue
Metode: -
Gestionarii de evenimente: onAf t er Updat e, onBef or eUpdat e, onHel p
(vezi Conversaia 6)
i
(sub)Obiectul Hi dden este prezentat n detaliu n figura 8.30.
Obiect Sintax
hi dden document . f or ms[ ] . hi dden

Reprezint o zon de text ascuns pentru utilizator. Subobiectul
Hi dden este versiunea transpus n obiect a tag-ului (X)HTML
<i nput t ype=hi dden>. Subobiectul Hi dden poate fi accesat
prin proprietatea f or m. el ement s[ ] sau prin numele su.

Exemplu:
<form name=form1>
<input type=hidden name=Ascuns/>
</form>

Figura 8.29
Figura 8.28
Figura 8.30
Proprietile (sub)obiectului Hidden
Proprietile (sub)obiectului Hi dden sunt prezentate n detaliu n figura 8.31.
Proprietate Sintax

289
def aul t Val ue document . f or ms[ ] . hi dden.
def aul t Val ue

di sabl ed document . f or ms[ ] . hi dden. di sabl ed

(true) sau activat (false).
f or m document . f or ms[ ] . hi dden. f or m

name document . f or ms[ ] . hi dden. name

Numele zonei. Corespunde atributului name al tag-ului <i nput >.
r eadOnl y document . f or ms[ ] . hi dden. r eadOnl y

Valoare logic (true/false) care indic starea zonei.
si ze document . f or ms[ ] . hi dden. si ze

Dimensiunea (n pixeli) zonei. Corespunde atributului si ze al tag-ului
<i nput >.
t ype document . f or ms[ ] . hi dden. t ype

Tipul de element n cadrul formularului. n acest caz proprietatea
returneaz t ext .
val ue document . f or ms[ ] . hi dden. val ue

Coninutul zonei. Corespunde atributului val ue al tag-ului <i nput >.

(sub)Obiectul Password
Fia (sub)obiectului Passwor d este prezentat n figura 8.32.
Fia (sub)obiectului Password
Proprieti: def aul t Val ue, di sabl ed, f or m,
maxLengt h, name, r eadOnl y, si ze, t ype,
val ue
Metode: sel ect ( ) , bl ur ( ) , cl i ck( ) , f ocus( )
onChange, onFocus, onHel p, onKeyDown,
onKeyPr ess, onKeyUp, onMouseDown,
onMouseUp, onResi ze, onSel ect ,
onSel ect St ar t (vezi Conversaia 6).
(sub)Obiectul Passwor d este prezentat n detaliu n figura 8.33.
Figura 8.32
Figura 8.31

290
Obiect Sintax
Passwor d document . f or ms[ ] . passwor d

Reprezint un cmp n cadrul unui formular care afieaz asteriscuri
atunci cnd utilizatorul introduce parola. Subobiectul Passwor d este
t ype=passwor d>. Subobiectul Passwor d poate fi accesat prin
proprietatea form.elements[] sau prin numele su.
Exemplu:
<form name=f1>
<input type=password name=Pass />
</form>

Proprietile (sub)obiectului Password
Proprietile (sub)obiectului Passwor d sunt prezentate n detaliu n figura 8.34.
Proprietate Sintax
def aul t Val ue document . f or ms[ ] . passwor d.
def aul t Val ue

di sabl ed document . f or ms[ ] . passwor d. di sabl ed

f or m document . f or ms[ ] . passwor d. f or m

maxLengt h document . f or ms[ ] . passwor d. maxLengt h

Numrul maxim de caractere care pot fi introduse n zon.
name document . f or ms[ ] . passwor d. name

Numele zonei. Proprietatea corespunde atributului name al tag-ului
<i nput >.
r eadOnl y document . f or ms[ ] . passwor d. r eadOnl y

Valoare logic (true/false) dac zona este numai citit (true) sau
nu (false).
si ze document . f or ms[ ] . passwor d. si ze

Dimensiunea (n pixeli) zonei. Corespunde atributului si ze al tag-ului
<i nput >.
t ype document . f or ms[ ] . passwor d. t ype

Tipul elementului n cadrul formularului. n acest caz, proprietatea
returneaz t ext . Aceast proprietate corespunde atributului t ype al
tag-ului <i nput >.
val ue document . f or ms[ ] . passwor d. val ue
Figura 8.34
(continuare)
Figura 8.33
Figura 8.34

291

Coninutul zonei. Proprietatea corespunde atributului value al tag-ului
<input>. val ue. l engt h returneaz numrul de caractere al zonei.

Metodele (sub)obiectului Password
Metodele (sub)obiectului Passwor d sunt prezentate n detaliu n figura 8.35.
Metod Sintax
bl ur ( ) document . f or m. passwor d. bl ur ( )

cl i ck( ) document . f or m. passwor d. cl i ck( )

Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este
detectat prin onCl i ck.
f ocus( ) document . f or m. passwor d. f ocus( )

Zona de text preia focus-ul.
sel ect ( ) document . f or m. passwor d. sel ect ( )


(sub)Obiectul Radio
Fia (sub)obiectului Radi o este prezentat n figura 8.36.
i Fia (sub)ob ectului Radio
Proprieti: al i gn, checked, def aul t Checked,
def aul t Val ue, di sabl ed, f or m, name,
si ze, st at us, t ype, val ue, wi dt h
onCl i ck, onEr r or Updat e,
onFi l t er Change, onFocus, onHel p,
onKeyDown, onKeyPr ess, onKeyUp (vezi
Conversaia 6).
Figura 8.35

Figura 8.36

292
(sub)Obiectul Radi o este prezentat n detaliu n figura 8.37.
Obiect Sintax
r adi o document . f or ms[ ] . r adi o

Reprezint un buton radio ntr-un formular. Subobiectul Radi o permite
utilizatorului s selecteze o singur opiune dintr-un grup de aciuni.
Subobiectul Radi o este versiunea transpus n obiect a tag-ului
(X)HTML <i nput t ype=r adi o>. Subobiectul Radi o poate fi
accesat prin proprietatea f or m. el ement s[ ] sau prin numele su.
<form name=form1>
<input type=radio name=optiune />
</form>

Exemplu:

Proprietile (sub)obiectului Radio
Proprietile (sub)obiectului Radi o sunt prezentat n detaliu n figura 8.38.
Metod Sintax
al i gn document . f or ms[ ] . r adi o. al i gn

Alinierea butonului radio. Proprietatea poate conine valorile: l ef t ,
cent er , r i ght .
checked document . f or ms[ ] . r adi o. checked

Valoare logic (true/false) butonul este activat (true) sau
dezactivat (false).
def aul t Checked document . f or ms[ ] . r adi o.
def aul t Checked

Valoarea implicit a butonului radio (true/false).
def aul t Val ue document . f or ms[ ] . r adi o.
def aul t Val ue

Valoarea implicit a butonului radio.
di sabl ed document . f or ms[ ] . r adi o. di sabl ed

Valoarea logic (true/false) care indic starea butonului: dezactivat
f or m document . f or ms[ ] . r adi o. f or m

Referin la formularul care conine butonul radio.
name document . f or ms[ ] . r adi o. name

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

Figura 8.37
Figura 8.38

293
si ze document . f or ms[ ] . r adi o. si ze

Dimensiunea (n pixeli) butonului radio. Aceast proprietate corespunde
atributului si ze al tag-ului <i nput / >.
st at us document . f or ms[ ] . r adi o. st at us

Valoare logic (true/false) butonul este activat (true) sau nu
(false).
t ype document . f or ms[ ] . r adi o. t ype

returneaz r adi o. Aceast proprietate corespunde atributului t ype al
tag-ului <i nput / >.

val ue document . f or ms[ ] . r adi o. val ue

Valoarea butonului radio. Corespunde atributului val ue al tag-ului
<i nput >.

wi dt h document . f or ms[ ] . r adi o. wi dt h

Mrimea (n pixeli) butonului radio.

Metodele (sub)obiectului Radio
Metodele (sub)obiectului Radi o sunt prezentate n detaliu n figura 8.39.
Metod Sintax
bl ur ( ) document . f or m. r adi o. bl ur ( )

Butonul radio pierde focus-ul.
cl i ck( ) document . f or m. r adi o. cl i ck( )

f ocus( ) document . f or m. r adi o. f ocus( )

Butonul radio preia focus-ul.

Figura 8.38
(continuare)
Figura 8.39

(sub)Obiectul Reset

294
Fia obiectului Reset este prezentat n figura 8.40.
Fia (sub)obiectului Reset
Proprieti: al i gn, def aul t Val ue, di sabl ed, f or m,
name, t ype, val ue
Gestionarii de evenimente: onAf t er Dat e, onBef or eUpdat e, onBl ur ,
onMouseOver , onMouseUp (vezi conversaia 6)
(sub)Obiectul Reset este prezentat n detaliu n figura 8.41.
Obiect Sintax
r eset document . f or ms[ ] . r eset

Reprezint un buton care terge valorile din toate zonele formularului
curent. Subobiectul Reset este versiunea transpus n obiect a
tag-ului (X)HTML <i nput t ype=r eset >. Ca i n cazul butonului
submi t , pentru executarea aciunii nu este necesar cod surs
JavaScript.
<form name=form1>
<input type=reset />
</form>

Exemplu:

Proprietile (sub)obiectului Reset
Proprietile (sub)obiectului Reset sunt prezentate n detaliu n figura 8.42.
Proprietate Sintax
al i gn document . f or ms[ ] . r eset . al i gn

Alinierea butonului. Proprietatea poate conine valoarea: l ef t , cent er
sau r i ght .
def aul t Val ue document . f or ms[ ] . r eset . def aul t Val ue

Valoarea implicit a butonului.
di sabl ed document . f or ms[ ] . r eset . di sabl ed

Valoare logic (true/false) butonul este dezactivat (true) sau
activat (false).
f or m document . f or ms[ ] . r eset . f or m
Figura 8.40
Figura 8.41
Figura 8.42

295

name document . f or ms[ ] . r eset . name

Numele butonului. Aceast proprietate corespunde atributului name al
t ype document . f or ms[ ] . r eset . t ype

returneaz r eset . Aceast proprietate corespunde atributului t ype al
val ue document . f or ms[ ] . r eset . val ue

Valoarea butonului. Aceast proprietate corespunde atributului val ue al

Metodele (sub)obiectului Reset
Metodele (sub)obiectului Reset sunt prezentate n detaliu n figura 8.43.
Metod Sintax
bl ur ( ) document . f or m. r eset . bl ur ( )

cl i ck( ) document . f or m. r eset . cl i ck( )

f ocus( ) document . f or m. r eset . f ocus( )


Figura 8.42
(continuare)
Figura 8.43

(sub)Obiectul Submit

296
Fia (sub)obiectului Submi t este prezentat n figura 8.44.
Fia (sub)ob ectului Submit i
Proprieti: al i gn, di sabl ed, f or m, name, t ype,
val ue
onMouseOver , onMouseUp (vezi conversaia 6).
(sub)Obiectul Submi t este prezentat n detaliu n figura 8.45.
Obiect Sintax
Submi t document . f or ms[ ] . submi t

Reprezint un buton care nainteaz server-ului datele coninute n
formular. Subobiectul submi t este versiunea transpus n obiect a
tag-ului (X)HTML <i nput t ype=submi t >. Subobiectul submi t
poate fi accesat prin proprietatea f or m. el ement s[ ] sau prin
numele su. Pentru executarea aciunii nu este necesar cod surs
JavaScript.

Exemplu:
<form name=form1>
<input type=submit name=init />
</form>

Proprietile (sub)obiectului Submit
Proprietile (sub)obiectului Submi t sunt prezentate n detaliu n figura 8.46.
Proprietate Sintax
al i gn document . f or ms[ ] . submi t . al i gn

Alinierea butonului. Proprietatea poate conine valoarea: left, center
sau right.
di sabl ed document . f or ms[ ] . submi t . di sabl ed

Valoare logic (true/false) butonul este dezactivat (true) sau
activat (false).
f or m document . f or ms[ ] . submi t . f or m

name document . f or ms[ ] . submi t . name
Figura 8.44
Figura 8.46
Figura 8.45

297

Numele butonului. Aceast proprietate corespunde atributului name al
t ype document . f or ms[ ] . submi t . t ype

returneaz submi t . Aceast proprietate corespunde atributului t ype al
val ue document . f or ms[ ] . submi t . val ue

Valoarea butonului. Aceast proprietate corespunde atributului val ue al

Metodele (sub)obiectului Submit
Metodele (sub)obiectului Submi t sunt prezentate n detaliu n figura 8.47.
Metod Sintax
bl ur ( ) document . f or m. submi t . bl ur ( )

cl i ck( ) document . f or m. submi t . cl i ck( )

f ocus( ) document . f or m. submi t . f ocus( )


(sub)Obiectul Select
Fia (sub)obiectului Sel ect este prezentat n figura 8.48.
Fia (sub)obiectului Select
Subobiecte: Opt i on
Proprieti: di sabl ed, f or m, l engt h, mul t i pl e,
name, opt i ons[ ] , sel ect edI ndex, si ze,
t ype, val ue
Metode: add( ) , bl ur ( ) , f ocus( ) , opt i on. add( ) ,
opt i on. r emove( ) , r emove( )
Gestionarii de evenimente: onAf t er Dat e, onBef or eUpdat e, onBl ur ,
onChange, onDr egSt ar t , onFocus,
onHel p, onKeyDown, onKeyPr ess, onKeyUp,
onMouseOver , onMouseUp, onResi ze,
onRowExi t , onSel ect St ar t (vezi conversaia 6)
(sub)Obiectul Sel ect este prezentat n detaliu n figura 8.49.
Figura 8.47
Figura 8.48
Figura 8.46
(continuare)

298
Obiect Sintax
Sel ect document . f or ms[ ] . sel ect

Reprezint o list derulant care afieaz o serie de opiuni ntr-un
formular. Subobiectul Sel ect este versiunea transpus n obiect a
tag-ului (X)HTML <sel ect > . . . </ sel ect >. Subobiectul
Sel ect poate fi accesat prin proprietatea f or m. el ement s[ ] sau
prin numele su.

Exemplu:
<form name=form1>
<select name=optiuni>
<option value=opiune1>Prima opiune</option>
<option value=opiune2>A doua opiune</option>
<option value=opiune3>A treia opiune</option>
</select>
</form>
Figura 8.49

Proprietile (sub)obiectului Select
Proprietile (sub)obiectului Sel ect sunt prezentate n detaliu n figura 8.50.
Proprietate Sintax
di sabl ed document . f or ms[ ] . sel ect . di sabl ed

Valoare logic (true/false) zona este dezactivat (true) sau activat
(false).
f or m document . f or ms[ ] . sel ect . f or m

l engt h document . f or ms[ ] . sel ect . l engt h

Numrul de opiuni din list.
mul t i pl e document . f or ms[ ] . sel ect . mul t i pl e

Valoare logic (true/false) selecia multipl este autorizat (true)
sau nu (false).
name document . f or ms[ ] . sel ect . name

Numele zonei. Aceast proprietate corespunde atributului name al tag-ului
<sel ect / >.
opt i ons[ ] document . f or ms[ ] . sel ect . opt i ons[ ]

Setul de opiuni propuse n list.
sel ect edI ndex document . f or ms[ ] . sel ect . sel ect edI ndex

Valoare care indic rangul opiunii selectate n list. Aceast proprietate
conine valoarea 1 dac nici o opiune nu este selectat.
Si ze document . f or ms[ ] . sel ect . si ze
Figura 8.50

299

Valoare care indic numrul de opiuni vizibile simultan n list.
t ype document . f or ms[ ] . sel ect . t ype

Aceast proprietate conine fie select-one fie selec -multiple. t
val ue document . f or ms[ ] . sel ect . val ue

Valoarea opiunii selectate.

Figura 8.50
( continuare)
Metodele (sub)obiectului Select
Metodele (sub)obiectului Sel ect sunt prezentate n detaliu n figura 8.51.
Metod Sintax
add( ) document . f or m. sel ect . add( Element,
Amonte)

Adaug n list opiunea referit prin argumentul Element i o insereaz
naintea opiunii referite prin argumentul Amonte. Dac argumentul
Amonte este omis, elementul este adugat la finele listei.
bl ur ( ) document . f or m. sel ect . bl ur ( )

f ocus( ) document . f or m. sel ect . f ocus( )

Zona preia focus-ul.
opt i on. add( ) document . f or m. sel ect . opt i on.
add( Element,Amonte)

Adaug n list opiunea referit prin argumentul Element i o insereaz
naintea opiunii referite prin argumentul Amonte. Dac argumentul
Amonte este omis, elementul este adugat la finele listei.
opt i on. r emove( ) document . f or m. sel ect . opt i on. r emove
( Rang)

Elimin din list opiunea al crei rang este indicat n argument.
r emove( ) document . f or m. sel ect . r emove( Rang)

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

(sub)Obiectul Text
Fia (sub)obiectului Text este prezentat n figura 8.52.
Fia (sub)obiectului Text
Figura 8.51

300
Proprieti: def aul t Val ue, di sabl ed, f or m,
maxLengt h, name, r eadOnl y, si ze, t ype,
val ue
Metode: bl ur ( ) , cl i ck( ) , f ocus( ) , sel ect ( )
onCl i ck, onFocus, onHel p, onKeyDown,
onKeyPr ess, onKeyUp, onMouseDown,
onMouseUp, onSel ect (vezi conversaia 6).
(sub)Obiectul Text este prezentat n detaliu n figura 8.53.
Obiect Sintax
Text document . f or ms[ ] . t ext

Reprezint o zon de text format dintr-o singur linie. Subobiectul
Text este versiunea transpus n obiect a tag-ului (X)HTML <i nput
t ype=t ext >. Subobiectul Text poate fi accesat prin proprietatea
form.elements[] sau prin numele su.

Exemplu:
<form name=form1>
<input type=text name=text1 />
</form>

Proprietile (sub)obiectului Text
Proprietile (sub)obiectului Text sunt prezentate n detaliu n figura 8.54.
Proprietate Sintax
def aul t Val ue document . f or m[ ] . t ext . def aul t Val ue

di sabl ed document . f or m[ ] . t ext . di sabl ed

Valoare logic (true/false) zona este dezactivat (true) sau
activat (false).
f or m document . f or m[ ] . t ext . f or m


Figura 8.52
Figura 8.54
Figura 8.53

maxLengt h document . f or m[ ] . t ext . maxLengt h

301

name document . f or m[ ] . t ext . name

Numele zonei. Aceast proprietate corespunde atributului name al
r eadOnl y document . f or m[ ] . t ext . r eadOnl y

Valoare logic (true/false) zona este numai citit (true) sau nu
(false).
si ze document . f or m[ ] . t ext . si ze

Mrimea (n pixeli) zonei. Aceast proprietate corespunde atributului
size al tag-ului <i nput / >.
t ype document . f or m[ ] . t ext . t ype

Tipul elementului n cadrul formularului. n acest caz, proprietatea
returneaz t ext . Aceast proprietate corespunde atributului t ype al
val ue document . f or m[ ] . t ext . val ue

Coninutul zonei. Aceast proprietate corespunde atributului val ue al
tag-ului <i nput / >. val ue. l engt h returneaz numrul de
caractere ale zonei.

Metodele (sub)obiectului Text
Metodele (sub)obiectului Text sunt prezentate n detaliu n figura 8.55.
Metod Sintax
bl ur ( ) document . f or m. t ext . bl ur ( )

cl i ck( ) document . f or m. t ext . cl i ck( )

detectat prin onClick.
f ocus( ) document . f or m. t ext . f ocus( )

sel ect ( ) document . f or m. t ext . sel ect ( )


Figura 8.54
(continuare)
Figura 8.55

(sub)Obiectul Textarea

302
Fia (sub)obiectului Text ar ea este prezentat n figura 8.56.
Fia (sub)obiectului Textarea
Proprieti: col s, def aul t Val ue, di sabl ed, f or m,
maxLengt h, name, r eadOnl y, r ows, si ze,
t ype, val ue, wr ap
Metode: bl ur ( ) , cl i ck( ) , f ocus( ) , sel ect ( )
Gestionarii de evenimente: onAf t er Updat e, onBef or eUnl oad,
onBef or eUpdat e, onBl ur , onChange,
onDr agSt ar t , onEr r or Updat e,
onFi l t er Change, onFocus, onHel p,
onMouseOver , onMouseUp, onRowEnt er ,
onRowExi t , onSel ect , onSel ect St ar t (vezi
conversaia 6).
(sub)obiectul Text ar ea este prezentat n detaliu n figura 8.57.
Obiect Sintax
Text ar ea document . f or m[ ] . t ext ar ea

Reprezint o zon de text multilinie. Subobiectul Text ar ea este
t ype=t ext ar ea>. Subobiectul Text ar ea poate fi accesat prin
proprietatea form.elements[] sau prin numele su.

Exemplu:
<html>
<head>
<title>demo</title>
<script>
function control(f){
lungmax=30;
document.form1.numar.value=f.value.length;
if(f.value.length>lungmax){
f.value=f.value.substring(0,lungmax);
document.form1.numar.value=lungmax;
}
}
</script>
</head>

<body>
<form name=form1>
Figura 8.56
Figura 8.57

303
<input type=text name=numar size=1> caractere<br>
<textarea name=text cols=40 row=5 onKeyUp=control(this)>
</textarea>
</form>
</body>
</html>

Rezultatele execuiei script-ului.

Proprietile (sub)obiectului Textarea
Proprietile (sub)obiectului Text ar ea sunt prezentate n detaliu n figura 8.58.
Proprietate Sintax
col s document . f or ms[ ] . t ext ar ea. col s

Numrul de coloane ale zonei.
def aul t Val ue document . f or ms[ ] . t ext ar ea. def aul t Val ue

di sabl ed document . f or ms[ ] . t ext ar ea. di sabl ed

Valoare logic (true/false) zona este dezactivat (true) sau activat
(false).
f or m document . f or ms[ ] . t ext ar ea. f or m

maxLengt h document . f or ms[ ] . t ext ar ea. maxLengt h

name document . f or ms[ ] . t ext ar ea. name

Numele zonei. Aceast proprietate corespunde atributului name al tag-ului
<i nput / >.
r eadOnl y document . f or ms[ ] . t ext ar ea. r eadOnl y

Valoare logic (true/false) zona este numai citit (true) sau nu
(false).
r ows document . f or ms[ ] . t ext ar ea. r ows

Numrul de linii ale zonei.
Figura 8.58

304
si ze document . f or ms[ ] . t ext ar ea. si ze

Dimensiunea (n pixeli) zonei. Aceast proprietate corespunde atributului
size al tag-ului <i nput / >.
t ype document . f or ms[ ] . t ext ar ea. t ype

Tipul elementului n formular. n acest caz, proprietatea returneaz text.
Aceast proprietate corespunde atributului t ype al tag-ului <i nput / >.
val ue document . f or ms[ ] . t ext ar ea. val ue

Coninutul zonei. Aceast proprietate corespunde atributului value al
tag-ului <i nput / >. val ue. l engt h returneaz numrul de caractere
al zonei.
wr ap document . f or ms[ ] . t ext ar ea. wr ap

Indic modul de gestionare al sfritului de linie. Aceast proprietate poate
conine trei valori: har d (un <CR> este inserat la sfritul fiecrei linii),
sof t (textul trece pe linia urmtoare fr <CR>), none (fr trecere la
linia urmtoare n mod automat).

Figura 8.58
(continuare)
Metodele (sub)obiectului Textarea
Metodele (sub)obiectului Text ar ea sunt prezentate n detaliu n figura 8.59.
Metod Sintax
bl ur ( ) document . f or m. t ext ar ea. bl ur ( )

cl i ck( ) document . f or m. t ext ar ea. cl i ck( )

detectat prin onCl i ck( ) .
f ocus( ) document . f or m. t ext ar ea. f ocus( )

sel ect ( ) document . f or m. t ext ar ea. sel ect ( )


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

305

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

Figura 8.60
Figura 8.61

306

Comentarii:
Figura 8.62
Formularul (calcul) este clasic; el conine o zon de text (pentru TOTAL) i cte o
caset de validare pentru fiecare articol. Bifai un articol! Preul su este adunat la
totalul deja prezent n cmpul TOTAL. Dezactivai un articol! Preul su este sczut din
total.
Zona care afieaz totalul general este un cmp text a crui dimensiune a fost limitat la
10.
Urmeaz definiiile casetelor de validare (checkbox). Valoarea (value) fiecrei casete de
validare reprezint preul articolului: 20, 9.90, 20, 18.30.
Pentru fiecare caset de validare n tag-ul <i nput > s-a definit gestionarul de
evenimente onCl i ck, care execut funcia JavaScript calcule() al crui cod este
definit n seciunea <head> a paginii Web (figura 8.61).
Fiecare element (subobiect) al formularului este identificat prin numrul de ordine:
el ement s[ 0] pentru primul subobiect (total), el ement s[ 1] pentru al doilea
subobiect etc. Sintaxa pentru identificarea unui subobiect (element) precis al
formularului este puin lung, dar logic. De exemplu, elementul (subobiectul) 0 este
situat n formularul cu numele calcul, el nsui situat n documentul curent. Valoarea
0 este atribuit proprietii val ue. n consecin, atunci cnd activez sau dezactivez un
articol, totalul existent este anulat.
Prin intermediul unei bucle f or , poate fi recuperat valoarea fiecrui subarticol
(element) al formularului. Bucla f or execut instruciunile cuprinse ntre cele dou
acolade ({ i }), figura 8.63.

Figura 8.63
Observai cei trei parametrii ai buclei, plasai ntre paranteze:
1. Variabila de control a buclei i este iniializat cu 1. Primul element are rangul 0, dar,
n acest caz el nu trebuie prelucrat de ctre bucla f or ntruct este vorba de cmpul
Total.
2. Testul de ieire din bucl: i<document.calcul.elements.length. Dac
n urma evalurii condiiei rezultatul este FALSE, atunci instruciunile din corpul buclei
nu mai sunt efectuate. Aici testul compar valoarea variabilei i cu numrul de
elemente ale formularului. Putem simplifica testul scriind i<4. Dar, dac se adaug
ori se suprim o caset de validare, trebuie modificat de asemenea i condiia de
test. Este mai uor s utilizm proprietatea length a setului de elemente; ea
returneaz n mod automat numrul de elemente ale formularului.
3. Pasul. El indic modul n care evolueaz variabila de control a buclei la fiecare
trecere. Aici se adaug 1 la valoarea variabilei i (i++).

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

Funcia par seFl oat este obligatorie ntruct valorile checkbox-urilor sunt date de tip
text. Par seFl oat convertete un ir de caractere ntr-o valoare numeric real.
Par seFl oat este indispensabil dac valoarea unui cmp urmeaz s fie utilizat
ntr-o expresie aritmetic.
Simulai funcionarea buclei f or din aplicaia precedent pentru cazul n care articolul
1 a fost bifat (activat), figura 8.65.

Figura 8.64
Figura 8.65
1. Variabila i ia valoarea 1.

t
t
t
t t
2. Proprietatea checked a elementului (subobiectului) 1 al formularului este
testat.
if(document.calcul.elements[1].checked); ea returneaz
valoarea TRUE.
3. Valoarea elementului 1 este adugat la con inu ul cmpului TOTAL.
4. Sfritul buclei simbolizat prin acolada }.
5. Cel de-al treilea parametru al buclei este execu at: i++. Variabila i ia valoarea
2.
6. Testul (al doilea argumen al buclei) buclei este efectuat: i<4. El returneaz
valoarea FALSE. Bucla este execu at nc o da .
Personalizai script-ul din aplicaia precedent. Putei aduga oricte articole dorii,
avnd grij de a preciza valoarea fiecruia dintre ele. Expresia:

308
document . cal cul . el emnt s. l engt h din iniializarea buclei va furniza tot timpul
numrul de elemente fr a mai fi nevoie ca dumneavoastr s mai intervenii. Dac
lucrai numai cu valori ntregi, utilizai funcia par seI nt . nlocuii n acest caz funcia
par seFl oat cu funcia parseInt (figura 8.66).

Scriei un program JavaScript care calculeaz suma primelor n numere naturale.
Indicaie. Introducei valoarea lui n ntr-o zon simpl de text, subobiect al obiectului
For m.
n figura 8.67 este prezentat codul surs (X)HTML complet (vezi script-ul aplicaiei).

Figura 8.66
Figura 8.67
n figura 8.68 este prezentat rezultatul execuiei programului JavaScript pentru 13
numere naturale.

309

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

n figura 8.70 se prezint documentul XHTML.

Figura 8.69
Figura 8.70

310
Remarci:
Pentru a personaliza acest formular, nlocuii webmaster@abc.ro cu propria
dumneavoastr adres de e-mail.
Atributul enct ype=t ext / pl ai n al tag-ului f or m asigur utilizatorul c
informaiile din cadrul mesajului vor fi expediate ntr-o form lizibil. Aceast tehnic
prezint avantajul c permite citirea rapid a datelor care aparin unui formular.
Exist numeroase script-uri i servicii CGI gratuite (vezi http://www.jsworkshop.com/).

Validai un formular cu JavaScript
Validarea formularelor reprezint, fr ndoial aplicaia cea mai preioas a
limbajului JavaScript. Validarea unui formular const n verificarea, cu ajutorul
unui script a corectitudinii informaiilor introduse de ctre utilizator.
Putei utiliza limbajul JavaScript pentru:
validarea datelor introduse de utilizator. Putei valida cmpuri de intrare,
grupuri de cmpuri sau ntregul formular, utiliznd gestionari de
evenimente i funcii JavaScript.
construirea formularelor interactive, n care o parte sau ntreaga
prelucrare are loc pe parte de client.
a testa conformitatea datelor introduse de utilizator cu politicile de
procedur impuse (exemplu de politic de procedur: data de livrare a
unei comenzi nu poate fi n ziua de smbt/duminic a sptmnii).
a testa prezena datelor n cmpurile obligatorii ale unui formular (un
cmp este prezent dac nu este vid).

Aplicaii
Calculai rdcin ptrat dintr-un numr ( x ). Validai datele introduse de utilizator
( ). n caz de eroare (x<0) se va afia mesajul: Rdcin imaginar. 0 x
n figura 8.71 este prezentat codul (X)HTML complet, n care s-a inserat script-ul de
calcul.

311

n figurile 8.72 i 8.73 se prezint rezultatele execuiei programului pentru x=-16 i
pentru x=16.

Figura 8.71
Figura 8.72

312

Figura 8.73
Comentai codul XHTML al aplicaiei.

Scriei un program JavaScript care verific dac coninutul celor trei cmpuri ale unui
formular: nume, prenume, codcard nu este vid. n caz de eroare afiai unul din mesajele
de mai jos:
A i uitat s in oduce i numele dumneavoastr! tr
A i uitat s in oduce i prenumele dumneavoastr! tr
A i uitat s in oduce i numrul dumneavoastr de card! tr
n figura 8.74 se prezint codul complet al documentului HTML.

313

n figura 8.75, figura 8.76 se prezint rezultatele execuiei programului JavaScript.

Figura 8.74
Figura 8.75

314

Remarc. Comentai linia de cod onsubmit=return verif() (vezi tag-ul f or m).

Scriei un script care valideaz adresa de e-mail introdus ntr-o zon de tip text din
cadrul unui formular (figura 8.77).
Dac zona de e-mail este vid se va genera mesajul de eroare: V rog introducei
adresa de e-mail!. Dac din adresa de e-mail lipsesc @ sau punctul (.), atunci adresa de
e-mail va fi considerat incorect. n acest caz, se va genera mesajul de eroare: Adresa
de e-mail este incorec ! V rog, s-o corecta i!. Formularul poart numele de aplicaie.
Acest nume va fi utilizat n cadrul script-ului. De notat c formularul va fi expediat la
adresa e-mail (imaginar) webmaster@abc.ro.
,

t

Figura 8.76
Figura 8.77

315

n figura 8.79, figura 8.80 se prezint cteva exemple de test ale script-ului pe care l-ai
realizat.

Figura 8.78
Figura 8.79

316

Remarci
Dac dorii, putei personaliza script-ul.
Pentru informaii suplimentare privind o validare mai complex a unei adrese e-mail
consultai site-ul: http://developer.netscape.com/library/exemples/javascript/
formval/overview.html.
Simulai funcionarea urmtorului program JavaScript (figura 8.81).

Figura 8.80
Figura 8.81

317

Vom aborda i n cadrul acestei conversaii aceeai problem pe care am abordat-o n
conversaia precedent (EXEMPLUL 7 JAVASCRIPT), cu singura deosebire
(important!) c datele sunt introduse cu ajutorul unui formular (X)HTML, care d un plus
de interactivitate paginilor Web.
Datele care se vor introduce vor fi validate, iar n caz de eroare se vor afia mesaje
corespunztoare. Se vor realiza dou variante:
Varianta 1 Introducerea livrrilor se face ntr-o zon text asociat fiecrei zile
i fiecrui rezervor. Afiarea rezultatelor se face n aceeai
fereastr n zone de text distincte.
Varianta 2 Introducerea livrrilor se face printr-o singur zon de text.
Selecia rezervorului i a zilei se face printr-o list de selectare.
Afiarea rezultatelor se face ntr-o fereastr distinct.

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

318

Descriere. Programul editeaz ntr-o pagin Web situaia livrrilor de benzin
efectuate zilnic din trei rezervoare cilindrice echilaterale (R1, R2, R3). De asemenea
programul afieaz livrrile maxime i minime (valoare, ziua, rezervor). Afiarea tuturor
rezultatelor se realizeaz atunci cnd se execut clic pe butonul Rezul t at e (vezi
figura 8.82).
Livrrile, pe zile (luni, mari, miercuri, joi, vineri) i pe rezervoare (R1, R2, R3) se
introduc ntr-un formular (vezi figura 8.82) de la tastatur.
Intrri. Valorile livrrilor, pe zile, pentru fiecare rezervor (R1, R2, R3). n situaia n
care datele de intrare nu sunt numerice i nu respect intervalul (0, 20) se genereaz
un mesaj de eroare.
Figura 8.82
Figura 8.83

319
Ieiri. Media livrrilor pe zile i pe rezervoare (n cadrul aceluiai formular); livrarea
maxim (valoare, ziua, rezervor); livrarea minim (valoare, ziua, rezervor).
Lista de funciuni ale programului
1. Creare i iniializare matrice livrri.
2. Validare date.
3. Trunchiere valori.
4. Plasare valori valide (ntregi) n
formular.
5. Plasare valoare n matrice livrri.
6. Calculul mediilor livrrilor pe zile i
pe rezervoare.
7. Afiarea rezultatelor.
8. Stop.

Mesaje
Mesaj Descriere
Valoare greit pentru ...! Caractere
invalide.
Valorile introduse nu sunt numerice.
Valoare greit pentru ...! Valoarea trebuie
s fie >0.
Valoarea introdus este negativ.
Valoare greit pentru ...! Valoarea trebuie
s fie <20.
Valoarea introdus este mai mare ca 20.

Tabela de variabile
Variabile de intrare Variabile de stare Variabile de ieire
T11,T12, T13,T21,
T22, T23, T31, T32,
T33, T41, T42, T43,
T51, T52, T53:
Obiecte, zone de
editare text pentru
introducerea valorilor
livrrilor pe fiecare
rezervor, n fiecare zi

st: (real) folosit pentru calculul
sumei livrrilor totale pe zile i
rezervoare
s: (real) folosit pentru calculul
sumelor pariale pe zile
rval: (logic) indic faptul c
valoarea introdus n zona de
editare este valid sau nu
x: (real) valoarea real a
textului introdus n zona de
editare
Z: (vector) numele zilelor
sptmnii
imax,imin,jmax,jmin: numere
ntregi, pstreaz indicii
livrrilor maxime i minime din
matricea a
a: matrice de numere reale,
pstreaz valorile livrrilor
pe zile i rezervoare
M1, M2,M3, M4, M5, M6,
T61, T62, T63, M6, vmax,
zmax, vmin, zmin, rmax,
rmin: Obiecte, zone de text
pentru afiarea rezultatelor
mediilor
b: vector de numere reale,
pstreaz mediile livrrilor
pe zile
d: vector de numere reale,
pe rezervor
max,min: numere reale,
pstreaz valoarea maxim
i minim pentru livrri
Figura 8.85
Figura 8.83
(continuare)
Figura 8.84

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

320
Pseudocodul
EXEMPLUL8 BEGIN
//initializeaza matricea livrarilor
a
i,j
=0.0
FORJ ENDFOR
FORI ENDFOR
//raspunde la evenimentele generate de butonul Rezultate
I F1 IF(se apasa butonul Rezultate)
DO calculeaza
I F1 ENDIF
//raspunde la evenimentele generate de zonele de editare
I F2 IF(se paraseste zona de editare)
DO valideaza(zona_de_editare,0,20)
I F2 ENDIF
EXEMPLUL8 END
TRUNCHI AZA BEGIN
Parametrii:
x- valoare reala
I F3 IF(i-1)
I F3 ENDIF
RETURN s
TRUNCHI AZA END

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

Figura 8.86

321
IF6 ENDIF
IF5 ENDIF
IF4 ENDIF
RETURN rval
VALIDEAZA END

//depune valoarea din zona de editare in matricea livrarilor a
PUNEVAL BEGIN
Date intrare:
x- valoarea ce va fi depusa
s=item.nume
s1=extrage_subsirul(s,1,2)
sir=transforma_in_integer(s1)-1
s1= extrage_subsirul(s,2,3)
ic= transforma_in_integer(s1)-1
a
ir,ic
=transforma_in_real(T1.value)
PUNEVAL END

// calculeaza mediile determina valorile minime si maxime si afiseaza rezultatele
CALCULEAZA BEGIN
s=0
s=s+a
i,j
FORI ENDFOR
b
j
=s/3
FORJ ENDFOR
st=0
FORI1 FOR(i=0;i<3;i++)
s=0
FORJ1 FOR(j=0;j<5;j++)
s=s+a
i,j
st=st+a
ij
FORJ1 ENDFOR
d
i
=s/5
FORI1 ENDFOR
d
3
=s/15
max=a
0,0
min=a
0,0
imax=0
imin=0
jmax=0
jmin=0
FORI2 FOR(i=0;i<3;i++)
FORJ2 FOR(j=0;j<5;j++)
IF7 IF(max<a
i,j
)
max=a
ij
imax=i
jmax=j
Figura 8.86
(continuare)

322
IF7 ENDIF
IF8 IF(min>a
i,j
)
min=a
ij
imin=i
jmin=j
IF8 ENDIF
FORJ2 ENDFOR
FORI2 ENDFOR
imin=imin+1
imax=imax+1
//afisare rezultate
M1.value=trunchiaza(B[0])
T61.value=trunchiaza(D[0])
M6.value=trunchiaza(D[3])
vmax.value=trunchiaza(max)
vmin.value=trunchiaza(min)
rmax.value="R"+imax
rmin.value="R"+imin
zmax.value=Z
jmax
zmin.value=Z
jmin

CALCULEAZA END

Documentul complet (X)HTML, n care s-a inserat script-ul (programul JavaScript) este
prezentat n figura 8.87.
<html>
<head>
<script language="JavaScript">

</SCRIPT>
</head>

<body>

<center><h3>SITUATIA LIVRARILOR DE BENZINA PENTRU REZERVOARELE R1 R2
R3</h3>
<form name = "input_form">
<table Border=1>
<tr><td><b>Ziua</b><td><b>REZERVORUL 1</b><td><b>REZERVORUL 2</b>
<td><b>REZERVORUL 3</b><td> Media</td></tr>
<tr>
<td><b>LUNI:</b></td>
<td><input type="text" name="T11" size="7" onBlur="valideaza(this,0,20);">
<td><input type="text" name="M1" size="7" readonly>

<tr>
<td><b>MARTI:</b>
<tr>
<td><b>MIERCURI:</b>

Figura 8.87
(continuare)

325
<tr>
<td><b>JOI:</b>

<tr>
<td><b>VINERI:</b>
<tr>
<td><b>Media</b>
<td><input type="text" name="T61" size="7" readonly>
</tr>
</table>
<p><input type="button" value="Rezultate" name="B1" onClick="calculeaza();"></p>
</form>
<P>
<P>
<P>
<form name="f1">
<table border=1><tr><td rowspan=3>
Livrarea maxima <td>Valoare:<td><input type="text" name="vmax" size="7" readonly>
<tr>
<td>Ziua:<td><input type="text" name="zmax" size="7" readonly>
<tr>
<td>Rezervorul:<td><input type="text" name="rmax" size="7" readonly>
<tr><td ROWSPAN=3>
Livrarea minima<td>Valoarea:<td><input type="text" name="vmin" size="7" readonly>
<tr>
<td>Ziua:<td><input type="text" name="zmin" size="7" readonly>
<tr>
<td>Rezervorul<td><input type="text" name="rmin" size="7" readonly>
</table>
</body>
</html>
Comentarii:
Script-ul (inserat n seciunea <head> a documentului HTML) conine patru funcii:
trunchiaz(x); puneVal(item, x); validate(item, min, max);
compute().
Pentru calculul mediei mediilor livrrilor s-a utilizat instruciunea de atribuire
D[3]=ST/15
unde:
D este vectorul mediilor livrrilor pe rezervoare iar ST reprezint total livrri.
S-au folosit gestionarii de evenimente onBlur, cu funcia de validare date
validate() pentru obiectele zone de text i onCl i ck cu funcia compute()
pentru butonul de calcul rezultate.
Figura 8.87
(continuare)

326
Vizualizai documentul ntr-un browser (figura 8.88) i testai script-ul.

Figura 8.88
n figura 8.89 se prezint rezultatele execuiei programului JavaScript pentru un set de
date ilustrat n cadrul formularului afiat.

327

Figura 8.89

n figurile 8.90, 8.91, 8.92 i 8.93 sunt prezentate: ecranul pentru introducerea livrrilor
(pe zile i pe rezervoare); ecranul cu Situaia livrrilor de benzin pentru rezervoarele
R1, R2, R3; specificaiile de programare respectiv tabela de variabile.

328

Descriere. Programul editeaz ntr-o pagin Web situaia livrrilor de benzin
efectuate zilnic din trei rezervoare cilindrice echilaterale (R1, R2, R3).
Programul afieaz de asemenea livrrile maxime i minime cu precizarea numrului
rezervorului i a zilei n care s-a efectuat livrarea respectiv. Afiarea tuturor
rezultatelor se face ntr-o fereastr distinct, n momentul n care se execut clic pe
butonul Afieaz (vezi figura 8.90).

Figura 8.90
Figura 8.91
Figura 8.92

329
Livrrile, pe zile (luni, mari, miercuri, joi, vineri) i pe rezervoare (Rezervor1,
Rezervor2, Rezervor3) se introduc printr-o singur zon de text a unui formular (vezi
figura 8.90). Selecia rezervorului i a zilei se face printr-o list de selectare.
Intrri. Valorile livrrilor, pe zile, pentru fiecare rezervor se introduc printr-o singur
zon de text a unui formular. n caz de eroare datele de intrare nu sunt numerice i
nu respect intervalul (0, 20) se genereaz un mesaj de eroare.
La acionarea butonului Livreaz se vor depune livrrile din zona Cantitatea n
matricea a, pe linia i coloana corespunztoare rezervorului i zilei respective (vezi
funcia Livreaz()).
Ieiri. Situaia livrrilor, mediile (pe zile i pe rezervoare) sub form de tabel; livrarea
maxim (valoare, ziua, rezervor); livrarea minim (valoare, ziua, rezervor).
Lista de funciuni ale programului
1. Iniializeaz vectorul z cu numele zilelor sptmnii.
2. Aloc spaiu de memorie i iniializeaz matricea livrrilor.
3. Rspunde la evenimentele generate de butonul Livreaz.
4. Rspunde la evenimentele generate de butonul Afieaz.
5. Rspunde la evenimentele generate de zona de editare T1.
6. Transform n ir de caractere i trunchiaz la dou zecimale.
7. Valideaz valoarea introdus n zona de text.
8. Depune valoarea din zona de editare n matricea livrrilor a.
9. Calculeaz mediile pe zile i pe rezervoare.
10. Determin valorile maxime i minime.
11. Afieaz rezultatele n fereastra RezWindow.
12. Stop.

Tabela de variabile
Rezervor: obiect, list
simpl de selecie
pentru cele trei
rezervoare
Zile: obiect, list
simpl de opiuni
pentru selecia zilei
din sptmn
T1: obiect, zona de
editare n care se va
introduce valoarea
livrrilor

st: (real) folosit pentru calculul
sumei livrrilor totale pe zile i
rezervoare
rval: (logic) indic faptul c
x: (real) valoarea real a textului
sptmnii
imax,imin,jmax,jmin: (numere
ntregi) pstreaz indicii livrrilor
maxime i minime din matricea a
RezWindow: obiect,
fereastra n care se vor
afia rezultatele
b: vector de numere reale,
d: vector de numere reale,
a: matrice de numere
reale, pstreaz valorile
livrrilor pe zile i
rezervoare
max,min: numere reale,
pstreaz valoarea
maxim i minim pentru
livrri
Figura 8.93
Figura 8.92
( continuare)

330
Pseudocodul pentru EXEMPLUL 8 JAVASCRIPT (Varianta 2) este prezentat n figura
8.94.

Pseudocodul

331
EXEMPLUL8 BEGIN
//aloca spatiu de memorie si initializeaza matricea livrarilor
FOR1 FOR(i=0;i<3;i++)
FOR2 FOR(j=0;j<5;j++)
a
i,j
=0.0
FOR2 ENDFOR
FOR1 ENDFOR
Initializeaza RezWindow
//raspunde la evenimentele generate de butonul Livreaza
IF1 IF(se apasa butonul Livreaza)
DO livreaza
IF1 ENDIF
//raspunde la evenimentele generate de butonul Afiseaza
IF2 IF(se apasa butonul Afiseaza)
DO afis
IF2 ENDIF
//raspunde la evenimentele generate de zona de editare T1
IF3 IF(se paraseste zona T1)
DO valideaza(T1,0,20)
IF3 ENDIF
EXEMPLUL8 END

// transforma in sir de caractere si trunchiaza la doua zecimale
TRUNCHIAZA BEGIN
Parametrii:
x- valoare reala
IF4 IF(i-1)
IF4 ENDIF
RETURN s
TRUNCHIAZA END

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

Figura 8.94

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

//depune valoarea din zona de editare in matricea livrarilor a
LIVREAZA BEGIN
ir=indicele elementului selectat in lista Rezervor
ic=indicele elementului selectat in lista Zile
air,ic=transforma_in_real(T1.value)
LIVREAZA END

// calculeaza mediile determina valorile minime si maxime si afiseaza rezultatele
AFIS BEGIN
s=0
s=s+a
i,j
FOR4 ENDFOR
b
j
=s/3
FOR3 ENDFOR
st=0
s=0
s=s+a
i,j
st=st+a
ij
FOR6 ENDFOR
d
i
=s/5
FOR5 ENDFOR
d
3
=s/15
max=a
0,0
min=a
0,0
imax=0
imin=0
jmax=0
jmin=0

Figura 8.94
(continuare)

333
IF8 IF(max<a
i,j
)
max=a
ij
imax=i
jmax=j
IF8 ENDIF
IF9 IF(min>a
i,j
)
min=a
ij
imin=i
jmin=j
IF9 ENDIF
FOR8 ENDFOR
FOR7 ENDFOR
imin=imin+1
imax=imax+1
//afisare rezultate
IF10 IF(RezWindow exista)
nchide RezWindow
IF10 ENDIF
Creaza RezWindow
//scrierea rezultatelor in fereastra RezWindow
RezWindow.WRITE "SITUATIA REZERVOARELOR R1 R2 R3"
RezWindow.WRITE "ZIUA R1 R2 R3 MEDIA"
FOR9 FOR(k=0;k<5;k++)
RezWindow.WRITE Z[k]
RezWindow.WRITE a[j][k]
FOR10 ENDFOR
RezWindow.WRITE trunchiaza( b[k])
FOR9 ENDFOR
RezWindow.WRITE "MEDIA"
RezWindow.WRITE trunchiaza(d[j])
FOR11 ENDFOR
RezWindow.WRITE "Livrarea maxima: " max
RezWindow.WRITE "s-a facut din rezervorul: R" imax
RezWindow.WRITE "in ziua de" Z
jmax
RezWindow.WRITE "Livrarea minima:" min
RezWindow.WRITE " s-a facut din rezervorul: R"imin
RezWindow.WRITE " in ziua de "+Z
jmin
AFIS END

Documentul complet (X)HTML este prezentat n figura 8.95.
<html>
<head>

</script>
</head>
Figura 8.95
(continuare)

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>
</select>
<td>
<select size="1" name="Zile">
<option>Luni</option>
<option>Marti</option>
<option>Miercuri</option>
<option>Joi</option>
<option>Vineri</option>
</select>
<tr>
<td>Cantitatea
<td><input type="text" name="T1" size="7" value="0.0" onChange="validate(this,0,20);">
<tr>
<td><input type="button" value="Livreaza" onClick="trimite();">
<td><input type="button" value="Afiseaza" onClick="afis();">
</table>
</center>
</form>
</body>
</html>
Comentarii:
Script-ul (inserat n seciunea <head>a documentului XHTML) conine patru funcii:
trunchiaz(x); ivalidate(item, min, max); livreaz();
afi().
Formularul conine subobiectele: Sel ect i Opt i on; Text ; butoanele Livreaz
i Afieaz.
Validarea datelor de intrare introduse n zona de text se realizeaz cu gestionarul de
evenimente onBl ur (vezi funcia valideaz()).
Depunerea livrrilor din zona de editare (subobiectul Text) n matricea livrrilor se
realizeaz cu gestionarul de evenimente onCl i ck (vezi funcia Livreaz()).
Afiarea rezultatelor se realizeaz cu gestionarul de evenimente onCl i ck (vezi funcia
afis()). Prin acionarea butonului Afieaz se deschide o nou fereastr care va
afia: situaia livrrilor; mediile livrrilor pe zile i rezervoare; livrrile maxime i minime.
Pentru crearea unei ferestre, am utilizat metoda window.open() (figura 8.96).

Figura 8.96
Figura 8.95
(continuare)

337
Pentru crearea listei de selectare a rezervoarelor i a zilelor sptmnii am utilizat
subobiectele For m: Sel ect i Opt i on (vezi figura 8.97).

Subobiectul Sel ect este versiunea transpus n obiect a tag-ului (X)HTML
<sel ect > . . . </ sel ect >. Subobiectul Sel ect este unul dintre cele mai utile i
mai flexibile subobiecte ale obiectului Form. Subobiectul Sel ect permite crearea
urmtoarelor tipuri de liste:
list de selectare (o list de opiuni n care utilizatorul poate selecta un singur
element. Pentru a v asigura c lista afieaz o singur linie la un moment dat
atribuii proprietii size valoarea 1 sau nu-l folosii deloc).
list derulant (o list care afieaz la un moment dat un anumit numr de elemente.
Ea include bare de derulare. Pentru a defini o list derulant atribuii lui si ze o
valoare mai mare ca 1).
list derulant cu selectri multiple (din acest tip de obiect Sel ect , putei selecta
unul sau mai multe elemente. Pentru a defini o list derulant cu selectri multiple,
adugai proprietatea multiple la definirea obiectului Sel ect ).
Subobiectul Opt i on este versiunea transpus n obiect a tag-ului (X)HTML
<opt i on> . . . </ opt i on>.
Vizualizai documentul ntr-un browser (figura 8.98) i testai script-ul.

Figura 8.97
Figura 8.98
n figura 8.99 se prezint rezultatele execuiei programului JavaScript pentru un set de
date afiat.

338

Aplicaie
Scriei un program JavaScript pentru afiarea datelor coninute n formularul din figura
8.100, ntr-o nou fereastr. Personalizai script-ul.

Figura 8.99
Figura 8.100

339
n figura 8.101 se prezint documentul complet XHTML, n care s-a inserat script-ul
aplicaiei.

Figura 8.101
n figura 8.102 este prezentat rezultatul execuiei script-ului.

Figura 8.102

340
Testai script-ul (figura 8.103) executnd clic pe butonul Afiai.

Remarc. Informaiile din cadrul formularului sunt afiate ntr-o nou fereastr (figura 8.103).

Tem

Testai-v cunotinele
1. Care din atributele tag-ului <f or m> determin locul unde vor fi expediate
datele?
act i on;
met hod;
name.
2. Care sunt subobiectele obiectului For m?
3. Care sunt proprietile obiectului For m?
4. Care sunt metodele obiectului For m?
5. Care sunt gestionarii de evenimente ai obiectului For m?
6. Care este relaia dintre obiectul Form i tag-ul <f or m>?
7. Care este relaia dintre subobiectele unui formular i obiectul For m?
8. Care este sintaxa subobiectelor: Text ; Text ar ea; Submi t ;
Checkbox; Radi o; Sel ect ?
9. Care sunt proprietile subobiectului Sel ect ?
10. Care sunt metodele subobiectelor: Text ; Text ar ea; Submi t ; Reset ;
But t on; Checkbox; Sel ect ; Fi l eupl oad; Opt i on?

JavaScript
Figura 8.103

341
11. Care sunt gestionarii de evenimente au subobiectelor: Reset ; Opt i on;
Checkbox.
12. Cum putei utiliza limbajul JavaScript pentru validarea unui formular?
13. Scriei un program JavaScript care calculeaz i afieaz produsul primelor n
numere naturale. Utilizai un formular (X)HTML.
14. Scriei un program JavaScript care afieaz un numr, intervalul [0, 9] n
cuvinte. Utilizai un formular (X)HTML.
15. Scriei un program JavaScript care genereaz seria Ulam. Utilizai un formular
XHTML.
Indicaie. Seria Ulam se genereaz dup cum urmeaz: se pornete de la un numr
ntreg pozitiv(n) i se ajunge la 1 pe dou ci:
dac numrul este par, noul numr se obine ca rezultat al mpririi cu 2.
(exemplu: 8, 4, 2, 1).
dac numrul este impar, noul numr se obine cu formula: 3*n+1 (exemplu:
5, 16, 8, 4, 2, 1).
16. Simulai funcionarea urmtoarelor script-uri (vezi figura 8.104 i figura 8.105).

Figura 8.104

342

17. nlocuii liniile de cod (vezi figura 8.104).
onClick="document.form1.text1.Focus()"
prin:
onClick="document.form1.text1.blur()"
Precizai rezultatele execuiei noului script.

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

r

Conversaia 9

Obiectul Image

Obiectul Image. Aplica ii
Crea i un rollover cu JavaScript
Crea i un joc cu JavaSc ipt
Crea i anima ii simple cu JavaScript
Crea i imagini reactive (client) cu JavaScript. Aplica ii
Tem

Obiectul Image
Ca urmare a popularitii lor, imaginile au ptruns n aproape toate domeniile
navigrii pe Web. De exemplu, n numeroase site-uri Web, butoanele (X)HTML au
fost nlocuite prin imagini clicabile (rollovere) care se transform atunci cnd
trecei mouse-ul pe deasupra acestora. Cu siguran c apreciai aceste
interesante efecte grafice dar ignorai poate faptul c puterea acestora se afl n
limbajul JavaScript.
n consecin, crearea unui site Web cu adevrat puternic presupune
cunoaterea facilitilor imaginilor (X)HTML i a obiectului Image al limbajului
JavaScript.
Fia obiectului I mage este prezentat n figura 9.1.

344
Fia obiectului Image
Obiectul printe
Document
Cum se creeaz obiectul?
Constructorul Image()
Proprieti:
border, complete, height, width, hspace,
vspace, name, src, lowsrc
Metode: Obiectul Image nu posed nici o metod dar putei
modifica proprietile imaginilor n mod dinamic.
onAbort, onError, onKeyDown, onKeyPress,
onKeyUp, onLoad, onClick, onDblClick,
onMouseDown, onMouseOut, onMouseOver (vezi
Conversaia 6).

Figura 9.1
Relaia dintre obiectul Image i tag-ul <img>
Manipularea imaginilor din cadrul unui document (X)HTML depinde n mare
msur de obiectul Image al limbajului JavaScript. n cursul ncrcrii
documentului (X)HTML n navigatorul Web, interpretorul JavaScript creeaz un
obiect Image pentru fiecare tag <img> prezent n document. El plaseaz toate
obiectele Image ntr-o matrice images (subobiect al obiectului Document).
n loc s utilizai matricea images, putei specifica pentru fiecare tag <img> un
atribut name=, care va da un acces direct obiectelor Image.
Iat cum procedm pentru a accesa obiectul Image asociat tag-ului <img> din
figura 9.2, care reprezint prima imagine a unui document (X)HTML.

<img src=sigla.jpg name=LUMINABLANDA />

Obiectul Image poate fi accesat cu una din instruciunile prezentate mai jos:
document.images[0];
document.LUMINABLANDA.
Remarc. Dac dintr-un motiv sau altul nu ai putut da imaginilor dumneavoastr un nume valid
de variabil JavaScript, atunci accesul prin nume rmne posibil numai prin intermediul matricei
images, ca i n cazul matricei elements din obiectul Form. De exemplu, definiia imaginii:
<img name=PLOIESTI VEST src=gara.jpg /> este accesibil prin
utilizarea matricei images, dup cum urmeaz: var
gara=document.images[PLOIESTI VEST].
Constructorul Image()
Figura 9.2

345
Interpretorul JavaScript creeaz un obiect Image pentru fiecare tag <img> pe
care l ntlnete ntr-un document (X)HTML, dar atenie, chiar i
dumneavoastr l putei crea fr asocierea unui tag <img>, utiliznd
constructorul de obiecte Image() (vezi figura 9.3).

var imagine1=new Image();
Remarci
Instruciunea JavaScript din figura 9.3 genereaz un obiect Image fr a mai fi nevoie
de un tag <img>.
Putei ncrca un fiier imagine n obiectul Image atribuind n mod simplu o adres Web
proprietii src (figura 9.4).
...
imagine1.src=sigla.jpg

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

Iat cum folosim imagini fr a utiliza tag-ul <img> (vezi figura 9.5).
<img src=moara.jpg name=MOULINROUGE />
document.MOULINROUGE.src=MOARACUNOROC.src;

Imaginea coninut n document.MOULINROUGE va fi nlocuit prin imaginea
coninut n MOARACUNOROC. n plus, ntruct document.MOULINROUGE
este asociat unui tag <img> noua imagine va fi afiat n locul precedentei
imagini.

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

border document.images[].border

Corespunde atributului border al tag-ului <img>.

complete document.images[].complete

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

height document.images[].height

Corespunde atributului height al tag-ului <img>.
Figura 9.6
Figura 9.5
Figura 9.3
Figura 9.4

346

width document.images[].width

Corespunde atributului width al tag-ului <img>.

hspace document.images[].hspace

Corespunde atributului hspace al tag-ului <img>.

vspace document.images[].vspace

Corespunde atributului vspace al tag-ului <img>.

name document.images[].name

Corespunde atributului name al tag-ului <img>.

src document.images[].src

Corespunde atributului src al tag-ului <img>.

lowsrc document.images[].lowsrc

Corespunde atributului lowsrc al tag-ului <img>.

Aplicaii
Precizai rezultatul execuiei urmtorului program JavaScript (figura 9.7).

Figura 9.7
Figura 9.6
(continuare)
n figura 9.8 este prezentat rezultatul execuiei programului JavaScript, pe care v rugm
s-l comentai.

347

Comentai urmtorul program JavaScript (figura 9.9).

Figura 9.8
Figura 9.9
Scriei un program JavaScript care afieaz proprietile unui obiect Image.

348

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

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

349
Exist la nceput 10 bee de chibrit i doi juctori. Cnd i vine rndul, un juctor poate
ridica un b, cel mult dou! Va pierde (!) acel juctor care rmne cu ultimul b de
chibrit.
Ceea ce se cere este s realizai un program JavaScript pentru jocul ZECE BEE DE
CHIBRIT avndu-i ca juctori pe dumneavoastr i Mria sa calculatorul!

n figurile 9.11 i 9.12 sunt prezentate: ecranul cu 10 bee de chibrit, specificaiile de
programare. Tabela de variabile, mesajele generate n timpul jocului sunt prezentate n
figurile 9.13, respectiv 9.14.

Descriere. Programul afieaz zece bee de chibrit (1-10) i un buton Joc Nou care
permite reluarea jocului.
Lista de funcii ale programului
1. Permite juctorului s extrag
unu/dou bee.
2. Stabilete strategia de joc a
calculatorului.
3. Actualizeaz numrul de bee rmase.
4. Stabilete ctigtorul (n final).
5. Permite reluarea jocului.
6. Stop.

Figura 9.11
Figura 9.12

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

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

Pseudocodul este prezentat n figura 9.15.
Pseudocodul
10Betechibrit BEGIN
//formeaza pagina html cu imaginile chibritului
bete=10
//Trateaza evenimentele generate
IF1 IF(se apasa butonul Joc Nou)
DO actualizare
IF1 ENDIF
IF2 IF(se executa click pe imagine chibrit)
DO alegeChibrit(numar_bat_chibrit)
IF2 ENDIF
10betechibrit END

ACTUALIZARE BEGIN
FOR1 bete=10
FOR(i=1;i<=bete;i++)
nsrc=chibrit+i
imagine_nsrc.src=chibrit.gif
FOR1 ENDFOR
ACTUALIZARE END

AlegeChibrit BEGIN
Date intrare: x-numarul batului de chibrit extras
//se verifica daca extragerea batului a fost
//din pozitia corecta

Figura 9.14
Figura 9.15
Figura 9.13

351
IF3 IF(x<=bete) AND (bete-x)<2
//se sterge imaginea betelor de chibrit extrase
FOR2 FOR(i=x;i<=bete;i++)
inlocuieste imaginea chibrit.jpg prin gol.jpg
FOR2 ENDFOR
//se actualizeaza numarul de bete ramase
bete=x-1;
//verifica numarul de bete ramase si
//stabileste castigatorul daca este cazul
IF4 IF(bete<=0)
WRITE "Jocul s-a terminat! Ai pierdut!"
IF4 ELSE
IF5 IF(bete==1)
//inlocuie imaginea primului bat de chibrit
chibrit1.src=gol.gif
bete=0
WRITE "Jocul s-a terminat!Ai Castigat!"
IF5 ELSE
WRITE "Calculatorul zice:\n Acum e randul meu");
//inteligenta calculatorului este aleatoare
rand=genereaza_numar_aleator
IF6 IF(rand<0.5)
x=bete
IF6 ELSE
x=bete-1
IF6 ENDIF
FOR3 FOR(i=x;i<=bete;i++)
nsrc='chibrit'+i
imaginea_nsrc.src="gol.gif"
FOR3 ENDFOR
bete=x-1
IF7 IF(bete==0)
WRITE "Jocul s-a terminat! Ai pierdut!"
IF7 ELSE
WRITE " Acum e randul tau!"
IF7 ENDIF
IF5 ENDIF
IF4 ENDIF
IF3 ENDIF
Alegechibrit END

<html>
<head>
<title>10 Bete de chibrit</title>

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

Figura 9.16
continuare) (

353
<td>
<td>
<td>
<td>
<td>
<td>
<td>
<td>
</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>
</body>
</html>
Figura 9.16
continuare) (
Remarci
Script-ul (inserat n seciunea <head> a documentului HTML) conine dou funcii:
AlegeChibrit(x) i actualizare().
Funcia AlegeChibrit(x) permite juctorului s extrag unul sau dou bee;
stabilete strategia de joc a calculatorului; actualizeaz numrul de bee rmase,
stabilete ctigtorul. Argumentul x ia valori de la 1 la 10.
Funcia actualizare() permite reluarea jocului la acionarea butonului Joc Nou.
Gestionarii de evenimente utilizai sunt: onMouseDown i onClick (tag-ul
<input />).
n figura 9.17, 9.18, 9.19 sunt prezentate secvene din timpul jocului.

354

Figura 9.17
Figura 9.18

355

Figura 9.19

Creai un rollover cu JavaScript
Una din aplicaiile JavaScript de mare succes n domeniul imaginilor o constituie
crearea de rollovers (survols, n limba francez; rollovers, n limba
englez).
Un rollover este o imagine folosit n general pentru navigare al crui
aspect se modific atunci cnd se trece cu mouse-ul pe deasupra acesteia.
Remarci
Un rollover este o metod asociat unui eveniment de mouse: mouseOver,
mouseOut, mouseDown, mouseUp.
Exist mai multe tipuri de metode rollover:
metoda rollover pentru imagine;
metoda rollover strat (layer).
Va trebui s decidei singuri: ce tip de metod rollover necesit aplicaia
dumneavoastr i cum dorii s-o implementai.
Iat cum crem un buton IMAG1 care se afieaz normal la ncrcarea paginii i
se schimb n IMAG2 la trecerea mouse-ului pe deasupra acestuia.
1. Introducei ntre tag-urile <head> i </head> ale documentului
HTML, script-ul de prencrcare al imaginii (imag2.gif) utilizat n
rollover (figura 9.20).

356

2. Stabilii o legtur (link) ctre o imagine (figura 9.21).

3. Introducei (n tag-ul <a>) gestionarii de evenimente onMouseOver i
onMouseOut (figura 9.22).

4. Testai script-ul (figura 9.23, figura 9.24).

Figura 9.20
Figura 9.21
Figura 9.22
Figura 9.23

357

Remarci
Nu v lsai impresionai de dimensiunea codului JavaScript, deoarece este foarte
simplu!
Am definit im1 ca fiind un nou obiect Image cruia i atribuim calea imag2.gif.
La trecerea mouse-ului peste butonul IMAG1, proprietatea src a imaginii ce poart
numele img1 devine imag2.gif, care provoac efectul de rollover.
Dac dorii s aplicai un rollover peste mai multe imagini prezentate ntr-o pagin,
va trebui:
S adugai noi linii de prencrcare
im2=new Image;
im2.src=imag3.gif;
S schimbai numele imaginii respective:
<img src=imag1.gif border=0 name=img2>.

Aplicaii
Creai acelai rollover utiliznd matricea images.
n figura 9.25 este prezentat documentul HTML complet.

Figura 9.24
Figura 9.25
Rezultatele execuiei sunt prezentate n figura 9.26, respectiv figura 9.27.

358

Remarci
Exist i alte tehnici de a modifica imaginile, dup cum urmeaz:
afiarea unei borduri n jurul fiecrei imagini;
afiarea unei imagini n miniatur (de exemplu, o sgeat mic) alturi de imaginea
propriu-zis, unde se gsete pointer-ul mouse-ului.
Exist mai multe soluii de implementare a metodelor rollover pentru imagini, dar
cea mai simpl este urmtoarea:
creai matricea care s conin imagini;
prencrcai imaginile n matrice;
creai o funcie care s realizeze schimbarea imaginilor;
introducei gestionarii de evenimente onMouseOver i onMouseOut.
Scriei o funcie pentru a verifica dac o imagine este complet ncrcat.

Figura 9.26
Figura 9.27
Figura 9.28
Comentai urmtorul program JavaScript (figura 9.29).

359

n figura 9.30, respectiv figura 9.31 sunt prezentate rezultatele execuiei programului
JavaScript.

Figura 9.29
Figura 9.30
Figura 9.31

360

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

Figura 9.32
Documentul complet XHTML este prezentat n figura 9.33.

361

Remarci
Funcia carte(nume,numr) conine dou argumente: numele fiierului utilizat
(nume) i numrul imaginii (numr).
Pentru ca proporia imaginilor s fie respectat este necesar ca ele s aib aceleai
dimensiuni.
Afiarea imaginii (prima copert) se produce atunci cnd deplasai mouse-ul pe linia
unde se gsete numele crii i nu doar pe numele afiat al crii. Putei evita acest
lucru, modificnd puin codul JavaScript. Succes!

Figura 9.33
n figura 9.34 se prezint un document (X)HTML care ilustreaz tehnica
rollovers-urilor.

362

Figura 9.34
Figura 9.35
Atunci cnd se ncarc acest document se obine imaginea din figura 9.35.

n momentul n care plimbai mouse-ul (fr a executa clic) pe una din cele trei imagini
(figura 9.35) obinei ceea ce este ilustrat n figura 9.36.

363

Analizai documentul XHTML i rspundei la urmtoarele ntrebri:
Ce semnific notaia this.id?
Care este rolul gestionarilor de evenimente:
onClick=location=ldXHTML.htm
onClick=location=ldDREAMWEAVER.htm
onClick=location=ldXML.htm
Care sunt deficienele acestui document. Precizai cel puin dou!

Figura 9.36
Chiar dac rollover-ul este aplicaia cea mai folosit a imaginilor dinamice,
JavaScript poate fi de asemenea utilizat i pentru crearea animaiilor simple.
Pentru animaii mai complexe va trebui ns s folosii Java sau un soft dedicat,
ca de exemplu, Macromedia Flash.
Pentru a crea o animaie simpl cu JavaScript [3] se recomand parcurgerea
urmtoarelor etape:
salvai cadrele de animaie ntr-o matrice;
prencrcai imaginile (cadrele de animaie);

Creai animaii simple cu JavaScript

364
stabilii viteza de derulare a animaiei.
Pentru mai multe detalii privind crearea animaiilor simple JavaScript, consultai:
Michael Moncur, JavaScript 1.5 Nouvelle edition, Campus Press, 2003, pag.
227-234
Michael Dreyfus, Codes en Stock JavaScript, Ed. Campus Press, 2001
Micro Application, JavaScript Professionel, Paris, 2001
David Flanagan, JavaScript, La rfrence 4
dition, Ed. OReilly, 2002

Jean-Christophe Gigniac, Cdric Nilly, JavaScript, Micro Application 2002, Paris,
pag. 250 260
http://JavaScript.Internet.com/scrolls/animated-message.html
http://www.wsabstract.com/cutplastejava.shtml
http://hotvired.lycos.com/webmonkey/reference/ JavaScript_code_library
http://webopedia.Internet.com/TERM/J/JavaScript.html
http://Javascript.internet.com/message/animated-tooltip.html
http://Javascript.internet.com/page-details/delayed-gif.html

Imaginile reactive (imagemaps, n limba englez) reprezint un mijloc practic de
simplificare a navigrii ntr-un site Web.
Exist dou tipuri de imagini reactive: client i server.
Zonele (cu un anume contur geometric) unei imagini reactive client se definesc
direct n codul (X)HTML, fiecare dintre acestea jucnd rolul unui link. n
consecin, acest tip de imagine map poate fi combinat cu JavaScript. n cazul
unei imagini reactive server, zonele sunt definite ntr-un fiier dedicat care se afl
pe server.
Crearea unei imagini reactive (client) necesit urmtoarele resurse:
o imagine n format GIF sau JPEG;
un fiier (MAP) care conine zonele imaginii;
atributul USEMAP.
Remarci
Navigatoarele recente nu afieaz descrierea unei imagini reactive n bara de stare,
atunci cnd atributul href figureaz n link-uri. Dac utilizai imagini reactive ca link-uri,
putei folosi gestionarul de evenimente onClick cu location.href.

Creai imagini reactive (client) cu JavaScript

365
Pentru a descrie fiecare zon a imaginii reactive va trebui s cunoatei coordonatele
punctelor care le delimiteaz. Exist numeroase programe, printre care: MapEdit sau
LiveImage.
Zonele imaginii reactive sunt definite cu tag-urile (X)HTML: <map> i <area>.
Iat cum procedm pentru a crea cu limbajul JavaScript o imagine reactiv client,
pornind de la imaginea follow.jpg. n momentul n care plasai mouse-ul
deasupra zonei reactive de form dreptunghiular decupate n imaginea
follow.jpg, n bara de stare se va afia mesajul: ZIUA N CARE VIN
PETII.
1. Inserai imaginea follow.jpg.
2. Introducei n tag-ul <img> atributul usemap=#?, nlocuind semnul
de ntrebare (?) cu numele (JOHNSON) pe care dorii s-l atribuii
imaginii map (figura 9.37).

3. Introducei tag-ul <map name=?>, nlocuind semnul de ntrebare
(?) cu numele pe care l-ai atribuit imaginii map (figura 9.38).

4. Introducei, n tag-ul <area> atributele shape, target i
coords (figura 9.39).

Figura 9.37
Figura 9.38
Figura 9.39
5. Introducei n tag-ul <area> gestionarul de evenimente asociat
onMouseOver care afieaz n bara de stare mesajul: ZIUA N CARE
VIN PETII.

366

6. Introducei tag-ul final </map> (figura 9.41).

7. Validai documentul HTML 4 strict cu aplicaia validator.
8. Inserai codul HTML care afieaz icon-ul de conformitate W3C.

Figura 9.40
Figura 9.41
Figura 9.42

367

Vom relua n cadrul acestui exemplu problema rezervoarelor (cilindrice echilaterale),
invitndu-v n cele ce urmeaz s utilizai imagini reactive client pentru generarea
raportului Situaia livrrilor. Zonele reactive (client) se refer la cele trei
rezervoare (figura 9.43).

Figura 9.43
V-am pregtit i o surpriz!
De aceast dat v vom lsa dumneavoastr plcerea de a realiza singuri documentaia
de analiz i proiectare a programului JavaScript corespunztoare acestui exemplu.
Succes!

Codificarea n limbajul JavaScript (figura 9.44)

368
<html>
<head>

</script>
</head>
<body>
<center>
<form name="f1"><table border=0>
</select>
<td>
</select>
<tr>
<td>Cantitatea
<tr>
</table>
</center>
</form>
<center>
<h3>
Situatia Livrarilor
</h3>
<map name="rezervorMap">
<area name="R1" coords="16,18,91,125" href="javascript:afispartial(0)"
onMouseOver="window.status='Rezervorul R1';return true"
onMouseOut="window.status=' ';return true">
onMouseOver="self.status='Rezervorul R2';return true"
onMouseOut="self.status='';return true">
Figura 9.44
(continuare)

371
onMouseOut="window.status='';return true">
</map>
<img src="rezervoare.jpg" align="top" usemap="#rezervorMap">
</body>
</html>
Remarci
Script-ul (inserat n seciunea <head> a documentului (X)HTML) conine funciile
cunoscute din exemplele anterioare.
Pentru crearea celor trei imagini reactive, corespunztoare rezervoarelor R1, R2, R3 s-a
folosit imaginea rezervoare.jpg; zonele imaginilor reactive (R1, R2, R3) au fost
definite cu tag-urile (X)HTML <map> i <area>. n toate cele trei tag-uri <area> au
fost definite atributele: name, coords, href i gestionarii de evenimente
onMouseOver i onMouseOut.
Tag-ul <img> conine n mod obligatoriu usemap=#rezervorMap.
n continuare, v invitm s testai script-ul, plasnd mouse-ul i executnd clic deasupra
fiecrei zone reactive R1, R2, R3. Analizai rezultatele execuiei programului (figura 9.45,
figura 9.46, figura 9.47).

Figura 9.45
Figura 9.44
continuare) (

372

Figura 9.46
Figura 9.47

373
Aplicaie
Realizai o pagin Web care conine o hart interactiv a Europei. Atunci cnd
utilizatorul plimb mouse-ul (fr a executa clic) pe una din rile Europei se vor afia
pentru ara respectiv, ntr-un formular, urmtoarele informaii: ara, capitala, populaia,
suprafaa, moneda (figura. 9.48).

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

Figura 9.48
Figura 9.49
Formularul nu conine nici un buton ci numai zone (5) de tip text pentru afiarea
informaiilor privind rile Europei. Aceste informaii sunt coninute n script, mai precis n
12 matrice cu urmtoarele elemente: numele rii, capitala, populaia, suprafaa,
moneda (vezi figura 9.50). Script-ul conine de asemenea i funcia afieaz().

374

Tem

Testai-v cunotinele
1. Ce reprezint obiectul Image?
2. Care sunt proprietile i metodele obiectului Image?
3. Care sunt gestionarii de evenimente ai obiectului Image?
4. Cum creai o instan a unui obiect Image?
5. Ce este un rollover?
6. Care sunt resursele necesare pentru crearea unei imagini reactive client?
7. Poate fi plasat un rollover ntr-o imagine reactiv?
8. n figura 9.51 se prezint un document HTML care conine titlul: Ziua n care
vin petii.

JavaScript
Figura 9.50

375

Atunci cnd se ncarc acest document HTML se obine ceea ce este ilustrat n
figura 9.52.

Figura 9.51
n momentul n care plimbai mouse-ul (fr a executa clic) pe titlul afiat n
pagina Web se obine ceea ce este ilustrat n figura 9.53.

Figura 9.52
Figura 9.53
Ce semnific:
onMouseOver=peste(follow.jpg)
document.images[0].src=nume.
Perfecionai acest mic program dup cum urmeaz (figura 9.54).

376

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

Conversaia 10

Obiectele Frame i Layer

Obiectele Frame
Obiectul Layer. Aplica ii
Tem

Obiectele Frame
Cea mai mare parte a navigatoarelor actuale (n particular, navigatoarele recente
Netscape i Microsoft) recunosc cadrele (frames, n limba englez) care permit
divizarea paginii Web n mai multe zone. n fiecare zon a paginii se poate afia
un document (X)HTML sau rezultatul unui script.
Decizia de a utiliza cadre v aparine!
Indiferent dac apreciai sau nu cadrele, site-urile Web bazate pe cadre exist i
vor mai exista. Din punct de vedere al programatorului JavaScript, este la fel de
uor s lucrezi pe un site care conine cadre sau s lucrezi pe un site fr cadre.
Atunci cnd o fereastr conine mai multe cadre, fiecare dintre ele este
reprezentat n JavaScript printr-un obiect Fr ame.
Acest obiect este echivalent cu un obiect Wi ndowatta timp ct el servete la
manipularea cadrelor i nu a ferestrelor. Numele obiectului Fr ame este acelai
cu cel pe care l afectai atributului name al tag-ului <f r ame>.

378
Remarci:
Cuvintele cheie wi ndowi sel f permit referirea la cadrul curent.
Cuvntul cheie par ent permite referirea la fereastra de nivel superior (cel mai des,
fereastra principal).
Fiecare din obiectele Fr ame ale unei ferestre este un fiu al obiectului printe Wi ndow.
Documentul (X)HTML din figura 10.1 mparte fereastra n patru zone. Dac ai
inserat un script JavaScript n documentul stngasus.htm, el va face referire
la documentele care aparin altor cadre: parent.dreaptasus,
parent.stngajos etc. Cuvintele cheie wi ndowi sel f vor face referire la
nsui cadrul stngasus.

Remarc. Dac utilizai cadre situate n interiorul altor cadre (imbricate) lucrurile se complic
puin: wi ndow reprezint ntotdeauna cadrul curent, par ent reprezint setul de cadre
(frameset) care conine cadrul curent, iar t op reprezint setul de cadre principal care le
conine pe celelalte.

Matricea frames
Matricea f r ames conine un obiect Wi ndow pentru fiecare cadru al paginii
Web (vezi figura 10.2).
n loc s v referii la cadrele unui document prin numele lor, utilizai matricea
f r ames.
Aceast matrice stocheaz informaiile pentru fiecare din cadrele unui document.
Numrul de indice (index) al cadrelor ncepe ntotdeauna cu zero i cu primul tag
<f r ame> al setului de cadre al documentului.
Iat cum putei referi cadrele din figura 10.1 cu ajutorul matricii f r ames, (vezi
figura 10.2).
Figura 10.1

379

Remarci:
Putei folosi oricare din cele dou metode de acces la elementele matricii frames (prin
numrul de index/prin nume).
Dac documentul dumneavoastr conine de exemplu 13 cadre, fr ndoial este mult
mai simplu s utilizai matricea f r ames. Dac ns, documentul conine dect dou
cadre, evident este mult mai bine s utilizai numele cadrelor.
Iat cum creai un cadru de navigare (vezi figura 10.3) care s permit
modificarea coninutului unui alt cadru.
(X)HTML
Dreamweaver MX
XML
JavaScript

1. Creai un document (X)HTML care divizeaz fereastra n dou cadre
(figura 10.4).

Remarci:
Figura 10.2
Figura 10.3
Figura 10.4
Programul din figura 10.4 creeaz dou cadre (la stnga i la dreapta ferestrei).
Tag-urile <body> sunt nlocuite cu tag-urile <f r ameset >.

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

380

Remarci:
Figura 10.5
Gestionarii de evenimente onCl i ck se repet (cu mici modificri) pentru fiecare din
cele patru link-uri (vezi tag-urile <a>).
Gestionarii de evenimente onCl i ck sunt declanai prin evenimentul cl i ck, care
afieaz un document n cadrul din dreapta.
Deoarece script-ul se gsete (el nsui) ntr-un cadru, numele celuilalt cadru trebuie s
fie precedat de cuvntul cheie par ent .
Fiecare din obiectele f r ame ale unei ferestre este un fiu al obiectului printe Wi ndow.
Cuvintele cheie wi ndowi sel f permit referirea cadrului curent.
Cuvntul cheie par ent permite referirea la fereastra de nivel superior (de regul
fereastra principal).
Utilizarea limbajului JavaScript permite modificarea simultan a coninutului mai multor
cadre.
3. Testai script-ul.
3.1 Salvai documentul XHTML al cadrului de navigare sub numele
stnga.html.
3.2 Deschidei n browser documentul HTML care divizeaz fereastra
n dou cadre (vezi figura 10.6).

381

3.3 Testai link-urile din cadrul din stnga.
n figura 10.7 se prezint rezultatul execuiei script-ului n navigatorul Internet
Explorer.

conversaia precedent (EXEMPLUL 9 JAVASCRIPT), cu singura deosebire
(important!) c pentru afiarea rezultatelor vom folosi obiectele Frame (Rezultatele vor
fi afiate ntr-un cadru inserat n documentul curent i nu ntr-o fereastr distinct).

Figura 10.6
Figura 10.7

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

n figura 10.8 este prezentat ecranul (intrare/ieire) cu RAPORT LIVRRI REZERVOR
R1. Tabela de variabile este prezentat n figura 10.9.

Tabela de variabile
Rezervor: (obiect) list simpl de
selecie pentru cele trei rezervoare
Zile: (obiect) list simpl de opiuni
pentru selecia zilei din sptmn
T1: (obiect) zona de editare n care
se va introduce valoarea livrrilor
Inputd: (obiect) frame-ul ce conine
obiectele Rezervor, Zile, T1
sit: (obiect) frame ce conine
zonele reactive pentru afiare
rval: (logic) indic faptul ca
x: (real) valoarea real a textului
sptmnii
jmax,jmin: (numere ntregi)
pstreaz indicii livrrilor
maxime i minime din matricea a
raport: (obiect) frame-ul n
care se vor afia rezultatele
pentru un rezervor
med: (real) folosit pentru
calculul mediei zilnice pe
rezervor
max,min: (numere reale)
a: (matrice de numere
reale) pstreaz valorile
livrrilor pe zile i
rezervoare
Figura 10.8
Figura 10.9

383
Pseudocodul pentru EXEMPLUL 10.1 JAVASCRIPT este prezentat n figura 10.10.
Pseudocodul
EXEMPLUL10.1 BEGIN
z=luni,marti,miercuri,joi, vineri
//aloca spatiu de memorie si initializeaza matricea livrarilor
a
i,j
=0.0
FORJ ENDFOR
FORI ENDFOR
Afiseaza pagina ce contine frame-uri
IFL IF(se apasa butonul Livreaza)
DO livreaza
IFL ENDIF
//raspunde la evenimentele generate de zonele reactive
IFA IF(se executa click pe zona unui rezervor)
DO afispartial(rezervor)
IFA ENDIF
IFV IF(se paraseste zona T1)
IFV ENDIF
EXEMPLUL10.1 END

AFISPARTIAL BEGIN
Date intrare:
rez-indicele rezervorului
// calculeaza total livrari
s=0
FORS FOR(j=0;j<5;j++)
s=s+a
rez,j
FORS ENDFOR
med=s/5
max=a
rez,0
min=a
rez,0
jmax=0
jmin=0
FORMAXMIN FOR(j=0;j<5;j++)
IFMAX IF(max<a
rez,j
)
max=a
rez,j
jmax=j
IFMAX ENDIF
IFMIN IF(min>a
i,j
)
min=a
rez,j
jmin=j
IFMIN ENDIF
FORMAXMIN ENDFOR
//afisare rezultate
//scrierea rezultatelor in frame-ul report
k=rez+1
raport.WRITE "SITUATIA REZERVORULUI R"+k
raport.WRITE "ZIUA R"+k
FORRAP FOR(j=0;j<5;j++)
raport.WRITE z
i
, a
rez,j

FORRAP ENDFOR
Figura 10.10

384
raport.WRITE "Total livrari: ",s
raport.WRITE "Media: ",s
raport.WRITE "Livrarea maxima: ",max,Z
jmax

raport.WRITE "Livrarea minima: ",min,Z
jmin

AFISPARTIAL END

<html>
<head>

</script>
</head>
<title>Exemplul 4 utilizand frame-uri</title>
</head>
<frameset rows="60%,40%">
<frameset cols="30%,70%">
<frame scrolling="no" noresize src="inputdata.html" name="inputd">
<frame src="raport.html" name="raport">
</frameset>
<frame scrolling="no" noresize src="situatie.html" name="sit">
</frameset>
</html>
Figura 10.11
( continuare)

386
// INPUTDATA.HTML
<html>
<head>
</head>
<body>
<center>
<form name="f1">
<table border=0>
</select>
<td>
</select>
<tr><td>Cantitatea
<td><input type="text" name="T1" size="7" value="0.0" onChange="parent.validate(this,0,20);">
<tr><td><input type="button" value="Livreaza" onClick="parent.trimite();">
</table>
</center>
</form>
</body>
</html>

//RAPORT.HTML
<html>
<head>
</head>
<body>
<center><p><b>RAPORT LIVRARI REZERVOR R1 </b></p></center>
<center><table border=1 bgcolor=#efefff><tr>
<td><b>ZIUA</b><td><b>REZERVOR R1</b></td></tr>
<tr><td>Luni</td><td>0</td></tr>
<tr><td>Marti</td><td>0</td></tr>
<tr><td>Miercuri</td><td>0</td></tr>
<tr><td>Joi</td><td>0</td></tr>
<tr><td>Vineri</td><td>0</td></tr>
</table></center><p><p>
<center>
<p><font color=green size=+1>Total Livrari:0</font> <br>
<font color=green size=+1>Media Zilnica:0 </font>
<br><font color=green>Livrarea maxima: 0 s-a facut in ziua de Luni </font>
<br><font color=green>Livrarea minima: 0 s-a facut in ziua de luni </font>
</center>
</html>
Figura 10.11
(continuare)

387
//SITUATIE.HTML

<html>
<body>
<center>
<h3>
Afiseaza Livrari pentru Rezervoarele:
</h3>
<map name="rezervorMap">
<area name="R1" coords="16,18,91,125" href="javascript:parent.afispartial(0)"
onMouseOver="self.status='Rezervorul R2';return true"
onMouseOut="self.status=' ';return true">
</map>
<img src="rezervoare.jpg" align="top" usemap="#rezervorMap">
</body>
</html>
Vizualizai documentul ntr-un browser i testai script-ul (vezi EXEMPLUL 9
JAVASCRIPT). n figura 10.12 se prezint rezultatele execuiei programului JavaScript
pentru un set de date (Rezervorul 1).

Figura 10.12
Figura 10.11
(continuare)

388

Obiectul Layer
Obiectul Layer este un fiu al obiectului Document .
Obiectul Layer permite limbajului JavaScript s acceseze straturile n interiorul
documentelor.
Remarc. Pentru mai multe informaii privind straturile i modul n care acestea funcioneaz n
browser, consultai lucrrile:
Liviu Dumitracu, Dreamweaver MX, Editura Universitii din Ploieti, 2003.
Richard Wagne , R.Allen Wyke, JavaScript, Editura Teora, Traducere Cora Rdulescu i Dan
Pavelescu, 2002.
r
Fia obiectului Layer este prezentat n figura 10.13.
Fia obiectului Layer
Obiectul printe Document
Proprieti above, backgr ound, bel l ow, bgCol or ,
cl i p. bot t om, cl i p. hei ght , cl i p. l ef t ,
cl i p. r i ght , cl i p. t op, cl i p. wi dt h,
document , l ef t , name, pageX, pageY,
par ent Layer , si bl i ngAbove,
si bl i ngBel l ow, sr c, t op, vi si bi l i t y,
wi ndow, zI ndex
Metode l oad( ) , moveAbove( ) , moveBel l ow( ) ,
moveBy( ) , moveTo( ) , moveToAbsol ut e( ) ,
r el easeEvent s( ) , r esi zeBy( ) ,
r esi zeTo( ) , r out eEvent ( )

Figura 10.13
Matricea Layers[]
Matricea l ayer s[ ] (document.layers[]) conine setul de straturi
(layers, n limba englez) reprezentate n pagina (X)HTML prin tag-urile <di v>
sau <l ayer >.
Matricea l ayer s[ ] este recunoscut numai de browser-ul Netscape.
Remarci:
n Netscape putei accesa proprietile unui strat cu ajutorul matricii l ayer s[ ] .
Numele stratului poate fi specificat prin atributul id sau name ale tag-ului di v.
n Netscape putei accesa proprietile unui strat imediat dup instruciunea
document . l ayer s[ numestrat ] .

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

389
specifica stratul pe care dorii s l accesai nu este pstrat n atributul name al
tag-ului <di v> ci n atributul <i d> al aceluiai tag.
Remarc. n Internet Explorer putei accesa proprietile unui strat prin intermediul matricii
st yl e, ceea ce nseamn c sintaxa pe care o vei folosi va fi:
document . al l [ numestrat ] . st yl e.

Corespondena ntre atributele HTML ale straturilor i
proprietile JavaScript
Un layer este un obiect plan rectangular care conine mai multe proprieti:
dimensiuni, culoare, coninut i vizibilitate. O pagin Web poate conine mai
multe straturi care se pot suprapune precum straturile, parial sau total.
Straturile sunt de regul obiecte statice, dar ele pot fi modificate i deplasate cu
ajutorul unui script. Natural, limbajul de script ales de Netscape este JavaScript
ntruct el este creatorul limbajului.
Remarci:
Straturile au fost implementate de Netscape ncepnd cu versiunea 4 a browser-ului
Netscape Navigator.
Pentru gestiunea straturilor, Netscape a creat trei noi tag-uri: <LAYER> . . .
</ LAYER>; <I LAYER> . . . </ I LAYER> i <NOLAYER> . . . </ NOLAYER>.
Cel mai important este de departe primul tag. Al doilea este o form inline iar cel de-al
treilea joac acelai rol n raport cu elementul LAYER ca NOFRAMES n raport cu
FRAMESET.
Elementul LAYER conine 13 proprieti, dintre care cea mai mare parte au
valori implicite. nainte de a trece la corespondena: atribute HTML
proprieti JavaScript vom prezenta un exemplu de declarare a unui
strat (figura 10.14).

Figura 10.14

390
n figura 10.15 este prezentat stratul afiat de Netscape.

Pentru a putea modifica atributele elementului LAYER n vederea dinamizrii
unei pagini Web va trebui s cunoatem corespondena dintre atributele HTML
ale straturilor i proprietile JavaScript (vezi figura 10.16).
Atribut HTML Proprieti JavaScript
NAME name

Numele stratului (identic cu id). Nemodificabil.
I D i d

Numele stratului (identic cu name). Nemodificabil.
LEFT l ef t

Coordonata X a stratului.
TOP t op

Coordonata Y a stratului.
PAGEX pagex

Coordonata X a stratului fa de document.
PAGEY pagey

Coordonata Y a stratului fa de document.
Z- I NDEX zi ndex

Ordinea z a stratului n raport cu fiii si.
VI SI BI LI TY vi si bi l i t y

Starea de vizibilitate a stratului.
Figura 10.15
Figura 10.16

391
BACKGROUND backgr ound

Imaginea de fundal a stratului.
BGCOLOR bgCol or

Culoarea de fundal a stratului.
PARENTLAYER par ent Layer

Numele obiectului care conine stratul curent.
SRC sr c

URL-ul fiierului care reprezint coninutul stratului.
CLI P cl i p. t op, cl i p. l ef t , cl i p. r i ght ,
cl i p. bot t om, cl i p. wi dt h, cl i p. hei ght

Proprietile suprafeei decupate a stratului.
ABOVE above

Numele elementului HTML de deasupra stratului curent.
BELOW bel ow

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

Metodele obiectului Layer
Metodele obiectului Layer sunt prezentate n detaliu n figura 10.17.
Metod Sintax
l oad( ) document . l ayer s[ ] . l oad( )

ncarc o nou adres URL.
moveAbove( ) document . l ayer s[ ] . moveAbove( )

Deplaseaz stratul deasupra altui strat.
moveBel ow( ) document . l ayer s[ ] . moveBel ow( )

Deplaseaz stratul dedesubtul altui strat.
moveBy( ) document . l ayer s[ ] . moveBy( )

Deplaseaz stratul ntr-o poziie specific.
moveTo( ) document . l ayer s[ ] . moveTo( )

Deplaseaz colul din stnga-sus al ferestrei la coordonatele specificate ale
ecranului.
Figura 10.17
Figura 10.16
(continuare)

392
moveToAbsol ut e( ) document . l ayer s[ ] . moveToAbsol ut e( )

Modific poziia stratului n pagin, conform coordonatelor specificate n
pixeli.
r el easeEvent s( ) document . l ayer s[ ] . r el easeEvent s( )

Stabilete ca stratul s elibereze evenimentele capturate de tipul specificat.
r esi zeBy( ) document . l ayer s[ ] . r esi zeBy( )

Redimensioneaz stratul cu valorile de nlime i lime specificate.
r out eEvent ( ) document . l ayer s[ ] . r out eEvent ( )

Transfer un eveniment capturat prin ierarhia normal a evenimentelor.

Aplicaie
Analizai documentul XHTML din figura 10.18 n care s-a inserat un script care conine
metoda moveBy( ) .

Figura 10.18
Figura 10.17
(continuare)

n figura 10.19 este prezentat rezultatul execuiei programului JavaScript n
navigatorul Netscape.

393

Figura 10.19
Figura 10.19
(continuare)

394

conversaia precedent, cu singura deosebire c de data acesta vom folosi pentru
afiarea rezultatelor obiectul Layer.
Introducerea valorilor pentru livrri se realizeaz printr-o singur zon de text, iar selecia
rezervorului i a zilei din lista de opiuni.
n figura 10.20 este prezentat ecranul (intrare/ieire) n care se afieaz pagina Web.
Tabela de variabile este prezentat n figura 10.21.

Figura 10.20

395
Tabela de variabile
Rezervor: (obiect) lista
simpla de selecie pentru
cele trei rezervoare
Zile: (obiect) lista simpl
de opiuni pentru selecia
zilei din sptmn
T1: (obiect) zona de
editare n care se va
introduce valoarea
livrrilor
a: (matrice de numere
reale) pstreaz valorile
livrrilor pe zile i
rezervoare
s: (real) folosit pentru
calculul sumelor pariale pe
zile
rval: (logic) precizeaz
dac valoarea introdus n
zona de editare este valid
sau nu
x: (real) valoarea real a
textului introdus n zona de
editare
sptmnii
jmax,jmin: (numere ntregi)
pstreaz indicii livrrilor
maxime i minime din
matricea a
f2: (obiect) formular
coninut n layer-ul R1 n
care se vor afia rezultatele
pentru un rezervor
med: (real) folosit pentru
calculul mediei zilnice pe
rezervor
max,min: (numere reale)
rnume,Z1, Z2, Z3, Z4, Z5,
Tot, Med, emax, emin,
zmax, zmin: (obiect) zone
text pentru afiarea
rezultatelor

Pseudocodul pentru EXEMPLUL 10.2 JAVASCRIPT este prezentat n figura 10.22.
Pseudocodul
EXEMPLUL10.2 BEGIN
//initializeaza matricea livrarilor
a
i,j
=0.0
FORJ ENDFOR
FORI ENDFOR
Afiseaza pagina ce contine layer R2
IFL IF(se apasa butonul Livreaza)
DO livreaza
IFL ENDIF
//raspunde la evenimentele generate zonele reactive
IFAFIS IF(cursor mouse pe zona unui rezervor)
DO afispartial(rezervor)
IFAFIS ENDIF
IFVALID IF(se paraseste zona T1)
IFVALID ENDIF
EXEMPLUL10.2 END
AFISPARTIAL BEGIN
Date intrare:
rez-indicele rezervorului
// calculeaza total livrari
s=0
FORS FOR(j=0;j<5;j++)
s=s+a
rez,j
FORS ENDFOR
Figura 10.21
Figura 10.22

396
med=s/5
max=a
rez,0
min=a
rez,0
jmax=0
jmin=0
FORMAXMIN FOR(j=0;j<5;j++)
IFMAX IF(max<a
rez,j
)
max=a
rez,j
jmax=j
IFMAX ENDIF
IFMIN IF(min>a
i,j
)
min=a
rez,j
jmin=j
IFMIN ENDIF
FORMAXMIN ENDFOR
//afisare rezultate
//depune rezultate in zonele din layerul R1
k=rez+1
f2.rnume.value="R"+k;
f2.Z1.value=a[rez][0];
f2.Tot.value=s;
f2.Med.value=trunchiaza(med);
f2.emax.value=max;
f2.zmax.value=Z[jmax];
f2.emin.value=min;
f2.zmin.value=Z[jmin];
AFISPARTIAL END

//Afiseaza layerul cu rezultate
ARATA BEGIN
R1.style.visibility = "visible"
ARATA END

// Ascunde layerul cu rezultate
ASCUNDE BEGIN
R1.style.visibility = "hidden"
ASCUNDE END

<html>
<head>
<title>Exemplul 10.2</title>
<script language=JavaScript>

</script>
</head>

<body>
<center>
<form name="f1">
<table border=0>
</select>
<td>
</select>
<tr>
<td>Cantitatea
<tr>
</table>
</center>
</form>
<h3>Situatia Livrarilor</h3>
<table>
<tr><td><a href="javascript:void(0)" onMouseOver="afispartial(0);arata();"
onMouseOut="ascunde('R1');"> Rezervor R1</a>
<tr><td><a href="javascript:void(0)"
onMouseOver="afispartial(1);arata();"
onMouseOut="ascunde();">Rezervor R2
<tr><td><a href="javascript:void(0)" onMouseOver="afispartial(2);arata();"
onMouseOut="ascunde();">Rezervor R3
Figura 10.23
(continuare)

399
</tr>
</table>
<div id="r1" style="position: absolute;top: 120px;z-index: 2; visibility: hidden; top:190; left:
120px;">
<form name = "f2">
<center><p><b>SITUATIA LIVRARILOR REZERVOR
<input type="text" name="rnume" size="2"></b></p></center>
<center><table border=1 bgcolor=#efefff><tr>
<td><b>ZIUA</b><td><b>Livrare</b></td></tr>
<tr><td>Luni</td><td><input type="text" name="Z1" size="7" value="0.0"></td></tr>
<tr><td>Marti</td><td><input type="text" name="Z2" size="7" value="0.0"></td></tr>
<tr><td>Miercuri</td><td><input type="text" name="Z3" size="7" value="0.0"></td></tr>
<tr><td>Joi</td><td><input type="text" name="Z4" size="7" value="0.0"></td></tr>
<tr><td>Vineri</td><td><input type="text" name="Z5" size="7" value="0.0"></td></tr>
</table></center><p><p>
<center>
<table bgcolor=#efefff>
<tr><td><font color=green size=+1>Total Livrari</font><td><input type="text" name="Tot"
size="7" value="0.0"><tr>
<tr><td><font color=green size=+1>Media Zilnica</font><td><input type="text" name="Med"
size="7" value="0.0"> </table>
<table bgcolor=#efefff>
<tr><td><font color=green>Livrarea maxima:</font><td> <input type="text" name="emax"
size="7" value="0.0"> <td> <input type="text" name="zmax" size="7" value="Luni">
<tr><td><font color=green>Livrarea minima:</font> <td><input type="text" name="emin"
size="7" value="0.0"> <td> <input type="text" name="zmin" size="7" value="Luni">
</table>
</form>
</div>
</body>
</html>
Figura 10.23
(continuare)
Vizualizai documentul ntr-un browser i testai script-ul numai n Internet
Explorer. Se introduc livrrile; se poziioneaz mouse-ul deasupra legturii:
Rezervor R1/ Rezervor R2/ Rezervor R3.
n figura 10.24 se prezint rezultatele execuiei programului JavaScript pentru un
set de date.

400

Figura 10.24

401

Tem

Testai-v cunotinele
1. Cnd utilizai obiectele Fr ame?
2. Care este rolul obiectului Layer ?
3. Care sunt proprietile obiectului Layer ?
4. Care sunt metodele obiectului Layer ?

JavaScript
Vizitai site-urile
http://Javascript.internet.com/messages/description-layer.htm;
http://Javascript.internet.com/bgeffects/floating-transparent-slideshow.html
http://Javascript.internet.com/bgeffects/write-layer.html
http://www.dannyg.com/examples/ol2/index.htm
http://www.dannyg.com/examples/dh2/index.htm

t

Conversaia 11

Depanarea aplicaiilor JavaScript

Tipuri de erori JavaScrip . Aplica ii
Instrumente pentru depanarea script-urilor. Aplica ii
Instruc iunile throw i try catch. Aplica ii
Tem

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

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

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

Erori de sintax
Erorile de sintax JavaScript sunt erorile cele mai frecvente i cele mai uor de
corectat. De cele mai multe ori, interpretorul JavaScript identific corect sursa
erorilor n programele pe care le-ai realizat, dar sunt i cazuri cnd lucrurile
nu stau chiar aa!
n general, erorile de sintax provin din:
greeli de tastare
confuzia ntre majuscule i minuscule;
inversarea literelor;
greeli de punctuaie
tag-uri i paranteze orfeline;
ghilimele i apostrofuri plasate greit;
greeli de plasare a instruciunilor JavaScript
confuzia ntre irurile de caractere i numere
numerele sunt tratate ca iruri de caractere;
irurile de caractere sunt tratate ca numere.
Aplicaie
Urmtoarele script-uri conin erori de sintax, dup cum urmeaz:
greeli de tastare, greeli de punctuaie
figura 11.1, figura 11.2, figura 11.3, figura 11.4, figura 11.5, figura 11.6,
figura 11.7, figura 11.8, figura 11.9
figura 11.10, figura 11.11, figura 11.12, figura 11.13, figura 11.14
greeli de tratare a irurilor de caractere i a numerelor
figura 11.15, figura 11.16, figura 11.17

405
Identificai i corectai erorile de sintax din toate aceste script-uri.
<script>
document.write (<font size=+5>);
document.write (La revedere!
x=8 y=3 z=120;
document.write (La revedere!+<br>);
</script>

<script>
DOCUMENT.write (S nu uitai s fii fericii!);
Document.Write (S nu uitai s fii fericii!);
Document.WRITE (S nu uitai s fii fericii!);
</script>

<script>
Salut=ir;
var Salut=ir_1;
</script>

<script>
onClick=alert(calculeaz);
onClick=alert(Afieaz);
</script>

<script>
a=new Array;
b=Array(5);
c=[2,5,7;
</script>

<script>
if (a==10);
alert (a=10);
if (b==5
alert (b=5);
if (c==7),
alert (c=7);
if (d=8)
alert (d=8);
if (m=7) this
alert (m=7);

Figura 11.1
Figura 11.2
Figura 11.3
Figura 11.4
Figura 11.5
Figura 11.6

406
<script>
if (c=3)
alert (c=3)
else; document.write (c!=3);
if (d=7) {
alert (d=7)
}
else (document.write (EROARE);
if (r=33)
alert (FELICITRI!)
else document.write (EROARE);
</script>

<script>
while (i<=7);{}
++i;
while (j<=9; document.writeln(j) {
++j;
}
</script>

<script>
do while (i<7) {
} alert (La revedere!);
}
do { while (i<10)
alert (Bucla do while!);
}
do {
alert (FATALITATE!);
while (i<7)
}
</script>

<script>
for (var i=0, i<13, ++i)
alert (La muli ani frumoi!);
for {
alert (La revedere!);
} while (var i=0; i<13; ++i)
for (i=0; i<7);
alert (La revedere!);
++i;
</script>

<script>
s=O; //iniializare cu litera O!
for (i=0; i<=10; i++) {
s=s+i;
}
</script>
Figura 11.7
Figura 11.11
Figura 11.8
Figura 11.9
Figura 11.10

407
<script>
s=0;
for (i=0; I<=10; i++) {
s=s+i;
}
</script>
}

<script>
for (i=0; i<=10; i++) {
p_2=i*i;
p_3=i*i*i;
document.write (p_2);
document.write (p_3);

<script>
s=0;
for (i=0; i<=10; ++i++) {
s=s+i;
}
write(s);
</script>

<script>
function demo (Valoare) {
document.write (valoare.bold()+<br/>)
}
</script>
</head>
<body>
<form>
<input type=button value=BOLD
onClick=demo(3.14)>
</form>
</body>
</html>

<html>
<head>
<title> aplicaie </title>
<script>
function test (valoare) {
alert (Valoare)
}
</script>
function adunare (unu, doi) {
return unu+doi
}
</head>
</body>
</html>

Figura 11.12
Figura 11.13
Figura 11.14
Figura 11.15
Figura 11.16

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

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

409
Remarci:
Aplicaia ilustreaz o eroare generat n timpul execuiei script-ului, datorat de o
mprire la zero:
media=media/nt
unde, nt=0.
Corectai eroarea, introducnd n instruciunea if, instruciunea nt++ (figura 11.19).
nt=0;
media=0;
for (j=1; j<=teste; j++){
nota=parseInt (rezultate [i][j]) ;
if nota {
media+=nota;
nt++;
}
}
media=media/nt;
}

<script>
//Conversatia 3
function rotunjeste (x) {
}
//Calculul mediilor pe zile
//Calculul mediilor pe rezervoare
d=new Array (4);
st=0;
for (i=0; i<3; i++) {
s=0;
for (j=0; j<5; j++) {
s=s+a[i][j];
st=st+a[i][j];
}
d[i]=s/5;
}
d[3]=st/14;
Remarci:
Eroarea de logic provine de la numitorul fraciei, din enunul de atribuire
d[3]=st/14;
Enunul trebuie corectat, dup cum urmeaz:
d[3]=st/15;
De ce 15? Rspunsul este simplu: 5 zile (luni, mari, miercuri, joi, vineri) * 3 rezervoare
(R1, R2, R3), (vezi Conversaia 3).
<script>
var Constant=13;
i=7;
for (i<=7; i>0; i--) {
document.write (i+++Constant+=+
(i+Constant)+<br>);
}
</script>

Figura 11.19
Figura 11.20
Figura 11.21

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

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

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

Figura 11.22

411

n vremurile mai de demult programatorii ncepeau depanarea prin a desena
scheme logice complicate pentru a urmri secvenial, logica programului.
n prezent, schemele logice au fost nlocuite cu pseudocodul, care este o
combinaie de JavaScript i limbaj natural structurat. Acest mod de descriere a
unui algoritm s-a dovedit a fi indispensabil atunci cnd dorii s localizai zona n
care ar putea fi eroarea generat.

Utilizai comentariile
Pentru a v crea primele reflexe JavaScript inserai ct mai multe comentarii n
script-urile dumneavoastr.
Observaie. Comentariile JavaScript (// sau /* i */) au fost prezentate n Conversaia 2).
Pentru a elimina anumite poriuni din codul JavaScript (pn la eliminarea
erorilor) utilizai comentariile conform procedurii de mai jos [1]:

transformai n comentariu una sau mai multe linii ale programului;
salvai programul;
rencrcai pagina Web n browser;
analizai rezultatul (efectul);
modificai codul surs sau transformai n comentariu mai multe linii de
cod;
repetai aceast procedur pn cnd ai eliminat eroarea.

Afiai valorile variabilelor
O alt tehnic de depanare frecvent folosit este aceea de a aduga instruciuni
JavaScript pentru a putea cunoate strile script-ului.
n acest sens, utilizai metoda al er t ( ) pentru a:
afia valorile variabilelor, matricelor i valorile returnate de funcii;
afia rezultatele expresiilor.

412
De asemenea, putei afia mesaje n bara de stare cu ajutorul proprietii
st at us.
Putei de asemenea afia informaii din procesul de depanare, ntr-o alt
fereastr a navigatorului sau ntr-un cadru anume.
n anumite cazuri, folosii document . wr i t e, dar atenie (!), aceast
metod nu funcioneaz dect atunci cnd documentul a fost complet ncrcat!

Descompunei script-urile complexe n mai multe funcii
Pentru a mri gradul de reutilizare a codului JavaScript este bine s limitai
dimensiunea funciilor pe care urmeaz s le creai. Cu ct dimensiunile unei
funcii sunt mai mici cu att mai mult cresc ansele de reutilizare a acesteia n
diferite zone ale programului.

Verificai documentul (X)HTML
Nu trebuie s uitai c JavaScript nu este singurul limbaj pe care trebuie s-l
utilizai; el interacioneaz de obicei cu codul surs (X)HTML.
Morala este urmtoarea: 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. A uita tag-ul de nchidere </table> sau </script> este o eroare
frecvent (X)HTML.
!
,
,
Dei (X)HTML nu reprezint obiectul de studiu al nostru (vezi L. Dumitracu
(X)HTML Editura Universitii din Ploieti, 2003) este bine s tii c o eroare
(X)HTML poate genera erori n programul JavaScript.

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

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

Instrumente pentru depanarea script-urilor
Figura 11.23
Depanarea codului surs ocup un loc deosebit de important n dezvoltarea
aplicaiilor JavaScript.
Dac ai verificat absena erorilor clasice n script-urile dumneavoastr, care
totui nu funcioneaz este momentul s trecei la depanare, adic la cutarea i
eliminarea erorilor din program, utiliznd instrumentele simple de depanare pe
care le prezentm n continuare.

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

sau,
2. Executai clic pe Tools Web Development JavaScript
Console (figura 11.25).

Remarc. Consola JavaScript afieaz ultimele mesaje de eroare (figura 11.26).

Figura 11.24
Figura 11.25
Figura 11.26
Consola JavaScript nu permite numai vizualizarea erorilor, ea permite de
asemenea introducerea unei instruciuni/expresii, pentru a vedea apoi rezultatul.

415
Aceast funcie este util pentru a verifica existena erorilor de sintax n liniile
de cod ale script-ului dumneavoastr.

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

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

416

Figura 11.28
Figura 11.29

417
Remarci:
Dac nu ai activat afiarea mesajelor de erori, Internet Explorer afieaz n bara de
stare un icon atunci cnd se genereaz o eroare. Executai dublu clic pe acest icon
pentru a afia mesajul de eroare (figura 11.29).
Dup cum ai putut constata i Microsoft dispune de un instrument de depanare la fel de
eficient ca i consola Netscape. Indiferent de preferinele dumneavoastr, testai
script-urile cu cele dou navigatoare.

Alte instrumente de depanare
Mesajele de avertizare (vezi metoda alert()) i puin fler v pot ajuta s
gsii cu uurin cauza unei erori ntr-un script simplu dar aceste metode sunt
insuficiente pentru depanarea script-urilor de dimensiuni mari.
n consecin, v recomandm s utilizai unul din instrumentele specializate,
prezentate mai jos:
W3C validator, instrument de depanare a documentelor (X)HTML, care
poate fi descrcat gratuit, de la adresa:
http://validator.W3.org/
Remarc. Consultai lucrarea L. Dumitracu (X)HTML, Editura Universitii din Ploieti
2003.

Netscape JavaScript Debugger, instrument de depanare a aplicaiilor
JavaScript, care poate fi descrcat gratuit, de la adresa:
http://developer.netscape.com/software/jsdebug.html
sau,
http://www.mozilla.org/projector/venkman/
Remarc. Principalele caracteristici [1] ale instrumentului Netscape JavaScript
Debugger sunt: fereastra Source View; ntrerupere; puncte de ntrerupere;
parcurgerea pas cu pas a codului surs; omiterea liniilor din procedurile apelate;
parcurgerea liniilor din procedurile apelate; fereastra Console; Object Inspector;
fereastra de dialog Error Reporter.
Microsoft Script Debugger (MSSD), instrument de depanare a
script-urilor, parte integrant din Internet Explorer, care poate fi
descrcat gratuit, de la adresa:
http://msdn.microsoft.com/library/en-us/sdbug/html/sdbug_1.asp
Remarc. Principalele caracteristici [1] ale instrumentului Microsoft Script
Debugger sunt: imagine dinamic a structurii (X)HTML; integrarea mai multor limbaje
(JavaScript, VBScript i Java din acelai document); puncte de ntrerupere; parcurgerea
pas cu pas a codului surs; omiterea liniilor din procedurile apelate; parcurgerea liniilor
din procedurile apelate; stiv de apeluri integrat; fereastra de expresii evaluate imediat.
Editoarele de text i de (X)HTML sunt foarte bune instrumente pentru
procesarea de baz; ele v pot de asemenea asista n timpul depanrii,

418
afind numerele de linii i punnd n relief tag-urile corecte cu ajutorul
codurilor de culori.
Aplicaie
Scriei un program JavaScript care calculeaz i afieaz determinantul unei matrice de
dimensiune 3*3.
Indicaie.
i h g
f e d
c b a
= a*(e*if*h)b*(d*if*g)+c*(d*he*g)
Iat cum procedm pentru a scrie programul JavaScript care calculeaz i
afieaz determinantul matricei
9 8 7
6 5 4
3 2 1
.
1. Creai documentul (X)HTML (figura 11.30).

2. Plasai script-ul de calcul al determinantului n documentul (X)HTML
(figura 11.31).

Figura 11.30

419

3. Validai documentul (X)HTML cu aplicaia validator
(http://validator.w3.org).
n figura 11.32 este prezentat rezultatul validrii obinut cu aplicaia
validator.

Figura 11.31
Figura 11.32

420
Remarc. Nimic nu este perfect! Ai identificat eroarea? Dei l pronun bine pe r, n loc de r am
tastat l (</sclipt>). Se ntmpl, nu-i aa! Corectai </ scr i pt >!
4. Corectai eroarea i validai documentul (X)HTML cu aplicaia
validator (http://validator.w3.org), figura 11.33.

5. Inserai codul HTML care afieaz icon-ul de conformitate (figura 11.34).

Figura 11.33
Figura 11.34
6. Vizualizai pagina Web ntr-un browser (Internet Explorer), figura 11.35.

421

Remarc. Internet Explorer afieaz icon-ul de conformitate la baza paginii.

Instruciunea throw genereaz o eroare. Un bloc try conine instruciuni
JavaScript; la apariia unei erori, programul execut blocul catch.

Instruciunea throw
Sintaxa instruciunii throw este prezentat n figura 11.37.
Instruciune Sintax
t hr ow t hr ow mesaj eroare
Remarc. Instruciunea t hr ow este utilizat frecvent ntr-o instruciune t r y cat ch; ea
transfer eroarea blocului cat ch.

Instruciunile throw i try catch
Figura 11.36
Figura 11.37
Figura 11.35

422
Iat cum procedm pentru a genera dou mesaje de eroare: Eroare 1,
Eroare 2 n situaia n care numrul de rezervoare cilindrice echilaterale care
a fost introdus de la tastatur este zero, respectiv negativ (vezi EXEMPLELE
JAVASCRIPT).
<script>
try {
n=prompt (Introducei numrul de rezervoare (n),0);
if (n==0)
throw Eroare 1
else
if (n<0> throw Eroare 2
}
catch (er) {
if (er==Eroare 1) alert (Eroare 1 numr rezervoare=0)
if (er==Eroare 2) alert(Eroare 2 numr rezervoare negativ)
}
</script>
Comentarii:
Programul execut blocul t r y.
n situaia n care n nu este egal cu zero i nici negativ, nu se genereaz nici o eroare iar
blocul cat ch nu este executat. Pentru utilizator nu se ntmpl absolut nimic.
n cazul n care valoarea variabilei n a fost fixat la 0 n cursul instruciunilor executate
anterior, eroarea Eroare 1 este generat (aceast eroare este de acelai tip cu erorile
de sintax). Programul prsete blocul t r y i execut blocul cat ch, furnizndu-i ca
parametru tipul de eroare returnat prin throw. n definitiv, el afieaz un mesaj
al er t ( ) .

Instruciunea try catch
Tr y cat ch servete la testarea unei poriuni de cod JavaScript i la
depistarea eventualelor erori. Ea este alctuit din trei blocuri: t r y, cat ch i
f i nal l y.
Sintaxa instruciunii este prezentat n figura 11.39.
Instruciune Sintax
t r y . . . cat ch t r y {
cod1
}
cat ch ( Eroare) {
cod2
}
f i nal l y {
cod3
}
Figura 11.38
Figura 11.39

423
Remarci:
Tr y conine instruciuni (cod1) JavaScript care ar putea fi sursa problemei. n cazul
apariiei unei erori, script-ul sare imediat n blocul catch transmindu-i ca parametru
obiectul Er r or generat.
Dac instruciunile din blocul t r y nu depisteaz nici o eroare, script-ul trece imediat la
blocul f i nal l y, evitnd blocul cat ch.
Iat cum calculm aria unui rezervor sferic ( ) cu raza de 3m utiliznd
2
4 R a =
funcia intern eval(). Dac eval() recunoate instruciunea JavaScript
a=4*Math.PI*Math.pow(3,2) atunci ea evalueaz textul primit ca
argument i returneaz rezultatul. n caz contrar, navigatorul afieaz un mesaj
de eroare.
<script>
try {
a=prompt (Introducei a=4*Math.PI*Math.pow(3,2),);
aeval=eval(a);
alert (Aria rezervorului sferic cu raza de 3m este:+aeval);
}
catch(err) {
if (err.name==SyntaxError) alert (Eroare de sintax!)
else alert (Expresia nu poate fi evaluat)
}
</script>
Comentarii:
t r y ateapt o eroare!
eval ( ) accept un ir de instruciuni JavaScript i l evalueaz ca fiind cod surs.
Dac utilizatorul introduce a=4*Math.PI*Math.pow(3,2), JavaScript poate
evalua expresia i va afia 113.097.
Dac utilizatorul introduce a=4*Math.PI*pow(3,2)+, spunem c avem de-a
face cu o eroare de sintax.
n sfrit, dac utilizatorul introduce Droopy, JavaScript ncearc s evalueze
valoarea variabilei Droopy, care nu exist. Nu este vorba de o eroare de sintax ci de o
eroare de referin. Expresia nu poate fi evaluat se va afia n acest
caz pe ecran.
JavaScript recunoate ase tipuri de erori (vezi figura 11.41).
Numele erorii Descriere
Eval Er r or Utilizare greit a metodei eval ( )
RangeEr r or O valoare numeric este foarte important
Ref er enceEr r or Referin la o variabil, sau referin necunoscut sau
invalid
Synt axEr r or Eroare de sintax
TypeEr r or Tipul de variabil este greit
URLEr r or Utilizare greit a URL-ului
Remarc. Nu uitai c i dumneavoastr putei genera cu t hr owpropriile erori. Succes!
Figura 11.40
Figura 11.41

424

Tem

Testai-v cunotinele
1. Dac la crearea unui script, comitei greeli de tastare, ce tip de eroare este
generat?
eroare de sintax
eroare de logic
eroare de intrare/ieire
2. De regul, greelile de punctuaie care se comit la crearea unui script sunt:
confuzia ntre majuscule i minuscule
paranteze orfeline
inversarea literelor
3. Foarte multe erori de logic sunt generate de:
o proiectare defectuoas a programului JavaScript
confuzia ntre irurile de caractere i numere
4. Inserarea comentariilor n programele JavaScript contribuie la:
crearea unor reflexe JavaScript
eliminarea erorilor de sintax
eliminarea erorilor de logic
5. n JavaScript una din erorile cele mai frecvente comise de nceptori este
confuzia dintre:
operatorul de atribuire i operatorul de egalitate
operatorul == i operatorul ===
operatorul || i operatorul &&
6. Consola JavaScript este:
un instrument simplu pentru afiarea mesajelor de eroare cu Netscape
un instrument simplu pentru afiarea mesajelor de eroare cu Internet
Explorer
un buton ncastrat
7. W3C validator este un instrument de depanare a documentelor:
(X)HTML
XML
JavaScript

JavaScript

425
8. Instruciunea t hr owgenereaz:
o eroare
un tabel
un formular
9. JavaScript recunoate urmtoarele tipuri de erori:
Eval Er r or
Si nt axEr r or
TypeEr r or
For mat Er r or
Logi cal Er r or

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

tr

Conversaia 12

Crearea obiectelor personalizate

Utilizarea obiectelor personalizate pentru simplificarea script-urilor
Defini i un obiect
Defini i o metod pen u un obiect
Crea i o instan a unui obiect
Aplica ii
Tem

Utilizarea obiectelor personalizate pentru simplificarea
script-urilor
Fr s greim, putem afirma c avei deja o experien (un background) n
utilizarea obiectelor predefinite ale limbajului JavaScript.
Suntei de asemenea familiarizai cu obiectele DOM-ului (Document Object
Model) care permit manipularea documentelor Web. Aceste obiecte sunt cele mai
frecvente n programarea JavaScript.
Dar ... putei de asemenea s creai propriile dumneavoastr obiecte, ceea ce
trebuie s recunoatem este ceva nemaipomenit!
Dac variabilele i matricile permit stocarea datelor sub diverse forme, uneori
este necesar s facem apel la structuri mai sofisticate! S presupunem c dorii
s creai un script care s gestioneze coordonatele persoanelor de contact
(nume, adresa site, adresa email) din activitatea dumneavoastr profesional.

428
n situaia n care utilizai variabile normale vei fi obligat s definii o variabil
pentru fiecare coordonat a fiecrei persoane (pentru fiecare nume, fiecare
adres site i fiecare adres email) ceea ce este foarte complicat!
Utilizarea matricilor simplific puin lucrurile, dar nu este ideal!
Obiectele (aici am vrut s ajungem!) permit stocarea informaiilor bazei de date
ntr-o manier mult mai logic.
Fiecare persoan este reprezentat printr-un obiect Contact care dispune de
proprietile: nume, adres site i adres email.
Putei aduga dup aceea obiectului Contact, metode pentru
afiarea/manipularea informaiilor coninute.

Prima etap n crearea unui obiect const n a-i da un nume. Am decis s numim
obiectul Contact. Fiecare obiect Contact conine urmtoarele proprieti:
nume;
site (adresa de site (personal));
email (adresa de email (personal)).
Pentru a putea utiliza obiectul, va trebui mai nti s crem o funcie
Constructor care are rolul de a crea noi obiecte Contact.
Iat cum crem n JavaScript o funcie Constructor (Contact) cu trei
parametri pentru iniializarea noului obiect i atribuirea proprietilor
corespunztoare.
n figura 12.1 este prezentat codul JavaScript al funciei Constructor.

Definii un obiect
Figura 12.1

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

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

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

Definii o metod pentru un obiect
Figura 12.2
n figura 12.3 este prezentat codul JavaScript al funciei afiareContact.

430

Remarc. Cuvntul cheie this se refer la proprietile obiectului.

Creai o instan a unui obiect
Figura 12.3
n continuare, vom utiliza definiia obiectului pe care urmeaz s-l crem. Pentru
a utiliza o definiie a obiectului va trebui s crem un nou obiect cu ajutorul
cuvntului cheie new(vezi obiectele Ar r ay, Dat e, St r i ng).
n figura 12.4 se prezint codul JavaScript care creeaz un nou obiect Contact
numit Droopy.

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

Figura 12.4
Figura 12.5

431
Odat creat instana obiectului Contact cu ajutorul uneia din metodele
prezentate, utilizai metoda afiareContact pentru a afia informaiile
corespunztoare. Proprietile persoanei de contact Droopy sunt afiate ca n
figura 12.6.

Aplicaii
Creai un document (X)HTML care afieaz n Internet Explorer lista de contact a trei
persoane (vezi figura 12.7).
Indicaie. Utilizai obiectul Contact.

Figura 12.6
Figura 12.7

432

Remarc. n cadrul acestei aplicaii baza de date utilizat are dimensiuni extrem de reduse. Un
obiect asemntor poate stoca date care provin dintr-o baz de date extern care conine mii de
nregistrri.
Figura 12.8
Modificai definiia obiectului Contact pentru a include o proprietate adresa care
permite stocarea adresei persoanei de contact. Modificai funcia afiareContact.

433

Definirea problemei
Aplicaia pe care urmeaz s o realizai n cadrul acestei ultime conversaii (!) este o mic
baz de date care conine notele obinute la mai multe materii, de ctre studenii unei
grupe.
Pentru gestionarea automat a acestor date, vom folosi facilitile JavaScript (tabelul pe
parte de client), pentru a rspunde cerinelor conducerii unei instituii de nvmnt.

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


434
Proiectarea programului
Crearea tabelelor de cutare
Se vor utiliza obiecte personalizate care s simuleze o baz de date. Documentul
(X)HTML va conine informaii despre dou entiti:
materie conine atributele: cod (numrul de identificare al materiei),
denumirea materiei (ir de caractere);
student conine atributele: numele i prenumele studentului; notele obinute la
materiile de studiu.
Remarc. A fost aleas o soluie simplificat care prezint dezavantajul unei flexibiliti reduse la
modificarea numrului materiilor de studiu i la adugarea mai multor ani de studiu, dar ... din
punct de vedere didactic este mult mai uor de neles.
Tabelul entiti materii pe parte de client i tabelul entiti student pe parte de client se
vor implementa dup cum urmeaz:
tabelul materii se va utiliza un vector ir de caractere; codul de identificare al
materiei va fi indicele materiei iar elementele vectorului, un ir de caractere ce
reprezint denumirea materiei.
tabelul student se va utiliza un vector de obiecte personalizate n care indicele
vectorului va reprezenta numrul de identificare al studentului iar obiectul
personalizat va fi format din dou iruri de caractere:
Nume, Prenume reprezint numele i prenumele studentului;
Note vector de numere ntregi reprezentnd notele obinute de student
(dimensiunea vectorului de note trebuie s fie egal cu dimensiunea
vectorului materii care definete numele materiilor de studiu).
Definii obiectul student (vezi metoda constructor, def_student (Nume,
Prenume, Note) din figura 12.9) i creai instane de acest tip.
Pentru aceasta va trebui s creai mai nti lista cu note i apoi s apelai metoda
constructor (def_student) a obiectului student (vezi figura 12.10).
function def_student(Nume,Prenume,note){
this.Nume=Nume;
this.Prenume=Prenume;
this.Note=Note;
}

...
var lista_stud=new Array();
var note1=new Array(5,6,7,10,10);
lista_stud[0]=new def_student(Avram,Nicolae,note1);
}

Figura 12.9
Figura 12.10

435

Crearea interfeei cu utilizatorul
Interfaa cu utilizatorul trebuie s asigure afiarea facil a tuturor cerinelor de prelucrare.
Pentru a afia simultan opiunile de prelucrare, criteriile i rezultatele prelucrrii cererilor
de cutare se va folosi o fereastr cu mai multe (4) cadre (vezi figura 12.11).
Cadrul titlu
Cadrul inputd Cadrul subrap
Cadrul fraport
Vom prezenta n cele ce urmeaz funciile celor patru cadre n care a fost mprit
fereastra browser-ului.
Cadrul titlu
Cadrul titlu afieaz textul Intranet Baza de Date cu Studeni (vezi
figura 12.12).

Figura 12.11
Figura 12.12
Cadrul inputd
Cadrul inputd afieaz tipul prelucrrii. Se afieaz dou butoane radio (Rapoarte,
Cutare) cu ajutorul crora utilizatorul poate selecta tipul de raport (General, Pe
Materii, Restanieri) i tipul cutrii (Dup studeni, Restanieri).
n figura 12.13 se prezint cadrul inputd al ferestrei interfeei cu utilizatorul cu tipul
prelucrrii RAPOARTE iar n figura 12.14 se prezint acelai cadru cu tipul prelucrrii:
CUTARE.

436

Cadrul subrap
Cadrul subrap este cadrul prin intermediul cruia se introduc datele necesare efecturii
prelucrrilor cerute de utilizator prin selecia unei opiuni din cadrul inputd. El este generat
dinamic.
n figurile 12.15, 12.16, 12.17, 12.18, 12.19 este prezentat coninutul cadrului subrap
pentru opiunile RAPOARTE i CUTARE.

Figura 12.13
Figura 12.14
Figura 12.15

437

Figura 12.16
Figura 12.17
Figura 12.18

438

Remarc. Observai n figurile 12.15, 12.16, 12.17, 12.18, 12.19 prezena butonului EXECUT.

Cadrul fraport
Cadrul fraport este cadrul n care se afieaz rezultatele prelucrrilor. Coninutul acestuia
este dinamic, fiind generat n funcie de cererea de cutare selectat.
n figura 12.20 este prezentat cadrul fraport al ferestrei interfeei cu utilizatorul pentru
RAPORT GENERAL (Rapoarte General, n cadrul inputd).

Figura 12.19
Figura 12.20

439
Crearea funciilor de prelucrare a datelor
Aplicaia poate genera trei rapoarte i execut dou cereri de cutare. Tipul raportului
sau al cutrii este selectat de utilizator prin intermediul cadrului inputd.
Corespunztor seleciei utilizatorului, n cadrul subrap se vor modifica zonele de
interaciune cu utilizatorul. Astfel, dac utilizatorul selecteaz generarea raportului
general atunci cadrul subrap va afia un buton pentru a lansa n execuie
prelucrarea (vezi figura 12.18). Cadrul inputd permite i schimbarea tipului de
prelucrare (raport sau cutare) prin afiarea a dou butoane radio prin care
utilizatorul poate realiza selecia. Acionarea unuia din aceste butoane radio lanseaz n
execuie funcia afisrap care modific opiunile listei tiprap.
n figura 12.21 este prezentat pseudocodul funciei afisrap().
Pseudocodul AFISRAP
AFISRAP BEGIN
Parametrii: t- valoare intreaga
IFAFIS IF (t==0)
//afisare tip raport
//fixeaza trei optiuni in lista tiprap
tiprap.optiune[0]=General
tiprap.optiune[1]=Materii
tiprap.optiune[2]=Restantieri
IFAFIS ELSE
tiprap.optiune[0]=Student
tiprap.optiune[1]=Restantieri
IFAFIS ENDIF
AFISRAP END

Selectarea unei opiuni din lista tiprap va duce la afiarea n cadrul subrap a
elementelor de interfa ce asigur introducerea informaiilor necesare pentru fiecare tip
de prelucrare i lansarea n execuie a prelucrrii respective. Astfel, se gestioneaz
evenimentul onChange care va executa funcia afis_subopt. Pseudocodul funciei
afis_subopt() este prezentat n figura 12.22.
Pseudocodul AFIS_SUBOPT
AFIS_SUBOPT BEGIN
//determinarea indexului optiunii selectate
ir=tiprap.selectedIndex
IF1 IF (raport[0].checked)
CASE1 CASE (ir)
0:DO afis_subrap0
1:DO afis_subrap1
2:DO afis_subrap2
CASE1 ENDCASE
IF1 ELSE
CASE2 CASE (ir)
0:DO afis_subrap3
1:DO afis_subrap4
CASE2 ENDCASE
IF1 ENDIF
AFIS_SUBOPT END
Figura 12.21
Figura 12.22

440

Funcia afis_subrap0 construiete interfaa cu utilizatorul pentru prelucrarea datelor
n cazul generrii raportului general (figura 12.20). Interfaa va fi afiat n
frame-ul subrap i conine ca element de aciune doar butonul Executa care prin
apsare va apela funcia executaRG() care va afia raportul general (vezi
pseudocodul din figura 12.23).

Pseudocodul AFIS_SUBRAPO, EXECUTARG
AFIS_SUBRAP0 BEGIN
//afiarea informaiilor despre raport
subrap.WRITE Raport General
subrap.WRITE Afiseaza toata grupa si toate notele
genereaza html pentru form f2 ce contine butonul executa
IF1 IF (clic pe butonul Executa)
DO executaRG
IF1 ENDIF
AFIS_SUBRAP0 END

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

Interfaa va fi afiat n frame-ul subrap i conine dou liste de opiuni i butonul
Executa. Lista de opiuni smaterii conine lista materiilor, iar lista sordine
permite selecia modului de ordonare al studenilor: ordinea alfabetic sau ordinea dat
de notele la materia respectiv.
Figura 12.23
Figura 12.24

441

Butonul Execut prin apsare va apela funcia executaRM() care va afia
raportul pe materii (vezi figura 12.25). Afiarea studenilor se va face n funcie
de ordinea impus de vectorul asociat vord. Pentru afiarea studenilor n funcie de
nume, ordinea este cea n care sunt pstrate n vectorul lista_stud informaiile
despre studeni. n cazul ordonrii descresctoare dup note, vord va conine indicii
studenilor din vectorul list_stud n ordinea descresctoare a notelor. Astfel, vord[0] va
conine indicele elementului din lista_stud al studentului care are nota cea mai mare
la materia respectiv. Algoritmul de sortare implementat este un algoritm clasic
bubble-sort (vezi pseudocodul din figura 12.26).
Pseudocodul AFIS_SUBRAP1, EXECUTARM
AFIS_SUBRAP1 BEGIN
subrap.WRITE Raport pe Materii
generaza html pentru forma f2
DO executaRG
IF1 ENDIF
AFIS_SUBRAP1 END

EXECUTARM BEGIN
//afiarea raportului pe materii al studentilor din grupa
subrap.WRITE Raport pe Materii
//determina selectiile utilizatorului
imat=smaterii.selectedIndex;
iord=sordine.selectedIndex;
//aloca spatiu pentru vectorul vord
new vord
//se plaseaza ordinea initiala in vector
FOR1 FOR(i=0;i<vord.length;i++)
vord[i]=i;
FOR1 ENDFOR
Figura 12.25
Figura 12.26

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;
WHILE1 WHILE (neordonat)
neordonat=false;
FOR2 FOR(i=0;i<lista_stud.length-1;i++)
IF3 IF(lista_stud[vord[i]].Note[imat]<
lista_stud[vord[i+1]].Note[imat])
j=vord[i];
vord[i]=vord[i+1];
vord[i+1]=j;
neordonat=true;
IF3 ENDIF
FOR2 ENDFOR
WHILE1 ENDWHILE
// afiseaza studenti
subrap.WRITE lista_stud[vord[i]].nume
subrap.WRITE lista_stud[vord[i]].prenume
subrap.WRITE lista_stud[i].Note[imat]
FOR3 ENDFOR
IF2 ENDIF
EXECUTARM END
Funcia afis_subrap2 construiete interfaa cu utilizatorul pentru generarea raportului
ce afieaz studenii restanieri (figura12.27).

Figura 12.26
( continuare)
Figura 12.27
Interfaa conine doar butonul Executa care prin apsare va apela funcia
executaRR() care va afia raportul studenilor restanieri (vezi figura 12.28).

443

Pentru afiarea studenilor pe materii se apeleaz funcia afis_restantieri care
are ca parametru indicele materiei ce urmeaz a fi prelucrat (vezi pseudocodul din
figura 12.29).
Pseudocodul AFIS_SUBRAP2
AFIS_SUBRAP2 BEGIN
subrap.WRITE Raport Restantieri
generaza html pentru forma f2 ce conine butonul Executa
DO EXECUTARR
IF1 ENDIF
AFIS_SUBRAP2 END
EXECUTARR BEGIN
//afiarea raportului restantieri pe materii
subrap.WRITE Raport Restantieri
fraport.WRITE "Materia:",materii[j],
DO afis_restantieri(j);
FOR1 ENDFOR
EXECUTARR END

AFIS_RESTANTIERI BEGIN
Parametrii
imat- indicele materiei
nrest=0;
//determina numarul de restantieri
IFF IF (lista_stud[i].Note[imat]<5)
nrest++;
IFF ENDIF
FOR2 ENDFOR
IF2 IF(nrest>0)
//afiseaza in tabel studentii restantieri
fraport.WRITE "Numar restantieri:",nrest
fraport.WRITE "NR. Nume Prenume Nota
Figura 12.28
Figura 12.29

444
k=0;
IF3 IF(lista_stud[i].Note[imat]<5)
fraport.WRITE i+1, lista_stud[i].Nume
fraport.WRITE lista_stud[i].Prenume
IF4 IF(lista_stud[i].Note[imat]==0)
fraport.WRITE"absent"
IF4 ELSE
fraport.WRITE
lista_stud[i].Note[imat]
IF4 ENDIF
IF3 ENDIF
FOR3 ENDFOR
IF2 ELSE
fraport.WRITE "Nu esista restantieri"
IF2 ENDIF
AFIS_RESTANTIERI END
Funcia afis_subrap3 construiete interfaa cu utilizatorul pentru cutarea unui
student dup nume, prenume (figura 12.30).

Interfaa conine dou zone de editare (Nume student, Prenume student)
pentru specificarea numelui, respectiv prenumelui studentului cutat i butonul
Executa. Prin acionarea butonului Executa se va apela funcia executaCS()
(vezi pseudocodul prezentat n figura 12.31) care va afia rezultatele studentului dorit sau
un mesaj de eroare dac acesta nu exist n baza de date (vezi figura 12.32).
Pseudocodul AFIS_SUBRAP3, EXECUTACS
AFIS_SUBRAP3 BEGIN
subrap.WRITE Cautare rezultate student
DO EXECUTACS
IF1 ENDIF
AFIS_SUBRAP3 END
EXECUTACS BEGIN
//afiarea rezultatelor unui student
//transferul datelor introduse in zonele de editare
sn=snume.value;
pn=spnume.value;
fraport.WRITE"Cautare rezultate student"
IF2 IF(sn!="")
Figura 12.29
(continuare)
Figura 12.30
Figura 12.31

445
IF3 IF(pn!="")
// determina numarul de studenti ce au numele
// si prenumele specificat
nr=0;
IF4 IF((lista_stud[i].Nume==sn)&&
(lista_stud[i].Prenume==pn))
Nr=nr+1
IF4 ENDIF
FOR1 ENDFOR
IF5 IF(nr>0)
fraport.WRITE "NR. Nume Prenume
fraport.WRITE materii[i]
IF6 IF((lista_stud[i].Nume==sn)&&
(lista_stud[i].Prenume==pn))
fraport.WRITE i+1, lista_stud[i].Nume
fraport.WRITE lista_stud[i].Note[j]
FOR4 ENDFOR
IF6 ENDIF
FOR3 ENDFOR
FOR2 ENDFOR
IF5 ELSE
fraport.WRITE "Nu exista nici un student cu numele:",
sn," Prenumele:",pn
IF5 ENDIF
IF3 ELSE
//determina numarul de studenti cu numele sn
nr=0;
IF7 IF(lista_stud[i].Nume==sn)
nr=nr+1
IF7 ENDIF
FOR5 ENDFOR
IF8 IF(nr>0)
fraport.WRITE "Numar Studenti:",nr
fraport.WRITE "NR. Nume Prenume "
fraport.WRITE materii[i]
FOR6 ENDFOR
IF9 IF(lista_stud[i].Nume==sn)
fraport.WRITE i+1, lista_stud[i].Nume,
fraport.WRITE lista_stud[i].Note[j]
FOR8 ENDFOR
IF9 ENDIF
FOR7 ENDFOR
IF8 ELSE
fraport.WRITE "Nu exista nici un student
cu numele:", sn
IF8 ENDIF
IF3 ENDIF
IF2 ENDIF
EXECUTACS END

Figura 12.31
(continuare)

446
sau

Funcia afis_subrap4 construiete interfaa cu utilizatorul pentru generarea afirii
studenilor restanieri la o singur materie(figura 12.33).

Interfaa conine o list de opiuni, (smaterii), pentru selecia materiei dorite i
butonul Executa care prin apsare va apela funcia executaCR() ce va afia
raportul studenilor restanieri la materia respectiv(vezi figura 12.34).

Pentru afiarea studenilor restanieri la o materie se apeleaz funcia
afis_restantieri pe care am prezentat-o anterior (vezi pseudocodul prezentat n
figura 12.35).
Pseudocodul AFIS_SUBRAP4, EXECUTACR
Figura 12.32
Figura 12.33
Figura 12.34

447
AFIS_SUBRAP4 BEGIN
subrap.WRITE Restantieri la o Materie
DO EXECUTACR
IF1 ENDIF
AFIS_SUBRAP4 END

EXECUTACR BEGIN
//determinarea indexului materiei selectate
imat=smaterii.selectedIndex;
subrap.WRITE CAUTARE RESTANTIERI LA MATERIA:
subrap.WRITE materii[imat]
DO afis_restantieri(imat);
EXECUTACR END

n figurile 12.36, 12.37, 12.38, 12.39, 12.40 sunt prezentate, pentru fiecare cadru
n parte, documentele HTML complete.
Codul HTML pentru interfaa cu utilizatorul
<html>
<head>
<title>Intranet baza de date cu studenti</title>

</script>
</head>
<frameset rows="10%,30%,60%">
<frame scrolling="no" noresize src="btitlu.html" name="titlu">
<frameset cols="30%,70%">
<frame scrolling="no" noresize src="tipraport.html" name="inputd">
<frame src="btiprap0.html" name="subrap">
</frameset>
<frame src="bsit.html" name="fraport">
</frameset>
</html>

Codul HTML pentru cadrul titlu
<html>
<head>
</head>
<body>
<center>
<font size=+3 color=green> Intranet- Baza de Date cu Studenti</font>
</center>
</body>
</html>

Codul HTML pentru cadrul inputd
Figura 12.36
( continuare)
Figura 12.37

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

parent.subrap.document.writeln("<font color=green size=+1>Raport Restantieri</font>");
parent.subrap.document.writeln("<p>Afiseaza Studentii Restantieri din Grupa</p>");
parent.subrap.document.writeln("<p><input type=\"button\" value=\"Executa\"
onClick=\"parent.executaRR();\">");
Figura 12.38

454
}

parent.subrap.document.writeln("<font color=green size=+1>Cautare Rezultate Student</font>");
parent.subrap.document.writeln("<table border=\"0\"><tr><td>Nume student:");
parent.subrap.document.writeln("<td><input type=\"text\" name=\"snume\" size=\"20\">");
parent.subrap.document.writeln("<tr><td>Prenume student:");
parent.subrap.document.writeln("<td><input type=\"text\" name=\"spnume\" size=\"20\">");
onClick=\"parent.executaCS();\">");
}

parent.subrap.document.writeln("<font color=green size=+1>Cautare Restantieri la o
Materie</font>");
parent.subrap.document.writeln("<table border=\"0\"><tr><td>Selecteaza materia");
parent.subrap.document.writeln("</td></tr>");
parent.subrap.document.writeln("<tr><td><select size=\"1\" name=\"smaterii\">");
for(i=0;i<parent.materii.length;i++)
parent.subrap.document.writeln("<option>",parent.materii[i],"</option>");
onClick=\"parent.executaCR();\">");
}

function afisrap(t) {
if(t==0) {
f1.tiprap.options[0].text ="General";
f1.tiprap.options[1].text ="Pe Materii";
f1.tiprap.options[2].text ="Restantieri";
}
else {
f1.tiprap.options[0].text ="Dupa Student";
f1.tiprap.options[1].text ="Restantieri";
f1.tiprap.options[2].text ="";
}
f1.tiprap.selectedIndex=0;
afis_subopt(this);
}
Figura 12.38
(continuare)

455
function afis_subopt(t){
var ir=f1.tiprap.selectedIndex;
if(f1.raport[0].checked) { // ESTE SELECTAT RAPORT
switch(ir) {
case 0:
afis_subrap0();
break;
case 1:
afis_subrap1();
break;
case 2:
afis_subrap2();
}
window.status="Tip Raport";
}
else { // ESTE SELECTAT CAUTARE
switch(ir) {
case 0:
afis_subrap3();
break;
case 1:
afis_subrap4();
break;
}
window.status=Tip Cautare;
}
}
//
</script>
</head>

<body>
<center>
<form name=f1>
<p><font size=+2 color=green>Tipul Prelucrarii</font>
<p>
<table border=0>
<tr><td><input type=radio name=raport checked value=0 onClick=if (this.checked)
{afisrap(0)} >
<b>RAPOARTE</b>
<td>
<input type=radio name=raport value=1 onClick=if (this.checked) {afisrap(1)} >
<b>CAUTARE</b></tr>
<tr><td colspan=2><select size=3 name=tiprap onChange=afis_subopt(this)>
<option selected>General</option>
<option>Pe Materii</option>
<option>Restantieri</option>
</select>
</table>
</center>
</form>
</body>
</html>
Figura 12.38
(continuare)

456
Codul HTML pentru cadrul subrap
<html>
<head>
<title>Aplicatie</title>
<head>
<body>
<font color=green size=+1>Raport general</font>
<hr>
<p>Afiseaza toata grupa si toate notele</p>
<form name="f2">
<input type="button" value="Executa" onClick="parent.executaRG();">
</form>
</body>
</html>

Codul HTML pentru cadrul fraport
<html>
<head>
</head>
<body>
<h3>Rezultatele studentilor</h3></body>
</html>

Tem

Testai-v cunotinele
1. Cum creai obiecte fiu personalizate. Exemple.
2. Cum creai matrici de obiecte personalizate?
3. Care sunt navigatoarele care recunosc obiectele personalizate?
4. Care este cuvntul cheie JavaScript care permite crearea unei instane a unui
obiect:
instance;
object;
new.
5. Care este semnificaia cuvntului cheie this?
obiect curent;
script curent;
nici a, nici b.
6. Care este diferena dintre o funcie constructor i o funcie ordinar?

JavaScript
Figura 12.39
Figura 12.40

457
7. Cum putei avea acces la obiectele pe care le-ai creat?
8. Care este diferena dintre o metod i o funcie?
9. Care sunt etapele pe care trebuie s le parcurgei pentru a defini o metod
pentru un obiect personalizat?

Vizitai site-urile
http://www.wdvl.com
http://msdn.microsoft.com/library
http://www.databasejournal.com
http://hotwired.lycos.com/webmonkey/programing

,
t
,

BIBLIOGRAFIE

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

Javascript

Încărcat de

Informații document

Drepturi de autor

Formate disponibile

Partajați acest document

Partajați sau inserați document

Opțiuni de partajare

Vi se pare util acest document?

Este necorespunzător acest conținut?

Drepturi de autor:

Formate disponibile

Javascript

Încărcat de

Drepturi de autor:

Formate disponibile

J avaScript

Un eveniment JavaScript este o aciune care se produce n raport cu un element

iunii, care reprezint o expresie logic ce se

Bucla este executat ct timp CondiieContinuare returneaz TRUE.

Instruciunile (din corpul buclei (cod JavaScript ) sunt executate ct timp

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

Bucla listeaz proprietile unui obiect. Variabila de control a buclei

Execut secvena de instruciuni dintre acolade (cod JavaScript) dac

Execut prima secven de instruciuni (cod1 JavaScript) dintre acolade

Switch controleaz coninutul unei variabile cu una sau mai multe

Instruciunea este utilizat n buclele: while, do ... while,

Provoac o ieire imediat din cele trei bucle: while, do

Modific temporar contextul punnd n eviden un obiect la care se fac

Se poate crea un ir de caractere vid sau transmind ca argument

Conine lungimea irului de caractere.

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

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

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

Atribuie irului de caractere culoarea indicat n tag-ul <font> de

Atribuie irului de caractere dimensiunea indicat cu tag-ul <font> de

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

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

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

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

Returneaz valoarea codului Unicode al caracterului situat n poziia

Creeaz o nou matrice. Noua matrice poate fi vid, dimensiunea sa

Conine numrul de elemente al unei matrici. Putei modifica valoarea

Metoda este utilizat pentru concatenarea a dou matrici.

Metoda suprim primul element al unei matrici. Elementul de rang 1

Metoda extrage elementele unei matrici i returneaz o nou matrice care

Metoda returneaz coninutul unei matrici sub forma unui ir de

Metoda insereaz la nceputul matricii elementele pe care le menionai.

matrice.sort() sau metoda sort fr argument sorteaz

Variabila va conine modelul expresiei regulate transmis ca parametru

Returneaz textul situat la dreapta ultimului text gsit. Echivalent cu

Returneaz ultimul text gsit. Echivalent cu lastMatch.

Returneaz irul de caractere n care a fost efectuat cutarea. Echivalent cu

Returneaz textul situat la stnga ultimului text gsit. Echivalent cu

Returneaz textul gsit prin ultima sub-expresie a modelului utilizat. Echivalent

$1, $2, , $9 returneaz primele 9 sub-iruri ale modelului.

Returneaz true dac atributul i (n cursul cutrii nu se face deosebire ntre

Returneaz poziia primului caracter al textului gsit.

Returneaz irul de caractere n care a fost efectuat cutarea.

Metoda returneaz ziua din lun.

Metoda returneaz un numr care corespunde zilei sptmnii: 0 pentru

Arguments este un subobiect al obiectului (intern) Function. Atunci

Returneaz coninutul complet al funciei.

Returneaz numrul de argumente transmise funciei atunci cnd ea este

Se declaneaz atunci cnd ncrcarea unui element este anulat.

Se declaneaz atunci cnd elementul devine element activ.

Se declaneaz dup imprimarea unui element.

Se declaneaz dup actualizarea datelor surs ale elementului.

Se declaneaz nainte ca elementul s devin element activ.

Se declaneaz nainte ca datele s fie copiate (Copy).

Se declaneaz nainte ca datele s fie mutate (Cut).

Se declaneaz nainte ca un alt element s devin activ n

Se declaneaz nainte ca elementul s primeasc focus-ul pentru a

Se declaneaz nainte ca elementul int s primeasc datele

Se declaneaz nainte ca datele elementului s fie imprimate sau

Se declaneaz nainte ca datele surs ale elementului s fie

Se declaneaz atunci cnd elementul pierde focus-ul.

Se declaneaz atunci cnd datele se schimb n obiectul surs.

Se declaneaz atunci cnd elementul pierde focus-ul iar coninutul

Se declaneaz atunci cnd se execut clic pe un element.