Curs Javascript


In JavaScript toate elementele dintr-o pagina web sunt considerate obiecte, si sunt organizate in mod ierarhic, pe sistemul Parinte-Copil.
Parinte este obiectul care contine alte obiecte, iar cele din interiorul lui sunt obiecte Copil. Acestea la randul lor pot contine alte elemente si astfel devin Parinti pentru acelea.
Aceasta structura ierarhica, de continere pe nivele, e cunoscuta ca DOM (Document Object Model), unde fieare obiect poate fi accesat in mod ierarhic de la primul nivel pana la el, separate cu punct ( parinte.copil ).
Obiectul window e considerat pe primul nivel, acesta contine elementele /obiectele ferestrei: Navigator, Location, History, Document.
Obiectul document contine elementele HTML din pagina, tag-urile, proprietatile CSS, atributele si textul, dupa cum se poate vedea in urmatoarea imagine.
DOM document HTML tree


Obiectul document

Obiectul document reprezinta pagina web, in el se gasesc elementele (tag-urile HTML), atributele si continutul dintr-o pagina web.
Acesta contine proprietati si metode prin care se pot adauga, accesa, edita, sterge in mod dinamic elemente si continut in pagina.
Document apartine obiectului window si se poate accesa prin: window.document; dar fiindca "window" este obiectul principal, poate fi omis cand se folosesc proprietati si metode ale obiectului "document", si pot fi apelate folosind urmatoarea sintaxa.

document.nume_proprietate
document.numeMetoda()
- De exemplu: document.write('String') scrie sirul 'String' in pagina.

O lista cu proprietati si metode utile ale obiecului document gasiti la pagina:
marplo.net/javascript/proprietati-metode-obiect-document


Utilizare proprietati din obiectul document

Obiectul document contine numeroase proprietati pentru accesarea elementelor din pagina. Majoritatea sunt doar pentru citirea elementelor (Read only), dar sunt cateva si pentru scriere.
Iata cateva exemple.

document.URL - returneaza un sir cu adresa paginii.
<script>
var url = document.URL;
document.write('URL:<br>'+ url);
</script>
document.title - returneaza si modifica titlul paginii (din tag-ul <title>).
<script>
var title = document.title;
document.write('Titlu:<br>'+ title);

//modifica titlul (se vede la titlu din browser)
document.title ='Pacea-i buna';
</script>

Proprietatile pot sa contina la randul lor obiecte care au propriile lor proprietati si metode.

• De exemplu: document.links - contine un array cu toate link-urile (tag-uri <a>) din pagina, sub forma de obiecte. Acestea au proprietati specifice elementelor HTML, care reprezinta partile componente (atributele, textul).
Urmatorul exemplu afiseaza adresa 'href' a link-urilor din pagina.
<a href='//marplo.net' title='MarPlo.net'>MarPlo.net</a>
<ul><li><a href='//gamv.eu' title='GamV.eu'>GamV.eu</a></li></ul>
<div><a href='//coursesweb.net' title='CoursesWeb.net'>CoursesWeb.net</a></div>
<hr>

<script>
var alnk = document.links; //array cu link-urile din pagina

//parcurge array-ul si afiseaza valoarea href de la fieare
for(var i=0; i<alnk.length; i++) document.write('<br>'+ alnk[i].href);
</script>

• Proprietatea innerHTML apartine obiectelor HTML din document. Aceasta returneaza sau scrie continutul din elementul HTML la care e aplicata.

- Urmatorul exemplu preia continutul din primul link din pagina, apoi il modifica.
<a href='//marplo.net' title='MarPlo.net'>MarPlo.net</a>
<ul><li><a href='//gamv.eu' title='GamV.eu'>GamV.eu</a></li></ul>
<div><a href='//coursesweb.net' title='CoursesWeb.net'>CoursesWeb.net</a></div>

<script>
var alnk = document.links; //array cu link-urile din pagina

//preia textul din primul link
var txta1 = alnk[0].innerHTML;

//modifica textul din primul link
alnk[0].innerHTML ='Text modificat din JS';

//arata in consola textul initial
console.log('Textul din primul link era: '+ txta1);
</script>

Utilizare metode din obiectul document

Obiectul document contine numeroase metode pentru preluarea si modificarea elementelor HTML din pagina in script-uri JS.
In continuare sunt prezentate cateva exemple cu accesare si manipulare elemente HTML folosind metodele JavaScript.


document.getElementById('id') - preia elementul HTML care are id-ul specificat.

Mai multe detalii si exemple cu getElementById() gasiti la Lectia de la pagina: marplo.net/javascript/getelementbyid.html

Exemplu, preia continutul dintr-un Div si il adauga cu proprietatea textContent in alt element HTML.
<p id='prg1'>Exemplu cu <em>getElementById()</em></p>
Continutul din #prg1 este: <span id='sp1'>str</span>

<script>
//preia elementul html cu id-ul prg1
var elm = document.getElementById('prg1');

//preia continutul html din elm
var elm_cnt = elm.innerHTML;

//adauga sirul din elm_cnt ca text in #sp1
document.getElementById('sp1').textContent = elm_cnt;
</script>
getElementsByTagName('tag') - returneaza un array cu elementele HTML care au tag-ul specificat.

Mai multe detalii si exemple cu getElementsByTagName() gasiti la Lectia de la pagina: marplo.net/javascript/getelementsbytagname.html

Exemplu, afiseaza in pagina numarul de tag-uri H3 si id-ul de la primul.
<h3 id='id_elm'>Unde-s doi sunt doi de unu.</h3>
<div>Div, HTML content</div>
<h3>Alt tag H3</h3>
<blockquote id='resp'>Pt. raspuns din JS.</blockquote>

<script>
//array cu tag-urile H3
var ar_h3 = document.getElementsByTagName('h3');

//adauga in #resp nr. elemente H3 si id-ul de la primul
if(ar_h3.length >0){
 var idh = ar_h3[0].id; //id-ul primului element din ar_h3
 document.getElementById('resp').innerHTML ='Sunt '+ ar_h3.length +' elemente H3, primul are id: '+ idh;
}
</script>

Lucru cu Proprietati si Metode ale elementelor HTML in JS

Elementele HTML preluate in JavaScript au proprietati si metode pentru accesarea si manipularea partilor componente (atribute, stiluri css, continut).
Acestea se aplica direct la elementul respectiv.

elmHtml.proprietate
elmHtml.metoda()
- Unde 'elmHtml' este elementul HTML preluat cu metode specifice DOM (din document).

O lista cu proprietati si metode utile ale elementelor HTML gasiti la pagina:
marplo.net/javascript/proprietati-metode-element-html

Exemple

elmHtml.addEventListener('event', callback) - apeleaza functia de la callback cand evenimentul de la 'event' este efectuat (vedeti si tutorialul de la: marplo.net/javascript/detectare-stergere-evenimente-js).
- Exemplu, cand se apasa clic pe butonul cu id #btn1 afiseaza o fereastra alert() cu textul din #prg1.
<p id='prg1'>Ex. addEventListener(), clic.</p>
<button id='btn1'>Clic</button>

<script>
//la click pe #btn1 se apeleaza o functie
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var cnt = document.getElementById('prg1').textContent;
 alert(cnt);
});
</script>
elmHtml.parentNode - returneaza elementul parinte in care e inclus elmHtml.
elmHtml.className - returneaza clasa (valoarea atributului class) din elmHtml.
- Exemplu, cand se apasa clic pe butonul cu id #btn1 afiseaza o fereastra alert() cu clasa din elementu parinte al butonului.
<div class='cls_1'>Div in care e un buton: <button id='btn1'>Clic</button></div>

<script>
//la click pe #btn1 se apeleaza o functie (ev reprezinta un obiect cu evenimentul)
document.getElementById('btn1').addEventListener('click', (ev)=>{
 //preia elementul parinte (ev.target reprezinta elementul care a actionat evenimentul)
 var parent = ev.target.parentNode;

 //preia clasa
 var cls = parent.className;

 alert('Elementul parinte are class='+ cls);
});
</script>
elmHtml.setAttribute('attr', 'val') - seteaza atributul specificat 'attr' cu valoarea 'val'.
elmHtml.outerHTML - returneaza un sir HTML cu tot elementul elmHtml (toata sructura si continutul). Sau inlocuieste elmHtml cu altceva (transmis ca sir).
- Exemplu, cand se apasa clic pe butonul cu id #btn1 seteaza atributul 'style' cu proprietati CSS la #prg1, apoi sterge butonul din pagina.
<p id='prg1'>Pacea, Bucuria si Bunatatea construiesc Sanatatea.</p>
<button id='btn1'>Clic</button>

<script>
//la click pe #btn1 se apeleaza o functie (ev reprezinta un obiect cu evenimentul)
document.getElementById('btn1').addEventListener('click', (ev)=>{
 //seteaza style la #prg1
 document.getElementById('prg1').setAttribute('style', 'color:#0000e0; font-size:22px;');

 //sterge butonul (ev.target reprezinta elementul care a actionat evenimentul)
 ev.target.outerHTML ='';
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag defineste zona de click intr-o harta creata dintr-o imagine?
<map> <img> <area>
<img src="image.jpg" usemap="#map1">
<map name="map1">
  <area shape="rect" coords="9, 120, 56, 149" href="#">
  <area shape="rect" coords="100, 200, 156, 249" href="#">
</map>
Ce proprietate CSS indica ce sa se intample cand continutul unui element depaseste dimensiunile lui?
display overflow position
#id {
  overflow: auto;
}
Clic pe evenimentul care este declansat cand mouse-ul e deasupra unui obiect.
onclick onmouseover onmouseout
document.getElementById("id").onmouseover = function(){
  document.write("Sa ai Viata Buna");
}
Indicati variabila PHP ce contine datele adaugate in adresa URL, dupa caracterul "?".
$_SESSION $_GET $_POST
if(isset($_GET["id"])) {
  echo $_GET["id"];
}
Clic pe pronumele reflexiv care e potrivit in propozitia: "Marc is the boy ... won the prize".
who which whoever
Marc is the boy who won the prize.
- Marc e baiatul care a castigat premiul.
Clic pe pronumele reflexiv care e potrivit in propozitia: "Voy a ver al pintor de ... les hablé ayer".
que quien cuyo
Voy a ver al pintor de quien les hablé ayer.
- Ma duc sa vad pictorul despre care ti-am vorbit ieri.
JavaScript HTML DOM - Obiectul document

Last accessed pages

  1. Prepozitii - Exercitii si teste engleza incepatori (10422)
  2. Trecutul nedefinit vs Imperfect 2 (1067)
  3. Imperfect 3 (949)
  4. Trecut nedefinit 3 (1069)
  5. Pozitionare elemente HTML cu CSS (4789)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (627)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (540)
  3. Gramatica limbii engleze - Prezentare Generala (439)
  4. Exercitii engleza - English Tests and exercises - Grammar (379)
  5. Coduri pt culori (367)