JavaScript JavaScript 1. Introducere 2. Sin Sintaxa taxa Ja JavaSc vaScri ript pt 3. Notiuni de baza 4. Operatori 5. Instr Instruc ucti tiun unii Co Condi nditi tion onal alee 6. Inst Instru ruct ctiu iuni ni cicl ciclic icee 7. Instr Instruc ucti tiun unii Co Comp mple leme ment ntar aree 8. Aler Alert, t, Prom Prompt pt,, Con Confi firm rm 9. Functii JS 1 10.. Func 10 Functi tiii JS JS 2 11. Obiec Obiecte te JavaSc JavaScrip riptt 1 12. Obiec Obiecte te JavaSc JavaScrip riptt 2 13. Ierarh Ierarhia ia JavaScr JavaScript ipt 14. DOM 15. Obiec Obiecte te nivel nivel 1 16. Obiec Obiecte te nivel nivel 2 17. Obiec Obiecte te nivel nivel 3 18. Obiec Obiecte te nive nivell 3-4 3-4 19.. Even 19 Evenim imen ente te JS 20. Obiec Obiectul tul image image 1 21. Obiec Obiectul tul image image 2
22. Obiec Obiectul tul form form 1 23. Obiec Obiectul tul form form 2 24. Obiec Obiectul tul window window 1 25. Obiec Obiectul tul window window 2 26. Ferest Ferestre re Frame Frame 27.. Co 27 Cook okie ie 1 28.. Co 28 Cook okie ie 2 29. getEle getElemen mentBy tByld ld 30. getEle getElemen mentBy tByTag TagNam Namee 31. createEle createElement-i ment-insertB nsertBefore efore 32. JavaSc JavaScrip riptt cu PhP
22. Obiec Obiectul tul form form 1 23. Obiec Obiectul tul form form 2 24. Obiec Obiectul tul window window 1 25. Obiec Obiectul tul window window 2 26. Ferest Ferestre re Frame Frame 27.. Co 27 Cook okie ie 1 28.. Co 28 Cook okie ie 2 29. getEle getElemen mentBy tByld ld 30. getEle getElemen mentBy tByTag TagNam Namee 31. createEle createElement-i ment-insertB nsertBefore efore 32. JavaSc JavaScrip riptt cu PhP
Introducere
JavaScript a fost dezvoltat prima data de catre firma Netscape, cu numele de Live Script, un limbaj de script care extindea capacitatile HTML, ofera o altern alternati ativa va partia partiala la la utiliz utilizare areaa unu unuii numar numar mare mare de script scripturi uri CGI(Co CGI(Commo mmonn Graphics Interface) pentru prelucrarea informatiilor din formulare si care adauga dinamism in paginile web. Dupa lansarea limbajului Java, Netscape a inceput sa lucreze cu firma Sun, cu scopul de a crea un limbaj de scripting cu o sintaxa si semantica asemanatoare cu a limbajului Java, iar din motive de marketing numele noului limbaj de script a fost schimbat in "JavaScript". Java Script a aparut din nevoia ca logica si inteligenta sa fie si pe partea de client, nu doar pe partea de server. Daca toata logica este pe partea de server, intreaga prelucrare este facuta la server, chiar si pentru lucruri simple, asa cum este, spre exemplu, validarea datelor. Astfel, Java Script il inzestreaza pe client si face ca relatia sa fie un adevarat sistem client-server. Limbajul HTML ofera autorilor de pagini Web o anumita flexibilitate, dar statica. Documentele HTML nu pot interactiona cu utilizatorul în alt mod mai dinamic, decât pune la dispozitia acestuia legaturi la alte resurse (URL-uri). Crearea de CGI-uri (Common Graphics Interface) – [programe care ruleaza pe serverul Web si care accepta informatii primite din pagina de web si returneaza cod HTML] – a duss la imbo du imboga gati tire reaa po posi sibi bili lita tati tilo lorr de lucr lucru. u. Astf Astfel el,, un pas pas impo import rtan antt spre spre interactivizare a fost realizat de JavaScript, care permite inserarea în paginile web a script-urilor care se executa în cadrul paginii web, mai exact în cadrul browser-ului utilizatorului, usurand astfel si traficul dintre server si client. De exemplu, într-o pagina pentru colectarea de date de la utilizator se pot adauga scripturi JavaScript pentru a valida corectitudinea introducerii si apoi pentru a trimite serverului doar date corecte spre procesare. JavaScript contine o lista destul de ampla de functii si comenzi menite sa ajute la operatii matematice, manipulari de siruri, sunete, imagini, obiecte si ferestre ale browser-ului, link-urile URL si verificari de introduceri ale datelor în formulare. Codu Co dull nece necesa sarr aces acesto torr acti actiun unii poa poate te fi inse insera ratt în pagi pagina na we webb si exec execut utat at pe calculatorul vizitatorului. Dupa Du pa lans lansar area ea sa, sa, in dece decemb mbri riee 19 1995 95,, Java JavaSc Scri ript pt si-a si-a atra atrass spri spriji jinu null principalilor distribuitori din domeniu, cum sunt su nt Apple, Borland, Informix, I nformix, Oracle, Sybase, HP sau IBM. S-a dezvoltat in continuare, obtinand recunoastere majoritatii browserelor. Intelegand importanta scripting-ului web, Microsoft s-a dorit sa ofere suport si pentru JavaScript. Netscape a preferat sa acorde licenta de tehnologie companiei Microsoft in loc sa o vanda, astfel Microsoft a analizat JavaScript, si bazandu-se pe documentatia publica a creat propria sa implementare, "Jscript", care este recunoscuta de Microsoft Internet Explorer. Jscri Jscript pt 1.0 este este aprox aproxim imat ativ iv comp compat atib ibil il cu Java JavaSc Scrip riptt 1.1, 1.1, care care este este recunoscut de Netscape Navigator. Totusi, versiunile ulterioare de JavaScript si
diversele diferente specifice platformelor de operare au inceput sa dea destule probleme programatorilor web si astfel Netscape, Microsoft si alti distribuitori au fost de acord sa predea limbajul unei organizatii internationale de standardizare – ECMA ; aceasta a finalizat o specificatie de limbaj, cunoscuta ca ECMAScript, recunoscuta de toti distribuitorii. Desi standardul ECMA este util, atat Netscape cat si Microsoft au propriile lor implementari ale limbajului si continua sa extinda limbajul dincolo de standardul de baza. Pe langa Jscript, Microsoft a introdus si un concurent pentru JavaScript, numit VBScript, realizat pentru a usura patrunderea pe web a programatorilor VB. VBScript este un subset al limbajului Visual Basic. Cu toate acestea JavaScript a devenit cunoscut ca limbajul de scripting standard pentru web. In general se considera ca exista zece aspecte fundamentale ale limbajului JavaScript pe care orice programator in acest limbaj ar trebui sa le cunoasca: - De obicei codul JavaScript este gazduit in documentele HTML si executat in interiorul lor. Majoritatea obiectelor JavaScript au etichete HTML pe care le reprezinta, astfel incat programul este inclus pe partea de client a limbajului. JavaScript foloseste HTML pentru a intra in cadrul de lucru al aplicatiilor pentru web. JavaScript este dependent de mediu – JavaScript este un limbaj de scripting; software-ul care ruleaza de fapt programul este browser-ul web (Firefox, Opera, Netscape Navigator, Internet Explorer, Safari, etc.). Este important sa luam in considerare aceasta dependenta de browser atunci cand utilizam aplicatii JavaScript. JavaScript este un limbaj in totalitate interpretat – codul scriptului va fi interpretat de browser inainte de a fi executat. JavaScript nu necesita compilari sau preprocesari, ci ramane parte integranta a documentului HTML. Dezavantajul acestui limbaj este ca rularea dureaza ceva mai mult deoarece comenzile JavaScript vor fi citite de navigatorul Web si procesate atunci când user-ul apeleaza la acele functii ( prin completare de formulare, apasare de butoane, etc). Avantajul principal este faptul ca putem mult mai usor sa actualizam codul sursa. JavaScript este un limbaj flexibil - in aceasta privinta limbajul difera radical de C++ sau Java. In JavaScript putem declara o variabila de un anumit tip, sau putem lucra cu o variabila desi nu-i cunoastem tipul specificat inainte de rulare . JavaScript este bazat pe obiecte – JavaScript nu este un limbaj de programare orientat obiect, precum Java, C++, C#, VFP, Basic. Mai corect, acest limbaj de programare este "bazat pe obiecte"; modelul de obiect JavaScript este bazat pe instanta si nu pe mostenire. JavaScript este condus de evenimente – mare parte a codului JavaScript raspunde la evenimente generate de utilizator sau de sistem. Obiectele HTML, cum ar fi butoanele, sunt imbunatatite pentru a accepta handlere de evenimente.
1. JavaScript poate fi intrudus in HTML
2.
3.
4.
5.
6.
– Cele doua limbaje au fost create de companii diferite, motivul denumirii asemanatoare este legat doar de marketing. 8. JavaScript este multifunctional – limbajul poate fi folosit intr-o multitudine de contexte pentru a rezolva diferite probleme: grafice, matematice, si altele. 9. JavaScript evolueaza – limbajul evolueaza, fapt pozitiv care insa poate genera si probleme, programatorii trebuind sa verifice permanent ce versiune sa foloseasca pentru ca aplicatiile sa poata fi disponibile unui numar cat mai mare de utilizatori de browsere diferite. 10. JavaScript acopera contexte diverse – programarea cu acest limbaj este indreptata mai ales catre partea de client, dar putem folosi JavaScript si pentru partea de Server. JavaScript este limbajul nativ pentru unele instrumente de dezvoltare web, ca Borland IntraBuilder sau Macromedia Dreamweaver. 7. JavaScript nu este Java
Acest curs prezinta elementele de baza ale limbajului de programare JavaScript si modul de lucru al acestuia, fiind un curs de initiere care se adreseaza in special incepatorilor in programarea web, care vor sa invete acest limbaj de scripting.
Lectia 1 Sintaxa JavaScript 1 . A d au g ar e a J av a Sc ri p t i nt r- o p a gi n a H TM L
Pentru a insera cod JavaScript într-un document HTML deja existent, este necesară introducerea în fi șier a etichetelor pereche : <script> respectiv . Eticheta de început necesita unul din atributele: " type" sau "language" (cu precizarea ca acesta din urma este depreciat in standardul XHTML) care va specifica browser-ului limbajul folosit pentru interpretarea codului inclus. In interiorul etichetelor <script> . . . vom scrie codul dorit. Pentru scrierea si executarea programelor JavaScript avem nevoie de un editor de texte (cel mai simplu pentru Windows ar fi Notepad sau emacs pentru Unix) si un browser (ex. Mozilla Firefox, Internet Explorer, ...). - Atributul "language" (folosit doar in paginile web standard HTML, nu este folosit in XHTML,), va avea urmatoarea sintaxa: <script language="JavaScript"> aceasta specifica browser-ului ce limbaj este folosit - Atributul "type" – inlocuitorul/alternativa lui "language" cu urmatoarea sintaxa: <script type="text/javascript"> atributul spunând browser-ului ca scriptul este scris in format plaintext. Avem, de asemenea, posibilitatea sa introducem instructiuni JavaScript intrun fisier extern, cu extensia ".js": <script src="cod.js" type="text/javascript"> ... (pentru editarea unui astfel de fisier este nevoie de un editor simplu de texte). Avantajul folosirii unui astfel de fi șier este faptul ca putem folosi acelasi cod in mai multe pagini HTML iar in cazul necesitatii unei modificari 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 folosi etichete HTML, ci numi instructiuni JavaScript. In cazul in care codul JavaScript se afla intr-un fisier extern, eticheta <script> din pagina HTML va trebui sa contina atributul " src" a carui valoare determina locatia fisierului in care se afla codul JavaScript. In fisierul extern cu extensia ".js" nu trebuie sa scriem eticheta "<script>", scriem direct instructiunile scriptului.
Iata un exemplu scris intr-o sursa HTML:
Cod JavaScript <script type="text/javascript"> document.write("Textul care va fi afisat pe ecran");
Iata un exemplu de script JavaScript scris in interiorul unei pagini web (XHTML): <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Cod JavaScript <script type="text/javascript"> 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 (spre exemplu în fișierul "cod.js"), codul nostru in documentul HTML va arata astfel: <meta http-equiv="content-type" content="text/html; charset=utf-8" /> Cod JavaScript <script src="cod.js" type="text/javascript">
Pentru a afișa același text pe ecran, ca și în exemplele anterioare, fisierul extern "cod.js" , va contine urmatoarea instructiune : document.write("Textul care va fi afisat pe ecran")
Rezultatul afisat in pagina web va fi acelasi ca si in exemplele anterioare. Recomandarea HTML 4.01 specifica introducerea unei etichete <meta> in portiunea a documentelor care folosesc scripturi JavaScript. Aceasta eticheta specifica limbajul prestabilit folosit in toate scripturile din pagina. Eticheta ar trebui sa arate astfel :
<meta http-equiv="Content-Script-Type" content="text/javascript"> Atenție: aceasta eticheta nu este cu titlu obligatoriu, scripturile functionand foarte bine si fara ea.
2. Ascunderea codului in browserele vechi
Unele browsere nu recunosc scripturile si le afiseaza în pagina web ca text. Pentru a evita acest lucru putem folosi pentru comentarii, eticheta HTML: delimitand cu aceasta instrictiunile JavaScript și totodată evitând aparitia scriptului in pagina web. Acest lucru se face astfel: <script type="text/javascript"> 3 . C on ve nt ii d e s in ta xa
In orice limbaj, scrierea are conventii si reguli de sintaxa. Chiar si scrierea în limba româna are regulile ei de sintaxa: orice propozitie incepe cu litera mare, se termina cu un semn de punctuatie, etc.! La fel si limbajele de programare au regulile si sintaxa lor. In continuare vor fi prezentate regulile de sintaxa ala limbajului Java Script. – adică face diferenta intre literele mari si cele mici, astfel cuvinte precum "exemple, Exemple" vor fi tratate diferit. 2. Punct si virgula (;) - Toate declaratiile trebuie sa se termine cu secven ța "punct si virgula" (;) (Exemplu: var1 = 3; var2 = 8;). 3. Spatiile libere - JavaScript ignora spatiile libere, tab-urile si liniile libere care apar în instructiuni, acestea sunt utile pentru a face codul mai bine structurat si usor de citit. Recunoaste doar spatiile care apar în 1. Limbaj Case-sensitive
string-uri (sirurile de caractere). (Exemplu: var1 = 2 ; este la fel cu var1=2;). 4. Ghilimelele - Ghilimelele simple ('...') si respectiv 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 o linie noua. Pentru aceasta folosim caracterul backslash "\" in fata unuia din codurile Escape, astfel: \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 Spr e exemplu , daca dorim sa afisam un text, folosind document.write() , iar acel text trebuie sa contina ghilimele si caracterul 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.write("Curs \"JavaScript\" \\ MarPlo.net");
- comentariile in interiorul codului sunt necesare cand dorim sa specificam rolul anumitor functii si variabile, pentru o mai usoara intelegere ulterioara a scriptului. Pentru a adauga un comentariu, pe o singura linie, in interiorul codului, incepem scrierea acestuia cu succesiunea // (Exemplu: // Comentariu). Daca dorim sa scriem comentarii pe mai multe randuri, se foloseste /* la inceputul comentariului si */ la sfarsitul acestuia (Exemplu: /* ... comentariu pe mai multe randuri ... */ ) 7. Numele variabileler si functiilor - numele dat variabilelor si functiilor trebuie sa respecte urmatoarele reguli: • primul caracter poate fi doar una din următoarele: o litera sau un caracter de subliniere (_) sau semnul $. cu specificația că: • numele nu trebuie sa contina spatii libere, • nu se folosesc cuvinte rezervate ale limbajului JavaScript (ex: "array", "status", "alert"), deoarece interpretorul programului nu va face diferenta intre aceste nume si comenzile JavaScript cu aceleasi nume. 6.
Comentarii
Lectia 2 Notiuni de baza
In aceasta lectie vor fi prezentate notiunile de baza ale programarii, necesare pentru a scrie un script. Aceste notiuni sunt similare cu cele din PHP si alte limbaje de programare. 1 . F ol os ir ea v a ri ab il el or
Intr-un script (program) se folosesc atat date constante cat si date variabile care isi schimba valorile in timpul executei programului. Aceste date se numesc variabile. 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, atribuindu-i o valoare, prin doua metode: variabila = numele unei locatii din memoria
calculatorului,
folosita pentru a memora date. 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. - 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. Tipuri de variabile
Exemplu: var x =”xyz”; X=8; 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
Variabilele locale ,
sunt variabilele scrise in cadrul unei functii, valoarea acestora fiind recunoscuta numai in cadrul acelei functii, la iesirea din functie variabilele sunt distruse. În acest context, o alta functie poate declara si folosi o variabila cu acelasi nume, JS (Java Script) tratând cele doua variabile ca fiind diferite ( functiile si lucrul cu acesta vor fi explicate in lectiile urmatoare). Variabilele globale, sunt variabilele care se declara in afara functiilor, 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 folosesc operatori. Operatorii 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
Lectia 3 Operatorii
Cu ajutorul operatorilor manipulam, combinam si modificam datele dintrun prrogram sau script. Acestia sunt de mai multe feluri, astfel: 1 . O pe ra to ri a ri tm et ic i
Putem spune ca operatorii aritmetici sunt principalii operatori folositi cu numere, acestia efectueaza 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 numere
Eexemplu: 8%3 10%2 •
cu rezultatul 2 cu rezultatul 0
Incrementare (++)
- Acest operator creste valoarea cu o unitate, este des folosit in programare, in lucrul cu variabile. Spre exemplu, daca avem variabila 'i', putem folosi operatorul de incrementare astfel: i++ similar cu i = i+1. Exemplu: x = 7; x++;
la afisare 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. Exemplu: x = 7; x--;
la afisare rezultatul va fi x = 6 •
Cei doi operatori de incrementare ( ++) respectiv decrementare ( --) pot fi folositi atat ca prefix (in fata 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, astfel: Folosirea operatorului ca prefix determina in primul rand modificarea valorii si apoi are loc atribuirea acesteia. In cazul folosirii operatorului ca sufix, intai este atribuita valoarea variabilei si apoi variabila este incrementata (sau decrementata).
o
o
2 . O pe ra to ri d e a tr ib ui re
In cazul acestui operator JavaScript actioneaza mereu de la dreapta la stanga; se evalueaza operandul 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 de atribuire: Operator
= += -= *= /= %=
Exemple
x=y x += y x -= y x *= y x /= y x %= y
Este acelasi cu
x=y x = x+y x = x-y x = x*y x = x/y x = x%y
3 . O pe ra to ri d e c om pa ra re
Expresiile care folosesc acesti operatori pun o intrebare despre doua valori pe care le compara iar raspunsul nu poate fi decât TRUE sau FALSE. Un operator des folosit, este operatorul de identitate sau de comparatie, reprezentat prin doua semne egal " ==". Operatorul "==" este diferit de operatorul "=". Operatorul '==' compara doua valori determinand daca acestea sunt identice, adica daca acestea sunt egale atat ca valoare cat si ca tip. Operatori de comparatie sunt prezentati in tabelul urmator: Operator
== != >
Semnificatie
Verifica st = dr Diferit Mai mare
Exemple
3 == 8 returneaza FALSE 3 != 8 returneaza TRUE 3 > 8 returneaza FALSE
< >= <=
Mai mic Mai mare sau egal Mai mic sau egal
3 < 8 returneaza TRUE 3 >= 8 returneaza FALSE 3 <= 8 returneaza TRUE
4 . O p er er a tto o r i l o gi gi ci c i (b ( b o ol ol e een ni)
Similar cu operatori de comparatie, operatorii logici compara doua expresii si returneaza TRUE sau FALSE. Acesti operatori sunt: && - si (and) - Compara doua expresii si returneaza TRUE daca amandoua
sunt adevarate, in caz contrar returneaza FALSE. Exemplu: x=5 y=8 x<7 && y>3
(returneaza TRUE) || - sau (or) - Compara doua expresii si returneaza TRUE daca cel putin una
din ele este adevarata, in caz contrar returneaza FALSE. Exemplu: x=5 y=8 x>7 || y<3
(returneaza FALSE) - not - este operator unar, foloseste o singura expresie si returneaza TRUE daca expresia este falsa, daca expresia este adevarata returneaza FALSE.
!
Exemplu: x=5 y=8 !(x==y)
returneaza TRUE ('x' nu este egal cu'y')
5 . O p er er a tto o r p e nt n t ru r u st s t ri r i n g ( s ir ir )
Un string este in general un sir de caractere, intre ghilimele. Pentru a alatura (concatena) doua variabile string impreuna se foloseste operatorul de concatenare a sirurilor + Exemplu:
t1 = "Astazi este o zi" t2 = "frumoasa" t3 = t1+t2
(Variabila 't3' va contine sirul "Astazi este o zifrumoasa") Observati ca nu este saptiu intre 'zi' si 'frumoasa'. Pentru a adauga spatiu intre siruri, sunt doua modalitati: 1 - Adaugati spatiu intre variabilele string Exemplu: t1 = "Astazi este o zi" t2 = "frumoasa" t3 = t1+" "+t2
(Variabila 't3' va contine sirul "Astazi este o zi frumoasa") 2 - Adaugati spatiu in una din variabilele string Exemplu: t1 = "Astazi este o zi" t2 = " frumoasa" t3 = t1+t2
(Variabila 't3' va contine sirul "Astazi este o zi frumoasa") 6 . O pe pe ra ra to to ru ru l ty t y pe p e of of
Acest operator returneaza tipul de date continut la momentul respectiv de operandul sau. Este util in special pentru a determina daca o variabila a fost definita cu un anumit tip de date. Studiind urmatorul tabel putem intelege modul de operare al acestor operatori: Operator
typeof pa parseFloat typeof 33 typeof typeof "un "un anume anume text" typeof true typeof window
Descriere
returneaza si sirul 'f'function' returneaza sirul 'number' returneaza returneaza sirul 'string' 'string' returneaza sirul 'boolean' returneaza sirul 'object'
7 . O pe p e ra r a tto o ri r i p e nt nt ru ru f u nc n c ti ti i
Functiile vor fi explicate in una din lectiile urmatoare, totusi este util sa fiti familiarizati cu doi operatori:
1. Pri Primul se numeste operator de apelare si este reprezentat printr-o pereche de paranteze rotunde () 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 folosest folosestee pentru pentru a separa mai multe argumente, din interiorul parantezei, pe care le primeste o functie. Argume Argumente ntele le sun suntt scrise scrise intode intodeaun aunaa in interi interioru orull paran parantez tezelo elorr rotund rotundee si sun suntt separate prin virgula. Astfel, o functie cu doua argumente arata astfel: function nume_functie(arg1, arg2) { // Corpul functiei } 8. Oper Operator atorii pentru pentru structur structurii de date (obiecte (obiecte))
Acesti operatori sunt necesari atunci cand lucram cu structuri de date, sau obiecte. In JavaScript obiectele sunt folosite la gruparea informatiilor pentru a servi unui scop specific. 1. Un oper operat ator or care care ar treb trebui ui cuno cunoscu scutt bine bine este este punctul "." , numit operator pentru membrul unei structuri. Acesta ne permite sa ne referim la un membru ( variabila ,functie sau obiect ) care apartine obiectului specificat. Sintaxa este urmatoarea: numeObiect.nume_Variabila numeObiect.nume_Functie() numeObiect.alt_Obiect
Aceasta modalitate de referire la o informatie, numita notatie cu punct, return returneaz eazaa valoar valoarea ea variab variabile ilei, i, functie functieii sau obiect obiectulu uluii aflat aflat cel cel mai in dreapta. 2. Operatorul Operatorul folosit folosit pentru pentru un elemen elementt din matrice, matrice, numit 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 de paranteze drepte [], si permite referirea 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 . O p er a to r ul co n di t io n al " ? "
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:val2 Modul de operare este urmatorul - se evalueaza conditia, daca este adevarata atunci variabila ia valoarea 'val1', altfel ia valoarea 'val2'. Iata un exemplu: <script type="text/javascript"> 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
Cand se folosesc in expresii mai multi operatori, JavaScript tine cont de precedenta 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 superioara fata 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 partea de 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
Lectia 4 Instructiuni conditionale
Partea cea mai interesanta, dar si dificila, in scrierea unui script este proiectarea acestuia astfel incat sa ia decizii in timp ce este executat. Cu ajutorul instructiunilor conditionale putem face programele sa testeze diferite conditii dupa care sa decida modul de executie a datelor. In Java Script sunt urmatoarele instructiuni conditionale: 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 . I ns tr uc ti un ea " i f"
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, se trece peste acest cod iar conditia returneaza FALSE,. 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). <script type="text/javascript"> 11, va scrie în fereastra Buna ziua! var d = new Date() var time = d.getHours() if (time>11) { document.write("Buna ziua!") } //-->
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 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 se intampla nimic. Folosind instructiunea "if ... else" putem stabili comenzi care sa fie executate cand conditia instructiunii "if" este FALSE. Forma generala a instructiuni "if ... else" este urmatoarea: 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). Folosind exemplul de mai sus, dar 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 ...'. <script type="text/javascript"> 11, // va scrie în fereastra Buna ziua! // Alfel afiseaza "Este ora ..." var d = new Date() var time = d.getHours() if (time>11) { document.write("Buna ziua!") } else { document.write("Este ora " +time+ "") } //-->
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. Daca ora este mai mare decat 11 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. I nst ru ct iu ne a
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:
se executa daca expresie = valoare1 break case valoare2:
se executa daca expresie = valoare2 break case valoare3:
se executa daca expresie = valoare3 break default :
se executa 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". Cazul în care, 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: <script type="text/javascript">
case 0: document.write("Astazi e duminica"); break default: document.write("Mai e pana sambata"); } //-->
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". Inca un exemplu cu "case", de data aceasta folosim valori de tip sir (string). <script type="text/javascript">
Va returna Frate. Dar in general "case" e recomandat sa fie folosit cu valori numerice.
Lectia 5 Instructiuni ciclice (repetitive)
Instructiunile repetitive se folosesc atunci cand se doreste efectuarea unei comenzi de mai multe ori. In javaScript putem folosi urmatoarele instructiuni ciclice: - la fel ca si in alte limbaje de programare, executa codul de un numar specificat de ori for ... 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 for
1. I nst ru ct iu ne a
for
Aceasta are urmatoarea forma generala: for (incepere_nr; conditie_nr; ciclu) {
cod care va fi executat }
unde: "incepere_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 dintre 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": <script type="text/javascript"> x este "+x); } //-->
Se atribue lui 'x' valoarea 1, se verifica conditia (x<5) care în acest caz este adevarata si se executa corpul instructiunii (dintre acolade, care afiseaza "x este 1") apoi se incrementeaza valoarea lui 'x' cu o unitate (x++), acum x are valoarea 2. Se verifica din nou conditia (x<5) si fiindca este adevarata, se executa iar corpul instructiunii apoi se incrementeaza valoarea lui 'x', ..., si tot asa pana cand 'x' va ajunge sa aibe valoarea 5 care la verificarea conditiei returneaza FALSE, moment in care se termina executia instructiunii "for". Acest script va afisa urmatorul rezultat: X este 1 X este 2 X este 3 X este 4
2. I ns tru ctiu ne a
for ... in
Pentru utilizarea acestei instructiuni trebuie sa aveti cunostinte despre obiectele JavaScript asa ca va trebui sa reveniti asupra ei dupa ce le veti invata - in lectiile urmatoare . Cu "for ... in" se executa cate un set de instructiuni pentru fiecare proprietate dintr-un obiect. Acest ciclul se poate executa cu orice obiect JavaScript, indiferent daca are sau nu proprietati. Pentru fiecare proprietate se executa cate o iteratie, daca obiectul nu are nici o proprietate nu se 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. I nst ru ct iu ne a
while
Aceasta instructiune repeta un cod atata timp cat conditia este adevarata. Comanda actioneaza similar cu instructiunea "for", dar nu include functiile de initializare si incrementare a variabilelor. Instructiunea "while" are urmatoarea forma generala: while (conditie) {
codul care va fi executat }
Folosind exemplul de la instructiunea "for", il scriem in varianta instructiunii "while": <script type="text/javascript"> x este "+x); x++; } //-->
Prima data am declarat variabila 'x' dandu-i valoarea 1. Instructiunea "while" verifica conditia (aici x<5) care este adevarata si permite executarea corpului functiei dintre acolade care afiseaza "x este 1" si incrementeaza valoarea lui 'x' cu o unitate. Acum 'x' are valoarea 2, se verifica conditia, care este adevarata si se executa iar codul dintre acolade, ..., si tot asa pana cand la verificarea conditiei rezultatul este FALSE, moment in care se termina rularea instructiunii "while". Acest script va afisa urmatorul rezultat: X este 1 X este 2 X este 3 X este 4
4. I ns tru ctiu ne a
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: <script type="text/javascript"> x este "+x); x++; } while (x<5) //-->
Aceasta functie afiseaza "x este 8". Observati ca desi conditia este falsa (x<5), codul dintre acolade este totusi executat o singura data.
Lectia 6 Instructiuni complementare
Pe langa instructiunile "for" si "while" avem si alte instructiuni 'complementare' care pot fi executate impreuna cu acestea. •
break - intrerupe definitiv executia unui ciclu. continue - sare peste instructiunile care au mai ramas din ciclul respectiv.
•
label (eticheta)
•
with
•
- permite iesirea dintr-un ciclu cu instructiuni ciclice imbricate, la o locatie specificata a scriptului. - se foloseste pentru a fi evitata specificarea repetata la referirea unui obiect, cand îi accesam metodele sau proprietatile.
1 . I n st r uc ti u ni l e
break si continue
Cand este folosita o instructiune ciclica, aceasta continua sa se repete pana cand conditia este FALSE. Aceasta excutie poate fi schimbata cu ajutorul instructiunilor break si continue, care dau posibilitatea intreruperii ciclului sau iesirea din acesta inainte de a se ajunge la sfarsit (la ultima acolada). break - intrerupe definitiv executarea ciclului.
Iata un exemplu din care puteti intelege modul de lucru a lui break : <script type="text/javascript"> for (x=1; x<10; x++) { document.write("
X este "+x); if (x==3) { break;
} }
Acest script va afisa urmatorul rezultat: X este 1 X este 2 X este 3
Dupa cum se poate observa, nu au fost executate toate ciclurile instructiunii "for", conform conditiei (pana cand 'x' ar fi avut valoarea 10), executia se intrerupe cand 'x' are valoarea 3. continue - intrerupe executia repetarii curente, inainte de a fi executate celelalte operatii din ciclu, apoi se verifica din nou conditia si se continua cu executarea ciclului. Studiati si urmatorul exemplu, in care este folosit continue: <script type="text/javascript"> for (x=1; x<8; x++) { if (x==3 || x==5) { continue;
} document.write("
X este "+x); }
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 utilizata atunci cand folosim instructiuni ciclice imbricate, permitand controlul oricarei instructiuni care imbrica alte instructiuni. Studiind exemplul urmator, puteti intelege mai bine modul de utilizare a unei instructiuni label: <script type="text/javascript"> loopX:
for (x=1; x<=5; x++) { for (y=3; y<8; y++) { document.write("X este "+x+" - Y este "+y+" --" );
if (x==4) { break loopX;
} } document.write("
") }
Am etichetat o serie de instructini ciclice imbricate (aici doua "for") cu eticheta " loopX ", care va fi folosita in a doua instructiune "for" imbricata, impreuna cu "break". Acest script va afisa urmatorul rezultat: X este 1 - Y este 3 --X este 1 - Y este 4 --X este 1 - Y este 5 --X este 1 - Y este 6 --X este 1 - Y este 7 -X este 2 - Y este 3 --X este 2 - Y este 4 --X este 2 - Y este 5 --X este 2 - Y este 6 --X este 2 - Y este 7 -X este 3 - Y este 3 --X este 3 - Y este 4 --X este 3 - Y este 5 --X este 3 - Y este 6 --X este 3 - Y este 7 -X este 4 - Y este 3 --
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 . I ns tr uc ti un ea
with
Aceasta comanda se foloseste pentru a evita referirea in mod repetat la un obiect, atunci cand ii accesam 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": <script type="text/javascript">
write("Acum nu mai este necesara folosirea obiectului ca prefix al functiei"); } //-->
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.
Lectia 7 Ferestre Alert, Prompt si Confirm
Alert, Prompt si Confirm sunt ferestre predefinite de dialog, acestea apartin direct obiectului "Window" ( despre obiecte si ierarhia acestora puteti invata in Lectia 12). 1 . F e re a st r a A l er t
Fiind un element simplu si deja cunoscut, voi face o scurta prezentare a sintaxei acestuia. Crearea ferestrelor alert se face cu sintaxa: window.alert("me saj")
Unde "mesaj" este textul care va apare in fereastra Alert. Urmatorul exemplu deschide o fereastra cu mesajul "Bine ai venit". <script type="text/javascript">
In browser va apare o fereastra ca in imaginea urmatoare:
2 . F e re a st r a P ro mp t 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". <script type="text/javascript">
In browser va apare o fereastra ca in imaginea urmatoare:
Textul pe care utilizatorul il adauga in campul din fereastra prompt poate fi preluat intr-o variabila si folosit apoi in script. Iata un exemplu in care atribuim deschiderea ferestrei Prompt unei variabile (aici "nume" ), care va prelua sirul adaugat in caseta de text, apoi valoarea acestei variabile o introducem in mesajul unei ferestre Alert: <script type="text/javascript">
Dupa ce utilizatorul scrie numele in fereastra Prompt si apasa OK se va deschide o fereastra Alert care contine in mesaj numele adaugat de utilizator. Am folosit "\n" pentru a adauga o linie noua, dupa "nume", in textul care apare in fereastra Alert.
Incercati acest exemplu. 3 . F e re a st r a C o nf i rm 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+0 este 0? ". Daca este apasat butonul "OK" apare o fereastra Alert cu mesajul "Corect", iar daca este apasat butonul "Cancel" apare o fereastra Alert cu mesajul "Incorect". <script type="text/javascript">
In browser va apare o fereastra ca in imaginea urmatoare:
Lectia 8 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 de mai multe ori prin apelarea functiei care le contine. Daca un program necesita multe linii de cod, folosind functiile putem imparti codul in parti mai mici pe care le putem utiliza separat acolo unde este nevoie. Pot fi doua feluri de functii: •
•
predefinite - spre exemplu: "parseInt(string)", parseFloat(string)", .. create de programator
- care returneaza o valoare - care nu returneaza o valoare 1 . C re a re a ( de fi n ir ea ) f un c ti il o r
O functie se defineste la inceputul fisierului, in sectiunea head si poate fi folosita in cadrul paginii 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 dam functiei dupa care putem adauga intre paranteze rotunde argumentele (numite si atribute) functiei (separate prin virgula daca sunt mai multe) si intre acolade corpul functiei care contine codul care trebuie executat. Forma generala a unei functii este urmatoarea: function nume_functie(argument1, argument2, ...) { codul care va fi executat }
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 . I ns tr uc ti un ea r et ur n
O functie care returneaza un rezultat foloseste pentru aceasta instructiunea return. Aceasta specifica 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 . A pe la re a f un ct ii lo r
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_funct ie() 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 . E xe m pl e de s cr ip t ur i c u fu n ct i i
In continuare studiati exemplele de mai jos, care folosesc functii simple, astfel veti intelege mai bine modul de lucru si executie a unei functii. Exemplu 1 - functie fara argument
Urmatorul exemplu prezinta un script care afiseaza un text: <script type="text/javascript"> <script type="text/javascript"> exemplu1()
Observati ca functia "exemplu1" a fost definita in sectiunea head a 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, adica: "Text". <script type="text/javascript">
Acest cod va afisa in pagina HTML doua butoane, dimineata si ziua iar la apasarea acestora va aparea pe ecran un alert care va zice „Buna dimineata” sau „Buna 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. Pe fiecare dintre cele doua butoane veti obtine o fereastra 'Alert' cu 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. Urmatorul exemplu prezinta un script care la apasarea unui buton deschide o fereastra "alert" care va afisa suma a doua numere. <script type="text/javascript">
Acest cod va afisa in pagina HTML un buton pe care va fi afisat cuvantul „Suma” care la click pe buton va afisa o fereastra in care va fi afisat stringul:
"Suma lui 7 cu 8 este: 15".
- 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. 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.
Lectia 9 Functii – 2
In aceasta lectie vor fi prezentate trei exemple de scripturi care folosesc functii mai complexe decat cele prezentate in lectia anterioara. 1 . M o di f ic a re a n u ma ru l ui a r g um en t el o r
Atunci cand creem o functie trebuie sa-i definim si numarul de argumente pe care le accepta, lucru de care se tine cont in momentul apelarii ei. Sunt situatii in care dorim sa transmitem functiei un numar diferit de argumente, care poate fi mai 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 utilizatorul ajunge la o pagina web. Programul afiseaza un anumit mesaj daca recunoaste sau nu numele vizitatorului. Daca "utilizator" nu este "null" variabila a fost definita. Acest lucru este posibil doar daca o valoare, ca " Media", este transferata functiei. Daca variabila "utilizator" este egal cu "null" atunci scriptul evita folosirea variabilei in mesajul de salut. <script type="text/javascript"> <script type="text/javascript"> "); mesaj("Nicu");
document.writeln("
A doua apelare a functiei mesaj()
"); mesaj(); //-->
Acest script va afisa in pagina urmatorul rezultat: Prima apelare a functiei mesaj() Salut Nicu A doua apelare a functiei mesaj() Bine ati venit pe site!
Studiati codul functiei si observati diferenta mesajelor din cele doua apelari. In unele situatii unei functii ii sunt transferate mai multe argumente decat au fost specificate la crearea ei. Valorile argumentelor suplimentare nu sunt pierdute, acestea se stocheaza intr-un tablou (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-o ordine 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 de argumente din tablou putem folosi o instructiune speciala " length" care returneaza lungimea (nr. de elemente) unui tablou (numit si "matrice"). Urmatorul exemplu atribuie variabilei "nrArg" o valoare care reprezinta numarul de argumente (elemente) din tabloul "mesaj.arguments": nrArg = mesaj.arguments.length
Folosind instructiunile prezentate mai sus (legate de tabloul "arguments"), putem crea o noua versiune a scriptului din primul exemplu. Aceasta versiune raspunde mai corect in functie de cunoasterea sau nu a numelui utilizatorilor.
<script type="text/javascript"> 1) { for (var i=1; i <script type="text/javascript"> "); mesaj(utilizator2,extraMesaj1,extraMesaj2); //-->
Acest exemplu va afisa in pagina web urmatorul rezultat: Salut "Marius" Bine ai revenit Bine ai 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 ecuatii factoriale. In exemplul urmator avem o functie JavaScript recursiva care afla factorialul unui numar precizat "n" (in ex. nostru 7): <script type="text/javascript"> 0) { rezultat = n*factorial(n-1); } else if (n==0) { rezultat = 1; }else { rezultat = null; } return(rezultat) } //-->
In fereastra browser-ului va apare urmatorul rezultat: Calculeaza factorialul de 7 prin functie recursiva [Factorial 7] ← buton (dupa click pe buton, apare)
Functia verifica intai daca " n" este mai mare decat 0, 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.
Lectia 10 Obiectele Java Script – 1
Pentru inceput trebuie sa stiti ce sunt obiectele in programare si care sunt conceptele fundamentale ale programarii orientate spre obiecte (OOP). JavaScript nu este un program orientat pe obiecte (OOP), cum sunt C++, C# sau Java, dar este bazat pe obiecte. Spre deosebire de lumea din jurul nostru unde obiectele sunt spre exemplu: o carte, o masina, un televizor; in JavaScript obiecte pot fi: formularele, fereastrele, butoanele, imagini, etc, ... Toate elementele dintr-o pagina sunt vazute de JavaScript ca fiind obiecte. Spre exemplu, cum in lumea reala obiectele au anumite proprietati si anume televizoarele au butoane, masinile au roti, etc; asa si in JavaScript obiectele au proprietati: formularele au butoane, ferestrele au titluri si exemplele pot continua. 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 o metoda, nu la o proprietate. obiect.prorietate obiect.metoda()
Punctul (.) se foloseste pentru a specifica detinatorul metodei sau al 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. E bine de stiut pentru incepatori ca, in principal, obiectele pe partea de client si cele esentiale, sunt: "string", "math" sau cele care vin de la etichetele HTML. Mai multe astfel de obiecte pot forma o grupa numita " clasa". Astfel, diferite obiecte incorporate pentru o executie comuna formeaza un "set de clase" care se mai numesc si " biblioteci de clase", iar pentru limbajul JavaScript aceasta
