| PROIECTARE SITE WEB > DOCUMENTATIE - JAVASCRIPT - Ierarhii
JavaScript |
Proiectare Site si Web Design - JavaScript - Ierarhii
JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie
de obiecte. Practic toate elementele sunt vazute ca obiecte. Fiecare
obiect are anumite proprietati si metode prin care poate fi manipulat.
Cu ajutorul JavaScript putem lucra cu usurinta cu obiectele componente
ale unei pagini web. Pentru a putea face acest lucru este foarte importanta
intelegerea ierarhiei obiectelor HTML. Vom intelege mai bine mecanismul
de functionare printr-un exemplu. Codul urmator este o pagina HTML
simpla:
<html>
<head>
<title>Pagina mea</title>
</head>
<body bgcolor=#ffffff>
<center>
<img border="0" src="../../images/search_logo.gif"
width="225" height="85">
</center>
<p>
<center>
<form name="Formular">
Nume:
<input type="text" name="nume" value=""><br>
E-mail:
<input type="text" name="email" value=""><br><br>
<input type="button" value="Trimite" name="Trimitere"
onClick="alert('activare trimitere')">
</form>
</center>
</p>
<p>
<center>
<img border="0" src="../../images/linie.gif"
width="207" height="11"><br>
</center>
</p>
<center>
<a href="http://www.afaceri-online.net">Pagina demo</a>
</center>
</body>
</html>
Iata o imagine a paginii (am adaugat cateva
adnotatii cu culoarea rosie):
Avem doua imagini (sigla si bara de jos), o legatura
("Pagina de inceput") si un formular cu doua campuri text
(Nume / E-mail), respectiv un buton (Trimite). Din punctul de vedere
al mecanismelor JavaScript, fereastra browserului este un obiect "window".
Acest obiect (fereastra browser asimilata si ca fereastra principala)
contine unele elemente ca, de exemplu, bara de stare (status bar)
din partea cea mai de jos a ferestrei browserului. In interiorul ferestrei
principale putem incarca un document (pagina) HTML (sau un fisier
de alt tip - ne vom limita pentru moment la fisiere de tip HTML).
Aceasta pagina odata incarcata este asadar un obiect document. Aceasta
inseamna ca obiectul document este chiar pagina HTML incarcata la
un anumit moment in browser. Obiectul document este un obiect foarte
important in JavaScript - se foloseste extrem de frecvent. O proprietate
a obiectului document este, de exemplu, culoarea de fundal a paginii.
Mai important este faptul ca toate obiectele HTML sunt proprietati
ale obiectului document. Un obiect HTML este, spre exemplu, o legatura
sau un formular, ca in cazul ilustratiei noastre.
Urmatoarea imagine arta ierarhia creata de pagina noastra:
Dorim acum sa obtinem informatii despre obiecte si sa manipulam aceste
obiecte.
Pentru a putea face acest lucru trebuie sa putem accesa diferite obiecte
in cadrul ierarhiei. Putem vedea numele obiectelor in imaginea de
mai sus a ierarhiei. Daca dorim sa adresam prima imagine din pagina
HTML trebuie sa ne uitam in ierarhie. Vom incepe intotdeauna cu nivelul
cel mai de sus. Primul obiect (nivelul 0) este denumit document.
Prima imagine este reprezentata prin images[0], fiind
situata pe nivelul 1 (imediat inferior). Aceasta inseamna ca putem
accesa acest obiect particular prin intermediul unui apel JavaScript
cu ajutorul sintaxei:
document.images[0].
Daca, de exemplu, dorim sa stim ce introduce utilizatorul in al doilea
camp din formular, trebuie sa accesam acest obiect. Din nou pornim
din varful ierarhiei. Urmarim calea pana la obiectul numit elements[1]
specificand toate obiectele intermediare pe masura ce le depasim.
Aceasta inseamna ca putem accesa primul element (elements[1]) prin
apelul:
document.forms[0].elements[1]
Putem afla si ce text a fost introdus? Desigur,
insa pentru a sti ce metode si proprietati ofera obiectul, va trebui
sa cercetam cu atentie documentatia JavaScript (ne referim atat la
documentatia de la Netscape cat si la alte documentii bune aparute
pe piata - 3 astfel de documentatii fiind oferite de site-ul Afaceri-Online
ca anexa la cartea electronica "Java, JavaScript Profesional").
Mentionam in cazul exemplului nostru faptul ca in referinte vom putea
constata ca un element text are proprietatea value.
"Value" este practic textul introdus in elementul text.
Putem citi aceasta valoare cu ajutorul urmatoarei linii de cod:
name= document.forms[0].elements[1].value;
Sirul este inmagazinat in variabila name.
Putem de acum incolo sa lucram cu aceasta variabila.
|
Creare
si actualizare site