Javascript - Almanaque

Almanaque

Este es un ejemplo de hacer un almanaque usando javascript y un poco de css.

Este almanaque mostrara el mes con los dias de cada mes.

Se dara uso de una function en conjunto de un switch y un for por cada caso.

el cual segun el caso mostrara un mes, y dentro se ejecutara la funcion segun el valor igresado,

este valor sera el que toma en los for asi segun el valor de la funcion mostrara el mes

con sus respectivos dias.

<ul class="almanaque">

            <script type="text/javascript">
            var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
            var diasMeses = ["28", "30", "31"];
            function almanaque(m)
            {
                switch(m)
                {
              
                    case 1:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[0]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 2:
                        for(i=1;i<=diasMeses[0];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[1]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 3:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[2]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 4:
                        for(i=1;i<=diasMeses[1];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[3]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 5:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[4]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 6:
                        for(i=1;i<=diasMeses[1];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[5]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 7:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[6]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 8:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[7]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 9:
                        for(i=1;i<=diasMeses[1];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[8]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 10:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[9]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 11:
                        for(i=1;i<=diasMeses[1];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[10]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    case 12:
                        for(i=1;i<=diasMeses[2];i++)
                        {
                         if(i==1){document.write("<h1>"+meses[11]+"</h1>"+"<hr/>");}
                          document.write("<li>"+i+"</li>");
                          if(i==7 || i==14 || i==21 || i==28){document.write("<br/>");}
                        
                        }
                    
                    break;
                    default :
                     document.write("<h1>Dato Incorrecto.</h1>");
                    break;

                }

            }
          
            /*  AQUÍ CAMBIAMOS EL NÚMERO DEL MES QUE QUEREMOS MOSTRAR */
          
            almanaque(11);
            </script>
            </ul>

Usamos el siguiente estilo css

<style type="text/css">
     ul.almanaque
     {
      background:#0CF;
      width:580px;
      height:auto;
      padding:20px 5px 20px 20px ;
      border-radius:10px;
      -moz-border-radius:10px;
      -webkit-border-radius:10px;
      border:5px solid #999;
      box-shadow:0px 0px 5px #000;
      overflow: hidden;
     }
     ul.almanaque li
     {
      display:inline-block;
      width:50px;
      height:50px;
      padding:20px 10px 0px 10px;
      text-align:center;
      margin:5px;
      color:#FFF;
      background:orange;
      float:left;
      cursor:pointer;
      border-radius:5px;
      -moz-border-radius:5px;
      -webkit-border-radius:5px;
     }
     ul.almanaque li:hover
     {
       background:yellow;
       color:#F00;
       box-shadow:0px 0px 5px #000;
       transition:all 0.5s linear;
       -webkit-transition:all 0.5s linear;
       -moz-transition:all 0.5s linear;
       -o-transition:all 0.5s linear;
     }
     ul.almanaque li:active
     {
      box-shadow: inset 0px 0px 10px orange;
      -moz-box-shadow: inset 0px 0px 10px orange;
      -webkit-box-shadow: inset 0px 0px 10px orange;
     }
     h1
     {
     color:#FFF;
     }
     hr
     {
     background:#FFF!Important;
     border:1px solid #FFF;
     }
    </style>

DEMO

Javascript - Tablas Automáticas

Creando Tablas  con Javascipt

Este es un ejemplo de crear tablas de manera automatica.

Usaremos una function y la herramienta for.

<table class="table">
    <script type="text/javascript">
   
    var f=prompt("Ingrese la cantidad de filas");
    var c=prompt("Ingrese la cantidad de columnas");
   
      function tabla(f,c)
      {
       for(i=1;i<=f;i++)
       {
           document.write("<tr>");

           for(j=1;j<=c;j++)
           {
           document.write("<td></td>");
           }
          
           document.write("</tr>");

       }
       
      }
     
      tabla(f,c);
    </script>
</table>

Lo que se hace en este codigo, es hacer uso de una function que contendra los valores de las filas y columnas, se usaran dos ciclos de for, uno para las filas y otro para las columnas.

Lo que se hace es usar un for dentro de otro for, ambos con valores diferentes que saldran de los valores de la funcion, se usan variables i, j para que no se tomen los mismos valores en el ciclo de los for, y esos valores saldran respectivamente de la funcion.

Para dar un aspecto agradable usamos un css adicional.

<style type="text/css">
.table {color:#666;margin:0 auto;border:1px solid #ddd; border-width:1px;}
.table tr {background:#F4F4F4}
.table td {width:30px;height:50px;cursor:pointer;padding:10px;border:1px solid #ddd; border-width:1px; vertical-align:middle; text-align:center}
.table td:hover  {background:#EEE}
</style>

DEMO

Javascript - Switch

Javascript - Switch

Aqui veremos un ejemplo del uso de un switch,

este metodo nos permite mostrar el resultado segun le indiquemos.

este ejmplo consiste en mostrar unas cajas de colores, cada caja se le asigna un valor numerico,

dentro del switch en su () se indica el numero que queramos mostrar,

en el switch se veran los casos son un numero, si ingresamos el valor eje. 3 buscara dentro de los casos, comenzara en el caso 1 comparara si 1=3 como no es igual pasara a comparar si 2=3 como no es pasara a comparar si 3=3 y al ser igual se poduce on corte del ciclo y mostrara el la caja que se le asigno a ese case 3

<html>
    <head>
    <title>Switch</title>
    </head>
        <body>
            <br/>
            <script language="javascript">

    switch(4)
    {
        case 1:
            resu=document.write("<center><div style='width:500px;height:400px;background:#00CCFF;'></div></center>");
            break;
        case 2:
            document.write("<center><div style='width:500px;height:400px;background:#FF0000;'></div></center>");
            break;
        case 3:
            document.write("<center><div style='width:500px;height:400px;background:#00FF00;'></div></center>");
            break;
           
        case 4:
            document.write("<center><div style='width:500px;height:400px;background:#8C008C;'></div></center>");
            break;   
        default:
            document.write("<center><div style='width:500px;height:400px;background:#000;'></div></center>");
            break;
    }
   
   
   

</script>
        </body>

</html>

DEMO

Javascript - Promedio

Javascript - Promedio

Veremos un ejemplo basico de sacar el promedio de unos valores,

usaremos una function .

<html>
    <head>
    <title>Promedio</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
             function prom(a,b,c,d)
             {
                 valor=(a+b+c+d)/4;   
                 return valor;               
             }
           
              promedio = prom(2,4,6,8);
              document.write(promedio);
            </script>
        </body>

</html>

Este codigo lo que nos hace es hacer uso de una function el cual denro esta la operacion, en la function prom se tomara cuatro valores que se indicaran y se dividira por su cantidad para sacar el promedio de las mismas, dentro de la function asiganmos a valor la operacion aritmetica, solo que lo hacemos referencia con los valores ingresados en la fucntion y retornamos el valor con un return asi  el resultado quedara almacenado en el campo valor

Ahora nos queda hacer la llamada a la function y que procese la operacion,

escribimos el nombre de la function y en el parametro le asignamos los valores, separados por comas.

Esos valores tiene que ser numericos.

Como en la funcion ya asignamos que se dividira por 4 pusto que son 4 valores a ingresar, la operacion mostrara el resultado, pudiendo cambiar los valores a gusto, ya cantidad que se dividira dependera de la cantidad ingresada tambien si no se mantendra fija.

DEMO

Javascript - Par o Impar

Javascript - Par o Impar

<html>
    <head>
    <title>Mi Web</title>
    <link href="estilo.css" rel="stylesheet" type="text/css" />
    </head>
        <body>
            <br/>
            <script type="text/javascript">
             function par(n)
             {
                resto= n% 2;
                if(resto==0){
                document.write("Es Par");
                }else{
                document.write("Es Impar");
                }
                 return valor;               
             }
           
              par(10);
            </script>
        </body>

</html>

En este ejemplo vamos a coparar un  numero y veremos si es par o impar,

el valor debera ser un numero entero, usaremos una fucntion n que nos comparara el resto que es la divicion de un numero por 2, si el resto nos retorna un 0 entonces es par,caso contrario impar.

Primero asignamos el resultado que nos indique que el resto se dividira por 2 y tiene que ser cero.

resto= n% 2;

Si el resto es 0 par

caso contrario impar.

DEMO

Javascript - Meses del Año

Javascript - Meses del Año

Ahora lo que hacemos es mostrar los meses del año e indicar la cantidad de dias que tiene cada mes.

<html>
    <head>
    <title>Meses</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
           
           
                  
            var meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", "Junio", "Julio", "Agosto", "Septiembre", "Octubre", "Noviembre", "Diciembre"];
            var dias=[" tiene 28 dias"," tiene 30 dias"," tiene 31 dias"];
           
            function mes(m)
            {

             switch(m)
             {
           
              case 1:
              return meses[0]+dias[2];
              break;
              case 2:
              return meses[1]+dias[0];
              break;
              case 3:
              return meses[2]+dias[2];
              break;
              case 4:
              return meses[3]+dias[1];
              break;
              case 5:
              return meses[4]+dias[2];
              break;
              case 6:
              return meses[5]+dias[1];
              break;
              case 7:
              return meses[6]+dias[2];
              break;
              case 8:
              return meses[7]+dias[2];
              break;
              case 9:
              return meses[8]+dias[1];
              break;
              case 10:
              return meses[9]+dias[2];
              break;
              case 11:
              return meses[10]+dias[1];
              break;
              case 12:
              return meses[11]+dias[2];
              break;
           
             }
           
           
            }
           
            diasMeses=mes(2);
            document.write(diasMeses);
           
            </script>
        </body>

</html>

Primero asignamos en una variable los meses, que vendria a ser como un array de datos

ya que no guarda la informacion en una variable que contendra multiples valores,

al igual que los dias, solo almacena tres valores, que son la cantidad de dias que pueden tener los meses,  al estar almacenados en una variable gral. los valores tomararan un valor numerico, en este caso se comienza por defecto con el valor 0, osea enero toma valor 0 ( meses[0] )

Lo mismo pasa con los dias, toma el valor 0 ( dias[0] ) en este caso de dias 0 mostrara el resultado de valor o dato que esta en la variable dias, que seria " tiene 28 dias ".

Despues que asignamos los valores a los meses y dias, lo que hacemos es hacer uso de una function,

y usamos un switch para que nos muestre el mes segun indiquemos en la function.

En el primero case o caso del switch nos dice que si el valor ingresado es 1 que seria enero nos retorne return meses[0]+dias[2]; xq que meses 0 y dias 2, simplemente xq 0 es el valor default que comienza en la variable de meses, 0= enero, y dias 2 xq 2 =  " tiene 30 dias" que seria el resultado de " Enero tiene 30 dias " = return meses[0]+dias[2];

Y asi va comparando los casos segun el valor ingresado en la function cambiara las variables,

en el  switch solo se comparara los casos y segun el valor ingresado nos retornara la informacion y dejara de repetir cuando se encuentre el caso a mostrar, como el metodoes maual, no hace falta agregar un default xq no creo que se ingrese como valor de mes un numero mayor a 12 y menor a 1.

DEMO

Ahora mostraremos los meses haciendo uso de for.

<html>
    <head>
    <title>Meses</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
            var dias=[" tiene 28 dias"," tiene 30 dias"," tiene 31 dias"];
            var meses = ["Enero "+dias[2], "Febrero"+dias[0], "Marzo"+dias[2], "Abril"+dias[1], "Mayo"+dias[2], "Junio"+dias[1], "Julio"+dias[2], "Agosto"+dias[2], "Septiembre"+dias[1], "Octubre"+dias[2], "Noviembre"+dias[1], "Diciembre"+dias[2]];

            function mesesDias(m)
            {           
                for(m=0; m<12; m++)
                  {
                   document.write(meses[m]+"<br/>");
                  }
           
           
            }
           
            mesesDias(3)
            </script>
        </body>

</html>

Usaremos las variables ya definidas que nos guardara la informacion que queremos mostrar,  declaramos los valores para meses y dias, pero ahora incluiremos los dias dentro de los valores de los meses asi ya tomara ambos resultados en la variable de meses, el orden es igual, comienza con valores en 0 , asi que la variable dias tiene tres, 0,1 y 2, respectivamente toma el orden que estan en la variable de dias, y en meses tambien toma desde 0 y segun el orden que este van de 0 a 11.

Asiganmos los dias segun el mes, y solo concatenamos los meses con los dias (+dias[x] )

despues hacemos uso de la function y utilizamos el for,

que nos repetira la function, que se inicializa en 0 y termina en menor a 12,

recordar que las variables de los datos asignados van desde 0 a 11.

Asi que solo toma que el for repita en un ciclo lo que indicamos con el socument.write que nos indica cada mes con sus respectivos dias.

DEMO

Por ultimo hacemos un ejemplo  donde se pida ingresar el valor del mes para mostrar los dias.

<html>
    <head>
    <title>Meses</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
            var en="Enero tienen 31 dias";
            var fe="Febrero tienen 28 dias";
            var ma="Marzo tienen 31 dias";
            var ab="Abril tienen 30 dias";
            var my="Mayo tienen 31 dias";
            var jn="Junio tienen 30 dias";
            var jl="Julio tienen 31 dias";
            var ag="Agosto tienen 31 dias";
            var sp="Septiembre tienen 30 dias";
            var oc="Octubre tienen 31 dias";
            var nv="Noviembre tienen 30 dias";
            var dc="Diciembre tienen 31 dias";
           
            var m=prompt("Ingrese el numero del mes");
           
            while(m=="" || m<=0 || m>12)
            {
              m=prompt("Ingrese el numero del mes correctamente");
            }
            function meses(m)
            {           
              if(m==1)
              {
               return en;
              }else
               {
                 if(m==2)
                 {
                  return fe;
                 }else
                 {
                  if(m==3)
                  {
                   return ma;
                  }else
                  {
                   if(m==4)
                   {
                    return ab;
                   }else
                   {
                    if(m==5)
                    {
                     return my;
                    }else
                    {
                     if(m==6)
                     {
                      return jn;
                     }else
                     {
                      if(m==7)
                      {
                       return jl;
                      }else
                      {
                       if(m==8)
                       {
                        return ag;
                       }else
                       {
                        if(m==9)
                        {
                         return sp;
                        }else
                        {
                         if(m==10)
                         {
                          return oc;
                         }else
                         {
                          if(m==11)
                          {
                           return nv;
                          }else
                          {
                           if(m==12)
                           {
                            return dc;
                           }
                          }
                         }
                        }
                       
                       }
                      }
                     }
                    }
                   }
                  }
                 }
               }

           
           
           
            }
           
            document.write(meses(m));
           
            /*
           
            Tambien podemos retornar con un mensaje
            Solo cambiar
           
            document.write(meses(m));
           
            por:
           
            alert(meses(m));
           
            */
           
           
            </script>
        </body>

</html>

Aqui primero declaramos todas las variables de los meses e indicamos la cantidad de dias que le corresponde a cada mes. Despues hacemos un prompt a una variable que toma el mismo nombre de la fucntion que queremos indicar, asi este valor se ingresara directamente en la function y procedera a hacer lo indicado dentro de ella segun el valor, tambien hacemos el uso de un while para que no permita que se deje el campo vacio o que sea menor a 1 o mayor a 12, asi si lo esta hace un ciclo repetitivo hasta que se ingresa el mes deseado y pasa al siguiente paso.

Ahora en la function meses que se guarda en m

hacemos uso de if, lo cual ira comparando los valores y nos retornara las variables ya asignadas,

si nos indica que el valor de m = 1 nos retorna en, cosa que ya declaramos que es en la variable enero, y asi es con las demas, nos retorna segun la variable que se le asigna a cada valor por cada numero que ingresamos..

FInalmente hacemos la llamada a la function que nos habra retornado el mes segun indicamos

document.write(meses(m)

o tambien podemos llamarlo con un alert que seria de esta manera:

alert(meses(m));

DEMO

Javascript - Menor de tres Numeros

Javascript - Menor de tres Numeros

Este es un ejemplo basico de menor de tres numeros.

<html>
    <head>
    <title>Numero Menor</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
             function menor(a,b,c)
             {
                  if(a<b && a<c)
                 {
                   return a;
                 }else
                 {
                   if(b<a && b<c)
                   {
                   return b;
                   }else
                   {
                     if(c<a && c<b)
                     {
                       return c;
                     }
                   }
                 }
               
                                
             }
           
             resultado = menor(8,3,6);
             document.write(resultado+" es el menor");
            </script>
        </body>

</html>

Aqui solo hacemos uso de condiciones, el cual comparamos los valores,

hacemos uso de una function que nos permite realizar las operaciones,

dentro de la function hacemos uso de un if que nos comparara los valores ingresados,

primero compara el valor que se le aigna a " a" y nos pregunta si a es menor a b y a<c,

esto esta comparando los valores de a con los demas, y en la segunda comparacion es el turno de b,

se hace el mismo procedimiento, y por ultimo por descarte ya que no hace falta preguntar pero igual no esta de mas hacer la comparacion, en cada ocacion nos hace un return con el valor que es el resultado de la operacion de comparacion, entonces nos va comparando y retorna el valor que se compara, y despues cuando llamamos a la function se ingres los valores de los tres valores a comparar, y la function procesara lo que esta dentro, y usara las comparaciondes del if y nos mostrara en resultado el valor que es el menor.

DEMO