Curs Javascript


Array-ul images

In JavaScript toate imaginile dintr-o pagina web se gasesc intr-un array denumit images, care apartine obiectului document.
Imaginile sunt adaugate in array-ul images in ordinea in care sunt adaugate in pagina, cu un index de ordine incepand de la 0.
Prima imagine din pagina se afla in array-ul images cu index 0, a doua imagine are index 1, si tot asa.
Astel, se poate face referire la prima imagine folosind urmatoarea expresie.

var img1 = document.images[0];
Numarul de imagini se poate afla cu proprietatea length.
Astel, se poate face referire la ultima imagine folosind urmatorul cod.
var nr_imgs = document.images.length;
var last_img = document.images[nr_imgs -1];

Preluare imagini cu metode JavaScript

O anumita imagine din pagina poate fi preluata mai clar in codul JavaScript folosind metoda getElementById() sau querySelector().

• Daca tag-ul <img> are un ID, se poate folosi getElementById():
var img = document.getElementById('id_img');
Unde 'id_img' este id-ul imaginii (adaugat la atributul id).

• Daca tag-ul <img> are o clasa (adaugata la atributul class), se poate folosi querySelector():
var img = document.querySelector('css_sel');
Unde 'css_sel' reprezinta un selector CSS care face referire la imagine.

- Exemplu, preia imaginea cu class 'cls_im' care se afla intr-un Div cu id 'dv1', iar la clic pe ea afiseaza adresa de la 'src' intr-un element HTML. 
<h4>Exemplu preluare imagine cu querySelector</h4>
<p>La click pe imagine adauga la #resp adresa ei de la 'src'.</p>
<div id='dv1'> Div<br>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Smile' class='cls_im'/>
</div>
<blockquote id='resp'>#resp</blockquote>

<script>
//preia prima imagine cu class .cls_im din #dv1
var img = document.querySelector('#dv1 img.cls_im');

//detecteaza click pe imaginea preluata
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = img.src;
});
</script>

Daca sunt mai multe imagini cu acelasi 'class' in elementul specificat, querySelector() va prelua pe prima.


Obiectul Image

Fiecare imagine dintr-un document HTML reprezinta in JavaScript un obiect Image.
Obiectul Image are proprietati specifice pentru lucru cu imagini.
- De exemplu, cu proprietatea height se poate prelua sau modifica inaltimea imaginii afisata in pagina, iar cu proprietatea width se preia sau se modifica din JS lungimea imaginii. 

<h4>Exemplu dimensiuni imagine</h4>
<p>La clic pe butonul 'Set size' mareste dimensiunile imaginii (height si width) cu 50%.</p>
<img src='javascript/imgs/smile_gift.png' alt='Smile' height='115' width='130' id='img1'/><br>
<button id='btn1'>Set size</button>

<script>
var img = document.getElementById('img1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 //preia inaltimea si lungimea imaginii
 let h = img.height;
 let w = img.width;

 //seteaza inaltimea si lungimea cu 50% mai mari
 img.height = h *1.5;
 img.width = w *1.5;
});
</script>

Proprietati obiect Image

alt - returneaza sau seteaza valoarea atributului 'alt'. 
<h4>Exemplu alt</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'alt'.</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.alt;
});
</script>
complete - returneaza True daca imaginea s-a incarcat complet, in caz contrar, False. 
<h4>Exemplu complete</h4>
<p>La clic pe buton, aduga la #resp o imagine cu 'display:none;'. Cand imaginea s-a incarcat complet, o face vizibila.</p>
<button id='btn1'>Add img</button>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 //adauga imagine la #resp
 document.getElementById('resp').innerHTML ="<img src='javascript/imgs/smile_gift.png' alt='Zambeste' style='display:none;' id='im1'/>";

 //verifica incarcarea imaginii
 document.getElementById('im1').addEventListener('load', (ev)=>{
 //daca s-a incarcat complet, o face vizibila
 if(ev.target.complete) ev.target.style.display ='block';
 });
});
</script>
height - returneaza sau seteaza valoarea atributului 'height'. 
<h4>Exemplu height</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'height'.</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.height;
});
</script>
isMap - returneaza True daca imaginea are setat atributul 'ismap', in caz contrar, False. - Atributul 'ismap' se poate adauga la o imagine adaugata in element <a>. Cand se efectueaza clic pe acea imagine, se trimite la server (la adresa 'href' din acel <a>) coordonatele clicului pe imagine. 
<a href='page.php'><img src='image.png' ismap/></a>
Trimite la server coordonatele x/y a clicului pe 'image.png': page.php?x,y
naturalHeight - returneaza inaltimea originala a imaginii. 
<h4>Exemplu height / naturalHeight</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'height' si inaltimea originala (naturalHeight).</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='height = '+ ev.target.height +'<br>naturalHeight = '+ ev.target.naturalHeight;
});
</script>
naturalWidth - returneaza lungimea originala a imaginii. 
<h4>Exemplu width / naturalWidth</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'width' si lungimea originala (naturalWidth).</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML ='width = '+ ev.target.width +'<br>naturalWidth = '+ ev.target.naturalWidth;
});
</script>
src - returneaza sau seteaza valoarea atributului 'src'. 
<h4>Exemplu src</h4>
<p>La clic pe imagine, afiseaza la #resp numele din adresa 'src'.</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
document.getElementById('im1').addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.src.match(/[^\/]+$/i)[0];
});
</script>
useMap - returneaza sau seteaza valoarea atributului 'usemap' dintr-o imagine. - Atributul usemap seteaza o imagine cu mai multe zone clicabile, unde fiecare zona poate sa deschida o adresa diferita.
Vedeti tutorialul de la: marplo.net/html/harti_de_imagini.html
width - returneaza sau seteaza valoarea atributului 'width'. 
<h4>Exemplu width</h4>
<p>La clic pe imagine, afiseaza la #resp valoarea atributului 'width'.</p>
<img src='javascript/imgs/smile_gift.png' height='115' width='130' alt='Zambeste' id='im1'/>
<blockquote id='resp'>#resp</blockquote>

<script>
var img = document.getElementById('im1');
img.addEventListener('click', (ev)=>{
 document.getElementById('resp').innerHTML = ev.target.width;
});
</script>

Preluare mai multe imagini dintr-un element HTML

Daca intr-un element HTML aveti mai multe imagini si vreti sa le preluati in JavaScript, se poate folosi una din aceste metode: getElementsByTagName('img') sau querySelectorAll('css_sel') ('css_sel' e selectorul CSS ce reprezinta imaginile).
Ambele metode returneaza un array cu elementele preluate, si pot fi parcurse cu instructiunea for().


- Exemplu cu getElementsByTagName('img'): 
//preia toate imaginile dintr-un element cu id 'dv1'
var imgs = document.getElementById('dv1').getElementsByTagName('img');

//parcurge imaginile
for(var i=0; i<imgs.length; i++){
 //cod executat la fiecare imagine parcursa
}

- Exemplu cu querySelectorAll(): 
//preia toate imaginile cu class 'cls_im' dintr-un element cu id 'dv1'
var imgs = document.querySelectorAll('#dv1 img.cls_im');

//parcurge imaginile
for(var i=0; i<imgs.length; i++){
 //cod executat la fiecare imagine parcursa
}

Schimbare Imagine cu alta

Daca doriti sa schimbati o imagine din pagina cu una de la o alta adresa, se poate simplu, modificand adresa de la 'src' cu cea noua.

var img = document.getElementById('id_img');
img.src ='adresa/alta_imagine.jpg';

- Iata un exemplu practic. La clic pe un buton se schimba in acelasi loc imagini cu adrese dintr-un array. 
<h4>Exemplu schimbare imagini</h4>
<p>La click pe butonul 'Schimba imaginea' se afiseaza o noua imagine cu adresa preluata dintr-un array cu 4 adrese.</p>
<img src='javascript/imgs/sunshine.jpg' id='im1' height='235' width='340' alt='Image'/><br>
<button id='btn1'>Schimba imaginea</button>

<script>
//array cu imagini
var imgs =['sunshine.jpg', 'spring_dream.jpg', 'spring_dream1.jpg', 'waterfall.jpg'];
var icm =0; //idexul imaginii curente

var img = document.getElementById('im1');
document.getElementById('btn1').addEventListener('click', (ev)=>{
 icm++;
 if(icm >= imgs.length) icm =0; //trece la 0 dupa ce ajunge la ultima
 img.src ='javascript/imgs/'+ imgs[icm];
});
</script>

Preincarcare imagini

In exemplul precedent, la clic pentru schimbare imagine browserul trebuie sa astepte afisare noi imagini pana cand aceasta este incarcata; iar in cazul unor imagini mari asteptarea poate dura prea mult. Acest lucru poate fi evitat prin "preincarcarea imaginilor", folosind o instanta de obiect Image.
Sintaxa:

var obimg = new Image();
obimg.src ='adresa_img.jpg'; //preincarca imaginea
- Acest cod incarca imaginea in JavaScript, fiind valabila spre afisare rapida din obiectul 'obimg'.

- Iata un exemplu practic. Cand mouse-ul intra pe suprafata unei imagini se schimba imaginea, cand mouse-ul iese din suprafata ei se adauga o alta imagine.
Pentru o afisare imediata, imaginile sunt preincarcate cu obiectul Image. 
<h4>Exemplu schimbare imagini la trecere cu mouse-ul</h4>
<p>Treceti cu mouse-ul pe urmatoarea imagine, apoi mutati-l in afara ei.</p>
<img src='javascript/imgs/spring_dream.jpg' id='im1' height='235' width='340' alt='Image'/>

<script>
//obiect cu imagini pt. enter si leave
var imgs ={enter:'spring_dream1.jpg', leave:'waterfall.jpg'};
var obimg ={}; //va contine imaginile preincarcate


//pt. preincarcare imaginilor din imgs
function preloadImgs(imgs){
 //parcurge imgs si seteaza in obimg obiecte Image cu fiecare (cu adresa preincarcata)
 for(var k in imgs){
 obimg[k] = new Image();
 obimg[k].src ='javascript/imgs/'+ imgs[k];
 }
}

//apeleaza functia cu imaginile ce trebuie preincarcate
preloadImgs(imgs);

//inregistreaza eveniente 'mouseenter' si 'mouseleave' la img
var img = document.getElementById('im1');
img.addEventListener('mouseenter', (ev)=>{
 //adauga imaginea preincarcata din obimg
 img.src = obimg.enter.src;
});
img.addEventListener('mouseleave', (ev)=>{
 //adauga imaginea preincarcata din obimg
 img.src = obimg.leave.src;
});
</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.
Lucru cu Imagini in JavaScript

Last accessed pages

  1. Por sau para: Exercitiu 1 (3122)
  2. Trecut nedefinit vs Imperfect (3633)
  3. Indicativ prezent (1525)
  4. Teste spaniola - Tests y ejercicios de Español - Gramática (27655)
  5. Numerale, Numere in limba engleza - Numerals (52661)

Popular pages this month

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