lunes, 26 de junio de 2017

Reto 3+

Este reto se parece mas a un juego que a un programa normal, generará varias filas de números aleatorios del uno al cien pero si uno de esos números es par y está entre cuarenta y sesenta se detiene la generación de números y de todas las filas te dice cual es la más larga y cuantos números ha llegado a tener.

El código:
 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Generación de números aleatorios en JavaScript con filtros</title>  
  </head>  
  <body>  
   <h1>Generación de aleatorios hasta llegar a un par entre 40 y 60</h1>  
   <p>Generamos aleatorios entre 1 y 100  
     pero el proceso se detiene al generar un último número par  
     que está entre 40 y 60 (ambos incluidos).</p>  
   <p>Generamos 20 tiradas y decimos al final cúal es la que mayor número de elementos tiene.  
   </p>  
     <button type="button" onclick="myFunction()">Genera</button>  
     <p id="frase">Pulse el botón para iniciar la generación de aleatorios.</p>  
   <script>  
    function myFunction()  
    {  
     var text="";  
     var cuenta;  
     var maxi=0;  
     var campeon="";  
     for(i=1;i<=20;i++)  
     {  
      cuenta=0;  
      if(i<10)  
      {  
       text+="Tirada 0"+i+": ";  
      }else{  
       text+="Tirada "+i+": ";  
      }  
      var x;  
      do {  
       x=Math.floor((Math.random()*100)+1);  
       text +=x+", ";  
       cuenta++;  
      } while (x<40 || x>60 || x%2!=0 );  
      text=text.replace(/,\s*$/, ""); //elimina la última coma y el espacio posterior a ella  
      text+="<br>";  
      if (cuenta==maxi)  
      {  
       campeon +=i+",";  
      } else if (cuenta>maxi) {  
       maxi=cuenta;  
       campeon=i+",";  
      }  
     }  
     campeon=campeon.replace(/,\s*$/, "");  
     campeon+=".";  
     text +="<br>"+"El máximo número de elementos es <strong>"+maxi+"</strong> y se alcanza en "+campeon;  
     document.getElementById("frase").innerHTML = text;  
    }  
   </script>  
  </body>  
 </html>  

El programa: https://magnitopic.github.io/edujs/reto3plus.html

Los retos:
https://docs.google.com/document/d/18c89Xpp4nHCyUJAMh2spcXeUKmYxbZTPMSm0TlfyABc/edit?usp=sharing

Reto 3

El reto tres es mas sencillo que el dos o dos plus pero para aprender/ repasar está bien.
Consiste en que generará una lista de números aleatorios del uno al cien y si ese numero está entre noventa y cien la serie se detiene.

El código:


 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>Generación de números aleatorios en JavaScript</title>  
  </head>  
  <body>  
   <h1>Números aleatorios entre 1 y 100</h1>  
   <p>Generación de números aleatorios entre 1 y 100.  
    Se van generando hasta que aparezca un número entre 90 y 100 (ambos incluidos)  
    en ese momento se detiene la generación de números y se mustran los valores en pantalla.  
   El último número generado será un valor que estará entre 90 y 100 (ambos incluidos).</p>  
   <button type="button" onclick="myFunction()">Genera</button>  
   <p id="frase">Pulse el botón para iniciar la generación de aleatorios.</p>  
   <script>  
    function myFunction()  
    {  
     var text="";  
     var x; //este es el número aleatorio  
     do {  
      x=Math.floor((Math.random()*100)+1);  
      text +=x+", ";  
     } while (x<90);  
     text=text.replace(/,\s*$/, ""); //elimina la última coma y el espacio posterior a ella  
     document.getElementById("frase").innerHTML = text;  
    }  
 </script>  
  </body>  
 </html>  

Genera tu mismo tus listas: https://magnitopic.github.io/edujs/reto3.html
Los retos:
https://docs.google.com/document/d/18c89Xpp4nHCyUJAMh2spcXeUKmYxbZTPMSm0TlfyABc/edit?usp=sharing

domingo, 25 de junio de 2017

Reto 2+

El reto dos plus, esta vez lo hemos complicado un poco mas, tiene las mismas funciones que el reto dos pero esta vez puedes elegir que números poner y si quieres que solo te imprima los parees, impares o todos.
Para quien le interese, el código:


 <!DOCTYPE html>  
 <html>  
      <head>  
           <title>Reto 2 plus</title>  
           <meta charset="UTF-8">  
      </head>  
      <body>  
           <table>  
                <tr>  
                     <td>  
                          <p>Inicial</p>  
                     </td>  
                     <td>  
                          <input type=text" id="num1" value="10">  
                     </td>  
                     <td rowspan="3">  
                          <FORM>     
                               <P>  
                               <input name="tres" type="radio" id="pares" />Pares<br>  
                               <input name="tres" type="radio" id="impares" />Impares<br>  
                               <input name="tres" type="radio" id="todos" checked />Todos  
                               </P>  
                               <INPUT type="reset" value="Reset">  
                               </P>  
                          </FORM>  
                     </td>  
                </tr>  
                <tr>  
                     <td>  
                          <p>Final</p>   
                     </td>  
                     <td>  
                          <input type="text" id="num2" value="20"><br>   
                     </td>  
                </tr>  
                <tr>  
                     <td></td>  
                     <td>  
                          <button type="button" onclick="myFunction()">Serie</button>  
                     </td>  
                </tr>  
           </table>  
           <p id="frase">Introduzca el valor inicial y final de la serie.</p>  
           <script>  
                function myFunction() {  
                     var inicio=parseInt(document.getElementById("num1").value);  
                     var fin=parseInt(document.getElementById("num2").value);  
                 var text="";  
                     var incremento=1;  
                     var k=inicio;  
                     if (inicio>fin){  
                          incremento=-1;  
                          var caja=fin;  
                          fin=inicio;  
                          inicio=caja;  
                          k=fin;  //k se parece a i pero si el orden es descendente comienza por fin  
                     }  
                     var n=fin-inicio+1;  
                     var i=inicio;  
                 for(j=0;j<n;j++){  
                           if(document.getElementById('pares').checked && i%2==0)  
                           {  
                               text+=k+"<br>";  
                           }  
                           else if (document.getElementById('impares').checked && i%2!=0)  
                           {  
                                text+=k+"<br>";  
                           }  
                           else if (document.getElementById('todos').checked)  
                           {  
                                text+=k+"<br>";  
                           }  
                           i=i+incremento;  
                           k=k+incremento;  
                          document.getElementById("frase").innerHTML = text;  
                     }  
                }  
           </script>  
      </body>  
 </html>  

El programa activo: https://magnitopic.github.io/edujs/reto2plus.html
Los retos:
https://docs.google.com/document/d/18c89Xpp4nHCyUJAMh2spcXeUKmYxbZTPMSm0TlfyABc/edit?usp=sharing

jueves, 22 de junio de 2017

Sumar varios números

Ya hicimos un procedimiento que sumaba dos números. En esta ocasión vamos a sumar unos cuantos números, tantos como decida sumar el usuario.  Esto se hace teniendo en cuenta que los argumentos de una función se encuentran en el array arguments y que podemos manejarlo como cualquier otro array.


 document.write("Si sumas 1 y 2 obtienes "+suma(1,2)+"<br>");  
 document.write("Si sumas 1, 2 y 3 obtienes "+suma(1,2,3)+"<br>");  
 document.write("Si sumas 1, 2, 3 y 4 obtienes "+suma(1,2,3,4));  
 function suma(){  
  var res=0;  
  for (i=0;i<arguments.length;i++){  
   res+=arguments[i];  
  }  
  return res;  
 }  

Reto 2

Este es el reto dos, consiste en que tienes que imprimir en pantalla una serie de nuperos cen diferentes comandos: For, While y Do While.
El código:

 <!DOCTYPE html>  
 <html>  
 <body>  
 <h2>JavaScript Loops</h2>  
 <script>  
      document.write("Con For:"+"<br>");  
      for (i = 1; i < 11; i++) {  
                document.write(i+"<br>");  
      }  
      for (i = 100; i <= 120; i=i+2) {  
                document.write(i+"<br>");  
      }  
      document.write("Con While:"+"<br>");  
      //Empieza el while  
      var i=1;  
      while (i <= 10) {  
   document.write(i+"<br>");  
           i++;  
      }  
      var i= 100;  
           while (i <= 120) {  
   document.write(i+"<br>");  
           i=i+2;  
      }  
      //Empieza el Do While  
      var i =1;  
      document.write("Con Do While:"+"<br>");  
      do {  
   document.write(i+"<br>");  
           i++;  
      }  
      while (i <= 10);  
      var i =100;  
      do {  
   document.write(i+"<br>");  
           i=i+2;  
      }  
      while (i <= 120);  
 </script>  
 </body>  
 </html>  

La pagina: https://magnitopic.github.io/edujs/reto2.html
Los retos: https://docs.google.com/document/d/18c89Xpp4nHCyUJAMh2spcXeUKmYxbZTPMSm0TlfyABc/edit?usp=sharing

miércoles, 21 de junio de 2017

Reto 1+

Este es mismo código que del post anterior pero mas perfeccionado, en lugar de usar prompt para pedir las variables utilizando cuadros de texto.
El código:

 <!doctype html>  
 <html>  
      <head>  
           <meta charset="utf-8"/>    
           <title>Calcular</title>  
      </head>  
      <body>  
           <h1>Haz varias operaciones con dos numeros</h1>  
           <p>En esta lista aparecen los numeros que has dado haciendo varias operaciones</p>  
           <script>  
                var n1 = prompt ("Dame el primer numero","8");   
                var n2 = prompt ("Dame el segundo numero","6");  
                function suma(n1,n2)  
                {  
                     var resultado=parseInt(n1)+parseInt(n2)  
                     return resultado  
                }  
                function resta(n1,n2)  
                {  
                     var resultado=parseInt(n1)-parseInt(n2)  
                     return resultado  
                }  
                function producto(n1,n2)  
                {  
                     var resultado=parseInt(n1)*parseInt(n2)  
                     return resultado  
                }  
                function division(n1,n2)  
                {  
                     var resultado=parseInt(n1)/parseInt(n2)  
                     return resultado  
                }  
                function elevar(n1,n2)  
                {  
                     var resultado=Math.pow(parseInt(n1),parseInt(n2))  
                     return resultado  
                }  
                document.write(n1+"+"+n2+"="+suma(n1,n2)+"<br>");  
                document.write(n1+"-"+n2+"="+resta(n1,n2)+"<br>");  
                document.write(n1+"x"+n2+"="+producto(n1,n2)+"<br>");  
                document.write(n1+"/"+n2+"="+division(n1,n2)+"<br>");  
                document.write(n1+"^"+n2+"="+elevar(n1,n2));  
           </script>  
      </body>  
 </html>  

El código en acción: https://magnitopic.github.io/edujs/reto1plus.html
Los retos:
https://docs.google.com/document/d/18c89Xpp4nHCyUJAMh2spcXeUKmYxbZTPMSm0TlfyABc/edit?usp=sharing

Reto 1

Durante estos días de verano he decidido plantearme una serie de retos para practicar JS, este es el primero que consiste en que te aparecen unos prompt y te piden dos números y con  esos números hace varias operaciones.
Este es el código:

 <!doctype html>  
 <html>  
      <head>  
           <meta charset="utf-8"/>    
           <title>Calcular</title>  
      </head>  
      <body>  
           <h1>Haz varias operaciones con dos numeros</h1>  
           <p>En esta lista aparecen los numeros que has dado haciendo varias operaciones</p>  
           <script>  
                var n1 = prompt ("Dame el primer numero","8");   
                var n2 = prompt ("Dame el segundo numero","6");  
                function suma(n1,n2)  
                {  
                     var resultado=parseInt(n1)+parseInt(n2)  
                     return resultado  
                }  
                function resta(n1,n2)  
                {  
                     var resultado=parseInt(n1)-parseInt(n2)  
                     return resultado  
                }  
                function producto(n1,n2)  
                {  
                     var resultado=parseInt(n1)*parseInt(n2)  
                     return resultado  
                }  
                function division(n1,n2)  
                {  
                     var resultado=parseInt(n1)/parseInt(n2)  
                     return resultado  
                }  
                function elevar(n1,n2)  
                {  
                     var resultado=Math.pow(parseInt(n1),parseInt(n2))  
                     return resultado  
                }  
                document.write(n1+"+"+n2+"="+suma(n1,n2)+"<br>");  
                document.write(n1+"-"+n2+"="+resta(n1,n2)+"<br>");  
                document.write(n1+"x"+n2+"="+producto(n1,n2)+"<br>");  
                document.write(n1+"/"+n2+"="+division(n1,n2)+"<br>");  
                document.write(n1+"^"+n2+"="+elevar(n1,n2));  
           </script>  
      </body>  
 </html>  
Para probar el proyecto: https://magnitopic.github.io/edujs/calcula.html
Los retos:
https://docs.google.com/document/d/18c89Xpp4nHCyUJAMh2spcXeUKmYxbZTPMSm0TlfyABc/edit?usp=sharing

martes, 20 de junio de 2017

Curso básico de programación

En la página platzi.com disponemos de un curso gratuito de programación básica.

El curso nos ha gustado, está bastante bien. Aquí vamos a incluir algunos de los códigos que se ven en el curso, y también algunas soluciones a los ejercicios propuestos, así como variantes propias.

ATOM

Nos recomiendan como editor de código usar ATOM.



Ruta

Podemos ver la ruta o url de la página en la que estamos.


 var ruta = window.location;  
 console.log(ruta);  
 document.write("Estás en: " + ruta);  

Canvas

Primero veamos cómo hace un par de líneas, una horizontal y otra vertical en el lienzo.

Código del fichero dibujo0.html

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8" />  
   <title>Dibujando con canvas</title>  
  </head>  
  <body>  
   <h1>Dibujo en canvas</h1>  
   <canvas width="300" height="300" id="dibujito"></canvas>  
   <p>Asi queda tu dibujo.</p>  
   <script src="dibujo0.js"></script>  
  </body>  
 </html>  

Código del fichero dibujo0.js

 var d = document.getElementById("dibujito");  
 var lienzo = d.getContext("2d");  
 dibujarLinea("blue", 1,1,1,299);   //dibuja una lína vertical  
 dibujarLinea("blue", 1,299,299,299); //dibuja una línea horizontal  
 function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)  
 {  
  lienzo.beginPath();  
  lienzo.strokeStyle = color;  
  lienzo.moveTo(xinicial, yinicial);  
  lienzo.lineTo(xfinal, yfinal);  
  lienzo.stroke();  
  lienzo.closePath();  
 }  

El resultado visual es el siguiente.


Canvas con bucle

Ahora vamos a crear una malla haciendo líneas reiteradamente con la ayuda de un bucle FOR.

Código del fichero dibujo1.html

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8" />  
   <title>Dibujando con canvas</title>  
  </head>  
  <body>  
   <h1>Dibujo en canvas</h1>  
   <canvas width="300" height="300" id="dibujito"></canvas>  
   <p>Asi queda tu dibujo.</p>  
   <script src="dibujo1.js"></script>  
  </body>  
 </html>  

Código del fichero dibujo1.js

 var d = document.getElementById("dibujito");  
 var lienzo = d.getContext("2d");  
 var lineas=30;  
 var yi, xf;  
 var colorcito="blue";  
 for (l=0; l<lineas; l++)  
 {  
  yi=10*l;  
  xf=10*l+10;  
  dibujarLinea(colorcito,0,yi,xf,300);  
 }  
 dibujarLinea("blue", 1,1,1,299);   //dibuja una lína vertical  
 dibujarLinea("blue", 1,299,299,299); //dibuja una línea horizontal  
 function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)  
 {  
  lienzo.beginPath();  
  lienzo.strokeStyle = color;  
  lienzo.moveTo(xinicial, yinicial);  
  lienzo.lineTo(xfinal, yfinal);  
  lienzo.stroke();  
  lienzo.closePath();  
 }  

El resultado visual es el siguiente.


Canvas con botón

Código del fichero dibujo2.html

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8" />  
   <title>Dibujando con canvas</title>  
  </head>  
  <body>  
   <h1>Dibujo en canvas</h1>  
   <p>  
    Cuantas lineas quieres  
    <input type="text" id="texto_lineas" />  
    <input type="button" value="A darle!" id="botoncito" />  
   </p>  
   <canvas width="300" height="300" id="dibujito"></canvas>  
   <p>Asi queda tu dibujo</p>  
   <script src="dibujo2.js"></script>  
  </body>  
 </html>  

Código del fichero dibujo2.js

 var texto = document.getElementById("texto_lineas");  
 var boton = document.getElementById("botoncito");  
 boton.addEventListener("click", dibujoPorClick );  
 var d = document.getElementById("dibujito");  
 var ancho = d.width;  
 var lienzo = d.getContext("2d");  
 function dibujarLinea(color, xinicial, yinicial, xfinal, yfinal)  
 {  
  lienzo.beginPath();  
  lienzo.strokeStyle = color;  
  lienzo.moveTo(xinicial, yinicial);  
  lienzo.lineTo(xfinal, yfinal);  
  lienzo.stroke();  
  lienzo.closePath();  
 }  
 function dibujoPorClick()  
 {  
  var lineas = parseInt(texto.value);  
  var l = 0;  
  var yi, xf;  
  var colorcito = "#FAA";  
  var espacio = ancho / lineas;  
  for(l = 0; l < lineas; l++)  
  {  
   yi = espacio * l;  
   xf = espacio * (l + 1);  
   dibujarLinea(colorcito, 0, yi, xf, 300);  
   console.log("Linea " + l);  
  }  
  dibujarLinea(colorcito, 1,1,1,299);  
  dibujarLinea(colorcito, 1,299,299,299);  
 }  


El resultado visual para 50 líneas es el siguiente.


Blackjack básico programado en JavaScript

En Miriadax tienen un curso básico de programación en JavaScript donde el caso final del curso consiste en programar un juego básico de Blackjack. Las soluciones que se pueden aportar son muchísimas y queda abierto a la imaginación de cada programador. Aquí os propongo una solución que proporciona el resultado de una partida cada vez que se recarga la página.

Puedes ver el resultado de los juegos en la siguiente página.




Pueden existir variantes en la reglas utilizadas, nosotros hemos empleado las siguientes, disponibles en el archivo.





El código HTML y JavaScript se puede obtener del GitHub.


Reloj programado en JavaScript

Vamos a crear un reloj, esto es una aplicación que nos da la hora del sistema y se actualiza cada segundo para darnos de forma continua el valor de la hora, minutos y segundos. Así conseguiremos un reloj en pantalla.

He consultado la página siguiente: https://desarrolloweb.com/articulos/549.php


El código HTML es el siguiente.

 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="utf-8">  
   <title>reloj en javascript</title>  
  </head>  
  <body onload="mueveReloj()">   
 <p>Un reloj programado en JavaScript</p>  
 <form name="form_reloj">  
 <input type="text" name="reloj" size="12" style="background-color : blue; color : #EFFBFB; font-family: Arial, Helvetica, Verdana, sans-serif; font-size : 38pt; text-align : center;" onfocus="window.document.form_reloj.reloj.blur()">  
 </form>   
   <script src="reloj.js"></script>  
  </body>  
 </html>  

En el código HTML lo que hace blur es quitar el foco.


El código JavaScript es el siguiente.

 function mueveReloj()  
 {   
    momentoActual = new Date();   
    hora = momentoActual.getHours();   
    minuto = momentoActual.getMinutes();   
    segundo = momentoActual.getSeconds();   
    str_segundo = new String (segundo); //convierte la variable segundo en una cadena  
    if (str_segundo.length == 1)    //si la longitud de la cadena es 1  
   segundo = "0" + segundo;   //añade un cero a la izquierda  
    str_minuto = new String (minuto);   
    if (str_minuto.length == 1)    //en la estructura if no usamos llaves { }  
   minuto = "0" + minuto;  
    str_hora = new String (hora);   
    if (str_hora.length == 1)   
   hora = "0" + hora;   
    horaImprimible = hora + " : " + minuto + " : " + segundo;  
    document.form_reloj.reloj.value = horaImprimible;   
    setTimeout("mueveReloj()",1000)  
 }  

Puedes ver el reloj funcionando en la siguiente página. Te da la hora de tu sistema.

jueves, 15 de junio de 2017

Calculadora básica en JavaScript

El siguiente código está desarrollado en la página: http://www.aprenderaprogramar.com

Se trata de una calculadora muy básica creada con HTML + CSS + JavaScript.

 <!DOCTYPE html>  
 <html><head><title>Ejemplo calculadora</title><meta charset="utf-8">  
 <style type="text/css">  
 body {font-family: sans-serif; text-align:center;}  
 #calculadora { font: bold 14px Arial,sans-serif; background-color: #9DD2EA; border-radius: 3px; height: auto; margin: 0 auto;  
   padding: 20px 20px 9px; width: 285px;}  
 .parteSuperior .pantalla { background-color: rgba(0, 0, 0, 0.2); border-radius: 3px; color: #FFFFFF; float: right; font-size: 15px; height: 40px; letter-spacing: 1px; line-height: 40px; padding: 0 10px; text-align: right; width: 192px;}  
 .teclas, .parteSuperior {overflow: hidden; }  
 .teclas span, .parteSuperior span.limpiar {   background-color: #FFFFFF; border-radius: 3px; color: #888888; cursor: pointer;  
   float: left; height: 36px; line-height: 36px; margin: 0 7px 11px 0; text-align: center; transition: all 0.4s ease 0s; width: 66px;}  
 .parteSuperior span.limpiar { background-color:#FF7C87;}  
 .teclas span.operador { background-color: #FFDAB9; margin-right: 0; }  
 .teclas span.igual { background-color: #F1FF92; color: #888E5F;}  
 .parteSuperior span.limpiar, { background-color: #FF9FA8; color: #FFFFFF; }  
 .teclas span:hover, .teclas span.igual:hover, .parteSuperior span.limpiar:hover {  
   background-color: #9C89F6; color: #FFFFFF;  
 }  
 </style>  
 <script type="text/javascript">  
 function pulsada (tecla) {  
 var listaNodosPantalla = document.getElementsByClassName('pantalla');  
 var nodoTextoPantalla = listaNodosPantalla[0].firstChild;  
 switch(tecla) {  
         case 'C':  
         nodoTextoPantalla.nodeValue = ' ';  
         break;  
         case '=':  
         var resultado = eval(nodoTextoPantalla.nodeValue);  
         nodoTextoPantalla.nodeValue = resultado;  
         break;  
         default:  
         nodoTextoPantalla.nodeValue = nodoTextoPantalla.nodeValue + tecla;  
         break;  
 }  
 }  
 </script>  
 </head>  
 <body><div id="cabecera"><h2>Calculadora básica</h2><h3>Ejemplo calculadora JavaScript</h3></div>  
 <!-- Calculadora -->  
 <div id="calculadora">  
         <!-- pantalla y tecla limpiar -->  
         <div class="parteSuperior">  
                 <span class="limpiar" onclick="pulsada('C')">C</span>  
                 <div class="pantalla"> </div> <!--Ojo tenemos un espacio para que exista nodeValue-->  
         </div>  
         <div class="teclas">  
                 <!-- operadores y otras teclas -->  
                 <span onclick="pulsada('7')">7</span>  
                 <span onclick="pulsada('8')">8</span>  
                 <span onclick="pulsada('9')">9</span>  
                 <span class="operador" onclick="pulsada('+')">+</span>  
                 <span onclick="pulsada('4')">4</span>  
                 <span onclick="pulsada('5')">5</span>  
                 <span onclick="pulsada('6')">6</span>  
                 <span class="operador" onclick="pulsada('-')">-</span>  
                 <span onclick="pulsada('1')">1</span>  
                 <span onclick="pulsada('2')">2</span>  
                 <span onclick="pulsada('3')">3</span>  
                 <span class="operador" onclick="pulsada('/')">÷</span>  
                 <span onclick="pulsada('0')">0</span>  
                 <span onclick="pulsada('.')">.</span>  
                 <span class="igual" onclick="pulsada('=')">=</span>  
                 <span class="operador" onclick="pulsada('*')">x</span>  
         </div>  
 </div>  
 </body>  
 </html>  


Se puede probar la calculadora en el siguiente enlace.

miércoles, 14 de junio de 2017

Triángulos factibles y su área en JavaScript

Si nos proporcionan la longitud de los tres lados de un triángulo no todos son factibles. No todos los triángulos que te inventes son posibles. Pongamos un ejemplo de triángulo que si es posible crear y otro que no es posible.

  • No es posible crear un triángulo cuyos lados sean: 3, 4 y 10.
  • Si es posible crear un triángulo cuyos lados sean: 3, 4 y 5.
Un triángulo es factible si la suma de las longitudes de dos lados cualquiera es siempre mayor a la longitud del lado restante. Ver el concepto de desigualdad triangular en la Wikipedia.

Nos proponemos crear un programa en JavaScript donde el usuario nos indique las longitudes de los tres lados de un triángulo y el programa nos diga si el triángulo propuesto es factible o no. En caso afirmativo nos dará el área del triángulo usando la fórmula de Herón.


El código es el siguiente.


 <!DOCTYPE html>  
 <html>  
  <head>  
   <meta charset="UTF-8">  
   <title>Factibilidad de un triángulo y cálculo del área</title>  
  </head>  
  <body>  
   <h1 style="color:blue;">Factibilidad de un triángulo cualquiera</h1>  
   <p>Por favor, introduce las longitures de los tres lados del triángulo.</p>  
   <p>Luego pulsa el botón y te dirá si el triángulo es factible y en caso afirmativo te dará el área.</p>  
   <p>Para el cálculo del área se usa la <a href="https://es.wikipedia.org/wiki/Formula_de_Heron">fórmula de Herón</a></p>  
   <p>Un triángulo es factible cuando se cumple que <a href="https://es.wikipedia.org/wiki/Desigualdad_triangular">  
   la suma de las longitudes de dos lados cualquiera es siempre mayor a la longitud del lado restante</a>.</p>  
   <input id="num1" value="3"><br>  
   <input id="num2" value="4"><br>  
   <input id="num3" value="5">  
   <button type="button" onclick="myFunction()">Calcular</button>  
   <p id="resultado"></p>  
   <script>  
    function myFunction()  
    {  
     var a,b,c,max,s,area,text;  
      a = parseFloat(document.getElementById("num1").value);  
     b = parseFloat(document.getElementById("num2").value);  
      c = parseFloat(document.getElementById("num3").value);  
     if (isNaN(a) || isNaN(b) || isNaN(c) || a<=0 || b<=0 || c<=0)  
     {  
      text = "Es necesarios introducir tres números válidos";  
     }  
     else  
     {  
        max=Math.max(a,b,c);  
        s=(a+b+c)/2;  
        area=Math.sqrt(s*(s-a)*(s-b)*(s-c));  
      switch (max) {  
          case a:  
           if (b+c>a){  
             text="El triángulo si es factible "+b+"+"+c+">"+a+"<br>";  
             text = text + "El área es "+area+".";  
           } else {  
             text="El triángulo no es factible: "+b+"+"+c+"<="+a;  
           }  
           break;  
          case b:  
           if (a+c>b){  
             text="El triángulo si es factible "+a+"+"+c+">"+b+"<br>";  
             text = text + "El área es "+area+".";  
           } else {  
             text="El triángulo no es factible: "+a+"+"+c+"<="+b;  
           }  
           break;  
          case c:  
           if (b+a>c){  
             text="El triángulo si es factible: "+a+"+"+b+">"+c+"<br>";  
             text = text + "El área es "+area+".";  
           } else {  
             text="El triángulo no es factible "+a+"+"+b+"<="+c;  
           }  
        }  
     }  
     document.getElementById("resultado").innerHTML = text;  
    }  
   </script>  
  </body>  
 </html>  


Se puede acceder a la página en el siguiente enlace.