Ierarhia Java Script

JavaScript organizeaza toate elementele unei pagini web intr-o ierarhie. Toate elementele sunt vazute ca obiecte si fiecare obiect are anumite proprietati si metode sau alte obiecte.
Cu JavaScript putem manipula usor obiectele. Pentru aceasta este importanta intelegerea ierarhiei obiectelor HTML.

• JavaScript intelege fereastra browser-ului ca pe un obiect window, acesta contine anumite elemente, cum ar fi de exemplu bara de stare (status bar).
• In fereastra browser-ului putem incarca (afisa) un document HTML (sau si de alt tip, dar aici ne referim la HTML). Aceasta pagina din interiorul navigatorului este un obiect document.

1. Obiectul document

Acesta este unul din obiectele cele mai importante in JavaScript, este folosit foarte des.
Obiectul Window lasa continutul unui document web in grija obiectului Document, acesta este responsabil de continutul afisat pe o pagina si se poate lucra cu el pentru afisarea de paginii HTML dinamice.
Obiectul document contine mai multe proprietati, cum ar fi culoarea de fundal a paginii (bgcolor) sau alte obiecte, cum sunt tag-urile HTML. De retinut ca toate elementele HTML sunt proprietati ale obiectului document, si la randul lor acestea sunt obiecte. Un obiect HTML este de exemplu un formular, o eticheta DIV sau un link.
Pentru a desemna obiectul sau proprietatea curenta pe care dorim sa o folosim, adaugam cuvantul this urmat de caracterul punct (.) si numele proprietatii, dupa cum vedeti in urmatoarea sintaxa:

• this.nume_proprietate

• alinkColor - culoarea unei legaturi active
• all - tabloul tuturor etichetelor HTML din document
• anchors - tabloul de obiecte "Anchor", in ordinea specificata in sursa
• applets - tabloul de obiecte "Applet"
• bgcolor - culoarea de fundal a documentului
• classes - tabloul claselor paginilor cu stiluri
• cookie - fisier cookie asociat cu documentul
• domain - domeniu al documentului
• embeds - tablou de obiecte inglobate
• fgcolor - culoarea textului in document
• forms[] - tablou de obiecte "Form" (formular)
• formName - specifica instanta "Form" care este accesata prin folosirea valorii atributului "name" din eticheta <form>
• height - specifica inaltimea documentului in pixeli
• ids - tabloul identificatorilor paginii cu stiluri
• images - tablou de obiecte "Image"
• lastModified - data cand a fost modificat ultima oara documentul
• layers - tablou de obiecte "Layer"
• linkColor - culoarea legaturilor
• links - tablou de obiecte "Link", ce corespund tuturor link-urilor HREF din document, in ordinea specificata in sursa
• plugins - tablou de obiecte inglobate
• referrer - adresa URL (externa) a documentului la care a fost legat documentul curent
• tags - tabloul etichetelor paginii cu stiluri
• title - titlul documentului
• URL - adresa URL a documentului curent
• vlinkColor - culoarea legaturilor vizitate
• width - specifica latimea documentului in pixeli
• lastModified - URL-ul documentului

• captureEvents() - captureaza evenimentele care vor fi tratate de document
• close() - inchide fluxul datelor de iesire spre document
• contextual() - permite sa aplicam in mod selectiv un stil unui element HTML care apare intr-un anumit context specific
• getSelection() - intoarce textul selectat
• handleEvent() - apeleaza handlerul pentru evenimentul specificat
• open() - deschide fluxul datelor de iesire spre document
• releaseEvents() - elibereaza evenimentele capturate de document
• routeEvent() - dirijeaza evenimentele capturate spre alte obiecte
• write() - adauga text in document
• writeln() - adauga text si un caracter linie noua in document (textul pe linia lui)

<script type="text/javascript">
<!--
    document.bgColor = '#eaeafe'
    document.fgColor = '#fe1111'
    document.linkColor = '#01ff01'
    document.title = "Lectie JavaScript"
//-->
</script>

2. Obiectul document si Formulare

Formularele de asemenea pot fi considerate si tratate ca obiecte dintr-un document HTML, acestea fiind sub-obiecte ale obiectului "document", astfel se apeleaza impreuna cu acesta.
Penru a intelege mai bine lucrul cu obiectul document si cum se lucreaza cu ierarhia obiectelor, studiati si urmatorul exemplu:

<html>
<head>
<script type="text/javascript">
<!--
function afisare()
{
nume = document.nume_form.nume_camp.value;
return nume
}
//-->
</script>
</head>
<body >
<form name="nume_form">
Name: <input type="text" name="nume_camp" value=""><br>
<input type="button" value="Apasa" name="Buton" onClick="alert('Salut ' +afisare())">
</form>
</body>
</html>

Name:

• document (pagina HTML) -> Forms[0] (sau numele formularului din "name" - intregul formular) -> {Element[0] (primul camp din formular), Element[1] (butonul din formular)}

• document.forms[0].elements[0]

• name = document.forms[0].elements[0].value;

• <form name="nume_form">
  Nume: <input type="text" name="nume_element" value="">

name = document.forms[0].elements[0].value;

name = document.nume_form.nume_element.value;