Curs Javascript pentru incepatori . Obiectul Document. Partea VI
04 Iunie 2011 de Mihail Alin
Autor : Mihail Alin
Important!! : Textul si imaginile continute in acest curs sunt proprietatea Rotuts.com si nu pot fi copiate/refolosite pe alte pagini/e-books fara acordul nostru.
Important!! : Textul si imaginile continute in acest curs sunt proprietatea Rotuts.com si nu pot fi copiate/refolosite pe alte pagini/e-books fara acordul nostru.
+ Partea I
+ Partea II
+ Partea III
+ Partea IV - Obiectele in JavaScript
+ Partea V - Obiectele location si history
+ Partea VI - Obiectul Document
+ Partea VII - Obiectul form
Obiectul Document
1.Introducere
Obiectul document este cel mai important din ierarhia obiectelor ale browser-ului, deoarece reprezinta continutul paginii web.
In cea mai mare parte, interactiunea intre utilizator si script se face prin intermediul obiectului document, oferind acces la tot continutul paginii : text, imagine , link-uri , etc … .
Nu trebuie sa credeti ca obiectul document reprezinta doar ceea ce este in corpul paginii, include, de asemenea, eleméntele situate in header-ul paginii.In plus, cum este o proprietate a obiectului window, exista un obiect document pentru fiecare obiect window .
Asta inseamna ca daca lucram cu frames, v-om avea mai multe obiecte document.
In plus, obiectul document contine printre proprietatile lui si alte obiecte.De exemplu, daca includem unu sau mai multe formulare pe pagina web, v-om crea obiecte form.Acelasi lucru se intampla si cu link-urile , imaginile, anchors , etc … .
Observa imaginea de mai jos , care arata ierarhia obiectelor.Dupa cum puteti vedea , obiectul document este compus din mai multe obiecte, situate la un nivel inferior :
In multe cazuri, o proprietate a obiectului document nu se gaseste doar la un obiect in particular , ci la mai multe.De exemplu, obiectul document este compus dintr-un set de imagini, un set de link-uri , un set de formulare, etc ….
Asta inseamna ca , incercand sa accesam o proprietate a obiectului document, putem constata ca acea proprietate apartine mai multor obiecte. In acest caz, este necesara o modalitate de a accesa un obiect in particular din acel set .Pentru a "rezolva" aceasta problema v-om folosi arrays, dupa cum veti putea vedea in continuare.
In aceasta parte a ghidului nostru JavaScript pentru incepatori, veti invata cum sa accesati proprietatile care pot schimba aspectul estetic al paginii web: titlu, culori , etc …
Dupa care , vom invata cum, incepand de la un script putem face pagini web intregi folosind metodele obiectului document si pe final vedem cum putem accesa setul de imagini pe care il contine o pagina.
2.Proprietatea title
Proprietatea title ne permite accesul la titlul paginii web, adica, la textul aflat intre etichetele <title> </title> din codul HTML .
Daca noi nu introducem un text intre aceste etichete, browser-ul va arata in bara de titlu adresa paginii web, care este valoarea implicita a acestei proprietati.
Observa urmatorul exemplu pentru a vedea cum foloseste aceasta proprietate :
<html>
<head>
<title>Ghid Javascript pentru incepatori! Proprietatea title</title>
</head>
<body>
<script type="text/javascript">
<!--
document.write("<center><h2>Titlul acestei pagini este : " + document.title + "</h2></center>");
//-->
</script>
</body>
</html>
Proprietatea title este read-only, adica, nu putem folosi un script pentru a o schimba odata ce pagina a fost incarcata.
Ca o concluzie, intelegem ca daca stergem textul dintre etichetele <title> </title> browser-ul va arata in bara de titlu adresa paginii web, iar proprietatea title nu va avea nici o valoare ( este goala ) .
3.Culorile paginii
Obiectul document ne permite sa accesam culorile paginii: culoarea de fundal, culorile link-urilor si culorile textului.
Acest lucru ne permite sa schimbam culorile chiar si atunci cand pagina a fost incarcata :
<html>
<head>
<title>Ghid Javascript pentru incepatori</title>
<script type="text/javascript">
<!--
function schimbaBg(culoare){
document.bgColor = culoare;
}
function schimbaLink(culoare)
{
document.linkColor = culoare;
}
function schimbaLinkVizitat(culoare)
{
document.vlinkColor = culoare;
}
//-->
</script>
</head>
<body>
<p>Alege o culoare de fundal : </p>
<select>
<option onclick="schimbaBg('blue');">Albastru</option>
<option onclick="schimbaBg('black');">Negru</option>
<option onclick="schimbaBg('yellow');">Galben</option>
<option onclick="schimbaBg('pink');">Roz</option>
</select>
<br/><br/>
Alege culoarea dorita a link-urilor
<select>
<option onclick="schimbaLink('blue');">Albastru</option>
<option onclick="schimbaLink('black');">Negru</option>
<option onclick="schimbaLink('yellow');">Galben</option>
<option onclick="schimbaLink('pink');">Roz</option>
</select>
<br/>
Acum alege culoarea link-urilor care au fost vizitate :
<select>
<option onclick="schimbaLinkVizitat('blue');">Albastru</option>
<option onclick="schimbaLinkVizitat('black');">Negru</option>
<option onclick="schimbaLinkVizitat('yellow');">Galben</option>
<option onclick="schimbaLinkVizitat('red');">Rosu</option>
</select>
<br/>
<a href="http://www.unlinkpeacolo.com">Invata javascript</a><br/>
<a href="http://www.treiiezicucuiezi">Acum ori acum ori acum sau acum dar acum :) </a> -- asta este un link pe care l-am vizitat
<noscript>
<p>Acest browser nu suporta javascript, deci nu puteti sa schimbati culoarea de background a paginii, sugeram schimbarea browser-ului sau un update</p>
</noscript>
</body>
</html>
Acest exemplu foloseste functiile schimbaBg , schimbaLink , schimbaLinkVizitat care vor primi ca parametru culoarea in care vrem sa schimbam culoarea de background si culoarea link-urilor, care acesta, la randul lui, este trecut ca valoare pentru proprietatile bgColor(schimba culoarea de fundal a paginii web), linkColor(schimba culoarea lin-urilor) si vlinkColor(schimba culoarea link-urilor vizitate).
Exista si alte proprietati care afecteaza culoarea elementelor, cum ar fi fgColor care stabileste culoarea textului sau aLinkColor care stabileste culoarea link-urilor active.
Trebuie sa intelem ca Javascript face diferente intre majuscule si minuscule , asa ca numele acestor proprietati trebuie scris exact cum le-am scris eu.
In corpul paginii am codat trei campuri select pentru a fi folosite pentru alegerea culorilor.Fiecare optiune a acestor trei campuri foloseste handlerul de evenimente pentru a "spune" functiei in ce culoare sa schimbe fundalul/link-ul.
4. Metoda WRITE
Pe parcursul acestui curs ai mai folosit metoda write a obiectului document pentru a insera cod HTML pe pagina.
Cu aceasta metoda, putem scrie pe pagina orice cod , incluzind un alt script.Este o metoda cu mult potential, deoarece permite crearea unei pagini web dinamice, adica , fara ca acea pagina sa isi aiba situat codul intr-un fisier html.
Obiectul document detine doua modalitati foarte asemanatoare ale acestei metode:write si writeIn.Singura diferente intre acestea este ca writeIn introduce o noua linie(ca si cum ar apasa Enter) la finalul codului pe care l-am scris.
Urmeaza exemplul de mai jos :
<html>
<head>
<title>Curs Javascript pentru incepatori</title>
<script type="text/javascript">
<!--
function fereastra()
{
var frst = window.open("","","resizable,width=700,height=500");
frst.document.open();
frst.document.writeln("<html><head><title>Curs Javascript pentru incepatori</title></head>");
frst.document.writeln("<body><h1>Text h1</h1>");
frst.document.writeln("<p>Acesta text este un paragraf</p>");
frst.document.writeln("<img src='http://www.rotuts.com/images/butoane/full_banner.jpg'/>");
frst.document.writeln("<p>Ok , bineeeee , hai pa !!</p> ");
frst.document.writeln("</body></html>");
frst.document.close();
}
//-->
</script>
</head>
<body>
<input type="button" onClick="fereastra()" value="Vecine,deschide fereastra"/>
</body>
</html>
Pe aceasta pagina se include doar un buton care prezinta textul "Vecine,deschide fereastra" :) .
Ideea este sa facem un script care sa deschida o noua fereastra , aceasta continand codul pe care noi l-am scris folosind writeIn.
Atunci cand dorim sa scriem intr-un obiect document, mai intai trebuie sa il deschidem.Pentru a face acest lucru, folosim metoda open().
Observa ca este necesar sa indicam la care document ne referim, deoarece avem doua ferestre deschise, adica, doua obiecte document.
Daca nu am fi indicat ca ne referim la obiectul document al ferestrei stocate in variabila frst, atunci am fi deschis obiectul document al ferestrei care contine codul Javascript.
De indata ce am deschis obiectul document folosind metoda open(), putem incepe sa scriem codul folosind write si writeIn.
Dupa ce am terminat de scris codul dorit pentru noua pagina dinamica, folosim metoda close().Aceasta metoda este necesara pentru a indica browser-ului ca pagina s-a incarcat complet.
As dori sa clarific diferenta intre writeIn si write.In imaginea de mai jos putem vedea codul sursa al paginii create cu exemplul de mai sus in care am folosit doar metoda writeIn, am adaugat cateva linii in plus folosind metoda write pentru ca sa puteti vedea diferenta.
Dupa cum puteti vedea , tot codul pana la randul inconjurat cu rosu este formatat exact cum noi l-am scris in codul Javascript ( la finalul fiecarei linii de cod , writeIn face un salt de linie ), in schimb randul inconjurat cu rosu este format din trei comenzi cu metoda write:
- frst.document.write("
ACESTA ESTE UN PARAGRAF scris cu write
");- frst.document.write("
Un alt paragraf - write -
");- frst.document.write("
Si inca unul - write -
\n");Dupa cum puteti observa in imagine, metoda write NU face saltul de linie la finalul codului care il contine,de fapt, daca nu as fi adaugat \n(face un salt de linie) etichetele </body> si </html> ar fi urmat ultimul paragraf pe acelasi rand, fara sa faca saltul de linie precum putem vedea in imagine.
5. Ansamblul Images
Uneori, proprietatile unui obiect nu sunt evaluate intr-o singura valoare, ci intr-un ansamblu de valori sau obiecte.Acesta este cazul proprietatii images al obiectului document.Aceasta proprietate reprezinta toate imaginile de pe o pagina web.
In aceasta situatie, avem nevoie de o cale de a accesa unul sau mai multe obiecte din acest set.Metoda o gasim in folosirea unui array .
Javascript salveaza "calea de acces" a fiecarei imagini in proprietatea images.Aceasta proprietate este un ansamblu ordonat in care fiecare imagine primeste un numar determinat.
Astfel, prima imagine care apare pe pagina primeste numarul 0, urmatoarea numarul 1 si continua astfel pana la ultima imagine.
Avand in vedere caracteristicile acestei proprietati , putem afirma ca de fapt , este un array.Intr-un array fiecare element primeste un numar sau indice pentru a putea fi identificat.In plus, un array mai are cateva proprietati suplimentare, cum ar fi posibilitatea de a sti numarul de elemente continute in array intr-un anumit moment.
Metoda de a accesa un element al unui array se face prin intermediul urmatoarei sintaxe :
Folosim numele array-ului si indicam intre paranteze patrate indicele elementului dorit.
De exemplu, daca am dori sa accesam prima imagine de pe pagina , am folosi, document.images[0].Tine-ti minte ca numerotarea incepe de la 0.
Urmeaza exemplul de mai jos :
<html>
<head>
<title>Curs Javascript pentru incepatori ! Exemplu : schimb de imagini</title>
<script type="text/javascript">
<!--
function SchimbaImagine(valoare, imagine)
{
document.images[valoare].src = imagine ;
}
//-->
</script>
</head>
<body>
<h1>Selecteaza jocul preferat :</h1>
<img src="stanga.png" align="absmiddle" onMouseOver="SchimbaImagine(0,'dreapta.png');" onMouseOut="SchimbaImagine(0,'stanga.png');">
<b>Warcraft</b><br/><br/>
<img src="stanga.png" align="absmiddle" onMouseOver="SchimbaImagine(1,'dreapta.png');" onMouseOut="SchimbaImagine(1,'stanga.png');">
<b>Heroes of newerth</b><br/><br/>
<img src="stanga.png" align="absmiddle" onMouseOver="SchimbaImagine(2,'dreapta.png');" onMouseOut="SchimbaImagine(2,'stanga.png');">
<b>Counter-strike</b><br/><br/>
<noscript>
<p>Acest browser nu suporta javascript, sugeram schimbarea browser-ului sau un update</p>
</noscript>
</body>
</html>
Dupa cum puteti vedea, pe aceasta pagina avem trei imagini.Prima imagine este document.images[0], a doua document.images[1] , etc … .
Codul Javascript din exemplul de mai sus schimba imaginea atunci cand trecem cu mouse-ul pe deasupra de o imagine.
Asociem functia SchimbaImagine cu handlerele de evenimente onMouseOver( atunci cand mouse-ul trece pe deasupra imaginii) si onMouseOut(atunci cand mouse-ul iese de pe suprafata imaginii ).
Atunci cand apar aceste evenimente, se executa functia care schimba proprietatea src a imaginii .
Pentru a intelege mai bine : folosind urmatorul cod : document.images[valoare] accesam un determinat obiect, adica, o imagine de pe pagina.
Acest obiect detine cateva proprietati, printre acestea avem proprietatea src, care permite stabilirea locatiei imaginii, mai pe scurt, putem indica ce imagine vrem sa aratam pe pagina.
Imaginati-va ca punem mouse-ul peste prima imagine.In acest moment se executa handler-ul onMouseOver al acelei imagini, care apeleaza functia SchimbaImagine(0, 'dreapta.png')
Aceasta functie efectueaza actiunea : document.images[0].src = 'dreapta.png' , schimband originea primei imagini ( images[0] ).
Acum inlaturam mouse-ul de pe suprafata imaginii : se executa handler-ul onMouseOut care apeleaza functia SchimbaImagine(0, 'stanga.png'), care pune imaginea care era la inceput.
Este important sa intelegeti ca imaginile pe care le inseram pe pagina sunt obiecte Javascript.Putem accesa aceste obiecte prin intermediul proprietatii images, care este un array.
Fiecare dintre aceste obiecte are propriile proprietati, pe care noi le putem modifica, cu conditia sa stim cum sa accesam un anumit obiect din array.
Exista mai multe proprietati ale obiectului document care au aceeasi natura ca proprietatea images.
Asfel, proprietatea links este un array car ene permite accesarea obiectelor de tip link,proprietatea forms ne permite accesarea forumlariilor, etc … .
Link catre partea a 7-a a acestui curs javascript pentru incepatori .
Da si tu un like
Tweet
Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta