20_21_03_52proiect-1-documentatie.pdf
TRANSCRIPT
-
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.
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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;
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
5
for (i=1;i
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
7
Alegeti tipul de puzzledorit
Codul Corpuri geometrice (figuri_geometrice.htm)
function ConfigureazaCursor(e){
if (document.layers){ x = e.x;
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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);}
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
9
continut=continut+'Datiinaltimea:';
break; case 2:
DeseneazaPrismaTriunghiulara("prismaT","ff0000",70,100,30,150);DeseneazaPrismaTriunghiulara("Canvas",Culoare,150,220,50,240);
continut='Dati latura:';
continut=continut+'Datiinaltimea:';
break; case 3:
DeseneazaPiramida("piramida","ff0000",70,120,30,150); DeseneazaPiramida("Canvas",Culoare,150,250,40,220);
continut='Dati latura:';
continut=continut+'Datiinaltimea:';
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:';
continut=continut+'Datiinaltimea:';
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;
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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;
} }}
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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);
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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);
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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);
varh=Number(document.getElementById("val2").value);
arie=3*l*h+2*Math.pow(l,2)*Math.sqrt(3)/4; break; case "3": var l=Number(document.getElementById("val1").value);
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
14
varh=Number(document.getElementById("val2").value);
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);
varh=Number(document.getElementById("val2").value);
volum=Math.pow(l,2)*h; break;
case "2": var l=Number(document.getElementById("val1").value);
varh=Number(document.getElementById("val2").value);
volum=Math.pow(l,2)*Math.sqrt(3)/4*h; break; case "3": var l=Number(document.getElementById("val1").value);
varh=Number(document.getElementById("val2").value);
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
15
volum=Math.pow(l,2)*h/3; break;
case "4": var r=Number(document.getElementById("val1").value);
varh=Number(document.getElementById("val2").value);
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);
varh=Number(document.getElementById("val3").value);
volum=Math.PI*h/3*(r1*r2+Math.pow(r1,2)+Math.pow(r2,2)); break;
case "6": var r=Number(document.getElementById("val1").value);
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
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
16
ConTrunchi de conCilindru
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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();}
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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;
}}// ]]>
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
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
-
PROIECT: JavaScript, SVG / Coordonator Conf. dr. M. Vlada
21
Tasta "2" - Subtiere Tasta "C" - Schimba culoare