Curs - Programare WEB

Curs - Programare WEB

Obiectele esentiale ale limbajului JavaScript

In prima parte a acestui capitol ne propunem sa prezentam - pe scurt - cateva concepte absolut obligatorii despre obiecte si programarea orientata pe obiecte. Desi scopul prezentei lucrari nu este definirea teoretica si completa a conceptelor legate de OOP ( Object Oriented Programming ) totusi vom introduce macar punctele esentiale ale acestei tehnici - presupunandu-se ca studentii au deja un fundament destul de solid in domeniu prin studierea altor limbaje OOP de genul C++ sau VisualBasic.

Pe scurt, un obiect include valorile necesare pentru a-i descrie natura ( proprietatile ) si functiile pe care le poate efectua ( metodele ). Nucleul obiectului este constituit din valorile datelor sale. In sintaxa OOP elementele de date ale obiectului se numesc proprietati ( sau atribute ).

La nivel conceptual un obiect trebuie sa accepte cateva functii. functiile unui obiect care sunt vizibile in exterior formeaza comportamentul obiectului. In limbajele OOP functia unui obiect este numita de obicei 'metoda'; aceasta fiind de fapt un fragment din codul sursa ce executa o singura sarcina care este o caracteristica importanta a obiectului. Metoda este o functie a obiectului care poate fi apelata.

Reprezentarea grafica a

unui obiect

In JavaScript intalnim mai multe tipuri de obiecte diferite  - ca de exemplu Navigator, String, Number, Date, Button, Math, etc - iar in practicase folosesc toate, ba chiar putem folosi mai multe obiecte diferite avand acelasi tip.

Sa luam cazul unui formular HTML care poate avea diverse butoane de apasare. Fiecare buton are aceleasi proprietati si metode; respectiv, fiecare buton are o valoare si recunoaste o metoda numita 'click'. Butonul este practic un model de constructie pentru crearea de noi butoane dintr-un formular.

In limbajele OOP o asemenea specificatie de constructie se numeste 'clasa'. Obiectele diferite incorporate in JavaScript formeaza un set de clase pe care le putem refolosi. Un astfel de set de clase se numeste biblioteca de clase. Deoarece JS nu se ocupa realmente de clase in felul in care o fac limbajele complet orientate obiect, obiectele JS sunt adesea numite biblioteca de obiecte JavaScript - semnificand astfel o anumita diferentiere fata de o biblioteca clasica OOP, biblioteca de clase.

INCAPSULAREA

Atributele datelor si functiile unui obiect formeaza o entitate unita si indivizibila. Informatiile despre functionarea interna a unui obiect trebuie sa poata fi ascunse pentru mediul exterior.

In cazul unui obiect, acesta se prezinta prin metodele sale publica, publicate, care formeaza ceea ce se numeste interfata sa. Aceste metode sunt accesibile din exterior si pot fi apelate de catre alte obiecte pentru a-si executa sarcinile.

La polul opus fata de metoda publica este metoda privata. Aceasta este o functie de asistenta pentru obiect. Metodele private sunt folosite numai in interiorul obiectului si nu pot fi apelate din exterior.

Limbajul JavaScript nu poseda aceste metode private, astfel ca toate functiile declarate intr-un obiect sunt de fapt publice si disponibile pentru celelalte obiecte.

Conceptual, in teorie, nici macar atributele unui obiect nu ar trebui manipulate in exteriorul obiectului. In programare acest principiu este cunoscut sub denumirea de ascunderea informatiei.

Notiunea abstracta a unui obiect trebuie sa preceada deciziile privind implementarea sa. Codul sursa care specifica partea interioara a unui obiect trebuie sa fie modificabil fara a afecta notiunea abstracta. Pentru un design software mai bun si mai simplu nici o parte a unei aplicatii complexe n-ar trebui sa depinda de detaliile interne ale unui obiect declarat in ea.

Prin incapsulare si ascunderea informatiei putem beneficia de doua lucruri importante :

consideram ca un obiect este o componenta software mica, pe care o putem folosi cu usurinta in multe situatii si locatii din program. Refolosirea componentelor software are un suport important prin incapsulare si constituie unul dintre marile avantaje ale orientarii spre obiecte. Corect folosita, ea poate economisi timp si bani in dezvoltarea de proiecte sof complexe

ascunderea detaliilor implementarii obiectului ofera programatorului oportunitatea de a modifica ulterior reprezentarea datelor fara sa schimbe reprezentarea obiectului pentru exterior. Acelasi lucru se aplica si modificarilor din interiorul metodelor. Interfata obiectului ramane aceeasi si codul sursa al obiectelor ce colaboreaza ramane acelasi. Asta inseamna ca eforturile de intretinere sunt mult mai reduse si ca arhitectura sistemului software este mult mai stabila decat in aplicatiile conventionale.

MESAJE

Pentru ca un obiect sa intreprinda ceva trebuie sa-i trimitem un mesaj. Acest mesaj apeleaza o functie a obiectului.

De exemplu daca vrem ca in aplicatia noastra sa apara ora curenta cream un obiect nou 'oraCurenta' de tip 'Date' si-l setam la ora si data curente :

var oraCurenta=new Date();

Instructiunea 'new' este folosita generalizat pentru crearea unui nou obiect. In acest fel noi am creat un nou obiect de tip 'Date:pe care l-am atribuit variabilei 'oraCurenta'. Folosind alte metode ale obiectelor de tip 'Date' putem avea si variabile ca sa contina separa ora si minutele :

var orele;

var minutele;

orele=oraCurenta.getHours();

minutele=oraCurenta.getMinutes();

Practic trimitem mesajul 'getHours' spre obiectul 'oraCurenta' pentru a extrage ora. dupa aceea folosim mesajul 'getMinutes' pentru a obtine si numarul de minute. In JS mesajele sunt - in esenta- apelari de functii. Din documentatia referitoare la obiectele esentiale JS putem vedea ca un obiect de tip 'Date' intelege mesajele de mai sus, obiectele 'Date' incluzand o implementare a unor functii cu acele nume.

CLASELE

Daca un obiect este o entitate concreta care exista in timp si spatiu; o clasa reprezinta o notiune abstracta, necesara pentru a putea cupla obiectele similare sub o singura 'umbrela'.

Deci putem concluziona ca o suma de obiecte cu aceleasi proprietati si acelasi comportament formeaza o clasa. Aceasta prezinta un model de a construi obiectele continute in ea, deci defineste numarul, numele si structura atributelor de date si metodelor. In plus, clasa asigura implementarea functiilor. Obiectele noi dintr-o clasa sunt create gratie planului de constructie definit pentru clasa respectiva. Fiecare obiect este numit o instanta a clasei resprective iar proprietatea unui obiect este numita si variabila instantei clasei sau obiectului.

JS nu este un limbaj OOP clasic, orientat spre obiecte bazat pe clase deoarece nu exista instructiuni propriu-zise pentru clase, insa include un concept similar : tipul de obiecte. Din tipurile de obiecte pe partea de client fac parte mai intai diferitele obiecte GUI sau obiecte esentiale ca 'Date', 'String' sau 'Math'.

In acest limbaj putem defini de asemenea propriul nostru tip de obiect. De exemplu daca sistemul nostru trebuie sa afiseze ora exacta putem implementa un nou tip de obiecte 'Ceas'. Obiectul 'Ceas' stie ora si minutele la care este setat astfel ca proprietatile sale sunt 'orele' si 'minutele'. Metodele pe care trebuie sa le implementeze obiectul 'Ceas' sunt 'afisareTimp()' si 'setareTimp()'. Urmatorul cod sursa arata definirea tipului de obiect 'Ceas' :

<head>

<script type='text/javascript'>

<!--

function Ceas(orele,minutele)

function setareTimp(orele,minutele)

function afisareTimp()

//-->

</script>

</head>

<body>

<script type='text/javascript'>

var oraCurenta=new Date();

var ceasulMeu=new Ceas(oraCurenta.getHours(),oraCurenta.getMinutes());

ceasulMeu.afisareTimp();

</script>

</body>

Pentru a face lucrurile cat mai clare sa comentam putin liniile de cod de mai sus - in fapt codul sursa complet al unui document HTML care produce urmatoarea aparitie in browser :

Figura 2.5 - 1

Dupa cum am mai spus, JavaScript este un limbaj bazat pe instante, deoarece nu exista o metoda constructoare de clase. Bazat pe instante este o sintagma din limbajul orientat spre obiecte, care inseamna ca limbajul de programare are obiecte dar nu si clase.

In acest context JS nu este de fapt foarte bine structurat. Nu are clase dar are conceptul de tip al obiectului. Mai mult, obiectele noi nu sunt construite prin intermediul obiectelor existente ci folosind instructiunea 'new' - de fapt specifica claselor.

Instructiunea 'function' slujeste mai multor scopuri in JS; crearea unui nou tip de obiect inseamna definirea unei functii ce are ca nume chiar numele tipului de obiect. Rezulta un cod sursa posibil destul de derutant pentru cel care il citeste fara a avea cunostinte de JavaScript. Proprietatile noului tip de obiecte sunt declarate ca parametri ai functiei definitorii, ceea ce inseamna ca pentru o clasa noua exista un singur constructor. Asa cum sugereaza insasi denumirea sa constructorul este o metoda a unei clase care creaza un obiect nou din sablonul clasei. Constructorul initializeaza noul obiect cu valorile datelor pe care le-a primit in partea de parametri a metodei.

Urmatorul cod prezinta sintaxa generala pentru declararea unui nou tip de obiect in JS :

function tipObiect(variabilaDeInstanta1, variabilaDeInstanta2,)

functia1 (param1, param2,)

functia2 (param1, param2,)

Sa vedem putin cazul obiectului special 'this', care adreseaza obiectul curent in declararea tipului de obiect. Proprietatile si metodele obiectului sunt definite prin atribuiri facute lui 'this'. Proprietatile initiale pentru noul obiect sunt date ca parametri ai functiei creatoare; in sablon ele sunt numite ' variabilaDeInstanta1' si ' variabilaDeInstanta2'. In definirea tipului de obiect sunt prezente numai numele metodelor ( 'metoda1' si 'metoda2' ).

In lucrul practic cu JavaScript este preferabil ca declararile noilor tipuri de obiecte sa fie plasate in sectiunea <head> a documentului HTML, pentru a fi citite la inceputul procesului de incarcare a documentului. In acest fel se asigura cunoasterea declaratiilor clasei atunci cand este interpretat restul programului.

Mai trebuie sa mentionez ca in timpul rularii programului putem extinde cu proprietati si metode noi orice obiect existent. Acest lucru este posibil datorita faptului ca JS este un limbaj bazat pe instante, dupa cum am mai spus, iar o eventuala noua caracteristica este astfel adaugata unui singur obiect particular si nu afecteaza celelalte obiecte de acelasi tip.

OBIECTE JavaScript

Pe langa problematica programarii orientate obiect deja abordata in contextul oarecum particular al limbajului JS trebuie sa mai adaugam cateva elemente foarte importante pentru intelegerea functionarii corecte a acestui limbajului.

Interpretarea instructiunilor limbajului JS se face totdeauna prin legatura dinamica in timpul rularii. Legatura dinamica inseamna mai clar ca tipurile tuturor variabilelor si expresiilor nu sunt cunoscute pana in momentul in care programul nu este executat.

JavaScript nu implementeaza conceptul de clasa standard OOP ci se bazeaza in mare masura doar pe instante, sau obiecte.

Un aspect si mai semnificativ este lipsa mostenirii. Prin urmare JavaScript se poate spune fara sa grsim ca se incadreaza in categoria limbajelor de programare bazate pe obiecte si nu orientate spre obiecte.

NOTATIA CU PUNCT

In limbajul JavaScript accesul catre proprietatile si metodele unui obiect se realizeaza cu ajutorul asa numitei notatii cu punct. Aceasta notatie, demonstrata ca sintaxa in cele ce urmeaza :

numeObiect.numeProprietate

numeObiect.numeMetoda(argumente)

ofera o metoda de tip ierarhic pentru accesarea proprietatilor si pentru implementarea metodelor.

Obiectul curent al programului este adresat prin intermediul variabilei 'this'. In declararea metodei unui tip de obiect ne adresam obiectului in sine cu variabila 'this'. Obiectul in sine - sau obiectul curent - este cel pentru care declaram respectiva metoda.

MODELUL DE OBIECT JavaScript

Obiectele JS sunt realmente obiecte, in sensul ca au proprietati si metode si pot raspunde la evenimente. Cu toate astea JS nu are aceleasi capacitati OOP reale de mostenire - de fapt putem spune chiar ca nu are conceptul de mostenire.

Spre deosebire de ierarhia de clase - implementata in limbajele pure OOP - care se bazeaza pe mostenire, modelul de obiect JS este in fapt o ierarhie de continere. Aceasta continerea rezida in principiul conform caruia un obiect contine un alt obiect; de exemplu obiectele 'Form' si 'Radio' nu au o legatura ca de la clasa la subclasa ci una de la container la continut. Altfel spus intre aceste obiecte nu exista o legatura de 'rudenie' deoarece unul nu deriva din celalalt; astfel un obiect nu poate mosteni proprietatile si metodele altui obiect ci poate fi doar continut in interiorul altui obiect.

CONTINEREA IN JavaScript

Conceptul acesta este important de inteles nu numai in privinta modului in care un obiect are relatii cu un cu altul ci si in privinta modului practic in care facem referire la un obiect.

Din notatia cu punct ne amintim ca atunci cand facem referire la proprietatile sau metodele unui obiect folosim un punct pentru a desemna detinatorul. De exemplu, comanda de mai jos transmite ca metoda 'write' este detinuta de obiectul 'document' :

document.write('<h1>Text</h1>');

Acest concept se poate extinde pentru a include nu numai proprietatile si metodele unui obiect ci si obiectele continute de respectivul obiect. Daca vrem sa intoarcem numele unui obiect 'Button' unei variabile vom folosi :

numeButon=document.formMain.okButton.name;

'document' este numele prestabilit al obiectului 'Document' iar 'formMain' este numele obiectului 'Form' care contine butonul 'okButton'.

Cand lucram cu obiecte trebuie sa stim cand trebuie si cand nu sa facem referire la un obiect container, care contine deci un altul.

De exemplu, obiectul 'Window' este practic obiectul de nivelul cel mai inalt cu care lucram pe partea de client. Cele mai multe referiri pe care le facem sunt la obiecte continute in 'Window'. Astfel, unul dintre exemplele anterioare poate fi rescris ca :

window.document.write('<h1>Text</h1>'(;

Desi in majoritatea cazurilor putem ignora referirea la 'window' ea este necesara atunci cand avem de-a face cu ferestre sau cadre multiple.

In exemplul de mai jos se creaza un obiect 'Window'in functia 'showStats()' si apoi se inchide cu functia 'closeWindow()' :

<head>

<script type='text/javascript'>

var windowObject

function arataStats()

</script>

</head>

<body OnUnload='closeWindow()'>

<h1>

Apasati pe buton

</h1>

<form>

<input type='button' value='Arata text' onclick='arataStats()'>

</form>

</body>

Codul sursa de mai sus produce in prima faza urmatoarea fereastra :

Figura 2.5 - 2

Dupa apasarea butonului scriptul nostru duce la aparitia pe ecran a inca unei ferestre cu caracteristicile definite de programator :

Figura 2.5 - 3

Trebuie sa mentionam ca obiectul 'Window' este singurul care dovedeste flexibilitate in referirile la obiecte. De exemplu, daca vrem sa facem referire la un formular dintr-o pagina HTML trebuie sa-i adaugam obiectul parinte - 'Document' - pentru ca JS sa inteleaga la care obiect facem referire. Daca dorim sa facem referire la primul formular din obiectul 'Document' si sa regasim numarul de elemente din el folosim comanda :

var num=document.forms[0].length;

Chiar daca formularul are un atribut 'name' tot trebuie sa adaugam referirea la parinte :

var num=document.queryForm.length;

PROPRIETATI

Atunci cand lucram in limbajul JS proprietatile seamana cu atributele datelor unui obiect. Proprietatile unui obiect explica identitatea si caracteristicile obiectului respectiv. Pe langa caracteristici si valori de identificare specifice, atributele obiectului pot reprezenta starea obiectului sau un rol pe care acesta il poate juca intr-un moment anume.

Cand lucram - de exemplu - la un anumit proiect putem defini un obiect 'Proiect' astfel :

function Proiect(membrii, lider, momentCurent, timp)

Dupa aceasta declarare putem crea un nou proiect specific, numit 'proiectulMeu' astfel :

var proiectulMeu=new Proiect(membruGrup, 'Alina', 'pornire', oraCurenta );

Pe langa notatia cu punt avem si alte modalitati de a accesa proprietatile unui obiect. Exemplul de mai jos demonstreaza notatia tablou :

numeObiect['numeProprietate']

Urmatoarea linie de cod demonstreaza indexarea prin numerale ordinale :

numeObiect[indexIntreg]

Tehnica aceasta intoarce atributul numarului 'indexIntreg'.

In exteriorul obiectului in sine este preferabil sa nu ii accesam direct atributele deoarece aceasta afecteaza principiul incapsularii - prezentat putin mai inainte.

METODE

O metoda desemneaza un serviciu pe care clasa il ofera altor obiecte. In general metodele se incadreaza in una dintre urmatoarele patru categorii :

modificatoare - metode care modifica starea unui obiect. Metoda aceasta modifica valoarea unuia sau mai multor atribute ale datelor obiectului. O metoda modificatoare folosita frecvent este functia 'set', care stabileste valoarea unui atribut specific al obiectului.

selectoare - metoda care acceseaza atributele datelor unui obiect dar nu intreprinde nici o modificare. O selectoare importanta este functia 'get' care intoarce valoarea unui atribut specific al obiectului.

iterativa - metoda care acceseaza toate partile unui obiect, de exemplu toate atributele datelor, intr-o ordine definita. dupa cum arata si numele metoda iterativa executa operatii repetate asupra atributelor datelor unui obiect.

constructoare - metoda unui tip de obiect care creaza un obiect nou din sablonul clasei. O metoda constructoare initializeaza noul obiect cu valorile datelor primite in partea de parametri a metodei.

In cazul particular al limbajului JavaScript metodele obiectelor sunt de fapt functii JS normale si le accesam prin intermediul cunoscutei notatii cu punct :

numeObiect.numeFunctie(argumente)

Ca structura practica, un fisier HTML contine o sectiune <body> care creaza obiectul special 'Document' in JavaScript. Acest obiect recunoaste metoda 'write()', cu aceasta metoda putem extinde in mod dinamic macheta de text a paginii noastre HTML, folosind JS - exemplificarea acestei posibilitati a aparut practic chiar in exemplele anterioare si va mai apare des pe parcursul lucrarii asa ca nu mai insistam acum asupra ei.

EVENIMENTE

Cel mai adesea instructiunile JS creaza sau manipuleaza elemente ale interfetei grafice cu utilizatorul - asa numita GUI -  ca formulare sau ferestre.

Privind din contextul unei astfel de interfete, un eveniment este rezultatul unei actiuni a utilizatorului. El are loc atunci cand utilizatorul intreprinde propriu-zis ceva. De exemplu, cand utilizatorul executa clic pe un buton al interfetei are loc un eveniment 'click'. Alte evenimente GUI sunt executarea unui clic intr-o caseta de validare, selectarea unui sir intr-o caseta cu lista, executarea unui dublu clic pe un element si deschiderea sau inchiderea unei ferestre.

Modalitatea cea mai buna de a controla interfetele grafice cu utilizatorul este acea creata prin intermediul programarii conduse de evenimente. In JS evenimentele pot fi 'capturate', adica tratate de handlere de evenimente - despre detalierea acestor concepte vom vorbi pe larg in capitolele urmatoare.

Ca un fapt general acceptat se spune ca evenimentele nu sunt considerate caracteristici orientate strict spre programarea orientata obiect, desi unele limbaje OOP recunosc totusi si evenimente. Cele mai multe elemente GUI - ferestrele, butoanele, campurile de text si casetele de validare - reactioneaza fata de anumite evenimente. Aceste elemente exista si in JS ca tipuri de obiecte incorporate. De exemplu, putem crea un buton in JS care sa declanseze evenimentul 'onClick' cand se executa clic pe un buton :

<form>

<input type='button' value='Apasa' onClick='functiaMea()'>

</form>

In exemplu de mai sus functia 'functiaMea' este executata cand utilizatorul executa un clic pe butonul 'Apasa'.

Deoarece handlerele de evenimente sunt permise numai pentru etichetele HTML, tipurile de obiecte nou create nu au handlere de evenimente. Pentru prezentarea detaliata a evenimentelor si handlerelor de evenimente vom reveni asupra lor pe parcursul lucrarii in cadrul unui capitol dedicat lor.

CLASIFICAREA OBIECTELOR

Vorbind din punct de vedere al arhitecturii generale a limbajului JavaScript, privind obiectele JS putem vedea ca cele mai multe dintre ele sunt catalogabile in trei categorii : fie pe partea de client, fie pe partea de server fie obiecte esentiale ale limbajului. Acest subcapitol examineaza obiectele pe partea de client si va prezenta destul de extins chiar proprietatile si metodele lor de baza.

Elementele de baza legate de functionalitatea pe partea de client incorporata in JavaScript se axeaza asupra a ceea ce putem face cu paginile HTML. In general, primul set de obiecte are o corelare cu browserul si cu etichetele HTML din acesta. Majoritatea obiectelor JS sunt reprezentari ca obiecte ale etichetelor HTML, dupa cum se releva clar si din tabelul de mai jos, Tabelul 2.5 - 1 :

Tabelul 2.5 - 1

OBIECTUL 'navigator'

Trebuie mentionat ca acestui obiect ii vine numele de la chiar creatorii limbajului JS - firma Netscape. Obiectul reprezinta conceptula software-ul aplicatie browser utilizat pentru vizualizarea rezultatelor. Folosind acest obiect putem gasi informatii despre denumirea si versiunea browser-ului, dar si alte informatii mai mult sau mai putin folosite in practica. Atat Netscape Communicator cat si Microsoft Internet Explorer recunosc obiectul 'navigator' care are la randul sau doua obiecte copil : 'Plugin' si 'Mimetype'.

Codul sursa de mai jos poate fi folosit pentru a extrage metodele si proprietatile obiectului JavaScript 'navigator' :

<body>

<script type='text/javascript'>

document.write('Nume cod :'.bold()+navigator.appCodeName+'<br>');

document.write('Nume browser :'.bold()+navigator.appName+'<br>');

document.write('versiune :'.bold()+navigator.appVersion+'<br>');

document.write('limba :'.bold()+navigator.language+'<br>');

document.write('MIME Type :'.bold()+navigator.mimeType+'<br>');

document.write('Platforma :'.bold()+navigator.platform+'<br>');

document.write('Plugin-uri :'.bold()+navigator.plugins+'<br>');

document.write('Agent :'.bold()+navigator.userAgent+'<br>');

document.close();

</script>

</body>

Rularea scriptului de mai sus duce la urmatorul rezultat - depinzand bineinteles de caracteristicile sistemului pe care il rulam :

Figura 2.5 - 4

In tabelul de mai jos enumeram metodele si proprietatile obiectului 'navigator', incercand sa prezentam si o scurta detaliere a semnificatiei diferitelor elemente :

Tabelul 2.5 - 2

OBIECTUL 'Mimetype'

Numele acestui obiect vine de la Multipurpose Internet Mail Extensions si este in fapt un subobiect al obiectului prezentat anterior : 'navigator'. El ne permite sa accesam informatii despre tipurile MIME pe care le recunosc modulele plugin ale browserului. Ca si obiectul 'Plugin' el nu este recunoscut de Internet Explorer. In continuare prezentam proprietatile obiectului 'Mimetype' :

Tabelul 2.5 - 3

OBIECTUL 'Plugin'

Si in cazul acestui obiect apare o problema, el nu este din pacate recunoscut de browserul Internet Explorer. El este creat prin instalarea de module plugin pentru browser. Acest obiect contine de fapt un tablou de elemente si tipuri MIME tratate de fiecare modul plugin. Acest obiect are doar proprietati dar exista si o metoda legata direct de el : metoda 'plugins.refresh()', de fapt apartinand de obiectul 'navigator', care permite reconstruirea tabloului de module plugin.

Tabelul 2.5 - 4