Javascript

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

Tipurile de date i valorile speciale JavaScript
Variabile i funcii. Aplicaii
Crearea automat a script-urilor cu Dreamweaver MX
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
Conversaia 1
JavaScript i HTML 4.0, XHTML, XML
n aceast conversaie:
f
f
f
f
f
f
f
f
f
f
f
f
Stilul de via Web

Cum inserai un script n documentele (X)HTML, Dreamweaver MX i XML?
Tem
Stilul de via Web

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

care l ofer Web-ul.
9 Interactivitatea funcional Se refer la abilitatea de a executa sarcini

specifice i funcii ntr-un site Web.
9 Interactivitatea comunitar Permite vizitatorilor s se ntlneasc i s
interacioneze unul cu altul. Interactivitatea
comunitar este adesea considerat o
strategie promoional online.
Interactivitatea v oblig s apelai la un limbaj de programare sau un limbaj de

script.
Limbajele de script destinate Web-ului permit combinarea script-urilor i a
instruciunilor (X)HTML pentru a crea pagini Web interactive.
Care este deosebirea ntre un limbaj de script i un limbaj de programare?
Totul depinde de cel cruia v adresai: noi vorbim n aceast carte de limbajul
de script JavaScript, dar nimeni nu v mpiedic s menionai n CV-ul
dumneavoastr, n lista de limbaje pe care le cunoatei i limbajul de
programare JavaScript, evident dup ce ai terminat de citit aceast carte!
JavaScript nu este singurul limbaj pentru Web.
Java, un limbaj de programare orientat obiect creat de Sun, de exemplu, n

anumite situaii este mult mai bun dect JavaScript. Chiar dac numele lor i
cteva instruciuni se aseamn, Java i JavaScript sunt limbaje total diferite.
VB Script (Visual Basic Scripting Edition) este rspunsul lui Microsoft la

JavaScript. Ca i JavaScript, VB Script este un limbaj de script simplu. El are la
baz sintaxa Visual
Basic, un limbaj de programare Windows foarte
rspndit. Script-urile VB Script pot fi direct incluse n documentele (X)HTML.

VB Script prezint mari avantaje pentru cei care cunosc deja Visual Basic.
VB Script poate fi de asemenea integrat cu Active X, standardul Microsoft
pentru integrarea aplicaiilor n paginile Web.
5
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?).

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

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,
9 JavaScript nu poate citi, scrie, crea i terge fiiere de pe hard disc;
9 JavaScript nu poate executa operaii n reea;
7
9 JavaScript nu poate crea aplicaii autonome. Pentru a scrie astfel de
aplicaii va trebui s utilizai unul din limbajele clasice: Java, C sau C++.
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,
navigator,
Option(),
screen,
history,
Objects
(n
password,
select,
location,
MimeType,
general),
plugins,
submit,
option,
radio,
text,
reset,
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
Figura 1.1
String
length
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,

Figura 1.2
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(),
cos(),
exp(),
floar(),
atan(),
log(),
ceil(),
max(),
min(), pow(), random(), round(), sin(),

Figura 1.3
sqrt(), tan()
10
n figura 1.4 sunt prezentate cteva exemple de metode ale unor obiecte ale
navigatorului (vezi Conversaia 7).
Figura 1.4
Denumire obiect navigator
Metode
Button
blur(), click(), focus()
Checkbox
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.
Figura 1.5
<script language = JavaScript type = text/JavaScript>

a=4;
b=13;
c=a+b;
document.write (Suma: +c);
</script>
Remarc. Instruciunile limbajului JavaScript sunt prezentate n Conversaia 3.
Funcie
O funcie este un grup de instruciuni tratate ca o singur entitate. Sau, o funcie
este un obiect care conine cod executabil. Spre deosebire de metode, funciile
nu sunt asociate nici unui obiect particular. Funciile pot fi comparate cu
electronii liberi care pot fi reutilizai n orice circumstan. Numeroase funcii
sunt interne: ele sunt incluse n limbajul JavaScript (Exemple: eval();
parseFloat(); parseInt()).
Nu trebuie s v surprind urmtoarea afirmaie: chiar dumneavoastr putei s
v creai propriile funcii!

Ceea ce este nemaipomenit!
n figura 1.6 se prezint un exemplu de funcie definit de utilizator: calculul
diametrului unui cerc de raz r.
11
Figura 1.6
<script language = JavaScript>

function diametru (r)
{
temp = 2*r;
return temp;
}
</script>
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: stingei lumina pentru a demonstra c nu
suntei acas!
Un eveniment JavaScript este o aciune care se produce n raport cu un element
(fereastr, document, un buton).
n JavaScript numeroase evenimente (clic, dublu clic etc.) sunt provocate de
utilizator. Alte evenimente nu privesc direct utilizatorul.
Iat o list cu cele mai frecvente evenimente JavaScript:
9 utilizatorul ncarc o pagin Web n browser;
9 utilizatorul oprete ncrcarea paginii Web n browser;
9 utilizatorul a introdus sau a modificat coninutul unui cmp de text al
unui formular;
9 utilizatorul a executat clic pe o imagine sau pe un buton;
9 utilizatorul a expediat coninutul unui formular sau l-a reiniializat.
Fiecare eveniment este asociat unui obiect.
12
Fiecare eveniment are propriul su nume.
De exemplu, evenimentul MouseOver se produce atunci cnd mouse-ul se
poziioneaz deasupra unui obiect. Dac mouse-ul trece pe deasupra unui link
(legtur), evenimentul MouseOver este expediat gestionarului de evenimente
al acestei legturi, dac exist.
n figura 1.7 sunt prezentate cteva exemple de evenimente JavaScript dintre
cele mai cunoscute.
Figura 1.7
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:
9 Poate ai observat combinaia de majuscule i minuscule (exemplu: onMouseOver,
onMouseOut). Este vorba de notaia standard a gestionarilor de evenimente: on este
scris ntotdeauna cu minuscule, iar iniiala fiecruia din cuvintele evenimentului, cu
majuscule.
9 Evenimentele i gestionarii de evenimente JavaScript sunt tratate n detaliu n
Conversaia 6.
13
Variabile
Variabilele reprezint un element fundamental al limbajului JavaScript. Ele pot
conine: un numr, un ir de caractere sau un obiect.
Fiecare variabil poart un nume care respect anumite reguli de sintax.
n figura 1.8 se prezint cteva exemple de nume de variabile JavaScript
(valide).
Figura 1.8
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:
9 sintaxa JavaScript;
9 DOM-ul (Document Object Model modelul obiectelor documentului).
Sintaxa definete un ansamblu de reguli care trebuie respectate atunci cnd
scriei cod JavaScript. Aceste reguli nu sunt numeroase. Este bine s le
cunoatei ca apoi s le aplicai. Nu tiu cum este mai bine: s stai cu regulile n
cap sau cu capul n reguli! Procedai cum credei!
DOM-ul se refer la componentele paginii Web, obiectele pe care le putei

accesa i pe care le putei manipula cu ajutorul limbajului JavaScript.
Remarc. Obiectele interne, obiectele navigatorului i obiectele personalizate sunt tratate n
detaliu, n Conversaia 4, Conversaia 5, Conversaia 7, Conversaia 12.
Trebuie s v nsuii foarte bine DOM-ul JavaScript pentru a putea scrie un script
JavaScript.
14
Cum inserai un script ntr-un document (X)HTML?
Extinderea paginilor (X)HTML prin folosirea limbajului JavaScript confer paginilor
Web mai mult putere, iar (X)HTML-ului mai mult flexibilitate. JavaScript, prin
inserarea unui script n documentele (X)HTML existent permite programatorilor
s creeze pagini Web mult mai dinamice.
Elementul script
Script-urile JavaScript sunt inserate ntr-un document (X)HTML cu elementul
<script> ... </script>.

Elementul script este alctuit din: tag-ul de nceput <script>, coninutul
propriu-zis i tag-ul de sfrit </script>.
Tag-ul <script> conine urmtoarele atribute:
9 type
indic tipul limbajului de script. Valoarea sa trebuie s fie

un Internet
Media
Type (un tip MIME), de
exemplu text/JavaScript sau text/vbscript

(figura 1.9).
Figura 1.9
<script type=text/JavaScript>
...cod JavaScript
</script>
9 language identific limbajul de script i facultativ versiunea (vezi
figura 1.10).
<script type=text/JavaScript language=JavaScript>

...cod JavaScript
Figura 1.10
</script>
9 src
facultativ, precizeaz URL-ul fiierului extern care conine

script-ul (vezi figura 1.11).
<script type=text/JavaScript src=functie.js>

...cod JavaScript
Figura 1.11
</script>
15
Elementul noscript
Incapacitatea navigatorului de a prelucra un script poate avea trei cauze: fie el
nu tie s prelucreze script-urile n general; fie el nu recunoate limbajul
desemnat prin atributul type; fie utilizatorul a dezactivat (nu are ncredere!)
prelucrarea script-urilor. Din acest motiv se utilizeaz elementul <noscript>
... </noscript> n interiorul cruia putei plasa elementele (X)HTML care

vor fi ignorate de navigatoarele capabile s exploateze un script (vezi figura
1.12).
<script type=text/JavaScript>
cod JavaScript
</script>
<noscript>
Regretm c navigatorul dumneavoastr nu recunoate script-urile!
Figura 1.12
</noscript>
Metode de inserare a script-urilor ntr-un document (X)HTML

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

Cu JavaScript putei crea i manipula obiectele DOM XML. Pentru a construi
pagini Web interactive cu XML folosii tehnicile specifice ale DOM-ului XML i ale
limbajului JavaScript.
16
n lucrarea Liviu
Dumitracu, XML, Editura Universitii
din Ploieti, n conversaia 9 se prezint n detaliu modul de inserare a

script-urilor n documentele XML.
Consultai de asemenea urmtoarele resurse:
9 Floarea Nstase, Pavel Nstase, Tehnologia aplicaiilor Web (XML, DOM,
ASP), Editura Economic 2002, Bucureti
9 http://www.dannyg.com/examples/xmltable/index.html
Scriei un script care afieaz mesajul: mi place s fiu ntotdeauna aa cum sunt.
Pentru inserarea script-ului ntr-un document (X)HTML utilizai toate cele patru metode pe
care le-am prezentat anterior.
Metoda 1
Iat cum procedm pentru a insera (cu Notepad) script-ul n corpul documentului
(X)HTML. Mesajul va fi afiat cu italice.
Dac dorii s inserai un script scurt, reprezentat prin cteva linii de cod JavaScript, cel
mai simplu este s-l plasai n corpul paginii.
1. Creai documentul (X)HTML (figura 1.13) cu Notepad.
Figura 1.13
2. Plasai elementul script n locul n care dorii s apar script-ul
dumneavoastr (figura 1.14).
17
Figura 1.14
3. Introducei n tag-ul de deschidere <script> atributul type pentru a preciza
tipul MIME al script-ului i atributul language pentru a preciza limbajul de
script (JavaScript), figura 1.15.
Figura 1.15
4. Inserai tag-ul de comentariu XHTML standard ( i plasai //
naintea tag-ului de sfrit de comentariu XHTML pentru a ascunde sfritul de
comentariu de interpretorul JavaScript (figura 1.16).
Figura 1.16
Remarc. Liniile de comentariu au fost inserate pentru a ascunde script-ul de navigatoarele care
nu-l recunosc.
5. Inserai instruciunea JavaScript document.write() care afieaz mesajul:

mi place s fiu ntotdeuna aa cum sunt. n pagina Web
(atunci cnd ea este ncrcat!), figura 1.17.
Figura 1.17
18
Remarci:
9 JavaScript ofer mai multe soluii pentru afiarea informaiilor, una dintre cele mai simple
fiind instruciunea document.write.
9 Instruciunea document.write (vezi Conversaia 7) permite afiarea unui text, a
valorilor numerice i a altor informaii. n msura n care programul dumneavoastr
JavaScript va fi inserat ntr-o pagin Web, rezultatul va fi afiat direct n pagin.
9 Tag-urile (X)HTML, <i> de exemplu, sunt plasate ntre ghilimele. Tag-urile (X)HTML nu
sunt interzise n interiorul tag-urilor <script>. Plasate ntre ghilimele, tag-urile
(X)HTML sunt interpretate de ctre navigator ca i cnd ar aparine (X)HTML-ului.
9 Facilitatea de combinare a tag-urilor (X)HTML i a instruciunilor JavaScript reprezint
una din caracteristicile cele mai puternice ale unui navigator care recunoate JavaScript.
n realitate, aceast facilitate constituie esena Web-ului dinamic i interactiv pe care
dumneavoastr urmeaz s-l aplicai.
6. Validai documentul XHTML 1.1 cu aplicaia validator (vezi figura 1.18).
Figura 1.18
7. Inserai codul XHTML care afieaz iconul de conformitate (figura 1.19).
Figura 1.19
8. Afiai pagina Web ntr-un browser (figura 1.20).
Figura 1.20
19
Procedura de creare automat a script-ului cu Dreamweaver MX
Iat cum procedm pentru a crea documentul XHTML pentru EXEMPLUL 1
JAVASCRIPT cu Dreamweaver MX.
1. n grupul de panouri Insert, executai clic pe subpanoul HTML (figura 1.21).
Figura 1.21
2. Executai clic n locul n care dorii s inserai script-ul (figura 1.22).
Figura 1.22
3. Executai clic pe butonul
Figura 1.23
(Script), figura 1.23.
20
Remarc. Se deschide caseta de dialog Script (figura 1.24).
Figura 1.24
4. Introducei script-ul (figura 1.25).
Figura 1.25
5. Executai clic pe butonul OK al ferestrei de dialog Script (figura 1.26).
Figura 1.26
21
Remarc. Se insereaz elementul <script> ... </script> (figura 1.27).
Figura 1.27
6. Vizualizai pagina Web ntr-un browser (figura 1.28).
Figura 1.28
Metoda 2
Iat cum procedm pentru a insera (cu Notepad) script-ul n antet-ul paginii, n seciunea
<head> ... </head>.

Seciunea <head> a unei pagini (X)HTML precede seciunea <body>. Tag-urile i
script-urile cuprinse n aceast seciune sunt interpretate ntotdeauna primele. Din acest
motiv n mod frecvent se plaseaz n aceast seciune un script care definete variabilele
i funciile ce urmeaz a fi utilizate de ctre alte script-uri ale paginii.
1. Creai documentul (X)HTML cu Notepad.
2. Plasai tag-urile script n elementul head al documentului (X)HTML (figura
1.29).
22
Figura 1.29
3. Introducei funcia mesaj() (figura 1.30).
Figura 1.30
Remarci:
9 O funcie este un grup de instruciuni tratate ca o singur entitate. Pentru a utiliza o

funcie, va trebuie mai nti s o definii.
9 Funcia mesaj are rolul de a afia (cu italice) mesajul: mi place s fiu ntotdeauna aa
cum sunt. n pagina web.
9 Funcia mesaj ncepe cu cuvntul rezervat function urmat de numele funciei

(mesaj). Dup numele funciei urmeaz parantezele vide (). Dup cum vei vedea mai
trziu, aceste paranteze nu sunt ntotdeauna vide! Acoladele de deschidere ({) i de
nchidere (}) servesc la delimitarea instruciunilor JavaScript care alctuiesc corpul
funciei i permit navigatorului s tie unde ncepe i unde se termin o funcie. n
exemplul nostru, o singur linie de cod JavaScript apeleaz funcia document.write
(o metod a obiectului Document) care permite afiarea cu italice a mesajului mi
place s fiu ntotdeauna aa cum sunt..
4. Apelai funcia mesaj().

Funcia este acum definit i inserat n documentul (X)HTML, dar ...
inutilizabil n acest moment.
Pentru a putea utiliza o funcie, va trebui s-o apelai. Pentru a apela o funcie,
va trebui s utilizai numele su ntr-o instruciune a script-ului (vezi figura 1.31).
23
Figura 1.31
Remarc. Mai multe detalii despre funcii (definire, apel) gsii n Conversaia 2.
5. Validai documentul XHTML 1.1 cu aplicaia validator (vezi figura 1.32).
Figura 1.32
6. Inserai codul XHTML care afieaz iconul de conformitate (figura 1.33).
Figura 1.33
7. Afiai pagina ntr-un browser (figura 1.34).
Figura 1.34
24
Metoda 3
Iat cum procedm pentru a utiliza un fiier extern, n care plasm script-ul pentru
afiarea mesajului indicat.
Dac dorii s utilizai funciile de script n mai multe documente, atunci plasai-le
ntr-un fiier separat (cu extensia .js) pe care-l referii apoi din documentul
dumneavoastr.
Pentru a continua exemplul nostru, creai un script extern, funcie1.js (vezi figura
1.35).
Figura 1.35
Pentru a utiliza acest script extern indicai numele fiierului n atributul src al tag-ului
script (figura 1.36).
Figura 1.36
Remarc. Acelai script poate fi utilizat n mai multe pagini Web diferite.
n figura 1.37 se prezint documentul XHTML complet.
Figura 1.37
25
Validai documentul XHTML 1.1 cu aplicaia validator, inserai codul XHTML care
afieaz icon-ul de conformitate i afiai pagina Web ntr-un browser.
Rezultatul vizualizrii paginii Web n Internet Explorer este ilustrat n figura 1.38.
Figura 1.38
Metoda 4
Iat cum procedm pentru a crea un script care afieaz mesajul indicat cu ajutorul
gestionarului de evenimente onClick.
1. Creai documentul XHTML (figura 1.39).
Figura 1.39
2. Introducei n tag-ul <input /> gestionarul de evenimente onClick (vezi
figura 1.40).
Figura 1.40
Remarci:
9 Nu este obligatoriu ca toate script-urile JavaScript s se gseasc n interiorul tag-urilor

<script> ... </script>. Putei apela, de asemenea la script-uri sub forma
gestionarilor de evenimente, care indic navigatorului cum s reacioneze atunci cnd se
produc anumite evenimente.
26
9 Gestionarii de evenimente sunt funcii puternice JavaScript. Din fericire, ele sunt uor de
programat. Uneori este suficient o singur instruciune pentru a-l activa.
9 Fiecare eveniment are propriul su nume, de exemplu click. Pentru a defini un

gestionar de evenimente, adugai on la nceputul numelui evenimentului (de exemplu,
onClick).
9 Gestionarul de evenimente onClick este activat atunci cnd se execut clic pe
butonul logo. Gestionarul de evenimente onClick este plasat n interiorul tag-ului
<input /> al formularului, ca un atribut al acestui tag.
9 Instruciunea JavaScript care reacioneaz la eveniment trebuie s fie plasat ntre
ghilimele. De cele mai multe ori aceast instruciune va fi o funcie, n msura n care
funciile au avantajul de-a avea un nume precis, semnificativ i de a conine mai multe
instruciuni.
9 Obiectul Window conine trei metode (alert, confirm, prompt) practice
pentru afiarea mesajelor i interactivitatea cu utilizatorul. Metoda alert() afieaz o
caset de dialog de avertizare. Ea servete pentru transmiterea informaiilor
utilizatorului.
9 Metoda alert() este prezentat n detaliu n Conversaia 2.
3. Validai documentul (X)HTML 1.1 cu aplicaia validator (vezi figura 1.41).
Figura 1.41
4. Inserai codul XHTML care afieaz icon-ul de conformitate

Figura 1.42
27
Aplicaie
Modificai documentul XHTML din figura 1.40 astfel nct funcia apelat din
gestionarul de evenimente onClick s fie programat ntr-un script situat n seciunea
<head> a documentului (figura 1.43).
Figura 1.43
Rezultatul execuiei script-ului este prezentat n figura 1.44.
Figura 1.44
Figura 1.44
(continuare)

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:
9 un editor de text (simplu);
9 un navigator.
Remarc. nainte de a v lansa n provocarea JavaScript pe care v-am lansat-o, v sugerm s
v formai un background (X)HTML care s cuprind: tag-urile (X)HTML, cadrele i n mod
special formularele. Consultai urmtoarea list de site-uri:
www.htmlreference.com
www.w3.org
www.w3.org/TR/2001/REC-xhtml11-20020531/
JavaScript i navigatoarele
Ca i documentele (X)HTML, script-urile JavaScript au nevoie de un navigator
pentru a fi afiate. Dar, navigatoarele nu interpreteaz instruciunile n acelai
mod.
(X)HTML are puine probleme, dar consecinele unei incompatibiliti JavaScript
pot fi semnificative.
La ora actual, dou navigatoare domin piaa: Netscape i Microsoft Internet
Explorer. Cele dou navigatoare rmn n continuare; nu uitai acest lucru atunci
cnd v creai propriile pagini.
Remarc. JavaScript 1.5, nu este recunoscut oficial dect de Netscape 6.0 i de Internet Explorer
5.5 i urmtoarele.
29
Dup cum am menionat, JavaScript nu este interptetat n aceeai manier de
ctre toate navigatoarele. Incompatibilitatea se manifest n urmtoarele moduri:
9 ignorare un element de cod nu este vzut de navigator, i-n
consecin nu este interpretat;
9 eroare un element de cod provoac o eroare ntruct sintaxa nu este
recunoscut de navigator;
9 interpretare un element poate fi interpretat diferit de ctre navigator.
Ideal ar fi o compatibilitate cu toate versiunile tuturor navigatoarelor. Dar, este
aproape imposibil. Totui, JavaScript poate detecta versiunea navigatorului, ceea
ce permite ca anumite blocuri de cod s poat fi prevzute pentru fiecare
navigator. Dar aceast soluie nu este ntotdeauna realist.
30
JavaScript 1.5
Dup prima sa versiune (JavaScript 1.0) lansat n anul 1995 de ctre Netscape
(Netscape 2.0) JavaScript a evoluat considerabil.
Exist n prezent cinci versiuni: 1.0, 1.1, 1.2, 1.3 i 1.5 fiecare dintre acestea
aducnd mbuntiri importante n raport cu precedentele.
Remarc. La nceput (anul 1995), JavaScript se chema Live Script. El a fost rebotezat JavaScript
pentru a evoca marketingul comun cu limbajul Java. JavaScript este primul limbaj de script
dezvoltat pentru Web.
n paralel, Microsoft a dezvoltat propriul su limbaj JavaScript denumit JScript

n care se regsete cea mai mare parte a elementelor limbajului de origine la
care a adugat propriile sale specificaii.
Rezultatul: JavaScript nu este un standard. Navigatoarele

Netscape ignor specificaiile JScript iar Internet Explorer ignor pe cele ale lui
JavaScript. Opera a introdus JavaScript ncepnd cu versiunea 3 a navigatorului
su.
Prezentm n continuare (vezi figura 1.45 i figura 1.46) navigatoarele i
versiunile JavaScript sau JS pe care acestea le recunosc.
Versiunea limbajului JavaScript
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
Figura 1.45 JavaScript 1.5
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
Figura 1.46 JavaScript 5.6
Pentru a pune capt acestor divergene a fost necesar crearea a dou

standarde: ECMA i DOM.
9 ECMA (European Computer Makers Association) a publicat norma ECMA
262, o versiune standardizat a limbajului JavaScript, cunoscut sub
numele de ECMA Script. JavaScript 1.3 este conform cu norma ECMA
262 iar JavaScript 1.5 este conform cu ECMA 262, versiunea 3.
Netscape funcioneaz de asemenea cu ECMA sub JavaScript 2.0,
viitoarea versiune care va corespunde celei de-a patra ediii a normei
ECMA Script. JavaScript 2.0 va constitui o versiune mult mbuntit
fa de precedentele.
9 W3C (World Wide Web Consortium) a creat DOM (Document Object
Model) care descrie elementele paginii Web (obiectele) i modul n care

acestea se relaioneaz.
Remarci:
9 La ora actual dou navigatoare domin piaa: Netscape i Microsoft Internet Explorer,
dar nu trebuie neglijai nici utilizatorii altor navigatoare.
9 Acordai toat atenia navigatorului (i versiunile acestora) care prelucreaz JavaScript.

Atenie la incompatibiliti! Implementarea JavaScript pe Internet Explorer i Netscape
Navigator nu este identic.
JavaScript 2.0
La data redactrii acestei lucrri, JavaScript 2.0 era n curs de lansare. Vom trece
deci de la versiunea 1.5 la 2.0. Motivul principal al dezvoltrii JavaScript este
creterea puterii limbajului, dar i a capacitii sale de a se alinia la alte
standarde precum: C++ i Java.
Ca elemente de noutate ale versiunii JavaScript 2.0 amintim:
9 semne de punctuaie suplimentare:
#; &&=; ->; ..; ; @; ^^; ^^=; !=;
32
9 cuvinte rezervate suplimentare:
abstact;
debugger;
enum;
goto;
native;
protected; synchronized; throws; transient.

Remarc. Dac dorii s cunoatei mai
http://www.mozilla.org/js/language/js20/.
mult
despre
JavaScript
2.0,
vizitai
site-ul
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
documentele
HTML
4.0,
XHTML,
Dreamweaver MX i XML?
5. Care sunt obiectele interne ale limbajului JavaScript?
6. Cnd folosii elementul noscript?
7. Care este procedura de creare automat a script-urilor cu Dreamweaver MX?
8. Care sunt resursele necesare pentru crearea script-urilor JavaScript?
9. Cum se relaioneaz JavaScript cu navigatoarele?
Vizitai site-urile
9 http://JavaScript.Internet.com
9 http://www.pageresource.com/jscript/index4.htm
9 http://www.webreference.com/js
9 http://www.Javasciptcity.com/tutorials/jltuto1.htm
9 http://www.jscripts.com
9 http://javascript.internet.com/books/
9 http://www.dannyg.com/pubs/index.html
Conversaia 2
Variabile i funcii

f
f
f
f
f
f

Variabile i funcii. Aplicaii
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:
9 numerice ntregi;
9 numerice n virgul flotant;
9 caracter;
9 boolean.
Toate celelalte tipuri de date pe care le vei ntlni n limbajul JavaScript sunt
obiecte combinaii ale celor patru tipuri de baz.

De exemplu, irurile de caractere sunt obiecte care reprezint o colecie de
caractere.
Date numerice
Limbajul JavaScript permite specificarea datelor numerice n patru formate
diferite: ntreg, virgul flotant, octal i hexazecimal. Cu siguran, cunoatei
numerele ntregi (integer, n limba englez) i numerele n virgul flotant
(floating point, n limba englez), dar poate cunoatei mai puin pe cele
exprimate n octal i n hexazecimal.
Prin definiie, numerele n octal i n hexazecimal sunt numere ntregi care sunt
exprimate ntr-un sistem de numeraie cu baza 8, respectiv baza 16.
n JavaScript un numr ntreg octal este precedat de zero iar un numr
hexazecimal este precedat de caracterele ox sau OX.
Remarci:
9 JavaScript recunoate numerele ntregi (n baza 10; pozitive sau negative) cuprinse
ntre: +/1.7976931348623157 E 308 i +/5 E 324.
9 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).
Figura 2.1
<script>
x=0x3F;
//x ia valoarea 3F (63 n zecimal)
</script>
9 Un numr ntreg octal ncepe obligatoriu cu 0 (zero) i este compus din urmtoarele
simboluri: 0, 1, 2, 3, 4, 5, 6, 7 (figura 2.2).
Figura 2.2
<script>
x=077;
//x ia valoarea 63 n zecimal
</script>
35
9 Dac suntei cumva nelinitii, nu v alarmai cci sunt foarte rare cazurile n programele
JavaScript care necesit cunotine de sisteme de numeraie n baza 8 sau n baza 16.
Important este s tii c ele exist i le putei recunoate!
9 Un numr n virgul flotant este n baza 10. El poate fi pozitiv sau negativ i poate
conine zecimale. El poate de asemenea include un exponent pozitiv sau negativ, prin E.
Separatorul zecimal este ntotdeauna punctul. JavaScript recunoate numerele cuprinse
ntre: +/1.7976931348623157 E 308 i +/5 E 324 (vezi figura 2.3).
Figura 2.3
<script>
x=8.55201;
x=0.22;
x=.887;
x=-.13;
x=76.885E+9;
</script>
ir de caractere
Cu siguran c dumneavoastr vei lucra foarte mult cu tipul de date ir de
caractere (alfanumerice).
Un ir de caractere (string, n limba englez) este compus din litere, cifre,
simboluri, caractere speciale i secvene de ieire. Coninutul unui ir de
caractere este considerat tot timpul ca fiind text, chiar dac el const din cifre i
simboluri numerice. Un ir de caractere este ncadrat de ghilimele simple sau
duble. Un ir de caractere ncadrat de ghilimele duble poate fi inclus ntr-un ir
ncadrat de ghilimele simple i vice versa.
Aplicaie
Testai irurile de caractere: septembrie; 9.80; Salut, Droopy!; a=01;
anume=minim cu urmtorul script (figura 2.4).
Figura 2.4
Indicaie. Introducei n variabila sir datele de test (irurile de caractere indicate).
36
Remarc. ntr-un ir de caractere putei introduce de asemenea i caractere care nu se gsesc pe
tastatur. n acest caz, utilizai o secven de ieire (escape sequence, n limba englez) care
ncepe ntotdeauna cu \ urmat de un semn sau un cod numeric.
Valori logice sau booleene

Ele sunt n numr de dou: true (adevrat) i false (fals).
Cele dou valori se folosesc pentru a indica dac rezultatul evalurii unei condiii
este adevrat sau nu.
Nu v lsai impresionai de aceti termeni!
n figura 2.5 se prezint un exemplu de utilizare a celor dou valori booleene.
Figura 2.5
<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).
37
Figura 2.6
NaN
NaN (Not a Number, n limba englez) este o valoare special furnizat ca

rezultat de cteva operaii aritmetice (vezi figura 2.7).
Remarc. NaN semnific: acesta nu este un numr!
Figura 2.7
null
null este o valoare special care indic absena valorii (figura 2.8).
Remarci:
9 null nu este egal nici cu zero i nici cu undefined;

9 Valoarea null se poate simula cu operatorul void: var null=void(0).
Figura 2.8
<script>
document.write(figura);
//afieaz null;
</script>
undefined
undefined este o valoare special nedefinit.

Remarci:
9 undefined nu este egal nici cu null nici cu zero.

9 Valoarea undefined este returnat n cazul utilizrii unei variabile care nu a fost
definit sau n cazul unei variabile care a fost declarat dar fr coninut (figura 2.9).
9 Valoarea undefined este des confundat cu null de ctre navigatoare.
38
Figura 2.9
Variabile i funcii
Variabile JavaScript
Spre deosebire de alte limbaje de programare care impun declararea prealabil a
variabilelor, cu specificarea tipului de date pe care acestea le conin (ntregi,
reale, caracter etc.) JavaScript procedeaz puin altfel: o variabil este creat
prin simpla afectare (atribuire) a unei valori, din acel moment ea devenind
disponibil. Dac suntei obinuit cu declararea prealabil a variabilelor, v va
trebui puin timp pentru a v acomoda cu acest mod de lucru rapid i ... cu
puin practic vei aprecia cu siguran aceast virtute deosebit a limbajului
JavaScript.
Tipuri de variabile
n limbajul JavaScript nu trebuie s specificai tipul variabilelor. Atunci cnd creai
o variabil, valoarea pe care o atribuii determin tipul variabilei (vezi figura
2.10).
<script>
a=83;
//a este o variabil de tip numeric
mesaj=Au nnebunit salcmii!;
//mesaj este o variabil de tip ir de caractere
Figura 2.10
</script>
Remarc. O variabil poate s-i schimbe tipul, n mod dinamic, n interiorul aceluiai script (vezi
figura 2.11).
<script>
b=nemaipomenit;
b=10;
Figura 2.11
</script>
39
Numele variabilelor
Fiecare variabil are un nume. Regulile dup care se formeaz numele
variabilelor sunt urmtoarele:
9 numele variabilelor pot conine toate literele alfabetului (majuscule sau
minuscule), cifre (0 la 9) i caracterul de subliniere (_);
9 numele variabilelor nu trebuie s conin spaii i semne de punctuaie;
9 numele variabilelor sunt sensibile la majuscule i minuscule;
9 primul caracter al numelui unei variabile trebuie s fie o liter sau un caracter
de subliniere;
9 nu este o limit teoretic pentru numrul de caractere al numelui unei variabile
dar nu uitai c trebuie s tastai corect de dou ori numele unei variabile
pentru a putea fi utilizat (nu v complicai viaa!)
n figura 2.12 se prezint cteva exemple de nume de variabile valide i invalide.
Figura 2.12
Nume valide
Nume invalide
nr_persoane
TURCA
NumrPersoane
<abc
a1
a1
b>1a
_var13
+a13
Remarci:
9 n afar de variabilele scalare, care nu reprezint dect o singur entitate mai exist i
matrici (vezi Conversaia 4).
9 n general, variabilele scalare nu sunt declarate, dar n diferite cazuri ele pot fi declarate
ca fiind de un tip particular (boolean, number sau string).
9 JavaScript recunoate mai multe tipuri de constante: ntregi (pot fi exprimate n sistem
zecimal, octal sau hexazecimal); flotante; iruri de caractere; boolean.
Variabile locale i globale

n JavaScript, cuvntul cheie var poate servi la declararea unei variabile. Totui,
n foarte multe cazuri, putei s-l omitei. Variabila va fi n mod automat declarat
n momentul n care i atribuii o valoare. Pentru a ti n care situaie o variabil
trebuie s fie declarat trebuie s nelegem mai nti conceptul de
portabilitate (scope, n limba englez).

Portabilitatea unei variabile (sau funcii) indic dac variabila (sau funcia)
definite ntr-o zon a programului sunt accesibile dintr-o alt zon a programului.
Exist dou tipuri de variabile:
40
9 variabile globale
- sunt definite n exteriorul oricrei funcii JavaScript

(funciile sunt ntotdeauna globale);
9 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 ...).
Figura 2.13
n figura 2.14 este prezentat rezultatul execuiei script-ului.
Figura 2.14
41
Aplicaie
Simulai funcionarea acestui script (vezi figura 2.13). Dac i dup acest exerciiu,
conceptul de portabilitate vi se pare i mai confuz, nu disperai! Vom reveni cu explicaii
suplimentare!
Cum atribuii valori variabilelor?

Dou sunt modurile prin care se atribuie valori variabilelor JavaScript:
9 n mod static
- utilizai semnul = pentru a afecta o valoare

unei variabile (instruciunea de atribuire).
9 n mod dinamic
- utilizai metoda prompt().
Remarci:
9 Structura instruciunii de atribuire este foarte simpl: variabila din stnga semnului egal
(=) ia valoarea indicat n dreapta semnului egal (vezi figura 2.15).
<script>
pi=3.14159;
i=i+1;
nume=Droopy;
prenume=Ion;
Figura 2.15
</script>
9 Instruciunile JavaScript trebuie s se termine cu punct i virgul ... sau nu! Dac dorii
s plasai mai mult de o instruciune pe o linie, punct i virgul este obligatoriu dup
fiecare instruciune (figura 2.16).
<script>
pi=3.14159; i=i+1; nume=Droopy; prenume=Ion;
Figura 2.16
</script>
9 Metoda prompt() (vezi obiectul Window, Conversaia 7) deschide o caset de dialog
care conine: mesajul indicat (primul argument), o zon de text ce urmeaz a fi

completat de utilizator (al doilea argument), butonul OK i butonul Cancel. Cel de-al
doilea argument este facultativ. Dac el este absent, zona de text afieaz implicit
undefined. Utilizatorul poate s introduc o alt valoare sau s execute clic pe
butonul OK pentru a accepta rspunsul implicit. Dac utilizatorul execut clic pe butonul
OK, valoarea coninut n zona de text este returnat script-ului; dac execut clic pe
butonul Cancel, valoarea null este returnat script-ului. Instruciunea urmtoare:
var raspuns=prompt(Care este numele tatalui?, );
deschide caseta de dialog prezentat n figura 2.17.
Figura 2.17
42
Conversia tipurilor de date
Ori de cte ori este posibil JavaScript convertete n mod automat tipul de date
ntlnit.
Pentru conversia tipurilor de date, JavaScript propune urmtoarele dou funcii:
9 parseInt()
- convertete un ir de caractere ntr-un numr

ntreg.
9 parseFloat() - convertete un ir de caractere ntr-un numr n

virgul mobil.
Remarc. Cele dou funcii detecteaz numerele la nceputul irului de caractere. Dac nici unul
din numere nu este gsit la nceputul irului de caractere, funciile returneaz valoarea NaN (Not
a Number).
Aplicaie
Simulai funcionarea urmtorului script (vezi figura 2.18).
Figura 2.18
Funcii JavaScript
Definii o funcie
O funcie este un grup de instruciuni tratate ca o singur entitate. Pentru a
utiliza o funcie va trebui mai nti s-o definii.
Iat cum definim o funcie (logo()) care afieaz mesajul: mi place s fiu
ntotdeauna aa cum sunt.
43
n figura 2.19 este prezentat funcia pe care ne-am propus s-o construim.
function logo(){
alert(Imi place sa fiu intotdeauna asa cum sunt.);
Figura 2.19
}
Funcia este foarte simpl, dar vom analiza rapid fiecare din elementele sale.
9 Primul element este cuvntul cheie function (figura 2.20) care indic
interpretorului JavaScript c blocul de cod care urmeaz trebuie s fie
tratat ca pe o funcie i numai dup aceea el este apelat n mod explicit.
function logo (){
Figura 2.20
}
9 Al doilea element este numele funciei (figura 2.21), aici logo. Regulile
de formare a numelui funciei sunt identice cu cele ale numelui
variabilelor (vezi paragraful Variabile).
function logo () {
Figura 2.21
}
9 Al treilea element este setul de paranteze (figura 2.22) care conine lista
parametrilor funciei (n exemplul nostru, nu este cazul!)
function logo( ) {
Figura 2.22
}
9 Al patrulea element este acolada de deschidere, care marcheaz debutul
corpului funciei (vezi figura 2.22).
9 Al cincilea element, pe linia urmtoare (figura 2.23) este metoda
alert, care afieaz ntr-o caset de dialog textul indicat n interiorul

parantezelor.
function logo(){
alert(Imi place sa fiu intotdeauna asa cum sunt.);
Figura 2.23
}
9 Ultimul element este acolada de nchidere (figura 2.24), care marcheaz
sfritul funciei.
function logo(){
Figura 2.24
}
S revenim la paranteze. Exemplul nostru (funcia
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);
Figura 2.25
}
De bun seam, pentru a putea utiliza o astfel de funcie, va trebui s-o includei
ntr-un document (X)HTML.
n general, cea mai bun zon pentru definirea unei funcii este antet-ul
<head> al documentului.
Deoarece instruciunile antet-ului sunt executate primele, vei avea certitudinea
c funcia este definit nainte de a fi utilizat.
n figura 2.26 este prezentat documentul (X)HTML incomplet n care s-a inclus, n
seciunea <head>
</head> script-ul ce conine funcia logo()
modificat.
Figura 2.26
Apelai funcia
n acest moment funcia (logo(mesaj)) este definit i inserat ntr-un
document (X)HTML.
45
Dac afiai documentul (X)HTML (vezi figura 2.26) ntr-un browser, nu se
ntmpl absolut nimic. Funcia este pregtit, dar inutilizabil!
Pentru a putea utiliza o funcie va trebui s-o apelai. Pentru a apela o funcie, va
trebui s utilizai numele su ntr-o instruciune a script-ului i s includei
parantezele i parametrii.
n figura 2.27 este prezentat documentul (X)HTML complet, cu definiia funciei
i apelul funciei n corpul documentului (X)HTML.
Figura 2.27
Pentru a nelege mai bine cum lucreaz funcia logo(mesaj), apelai

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

Funcia (logo()) pe care am creat-o n aplicaia precedent afieaz un mesaj.
O funcie poate, de asemenea returna o valoare script-ului apelant.
Iat cum procedm pentru a defini i apela o funcie care calculeaz media
aritmetic a trei valori.
n figura 2.30 este prezentat funcia pe care ne-am propus s-o construim.
function media(a,b,c){
rezultat=(a+b+c)/3.0;
return rezultat;
Figura 2.30
}
Remarci:
9 Funcia ncepe cu function cuvnt rezervat, urmat de numele funciei media i de

trei parametrii a, b, c pentru cele trei valori (numerice).
9 Acolada de deschidere a fost plasat la sfritul primei linii, dar putei foarte bine s o
izolai pe o singur linie, sau s o plasai la nceputul liniei urmtoare.
9 Variabila (local) rezultat stocheaz media aritmetic a celor 3 valori numerice.

9 Pentru a returna rezultatul (rezultat) script-ului, utilizm cuvntul rezervat return
(vezi figura 2.31).
...
Figura 2.31
return rezultat;
}
47
n figura 2.32 se prezint documentul complet (X)HTML. Acest document conine
de asemenea, n seciunea <body> un mic script care apeleaz funcia
media() i afieaz rezultatul.
Figura 2.32
Remarci:
9 Pentru apelul funciei putei folosi o variabil de stare (mediaaritmetic, n

exemplul nostru).
9 Putei plasa apelul unei funcii ntr-o expresie.

9 n paralel cu variabilele i valorile constantelor, putei utiliza apelul funciilor care
returneaz rezultatele n interiorul unei expresii (vezi figura 2.33).
...
Figura 2.33
alert(media(7,8,9));
...
Crearea automat a script-urilor cu Macromedia

DREAMWEAVER
Dup cum am precizat n Conversaia 1 (vezi paragraful: Oferta de editoare
JavaScript), Macromedia Dreamweaver MX poate fi folosit i ca editor JavaScript.
Funciile sale specifice, modul simplu de utilizare l recomand ca pe un excelent
instrument de editare a script-urilor.
n figura 2.34 sunt prezentate cele mai utilizate funcii JavaScript puse la
dispoziie de Dreamweaver.
48
Figura 2.34
Iat cum procedm pentru a crea un script care calculeaz aria unei sfere (Area
of Sphere).
1. n grupul de panouri Insert, executai clic pe subpanoul HTML
(figura 2.35).
Figura 2.35
2. Executai clic n locul n care dorii s inserai script-ul.

3. Executai clic pe butonul
(Script), figura 2.36.
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
Figura 2.39
5. ntre
tag-urile
<script>
</script>
areaOfSphere (figura 2.40, figura 2.41).
Figura 2.40
inserai
funcia
51
Figura 2.41
6. Apelai funcia areaOfSphere (radius), pentru radius=3 (figura 2.42), n

corpul documentului.
Figura 2.42
52
Figura 2.43
Remarc. Pentru afiarea rezultatului cu dou zecimale consultai Conversaia 8.
De la problem la script
Prima etap pe care trebuie s-o parcurgei n lungul drum al problemei ctre script o
constituie definirea obiectivului script-ului. n consecin, luai o foaie de hrtie i pre de
cteva minute adunai cuvintele ... potrivite pentru a descrie pe scurt modul de rezolvare
informatic a problemei. Altfel spus, redactai cu cuvinte obinuite acest mic caiet de
sarcini. Succes!
Iat cum formulm pe scurt problema pe care dorim s o rezolvm cu JavaScript: creai o
pagin Web care s afieze aria unui rezervor sferic cu raza de 3m.
Ce problem simpl, vei exclama! ntr-adevr, problema nu este dificil, dar trebuie s
recunoatem c ceea ce pare simplu pentru unii este foarte complicat pentru alii.
Desigur, ea poate fi rezolvat foarte bine i de ctre un elev de coal elementar sau
chiar de un adult (prinii elevului!). Obiectivul nostru, ns este rezolvarea informatic a
problemei utiliznd limbajul JavaScript.
Remarci:
9 Procesul de alctuire a unui script, pe care il vom urma pe tot parcursul lucrrii, const
din urmtoarele faze:
analiza problemei;
proiectarea programului (script-ului);
codificarea n limbajul JavaScript;
testare i depanare.
9 n cadrul fazei de analiz se definesc:
formatul datelor de ieire;
tabela de variabile;
specificaiile de programare (descriere script, intrri, ieiri, list funciuni).
9 Asigurndu-ne c nu s-au strecurat greeli n faza de analiz a problemei, putem aborda
n continuare faza de proiectare a script-ului, utiliznd ca instrumente de proiectare:
pseudocodul, diagrama de structur a prelucrrilor etc.
9 Pseudocodul este un limbaj independent de limbajul de programare (nu exist un
standard!). Limbajul pseudocod pe care vi-l propunem este alctuit din cteva
instruciuni standard ce definesc structurile algoritmice fundamentale (secvena, iteraia,
selecia) la care se adaug instruciuni, n bun parte aflate la latitudinea celui care
realizeaz documentaia de analiz i proiectare a programului.
53
Analiza problemei
nainte de a scrie un program (JavaScript) trebuie s cunoatem i s nelegem foarte
bine problema (Analiza problemei). n cazul nostru, problema este una dintre cele mai
simple: calculul ariei unui rezervor sferic atunci cnd se cunoate raza.
n rezolvarea acestei probleme se urmrete crearea unei pagini Web, n care s se
afieze simplu, ntr-o form deloc pretenioas, cele dou valori pentru raz (3) i arie
(vezi figura 2.44).
Figura 2.44
Remarc. Ecranul din figura 2.44 reprezint formatul datelor de ieire.
V mai amintii cum se calculeaz aria unei sfere, cci despre ea este vorba. Se nmulesc: patru cu
trei i paisprezece () i cu ptratul razei. Cam dificil aceast exprimare, nu vi se pare? S alegem
pentru arie i raz cte un nume de variabil semnificativ, urmnd apoi s codificm n JavaScript
formula de calcul prezentat (A=4R2).
Tabela de variabile
n figura 2.45 sunt prezentate: variabilele de ieire, variabilele de intrare i variabilele de stare,
structurate ntr-o tabel de variabile, document care se realizeaz n faza de analiz structurat
a problemei.
Tabela de variabile
Variabile de intrare
Figura 2.45
Variabile de stare
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.
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
Figura 2.46
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:
9 Varianta 1 scrierea n limbaj natural structurat;
9 Varianta 2 scriere formalizat (apropiat de limbajul JavaScript).
Iat cum procedm pentru a construi pseudocodul n ambele variante.
Varianta 1
n figura 2.47 se prezint pseudocodul n limbaj natural structurat.
Pseudocodul (Varianta 1)
1. Atribuii razei (r) valoarea 3.
2. Calculai aria (aria) rezervorului sferic.
3. Afiai raza (r)
4. Afiai rezultatul (aria).
Figura 2.47
5. Stop.
Remarc. Prezentarea algoritmului n limbaj natural structurat are, dup cum ai putut constata i
unele dezavantaje: lizibilitate redus, exprimri lungi, greoaie etc.
Varianta 2
Varianta prezentrii algoritmului de o manier formalizat este de preferat celei narative
(Varianta 1). Se prefer o formalizare a aciunilor primitive (atribuie, calculeaz, afieaz)
care s pun n eviden att variabilele de intrare/ieire ct i variabilele de stare.
55
n consecin, s-o folosim ct este cu putin pe aceasta.
n figura 2.48 se prezint pseudocodul n manier formalizat.
REZERVOR
Figura 2.48 REZERVOR
BEGIN
r=3
2
aria=4 r
WRITE(r)
WRITE(aria)
END
Cuvintele rezervate JavaScript

Anumite cuvinte nu pot fi utilizate ca nume de variabile, funcii, obiecte i
metode. n figura 2.49 se prezint lista cuvintelor rezervate.
break
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
debugger
volatile
export
Figura 2.49 enum
56
JavaScript
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
9 www.glscript.com
9 www.toutJavascript.com
9 www.javanett.com
9 www.webcoder.com
9 www.script-masters.com
9 www.javascript.internet.com
57
9 www.javascripts.com
9 www.bratta.com
9 www.javascript.com
Conversaia 2
(continuare)
Operatorii JavaScript. Obiecte matematice
f
f
f
f
f
f
f
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 operatori.

Operatorii [1] sunt simbolurile i identificatorii care reprezint fie felul n care
sunt modificate datele, fie felul n care este evaluat o combinaie de expresii.
JavaScript recunoate att operatorii binari (necesit existena a doi operanzi n
expresie) ct i operatorii unari (necesit existena unui singur operand n
expresie).
Cei mai muli dintre operatorii JavaScript sunt recunoscui de ctre toate
navigatoarele, dar ... mai exist i divergene!
58
n continuare, vom proceda la o clasificare a operatorilor din limbajul JavaScript
urmnd ca apoi s-i examinm pe fiecare n parte (vezi figura 2.50).
Tipuri de operatori
aritmetici
% (modulo); ++ (increment); (decrement); +

(adunare); (scdere); * (nmulire); / (mprire)
= (atribuire simpl); += (atribuire cu adunare); =
(atribuire cu scdere); *= (atribuire cu nmulire); /=
(atribuire cu mprire); %= (atribuire cu modulo)
atribuire plus combinaii

(ntre
operatorul
de
atribuire
i
operatorii
aritmetici)
relaionali (de comparaie)
booleeni (logici)
operatori pentru funcii
operatori pentru structuri
de date
operatori condiionali
operatori pentru iruri
operatorul
operatorul
operatorul
Figura 2.50
operatorul
< (mai mic); > (mai mare); <= (mai mic sau egal); >=
(mai mare sau egal); == (egalitate); === (identitate);
!= (non egal); !== (non identic)
&& (AND); || (OR); ^ (SAU EXCLUSIV); ! (NOT)
(); , (virgula)
. (punctul); []
?:
toi operatorii relaionali (de comparaie) i operatorul
de concatenare (+)
typeof
delete
new
void
Operatorii JavaScript sunt prezentai n detaliu n figura 2.51.
Operator
Sintax
operand1 + operand2
Adunare sau concatenare.

1. Tip de date: numeric.
9 Operator aritmetic.
Remarc. Dac unul din operatori este NaN, rezultatul este NaN.
2. Tip de date: alfanumeric (ir de caractere).

9 Operator de concatenare.
Remarc. Operatorul + servete n general pentru efectuarea convertirii
tuturor tipurilor de date n iruri de caractere.
Exemplu:
Figura 2.51
<script>
a=8;
b=7;
z=3+8;
c=a+b;
alert(z); // afieaz 11
alert(c); // afieaz 15
</script>
<script>
prenume=Vasile;
nume=Adam;
numecomplet=Domnul +
prenume+ +nume;
alert(numecomplet);
// afieaz Domnul Vasile Adam
</script>
59
+=
operand1 += operand2
Adunare sau concatenare asociat unei atribuiri.

1. Tip de date: numeric.
9 Operator aritmetic i de atribuire.
Remarc. Echivalent cu: operand1= operand1 + operand2.
2. Tip de date: alfanumeric.

9 Operator de concatenare i de atribuire.
Exemplu:
Remarc. Coninutul variabilei situate la stnga operatorului este completat cu

data alfanumeric din dreapta operatorului.
++
<script>
numecomplet=Dumitrescu;
nume=Vasile;
numecomplet+=nume;
alert(numecomplet);
// afieaz Dumitrescu Vasile
</script>
<script>
a=3;
a+=6;
alert(a);
//afieaz 9
</script>
++ operand
operand++
Incrementare.
1. Tipul de date: numeric.
Remarci:
9 Pre-incrementare (++ operand): valoarea variabilei este mrit cu 1, apoi
este utilizat.
9 Post-incrementare (operand ++): valoarea variabilei este utilizat apoi
este mrit cu 1.
9 Este imposibil de a combina post-incrementarea cu pre-incrementarea.
9 Acest operator se aplic numai variabilelor. Este foarte des utilizat n bucle.
9 Este echivalent cu: operand1= operand1 + operand2.
9 ++x++ returneaz un mesaj de eroare.
9 x++ este echivalent cu: x=x+1.
Exemplu:

Figura 2.51
(continuare)
<script>
//pre-incrementare
a=5;
alert(++a);
// afieaz 6
alert(a);
//afieaz 6
</script>
<script>
//post-incrementare
a=5;
alert(a++);
// afieaz 5
alert(a);
//afieaz 6
</script>
<script>
//post-incrementare ntro bucl
for(i=0;i<5; i++){
document.write(i);
// afieaz 0 1 2 3 4
}
</script>
operand1 operand2
Scdere sau negare.

2. Operator de negare.
Convertete o valoare pozitiv ntr-o valoare negativ.
60
Exemplu:
<script>
a=-7;
a=-a;
alert(a);
// afieaz 7
</script>
<script>
a=20;
b=13;
c=a-b;
d=8-2;
alert(d); // afieaz 6
</script>
operand1 = operand2
Tipul de date: numeric.

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

Exemplu:
Figura 2.51
(continuare)
operand
operand
Decrementare.
Remarci:
9 Pre-decrementare (-- operand): valoarea variabilei este diminuat cu 1 i
apoi este evaluat.
9 Post-decrementare (operand --): valoarea variabilei este evaluat apoi este
diminuat cu 1.
9 Acest operator se aplic numai variabilelor. Este des utilizat n bucle.
9 Este echivalent cu: operand1= operand1 1.
9 x este echivalent cu x=x1.
<script>
//post-decrementare n
bucla for
for(a=7;a<=1; a--){
document.write(a);
// afieaz 6 5 4 3 2 1
</script>
<script>
//post-decrementare
<script>
//pre-decrementare
a=5;
alert(a--);//afieaz 5
alert(a);// afieaz 4
</script>
a=5;
alert(--a); //afieaz 4
alert(a)// afieaz 4
</script>
operand1 * operand2
nmulire.
Exemplu:
<script>
a=7;
b=8;
c=3*6;
d=a*b;
</script>

61
*=
operand1 *= operand2
nmulire i atribuire.
Remarc. Este echivalent cu: operand1= operand1 * operand2.
Exemplu:
<script>
a=2;
a*=5;
alert(a); // afieaz 10
</script>
/
Exemplu:
mprire.
Remarci:
9 Dac unul din operanzi este NaN, rezultatul este NaN.
9 mprirea 0/0 d NaN.
9 mprirea 0/valoare_finit d 0.
<script>
a=12; b=3;
c=5/2; d=a/b;
alert(c); // afieaz 2.5
</script>
/=
operand1 / operand2
operand1 /= operand2
mprire i atribuire.
Remarc. Este echivalent cu: operand1= operand1 / operand2.
Exemplu:
<script>
a=5;
a/=2;
alert(a);
// afieaz 2.5
</script>
%

Exemplu:
Figura 2.51
(continuare)
echivalent cu
<script>
a=5;
a=a/2;
alert(a);
// afieaz 2.5
</script>
operand1 % operand2
Modulo.
Remarc. Calculeaz restul ntreg al mpririi ntregi a primului numr prin cel
de-al doilea numr.
<script>
a=18;
a=a%5;
</script>
62
%=
operand1 %= operand2
Modulo i afectare.
9 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>
//atribuire multipl
var a=b=c=13;
// cele trei variabile vor avea
aceeai valoare: 13
</script>
<script>
a=20;
nume=Droopy;
b=a+3; //b are valoarea 23
</script>
operand1 < operand2
Strict mai mic.

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

Remarci:
9 Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 <=
operand2) este adevrat.
NaN.
<script>
a=6; b=6;
document.write(a<=b);
//afieaz true
nume1= MARK; nume2=SPENCER;
document.write(<br />+nume1<=nume2);
// afieaz true
</script>
63
>
Exemplu:
(continuare)

Remarci:
9 Se
returneaz
TRUE
dac
rezultatul
evalurii
condiiei
(operand1>operand2) este adevrat.
NaN.
<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:
9 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.
Exemplu:
Figura 2.51
operand1 > operand2
Strict mai mare.

Remarci:
9 Se returneaz TRUE dac rezultatul evalurii condiiei (operand1 este egal
cu operand2) este adevrat.
NaN.
9 Compararea unei valori numerice (de exemplu, 7) cu o aceeai valoare
alfanumeric (de exemplu, 7) returneaz TRUE.
<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
64
Identic cu.
9 Operator relaional (de comparare): egalitate de valori i de tip de
date.
Exemplu:
Remarc. Se returneaz TRUE dac rezultatul evalurii condiiei (operand1

este egal cu operand2 i de acelai tip de date) este adevrat.
<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>
!=

Exemplu:
operand1 != operand2
Diferit de.
9 Operator relaional (de comparare): non-egalitate de valori.
este diferit de operand2) este adevrat.
<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.

9 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:
Figura 2.51
(continuare)
<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>
65
&&
operand1 && operand2
I.
Exemplu:
<script>
document.write((a>2)&&(b==6)); // afieaz true;
document.write((a>2)&&(b==nume1)); // afieaz false;
</script>
<script>
a=4;b=6;nume1=Maxim;
if((a>2)&&(b==6)){
document.write(a este mai mare ca 2);
document.write( i b este egal cu 6);
}
</script>
Exemplu:
Remarci:
9 Operator logic I (AND).
9 Returneaz TRUE dac cele dou expresii returneaz valoarea TRUE.
9 Acest operator este foarte des utilizat n bucle (for, while) i n teste
(if ... else).
||
operand1 || operand2
SAU (OR).
Exemplu:
<script>
document.write((a>2)||(b==6)); // afieaz true
document.write((a>2)||(b==nume1)); // afieaz false
</script>
<script>
a=4;b=6;nume1=Maxim;
if((a>2)||(b==6)){
document.write(a este mai mare ca 2);
document.write( sau b este egal cu 6);
}
</script>
Exemplu:
Remarci:
9 Operator logic SAU (OR).
9 Returneaz TRUE dac una din cele dou expresii returneaz valoarea
TRUE.
9 Acest operator este foarte des utilizat n bucle (for, while) i teste
(if ... else).
, (virgul)
Operator care permite mai multor instruciuni de a fi executate ca i

cnd ar fi o singur instruciune.
Remarci:
9 Valoarea returnat este cea care aparine ultimei instruciuni.
9 Acest operator este utilizat de asemenea pentru transferarea mai multor
parametrii unei funcii.
Figura 2.51
(continuare)
Exemplu:
<script>
66
var a,b,c,d;
a=(b=5,c=6,d=7);
document.write(a=+a); // afieaz a=7;
document.write(b=+b); // afieaz b=5;
document.write(c=+c); // afieaz c=6;
document.write(d=+d); // afieaz d=7;
</script>
?:
condiie1 ? cod1:cod2
Condiie.
9 Operator de test (condiie).
Remarci:
9 Este utilizat pentru a crea un test rapid sub forma: expresielogic ?
DacDa: DacNu.
9 Expresielogic este o expresie care returneaz TRUE sau FALSE.
9 DacDa: instruciune care va fi executat dac rezultatul evalurii
expresielogic este TRUE.
9 DacNu: instruciune care va fi executat dac rezultatul evalurii
expresielogic este FALSE.
Exemplu:
<script>
a=2;
(a>10)?alert(adevarat):alert(false);
</script>
delete
<script>
a=2;
if(a>10)
alert(adevarat);
else
echivalent cu
alert(false);
</script>
delete obiect
delete obiect.Proprietate
delete Array[Index]
tergere.
1. Tipul de date: obiect.
9 Operator de tergere a proprietii obiectului.
Remarci:
9 terge o proprietate a unui obiect creat cu new.
9 terge un element al unei matrici (Array) indicnd numrul su de
ordine (primul element este de rang zero).
Exemplu:
<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>
Exemplu:
<script>
//tergerea unei proprieti a unui obiect
Figura 2.51
(continuare)
<script>
azi=new Date();
//tergerea unui obiect
x=delete azi;
// x ia valoarea true i azi este
undefined
</script>
67
a=new Number();
a.valoare=13;
x=delete a.valoare;
//x ia valoarea true i a.valoare este nedefinit
</script>
new
obiect= new Constructor
Nou.
9 Operator de creare a unui nou obiect.
Remarci:
9 Creeaz o nou instan a unui obiect cu ajutorul unui constructor.
9 new este utilizat pentru crearea instanelor urmtoarelor obiecte: Array;
Boolean; Date; Function, Number; Object; RegExp;

String.
Exemplu:
<script>
//crearea obiectului astzi
var astazi=new Date();
//crearea obiectului matrice
var matrice=new Array();
//crearea obiectului Object
var obiect=new Object();
obiect.prenume=stejrel
</script>
. (punct)
obiect.Proprietate
obiect.Metoda
obiect.Eveniment
Punctul (.) este utilizat pentru a putea accesa proprieti, metode sau
evenimente ale unui obiect.
9 Operator de acces.
Figura 2.51
(continuare)
Exemplu:
<script>
//acces la metoda write() a obiectului document
document.write(Au nnebunit salcmii!);
</script>
typeof
typeof(operand)
typeof operand
Tipul de date.
Remarci:
9 Returneaz sub form de ir de caractere tipul de date al obiectului sau al
variabilei indicate.
9 n tabelul 1 se prezint pe dou coloane: tipul de dat i irul de caractere
returnat de Typeof.
#______________________________________________________________
________________________________________________________________
________________________________________________________________
________________________________________________________________
Tabelul 1
68
Tabelul 1
Tipul de dat
irul de caractere returnat de typeof
logic
numr
infinit
ir de caractere
obiect
funcie
nedefinit
null
boolean
number
number
string
object
function
undefined
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.
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

9 Operator de invocare.
element al unei matrici.

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

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
Operatori
Asociativitate Semnificaie
acces la proprieti
[]
acces la matrici (arrays)
()
regrupare sau funcie
++
incrementare
decrementare
negare aritmetic
prioritate
Figura 2.52 6
70
7
NOT logic
delete
tergerea unei proprieti sau a valorii unei

matrici
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
&&
22
||
SAU
23
?:
condiie
24
afectare (atribuire/asignare)
25
*=
/=
%=
afectare cu calcul
evaluare multipl
+==
Figura 2.52
(continuare) 26
Remarci:
9 Expresiile sunt evaluate n funcie de prioritatea operatorilor.

9 Parantezele au o prioritate foarte ridicat. Expresiile din paranteze sunt evaluate primele.
Dac exist mai multe nivele de paranteze, expresiile sunt evaluate ncepnd cu
parantezele aflate cel mai n interior.
9 Asociativitatea joac un rol, de exemplu, n cazul combinrii unei adunri i unei
concatenri (vezi figura 2.53).
<script>
document.write((7+9+abc)); //afieaz 16abc
document.write((abc+7+9)); //afieaz abc79
document.write(<br />));
Figura 2.53
</script>
Obiecte matematice
71
Cu siguran c vei avea nevoie n programele dumneavoastr de formule
matematice care s nu foloseasc doar simple adunri i nmuliri. n acest caz,
obiectele matematice: Math, Number, Boolean v pot fi de un real folos.
Ele v permit s accesai constante ( , true, false) i s executai diferite funcii
matematice (sqrt(); exp() etc.).
Math este un obiect predefinit al limbajului JavaScript care conine numeroase

constante (PI, E, LN10, LN2, SQRT2 etc.) i funcii (abs(); floor(); pow(); sqrt()
etc.).
Nu este nevoie s creai obiectul Math: el se creeaz n mod automat de ctre
navigator (exist n toate programele JavaScript). Proprietile obiectului Math
sunt constante matematice iar metodele sale sunt funcii matematice.
Number, cel de-al doilea obiect matematic, este un obiect predefinit al limbajului
JavaScript pe care l vei gsi util atunci cnd trebuie s accesai anumite
constante: cel mai mare i cel mai mic numr care poate fi reprezentat; plus i
minus infinit; NaN (Not a Number). JavaScript reprezint aceste valori ca
proprieti ale obiectului Number.
Pentru a crea un nou obiect Number, utilizai funcia special numit
constructor, Number() i cuvntul cheie new (figura 2.54).
<script>
var numar_clienti=1234; //declarare implicita
var numar_clienti=new Number(1234); //declarare explicita
Figura 2.54
</script>
Boolean este un alt obiect predefinit al limbajului JavaScript pe care l vei gsi
util atunci cnd dorii s transformai o valoare non-boolean ntr-o valoare
boolean (true sau false).
Pentru a crea un nou obiect Boolean utilizai constructorul Boolean() i
cuvntul cheie new.
Obiectul Math
72
Fia obiectului Math este prezentat n figura 2.55.
Fia obiectului
Math
Cum crem obiectul?
Se creeaz automat de ctre navigator.
Proprieti:
E, LN10, LN2, LOG10E, LOG2E, PI,

SQRT1_2, SQRT2
abs(), acos(), asin(), atan(), ceil(),
cos(), exp(), floor(), log(), max(),
min(),
pow(),
random(),
round(),
sin(), sqrt(), tan()
-
Metode:
Figura 2.55
Gestionarii de evenimente:
Proprietile obiectului Math

Proprietile obiectului Math sunt prezentate n detaliu n figura 2.56.
Exemplu:
Exemplu:
Figura 2.56
Proprietate
Sintaxa
Math.E
Constanta lui Euler.
<script>
document.write(Math.E);
//afieaz 2.71821828459045
</script>
LN10
Math.LN10
Logaritm natural de 10.
<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
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

Exemplu:
Exemplu:
Figura 2.56
(continuare)
1/ 2 .
<script>
document.write(Math.SQRT1_2);
//afieaz 0.7071067811865476
</script>
SQRT2
Math.SQRT2
2.
<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.
Figura 2.57
Exemplu:
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)
abs(NaN)
abs(-Infinity)
0
NaN
+Infinity
<script>
a=-57; b=85;
rez1=Math.abs(a);
rez2=Math.abs(b);
document.write(abs(+a+)=+rez1);
//afieaz abs(-57)=57
74
document.write(abs(+b+)=+rez2);
//afieaz abs(85)=85
</script>
acos()
Math.acos(ValoareNumeric)
Arc cosinus.
Exemplu:
<script>
a=0.9965;
rezultat=Math.acos(a);
document.write(acos(+a+)=+rezultat);
</script>
asin()
Math.asin(ValoareNumeric)
Arc sinus.
Remarc. Pentru valori ale argumentului: >1; < 1; NaN rezultatul este NaN.
Remarc. n Tabelul 3 se prezint rezultatele funciei asin() pentru cteva

argumente speciale.
Tabelul 3
Argument
Rezultat
0
>1
<-1
NaN
0
NaN
NaN
NaN
Exemplu:
<script>
a=0.9965;
rezultat=Math.asin(a);
document.write(asin(+a+)=+rezultat);
</script>
atan()
Math.atan(ValoareNumeric)
Arc tangent.
Exemplu:
<script>
a=0.9965;
rezultat=Math.atan(a);
document.write(atan(+a+)=+rezultat);
</script>
ceil()
Math.ceil(ValoareNumeric)
Numr ntreg superior cel mai apropiat.
Figura 2.57
(continuare)
Exemplu:
Remarc. n Tabelul 4 se prezint cteva argumente speciale i rezultatul

corespunztor.
Tabelul 4
Argument
Rezultat
+Infinity
ntre -1 i 0
-Infinity
0
NaN
+Infinity
0
-Infinity
0
NaN
<script>
a=-4.223;
rezultat=Math.ceil(a);
document.write(ceil(+a+)=+rezultat);
//afieaz ceil(-4.223)=-4
</script>
75
cos()
Exemplu:
Math.cos(ValoareNumeric)
Cosinus.
<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.
Figura 2.57
(continuare)
Exemplu:
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
Orice valoare
NaN
NaN
<script>
a=7; b=13.336;
rezultat=Math.max(a,b);
document.write(max(+a+,+b+)=+rezultat);
//afieaz max(7,13.336)=13.336
</script>
76
min()
Math.min(ValoareNumeric1,
ValoareNumeric2)
Valoarea minim.
Exemplu:
<script>
a=7; b=13.336;
rezultat=Math.min(a,b);
document.write(min(+a+,+b+)=+rezultat);
//afieaz min(7,13.336)=7
</script>
pow()
Math.pow(ValoareNumeric1,
valoareNumeric2)
Returneaz ValoareNumeric1 la puterea ValoareNumeric2.

Tabelul 6
Argument 1
Argument 2
Rezultat
+0
+Infinity
+Infinity
-Infinity
-Infinity
-Infinity
0
1
Orice valoare
NaN
<0
<0
>0
<0
ntreg par>0
ntreg impar>0
>0
orice valoare
NaN
Diferit de zero
+Infinity
0
+Infinity
0
+Infinity
-Infinity
0
1
NaN
NaN
Exemplu:
<script>
a=3; b=2;
rezultat=Math.pow(a,b);
document.write(pow(+a+,+b+)=+rezultat);
//afieaz pow(3,2)=9
</script>
random()
Math.random()
Numere aleatoare. Returneaz un numr aleator cuprins ntre 0 i 1.
Exemplu:
<script>
/*genereaz 3 numere aleatoare
cuprinse ntre 0 i 1*/
for(i=0;i<3;i++){
a=Math.random();
document.write(a+<br />);
}
</script>
Exemplu:
<script>
/*genereaz 5 numere aleatoare cuprinse ntre 12 i 48*/
var n=12; var m=48;
for(i=0;i<5;i++){
a=Math.round(Math.random()*(m-n)+n);
Figura 2.57
(continuare)
<script>
/*genereaz 4 numere aleatoare
cuprinse ntre 0 i 25*/
for(i=0;i<5;i++){
a=Math.round(Math.random()*25);
}
</script>
77
}
</script>
round()
Returneaz valoarea numeric rotunjit la ntregul inferior.

Tabelul 7
Argument
Rezultat
+Infinity
0
NaN
+Infinity
0
NaN
Exemplu:
<script>
x=-5.88; y=8.336;
rezultat1=Math.round(x);
rezultat2=Math.round(y);
rezultat3=Math.round(z);
document.write(round(+x+)=+rezultat1);
//afieaz round(-5.88)=-6
document.write(round(+y+)=+rezultat2);
//afieaz round(8.336)=8
</script>
sin()
Math.sin(ValoareNumeric)
Sinus.
Exemplu:
<script>
a=0.9965;
rezultat=Math.sin(a);
document.write(sin(+a+)=+rezultat);
//afieaz sin(0.9965)=0.8395747765937453
</script>
sqrt()
Math.sqrt(ValoareNumeric)
Rdcina ptrat.
Exemplu:
Figura 2.57
(continuare)

Tabelul 8
Argument
Rezultat
+Infinity
0
<0
NaN
+Infinity
0
NaN
NaN
<script>
a=25;
rezultat=Math.sqrt(a);
document.write(sqrt(+a+)=+rezultat); //afieaz sqrt(25)=5
</script>
tan()
Exemplu:
Figura 2.57
(continuare)
Math.round(ValoareNumeric)
Tangent
<script>
a=0.9965;
Math.tan(ValoareNumeric)
78
rezultat=Math.tan(a);
document.write(tan(+a+)=+rezultat);
//afieaz tan(0.9965)=1.545483358938326
</script>
Mai multe despre obiectul matematic Math

Exist dou inconveniente majore ale limbajului JavaScript, pe care le putei
ntlni n efectuarea calculelor matematice care conin numere zecimale:
9 timpul de execuie (JavaScript este relativ lent!);
9 precizia.
Aplicaie
Scriei un program JavaScript care calculeaz i afieaz ct fac:
9 0.121*100;
9 0.119*100.
n figura 2.58 se prezint documentul (X)HTML complet n care s-a inserat
script-ul aplicaiei [3].
Figura 2.58
Rezultatele execuiei script-ului sunt afiate n figura 2.59.
Figura 2.59
Remarci:
9 Rutinele interne ale limbajului JavaScript nu sunt att de precise pe ct ne ateptam.

Script-ul dumneavoastr este corect dar rezultatul este diferit fa de cel scontat.
79
Ateptai-v la astfel de surprize (neplcute!) mai ales atunci cnd folosii numere care
conin multe zecimale!
9 Nici precizia funciilor trigonometrice nu este infailibil!
9 Pentru a rezolva problema afirii rezultatelor cu multe zecimale scriei o funcie
personalizat care trunchiaz numrul zecimal la un numr de zecimale dorit, nainte de
a-l afia (vezi Conversaia 8).
Obiectul Number
Obiectul Number faciliteaz gestiunea numerelor. Proprietile sale sunt
constante care permit definirea valorilor de baz indiferent de navigator.
Fia obiectului Number este prezentat n figura 2.60.
Fia obiectului
Number
Cum crem obiectul?
Constructorul Number()
Proprieti
MAX_VALUE,
MIN_VALUE,
NaN,
NEGATIVE_INFINITY, POSITIVE_INFINITY
toExponential(),
toFixed(),
toPrecision(), toString()
-
Metode
Figura 2.60 Gestionarii de evenimente
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
Exemplu:
Figura 2.61
Argument
Rezultat
null
false
true
numr
ir de caractere alfanumerice
ir de caractere numerice
0
0
1
numr
NaN
numr
<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

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

Figura 2.62
(continuare)
Number.NaN
Number.NEGATIVE_INFINITY
Valoarea minus infinit. Identic cu Infinity.
POSITIVE_INFINITY
Number.POSITIVE_INFINITY
81
Valoarea plus infinit. Identic cu +Infinity.
Metodele obiectului Number

Metodele obiectului Number sunt prezentate n detaliu n figura 2.63.
Metod
Sintax
toExponential() Number.toExponential(NumrZecimal)
Afieaz un numr n format exponenial cu rotunjire.
Exemplu:
<script>
a=4.445845558555588574;
b=a.toExponential(2);
document.write(b);
//afieaz .45e+0
</script>
toFixed()
Number.toFixed()
Rotunjete un numr la ntregul cel mai apropiat superior sau inferior.
Exemplu:
<script>
a=8.5;
b=a.toFixed();
document.write(b);
//afieaz 8
</script>
toPrecision()
Number.toPrecision(Numr)
Rotunjete un numr cu precizia indicat ca parametru. Dac acest
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:
Figura 2.63
Remarci:
parametru este egal cu 1, numrul este rotunjit la ntreg.
<script>
a=88.596;
b=a.toString();
document.write(b);
</script>
9 Obiectul Number este folosit de foarte puine ori. Este util atunci cnd trebuie s
accesai anumite constante (vezi proprietile obiectului Number).
9 Crearea obiectelor Number este implicit n cele mai multe cazuri.
9 Putei crea obiecte Number atunci cnd trebuie s le adugai proprieti.
82
Obiectul Boolean
Obiectul Boolean este folosit pentru a transforma o valoare non-boolean
ntr-o valoare boolean.
Obiectul Boolean nu poate conine dect dou valori: TRUE sau FALSE.
Fia obiectului Boolean este prezentat n figura 2.64.
Fia obiectului
Number
Cum crem obiectul?
Constructorul Boolean()
Proprieti:
prototype
Metode:
toString()
Figura 2.64 Gestionarii de evenimente:
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()
<script>
//crearea unui obiect boolean vid
a=new Boolean();
a=true;
</script>
Exemplu:
<script>
//crearea i iniializarea simultan a unui obiect boolean
a=new Boolean(true);
</script>
<script>
Exemplu:
(continuare)
sau implicit, atribuind o valoare logic (true/false) unei variabile.
Exemplu:
Figura 2.65
Figura 2.65
Variabila=new Boolean()
Variabila=new
Boolean(Valoare)
Variabila=true
Variabila=false
Creeaz un nou obiect Boolean. El poate fi creat cu operatorul new
83
//crearea implicit a unui obiect boolean
a=true;
</script>
Mai multe despre obiectul Boolean

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

Codificarea n limbajul JavaScript (continuare din Conversaia 2)
Pentru a codifica n limbajul JavaScript algoritmul prezentat n conversaia precedent,
creai documentul (X)HTML (utilizai Notepad sau Macromedia Dreamweaver) n care
inserai script-ul, cu una din metodele prezentate mai jos:
9 Metoda 1 inserai script-ul n corpul paginii;
9 Metoda 2 plasai script-ul n antet-ul paginii;
9 Metoda 3 utilizai fiiere surs externe;
9 Metoda 4 creai un gestionar de evenimente.
Folosii unul din editoarele prezentate mai jos:
9 Notepad;
9 Macromedia Dreamweaver MX.
Metoda 1
1. Creai documentul (X)HTML (figura 2.66).
84
Figura 2.66
2. Inserai elementul <script> ... </script> n corpul documentului
(figura 2.67).
Figura 2.67
3. Atribuii variabilei r valoarea 3 (figura 2.68).
Figura 2.68
4. Codificai formula de calcul a ariei rezervorului sferic, folosind proprietatea
Math.PI (pentru constanta ) i metoda Math.pow() (pentru codificarea

lui r2, (vezi figura 2.69).
Figura 2.69
Remarci:
9 Proprietatea Math.PI a obiectului Math este prezentat n detaliu n figura 2.57.

9 Metoda pow() a obiectului Math este prezentat n detaliu n figura 2.57.
5. Afiai rezultatele (figura 2.70).
85
Figura 2.70
Remarci:
9 Posibilitatea de combinare a tag-urilor (X)HTML i a instruciunilor JavaScript este una

din caracteristicile cele mai importante ale unui navigator care suport JavaScript. n
realitate, aceast facilitate constituie esenialul Web-ului dinamic i interactiv.
9 n figura 2.71 este prezentat documentul (X)HTML complet, editat cu Macromedia
Dreamweaver.
Figura 2.71
6. Afiai pagina Web ntr-un navigator (figura 2.72).
86
Figura 2.72
Metoda 2
1. Creai documentul (X)HTML.
2. Introducei elementul <script> ... </script> n seciunea <head>
... </head> a documentului (vezi figura 2.73).
Figura 2.73
3. Definii funcia calcul() n care introducei formula de calcul precedat de
cuvntul cheie return (vezi figura 2.74).
Figura 2.74
Remarci:
9 Revedei paragraful Definii o funcie (Conversaia 2).

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

figura 2.75).
87
Figura 2.75
Remarci:
9 Apelai funcia calcul() pentru mai multe valori ale razei: calcul(4),
calcul(5).
9 n figura 2.76 este prezentat documentul XHTML complet editat cu Macromedia
Dreamweaver.
Figura 2.76
5. Afiai pagina Web ntr-un navigator (vezi figura 2.77).
88
Figura 2.77
Metoda 3
1. Creai fiierul calcul.js care conine funcia calcul(), figura 2.78.
Figura 2.78
2. Introducei
atributul
src=calcul.js n tag-ul de deschidere al
elementului <script> (figura 2.79).
Figura 2.79
Remarci:
9 Atributul src transmite interpretorului JavaScript c dorii s includei codul JavaScript

n fiierul calcul.js.
9 Extensia .js nu este obligatorie dar prezena ei identific fiierele care conin codul
surs JavaScript.
Metoda 4
Indicaie. Folosii gestionarul de evenimente onClick n tag-ul <input> al unui
formular (vezi figura 2.80).
...
89
<form name=form1>
Raza?<input type=textname=raza /><br />
Aria:<input type=textname=raza /><br />
<input type=button name=buton1 value=calculeaza aria rezervorului sferic
onClick=document.form1.aria.value=document.form1.raza.value=
document.form1.raza.value=4*Math.PI; />
</form>
Figura 2.80
...
Remarc. Vezi Conversaia 8.
90
JavaScript
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);
Figura 2.81
</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
9 http://msdn.microsoft.com/library/default.asp?url=/library/en-us/script56/html/
js56jsorijscript.asp
9 http://developer.netscape.com/tech/javascript
9 http://www.zdnet.com/devhead/filters/0,,2133214,00.html
9 http://webdeveloper.earthweb.com/webjs
9 http://javascript.about.com/?once=true&
Conversaia 3
Instruciunile limbajului JavaScript

f
f
f
f
f
f
f
f
f
f
f
f
f
Tipuri de instruciuni JavaScript

for. Aplicaii
while. Aplicaii
do ... while. Aplicaii
for ... in. Aplicaii
if, if...else, switch. Aplicaii
Instruciunea with
Tem
Instruciunile limbajului JavaScript

JavaScript este un limbaj de nivel nalt, bazat pe obiecte, care permite
programatorilor s creeze cu uurin documente (pagini) Web interactive.
Instruciunile limbajului JavaScript sunt uor de neles i aplicat. Ele piloteaz
script-ul, permindu-i s ia o decizie, s creeze bucle (iteraii) etc.
Cea mai mare parte a instruciunilor JavaScript sunt recunoscute de toate
navigatoarele, dar ... mai exist i divergene!
92
Pentru a programa n limbajul JavaScript folosii urmtoarele tipuri de instruciuni
(vezi figura 3.1).
Tipuri de instruciuni
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
throw i try...catch
poriuni
de
cod
interceptarea
eventualelor erori
declararea unei variabile
var
simplificarea efortului de programare
with
(reducerea codului)
Figura 3.1
instruciunile break, continue
Iteraii
n limbajul JavaScript, iteraiile (repetiiile) se codific cu una din urmtoarele
instruciuni:
9 for (pentru)
structur de iteraie cu numr cunoscut de pai;
9 for...in
structur de tip for care permite baleierea tuturor

elementelor unei matrici sau ale unui obiect;
9 while (ct timp) structur de iteraie cu numr necunoscut de pai,

condiionat anterior;
9 do...while
structur de tip while, condiionat posterior.
for (pentru)
Utilizai instruciunea for pentru a crea cicluri (bucle) n programele
dumneavoastr JavaScript. Instruciunea for este folosit pentru a repeta o
instruciune sau o secven de instruciuni ct timp rezultatul evalurii unei
condiii este TRUE.
93
Instruciunea for este prezentat n detaliu n figura 3.2.
Instruciune Sintax
for
for(ExpresieIniial;CondiieContinuare;
ExpresieFinal){
cod JavaScript
unde,
ExpresieIniial este expresia de iniializare a variabilei de

control a instruciunii;
CondiieContinuare este cel de-al doilea parametru al
instruciunii, care reprezint o expresie logic ce se
evalueaz la valoarea true sau false;
ExpresieFinal actualizeaz valoarea variabilei de control a
instruciunii.
Bucla este executat ct timp CondiieContinuare returneaz TRUE.
Exemplu: <script>
Exemplu:
Exemplu:
Exemplu:
Exemplu:
Exemplu:
Figura 3.2
for(i=1;i<13;i++){
document.write(i+ <br />);
}
</script>
<script>
for(i=1;i<13;i+=2){
}
</script>
<script>
//dou bucle imbricate (nested)
for(x=1;x<11;x++){
for(y=1;y<11;y++){
document.write(x*y+ );
}
}
</script>
<script>
for(var i=true;i==true;){
i=confirm( Doriti sa continuati?);
}
</script>
<script> //ciclu infinit;
for(;;){
document.write(Iar innebunesc salcamii!);
}
</script>
<script>
for(i=0;i<13;i++){
;//instructiunile ciclului
}
</script>
Mai multe despre for

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

Formularea problemei
Vom relua problema din conversaia precedent (vezi EXEMPLUL 2 JAVASCRIPT)
considernd de aceast dat mai multe rezervoare cilindrice echilaterale (generatoarea
este egal cu diametrul) toate pline cu benzin. Raza acestora variaz de la 2 la 10 m
(vezi figura 3.3) cu pasul 1 (2, 3, ..., 10 m).
Dorim s calculm i s afim ntr-o pagin Web cantitatea de lichid (benzin) din cele
nou rezervoare cilindrice echilaterale, iar n final s afim cantitatea total de benzin
din toate rezervoarele.
95
Densitatea benzinei (0.7 g/cm3) se va introduce n mod dinamic.
Cum s-ar putea rezolva aceast problem?
Cei mai grbii dintre dumneavoastr se i gndesc deja la instruciunile JavaScript
necesare scrierii script-ului.
Banal, extrem de banal vor exclama poate muli dintre dumneavoastr!
Formulele de calcul pot constitui un impediment, dar vi le vom aminti noi:
m
(1)
V
unde, este densitatea, m reprezint masa, iar V este volumul.
V = R 2 * G (2)
unde, G este generatoarea cilindrului.
V = R 2 * 2 R = 2R 3 (3)
unde, V este volumul cilindrului echilateral.
Cam multe formule, dintr-o dat!
Este adevrat, dar cu siguran c ele nu v vor strica viaa personal! Promitem!
Remarc. A gndi n limbaj informatic (JavaScript) nc de la formularea problemei ni se pare o
concepie total greit! V propunem metodologia de analiz, proiectare i realizare a aplicaiilor
pe care v-am prezentat-o n Conversaia precedent.
Analiza problemei
Formatul datelor de ieire (fereastra n care se afieaz pagina Web), tabela de variabile
i specificaiile de programare sunt ilustrate n figurile: 3.3, 3.4, 3.5.
RAZA
Figura 3.3
2
3
.
.
.
10
MASA TOTALA
Formatul datelor de ieire

MASA
XXX.XX
XXX.XX
.
.
.
XXX.XX
XXX.XX TONE
Tabela de variabile
Figura 3.4
Variabile de stare
Variabile de iesire
96
d: densitatea benzinei
v: volumul cilindrului echilateral

r: raza rezervorului
s: masa total de benzin

m: masa de benzin
Descriere. Script-ul calculeaz i afieaz cantitatea de benzin din mai multe
rezervoare cilindrice echilaterale a cror raz variaz de la 2 la 10 m, cu pasul de 1 m.
Intrri. Densitatea benzinei (0.7 g/cm3).
Ieiri. Masa de benzin din fiecare rezervor i masa total de benzin.
1. Citete densitate benzin (d)
2. Iniializeaz variabila s cu zero
3. Tiprete cap tabel
7. Afieaz raza (r) i masa rezervorului

(m)
8. Iniializeaz variabila de control a
4. Calculeaz volumul rezervorului (V)

5. Calculeaz masa (m) de benzin din
fiecare rezervor
buclei (r)
9. Incrementeaz i testeaz variabila
de control a buclei (r)
6. nsumeaz m n s
10. Afieaz masa total de benzin (s)
Figura 3.5
11. Stop
Vom folosi pentru proiectarea script-ului cele dou variante de pseudocod (vezi
Conversaia 2):
9 Varianta 1 limbaj natural structurat;
9 Varianta 2 scriere formalizat (apropiat de limbajul JavaScript).
Varianta 1
n figura 3.6 se prezint pseudocodul n limbajul natural structurat (Varianta 1).
1. Citete densitatea benzinei, afieaz capul de tabel, calculeaz, nsumeaz i
afieaz cantitatea de benzin din rezervoarele cilindrice echilaterale a cror raz
variaz de la 2 la 10 m cu pasul de 1 m.
1.1. Citete densitatea benzinei.
1.2. Iniializeaz cu zero masa total de benzin.
1.3. Tiprete un rnd de 30 de liniue.
Figura 3.6
1.4. Tiprete capul de tabel (RAZA, MASA).
97
1.5. Tiprete un rnd de 30 de liniue.
1.6. Pentru fiecare rezervor cilindric echilateral a crui raz variaz de la 2 la
10 m, cu pasul de 1 m, repet aciunile:
1.6.1. Calculeaz volumul.
1.6.2. Calculeaz masa de benzin.
1.6.3. nsumeaz masa de benzin n cantitatea total de benzin.
1.6.4. Afieaz raza i masa de benzin.
2. Tiprete un rnd de 30 de liniue.
Figura 3.6
(continuare)
3. Afieaz masa total de benzin.

4. Stop.
Remarci:
9 Evident, aciunea 1 nu reprezint o aciune primitiv, impunndu-se n acest sens o

rafinare (descompunere) a acestora (aciunile 1.1, ..., 1.6).
9 Pentru rafinarea aciunii neprimitive 1, vom folosi metoda analizei descendente

(top-down).
9 Prezentarea algoritmului n limbaj natural structurat are, dup cum ai putut constata i
singuri urmtoarele dezavantaje: exprimri lungi, greoaie etc.
Varianta 2
n figura 3.7 se prezint pseudocodul n scriere formalizat (Varianta 2).
REZERVOARE
INIT
BEGIN
BEGIN
Citete densitatea benzinei (d)
s=0
END
BEGIN
INIT
PRELUCRRI
DO LINIUTZA
WRITE(RAZA+---+MASA);
DO LINIUTZA
FOR(r=2;r<=10;r++)
3
v=2r
m=d*v
s=s+m
WRITE(r+...+m)
ENDFOR
PENTRU
PENTRU
PRELUCRRI
Figura 3.7
END
DO LINIUTZA
WRITE(MASA TOTALA+ +s)
REZERVOARE
LINIUTZA
END
BEGIN
LINIUTZ
END
Afieaz un rnd de 30 liniue

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

execut numai n anumite condiii, ct i grupuri de instruciuni care se execut de attea
ori ct timp sau pn cnd este ndeplinit o condiie.
9 Formatul general al blocului de secven este ilustrat n figura 3.8.
98
Eticheta
Figura 3.8
Eticheta
BEGIN
Grup de instruciuni
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).
9 Formatul general al structurii de iteraie FOR este ilustrat n figura 3.9.
Eticheta
Figura 3.9
Eticheta
FOR(v=vi;v<=vf;v++)
Corpul buclei
ENDFOR
unde,
v reprezint variabila de control a buclei; vi reprezint valoarea iniial a variabilei v;

vf reprezint valoarea final a variabilei v, iar v++ servete, n general la incrementarea
variabilei v. FOR i ENDFOR sunt delimitatorii structurii.
Codificarea n limbajul JavaScript

n figura 3.10 este prezentat documentul (X)HTML complet.
Figura 3.10
n figura 3.11 i figura 3.12 se prezint rezultatele execuiei script-ului.
99
Figura 3.11
Figura 3.12
Comentarii
9 Funcia liniutza() este apelat din trei puncte ale corpului
(<body>...</body>) al documentului.
9 Funcia liniutza() mai poate fi scris i sub forma (vezi figura 3.13).
principal
function liniutza(){
for(i=1;i<=30;i++){
document.write(-);
}
Figura 3.13
}
9 Pentru calculul volumului rezervorului cilindric echilateral am utilizat proprietatea
Math.PI i metoda Math.pow(r,3) care aparin obiectului Math (vezi obiectul
matematic Math).
100
Aplicaii
Scriei un script care calculeaz i afieaz suma primelor 100 numere ntregi.
Indicaie. n figura 3.14 este prezentat script-ul aplicaiei. Inserai acest script ntr-un
document (X)HTML.
Figura 3.14
Scriei un script care genereaz 25 de seturi de coordonate, generate de dou bucle
for imbricate:
(0,0), (0,1), (0,2), (0,3), (0,4), (0,5)
(1,0), (1,1), (1,2), (1,3), (1,4), (1,5)
(2,0), (2,1), (2,2), (2,3), (2,4), (2,5)
(3,0), (3,1), (3,2), (3,3), (3,4), (3,5)
(4,0), (4,1), (4,2), (4,3), (4,4), (4,5)
(5,0), (5,1), (5,2), (5,3), (5,4), (5,5)
document (X)HTML.
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.
Figura 3.17
Scriei un script care editeaz urmtorul triunghi al numerelor (figura 3.18).
Figura 3.18
1
1
1
1
1
1
1
1
1
1
2
2
2
2
2
2
2
2
2
3
3
3
3
3
3
3
3
4
4
4
4
4
4
4
5
5
5
5
5
5
6
6
6
6
6
7
78
789
7 8 9 10
while (ct timp)

Una din instruciunile de iteraie (repetiie) cele mai simple este while,
cunoscut i sub denumirea de structur de iteraie cu numr necunoscut de
pai, condiionat anterior.
Deosebirea dintre while i for const n faptul c instruciunea while nu
include n declaraia sa funcia de iniializare a variabilei de control (vezi
102
ExpresieIniial) i funcia de actualizare a variabilei de control (vezi
ExpresieFinal).
Instruciunea while este prezentat n detaliu n figura 3.19.
Sintax
while
while (condiie){
cod JavaScript
}
Instruciunile (din corpul buclei (cod JavaScript ) sunt executate ct timp
Exemplu:
<script>
i=1;
while(i<=7){
document.writeln(i);
++i;
}
document.writeln(Ati afisat 7 numere.);
</script>
<script>
x=1;
while(x<10){
document.write(x+ <br />);
x++;
}
</script>
<script>
var k=20;
while(k<11){
document.write(k+<br />);
k++;
}
</script>
<script>
i=10;
while(i>0){
document.write(i);
--i;
}
document.write(La revedere!);
</script>
<script>
i=1;
while(i<=100){
i*=2;
}
</script>
Exemplu:
Exemplu:
Exemplu:
Exemplu:
Figura 3.19
Instruciune
rezultatul evalurii condiie este TRUE.
103
Mai multe despre while
9 while este foarte asemntor cu if. if execut o singur dat
instruciunile din corpul buclei (cod JavaScript), n timp ce while le
execut ntr-o bucl ct timp rezultatul evalurii condiie este TRUE.
9 n realitate, bucla for nu este dect un caz particular al buclei while,
care integreaz direct funciile de iniializare i de incrementare a
variabilei de control a buclei.
9 Buclele while au o arie de utilizare mai larg dect buclele for, dar
decizia n a le alege v aparine numai dumneavoastr!
9 Numrul minim de execuii a cod JavaScript este zero.
9 Instruciunea break provoac o ieire imediat din bucl.
9 Instruciunea continue provoac reluarea buclei fr a mai fi
executate instruciunile care urmeaz.

Problema din EXEMPLUL 3.2 JAVASCRIPT este aceeai cu problema din EXEMPLUL
3.1 JAVASCRIPT. Singurele deosebiri apar n urmtoarele dou faze:
9 proiectarea script-ului n pseudocod s-a nlocuit for cu while (vezi figura
3.20).
Pseudocodul
REZERVOARE
BEGIN
...
BEGIN
PRELUCRRI
...
r=2
WHILE(r<=10)
3
v=2r
m=d*v
s=s+m
WRITE(r+...+m)
r++
ENDWHILE
CATTIMP
CATTIMP
PRELUCRRI
Figura 3.20 REZERVOARE
END
END
104
9 codificarea n limbajul JavaScript n script-ul din corpul principal al
documentului (X)HTML s-a nlocuit for cu while (figura 3.21).
Figura 3.21
Rezultatele obinute sunt evident, identice.
do while
Dac while execut una sau mai multe instruciuni (corpul buclei) de cel puin
zero (0) ori, dowhile execut cel puin o dat instruciunea (instruciunile) din
corpul buclei; apoi repet execuia ct timp rezultatul evalurii condiiei (vezi
condiie din dowhile) este TRUE.

Instruciunea dowhile este prezentat n detaliu n figura 3.22.
Figura 3.22
Instruciune
Sintax
dowhile
do{
cod JavaScript
}
while (condiie)
do...while execut cod JavaScript cel puin o dat, apoi este
Exemplu:
<script>
i=0;
do{
document.writeln(i+<br />);
++i;
}
while(i<11);
</script>
reexecutat ct timp rezultatul evalurii condiie este TRUE.
105
Exemplu:
Exemplu:
Figura 3.22
(continuare)
<script>
var i=20;
do{
i++;
}
while(i<11);
</script>
<script>
s=20; i=1;
do{
s+=i;
i++;
}
while(i<=100);
alert(Suma primelor 100 de numere naturale este+s);
</script>
Mai multe despre do...while

9 do...while
funcioneaz
exact
ca
instruciunea
while, cu
deosebirea c nu evalueaz condiie dect dup prima iteraie. n felul

acesta se garanteaz c script-ul dintre acolade va fi executat cel puin o
dat.
9 Instruciunea break provoac o ieire forat din bucl.
9 Instruciunea continue provoac reluarea buclei fr a mai fi
executate instruciunile care urmeaz.

Problema din EXEMPLUL 3.3 JAVASCRIPT este aceeai cu problema din EXEMPLUL
3.1 JAVASCRIPT.
Singurele deosebiri apar n fazele de:
9 Proiectarea script-ului n pseudocod s-a nlocuit for cu do...while (vezi
figura 3.23).
106
Pseudocodul
PRELUCRRI
BEGIN
...
r=2
DO
PRELDOWHILE
Figura 3.23 PRELDOWHILE

PRELUCRRI
v=2r
m=d*v
s=s+m
WRITE(r+...+m)
r++
WHILE(r<=10)
END
9 Codificarea n limbajul JavaScript n script-ul din corpul principal al

documentului (X)HTML s-a nlocuit for cu do...while (figura 3.24).
Figura 3.24
for ... in
Instruciunea forin este o structur de iteraie care execut aceeai
instruciune sau aceeai secven de instruciuni pentru toate proprietile unui
obiect. Aceast instruciune poate fi util, de exemplu, atunci cnd dorii s
afiai numele tuturor proprietilor unui obiect.
Instruciunea forin este prezentat n detaliu n figura 3.25.
Instruciune
Sintax
forin
for (Proprietate in Obiect) {

cod JavaScript
}
107
unde,
Proprietate este un element literal generat de

Exemplu:
Exemplu:
Figura 3.25
JavaScript.
Bucla listeaz proprietile unui obiect. Variabila de control a buclei
(Proprietate) reprezint o proprietate a obiectului.
<script>
//afieaz toate proprietile obiectului window i valorile acestuia
for (x in window){
document.writeln(x+:+window[x]+<br />);
}
</script>
<script>
//afieaz toate proprietile unui obiect creat
obiect=new object;
obiect.nume=maxim;
obiect.zi=luni;
obiect.culoare=cepia;
for(x in obiect){
document.write(x+:+ obiect[x]+<br />);
}
</script>
Mai multe despre for...in

9 Pentru a folosi cu uurin instruciunea for...in este bine s avei
cunotine elementare despre obiectele JavaScript.
9 Putei folosi for...in cu orice obiect JavaScript, indiferent dac are
sau nu proprieti.
9 for...in funcioneaz i cu alte obiecte particularizate, ca de
exemplu o variabil.
9 for...in se termin n mod automat, atunci cnd a fost identificat
ultima proprietate a obiectului.
Decizii
108
n limbajul JavaScript, deciziile (seleciile) se codific cu una din urmtoarele

instruciuni:
9 if (dac) structur de decizie cu o singur alternativ.
9 if else (dac n caz contrar) structur de decizie cu dou
alternative.
9 switch structur de decizie cu mai multe alternative.
if (dac)
Una din principalele faciliti ale unui limbaj de programare este aceea de a
putea testa i compara valorile.
Putem crea astfel script-uri care vor reaciona n mod diferit n funcie de valorile
variabilelor sau de informaiile furnizate de ctre utilizator.
Principala instruciune de decizie (selecie) a limbajului JavaScript este if.
Instruciunea if este prezentat n detaliu n figura 3.26.

Exemplu:
Exemplu:
Figura 3.26
Exemplu:
Instruciune
Sintax
if
if (condiie){
cod JavaScript
}
unde,
condiie poate fi orice expresie logic
Execut secvena de instruciuni dintre acolade (cod JavaScript) dac

rezultatul evalurii condiie este TRUE. n caz contrar, JavaScript ignor
cod i continu.
<script>
a=13;b=2;
if(a>b){
alert(a este mai mare ca b);
}
</script>
<script>
numarator=4; numitor=0;
if(numitor>0){
a=numarator/numitor;
document.write(a);
}
</script>
<script>
109
Exemplu:
Exemplu:
Exemplu:
Exemplu:
Figura 3.26
(continuare)
var sex=f;
if(sex==f){
document.write(Buna ziua, doamna!);
}
</script>
<script>
nume=Popescu; prenume=Ion;
if((nume==)||(prenume==)){
document.write(Lipsesc valori!);
}
</script>
<script>
if((nume==)&&(prenume==)){
document.write(Lipsesc doua valori);
}
</script>
<script>
if((a<100)&&(a>250)){
document.write(Ce parere aveti de acest test?);
}
</script>
<script>
<script>
if(a){
if(a==true){
b=ADEVARAT;
b=ADEVARAT;
}
}
echivalent cu
alert(b);
alert(b);
</script>
</script>
Mai multe despre if

9 if este o structur de decizie (decision structure, n limba englez) care
testeaz i compar diferite valori.
9 Dac partea a doua a unei instruciuni if poate conine orice
instruciune JavaScript, prima parte (condiie) trebuie s respecte o
sintax precis.
9 Condiie
(expresie
condiional)
conine
general
dou
valori
(constante, expresii, variabile etc.) care se compar una cu cealalt.

Cele dou valori sunt separate printr-un operator relaional.
9 Nu confundai operatorul de egalitate (== sau ===) cu operatorul de
afectare (=), chiar dac ele se citesc egal.
9 Nu de puine ori suntem pui n situaia s comparm o variabil cu mai
multe valori sau cu mai multe variabile o dat. Pentru astfel de cazuri
folosii operatorii logici.
110
if ... else (dac ... n caz contrar)
Uneori, simpla folosire a instruciunii if nu este suficient. n acest caz,
completai instruciunea if cu cuvntul cheie else (n caz contrar, n limba
romn). else precizeaz interpretorului ce anume trebuie s fac atunci cnd
rezultatul evalurii condiie este false.
Instruciunea if else este prezentat n detaliu n figura 3.27.
Instruciune
Sintax
if else
if (condiie) {
cod1 JavaScript
}
else {
cod2 JavaScript
}
unde,
cod1 JavaScript: instruciuni executate cnd
rezultatul evalurii condiie este TRUE.
cod2 JavaScript: instruciuni executate cnd
rezultatul evalurii condiie este FALSE.
Execut prima secven de instruciuni (cod1 JavaScript) dintre acolade
({}) dac rezultatul evalurii condiie este TRUE.
Blocul (cod2 JavaScript) else nu este obligatoriu. El conine
instruciuni care se execut dac rezultatul evalurii condiie este
FALSE.
Dac blocul else nu exis i dac rezultatul evalurii condiie este
FALSE, instruciunile blocului if nu sunt executate.

Script-ul transmite controlul execuiei instruciunii imediat urmtoare
dup bloc.
Dac rezultatul evalurii condiie este TRUE instruciunile blocului
else nu sunt executate.

Script-ul transmite controlul execuiei instruciunii imediat urmtoare
dup blocul else.
Exemplu:
Figura 3.27
<script>
var sex=f;
if(sex==f){
document.write(Buna ziua, doamna!);
}
else{
document.write(Buna ziua, domnule!);
}
document.write(<br />La revedere!);
</script>
111
Exemplu:
Exemplu:
Exemplu:
Exemplu:
Figura 3.27
(continuare)
<script>
var sex=f;
if((sex==f)||(sex==m)){
document.write(Sex:+sex);
}
else{
alert(Sex nedefinit!);
}
</script>
<script>
var oras=Ploiesti;
if(oras==Paris){
document.write(Locuinta dumneavoastr este in capitala Frantei);
}
else{
if (oras==Sinaia){
document.write(Locuinta dumneavoastr este la Sinaia);
}
else{
if(oras==Ploiesti){
document.write(Locuinta dumneavoastr este la Ploiesti);
}
}
}
</script>
<script>
var oras=Caracal;
if(oras==Paris){
document.write(Locuinta dumneavoastr este in capitala Frantei);}
else if (oras==Sinaia){
document.write(Locuinta dumneavoastr este la Sinaia);}
else if(oras==Ploiesti){
document.write(Locuinta dumneavoastr este la Ploiesti);}
</script>
<script>
var tara=Romania;
var oras=Vaslui;
if(tara==Romania){
if(oras==Bucuresti){
document.write(Locuinta ta de vara este in capitala Romaniei);}
else{
document.write(Locuinta ta de vara este in Romania, in provincie);}
}
else{
document.write(Locuinta ta de vara nu este in Romania);
}
</script>
112
Mai multe despre if ... else
9 Instruciunile if ... else pot fi imbricate.
9 Ca i instruciunea if, else poate fi urmat de una sau mai multe
instruciuni delimitate de acolade ({}).
9 Nu uitai de expresiile condiionale prescurtate (vezi figura 3.28, figura
3.29).
<script>
x=(a==1)?1:0;
</script>
echivalent cu
Figura 3.28
<script>
if(a==1){
x=1;
}
else {
x=0;
}
</script>
<script>
document.write(i+((i==1)?cuvant gasit:cuvinte gasite.));
Figura 3.29
</script>
switch
Instruciunea switch este prezentat n detaliu n figura 3.30.
Instruciune
Sintax
switch
switch (variabila)
case Valoare1
cod1 JavaScript
break;
case Valoare2
cod2 JavaScript
break;
default:
cod3 JavaScript
}
Switch controleaz coninutul unei variabile cu una sau mai multe

instruciuni case.
Instruciunea break este indispensabil.
Instruciunea default este facultativ. Ea conine instruciunile
care urmeaz a fi executate n situaia n care nici unul din
Figura 3.30
case-urile precedente nu conin valoarea variabilei testate.

Exemplu:
Figura 3.30
<script>
var n=100;
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!);
Figura 3.31
</script>
<script>
var oras=Ploiesti;
switch(oras){
case Ploiesti:
document.write(Locuiti la Ploiesti); break;
case Peris:
document.write(Locuiti la Peris); break;
case Paris:
document.write(Locuiti la Paris); break;
case Roman:
document.write(Locuiti la Roman); break;
case Roma:
document.write(Locuiti la Roma); break;
default:
document.write(Sunteti un itinerant!);
}
Figura 3.32
</script>
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=2R3
Figura 3.33
Dorim s calculm i s afim ntr-o pagin Web cantitatea de lichid (benzin) din
rezervor. Raza rezervorului trebuie s aib o valoare pozitiv. Densitatea benzinei i raza
se vor introduce n mod dinamic.
Analiza problemei
Formatul datelor de ieire (fereastra n care se afieaz pagina Web), tabela de variabile
i specificaiile de programare sunt ilustrate n figurile: 3.34, 3.35, 3.36.
a)
RAZA
Figura 3.34
MASA
-2
b)
RAZA NEGATIVA
RAZA
MASA
xxxxx.xxxxx
Tabela de variabile
Variabile de stare
Variabile de iesire
m: cantitatea de benzin
Figura 3.35 r: raza rezervorului
v: volumul rezervorului
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)
6.
2. Citete raza rezervorului (r)
rezervor
3. Afieaz capul de tabel

4. Testeaz
valoarea
Calculeaz masa (m) de benzin din
(introdus
7.
Afieaz raza (r) i masa rezervorului
8.
n caz de eroare, afieaz raza (r) i

mesajul: RAZA NEGATIV
dinamic) razei
5. Calculeaz volumul rezervorului (v).
9.
Afieaz un rnd de liniue
10. Stop
Figura 3.36
n figura 3.37 se prezint pseudocodul n scriere formalizat.
Pseudocodul
REZERVOR
INIT
BEGIN
BEGIN
//Citete densitatea benzinei (d)
READ(d)
//Citete raza rezervorului (r)
READ(r)
END
BEGIN
INIT
PRELUCRRI
DO LINIUTZA
WRITE(RAZA+---+MASA);
DO LINIUTZA
IF(r<0)
WRITE(r+ +Raza negativa);
ELSE
3
v=2r
m=d*v
WRITE(r+...+m)
ENDIF
DECIZIE
DECIZIE
DECIZIE
PRELUCRRI
REZERVOR
LINIUTZA
END
DO LINIUTZA
END
BEGIN
Afieaz un rnd de 30 de liniue
Figura 3.37 LINIUTZ
END
Remarc. Pseudocodul structurii de selecie IF ... ELSE este ilustrat n figura 3.38.
116
Eticheta
Eticheta
Figura 3.38 Eticheta
IF (condiie)
Grup de instruciuni
ELSE
Grup de instruciuni
ENDIF
unde, IF, ELSE i ENDIF sunt delimitatori ce poart aceeai etichet.

Figura 3.39
Figura 3.40
117
Figura 3.41

continue
Atunci cnd interpretorul JavaScript ntlnete instruciunea continue el revine
la nceputul buclei i ignor celelalte instruciuni din interiorul buclei.
Instruciunea continue este prezentat n detaliu n figura 3.42.
Instruciune
Sintax
continue;
continue Eticheta
Instruciunea este utilizat n buclele: while, do ... while,
continue
for.
De cele mai multe ori, instruciunea este inclus ntr-o instruciune if.
continue poate fi de asemenea utilizat cu o etichet.

Exemplu:
Figura 3.42
<script>
var i=1;
while(i<21){
document.write(i);
i++;
if(i<10){
continue;
}
}
</script>
118
Exemplu:
Exemplu:
Figura 3.42
(continuare)
<script>
iesire:;
for(i=0;i<3;i++){
document.write(i=+i+<br />);
for(j=0;j<5;j++){
if(j==3){
continue iesire;
}
document.write(j=+j+<br />);
}
}
document.write(SFARSIT);
</script>
<script>
iesire:;
for(i=0;i<3;i++){
document.write(i=+i+<br />);
for(j=0;j<5;j++){
if(j==3){
continue;
}
}
}
</script>
break
Instruciunea break provoac o ieire imediat din blocul de instruciuni curent.
Instruciunea break este prezentat n detaliu n figura 3.43.
Exemplu:
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).
<script>
var i=1; j=5;
while(i<20){
rezultat=i*j;
document.write(rezultat+<br />);
if(r>50) break;
i++;
}
</script>
119
Exemplu:
Exemplu:
Figura 3.43
(continuare)
<script>
iesire:;
for(i=0;i<3;i++){
document.write(i=+i+ <br />);
for(j=0;j<5;j++){
if(j==3){
break iesire;
}
}
}
</script>
<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
with simplific scrierea programelor JavaScript sau reduce pe ct posibil
cantitatea de cod JavaScript. with permite specificarea unui obiect i este urmat
de un bloc de instruciuni plasat ntre acolade. Pentru fiecare din instruciunile
blocului, proprietile menionate fr ca obiectul corespunztor s fie indicat se
refer la obiectul specificat prin with.
Instruciunea with este prezentat n detaliu n figura 3.44.
Instruciune
Sintax
with
with (obiect) {
cod JavaScript
}
Modific temporar contextul punnd n eviden un obiect la care se fac

referiri ntr-un bloc de instruciuni.
120
Exemplu:
Figura 3.44
<script>
//Urmtorul cod repet metoda document.write() de patru ori
document.write(Pe trotuar, alturi salt+<br />);
document.write(Dou fete vesele,+<br />);
document.write(Zu c-mi vine s las balt,+<br />);
document.write(Toate interesele+<br />);
//cuvntul cheie with elimin referinele multiple la obiectul document
with(document){
write(Pe trotuar, alturi salt+<br />);
write(Dou fete vesele,+<br />);
write(Zu c-mi vine s las balt,+<br />);
write(Toate interesele+<br />);
}
</script>
Pentru un cod scurt (vezi i figura 3.45) interesul utilizrii instruciunii with nu
este evident, dar cnd trebuie s accesm acelai obiect n cadrul unei proceduri
sau cnd utilizm un obiect predefinit precum Math, with v ajut s ctigai
foarte mult timp.
Figura 3.45
with(nume){
window.alert(Lungimea numelui este: + length);
toUpperCase();}
121
JavaScript
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);
Figura 3.46
</script>
5. Care este rolul instruciunii switch?
6. Care este rolul instruciunilor break i continue?
7. Scriei un script care calculeaz i afieaz valoarea polinomului:
5X2+4X+10
pentru x=2.
8. Identificai erorile de sintax din urmtoarele script-uri:
122
Figura 11.13 (Conversaia 11).
Vizitai site-urile
9 www.bdml.net/listes
9 www.natural.com/JavaScript
9 http://www.webcoder.com
9 http://JavaScript.internet.com/miscellaneous/
9 http://www.geocities.com/jeffery_p_sanders/
9 http://JavaScript.internet.com/forms/checkbox_changer.html
Conversaia 4
Obiectele interne String, Array

f
f
f
f
f
f

Obiectele interne
Obiectul String. Aplicaii
Obiectul Array. Aplicaii
Tem

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

sunt recunoscute de navigatoare.
9 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.
Figura 4.1
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
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(),
charAt(),
blink(),
charCodeAt(),
fixed(),
fontcolor(),
bold(),
concat(),
fontsize(),
fromCharCode(), indexOf(), italics(),

lastindexOf(),
link(),
match(),
replace(), search(), slice(), small(),

split(),
strike(),
substring(),
sub(),
sup(),
substr(),
toLowerCase(),
toString(), toUpperCase()
Figura 4.2
Constructorul String()
Constructorul String() creeaz un nou ir de caractere.
Constructorul String() este prezentat n detaliu n figura 4.3.
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>
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>
Figura 4.4
Remarc. Un obiect String (scriei S cu majuscul) este diferit de datele (ir de caractere) pe
care le conine.
Metodele obiectului String

Metodele obiectului String pot fi clasificate dup cum urmeaz:
9 Metode pentru formatarea irurilor de caractere big(), blink(),
bold(),
fontcolor(),
fontsize(),
italics(),
small(), strike(), sub(), sup().

9 Metode pentru manipularea irurilor de caractere anchor(),
charAt(),
charCodeAt(),
concat(),
fixed(),
fromCharCode(), indexOf(), lastIndexOf(), link(),

match(), replace(), search(), slice(), split(),
substr(), substring(), toLowerCase(), toString(),
toUpperCase().
Metode pentru formatarea irurilor de caractere
Metodele obiectului String pentru formatarea irurilor de caractere sunt
prezentate n detaliu n figura 4.5.
Exemplu:
Figura 4.5
Metode
Sintax
big()
ir.big()
ncadreaz un ir de caractere cu tag-urile <big>...</big>.
<script>
nou_demo_sir=demo_sir.big();
document.write(nou_demo_sir);
</script>
127
blink()
ncadreaz un ir de caractere cu tag-urile <blink>...</blink>.
Exemplu:
<script>
nou_demo_sir=demo_sir.blink();
</script>
bold()
Figura 4.5
(continuare)
ir.blink()
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>
128
strike()
ncadreaz
Exemplu:

Figura 4.5
(continuare)
ir.strike()
un
de
caractere
cu
tag-urile
ncadreaz un ir de caractere cu tag-urile <sub>...</sub>.
sup()
ir
<strike>...</strike>.
<script>
nou_demo_sir=demo_sir.strike();
</script>
sub()
ir.sub()
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()
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()
Figura 4.6
ir.charAt(Valoare)
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>.
129
fromCharCode()
Returneaz codul Unicode corespunztor caracterului indicat.
indexOf()
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>
<script>
email=pepito@brazil.com;
r=email.indexOf(i,6);
document.write(r);
//afieaz 11
</script>
<script>
r=email.indexOf(canaba);
document.write(r); //afieaz 3
</script>
lastIndexOf()
ir.lastIndexOf(ir)
Exemplu:

Exemplu:
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.
<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
(continuare)
ir.indexOf(ir,Valoare)
Exemplu:
Figura 4.6
ir.fromCharCode(Valoare)
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.
130
Exemplu:
<script>
model=/ION/i;
text=ion@yahoo.com;
r=text.replace(model.ION);
document.write(r); //afieaz yahoo.com
</script>
search()
ir.search(expresieregulat)
Caut o expresie regulat ntr-un ir de caractere i returneaz valoarea

poziiei primului caracter gsit. n caz de eec, metoda returneaz
valoarea 1.
Exemplu:
<script>
model=/pion/i;
text=Nebunul i Pionul;
document.write(text.search(model));
//afieaz 11
</script>
slice()
ir.slice(Valoare1,Valoare2)
Extrage o parte dintr-un ir de caractere i returneaz irul extras.
Exemplu:
Exemplu:
<script>
text=liv@canaba.com;
a=text.slice(4,100);
document.write(a);
//afieaz canaba.com
</script>
<script>
text=ion@yahoo.com;
rezultat=text.slice(0,3);
document.write(rezultat);
//afieaz ion
</script>
split()
ir.split(ir)
Divizeaz un ir de caractere n subiruri i returneaz o matrice.

Metoda recunoate expresiile regulate.
substr()
Figura 4.6
(continuare)
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>
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>
Figura 4.6
(continuare)
Obiectul Array
Aplicaiile din conversaiile anterioare au fost construite pe tipuri de date simple
crora le-au fost asociate variabile simple.
Suntei un ... gurmand de variabile? Dac da, folosii obiectul intern Array
(matrice).
O matrice (array) este o list de valori sau de referine ctre alte obiecte. O
matrice poate conine, de exemplu o list de date numerice sau alfanumerice.
Fia obiectului intern Array este prezentat n figura 4.7.
132
Fia obiectului Array
constructorul Array()
Proprieti:
length
Metode:
concat(),
join(),
pop(),
push(),
reverse(),
shift(),
slice(),
sort(),
splice(), toString(), unshift()

Figura 4.7
Constructorul Array()
Pentru a crea o nou matrice, utilizai constructorul Array().
Constructorul Array()este prezentat n detaliu n figura 4.8.
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>
<script>
ListaCulori=new Array(7);
</script>
Exemplu:
Exemplu:
Figura 4.8
Constructor
<script>
ListaCulori=new Array(rosu,galben,albastru);
</script>
133
Exemplu:
<script>
ListaCulori=[rosu,galben];
</script>
Exemplu:
<script>
culoare1=rosu;
culoare2=galben;
culoare3=albastru;
ListaCulori=[culoare1,culoare2, culoare3];
</script>
Exemplu:
Tabelul 1
a11
a21
a31
Exemplu:
Exemplu:
Exemplu:
Figura 4.8
(continuare)
a12
a22
a32
a13
a23
a33
a14
a24
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>
<script>
ListaCulori=new Array(rosu,galben,albastru,verde);
document write(ListaCulori+<br />);
//Se afieaz rosu, galben, albastru, verde
ListaCulori[1]=violet;
document.write(ListaCulori);
//Se afieaz rosu, violet, albastru, verde
</script>
<script>
/*Crearea unei matrici i modificarea celui de-al doilea element*/
mere=new Array(ionatan,cretesti,dulci);
document.write(mere+<br>);
//Se afieaz ionatan, creeti, dulci
mere[1]=parmen-auriu;
document.write(mere);
</script>
<script>
/*Afiarea elementelor unei matrici cu o bucl for*/
student=new Array(Alin,Bogdan,Catalin,Dan);
for(i=0;i<4;i++){
document.write(student[i]+<br>);
}
</script>
134
Proprietile obiectului Array
Proprietile obiectului Array()sunt prezentate n detaliu n figura 4.9.
Proprietate
Sintax
length
matrice.length
Conine numrul de elemente al unei matrici. Putei modifica valoarea

acestei proprieti. Reducnd numrul de elemente, elementele se
suprim pornind din dreapta matricii.
Exemplu:
Exemplu:
Figura 4.9
<script>
lista_numere=new Array(3,7,9,50,20,23,2);
document.write(lista_numere.length+ numere);
//Se afieaz 7 numere
</script>
<script>
lista_numere=new Array(6,9,7,56,48);
document.write(lista_numere.length+ numere <br>);
for(i=0;i<lista_numere.length,i++){
document.write(lista_numere[i]+);
}
lista_numere.length=2;
document.write(<br>+lista_numere.length+ numere <br>);
for(i=0;i<lista_numere.length;i++){
document.write(lista_numere[i]+ );
}
</script>
Metodele obiectului Array

Metodele obiectului Array sunt prezentate n detaliu n figura 4.10.
Metod
Sintax
concat() matrice=matrice.concat(matrice)
matrice=matrice.concat(Element1,
Element2,...)
Figura 4.10
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>
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 execuiei script-ului
6,9,7
6*9*7
pop()
matrice.pop()
Metoda suprim ultimul element al unei matrici. Proprietatea length

este modificat n mod automat. Metoda returneaz valoarea elementului
suprimat. Metoda pop() nu 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()
Figura 4.10
(continuare)
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>
136
shift()

Exemplu:
slice()
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.
lista_numere=new Array(13,20,22);
suprim=lista_numere.shift();
document.write(Elementul suprimat: +suprim+<br />);
document.write(lista_numere);
</script>
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. Rangul elementului de la care trebuie s nceap suprimarea elementelor
matricii este obligatoriu. Al doilea argument (NumarElemente) precizeaz
numrul elementelor ce urmeaz a fi suprimate. Argumentele urmtoare
(Element1,Element2,...) reprezint elementele care urmeaz a fi inserate
Figura 4.10
(continuare)
n matrice ncepnd cu rangul indicat pentru primul element. Metoda

returneaz lista elementelor suprimate.
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
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.
Exemplu:

Figura 4.10
(continuare)
caractere.
Proprietatea length este modificat n mod automat.

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.
138
Exemplu:
Rezultatele execuiei 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
Variabile de stare
Variabile de iesire
a: matricea livrrilor pe
zile i rezervoare
st: livrrile totale pe zile i

rezervoare
b: vectorul livrrilor
medii zilnice
s: sume pariale, livrri pe zile
d: vectorul livrrilor
medii pe rezervoare
z: vectorul numelor zilelor

sptmnii
imax, imin, jmax, jmin: indicii
livrrilor maxime i minime din
matricea a
Figura 4.12
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,
6.
Calculeaz maximul livrrilor.
mari,
7.
Calculeaz minimul livrrilor.
8.
Afieaz maximul livrrilor, numrul
miercuri,
joi,
vineri)
pentru
rezervorul R1.
2.
Citete livrrile zilnice de benzin

(luni, mari, miercuri, joi, vineri) pentru
rezervorul R2.
3.
9.
Afieaz minimul livrrilor, numrul

rezervorului i ziua.
Citete livrrile zilnice de benzin

(luni, mari, miercuri, joi, vineri) pentru
rezervorul R3.
Figura 4.13
rezervorului i ziua.
10. Trunchiaz media (livrrilor pe zile

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

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

</script>
Figura 4.15 </head>
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;}
}
}
Figura 4.15
imin++;imax++;
(continuare)
145
//AFISARE REZULTATE
document.writeln("<center><table border=1 bgcolor#efefff><tr>");
document.writeln("<td><b>ZIUA</b><td><b>R1</b><td>
<b>R2</b><td><b>R3</b><td><b>MEDIA</b></td></tr>");
for(k=0;k<5;k++) {
document.writeln("<tr><td>" + Z[k]+"</td>");
for(j=0;j<3;j++) {
document.writeln("<td>" + a[j][k]+ "</td>");
}
document.writeln(" <td> " +trunchiaza( B[k])+ "</td></tr>");
}
document.writeln("<tr><td><b>MEDIA</b>");
for(j=0;j<4;j++)
document.writeln("<td><b>" + trunchiaza(D[j])+" </b></td>");
document.writeln("</tr>");
document.writeln("</table></center><p><p>");
document.writeln("<font size=+1 color=green>Livrarea maxima:"+max+" s-a facut din
rezervorul: R"+imax+" in ziua de "+Z[jmax]+"</font>");
document.writeln("<p><font size=+1 color=green>Livrarea minima:"+min+" s-a facut din
rezervorul: R"+imin+" in ziua de "+Z[jmin]+"</font>");
</script>
Figura 4.15
</body>
(continuare)
</html>
Rezultatele execuiei script-ului sunt prezentate n figura 4.16.
Figura 4.16
146
Aplicaie
Problema care se pune acum seamn cu cea din EXEMPLELE precedente, dar este
... puin mai complicat! Se citesc de la tastatur un numr oarecare (maxim 30) de valori
ale razelor unor rezervoare cilindrice echilaterale. Pentru fiecare valoare a razei se
calculeaz i afieaz cantitatea de benzin din rezervor. Script-ul verific totodat ca
valorile razelor rezervoarelor s fie numere pozitive. De asemenea, script-ul calculeaz i
afieaz masa total de benzin din rezervoare. n felul acesta, cu acelai script se pot
rezolva probleme ce difer prin numrul de rezervoare.
Analiza problemei
Problemele care se pun n aceast etap privesc n mod special alctuirea tabelei de
variabile, mai precis identificarea variabilelor de intrare ale script-ului.
Numrul rezervoarelor, necunoscut n problem, trebuie furnizat ca o variabil de intrare
(n) n momentul execuiei script-ului, naintea citirii datelor propriu-zise (razele
rezervoarelor). Ct privete numrul variabil de raze, de asemenea necunoscut n
momentul scrierii script-ului vom folosi ca variabil de intrare o matrice(array) cu o
singur dimensiune un vector.
Remarc. n informatic, se desemneaz prin abuz de limbaj sub numele de vector, mulimea
{V(1), V(2), , V(n)}, unde V(1), V(2), , V(n) sunt elementele vectorului. Aadar, un vector este
o mulime de elemente identificate prin poziia pe care acestea o ocup. Prelucrrile ce se
efectueaz asupra unui vector sunt funcie de valoarea unui indice de poziie (0<=i<=n). Acestuia
i se fixeaz o valoare care, n general, corespunde primei poziii, iar prelucrarea se efectueaz
ct timp valoarea acestui indice nu depete o valoare final.
n figura 4.17, 4.18, 4.19 sunt prezentate: formatul datelor de ieire, tabela de variabile,
specificaiile de programare.
Formatul datelor de ieire
Figura 4.17
RAZA
MASA
xx
xx
.
xx
MASA TOTALA=
xxx.xx
xxx.xx
.
xxx.xx
xxx.xx TONE
Tabela de variabile
Figura 4.18
Variabile de stare
Variabile de iesire
n: numrul de rezervoare
i: indicele de poziie (indexul)
v: volumul rezervorului
s: masa total de benzin
m: masa de benzin din rezervor
din rezervor
r: vectorul razelor
rezervoarelor
s: cantitatea (masa) total

de benzin
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

Figura 4.19
9. Stop
Proiectarea programului
n figura 4.20 se prezint pseudocodul, varianta formalizat.
Pseudocodul
REZERVOARE
CAP-TABEL
Figura 4.20
CAP-TABEL
BEGIN
d=0.7
s=0
//Citeste numar rezervoare(n)
READ(n)
BEGIN
Do LINIUTZA
WRITE(raza+ +masa);
DO LINIUTZA
END
148
FOR(i=1;i<=n;i++)
READ(r[i])
WRITE(r[i]);
WHILE (r[i]<0)
WRITE(Raza negativa)
READ(r[i])
WRITE(r[i])
ENDWHILE
ENDFOR
FOR(i=1;i<=n;i++)
m=2dr[i]3
s=s+m
WRITE(r[i]+m)
ENDFOR
WRITE(s)
PREL-VALID
VALID
VALID
PREL-VALID
CALC-MASA
CALC-MASA
Figura 4.20
(continuare)
REZERVOARE
LINIUTZA
END
BEGIN
LINIUTZA
END
Afiseaza un rand de 30 de =

Figura 4.21
Rezultatele execuiei script-ului sunt prezentate n figurile 4.22, 4.23.
149
Figura 4.22
Figura 4.23
150
JavaScript
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 ...?...
9. Se consider irul de caractere:
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 ...?...
151
alert(sir.slice(-2,-1)); //afieaz ...?...
10.Se consider irul de caractere:
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?
15.Identificai erorile de sintax din urmtoarele script-uri:
Figura 11.3 (Conversaia 11, pagina 5);
Figura 11.5 (Conversaia 11, pagina 5).
152
Vizitai site-urile
9 www.bdml.net/listes
9 www.natural.com/JavaScript
9 http://www.webcoder.com
9 http://www,dannyg.com/examples/ol2/index.htm
Conversaia 5
Obiectele (interne) RegExp, Date, Arguments

f
f
f
f
f
f
Expresii regulate
Obiectul RegExp. Aplicaii
Obiectul Date. Aplicaii
Obiectul Arguments. Aplicaii
Tem
Expresii regulate
Expresiile regulate (Regular Expressions, n limba englez) sunt utilizate ca
modele (tipare) de cutare pentru regsirea, tergerea i nlocuirea caracterelor.
Expresiile regulate nu sunt primordiale n programarea JavaScript, dar ele sunt
universale (foarte multe limbaje de programare le utilizeaz) i pot s v
simplifice ... viaa odat ce ele au fort asimilate.
Remarci:
9 Implementarea expresiilor regulate n limbajul JavaScript a fost preluat direct din

limbajul Perl.
9 Expresiile regulate sunt puin mai ... greu de digerat, dar ele reprezint o funcie
9
9
9
9
puternic a limbajului, ncepnd cu JavaScript 1.4. Versiunile ulterioare ofer numeroase

mbuntiri.
Expresiile regulate pot fi utilizate n e-commerce (comerul electronic) pentru
validarea numerelor crilor de credit, a numerelor de telefon, a adreselor etc.
O expresie regulat este un obiect JavaScript.
Utilizai (la maximum) expresiile regulate n formularele dumneavoastr deoarece ele v
garanteaz date fiabile (vezi Conversaia 8).
Crearea expresiilor regulate este foarte asemntoare cu crearea irurilor (strings, n
limba englez).
154
Obiectul RegExp
Obiectul RegExp() este un obiect predefinit (built-in), care nu depinde de
navigator.
Fia obiectului RegExp() este prezentat n figura 5.1.
Fia obiectului RegExp
Figura 5.1
constructorul RegExp()
Proprieti:
Metode:
$, $&, $_, $\, $+, $n, global,

ignoreCase, index, input, lastIndex,
lastMatch,
lastParen,
leftContext,
multiline, rightContext, source
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). Atribut (cel de-al doilea parametru) stocheaz sub forma
unui ir de caractere atributele de identificare ale modelelor (tiparelor).
Cele trei atribute ale obiectului RegExp sunt urmtoarele:
g cutare global; gsete toate apariiile posibile.

i n cursul cutrii nu face deosebire ntre majuscule i minuscule.
m cutare multilinie (vezi zona textarea din cadrul unui formular).
gi cumuleaz opiunile g i i.
Expresiile regulate pot fi create i n mod implicit. n acest caz, se

atribuie modelul (tiparul) ncadrat ntre mai multe bare oblice, direct
unei variabile.
Cele dou metode de definire a unei expresii regulate sunt riguros
echivalente. Slash-urile (/) nu sunt necesare n constructorul RegExp(),
deoarece
Figura 5.2
se
String().
poate
face
distincie
ntre
acesta
constructorul
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).
Figura 5.3
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])
Figura 5.4 [\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 irul de caractere
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.
Figura 5.5
\B
Opusul lui \b.
156
Aplicaie
n Tabelul 5.1 sunt prezentate mai multe exemple de utilizare a expresiilor regulate.
Comentai rezultatele cutrii lor.
Tabelul 5.1
Atribut
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
Exemplu:
<script language="javascript" type="text/javascript">

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

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

var model=/ion/i;
document.write(RegExp["$_"]); //afiseaza Ion
</script>
input.
157
$
Returneaz textul situat la stnga ultimului text gsit. Echivalent cu
Exemplu:

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

var model=/(ion)|(ionescu)/ig;
document.write(RegExp["$+"]);
//afiseaza Ionescu
</script>
cu lastParen.
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
Exemplu:

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

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

model=/ion/i;
document.write(RegExp.index);
//afiseaza 6
</script>
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
Exemplu:
Returneaz ultimul text gsit.

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

model=/(ion)|(ionescu)/ig;
document.write(RegExp.lastParen);
//afiseaza Ionescu
</script>
Figura 5.6
RegExp.leftContext
Returneaz textul situat la stnga ultimului text gsit.

model=/ion/i;
document.write(RegExp.leftContext); //afiseaza Nume:
</script>
multiline
(continuare)
RegExp.lastParen
Returneaz textul gsit prin ultima sub-expresie a modelului utilizat.
leftContext
RegExp.lastMatch
regExp.multiline
Returneaz true dac atributul m (multilinie) a fost definit; n caz contrar

returneaz false.
159
Exemplu:

model=/ion/m;
document.write(model.multiline);
//afiseaza true
</script>
rightContext
Exemplu:
Returneaz textul situat la dreapta ultimului text gsit.

model=/ion/i;
document.write(RegExp.rightContext);
//afiseaza Ionescu
</script>
source
Exemplu:
Figura 5.6
(continuare)
RegExp.rightContext
regExp.source
Returneaz expresia regulat.

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.
Figura 5.7
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>
160
test()
Exemplu:
Figura 5.7
(continuare)
model.test(text)
Caut un model n text i returneaz true/false.

var model=/ion/i;
rezultat=model.test("Nume: Ion Ionescu");
//se afiseaza true
</script>
Remarci:
9 Metodele: compile(), exec() i test() de tip RegExp impun ca obiectul

String n care se face cutarea s fie transmis ca argument.
9 Metoda exec() modific de asemenea mai multe proprieti ale matricei returnate, ale
modelului i ale obiectului RegExp:
Matricea (Array) index, input;
Modelul lastIndex, source, global, ignoreCase;
RegExp lastMatch, leftContext, rightContext, multiline.
Se reia problema rezervoarelor din exemplele precedente. n acest exemplu (EXEMPLUL
5 JAVASCRIPT) se dorete ca situaia livrrilor de benzin s fie expediat prin e-mail, la
o adres specificat de ctre utilizator. EXEMPLUL 5 JAVASCRIPT verific dac adresa
e-mail este format din caractere valide. n acest sens se va crea un model RegExp(re)
care s includ urmtoarele reguli:
9 adresa trebuie s nceap cu cel puin un caracter (plasat la stnga simbolului
@);
9 adresa trebuie s conin simbolul @;
9 adresa trebuie s conin cel puin un caracter dup simbolul @;
9 adresa poate conine caracterele: . sau - dar nu unul dup cellalt;
9 adresa trebuie s se termine cu punct (.) urmat de cel puin dou caractere.
n caz de eroare, ntr-o caset de dialog se va afia mesajul de avertizare: Adresa
E-mail: xxxxxxxx este incorect. Expedierea prin e-mail a situaiei livrrilor de benzin
din cele trei rezervoare se va efectua prin acionarea unui buton Trimite email.
Analiza problemei
n figura 5.8 este prezentat ecranul cu Situaia livrrilor de benzin pentru rezervoarele
R1, R2, R3, care conine de asemenea i zona de text pentru adresa e-mail (Adresa) i
161
butonul Trimite email. n situaia n care adresa de e-mail introdus n zona Adresa nu
este valid se afieaz un mesaj de eroare, ntr-o caset de dialog.
Figura 5.8
Tabela de variabile i specificaiile de programare sunt prezentate n figura 5.9, respectiv
figura 5.10.
Tabela de variabile
Figura 5.9
Variabile de stare
Variabile de iesire
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
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.
de text (adresa).
6. Afieaz mesajul de eroare Adresa
3. Rspunde la evenimentele generate de

butonul Trimite email.
zona de editare.
E-mail xxx este incorect.

7. Formeaz
4. Rspunde la evenimentele generate de

Figura 5.10
5. Valideaz valoarea introdus n zona
corpul
mesajului
urmeaz a fi trimis prin email.

8. Stop
Pseudocodul pentru EXEMPLUL 5 JAVASCRIPT este prezentat n figura 5.11.
Pseudocodul
Exemplul5
LIV
LIV1
LIV1
LIV
FORJ
FORI
FORI
FORJ
FORMEDII
FORMEDIIJ
Figura 5.11 FORMEDIIJ
BEGIN
//citeste livrarile pe fiecare rezervor de la tastatura
FOR(i=0;i<3;i++)
FOR(j=0;j<5;j++)
READ ai,j
ENDFOR
ENDFOR
FOR(j=0;j<5;j++)
s=0
FOR(i=0;i<3;i++)
s=s+ai,j
ENDFOR
bj=s/3
ENDFOR
st=0
FOR(i=0;i<3;i++)
s=0
FOR(j=0;j<5;j++)
s=s+ai,j
st=st+aij
ENDFOR
di=s/5
ce
163
FORMEDII
FORMAXI
FORMAXJ
IFMAX
IFMAX
IFMIN
IFMIN
FORMAXJ
FORMAXI
FORK
FORJA
FORJA
FORK
FORTRUNCJ
FORTRUNCJ
IFMAIL
Figura 5.11
(continuare)
IFMAIL
ENDFOR
d3=s/15
max=a0,0
min=a0,0
imax=0
imin=0
jmax=0
jmin=0
FOR(i=0;i<3;i++)
FOR(j=0;j<5;j++)
IF(max<ai,j)
max=aij
imax=i
jmax=j
ENDIF
IF(min>ai,j)
min=aij
imin=i
jmin=j
ENDIF
ENDFOR
ENDFOR
imin=imin+1
imax=imax+1
//formeaza corpul mesajului
//ce urmeaza a fi trimis prin email
DO formeaza_afis
//afisare rezultate
WRITE "SITUATIA REZERVOARELOR R1 R2 R3"
WRITE "ZIUA R1 R2 R3 MEDIA"
FOR(k=0;k<5;k++)
WRITE Z[k]
FOR(j=0;j<3;j++)
WRITE a[j][k]
ENDFOR
WRITE trunchiaza( b[k])
ENDFOR
WRITE "MEDIA"
FOR(j=0;j<4;j++)
WRITE trunchiaza(d[j])
ENDFOR
WRITE "Livrarea maxima: " max
WRITE "s-a facut din rezervorul: R" imax
WRITE "in ziua de" Zjmax
WRITE "Livrarea minima:" min
WRITE " s-a facut din rezervorul: R"imin
WRITE " in ziua de "+Zjmin
WRITE " Trimite situatie prin e-mail"
//afiseaza forma de introducere a adresei de email
WRITE "<Form> ... "
//raspunde la evenimentele generate de butonul Trimite Email
IF(se apasa butonul Trimite Email)
DO trimite_email()
ENDIF
//raspunde la evenimentele generate de zona de editare
164
IFEDIT
IFEDIT
IF(se paraseste zona de editare adresa)

DO verificaAdresa()
ENDIF
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" Zjmax
sbody+= "Livrarea minima:" min
sbody+= " s-a facut din rezervorul: R"imin
Figura 5.11
sbody+= " in ziua de "+Zjmin
(continuare) FORMEAZA_AFIS
END
Exemplul5
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
Figura 5.12
(continuare)
Figura 5.12
(continuare)
//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>
168
Figura 5.13
169
Figura 5.14
Comentarii:
9 Verificarea adresei de e-mail se realizeaz cu gestionarul de evenimente onBlur care
lanseaz n execuie funcia VerificaAdresa()(figura 5.12).
9 Funcia VerificaAdresa() utilizeaz obiectul re cu modelul prezentat n figura
5.15.
Figura 5.15 re = /^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,})+$/;

9 Expedierea prin e-mail a raportului se realizeaz prin acionarea butonului Trimite
email care lanseaz n execuie funcia trimite_email() (figura 5.12).
9 Corpul mesajului trimis prin email este generat de funcia formeaza_afis(figura
5.12).
Aplicaie
170
Scriei un program JavaScript care verific data calendaristic n formatul zz/ll/aa.
Indicaie. O dat calendaristic trebuie format dintr-un ir de caractere de forma
zz/ll/aaaa. Zilele trebuie s aib valori cuprinse n intervalul 1 i 31. Prima cifr (dac sunt
dou) trebuie s fie maxim 3, urmat eventual de 0 sau 1. Prima cifr poate fi de
asemenea 0 urmat de cifre cuprinse n intervalul 1-9. Urmeaz caracterul /. Lunile
trebuie s aib valori cuprinse n intervalul 1 i 12. Prima cifr poate fi 0 urmat de cifre
cuprinse n intervalul 1-9 sau poate fi urmat de 0, 1 sau 2. Urmeaz caracterul /. Anul
este un numr alctuit din patru cifre.
n figura 5.16 este prezentat documentul XHTML complet.
Figura 5.16
Rezultatele execuiei script-ului sunt prezentate n figura 5.17.
Figura 5.17
171
Obiectul Date
Date este un obiect predefinit al limbajului JavaScript care v permite s lucrai
cu valori reprezentnd orele i datele calendaristice.
Remarci:
9 JavaScript consider c data iniial (de referin) este 1 ianuarie 1970 (convenia
UNIX).
9 JavaScript ine evidena valorilor: or sau data calendaristic n milisecunde, ncepnd cu

1 ianuarie 1970.
Fia obiectului Date este prezentat n figura 5.18.

Fia obiectului DATE
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()
Constructorul Date()
Constructorul Date() creeaz o nou dat.
Constructorul Date() este prezentat n detaliu n figura 5.19.
172
Constructor
Sintax
Variabila=new Date()
Variabila=new Date(An, Lun, Zi, Ore,
Minute, Secunde, Milisecunde)
new Date() creeaz un obiect avnd data i ora curente. Cel de-al
Date()
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
(setDate();
Date
permit:
setMonth();
definirea
valorilor
setFullYear();
obiectelor
Date
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
Figura 5.20
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
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.
duminic; 1 pentru luni etc.
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.
174
Exemplu:
<script>
data=new Date(2004,5,9,8,25,8,750);
a=data.getMinutes();
document.write(a);
...//afieaz 25
</script>
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()
Metoda returneaz numrul de secunde (ntre 0 i 59).
<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.
<script>
data=new Date(2002,5,9,8,25,8,750);
a=data.getTime();
document.write(a); ..//afieaz 1023603908750
</script>
getUTCDate()
(continuare)
Data.getSeconds()
Exemplu:
Exemplu:
Figura 5.20
Data.getMonth()
Data.getUTCDate()
Metoda returneaz zona din lun transpus n timp UTC (Universal
Exemplu:
<script>
//1 aprilie 2004
a=data.getUTCDate();
...//afieaz 1
</script>
Coordinated Time).
175
getUTCDay()
(continuare)
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:
Figura 5.20
Data.getUTCDay()
<script>
data=new Date(2002,5,9,8,25,8,750);
a=data.getUTCMinutes();
</script>
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:
Figura 5.20
(continuare)
<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>
177
setFullYear()
Data.setFullYear(Numr)
Metoda modific anul ntr-un obiect Date. Aceast metod accept un
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 (anul n patru cifre) i returneaz noua dat n milisecunde.
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()
Figura 5.20
(continuare)
Data.setMonth(Numr)
Metoda modific luna ntr-un obiect Date. Aceast metod accept un

argument (luna ntre 0 i 12) i returneaz noua dat n milisecunde.
178
setSeconds()
Data.setSeconds(Numr)
Metoda modific secundele ntr-un obiect Date. Aceast metod

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

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

accept un argument (anul n patru cifre) i returneaz noua dat n
milisecunde.
setUTCHours()
Data.setUTCHours()
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()

Figura 5.20
(continuare)
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.
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()
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()

Figura 5.20
(continuare)
Data.toLocalDateString()
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>
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
Figura 5.21
n figura 5.22 sunt vizualizate rezultatele execuiei script-ului.
Figura 5.22
Personalizai script-ul din aplicaia precedent.
Afiai data calendaristic n litere, n limba romn (Exemplu, joi 1 aprilie 2004).
n figura 5.23 este prezentat documentul HTML ([4]) complet.
182
Figura 5.23
Rezultatele execuiei script-ului sunt vizualizate n figura 5.24.
Figura 5.24
Obiectul Arguments
Obiectul Arguments reprezint sub forma unei matrici (Array) valoarea
argumentelor transmise unei funcii.
n figura 5.25 este prezentat fia obiectului Arguments.
183
Fia obiectului Arguments
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.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

Exemplu:
Figura 5.27
(continuare)
funcie.arguments.length
Returneaz numrul de argumente transmise funciei atunci cnd ea este

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

f
f
f
f

Aplicaii
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:
9 Un eveniment este o aciune care se produce n raport cu un element (fereastr,
9
9
9
Figura 6.1
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:
9 Codul JavaScript al unui gestionar de evenimente este inclus ntre ghilimele.

9 Observai combinaia ciudat de majuscule i minuscule la notaia standard a
gestionarilor de evenimente: on este scris mereu cu minuscule iar iniiala fiecrui cuvnt
al evenimentului, cu majuscule. Exemple: onAbort, onBlur, onClick,
191
onChange,
onError,
onFocus,
onLoad,
onMouseOut,
onMouseOver, onReset, onSelect, onSubmit, onUnLoad.
n figura 6.2 sunt listai, n ordine alfabetic gestionarii de evenimente ai

Figura 6.2
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 aplic la:
Se declaneaz atunci cnd ncrcarea unui element este anulat.
document
onActivate
Figura 6.3
Se declaneaz atunci cnd elementul devine element activ.
Se aplic la:
window, document, frame, form
192
onAfterPrint
Se aplic la:
Se declaneaz dup imprimarea unui element.
window, frame
onAfterUpDate
Se aplic la:
Se declaneaz dup actualizarea datelor surs ale elementului.
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 aplic la:
Se declaneaz nainte ca datele s fie mutate (Cut).
document, form
onBeforeDeActivate

Se aplic la:
Se declaneaz nainte ca un alt element s devin activ n

documentul printe.
document, form
onBeforeEditFocus

Se aplic la:
Se declaneaz nainte ca elementul s primeasc focus-ul pentru a

fi editat.
document, form
onBeforePaste

Se aplic la:
Se declaneaz nainte ca elementul int s primeasc datele

(Paste).
document, form
onBeforePrint

Figura 6.3
(continuare)
Se aplic la:
Se declaneaz nainte ca datele elementului s fie imprimate sau

personalizate.
window, frame
onBeforeUnload
193
Se declaneaz nainte ca elementul s fie descrcat.
Se aplic la:
window
onBeforeUpdate
Se declaneaz nainte ca datele surs ale elementului s fie

actualizate.
Se aplic la:
document, form.button, form.checkbox,

form.fileupdate, form.hidden, form.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
Se aplic la:
mouse-ului pentru a deschide meniul contextual.
document, form
onControlSelect
Se declaneaz nainte ca elementul s fie selectat.
Se aplic la:
window, document, frame, form

onCopy
Figura 6.3
(continuare)
Se aplic la:
Se declaneaz atunci cnd se copiaz un element.
form
onCut
Se declaneaz atunci cnd se mut (Cut) un element.
194
Se aplic la:
document, form
onDblClick
Se declaneaz atunci cnd se execut dublu click pe element.
Se aplic la:
document,
form,
form.button,
form.checkbox,
form.option, form.reset
onDeActivate

Se aplic la:
Se declaneaz atunci cnd un alt element devine activ n

documentul printe.
window, frame, form

onDrag
Se aplic la:
Se declaneaz atunci cnd un element este deplasat.
document, form
onDragDrop
Se aplic la:
Se declaneaz atunci cnd ceva este deplasat i apoi eliberat.
window, frame
onDragEnd

Se aplic la:
Se declaneaz atunci cnd un element deplasat este la finele

deplasrii.
document, form
onDragStart
Se aplic la:
Se declaneaz la nceputul deplasrii elementului.
document, form, form.fileupdate, form.select,

form.textarea
onDrop

Se aplic la:
Se declaneaz atunci cnd un obiect este depus peste un element

dup deplasare.
document, form
onError

Figura 6.3
(continuare)
Se aplic la:
Se declaneaz atunci cnd se genereaz o eroare n raport cu un

element.
window, frame
onFocus
Se aplic la:
Se declaneaz atunci cnd elementul primete focus-ul.

window, frame, form, form.button, form.checkbox,
195
form.fileupdate,
form.password,
form.select,
form.radio, form.reset, form.text, form.textarea,
form.submit
onFocusIn

Se aplic la:
Se declaneaz nainte ca elementul s primeasc focus-ul

(naintea evenimentului focus).
form
onFocusOut

Se aplic la:
Se declaneaz dup ce elementul pierde focus-ul, imediat dup ce

un alt element a primit focus-ul.
form
onHelp

Se aplic la:
Se declaneaz atunci cnd se acioneaz tasta F1 n fereastra

activ.
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
Se aplic la:
elementul a primit focus-ul.

onKeyPress

Se aplic la:
Se declaneaz atunci cnd se menine apsat o tast, n timp ce


Figura 6.3
(continuare)
onKeyUp

Se aplic la:
Se declaneaz atunci cnd este eliberat o tast n timp ce


196
onLoad
Se declaneaz atunci cnd elementul este complet ncrcat.
Se aplic la:
window, frame
onMouseDown
Se declaneaz atunci cnd se acioneaz un buton al mouse-ului

n timp ce elementul a primit focus-ul.
Se aplic la:

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

onMouseOver
Se declaneaz atunci cnd pointer-ul mouse-ului trece pe
Se aplic la:
deasupra elementului.
document,
form,
form.button,
form.fileupdate,
form.password,
form.option,
form.reset,
form.checkbox,
form.select,
form.text,
onMouseUp

Se aplic la:
Figura 6.3
(continuare)
Se declaneaz atunci cnd un buton al mouse-ului se relaxeaz n

timp ce elementul a primit focus-ul.
onMove

Se aplic la:
Se declaneaz atunci cnd elementul este deplasat de ctre

utilizator sau de script.
window, frame, form

onMoveEnd
Se aplic la:
Se declaneaz la finele deplasrii elementului.
window, frame, form
197
onPropertyChange

Se aplic la:
Se
declaneaz
atunci
cnd
se
modific
proprietate
elementului.
document, form
onReset

Se aplic la:
Se declaneaz atunci cnd formularul este resetat (se execut clic

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

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

onResizeStart

Se aplic la:
Se declaneaz atunci cnd utilizatorul ncepe redimensionarea

elementului.
window, frame, form

onScroll
Se aplic la:
Se declaneaz atunci cnd fereastra ncepe s defileze.
window, frame
onSelect
Se declaneaz atunci cnd este selectat coninutul elementului.
Se aplic la:
form.fileupdate,
form.password,
form.text,
onSubmit
Figura 6.3
(continuare)
Se aplic la:
Se declaneaz naintea expedierii unui formular.
form
onUnLoad
Figura 6.3
(continuare)
Se aplic la:
Se declaneaz nainte ca elementul s fie descrcat.
window
Aplicaii
Creai gestionarul de evenimente onLoad.
198
Iat cum procedm pentru a crea gestionarul de evenimente onLoad, care
conine o instruciune (alert) care afieaz o caset de avertisment ce conine
mesajul: nvai s privii dincolo de aparene!.
1. Definii evenimentul care urmeaz a fi declanat.
Evenimentul care se declaneaz (atunci cnd ultimul caracter al unui document
HTML a fost ncrcat n navigator) este load cruia i corespunde gestionarul
de evenimente onLoad.
2. Introducei numele gestionarului (onLoad) n tag-ul body (figura 6.4).
Figura 6.4
3. Introducei, n continuare dup semnul egal, instruciunea JavaScript alert,
plasat ntre ghilimele (figura 6.5).
Figura 6.5
Remarci:
9 n aceast etap este important s v ntrebai: ce va produce gestionarul de

evenimente onLoad?
9 Atunci cnd definii un gestionar de evenimente onLoad pentru tag-ul <body>
evenimentul (Load) este declanat la finele ncrcrii documentului.
9 Gestionarul de evenimente onLoad (definit n tag-ul <body>) afieaz o caset de
avertisment odat cu terminarea ncrcrii paginii Web. Navigatorul verific dac un
gestionar de evenimente onLoad este definit n tag-ul <body>. n situaia n care
acesta este identificat, se execut instruciunea JavaScript plasat ntre ghilimele, dup
semnul egal.
Astfel, dup ncrcarea paginii se afieaz o caset de avertisment pentru a v avertiza
c nu este ru s nvai s privii dincolo de aparene!
9 n msura n care gestionarul de evenimente este declanat odat ce documentul
(X)HTML a fost ncrcat i afiat nu putei utiliza n gestionarul de evenimente onLoad
instruciunea document.write sau document.open.
9 ncepnd cu versiunea 1.1 a limbajului JavaScript, imaginile pot avea i ele un gestionar
de evenimente onLoad. Atunci cnd definii un gestionar de evenimente onLoad
pentru un tag <img>, evenimentul (Load) este declanat la finele ncrcrii imaginii.
9 n tag-ul <body> putei de asemenea defini gestionarul de evenimente onUnLoad.
Evenimentul UnLoad este declanat atunci cnd se ncarc un nou document sau cnd
fereastra navigatorului este nchis.
199
4. Completai structura HTML a documentului (figura 6.6).
Figura 6.6
Figura 6.7
Remarci:
9 Atunci cnd utilizatorul ncarc aceast pagin Web ntr-un navigator, gestionarul de
evenimente onLoad asociat paginii Web (sau documentului) unde se execut aceast
aciune, va fi activat.
9 ncrcarea acestei pagini Web are ca efect apariia mesajului: nvai s privii dincolo
de aparene!.
Modificai structura gestionarului de evenimente onLoad pe care l-ai creat n

aplicaia precedent, utiliznd mai multe instruciuni JavaScript.
Iat cum modificm (Varianta 1, Varianta 2) structura gestionarului de evenimente
onLoad pe care l-am creat n aplicaia precedent, utiliznd de aceast dat mai multe
instruciuni JavaScript.
Varianta 1 (figura 6.8)
200
Figura 6.8
Remarci:
9 n aceast variant, gestionarul nu conine dect dou instruciuni (separate prin punct
i virgul) dar el poate s conin foarte bine oricte instruciuni dorim.
9 Codul JavaScript al gestionarului de evenimente are acces complet la variabila global:

pagina_incarcata. Nu uitai c variabilele globale JavaScript sunt accesibile peste
tot, inclusiv n gestionarul de evenimente.
9 n aceast variant instruciunea de atribuire.

pagina_incarcata=true;
este necesar pentru a indica navigatorului c poate interaciona cu utilizatorul.
Varianta 2 (figura 6.9)
Figura 6.9
Remarci:
9 Gestionarul de evenimente onLoad apeleaz o funcie (execut_Incrcare) cu

un parametru.
9 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.
9 Pagina este n curs de ncrcare!;
201
9 Pagina a fost ncrcat
9 La revedere! (mesajul se va afia ntr-o caset de avertisment!)
Remarc. Obiectul Form este prezentat n detaliu n Conversaia 8.
n figura 6.10 se prezint documentul (X)HTML complet.
Figura 6.10
Remarci:
9 Tag-ul <body> conine doi gestionari de evenimente:

onLoad;
onUnLoad.
9 Gestionarul onLoad este activat n momentul n care pagina a fost ncrcat integral.
9 Gestionarul onUnLoad este activat n momentul n care ncrcai o alt pagin Web n
navigator.
9 Nu este ntotdeauna recomandabil s afiai o caset de avertisment atunci cnd
vizitatorul prsete o pagin Web. Numeroi vizitatori nu agreeaz ideea de a executa

clic ntr-o caset de avertisment pentru a putea prsi pagina dumneavoastr Web. n
consecin, aceast tehnic trebuie exploatat cu pruden!
Creai script-uri care afieaz mesaje n bara de stare a navigatorului.

Indicaie. Una din aplicaiile curente ale gestionarilor de evenimente este afiarea unui
mesaj n bara de stare a navigatorului atunci cnd vizitatorul execut clic pe un link.
Pentru link-uri dou sunt evenimentele care se execut n paralel: MouseOver i
MouseOut.
Evenimentul MouseOver se produce atunci cnd trecei cu mouse-ul pe deasupra
link-ului, iar evenimentul MouseOut se produce atunci cnd v deplasai cu mouse-ul n
zona exterioar legturii. Cele dou evenimente sunt utilizate pentru a modifica textul
care se afieaz n bara de stare a navigatorului.
Remarc. n mod implicit, URL-ul unei legturi se afieaz n bara de stare a navigatorului n
momentul n care trecei cu mouse-ul pe deasupra legturii.
202
Gestionarul de evenimente onMouseOver v permite s afiai un mesaj personalizat n
bara de stare a navigatorului, care corespunde unui link anume. Pentru aceasta, utilizai
proprietatea JavaScript status.
Gestionarul de evenimente onMouseOut este utilizat pentru a terge textul afiat n
bara de stare n momentul n care mouse-ul este deplasat n exteriorul legturii.
Remarci:
9 Atunci cnd utilizai gestionarul de evenimente onMouseOver pentru a afia mesaje n

bara de stare, n momentul n care executai clic pe un link, mesajul personalizat
nlocuiete URL-ul afiat n mod implicit. Asigurai-v c mesajul
dumneavoastr este cel puin la fel de util ca URL-ul!

9 Gestionarul de evenimente onMouseOver se aplic la: document; form;
form.button; form.checkbox; form.fileupdate; form.password;
form.select;
form.option;
form.reset;
form.text;
form.textarea; form.submit.
9 Gestionarul de evenimente onMouseOut se aplic la aceleai elemente ca i
onMouseOver.
Iat cum crem un script care afieaz urmtoarele mesaje n bara de stare:
comandai cartea (X)HTML;
comandai cartea DREAMWEAVER MX;
comandai cartea XML.
Aceste mesaje vor dispare atunci cnd mouse-ul nu se va afla deasupra acestor mesaje,
care reprezint link-uri ce se afieaz ntr-o list simpl.
1. Definii o funcie (descriere) care accept un parametru (text) pentru a
afia un mesaj n bara de stare (figura 6.11).
Figura 6.11
Remarci:
9 Parametrul text conine mesajul care se va afia n bara de stare a navigatorului.

9 ntruct funcia returneaz TRUE, n bara de stare se va continua s se afieze mesajul
pn cnd acesta va fi ters.
2. Definii o funcie (tergere) pentru a terge mesajul, apelabil din

gestionarul de evenimente onMouseOut (figura 6.12).
Figura 6.12
203
3. Completai script-ul, adugnd cunoscutele tag-uri <script> (figura 6.13).
Figura 6.13
4. Completai structura (X)HTML a documentului adugnd: link-urile propriu-zise
i gestionarii de evenimente (onMouseOver, onMouseOut) care apeleaz
cele dou funcii: descriere, stergere (figura 6.14).
Figura 6.14
Remarci:
9 Funciile (descriere, stergere) sunt definite n header-ul documentului.

9 Fiecare link conine un gestionar onMouseOver i onMouseOut pentru a apela
funciile de afiare i tergere a mesajelor n bara de stare.
204
Figura 6.15
6. Testai script-ul (figura 6.16).
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:
9 Etapa 1 Definirea mesajului (textului) care urmeaz s se afieze n bara de
stare, ca un ir de caractere specific;
9 Etapa 2 Ateptarea unei perioade de timp predefinite i apoi tergerea
mesajului afiat n bara de stare.
205
Iat cum crem un script care afieaz timp de 4 secunde n bara de stare a
navigatorului mesajul: Singurtatea este mai grea dect orice boal! pe care apoi l
terge!
1. Definii
funcie
(descriere)
care
includei
instruciunea
window.status (figura 6.17).
Figura 6.17
2. Adugai metoda setTimeOut (figura 6.18).
Figura 6.18
Remarci:
9 Primul parametru definete starea ferestrei la o valoare null ();

9 Al doilea parametru precizeaz perioada de timp predefinit trebuie ateptat 4
secunde.
3. Adugai instruciunea return true (figura 6.19).
Figura 6.19
Remarc. Instruciunea return true precizeaz navigatorului c funcia descriere este
pregtit pentru a interaciona cu utilizatorul.
4. Completai script-ul i plasai-l n antet-ul documentului (figura 6.20).
206
Figura 6.20
5. Adugai
corpul
documentului
tag-ul
<a>,
instruciunea
onMouseOver=descriere(); return true; (figura 6.21).
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).
Figura 6.24
2. Atribuii funcia (clicmouse) gestionarului de evenimente onMouseDown
(figura 6.25).
Figura 6.25
Remarc. Gestionarii de evenimente dinamici sunt stocai sub form de proprieti ale obiectului
Document sau ale unui alt obiect cruia i se poate atribui un eveniment.
3. Completai script-ul i structura (X)HTML a documentului (figura 6.26).
208
Figura 6.26
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
JavaScript
Tem
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;
}
Figura 6.29
</script>
7. Comentai urmtoarea instruciune JavaScript:
<b onDblClick=alert (Nu este nimic ntmpltor!)> Test </b>
Vizitai site-urile
9 javascript.internet.com
9 www.javascripts.com
9 www.javascript.com
9 comp.lang.javascript
9 livesoftware.javascript.developer
9 livesoftware.javascript.examples
9 de.comp.lang.javascript
Conversaia 7
Obiectele navigatorului

f
f
f
f
f
f
f
f

Obiectul Window. Aplicaii
Obiectul Navigator. Aplicaii
Tem

n conversaiile anterioare am acordat atenie limbajului de programare
JavaScript
obiectelor
interne
ale
acestuia
(Arguments,
Array,
Boolean, Date, Function, Math, Number, Object, RegExp,

String, This). Obiectele pe care le vei utiliza cel mai des, pe parte de client
sunt cele care aparin DOM-ului (Document Object Model), cu ajutorul crora
script-urile dumneavoastr vor putea manipula paginile Web, ferestrele i
documentele. Obiectivul acestui model (DOM) este acela de a v oferi o interfa
(ntre dou fee exist ... o interfa!) simpl i coerent ntre programele
JavaScript i navigatorul Web.
DOM-ul definete obiectele disponibile, proprietile, metodele i evenimentele

acestora. Cu o parte din obiectele DOM-ului ai fcut deja cunotin.
212
n afar de aceste obiecte, DOM-ul mai conine i alte obiecte ierarhizate
(structur arborescent), obiectul Window aflndu-se n vrful arborescenei.
Ierarhia obiectelor
Cnd examinai ndeaproape ierarhia general a obiectelor n JavaScript, putei
vedea c cele mai multe obiecte sunt fie pe parte de client sau pe parte de
server.
n aceast lucrare vom examina obiectele numai pe parte de client i vom
prezenta proprietile i metodele lor.
Remarc. Majoritatea obiectelor JavaScript sunt reprezentri ca obiecte ale tag-urilor (X)HTML.
n figura 7.1 sunt prezentate obiectele pe parte de client i tag-urile (X)HTML

corespunztoare.
Figura 7.1
Obiect JavaScript
Tag (X)HTML corespondent
Button
Checkbox
Hidden
Fileupload
Password
Radio
Reset
Select
Frame
Document
Layer
Link
Image
Area
Anchor
Applet
Plugin
Form
Submit
Text
Textarea
Option
<input type=button />

<input type=checkbox />
<input type=hidden />
<input type=file />
<input type=password />
<input type=radio />
<input type=reset />
<select>
<frame>
<body>
<layer> sau <ilayer>
<a href= />
<img />
<map>
<a name= />
<applet>
<embed>
<form>
<input type=submit />
<input type=text />
<textarea>
<option>
Pe msur ce vei examina aceste obiecte vei vedea modalitile diverse n care
ele sunt prezentate utilizatorilor i programatorilor n limbajul JavaScript.
Lista obiectelor JavaScript este prezentat n ordine alfabetic n figura 7.2, iar
ierarhia obiectelor este ilustrat n figura 7.3.
213
Figura 7.2
button
checkbox
document
event
fileUpload
form
hidden
history
location
MimeType
navigator
obiecte n general
option
Option()
password
plugins
radio
reset
screen
select
submit
text
textarea
window
Document
Button
Checkbox
FileUpload
Hidden
Password
Radio
Reset
Submit
Select
Text
Textarea
Anchor
Area
Applet
Form
Image
Layer
Link
Plugin
Window
Option
Frame
History
Location
Event
Style
Figura 7.3
Obiectele sunt ierarhizate dup cum urmeaz:

9 Obiectul Window, de nivelul cel mai nalt (nivelul 0), pe parte de client;
9 Obiecte
de
nivelul
1:
Document,
Frame,
History,
Location, Event, Style;

9 Obiecte de nivelul al doilea: Anchor, Area, Applet, Form,
Image, Layer, Link, Plugin;

9 Obiecte de nivelul al treilea: Button, Checkbox, FileUpload,
Hidden, Password, Radio, Reset, Submit, Select,

Text, Textarea;
9 Obiecte de nivelul al patrulea: Option.
Remarci:
9 Obiectele limbajului JavaScript pe parte de client reprezint instrumente importante cu

ajutorul crora putei genera script-uri.
9 n cea mai mare parte modelul obiectului este constituit din elemente (X)HTML care sunt
transpuse n obiecte.
9 Dac pn acum ai programat n limbajului (X)HTML, din acest moment trebuie s

abordai elementele (X)HTML ca fiind nu tag-uri, ci obiecte.
214
9 JavaScript utilizeaz o ierarhie de obiecte: printe-fiu, cunoscute sub numele de
Document Object Model (DOM). Aceste obiecte, organizate ntr-o structur
arborescent reprezint coninutul i componentele unui document Web.
Iat un exemplu simplu (figura 7.4) care ilustreaz modul n care un fiier
(X)HTML stabilete corespondena cu DOM-ul navigatorului.
Figura 7.4
n cursul ncrcrii fiierului XHTML, navigatorul Web folosete un ansamblu

complet de obiecte ale DOM-ului pentru a le reprezenta (vezi figura 7.5).
Obiect
Descriere
Obiectul Window
Reprezint navigatorul Web
Obiectul Document
Reprezint fiierul XHTML
Un obiect
demo
Figura 7.5
Form
cu
numele
Trei obiecte input cu numele:

nume, prenume, email
Reprezint tag-ul <form> definit n fiierul

XHTML
Reprezint zonele de text definite n formular
Remarc. Evident, mai sunt create i alte obiecte, ca de exemplu matricea formularelor
forms[].
n figura 7.6 se prezint modul de imbricare al obiectelor create.
215
Obiectul Window
Obiectul Document
Obiectul Form demo
Obiectul Input nume
Obiectul Input prenume
Figura 7.6
Obiectul Input email
Istoricul DOM-ului
Obiectele navigatorului sunt exterioare limbajului JavaScript dar sunt recunoscute
de ctre navigatoare. Din pcate exist nc diferene ntre navigatoare, care nu
de puine ori se manifest n mod suprtor.
Dup Netscape 3.0 i Internet Explorer 4.0 toate obiectele de baz sunt luate n
considerare de ctre cele dou browser-e, iar noile norme DOM sunt recunoscute
de ultimele versiuni Netscape i Internet Explorer.
W3C (World Wide Web Consortium) a pus recent la punct norma DOM de nivel 1.
Aceast norm nu conine dect obiectele de baz, toate obiectele acoperind
integral componentele unui document (X)HTML. O norm de nivel 2 este n curs
de apariie. Ierarhia obiectelor de care noi vorbim n aceast conversaie este
cunoscut sub numele de DOM 0 iar obiectele sunt incluse n norma DOM 1.
Remarc. Obiectele DOM de nivel 1 i 2 permit modificarea unei pagini Web n timp real, dup
ncrcarea sa (Dinamic HTML).
Obiectul Window
Obiectul Window de nivelul cel mai nalt reprezint fereastra navigatorului n
care este afiat obiectul Document. Fiecare fereastr a navigatorului i fiecare
cadru au propriul lor obiect Window.
Fia obiectului Window este prezentat n figura 7.7.
Remarc. Nu uitai c un obiect Window i proprietile sale pot fi atribuite unei variabile
JavaScript ca orice alt obiect.
216
Spre deosebire de alte obiecte care pot s fie prezente sau nu, obiectul Window
exist permanent.
Remarci:
9 Mai multe obiecte window pot exista n acelai timp, fiecare reprezentnd o fereastr a
navigatorului deschis.
9 Cadrele (frames, n limba englez) sunt de asemenea reprezentate prin obiecte
Window (vezi Conversaia 10).
9 Straturile (layers, n limba englez) care permit modificarea n mod dinamic a
coninutului unui document Web sunt analoage obiectelor Window (vezi Conversaia
10).
Fia obiectului Window

Subobiecte:
document, event, history, location, navigator, style
Proprieti:
content, clientinformation, clipboard, closed,

defaultstatus, dialogArguments, dialogHeight,
dialogLeft, dialogTop, dialogWidth, document, event,
frames[], history, innerHeight, innerWidth, length,
name, navigator, offscreenBuffering, opener,
outerHeight, outerWidth, pageXOFFset, pageYOffset,
parent, returnValue, screen, screenLeft, screenTop,
screenX, screenY, self, status, style, top, window
alert(), back(), blur(), clearInterval(),
clearTimeout(), close(), confirm(), createPopup(),
execScript(), focus(), forward(), home(), moveBy(),
moveTo(), navigate(), open(), print(), prompt(),
resizeBy(), resizeTo(), scroll(), scrollBy(),
scrollTo(), setActive(), setInterval(),
setTimeout(), showHelp(), showModaldialog(),
showModelessDialog(), stop()
onActivate, onAfterPrint, onBeforeActivate,
onBeforePrint, onBeforeUnload, onBlur,
onControlSelect, onDeActivate, onDragDrop, onError,
onFocus, onHelp, onLoad, onMouseMove, onMove,
onMoveEnd, onMoveStart, onResize, onResizeEnd,
onResizeStart, onScroll, onUnload
Metode:
Gestionarii de
evenimente:
Figura 7.7
Proprietile fundamentale ale obiectului Window

Cele mai importante proprieti ale obiectului Window sunt prezentate n detaliu
n figura 7.8.
Proprietate
Sintax
closed
window.closed
Conine valoarea true (fereastra este nchis) sau false (fereastra

este deschis).
defaultStatus

Figura 7.8
window.defaultStatus
Conine un ir de caractere reprezentnd textul afiat n mod implicit n

bara de stare. El rmne valabil atta timp ct coninutul ferestrei nu
se schimb.
Exemplu:
<script>window.defaultStatus=La muli ani mpreun! </script>
217
document
Proprietatea document corespunde obiectului Document.
frames[]
obiectul History).
window.length
Numrul de cadre coninute n fereastr.
name
window.history
Un obiect care conine lista de site-uri (istoricul) Web vizitate (vezi
length
window.frames[]
Conine un obiect window pentru fiecare cadru al site-ului Web.
history
window.document
window.name
Numele obiectului Window. Acest nume este diferit de numele

variabilei JavaScript care conine obiectul Window.
...
var catwindow=window.open();
catwindow.name=cat;
Exemplu:
navigator
window.navigator

Exemplu:
Obiectul Navigator conine informaii cu privire la navigator.
...
for (x in navigator)
document.write(x+=+navigator[x]+<br />;
...
opener
window.opener
Corespunde ferestrei n care a fost creat o alt fereastr (prin metoda
window.open(). Marea majoritate a proprietilor i metodelor
obiectului window pot fi aplicate proprietii opener).
outerHeight
nlimea (n pixeli) documentului afiat n fereastr (incluznd bara de

meniuri, bara de instrumente, bara de stare).
outerWidth
meniuri, bara de instrumente, bara de stare).
(continuare)
window.parent
Referin la fereastra/cadrul printe al ferestrei/cadrului curent.
screen
Figura 7.8
window.outerWidth
Limea (n pixeli) documentului afiat n fereastr (incluznd bara de
parent
window.outerHeight
window.screen
Conine informaii privind configuraia ecranului de pe monitorul

clientului.
self
window.self
218

Exemplu:
Referina la fereastra curent. Identic cu window

(window.window).
window.close()
identic cu:
window.self.close
status
Conine un ir de caractere care va fi temporar afiat n bara de stare a

navigatorului.
top

(continuare)
window.top
Referina ctre fereastra navigatorului situat n prim plan.
window
Figura 7.8
window.status
window.window
Identic cu window.self.
Metodele fundamentale ale obiectului Window

Metodele fundamentale ale obiectului Window sunt prezentate n detaliu n
figura 7.9.
Metode
Sintax
alert()
window.alert (Mesaj)
alert (Mesaj)
o caset de dialog care conine un buton OK i mesajul

Afieaz
specificat. Apelarea metodei oprete execuia programului JavaScript
pn cnd utilizatorul execut clic pe butonul OK pentru a continua.
Metoda alert() este folosit i ca instrument de depanare a
script-urilor (vezi Conversaia 11).
back()
la pagina
Retur
History).
window.back()
back()
precedent afiat n fereastr (vezi obiectul
blur()
window.blur()
blur()
Retrage focus-ul ferestrei curente.

Exemplu: <script>window.blur()</script>
close()
window.close()
close()
nchide fereastra curent (dup confirmarea de ctre utilizator).

confirm()
window.confirm(Mesaj)
confirm(Mesaj)
o caset de dialog care conine mesajul specificat, un buton

Afieaz
OK i un buton de anulare. Returneaz TRUE dac utilizatorul execut
Figura 7.9
clic pe butonul OK i FALSE dac utilizatorul execut clic pe butonul de

anulare.
Exemplu: <script>
a=window.confirm(Deschide o nou fereastr);
219
if (a==true) {
window.open(nou.htm);
document.write(Noua fereastr este deschis);
}
if (a==false) {
window.open(nou.htm);
document.write(Noua fereastr nu va fi deschis);
}
</script>
execScript() window.execScript(Expresie,Limbaj)
execScript(Expresie,Limbaj)
Execut
indicat.
expresia menionat ca i cnd ar fi un script, n limbajul
Exemplu: <script>
window.execScript(alert(Fatalitate),JavaScript);
</script>
focus()
window.focus()
focus()
Transmite focus-ul ferestrei curente.

forward()
window.forward()
forward()
Oblig navigatorul s ncarce documentul urmtor n istoric.

home()
Navigatorul
window.home()
home()
ncarc pagina definit ca pagin de index de ctre
utilizator.
moveBy()
window.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()
window.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>
Figura 7.9
(continuare)
window.moveTo(0,0);
</script>
open()
window.open(URL,Nume,Atribute,
nlocuiete)
220
open(URL,Nume,Atribute,
nlocuiete)
Exemplu:
Deschide o nou fereastr a navigatorului i returneaz un obiect

Window pentru a o reprezenta. Dac apelai metoda open() fr
parametri, vei obine o fereastr vid. Pentru a vedea ceva mai
interesant, transmitei urmtorii patru parametri respectnd secvena de
mai jos:
URL adresa Web a paginii Web care dorii s se ncarce automat
n noua fereastr.
Nume ir de caractere care va fi plasat n proprietatea
window.name a noii ferestre.
Atribute width, height, menubar, resizable,
scrollbars, status, directories.
nlocuiete este o valoare logic (true, dac istoricul ferestrei este
ters).
Metoda returneaz o referin la noua fereastr. Atributele pot lua
valoarea adevrat sub forma true, yes sau 1 sau valoarea
false sub forma false, no sau 0.
Semnificaia atributelor este urmtoarea:
9 toolbar afieaz/ascunde bara de instrumente a browser-ului
9 location prezena barei de adrese
9 directories afieaz/ascunde o bar de instrumente
(Netscape) secundar cu butoane familiare
9 status afieaz/ascunde bara de stare a navigatorului
9 menubar afieaz/ascunde bara de meniuri a navigatorului
9 scrollbars afieaz/ascunde barele de derulare pe vertical
i orizontal ale browser-ului
9 resizable permite/interzice redimensionarea ferestrei de
browser
9 width limea n pixeli a ferestrei
9 height nlimea n pixeli a ferestrei
<script>
newfereastra=window.open(test.htm,titlu,toolbarno,
location=no, directories=no, status=no, menubar=no,
scrollbars=no, resizable=no, width=100, height=100);
</script>
print()
Imprim coninutul ferestrei.
prompt()
Figura 7.9
(continuare)
Exemplu:
window.print()
print()
window.prompt(Mesaj,ConinutImplicit)
prompt(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 prompt() este afiat n zona de text. Utilizatorul poate introduce o
alt valoare sau poate executa clic pe butonul OK pentru a accepta
rspunsul implicit. Dac el execut clic pe butonul OK, valoarea
coninut n zona de text este returnat script-ului; dac el execut clic
pe butonul de anulare, atunci valoarea null este returnat script-ului.
Valoarea null reprezint nimic sau un obiect vid.
<script>
var raspuns=prompt(Care este culoarea preferata?, cepia);
if (raspuns==null){
221

Exemplu:
alert(Ati apasat butonul Cancel);

}
else{
alert(Raspunsul dumneavoastr este +raspuns);
}
</script>
resizeTo()
window.resizeTo(Lungime,Lime)
resizeTo(Lungime,Lime)
Redimesioneaz fereastra navigatorului la Lungime i Lime
specificate (n pixeli).
<script>
self.resizeTo(50,325);
</script>
scroll()
window.scroll(x,y)
scroll(x,y)
Face s defileze coninutul unei ferestre pn la poziia specificat (x i
y) n raport cu colul din stnga sus al ferestrei.

Remarc. Metoda este depit.
scrollTo()

Exemplu:
Figura 7.9
(continuare)
window.scrollTo(x,y)
scrollTo(x,y)
Face s defileze coninutul unei ferestre pn la poziia x (lungime), y
(lime) n raport cu colul din stnga sus al ferestrei.
<script>
window.scrollTo(0,100);
</script>
setInterval()
window.setInterval(Expresie,
Interval,Argumente)
setInterval(Expresie,
Interval,Argumente)
Execut Expresie n intervalele fixate. Expresie poate fi o instruciune
JavaScript sau apelul unei funcii. Interval este prezentat n
milisecunde. Argumente sunt transmise funciei apelate.
Remarci:
9Metoda
clearInterval()
anuleaz
efectul
metodei
setInterval().
9Metoda
setInterval() este aproape identic cu metoda
setTimeout(). Principala diferen ntre cele dou metode (vezi
setTimeout()) este aceea c parametrul Expresie, care poate fi o
instruciune sau apelul unei funcii executat fr sfrit.
222
Exemplu:
setTimeout()
window.setTimeOut(Expresie,
Durata,Argumente)
setTimeOut(Expresie,
Durata,Argumente)
Execut Expresie dup Durata (n milisecunde). Expresie poate fi apelul
unei funcii. Argumentele (facultative) sunt transmise funciei apelate.
Remarc.
Metoda
setTimeOut().
Exemplu:
Figura 7.9
(continuare)
clearTimeOut()
anuleaz
efectul
metodei
223
Rezultatele execuiei script-ului.
Figura 7.9
(continuare)
Aplicaii ale obiectului Window

Una din aplicaiile cele mai interesante ale obiectului Window este crearea i
nchiderea unei noi ferestre. V prezentm n cele ce urmeaz cteva aplicaii
simple, reprezentative pentru metodele i proprietile obiectului Window.
Creai un document (X)HTML care conine un script (simplu) ce utilizeaz
butoane pentru crearea i nchiderea unei ferestre.
Indicaie. Folosii metodele: open() i close() prezentate n figura 7.9.
224
Figura 7.10
Remarci:
9 Documentul XHTML permite deschiderea unei noi ferestre executnd clic pe un buton
(primul buton).
9 A doua fereastr este foarte mic pentru a se putea distinge de prima fereastr.
9 Al doilea buton permite nchiderea acestei ferestre.
9 Al treilea buton nchide fereastra principal a navigatorului, dup acordul utilizatorului.
9 Acest document face apel la gestionarii de evenimente onClick (cte unul pentru
fiecare buton).
n figura 7.11 este prezentat pagina Web afiat n Internet Explorer, cu noua
fereastr deschis.
Figura 7.11
225
Creai un document (X)HTML care conine un script (simplu) pentru
deplasarea i modificarea ferestrelor.
n figura 7.12 este prezentat documentul XHTML complet.
Figura 7.12
Remarci:
9 Funcia Demo() este apelat ca un gestionar de evenimente atunci cnd executai clic
pe butonul modificai dimensiunile ferestrei.
9 Funcia Demo() verific dac ai introdus valori pentru lungime i lime. Dac aceste
valori au fost introduse se apeleaz metoda self.resizeTo() pentru a modifica
dimensiunile ferestrei curente.
9 Funcia Demo() verific dac ai introdus valori pentru abscis(x) i ordonat(y). Dac
aceste valori au fost introduse se apeleaz metoda self.moveTo() pentru a deplasa
fereastra.
Creai un mic dicionar pentru vizitatorii site-ului dumneavoastr. Afiai n

bleu cuvintele pe care le definii. Ori de cte ori utilizatorul va executa un clic pe
unul din aceste cuvinte, se va deschide o fereastr n care se afieaz o scurt
definiie a cuvntului selectat (figura 7.13). Personalizai script-ul creat.
226
coriamb
Un dactil si un troheu
Figura 7.13
Scriei un program JavaScript care ajusteaz n mod automat dimensiunea

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

actualizarea periodic a coninutului unei pagini Web (figura 7.16).
Indicaie. Revedei metoda setTimeOut() prezentat n figura 7.9.
Figura 7.16
Creai un script pentru a afia trei casete de dialog cu ajutorul metodelor
alert(), confirm(), prompt().

n figura 7.17 este afiat documentul complet XHTML.
228
Figura 7.17
Remarc. Documentul afieaz trei butoane, fiecare dintre ele apelnd cte un gestionar de
evenimente pentru a afia o caset de dialog.
n figurile 7.18, 7.19, 7.20 sunt prezentate rezultatele execuiei programului

JavaScript.
Figura 7.18
229
Figura 7.19
Figura 7.20
Obiectul Window, considerat ca fiind obiectul de cel mai nalt nivel n ierarhia
obiectelor JavaScript pe parte de client conine toate celelalte obiecte pe parte de
client, cu excepia obiectului Navigator.
Este important s facei cunotin cu aceste obiecte, i ... s rmnei mpreun!
Ele sunt:
9
9
9
9
9
9
Document;
Frame;
History;
Location;
Event;
Style.
Remarc. Aceste obiecte sunt considerate obiecte de nivelul 1.
230
Obiectul Document
Manipularea documentelor Web
Obiectul
Document reprezint pagina Web afiat ntr-o fereastr a
navigatorului. Nu pare deci surprinztor faptul c obiectele Document sunt fii ai

obiectelor Window. n msura n care obiectul Window reprezint ntotdeauna
fereastra activ (cea care conine script-ul), putei utiliza window.document
pentru a v referi la documentul curent sau, mai simplu, utilizai numai
document.
Remarc. n programele JavaScript din conversaiile precedente ai fcut apel la metoda
document.write pentru a afia un text ntr-un document Web. Programele la care ne referim
nu utilizau dect o fereastr; n consecin, era inutil s folosii descrierea complet
window.document.write.
Dac mai multe ferestre sau mai multe cadre sunt deschise, atunci vor exista mai
multe obiecte window i un singur obiect Document pentru fiecare dintre ele.
Pentru a utiliza un astfel de obiect Document ne folosim de numele ferestrei
urmat de numele obiectului.
Fia obiectului Document este prezentat n figura 7.21.
Fia obiectului Document
Obiectul printe:
Subobiecte:
Proprieti:
Metode:
Gestionarii de
evenimente:
Figura 7.21
Window
Anchor, Area, Applet, Form, Image, Layer, Link,
Plugin
activeElement, alinkColor, all[], anchors[],
applets[], attributes[], background, bgColor, body,
characterSet, charSet, childNodes[], cookie,
defaultcharset, domain, embeds[], fgcolor,
fileCreatedDate, fileModifiedDate, fileSize,
forms[], frames[], height, images[], innerHTML,
innerText, lastModified, layers[], links[],
location, outerHTML, outerText, parentWindow,
plugins[], protocol, readyState, referrer,
scripts[], selection, style, stylesheets[], title,
URL, vlinkColor, width
clear(), close(), createElement(),
createStyleSheet(), elementFormPoint(),
getElementByld(), getElementsByName(),
getElementsByTagName(), getSelection(), open(),
setActive(), write(), writeln
onActivate, onBeforeCut, onBeforeDeActivate,
onBeforeEditFocus, onBeforePaste, onBeforeUpdate,
onCellChange, onClick, onContextMenu,
onControlSelect, onCut, onDblClick, onDrag,
onDragEnd, onDragEnter, onDragLeave, onDragOver,
onDragStart, onDrop, onHelp, onKeyDown, onKeyPress,
onKeyUp, onMouseDown, onMouseOut, onMouseOver,
onMouseUp, onPaste, onPropertyChange,
onSelectionChange, onSelectStart, onStop
231
Proprietile fundamentale ale obiectului Document
Proprietile fundamentale ale obiectului Document sunt prezentate n detaliu n
figura 7.22.

Exemplu:
Proprietate
Sintax
alinkColor
document.alinkColor
Conine culoarea atribuit link-urilor active, definit prin atributul

alink al tag-ului <body>.
Pentru a modifica culoarea link-ului, atribuii o nou valoare a culorii.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Aplicatie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/JavaScript">
document.write("<br />Legaturi active: "+document.alinkColor);
document.write("<br />Legaturi: "+document.linkColor);
document.write("<br />Legaturi vizitate: "+document.vlinkColor);
</script>
</head>
<body link="blue" alink="yellow" vlink="purple">
</body>
</html>
all[]
document.all[]
Toate elementele documentului. Fiecare element este o dat al matricii
(array) all[]. Elementele sunt referite prin numrul lor de ordine
sau prin numele lor. Utilizai metoda tags() pentru a obine setul de
elemente ale unui tag precis.
Exemplu:
Figura 7.22
<head>
<title>all[]</title>
</head>
<body>
<p id="unu">O imagine <img src="sigla.jpg" name="sigla1" width="15"
height="30" border="0" id="sigla1" /></p>
<p id="doi">A doua imagine <img src="sigla.jpg" name="sigla2" width="15"
height="30" border="0" id="sigla2" /></p>
<script language="JavaScript" type="text/javascript">
//Afiseaza id-ul tag-urilor
para=document.all.tags("p");
document.write(para[0].id+"<br />");
document.write(para[1].id+"<br />");
</script>
</body>
</html>
232
anchors[]
Matricea anchors[] conine un obiect Anchor (ancor) pentru

fiecare set de tag-uri: <a name=...> ... </a>.
applets[]
document.bgColor
Culoarea de fond a documentului numai atributul bgColor al

tag-ului <body> (vezi proprietatea alinkColor).
body
documet.applets[]
Matricea applets[] conine toate applet-urile Java inserate n

documentul (X)HTML. Fiecare element al matricii corespunde unui set
de tag-uri <applet> ... </applet>.
document.applets.length returneaz numrul de applet-uri
ale documentului.
bgColor
document.anchors[]
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>
cookie
document.cookie
Permite citirea i configurarea valorii cookie-ului clientului pentru un
document (X)HTML. Citirea i nregistrarea cookie-ului sunt foarte
simple.
Remarc. Utilizarea unui cookie este puin mai complicat.
Exemplu:
Figura 7.22
(continuare)
...
//citeste cookie
var numCookie=document.cookie;
//scrie cookie
document.cookie=numCookie;
...
233
embeds[]
Matricea embeds[] conine toate elementele incorporate n

documentul (X)HTML. ntr-o pagin Web, un element incorporat este
plasat ntre tag-urile <embed> i </embed>.
document.embeds.length returneaz numrul de elemente
incorporate n document.
fgColor
document.fgColor
Culoarea textului. Corespunde atributului text al tag-ului <body>

(vezi proprietatea alinkColor).
forms[]
document.embeds[]
document.forms[]
Setul de formulare coninute n documentul (X)HTML. Formularele sunt

reprezentate n documentul (X)HTML prin tag-ul <form>. Fiecare
formular este un element al matricii (array) forms[]. Primul formular
are rangul 0.
document.forms.length returneaz numrul de formulare ale

documentului.
Exemplu:
Figura 7.22
(continuare)

<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>
234
frames[]
Setul de cadre (frames, n limba englez) afiate. Fiecare cadru este un

element al matricii frames[]. Ele sunt referite prin numrul lor de
ordine sau prin numele lor. Primul este de rang 0.
Document.frames.length returneaz numrul de cadre ale
documentului.
images[]
document.frames[]
document.images[]
Setul de imagini ale documentului. Ele sunt inserate cu tag-ul

<img/>. Fiecare imagine este un element al matricii (array)
images[]. Ele sunt referite prin numrul lor de ordine sau prin
numele lor.
document.images.length returneaz numrul de imagini ale
documentului.
Imaginile recunosc proprietile care corespund atributelor tag-ului
<img/>: border, height, hspace, lowsrc, name,

src, vspace, width.
n plus, proprietatea complete conine valoarea true dac
Exemplu:

Figura 7.22
(continuare)
imaginea s-a ncrcat integral.

<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>
innerHTML
document.innerHTML
Conine codul HTML al documentului. Acest atribut poate fi aplicat
ntregului obiect din document pentru a recupera sau pentru a
modifica codul (X)HTML care l nchide.
235
Exemplu:
<body>
<p id=paragraf><b>text</b>demo</p>
<script>
element=document.getElementByld(paragraf);
alert(element.innerHTML);
</script>
innerText
document.innerText
Recupereaz sau definete codul (X)HTML ca pe un text, fr

interpretarea tag-urilor.
lastModified

Exemplu:
document.lastModified
Data i ora ultimei modificri a documentului. Este un obiect
String.
<script>
Document.write(document.lastModified);
</script>
layers[]
document.layers[]
Setul
de
straturi
reprezentate
pagina
(X)HTML
prin
tag-urile <div> sau <layer>. Pot fi accesate prin atributele id sau
name.
document.layers.length returneaz numrul de straturi ale
documentului.
Remarc. Setul de layer-e nu este recunoscut de Netscape.
linkColor
Codul culorii atribuite link-urilor din documentul (X)HTML, definite prin

atributul link al tag-ului <body>.
links[]
document.linkColor
document.links[]
Matricea links[] conine un obiect Link pentru fiecare tag
<a
href=...>
</a> prezent n documentul (X)HTML.
Obiectele links au aceleai proprieti ca obiectul location.

Exemplu:
Figura 7.22
(continuare)
...
<a href=http://www.dumitrascu.ro>Link</a>
<form>
<input type=button value=Schimba link-ul
onClick=document.links[0].href=http://www.upg-ploiesti.ro>
</form>
location
document.location
Conine URL-ul documentului.
236
Exemplu:
...
<body>
<script>
document.write(document.location);
//se afieaz, de exemplu http://www.dumitrascu.ro
</script>
</body>
Exemplu:
<script>
document.write(adresa actuala: +document.location);
document.location=http://www.multimedia.fr;
</script>
plugins[]
document.plugins[]
Setul de plug-ins coninute n documentul (X)HTML.

Fiecare plug-in este un element al matricii plugins[]. Ele sunt
referite prin numrul lor de ordine.
document.plugins.length returneaz numrul de plug-ins ale

documentului.
referrer
URL-ul documentului de la care documentul curent a fost ncrcat.
scripts[]
document.referrer
document.scripts[]
Setul de script-uri coninute n documentul (X)HTML.

Ele sunt reprezentate n document prin tag-ul <script>. Fiecare
script este un element al matricii (array) scripts[].
Ele sunt referite prin numrul lor de ordine.
document.scripts.length returneaz numrul de script-uri ale

documentului.
title
Titlul documentului, cel care este specificat n tag-ul <title>.
URL
Figura 7.22
(continuare)
document.URL
URL-ul documentului. Aceast proprietate este puin utilizat cci ea

este echivalent cu document.location.href.
vlinkColor
document.title
document.vlinkColor
Codul culorii atribuit link-urilor vizitate n document, acelai care este

definit prin atributul vlink al tag-ului <body> (vezi proprietatea
alinkColor).
237
Metodele fundamentale ale obiectului Document
Cele mai utilizate metode ale obiectului Document sunt prezentate n detaliu n
figura 7.23.
Metod
Sintax
close()
document.close()
datele ncrcate dar care nu sunt nc afiate i oprete fluxul de

Afieaz
intrare al datelor n document. Dac toate datele nu au fost ncrcate,
documentul nu este afiat integral.

Aceast metod nu cere nici un argument. Metoda nu este indispensabil
ntruct metoda write() care scrie n document realizeaz n mod
automat deschiderea (open) i nchiderea (close) fluxului de date
(vedei paragraful urmtor: tergerea i rescrierea coninutului unui
document).
getElementById()
document.getElementById(id)
Returneaz sub form de matrice (array) lista elementelor identificate prin
nume sau id-ul indicat. Dac nu exist nici un element de tipul indicat,
metoda returneaz null.
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>
getElementsByName() document.getElementsByName(Nume)
nume
sau id-ul indicat. Dac nu exist nici un element de tipul indicat,
metoda returneaz null.
Exemplu: <body>
Figura 7.23

para=document.getElementsByName("unu");
para[0].align="center";
</script>
</body>
238
getElementsByTagName() document.getElementsByTagName(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

write(). Primul argument indic tipul MIME al datelor (text/html;
text/plain; image/gif; image/jpeg; image/sc-bitmap;
plugIn (orice model plug-in Netscape de tip MIME)).
Al doilea argument precizeaz dac datele vor nlocui documentul deja
prezent n fereastra navigatorului (true) sau se vor aduga celor
existente (false). Cele dou argumente sunt facultative.
Aceast metod nu este indispensabil ntruct metoda write() care
scrie n document realizeaz n mod automat deschiderea (open) i
nchiderea (close) fluxului de date.
Remarc. Cele dou script-uri sunt echivalente.
Exemplu: <script language="JavaScript" type="text/JavaScript">
fernoua=window.open("","nou","height=200, width=400");
fernoua.document.open();
fernoua.document.write("<head><title>demo</title></head> <body><b>La multi
ani impreuna!</b></body>");
fernoua.document.close();
</script>
Exemplu: <script language="JavaScript" type="text/JavaScript">
fernoua=window.open("","nou","height=200, width=400");
fernoua.document.write("<head><title>demo</title></head><body><b>La multi
ani impreuna!</b></body>");
</script>
write()
document.write(ir1,ir2)
Introduce n document: date de tip caracter, variabile i tag-uri. Pentru

Figura 7.23
(continuare)
caractere
speciale
corespunztoare.
(apostrof,
de
exemplu)
introducei
caracterele
239
Exemplu: <script>
document.write(D\ ale Carnavalului);

//Afieaz Dale Carnavalului
</script>
writeln()
document.writeln(ir1, ir2)
Introduce date de tip caracter, variabile i tag-uri i insereaz un salt de

Figura 7.23
(continuare)
linie la sfrit. Cum salturile de linie sunt ignorate de ctre navigatoare,
aceast metod este identic cu write().
Revenind la metodele open() i close() ale obiectului Document

Obiectul Document conine metodele open() i close() (vezi metodele
obiectului Document, figura 7.23).
Atunci cnd utilizai metoda write() sau writeln() (vezi metodele
obiectului Document, figura 7.23) trimitei, de fapt, datele ctre ceva care se
cheam stream (flux), care corespunde unei zone rezervate de date. Datele
rmn n stream pn n momentul n care navigatorul este pregtit s le afieze
n fereastra sa. Va trebui s deschidei (open) iar stream-ul nainte de a-l utiliza
apoi s-l nchidei (close).
Metodele open() i close() efectueaz cele dou aciuni.
Metoda open() indic navigatorului c dorii s scriei un nou flux de date n
obiectul Document curent.
Metoda close() semnaleaz sfritul aciunii de scriere; ea oblig navigatorul
s afieze toate datele care au mai rmas n flux (stream).
Utilizarea celor dou metode nu este ns obligatorie ntruct write() i
writeln() realizeaz n mod automat deschiderea (open) i nchiderea

(close) stream-ului.
n concluzie, pentru a trimite un flux de date ctre fereastra navigatorului,
parcurgei urmtorii pai:
9 Utilizai document.open() pentru a deschide obiectul Document i
pentru a putea din nou scrie.
9 Utilizai document.write()/document.writeln().
240
9 Utilizai document.close() pentru a indica navigatorului c ai
terminat de scris n fereastra sa.
Remarci:
9 Metodele open() i close() nu deschid i nici nu nchid noile ferestre.
9 Dac utilizai metoda document.open(), n fereastra curent, script-ul
dumneavoastr, care face parte din documentul curent, va fi ters i n consecin va
nceta s se execute. Mult mai bine este s utilizai metodele open() i close() cu
ferestre sau cadre separate.
Cu metoda document.open putei specifica un tip MIME care v ofer

posibilitatea de a crea un document de un anume tip ce conine imagini i
documente utilizate n cadrul plug-ins.
Remarc. MIME (Multipurpose Internet Mail Extension) este un standard pentru documentele
Internet. Atunci cnd server-ul trimite un document unui browser, i se indic i tipul MIME al
documentului pentru ca navigatorul s tie cum s-l afieze. Printre tipurile MIME cele mai
rspndite amintim formatul HTML (tipul MIME text/html) i formatul text (tipul
text/plain).
Aplicaii ale metodelor open() i close()

Analizai urmtorul document HTML (vezi figura 7.24). Precizai rolul
instruciunilor: document.open() i document.close().
Figura 7.24
Script-ul prezentat ([1]) n figura 7.25 evalueaz browser-ul (Netscape,

Internet Explorer) i modific textul n funcie de tipul su. Comentai script-ul.
241
Figura 7.25
Remarc. Nu uitai c atunci cnd folosii metodele write () sau writeln() nu putei
schimba coninutul documentului curent fr s rencrcai complet pagina.
Obiectul Frame
Atunci cnd o fereastr conine mai multe cadre, fiecare dintre ele este
reprezentat n JavaScript printr-un obiect Frame.
Remarc. Obiectul Frame este prezentat n detaliu n Conversaia 10.
Obiectul Location
Obiectul Location este un fiu al obiectului Window. El stocheaz informaii
despre adresa URL a unei ferestre specificate. Fia obiectului Location este
prezentat n figura 7.26.
Remarc. Dei utilizatorii vd URL-ul afiat n caseta de locaie (Location) a navigatorului,
programatorii JavaScript lucreaz cu obiectul Location.
Fia obiectului Location

Obiectul printe:
Window
Proprieti:
hash, host, hostname, href, pathname,

port, protocol, search
Metode:
assign(), reload(), replace()

-
242
Proprietile obiectului Location
Proprietile obiectului Location sunt prezentate n detaliu, n figura 7.27. Ele
reprezint pri ale URL-ului.

Exemplu:
Proprietate
Sintax
hash
document.location.hash
Conine partea # (diez) a adresei Web specificate n URL.
<script>
document.write(document.location.hash);
//afieaz top, dac adresa este http://www.ionescu.com/index.htm#top
</script>
host

Exemplu:
Numele server-ului i postul URL.
<script>
document.write(document.location.host);
//afieaz www.ionescu.com (vezi hash)
</script>
hostname
Exemplu:
<script>
document.write(document.location.hostname);
//afieaz www.ionescu.com (vezi hash)
</script>
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>
Exemplu:
Figura 7.27
document.location.pathname
Calea de acces la document.
<script>
document.write(document.location.pathname);
//afieaz /linkuri/pref.html (vezi href)
</script>
port
document.location.href
Adresa Web (URL-ul) complet.
pathname
document.location.hostname
Numele server-ului.
href
Exemplu:
document.location.host
document.location.port
Numrul de port al URL-ului (n general 80).
<script>
document.write(document.location.port);
/*afieaz 80, dac adresa este http://www.ionescu.com:80/linkuri/pref.html*/
</script>
243
protocol
document.location.protocol
Partea protocol a URL-ului (n general http).
search

Exemplu:
Figura 7.27
(continuare)
document.location.search
Partea de cutare a adresei URL de dup semnul ?
<script>
document.write(document.location.search);
</script>
Metodele obiectului Location

Metodele obiectului Location sunt prezentate n detaliu n figura 7.28.
Metod
Sintax
assign()
document.location.assign(URL)
Modific URL-ul documentului.
Exemplu:
<form>
<input type=button value=Yahoo!
onClick=window.location.assign(http://www.yahoo.com)>
</form>
Exemplu:
<form>
<input type=button value=Yahoo!
onClick=window.location=http://www.yahoo.com>
</form>
reload()
document.location.reload()
Rencarc documentul curent n fereastra browser-ului. Dac argumentul

(rencrcare) are valoarea logic true documentul este rencrcat de pe
server; n caz contrar el este recuperat n cache-ul navigatorului.
replace()

Figura 7.28
document.location.replace(URL)
nlocuiete pagina curent cu o nou pagin. Metoda nu afecteaz

istoricul navigatorului. Utilizarea metodei este justificat pentru a evita
revenirea la ecranele de prezentare sau la paginile temporare de interes
minim.
Aplicaii
Modificai URL-ul documentului curent.
n figura 7.29 este prezentat secvena HTML corespunztoare.
Figura 7.29
244
Modificai URL-ul documentului ntr-o fereastr secundar pornind de la fereastra
principal.
n figura 7.30 este prezentat documentul XHTML complet al aplicaiei.
Figura 7.30
Obiectul History
Obiectul History este un alt obiect fiu al obiectului Window. Acest obiect
conine URL-ul paginilor vizitate nainte i dup pagina curent.
Fia obiectului History este prezentat n figura 7.31.
Fia obiectului History
Obiectul printe:
window
Proprieti:
length
Metode:
back(), forward(), go()
Proprietile obiectului History

Proprietile obiectului History sunt prezentate n detaliu n figura 7.32.
Exemplu:
Figura 7.32
Proprietate
Sintax
length()
window.history.length
Numrul de pagini din istoric.
<body>
<a href=JavaScript: window.history.go(window.history.length-1) >Ultimele
pagini </a>
</body>
245
Remarci:
9 Obiectul History mai conine i proprietile: current, previous i next care
stocheaz URL-ul curent, anterior i urmtor al documentului n lista de istoric.
9 Din motive de securitate, aceste obiecte sunt normal inaccesibile n browser-ele actuale.
Metodele obiectului History

Trei metode ale obiectului History permit deplasarea n lista de istoric (vezi
figura 7.33).

Exemplu:
Metod
Sintax
back()
window.history.back()
Retur la URL-ul precedent n istoric. Aceast metod corespunde unui

clic pe butonul back al navigatorului.
<body>
<form>
<input type=button value=Pagina precedenta
onClick=window.history.back()>
</form>
</body>
forward()
window.history.forward()
Trece la URL-ul urmtor n istoric. Aceast metod corespunde unui clic
pe butonul forward al navigatorului.
go()
Exemplu:
Figura 7.33
window.history.go(Numr)
Avanseaz sau se ntoarce n istoric cu numrul de pagini indicate.
<body>
<a href=JavaScript:window.history.go(-2)> Mergi inapoi cu 2 pagini</a><br />
<a href=JavaScript:window.history.go(2)> Mergi inainte cu 2 pagini</a>
</body>
Obiectul Event
Obiectul Event este un alt fiu al obiectului Window.
Fia obiectului Event este prezentat n figura 7.34.
Fia obiectului Event

Obiectul printe:
window
246
Proprieti:
altkey,
button,
cancelable,
ctrlKey,
currentTarget,
fromElement,
height,
layerY,
modifiers,
clientX,
data,
keyCode,
layerX,
pageX,
pageY,
reason, returnValue, screenX, screenY,

shiftkey,
srcElement,
srcFilter,
target, toElement, type, which, width,

x, y
Metode:
Proprietile obiectului Event

Cteva din proprietile obiectului Event sunt prezentate n detaliu n figura
7.35.
Proprietate
Sintax
altkey
event.altkey
Returneaz valoarea logic true (adevrat) dac tasta Alt a fost

acionat.
button
Determin care din butoanele mouse-ului a fost acionat: left, right

sau middle.
clientX
matrice (array) cu URL-ul obiectului stocat.
event.layerX
Coordonata orizontal a stratului n raport cu stratul care o conine.
layerY
event.height
Atunci cnd se genereaz evenimentul resize, proprietatea conine

noua valoare a nlimii elementului.
layerX
Figura 7.35
event.data
Atunci cnd se genereaz evenimentul dragdrop, proprietatea conine o
height
event.clientY
Returneaz coordonata vertical de amplasare a evenimentului.
data
event.clientX
Returneaz coordonata orizontal de amplasare a evenimentului.
clientY
event.button
event.layerY
Coordonata vertical a stratului n raport cu stratul care o conine.
247
pageX
event.pageX
Coordonata orizontal de amplasare a evenimentului care se produce.
pageY
event.pageY
Coordonata vertical de amplasare a evenimentului care se produce.
returnValue
event.returnValue
Aceast proprietate are prioritate n raport cu valoarea returnat de ctre

un gestionar de evenimente. Pentru a anula efectul evenimentului,
modificai coninutul su atribuindu-i valoarea logic false.
srcElement
Referin la elementul care a generat evenimentul.
type
Figura 7.35
(continuare)
event.srcElement
event.type
Specific numele evenimentului care se produce.

Aa cum exist subobiecte ale obiectului Window, tot aa exist i subobiecte
obiecte de nivelul al doilea ale obiectului Document. Subobiectele obiectului
Document sunt urmtoarele:

9 Anchor;
9 Area;
9 Applet;
9 Form;
9 Image;
9 Layer;
9 Link;
9 Plugin.
Obiectul Anchor
248
Obiectele Anchor sunt fii ai obiectului Document. Fiecare obiect Anchor
reprezint o ancor a documentului curent, adic un loc specific n document
care poate fi atins direct printr-un link.
Matricea anchors[]
Singurul mod n care putei folosi realmente un obiect Anchor n limbajul
JavaScript este prin intermediul matricii anchors[] al obiectului Document
(document.anchors[]).
Folosii matricea document.anchors[] pentru a determina numrul de
ancore dintr-un document (figura 7.36).
Folosii proprietatea name pentru a recupera numele unei ancore i proprietatea
innerText pentru a recupera textul su (figura 7.36).

...
<a name=ancora1>test1</a><br>
<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 Area v permite s definii o suprafa a unei imagini reactive.
Proprietile obiectului Area sunt: hash (poriunea de adres URL care este
ancora, inclusiv simbolul #); host (numele calculatorului gazd (adresa IP) i
portul specificate n adresa URL); hostname (numele calculatorului gazd
specificat n URL); href (adresa URL complet); pathname (calea fiierului
249
specificat n adresa URL, ncepnd cu simbolul (/); port (portul specificat n
adresa URL); protocol (protocolul specificat n adresa URL, inclusiv simbolul
final (:); search (partea de cutare a adresei URL, inclusiv simbolul (?);
target (numele ferestrei int n care se afieaz adresa URL); text (textul
care apare ntre tag-urile <area> ...</area>).
Obiectul Applet
Obiectul Applet reprezint echivalentul JavaScript al tag-ului (X)HTML
<applet>.
Obiectul Form
Obiectul Form este un obiect JavaScript reprezentat prin perechea de tag-uri
(X)HTML: <form> i </form>.
Remarc. Obiectul Form este prezentat n detaliu n Conversaia 8.
Obiectul Image
Obiectul Image este echivalentul JavaScript al tag-ului (X)HTML <img />.
Remarc. Obiectul Image este prezentat n detaliu n Conversaia 9.
Obiectul Layer
Obiectul Layer permite accesarea straturilor n interiorul documentelor.
Remarc. Obiectul Layer este prezentat n detaliu n Conversaia 10.
Obiectul Link
Obiectul Link este echivalentul JavaScript al unei legturi hipertext.
Fia obiectului Link este prezentat n figura 7.37.
250
Fia obiectului Link
Obiectul printe:
Document
Proprieti:
hash,
host,
pathname,
port,
hostname,
href,
protocol,
search,
target (vezi obiectul Location)

Un document poate avea mai multe obiecte Link, fiecare dintre ele coninnd
informaii cu privire la URL-ul sau ancora corespunztoare.
Remarc. Ancorele sunt elemente numite ale unui document (X)HTML la care putei avea acces
direct. Pentru a defini o ancor se utilizeaz o sintax de tipul <a name=ancora2>. Pentru
a crea dup aceea un link ctre aceast ancor, se utilizeaz un tag de tipul
<a href=#ancora2>.
Matricea links[]
Obiectele Link nu au o proprietate name, deci nu putei referi un obiect Link
prin el nsui.
Putei
accesa
obiecte
Link
cu
ajutorul
matricii
links[]
(document.links[]) care este o colecie a tuturor legturilor din

documentul curent. Ordinea din matrice se bazeaz pe ordinea n care sunt
localizate
legturile
fiierul
surs.
proprietate
matricii,
documents.links.length precizeaz numrul de link-uri ale paginii.

Remarci:
9 Obiectul Link v permite s lucrai cu legturi n limbajul JavaScript.
9 Obiectul Link este similar cu obiectul Location, care conine aceleai informaii
pentru pagina (X)HTML curent.
Proprietile obiectului Link

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

ncepe cu caracterul #.
host
Reprezint poriunea de calculator gazd din adresa URL asociat cu o

legtur.
hostname
asociat cu o legtur.
Link.search
Reprezint poriunea de interogare a legturii.
target
Figura 7.38
Link.protocol
Reprezint poriunea de protocol a legturii URL.
search
Link.port
Reprezint poriunea de port a legturii URL.
protocol
Link.pathname
Reprezint poriunea numelui de cale a legturii URL.
port
Link.href
Reprezint adresa URL complet asociat cu o legtur.
pathname
Link.hostname
Reprezint poriunea de nume al calculatorului gazd din adresa URL
href
Link.host
Link.target
Reprezint numele obiectului Window n care este afiat legtura.
Aplicaie
Comentai secvena de cod HTML prezentat n figura 7.39.
<a href=http://www.altavista.fr>Legtur</a>
<form>
<input type=button value=Schimbai legtura
onCLick=document.links[o].href=http://www.yahoo.com>
Figura 7.39
</form>
Obiectul Plugin
Obiectul Plugin, foarte asemntor obiectului Applet reprezint o modalitate
de accesare a modulelor plug-in instalate n browser.
252
Proprietile obiectului Plugin
sunt: description (conine descrierea
modulului plug-in); filename (conine numele fiierului unui program plug-in);
length (conine numrul de tipuri MIME acceptate de modulul plug-in); name

(conine numele modulului plug-in).

Urmtorul nivel de obiecte pe parte de client ale limbajului JavaScript este nivelul
al treilea. Toate obiectele de nivelul al treilea sunt subobiecte ale obiectului
Form: Button; Checkbox; FileUpload; Hidden; Password;

Radio; Reset; Submit; Select; Text; Textarea.
Remarc. Obiectele de nivelul al treilea pe parte de client sunt prezentate n Conversaia 8.

Ultimul nivel de obiecte pe parte de client ale limbajului JavaScript este nivelul al
patrulea. Exist un singur obiect de nivelul al patrulea: obiectul Option, care
este un subobiect al obiectului Select.
Obiectul Option este folosit pentru referirea la elementele <option> care
apar ntre tag-urile <select> ... </select>.
Obiectul Option
Fia obiectului Option este prezentat n figura 7.40.
Fia obiectului Option
Obiectul printe:
Select
Constructorul option()
Proprieti:
defaultSelected,
disabled,
form,
index, label, selected, text, value
253
Metode:
onClick, onDblClick, onHelp,

onKeyDown, onKeyPress, onKeyUp,
onMouseDown, onMouseMove,
Figura 7.40
onMouseOut, onMouseOver, onMouseUp
Obiectul Option este prezentat n detaliu n figura 7.41.
Obiect
Sintax
Option()
document.forms[].option
Reprezint, n cadrul unui formular o list derulant de opiuni incluse

ntre tag-urile <select> i </select>. Ea este definit prin tagurile (X)HTML <option> ... </option>. Obiectul este accesat
prin proprietatea form.select.elements[] sau prin numele su.
Pot fi create noi opiuni cu ajutorul constructorului Option().
Exemplu
Figura 7.41
<form name=form1>
<select name=optiune>
<option value=optiune1>prima optiune</option>
<option value=optiune2>a doua optiune</option>
<option value=optiune3>a treia optiune</option>
</select>
</form>
Proprietile obiectului Option

Proprietile obiectului Option sunt prezentate n detaliu n figura 7.42.
Proprietate
Sintax
defaultSelected document.forms[].option.
defaultSelected
Valoare logic (true/false) indic dac o opiune este implicit.
disabled
Valoare logic (true/false) opiunea este dezactivat (true) sau

activat (false).
form
document.forms[].option.disabled
document.forms[].option.form
Renun la formularul care conine zona.
index
document.forms[].option.index
254
Rangul opiunii n lista select.
label
Textul alternativ al opiunii. Proprietatea corespunde atributului label al

tag-ului.
selected
(false).
document.forms[].option.text
Textul opiunii.
value
Figura 7.42
document.forms[].option.selected
Valoare logic (true/false) opiune selectat (true) sau nu
text
document.forms[].option.label
document.forms[].option.value
Valoarea opiunii. Aceast proprietate corespunde atributului value al

tag-ului <option>.
Obiectul Navigator
Noul standard DOM (Document Object Model) a eliminat multe dintre diferenele
care exist (nc!) ntre navigatoare, dar vei ntlni numeroase situaii care
impun scrierea unui script pentru fiecare navigator, separat. Putei utiliza
JavaScript pentru a identifica navigatorul pe care l utilizai, folosind obiectul
window.navigator.
Obiectul Navigator nu face parte din DOM deci, l putei referi direct.
El este unic i deci, imposibil de instaniat (creat).
Putei aduga proprieti personale obiectului Navigator. Ele sunt disponibile
pentru toate obiectele Window ale navigatorului Netscape. Spre deosebire de
Netscape Navigator, Internet Explorer creeaz un obiect Window pentru fiecare
o nou fereastr. Noile proprieti rmn deci limitate la obiectul Window n care
ele au fost create.
Fia obiectului Navigator este prezentat n figura 7.43.
Fia obiectului Navigator
255
Obiectul printe:
Subobiecte:
Proprieti:
Figura 7.43
Metode:
window
mimeType, plugin
appCodename, appMinorVersion, appName,
appVersion,
browserLanguage,
cooKieEnabled,
cpuclass,
language,
mimeTypes[],
onLine,
platform,
plugins[],
product,
productSub,
systemLanguage,
userAgent,
userLanguage, vendor
javaEnabled()
-
Proprietile obiectului Navigator

Proprietile obiectului Navigator sunt prezentate n detaliu n figura 7.44.
Exemplu:
Figura 7.44

Exemplu:

Exemplu:
Proprietate
Sintax
appCodeName
navigator.appCodeName
Returneaz numele codului intern al navigatorului n general Mozilla.
<script>
x=navigator.appCodeName;
document.write(x);
// afieaz, de exemplu Mozilla
</script>
appName
navigator.appName
Returneaz numele oficial al navigatorului: Microsoft Internet Explorer

sau Netscape.
<script>
x=navigator.appName;
document.write(x);
// afieaz, de exemplu Microsoft Internet Explorer
</script>
appVersion
navigator.appVersion
Returneaz numrul versiunii navigatorului actualizate i versiunea
sistemului de operare. Opera este polimorf.
<script>
x=navigator.appVersion;
document.write(x);
/* afieaz, de exemplu 4.0 (compatible; MSIE 6.0; Windows NT 5.1; .NET CLR
1.0.3705)*/
</script>
browserLanguage
navigator.browserLanguage
Returneaz limba navigatorului. Aceast proprietate este recunoscut
numai de Internet Explorer.
256
Exemplu:

Exemplu:

Exemplu:
<script>
x=navigator.browserLanguage;
document.write(x);
// afieaz, de exemplu en
</script>
cookieEnabled
navigator.cookieEnabled
Returneaz true sau false numai dac cookies-urile sunt activate
sau nu n navigator.
<script>
x=navigator.cookieEnabled;
document.write(x);
// afieaz, de exemplu true
</script>
language
Returneaz limba navigatorului . Aceast proprietate este recunoscut

numai de Netscape.
<script>
x=navigator.language;
document.write(x); // afieaz, de exemplu ro
</script>
mimeTypes[]
navigator.mimeTypes[]
Vezi obiectul mimeType.
platform
Exemplu:
Figura 7.44
(continuare)
<script>
x=navigator.platform;
document.write(x);
// afieaz, de exemplu Win32
</script>
navigator.plugins[]
Matricea plugins[] conine lista tuturor extensiilor instalate n

navigator. Vezi obiectul Plugin.
userAgent
navigator.platform
Returneaz sistemul de operare.
plugins[]
navigator.language
navigator.userAgent
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
navigator.vendor
257

Exemplu:
Figura 7.44
(continuare)
Returneaz numele navigatorului dac este vorba de Netscape 6.

Pentru orice alt navigator, returneaz undefined.
<script>
x=navigator.vendor;
document.write(x);
// afieaz, de exemplu Netscape 6
</script>
Metodele obiectului Navigator

Metoda JavaEnabled() a obiectului Navigator este prezentat n figura
7.45.

Exemplu:
Figura 7.45
Metod
Sintax
JavaEnabled()
navigator.JavaEnabled()
Returneaz valoarea logic true sau false numai dac Java este
activat sau nu n navigator.
<script>
x=navigator.JavaEnabled();
document.write(x);
// afieaz, de exemplu true
</script>
Aplicaii ale obiectului Navigator

Creai un document (X)HTML simplu care conine un script ce afieaz
proprietile
obiectului
document.write.
appVersion,
Afiai
Navigator
proprietile:
userAgent,
cu
ajutorul
appCodeName,
language,
instruciunii
appName,
platform n cele dou
navigatoare Netscape i Internet Explorer.

Indicaie. Folosii o list neordonat.
n figura 7.46 este prezentat documentul XHTML complet n care s-a inserat
script-ul aplicaiei.
258
Figura 7.46
n figura 7.47 i figura 7.48 se prezint cele dou pagini Web afiate n Netscape
6, respectiv Internet Explorer.
Figura 7.47
259
Figura 7.48
Remarc. Dou elemente rein atenia:
proprietatea navigator.language este afiat ca nedefinit (undefined) n
Internet Explorer;
Mozilla apare n cmpurile: Nume cod i Agent utilizator.
Scriei un script care afieaz urmtoarea pagin Web (figura 7.49).
260
Figura 7.49
Indicaie. Script-ul afieaz patru butoane n pagina Web. Executnd clic pe

fiecare din cele patru butoane se vor afia proprietile obiectului Navigator:
userAgent; platform; appName. Folosii gestionarul de evenimente

onClick i metoda alert().
<head>
<title>Identificare navigator</title>
function idnavig(){
nav=navigator.userAgent;
alert(nav);
}
function platforma(){
platf=navigator.platform;
alert(platf);
}
function numenavig(){
nume=navigator.appName;
alert(nume);
Figura 7.50
}
261
function numereal(){
nav=navigator.userAgent;
if(nav.indexOf("Opera")>-1)
{navig="Opera";}
if(nav.indexOf("Opera")==-1&&nav.indexOf("MSIE 4")>-1)
{navig="Internet Explorer 4";}
if(nav.indexOf("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>
Figura 7.50
</body>
(continuare)
</html>
n figura 7.51, figura 7.52, figura 7.53, figura 7.54 sunt prezentate rezultatele
afirii paginii Web n navigatorul Internet Explorer.
262
Figura 7.51
Figura 7.52
263
Figura 7.53
Figura 7.54
Personalizai script-ul pe care l-ai creat n aplicaia precedent. Utilizai cele

patru funcii numai n script-urile pe care le exploatai.
264
Indicaie. Definii gestionarul de evenimente onLoad n tag-ul <body> dup
cum urmeaz: <body onLoad=idnavig()>.
Scriei o funcie simpl care s v permit s recunoatei browser-ul Netscape
sau Internet Explorer sau pe nici unul dintre ele.
n figura 7.55 se prezint o soluie a aplicaiei pe care v rugm s o comentai.
Figura 7.55
Cum procedai pentru a detecta navigatorul i versiunea sa n JavaScript?
Subobiectele obiectului Navigator

Obiectul MimeType
Obiectul MimeType este un subobiect al obiectului Navigator. El v permite
s accesai informaii despre tipurile MIME pe care le recunosc modulele
plug-in. Ca i obiectul Plugin, el nu este recunoscut de Internet Explorer.
Instanele obiectului MimeType sunt accesibile prin intermediul matricii
navigator.mimeTypes[] ale crei elemente reprezint tipurile MIME.

Fia obiectului MimeType este prezentat n figura 7.56.
Fia obiectului MimeType
265
Obiectul printe:
Navigator
Proprieti:
description,
enabledPlugin,
length,
name, suffixes, type

Metode:
Obiectul MimeType este prezentat n detaliu n figura 7.57.

Obiect
Sintax
MimeType
navigator.mimeTypes[]
Face referire la aplicaiile i tipurile de fiiere recunoscute de navigator.
Exemplu:
<script>
for(tip in navigator.mimeTypes){
document.write(tip)
}
</script>
Figura 7.57
Proprietile obiectului MimeType

Proprietile obiectului MimeType sunt prezentate n detaliu n figura 7.58.
Proprietate
description

Exemplu:

Exemplu:
Figura 7.58

Exemplu:
Sintax
navigator.MimeTypes[].description
Descrierea obiectului MimeType.
<script>
for(i=0; i<navigator.mimeType.length;i++){
tip=navigator.mimeTypes[i].description;
//afiseaza descrierea plug-ins
}
</script>
enabledPlugin
navigator.MimeTypes[].
enabledPlugin
Determin dac un plug-in este disponibil. Nu este suficient ca un plugin s fie numai instalat; el trebuie s fie i disponibil.
<script>
tip=navigator.mimeTypes[application/pdf].enablePlugin;
// afieaz [object plugin] dac plugin este disponibil
</script>
length
navigator.MimeTypes.length
Numrul de tipuri MIME recunoscute.
<script>
a=navigator.mimeTypes.length
document.write(a); /*afiseaz, de exemplu 7*/
</script>
266
name

Exemplu:

Exemplu:
Numele plug-ins.
<script>
for(i=0;i<navigator.mimeTypes.length;i++){
tip=navigator.mimeTypes[i].name;
document.write(tip+<br />);
}
</script>
suffixes
navigator.MimeTypes[].suffixes
Extensia de fiier pentru Mimetype.
<script>
tip=navigator.mimeTypes[i].suffixes;
document.write(tip+<br />); /*afieaz wjp, wpg, */
}
</script>
type

Exemplu:
Figura 7.58
(continuare)
navigator.MimeTypes[].name
navigator.MimeTypes[].type
Tipul de fiiere recunoscute de plug-ins.

<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 for-in.

n figura 7.59 este prezentat script-ul aplicaiei.
Figura 7.59
267
Obiectul Plugin
Obiectul Plugin este un subobiect al obiectului Navigator. El este creat prin
instalarea de module plug-in pentru browser. Obiectul Plugin conine o matrice
de elemente i tipuri MIME tratate de fiecare modul plug-in.
n figura 7.60 este prezentat fia obiectului Plugin.
Fia obiectului Plugin
Obiectul printe:
Navigator
Proprieti:
description, filename, length, name
Metode:

Remarci:
9 description
9 filename
9 length
9 name
face
face
face
face
referire
referire
referire
referire
la
la
la
la
o descriere a modulului plug-in;

numele fiierului unui program plug-in;
numrul de tipuri MIME coninute n matrice;
numele modulului plug-in.
Aplicaie
Folosii obiectul Plugin cu metoda document.write pentru a afia informaii
despre modulele plug-in instalate.
Manipularea plug-ins cu ajutorul obiectelor

Plug-ins au aprut cu versiunea 3.0 a navigatorului Netscape.
Exist sute de plug-in pentru Internet Explorer i Netscape. Prezentm n
continuare pe cele mai cunoscute:
9 Macromedia Shockwave i Flash;
9 Adobe Acrobat;
9 Real Player;
9 Beatnik.
Obiectul JavaScript Navigator posed un obiect fiu numit Plugins. Acest
obiect este o matrice, fiecare plug-in instalat n navigator reprezentnd un
element al matricii.
Obiectul Plugins
Obiectul Plugins face referire la plug-ins instalate n navigator.
268
Instanele
obiectului
Plugins
sunt
accesibile
prin
matricea
navigator.plugins[] ale crei elemente reprezint plug-ins.

Fiecare plug-in este de asemenea inclus n matricea MimeTypes[].
Remarci:
9 Nu confundai obiectele Plugin, proprieti ale obiectului Navigator, cu obiectele
Embed, proprieti ale obiectului Document. Primele fac parte din Navigator n
timp ce urmtoarele sunt incorporate n document cu ajutorul tag-ului <object>
(pentru Internet Explorer) sau <embed> pentru Netscape.
9 Obiectul Plugins nu este recunoscut n mod constant de ctre toate versiunile
navigatoarelor. Pe de alt parte, Internet Explorer recunoate plug-ins i ignor obiectele
Plugin.
Fia obiectului Plugins este prezentat n figura 7.61.

Fia obiectului Plugins
Obiectul printe:
Navigator
Proprieti:
description, filename, length, name
Metode:
Aplicaie
Generai lista tipurilor MIME recunoscute de ctre navigatorul Internet Explorer.
Figura 7.62
Proprietile obiectului Plugins

Proprietile obiectului Plugins sunt prezentate n detaliu n figura 7.63.
269
Proprietate
description
Exemplu:
Sintax
navigator.plugins[].description
Descrierea plug-ins.
<script>
for(i=0;i<navigator.plugins.length;i++){
plug=navigator.plugins[i].description;
document.write(plug+<br />);
//afieaz descrierea plug-ins
}
</script>
filename
navigator.plugins[].filename
Numele i amplasarea fiierelor plug-ins.
<script>
plug=navigator.plugins[i].filename;
//afieaz numele fiierelor de plug-ins
}
</script>
length

Exemplu:
Exemplu:
Figura 7.63
navigator.plugins.length
Numrul de plug-ins.
<script>
x=navigator.plugins.length;
document.write(x);
//afieaz, de exemplu 13
</script>
name
navigator.plugins[].name
Numele plug-ins.
<script>
plug=navigator.plugins[i].name;
//afieaz numele plug-ins
}
</script>
Remarc. Obiectului Navigator posed de asemenea un alt obiect fiu numit MimeTypes,
care conine cte un element al matricii pentru fiecare tip MIME.
270
Aplicaie
Analizai documentul (X)HTML din figura 7.64. Analizai script-ul inserat i instruciunile
document.write() utilizate. Afiai documentul n navigatorul Netscape 6.
Figura 7.64
Rezultatele execuiei script-ului (figura 7.65).
Figura 7.65
271
JavaScript
Tem
Testai-v cunotinele:
1. Ce este obiectul Document?
2. Care este coninutul matricii all[]?
3. Ce conine matricea anchors[]?
4. Care este coninutul matricii applets[]?
5. Care este coninutul matricii forms[]?
6. Care este coninutul matricii frames[]?
7. Care este coninutul matricii layers[]?
8. Ce semnificaie are proprietatea lastModified?
9. Care este coninutul matricii links[]?
10.Ce este obiectul Location?
11.Ce este MIME?
12.Care este rolul metodelor document.open() i document.close()?
13.Care
este
deosebirea
document.writeln()?
14.Ce este obiectul Link?
15.Ce este obiectul Layer?
Vizitai site-urile
9 http://www.hkedcity.net/
9 http://webdesign.about.com
9 http://www.useit.com
9 http://www.bigonion.com
dintre
metodele
document.write()
Conversaia 8
Obiectul Form. Validarea formularelor
f
f
f
f
f
f
Obiectul Form. Aplicaii

(Sub)obiectele Form. Aplicaii
Validai un formular cu JavaScript. Aplicaii
Tem
Obiectul Form
Momentul apariiei formularelor (X)HTML a fost considerat ca decisiv n evoluia
Web-ului.
Formularele, structurate n cmpuri i zone de date sunt ideale pentru a realiza o
interactivitate ntre dumneavoastr i vizitatorii site-ului pe care l-ai creat.
O dat cu apariia limbajului JavaScript puterea formularelor (X)HTML a crescut i
mai mult.
Cu JavaScript putei modifica n mod dinamic coninutul elementelor unui
formular (zon simpl de text, zon de text multilinie, caset de validare etc.).
JavaScript v permite s adugai noi funcii de prelucrare a formularelor
dumneavoastr (X)HTML, att pe partea de client ct i pe partea de server.
n concluzie, crearea unui site Web cu adevrat performant presupune
cunoaterea att a facilitilor formularelor (X)HTML ct i a obiectului Form al
274
Fia obiectului Form este prezentat n figura 8.1.
Fia obiectului Form
Obiectul printe:
Document
Subobiecte:
button,
input,
checkbox,
password,
fileupload,
select,
hidden,
option,
radio,
reset, text, textarea, submit

Proprieti:
acceptCharset,
action,
elements[],
encoding, enctype, length, method, name,

target
Metode:
reset(), submit(), tags()
onContextMenu,
onControlSelect,
onCopy,
onCut, onDblClick, onDeActivate, onDrag,

onDragend,
onDragOver,
onHelp,
onDragenter,
onDragStart,
onKeyDown,
onFocusOut,
onKeyPress,
onKeyUp,
onMouseDown,
onMouseEnter,
onMouseLeave,
onMouseMove,
onMouseOut,
onMouseOver,
onMouseUp,
onMousewheel,
onMove,
onMoveend,
onMovestart,
onPaste,
onPropertyChange,
onReset,
onResizeEnd,
Figura 8.1
onDragLeave,
onResize,
onResizeStart,
onSelectStart, onSubmit (vezi Conversaia 6).
Relaia dintre obiectul Form i tag-ul <form>

Fiecare formular care aparine unei pagini (X)HTML este reprezentat n JavaScript
printr-un obiect Form, al crui nume este identic cu atributul name al tag-ului
<form>.
Aadar, obiectul Form este un obiect JavaScript reprezentat prin perechea de
tag-uri (X)HTML: <form> i </form>.
Remarci:
9 Obiectul Document conine o matrice de obiecte Form care poart numele de
forms.
9 Dup ncrcarea i analiza documentului (X)HTML, aceast matrice (forms) va conine
cte un obiect Form pentru fiecare pereche de tag-uri <form> i </form>
prezentat n documentul (X)HTML.
Documentul (X)HTML din figura 8.2 conine trei obiecte Form.
275
Figura 8.2
Deoarece matricea forms este o proprietate a obiectului Document putei

referi cele trei obiecte Form dup cum urmeaz (figura 8.3).
Figura 8.3
Dac nu agreai referinele cu numere (forms[0], forms[1], ...) putei atribui un

nume fiecrui obiect Form (vezi figura 8.4).
Figura 8.4
Atunci cnd documentul (X)HTML va fi analizat, obiectele Form ale limbajului

JavaScript vor avea proprietatea name atribuit n mod automat cu numele:
formularZero; FormularUnu; formularDoi. Putei accesa cele trei obiecte Form,
dup cum urmeaz (figura 8.5).
Figura 8.5
276
Remarci:
9 Este important s observai c numele atribuite obiectelor Form sunt n totalitate nume
de variabile JavaScript valide (formularZero; formularUnu; formularDoi).
9 (X)HTML nu impune nici o limit valorilor posibile pentru un atribut; n consecin,
numele celor trei atribute name (conin spaii) din figura 8.6 sunt perfect valabile.
Figura 8.6
9 Dac dorim s referim aceste nume n JavaScript, vom scrie urmtorul cod JavaScript
(figura 8.7).
Figura 8.7
9 Din nefericire, nici una din cele trei instruciuni nu este valid (!) deoarece JavaScript nu
va ti s trateze spaiul (blank-ul) din mijlocul fiecrui nume. Aadar, singurul mod de a
accesa obiectele Form este acela de a utiliza matricea forms.
9 Pentru a atribui un nume elementelor ce aparin documentelor (X)HTML va trebui s
folosii nume valide pentru variabilele JavaScript.
Relaia dintre elementele (obiectele) Form i obiectul Form

Proprietatea cea mai important a obiectului Form este elements care
conine un obiect pentru fiecare din elementele formularului. Proprietatea
elements poate fi folosit fie pentru referirea unui element (obiect) dintr-un
formular, fie pentru validarea tuturor elementelor dintr-un formular.
277
Aplicaie
Analizai documentul (X)HTML din figura 8.8. Scriei instruciunile JavaScript pentru
accesul la cele trei obiecte (Text) ale formularului.
Figura 8.8
Pentru a avea acces la toate cele trei obiecte text ale formularului, putem scrie (fr
efort!) urmtorul cod JavaScript (figura 8.9).
Figura 8.9
Remarc. Am specificat un atribut
formularelor).
name
pentru fiecare obiect Text (ca i n cazul
S presupunem c dorii s ncrcai documentul (X)HTML din figura 8.8 ntr-un browser,
iar apoi introducei numele dumneavoastr (exemplu, Popescu) n zona simpl de text
nume. Cum procedai pentru a extrage (afia) aceast valoare? Rspunsul nu este
complicat! Cu mici diferene, toate obiectele dintr-un formular respect acelai format de
baz; n particular ele posed proprietatea value care conine valoarea de control
curent. Conceptul de valoare de control depinde de tipul de control; n cazul unei zone
simple de text, proprietatea value va conine irul de caractere curent n obiectul afiat
n fereastra navigatorului. Revenind la aplicaia noastr, pentru a afia numele pe care
l-ai introdus, scriei codul (figura 8.10):
278
Figura 8.10
n mod analog, pentru a defini numele dumneavoastr, scriei codul (figura 8.11):
Figura 8.11
Remarc. Fiecare obiect JavaScript al unui formular conine propriile proprieti i metode care
permit i alte aciuni n afar de citirea i definirea valorilor acestora.
Matricea elements
Este agreabil s poi avea acces la un element (obiect) al formularului direct prin
numele su, dar uneori dorim s prelucrm n mod automat obiectele
formularului. n plus, obiectele nu au tot timpul un nume, sau numele lor nu este
valid pentru o variabil JavaScript. Pentru astfel de situaii, vei putea folosi
matricea elements a obiectului Form.
Exist dou variante de acces la elementele matricii:
9 prin numrul de index;
9 prin nume.
Iat cum procedm pentru a accesa prin numrul de index, elementele
formularului din figura 8.12.
Varianta 1
Figura 8.12
279
Remarc. n acest formular am definit trei obiecte Text. Ultimele dou obiecte au un nume care
nu este un nume de variabil JavaScript valid.
n figura 8.13 este prezentat codul surs JavaScript pentru Varianta 1.
Figura 8.13
Varianta 2
n figura 8.14 este prezentat codul surs JavaScript pentru Varianta 2.
Figura 8.14
Proprietile obiectului Form

Proprietile obiectului Form sunt prezentate n detaliu n figura 8.15.
Proprietate
Sintax
acceptCharset
document.form.acceptCharset
Setul de caractere acceptat de ctre server-ul care prelucreaz datele.
action
Figura 8.15
document.form.action
Corespunde atributului action al tag-ului <form>.
elements[]
document.form.elements[]
280
Elementele unui formular (zone de text i butoane). Fiecare element

este o dat a matricii (array) elements[]. Ele sunt referite prin
numrul de ordine (exemplu: elements[2]) sau prin numele lor
(exemplu: elements[zona1]).
Proprietatea
length
returneaz
numrul
de
elemente:
form.elements.length. 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:
encoding
enctype
document.form.encoding
Corespunde atributului encoding al tag-ului <form>.
document.form.enctype
Corespunde atributului enctype al tag-ului <form>.
length

Figura 8.15
(continuare)
Numrul de elemente ale formularului.
method
document.form.length
document.form.method
Corespunde atributului method al tag-ului <form>.
name
document.form.name
281
Corespunde atributului name al tag-ului <form>.
target
Figura 8.15
(continuare)
document.form.target
Corespunde atributului target al tag-ului <form>.
Metodele obiectului Form

Metodele obiectului Form sunt prezentate n detaliu n figura 8.16.
Metod
Sintax
reset()
document.form.reset()
Corespunde aciunii butonului reset.
submit()
Corespunde aciunii butonului submit.
tags()
Figura 8.16
document.form.submit()
document.form.tags(tag)
Recupereaz toate elementele introduse cu tag-ul menionat ca

argument.
Subobiectele Form
Dup cum am precizat n Conversaia anterioar, toate obiectele de nivelul al
treilea, pe parte de client sunt subobiecte ale obiectului Form: Button,
Checkbox, FileUpload, Hidden, Password, Radio, Reset,

Submit, Select, Text, Textarea.
Vom prezenta n continuare, n ordine alfabetic toate subobiectele obiectului
Form.
282
(sub)Obiectul Button
Fia obiectului (subobiectului) Button este prezentat n figura 8.17.
Fia (sub)obiectului Button
Obiectul printe:
Form
Proprieti:
align,
defaultValue,
disabled,
form,
name, size, type, value

Metode:
onAfterUpdate, onBeforeUpdate, onBlur,

onClick, onDblClick, onFocus, onHelp,
onKeyDown,
onKeyPress,
onKeyUp,
onMouseDown, onMouseMove, onMouseOut,

Figura 8.17
onMouseOver, onMouseUp (vezi Conversaia 6).

(sub)Obiectul Button este prezentat n detaliu n figura 8.18.
Obiect
Button
Sintax
document.forms[].button
Reprezint un obiect generic ntr-un formular. Subobiectul Button este

versiunea
transpus
obiect
tag-ului
(X)HTML
<input
type=button>. A nu se confunda cu butoanele reset i

submit. Subobiectul Button poate fi accesat prin proprietatea
form.elements[] sau prin numele su.
Exemplu:
Figura 8.18
<form name=form1>
<input type=button name=Button1
value=calcul/>
</value>
Proprietile (sub)obiectului Button

Proprietile (sub)obiectului Button sunt prezentate n detaliu n figura 8.19.
283
Metod
Sintax
align
document.forms[].button.align
Alinierea
butonului.
Proprietatea
center, right.
defaultValue
Numele butonului. Corespunde atributului name al tag-ului <input>.
document.forms[].button.size
Dimensiunea (n pixeli) butonului. Corespunde atributului size al

tag-ului <input>.
document.forms[].button.type
Tipul de element n cadrul formularului. n acest caz, proprietatea

returneaz button. Corespunde atributului type al tag-ului
<input>.
value
Figura 8.19
document.forms[].button.disabled
document.forms[].button.name
type
document.forms[].button.
defaultValue
Referin la formularul care conine butonul.
size
left,
document.forms[].button.form
name
valorile:
Valoarea logic (true/false) care indic starea butonului: dezactivat

(true), activat (false).
form
conine
Valoarea implicit a butonului.
disabled
poate
Valoarea
document.forms[].button.value
butonului.
Corespunde
atributului
value
al
tag-ului
<input>.
Metodele obiectului Button

Metodele obiectului Button sunt prezentate n detaliu n figura 8.20.
Metod
Sintax
blur()
document.form.button.blur()
Butonul pierde focus-ul.
click()
Simularea clic-ului mouse-ului pe buton. Aceast metod nu este

detectat de onClick.
focus()
Figura 8.20
document.form.button.click()
Butonul preia focus-ul.
document.form.button.focus()
284
(sub)Obiectul Checkbox
Fia (sub)obiectului Checkbox este prezentat n figura 8.21.
Fia (sub)obiectului Checkbox
Obiectul printe:
Form
Proprieti:
align,
checked,
defaultChecked,
defaultValue, disabled, form, name, size,

status, type, value, width
Metode:
onAfterUpdate,
onClick,
onDblClick,
onKeyDown,
onMouseDown,
Figura 8.21
onBeforeUpdate,
onBlur,
onFocus,
onHelp,
onKeyPress,
onKeyUp,
onMouseMove,
onMouseOut,
onMouseOver, onMouseUp (vezi Conversaia 6).
Obiectul Checkbox este prezentat n detaliu n figura 8.22.
Obiect
Sintax
checkbox
document.forms[].checkbox
Reprezint o caset de validare n formular. Subobiectul Checkbox

este versiunea transpus n obiect a tag-ului (X)HTML <input
type=checkbox>. Subobiectul Checkbox poate fi accesat prin

proprietatea form.elements[] sau prin numele su.
Exemplu:
Figura 8.22
<head>
<script>
function calcule() {
document.calcul.elements[0].value=0;
for(i=0;i<document.calcul.elements.length;i++) {
if(document.calcul.elements[0].value=
parseInt(document.calcul.elements[0].value)
+parseInt(document.calcul.elements[i].value)
}
}
</script>
</head>
<form name=calcul>
TOTAL:<input type=text size=9/> euro <br />;
<input type=checkbox value=2 onClick=calcule()/>Articolul2<br />
</form>
</body>
</html>
285
Proprietile obiectului Checkbox
Proprietile obiectului Checkbox sunt prezentate n detaliu n figura 8.23.
Proprietate
Sintax
align
document.forms[].checkbox.align
Alinierea casetei de validare.

center
sau right.
checked
Proprietatea poate conine valorile: left,
document.forms[].checkbox.checked
logic (true/false) care indic starea casetei de validare: activat

(Valoare
true) sau dezactivat (false).
defaultchecked
document.forms[].checkbox.
defaultchecked
Valoarea implicit a casetei de validare (true sau false).

defaultValue
document.forms[].checkbox.
defaultValue
Valoarea implicit a casetei de validare.

disabled
document.forms[].checkbox.disabled
logic (true/false) care indic

Valoare
dezactivat (true) sau activat (false).
form
starea casetei de validare:
document.forms[].checkbox.form
Referin la formularul care conine caseta de validare.

name
casetei
Numele
<input>.
size
document.forms[].checkbox.name
de validare; corespunde atributului name al tag-ului
document.forms[].checkbox.size
Dimensiunea (n pixeli) a casetei de validare. Corespunde atributului size al

tag-ului
<input>.
status
document.forms[].checkbox.status
Valoare logic (true/false) care indic

activat
(true) sau dezactivat (false).
type
starea casetei de validare:
document.forms[].checkbox.type
de element n cadrul formularului. n acest caz, proprietatea returneaz

Tipul
checkbox. Corespunde atributului type al tag-ului <input>.
value
casetei
Valoarea
<input>.
width
Figura 8.23
document.forms[].checkbox.value
de validare. Corespunde atributului value al tag-ului
document.forms[].checkbox.width
Dimensiunea (n pixeli) casetei de validare.

Metodele (sub)obiectului Checkbox
286
Metodele (sub)obiectului Checkbox sunt prezentate n detaliu n figura 8.24.
Metod
Sintax
blur()
document.form.checkbox.blur()
Caseta de validare pierde focus-ul.

click()
document.form.checkbox.click()
Simularea clic-ului mouse-ului pe caseta de validare. Aceast metod nu

este detectat de onClick.
focus()
Figura 8.24
document.form.checkbox.focus()
Caseta de validare preia focus-ul.

(sub)Obiectul FileUpload
Fia (sub)obiectului FileUpload este prezentat n figura 8.25.
Fia (sub)obiectului FileUpload
Obiectul printe:
Form
Proprieti:
defaultValue,
disabled,
form,
name,
size, type, value, width

Metode:
blur(), focus(), select()

onChange,
onHelp,
onKeyUp,
onDragStart,
onKeyDown,
onMouseDown,
onMouseOut,
onMouseOver,
onFocus,
onKeyPress,
onMouseMove,
onMouseUp,
onResize, onSelect, onSelectStart (vezi

Figura 8.25
Conversaia 6).
(sub)Obiectul FileUpload este prezentat n detaliu n figura 8.26.

Figura 8.26
Figura 8.26
(continuare)
Obiect
Sintax
fileUpload
document.forms[].fileUpload
Reprezint o zon de text n care utilizatorul poate introduce numele

unui fiier care urmeaz a fi transmis server-ului. Subobiectul
fileUpload este versiunea transpus n obiect a tag-ului (X)HTML
<input type=file>. Subobiectul fileUpload poate fi
accesat prin proprietatea form.elements[] sau prin numele su.
287
Exemplu:
<form name=form >

<input type=file name=fiier1/>
</form>
Proprietile (sub)obiectului FileUpload

Proprietile (sub)obiectului FileUpload sunt prezentate n detaliu n figura
8.27.
Proprietate
Sintax
defaultValue
document.forms[].fileUpload.
defaultValue
Coninutul implicit al zonei.

disabled
document.forms[].fileUpload.disabled
logic (true/false)
Valoare
(true) sau activat (false).
form
care indic starea zonei: dezactivat
document.forms[].fileUpload.form
Referin la formularul care conine zona.

name
document.forms[].fileUpload.name
Numele zonei. Corespunde atributului name al tag-ului <input>.

size
document.forms[].fileUpload.size
Dimensiunea
(n pixeli) zonei. Corespunde atributului size al tag-ului
<input>.
type
Tipul
document.forms[].fileUpload.type
de element n cadrul formularului. n acest caz proprietatea
returneaz file. Corespunde atributului type al tag-ului <input>.
value
document.forms[].fileUpload.value
Coninutul zonei. Corespunde atributului value al tag-ului <input>.

width
Figura 8.27
document.forms[].fileUpload.width
Dimensiunea (n pixeli) casetei de validare.
Metodele (sub)obiectului FileUpload
288
Metodele (sub)obiectului FileUpload sunt prezentate n detaliu n figura 8.28.
Metod
Sintax
blur()
document.form.fileUpload.blur()
Zona pierde focus-ul.
focus()
document.form.fileUpload.focus()
Zona preia focus-ul.
select()
Figura 8.28
document.form.fileUpload.select()
Selecteaz coninutul zonei.
(sub)Obiectul Hidden
Fia (sub)obiectului Hidden este prezentat n figura 8.29.
Fia (sub)obiectului Hidden
Obiectul printe:
Form
Proprieti:
defaultValue,
disabled,
form,
name,
readOnly, size, type, value

Metode:
onAfterUpdate, onBeforeUpdate, onHelp
Figura 8.29
(vezi Conversaia 6)
(sub)Obiectul Hidden este prezentat n detaliu n figura 8.30.

Exemplu:
Figura 8.30
Obiect
Sintax
hidden
document.forms[].hidden
Reprezint o zon de text ascuns pentru utilizator. Subobiectul

Hidden este versiunea transpus n obiect a tag-ului (X)HTML
<input type=hidden>. Subobiectul Hidden poate fi accesat
prin proprietatea form.elements[] sau prin numele su.
<form name=form1>
<input type=hidden name=Ascuns/>
</form>
Proprietile (sub)obiectului Hidden

Proprietile (sub)obiectului Hidden sunt prezentate n detaliu n figura 8.31.
Proprietate
Sintax
289
defaultValue
document.forms[].hidden.
defaultValue
disabled
document.forms[].hidden.disabled
Valoare logic (true/false) care indic starea zonei: dezactivat

(true) sau activat (false).
form
document.forms[].hidden.form
name
document.forms[].hidden.name
Numele zonei. Corespunde atributului name al tag-ului <input>.
readOnly
document.forms[].hidden.readOnly
Valoare logic (true/false) care indic starea zonei.
size
document.forms[].hidden.size
Dimensiunea (n pixeli) zonei. Corespunde atributului size al tag-ului
<input>.
type
document.forms[].hidden.type
Tipul de element n cadrul formularului. n acest caz proprietatea

returneaz text.
value
Figura 8.31
document.forms[].hidden.value
Coninutul zonei. Corespunde atributului value al tag-ului <input>.
(sub)Obiectul Password
Fia (sub)obiectului Password este prezentat n figura 8.32.
Fia (sub)obiectului Password
Obiectul printe:
Form
Proprieti:
defaultValue,
disabled,
form,
maxLength, name, readOnly, size, type,
value
select(), blur(), click(), focus()
Metode:
Figura 8.32

onChange, onFocus, onHelp, onKeyDown,
onKeyPress,
onKeyUp,
onMouseDown,
onMouseMove, onMouseOut, onMouseOver,
onMouseUp,
onResize,
onSelect,
onSelectStart (vezi Conversaia 6).
(sub)Obiectul Password este prezentat n detaliu n figura 8.33.
290
Obiect
Sintax
Password
document.forms[].password
Reprezint un cmp n cadrul unui formular care afieaz asteriscuri

atunci cnd utilizatorul introduce parola. Subobiectul Password este
versiunea
transpus
obiect
tag-ului
(X)HTML
<input
type=password>. Subobiectul Password poate fi accesat prin

Exemplu:
Figura 8.33
<form name=f1>
<input type=password name=Pass />
</form>
Proprietile (sub)obiectului Password

Proprietile (sub)obiectului Password sunt prezentate n detaliu n figura 8.34.
Proprietate
defaultValue
(continuare)
document.forms[].password.type
Tipul elementului n cadrul formularului. n acest caz, proprietatea

returneaz text. Aceast proprietate corespunde atributului type al
tag-ului <input>.
value
Figura 8.34
document.forms[].password.size
Dimensiunea (n pixeli) zonei. Corespunde atributului size al tag-ului

<input>.
type
Figura 8.34
document.forms[].password.readOnly
Valoare logic (true/false) dac zona este numai citit (true) sau
nu (false).
size
document.forms[].password.name
Numele zonei. Proprietatea corespunde atributului name al tag-ului

<input>.
readOnly
document.forms[].password.maxLength
Numrul maxim de caractere care pot fi introduse n zon.
name
document.forms[].password.form
maxLength
document.forms[].password.disabled
Valoare logic (true/false) care indic starea zonei: dezactivat

form
document.forms[].password.
defaultValue
disabled
Sintax
document.forms[].password.value
291
Coninutul zonei. Proprietatea corespunde atributului value al tag-ului
<input>. value.length returneaz numrul de caractere al zonei.
Metodele (sub)obiectului Password

Metodele (sub)obiectului Password sunt prezentate n detaliu n figura 8.35.
Metod
blur()
document.form.password.blur()
click()
document.form.password.click()
Simularea clic-ului mouse-ului pe zona de text. Aceast metod nu este

detectat prin onClick.
focus()
document.form.password.focus()
Zona de text preia focus-ul.
select()
Figura 8.35
Sintax
document.form.password.select()
(sub)Obiectul Radio
Fia (sub)obiectului Radio este prezentat n figura 8.36.
Fia (sub)obiectului Radio
Obiectul printe:
Form
Proprieti:
align,
checked,
defaultValue,
defaultChecked,
disabled,
form,
name,
size, status, type, value, width

Metode:

onClick, onErrorUpdate,
onFilterChange, onFocus, onHelp,
onKeyDown, onKeyPress, onKeyUp (vezi
Figura 8.36
Conversaia 6).
292
(sub)Obiectul Radio este prezentat n detaliu n figura 8.37.
Obiect
radio
Sintax
document.forms[].radio
Reprezint un buton radio ntr-un formular. Subobiectul Radio permite

utilizatorului s selecteze o singur opiune dintr-un grup de aciuni.
Subobiectul Radio este versiunea transpus n obiect a tag-ului
(X)HTML <input type=radio>. Subobiectul Radio poate fi
accesat prin proprietatea form.elements[] sau prin numele su.
Exemplu:
Figura 8.37
<form name=form1>
<input type=radio name=optiune />
</form>
Proprietile (sub)obiectului Radio

Proprietile (sub)obiectului Radio sunt prezentat n detaliu n figura 8.38.
Metod
Sintax
align
document.forms[].radio.align
Alinierea butonului radio. Proprietatea poate conine valorile: left,

center, right.
checked
document.forms[].radio.checked
Valoare logic (true/false) butonul este activat (true) sau

dezactivat (false).
defaultChecked
document.forms[].radio.
defaultChecked
Valoarea implicit a butonului radio (true/false).
defaultValue
Valoarea implicit a butonului radio.
disabled
document.forms[].radio.form
Referin la formularul care conine butonul radio.
name
Figura 8.38
document.forms[].radio.disabled
Valoarea logic (true/false) care indic starea butonului: dezactivat

form
document.forms[].radio.
defaultValue
document.forms[].radio.name
Numele butonului radio. Aceast proprietate corespunde atributului

name al tag-ului <input />.
293
size
Dimensiunea (n pixeli) butonului radio. Aceast proprietate corespunde

atributului size al tag-ului <input />.
status
(continuare)
document.forms[].radio.value
Valoarea butonului radio. Corespunde atributului value al tag-ului

<input>.
width
Figura 8.38
document.forms[].radio.type

returneaz radio. Aceast proprietate corespunde atributului type al
tag-ului <input />.
value
document.forms[].radio.status
Valoare logic (true/false) butonul este activat (true) sau nu

(false).
type
document.forms[].radio.size
document.forms[].radio.width
Mrimea (n pixeli) butonului radio.
Metodele (sub)obiectului Radio

Metodele (sub)obiectului Radio sunt prezentate n detaliu n figura 8.39.
Metod
Sintax
blur()
document.form.radio.blur()
Butonul radio pierde focus-ul.
click()

focus()
Figura 8.39
document.form.radio.click()
document.form.radio.focus()
Butonul radio preia focus-ul.
(sub)Obiectul Reset
294
Fia obiectului Reset este prezentat n figura 8.40.
Fia (sub)obiectului Reset
Obiectul printe:
Form
Proprieti:
align, defaultValue, disabled, form,

name, type, value
Metode:
onAfterDate,
onBeforeUpdate,
onBlur,

onKeyDown,
onKeyPress,
onKeyUp,

Figura 8.40
onMouseOver, onMouseUp (vezi conversaia 6)

(sub)Obiectul Reset este prezentat n detaliu n figura 8.41.
Obiect
Sintax
reset

Exemplu:
Figura 8.41
document.forms[].reset
Reprezint un buton care terge valorile din toate zonele formularului

curent. Subobiectul Reset este versiunea transpus n obiect a
tag-ului (X)HTML <input type=reset>. Ca i n cazul butonului
submit, pentru executarea aciunii nu este necesar cod surs
JavaScript.
<form name=form1>
<input type=reset />
</form>
Proprietile (sub)obiectului Reset

Proprietile (sub)obiectului Reset sunt prezentate n detaliu n figura 8.42.
Proprietate
Sintax
align
document.forms[].reset.align
Alinierea butonului. Proprietatea poate conine valoarea: left, center

sau right.
defaultValue
Valoarea implicit a butonului.
disabled
Figura 8.42
document.forms[].reset.defaultValue
document.forms[].reset.disabled
Valoare logic (true/false) butonul este dezactivat (true) sau

activat (false).
form
document.forms[].reset.form
295
name
Numele butonului. Aceast proprietate corespunde atributului name al

tag-ului <input />.
type
document.forms[].reset.name
document.forms[].reset.type

returneaz reset. Aceast proprietate corespunde atributului type al
tag-ului <input />.
value
Figura 8.42
(continuare)
document.forms[].reset.value
Valoarea butonului. Aceast proprietate corespunde atributului value al

tag-ului <input />.
Metodele (sub)obiectului Reset

Metodele (sub)obiectului Reset sunt prezentate n detaliu n figura 8.43.
Metod
Sintax
blur()
document.form.reset.blur()
click()

focus()
Figura 8.43
document.form.reset.click()
(sub)Obiectul Submit
document.form.reset.focus()
296
Fia (sub)obiectului Submit este prezentat n figura 8.44.
Fia (sub)obiectului Submit
Obiectul printe:
Form
Proprieti:
align,
disabled,
form,
name,
type,
value
Metode:

onKeyDown,
onKeyPress,
onKeyUp,

Figura 8.44
onMouseOver, onMouseUp (vezi conversaia 6).

(sub)Obiectul Submit este prezentat n detaliu n figura 8.45.
Obiect
Submit
Exemplu:
Figura 8.45
Sintax
document.forms[].submit
Reprezint un buton care nainteaz server-ului datele coninute n

formular. Subobiectul submit este versiunea transpus n obiect a
tag-ului (X)HTML <input type=submit>. Subobiectul submit
poate fi accesat prin proprietatea form.elements[] sau prin
numele su. Pentru executarea aciunii nu este necesar cod surs
JavaScript.
<form name=form1>
<input type=submit name=init />
</form>
Proprietile (sub)obiectului Submit

Proprietile (sub)obiectului Submit sunt prezentate n detaliu n figura 8.46.
Proprietate
Sintax
align
document.forms[].submit.align
Alinierea butonului. Proprietatea poate conine valoarea: left, center

sau right.
disabled
Valoare logic (true/false) butonul este dezactivat (true) sau

activat (false).
form
Figura 8.46
document.forms[].submit.disabled
document.forms[].submit.form
name
document.forms[].submit.name
297
Numele butonului. Aceast proprietate corespunde atributului name al

tag-ului <input />.
type
document.forms[].submit.type

returneaz submit. Aceast proprietate corespunde atributului type al
tag-ului <input />.
value
Figura 8.46
(continuare)
document.forms[].submit.value
Valoarea butonului. Aceast proprietate corespunde atributului value al

tag-ului <input />.
Metodele (sub)obiectului Submit

Metodele (sub)obiectului Submit sunt prezentate n detaliu n figura 8.47.
Metod
Sintax
blur()
document.form.submit.blur()
click()
document.form.submit.click()

focus()
Figura 8.47
document.form.submit.focus()
(sub)Obiectul Select
Fia (sub)obiectului Select este prezentat n figura 8.48.
Fia (sub)obiectului Select
Obiectul printe:
Form
Subobiecte:
Option
Proprieti:
disabled,
form,
length,
multiple,
name, options[], selectedIndex, size,
type, value
add(), blur(), focus(), option.add(),
option.remove(), remove()
onAfterDate, onBeforeUpdate, onBlur,
onChange,
onDregStart,
onFocus,
onHelp, onKeyDown, onKeyPress, onKeyUp,
onMouseOver,
onMouseUp,
onResize,
onRowExit, onSelectStart (vezi conversaia 6)
Metode:
Figura 8.48
(sub)Obiectul Select este prezentat n detaliu n figura 8.49.
298
Obiect
Sintax
Select
document.forms[].select
Reprezint o list derulant care afieaz o serie de opiuni ntr-un

formular. Subobiectul Select este versiunea transpus n obiect a
tag-ului
(X)HTML
<select>
...
</select>.
Subobiectul
Select poate fi accesat prin proprietatea form.elements[] sau

prin numele su.
Exemplu:
Figura 8.49
<form name=form1>
<select name=optiuni>
<option value=opiune1>Prima opiune</option>
<option value=opiune2>A doua opiune</option>
<option value=opiune3>A treia opiune</option>
</select>
</form>
Proprietile (sub)obiectului Select

Proprietile (sub)obiectului Select sunt prezentate n detaliu n figura 8.50.
Proprietate
Sintax
disabled
document.forms[].select.disabled
Valoare logic (true/false) zona este dezactivat (true) sau activat

(false).
form
length
document.forms[].select.name
Numele zonei. Aceast proprietate corespunde atributului name al tag-ului

<select/>.
options[]
document.forms[].select.multiple
Valoare logic (true/false) selecia multipl este autorizat (true)

sau nu (false).
name
document.forms[].select.length
Numrul de opiuni din list.
multiple
document.forms[].select.form
document.forms[].select.options[]
Setul de opiuni propuse n list.
selectedIndex document.forms[].select.selectedIndex
Figura 8.50
Valoare care indic rangul opiunii selectate n list. Aceast proprietate

conine valoarea 1 dac nici o opiune nu este selectat.
Size
document.forms[].select.size
299
Valoare care indic numrul de opiuni vizibile simultan n list.
type
document.forms[].select.type
Aceast proprietate conine fie select-one fie select-multiple.
value
Figura 8.50
(continuare)
document.forms[].select.value
Valoarea opiunii selectate.
Metodele (sub)obiectului Select

Metodele (sub)obiectului Select sunt prezentate n detaliu n figura 8.51.
Metod
Sintax
add()
document.form.select.add(Element,
Amonte)
Adaug n list opiunea referit prin argumentul Element i o insereaz

naintea opiunii referite prin argumentul Amonte. Dac argumentul
Amonte este omis, elementul este adugat la finele listei.

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

option.remove() document.form.select.option.remove
(Rang)
Elimin din list opiunea al crei rang este indicat n argument.
remove()
Figura 8.51
document.form.select.remove(Rang)
Elimin din list opiunea al crei rang este indicat n argument.
(sub)Obiectul Text
Fia (sub)obiectului Text este prezentat n figura 8.52.
Fia (sub)obiectului Text
300
Obiectul printe:
Form
Proprieti:
defaultValue,
disabled,
form,
maxLength, name, readOnly, size, type,

value
Metode:
blur(), click(), focus(), select()

onClick,
onFocus,
onKeyPress,
onHelp,
onKeyUp,
onKeyDown,
onMouseDown,
onMouseMove, onMouseOut, onMouseOver,

onMouseUp, onSelect (vezi conversaia 6).
Figura 8.52
(sub)Obiectul Text este prezentat n detaliu n figura 8.53.

Obiect
Sintax
Text
document.forms[].text
Reprezint o zon de text format dintr-o singur linie. Subobiectul
Text este versiunea transpus n obiect a tag-ului (X)HTML <input

type=text>. Subobiectul Text poate fi accesat prin proprietatea
form.elements[] sau prin numele su.
Exemplu:
Figura 8.53
<form name=form1>
<input type=text name=text1 />
</form>
Proprietile (sub)obiectului Text

Proprietile (sub)obiectului Text sunt prezentate n detaliu n figura 8.54.
Proprietate
Sintax
defaultValue
document.form[].text.defaultValue
disabled
Valoare logic (true/false) zona este dezactivat (true) sau

activat (false).
form
Figura 8.54
document.form[].text.disabled
document.form[].text.form
maxLength
document.form[].text.maxLength
301
name
Numele zonei. Aceast proprietate corespunde atributului name al

tag-ului <input />.
readOnly
size al tag-ului <input />.
(continuare)
document.form[].text.type
Tipul elementului n cadrul formularului. n acest caz, proprietatea

returneaz text. Aceast proprietate corespunde atributului type al
tag-ului <input />.
value
Figura 8.54
document.form[].text.size
Mrimea (n pixeli) zonei. Aceast proprietate corespunde atributului
type
document.form[].text.readOnly
Valoare logic (true/false) zona este numai citit (true) sau nu

(false).
size
document.form[].text.name
document.form[].text.value
Coninutul zonei. Aceast proprietate corespunde atributului value al

tag-ului <input />. value.length returneaz numrul de
caractere ale zonei.
Metodele (sub)obiectului Text

Metodele (sub)obiectului Text sunt prezentate n detaliu n figura 8.55.
Metod
Sintax
blur()
document.form.text.blur()
click()

focus()
document.form.text.focus()
select()
Figura 8.55
document.form.text.click()
(sub)Obiectul Textarea
document.form.text.select()
302
Fia (sub)obiectului Textarea este prezentat n figura 8.56.
Fia (sub)obiectului Textarea
Obiectul printe:
Form
Proprieti:
cols,
defaultValue,
disabled,
form,
maxLength, name, readOnly, rows, size,

type, value, wrap
Metode:
blur(), click(), focus(), select()
onAfterUpdate, onBeforeUnload,
onBeforeUpdate, onBlur, onChange,
onDragStart, onErrorUpdate,
onFilterChange, onFocus, onHelp,
onKeyDown, onKeyPress, onKeyUp,
onMouseOver, onMouseUp, onRowEnter,
onRowExit, onSelect, onSelectStart (vezi
Figura 8.56
conversaia 6).
(sub)obiectul Textarea este prezentat n detaliu n figura 8.57.
Obiect
Sintax
Textarea
document.form[].textarea
Reprezint o zon de text multilinie. Subobiectul Textarea este

versiunea
transpus
obiect
tag-ului
(X)HTML
<input
type=textarea>. Subobiectul Textarea poate fi accesat prin

Exemplu:
Figura 8.57
<html>
<head>
<title>demo</title>
<script>
function control(f){
lungmax=30;
document.form1.numar.value=f.value.length;
if(f.value.length>lungmax){
f.value=f.value.substring(0,lungmax);
document.form1.numar.value=lungmax;
}
}
</script>
</head>
<body>
<form name=form1>
303
<input type=text name=numar size=1> caractere<br>
<textarea name=text cols=40 row=5 onKeyUp=control(this)>
</textarea>
</form>
</body>
</html>
Rezultatele execuiei script-ului.
Proprietile (sub)obiectului Textarea

Proprietile (sub)obiectului Textarea sunt prezentate n detaliu n figura 8.58.
Proprietate
Sintax
cols
document.forms[].textarea.cols
Numrul de coloane ale zonei.
defaultValue
disabled
<input />.
document.forms[].textarea.readOnly
Valoare logic (true/false) zona este numai citit (true) sau nu

(false).
rows
document.forms[].textarea.name
Numele zonei. Aceast proprietate corespunde atributului name al tag-ului
readOnly
Figura 8.58
document.forms[].textarea.maxLength
name
document.forms[].textarea.form
maxLength
document.forms[].textarea.disabled
Valoare logic (true/false) zona este dezactivat (true) sau activat

(false).
form
document.forms[].textarea.defaultValue
document.forms[].textarea.rows
Numrul de linii ale zonei.
304
size
Dimensiunea (n pixeli) zonei. Aceast proprietate corespunde atributului

size al tag-ului <input />.
type
document.forms[].textarea.type
Tipul elementului n formular. n acest caz, proprietatea returneaz text.

Aceast proprietate corespunde atributului type al tag-ului <input />.
value
document.forms[].textarea.size
document.forms[].textarea.value
Coninutul zonei. Aceast proprietate corespunde atributului value al

tag-ului <input />. value.length returneaz numrul de caractere
al zonei.
wrap
Figura 8.58
(continuare)
document.forms[].textarea.wrap
Indic modul de gestionare al sfritului de linie. Aceast proprietate poate

conine trei valori: hard (un <CR> este inserat la sfritul fiecrei linii),
soft (textul trece pe linia urmtoare fr <CR>), none (fr trecere la
linia urmtoare n mod automat).
Metodele (sub)obiectului Textarea

Metodele (sub)obiectului Textarea sunt prezentate n detaliu n figura 8.59.
Metod
Sintax
blur()
document.form.textarea.blur()
click()

detectat prin onClick().
focus()
document.form.textarea.focus()
select()
Figura 8.59
document.form.textarea.click()
document.form.textarea.select()
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
Figura 8.60
n figura 8.61 este prezentat documentul XHTML n care s-a inserat script-ul de calcul.
Rezultatele execuiei sunt prezentate n figura 8.62.
Figura 8.61
306
Figura 8.62
Comentarii:
9 Formularul (calcul) este clasic; el conine o zon de text (pentru TOTAL) i cte o
caset de validare pentru fiecare articol. Bifai un articol! Preul su este adunat la
totalul deja prezent n cmpul TOTAL. Dezactivai un articol! Preul su este sczut din
total.
9 Zona care afieaz totalul general este un cmp text a crui dimensiune a fost limitat la
10.
9 Urmeaz definiiile casetelor de validare (checkbox). Valoarea (value) fiecrei casete de
validare reprezint preul articolului: 20, 9.90, 20, 18.30.
9 Pentru fiecare caset de validare n tag-ul <input> s-a definit gestionarul de
evenimente onClick, care execut funcia JavaScript calcule() al crui cod este
definit n seciunea <head> a paginii Web (figura 8.61).
9 Fiecare element (subobiect) al formularului este identificat prin numrul de ordine:
elements[0] pentru primul subobiect (total), elements[1] pentru al doilea
subobiect etc. Sintaxa pentru identificarea unui subobiect (element) precis al
formularului este puin lung, dar logic. De exemplu, elementul (subobiectul) 0 este
situat n formularul cu numele calcul, el nsui situat n documentul curent. Valoarea
0 este atribuit proprietii value. n consecin, atunci cnd activez sau dezactivez un
articol, totalul existent este anulat.
9 Prin intermediul unei bucle for, poate fi recuperat valoarea fiecrui subarticol
(element) al formularului. Bucla for execut instruciunile cuprinse ntre cele dou
acolade ({ i }), figura 8.63.
Figura 8.63
Observai cei trei parametrii ai buclei, plasai ntre paranteze:
1. Variabila de control a buclei i este iniializat cu 1. Primul element are rangul 0, dar,
n acest caz el nu trebuie prelucrat de ctre bucla for ntruct este vorba de cmpul
Total.
2. Testul de ieire din bucl: i<document.calcul.elements.length. Dac
n urma evalurii condiiei rezultatul este FALSE, atunci instruciunile din corpul buclei
nu mai sunt efectuate. Aici testul compar valoarea variabilei i cu numrul de
elemente ale formularului. Putem simplifica testul scriind i<4. Dar, dac se adaug
ori se suprim o caset de validare, trebuie modificat de asemenea i condiia de
test. Este mai uor s utilizm proprietatea length a setului de elemente; ea
returneaz n mod automat numrul de elemente ale formularului.
3. Pasul. El indic modul n care evolueaz variabila de control a buclei la fiecare
trecere. Aici se adaug 1 la valoarea variabilei i (i++).
307
9 Proprietatea checked (caset bifat) a fiecrei casete de validare a formularului este
testat n continuare. Aceast proprietate returneaz valoarea TRUE sau FALSE. Dac
testul este TRUE, atunci TOTAL (elements[0]) este recalculat; valoarea sa este
adugat la valoarea elementului ce urmeaz a fi testat (figura 8.64).
Figura 8.64
9 Funcia parseFloat este obligatorie ntruct valorile checkbox-urilor sunt date de tip
text. ParseFloat convertete un ir de caractere ntr-o valoare numeric real.
ParseFloat este indispensabil dac valoarea unui cmp urmeaz s fie utilizat
ntr-o expresie aritmetic.
Simulai funcionarea buclei for din aplicaia precedent pentru cazul n care articolul
1 a fost bifat (activat), figura 8.65.
Figura 8.65
1. Variabila i ia valoarea 1.
2. Proprietatea checked a elementului (subobiectului) 1 al formularului este
testat.
if(document.calcul.elements[1].checked);
ea
returneaz
valoarea TRUE.
3. Valoarea elementului 1 este adugat la coninutul cmpului TOTAL.
4. Sfritul buclei simbolizat prin acolada }.
5. Cel de-al treilea parametru al buclei este executat: i++. Variabila i ia valoarea
2.
6. Testul (al doilea argument al buclei) buclei este efectuat: i<4. El returneaz
valoarea FALSE. Bucla este executat nc o dat.

Personalizai script-ul din aplicaia precedent. Putei aduga oricte articole dorii,
avnd
grij
de
preciza
valoarea
fiecruia
dintre
ele.
Expresia:
308
document.calcul.elemnts.length din iniializarea buclei va furniza tot timpul
numrul de elemente fr a mai fi nevoie ca dumneavoastr s mai intervenii. Dac
lucrai numai cu valori ntregi, utilizai funcia parseInt. nlocuii n acest caz funcia
parseFloat cu funcia parseInt (figura 8.66).
Figura 8.66
Scriei un program JavaScript care calculeaz suma primelor n numere naturale.
Indicaie. Introducei valoarea lui n ntr-o zon simpl de text, subobiect al obiectului
Form.
n figura 8.67 este prezentat codul surs (X)HTML complet (vezi script-ul aplicaiei).
Figura 8.67
n figura 8.68 este prezentat rezultatul execuiei programului JavaScript pentru 13
numere naturale.
309
Figura 8.68
Scriei un program JavaScript pentru expedierea (coninutului) formularului din figura
8.69, prin pot electronic la adresa (fictiv) webmaster@abc.ro. Personalizai script-ul.
Figura 8.69
n figura 8.70 se prezint documentul XHTML.
Figura 8.70
310
Remarci:
9 Pentru a personaliza acest formular, nlocuii webmaster@abc.ro cu propria
dumneavoastr adres de e-mail.
9 Atributul enctype=text/plain al tag-ului form asigur utilizatorul c
informaiile din cadrul mesajului vor fi expediate ntr-o form lizibil. Aceast tehnic
prezint avantajul c permite citirea rapid a datelor care aparin unui formular.
9 Exist numeroase script-uri i servicii CGI gratuite (vezi http://www.jsworkshop.com/).
Validai un formular cu JavaScript

Validarea formularelor reprezint, fr
ndoial aplicaia cea mai preioas a
limbajului JavaScript. Validarea unui formular const n verificarea, cu ajutorul

unui script a corectitudinii informaiilor introduse de ctre utilizator.
Putei utiliza limbajul JavaScript pentru:
9 validarea datelor introduse de utilizator. Putei valida cmpuri de intrare,
grupuri de cmpuri sau ntregul formular, utiliznd gestionari de
evenimente i funcii JavaScript.
9 construirea formularelor interactive, n care o parte sau ntreaga
prelucrare are loc pe parte de client.
9 a testa conformitatea datelor introduse de utilizator cu politicile de
procedur impuse (exemplu de politic de procedur: data de livrare a
unei comenzi nu poate fi n ziua de smbt/duminic a sptmnii).
9 a testa prezena datelor n cmpurile obligatorii ale unui formular (un
cmp este prezent dac nu este vid).
Aplicaii
Calculai rdcin ptrat dintr-un numr (
x ). Validai datele introduse de utilizator
( x 0 ). n caz de eroare (x<0) se va afia mesajul: Rdcin imaginar.

n figura 8.71 este prezentat codul (X)HTML complet, n care s-a inserat script-ul de
calcul.
311
Figura 8.71
n figurile 8.72 i 8.73 se prezint rezultatele execuiei programului pentru x=-16 i
pentru x=16.
Figura 8.72
312
Figura 8.73
Comentai codul XHTML al aplicaiei.
Scriei un program JavaScript care verific dac coninutul celor trei cmpuri ale unui
formular: nume, prenume, codcard nu este vid. n caz de eroare afiai unul din mesajele
de mai jos:
9 Ai uitat s introducei numele dumneavoastr!
9 Ai uitat s introducei prenumele dumneavoastr!
9 Ai uitat s introducei numrul dumneavoastr de card!
n figura 8.74 se prezint codul complet al documentului HTML.
313
Figura 8.74
n figura 8.75, figura 8.76 se prezint rezultatele execuiei programului JavaScript.
Figura 8.75
314
Figura 8.76
Remarc. Comentai linia de cod onsubmit=return verif() (vezi tag-ul form).
Scriei un script care valideaz adresa de e-mail introdus ntr-o zon de tip text din
cadrul unui formular (figura 8.77).
Dac zona de e-mail este vid se va genera mesajul de eroare: V rog, introducei
adresa de e-mail!. Dac din adresa de e-mail lipsesc @ sau punctul (.), atunci adresa de
e-mail va fi considerat incorect. n acest caz, se va genera mesajul de eroare: Adresa
de e-mail este incorect! V rog, s-o corectai!. Formularul poart numele de aplicaie.
Acest nume va fi utilizat n cadrul script-ului. De notat c formularul va fi expediat la
adresa e-mail (imaginar) webmaster@abc.ro.
Figura 8.77
315
Figura 8.78
n figura 8.79, figura 8.80 se prezint cteva exemple de test ale script-ului pe care l-ai
realizat.
Figura 8.79
316
Figura 8.80
Remarci
9 Dac dorii, putei personaliza script-ul.
9 Pentru informaii suplimentare privind o validare mai complex a unei adrese e-mail
consultai site-ul: http://developer.netscape.com/library/exemples/javascript/
formval/overview.html.
Simulai funcionarea urmtorului program JavaScript (figura 8.81).
Figura 8.81
317
Vom aborda i n cadrul acestei conversaii aceeai problem pe care am abordat-o n
conversaia
precedent
(EXEMPLUL
JAVASCRIPT),
cu
singura
deosebire
(important!) c datele sunt introduse cu ajutorul unui formular (X)HTML, care d un plus
de interactivitate paginilor Web.
Datele care se vor introduce vor fi validate, iar n caz de eroare se vor afia mesaje
corespunztoare. Se vor realiza dou variante:
9 Varianta 1 Introducerea livrrilor se face ntr-o zon text asociat fiecrei zile
i fiecrui rezervor. Afiarea rezultatelor se face n aceeai
fereastr n zone de text distincte.
9 Varianta 2 Introducerea livrrilor se face printr-o singur zon de text.
Selecia rezervorului i a zilei se face printr-o list de selectare.
Afiarea rezultatelor se face ntr-o fereastr distinct.
n figurile 8.82 i 8.83 sunt prezentate: ecranul (intrare/ieire) cu Situaia livrrilor de
benzin pentru rezervoarele R1 R2 R3 i specificaiile de programare. Mesajele de
validare a datelor i tabela de variabile sunt prezentate n figura 8.84, respectiv figura
8.85.
318
Figura 8.82
Descriere. Programul editeaz ntr-o pagin Web situaia livrrilor de benzin
efectuate zilnic din trei rezervoare cilindrice echilaterale (R1, R2, R3). De asemenea
programul afieaz livrrile maxime i minime (valoare, ziua, rezervor). Afiarea tuturor
rezultatelor se realizeaz atunci cnd se execut clic pe butonul Rezultate (vezi
figura 8.82).
Livrrile, pe zile (luni, mari, miercuri, joi, vineri) i pe rezervoare (R1, R2, R3) se
introduc ntr-un formular (vezi figura 8.82) de la tastatur.
Intrri. Valorile livrrilor, pe zile, pentru fiecare rezervor (R1, R2, R3). n situaia n
care datele de intrare nu sunt numerice i nu respect intervalul (0, 20) se genereaz
Figura 8.83 un mesaj de eroare.
319
Ieiri. Media livrrilor pe zile i pe rezervoare (n cadrul aceluiai formular); livrarea
maxim (valoare, ziua, rezervor); livrarea minim (valoare, ziua, rezervor).
Lista de funciuni ale programului
1. Creare i iniializare matrice livrri.
5. Plasare valoare n matrice livrri.
2. Validare date.
6. Calculul mediilor livrrilor pe zile i
3. Trunchiere valori.
Figura 8.83
pe rezervoare.
4. Plasare valori valide (ntregi) n
7. Afiarea rezultatelor.
formular.
(continuare)
8. Stop.
Mesaje
Mesaj
Descriere
Valoare greit pentru ...! Caractere

invalide.
Valoare greit pentru ...! Valoarea trebuie
s fie >0.
Valoare greit pentru ...! Valoarea trebuie
Figura 8.84
s fie <20.
Valorile introduse nu sunt numerice.

Valoarea introdus este negativ.
Valoarea introdus este mai mare ca 20.
Tabela de variabile
Variabile de stare
Variabile de ieire
T11,T12,
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
T13,T21,
T22, T23, T31, T32,

T33, T41, T42, T43,
T51,
T52,
Obiecte,
zone
T53:
de
editare text pentru

introducerea valorilor
livrrilor pe fiecare
rezervor, n fiecare zi
Figura 8.85
Documentaia de proiectare
Pseudocodul pentru EXEMPLUL 8 JAVASCRIPT (Varianta 1) este prezentat n figura
8.85.
320
Pseudocodul
BEGIN
//initializeaza matricea livrarilor
FORI
FOR(i=0;i<3;i++)
FORJ
FOR(j=0;j<5;j++)
ai,j=0.0
FORJ
ENDFOR
FORI
ENDFOR
//raspunde la evenimentele generate de butonul Rezultate
IF1
IF(se apasa butonul Rezultate)
DO calculeaza
IF1
ENDIF
//raspunde la evenimentele generate de zonele de editare
IF2
IF(se paraseste zona de editare)
DO valideaza(zona_de_editare,0,20)
IF2
ENDIF
EXEMPLUL8 END
TRUNCHIAZA BEGIN
Parametrii:
x- valoare reala
IF3
IF(i-1)
IF3
ENDIF
RETURN s
TRUNCHIAZA END
EXEMPLUL8
VALIDEAZA
IF4
IF4
IF5
IF5
IF6
IF6
Figura 8.86
BEGIN
//valideaza valoarea introdusa in zona de text
Date intrare:
item-zona de text care a generat evenimentul onBlur
min- valoarea minima permisa
max- valoarea maxima permisa
rval=fals
x=transforma in real item.value
IF(x nu este numar)
Afiseaza mesaj de eroare: Valoare gresita pentru cantitate
ELSE
IF(x<min)
Afiseaza mesaj de eroare: Valoarea este prea mica
ELSE
IF(x>max)
Afiseaza mesaj eroare: Valoarea este prea mare
ELSE
Rval=adevarat
DO puneVal(item,x)
321
IF6
IF5
IF4
VALIDEAZA
ENDIF
ENDIF
ENDIF
RETURN rval
END
//depune valoarea din zona de editare in matricea livrarilor a

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
air,ic=transforma_in_real(T1.value)
PUNEVAL
END
PUNEVAL
// calculeaza mediile determina valorile minime si maxime si afiseaza rezultatele

CALCULEAZA BEGIN
FORJ
FOR(j=0;j<5;j++)
s=0
FORI
FOR(i=0;i<3;i++)
s=s+ai,j
FORI
ENDFOR
bj=s/3
FORJ
ENDFOR
st=0
FORI1
FOR(i=0;i<3;i++)
s=0
FORJ1
FOR(j=0;j<5;j++)
s=s+ai,j
st=st+aij
FORJ1
ENDFOR
di=s/5
FORI1
ENDFOR
d3=s/15
max=a0,0
min=a0,0
imax=0
imin=0
jmax=0
jmin=0
FORI2
FOR(i=0;i<3;i++)
FORJ2
FOR(j=0;j<5;j++)
IF7
IF(max<ai,j)
max=aij
imax=i
Figura 8.86
jmax=j
(continuare)
322
ENDIF
IF(min>ai,j)
min=aij
imin=i
jmin=j
IF8
ENDIF
FORJ2
ENDFOR
FORI2
ENDFOR
imin=imin+1
imax=imax+1
//afisare rezultate
M1.value=trunchiaza(B[0])
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=Zjmax
Figura 8.86
zmin.value=Zjmin
(continuare)
CALCULEAZA END
IF7
IF8

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>
Figura 8.87 </body>
(continuare) </html>
Comentarii:
9 Script-ul (inserat n seciunea <head> a documentului HTML) conine patru funcii:
trunchiaz(x); puneVal(item, x); validate(item, min, max);

compute().
9 Pentru calculul mediei mediilor livrrilor s-a utilizat instruciunea de atribuire
D[3]=ST/15
unde:
D este vectorul mediilor livrrilor pe rezervoare iar ST reprezint total livrri.
9 S-au folosit gestionarii de evenimente onBlur, cu funcia de validare date
validate() pentru obiectele zone de text i onClick cu funcia compute()
pentru butonul de calcul rezultate.
326
Vizualizai documentul ntr-un browser (figura 8.88) i testai script-ul.
Figura 8.88
n figura 8.89 se prezint rezultatele execuiei programului JavaScript pentru un set de
date ilustrat n cadrul formularului afiat.
327
Figura 8.89

n figurile 8.90, 8.91, 8.92 i 8.93 sunt prezentate: ecranul pentru introducerea livrrilor
(pe zile i pe rezervoare); ecranul cu Situaia livrrilor de benzin pentru rezervoarele
R1, R2, R3; specificaiile de programare respectiv tabela de variabile.
328
Figura 8.90
Figura 8.91
Descriere. Programul editeaz ntr-o pagin Web situaia livrrilor de benzin
efectuate zilnic din trei rezervoare cilindrice echilaterale (R1, R2, R3).
Programul afieaz de asemenea livrrile maxime i minime cu precizarea numrului
rezervorului i a zilei n care s-a efectuat livrarea respectiv. Afiarea tuturor
rezultatelor se face ntr-o fereastr distinct, n momentul n care se execut clic pe
Figura 8.92 butonul Afieaz (vezi figura 8.90).
329
Livrrile, pe zile (luni, mari, miercuri, joi, vineri) i pe rezervoare (Rezervor1,
Rezervor2, Rezervor3) se introduc printr-o singur zon de text a unui formular (vezi
figura 8.90). Selecia rezervorului i a zilei se face printr-o list de selectare.
Intrri. Valorile livrrilor, pe zile, pentru fiecare rezervor se introduc printr-o singur
zon de text a unui formular. n caz de eroare datele de intrare nu sunt numerice i
nu respect intervalul (0, 20) se genereaz un mesaj de eroare.
La acionarea butonului Livreaz se vor depune livrrile din zona Cantitatea n
matricea a, pe linia i coloana corespunztoare rezervorului i zilei respective (vezi
funcia Livreaz()).
Ieiri. Situaia livrrilor, mediile (pe zile i pe rezervoare) sub form de tabel; livrarea
maxim (valoare, ziua, rezervor); livrarea minim (valoare, ziua, rezervor).
Lista de funciuni ale programului
1. Iniializeaz vectorul z cu numele zilelor sptmnii.
2. Aloc spaiu de memorie i iniializeaz matricea livrrilor.
3. Rspunde la evenimentele generate de butonul Livreaz.
4. Rspunde la evenimentele generate de butonul Afieaz.
5. Rspunde la evenimentele generate de zona de editare T1.
6. Transform n ir de caractere i trunchiaz la dou zecimale.
7. Valideaz valoarea introdus n zona de text.
8. Depune valoarea din zona de editare n matricea livrrilor a.
9. Calculeaz mediile pe zile i pe rezervoare.
10. Determin valorile maxime i minime.
Figura 8.92
(continuare)
11. Afieaz rezultatele n fereastra RezWindow.

12. Stop.
Tabela de variabile
Figura 8.93
Variabile de stare
Variabile de ieire
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
330
Pseudocodul pentru EXEMPLUL 8 JAVASCRIPT (Varianta 2) este prezentat n figura
8.94.
Pseudocodul
331
BEGIN
//aloca spatiu de memorie si initializeaza matricea livrarilor
FOR1
FOR(i=0;i<3;i++)
FOR2
FOR(j=0;j<5;j++)
ai,j=0.0
FOR2
ENDFOR
FOR1
ENDFOR
Initializeaza RezWindow
//raspunde la evenimentele generate de butonul Livreaza
IF1
IF(se apasa butonul Livreaza)
DO livreaza
IF1
ENDIF
//raspunde la evenimentele generate de butonul Afiseaza
IF2
IF(se apasa butonul Afiseaza)
DO afis
IF2
ENDIF
//raspunde la evenimentele generate de zona de editare T1
IF3
IF(se paraseste zona T1)
DO valideaza(T1,0,20)
IF3
ENDIF
EXEMPLUL8 END
EXEMPLUL8
// transforma in sir de caractere si trunchiaza la doua zecimale
TRUNCHIAZA BEGIN
Parametrii:
x- valoare reala
IF4
IF(i-1)
IF4
ENDIF
RETURN s
TRUNCHIAZA END
VALIDEAZA
IF5
Figura 8.94 IF5
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
IF(x nu este numar)
Afiseaza mesaj de eroare:
Valoare gresita pentru cantitate
ELSE
332
IF6
IF6
IF7
IF7
IF7
IF6
IF5
VALIDEAZA
IF(x<min)
Afiseaza mesaj de eroare:
Valoarea este prea mica
ELSE
IF(x>max)
Afiseaza mesaj eroare:
Valoarea este prea mare
ELSE
Rval=adevarat
ENDIF
ENDIF
ENDIF
RETURN rval
END
//depune valoarea din zona de editare in matricea livrarilor a

BEGIN
ir=indicele elementului selectat in lista Rezervor
ic=indicele elementului selectat in lista Zile
air,ic=transforma_in_real(T1.value)
LIVREAZA
END
LIVREAZA
// calculeaza mediile determina valorile minime si maxime si afiseaza rezultatele

AFIS
BEGIN
FOR3
FOR(j=0;j<5;j++)
s=0
FOR4
FOR(i=0;i<3;i++)
s=s+ai,j
FOR4
ENDFOR
bj=s/3
FOR3
ENDFOR
st=0
FOR5
FOR(i=0;i<3;i++)
s=0
FOR6
FOR(j=0;j<5;j++)
s=s+ai,j
st=st+aij
FOR6
ENDFOR
di=s/5
FOR5
ENDFOR
d3=s/15
max=a0,0
min=a0,0
imax=0
imin=0
jmax=0
jmin=0
FOR(i=0;i<3;i++)
Figura 8.94 FOR7
FOR(j=0;j<5;j++)
(continuare) FOR8
333
IF8
IF8
IF9
IF9
FOR8
FOR7
IF10
IF10
FOR9
FOR10
FOR10
FOR9
FOR11
FOR11
Figura 8.94
(continuare)
AFIS
IF(max<ai,j)
max=aij
imax=i
jmax=j
ENDIF
IF(min>ai,j)
min=aij
imin=i
jmin=j
ENDIF
ENDFOR
ENDFOR
imin=imin+1
imax=imax+1
//afisare rezultate
IF(RezWindow exista)
nchide RezWindow
ENDIF
Creaza RezWindow
//scrierea rezultatelor in fereastra RezWindow
RezWindow.WRITE "SITUATIA REZERVOARELOR R1 R2 R3"
RezWindow.WRITE "ZIUA R1 R2 R3 MEDIA"
FOR(k=0;k<5;k++)
RezWindow.WRITE Z[k]
FOR(j=0;j<3;j++)
RezWindow.WRITE a[j][k]
ENDFOR
RezWindow.WRITE trunchiaza( b[k])
ENDFOR
RezWindow.WRITE "MEDIA"
FOR(j=0;j<4;j++)
RezWindow.WRITE trunchiaza(d[j])
ENDFOR
RezWindow.WRITE "Livrarea maxima: " max
RezWindow.WRITE "s-a facut din rezervorul: R" imax
RezWindow.WRITE "in ziua de" Zjmax
RezWindow.WRITE "Livrarea minima:" min
RezWindow.WRITE " s-a facut din rezervorul: R"imin
RezWindow.WRITE " in ziua de "+Zjmin
END

Documentul complet (X)HTML este prezentat n figura 8.95.
<html>
<head>
334
var s=""+x;
i=s.indexOf(".");
if(i!=-1){
}
return s;
}
function validate(item, min, max) {
var rVal = false;
if(isNaN(x))
alert("Valoare gresita pentru cantitate!");
else
if (x < min)
alert("Valoare gresita pentru cantitate!Valoarea trebuie >" + min);
else if (x> max)
alert("Valoare gresita pentru cantitate! Valoarea trebuie sa fie < " + max);
else
rVal = true;
return rVal;
}
a=new Array(3);
a[0]=new Array(5);
a[1]=new Array(5);
a[2]=new Array(5);
for(i=0;i<3;i++)
for(j=0;j<5;j++)
a[i][j]=0.0;
var RezWindow=null;
function livreaza() {
var ir=f1.Rezervor.selectedIndex;
var z=f1.Zile.selectedIndex;
a[ir][z]+=parseFloat(f1.T1.value);
}
function afis(){
var i,j;
B = new Array(5);
for(j=0;j<5;j++)
{
S=0;
for(i=0;i<3;i++)
S=S+a[i][j];
B[j]=S/3;
Figura 8.95
}
335
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;
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++;
//AFISARE REZULTATE
if(RezWindow!=null)RezWindow.close();
RezWindow=window.open('','', 'toolbar=yes,scrollbars=yes,menubar=no,
width=500,height=300');
RezWindow.document.writeln("<center><p>SITUATIA REZERVOARELOR R1 R2
R3</p></center>");
RezWindow.document.writeln("<center><table border=1 bgcolor=#EFEFFF><tr>");
RezWindow.document.writeln("<td><b>ZIUA</b><td><b>R1</b><td>
for(k=0;k<5;k++) {
RezWindow.document.writeln("<tr><td>" + Z[k]+"</td>");
for(j=0;j<3;j++) {
RezWindow.document.writeln("<td>" + a[j][k]+ "</td>");
}
RezWindow.document.writeln(" <td> " +trunchiaza( B[k])+ "</td></tr>");
}
RezWindow.document.writeln("<tr><td><b>MEDIA</b>");
for(j=0;j<4;j++)
RezWindow.document.writeln("<td><b>" + trunchiaza(D[j])+" </b></td>");
RezWindow.document.writeln("</tr>");
RezWindow.document.writeln("</table></center><p><p>");
RezWindow.document.writeln("<font color=green>Livrarea maxima:"+max+" s-a facut din
RezWindow.document.writeln("<p><font color=green>Livrarea minima:"+min+" s-a facut din
RezWindow.document.writeln("</html>");
}
// -->
Figura 8.95
</script>
(continuare)
</head>
336
<body>
<center>
<form name="f1">
<table border=0>
<tr><td><b>REZERVORUL</b><td><b>Ziua</b>
<tr><td><select size="1" name="Rezervor">
<option selected>Rezervor1</option>
<option>Rezervor2</option>
</select>
<td>
<select size="1" name="Zile">
<option>Luni</option>
<option>Marti</option>
<option>Miercuri</option>
<option>Joi</option>
<option>Vineri</option>
</select>
<tr>
<td>Cantitatea
<td><input type="text" name="T1" size="7" value="0.0" onChange="validate(this,0,20);">
<tr>
<td><input type="button" value="Livreaza" onClick="trimite();">
<td><input type="button" value="Afiseaza" onClick="afis();">
</table>
</center>
</form>
Figura 8.95 </body>
(continuare)
</html>
Comentarii:
9 Script-ul (inserat n seciunea <head> a documentului XHTML) conine patru funcii:
trunchiaz(x);
afi().
ivalidate(item,
min,
max);
livreaz();
9 Formularul conine subobiectele: Select i Option; Text; butoanele Livreaz

i Afieaz.
9 Validarea datelor de intrare introduse n zona de text se realizeaz cu gestionarul de
evenimente onBlur (vezi funcia valideaz()).
9 Depunerea livrrilor din zona de editare (subobiectul Text) n matricea livrrilor se
realizeaz cu gestionarul de evenimente onClick (vezi funcia Livreaz()).
9 Afiarea rezultatelor se realizeaz cu gestionarul de evenimente onClick (vezi funcia
afis()). Prin acionarea butonului Afieaz se deschide o nou fereastr care va
afia: situaia livrrilor; mediile livrrilor pe zile i rezervoare; livrrile maxime i minime.
9 Pentru crearea unei ferestre, am utilizat metoda window.open() (figura 8.96).
Figura 8.96
337
9 Pentru crearea listei de selectare a rezervoarelor i a zilelor sptmnii am utilizat
subobiectele Form: Select i Option (vezi figura 8.97).
Figura 8.97
9 Subobiectul Select este versiunea transpus n obiect a tag-ului (X)HTML
<select> ... </select>. Subobiectul Select este unul dintre cele mai utile i
mai flexibile subobiecte ale obiectului Form. Subobiectul Select permite crearea
urmtoarelor tipuri de liste:
list de selectare (o list de opiuni n care utilizatorul poate selecta un singur
element. Pentru a v asigura c lista afieaz o singur linie la un moment dat
atribuii proprietii size valoarea 1 sau nu-l folosii deloc).
list derulant (o list care afieaz la un moment dat un anumit numr de elemente.
Ea include bare de derulare. Pentru a defini o list derulant atribuii lui size o
valoare mai mare ca 1).
list derulant cu selectri multiple (din acest tip de obiect Select, putei selecta
unul sau mai multe elemente. Pentru a defini o list derulant cu selectri multiple,
adugai proprietatea multiple la definirea obiectului Select).
9 Subobiectul Option este versiunea transpus n obiect a tag-ului (X)HTML
<option> ... </option>.
Vizualizai documentul ntr-un browser (figura 8.98) i testai script-ul.
Figura 8.98
n figura 8.99 se prezint rezultatele execuiei programului JavaScript pentru un set de
date afiat.
338
Figura 8.99
Aplicaie
Scriei un program JavaScript pentru afiarea datelor coninute n formularul din figura
8.100, ntr-o nou fereastr. Personalizai script-ul.
Figura 8.100
339
n figura 8.101 se prezint documentul complet XHTML, n care s-a inserat script-ul
aplicaiei.
Figura 8.101
n figura 8.102 este prezentat rezultatul execuiei script-ului.
Figura 8.102
340
Testai script-ul (figura 8.103) executnd clic pe butonul Afiai.
Figura 8.103
Remarc. Informaiile din cadrul formularului sunt afiate ntr-o nou fereastr (figura 8.103).
Tem
JavaScript
Testai-v cunotinele
1. Care din atributele tag-ului <form> determin locul unde vor fi expediate
datele?
action;
method;
name.
2. Care sunt subobiectele obiectului Form?
3. Care sunt proprietile obiectului Form?
4. Care sunt metodele obiectului Form?
5. Care sunt gestionarii de evenimente ai obiectului Form?
6. Care este relaia dintre obiectul Form i tag-ul <form>?
7. Care este relaia dintre subobiectele unui formular i obiectul Form?
8. Care
este
sintaxa
subobiectelor:
Text;
Textarea;
Submit;
Checkbox; Radio; Select?

9. Care sunt proprietile subobiectului Select?
10.Care sunt metodele subobiectelor: Text; Textarea; Submit; Reset;
Button; Checkbox; Select; Fileupload; Option?
341
11.Care sunt gestionarii de evenimente au subobiectelor: Reset; Option;
Checkbox.
12.Cum putei utiliza limbajul JavaScript pentru validarea unui formular?
13.Scriei un program JavaScript care calculeaz i afieaz produsul primelor n
numere naturale. Utilizai un formular (X)HTML.
14.Scriei un program JavaScript care afieaz un numr, intervalul [0, 9] n
cuvinte. Utilizai un formular (X)HTML.
15.Scriei un program JavaScript care genereaz seria Ulam. Utilizai un formular
XHTML.
Indicaie. Seria Ulam se genereaz dup cum urmeaz: se pornete de la un numr
ntreg pozitiv(n) i se ajunge la 1 pe dou ci:
9 dac numrul este par, noul numr se obine ca rezultat al mpririi cu 2.
(exemplu: 8, 4, 2, 1).
9 dac numrul este impar, noul numr se obine cu formula: 3*n+1 (exemplu:
5, 16, 8, 4, 2, 1).
16.Simulai funcionarea urmtoarelor script-uri (vezi figura 8.104 i figura 8.105).
Figura 8.104
342
Figura 8.105
17.nlocuii liniile de cod (vezi figura 8.104).
onClick="document.form1.text1.Focus()"
prin:
onClick="document.form1.text1.blur()"
Precizai rezultatele execuiei noului script.
Vizitai site-urile
9 http://www.javascriptgate.com/
9 http://www.gatescript.com/
9 http://www.biblioscript.com/
9 http://www.w3schools.com/
9 http://www.siteexperts.com/
9 http://developer.irt.org/script/script.htm
9 http://www.wsabsract.com/cutpastejava.shtml
Conversaia 9
Obiectul Image
f
f
f
f
f
f
f
Obiectul Image. Aplicaii

Creai imagini reactive (client) cu JavaScript. Aplicaii
Tem
Obiectul Image
Ca urmare a popularitii lor, imaginile au ptruns n aproape toate domeniile
navigrii pe Web. De exemplu, n numeroase site-uri Web, butoanele (X)HTML au
fost nlocuite prin imagini clicabile (rollovere) care se transform atunci cnd
trecei mouse-ul pe deasupra acestora. Cu siguran c apreciai aceste
interesante efecte grafice dar ignorai poate faptul c puterea acestora se afl n
limbajul JavaScript.
n consecin, crearea unui site Web cu adevrat puternic presupune
cunoaterea facilitilor imaginilor (X)HTML i a obiectului Image al limbajului
JavaScript.
Fia obiectului Image este prezentat n figura 9.1.
344
Fia obiectului Image
Obiectul printe
Document
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.

Gestionarii de evenimente: 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 />

Figura 9.2
Obiectul Image poate fi accesat cu una din instruciunile prezentate mai jos:
9 document.images[0];
9 document.LUMINABLANDA.
Remarc. Dac dintr-un motiv sau altul nu ai putut da imaginilor dumneavoastr un nume valid
de variabil JavaScript, atunci accesul prin nume rmne posibil numai prin intermediul matricei
images, ca i n cazul matricei elements din obiectul Form. De exemplu, definiia imaginii:
<img name=PLOIESTI VEST src=gara.jpg /> este accesibil prin
utilizarea
matricei
images,
dup
cum
urmeaz:
var
gara=document.images[PLOIESTI VEST].
Constructorul Image()
345
Interpretorul JavaScript creeaz un obiect Image pentru fiecare tag <img> pe
care l ntlnete ntr-un document (X)HTML, dar atenie, chiar i
dumneavoastr l putei crea fr asocierea unui tag <img>, utiliznd
constructorul de obiecte Image() (vezi figura 9.3).
Figura 9.3
var imagine1=new Image();

Remarci
9 Instruciunea JavaScript din figura 9.3 genereaz un obiect Image fr a mai fi nevoie
de un tag <img>.
9 Putei ncrca un fiier imagine n obiectul Image atribuind n mod simplu o adres Web
proprietii src (figura 9.4).
Figura 9.4
...
imagine1.src=sigla.jpg
9 Dup ncrcarea acestei imagini, s-a creat un obiect Image care conine o imagine
(ncrcat), dar non vizibil n navigatorul Web.
9 Pentru ca o imagine s se afieze n navigatorul Web, ea trebuie s fie asociat n mod
obligatoriu unui tag <img> aflat n documentul (X)HTML; n caz contrar, navigatorul
Web ignor totul!
Iat cum folosim imagini fr a utiliza tag-ul <img> (vezi figura 9.5).
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
Figura 9.6
Valoare logic (true/false); true - imaginea a fost n ntregime

ncrcat; false imaginea nu a fost ncrcat n ntregime.
height
document.images[].complete
document.images[].height
Corespunde atributului height al tag-ului <img>.
346
width
Corespunde atributului width al tag-ului <img>.
hspace
Figura 9.6
document.images[].src
Corespunde atributului src al tag-ului <img>.
lowsrc
(continuare)
document.images[].name
Corespunde atributului name al tag-ului <img>.
src
document.images[].vspace
Corespunde atributului vspace al tag-ului <img>.
name
document.images[].hspace
Corespunde atributului hspace al tag-ului <img>.
vspace
document.images[].width
document.images[].lowsrc
Corespunde atributului lowsrc al tag-ului <img>.
Aplicaii
Precizai rezultatul execuiei urmtorului program JavaScript (figura 9.7).
Figura 9.7
n figura 9.8 este prezentat rezultatul execuiei programului JavaScript, pe care v rugm
s-l comentai.
347
Figura 9.8
Comentai urmtorul program JavaScript (figura 9.9).
Figura 9.9
Scriei un program JavaScript care afieaz proprietile unui obiect Image.
348
Figura 9.10
Comentarii:
9 Obiectul Document (tot ceea ce se gsete ntre tag-urile <body> i </body>) conine
imaginea cu numele sigla.jpg. La rndul su, aceast imagine conine proprietile:
src, name, height, width, border i complete. Aceast ierarhie
explic modul n care sunt accesate proprietile imaginii: document.test.src,
document.test.width etc.
9 Valorile proprietilor (src, name, height, width, border) sunt extrase din
definiia acestui obiect.
9 Valoarea true (vezi proprietatea complete) rezult din modul n care imaginea a
putut fi corect ncrcat n navigator. n caz contrar valoarea va fi false.

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.
Figura 9.11
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
extrag
unu/dou bee.
2. Stabilete
strategia
5. Permite reluarea jocului.

de
joc
calculatorului.
Figura 9.12
4. Stabilete ctigtorul (n final).
3. Actualizeaz numrul de bee rmase.
6. Stop.
350
Tabela de variabile
Variabile de stare
Variabile de ieire
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
Figura 9.13
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.
Figura 9.14 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
IF(se apasa butonul Joc Nou)
DO actualizare
ENDIF
IF(se executa click pe imagine chibrit)
DO alegeChibrit(numar_bat_chibrit)
ENDIF
IF1
IF1
IF2
IF2
10betechibrit
ACTUALIZARE
FOR1
Figura 9.15
END
BEGIN
bete=10
FOR(i=1;i<=bete;i++)
nsrc=chibrit+i
imagine_nsrc.src=chibrit.gif
ENDFOR
FOR1
ACTUALIZARE
END
AlegeChibrit
BEGIN
Date intrare: x-numarul batului de chibrit extras
//se verifica daca extragerea batului a fost
//din pozitia corecta
351
IF(x<=bete) AND (bete-x)<2
//se sterge imaginea betelor de chibrit extrase
FOR2
FOR(i=x;i<=bete;i++)
inlocuieste imaginea chibrit.jpg prin gol.jpg
FOR2
ENDFOR
//se actualizeaza numarul de bete ramase
bete=x-1;
//verifica numarul de bete ramase si
//stabileste castigatorul daca este cazul
IF4
IF(bete<=0)
WRITE "Jocul s-a terminat! Ai pierdut!"
IF4
ELSE
IF5
IF(bete==1)
//inlocuie imaginea primului bat de chibrit
chibrit1.src=gol.gif
bete=0
WRITE "Jocul s-a terminat!Ai Castigat!"
IF5
ELSE
WRITE "Calculatorul zice:\n Acum e randul meu");
//inteligenta calculatorului este aleatoare
rand=genereaza_numar_aleator
IF6
IF(rand<0.5)
x=bete
IF6
ELSE
x=bete-1
IF6
ENDIF
FOR3
FOR(i=x;i<=bete;i++)
nsrc='chibrit'+i
imaginea_nsrc.src="gol.gif"
FOR3
ENDFOR
bete=x-1
IF7
IF(bete==0)
WRITE "Jocul s-a terminat! Ai pierdut!"
IF7
ELSE
WRITE " Acum e randul tau!"
IF7
ENDIF
IF5
ENDIF
IF4
ENDIF
Figura 9.15 IF3
ENDIF
(continuare) Alegechibrit END
IF3

<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>
Figura 9.16
</body>
(continuare)
</html>
Remarci
9 Script-ul (inserat n seciunea <head> a documentului HTML) conine dou funcii:
AlegeChibrit(x) i actualizare().
9 Funcia AlegeChibrit(x) permite juctorului s extrag unul sau dou bee;
stabilete strategia de joc a calculatorului; actualizeaz numrul de bee rmase,
stabilete ctigtorul. Argumentul x ia valori de la 1 la 10.
9 Funcia actualizare() permite reluarea jocului la acionarea butonului Joc Nou.
9 Gestionarii de evenimente utilizai sunt: onMouseDown i onClick (tag-ul
<input />).
n figura 9.17, 9.18, 9.19 sunt prezentate secvene din timpul jocului.
354
Figura 9.17
Figura 9.18
355
Figura 9.19

Una din aplicaiile JavaScript de mare succes n domeniul imaginilor o constituie
crearea de rollovers (survols, n limba francez; rollovers, n limba
englez).
Un rollover este o imagine folosit n general pentru navigare al crui
aspect se modific atunci cnd se trece cu mouse-ul pe deasupra acesteia.
Remarci
9 Un rollover este o metod asociat unui eveniment de mouse: mouseOver,
mouseOut, mouseDown, mouseUp.
9 Exist mai multe tipuri de metode rollover:
metoda rollover pentru imagine;
metoda rollover strat (layer).
9 Va trebui s decidei singuri: ce tip de metod rollover necesit aplicaia
dumneavoastr i cum dorii s-o implementai.
Iat cum crem un buton IMAG1 care se afieaz normal la ncrcarea paginii i
se schimb n IMAG2 la trecerea mouse-ului pe deasupra acestuia.
1. Introducei ntre tag-urile <head> i </head> ale documentului
HTML, script-ul de prencrcare al imaginii (imag2.gif) utilizat n
rollover (figura 9.20).
356
Figura 9.20
2. Stabilii o legtur (link) ctre o imagine (figura 9.21).
Figura 9.21
3. Introducei (n tag-ul <a>) gestionarii de evenimente onMouseOver i
onMouseOut (figura 9.22).
Figura 9.22
4. Testai script-ul (figura 9.23, figura 9.24).
Figura 9.23
357
Figura 9.24
Remarci
9 Nu v lsai impresionai de dimensiunea codului JavaScript, deoarece este foarte
simplu!
9 Am definit im1 ca fiind un nou obiect Image cruia i atribuim calea imag2.gif.
9 La trecerea mouse-ului peste butonul IMAG1, proprietatea src a imaginii ce poart
numele img1 devine imag2.gif, care provoac efectul de rollover.
9 Dac dorii s aplicai un rollover peste mai multe imagini prezentate ntr-o pagin,
va trebui:
S adugai noi linii de prencrcare
im2=new Image;
im2.src=imag3.gif;
S schimbai numele imaginii respective:
<img src=imag1.gif border=0 name=img2>.
Aplicaii
Creai acelai rollover utiliznd matricea images.
n figura 9.25 este prezentat documentul HTML complet.
Figura 9.25
Rezultatele execuiei sunt prezentate n figura 9.26, respectiv figura 9.27.
358
Figura 9.26
Figura 9.27
Remarci
9 Exist i alte tehnici de a modifica imaginile, dup cum urmeaz:
afiarea unei borduri n jurul fiecrei imagini;
afiarea unei imagini n miniatur (de exemplu, o sgeat mic) alturi de imaginea
propriu-zis, unde se gsete pointer-ul mouse-ului.
9 Exist mai multe soluii de implementare a metodelor rollover pentru imagini, dar
cea mai simpl este urmtoarea:
creai matricea care s conin imagini;
prencrcai imaginile n matrice;
creai o funcie care s realizeze schimbarea imaginilor;
introducei gestionarii de evenimente onMouseOver i onMouseOut.
Scriei o funcie pentru a verifica dac o imagine este complet ncrcat.

Figura 9.28
Comentai urmtorul program JavaScript (figura 9.29).
359
Figura 9.29
n figura 9.30, respectiv figura 9.31 sunt prezentate rezultatele execuiei programului
JavaScript.
Figura 9.30
Figura 9.31
360
Iat cum crem un mic catalog ilustrat care conine ultimele trei cri ale autorului acestei
lucrri: (X)HTML, Dreamweaver MX, XML, care au aprut n Editura Universitii din
Ploieti. Pornind de la o list ordonat ale crei elemente conin titlurile celor trei cri, se
afieaz coperta nti a crii selectate trecnd cursorul pe deasupra unuia din cele trei
titluri de carte afiate (figura 9.32).
Figura 9.32
Documentul complet XHTML este prezentat n figura 9.33.
361
Figura 9.33
Remarci
9 Funcia carte(nume,numr) conine dou argumente: numele fiierului utilizat
(nume) i numrul imaginii (numr).
9 Pentru ca proporia imaginilor s fie respectat este necesar ca ele s aib aceleai
dimensiuni.
9 Afiarea imaginii (prima copert) se produce atunci cnd deplasai mouse-ul pe linia
unde se gsete numele crii i nu doar pe numele afiat al crii. Putei evita acest
lucru, modificnd puin codul JavaScript. Succes!
n figura 9.34 se prezint un document (X)HTML care ilustreaz tehnica
rollovers-urilor.
362
Figura 9.34
Atunci cnd se ncarc acest document se obine imaginea din figura 9.35.
Figura 9.35
n momentul n care plimbai mouse-ul (fr a executa clic) pe una din cele trei imagini
(figura 9.35) obinei ceea ce este ilustrat n figura 9.36.
363
Figura 9.36
Analizai documentul XHTML i rspundei la urmtoarele ntrebri:
9 Ce semnific notaia this.id?
9 Care este rolul gestionarilor de evenimente:
onClick=location=ldXHTML.htm
onClick=location=ldDREAMWEAVER.htm
onClick=location=ldXML.htm
9 Care sunt deficienele acestui document. Precizai cel puin dou!

Chiar dac rollover-ul este aplicaia cea mai folosit a imaginilor dinamice,
JavaScript poate fi de asemenea utilizat i pentru crearea animaiilor simple.
Pentru animaii mai complexe va trebui ns s folosii Java sau un soft dedicat,
ca de exemplu, Macromedia Flash.
Pentru a crea o animaie simpl cu JavaScript [3] se recomand parcurgerea
urmtoarelor etape:
9 salvai cadrele de animaie ntr-o matrice;
9 prencrcai imaginile (cadrele de animaie);
364
9 stabilii viteza de derulare a animaiei.
Pentru mai multe detalii privind crearea animaiilor simple JavaScript, consultai:
9 Michael Moncur, JavaScript 1.5 Nouvelle edition, Campus Press, 2003, pag.
227-234
9 Michael Dreyfus, Codes en Stock JavaScript, Ed. Campus Press, 2001
9 Micro Application, JavaScript Professionel, Paris, 2001
9 David Flanagan, JavaScript, La rfrence 4 dition, Ed. OReilly, 2002
9 Jean-Christophe Gigniac, Cdric Nilly, JavaScript, Micro Application 2002, Paris,
pag. 250 260
9 http://JavaScript.Internet.com/scrolls/animated-message.html
9 http://www.wsabstract.com/cutplastejava.shtml
9 http://hotvired.lycos.com/webmonkey/reference/ JavaScript_code_library
9 http://webopedia.Internet.com/TERM/J/JavaScript.html
9 http://Javascript.internet.com/message/animated-tooltip.html
9 http://Javascript.internet.com/page-details/delayed-gif.html
Creai imagini reactive (client) cu JavaScript

Imaginile reactive (imagemaps, n limba englez) reprezint un mijloc practic de
simplificare a navigrii ntr-un site Web.
Exist dou tipuri de imagini reactive: client i server.
Zonele (cu un anume contur geometric) unei imagini reactive client se definesc
direct n codul (X)HTML, fiecare dintre acestea jucnd rolul unui link. n
consecin, acest tip de imagine map poate fi combinat cu JavaScript. n cazul
unei imagini reactive server, zonele sunt definite ntr-un fiier dedicat care se afl
pe server.
Crearea unei imagini reactive (client) necesit urmtoarele resurse:
9 o imagine n format GIF sau JPEG;
9 un fiier (MAP) care conine zonele imaginii;
9 atributul USEMAP.
Remarci
9 Navigatoarele recente nu afieaz descrierea unei imagini reactive n bara de stare,
atunci cnd atributul href figureaz n link-uri. Dac utilizai imagini reactive ca link-uri,
putei folosi gestionarul de evenimente onClick cu location.href.
365
9 Pentru a descrie fiecare zon a imaginii reactive va trebui s cunoatei coordonatele
punctelor care le delimiteaz. Exist numeroase programe, printre care: MapEdit sau
LiveImage.
9 Zonele imaginii reactive sunt definite cu tag-urile (X)HTML: <map> i <area>.
Iat cum procedm pentru a crea cu limbajul JavaScript o imagine reactiv client,
pornind de la imaginea follow.jpg. n momentul n care plasai mouse-ul
deasupra zonei reactive de form dreptunghiular decupate n imaginea
follow.jpg, n bara de stare se va afia mesajul: ZIUA N CARE VIN

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

(?) cu numele pe care l-ai atribuit imaginii map (figura 9.38).
Figura 9.38
4. Introducei, n tag-ul <area>
atributele shape,
target i
coords (figura 9.39).
Figura 9.39
5. Introducei n tag-ul <area> gestionarul de evenimente asociat
onMouseOver care afieaz n bara de stare mesajul: ZIUA N CARE

VIN PETII.
366
Figura 9.40
6. Introducei tag-ul final </map> (figura 9.41).
Figura 9.41
7. Validai documentul HTML 4 strict cu aplicaia validator.

8. Inserai codul HTML care afieaz icon-ul de conformitate W3C.
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>
function trunchiaza(x)
{
var s=""+x;
i=s.indexOf(".");
if(i!=-1){
}
return
s;
Figura 9.44
}
369
var rVal = false;
if(isNaN(x))
alert("Valoare gresita pentru cantitate!");
else
if (x < min)
else if (x> max)
else
rVal = true;
return rVal;
}
a=new Array(3);
a[0]=new Array(5);
a[1]=new Array(5);
a[2]=new Array(5);
for(i=0;i<3;i++)
for(j=0;j<5;j++)
a[i][j]=0.0;
var RezWindow=null;
function trimite(){
}
function afispartial(rez){
var i,j,k;
//CALCUL TOTAL LIVRARI
s=0.0;
for(j=0;j<5;j++)
s+=a[rez][j]
//CALCUL MEDIE PE ZI
med=s/5;
//CALCUL MAX SI MIN
max=a[rez][0];
min=a[rez][0];
jmax=0;jmin=0;
for(j=0;j<5;j++){
if(max<a[rez][j]){max=a[rez][j];jmax=j;}
if(min>a[rez][j]){min=a[rez][j];jmin=j;}
}
//AFISARE REZULTATE
if(RezWindow!=null)RezWindow.close();
RezWindow=window.open('','', 'toolbar=yes,scrollbars=yes,menubar=no,
width=500,height=350');
k=rez+1;
RezWindow.document.writeln("<center><p><b>SITUATIA LIVRARILOR REZERVOR
R"+k+"</B></p></center>");
Figura 9.44
RezWindow.document.writeln("<center><table border=1 bgcolor=#efefff><tr>");
(continuare)
RezWindow.document.writeln("<td><b>ZIUA</b><td><b>REZERVOR R"+k+"</b></td></tr>");
370
for(i=0;i<5;i++) {
RezWindow.document.writeln("<tr><td>" + Z[i]+"</td>");
RezWindow.document.writeln("<td>" + a[rez][i]+ "</td></tr>");
}
RezWindow.document.writeln("</table></center><p><p>");
RezWindow.document.writeln("<p><font color=green size=+1>Total Livrari:"+s+"</font>");
RezWindow.document.writeln("<br><font color=green size=+1>Media Zilnica:" +
trunchiaza(med) + "</font>");
RezWindow.document.writeln("<br><font color=green>Livrarea maxima:"+max+" s-a facut in
ziua de "+Z[jmax]+"</font>");
RezWindow.document.writeln("<br><font color=green>Livrarea minima:"+min+" s-a facut in ziua
de "+Z[jmin]+"</font>");
RezWindow.document.writeln("</html>");
}
// -->
</script>
</head>
<body>
<center>
<form name="f1"><table border=0>
</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">
Figura 9.44 onMouseOver="self.status='Rezervorul R2';return true"
(continuare) onMouseOut="self.status='';return true">
371
onMouseOut="window.status='';return true">
</map>
<img src="rezervoare.jpg" align="top" usemap="#rezervorMap">
Figura 9.44
</body>
(continuare)
</html>
Remarci
9 Script-ul (inserat n seciunea <head> a documentului (X)HTML) conine funciile
cunoscute din exemplele anterioare.
9 Pentru crearea celor trei imagini reactive, corespunztoare rezervoarelor R1, R2, R3 s-a
folosit imaginea rezervoare.jpg; zonele imaginilor reactive (R1, R2, R3) au fost
definite cu tag-urile (X)HTML <map> i <area>. n toate cele trei tag-uri <area> au
fost definite atributele: name, coords, href i gestionarii de evenimente
onMouseOver i onMouseOut.
9 Tag-ul <img> conine n mod obligatoriu usemap=#rezervorMap.
n continuare, v invitm s testai script-ul, plasnd mouse-ul i executnd clic deasupra

fiecrei zone reactive R1, R2, R3. Analizai rezultatele execuiei programului (figura 9.45,
figura 9.46, figura 9.47).
Figura 9.45
372
Figura 9.46
Figura 9.47
373
Aplicaie
Realizai o pagin Web care conine o hart interactiv a Europei. Atunci cnd
utilizatorul plimb mouse-ul (fr a executa clic) pe una din rile Europei se vor afia
pentru ara respectiv, ntr-un formular, urmtoarele informaii: ara, capitala, populaia,
suprafaa, moneda (figura. 9.48).
Figura 9.48
Indicaii:
9 Limitai (nu din motive politice!) numrul rilor la cel mult 12.
9 Utilizai tag-ul <area> cu atributele: coords, shape, href (vezi figura 8.49) i
cu gestionarii de documente: onMouseOver i onMouseOut.
Figura 9.49
9 Formularul nu conine nici un buton ci numai zone (5) de tip text pentru afiarea
informaiilor privind rile Europei. Aceste informaii sunt coninute n script, mai precis n
12 matrice cu urmtoarele elemente: numele rii, capitala, populaia, suprafaa,
moneda (vezi figura 9.50). Script-ul conine de asemenea i funcia afieaz().
374
Figura 9.50
JavaScript
Tem
Testai-v cunotinele
1. Ce reprezint obiectul Image?
2. Care sunt proprietile i metodele obiectului Image?
3. Care sunt gestionarii de evenimente ai obiectului Image?
4. Cum creai o instan a unui obiect Image?
5. Ce este un rollover?
6. Care sunt resursele necesare pentru crearea unei imagini reactive client?
7. Poate fi plasat un rollover ntr-o imagine reactiv?
8. n figura 9.51 se prezint un document HTML care conine titlul: Ziua n care
vin petii.
375
Figura 9.51
Atunci cnd se ncarc acest document HTML se obine ceea ce este ilustrat n
figura 9.52.
Figura 9.52
n momentul n care plimbai mouse-ul (fr a executa clic) pe titlul afiat n
pagina Web se obine ceea ce este ilustrat n figura 9.53.
Figura 9.53
Ce semnific:
9 onMouseOver=peste(follow.jpg)
9 document.images[0].src=nume.
Perfecionai acest mic program dup cum urmeaz (figura 9.54).
376
Figura 9.54
Precizai care este rolul gestionarului de evenimente onMouseOut pe care
l-am introdus n tag-ul <h1>.
9. Care este obiectul JavaScript care reprezint a doua imagine din cadrul unei
pagini Web:
image[2];
images[2];
images[1].
10.Animaiile JavaScript par a fi puin simpliste! Pot fi create n JavaScript
animaii mai complexe?
Vizitai site-urile
9 http://Javascript.internet.com/games/terablox.htm;
9 http://JavaScript.Internet.com
9 http://www.geoticies.com/Silicon Valley/7116/
9 http://www.serve.com/hotsyte/
9 http://Javascript.internet.com/page-details/delayed-gif.html
9 http://Javascript.internet.com/bgeffects/mouse-fireworks.html
9 http://Javascript.internet.com/messages/elastic-bullets.html
9 http://Javascript.internet.com/miscellaneous/image-slideshow.html
9 http://Javascript.internet.com/navigation/thumbmail-navigator.html
9 http://Javascript.internet.com/miscellaneous/kitykitys--photo-album.html
9 http://www.kitykity.com/photoalbum
9 http://Javascript.internet.com/scrolls/animated-message.html
9 http://Javascript.internet.com/bgeffects/persistent-layer.html
9 http://Javascript.internet.com/navigation/over-line-text-link.html
9 http://www.webwizguide.info/directory/directory/asp?cat=java&PagePosition=1
Conversaia 10
Obiectele Frame i Layer

f
f
f
f
f
Obiectele Frame
Obiectul Layer. Aplicaii
Tem
Obiectele Frame
Cea mai mare parte a navigatoarelor actuale (n particular, navigatoarele recente
Netscape i Microsoft) recunosc cadrele (frames, n limba englez) care permit
divizarea paginii Web n mai multe zone. n fiecare zon a paginii se poate afia
un document (X)HTML sau rezultatul unui script.
Decizia de a utiliza cadre v aparine!
Indiferent dac apreciai sau nu cadrele, site-urile Web bazate pe cadre exist i
vor mai exista. Din punct de vedere al programatorului JavaScript, este la fel de
uor s lucrezi pe un site care conine cadre sau s lucrezi pe un site fr cadre.
Atunci cnd o fereastr conine mai multe cadre, fiecare dintre ele este
reprezentat n JavaScript printr-un obiect Frame.
Acest obiect este echivalent cu un obiect Window atta timp ct el servete la
manipularea cadrelor i nu a ferestrelor. Numele obiectului Frame este acelai
cu cel pe care l afectai atributului name al tag-ului <frame>.
378
Remarci:
9 Cuvintele cheie window i self permit referirea la cadrul curent.
9 Cuvntul cheie parent permite referirea la fereastra de nivel superior (cel mai des,
fereastra principal).
9 Fiecare din obiectele Frame ale unei ferestre este un fiu al obiectului printe Window.
Documentul (X)HTML din figura 10.1 mparte fereastra n patru zone. Dac ai
inserat un script JavaScript n documentul stngasus.htm, el va face referire
la
documentele
care
aparin
altor
cadre:
parent.dreaptasus,
parent.stngajos etc. Cuvintele cheie window i self vor face referire la

nsui cadrul stngasus.
Figura 10.1
Remarc. Dac utilizai cadre situate n interiorul altor cadre (imbricate) lucrurile se complic
puin: window reprezint ntotdeauna cadrul curent, parent reprezint setul de cadre
(frameset) care conine cadrul curent, iar top reprezint setul de cadre principal care le
conine pe celelalte.
Matricea frames
Matricea frames conine un obiect Window pentru fiecare cadru al paginii
Web (vezi figura 10.2).

n loc s v referii la cadrele unui document prin numele lor, utilizai matricea
frames.
Aceast matrice stocheaz informaiile pentru fiecare din cadrele unui document.
Numrul de indice (index) al cadrelor ncepe ntotdeauna cu zero i cu primul tag
<frame> al setului de cadre al documentului.

Iat cum putei referi cadrele din figura 10.1 cu ajutorul matricii frames, (vezi
figura 10.2).
379
Figura 10.2
Remarci:
9 Putei folosi oricare din cele dou metode de acces la elementele matricii frames (prin
numrul de index/prin nume).
9 Dac documentul dumneavoastr conine de exemplu 13 cadre, fr ndoial este mult
mai simplu s utilizai matricea frames. Dac ns, documentul conine dect dou
cadre, evident este mult mai bine s utilizai numele cadrelor.
Iat cum creai un cadru de navigare (vezi figura 10.3) care s permit
modificarea coninutului unui alt cadru.
(X)HTML
Dreamweaver MX
XML
Figura 10.3
JavaScript
1. Creai un document (X)HTML care divizeaz fereastra n dou cadre
(figura 10.4).
Figura 10.4
Remarci:
9 Programul din figura 10.4 creeaz dou cadre (la stnga i la dreapta ferestrei).
9 Tag-urile <body> sunt nlocuite cu tag-urile <frameset>.
2. Creai documentul (X)HTML pentru cadrul din stnga, care va servi

pentru navigarea n site (figura 10.5).
380
Figura 10.5
Remarci:
9 Gestionarii de evenimente onClick se repet (cu mici modificri) pentru fiecare din
cele patru link-uri (vezi tag-urile <a>).
9 Gestionarii de evenimente onClick sunt declanai prin evenimentul click, care
afieaz un document n cadrul din dreapta.
9 Deoarece script-ul se gsete (el nsui) ntr-un cadru, numele celuilalt cadru trebuie s
fie precedat de cuvntul cheie parent.
9 Fiecare din obiectele frame ale unei ferestre este un fiu al obiectului printe Window.
9 Cuvintele cheie window i self permit referirea cadrului curent.
9 Cuvntul cheie parent permite referirea la fereastra de nivel superior (de regul
fereastra principal).
9 Utilizarea limbajului JavaScript permite modificarea simultan a coninutului mai multor
cadre.
3. Testai script-ul.
3.1 Salvai documentul XHTML al cadrului de navigare sub numele
stnga.html.
3.2 Deschidei n browser documentul HTML care divizeaz fereastra
n dou cadre (vezi figura 10.6).
381
Figura 10.6
3.3 Testai link-urile din cadrul din stnga.

n figura 10.7 se prezint rezultatul execuiei script-ului n navigatorul Internet
Explorer.
Figura 10.7

conversaia
precedent
(EXEMPLUL
JAVASCRIPT),
cu
singura
deosebire
(important!) c pentru afiarea rezultatelor vom folosi obiectele Frame (Rezultatele vor
fi afiate ntr-un cadru inserat n documentul curent i nu ntr-o fereastr distinct).
382
Introducerea valorilor pentru livrri se face printr-o singur zon de text (vezi EXEMPLUL
9 JavaScript, Varianta 2). Selecia rezervorului i a zilei se fac printr-o list de selectare.
n figura 10.8 este prezentat ecranul (intrare/ieire) cu RAPORT LIVRRI REZERVOR
R1. Tabela de variabile este prezentat n figura 10.9.
Figura 10.8
Tabela de variabile
Figura 10.9
Variabile de stare
Variabile de ieire
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
383
Pseudocodul pentru EXEMPLUL 10.1 JAVASCRIPT este prezentat n figura 10.10.
Pseudocodul
EXEMPLUL10.1
FORI
FORJ
FORJ
FORI
IFL
IFL
IFA
IFA
IFV
IFV
EXEMPLUL10.1
AFISPARTIAL
FORS
FORS
FORMAXMIN
IFMAX
IFMAX
IFMIN
IFMIN
FORMAXMIN
FORRAP
Figura 10.10
FORRAP
BEGIN
z=luni,marti,miercuri,joi, vineri
//aloca spatiu de memorie si initializeaza matricea livrarilor
FOR(i=0;i<3;i++)
FOR(j=0;j<5;j++)
ai,j=0.0
ENDFOR
ENDFOR
Afiseaza pagina ce contine frame-uri
DO livreaza
ENDIF
//raspunde la evenimentele generate de zonele reactive
IF(se executa click pe zona unui rezervor)
DO afispartial(rezervor)
ENDIF
ENDIF
END
BEGIN
Date intrare:
rez-indicele rezervorului
// calculeaza total livrari
s=0
FOR(j=0;j<5;j++)
s=s+arez,j
ENDFOR
med=s/5
max=arez,0
min=arez,0
jmax=0
jmin=0
FOR(j=0;j<5;j++)
IF(max<arez,j)
max=arez,j
jmax=j
ENDIF
IF(min>ai,j)
min=arez,j
jmin=j
ENDIF
ENDFOR
//afisare rezultate
//scrierea rezultatelor in frame-ul report
k=rez+1
raport.WRITE "SITUATIA REZERVORULUI R"+k
raport.WRITE "ZIUA R"+k
FOR(j=0;j<5;j++)
raport.WRITE zi, arez,j
ENDFOR
384
raport.WRITE "Total livrari: ",s
raport.WRITE "Media: ",s
raport.WRITE "Livrarea maxima: ",max,Zjmax
raport.WRITE "Livrarea minima: ",min,Zjmin
Figura 10.10
(continuare) AFISPARTIAL END

<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">
Figura 10.11
</frameset>
(continuare)
</html>
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>
Figura 10.11
(continuare) </center>
</html>
387
//SITUATIE.HTML
<html>
<body>
<center>
<h3>
Afiseaza Livrari pentru Rezervoarele:
</h3>
<map name="rezervorMap">
<area name="R1" coords="16,18,91,125" href="javascript:parent.afispartial(0)"
onMouseOver="self.status='Rezervorul R2';return true"
onMouseOut="self.status=' ';return true">
</map>
<img src="rezervoare.jpg" align="top" usemap="#rezervorMap">
Figura 10.11
</body>
(continuare)
</html>
Vizualizai documentul ntr-un browser i testai script-ul (vezi EXEMPLUL 9
JAVASCRIPT). n figura 10.12 se prezint rezultatele execuiei programului JavaScript
pentru un set de date (Rezervorul 1).
Figura 10.12
388
Obiectul Layer
Obiectul Layer este un fiu al obiectului Document.
Obiectul Layer permite limbajului JavaScript s acceseze straturile n interiorul
documentelor.
Remarc. Pentru mai multe informaii privind straturile i modul n care acestea funcioneaz n
browser, consultai lucrrile:
9 Liviu Dumitracu, Dreamweaver MX, Editura Universitii din Ploieti, 2003.
9 Richard Wagner, R.Allen Wyke, JavaScript, Editura Teora, Traducere Cora Rdulescu i Dan
Pavelescu, 2002.
Fia obiectului Layer este prezentat n figura 10.13.

Fia obiectului Layer
Obiectul printe
Document
Proprieti
above, background, bellow, bgColor,

clip.bottom, clip.height, clip.left,
clip.right,
clip.top,
clip.width,
document, left, name, pageX, pageY,
parentLayer,
siblingAbove,
siblingBellow, src, top, visibility,
window, zIndex
load(),
moveAbove(),
moveBellow(),
moveBy(), moveTo(), moveToAbsolute(),
releaseEvents(),
resizeBy(),
resizeTo(), routeEvent()
-
Metode
Matricea Layers[]
Matricea layers[]
(document.layers[]) conine setul de straturi
(layers, n limba englez) reprezentate n pagina (X)HTML prin tag-urile <div>

sau <layer>.
Matricea layers[] este recunoscut numai de browser-ul Netscape.
Remarci:
9 n Netscape putei accesa proprietile unui strat cu ajutorul matricii layers[].
Numele stratului poate fi specificat prin atributul id sau name ale tag-ului div.
9 n Netscape putei accesa proprietile unui strat imediat dup instruciunea
document.layers[numestrat].
Matricea all[]
Matricea all[]
conine setul de straturi ale unui document (X)HTML
recunoscute de Internet Explorer. Valoarea pe care o transferai pentru a
389
specifica stratul pe care dorii s l accesai nu este pstrat n atributul name al
tag-ului <div> ci n atributul <id> al aceluiai tag.
Remarc. n Internet Explorer putei accesa proprietile unui strat prin intermediul matricii
style, ceea ce nseamn c sintaxa pe care o vei folosi va fi:
document.all[numestrat].style.
Corespondena
ntre
atributele
HTML
ale
straturilor
proprietile JavaScript
Un layer este un obiect plan rectangular care conine mai multe proprieti:
dimensiuni, culoare, coninut i vizibilitate. O pagin Web poate conine mai
multe straturi care se pot suprapune precum straturile, parial sau total.
Straturile sunt de regul obiecte statice, dar ele pot fi modificate i deplasate cu
ajutorul unui script. Natural, limbajul de script ales de Netscape este JavaScript
ntruct el este creatorul limbajului.
Remarci:
9 Straturile au fost implementate de Netscape ncepnd cu versiunea 4 a browser-ului
Netscape Navigator.
9 Pentru gestiunea straturilor, Netscape a creat trei noi tag-uri: <LAYER> ...
</LAYER>; <ILAYER> ... </ILAYER> i <NOLAYER> ... </NOLAYER>.
Cel mai important este de departe primul tag. Al doilea este o form inline iar cel de-al
treilea joac acelai rol n raport cu elementul LAYER ca NOFRAMES n raport cu
FRAMESET.
Elementul LAYER conine 13 proprieti, dintre care cea mai mare parte au
valori implicite. nainte de a trece la corespondena: atribute HTML
proprieti JavaScript vom prezenta un exemplu de declarare a unui

strat (figura 10.14).
Figura 10.14
390
n figura 10.15 este prezentat stratul afiat de Netscape.
Figura 10.15
Pentru a putea modifica atributele elementului LAYER n vederea dinamizrii

unei pagini Web va trebui s cunoatem corespondena dintre atributele HTML
ale straturilor i proprietile JavaScript (vezi figura 10.16).
Atribut HTML
Proprieti JavaScript
NAME
name
Numele stratului (identic cu id). Nemodificabil.
ID
Numele stratului (identic cu name). Nemodificabil.
LEFT
zindex
Ordinea z a stratului n raport cu fiii si.
VISIBILITY
Figura 10.16
pagey
Coordonata Y a stratului fa de document.
Z-INDEX
pagex
Coordonata X a stratului fa de document.
PAGEY
top
Coordonata Y a stratului.
PAGEX
left
Coordonata X a stratului.
TOP
id
visibility
Starea de vizibilitate a stratului.
391
BACKGROUND
background
Imaginea de fundal a stratului.
BGCOLOR
bgColor
Culoarea de fundal a stratului.
PARENTLAYER
parentLayer
Numele obiectului care conine stratul curent.
SRC
src
URL-ul fiierului care reprezint coninutul stratului.

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

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

ecranului.
392
moveToAbsolute() document.layers[].moveToAbsolute()
Modific poziia stratului n pagin, conform coordonatelor specificate n

pixeli.
releaseEvents()
Stabilete ca stratul s elibereze evenimentele capturate de tipul specificat.
resizeBy()

(continuare)
document.layers[].resizeBy()
Redimensioneaz stratul cu valorile de nlime i lime specificate.
routeEvent()
Figura 10.17
document.layers[].releaseEvents()
document.layers[].routeEvent()
Transfer un eveniment capturat prin ierarhia normal a evenimentelor.
Aplicaie
Analizai documentul XHTML din figura 10.18 n care s-a inserat un script care conine
metoda moveBy().
Figura 10.18
n figura 10.19 este prezentat rezultatul execuiei programului JavaScript n

navigatorul Netscape.
393
Figura 10.19
Figura 10.19
(continuare)
394
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
Variabile de stare
Variabile de ieire
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
Figura 10.21
Pseudocodul pentru EXEMPLUL 10.2 JAVASCRIPT este prezentat n figura 10.22.
Pseudocodul
EXEMPLUL10.2 BEGIN
FORI
FORJ
FORJ
FORI
IFL
IFL
IFAFIS
IFAFIS
IFVALID

//initializeaza matricea livrarilor
FOR(i=0;i<3;i++)
FOR(j=0;j<5;j++)
ai,j=0.0
ENDFOR
ENDFOR
Afiseaza pagina ce contine layer R2
DO livreaza
ENDIF
//raspunde la evenimentele generate zonele reactive
IF(cursor mouse pe zona unui rezervor)
DO afispartial(rezervor)
ENDIF
ENDIF
IFVALID
EXEMPLUL10.2 END
AFISPARTIAL
BEGIN
FORS
Figura 10.22
FORS
Date intrare:
rez-indicele rezervorului
// calculeaza total livrari
s=0
FOR(j=0;j<5;j++)
s=s+arez,j
ENDFOR
396
med=s/5
max=arez,0
min=arez,0
jmax=0
jmin=0
FOR(j=0;j<5;j++)
IF(max<arez,j)
max=arez,j
jmax=j
ENDIF
IF(min>ai,j)
min=arez,j
jmin=j
ENDIF
ENDFOR
//afisare rezultate
//depune rezultate in zonele din layerul R1
k=rez+1
f2.rnume.value="R"+k;
f2.Z1.value=a[rez][0];
f2.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];
FORMAXMIN
IFMAX
IFMAX
IFMIN
IFMIN
FORMAXMIN
AFISPARTIAL
ARATA
ARATA
Figura 10.22
ASCUNDE
(continuare) ASCUNDE
END
//Afiseaza layerul cu rezultate
BEGIN
R1.style.visibility = "visible"
END
// Ascunde layerul cu rezultate
BEGIN
R1.style.visibility = "hidden"
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();"
Figura 10.23
onMouseOut="ascunde();">Rezervor
R3
(continuare)
399
</tr>
</table>
<div id="r1" style="position: absolute;top: 120px;z-index: 2; visibility: hidden; top:190; left:
120px;">
<form name = "f2">
<center><p><b>SITUATIA LIVRARILOR REZERVOR
<input type="text" name="rnume" size="2"></b></p></center>
<center><table border=1 bgcolor=#efefff><tr>
<td><b>ZIUA</b><td><b>Livrare</b></td></tr>
<tr><td>Luni</td><td><input type="text" name="Z1" size="7" value="0.0"></td></tr>
<tr><td>Marti</td><td><input type="text" name="Z2" size="7" value="0.0"></td></tr>
<tr><td>Miercuri</td><td><input type="text" name="Z3" size="7" value="0.0"></td></tr>
<tr><td>Joi</td><td><input type="text" name="Z4" size="7" value="0.0"></td></tr>
<tr><td>Vineri</td><td><input type="text" name="Z5" size="7" value="0.0"></td></tr>
</table></center><p><p>
<center>
<table bgcolor=#efefff>
<tr><td><font color=green size=+1>Total Livrari</font><td><input type="text" name="Tot"
size="7" value="0.0"><tr>
<tr><td><font color=green size=+1>Media Zilnica</font><td><input type="text" name="Med"
size="7" value="0.0"> </table>
<table bgcolor=#efefff>
<tr><td><font color=green>Livrarea maxima:</font><td> <input type="text" name="emax"
size="7" value="0.0"> <td> <input type="text" name="zmax" size="7" value="Luni">
<tr><td><font color=green>Livrarea minima:</font> <td><input type="text" name="emin"
size="7" value="0.0"> <td> <input type="text" name="zmin" size="7" value="Luni">
</table>
</form>
</div>
Figura 10.23
</body>
(continuare)
</html>
Vizualizai documentul ntr-un browser i testai script-ul numai n Internet
Explorer. Se introduc livrrile; se poziioneaz mouse-ul deasupra legturii:
Rezervor R1/ Rezervor R2/ Rezervor R3.
n figura 10.24 se prezint rezultatele execuiei programului JavaScript pentru un
set de date.
400
Figura 10.24
401
JavaScript
Tem
Testai-v cunotinele
1. Cnd utilizai obiectele Frame?
2. Care este rolul obiectului Layer?
3. Care sunt proprietile obiectului Layer?
4. Care sunt metodele obiectului Layer?
Vizitai site-urile
9 http://Javascript.internet.com/messages/description-layer.htm;
9 http://Javascript.internet.com/bgeffects/floating-transparent-slideshow.html
9 http://Javascript.internet.com/bgeffects/write-layer.html
9 http://www.dannyg.com/examples/ol2/index.htm
9 http://www.dannyg.com/examples/dh2/index.htm
Conversaia 11
Depanarea aplicaiilor JavaScript
f
f
f
f
f
Tipuri de erori JavaScript. Aplicaii

Instrumente pentru depanarea script-urilor. Aplicaii
Instruciunile throw i try catch. Aplicaii
Tem
Evitai erorile frecvente JavaScript

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

Fiecare dintre noi poate comite erori particulare la scrierea unui program
JavaScript, dar foarte multe dintre acestea sunt curente.
404
Erorile JavaScript sunt identificate de browser la ncrcarea paginii Web. Ele pot
fi clasificate n urmtoarele categorii:
9 erori de sintax;
9 erori de logic;
9 erori generate de incompatibilitatea ntre navigatoare.
Erori de sintax
Erorile de sintax JavaScript sunt erorile cele mai frecvente i cele mai uor de
corectat. De cele mai multe ori, interpretorul JavaScript identific corect sursa
erorilor n programele pe care le-ai realizat, dar sunt i cazuri cnd lucrurile
nu stau chiar aa!
n general, erorile de sintax provin din:
9 greeli de tastare
confuzia ntre majuscule i minuscule;
inversarea literelor;
9 greeli de punctuaie
tag-uri i paranteze orfeline;
ghilimele i apostrofuri plasate greit;
9 greeli de plasare a instruciunilor JavaScript
9 confuzia ntre irurile de caractere i numere
numerele sunt tratate ca iruri de caractere;
irurile de caractere sunt tratate ca numere.
Aplicaie
Urmtoarele script-uri conin erori de sintax, dup cum urmeaz:
9 greeli de tastare, greeli de punctuaie
figura 11.1, figura 11.2, figura 11.3, figura 11.4, figura 11.5, figura 11.6,
figura 11.7, figura 11.8, figura 11.9
9 greeli de plasare a instruciunilor JavaScript
figura 11.10, figura 11.11, figura 11.12, figura 11.13, figura 11.14
9 greeli de tratare a irurilor de caractere i a numerelor
figura 11.15, figura 11.16, figura 11.17
405
Identificai i corectai erorile de sintax din toate aceste script-uri.
<script>
Figura 11.1
document.write (<font size=+5>);

document.write (La revedere!
x=8 y=3 z=120;
document.write (La revedere!+<br>);
</script>
<script>
Figura 11.2
DOCUMENT.write (S nu uitai s fii fericii!);

Document.Write (S nu uitai s fii fericii!);
Document.WRITE (S nu uitai s fii fericii!);
</script>
<script>
Salut=ir;
Figura 11.3 var Salut=ir_1;
</script>
<script>
Figura 11.4
onClick=alert(calculeaz);
onClick=alert(Afieaz);
</script>
<script>
Figura 11.5
a=new Array;
b=Array(5);
c=[2,5,7;
</script>
<script>
Figura 11.6
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);
406
<script>
if (c=3)
Figura 11.7
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>
Figura 11.8
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)
Figura 11.9
}
</script>
<script>
Figura 11.10
for (var i=0, i<13, ++i)

alert (La muli ani frumoi!);
for {
} while (var i=0; i<13; ++i)
for (i=0; i<7);
++i;
</script>
<script>
s=O; //iniializare cu litera O!
for (i=0; i<=10; i++) {
s=s+i;
Figura 11.11 }
</script>
407
<script>
s=0;
for (i=0; I<=10; i++) {
s=s+i;
}
Figura 11.12 </script>
<script>
for (i=0; i<=10; i++) {
p_2=i*i;
p_3=i*i*i;
document.write (p_2);
document.write (p_3);
Figura 11.13
<script>
Figura 11.14
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>
Figura 11.15 </body>
</html>
<html>
<head>
<title> aplicaie </title>
<script>
function test (valoare) {
alert (Valoare)
}
</script>
function adunare (unu, doi) {
return unu+doi
}
</head>
</html>
408
<script>
function TVA (valoare) {
return valoare*0.19
}
</script>
</head>
<body>
<form>
<input type=button value=calcul TVA
onClick=alert (TVA:+TVA(treisprezece))>
</form>
</html>
Erori de logic
Erorile de logic se genereaz atunci cnd nu se obin rezultatele scontate! Dei
codul surs JavaScript este corect din punct de vedere sintactic, dei nu sunt
generate erori n timpul execuiei programului (apeluri de funcii incorecte;
atribuiri de valori pentru variabile nedeclarate; imposibiliti aritmetice mprire
la zero etc.), totui programul conine erori de logic (semantice)!
Identificarea erorilor de logic constituie o piatr grea de ncercare pentru
nceptori, dar nu trebuie s disperai!
Foarte multe erori de logic sunt generate de o analiz superficial a aplicaiei, o
proiectare defectuoas a programului JavaScript, i ca urmare de un cod surs
JavaScript incorect!
Aplicaie
Identificai i corectai erorile de logic din urmtoarele script-uri (vezi figurile 11.18,
11.19, 11.20, 11.21).
<script>
stud=parseInt (prompt(Introducei numrul de studeni, 0));
teste=parseInt (prompt(Introducei numrul de teste, 0));
for (i=1; i<=stud; i++) {
nt=0;
media=0;
for (j=1; j<=teste; j++) {
nota=parseInt (rezultate[i][j]);
if(nota) {
media+=nota;
}
}
media=media/nt;
Figura 11.18 media=Math.flor(media*100)/100;
}
409
Remarci:
9 Aplicaia ilustreaz o eroare generat n timpul execuiei script-ului, datorat de o

mprire la zero:
media=media/nt
unde, nt=0.
9 Corectai eroarea, introducnd n instruciunea if, instruciunea nt++ (figura 11.19).
nt=0;
media=0;
for (j=1; j<=teste; j++){
nota=parseInt (rezultate [i][j]) ;
if nota {
media+=nota;
nt++;
}
}
Figura 11.19 media=media/nt;
}
<script>
//Conversatia 3
function rotunjeste (x) {
}
//Calculul mediilor pe zile
//Calculul mediilor pe rezervoare
d=new Array (4);
st=0;
for (i=0; i<3; i++) {
s=0;
for (j=0; j<5; j++) {
s=s+a[i][j];
st=st+a[i][j];
}
d[i]=s/5;
}
Figura 11.20
d[3]=st/14;
Remarci:
9 Eroarea de logic provine de la numitorul fraciei, din enunul de atribuire

d[3]=st/14;
9 Enunul trebuie corectat, dup cum urmeaz:

d[3]=st/15;
9 De ce 15? Rspunsul este simplu: 5 zile (luni, mari, miercuri, joi, vineri) * 3 rezervoare
(R1, R2, R3), (vezi Conversaia 3).
<script>
Figura 11.21
var Constant=13;
i=7;
for (i<=7; i>0; i--) {
document.write (i+++Constant+=+
(i+Constant)+<br>);
}
</script>
410
Remarci:
9 Rezultatele afiate (vezi figura 11.22) sunt incorecte, chiar dac execuia s-a ncheiat
fr incidente.
Figura 11.22
9 JavaScript evalueaz rezultatul expresiei (i+Constant) ca ir i concateneaz cei doi
operanzi.
Erori generate de incompatibilitatea ntre navigatoare

Nimic nu este mai neplcut dect s constai c dup ce ai reuit s creezi (cu
efort!) script-uri pe care le consideri nemaipomenite, s primeti ntr-o bun zi un
mesaj din partea unui vizitator care s-i semnaleze faptul c script-urile tale nu
merg cu navigatorul acelui vizitator.
Nu uitai c exist un turn Babel al navigatoarelor!
Morala:
9 testai script-urile dumneavoastr cu mai multe browser-e, nainte de a
le plasa pe server-ul Web;
9 consultai manualele de utilizare a celor mai importante browser-e:
http://developer.netscape.com/docs/manuals/jsref/
http://msdn.microsoft.com/scripting/jsscripting/jsscript/ default.htm
9 detectai tipul de navigator utilizat de ctre vizitatorii dumneavoastr.
411
n vremurile mai de demult programatorii ncepeau depanarea prin a desena
scheme logice complicate pentru a urmri secvenial, logica programului.
n prezent, schemele logice au fost nlocuite cu pseudocodul, care este o
combinaie de JavaScript i limbaj natural structurat. Acest mod de descriere a
unui algoritm s-a dovedit a fi indispensabil atunci cnd dorii s localizai zona n
care ar putea fi eroarea generat.
Utilizai comentariile
Pentru a v crea primele reflexe JavaScript inserai ct mai multe comentarii n
script-urile dumneavoastr.
Observaie. Comentariile JavaScript (// sau /* i */) au fost prezentate n Conversaia 2).
Pentru a elimina anumite poriuni din codul JavaScript (pn la eliminarea

erorilor) utilizai comentariile conform procedurii de mai jos [1]:
9 transformai n comentariu una sau mai multe linii ale programului;
9 salvai programul;
9 rencrcai pagina Web n browser;
9 analizai rezultatul (efectul);
9 modificai codul surs sau transformai n comentariu mai multe linii de
cod;
9 repetai aceast procedur pn cnd ai eliminat eroarea.
Afiai valorile variabilelor

O alt tehnic de depanare frecvent folosit este aceea de a aduga instruciuni
JavaScript pentru a putea cunoate strile script-ului.
n acest sens, utilizai metoda alert() pentru a:
9 afia valorile variabilelor, matricelor i valorile returnate de funcii;
9 afia rezultatele expresiilor.
412
De asemenea, putei afia mesaje n bara de stare cu ajutorul proprietii
status.
Putei de asemenea afia informaii din procesul de depanare, ntr-o alt
fereastr a navigatorului sau ntr-un cadru anume.
n anumite cazuri, folosii document.write, dar atenie (!), aceast
metod nu funcioneaz dect atunci cnd documentul a fost complet ncrcat!
Descompunei script-urile complexe n mai multe funcii

Pentru a mri gradul de reutilizare a codului JavaScript este bine s limitai
dimensiunea funciilor pe care urmeaz s le creai. Cu ct dimensiunile unei
funcii sunt mai mici cu att mai mult cresc ansele de reutilizare a acesteia n
diferite zone ale programului.
Verificai documentul (X)HTML

Nu trebuie s uitai c JavaScript nu este singurul limbaj pe care trebuie s-l
utilizai; el interacioneaz de obicei cu codul surs (X)HTML.
Morala este urmtoarea: asigurai-v c documentul (X)HTML nu conine erori!
Este foarte simplu de a comite erori n documentul (X)HTML care conine

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

Atribuire i egalitate. n JavaScript una din erorile cele mai frecvente comise
de ctre nceptori este confuzia ntre operatorul de afectare (=) i operatorul de
egalitate (==). Aceste erori sunt cteodat dificil de identificat n msura n care
ele nu genereaz ntotdeauna un mesaj de eroare.
413
Dac nu tii ce operator s folosii, amintii-v simplu c = servete la
schimbarea valorii unei variabile, iar == servete la compararea a dou valori.
Iat o instruciune eronat (figura 11.23).
<script>
Figura 11.23
if (x=7) alert (La revedere!);

</script>
Aceast instruciune pare logic la prima vedere, dar x=7 va avea ca efect
atribuirea valorii 7 variabilei x, i nu compararea celor dou. Netscape detecteaz
de cele mai multe ori acest tip de eroare i afieaz un mesaj la consol. Eroarea
invers (== n loc de =) nu va fi niciodat detectat!
Variabile globale i locale. O alt eroare frecvent este confuzia ntre
variabilele globale i locale, atunci cnd se dorete de exemplu a utiliza n
exteriorul unei funcii o variabil care a fost declarat n interiorul unei funcii.
Remarc. Diferena dintre variabilele locale i globale este explicat n Conversaia 2.
Facei referiri corecte la obiecte. Nu de puine ori se fac referiri la obiecte n

mod incorect. Este important de a utiliza numele exacte ale obiectelor i de a
numi explicit prinii unui obiect.
Astfel, este posibil de a ne referi la metoda window.alert scriind simplu
alert. Dar sunt i cazuri cnd utilizarea lui window.alert este obligatorie.
O alt eroare frecvent const n neglijarea utilizrii numelui obiectului
Document, scriind de exemplu write n loc de document.write.
Instrumente pentru depanarea script-urilor

Depanarea codului surs ocup un loc deosebit de important n dezvoltarea
aplicaiilor JavaScript.
Dac ai verificat absena erorilor clasice n script-urile dumneavoastr, care
totui nu funcioneaz este momentul s trecei la depanare, adic la cutarea i
eliminarea erorilor din program, utiliznd instrumentele simple de depanare pe
care le prezentm n continuare.
414
Consola JavaScript
Primul lucru pe care trebuie s-l facei atunci cnd script-ul dumneavoastr nu
funcioneaz este consultarea mesajelor de erori afiate. n Netscape, ncepnd
cu versiunea 4.5, mesajele de eroare nu se afieaz direct, ele fiind nregistrate
n consola JavaScript.
Iat cum procedm pentru a accesa consola JavaScript.
1. Introducei JavaScript n cmpul Address (figura 11.24).
Figura 11.24
sau,
2. Executai clic pe Tools Web Development JavaScript
Console (figura 11.25).
Figura 11.25
Remarc. Consola JavaScript afieaz ultimele mesaje de eroare (figura 11.26).
Figura 11.26
Consola JavaScript nu permite numai vizualizarea erorilor, ea permite de

asemenea introducerea unei instruciuni/expresii, pentru a vedea apoi rezultatul.
415
Aceast funcie este util pentru a verifica existena erorilor de sintax n liniile
de cod ale script-ului dumneavoastr.
Afiarea mesajelor de eroare cu Internet Explorer

Internet Explorer i versiunile mai recente nu afieaz n mod implicit mesajele
de eroare.
Iat cum procedm pentru a afia mesajele de eroare n Internet Explorer.
1. Executai clic pe Tools Internet Options Advanced
(figura 11.27).
Figura 11.27
2. Dezactivai Disable script debugging i activai opiunea Display a

notification about every script error (figura 11.28).
416
Figura 11.28
Figura 11.29
417
Remarci:
9 Dac nu ai activat afiarea mesajelor de erori, Internet Explorer afieaz n bara de

stare un icon atunci cnd se genereaz o eroare. Executai dublu clic pe acest icon
pentru a afia mesajul de eroare (figura 11.29).
9 Dup cum ai putut constata i Microsoft dispune de un instrument de depanare la fel de
eficient ca i consola Netscape. Indiferent de preferinele dumneavoastr, testai
script-urile cu cele dou navigatoare.
Alte instrumente de depanare

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

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

JavaScript, care poate fi descrcat gratuit, de la adresa:
http://developer.netscape.com/software/jsdebug.html
sau,
http://www.mozilla.org/projector/venkman/
Remarc. Principalele caracteristici [1] ale instrumentului Netscape JavaScript
Debugger sunt: fereastra Source View; ntrerupere; puncte de ntrerupere;
parcurgerea pas cu pas a codului surs; omiterea liniilor din procedurile apelate;
parcurgerea liniilor din procedurile apelate; fereastra Console; Object Inspector;
fereastra de dialog Error Reporter.
9
Microsoft Script Debugger (MSSD), instrument de depanare a

script-urilor, parte integrant din Internet Explorer, care poate fi
descrcat gratuit, de la adresa:
http://msdn.microsoft.com/library/en-us/sdbug/html/sdbug_1.asp
Remarc. Principalele caracteristici [1] ale instrumentului Microsoft Script

Debugger sunt: imagine dinamic a structurii (X)HTML; integrarea mai multor limbaje
(JavaScript, VBScript i Java din acelai document); puncte de ntrerupere; parcurgerea
pas cu pas a codului surs; omiterea liniilor din procedurile apelate; parcurgerea liniilor
din procedurile apelate; stiv de apeluri integrat; fereastra de expresii evaluate imediat.
9
Editoarele de text i de (X)HTML sunt foarte bune instrumente pentru

procesarea de baz; ele v pot de asemenea asista n timpul depanrii,
418
afind numerele de linii i punnd n relief tag-urile corecte cu ajutorul
codurilor de culori.
Aplicaie
Scriei un program JavaScript care calculeaz i afieaz determinantul unei matrice de
dimensiune 3*3.
Indicaie.
a b
d e
g h
c
f = a*(e*if*h)b*(d*if*g)+c*(d*he*g)
i
Iat cum procedm pentru a scrie programul JavaScript care calculeaz i
1 2 3
afieaz determinantul matricei 4 5 6 .
7 8 9
1. Creai documentul (X)HTML (figura 11.30).
Figura 11.30
2. Plasai script-ul de calcul al determinantului n documentul (X)HTML

(figura 11.31).
419
Figura 11.31
3. Validai
documentul
(X)HTML
cu
aplicaia
validator
(http://validator.w3.org).
n figura
11.32 este prezentat rezultatul validrii
validator.
Figura 11.32
obinut cu aplicaia
420
Remarc. Nimic nu este perfect! Ai identificat eroarea? Dei l pronun bine pe r, n loc de r am
tastat l (</sclipt>). Se ntmpl, nu-i aa! Corectai </script>!
4. Corectai
eroarea
validai
documentul
(X)HTML
cu
aplicaia
validator (http://validator.w3.org), figura 11.33.
Figura 11.33
5. Inserai codul HTML care afieaz icon-ul de conformitate (figura 11.34).
Figura 11.34
6. Vizualizai pagina Web ntr-un browser (Internet Explorer), figura 11.35.
421
Figura 11.35
Remarc. Internet Explorer afieaz icon-ul de conformitate la baza paginii.
Figura 11.36
Instruciunile throw i try catch

Instruciunea throw genereaz o eroare. Un bloc try conine instruciuni
JavaScript; la apariia unei erori, programul execut blocul catch.
Instruciunea throw
Sintaxa instruciunii throw este prezentat n figura 11.37.
Instruciune
Figura 11.37 throw
Sintax
throw mesaj eroare
Remarc. Instruciunea throw este utilizat frecvent ntr-o instruciune try catch; ea
transfer eroarea blocului catch.
422
Iat cum procedm pentru a genera dou mesaje de eroare: Eroare 1,
Eroare 2 n situaia n care numrul de rezervoare cilindrice echilaterale care
a fost introdus de la tastatur este zero, respectiv negativ (vezi EXEMPLELE
JAVASCRIPT).
<script>
try {
n=prompt (Introducei numrul de rezervoare (n),0);
if (n==0)
throw Eroare 1
else
if (n<0> throw Eroare 2
}
catch (er) {
if (er==Eroare 1) alert (Eroare 1 numr rezervoare=0)
if (er==Eroare 2) alert(Eroare 2 numr rezervoare negativ)
}
Figura 11.38
</script>
Comentarii:
9 Programul execut blocul try.
9 n situaia n care n nu este egal cu zero i nici negativ, nu se genereaz nici o eroare iar
blocul catch nu este executat. Pentru utilizator nu se ntmpl absolut nimic.
9 n cazul n care valoarea variabilei n a fost fixat la 0 n cursul instruciunilor executate
anterior, eroarea Eroare 1 este generat (aceast eroare este de acelai tip cu erorile
de sintax). Programul prsete blocul try i execut blocul catch, furnizndu-i ca
parametru tipul de eroare returnat prin throw. n definitiv, el afieaz un mesaj
alert().
Instruciunea try catch

Try catch servete la testarea unei poriuni de cod JavaScript i la
depistarea eventualelor erori. Ea este alctuit din trei blocuri: try, catch i
finally.
Sintaxa instruciunii este prezentat n figura 11.39.
Figura 11.39
Instruciune
Sintax
try ... catch
try {
cod1
}
catch (Eroare) {
cod2
}
finally {
cod3
}
423
Remarci:
9 Try conine instruciuni (cod1) JavaScript care ar putea fi sursa problemei. n cazul
apariiei unei erori, script-ul sare imediat n blocul catch transmindu-i ca parametru
obiectul Error generat.
9 Dac instruciunile din blocul try nu depisteaz nici o eroare, script-ul trece imediat la
blocul finally, evitnd blocul catch.
Iat cum calculm aria unui rezervor sferic ( a = 4R 2 ) cu raza de 3m utiliznd

funcia intern eval(). Dac eval() recunoate instruciunea JavaScript
a=4*Math.PI*Math.pow(3,2) atunci ea evalueaz textul primit ca

argument i returneaz rezultatul. n caz contrar, navigatorul afieaz un mesaj
de eroare.
<script>
try {
a=prompt (Introducei a=4*Math.PI*Math.pow(3,2),);
aeval=eval(a);
alert (Aria rezervorului sferic cu raza de 3m este:+aeval);
}
catch(err) {
if (err.name==SyntaxError) alert (Eroare de sintax!)
else alert (Expresia nu poate fi evaluat)
Figura 11.40 }
</script>
Comentarii:
9 try ateapt o eroare!
9 eval() accept un ir de instruciuni JavaScript i l evalueaz ca fiind cod surs.
9 Dac utilizatorul introduce a=4*Math.PI*Math.pow(3,2), JavaScript poate
evalua expresia i va afia 113.097.
9 Dac utilizatorul introduce a=4*Math.PI*pow(3,2)+, spunem c avem de-a
face cu o eroare de sintax.
9 n sfrit, dac utilizatorul introduce Droopy, JavaScript ncearc s evalueze
valoarea variabilei Droopy, care nu exist. Nu este vorba de o eroare de sintax ci de o
eroare de referin. Expresia nu poate fi evaluat se va afia n acest
caz pe ecran.
JavaScript recunoate ase tipuri de erori (vezi figura 11.41).

Numele erorii
Descriere
EvalError
Utilizare greit a metodei eval()
RangeError
O valoare numeric este foarte important
ReferenceError
SyntaxError
Referin la o variabil, sau referin necunoscut sau

invalid
Eroare de sintax
TypeError
Tipul de variabil este greit
Figura 11.41 URLError
Utilizare greit a URL-ului
Remarc. Nu uitai c i dumneavoastr putei genera cu throw propriile erori. Succes!
424
JavaScript
Tem
Testai-v cunotinele
1. Dac la crearea unui script, comitei greeli de tastare, ce tip de eroare este
generat?
eroare de sintax
eroare de logic
eroare de intrare/ieire
2. De regul, greelile de punctuaie care se comit la crearea unui script sunt:
confuzia ntre majuscule i minuscule
paranteze orfeline
inversarea literelor
3. Foarte multe erori de logic sunt generate de:
o proiectare defectuoas a programului JavaScript
confuzia ntre irurile de caractere i numere
greeli de plasare a instruciunilor JavaScript
4. Inserarea comentariilor n programele JavaScript contribuie la:
crearea unor reflexe JavaScript
eliminarea erorilor de sintax
eliminarea erorilor de logic
5. n JavaScript una din erorile cele mai frecvente comise de nceptori este
confuzia dintre:
operatorul de atribuire i operatorul de egalitate
operatorul == i operatorul ===
operatorul || i operatorul &&
6. Consola JavaScript este:
un instrument simplu pentru afiarea mesajelor de eroare cu Netscape
un instrument simplu pentru afiarea mesajelor de eroare cu Internet
Explorer
un buton ncastrat
7. W3C validator este un instrument de depanare a documentelor:
(X)HTML
XML
JavaScript
425
8. Instruciunea throw genereaz:
o eroare
un tabel
un formular
9. JavaScript recunoate urmtoarele tipuri de erori:
EvalError
SintaxError
TypeError
FormatError
LogicalError
Vizitai site-urile
9 http://developer.netscape.com/docs/manuals/jsref/objintro.htm
9 http://msdn.microsoft.com/scripting/jsscript/default.htm
Conversaia 12
Crearea obiectelor personalizate
f
f
f
f
f
f
f
Utilizarea obiectelor personalizate pentru simplificarea script-urilor

Definii un obiect
Aplicaii
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.
Definii un obiect
Prima etap n crearea unui obiect const n a-i da un nume. Am decis s numim
obiectul Contact. Fiecare obiect Contact conine urmtoarele proprieti:
9 nume;
9 site (adresa de site (personal));
9 email (adresa de email (personal)).
Pentru a putea utiliza obiectul, va trebui mai nti s crem o funcie
Constructor care are rolul de a crea noi obiecte Contact.

Iat cum crem n JavaScript o funcie Constructor (Contact) cu trei
parametri
pentru
iniializarea
noului
obiect
atribuirea
proprietilor
corespunztoare.
n figura 12.1 este prezentat codul JavaScript al funciei Constructor.
Figura 12.1
429
Remarci:
9 Constructorul este o funcie simpl care accept mai muli parametri ale cror valori sunt
atribuite proprietilor obiectului.
9 Obiectul are acelai nume ca i funcia Contact.
9 Cuvntul cheie this se refer la obiectul curent, acela creat cu ajutorul funciei.

Obiectele devin cu adevrat interesante i comode atunci cnd ele sunt dotate cu
metode.
n JavaScript, definirea unei metode pentru un obiect se realizeaz n dou
etape:
9 Definii metoda n funcia Constructor ntr-o linie de cod n care vei
atribui metodei un nume, apoi asociai-i funcia de prelucrare.
9 Scriei funcia de prelucrare.
Iat cum definim metoda afiareContact n funcia Constructor Contact.
n
figura
12.2
este
prezentat
codul
complet
JavaScript
al
funciei
Constructor.
Figura 12.2
Remarci:
9 Funcia afiareContact afieaz coordonatele de contact ale unei persoane.
9 Instruciunea care a fost adugat seamn cu o definiie a proprietii, dar se refer la
funcia afiareContact. Putei utiliza aceast sintax din momentul n care funcia
afiareContact a fost definit.
9 Funcia afiareContact este utilizat ca metod, fr parametri!
9 Cuvntul cheie this se refer la obiectul curent.
Iat cum scriem n JavaScript funcia de prelucrare afiareContact asociat

metodei cu acelai nume.
n figura 12.3 este prezentat codul JavaScript al funciei afiareContact.
430
Figura 12.3
Remarc. Cuvntul cheie this se refer la proprietile obiectului.

n continuare, vom utiliza definiia obiectului pe care urmeaz s-l crem. Pentru
a utiliza o definiie a obiectului va trebui s crem un nou obiect cu ajutorul
cuvntului cheie new (vezi obiectele Array, Date, String).
n figura 12.4 se prezint codul JavaScript care creeaz un nou obiect Contact
numit Droopy.
Figura 12.4
Remarci:
9 Crearea unui obiect nu este o operaie complicat. Tot ceea ce trebuie fcut este
apelarea funciei Contact(), care este funcia de definire a obiectului, i indicarea
coordonatelor n aceeai ordine ca n definiie.
9 Odat executat instruciunea din figura 12.4, un nou obiect a fost creat, care conine
informaii despre Droopy. Acest obiect (Droopy) este o instan a obiectului
Contact.
9 n figura 12.5 se prezint o secven de cod JavaScript care creeaz un obiect
Contact vid (Romic) i definete apoi proprietile sale.
Figura 12.5
431
Odat creat instana obiectului Contact cu ajutorul uneia din metodele
prezentate, utilizai metoda afiareContact pentru a afia informaiile
corespunztoare. Proprietile persoanei de contact Droopy sunt afiate ca n
figura 12.6.
Figura 12.6
Aplicaii
Creai un document (X)HTML care afieaz n Internet Explorer lista de contact a trei
persoane (vezi figura 12.7).
Indicaie. Utilizai obiectul Contact.
Figura 12.7
432
Figura 12.8
Remarc. n cadrul acestei aplicaii baza de date utilizat are dimensiuni extrem de reduse. Un
obiect asemntor poate stoca date care provin dintr-o baz de date extern care conine mii de
nregistrri.
Modificai definiia obiectului Contact pentru a include o proprietate adresa care

permite stocarea adresei persoanei de contact. Modificai funcia afiareContact.
433
Definirea problemei
Aplicaia pe care urmeaz s o realizai n cadrul acestei ultime conversaii (!) este o mic
baz de date care conine notele obinute la mai multe materii, de ctre studenii unei
grupe.
Pentru gestionarea automat a acestor date, vom folosi facilitile JavaScript (tabelul pe
parte de client), pentru a rspunde cerinelor conducerii unei instituii de nvmnt.
Cerine de prelucrare
Se vor avea n vedere cerinele de prelucrare prezentate mai jos:
9 studenii sunt identificai prin: cod, nume, prenume;
9 materiile de studiu sunt identificate prin: cod, denumire;
9 nota 0 (zero) semnific absena studentului de la examen sau verificare.
9 rapoartele generate sunt de unul din urmtoarele tipuri:
raport general studenii sunt afiai n ordine alfabetic (nume, prenume i
notele obinute la toate materiile);
raport pe materii pentru o materie selectat din lista de materii, studenii
sunt listai n dou moduri:
ordine alfabetic;
ordine descresctoare a notelor;
raport restanieri pentru fiecare materie se afieaz studenii care nu au
obinut nota 5 de promovare;
9 cererile de cutare n baza de date sunt:
identificarea unui student i afiarea notelor obinute la toate materiile;
identificarea studenilor restanieri pentru o materie selectat.
434
Proiectarea programului
Crearea tabelelor de cutare

Se vor utiliza obiecte personalizate care s simuleze o baz de date. Documentul
(X)HTML va conine informaii despre dou entiti:
9 materie conine atributele: cod (numrul de identificare al materiei),
denumirea materiei (ir de caractere);
9 student conine atributele: numele i prenumele studentului; notele obinute la
materiile de studiu.
Remarc. A fost aleas o soluie simplificat care prezint dezavantajul unei flexibiliti reduse la
modificarea numrului materiilor de studiu i la adugarea mai multor ani de studiu, dar ... din
punct de vedere didactic este mult mai uor de neles.
Tabelul entiti materii pe parte de client i tabelul entiti student pe parte de client se
vor implementa dup cum urmeaz:
9 tabelul materii se va utiliza un vector ir de caractere; codul de identificare al
materiei va fi indicele materiei iar elementele vectorului, un ir de caractere ce
reprezint denumirea materiei.
9 tabelul student se va utiliza un vector de obiecte personalizate n care indicele
vectorului va reprezenta numrul de identificare al studentului iar obiectul
personalizat va fi format din dou iruri de caractere:
Nume, Prenume reprezint numele i prenumele studentului;
Note vector de numere ntregi reprezentnd notele obinute de student
(dimensiunea vectorului de note trebuie s fie egal cu dimensiunea
vectorului materii care definete numele materiilor de studiu).
Definii obiectul student (vezi metoda constructor,
def_student
(Nume,
Prenume, Note) din figura 12.9) i creai instane de acest tip.

Pentru aceasta va trebui s creai mai nti lista cu note i apoi s apelai metoda
constructor (def_student) a obiectului student (vezi figura 12.10).
function def_student(Nume,Prenume,note){
this.Nume=Nume;
this.Prenume=Prenume;
this.Note=Note;
Figura 12.9
}
...
Figura 12.10
var lista_stud=new Array();

var note1=new Array(5,6,7,10,10);
lista_stud[0]=new def_student(Avram,Nicolae,note1);
}
435
Crearea interfeei cu utilizatorul

Interfaa cu utilizatorul trebuie s asigure afiarea facil a tuturor cerinelor de prelucrare.
Pentru a afia simultan opiunile de prelucrare, criteriile i rezultatele prelucrrii cererilor
de cutare se va folosi o fereastr cu mai multe (4) cadre (vezi figura 12.11).
Cadrul titlu
Cadrul inputd
Cadrul subrap
Cadrul fraport
Figura 12.11
Vom prezenta n cele ce urmeaz funciile celor patru cadre n care a fost mprit
fereastra browser-ului.
Cadrul titlu
Cadrul titlu afieaz textul Intranet Baza de Date cu Studeni (vezi
figura 12.12).
Figura 12.12
Cadrul inputd
Cadrul inputd afieaz tipul prelucrrii. Se afieaz dou butoane radio (Rapoarte,
Cutare) cu ajutorul crora utilizatorul poate selecta tipul de raport (General, Pe

Materii, Restanieri) i tipul cutrii (Dup studeni, Restanieri).
n figura 12.13 se prezint cadrul inputd al ferestrei interfeei cu utilizatorul cu tipul
prelucrrii RAPOARTE iar n figura 12.14 se prezint acelai cadru cu tipul prelucrrii:
CUTARE.
436
Figura 12.13
Figura 12.14
Cadrul subrap
Cadrul subrap este cadrul prin intermediul cruia se introduc datele necesare efecturii
prelucrrilor cerute de utilizator prin selecia unei opiuni din cadrul inputd. El este generat
dinamic.
n figurile 12.15, 12.16, 12.17, 12.18, 12.19 este prezentat coninutul cadrului subrap
pentru opiunile RAPOARTE i CUTARE.
Figura 12.15
437
Figura 12.16
Figura 12.17
Figura 12.18
438
Figura 12.19
Remarc. Observai n figurile 12.15, 12.16, 12.17, 12.18, 12.19 prezena butonului EXECUT.
Cadrul fraport
Cadrul fraport este cadrul n care se afieaz rezultatele prelucrrilor. Coninutul acestuia
este dinamic, fiind generat n funcie de cererea de cutare selectat.
n figura 12.20 este prezentat cadrul fraport al ferestrei interfeei cu utilizatorul pentru
RAPORT GENERAL (Rapoarte General, n cadrul inputd).
Figura 12.20
439
Crearea funciilor de prelucrare a datelor
Aplicaia poate genera trei rapoarte i execut dou cereri de cutare. Tipul raportului
sau al cutrii este selectat de utilizator prin intermediul cadrului inputd.
Corespunztor seleciei utilizatorului, n cadrul subrap se vor modifica zonele de
interaciune cu utilizatorul. Astfel, dac utilizatorul selecteaz generarea raportului
general atunci cadrul subrap va afia un buton pentru a lansa n execuie

prelucrarea (vezi figura 12.18). Cadrul inputd permite i schimbarea tipului de
prelucrare (raport sau cutare) prin afiarea a dou butoane radio prin care
utilizatorul poate realiza selecia. Acionarea unuia din aceste butoane radio lanseaz n
execuie funcia afisrap care modific opiunile listei tiprap.
n figura 12.21 este prezentat pseudocodul funciei afisrap().
Pseudocodul AFISRAP
BEGIN
Parametrii: t- valoare intreaga
IFAFIS
IF (t==0)
//afisare tip raport
//fixeaza trei optiuni in lista tiprap
tiprap.optiune[0]=General
tiprap.optiune[1]=Materii
tiprap.optiune[2]=Restantieri
IFAFIS
ELSE
tiprap.optiune[0]=Student
tiprap.optiune[1]=Restantieri
IFAFIS
ENDIF
Figura 12.21 AFISRAP END
AFISRAP
Selectarea unei opiuni din lista tiprap va duce la afiarea n cadrul subrap a
elementelor de interfa ce asigur introducerea informaiilor necesare pentru fiecare tip
de prelucrare i lansarea n execuie a prelucrrii respective. Astfel, se gestioneaz
evenimentul onChange care va executa funcia afis_subopt. Pseudocodul funciei
afis_subopt() este prezentat n figura 12.22.

Pseudocodul AFIS_SUBOPT
AFIS_SUBOPT BEGIN
IF1
CASE1
CASE1
IF1
CASE2
Figura 12.22
CASE2
IF1
AFIS_SUBOPT END
//determinarea indexului optiunii selectate

ir=tiprap.selectedIndex
IF (raport[0].checked)
CASE (ir)
0:DO afis_subrap0
1:DO afis_subrap1
2:DO afis_subrap2
ENDCASE
ELSE
CASE (ir)
0:DO afis_subrap3
1:DO afis_subrap4
ENDCASE
ENDIF
440
Funcia afis_subrap0 construiete interfaa cu utilizatorul pentru prelucrarea datelor
n cazul generrii raportului general (figura 12.20). Interfaa va fi afiat n
frame-ul subrap i conine ca element de aciune doar butonul Executa care prin
apsare va apela funcia executaRG() care va afia raportul general (vezi
pseudocodul din figura 12.23).
Pseudocodul AFIS_SUBRAPO, EXECUTARG

BEGIN
//afiarea informaiilor despre raport
subrap.WRITE Raport General
subrap.WRITE Afiseaza toata grupa si toate notele
genereaza html pentru form f2 ce contine butonul executa
IF1
IF (clic pe butonul Executa)
DO executaRG
IF1
ENDIF
AFIS_SUBRAP0 END
AFIS_SUBRAP0
EXECUTARG
BEGIN
//afiarea studentilor din grupa
subrap.WRITE Raport General
subrap.WRITE Nume prenume
FOR(i=0;i<materii.length;i++)
subrap.WRITE materii[i]
ENDFOR
FOR(i=0;i<lista_stud.length;i++)
subrap.WRITE lista_stud[i].nume lista_stud[i].prenume
FOR(j=0;j<materii.length;j++)
subrap.WRITE lista_stud[i].Note[j]
ENDFOR
ENDFOR
FOR1
FOR1
FOR2
FOR3
FOR3
FOR2
Figura 12.23 EXECUTARG
END
Funcia afis_subrap1 construiete interfaa cu utilizatorul pentru generarea
raportului pe materii (figura 12.24).
Figura 12.24
Interfaa va fi afiat n frame-ul subrap i conine dou liste de opiuni i butonul
Executa. Lista de opiuni smaterii conine lista materiilor, iar lista sordine
permite selecia modului de ordonare al studenilor: ordinea alfabetic sau ordinea dat
de notele la materia respectiv.
441
Figura 12.25
Butonul Execut prin apsare va apela funcia executaRM() care va afia
raportul pe materii (vezi figura 12.25). Afiarea studenilor se va face n funcie

de ordinea impus de vectorul asociat vord. Pentru afiarea studenilor n funcie de
nume, ordinea este cea n care sunt pstrate n vectorul lista_stud informaiile
despre studeni. n cazul ordonrii descresctoare dup note, vord va conine indicii
studenilor din vectorul list_stud n ordinea descresctoare a notelor. Astfel, vord[0] va
conine indicele elementului din lista_stud al studentului care are nota cea mai mare
la materia respectiv. Algoritmul de sortare implementat este un algoritm clasic
bubble-sort (vezi pseudocodul din figura 12.26).

Pseudocodul AFIS_SUBRAP1, EXECUTARM
AFIS_SUBRAP1 BEGIN
IF1
IF1
AFIS_SUBRAP1 END
EXECUTARM
FOR1
Figura 12.26
FOR1

subrap.WRITE Raport pe Materii
generaza html pentru forma f2
DO executaRG
ENDIF
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
FOR(i=0;i<vord.length;i++)
vord[i]=i;
ENDFOR
442
IF(iord==1)
//ordinea in functie de note
// ordoneaza lista_stud descrescator dupa note
// se aplica algoritmul de sortate bubble_sort
neordonat=true;
WHILE (neordonat)
neordonat=false;
FOR(i=0;i<lista_stud.length-1;i++)
IF(lista_stud[vord[i]].Note[imat]<
lista_stud[vord[i+1]].Note[imat])
j=vord[i];
vord[i]=vord[i+1];
vord[i+1]=j;
neordonat=true;
ENDIF
ENDFOR
ENDWHILE
// afiseaza studenti
subrap.WRITE lista_stud[vord[i]].nume
subrap.WRITE lista_stud[vord[i]].prenume
subrap.WRITE lista_stud[i].Note[imat]
ENDFOR
ENDIF
IF2
WHILE1
FOR2
IF3
IF3
FOR2
WHILE1
FOR3
FOR3
Figura 12.26 IF2
(continuare) EXECUTARM
END
Funcia afis_subrap2 construiete interfaa cu utilizatorul pentru generarea raportului

ce afieaz studenii restanieri (figura12.27).
Figura 12.27
Interfaa conine doar butonul
Executa care prin apsare va apela funcia
executaRR() care va afia raportul studenilor restanieri (vezi figura 12.28).
443
Figura 12.28
Pentru afiarea studenilor pe materii se apeleaz funcia afis_restantieri care
are ca parametru indicele materiei ce urmeaz a fi prelucrat (vezi pseudocodul din
figura 12.29).
Pseudocodul AFIS_SUBRAP2
AFIS_SUBRAP2 BEGIN
IF1
IF1
AFIS_SUBRAP2 END
EXECUTARR
BEGIN
//afiarea raportului restantieri pe materii

subrap.WRITE Raport Restantieri
fraport.WRITE "Materia:",materii[j],
DO afis_restantieri(j);
ENDFOR
FOR1
FOR1
EXECUTARR

subrap.WRITE Raport Restantieri
generaza html pentru forma f2 ce conine butonul Executa
DO EXECUTARR
ENDIF
END
AFIS_RESTANTIERI BEGIN
FOR2
IFF
IFF
FOR2
IF2
Figura 12.29
Parametrii
imat- indicele materiei
nrest=0;
//determina numarul de restantieri
IF (lista_stud[i].Note[imat]<5)
nrest++;
ENDIF
ENDFOR
IF(nrest>0)
//afiseaza in tabel studentii restantieri
fraport.WRITE "Numar restantieri:",nrest
fraport.WRITE "NR. Nume Prenume Nota
444
k=0;
IF(lista_stud[i].Note[imat]<5)
fraport.WRITE i+1, lista_stud[i].Nume
fraport.WRITE lista_stud[i].Prenume
IF(lista_stud[i].Note[imat]==0)
fraport.WRITE"absent"
ELSE
fraport.WRITE
FOR3
IF3
IF4
IF4
lista_stud[i].Note[imat]
ENDIF
IF4
IF3
FOR3
IF2
ENDIF
ENDFOR
ELSE
fraport.WRITE "Nu esista restantieri"
Figura 12.29
IF2
ENDIF
(continuare)
AFIS_RESTANTIERI END
Funcia afis_subrap3 construiete interfaa cu utilizatorul pentru cutarea unui
student dup nume, prenume (figura 12.30).
Figura 12.30
Interfaa conine dou zone de editare (Nume student, Prenume student)
pentru specificarea numelui, respectiv prenumelui studentului cutat i
butonul
Executa. Prin acionarea butonului Executa se va apela funcia executaCS()

(vezi pseudocodul prezentat n figura 12.31) care va afia rezultatele studentului dorit sau
un mesaj de eroare dac acesta nu exist n baza de date (vezi figura 12.32).
Pseudocodul AFIS_SUBRAP3, EXECUTACS
AFIS_SUBRAP3 BEGIN
IF1
IF1
AFIS_SUBRAP3 END
EXECUTACS
BEGIN
Figura 12.31
IF2

subrap.WRITE Cautare rezultate student
DO EXECUTACS
ENDIF
//afiarea rezultatelor unui student
//transferul datelor introduse in zonele de editare
sn=snume.value;
pn=spnume.value;
fraport.WRITE"Cautare rezultate student"
IF(sn!="")
445
IF3
FOR1
IF4
IF4
FOR1
IF5
FOR2
FOR3
IF6
FOR4
FOR4
IF6
FOR3
FOR2
IF5
IF5
IF3
FOR5
IF7
IF7
FOR5
IF8
FOR6
FOR6
FOR7
IF9
FOR8
FOR8
IF9
FOR7
IF8
IF8
Figura 12.31 IF3
ENDIF
(continuare) IF2
EXECUTACS END
IF(pn!="")
// determina numarul de studenti ce au numele
// si prenumele specificat
nr=0;
IF((lista_stud[i].Nume==sn)&&
(lista_stud[i].Prenume==pn))
Nr=nr+1
ENDIF
ENDFOR
IF(nr>0)
fraport.WRITE "NR. Nume Prenume
fraport.WRITE materii[i]
IF((lista_stud[i].Nume==sn)&&
(lista_stud[i].Prenume==pn))
fraport.WRITE i+1, lista_stud[i].Nume
fraport.WRITE lista_stud[i].Note[j]
ENDFOR
ENDIF
ENDFOR
ENDFOR
ELSE
fraport.WRITE "Nu exista nici un student cu numele:",
sn," Prenumele:",pn
ENDIF
ELSE
//determina numarul de studenti cu numele sn
nr=0;
IF(lista_stud[i].Nume==sn)
nr=nr+1
ENDIF
ENDFOR
IF(nr>0)
fraport.WRITE "Numar Studenti:",nr
fraport.WRITE "NR. Nume Prenume "
fraport.WRITE materii[i]
ENDFOR
IF(lista_stud[i].Nume==sn)
fraport.WRITE i+1, lista_stud[i].Nume,
fraport.WRITE lista_stud[i].Note[j]
ENDFOR
ENDIF
ENDFOR
ELSE
fraport.WRITE "Nu exista nici un student
cu numele:", sn
ENDIF
ENDIF
446
sau
Figura 12.32
Funcia afis_subrap4 construiete interfaa cu utilizatorul pentru generarea afirii
studenilor restanieri la o singur materie(figura 12.33).
Figura 12.33
Interfaa conine o list de opiuni, (smaterii), pentru selecia materiei dorite i

butonul Executa care prin apsare va apela funcia executaCR() ce va afia
raportul studenilor restanieri la materia respectiv(vezi figura 12.34).
Figura 12.34
Pentru
afiarea
studenilor
restanieri
la
materie
se
apeleaz
funcia
afis_restantieri pe care am prezentat-o anterior (vezi pseudocodul prezentat n

figura 12.35).
Pseudocodul AFIS_SUBRAP4, EXECUTACR
447
AFIS_SUBRAP4 BEGIN
subrap.WRITE Restantieri la o Materie
DO EXECUTACR
ENDIF
IF1
IF1
AFIS_SUBRAP4
EXECUTACR
Figura 12.35
END
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>
Figura 12.36 <frame src="bsit.html" name="fraport">
(continuare) </frameset>
</html>
Codul HTML pentru cadrul titlu
<html>
<head>
</head>
<body>
<center>
<font size=+3 color=green> Intranet- Baza de Date cu Studenti</font>
</center>
</body>
Figura 12.37
</html>
Codul HTML pentru cadrul inputd
453
<html>
<head>
<!--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\"
Figura 12.38 onClick=\"parent.executaRR();\">");
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 ="";
}
Figura 12.38 f1.tiprap.selectedIndex=0;
afis_subopt(this);
(continuare)
}
455
function afis_subopt(t){
var ir=f1.tiprap.selectedIndex;
if(f1.raport[0].checked) { // ESTE SELECTAT RAPORT
switch(ir) {
case 0:
afis_subrap0();
break;
case 1:
afis_subrap1();
break;
case 2:
afis_subrap2();
}
window.status="Tip Raport";
}
else { // ESTE SELECTAT CAUTARE
switch(ir) {
case 0:
afis_subrap3();
break;
case 1:
afis_subrap4();
break;
}
window.status=Tip Cautare;
}
}
//
</script>
</head>
<body>
<center>
<form name=f1>
<p><font size=+2 color=green>Tipul Prelucrarii</font>
<p>
<table border=0>
<tr><td><input type=radio name=raport checked value=0 onClick=if (this.checked)
{afisrap(0)} >
<b>RAPOARTE</b>
<td>
<input type=radio name=raport value=1 onClick=if (this.checked) {afisrap(1)} >
<b>CAUTARE</b></tr>
<tr><td colspan=2><select size=3 name=tiprap onChange=afis_subopt(this)>
<option selected>General</option>
<option>Pe Materii</option>
<option>Restantieri</option>
</select>
</table>
</center>
Figura 12.38 </form>
(continuare) </body>
</html>
456
Codul HTML pentru cadrul subrap
<html>
<head>
<title>Aplicatie</title>
<head>
<body>
<font color=green size=+1>Raport general</font>
<hr>
<p>Afiseaza toata grupa si toate notele</p>
<form name="f2">
<input type="button" value="Executa" onClick="parent.executaRG();">
</form>
</body>
Figura 12.39
</html>
Codul HTML pentru cadrul fraport
<html>
<head>
</head>
<body>
Figura 12.40 <h3>Rezultatele studentilor</h3></body>
</html>
JavaScript
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?
457
7. Cum putei avea acces la obiectele pe care le-ai creat?
8. Care este diferena dintre o metod i o funcie?
9. Care sunt etapele pe care trebuie s le parcurgei pentru a defini o metod
pentru un obiect personalizat?
Vizitai site-urile
9 http://www.wdvl.com
9 http://msdn.microsoft.com/library
9 http://www.databasejournal.com
9 http://hotwired.lycos.com/webmonkey/programing
BIBLIOGRAFIE
1.
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 calculatorul, Editura Tehnic,
2 volume, 1989
11. Floarea Nstase, Pavel Nstase, Tehnologia aplicaiilor Web (XML-DOM-ASP),
Editura Economic, 2002
12. Liviu Dumitracu, (X)HTML, Editura Universitii din Ploieti, 2003
13. Liviu Dumitracu, Dreamweaver MX, Editura Universitii din Ploieti, 2003
14. Liviu Dumitracu, XML, Editura Universitii din Ploieti, 2003
15. Michel Drewfus, HTML 4, Student Edition, Campus Press, Paris, 2003

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

JavaScript

Conversaia 2. Variabile i funcii ........................................................... 33

Conversaia 2 (continuare). Operatorii JavaScript. Obiecte

Conversaia 3. Instruciunile limbajului JavaScript ............................... 91

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

Conversaia 5. Obiectele (interne) RegExp, Date, Arguments .............. 153

Conversaia 6. Gestionarii de evenimente JavaScript .......................... 189

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

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

Conversaia 9. Obiectul Image ................................................................ 343

Conversaia 10. Obiectele Frame i Layer ............................................. 377

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

Conversaia 12. Crearea obiectelor personalizate ................................ 427

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

JavaScript i HTML 4.0, XHTML, XML

Stilul de via Web

Stilul de via Web

Cel mai simplu nivel de interactivitate pe

9 Interactivitatea funcional Se refer la abilitatea de a executa sarcini

Interactivitatea v oblig s apelai la un limbaj de programare sau un limbaj de

Java, un limbaj de programare orientat obiect creat de Sun, de exemplu, n

VB Script (Visual Basic Scripting Edition) este rspunsul lui Microsoft la

Basic, un limbaj de programare Windows foarte

rspndit. Script-urile VB Script pot fi direct incluse n documentele (X)HTML.

limbajului JavaScript este

parial inspirat din cea a limbajului Java. S m explic.

Ce putei realiza cu JavaScript?

Ce nu putei realiza cu JavaScript?

perfect. Cine este perfect! Dei JavaScript este

puternic, el este limitat de restricii severe impuse de navigatoarele Web, dup

Metod; Instruciune; Funcie; Eveniment; Gestionar de

Math, Number, Object, RegExp, String, This.

Document, Navigator, Event, Screen, History i

button, checkbox, document, event, fileUpload,

E, LN10, LN2, LOG10E, LOG2E, PI, SQRT1_2,

name, size, type, value

defaultValue, disabled, form, name, size,

encoding, enctype, length, method, name,

splice(), toString(), unShift()

min(), pow(), random(), round(), sin(),

Denumire obiect navigator

blur(), click(), focus()

blur(), click(), focus()

Remarc. n JavaScript metodele sunt considerate ca verbe.

<script language = JavaScript type = text/JavaScript>

v creai propriile funcii!

<script language = JavaScript>

Se declaneaz atunci cnd

se execut clic pe un element

se execut dublu clic pe un element

se activeaz tasta F1 n fereastra activ

se acioneaz o tast a claviaturii

Conceptele programrii JavaScript

DOM-ul se refer la componentele paginii Web, obiectele pe care le putei

<script> ... </script>.

indic tipul limbajului de script. Valoarea sa trebuie s fie

Type (un tip MIME), de

exemplu text/JavaScript sau text/vbscript

<script type=text/JavaScript language=JavaScript>

facultativ, precizeaz URL-ul fiierului extern care conine

<script type=text/JavaScript src=functie.js>

... </noscript> n interiorul cruia putei plasa elementele (X)HTML care

Metode de inserare a script-urilor ntr-un document (X)HTML

Cum inserai un script n documentele XML