Calculadores i Interactivitat Web amb JavaScript i jQuery

Calculadora de Sensació Tèrmica de Fred

Aquesta secció descriu el càlcul de la temperatura de sensació de fred, tenint en compte la temperatura de l'aire i la velocitat del vent.

Càlcul de la temperatura de sensació de fred

Temperatura de l'aire °C

Velocitat del vent km/h

La Temperatura de sensació de fred és °C

Avís:

Validació d'Entrada de Dades

Per part de l'usuari, cal validar que les dades introduïdes siguin numèriques.

var T=parseFloat(document.getElementById("T").value);
if(isNaN(T)){
    alert("Has d'introduir el valor de la Temperatura de l'aire en °C");
    return;
}
var V=parseFloat(document.getElementById("V").value);
if(isNaN(V)){
    alert("Has d'introduir el valor de la Velocitat del vent en km/h");
    return;
}

Sortida de Resultats per a l'Usuari

Els resultats del càlcul es mostren a l'usuari.

document.getElementById("sensacio").innerHTML=resultat.sensacio;
document.getElementById("confort").innerHTML=resultat.confort;

Lògica de Càlcul i Nivells de Confort

La lògica per determinar la sensació de fred i els missatges de confort es basa en la temperatura i la velocitat del vent.

if(T >= 0){
    resultat.sensacio=T;
    resultat.confort="No hi ha sensació de fred amb roba d'hivern adequada.";
    return;
}
var A=5.2735*Math.sqrt(V)+10.45-0.2778*V;
var sensacio=Math.round(33+0.045*A*(T-33));
if(sensacio > T)
    resultat.sensacio=T;
else
    resultat.sensacio=sensacio;

if(sensacio > -18)
    resultat.confort="Sensació confortable o lleugerament desagradable amb roba d'hivern adequada.";
else if(sensacio > -25)
    resultat.confort="Sensació desagradable.";
else if(sensacio > -30)
    resultat.confort="Risc de congelació.";
else if(sensacio > -40)
    resultat.confort="Congelació probable en pocs minuts. El perill en activitats a l'aire lliure és considerable.";
else
    resultat.confort="Alt risc: La pell exposada a l'aire lliure es congelarà en 1/2 o 1 minut.";

Processament de Seqüències Numèriques

Aquesta secció inclou diversos algorismes per processar nombres dins d'un interval donat, aplicant diferents condicions.

Nombres imparells i múltiples de 3

Itera sobre un interval de nombres per trobar aquells que són imparells i múltiples de 3.

for(i=n; i<=m; i++){ // Per a cada nombre de l'interval
    if(i%2==1 && i%3==0){ // Condició de nombre imparell i múltiple de 3
        resposta.resultat = resposta.resultat + i + " ";
        resposta.quants++;
    }
}

Nombres múltiples de 7 i no de 5

Calcula la suma i el recompte de nombres que són múltiples de 7 però no de 5.

for(i=n; i<=m; i++){ // Per a cada nombre de l'interval
    if(i%7==0 && !(i%5==0)){ // Condició de nombre múltiple de 7 i no múltiple de 5
        resultat.suma = resultat.suma + i;
        resultat.quants++;
    }
}
return resultat;

Operacions amb Nombres imparells i múltiples de 3

Realitza sumes i restes basades en condicions de paritat i multiplicitat.

for(i=n; i<=m; i++){ // Per a cada nombre de l'interval
    if(i%2==1 && !(i%7==0)){ // Condició de nombre imparell i no múltiple de 7
        solucio.resultat = solucio.resultat + i;
        solucio.sumats++;
    }
    if(i%3==0 && !(i%5==0)){ // Condició de nombre múltiple de 3 i no múltiple de 5
        solucio.resultat = solucio.resultat - i;
        solucio.restats++;
    }
}

Calculadora d'Índex de Massa Corporal (IMC)

Aquesta secció detalla el càlcul de l'Índex de Massa Corporal (IMC) i la seva classificació.

Càlcul i Classificació de l'IMC

Es calcula l'IMC a partir del pes i l'alçada, i es classifica en diferents categories.

resultat.IMC=pes/(alçada*alçada);
resultat.IMC=Math.round(resultat.IMC*10)/10;
if(resultat.IMC<18.5)
    resultat.missatge="desnutrició";
else if(resultat.IMC<=25)
    resultat.missatge="un pes normal";
else if(resultat.IMC<=30)
    resultat.missatge="sobrepès";
else
    resultat.missatge="obesitat";
return resultat;

Interactivitat amb JavaScript i jQuery

Aquesta secció explora diverses funcionalitats interactives implementades amb JavaScript i la llibreria jQuery, incloent la gestió d'esdeveniments, animacions i jocs.

Gestió d'Esdeveniments del Ratolí

Implementació de respostes a les interaccions del ratolí amb elements de la pàgina.

Entrada i Sortida del Ratolí (mouseenter/mouseleave)

Canvi de color d'un element quan el ratolí entra o surt de l'àrea d'un altre element.

$("#bolaMobil").mouseenter(function(){
    $("#bolaFixa").css("background-color","#fbb");
});

$("#bolaMobil").mouseleave(function(){
    $("#bolaFixa").css("background-color","#bbf");
});

Clics del Ratolí (mousedown/mouseup)

Canvi de color d'un element en prémer o deixar anar el botó del ratolí.

$("#rectMobil").mousedown(function(){
    $("#bolaFixa").css("background-color","#fbb");
});
$("#rectMobil").mouseup(function(){
    $("#bolaFixa").css("background-color","#bfb");
});

Animacions i Efectes Visuals

Ús de funcions de jQuery per crear animacions i efectes visuals.

Plegar i Desplegar Element (slideToggle)

Quan es fa clic dins de la pista de joc, el rectangle mòbil es "plega" i "desplega" en successius clics.

$("#pista").click(function(){
    $("#rectMobil").slideToggle();
});

Aparició i Desaparició Gradual (fadeToggle)

Quan es fa clic dins de la bola, el rectangle desapareix o apareix gradualment (en 5 segons), en successius clics.

$("#bolaFixa").click(function(){
    $("#rectMobil").fadeToggle(5000);
});

Jocs d'Intercanvi de Posicions

Implementació de jocs on l'usuari intercanvia la posició d'elements.

Joc d'Aparellament de Monuments i Ciutats

L'usuari podrà intercanviar les posicions de dues imatges de monuments seleccionant-les amb dos clics consecutius, un en cada imatge a intercanviar. L'objectiu és aparellar la imatge del monument amb la ciutat on està ubicat. El programa mostrarà un alert("Felicitats") quan tots els monuments estiguin aparellats amb la ciutat corresponent.

if(primerMonumentSeleccionat){
    // Selecció del segon monument
    segonMonument=$(this);
    primerMonumentSeleccionat = false;
    // Intercanviem les posicions dels monuments
    intercanviarPosicions(primerMonument, segonMonument);
    jocResolt();
}
else{
    // Selecció del primer monument
    primerMonument=$(this)
    primerMonumentSeleccionat = true;
}

if( $("#TorreEiffel").css("left") == $("#Paris").css("left") &&
    $("#SagradaFamilia").css("left") == $("#Barcelona").css("left") &&
    $("#BigBen").css("left") == $("#Londres").css("left") &&
    $("#Coliseum").css("left") == $("#Roma").css("left") &&
    $("#PortaBrandenburg").css("left")== $("#Berlin").css("left"))
    alert("Felicitats!!");

Joc d'Aparellament d'Animals i Classes

L'usuari podrà intercanviar les posicions de dues imatges d'animals seleccionant-les amb dos clics consecutius, un en cada imatge a intercanviar. L'objectiu és aparellar la imatge de l'animal amb la classe d'animal corresponent.

var topPrimerAnimal = primerAnimal.css("top" );
primerAnimal.css("top", segonAnimal.css("top" ));
segonAnimal.css("top", topPrimerAnimal);

Barreja Aleatòria d'Animals

Quan l'usuari fa clic al botó "Barreja els animals", es barregen les posicions de les imatges dels animals (les de la dreta).

$("#barrejar").click(function(){
    var primerMonument, segonMonument;
    for(var i=0; i<10; i++){
        primerMonument=$("#"+monument[numeroAleatori(0,monument.length-1)]);
        segonMonument =$("#"+monument[numeroAleatori(0,monument.length-1)]);
        intercanviarPosicions(primerMonument, segonMonument);
    }
});

Control per Teclat i Moviment

Funcionalitats que permeten la interacció mitjançant el teclat i el moviment automàtic d'elements.

Moviment del Rectangle amb Fletxes del Teclat

L'usuari podrà moure el rectangle mòbil prement les tecles "fletxa amunt" (codi numèric 38), "fletxa avall" (codi numèric 40), "fletxa cap a la dreta" (codi numèric 39) i "fletxa cap a l'esquerra" (codi numèric 37). El desplaçament serà de 5 píxels cada vegada que es premi una d'aquestes tecles.

var y, x;
if(e.keyCode==KEY.AMUNT){
    y=parseInt($("#rectMobil").css("top"));
    $("#rectMobil").css("top",(y-5)+"px");
}

if(e.keyCode==KEY.AVALL){
    y=parseInt($("#rectMobil").css("top"));
    $("#rectMobil").css("top",(y+5)+"px");
}
if(e.keyCode==KEY.DRETA){
    x=parseInt($("#rectMobil").css("left"));
    $("#rectMobil").css("left",(x+5)+"px");
}
if(e.keyCode==KEY.ESQUERRA){
    x=parseInt($("#rectMobil").css("left"));
    $("#rectMobil").css("left",(x-5)+"px");
}

Moviment Automàtic i Rebot de la Bola

La bola mòbil es mou "automàticament", canvia la posició cada 30 mil·lisegons i sempre en diagonal. Quan xoca amb una vora de la pista, rebota seguint la diagonal simètrica.

if(y+bolaMobil.dy < 0){
    bolaMobil.dy=1; // Vora de dalt
}
else if(y+2*bolaFixa.radi+bolaMobil.dy > pista.alçada){
    bolaMobil.dy=-1; // Vora de baix
}
else if(x+bolaMobil.dx < 0){
    bolaMobil.dx=1; // Vora de l'esquerra
}
else if(x+2*bolaFixa.radi+bolaMobil.dx > pista.amplada){
    bolaMobil.dx=-1; // Vora de la dreta
}

Detecció de Col·lisions i Canvis Visuals

Implementació de la detecció de col·lisions entre elements i la resposta visual corresponent.

Engreixament del Rectangle amb Doble Clic

Quan es fa doble clic al rectangle, aquest "s'engreixa" augmentant 30 píxels d'amplada i 30 píxels d'alçada, mantenint la posició del centre del rectangle. A la imatge teniu la posició i mida del rectangle abans i després del doble clic.

$("#rectMobil").dblclick(function(){
    // Llegim la posició i mides actuals del rectangle mòbil
    var x=parseInt($("#rectMobil").css("left"));
    var y=parseInt($("#rectMobil").css("top"));
    var w=parseInt($("#rectMobil").css("width"));
    var h=parseInt($("#rectMobil").css("height"));
    // Actualitzem la posició i mides del rectangle mòbil
    $("#rectMobil").css("left",(x-15)+"px");
    $("#rectMobil").css("top",(y-15)+"px");
    $("#rectMobil").css("width",(w+30)+"px");
    $("#rectMobil").css("height",(h+30)+"px");
});

Col·lisió del Rectangle amb les Vores de la Pista

Quan hi hagi col·lisió entre el rectangle mòbil i qualsevol de les vores de la pista, les vores que topen amb el rectangle mòbil es posaran de color vermell.

// Vora de la dreta
if((x+w)>wPista)
    $("#pista").css("border-right-color","#f00");
else
    $("#pista").css("border-right-color","#8f8");
// Vora de l'esquerra
if((x)<0)
    $("#pista").css("border-left-color","#f00");
else
    $("#pista").css("border-left-color","#8f8");
// Vora de sota
if((y+h)>hPista)
    $("#pista").css("border-bottom-color","#f00");
else
    $("#pista").css("border-bottom-color","#8f8");
// Vora de dalt
if((y)<0)
    $("#pista").css("border-top-color","#f00");
else
    $("#pista").css("border-top-color","#8f8");

Sortida de la Bola Mòbil del Recinte

Quan la bola mòbil surt, parcialment o totalment, del recinte de la pista, la vora de la pista es posa de color vermell. Observeu que una bola està totalment dins d'una altra bola si la distància entre els centres de les dues boles és menor que la diferència entre els radis de les mateixes.

var cx1=parseInt($("#pista").css("left")) + radiPista;
var cy1=parseInt($("#pista").css("top")) + radiPista;
var cx2=parseInt($("#bolaMobil").css("left")) + radiBolaMobil;
var cy2=parseInt($("#bolaMobil").css("top")) + radiBolaMobil;
if(distancia(cx1,cy1,cx2,cy2)>(radiPista-radiBolaMobil) )
    $("#pista").css("border-color","#f00");
else
    $("#pista").css("border-color","#8f8");

Contacte entre Boles

Quan les boles es toquen, la bola fixa es posa de color vermell i seguirà de color vermell mentre les boles es toquin.

var x1=parseInt($("#bolaMobil").css("left"));
var y1=parseInt($("#bolaMobil").css("top"));
var x2=parseInt($("#bolaFixa").css("left"));
var y2=parseInt($("#bolaFixa").css("top"));
if(distancia(x1,y1,x2,y2)<(bolaFixa.radi+bolaMobil.radi))
    $("#bolaFixa").css("background-color","#fbb");
else
    $("#bolaFixa").css("background-color","#bbf");