Tehnici Web

Nu esti logat.

Laboratorul 8

(Deadline: 17.12.2017 23:59:59)

Daca nu sunteti logati exercitiile nu se mai afiseaza.

Obiectele DOM

DOM vine de la Document Object Model. Acesta, conform specificatiilor reprezinta o interfata ce permite accesarea si actualizarea in mod dinamic a paginilor (scrise atat in HTML,XHTML cat si in XML). Prin intermediul DOM elementele HTML de pe pagina pot fi vazute drept obiecte in JavaScript. Atributele lor devin proprietati ale acestor obiecte. De exemplu, unui paragraf ii va corespunde un obiect de tipul HTMLParagraphElement, unei imagini un obiect de tipul HTMLImageElement etc.

Bibliografie


Documentatie

Obiectul document

http://www.w3schools.com/jsref/dom_obj_document.asp

Obiectul HTMLElement

http://www.w3schools.com/jsref/dom_obj_all.asp

Obiectul Event

https://www.w3schools.com/jsref/dom_obj_event.asp

Obiectele de tip Ancora

http://www.w3schools.com/jsref/dom_obj_anchor.asp

Exemple:

Functia de miscare

/*
---Model functie de miscare a unui obiect DOM intre 2 puncte pe ecran---- se considera ca parametrii au fost dati corect
(in cadrul functiei lipseste testarea validitatii parametrilor;
testul, daca e necesar, se face in afara functiei sau il adaugati voi in model)
init_miscare - realizeaza calculele preliminare miscarii
ob - obiectul de miscat
left_i, top_i - coordonatele pe ecran ale punctului de pornire (nu coincid intotdeauna cu coordonatele actuale ale lui ob)
left_f, top_f - coordonatele pe ecran ale punctului de sosire
nr_pasi -numarul de pasi facuti de animatie
daca se cunoaste deplasarea (notata depl) in px la un pas (sau viteza) nr_pasi poate fi calculat prin:
lung=Math.sqrt(Math.pow(left_f-left_i,2)+Math.pow(top_f-top_i,2));
nr_pasi=Math.ceil(lung/depl);//am un pas in plus (ultimul)
*/
function init_miscare(ob, left_i, top_i, left_f, top_f, nr_pasi)//ob se misca de la punctul (xi,yi) la punctul (xf,yf)
{
//ob trebuie sa aiba pozitie absoluta pentru a-i seta coordonatele
//(uneori pozitia poate a fost setata anterior apelului functiei si instructiunea urmatoare nu mai e necesara)
ob.style.position="absolute"

var DLeft=left_f-left_i;
var DTop=top_f-top_i;

// dleft si dtop inseamna cu cat se deplaseaza obiectul pe orizontala si verticala la un pas
var dleft=DLeft/nr_pasi;
var dtop=DTop/nr_pasi;
//top_r si left_r variabile reale in care memoram deplasarea exacta (fara erori de rotunjire)
var top_r=top_i;
var left_r=left_i;
//porneste miscarea
misca(ob,top_r,left_r,1,nr_pasi,dleft,dtop,left_f,top_f);
}
/* functia efectiva de miscare
ob - obiectul care trebuie mutat pe ecran
top_r - top real pentru obiect (nerotunjit la intreg)
left_r - left real
pas_c - pas curent (necesar daca la pasii pari sau divizibili cu 3 etc, trebuie sa se intample ceva)
nr_pasi - numarul de pasi
dleft, dtop - deplasarea la un pas pe orizontala si verticala
*/
function misca(ob,top_r,left_r,pas_c,nr_pasi,dleft,dtop,left_f,top_f)
{

if (pas_c<nr_pasi)//daca e pas intermediar
     {
     //actualizeaza topreal si left real
     top_r+=dtop;
     left_r+=dleft;
    
     //repozitionare obiect pe ecran
     ob.style.top=(Math.round(top_r))+"px";
     ob.style.left=(Math.round(left_r))+"px";
    
     //incrementarea pasului curent
     pas_c++;
    
     //apelarea recursiva a functiei pentru urmatorul pas de miscare
     setTimeout(function () {misca(ob,top_r,left_r,pas_c,nr_pasi,dleft,dtop,left_f,top_f);},50);

     }
else //ultimul pas - seteazadirect la coord finale; elimina erori rotunjire
     {
     ob.style.top=(top_f+"px");
     ob.style.left=(left_f+"px");
     }

}