JavaScript Curs4
JavaScript Curs4
ObiecteJS2............................................................................................................................................2
ObiecteJS2
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:
//-->
</script>
Acest script seteaza culoarea de fundal a pagini "#eaeafe" (un albastru desechis), culoarea textului
rosu, a legaturilor verde si titlul "Lectie Java Script".
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 vrful 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;"
In ierarhia prezentata mai sus observati ca obiectele sunt structurate pe 3 nivele principale.
Obiectul "window" este considerat pe cel mai inalt nivel, urmeaza apoi obiectele de pe nivelul I,
nivelul II si nivelul III.
Obiectul din nivelul 1, de exemplu "document", contine obiectele din nivelul 2 (de ex. "forms[])
care la randul lor pot contine alte obiecte, de nivel 3 (de ex. "Buttons"). Astfel, in JavaScript,
6
continerea este principiul conform caruia un obiect contine alt obiect. De exemplu relatia dintre
obiectul "Form" si obiectul "Button" nu este una dintre clasa si subclasa, ci una intre container si
continut. Prin urmare, un obiect nu poate mosteni proprietatile si metodele altui obiect.
Applet - <applet>
Plugin - <embed>
Form - <form>
Submit - <input type="submit">
Text - <input type="text">
Textarea - <textarea>
Option - <option>
2. Exemplu script
Urmatorul script este un exemplu practic de folosire a ierarhiei DOM din JavaScript si elementele
HTML.
Cu ajutorul acestui script puteti prelua datele (textul) din interiorul unui "<div> ... </div>" pentru a
le adauga intr-o caseta <textarea>, astfel aceste date pot fi usor trimise la un script PHP.
<html>
<head>
<title>Script JS</title>
<script type="text/javascript">
<!-function CitesteDiv(){
valDiv = document.getElementById("div_id").childNodes[0].nodeValue;
document.formular.text.value = valDiv;
}
// -->
</script>
</head>
<body>
<div id="div_id">Aici este textul din interiorul Div-ului</div>
<form action="fisier.php" method="post" name="formular">
<textarea cols="30" rows="5" name="text" id="textul"></textarea> <br>
<input type="button" value="Adauga" onclick="CitesteDiv();" />
<input type="submit" value="Trimite" />
</form>
</body>
</html>
- Am definit functia "CitesteDiv()" care va fi apelata la apasare butonului "Adauga". In interiorul
acestei functii avem variabila "valDiv" care (prin codul
"document.getElementById("div_id").childNodes[0].nodeValue;") preia continutul din elementul
HTML "<div>" cu id-ul "div_id", apoi codul ("document.formular.text.value") defineste valoarea
casetei (cu atributul name="text") din formular egala cu valoarea variabilei "valDiv".
- Daca apasati butonul "Adauga", textul din interiorul etichetei <div> ... </div> va fi introdus in
formular cara apoi prin apasarea butonului "Trimite" poate fi trimis la un script PHP (aici
"fisier.php").
- Exemplu 2
Iata un alt exemplu, cu o actiune inversa celui de sus. Adica, textul introdus intr-un camp textarea,
dupa apasarea unui buton va fi inclus in pagina in cadrul unei etichete HTML <div>, fara ca pagina
sa fie reincarcata.
Retineti, aceasta actiune este pe partea de client, vizibila doar de utilizatorul actual, nu modifica
pagina originala de pe server si dupa inchiderea navigatorului textul introdus dispare.
<html>
<head>
<title>Script JS</title>
<script type="text/javascript">
<!-function ScrieDiv(){
valText = document.formular2.text2.value;
document.getElementById("div_id2").innerHTML = valText;
}
// -->
</script>
</head>
<body>
<div id="div_id2">Aici va apare textul din formular</div><br>
<form name="formular2">
<textarea cols="30" rows="5" name="text2" id="textul2"></textarea> <br>
<input type="button" value="Afiseaza" onclick="ScrieDiv();" />
</form>
</body>
</html>
- Am definit functia "ScrieDiv()" care va fi apelata la apasare butonului "Afiseaza". In interiorul
acestei functii avem variabila "valText" care (prin codul "document.formular2.text2.value") preia
sirul adaugat in campul "text2" din formular, apoi, prin comanda
"document.getElementById("div_id2").innerHTML" transfera si afiseaza sirul in cadrul etichetei
<div>, inlocuindu-l pe cel existent.
- Adaugati orice text in campul din formular apoi apasati butonul "Afiseaza", veti vedea rezultatul.
1. Obiectul Navigator
Obiectul Navigator reprezinta programul, aplicatia browser folosita pentru vizualizarea rezultatelor.
Cu acest obiect putem gasi informatii despre denumirea si versiunea browser-ului, precum si alte
informatii care pot fi folosite in practica.
Obiectul Navigator are la randul lui doua sub-obiecte (sau obiecte copil) : "Plugin" si "Mimetype".
- Proprietati ale obiectului "navigator" sunt urmatoarele:
appCodeName - reprezinta numele de cod al browserului
appName - reprezinta numele oficial al browserului
appVersion - versiunea browserului
language - limbajul browserului
mimeTypes - face referire la un tablou de obiecte "Mimetype" care contine toate tipurile
MIME pe care le accepta browserul
platform - un sir care reprezinta platforma pe care ruleaza browserul
plugins - face referire la un tablou de obiecte "Plugin" care contine toate modulele plugin
instalate pe browser
userAgent - sir care reprezinta antetul utilizator-agent
javaEnabled() - functie care testeaza daca browserul cunoaste sau nu limbajul JAVA
plugins.refresh() - cauta orice module plugin nou instalate
preference() - permite citirea si stabilirea diverselor preferinte ale utilizatorului in browser
taintEnabled() - testeaza daca este activata contaminarea datelor
10
2. Obiectul History
Navigatoarele web au o caracteristica numita "History" care permite urmarirea locatiilor pe care leati vizitat. Acest obiect contine un tablou (Array) cu paginile vizitate de client, in cadrul unei
ferestre, un istoric al paginilor vizitate.
Obiectul History permite navigarea inapoi in lista istoric la paginile care au mai fost vizitate in
cadrul aceleasi ferestre.
- Proprietatile obiectului "history" sunt urmatoarele"
11
3. Obiectul Location
Acest obiect contine date despre originea unei pagini web, stocheaza informatii despre o adresa
URL dintr-o fereastra specifica.
- Proprietatile obiectului "location" sunt urmatoarele"
hash - reprezinta un nume de ancora in adresa URL, care incepe cu caracterul diez (#)
host - reprezinta numele calculatorului gazda si numarul de port al adresei URL
hostname - reprezinta partea cu numele calculatorului gazda din adresa URL
href - reprezinta adresa URL completa
pathname - reprezinta partea PATH_INFO a adresei URL
port - reprezinta partea de port a adresei URL
protocol - reprezinta partea de protocol a adresei URL
search - partea de cautare a adresei URL, inclusiv caracterul "?"
<script type="text/javascript">
var protocol = window.location.protocol;
</script>
- Observati modul de lucru bazat pe obiecte. Intai se adauga obiectul de rang superior ( window )
apoi, dupa un caracter punct (.) se adauga urmatorul sub-obiect in care vrem sa lucram (aici
"location"), si dupa un caracter punct adaugam proprietatea acestui obiect la care vrem sa facem
referire.
Pentru o mai buna invatare, incercati sa creati singuri si alte exemple folosind si alte proprietati si
metode ale obiectelor prezentate in lectie.
13
1. Obiectul Mimetype
Numele acestui obiect vine de la Multipurpose Internet Mail Extensions (extensii aduse serviciului
de posta electronica) si este un subobiect al obiectului "Navigator".
Mimetype permite accesarea informatiilor despre tipurile MIME pe care le recunosc modulele
plugin ale browserului.
Acesta, ca si obiectul "Plugin", nu sunt recunoscute de Internet Explorer (cel putin pana in
versiunea 7).
Proprietati ale obiectului "Mimetype" sunt urmatoarele :
description - contine descrierea obiectului "Mimetype"
enabledPlugin - contine modulul plugin pentru un obiect "Mimetype" specific
suffixes - contine extensia de fisier pentru "Mimetype"
type - contine reprezentarea de tip sir a obiectului "Mimetype"
2. Obiectul Plughin
La fel ca si "Mimetype", nici obiectul Plughin nu este recunoscute de Internet Explorer.
Acest obiect face referire la modulele plugin instalate pentru browser si contine un tablou de
elemente si tipuri MIME tratate de fiecare modul plugin instalat.
Obiectul "Plugin" are o singura metoda legata direct de el : metoda "plugins.refresh()", care apartine
de obiectul "navigator". Aceasta metoda permite reconstruirea tabloului de module plugin.
Proprietatile obiectului "Plugin" sunt urmatoarele :
description - face referire la o descriere a modulului plugin
filename - face referire la numele fisierului unui program plugin
length - face referire la numarul de tipuri MIME continute in tablou
name - face referire la numele modulului plugin
3. Obiectul Anchor
Acest obiect este un text sau o imagine in pagina HTML care poate fi tinta unei legaturi hipertext.
"Anchor" este un obiect JavaScript foarte putin important si folosit rar, totusi e bine sa-l cunoasteti
Proprietatie obiectului "Anchor" sunt urmatoarele :
name - nume care ofera acces la ancora de la o legatura
text - textul care apare intre etichetele <a> si </a>
x - coordonata x a ancorei
y - coordonata y a ancorei
14
4. Obiectul Area
Obiectul Area permite sa definim o suprafata dintr-o imagine ca fiind o harta de imagini. Atributul
"href" al unui obiect "<area>" este incarcat intr-o fereastra tinta atunci cand vizitatorul executa click
pe o locatie specificata.
Mai multe detalii despre hartile de imagini HTML gasiti la pagina Harti de imagini.
Acest obiect are o singura metoda:
handleEvent() apeleaza handlerul de evenimente asociat acestui eveniment
Proprietatie obiectului "Area" sunt urmatoarele :
hash - portiunea de adresa URL care este ancora, inclusiv semnul diez ( # )
host - numele calculatorului gazda (adresa IP) si portul specificat in adresa URL
hostname - numele calculatorului gazda specificat in adresa URL
href - intreaga adresa URL
pathname - calea fisierului specificat in adresa URL, incepand cu simbolul /
port - portul specificat in adresa URL
protocol - protocolul specificat in adresa URL, inclusiv caracterul doua puncte ( : )
search - partea de cautare a adresei URL, inclusiv caracterul initial semnul intrebarii (? )
target - numele ferestrei tinta in care ar trebui afisata adresa URL
text - textul care apare intre etichetele <area> si </area>
x - coordonata x a suprafetei
y - coordonata y a suprafetei
5. Obiectul Applet
Obiectul Applet reprezinta echivalentul JavaScript al etichetei HTML <applet>.
Acest obiect adreseaza un applet Java. Aceste obiecte JavaScript nu au metode proprii, dar in
practica putem folosi JavaScript ca sa accesam metodele unui anumit applet scris in limbajul Java.
Proprietatile obiectului "Applet" sunt toate campurile publice ale respectivului applet Java, iar
metodele sunt toate metodele publice ale acestuia.
6. Obiectul Layer
Si acesta este un obiect cu anumite particularitati, este recunoscut doar de browserele Netscape,
Mozilla si permite limbajului JavaScript sa acceseze straturile din interiorul documentului.
Utilizarea acestui obiect necesita cunostinte DHTML.
Proprietatie obiectului "Layer" sunt urmatoarele :
above - specifica stratul de deasupra
background - face referire la imaginea de fundal a stratului
below - specifica stratul de dedesubt
bgColor - face referire la culoarea de fundal a stratului
clip.bottom - face referire la partea de jos a suprafetei decupate a stratului
clip.height - face referire la inaltimea suprafetei decupate a stratului
15
7. Obiectul Link
Obiectul link permite lucrul cu legaturi (link-uri) in cadrul codului JavaScript. Deoarece un link
reprezinta un URL care face referire la o alta pagina HTML sau la alta destinatie, este asemanator
cu obiectul "Location" (care continea aceleasi informatii pentru pagina HTML curenta).
Acest obiect are o singura metoda:
handleEvent() apeleaza handlerul pentru evenimentul specificat
16
17