Curs Javascript


Aici gasiti o lista cu proprietati si metode utile ale obiectului document. Cod si exemple Javascript.


Proprietati obiect document

document.body - returneaza obiectul cu elementul HTML <body>. 
<h4>Lungimea si inaltimea elementului BODY</h4>
<blockquote id='resp'>width x height</blockquote>

<script>
var bwidth = document.body.offsetWidth;
var bheight = document.body.offsetHeight;
document.getElementById('resp').innerHTML = bwidth +'x'+ bheight;
</script>
document.cookie - returneaza un sir 'nume=valoare' cu cooki-urile asociate paginii curente, separate prin punct-virgula (;), sau seteaza cookie, un sir cu formatul: nume=valoare. 
<p>- Afiseaza fereastra alert cu cooki-urile asociate paginii.</p>
 <button onclick="alertCookie()">Show cookies</button>
 
<script>
document.cookie ='nume1=marplo';
document.cookie = "cookie_2=valoare";
function alertCookie(){
 alert(document.cookie);
}
</script>
document.forms - returneaza un array cu elementele <form> din pagina. 
<form id='form_1'>
<input type='text' value='F-1'/>
</form>
<form id='form_2'>
<input type='text' value='F-2'/>
</form>

<div id='resp'>document.forms</div>
<script>
var resp ='Numar de form-uri in pagina: '+ document.forms.length +', cu id-uri:';

//adauga id-urile in resp
for(var i=0; i<document.forms.length; i++) resp +='<br> - '+document.forms[i].id;

document.getElementById('resp').innerHTML = resp;
</script>
document.head - returneaza elementul HTML <head>. 
<div id='dv1'>Design definit in style adaugat din JS in document.head.</div>
<script>
//adauga in head element style cu proprietati css
document.head.insertAdjacentHTML('beforeend', '<style>#dv1{background:#cdf0e0; color:#0000b5; padding:5px;}</style >');
</script>
document.images - returneaza o lista cu imaginile (tag-uri <img>) din pagina. 
<img src='/imgs/7.gif' title='Hugs'/><br>
<img src='/imgs/smile_gift.png' title='Gift'/>

<div id='resp'>document.images</div>
<script>
var resp ='Numar de imagini in pagina: '+ document.images.length +', cu adresa src:';

//adauga adresa src in resp
for(var i=0; i<document.images.length; i++) resp +='<br> - '+document.images[i].src;

document.getElementById('resp').innerHTML = resp;
</script>
document.links - contine un array cu toate link-urile (tag-uri <a>) 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>

<blockquote id='resp'>document.links</blockquote>
<script>
var resp ='Numar de link-uri in pagina: '+ document.links.length +', cu adresa href:';

//adauga adresa href in resp
for(var i=0; i<document.links.length; i++) resp +='<br> - '+document.links[i].href;

document.getElementById('resp').innerHTML = resp;
</script>
document.referrer - returneaza adresa URI a paginii din care a fost deschisa pagina curenta, sau sir gol daca pagina nu e deschisa cu link direct din alta. 
<blockquote id='resp'>document.referrer</blockquote>
<script>
var resp ='Pagina a fost deschisa de la: '+ document.referrer
document.getElementById('resp').innerHTML = resp;
</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>
document.URL - returneaza un sir cu adresa paginii. 
<blockquote id='resp'>URL</blockquote>
<script>
var resp ='Adresa URL a paginii: '+ document.URL;
document.getElementById('resp').innerHTML = resp;
</script>

Metode obiect document

document.createElement('tag') - creaza obiectul elementului specificat la parametrul 'tag'. - Vedeti si tutorialul de la: marplo.net/javascript/createelement_insertbefore.html 
<div id='resp'>Element de reper</div>
<script>
// creaza un element Div
var newDiv = document.createElement('div');

//adauga continut HTML in elementl creat
newDiv.innerHTML ='Continut creat cu <em>createElement()</em>.'; 

//obiectul cu elementul de reper
var reper = document.getElementById('resp');

//adauga noul element creat in DOM, inainte de reper
document.body.insertBefore(newDiv, reper);
</script>
document.getElementById(id) - preia elementul HTML care are id-ul specificat. 
<div id='dv1'>Exemplu cu <em>getElementById()</em></div>
Continutul din #dv1 este:
<blockquote id='resp'>str</blockquote>

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

//preia continutul html din dv1
var dv1_cnt = dv1.innerHTML;

//adauga sirul din dv1_cnt ca text in #resp
document.getElementById('resp').textContent = dv1_cnt;
</script>
document.getElementsByClassName('class') - returneaza un array cu elementele HTML care au clasa 'class' specificata. 
<h3 class='cls'>H3 cu class='cls'</h3>
<div>Div fara class.</div>
<div class='cls'>Alt Div, cu clasa 'cls'</div>

<blockquote id='resp'>getElementsByClassName()</blockquote>
<script>
//array cu elementele care au clasa .cls
var ecls = document.getElementsByClassName('cls');
document.getElementById('resp').innerHTML ='Primul element cu clasa "cls" contine:<br>'+ ecls[0].innerHTML;
</script>
document.getElementsByName(name) - returneaza un array cu elementele HTML care au numele 'name' specificat (de la atributul name). 
<form name='up'>Formular cu name 'up'</form>
<div name='down'>Un Div cu name 'down'</div>

<script>
var up_names = document.getElementsByName('up');
console.log(up_names[0].tagName); // FORM
</script>
document.getElementsByTagName('tag') - returneaza un array cu elementele HTML care au tag-ul specificat. 
<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>
document.querySelector('css_sel') - returneaza primul element din document care se potriveste cu grupul de selectori CSS specificati, sau Null daca nu e gasit. - Vedeti si tutorialul de la: marplo.net/javascript/queryselector_queryselectorall.html 
<div id='dv1'>
<div id='dv2' class='cls'>Div cu id #dv2 si class .cls.</div>
<p id='p1' class='cls'>Paragraf cu id #p1 si class .cls.</p>
</div>

<blockquote id='resp'>document.URL</blockquote>
<script>
//primul element cu clasa .cls din #dv1
var elm = document.querySelector('#dv1 .cls');

//afiseaza id-ul elementului din elm.
document.getElementById('resp').innerHTML ='Primul element "#dv1 .cls" are id-ul: '+ elm.id;
</script>
document.querySelectorAll('css_sel') - returneaza un array cu elementele HTML care se potrivesc cu grupul de selectori CSS specificati. 
<div id='dv1'>
<div id='dv2' class='cls'>Div cu id #dv2 si class .cls.</div>
<p id='p1' class='cls'>Paragraf cu id #p1 si class .cls.</p>
</div>

<blockquote id='resp'>querySelectorAll()</blockquote>
<script>
//array cu elementele cu clasa .cls din #dv1
var elms = document.querySelectorAll('#dv1 .cls');

var resp ='Sunt '+ elms.length +' elemente in "#dv1 .cls". Id-ul lor:';

//parcurge elementele si adauga id-ul in resp
for(var i=0; i<elms.length; i++) resp +='<br>- '+ elms[i].id;

document.getElementById('resp').innerHTML = resp;
</script>
document.write(str) - scrie sirul de la 'str' in pagina. 
<h3>Exemplu document.write()</h3>
<script>
document.write('Continut adaugat cu <em>document.write()</em>');
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag se foloseste in <table> pentru a crea celula de tip "header"?
<thead> <th> <td>
<table><tr>
  <th>Title 1</th>
  <th>Title 2</th>
</tr></table>
Ce proprietate CSS seteaza distanta dintre randuri?
line-height word-spacing margin
.some_class {
  line-height: 150%;
}
Care functie deschide o noua fereastra.
alert() confirm() open()
document.getElementById("id_button").onclick = function(){
  window.open("http://coursesweb.net/");
}
Indicati functia PHP care returneaza un array cu numele fisierelor si directoarelor dintr-un director.
mkdir() scandir() readdir()
$ar_dir = scandir("dir_name");
var_export($ar_dir);
Care din urmatoarele forme a verbului "sleep" (a dormi) se foloseste pentru viitor?
sleeping slept will sleep
He will sleep there.
- El va dormi acolo.
Care din urmatoarele forme a verbului "dormir" (a dormi) se foloseste pentru viitor?
dormido dormirá durmiendo
Él dormirá allí.
- El va dormi acolo.
Proprietati si Metode din obiectul document

Last accessed pages

  1. Break si Continue (3991)
  2. Substantive - Exercitii si teste engleza incepatori (39958)
  3. Instructiuni conditionale if, else, switch (19790)
  4. Creare tabele HTML (17041)
  5. Stilizare tabele HTML cu CSS (8145)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (695)
  2. Coduri pt culori (311)
  3. Exercitii engleza - English Tests and exercises - Grammar (306)
  4. Gramatica limbii engleze - Prezentare Generala (298)
  5. Cursuri limba engleza gratuite si lectii online (278)