Curs – Programare WEB

Curs – Programare WEB

OBIECTE DE NIVELUL AL TREILEA

Urmatorul nivel de obiecte continute de JavaScript pe partea de client este nivelul al treilea. Toate obiectele de acest nivel sunt de fapt subobiecte ale obiectului 'Form'. In mod asemanator imbricarii elementelor HTML in interiorul etichetelor <form>, initiala si finala, aceste obiecte sunt imbricate in interiorul obiectului 'Form'.

OBIECTUL 'Button'

Limbajul JS are trei obiecte de tip buton : 'Button', 'Submit' si 'Reset'. Fiecare dintre ele are o reprezentare obiect a unei etichete HTML. Obiectul 'Button' este un buton generic, caruia trebuie sa ii adaugam linii de cod pentru a fi util, in timp ce celelalte doua au scopuri specifice predefinite. Este posibil totusi sa folosim un obiect 'Button' pentru a juca acelasi rol ca obiectul 'Submit' sau 'Reset' - apeland 'Form.submit()' sau 'Form.reset()'.

Tabelul de mai jos contine metodele si proprietatile obiectului 'Button'.

Tabelul 2.5 - 17

OBIECTUL 'Checkbox'

In programare un alt control standard din interfata cu utilizatorul - UI sau 'user interface' - este si caseta de validare. Ea permite utilizatorului sa specifice o valoare 'yes/no' sau 'true/false' prin executarea unui clic pe suprafata casetei respective.

Tabelul urmator contine proprietatile si metodele acestui obiect :

Tabelul 2.5 - 18

OBIECTUL 'FileUpload'

Acest obiect este echivalentul elementului de incarcare a fisierului in limbajul HTML. In JS nu putem intreprinde prea multe cu acest obiect; putem doar sa facem referire la proprietatile sale. De fapt obiectul 'FileUpload' nici nu are metode reale asupra carora sa putem evetual  actiona.

Tabelul urmator prezinta proprietatile obiectului :

Tabelul 2.5 - 19

OBIECTUL 'Hidden'

Privit din punct de vedere logic acest obiect ar putea fi considerat ca fiind similar cu un obiect text cu o proprietate 'visible' stabilita la valoarea 'false'. El este folosit pentru stocarea valorilor ce trebuie transferate unei prelucrari de server in general. Obiectul 'Hidden' provine din limbajul HTML anterior introducerii pe scara larga a limbajelor de scriptare ca JavaScript - perioada in care nu existau variabile, tablouri sau obiecte care sa poata stoca unele valori in vederea efectuarii unor serii de operatii asupra lor.

In practica reala din ziua de azi acest obiect este destul de rar folosit dar - pentru a fi in concordanta cu restul lucrarii - vom prezenta si proprietatile acestui obiect :

Tabelul 2.5 - 20

OBIECTUL 'Password'

Si acest obiect este inrudit cu obiectul de tip text. Singura diferenta intre cele doua obiecte este ca toate caracterele introduse in acest obiect sunt afisate ca stelute, pentru a le ascunde valoarea.

Tabelul de mai jos prezinta metodele si proprietatile obiectului 'Password' :

Tabelul 2.5 - 21

OBIECTUL 'Radio'

Controalele de tip buton radio au ca si caracteristica definitorie capacitatea de a se exclude reciproc; astfel, daca este selectat un buton radio toate celelalte butoane din set sunt neselectate. Obiectul 'Radio' asigura acest element intr-un formular HTML. Setul de butoane radio este definit acordand tuturor butoanelor aceeasi proprietate 'name'.

Dupa cum ne-am obisnuit prezentam in continuare un tabel cu toate proprietatile si metodele obiectului de tip 'Radio' :

Tabelul 2.5 - 22

OBIECTUL 'Reset'

Acest obiect a fost adaugat in JS de la introducerea versiunii 1.2.

Atunci cand este apasat obiectul declanseaza un eveniment care restabileste toate valorile campurilor dintr-un formular la asa numitele valori default - initiale.

Mai jos avem metodele si proprietatile obiectului 'Reset' :

Tabelul 2.5 - 23

OBIECTUL 'Submit'

Atunci cand este apasat un buton de acest tip se declanseaza un eveniment care trimite toate valorile dintr-un formular spre programul specificat in atributul 'action' al tag-ului <form>.

In continuare putem vedea metodele si proprietatile acestui obiect :

Tabelul 2.5 - 24

OBIECTUL SELECT

Intre controalele cel mai des utilizate in paginile web se afla lista derulanta si caseta cu lista de selectie. Diferenta principala dintre ele este acea ca utilizatorul poate selecta o singura valoare din lista derulanta dar poate selecta mai multe valori dintr-o lista de selectare.

Obiectul 'Select' incapsuleaza comportamentul ambelor elemente. Cu alte cuvinte el poate apare ca lista derulanta ( cu comportament prestabilit ) sau ca lista de selectare ( daca proprietatea 'multiple' este stabilita la 'true' ).

In continuare avem toate metodele si proprietatile acestui obiect :

Tabelul 2.5 - 25

OBIECTUL 'Text'

Desi nu cel mai spectaculos elementul principal pentru orice aplicatie de introducere de date este un camp de text. Obiectul 'Text' serveste ca instrument de captura a datelor, fiind reprezentarea tagului HTML de introducere a textului :

Mai jos avem si metodele si proprietatile acestui obiect :

Tabelul 2.5 - 26

OBIECTUL 'Textarea'

Acest obiect ne permite sa introducem mai multe linii de text, el fiind reprezentarea obiectului similar din limbajul HTML.

In continuare priviti metodele si proprietatile obiectului 'Textarea' :

Tabelul 2.5 - 27

OBIECTE DE NIVELUL AL PATRULEA

In practica, incepand cu versiunea 1.4 a limbajul JavaScript, avem un singur element de acest nivel : un subobiect al obiectului 'Select'.

OBIECTUL 'Option'

Acest obiect este folosit pentru referirea la diverse elemente <option> care apar intre tagurile <select> si </select>.

Proprietatile obiectului le putem analiza in continuare :

Tabelul 2.5 - 28

OBIECTE esentiale ALE LIMBAJULUI

Tot capitolul anterior s-a axat pana acum pe prezentarea obiectele pe partea de client a JavaScript- acestea reprezentand de fapt nucleul limbajului; cu toate acestea, o importanta parte a dezvoltarii de programe mai complexe in JS o constituie lucrul cu asa numitele obiecte esentiale ale limbajului.

Acestea au avantajul de a fi compatibile in diverse implementari - Microsoft, Netscape, Sun sau Opera - si sunt considerate in afara ierarhiei de obiecte detaliate in capitolul anterior, ele referindu-se la alt tip de elemente decat cele care se refereau direct la partea vizibila direct, la rezultatul programarii.

In cele ce urmeaza vom detalia obiectele 'String', 'RegExp', 'Array', 'Date', 'Math', 'Boolean', 'Number' si 'Function'.

OBIECTUL 'String'

Este aproape superfluu sa mentionam casirurile reprezinta o parte esentiala a oricarui limbaj de programare. In JS un sir este  si un obiect, cu propriile sale metode si proprietati.

Pe masura dezvoltarii JSsirurile au dobandit tot mai multe capacitati.

Incepand cu versiunea 1.1 a JS s-a trecut la folosirea sirului ca obiect, creat prin comanda 'new'.

Metodele si proprietatile sirurilor apar in tabelul urmator :

Tabelul 2.5 - 29

Sa luam un exemplu folosire a metodei 'indexOf()' pentru a gasi toate literele 'a' dintr-o fraza. Acest lucru se bazeaza pe existenta unui parametru optional - atat pentru'indexOf()' cat si pentru 'lastIndexOf()' - care ne permite sa specificam de unde anume din sir dorim sa incepem cautarea :

<script type='text/javascript'>

var pos=0;

var num=-1;

var i=-1;

var fraza='Fraza folosita pentru a contoriza aparitia literei a in cadrul unui sir';

while (pos!=-1)

document.write(fraza);

document.write('<hr size=3>');

document.write('Exista : '+num+' a-uri in fraza');

document.close();

</script>

In imaginea de mai jos puteti vedea si rezultatul acestui script, intr-o fereastra de browser :

Figura 2.5 - 5

Pentru a ne putea da seama de forta reala a acestor metode ale sirurilor trebuie sa le combinam pentru a putea rezolva diferite probleme.

Pentru a exemplifica mai bine acest fapt sa detaliem o functie de inlocuire a unui sir din interiorul unui alt sir. Pentru a folosi si mai multe elemente legate de tratarea JS a sirurilor sa profitam si de proprietatea 'prototype' a unui obiect 'String' pentru a adauga metoda 'replace()' tipului de obiect 'String' :

<head>

<script type='text/javascript'>

String.prototype.replace=stringReplace;

function stringReplace(findText,replaceText)

return originalString;

</script>

</head>

<body>

<script type='text/javascript'>

var origString=new String('Alexandru');

var findString=new String('xan');

var replaceString=new String('BBB');

var resultString=origString.replace(findString,replaceString);

document.write('Textul original era :'+origString+'<br>');

document.write('S-a cautat textul : '+findString+'<br>');

document.write('S-a inlocuit cu : '+replaceString+'<hr size=3>');

document.write('Rezultatul este : '+resultString);

</script>

</body>

Scriptul de mai sus implementeaza o noua metoda pentru obiectul 'String' - metoda replace(); rezultatul scriptului de mai sus este :

Figura 2.5 - 6

Pentru a prezenta cat mai clar optiunile de formatare a unui text in JavaScript sa studiem si scriptul urmator; acesta ne va permite sa selectam tipul de formatare pe care il dorim pentru textul nostru pe care il vom introduce si va afisa rezultatul formatat ca urmare a dorintei utilizatorului :

<head>

<script type='text/javascript' language='JavaScript1.1'>

function fereastraNoua()

</script>

</head>

<body>

<hr>

<form method='post' name='form1'>

<p> sir :

<input type=text size=40 maxlength=256 name='stringField'></p>

<p> Stilul de formatare :

<input type=checkbox name='bigBox' value='ON'>Big

<input type=checkbox name='blinkBox' value='ON'>Blink

<input type=checkbox name='boldBox' value='ON'>Bold

<input type=checkbox name='fixedBox' value='ON'>Fixed

<input type=checkbox name='italicsBox' value='ON'>Italice

<input type=checkbox name='smallBox' value='ON'>Small

<input type=checkbox name='strikeBox' value='ON'>Strike

<input type=checkbox name='subBox' value='ON'>Subscript

<input type=checkbox name='supBox' value='ON'>Superscript

</p>

<p> Font :

Color :

<select name='colorList' size=1>

<option selected>black</option>

<option>yellow</option>

<option>pink</option>

<option>red</option>

<option>blue</option>

</select>

Size :

<select name='sizeList' size=1>

<option selected>1</option>

<option>2</option>

<option>3</option>

<option>4</option>

<option>5</option>

<option>6</option>

<option>7</option>

</select>

</p>

<input type='button' name='Show' value='Prezinta rezultat' onClick='fereastraNoua()'>

</form>

</body>

Scriptul de mai jos produce in fereastra browserelor un document continand un formular. Presupunand ca am introdus textul 'Alexandru' si ca am bifat optiunea 'Strike' si am ales dimensiunea fontului 7 si culoarea rosie obtinem macheta ecran :

Figura 2.5 - 7

Apasand butonul din formular vom obtine urmatorul efect :

Figura 2.5 - 8

CARACTERE SPECIALE

Desi problematica acestor caractere a mai fost abordata si anterior vom mai reveni cu cateva detalii succinte pentru a arata si folosirea in practica, direct in cod sursa a acestora.

Ca si in alte limbaje de programare si JavaScript ne permite sa lucram cu anumite caractere care sunt folosite in acelasi timp si de limbaj pentru a desemna anumite operatii. Pentru a utiliza aceste caractere trebuie sa folosim un caracter backslash ( ) urmat de caracterul respectiv sau de codul sau.

Aceste simboluri ce trebuie folosite cu backslash pentru a fi incluse in siruri sunt :

Tabelul 2.5 - 30

In practicase foloseste o metoda considerata utila de multi programatori. Simbolurile de mai sus sunt atribuite unor variabile :

<script type='text/javascript'>

var TAB='t';

var CR='r';

var LF='n';

var CRLF='rn';

var FF='f';

var GHILIMELE=''';

var APOSTROF=''';

var BACKSLASH='';

var BACKSPACE='b';

</script>

In cazul in care trebuie sa transformam o valoare non alfanumerica intr-o valoare ASCII putem folosi metoda JS escape().

escape('Text de proba pentru tilda~');

Linia de cod de mai sus are ca efect intoarcerea valorii :

Text%20de%20proba%20pentru%tilda%20%7E

In cazul contrar, cand trebuie sa transformam un sir codificat ASCII - de exemplu venit de la server - putem folosi metoda unescape() care returneaza valoarea in clar a sirului codificat ASCII.

CONVERSIA sirurilor si NUMERELOR

JavaScript ofera doua metode incorporate pentru a transformasirurile in numere : 'parseInt()' si 'parseFloat()'. Ambele functii preiau ca parametru siruri si le transforma in valori numerice de tip intreg si respectiv in virgula mobila.

var sir=new String('123.456');

document.write(parseInt(sir));

Acest cod are ca efect afisarea valorii '123'.

In cazul in care incercam sa transformam in numar o valoare care nu se preteaza la asa ceva functiile returneaza 'NaN' - not a number -, ca in cazul urmator :

var sir=new String('$123.456');

document.write(parseFloat(sir));

Pentru conversia din numere in siruri avem mai multe metode; in versiunile de JS incepand cu 1.3 avem metoda dedicata 'toString()' in timp ce in versiunile anterioare ne puteam baza pe felul in care proceseaza JS operatorul '+'.

In cazul in care JS intalneste un sir in timp ce aduna elementele unei expresii, din acel moment intreaga expresie este tratata ca un sir.

OBIECTUL 'RegExp'

Acest obiect ne permite sa executam functii de expresii regulate asupra sirurilor.

Deoarece folosirea acestui obiect necesita o abordare foarte detaliata - care ar iesi din tiparul si scopul acestei lucrari vom prezenta in continuare doar o lista a caracteristicilor sale, urmand ca pe parcursul lucrarii - punctual - in momentele cand apar referiri la el sa detaliem diferite problematici legate de acesta.

Tabelul 2.5 - 31

OBIECTUL 'Array'

Array este denumirea in limba engleza a tablourilor. Un tablou este un container de elemente. Fiecare element dintr-un tablou este o valoare separata, totusi elementele exista ca parte a tabloului si nu pot fi accesate decat prin parcurgerea acestuia.

Metodele si proprietatile acestui obiect sunt prezentate mai jos :

Tabelul 2.5 - 32

JavaScript este un limbaj foarte aparte in ceea ce priveste tratarea elementelor tablourilor - elementele unui tablou pot fi de tipuri diferite.

Pentru a crea instante ale unui obiect tablou folosim 'new' :

var marca=new Aray();

marca[0]='Volvo';

marca[1]='Mercedes';

marca[2]='Fiat';

O alta modalitate de definirea unui astfel de obiect este specificarea elementelor ca parametri ai apelului 'new' :

var marca=new Array('Volvo','Mercedes','Fiat');

Desi nu este necesara declararea dimensiunii tabloului exista si posibilitatea de a-i da acestuia o valoare initiala :

var marca=new Array[3];

In cazul in care definim un elemente de tablou cu indexul 'i' mai mare decat dimensiunea actuala a tabloului, automat marimea tabloului creste la 'i+1'. Un element nedefinit va returna o valoare nula in cazul in care este accesat.

OBIECTUL 'Date'

Acest obiect da posibilitatea lucrului cu ore si date calendaristice.

Trebuie sa mentionam ca JS ia data de referinta 1 ianuarie 1970 - nu putem lucra cu date anterioare acesteia. De asemenea trebuie acordata atentie faptului ca obiectul 'Date' este creat pe baza orei calculatorului client si JS tine evidenta valorilor ora/data in milisecunde, incepand cu data sa de referinta.

Acest obiect contine o multime de metode si proprietati :

Tabelul 2.5 - 33

Definirea unui obiect 'Date' se poate face astfel :

var variabilaDate=new Date(parametri);

Lista parametrilor care pot fi transmisi la crearea acestor instante ale obiectului 'Date' :

Tabelul 2.5 - 34

OBIECTUL 'Math'

In cazul in care avem nevoie sa implementam operatii si formule matematice in cadrul programelor noastre scrise in JS putem folosi un obiect dedicat acestui scop. JavaScript incapsuleaza o serie de constante si proceduri intr-o singura entitate : obiectul 'Math'. Acesta difera de alte obiecte esentiale destul de mult. Putem efectua calculele aritmetice elementare in exteriorul unui obiect 'Math', astfel ca, daca nu avem nevoie de functii matematice mai elevate este posibil sa nu prea folosim acest obiect.

Obiectul 'Math' nu este creat din mers ci lucram cu o instanta esentiala a sa, prezenta permanent. De aceea acest obiect se numeste 'static'.

Proprietatile si metodele obiectului sunt prezentate mai jos :

Tabelul 2.5 - 35

OBIECTUL 'Boolean'

Acest obiect are scopul de a transforma o valoare non-booleana intr-una booleana. dupa aceea putem folosi acest obiect ca si cum ar fi o valoare booleana normala.

var obiectBoolean=new Boolean(valoare);

Parametrul 'valoare' specifica starea initiala a obiectului. Daca el este false, 0, null sau un sir gol ( '' ), ori daca este omis se implica o valoare 'false'. Toate celelalte valori vor stabili obiectul la 'true'.

Tabelul urmator prezinta metodele si proprietatile obiectului 'Boolean' :

Tabelul 2.5 - 36

OBIECTUL 'Number'

In acest caz avem de-a face cu un obiect de tip - sa-i zicem 'generic'; el face cu valorile numerice ceea ce face 'String' pentru valorile de tip sir. Obiectul este util cand trebuie sa accesam anumite valori constante, plus si minus infinit sau valoarea 'NaN'.

Mai jos avem lista de proprietati si metode ale obiectului :

Tabelul 2.5 - 37

OBIECTUL 'Function'

Acest obiect este ultimul obiect esential al limbajului JavaScript. El ne permite sa definim un sir in timpul rularii si sa-l compilam ca pe o functie. Iara sintaxa pentru declararea unui obiect de acest tip :

functieNumeObiect = new Function ( arg1,, argn, functionBody);

Trebuie sa mentionam ca un obiect 'Function' si o functie JS standard sunt similare pana la un punct, avand insa si anumite diferente importante. Numele de obiect al unui astfel de obiect este considerat o variabila reprezentand valoarea curenta a functiei definite cu 'new' in timp ce numele unei functii JS standard nu este o variabila ci doar numele unei functii.

OBIECTUL 'Global'

In finalul capitolului legat de obiecte trebuie sa introducem si acest concept. Pentru cei care au lucrat deja in limbajul JavaScript la un nivel macar mediu acest obiect poate apare surprinzator - ei nu l-au intalnit! Totusi va asigur ca exista.

Povestea acestui obiect incepe in perioada cand organizatia ECMA studia inca standardul JavaScript. In acea perioada s-a constata ca firma Microsoft grupase unele proprietati si metode de cel mai inalt nivel in limbajul JavaScript intr-un nou obiect : 'Global'. Studiile detaliate au aratat ca si firma Netscape cunostea si utiliza obiectul iar rezultatul a fost ca organizatia ECMA l-a adoptat oficial, definindu-i si lista de metode si proprietati - pe care de altfel le-am intalnit si pana acum fara a detalia exact modul lor de existenta si utilizare :

Tabelul 2.5 - 38