curs08

70

Obiecte în JavaScript Scripturile realizate în JavaScript actioneaza asupra unui ansamblu de

obiecte continute în pagina Web sau apartinând browserului. Actiunea va presupune apelul unor metode definite în acest scop pentru obiectele respective sau atribuirea unor valori membrilor date ai obiectelor. Obiectele care pot fi accesate pot fi definite prin structura ierarhica din figura:

În pagina Web urmatoare: <html> <body> <head> <title>Pagina mea</title> </head> <body> <a href="http://www.city.com/mycv/">Totul despre mine</a> <form> <input type="button" name="Buton1"> </form> </body> <html>

pot fi accesate obiectele document, form si Buton1 :

document.title = "Pagina mea" document.form document.form.Buton1

Ca si în alte limbaje orientate pe obiecte, accesarea unei metode sau a

unui membru-data din componenta unui obiect se va face printr-o constructie de forma nume.metoda (sau nume.data).

Navigator

Window

Pozitie Istoric Document

Formulare Marcaje <A>

71

Obiectul Navigator Obiectul navigator are urmatoarele proprietati:

Numele proprietatii Sintaxa Efect appName navigator.appName furnizeaza numele navigatorului appVersion navigator.appVersion furnizeaza versiunea navigatorului si

numele sistemului de operare appCodeName navigator.appCodeName furnizeaza un cod care identifica

fabricantul browserului userAgent navigator.userAgent informatie care defineste

caracteristicile browserului Exemplu de script : <html> <head> <script language="JavaScript"> document.write(navigator.appName+"<br>") document.write(navigator.appVersion+"<br>") document.write(navigator.appCodeName+"<br>") document.write(navigator.userAgent+"<br>") </script> </head> <body> </body> </html>

Pentru Internet Explorer, dupa încarcarea paginii fereastra aplicatiei va

afisa:

Obiectul location Obiectul location este folosit pentru a obtine diferitele parti din adresa din

Internet a unui fisier (URL). El are urmatoarele proprietati: − location.protocol - defineste protocolul de comunicatie cu serverul

(HTTP, FTP, GOPHER etc), − location.hostname – numele calculatorului de pe care s-a descarcat

fisierul − location.port – numarul portului folosit de browser pentru

conectare la Internet; − location.pathname – calea pentru documentul curent; − location.search – comenzi de cautare (query) continute în URL;

72

Obiectele continute în formulare Obiectele continute în formulare sunt cuprinse între marcajele <form>

</form> Butoanele Butoanele sunt componente ale unui formular necesare pentru a comanda

exectarea unor actiuni. Butoanele au doua proprietati accesibile, nume (name) si valoare (value). Valoarea reprezinta eticheta înscrisa pe buton iar numele serveste la specificarea butonului în cadrul unui script. Dintr-un script se poate modifica eticheta înscrisa pe un buton printr-o instructiune de forma:

Document.form.nume_buton.value="eticheta" La definirea unui buton se poate preciza o functie care va fi apelata în

cazul actionarii acestuia :

<input type="BUTTON" value="Verifica" OnClick="verific()">

Functia verific() va fi plasata într-un script continut în sectiunea <head> si poate realiza validarea unor valori cotinute în câmpurile formularului. OnClick este numele evenimentului care declanseaza apelul functiei verific().

Caseta de validare (Check box) Din JavaScript este posibila capturarea valorii unei casete de validare

folosind o constructie de forma: formular.nume_caseta.value

Daca valoarea furnizata este "on", caseta era validata. Valoarea poate fi modificata:

formular.casatorit.value="on" Obiecte ascunse (hidden) Obiectele de tip hidden sunt folosite pentru a transporta informatii între

pagini. Odata cu trimiterea spre server a datelor continute în câmpurile formularului, acesta primeste si informatiile continute în câmpurile ascunse. Scriptul asociat formularului, care se ruleaza pe server, poate include valorile continute în câmpurile hidden în pagina de raspuns la continutul receptionat, realizând astfel un efect de conversatie sustinuta între site si utilizatorul acestuia.

Exemplu de utilizare: <input type="hidden" name="platform" value="navigator.appVersion">

73

Butoane radio Butoanele radio sunt siruri de butoane având proprietatea de a nu putea fi

actionat la un moment dat decât unul. Valorile pot fi citite accesând proprietatea checked care poate avea

valorile false sau true. Butoanele sunt accesibile ca elemente ale unui sir. De exemplu form.plata[0] este primul buton din lista de butoane plata continuta în formularul form.

Exemplu:

<html> <head> <script language="JavaScript"> function scriu() { if(formular.plata[0].checked) { document.write("primul buton <br>"); } else { if(formular.plata[1].checked) { document.write("al doilea buton <br>"); } else { document.write("ultimul buton <br>"); } } } </script> </head> <body> <h1>Formular</h1> <form name="formular" method="post" action="act"> Plãtesc cu : <INPUT TYPE=radio NAME="plata" VALUE="visa" checked><B>Card VISA</B> <INPUT TYPE=radio NAME="plata" VALUE="cec"><B>Cec</B> <INPUT TYPE=radio NAME="plata" VALUE="mandat"><B>Mandat postal</B> <BR><BR> <INPUT TYPE=button value ="Verific!" onClick="scriu()"> </form> </body> </html>

Butonul tip reset Actionarea unui buton tip reset are ca si efect stergerea tuturor valorilor

introduse în câmpurile unui formular. Dintr-un script acelasi efect se obtine apelând metoda click definita pentru un astfel de control:

nume_formular.nume_buton_reset.click Obiectul select O caseta de tip select serveste la alegerea unei valori dintr-o lista de

valori. Un script JavaScript poate fie prelua valoarea selectata fie construi sau rearanja dinamic optiunile cuprinse în lista atasata unui select (daca optiunile anterior selectate conduc la acest lucru).

74

Pentru preluarea valorii selectate se va folosi proprietate selectedIndex, careia i se atribuie în mod automat, dupa selectarea unei optiuni, o valoare întreaga. Exemplu :

<html> <head> <script language="JavaScript"> function schimb() { if(formular.select1.selectedIndex==1) { document.write("prima optiune <br>"); } else { if(formular.select1.selectedIndex==2) { document.write("a doua optiune <br>"); } else { document.write("ultima optiune <br>"); } } } </script> </head> <body> <h1>Formular</h1> <form name="formular" method="post" action="act"> Plãtesc cu : <SELECT NAME="select1" onChange="schimb()"> <OPTION SELECTED VALUE=nimic>(alegeti forma) <OPTION VALUE=cec>Cec <OPTION VALUE=card>Card Visa sau Mastercard <OPTION VALUE=virament>Ordin de plata </SELECT> </form> </body> </html>

Apelul functiei schimb() se realizeaza la aparitia evenimentului

onChange. Pentru aceasta, în marcajul select este continut atributul onChange. Obiectul submit Obiectul submit declanseaza trimiterea catre server a continutului

câmpurilor unui formular. Pentru simplificarea scriptului CGI care realizeaza validarea valorilor introduse se poate realiza o prima verificare folosind o functie JavaScript care va fi apelata automat, la apasarea butonului de tip submit. Exemplu:

<HTML> <HEAD> <TITLE>Exemplu de validare</TITLE> <SCRIPT LANGUAGE="JavaScript"> <!-- function verif() { var sir = document.formular.virsta.value; var virsta = parseInt(sir); if ( 0 < virsta && virsta < 150 ) { return( true );

75

} else { alert("valoarea introdusa " + sir + " este eronata."); return( false ); } }  </SCRIPT> </HEAD> <BODY> <HR> <FORM NAME="formular" METHOD="post"

ACTION="mailto:[email protected]" onSubmit="verif()"> <P>Vârsta în ani: <INPUT TYPE="text" NAME="virsta" VALUE="" SIZE="3"></P> <BR><INPUT TYPE="submit" value="Ok"> </FORM> <HR> </BODY> </HTML> Indiferent de valoarea returnata de functie (true sau false), continutul

formularului este trimis spre server, desi conform documentatiei disponibile, în cazul în care finctia verif() returneaza false trimiterea ar trebui anulata.

Obiectul text Obiectul text serveste la citirea unui sir de caractere. Preluarea valorii

unui astfel de control se realizeaza astfel:

var obiect=text.object.value

Exemplu : <html> <head> <script language="JavaScript"> function scriu() { var obj=formular.tx.value if(obj.length > 0) { document.write(obj); } else { document.write("Pai n-ati scris nimic!"); } } </script> </head> <body> <h1>Formular</h1> <form name="formular" method="post" action="act"> <input type=text name=tx size=10> <INPUT TYPE=button value ="Verific!" onClick="scriu()"> </form> </body> </html> În exemplul dat obj.length furnizeaza lungimea sirului de caractere obj.

76

O alta posibilitate de a utiliza într-un script un control de tip text este aceea de a afisa o valoare pe ecran fara a deschide o noua fereastra (ca în cazul folosirii metodei document.write). Exemplu:

<html> <head> <script language="JavaScript">

function scriu() { var obj=formular.tx.value if(obj.length > 0) { document.write(obj); } else { formular.tx.value="Numele Dv." } }

</script> </head> <body> <h1>Formular</h1> <form name="formular" method="post" action="act"> <input type=text name=tx size=10 value="Numele Dv."> <INPUT TYPE=button value ="Verific!" onClick="scriu()"> </form> </body> </html> Daca stergeti sirul si actionati butonul, sirul "Numele Dv." este rescris în

câmpul controlului tx. Obiectul textarea Continutul unui obiect textarea poate fi testat si generat dinamic, ca si

continutul unui control de tip text. Evenimente

Principalul motiv pentru care se integreaza secvente de cod scrise în JavaScript într-o pagina Web este adaugarea de functii suplimentare care sunt executate local, în cadrul browserului. Aceste functii sunt declansate fie automat, la încarcarea paginii, fie la aparitia unui eveniment generat ca urmare a unei actiuni a operatorului. Evenimentele sunt generate când operatorul interactioneaza cu un element al interfetei. În cazul unei pagini Web, elementul cu care se interactioneaza este fie un control apartinând unui formular (buton, caseta de validare, control de tip text etc) fie o legatura (realizata folosind marcajul <A>). Functia apelata la aparitia unui eveniment este strâns legata de rolul elementului din pagina caruia îi este asociata. Pentru a putea asocia unor elemente din pagina functii care sunt declansate la interactionarea cu elementele respective, marcajelor corespunzatoare li s-au adaugat noi atribute.

77

Exemple : <INPUT TYPE="checkbox" NAME="optiune" VALUE="cu_frecventa" onClick="cu frecventa = this.checked;" >

Atributul suplimentar onClick permite scrierea în continuare a una sau mai multe comenzi JavaScript. Daca sunt scrise mai multe comenzi, acestea vor fi separate prin ";". Sirul care contine secventa de cod nu poate contine caracterul NL (la scriere nu se va apasa tasta Enter). Daca numarul de comenzi este mai mare, acestea sunt grupate într-o functie plasata în sectiunea HEAD. între marcaje <SCRIPT> </SCRIPT>. Unele marcaje pot avea mai multe atribute care declanseaza functii de tratare a evenimentelor. De exemplu un marcaj <INPUT TYPE=TEXT> poate contine atributele suplimentare onChange, onFocus si onBlur care declanseaza actiuni la modificarea continutului, la intrarea cursorului în spatiul controlului sau la iesirea cursorului din spatiul controlului.

Obiect Atribute posibile Area onClick()[1] onMouseOut() onMouseOver() Button onBlur()[2] onClick() onFocus()[2] Checkbox onBlur()[2] onClick() onFocus()[2] FileUpload onBlur() onChange() onFocus() Form onReset() onSubmit() Frame onLoad() onUnload() Image onAbort() onError() onLoad() Link onClick() onMouseOut() onMouseOver() Radio onBlur()[2] onClick() onFocus()[2] Reset onBlur()[2] onClick() onFocus()[2] Select onBlur()[2] onChange() onFocus()[2] Submit onBlur()[2] onClick() onFocus()[2] Text onBlur() onChange() onFocus() Textarea onBlur() onChange() onFocus() Window onBlur() onError() onFocus() onLoad() onUnload() Evenimente sistem

Evenimentele sistem nu necesita o actiune din partea utilizatorului pentru a fi declansate.

OnLoad Evenimentul OnLoad este activat dupa încarcarea completa a unei pagini.

Actiunea care trebuie realizata, asociata acestui eveniment, este precizata în marcajul <BODY> sau <FRAMESET>.

78

Exemplu : <BODY OnLoad="salut()">

Functia salut() va fi plasata între marcaje <script> ... </script>, în sectiunea <head>.

OnUnload Evenimentul OnUnload se declanseaza la parasirea paginii careia îi este

asociat si este necesar pentru a închide eventualele ferestre care s-au deschis ca urmare a executarii unor scripturi din site si eventual pentru a transmite un ultim mesaj vizitatorului. Actiunile asociate se precizeaza ca si în cazul evenimentului OnLoad, în marcajul <BODY> sau <FRAMESET>.

Evenimente Mouse Evenimentele mouse sunt legate de actiunea mouse-ului asupra obiectelor

carora li s-a precizat o actiune conditionata de aparitia unui eveniment de acest tip.

OnClick Obiectele care accepta evenimente OnClick sunt hiperlegaturile (<A>),

casetele de validare si butoanele. OnFocus Evenimentul OnFocus apare atunci când obiectul caruia îi este asociat dobândeste controlul. Poate fi asociat obiectelor de tip text, textarea, password si select. OnBlur

Evenimentul OnBlur este generat atunci când obiectul caruia îi este asociat pierde controlul. OnChange

Evenimentul OnChange este generat atunci când obiectul caruia îi este asociat a fost modificat si apoi a pierdut controlul. Poate fi asociat obiectelor de tip text, textarea, password si select.

79

OnSelect OnSelect se foloseste pentru obiecte de tip text, textarea si password si

actiunea indicata este executata atunci când utilizatorul selecteaza parti din text. Exemplu de folosire :

<input name="material" Type="TEXT" OnSelect="functie()">

OnSubmit

OnSubmit se foloseste pentru marcaje <form> pentru a declansa o actiune care de cele mai multe ori verifica valorile introduse, înaintea trimiterii lor spre server. Daca functia apelata în cazul apasarii butonului tip submit returneaza valoarea false, datele continute în formular nu vor mai fi expediate.

OnMouseOver Evenimentul OnMouseOver apare atunci când cursorul mouse-ului ajunge

pe obiectul caruia îi este atasat. Actiunea execcutata poate realiza afisarea unor explicatii legate de functiile controlului respectiv. Exemplu:

<html> <head> <script language="JavaScript"> function explain1(){ window.alert("Link to the White House."); } function explain2(){ window.alert("Link to my Home Page."); } function explain3(){ window.alert("Link to yahoo.com."); } </script> </head> <body> <h3>Exemple pentru OnMouseOver</h3> <hr> <a href="http://www.mypag.ro" OnMouseOver="explain2()"> My Home Page</a><br><br> <a href="http://www.whitehouse.gov" OnMouseOver="explain1()"> White House</a><br><br> <a href="http://www.yahoo.com" OnMouseOver="explain3()"> yahoo.com</a><br><br> </body> </html>

curs08

Documents