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
Ce tag se foloseste pentru a adauga liste in elemente <ul> si <ol>?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://www.marplo.net/html/</li>
</ul>
Care valoare a proprietatii "display" seteaza elementul ca tip bloc si afiseaza un punct in fata?
block list-item inline-block
.some_class {
  display: list-item;
}
Care instructiune JavaScript transforma un obiect in sir JSON.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicati clasa PHP folosita pentru a lucra cu elemente HTML si XML in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Indicati forma de Prezent Continuu a verbului "to live" (a trai /a locui)
lived living liveing
I`m living here.
- Traiesc /Locuiesc aici.
Care este forma de Gerunziu (sau Participiu Prezent) a verbului "vivir" (a trai /a locui)?
vivió vivido viviendo
Estoy viviendo aquí.
- Traiesc /Locuiesc aici.
Proprietati si Metode din obiectul document

Last accessed pages

  1. Verbe modale - SHALL, SHOULD, OUGHT TO, WILL, WOULD, USED TO, BE TO, DARE (33187)
  2. Curs HTML gratuit Tutoriale HTML5 (193932)
  3. Gramatica limbii engleze - Prezentare Generala (214827)
  4. Prezentul simplu - Exercitii si teste incepatori (68675)
  5. Exercitii engleza - English Tests and exercises - Grammar (113662)

Popular pages this month

  1. Cursuri si Tutoriale: Engleza, Spaniola, HTML, CSS, Php-Mysql, JavaScript, Ajax (964)
  2. Gramatica limbii engleze - Prezentare Generala (628)
  3. Exercitii engleza - English Tests and exercises - Grammar (559)
  4. Prezentul simplu si continuu - Present Tense Simple and Continuous (455)
  5. Coduri pt culori (366)