ID-ul este un atribut care poate fi adaugat in tag-urile HTML. Prin valoarea data acestui atribut se atribuie un nume unic acelui element. Acest "id" poate fi folosit in stilurile CSS pentru a defini aspectul grafic si aranjarea in pagina a tag-ului respectiv, dar poate fi folosit si in scripturi JavaScript pentru a lucra cu elementele si continutul lor.
Cu valoarea id-ului se poate prelua elementul HTML in JavaScript foarte usor, folosind metoda getElementById()cu urmatoarea sintaxa:

document.getElementById('id')
- returneaza un obiect JavaScript cu elementul care are id-ul specificat.

Obiectul returnat de getElementById() contine proprietati si metode prin care se poate lucra cu partile componente ale acelui element (atribute, continut). O lista cu acestea gasiti la pagina:
marplo.net/javascript/proprietati-metode-element-html


- In continuare sunt prezentate cateva exemple cu unele din aceste proprietati si metode pe care le puteti testa direct pe acest site.


addEventListener()

addEventListener() e o metoda prin care se poate inregistra detectarea de evenimente efectuate pe un element HTML (click, mouseenter, focus, input, etc.).
Sintaxa:

elm.addEventListener('event', callF)
Unde 'elm' reprezinta elementul HTML. Cand are loc evenimentul 'event' la acel element, se apeleaza functia de la callF.

Mai multe detalii in tutorialul de la: marplo.net/javascript/detectare-stergere-evenimente-js

- Iata un exemplu, cand mouse-ul intra pe suprafata unui Div, se schimba culoarea background; iar la click pe el se afiseaza o fereastra alert.
<h4>Exemplu cu addEventListener()</h4>
<p id='pr1'>Cand mouse-ul intra pe suprafata Div-ului cu id 'dv1', se schimba culoarea background; iar la click pe el se afiseaza o fereastra alert.</p>
<div id='dv1' style='background:#b8eeb9; height:100px; font-weight:700; width:150px;'>Div #dv1<br>
 - Click Aici -</div>

<script>
var dv1 = document.getElementById('dv1');

//detecteaza mouseenter
dv1.addEventListener('mouseenter', (ev)=>{
 // ev.target reprezinta elementul la care sa declansat evenimentul (aici acelasi cu dv1 )
 ev.target.style.background ='#ced0fe';
});

//detecteaza click
dv1.addEventListener('click', (ev)=>{
 alert('Pacea-i Buna');
});
</script>

innerHTML

Returneaza continutul elementului, sau il inlocuieste cu alt continut HTML.

<h4>Exemplu innerHTML</h4>
<a id='lnk1' href='//marplo.net' title='MarPlo.net'><em>MarPlo.net</em></a>
<ul><li><a href='//gamv.eu' title='GamV.eu'>GamV.eu</a></li></ul>
<p>La clic pe urmatorul button preia continutul din primul link (cu id 'lnk1'), apoi il inlocuieste cu altceva si afiseaza continutul initial in consola.</p>
<button id='btn1'>Test innerHTML</button>
</div>

<script>
document.getElementById('btn1').addEventListener('click', (ev)=>{
 var lnk1 = document.getElementById('lnk1');

 //preia continutul html din #lnk1
 var cnt = lnk1.innerHTML;

 //modifica continutul din lnk1
 lnk1.innerHTML ='Continut adaugat cu <em>innerHTML</em>';

 //arata in consola continutul initial
 console.log('Continut din #lnk1 era: '+ cnt);
});
</script>

getAttribute(attr) si setAttribute(attr, val)

getAttribute(attr) returneaza valoarea atributului 'attr' specificat.
setAttribute(attr, val) defineste atributul specificat la 'attr' cu valoarea de la 'val'.

<h4>Exemplu getAttribute() si setAttribute()</h4>
<p id='pr1' style='background:#fbfbbb; font-size:18px;'>La clic pe urmatorul button se afiseaza la #resp valoarea atributului 'style' din acest paragraf (cu getAttribute() ), apoi defineste alta valoare la atributul 'style' cu setAttribute().</p>
<button id='btn1'>Set style</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var prg = document.getElementById('pr1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').textContent ='style precedent: '+ prg.getAttribute('style');
 prg.setAttribute('style', 'background:#dee0fe; font-weight:700;');
});
</script>

parentNode

Returneaza elementul parinte in care se afla elementul la care e atasat.

<h4>Exemplu parentNode</h4>
<div>
<p>La clic pe urmatorul button se afiseaza la #resp numele tag-ului elementului parinte (cu tagName) in care e adugat butonul.</p>
<button id='btn1'>Parent Tag</button>
</div>
<blockquote id='resp'>#resp</blockquote>

<script>
var btn = document.getElementById('btn1');
btn.addEventListener('click', (ev)=>{
 document.getElementById('resp').textContent = btn.parentNode.tagName;
});
</script>

Proprietatea style

Cu proprietatea style se pot defini din JavaScript proprietati de stil CSS la elementele HTML, folosind aceasta sintaxa.

elm.style.propName ='value';
Unde 'elm' reprezinta elementul HTML, 'propName' e proprietatea CSS, iar 'value' e valoarea care i-se atribuie.

Diferenta apare la proprietatile CSS compuse, cum e "font-weight", "margin-top" sau "border-top-width" si altele similare.
In JavaScript dispare liniuta '-' si cuvintele urmatoare se scriu cu primul caracter majuscula, astfel pentru "font-weight" din CSS in JS este: fontWeight, iar pentru "border-top-width" in JS este: borderTopWidth

<h4>Exemplu cu proprietatea style</h4>
<p id='pr1'>La clic pe urmatorul button se definesc la acest paragraf proprietatile CSS 'color' si 'font-size' folosind proprietatea JS 'style'.</p>
<button id='btn1'>Set style</button>

<script>
var prg = document.getElementById('pr1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 prg.style.color ='#0000d0';
 prg.style.fontSize ='20px';
});
</script>

value

Proprietatea value se foloseste la elemente de formular, aceasta preia sau atribue valori in campurile din formular.
- Pentru a folosi proprietatea "value" impreuna cu getElementById('id'), campul sau caseta de formular la care se face referire trebuie sa aibe un "id".
Iata un exemplu simplu care, la clic pe un buton afiseaza intr-un element HTML textul scris intr-o caseta de tip 'password'.

<h4>Exemplu cu value</h4>
<p id='pr1'>La clic pe urmatorul button se afiseaza la #resp valoarea /parola din caseta de tip 'password'.</p>
Password: <input type='password' id='inp1' value='marplo.net'><br>
<button id='btn1'>Show pass</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var inp = document.getElementById('inp1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 document.getElementById('resp').textContent = inp.value;
});
</script>

Un Test simplu in fiecare zi

HTML
CSS
JavaScript
PHP-MySQL
Engleza
Spaniola
Care tag HTML5 defineste un text marcat, evidentiat?
<mark> <embed> <span>
<p>Cursuri graruite: <mark>MarPlo.net</mark> , jocuri, anime.</p>
Ce pseudo-clasa CSS defineste un stil la element cand mouse-ul e deasupra lui?
:focus :hover :active
a:hover {
  font-weight: bold;
  color: #00da01;
}
Clic pe functia ce returneaza un sir cu un numar rotunjit la x decimale.
toPrecision(x) toFixed(x) floor(x)
var num = 12.34567;
num = num.toFixed(2);
alert(num);       // 12.35
Indicati functia PHP care adauga continutul unui fisier intr-un array.
[) file() readfile()
$arr = file("a_file.txt", FILE_IGNORE_NEW_LINES | FILE_SKIP_EMPTY_LINES);
var_export($arr);
Clic pe raspunsul potrivit la intrebarea: "What time is it?"
On the 7th of July 1996 It is a quarter to 5. Nice weather.
What time is it? It is a quarter to 5.
- Cat este ora? E 5 fara un sfert.
Indicati raspunsul potrivit la intrebarea: "¿Qué hora es?"
Hace buen tiempo. En el 7 de julio de 1996 Son las tres menos cuarto.
¿Qué hora es? Son las tres menos cuarto.
- Cat este ora? E 3 fara un sfert.
Utilizare getElementById

Last accessed pages

  1. Scriere scripturi PHP elementare (1576)
  2. Conditional IF in Limba Engleza - Fraze Conditionale (20736)
  3. Curs PHP MySQL, Tutoriale si Scripturi PHP (6659)
  4. Espanol Chistes - Glume, Bancuri (877)
  5. Sintaxa JavaScript (2435)

Popular pages this month

  1. Gramatica limbii engleze - Prezentare Generala (2144)
  2. Prezentul simplu si continuu - Present Tense Simple and Continuous (1480)
  3. Cursuri si Tutoriale: Spaniola, Engleza, HTML, CSS, Php-Mysql, JavaScript, Ajax (1072)
  4. Trecutul simplu si continuu - Past Tense Simple and Continuous (1025)
  5. Prezent perfect si Prezent perfect continuu - Present perfect and Continuous (981)