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

Astfel aceasta expresie se adreseaza proprietatii "nume_proprietate" din obiectul curent.

Obiectul document are urmatoarele proprietati:

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

Obiectul document are urmatoarele meode:

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)

In urmatorul exemplu puteti vedea cum au fost folosite proprietatile obiectului document pentru stabilirea culorii de fundal, a textului, link-urilor si titlul unei pagini web:

<script type="text/javascript">

</script>

Acest script seteaza culoarea de fundal a pagini "#eaeafe" (un albastru desechis), culoarea textului rosu, a legaturilor verde si titlul "Lectie Java 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">

</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>

Acest cod va afisa in pagina urmatorul formular:

Name:

Dupa ce scrieti in campul "Name" un nume si apasati butonul "Apasa" va apare o vereastra Alert cu mesajul "Salut "nume" ".
Ierarhia obiectelor din pagina afisata de acest exemplu este urmatoarea:

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

Daca de exemplu doriti sa aflati ce se introdce in primul element din formular, trebuie sa va ganditi cum sa accesati acest obiect.
Pornim din vârful ierarhiei "document", urmarim calea catre primul formular "forms[0]" pana la obiectul numit "elements[0]" (se adauga toate numele obiectului pe masura ce le depasim). Astfel putem accesa primul element prin :

document.forms[0].elements[0]

Pentru a afla ce text a fost introdus, apelam valoarea acelui element. Pentru elemente din formular (tip "input") se foloseste proprietatea "value". Acesta arata valoarea casetei "input" respective (aici textul introdus in campul de text). Acum putem afla valoarea cu ajutorul urmatoruli cod:

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

Valoarea este stocata in variabila "name", pe care o putem folosi in script.
Astfel, putem crea o fereastra cu ajutorul liniei de cod "alert("Salut! " + name)", unde "name" va fi valoarea variabilei "name" care reprezinta textul introdus in primul element din primul formular.

Daca aveti formulare de dimensiuni mari, poate deveni dificila apelarea obiectelor dupa ordinea lor, prin numere intre paranteze patrate. Daca am avea trei formulare si vrem sa apelam al cincisprezecelea element (camp) din al treilea formular, ar trebui sa scriem "document.forms[2].elements[14]". Pentru a facilita astfel de apelari, se pot da nume unice diferitelor obiecte, folosind atributul "name", dupa cum puteti vedea in exemplu urmator:

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

Astfel "forms[0]" este de asemenea "nume_form" si in loc de "elements[0]" puteti utiliza "nume_element" (specificat cu atributul "name" in eticheta <input>).
Prin urmare, in loc de a scrie

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

Se poate scrie:

name = document.nume_form.nume_element.value;

Un Test simplu in fiecare zi

HTML

CSS

JavaScript

PHP-MySQL

Engleza

Spaniola

Care meta tag se foloseste pentru scurta descriere a paginii?

<meta name="description" content="70-160 caractere ce descriu continutul paginii" />

Ce proprietate CSS opreste efectul dat de "float"?

clear text-align position

#some_id {
  clear: both;
}

Clic pe metoda ce creaza un array cu toate elementele din pagina cu un anumit nume de tag.

getElementsByName() getElementById() getElementsByTagName()

var divs = document.getElementsByTagName("div");
var nr_divs = divs.length;
alert(nr_divs);

Indicati functia PHP ce returneaza numarul de elemente dintr-un array.

is_[) count() strlen()

$arr =[7, 8, "abc", 10);
$nri = count($arr);
echo $nri;        // 4

Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "I live (happy)".

happly happily hapily

I live happily.
- Traiesc fericit (in mod fericit).

Indicati adverbul corespunzator adjectivului din paranteza in propozitia: "Vivo (feliz)".

felizamente felizmente felices

Vivo felizmente.
- Traiesc fericit (cu fericire).