112071788 Javascript Curs

7/30/2019 112071788 Javascript Curs

1/118

1. Adaugarea JavaScript intr-o pagina HTML

Pentru a insera JavaScript ntr-un document HTML deja existent, este necesara introducerea nfisier a etichetei si . Aceasta eticheta necesita aributul "type", sau atributul"language" (acesta din urma este depreciat in standardul XHTML) care va specifica browser-

ului limbajul folosit pentru interpretarea codului inclus.In interiorul etichetei ... vom scrie codul nostru.Pentru scrierea si executarea programelor JavaScript avem nevoie de un editor simplu de texte(cum ar fi Notepad pentru Windows sau emacs pentru Unix) si un browser (ex. Mozilla Firefox,Internet Explorer).- Atributul "language" (care insa nu este folosit in XHTML, ci doar in paginile web standardHTML)va avea urmatoarea sintaxa: language="JavaScript", aceasta specifica browser-uluice limbaj este folosit- Atributul "type"inlocuitorul lui "language"va avea urmatoarea sintaxa:type="text/javascript", aceasta spune browser-ului ca scriptul este scris in format plaintext.Putem, de asemenea, sa introducem instructiunile JavaScript intr-un alt fisier, extern, care va

avea extensia ".js", pentru editarea acestui fisier este nevoie la fel de un editor simplu de texte.Avantajul fiind ca putem folosi acelasi cod in mai multe pagini HTML si in cazul necesitatii uneimodificari in codul JavaScript, modificam doar datele dintr-un singur fisier (cel cu extensia".js"), dezavantajul acestei metode este faptul ca intr-un fisier extern ".js" nu putem folosietichete HTML, ci numi instructiuni JavaScript.In cazul in care codul JavaScript se afla intr-un fisier extern, eticheta din pagina HTMLva trebui sa contina atributul "src" a carui valoare determina locatia fisierului in care se aflacodul JavaScript.In fisierul extern cu extensia "js" nu trebuie sa scriem eticheta "", scriem directinstructiunile scriptului.Iata un exemplu de script JavaScript scris in interiorul unei pagini web (XHTML):

Cod JavaScript

document.write("Textul care va fi afisat pe ecran");

Si pt. HTML:Cod JavaScript


2/118

document.write("Textul care va fi afisat pe ecran");

Comanda document.write este folosita pentru a tipari ceva in pagina.Rezultatul acestui script, afisat in pagina web (XHTML si HTML) va fi urmatorul:Textul care va fi afisat pe ecran

Daca dorim sa incarcam scriptul dintr-un fisier extern (de exemplu "cod.js"), codul nostru indocumentul HTML va arata astfel:

Cod JavaScript

- Iar fisierul "cod.js" va contine :

document.write("Textul care va fi afisat pe ecran")Rezultatul afisat in pagina web va fi acelasi ca-n exemplele anterioare.

Recomandarea HTML 4.01 specifica introducerea unei etichete in portiunea adocumentelor care folosesc scripturi JavaScript. Aceasta eticheta specifica limbajul prestabilitfolosit in toate scripturile din pagina. Eticheta ar trebui sa arate astfel :

- Totusi, aceasta eticheta nu este obligatorie, scripturile functionand foarte bine si fara ea.

2. Ascunderea codului in browserele vechi

Unele browsere nu recunosc scripturile si le afisaza n pagina web ca text. Pentru a evita acest

lucru putem folosi eticheta HTML pentru comentarii delimitand cu aceastainstrictiunile JavaScript, astfel evitam aparitia scriptului in pagina web:Acest lucru se face precum puteti vedea in exemplul urmator:


3/118

//-->

3. Conventii de sintaxa

In orice limbaj, scrierea are conventii si reguli de sintaxa. Chiar si scrierea n limba romna areregulile ei de sintaxa: orice propozitie incepe cu litera mare, se termina cu un semn depunctuatie, etc.! La fel si limbajele de programare au regulile si sintaxa lor.In continuare vor fi prezentate regulile de sintaxa ala limbajului Java Script.

1. Case-sensitive - se face diferenta intre literele mari si mici, astfel cuvinte precum"exemple, Exemple" vor fi tratate diferit.

2. Punct si virgula (;) - Toate declaratiile trebuie sa se termine cu un caracter "punct sivirgula" (;) (Exemplu" var1 = 3; var2 = 8;).

3. Spatiile libere - JavaScript ignora spatiile libere, tab-urile si liniile libere care apar ninstructiuni, acestea sunt utile pentru a face codul mai bine structurat si usor de citit.

Recunoaste doar spatiile care apar n string-uri (sirurile de caractere). Exemplu: "var1 = 2;" este la fel cu "var1=2;". 4. Ghilimelele - Ghilimelele simple ('') si duble ("") sunt folosite pentru a delimita

sirurile de caractere (string). (Exemplu: "Invat JavaScript" sau 'Invat JavaScript'). 5. Carcactere speciale - cand scriem scripturi, apare necesitatea de a folosi in cod sau in

datele de iesire, un caracter special sau o apasare de tasta , cum ar fi tasta TAB , sau olinie noua. Pentru aceasta folosim caracterul backslash "\" in fata unuia din codurileEscape , astfel :

o \b - backspace\f- indica o pagina noua\n - indica o linie noua

\r - imdica un retur de car\t - indica o apasare a tastei TAB\\ - indica un caracter backslash\' - indica un apostrof (ghilimele simple)\" - indica ghilimele duble

o-De exemplu, daca dorim sa afisam un text, folosinddocument.write(), iar aceltext trebuie sa contina ghilimele si caracter backslash "\", si anume textul (Curs

"JavaScript" \ MarPlo.net), pentru a nu "deruta" scriptul in interpretarea

codului, deoarece ghilimelele si backslash fac parte din sintaxa, adaugam \ in

fata acestor caractere din interiorul sirului. Comanda de afisare a sirului va fi

astfel: document.wri te(" Curs \" JavaScript\" \\ M arPlo.net" );

6. Comentarii - comentariile in interiorul codului sunt necesare cand dorim saspecificam rolul anumitor functii si variabile, pentru o mai usoara intelegere ulterioara ascriptului. Pentru a adauga un comentariu, pe o singura linie, in interiorul codului,incepem scrierea acestuia cu succesiunea // (Exemplu:// Comentariu). Daca dorim sa


4/118

scriem comentarii pe mai multe randuri, se foloseste /* la inceputul comentariului si */ lasfarsitul acestuia (Exemplu:/* ... comentariu pe mai multe randuri ... */)

7. Numele variabileler si functiilor - numele dat variabilelor si functiilor trebuie sarespecte urmatoarele reguli:

o - primul caracter trebuie sa fie o litera, un caracter de subliniere (_) sau semnul $- primul caracter nu poate fi un numar- numele nu trebuie sa contina spatii libere- nu se folosesc cuvinte rezervate, care fac parte din limbajul JavaScript (cum sunt"array", "status", "alert"), deoarece interpretorul programului nu va face diferentaintre aceste nume si comenzile JavaScript cu aceleasi nume.

Notiuni de baza

In aceasta lectie veti invata notiunile de baza ale programari, care sunt necesare pentru a scrie un

script. Aceste notiuni sunt similare cu cele din PHP si alte limbaje de programare.

1. Folosirea variabilelor

Intr-un script (sau program) se folosesc date constante dar si date variabile care isi schimbavalorile in timpul executei programului. Aceste date se numesc variabile.

Variabila = numele unei locatii din memoria calculatorului, folosita pentru a memora date.Modul cel mai simplu de a folosi si a face referire la o astfel de data variabila este de a o denumi.

Numele variabilei permite accesul la valoarea ei precum si schimbarea valorii daca este necesar.

Se poate crea o variabila si sa-i atribuim o valoare prin doua metode:- Cu declaratia var

var nume = valoare- Fara declaratia var

nume = valoare- Unde 'nume' este numele variabilei iar 'valoare' este valoarea pe care i-o atribuim.

Tipuri de variabile - Spre deosebire de alte limbaje (cum sunt Pascal sau C), JavaScript nu are tipuri fixe

de date, adica permite schimbarea tipului unei variabile in cadrul scriptului, acesta poate recunoaste

singur cand datele sunt de tip "sir", numerice sau alt tip.

De exemplu:

var x = "xyz";x = 8;


5/118

- Observati ca valorile de tip 'sir' (formate din litere) se scriu intre ghilimele, iar cele 'numerice' pot fi

scrise si fara ghilimele.

Durata de viata a unei variabile - O variabila scrisa in cadrul unei functii este o variabila locala, valoarea

ei fiind recunoscuta numai in cadrul acelei functii, cand se iese din functie variabila este distrusa. Astfel,

o alta functie poate declara si folosi o variabila cu acelasi nume, JS (Java Script) trateaza cele doua

variabile ca fiind diferite (functiile si lucrul cu acesta vor fi explicate in lectiile urmatoare).

Se pot declara si variabile, in afara oricarei functii, care sa fie folosite de toate functiile, acestea se

numesc variabile globale si sunt valabile de la incarcarea paginii web pana la inchidere, in orice script JS.

2. Operatori

Pentru a lucra cu datele introduse intr-un script si a manipula valorile variabilelor se folosescoperatoriOperatorii sunt simboluri si identificatori care determina felul in care sunt modificate datele si

modul in care este evaluata o combinatie de expresii si variabile.JavaScript recunoaste :

- operatori binari- care necesita existenta a doi operanzi in expresie. - operatori unari- care au nevoie doar de un operand.

Operatori sunt de mai multe tipuri:

- Operatori aritmetici- Operatori de atribuire

- Operatori de comparare

- Operatori logici (numiti si booleeni)- Operatori pentru siruri

- Operatori typeof

- Operator conditional ?

- Operatori pentru functii

- Operatori pentru structuri de date

Acestia vor fi prezentati dataliat in lectia urmatoare

Operatorii

Cu ajutorul operatorilor manipulam, combinam si modificam datele dintr-un prrogram sau script.Acestia sunt de mai multe feluri, in aceasta lectie sunt prezentati tipurile de operatori folositi inJavaScript.


6/118

1. Operatori aritmetici

Putem spune ca operatorii aritmetici sunt principalii operatori folositi cu numere, acestiaefectueaza operatiile aritmetice cunoscute: adunare (+), scadere (-), inmultire (*), impartirere(/). Pe langa acesti patru operatori, in programare sunt folositi inca trei operatori aritmetici :

Modulul (%) - acesta determina restul impartirii a doua numereEexemplu:

o 8%3 da rezultatul 210%2 da rezultatul 0

Incrementare (++) - Acest operator creste valoarea cu o unitate, este des folosit in programare,in lucrul cu variabile.

De exemplu, daca avem variabila 'i', putem folosi operatorul de incrementare astfel: i++ careeste similar cu i = i+1.

Eexemplu:

o x = 7;x++;

rezultatul va fi x = 8

Decrementare (--) - Acest operator scade valoarea cu o unitate. De exemplu, daca avem variabila 'i', putem folosi operatorul de decrementare astfel: i-- care

este similar cu i = i-1.

Eexemplu:

o x = 7;x--;

rezultatul va fi x = 6

Cei doi operatori de incrementare (++) respectiv decrementare (--) pot fi folositi atat caprefix(infata variabilei) ++i respectiv --i cat si ca sufix(dupa numele variabilei) i++ respectiv i--. Valoarea

obtinuta este aceeasi, insa ordinea operatiei si rezultatul atribuirii valorii sunt diferite.

Folosirea operatorului ca prefix determina in primul rand modificarea valorii si apoi are locatribuirea acesteia.

In cazul folosirii operatorului ca sufix, intai este atribuita valoarea variabilei si apoi variabila esteincrementata (sau decrementata).

2. Operatori de atribuire

In cazul acestui operator JavaScript actioneaza mereu de la dreapta la stanga ; se evalueazaoperandul din dreapta iar valoarea se atribuie variabilei din stanga semnului "=" .Mai jos puteti vedea un tabel din care puteti intelege modul de lucru si actiune al operatorilor deatribuire

Operator Exemple Este acelasi cu

= x = y x = y

+= x += y x = x+y


7/118

-= x -= y x = x-y

*= x *= y x = x*y

/= x /= y x = x/y

%= x %= y x = x%y

3. Operatori de comparare

Expresiile care folosesc acesti operatori pun o intrebare despre doua valori pe care le compara.Raspunsul poate fi TRUE sau FALSE.Un operator de comparatie des folosit este operatorul de identitate (egalitate), reprezentat prindoua semne egal "==". Este diferit de simplul "=", operatorul '==' compara doua valorideterminand daca acestea sunt identice, adica egale atat ca valoare cat si ca tip.

Operatori de comparatie sunt prezentati in tabelul urmator:

Operator Semnificatie Exemple

== Egal 3 == 8 returneaza FALSE

!= Diferit 3 != 8 returneaza TRUE

> Mai mare 3 > 8 returneaza FALSE

= Mai mare sau egal 3 >= 8 returneaza FALSE


8/118

x3

(returneaza TRUE)

|| - sau (or) - Compara doua expresii si returneaza TRUE daca cel putin una din ele esteadevarata, in caz contrar returneaza FALSE.

Eexemplu:

o x = 5y = 8

x>7 || y


9/118

Acest operator returneaza tipul de date continut la momentul respectiv de operandul sau. Este utilin special pentru a determina daca o variabila a fost definita cu un anumit tip de date.Studiind tabelul urmator puteti intelege modul de operare al acestuiai operator :

Operator Descriere

typeof parseFloat returneaza sirul 'function'

typeof 33 returneaza sirul 'number'

typeof "un anume text" returneaza sirul 'string'

typeof true returneaza sirul 'boolean'

typeof window returneaza sirul 'object'

7. Operatori pentru functii

Functiile vor fi explicate in una din lectiile urmatoare, totusi este util sa fiti familiarizati cu doioperatori:

1. Primul se numeste operator de apelare si este reprezentat printr-o pereche de parantezerotunde () care urmeaza intodeauna dupa numele functiei, astfel o functie va fi declarata astfel:

function nume_functie() {

// Corpul functiei

}

Apoi operatorul de apelare este folosit din nou cand functia este apelata in interiorul scriptului:

nume_functie()Parantezele aratand ca este folosita o functie.

Al doilea operator pentru functii este virgula "," - care se foloseste pentru a separa mai multe

argumente pe care le primeste o functie.

Argumentele sunt scrise intodeauna in interiorul parantezelor rotunde si sunt separate prin virgula.Astfel o functie cu doua argumente ar arata:

function nume_functie(arg1, arg2) {

// Corpul functiei

}

8. Operatori pentru structuri de date (obiecte)


10/118

Acesti operatori sunt necesari atunci cand lucram cu structuri de date, sau obiecteIn JavaScript obiectele sunt folosite la gruparea informatiilor pentru a servi unui scop specific.

1. Un operator care ar trebui cunoscut bine este punctul "." , numit operator pentru membrulunei structuri. Acesta ne permite sa ne referim la un membru ( variabila ,functie sau obiect ) care

apartine obiectului specificat.Sintaxa este urmatoarea :

numeObiect.nume_VariabilanumeObiect.nume_Functie()

numeObiect.alt_Obiect

Aceasta modalitate de referire la o informatie, numita notatie cu punct, returneaza valoarea variabilei,

functiei sau obiectului aflat cel mai in dreapta.

2. Operatorul pentru element din matrice, numit si operator indice al tabloului, se foloseste pentru a

accesa o data specifica, o cheie, dintr-un tablou de date. Acesta este simbolizat printr-o pereche deparanteze drepte [ ] , si permite sa ne referim la orice membru al unui tablou.

Tablourile sunt obiecte JavaScript si vor fi detaliate in lectiile urmatoare.

Sintaxa de folosire a operatorului pentru tablou este :

nume_tablou[cheie]9. Operatorul conditional "?"

JavaScript contine si un operator conditional ? : care atribuie o valoare unei variabile pe baza

unei conditii.Sintaxa de folosire a acestui operator este urmatoarea:

variabila = (conditie)?val1:val2Modul de operare este urmatorul - se evalueaza conditia, daca este adevarata atunci variabila ia

valoarea 'val1', altfel ia valoarea 'val2'.

Iata un exemplu:

vizitator = "barbat"

mesaj = (vizitator=="barbat")?"Stimate domn":"Stimata doamna"

document.write(mesaj)

Daca variabila "vizitator" este egala cu 'barbat', variabila "mesaj" primeste valoarea 'Stimate domn",

altfel primeste valoarea "Stimata doamna". Iar instructiunea de afisare "document.write()" va afisa

valoarea lui "mesaj".

10. Precedenta operatorilor


11/118

Cand in expresii se folosesc mai multi operatori, JavaScript tine cont de precedenta (importanta)predefinita a fiecarui operator. Precum in aritmetica, intr-o ecuatie cu adunare si inmultire (2+3*4 ), daca nu sunt paranteze, se executa intai inmultirea, aceasta avand precedenta superioarafata de adunare. La fel e si cu operatorii in programare.Daca apar mai multi operatori cu aceeasi precedenta, JavaScript ii va evalua de la stanga spre

dreapta.In tabelul urmator sunt prezentati operatorii in ordinea precedentei lor, unde operatorii din parteade sus a tabelului au precedenta maxima :

Operator Nume operator

() [] . de apelare, pt. structuri de date

! ++ -- de negare, incrementare

* / % de inmultire, impartire

+ - de adunare, scadere

< >= de comparatie

== != de egalitate

&& SI logic

|| SAU logic

? : conditionnal

= += -= *= /= %= de atribuire

, virgula

Instructiuni conditionale

Partea cea mai interesanta, dar si dificila, in scrierea unui script este proectarea acestuia astfelincat sa ia decizii in timp ce este executat.Cu ajutorul instructiunilor conditionale putem face programele sa testeze diferite conditii dupacare sa decida modul de executie a datelor.In Java Script sunt urmatoarele instructiuni conditionale:


12/118

if- executa comenzile dorite cand o conditie este adevarata. if ... else - executa anumite comenzi cand o conditie este adevarata si alte comenzi cand aceasta

este falsa.

switch - selecteaza care comanda va fi executata.

1. Instructiunea "if"

Se poate spune ca instructiunea "if" este una din cele mai des folosite.Forma generala a acestei instructiuni este urmatoarea :

if (conditie) {codul care va fi executat daca este adevarata conditia

}

- Unde 'conditie' poate fi orice expresie logica.

Daca rezultatul conditiei este TRUE se executa codul dintre acolade, in caz contrar, cand conditia

returneaza FALSE, se trece peste acest cod.Iata un exemplu practic. Urmatorul script afiseaza "Buna ziua" daca ora este mai mare decat 11.

Se foloseste obiectul Date care determina data curenta (va fi explicat mai amanuntit in alta lectie).

- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'time' preia numai ora din

variabila 'd'. Conditia din instructiunea "if" verifica daca ora este mai mare decat 11 si in caz adevarat

executa comanda dintre acolade, care afiseaza mesajul.

Daca ora este mai mica decat 11 scriptul nu va executa instructiunea dintre acolade.

2. Instructiunea "if ... else"

In exemplul anterior am vazut ca este afisat "Buna ziua!" daca ora > 11 iar in caz contrar nu seintampla nimic.Folosind instructiunea "if ... else" putem stabili comenzi care sa fie executate cand conditiainstructiunii "if" este FALSE.Forma generala a instructiuni "if ... else" este urmatoarea :


13/118

if (conditie) {codul care va fi executat daca este adevarata conditia

}

else {

codul care va fi executat daca conditia este falsa

}

- Unde 'conditie' poate fi orice expresie logica.

Daca rezultatul conditiei este TRUE se executa codul dintre primele acoladele, care apartin de "if", in caz

contrar, cand conditia returneaza FALSE, sunt executate comenzile din a doua grupa de acolade (dupa

else).

Iata din nou exemplul de mai sus, de asta data folosindu-se instructiunea "if ... else".

Scriptul afiseaza "Buna ziua!" daca ora este mai mare decat 11, in caz contrar afiseaza 'Este ora ...'.

- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'time' preia ora din variabila 'd'.

Conditia din instructiunea "if" verifica daca ora este mai mare decat 11 si in caz adevarat executa

comanda dintre primele acolade.

Daca ora este mai mica decat 11 scriptul va executa comanda din grupul de acolade determinat de

"else". (Observati folosirea operatorului de concatenare +).

3. Instructiunea switch

Aceasta instructiune e folosita pentru a compara o valoare cu altele dintr-o lista.Sintaxa generala a instructiuni "switch" este urmatoarea.

switch (expresie) {case valoare1:

cod executat daca expresie = valoare1

break


14/118

case valoare2:


break

case valoare3:


break

default :

cod executat daca expresie e diferit de valoare1, valoare2 sau valoare3

}

- Prima data este evaluata expresia scrisa intre paranteze rotunde, apoi valoarea expresiei este

comparata pe rand cu fiecare valoare determinata de "case". Daca se gaseste o identitate se executa

codul asociat acelui "case". Apoi se iese din instructiunea "switch".

Daca, parcurgand fiecare "case", nu se gaseste o egalitate, se executa codul de dupa "default".

Prin folosirea lui "break" se opreste parcurgerea corpului instructiunii atunci cand s-a gasit o valoare

egala cu 'expresie' si se iese din "switch".

Iata un exemplu de script care afiseaza un mesaj in functie de zilele saptamanii:

- Am definit variabila 'd' a carei valoare este data curenta, apoi variabila 'ziua' care preia numarul zilei

din variabila 'd' (duminica = 0, luni = 1, ...). Se intra in corpul instructiunii "switch" si se verifica, pe rand,

fiecare valoare "case" cu valoarea variabilei 'ziua', cand se gaseste egalitatea se executa comanda

asociata acelui 'case' si se iese din "switch".

Daca nici una din valorile 'case' nu este egala cu valoarea variabilei 'ziua', se va executa comanda de

dupa 'default', care afiseaza mesajul: "Mai e pana sambata".


15/118

Iata inca un exemplu cu "case", de data aceasta foloseste valori de tip sir (string).

Va returna Frate.

Dar in general "case" e recomandat sa fie folosit cu valori numerice.

Instructiuni ciclice (repetitive)

Instructiunile repetitive se folosesc atunci cand se doreste efectuarea unei comenzi de mai multeori.In java script putem folosi urmatoarele instructiuni ciclice:

for - la fel ca si in alte limbaje de programare, executa codul de un numar specificat de orifor ... in - executa cate un set de instructiuni pentru fiecare proprietate dintr-un obiect

while - repeta codul atata timp cat o anumita conditie este adevarata

do ... while - intai executa o data codul apoi il repeta atata timp cat o anumita conditie este

adevarata

1. Instructiunea for

Aceasta are urmatoarea forma generala:


16/118

for (incepere_nr; conditie_nr; ciclu) {cod care va fi executat

}

- Unde "incepe_nr" e folosit la 'initializare' pentru a da o valoarea initiala numarului de repetari, de

multe ori prin aceasta se declara o variabila care poate fi folosita ca un contor al ciclului."conditie_nr" verifica daca numarul de cicluri se incadreaza intr-o anumita valoare si daca rezultatul este

TRUE se executa inca o data codul dintre acolade.

"ciclu incrementeaza sau decrementeaza valoarea la care a ajuns contoarul ciclului, apoi aceasta valoare

este verificata din nou de "conditie_nr" pana cand rezultatul este FALSE.

Aceste trei expresii dintre parantezele rotunde sunt optionale, dar daca este omisa una din ele,

caracterul punct si virgula ";" trebuie sa ramana pentru ca fiecare expresie sa ramana la locul ei.

In interiorul instructiunii for (ca si la instructiunea "if"), intre acolade, pot fi introduse si alte instructiuni

"for", sau alte instructiuni conditionale, acest lucru se numeste imbricarea instructiunilor.

Iata un exemplu simplu de utilizare a instructiunii "for":

- Se atribue lui 'x' valoarea 1, se verifica conditia (x


17/118

desfasoara nici un ciclu.Instructiunea "for ... in" are urmatoarea forma generala:

for (nume_proprietate in obiect) {instructiuni

}

- Unde "nume_ proprietate" este un literal de tip sir generat de JavaScript. Pentru fiecare repetare a

executiei instructiunii, lui "nume_proprietate" i-se atribuie urmatorul nume de proprietate continut in

"obiect", pana cand sunt folosite toate.

3. Instructiunea while

Aceasta instructiune repeta un cod atata timp cat conditia este adevarata.Comanda actioneaza similar cu instructiunea "for", dar nu include functiile de initializare siincrementare a variabilelor.

Instructiunea "while" are urmatoarea forma generala:

while (conditie) {codul care va fi executat

}

Iata exemplu anterior, de la instructiunea "for", aici este scris in varianta instructiunii "while":

- Prima data am declarat variabila 'x' dandu-i valoarea 1.

Instructiunea "while" verifica conditia (aici x


18/118

x este 3

x este 4

4. Instructiunea do ... while

Forma generala a acestei instructiuni este:

do {codul care va fi executat

}

while (conditie)

Asemanatoare in mare parte cu instructiunea "while", instructiunea "do ... while" intai executa codul

din corpul instructiunii, dupa care verifica conditia, apoi il repeta pana cant conditia returnbeaza FALSE.

Astfel corpul functiei este executat cel putin o data, chiar daca conditia nu este adevarata.

Iata un exemplu din care puteti intelege mai bine aceasta instructiune:

- Aceasta functie afiseaza "x este 8".

Observati ca desi conditia este falsa (x


19/118

with - se foloseste pentru a fi evitata specificarea repetata la referirea unui obiect, cand iiaccesam metodele sau proprietatile.

1. Instructiunile break si continue

Cand este folosita o instructiune ciclica, aceasta continua sa se repete pana cand conditia esteFALSE. Aceasta excutie poate fi schimbata cu ajutorul instructiunilorbreaksi continue, caredau posibilitatea intreruperii ciclului sau iesirea din acesta inainte de a se ajunge la sfarsit (laultima acolada).

break - intrerupe definitiv executarea ciclului.Iata un exemplu din care puteti intelege modul de lucru a lui break:

for (x=1; x


20/118

}

Acest script va afisa urmatorul rezultat:

X este 1

X este 2

X este 4

X este 6

X este 7

- Observati ca atunci cand 'x' are valoarea 3 sau 5, prin instructiunea "continue" se intrerupe executia

codului care urmeaza dupa aceasta (aici "document.write("
X este "+x);") din repetarea curenta,

dar se continua cu verificare conditiei instructiunii "for" si executia ciclului.

2. Instructiunea eticheta (label)

Instructiunea label poate fi folosita impreuna cu "break" sau "continue". Aceasta este utilizataatunci cand folosim instructiuni ciclice imbricate, permitand controlul oricarei instructiuni careimbrica alte instructiuni.Studiind exemplul urmator, puteti intelege mai bine modul de utilizare a unei instructiuni label:

loopX:

for (x=1; x


21/118

- Observati ca desi "break" este inclus in interiorul celei dea doua instructiune "for", prin specificarea lui

"loopX", care este eticheta intregului ansamblu de instructiuni imbricate, se va intrerupe executia

intregului ansamblu, nu numai instructiunii "for" unde este adaugat "break". Daca eliminati eticheta

"loopX" veti vedea diferenta.

3 Instructiunea with

Aceasta comanda se foloseste pentru a evita referirea in mod repetat la un obiect, atunci cand iiaccesam metodele sau proprietatile de mai multe ori. Orice metoda sau proprietate dintr-un bloc"with" pe care JavaScript nu o recunoaste va fi asociata cu obiectul specificat pentru acel bloc.Sintaxa acestei instructiuni este :

with (obiect) {instructiuni

}

- Unde "obiect" specifica referirea la obiect care trebuie folosita, daca aceasta nu exista in blocul"instructiuni". Ajuta mult cand se utilizeaza de mai multe ori functii matematice avansate, prin

intermediul obiectului "Math". (Acest obiect va fi explicat mai tarziu).

In exemplul urmator este prezentat modul de folosire a instructiunii "with" :

Acest script va afisa :

Salut

Acum nu mai este necesara folosirea obiectului ca prefix al functiei

In mod normal, pt. a afisa un text folosim sintaxa "document.write("text ...")", dar aici, prin folosirea lui

'with' impreuna cu obiectul "document", nu mai este necesara adaugarea acestuia la metoda "write",

astfel se scurteaza codul scriptului.

Alert, Prompt si Confirm sunt ferestre predefinite de dialog, acestea apartin direct obiectului"Window" (despre obiecte si ierarhia acestora puteti invata inLectia 12).

1. Fereastra Alert
http://www.marplo.net/javascript/ierarhiajs.htmlhttp://www.marplo.net/javascript/ierarhiajs.htmlhttp://www.marplo.net/javascript/ierarhiajs.htmlhttp://www.marplo.net/javascript/ierarhiajs.html


22/118

Probabil ati intalnit pana acum, de mai multe ori exemple cu "Alert".Fiind un element simplu si deja cunoscut, voi face o scurta prezentare a sintaxei acestuia.Crearea ferestrelor alert se face cu sintaxa:

window.alert("mesaj") - Unde "mesaj" este textul care va apare in fereastra Alert.Urmatorul exemplu deschide o fereastra cu mesajul "Bine ai venit".In browser va apare o fereastra ca in imaginea urmatoare

2. Fereastra Prompt

Fereastra Prompt se creaza cu sintaxa:

window.prompt("mesaj", "default")- Unde "mesaj" este un text care va apare in fereastra, deasupra unei casute de text input; iar"default" este textul care va apare in casuta input.Urmatorul exemplu deschide o fereastra "Prompt".

In browser va apare o fereastra ca in imaginea urmatoare


23/118

Textul pe care utilizatorul il adauga in campul din fereastra prompt poate fi preluat intr-ovariabila si folosit apoi in script.Iata un exemplu in care atribuim deschiderea ferestrei Prompt unei variabile (aici "nume"), careva prelua sirul adaugat in caseta de text, apoi valoarea acestei variabile o introducem in mesajulunei ferestre Alert:- Dupa ce utilizatorul scrie numele in fereastra Prompt si apasa OK se va deschide o fereastraAlert care contine in mesaj numele adaugat de utilizator.-Am folosit "\n" pentru a adauga o linie noua, dupa "nume", in textul care apare in fereastraAlert.- Incercati si singuri acest exemplu.

3. Fereastra Confirm

Fereastra de confirmare se creaza cu sintaxa:

window.confirm("intrebare") In fereastra de confirmare va apare textul "intrebare" si doua butoane "OK" si "Cancel".Aceasta fereastra este folosita pentru a fi executata o comanda cand este apasat butonul "OK"(returneaza TRUE) si alta comanda cand este apasat butonul "Cancel" (returneaza FALSE)Urmatorul exemplu deschide o fereastra "Confirm" in care apare intrebarea "Rezultatul lui 0+0este 0?". Daca este apasat butonul "OK" apare o fereastra Alert cu mesajul "Corect", iar dacaeste apasat butonul "Cancel" apare o fereastra Alert cu mesajul "Incorect"

In browser va apare o fereastra ca in imaginea urmatoare


24/118

Functii - 1

Functiile ajuta la divizarea mai multor sarcini pe care trebuie sa le faca un program.O functie poate contine mai multe instructiuni si comenzi care ulterior pot fi utilizate usor si demai multe ori prin apelarea functiei care le contine.Daca un program necesita multe linii de cod, folosind functiile putem imparti codul in parti maimici pe care le putem utiliza separat acolo unde este nevoie.Pot fi doua feluri de functii:

predefinite - cum sunt de exemplu: "parseInt(string)", "parseFloat(string)", ... Create de programator

o - care returneaza o valoareo - care nu returneaza o valoare

1. Crearea (definirea) functiilor

O functie se defineste la inceputul fisierului, in sectiunea head si poate fi folosita in cadrulpaginii prin apelarea ei. Scriptul care contine definirea unei functii se adauga in sectiunea "head"pentru a fi siguri ca aceasta a fost incarcata inainte de a fi apelata.Pentru crearea unei functii se foloseste cuvantul function urmat de numele pe care vrem sa-l damfunctiei dupa care putem adauga intre paranteze rotunde argumentele (numite si atribute)

functiei (separate prin virgula daca sunt mai multe) si intre acolade corpulfunctiei care continecodul care trebuie executat.Forma generala a unei functii este urmatoarea:

function nume_functie(argument1, argument, ...) {codul care va fi executat

}


25/118

Argumentele sunt variabile folosite de functie si a caror valoare este preluata la apelarea functiei.

Atributele nu sun obligatorii, o functie poate fi definita si fara argumente, dar se pastreaza parantezele

rotunde, astfel sintaxa unei functii fara argumente este urmatoarea:

function nume_functie() {codul care va fi executat

}

2. Instructiunea return

O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return. Aceastaspecifica valoarea pe care o returneaza functia cand este apelata.Iata un exemplu din care pouteti intelege modul de aplicare a instructiunii return:

function suma(x, y) {z = x+y;

return z}

- "suma" reprezinta numele functiei (puteti da orice nume care respecta regulile limbajuli si nu sunt

identice cu cele rezervate, cum ar fi "function"), "x, y" reprezinta argumentele functiei a caror valoare

este data cand functia este apelata. Intre acolade avem codul care trebuie executat si care, prin

instructiunea "return" va returna valoarea lui "z" care reprezinta suma lui "x" si "y". Astfel valoarea

returnata de functia "suma()" va fi valoarea pe care o are "z".

3. Apelarea functiilor

Dupa ce am creat o functie, pentru a fi folosita, fuctia trebuie apelata.- O functie care contine argumente se apeleaza in felul urmator:

nume_functie(argument1, argument, ...)- O functie fara argumente se apeleaza in felul urmator:

nume_functie()Observati ca la apelul functiei nu se mai folosesc cuvantul "function" si acoladele

In locul in care am apelat astfel o functie va fi executat corpul acelei functii.

4. Exemple de scripturi cu functii

In continuare studiati exemplele de mai jos, care folosesc functii simple, astfel veti intelege maibine modul de lucru si executie a unei functii.


26/118

- Exemplu 1 - functie fara argumentUrmatorul exemplu prezinta un script care afiseaza un text:

exemplu1()

- Observati ca functia "exemplu1" a fost definita in sectiunea heada documentului HTML si apoi a fost

apelata in sectiunea "body", unde va afisa textul "Bine ati venit!"

- Exemplu 2 - functie cu un argument

Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o fereastra "alert" care va

afisa un text in functie de argumentul transmis.Specificatie - Sintaxa generala a functiei "alert" din JavaScript este: alert('Text'), aceasta deschide o

fereastra de atentionare in care este afisat mesajul dintre paranteze "Text".


27/118

Acest cod va afisa in pagina HTML urmatorul rezultat:

dimineata ziua

- Studiati cu atentie scriptul si modul in care acesta este apelat.

Textul afisat de "alert" este preluat de la valoarea argumentului functiei "exemplu2" care l-a randul lui il

preia din ceea ce este scris la apelarea functiei.

- "onclick" (la click) este o comanda JavaScript care specifica momentul cand trebuie sa fie executata

functia.

Cand apasati cele doua butoane veti obtine o fereastra 'Alert' cu doua mesaje diferite (specificate la

fiecare apelare a functiei "exemplu2")

- Exemplu 3 - functie cu doua argumente

Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o fereastra "alert" care va

afisa suma a doua numere.

Acest cod va afisa in pagina HTML urmatorul rezultat:

suma


28/118

- Studiati cu atentie scriptul, modul in care au fost combinate: "alert()", sirul si valoarea argumentelor "x,

y", variabila "z" si modul in care functia "exemplu3" este apelata.

Cand apasati pe buton, veti obtine suma numerelor 7 si 8.

In interiorul functiei pot fi folosite instructiuni complexe, cum ar fi "for", "if", "while"; care pot lua decizii

diferite in functie de argumentele functiei. Depinde doar de cunostintele si imaginatia dv..

1. Modificarea numarului argumentelor

Cand creem o functie ii definim si numarul de argumente pe care le accepta, lucru de care se tinecont in momentul apelarii ei.Sunt situatii in care dorim sa transmitem functiei un numar diferit de argumente, care poate fimai mic sau mai mare decat numarul de argumente pe care le are functia la construirea ei.Intr-o astfel de situatie putem folosi o valoare prestabilita in interiorul functiei, pentru cazul in

care nu sunt transferate argumente.In continuare va fi prezentat un script care afiseaza un mesaj de salut atunci cand utilizatorulajunge la o pagina web. Programul afiseaza un anumit mesaj daca recunoaste sau nu numelevizitatorului. Daca "utilizator" nu este "null" variabila a fost definita. Acest lucru este posibildoar daca o valoare, ca " Media", este transferata functiei. Daca variabila "utilizator" este egal cu"null" atunci scriptul evita folosirea variabilei in mesajul de salut.


29/118

//-->

Acest script va afisa in pagina urmatorul rezultat:Prima apelare a functiei mesaj()Salut MediaA doua apelare a functiei mesaj()Bine ati venit pe site!- Studiati codul functiei si observati diferenta mesajelor din cele ddoua apelari.

In unele situatii unei functii ii sunt transferate mai multe argumente decat au fost specificate lacrearea ei. Valorile argumentelor suplimentare nu sunt pierdute, acestea se stocheaza intr-untablou (sau "matrice") numit "arguments" , care exista implicit pentru orice functie.Toate argumentele sunt pastrate in acest tablou si pot fi extrase in interiorul corpului functiei.

Argumentele functiei "mesaj" sunt stocate in tabloul "mesaj.arguments". Stocarea se face intr-oordine asigurata de o "cheie" a carei prima valoare este 0.Pentru a extrage primul element din tabloul "arguments" al functiei "mesaj" folosim sintaxa"arg1 = mesaj.arguments[0]", pentru al doilea "arg2 = mesaj.arguments[1]".Toate tablourile JavaScript sunt indexate pornind de la 0. Pentru a gasi numarul total deargumente din tablou putem folosi o instructiune speciala "length" care returneaza lungimea (nr.de elemente) unui tablou (numit si "matrice").Urmatorul exemplu atribue variabilei "nrArg" o valoare care reprezinta numarul de argumente(elemente) din tabloul "mesaj.arguments":

nrArg = mesaj.arguments.lengthFolosind instructiunile prezentate mai sus (legate de tabloul "arguments"), putem crea o nouaversiune a scriptului din primul exemplu. Aceasta versiune raspunde mai corect in functie decunoasterea sau nu a numelui utilizatorilor.


30/118

document.writeln(mesaj.arguments[i]);}

}}//-->

Acest exemplu va afisa in pagina web urmatorul rezultat:Salut Marius Bine ai revenit

Bine ati venit pe site Vrei sa devii membru ? Te poti inscrie online

2. Functii recursive

O functie JavaScript poate fi recursiva, adica se poate autoapela.O metoda buna de a demonstra capacitatea recursiva a functiilor este rezolvarea unei ecuatiifactoriale.In exemplul urmator avem o functie JavaScript recursiva care afla factorialul unui numarprecizat "n" (aici 7):


31/118

rezultat = 1;}else {rezultat = null;}

return(rezultat)}//-->

In fereastra browser-ului va apare urmatorul rezultat:Calculeaza factorialul de 7 prin functie recursiva

- Functia verifica intai daca "n" este mai mare decat 0, apoi in caz afirmativ, "n" se inmulteste cu

rezultatul returnat de auto-apelarea functiei cu argumentul "n-1". Cand "n" ajunge 0, aparitia cea

mai imbricata a functiei se incheie si returneaza prima valoare. JavaScript incheie fiecare functie

imbricata pana ce ajunge la apelarea initiala a functiei "factorial", apoi intoarce rezultatul final.

Obiectele Java Script - 1

Pentru inceput trebuie sa stiti ce sunt obiectele in programare si care sunt conceptelefundamentale ale programarii orientate spre obiecte (OOP).JavaScript nu este un program orientat pe obiecte (OO), cum sunt C++ sau Java, dar este bazatpe obiecte.In lumea din jurul nostru obiectele sunt de exemplu: o carte, o masina, un televizor; in JavaScriptobiectele sunt de exemplu: un formular, o fereastra, butoane, imagini ...Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte.Obiectele au anumite proprietati, de exemplu in lumea reala televizoarele au butoane, masinileau roti; asa si in JavaScript obiectele au proprietati: formularele au buton, ferestrele au titluri.Pe langa obiecte si proprietati, in JavaScript avem si termenul "metode".Metodele reprezinta functiile pe care un obiect poate sa le faca. Ferestrele se deschid cu metoda"open()", butoanele au metoda "click()". Parantezele rotunde "()" arata ca se face referire la ometoda, nu la o proprietate.Astfel, putem rezuma ca un obiect este o colectie de proprietati si functii (metode)Sintaxa pentru folosirea obiectelor este:


32/118

obiect.prorietateobiect.metoda()

- Punctul (.) se foloseste pentru a specifica detinatorul metodei sau proprietatii.

Obiectele din JavaScript le putem cataloga in trei categorii principale:

- Obiecte pe partea de client- Obiecte pe partea de server

- Obiecte esentiale

Astfel avem mai multe tipuri de obiecte care pot fi folosite, pentru incepatori e bine de stiut in principal

obiectele pe partea de client si cele esentiale, cum sunt: "string", "math" sau cele care vin de la

etichetele HTML.

Mai multe astfel de obiecte pot forma o celula (o grupa) numita "clasa", astfel, diferite obiecte

incorporate pentru o executie comuna formeaza un "set de clase" care se mai numeste si "biblioteca de

clase", iar mai exact pentru limbajul JavaScript "biblioteca de obiecte JavaScript", si pot fi refolosite.

JavaScript are urmatoarele obiecte esentiale, predefinite:

1 - String2 - Math

3 - Date

4 - Array

5 - Global

1. Obiectul string

String (sau sir) se foloseste pentru a prelua text.Proprietatea acestui obiect este:

length - returneaza numarul de caractere dintr-un sir (string)Metodele obiectului string sunt urmatoarele:

anchor() - Returneaza un sir ca si "anchor"big() - Returneaza un sir cu text mare

blink() - Returneaza un sir care clipeste

bold() - Returneaza un sir cu litere ingrosatecharAt() - Returneaza un caracter de la pozitia care este specificata

charCodeAt() - Returneaza codul ASCII al unui caracter de la o pozitie specificata

concat() - Returneaza doua siruri concatenate

fixed() - Returneaza un sir cu caractere tip

fontcolor() - Returneaza un sir cu o culoare specificata

fontsize() - Returneaza un sir cu litere de o anume marime

fromCharCode() - Returneaza valoare Unicode a unui caracater

indexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca subsirul nu e gasit,


33/118

valoarea -1

italics() - Returneaza un sir in italic (scris aplecat)

lastIndexOf() - Returneaza pozitia primei aparitii a unui subsir in un sir, sau daca acesta nu e

gasit, -1 (Importanr: se incepe din dreapta sirului spre stanga)

link() - Returneaza un sir ca hyperlink

match() - Similar cu indexOf si lastIndexOf, dar aceasta metoda returneaza sirul specificat sir,

sau "null", in locul unor valori numerice

replace() - Inlocuieste intr-un sir unele caractere specificate cu altele noi specificate.

search() - Returneaza un numar intreg daca sirul contine caracterele specificate, altfel

returneaza -1

slice() - Returneaza un sir incepand de la pozitia index specificata

small() - Returneaza un sir cu caractere mai mici

split() - Imparte un sir in mai multe siruri, in functie de caracterele specificate

strike() - Returneaza un sir taiat cu o linie la mijloc

sub() - Returneaza un sir ca indice

substr() - Returneaza un subsir specificat astfel, exemplu: 12,8 returneaza 8 caractere, incepand

de la caracterul al 12-lea (se incepe de la 0)

substring() - Returneaza un subsir specificat astfel, exemplu: 8,12 returneaza toate caracterele,incepand de la caracterul al 8-lea, pana la al 12-lea

sup() - Returneaza un sir ca putere (superscript)

toFixed(n) - Returneaza sirul numeric rotunjindu-l la o valoare cu 'n' zecimale

toLowerCase() - Converteste un sir in litere mici

toUpperCase() - Converteste un sir in litere mari

In continuare este prezentat un exemplu in care se foloseste proprietatea "length" pentru a afla cate

elemente are un sir si metoda "indexOf" prin care verificam daca un sir dat contine un anumit cuvant

specificat. Daca este gasit cuvantul, se returneaza pozitia primei litere din el, in caz contrar apare

mesajul "Cuvantul nu a fost gasit"

var str="MarPlo.net - Cursuri, Jocuri si Anime"

document.write(src+"
")

document.writeln("Acest sir are "+ str.length + " caractere")

var pos=str.indexOf("Jocuri")

if (pos>=0) {

document.write("Jocuri incepe de la pozitia: ")

document.write(pos + "
")

}

else

{

document.write("Cuvantul nu a fost gasit!")

}


34/118

Primului caracter din sir are pozitia 0, al doilea caracter are pozitia 1, si tot asa ....

Dupa ce este adaugat intr-un document HTML, acest script va afisa in pagina urmatorul rezultat:

MarPlo.net - Cursuri, Jocuri si Anime

Acest sir are 37 caractere Jocuri incepe de la pozitia: 22

- Iata un alt exemplu in care este foloseste metoda replace().

Avem un sir din care vom pastra doar numerele, eliminand toate celelalte caractere.

- In acest exemplu avem variabila "sir" ce contine sirul complet si o variabila "sablon" ce contine o

expresie regulata care reprezinta toate caracterele non-numerice, \D fiind echivalent cu [^0-9] (mai

multe detalii despre expresiile regulate gasiti la:RegExp Javascript).

- Expresia sir.replace(sablon, '') inlocuieste cu '' (adica nimic) caracterele din "sir" care se incadreaza in

"sablon".

- document.write(sir) va afisa sirul care a ramas, adica 12378

2. Obiectul Array (tablou sau matrice)

Obiectul Array (numit si matrice sau tablou de date) se foloseste pentru a stoca mai multe valoriintr-un singur nume de variabila.Fiecare valoare stocata devine un element al tabloului, acesta are asociat un "numar index" (saucheie). Cu ajutorul acestei chei se poate face referire la oricare element din tablou.Cu operatorul new se poate crea o "instanta" (incepere) a obiectului Array, ca in exemplulurmator:

var nume_colegi = new Array(4)- Unde intre parantezele rotunde este trecut numarul de elemente ale tabloului, aici 4.

Numarul de elemente, cheile, incep implicit de la 0.

Pentru a da valori elementelor din tablou, se scrie numele tabloului urmat de o pereche de paranteze

patrate, in interiorul carora se adauga cheia specifica fiecarui element, apoi semnul egal si valoarea

dorita. Dupa cum puteti vedea in urmatorul exemplu:
http://www.javascriptkit.com/javatutors/redev2.shtmlhttp://www.javascriptkit.com/javatutors/redev2.shtmlhttp://www.javascriptkit.com/javatutors/redev2.shtmlhttp://www.javascriptkit.com/javatutors/redev2.shtml


35/118

nume_colegi[0] = "Cristi"nume_colegi[1] = "Ion"

nume_colegi[2] = "Simona"

nume_colegi[3] = "Adi"

Sau puteti scrie si astfel:

var nume_colegi = Array('Cristi', 'Ion', 'Simona', 'Adi');- In cazul acesta cheile se subanteleg si sunt aceleasi ca in prima varianta, incepand cu 0.

Pentru a face referire la un anumit element din tablou si pentru a extrage anumite valori din Array, se

scrie numele tabloului si intre parantezele patrate cheia specifica acelui element; ca in exemplul

urmator:

coleg = nume_colegi[0]colega = nume_colegi[2]

Astfel, variabila "coleg" va avea valoarea "Cristi" si variabila "colega" valoarea "Simona".

Pentru a afla numarul de elemente ale unui Array, se foloseste proprietatea "length", ca in exemplu

urmator:

nr_colegi = nume_colegi.length

Obiectul Array are urmatoarele metode:

concat() - Returneaza un tablou rezultat din concatenarea a doua tablourijoin() - Returneaza un tablou format din toate elementele unui tablou concatenat

reverse() - Returneaza inversul unui tablou

slice() - Returneaza o parte specificata a unui tablou

sort() - Returneaza tabloul ordonat

Urmatorul exemplu foloseste o instructiune "for" care parcurge un tablou (aici tabloul "nume_colegi"),

extrage valoarea fiecarui element si o afiseaza.


36/118

var nr_elemente = nume_colegi.length; // Afla nr. elemente din matrice

document.write("Afiseaza numele fiecarui coleg:
");

for (i=0; i

- Am definit variabila "nr_elemente" pentru a afla numarul de elemente din matrice, pentru a-l folosi cu

instructiunea "for". Este utila aceasta metoda deoarece de multe ori putem lucra cu matrici ale caror nr.

de elemente nu-l stim exact. - In pagina HTML va fi afisat urmatorul rezultat:

Afiseaza numele fiecarui coleg:

Cristi

Ion

Simona

Adi

Iata un alt exemplu din care puteti intelege cum se aplica metoda "sort()" si efectul acesteia. Folosim

acelasi exemplu de mai sus.

"sort()" sorteaza elementele din Array in ordine alfabetica (sau crescatoare in cazul valorilor numerice).

- In pagina HTML va fi afisat urmatorul rezultat:


37/118

Afiseaza numele in ordine alfabetica:

Adi

Cristi

Ion

Simona

Incercati sa creati mici exemple in care sa lucrati si cu alte tabele (create de dv.) asi instructiuni.

In aceasta lectie este continuata prezentarea si explicarea obiectelor esentiale JavaScript

1. Obiectul Date

Obiectul Date se foloseste pentru a lucra cu data zilei si timp.

Sunt doua lucruri importante pe care trebuie sa le cunoasteti inainte de a folosi acest obiect:

1. Data initiala (de referinta) este 1-01-1970, nu puteti sa lucrati cu date anterioareacesteia.

2. Cand creati un obiect "Date", ora folosita de obiect este aceea de pe calculatorul client(al vizitatorului).

Pentru a crea o instanta a obiectului "Date" se foloseste operatorul new, ca in exemplu urmator:

var data = new Date- Astfel se memoreaza data curenta intr-o variabila, aici cu numele "data".Dupa ce a fost creata instanta, se pot folosi metodele obiectului.De exemplu, daca se doreste afisat numarul zilei (care e de la 1 la 31) se scrie urmatoareacomanda (aici e folosita instanta cu numele "data"):

data.getDate()Se pot crea si altfel obiecte Date, care pot afisa data si ora intr-un mod specificat:

new Date("Month dd, yyyy hh:mm:ss")new Date("Month dd, yyyy")

new Date(yy,mm,dd,hh,mm,ss)new Date(yy,mm,dd)

new Date(milliseconds)

- Unde: Month=luna, dd=ziua (cu 2 caractere), y=anul (yy e afisat cu 2 caractere iar yyyy cu 4),h=ora, m=minute, s=secunde, milliseconds=milisecunde.Astfel se pot crea variabile de data pt. fiecare obiect Date de mai sus, ca in exemplu urmator:


38/118

var data=new Date("October 15, 1996 15:16:00")var data=new Date("October 15, 1996")

var data=new Date(96,10,15,15,16,00)

var data=new Date(96,10,15)

var data=new Date(500)

- Metodele obiectului Date:

Date() - Returneaza un obiect Date getDate() - Returneaza data (ziua) din luna (intre 1-31) getDay() - Returneaza ziua dintr-un obiect Date (intre 0-6; 0=Duminica, 1=Luni, etc.) getMonth() - Returneaza luna dintr-un obiect Date (intre 0-11. 0=January, 1=February,

etc.) getFullYear() - Returneaza anul dintr-un obiect Date (patru cifre) getYear() - Returneaza anul dintr-un obiect Date (cu 2 cifre, intre 0-99). Este recomandat

getFullYear getHours() - Returneaza ora dintr-un obiect Date (intre 0-23) getMinutes() - Returneaza minutele dintr-un obiect Date (intre 0-59) getSeconds() - Returneaza secunda dintr-un obiect Date (intre 0-59) getMilliseconds() - Returneaza milisecunda dintr-un obiect Date (intre 0-999) getTime() - Returneaza numarul de milisecunde pana la miezul noptii getTimezoneOffset() - Returneaza diferenta de timp intre computer si GMT getUTCDate() - Returneaza data dintr-un obiect Date in (UTC) timp universal getUTCDay() - Returneaza ziua dintr-un obiect Date in timp universal getUTCMonth() - Returneaza luna dintr-un obiect Date in timp universal getUTCFullYear() - Returneaza anul (4 cifre) dintr-un obiect Date in timp universal getUTCHours() - Returneaza ora dintr-un obiect Date in timp universal getUTCMinutes() - Returneaza minutele dintr-un obiect Date in timp universal getUTCSeconds() - Returneaza secundele dintr-un obiect Date in timp universal getUTCMilliseconds() - Returneaza millisecundele dintr-un obiect Date in timp

universal parse() - Returneaza un sir ce are ca valoare numarul de millisecunde pana in January 01

1970 00:00:00 setDate() - Seteaza luna in un Obiect Date (intre 1-31) setFullYear() - Seteaza anul in un Obiect Date (four digits) setHours() - Seteaza ora in un Obiect Date (intre 0-23) setMilliseconds() - Seteaza millisecundele in un Obiect Date (intre 0-999) setMinutes() - Seteaza minutele in un Obiect Date (intre 0-59) setMonth() - Seteaza luna in un Obiect Date (intre 0-11. 0=January, 1=February) setSeconds() - Seteaza secunda in un Obiect Date (intre 0-59) setTime() - Seteaza millisecundele dupa 1/1-1970 setYear() - Seteaza anul in un Obiect Date (00-99) setUTCDate() - Seteaza data in un Obiect Date, in timp universal (intre 1-31) setUTCDay() - Seteaza ziua in un Obiect Date, in timp universal (intre 0-6. Sunday=0,

Monday=1, etc.)


39/118

setUTCMonth() - Seteaza luna in un Obiect Date, in timp universal (intre 0-11.0=January, 1=February)

setUTCFullYear() - Seteaza anul in un Obiect Date, in timp universal (four digits) setUTCHour() - Seteaza ora in un Obiect Date, in timp universal (intre 0-23) setUTCMinutes() - Seteaza minutele in un Obiect Date, in timp universal (intre 0-59)

setUTCSeconds() - Seteaza secundele in un Obiect Date, in timp universal (intre 0-59) setUTCMilliseconds() - Seteaza millisecundele in un Obiect Date, in timp universal

(intre 0-999) toGMTString() - Converteste un Obiect Date la un sir, ce contine ora GMT toLocaleString() - Converteste un Obiect Date la un sir, ce contine ora curenta toString() - Converteste un Obiect Date la un sir

Pentru a intelege mai bine obiectul Date si modul de lucru cu metodele lui, studiati si urmatorulexemplu:

Adaugat intr-un document HTML, in sectiunea BODY, acest script va afisa:Afiseaza data curenta a zilei:20.11.2010

2. Obiectul Math

Acest obiect include constante matematice si functii.Nu este nevoie sa fie creat (instantat) un obiect Math inainte de a fi folosit.Daca, de exemplu dorim sa obtinem un numar aleator intre 0 si 1, scriem comanda:

nr_aleator = Math.random

- Proprietatile obiectului Math (sunt o lista de constante matematice. Atentie! se scriu cu literamare):

E - Returneaza constanta lui Euler (2.7182.......) LN2 - Returneaza logaritm natural din 2 LN10 - Returneaza logaritm natural din 10 LOG2E - Returneaza logaritm in baza 2 din E


40/118

LOG10E - Returneaza logaritm in baza10 din E PI - Returneaza PI SQRT1_2 - Returneaza radical din 0.5 SQRT2 - Returneaza radical din 2

- Metodele obiectului Math:

abs(x) - Returneaza valoarea absoluta din x acos(x) - Returneaza arccosinus din x asin(x) - Returneaza arcsinus din x atan(x) - Returneaza arctangenta din x atan2(y,x) - Returneaza unghiul dintre axa si un punct (x,y) ceil(x) - Returneaza cel mai apropiat intreg mai mare sau egal cu x cos(x) - Returneaza cosinus din x exp(x) - Returneaza valoarea lui E la puterea x

floor(x) - Returneaza cel mai apropiat intreg mai mic sau egal cu x log(x) - Returneaza log natural din x max(x,y) - Returneaza maximul dintre x si y min(x,y) - Returneaza minimul dintre x si y pow(x,y) - Returneaza valoare a lui x la puterea y random() - Returneaza un numar aleator intre 0 si 1 round(x) - Rotunjeste pe x la cel mai apropiat intreg sin(x) - Returneaza sinus din x sqrt(x) - Returneaza radical din x tan(x) - Returneaza tangenta din x

Iata si un exemplu practic, urmatorul script rotunjeste o valoare (aici 8.35) la cel mai apropiatintreg:

document.write("8.35 rotunjit este: " + Math.round(8.35));Dupa ce este adaugat intr-un document HTML, in sectiunea BODY, acest script va afisa:8.35 rotunjit este: 8

Obiecte de tip Global

Obiectele de tip Global grupeaza proprietatile si metodele de nivel cel mai inalt, fara un obiectparinte, cum sunt functiile.Obiectul Global are trei proprietati:

Infinity - cuvant-cheie care reprezinta plus sau minus infinit NaN - reprezinta un obiect null, care nu are vreo valoare undefined - Indica daca o variabila a fost sau nu definita


41/118

Metodele acestui obiect (care pot fi considerate si functii JavaScript) sunt:

escape() - Intoarce un obiect sir in care toate caracterele non alfa-numerice sunttransformate in echivalentele lor numerice

eval() - Accepta un sir de instructiuni Java Script si il evalueaza ca fiind cod sursa

isFinite() - determina daca o variabila are limite finite isNaN() - determina daca o variabila este sau nu un numar. Number() - Converteste valoarea unui obiect in numar parseFloat() - transforma un sir intr-un numar de tip float (cu virgula) parseInt() - transforma un sir intr-un numar intreg string() - Converteste valoarea unui obiect in string (de tip sir) unescape() - ia o valoare hexazecimala si intoarce echivalentul sau in ISOLatin-1 ASCII

Pentru a intelege mai bine, studiati urmatorul exemplu. Aici este folosita de doua ori metoda"eval()", acesta transforma si interpreteaza argumentul primit in cod JavaScript.

function calculeaza(form) {form.rezultat.value = eval(form.expresie.value);}eval("alert('Bine ati venit pe site!')");

Introduceti o expresie matematica (adunare, scadere, inmultire, impartire), de exemplu (7*8

sau 3+8/2):

Rezultatul este:
Acest cod afiseaza la inceput o fereastra Alert apoi in browser va fi afisat urmatorul rezultat:

Introduceti o expresie matematica (adunare, scadere, inmultire, impartire), de exemplu (7*8 sau3+8/2):

Rezultatul este:

Dupa apasarea butonului "Calculare", prin "onclick" este accestata functia "calculeaza()".

Scriptul JavaScript din HEAD, transfera in campul cu nmele "rezultat", din FORM, valoarea

obtinuta prin evaluarea expresiei adaugate in campul "expresie", calcularea expresiei fiind

posibila datorita folosirii metodei "eval()".


42/118

JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie. Toate elementele suntvazute ca obiecte si fiecare obiect are anumite proprietati si metode sau alte obiecte.Cu JavaScript putem manipula usor obiectele. Pentru aceasta este importanta intelegerea ierarhiei

obiectelor HTML.

JavaScript intelege fereastra browser-ului ca pe un obiect window, acesta contineanumite elemente, cum ar fi de exemplu bara de stare (status bar).

In fereastra browser-ului putem incarca (afisa) un document HTML (sau si de alt tip, daraici ne referim la HTML). Aceasta pagina din interiorul navigatorului este un obiectdocument.

1. Obiectul document

Acesta este unul din obiectele cele mai importante in JavaScript, este folosit foarte des.

Obiectul Window lasa continutul unui document web in grija obiectului Document, acesta esteresponsabil de continutul afisat pe o pagina si se poate lucra cu el pentru afisarea de paginiiHTML dinamice.Obiectul document contine mai multe proprietati, cum ar fi culoarea de fundal a paginii (bgcolor)sau alte obiecte, cum sunt tag-urile HTML. De retinut ca toate elementele HTML sunt proprietatiale obiectului document, si la randul lor acestea sunt obiecte. Un obiect HTML este de exempluun formular, o eticheta DIV sau un link.Pentru a desemna obiectul sau proprietatea curenta pe care dorim sa o folosim, adaugamcuvantul this urmat de caracterul punct (.) si numele proprietatii, dupa cum vedeti in urmatoareasintaxa:

this.nume_proprietate

Astfel aceasta expresie se adreseaza proprietatii "nume_proprietate" din obiectul curent.

Obiectul document are urmatoarele proprietati:

alinkColor - culoarea unei legaturi active all - tabloul tuturor etichetelor HTML din document anchors - tabloul de obiecte "Anchor", in ordinea specificata in sursa applets - tabloul de obiecte "Applet" bgcolor - culoarea de fundal a documentului

classes - tabloul claselor paginilor cu stiluri cookie - fisier cookie asociat cu documentul domain - domeniu al documentului embeds - tablou de obiecte inglobate fgcolor - culoarea textului in document forms[] - tablou de obiecte "Form" (formular) formName - specifica instanta "Form" care este accesata prin folosirea valorii atributului

"name" din eticheta


43/118

height - specifica inaltimea documentului in pixeli ids - tabloul identificatorilor paginii cu stiluri images - tablou de obiecte "Image" lastModified - data cand a fost modificat ultima oara documentul layers - tablou de obiecte "Layer"

linkColor - culoarea legaturilor links - tablou de obiecte "Link", ce corespund tuturor link-urilor HREF din document, in

ordinea specificata in sursa plugins - tablou de obiecte inglobate referrer - adresa URL (externa) a documentului la care a fost legat documentul curent tags - tabloul etichetelor paginii cu stiluri title - titlul documentului URL - adresa URL a documentului curent vlinkColor - culoarea legaturilor vizitate width - specifica latimea documentului in pixeli lastModified - URL-ul documentului

Obiectul document are urmatoarele meode:

captureEvents() - captureaza evenimentele care vor fi tratate de document close() - inchide fluxul datelor de iesire spre document contextual() - permite sa aplicam in mod selectiv un stil unui element HTML care apare

intr-un anumit context specific getSelection() - intoarce textul selectat handleEvent() - apeleaza handlerul pentru evenimentul specificat open() - deschide fluxul datelor de iesire spre document releaseEvents() - elibereaza evenimentele capturate de document routeEvent() - dirijeaza evenimentele capturate spre alte obiecte write() - adauga text in document writeln() - adauga text si un caracter linie noua in document (textul pe linia lui)

In urmatorul exemplu puteti vedea cum au fost folosite proprietatile obiectului document pentrustabilirea culorii de fundal, a textului, link-urilor si titlul unei pagini web:Acest script seteaza culoarea de fundal a pagini "#eaeafe" (un albastru desechis), culoareatextului rosu, a legaturilor verde si titlul "Lectie Java Script".


44/118

2. Obiectul document si Formulare

Formularele de asemenea pot fi considerate si tratate ca obiecte dintr-un document HTML,acestea fiind sub-obiecte ale obiectului "document", astfel se apeleaza impreuna cu acesta.Penru a intelege mai bine lucrul cu obiectul document si cum se lucreaza cu ierarhia obiectelor,

studiati si urmatorul exemplu:

Name:

Acest cod va afisa in pagina urmatorul formular:

Name:

Dupa ce scrieti in campul "Name" un nume si apasati butonul "Apasa" va apare o vereastra Alertcu mesajul "Salut "nume" ".Ierarhia obiectelor din pagina afisata de acest exemplu este urmatoarea:

document (pagina HTML) -> Forms[0] (sau numele formularului din "name" - intregulformular) -> {Element[0] (primul camp din formular), Element[1] (butonul dinformular)}

Daca de exemplu doriti sa aflati ce se introdce in primul element din formular, trebuie sa vaganditi cum sa accesati acest obiect.Pornim din vrful ierarhiei "document", urmarim calea catre primul formular "forms[0]" pana laobiectul numit "elements[0]" (se adauga toate numele obiectului pe masura ce le depasim).Astfel putem accesa primul element prin :

document.forms[0].elements[0]


45/118

Pentru a afla ce text a fost introdus, apelam valoarea acelui element. Pentru elemente dinformular (tip "input") se foloseste proprietatea "value". Acesta arata valoarea casetei "input"respective (aici textul introdus in campul de text). Acum putem afla valoarea cu ajutorulurmatoruli cod:

name = document.forms[0].elements[0].value;

Valoarea este stocata in variabila "name", pe care o putem folosi in script.Astfel, putem crea o fereastra cu ajutorul liniei de cod "alert("Salut! " + name)", unde "name" vafi valoarea variabilei "name" care reprezinta textul introdus in primul element din primulformular.

Daca aveti formulare de dimensiuni mari, poate deveni dificila apelarea obiectelor dupa ordinealor, prin numere intre paranteze patrate. Daca am avea trei formulare si vrem sa apelam alcincisprezecelea element (camp) din al treilea formular, ar trebui sa scriem"document.forms[2].elements[14]". Pentru a facilita astfel de apelari, se pot da nume unice

diferitelor obiecte, folosind atributul "name", dupa cum puteti vedea in exemplu urmator:

Nume:

Astfel "forms[0]" este de asemenea "nume_form" si in loc de "elements[0]" puteti utiliza

"nume_element" (specificat cu atributul "name" in eticheta ).

Prin urmare, in loc de a scrie "name = document.forms[0].elements[0].value;" se poate scrie:

"name = document.nume_form.nume_element.value;"

DOM (Document Object Model) defineste o structura logica si standardizata a documentelor, oordine prin care putem parcurge si edita elemente si continut din documente HTML sau XML.Structura DOM este o ierarhie de obiecte, compatibila cu a limbajului JavaScript sau cu aoricarui limbaj bazat pe obiecte.In schema urmatoare puteti vedea modelul si ierarhia obiectelor:


46/118

In ierarhia prezentata mai sus observati ca obiectele sunt structurate pe 3 nivele principale.Obiectul "window" este considerat pe cel mai inalt nivel, urmeaza apoi obiectele de pe nivelul I,nivelul II si nivelul III.Obiectul din nivelul 1, de exemplu "document", contine obiectele din nivelul 2 (de ex. "forms[])care la randul lor pot contine alte obiecte, de nivel 3 (de ex. "Buttons"). Astfel, in JavaScript,continerea este principiul conform caruia un obiect contine alt obiect. De exemplu relatia dintreobiectul "Form" si obiectul "Button" nu este una dintre clasa si subclasa, ci una intre container sicontinut. Prin urmare, un obiect nu poate mosteni proprietatile si metodele altui obiect.

1. Obiecte pe partea de client

Elementele principale legate de lucrul pe partea de client din JavaScript se axeaza pe ceea ceputem face cu paginile HTML, mai exact - ceea ce poate face vizitatorul cu scriptul Javascript


47/118

incarcat in pagina HTML.Primul set de obiecte are o legatura cu navigatorul si cu etichetele HTML din acesta.Puteti accesa sau transfera continutul unei eticheta HTML (de exemplu dintr-un ... )utilizand id-ul acesteia, folosind expresia:

nume_var = document.getElementById("id").innerHTML;

- sau nume_var = document.getEl ementById(" id" ).chil dNodes[0].nodeValue;

-Aici, "nume_var" este o variabila care preia continutul incadrat de tag-ul HTML care areatributul id="id".

Pentru a schimba sau adauga continut intr-un element HTML cu un id specific, folositi expresiade mai sus in sens invers, adica:

document.getElementById("id").innerHTML = "continut"Unde "id" este valoarea atributului "id" din etiheta HTML respectiva iar "continut" estecontinutul (text, tag-uri) care va fi adaugat in aceasta eticheta HTML (va inlocui orice alt contextcare se afla in cadrul acestui element HTML).

Majoritatea obiectelor JavaScript din nivelul 2 sunt vazute ca obiecte ale tag-urilor HTML, dupacum puteti observa in lista de mai jos, in care sunt prezentate obiectele JavaScript si eticheteleHTML corespunzatoare:

Button - Checkbox -

Hidden - Fileupload - Password - Radio - Reset - Select - Frame - Document - Layer - sau Link- Image - Area - Anchor - Applet - Plugin - Form - Submit - Text -


48/118

Textarea - Option -

2. Exemplu script

Urmatorul script este un exemplu practic de folosire a ierarhiei DOM din JavaScript sielementele HTML.Cu ajutorul acestui script puteti prelua datele (textul) din interiorul unui " ... " pentrua le adauga intr-o caseta , astfel aceste date pot fi usor trimise la un script PHP.

Script JSAici este textul din interiorul Div-ului

- Am definit functia "CitesteDiv()" care va fi apelata la apasare butonului "Adauga". In interiorulacestei functii avem variabila "valDiv" care (prin codul"document.getElementById("div_id").childNodes[0].nodeValue;") preia continutul din elementulHTML "" cu id-ul "div_id", apoi codul ("document.formular.text.value") defineste valoareacasetei (cu atributul name="text") din formular egala cu valoarea variabilei "valDiv".Acest cod va afisa in pagina urmatorul rezultat:Aici este textul din interiorul Div-ului

Trimite


49/118

- Daca apasati butonul "Adauga", textul din interiorul etichetei ... va fi introdus informular cara apoi prin apasarea butonului "Trimite" poate fi trimis la un script PHP (aici"fisier.php").

- Exemplu 2

Iata un alt exemplu, cu o actiune inversa celui de sus. Adica, textul introdus intr-un camptextarea, dupa apasarea unui buton va fi inclus in pagina in cadrul unei etichete HTML ,fara ca pagina sa fie reincarcata.Retineti, aceasta actiune este pe partea de client, vizibila doar de utilizatorul actual, nu modifica

pagina originala de pe server si dupa inchiderea navigatorului textul introdus dispare.Script JSAici va apare textul din formular

- Am definit functia "ScrieDiv()" care va fi apelata la apasare butonului "Afiseaza". In interiorulacestei functii avem variabila "valText" care (prin codul "document.formular2.text2.value") preiasirul adaugat in campul "text2" din formular, apoi, prin comanda"document.getElementById("div_id2").innerHTML" transfera si afiseaza sirul in cadrul etichetei, inlocuindu-l pe cel existent.Acest cod va afisa in pagina urmatorul rezultat:Aici va apare textul din formular


50/118

- Adaugati orice text in campul din formular apoi apasati butonul "Afiseaza", veti vedearezultatul.

Aici am folosit exemple cu DIV, dar puteti folosi in mod similar si pentru alte tag-uri HTML,cum sunt:

, , , , , si altele; important fiind atributul "id" si valoarea

acestuia.

In aceasa lectie sunt prezentate obiectele JavaScript de nivel 1: obiectul "navigator (browser)",obiectul "History" si obiectul "Location"

1. Obiectul Navigator

Obiectul Navigator reprezinta programul, aplicatia browser folosita pentru vizualizarearezultatelor.

Cu acest obiect putem gasi informatii despre denumirea si versiunea browser-ului, precum si alteinformatii care pot fi folosite in practica.Obiectul Navigator are la randul lui doua sub-obiecte (sau obiecte copil) : "Plugin" si"Mimetype".

- Proprietati ale obiectului "navigator" sunt urmatoarele:

appCodeName - reprezinta numele de cod al browserului appName - reprezinta numele oficial al browserului appVersion - versiunea browserului language - limbajul browserului mimeTypes - face referire la un tablou de obiecte "Mimetype" care contine toate tipurileMIME pe care le accepta browserul platform - un sir care reprezinta platforma pe care ruleaza browserul plugins - face referire la un tablou de obiecte "Plugin" care contine toate modulele plugin

instalate pe browser userAgent - sir care reprezinta antetul utilizator-agent

- Metode ale obiectului "navigator" sunt urmatoarele:

javaEnabled() - functie care testeaza daca browserul cunoaste sau nu limbajul JAVA plugins.refresh() - cauta orice module plugin nou instalate preference() - permite citirea si stabilirea diverselor preferinte ale utilizatorului in

browser taintEnabled() - testeaza daca este activata contaminarea datelor

Urmatorul script afiseaza proprietatile si metodele navigatorului (browser-ului) folosit:


51/118

In pagina dv. acesta afiseaza urmatorul rezultat:

Nume cod :MozillaNume browser :Netscapeversiune :5.0 (Windows; ro)limbaj :roMIME Type :[object MimeTypeArray]Platforma :Win32Plugin-uri :[object PluginArray]Agent :Mozilla/5.0 (Windows; U; Windows NT 6.1; ro; rv:1.9.2.12) Gecko/20101026Firefox/3.6.12 ( .NET CLR 3.5.30729)

2. Obiectul History

Navigatoarele web au o caracteristica numita "History" care permite urmarirea locatiilor pe carele-ati vizitat. Acest obiect contine un tablou (Array) cu paginile vizitate de client, in cadrul uneiferestre, un istoric al paginilor vizitate.Obiectul History permite navigarea inapoi in lista istoric la paginile care au mai fost vizitate incadrul aceleasi ferestre.

- Proprietatile obiectului "history" sunt urmatoarele"

current - face referire la adresa URL curenta din lista istoric length - intoarce numarul de intrari din lista istoric

next - face referire la urmatoarea adresa URL din lista istoric previous - face referire la adresa URL anterioara din lista istoric

- Metodele obiectului "history" sunt urmatoarele"

back() - incarca ultima adresa URL din lista istoric forward() - incarca urmatoarea adresa URL din lista istoric


52/118

go(x) - incarca o adresa URL, echivalenta cu un salt la numarul "x" (pozitiv sau negativ)din lista istoric

Daca dorim intoarcerea inapoi cu 3 pagini in lista istoric, putem folosi o functie si obiectul

"History" ca in exemplul urmator:- Unde "inapoi3" este numele functiei si (-3) reprezinta numarul de pagini la care se face saltul,pornind de la pagina curenta, negativ face saltul inapoi iar daca numarul dintre paranteze estepozitiv face saltul inainte in lista istoric.

3. Obiectul Location

Acest obiect contine date despre originea unei pagini web, stocheaza informatii despre o adresaURL dintr-o fereastra specifica.

- Proprietatile obiectului "location" sunt urmatoarele"

hash - reprezinta un nume de ancora in adresa URL, care incepe cu caracterul diez (#) host - reprezinta numele calculatorului gazda si numarul de port al adresei URL hostname - reprezinta partea cu numele calculatorului gazda din adresa URL

href- reprezinta adresa URL completa pathname - reprezinta partea PATH_INFO a adresei URL port - reprezinta partea de port a adresei URL protocol - reprezinta partea de protocol a adresei URL search - partea de cautare a adresei URL, inclusiv caracterul "?"

- Metodele obiectului "location" sunt urmatoarele"

reload() - reincarca adresa URL curenta in fereastra de browser replace() - incarca noua pagina transferata in browserul curent

De exemplu, daca doriti sa preluati intr-un script JS parti din adresa URL, si anume domeniul sicalea catre pagina curenta sau toata adresa (fara protcol, care de obicei e "http:" ori "https":),puteti folosi modelul urmator:


53/118

var domeniu = window.location.hostname; // Preia numele domeniului din adresa URLvar cale = window.location.pathname; // Preia cale ce reprezinta directorul si pagina

curentavar url = domeniu+cale; // Compune variabilele pt. a forma adresa URL (fara

protocol)

alert("Adresa paginii este: \n" + url);}//-->

- Acest script va avea urmatorul rezultat, va afisa in pagina butonul de mai jos care, dupa ce vetida click, va afisa o fereastra alert cu domeniul si adresa paginii curente.

- Studiati scriptul si comentariile din codul lui.

Daca doriti sa regasiti portiunea de protocol a adresei URL curente, puteti folosi urmatorulexemplu :

var protocol = window.location.protocol;

- Observati modul de lucru bazat pe obiecte. Intai se adauga obiectul de rang superi or (

window ) apoi, dupa un caracter punct (.) se adauga urmatorul sub-obiect in care vrem sa

lucram (aici " location" ), si dupa un caracter punct adaugam proprietatea acestui obiect la

care vrem sa facem referi re.

Pentru o mai buna invatare, incercati sa creati singuri si alte exemple folosind si alte proprietati

si metode ale obiectelor prezentate in lectie.

In aceasta lectie sunt prezentate subobiecte ale obiectului "Navigator" si "Document", care inierarhia generala pot fi considerate obiecte de nivel doi.

1. Obiectul Mimetype


54/118

Numele acestui obiect vine de laMultipurpose Internet Mail Extensions (extensii aduseserviciului de posta electronica) si este un subobiect al obiectului "Navigator".Mimetype permite accesarea informatiilor despre tipurile MIME pe care le recunosc moduleleplugin ale browserului.Acesta, ca si obiectul "Plugin", nu sunt recunoscute de Internet Explorer (cel putin pana in

versiunea 7).

Proprietati ale obiectului "Mimetype" sunt urmatoarele :

description - contine descrierea obiectului "Mimetype"enabledPlugin - contine modulul plugin pentru un obiect "Mimetype" specificsuffixes - contine extensia de fisier pentru "Mimetype"type - contine reprezentarea de tip sir a obiectului "Mimetype"

2. Obiectul Plughin

La fel ca si "Mimetype", nici obiectul Plughin nu este recunoscute de Internet Explorer.Acest obiect face referire la modulele plugin instalate pentru browser si contine un tablou deelemente si tipuri MIME tratate de fiecare modul plugin instalat.Obiectul "Plugin" are o singura metoda legata direct de el : metoda "plugins.refresh()", careapartine de obiectul "navigator". Aceasta metoda permite reconstruirea tabloului de moduleplugin.

Proprietatile obiectului "Plugin" sunt urmatoarele :

description - face referire la o descriere a modulului pluginfilename - face referire la numele fisierului unui program plugin

length - face referire la numarul de tipuri MIME continute in tablouname - face referire la numele modulului plugin

3. Obiectul Anchor

Acest obiect este un text sau o imagine in pagina HTML care poate fi tinta unei legaturihipertext. "Anchor" este un obiect JavaScript foarte putin important si folosit rar, totusi e bine sa-l cunoasteti

Proprietatie obiectului "Anchor" sunt urmatoarele :

name - nume care ofera acces la ancora de la o legaturatext - textul care apare intre etichetele si x - coordonata x a ancoreiy - coordonata y a ancorei

4. Obiectul Area


55/118

Obiectul Area permite sa definim o suprafata dintr-o imagine ca fiind o harta de imagini.Atributul "href" al unui obiect "" este incarcat intr-o fereastra tinta atunci cand vizitatorulexecuta click pe o locatie specificata.Mai multe detalii despre hartile de imagini HTML gasiti la paginaHarti de imagini.

Acest obiect are o singura metoda:

handleEvent() apeleaza handlerul de evenimente asociat acestui eveniment

Proprietatie obiectului "Area" sunt urmatoarele :

hash - portiunea de adresa URL care este ancora, inclusiv semnul diez ( # )host - numele calculatorului gazda (adresa IP) si portul specificat in adresa URLhostname - numele calculatorului gazda specificat in adresa URLhref- intreaga adresa URL

pathname - calea fisierului specificat in adresa URL, incepand cu simbolul /port - portul specificat in adresa URLprotocol - protocolul specificat in adresa URL, inclusiv caracterul doua puncte ( : )search - partea de cautare a adresei URL, inclusiv caracterul initial semnul intrebarii (? )target - numele ferestrei tinta in care ar trebui afisata adresa URLtext - textul care apare intre etichetele si x - coordonata x a suprafeteiy - coordonata y a suprafetei

5. Obiectul Applet

Obiectul Applet reprezinta echivalentul JavaScript al etichetei HTML .Acest obiect adreseaza un applet Java. Aceste obiecte JavaScript nu au metode proprii, dar inpractica putem folosi JavaScript ca sa accesam metodele unui anumit applet scris in limbajulJava.Proprietatile obiectului "Applet" sunt toate campurile publice ale respectivului applet Java, iarmetodele sunt toate metodele publice ale acestuia.

6. Obiectul Layer

Si acesta este un obiect cu anumite particularitati, este recunoscut doar de browserele Netscape,Mozilla si permite limbajului JavaScript sa acceseze straturile din interiorul documentului.

Utilizarea acestui obiect necesita cunostinte DHTML.

Proprietatie obiectului "Layer" sunt urmatoarele :

above - specifica stratul de deasuprabackground - face referire la imaginea de fundal a stratuluibelow - specifica stratul de dedesubtbgColor - face referire la culoarea de fundal a stratului
http://www.marplo.net/html/harti_de_imagini.htmlhttp://www.marplo.net/html/harti_de_imagini.htmlhttp://www.marplo.net/html/harti_de_imagini.htmlhttp://www.marplo.net/html/harti_de_imagini.html


56/118

clip.bottom - face referire la partea de jos a suprafetei decupate a stratuluiclip.height - face referire la inaltimea suprafetei decupate a stratuluiclip.left - face referire la partea stanga a suprafetei decupate a stratuluiclip.right - face referire la partea dreapta a suprafetei decupate a stratuluiclip.top - face referire la partea de sus a suprafetei decupate a stratului

clip.width - face referire la latimea suprafetei decupate a stratuluidocument - face referire la obiectul "Document" care contine stratulleft - face referire la coordonata X a stratuluiname - face referire la numele stratuluipageX - face referire la coordonata X, relativ la documentpageY - face referire la coordonata Y, relativ la documentparentLayer - face referire la stratul containersiblingAbove - face referire la stratul de deasupra in "zIndex"siblingBelow - face referire la stratul de dedesubt in "zIndex"src - face referire la adresa URL sursa pentru strattop - face referie la coordonata Y a stratului

visibility - face referire la starea de vizibilitate a stratuluiwindow - face referire la obiectul "Window" sau "Frame" care contine stratulx - face referire la coordonata X a stratuluiy - face referire la coordonata Y a stratuluizIndex - face referire la ordinea z-relativa a acestui strat in raport cu fratii lui

Metodele obiectului "Layer" sunt urmatoarele :

captureEvent() - specifica tipul de evenimente care sa fie capturatehandleEvent() - apeleaza handlerul pentru evenimentul specificatload() - incarca o noua adresa URLmoveAbove() - deplaseaza stratul deasupra altui stratmoveBelow() - deplaseaza stratul sub alt stratmoveBy() - deplaseaza stratul intr-o pozitie specificatamoveTo() - deplaseaza coltul din stanga sus al ferestrei la coordonatele specificate aleecranuluimoveToAbsolute() - modifica pozitia stratului in pagina, conform coordonatelorspecificate in pixelireleaseEvents() - stabileste ca stratul sa elibereze evenimentele capturate de tipulspecificatresizeBy() - redimensioneaza stratul cu valorile de inaltime si latime specificateresizeTo() - redimensioneaza stratul la valorile de inaltime si latime specificate

7. Obiectul Link

Obiectul linkpermite lucrul cu legaturi (link-uri) in cadrul codului JavaScript. Deoarece un linkreprezinta un URL care face referire la o alta pagina HTML sau la alta destinatie, esteasemanator cu obiectul "Location" (care continea aceleasi informatii pentru pagina HTMLcurenta).


57/118

Acest obiect are o singura metoda:

handleEvent() apeleaza handlerul pentru evenimentul specificat

Proprietatie obiectului "Link" sunt urmatoarele :

hash - reprezinta o denumire de ancora in adresa URL pentru legatura, care cu caracteruldiez ( # )host - reprezinta portiunea de calculator gazda din adresa URL asociata cu o legaturahostname - reprezinta portiunea de nume al calculatorului gazda din adresa URL asociatacu o legaturahref- reprezinta adresa URL completa asociata cu o legaturapathname - reprezinta portiunea numelui de cale a legaturii URLport - reprezinta portiunea de port a legaturii URL

protocol - specifica portiunea de protocol a legaturii URLsearch - reprezinta portiunea de interogare a legaturii URLtarget - reprezinta numele obiectului "Window" in care este afisata legaturax - face referire la coordonata X a legaturiiy - face referire la coordonata Y a legaturiitext - textul folosit pentru crearea legaturii

- Ati intalnit de mai multe ori expresia "hanler de evenimente", pentru a intelege ce reprezinta,vedetiLectia 18

Obiectele de nivelul 3 sunt subobiecte ale obiectului "Form".La fel cum imbricati (adAaugati) elementele HTML in interiorul etichetelor , acesteobiecte sunt imbricate in interiorul obiectului "Form".

1. Obiectul Button

Java Script are trei obiecte buttons: Button, Submit si Reset. Fiecare din ele are o reprezentare aunei etichetei HTML.Obiectul Button este un buton generic, la care, pentru a fi folosit pt. o anumita functie, trebuiesa-i adaugam linii de cod specifice, dar celelalte doua: Submit (trimite datele la un script) siReset (sterge datele noi completate in formular); au scopuri specifice. Totusi, se poate sa folosimun obiect "Button" pentru a avea acelasi rol ca si obiectul "Submit" (apeland Form.submit()),sau ca obiect "Reset" (apeland Form.reset()).
http://www.marplo.net/javascript/evenimente.htmlhttp://www.marplo.net/javascript/evenimente.htmlhttp://www.marplo.net/javascript/evenimente.htmlhttp://www.marplo.net/javascript/evenimente.html


58/118

Proprietati ale obiectului "Button" sunt urmatoarele :

form - returneaza obiectul Form al carui membru este butonulname - returneaza sirul specificat in atributul name al etichetei HTML

type -

Date post:	14-Apr-2018
Category:	Documents
Upload:	alcatalinadrian
View:	234 times
Download:	2 times

112071788 Javascript Curs

Documents