20_21_03_52Proiect-1-documentatie.pdf

PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada

1

Student: Marica Adriana DOCUMENTATIE & CODURI SURSASpecializare: Master TAPI, anul II

Programarea Avansata a Aplicatiilor InternetIn cadrul acestui proiect (proiect.htm) se evidentiaza utilitatea instrumentelor

oferite de limbajul JavaScript. Sunt elaborate si testate 3 aplicatii (se utilizeazawz_jsgraphics.js si SVG):

- o aplicatie (joc_puzzle.htm) care rezolva jocul puzzle atat cu numere, catsi cu poze. In cazul puzzle-ului cu numere, utilizatorul poate alegedimensiunea dorita pentru puzzle;

- o aplicatie (figuri_geometrice.htm) care deseneaza corpuri geometrice(prisma patrulatera regulata, prisma triungiulara regulata, piramidapatrulatera regulata, con, trunchi de con si cilindru) si, pentru fiecare inparte , calculeaza aria si volumul;

- un SVG (cniv.svg) care genereaza sigla Conferintei Nationale deInvatamant Virtual (CNIV), utilizatorul avand posibilitatea schimbariiparametrilor precum numar de noduri, raza, culoarea si chiar grosimealiniilor ce sunt trasate.


2

1) Jocul Puzzle (joc_puzzle.htm)Utilizatorul alege tipul de puzzle printr-un

click pe imaginea corespunzatoare fiecaruia, iarin momentul in care se apasa pe butonul StartJoc, piesele sunt amestecate cu ajutorulurmatorului algoritm: in spatele fiecarei piese seafla o valoare de la 1 la dimensiunea puzzle-ului.Pentru piesa de pe pozitia k se genereaza aleatorun numar pana cand acel numar este diferit denumerele generate pana la pozitia k-1.

Utilizatorul controleaza piesele prin click-uri pe piese ce au drept efect mutari sus, jos,stanga, dreapta iar jocul se considera terminat (apare un alert in acest sens) cand pentrufiecare piesa numarul asociat ei corespunde cu pozitia in cadrul tabelului. Se contorizeazasi numarul de mutari efectuate de utilizator pentru a rezolva puzzle-ul.

2) Corpuri geometrice (figuri_geometrice.htm)Corpurile geometrice au fost desenate

cu ajutorul librariei grafice"wz_jsgraphics.js". Atunci cand utilizatorulda click pe un corp geometric, acesta estemarcat ca fiind current (este evidentiat prinredesenarea cu alta culoare), iar in partea dejos a paginii apare figura marita, iarutilizatorul are posibilitatea de a introducedimensiunile dorite pentru calculul ariei totalesi a volumului corpului respectiv. Cursorul

este permanent insotit de o figura (poza.png) ca un corp geometric. Functia ceconfigureaza acest lucru:

function ConfigureazaCursor(e){

if (document.layers){ x = e.x; y = e.y;} else

if (document.all) {

x = event.clientX;y = event.clientY;

}else if (document.getElementById)

{ x = e.clientX;


3

y = e.clientY;}

document.getElementById("cursor").style.display=""document.getElementById("cursor").style.left=(x+5)+"px"document.getElementById("cursor").style.top=(y+5)+"px"

}.

3) Sigla CNIV (cniv.svg)Aceasta aplicatie este un SVG (Scalable

Vector Graphics) prin intermediul careia s-a doritgenerarea siglei CNIV. Este necesara descarcareaSVGview de la adresahttp://www.w3.org/2000/svg.S-au adaugat evenimente pentru realizarea uneiinteractiuni cu utilizatorul astfel:

Tasta "Up" - Mareste nTasta "Down" - Micsoreaza nTasta "Left" - Micsoreaza rTasta "Right" - Mareste rTasta "1" - IngrosareTasta "2" - SubtiereTasta "C" - Schimba culoare

Codul Pagina principala (proiect.htm)

Proiect Marica Adriana


4

Codul Jocul Puzzle (joc_puzzle.htm)

var contor=0;var n=0;function Init_Numere(){ document.getElementById("dim").innerHTML='Dimensiune puzzle:'; document.getElementById("poza").innerHTML=""; document.getElementById("joc").innerHTML=""; document.getElementById("contor").innerHTML=""; document.getElementById("start").innerHTML='' document.getElementById("dim").value=1;}function Configurare_Numere(){ n=Number(document.getElementById("val").value); var config=""; for (i=1;i


5

for (i=1;i


6

for(i=1;i1 && (i-1)%n!=0 && document.getElementById("b"+(i-1)).disabled==true) Muta(i,i-1);

else if (in && document.getElementById("b"+(i-n)).disabled==true) Muta(i,i-n); else if (i


7

Alegeti tipul de puzzledorit

Codul Corpuri geometrice (figuri_geometrice.htm)

function ConfigureazaCursor(e){

if (document.layers){ x = e.x;


8

y = e.y;} else

if (document.all) {

x = event.clientX;y = event.clientY;

}else if (document.getElementById)

{ x = e.clientX; y = e.clientY;}

document.getElementById("cursor").style.display=""document.getElementById("cursor").style.left=(x+5)+"px"document.getElementById("cursor").style.top=(y+5)+"px"

}document.onmousemove = ConfigureazaCursor;if(document.captureEvents) {document.captureEvents(Event.MOUSEMOVE);}


9

continut=continut+'Datiinaltimea:';

break; case 2:

DeseneazaPrismaTriunghiulara("prismaT","ff0000",70,100,30,150);DeseneazaPrismaTriunghiulara("Canvas",Culoare,150,220,50,240);

continut='Dati latura:';


break; case 3:

DeseneazaPiramida("piramida","ff0000",70,120,30,150); DeseneazaPiramida("Canvas",Culoare,150,250,40,220);

continut='Dati latura:';


break; case 4: DeseneazaCon("con","ff0000",50,100,65,150);

DeseneazaCon("Canvas",Culoare,120,230,150,230); continut='Dati raza:'; continut=continut+'Dati

inaltimea:';

break; case 5:

DeseneazaTrunchiCon("trunchiCon","ff0000",50,100,30,65,150); DeseneazaTrunchiCon("Canvas",Culoare,120,150,80,150,200);

continut='Dati raza mare:';

continut=continut+'Dati razamica:';


break; case 6: DeseneazaCilindru("cilindru","ff0000",50,100,65,150);

DeseneazaCilindru("Canvas",Culoare,90,180,140,250); continut='Dati raza:'; continut=continut+'Dati

generatoarea:';

break; default:

break;


10

} document.getElementById("detalii").style.display=""; document.getElementById("Butoane").style.display=""; document.getElementById("Date").innerHTML=continut;}function StergeCalcule(){

document.getElementById("arie").innerHTML="";document.getElementById("volum").innerHTML="";

}function Deseneaza(){ var Culoare="000000"; DeseneazaPrismaPatrulatera("prismaP",Culoare,60,100,30,150); DeseneazaPrismaTriunghiulara("prismaT",Culoare,70,100,30,150); DeseneazaPiramida("piramida",Culoare,70,120,30,150); DeseneazaCon("con",Culoare,50,100,65,150); DeseneazaTrunchiCon("trunchiCon",Culoare,50,100,30,65,150); DeseneazaCilindru("cilindru",Culoare,50,100,65,150);}function Efect(optiune){ var current=document.getElementById("Optiune").value; if (current!=optiune) {

switch(optiune) {

case 1:DeseneazaPrismaPatrulatera("prismaP","000000",60,100,30,150)

break; case 2:

DeseneazaPrismaTriunghiulara("prismaT","000000",70,100,30,150) break; case 3: DeseneazaPiramida("piramida","000000",70,120,30,150) break; case 4: DeseneazaCon("con","000000",50,100,65,150) break; case 5:

DeseneazaTrunchiCon("trunchiCon","000000",50,100,30,65,150) break; case 6: DeseneazaCilindru("cilindru","000000",50,100,65,150) break; default: break;

} }}


11

function DeseneazaPrismaPatrulatera(Suprafata,Culoare,l,h,x,y){ var jg=PregatesteSuprafata(Suprafata,Culoare); var grosime; if (Culoare!="000000") grosime=2;

else grosime=1;

jg.setStroke(grosime); var a=0.5; var b=0.5; x1=x;y1=y;z1=l; x2=x1+l; y2=y1;z2=z1; x3=x2;y3=y2;z3=z2-l; x4=x1;y4=y1;z4=z1-l; x5=x1;y5=y1-h;z5=z1; x6=x2;y6=y2-h;z6=z2; x7=x3;y7=y3-h;z7=z3; x8=x4;y8=y4-h;z8=z4; jg.drawLine(x1+a*z1,y1+b*z1,x2+a*z2,y2+b*z2);

jg.setStroke(Stroke.DOTTED); jg.drawLine(x2+a*z2,y2+b*z2,x3+a*z3,y3+b*z3); jg.drawLine(x3+a*z3,y3+b*z3,x4+a*z4,y4+b*z4); jg.drawLine(x3+a*z3,y3+b*z3,x7+a*z7,y7+b*z7); jg.setStroke(grosime); jg.drawLine(x4+a*z4,y4+b*z4,x1+a*z1,y1+b*z1); jg.drawLine(x5+a*z5,y5+b*z5,x6+a*z6,y6+b*z6); jg.drawLine(x6+a*z6,y6+b*z6,x7+a*z7,y7+b*z7); jg.drawLine(x7+a*z7,y7+b*z7,x8+a*z8,y8+b*z8); jg.drawLine(x8+a*z8,y8+b*z8,x5+a*z5,y5+b*z5); jg.drawLine(x1+a*z1,y1+b*z1,x5+a*z2,y5+b*z2); jg.drawLine(x2+a*z2,y2+b*z2,x6+a*z6,y6+b*z6); jg.drawLine(x4+a*z4,y4+b*z4,x8+a*z8,y8+b*z8); jg.paint();}function DeseneazaPrismaTriunghiulara(Suprafata,Culoare,l,h,x,y){ var jg=PregatesteSuprafata(Suprafata,Culoare);

var grosime; if (Culoare!="000000") grosime=2;

else grosime=1;

jg.setStroke(grosime); x1=x;y1=y; x2=x1+l;y2=y1; x3=x1+l/2.5;y3=y+l/2.5; x4=x1;y4=y1-h; x5=x2;y5=y2-h; x6=x3;y6=y3-h; jg.setStroke(Stroke.DOTTED); jg.drawLine(x1,y1,x2,y2); jg.setStroke(grosime); jg.drawLine(x2,y2,x3,y3); jg.drawLine(x3,y3,x1,y1); jg.drawLine(x4,y4,x5,y5);


12

jg.drawLine(x5,y5,x6,y6); jg.drawLine(x6,y6,x4,y4); jg.drawLine(x1,y1,x4,y4); jg.drawLine(x2,y2,x5,y5); jg.drawLine(x3,y3,x6,y6); jg.paint();}function DeseneazaPiramida(Suprafata,Culoare,l,h,x,y){ var a=0.5; var b=0.5; var jg=PregatesteSuprafata(Suprafata,Culoare); var grosime; if (Culoare!="000000") grosime=2;

else grosime=1;

jg.setStroke(grosime); x1=x;y1=y;z1=l; x2=x1+l; y2=y1;z2=z1; x3=x2;y3=y2;z3=z2-l; x4=x1;y4=y1;z4=z1-l; x5=x1+l/2;y5=y1-h;z5=z1-l/2; jg.drawLine(x1+a*z1,y1+b*z1,x2+a*z2,y2+b*z2); jg.setStroke(Stroke.DOTTED); jg.drawLine(x2+a*z2,y2+b*z2,x3+a*z3,y3+b*z3); jg.drawLine(x3+a*z3,y3+b*z3,x4+a*z4,y4+b*z4); jg.drawLine(x5+a*z5,y5+b*z5,x3+a*z3,y3+b*z3); jg.setStroke(grosime); jg.drawLine(x4+a*z4,y4+b*z4,x1+a*z1,y1+b*z1); jg.drawLine(x5+a*z5,y5+b*z5,x1+a*z1,y1+b*z1); jg.drawLine(x5+a*z5,y5+b*z5,x2+a*z2,y2+b*z2); jg.drawLine(x5+a*z5,y5+b*z5,x4+a*z4,y4+b*z4); jg.paint();}function DeseneazaCon(Suprafata,Culoare,r,h,xx,xy){ var jg=PregatesteSuprafata(Suprafata,Culoare); var grosime; if (Culoare!="000000") grosime=2;

else grosime=1;

jg.setStroke(grosime); x1=xx;y1=xy; jg.drawEllipse(xx-r,xy-r/2,2*r,r); jg.drawLine(xx,xy,xx,xy-h); jg.drawLine(xx,xy-h,xx-r,xy); jg.drawLine(xx,xy-h,xx+r,xy); jg.paint();}function DeseneazaTrunchiCon(Suprafata,Culoare,r,h,r1,xx,xy){ var jg=PregatesteSuprafata(Suprafata,Culoare);


13

var grosime; if (Culoare!="000000") grosime=2;

else grosime=1;

jg.setStroke(grosime); x1=xx;y1=xy; jg.drawEllipse(xx-r,xy-r/2,r*2,r); jg.drawEllipse(xx-r1,xy-h-r1/2,r1*2,r1);

jg.drawLine(xx,xy,xx,xy-h); jg.drawLine(xx-r1,xy-h,xx-r,xy); jg.drawLine(xx+r1,xy-h,xx+r,xy); jg.drawLine(xx,xy,xx+r,xy); jg.drawLine(xx,xy-h,xx+r1,xy-h); jg.paint();}function DeseneazaCilindru(Suprafata,Culoare,r,h,x,y){ var jg=PregatesteSuprafata(Suprafata,Culoare); var grosime; if (Culoare!="000000") grosime=2;

else grosime=1;

jg.setStroke(grosime); x1=x;y1=y; jg.drawEllipse(x-r,y-r/2,2*r,r); jg.drawEllipse(x-r,y-h-r/2,2*r,r); jg.drawLine(x-r,y,x-r,y-h); jg.drawLine(x+r,y,x+r,y-h); jg.drawLine(x,y,x,y-h); jg.drawLine(x,y,x+r,y); jg.drawLine(x,y-h,x+r,y-h); jg.paint();}function CalculeazaArie(){ var optiune=document.getElementById("Optiune").value; var arie=0; switch(optiune) {

case "1": var l=Number(document.getElementById("val1").value);

varh=Number(document.getElementById("val2").value);

arie=4*l*h+2*Math.pow(l,2); break; case "2": var l=Number(document.getElementById("val1").value);


arie=3*l*h+2*Math.pow(l,2)*Math.sqrt(3)/4; break; case "3": var l=Number(document.getElementById("val1").value);


14


apotema=Math.sqrt(Math.pow(l/2,2)+Math.pow(h,2));arie=4*l*apotema/2+Math.pow(l,2);

break;case "4":

var r=Number(document.getElementById("val1").value);var

h=Number(document.getElementById("val2").value);var g=Math.sqrt(r*r+h*h);arie=Math.PI*r*(g+r);

break;case "5":

var r1=Number(document.getElementById("val1").value);var

r2=Number(document.getElementById("val2").value);var

h=Number(document.getElementById("val3").value);var g=Math.sqrt(Math.pow(r1-r2,2)+Math.pow(h,2));

arie=Math.PI*g*(r1+r2)+Math.PI*Math.pow(r1,2)+Math.PI*Math.pow(r2,2); break;

case "6": var r=Number(document.getElementById("val1").value);

varg=Number(document.getElementById("val2").value);

arie=2*Math.PI*r*(r+g); break; default: break; } document.getElementById("arie").innerHTML="Arie = "+arie;}function CalculeazaVolum(){ var optiune=document.getElementById("Optiune").value; var volum=0; switch(optiune) { case "1": var l=Number(document.getElementById("val1").value);


volum=Math.pow(l,2)*h; break;

case "2": var l=Number(document.getElementById("val1").value);


volum=Math.pow(l,2)*Math.sqrt(3)/4*h; break; case "3": var l=Number(document.getElementById("val1").value);



15

volum=Math.pow(l,2)*h/3; break;



volum=Math.PI*Math.pow(r,2)*h/3; break;

case "5": var r1=Number(document.getElementById("val1").value);

varr2=Number(document.getElementById("val2").value);


volum=Math.PI*h/3*(r1*r2+Math.pow(r1,2)+Math.pow(r2,2)); break;


varg=Number(document.getElementById("val2").value);

volum=Math.PI*Math.pow(r,2)*g; break; default: break; } document.getElementById("volum").innerHTML="Volum = "+volum;}//-->

Alegeti corpul geometricdorit

Prisma PatrulateraPrisma TriunghiularaPiramida


16

ConTrunchi de conCilindru


17

Codul Sigla CNIV (cniv.svg)

//cv=document.getElementById("canvas");legenda=document.getElementById("legenda");exp=document.getElementById("explicatii");

deseneazaSigla();}

function deseneazaSigla(){ var dstring=" ";

for(i=0; i


18

// se traseaza segmentul [(x,y) (xp,yp)] astfel:se muta path-ul la x+r,y+r si se traseaza linie catre (xp+r,yp+r)

dstring=dstring+" M"+(x+r+left)+","+(y+r+top)+"L"+(xp+r+left)+","+(yp+r+top)+" ";

}}

fPlot.setAttribute("d", dstring);fPlot.setAttribute( "style",

"stroke:rgb("+red+","+green+","+blue+");stroke-width:"+grosime);cv.setAttribute("width",2*r+50);cv.setAttribute("height",2*r+50);legenda.setAttribute("y",top+2*r+10);exp.setAttribute("y",top+2*r+30);

}function MaresteN(){ if (n3)

n--; deseneazaSigla();}function MaresteR(){ if (r60) r=r-10; deseneazaSigla();}function MaresteGrosime(){if (grosime0.3) grosime=grosime-0.1;deseneazaSigla();}


19

function GenereazaCuloare(){ red=Math.floor(Math.random()*256) green=Math.floor(Math.random()*256) blue=Math.floor(Math.random()*256) deseneazaSigla();}function functie(evt){

switch(evt.keyCode){ case 38: //up

MaresteN();break;case 40: //downMicsoreazaN();break; case 39: //right MaresteR();break; case 37: //left MicsoreazaR();break;case 67://tasta CGenereazaCuloare();break;case 49: //tasta 1MaresteGrosime();break;case 50: //tasta 2MicsoreazaGrosime();break;default:break;

}}// ]]>


20

]]>

Sigla CNIV

n+ n- r+ r-col

Legenda:---------------------- Tasta "Up" - Mareste n Tasta "Down" - Micsoreaza n Tasta "Left" - Micsoreaza r Tasta "Right" - Mareste r Tasta "1" - Ingrosare


21

Tasta "2" - Subtiere Tasta "C" - Schimba culoare

20_21_03_52Proiect-1-documentatie.pdf

Documents

Transcript of 20_21_03_52Proiect-1-documentatie.pdf