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

Javascript - mostrar Imagen

Javascript -  mostrar Imagen

Ahora se vera un ejemplo simple de mostrar una imagen usando javascript

<html>
    <head>
    <title>Imagen</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
             
              function images(img)
              {
                document.write("<center><img src='"+img+"'></center>");
              }
             
              images("http://i.i.imgur.com/LCCooPG.jpg");
            </script>
        </body>

</html>

Se hace uso de una function,

la function img es lo que almacena la imagen que se ingresara,

dentro de la fucntion mostramos el resultado, utilizando las etiquetas de html,

y concatenando la variable mostraremos el valor ya asignado a img

que se vera ya ingresada cuando llamemos a la function y en ese momento la variable

img tomara el valor del dato ingresado.

DEMO

Ahora un ejemplo con un return que es similar

solo que retornamos el valor ue indiquemos en la funcion y queda almacenada,

y lo mostramos por pantalla fuera de la function.

<html>
    <head>
    <title>Imagen</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
             
              function images(img)
              {
                return img;
              }
             
              mostrarImagen=images("<center><img src='http://i.i.imgur.com/LCCooPG.jpg'></center>");
              document.write(mostrarImagen);
            </script>
        </body>

</html>

Ahora usaremos con una function, un while.

<html>
    <head>
    <title>Imagen</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
              var img=prompt("Ingrese la Url de la imagen");
              while(img=="")
              {
                img=prompt("Ingrese la Url de la imagen");
              }
              function images(img)
              {
                document.write("<center><img src='"+img+"'></center>");
              }
             
              images(img);
            </script>
        </body>

</html>

Aqui lo que hacemos es pedir que se ingrese una imagen,

con el uso de un prompt, despues temos el while que nos indica que no puede estar vacio lo que se pide al ingresar y hasta que se cumpla seguira saliendo el mensaje de que ingrese la url de la imagen.

Despues tenemos la funcion ya definida con la variable img que tomara de valor cuando ingresemos con el prompt y mostramos el resultado al hacer la llamada fuera de la function.

DEMO

Ahora mostraremos  una imagen utilizando un for

<html>
    <head>
    <title>Imagen</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
             
              function images(img)
              {
                for(i=0; i<1; i++)
                {
                  document.write("<center><img src='"+img+"'></center>");
                }
              }
             
              images("http://i.i.imgur.com/LCCooPG.jpg");
            </script>
        </body>

</html>

Aqui entre los () ingresamos las condiciones,

se le asigna  a i el valor 0 pudiendoce cualquiera que queramos,

pero en la segunda condicion mostramos que i<1 entonces estamos indicando que el valor

sea fijo en 0 asi se mostrara solo una imagene, depediendo de las veces que queramos mostrar.

Y despues el i++ que es para que se incremente, pero en esta ocacion como queremos mostrar solo 1 no cumple funcion, pero es necesaria para que se produzca  el for, el resultado es el mismo

DEMO

Por ultimo hacemos un ejemplo de mostrar multiples imagenes usando un switch

<html>
    <head>
    <title>Imagen</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
             
              function images(img)
              {
                switch(img)
                {
                 case 1:
                 document.write("<center><img src='http://i.i.imgur.com/LCCooPG.jpg'></center>");
                 break;
               
                 case 2:
                 document.write("<center><img src='http://i.imgur.com/XM1mD.jpg'></center>");
                 break;
               
                 case 3:
                 document.write("<center><img src='http://adesivifacebook.com/wp-content/uploads/2013/04/felice-150x150.png'></center>");
                 break;
               
                 case 4:
                 document.write("<center><img src='http://i.i.imgur.com/knHMw1j.gif'></center>");
                 break;
               
                 default:
                 document.write("<center><img src='http://i.imgur.com/JIntE.gif'></center>");
                 break;
               
                }
              }
             
              /* Aqui cambiar el numero segun la imagen a mostrar ._. */
             
              images(1);
            </script>
        </body>

</html>

Lo que hacemos es hacer usode una function para que por medio del switch tome los valores de las imagenes segun sea el caso asignado, la function tomara la informacion que en este caso serian numeros, estos numeros estan indicado en el switch que asigna segun el numero una imagen, y segun el numero que ingresemos en la function mostrara la imagen que esta en el switch segun sea el caso, y terminara cuando encuentre el valor ingresado asi no se repite,  si no se encuetra el valor mostrarauna imagen default,  dentro de los casos  ya mostramos por pantalla con un document.write asi que solo nos queda por hacer la llamada a la function con el valor que estan en el switch.

DEMO

Javascript Básico - For

Javascript - For

En esta oportunidad veremos el uso del for de javascript..

El ejemplo es hacer una tabla de multiplicar, aqui la probaremos con un valor fijo

usaremos como multiplicador al varlo 2 de ejemplo pero puede ser cualquier numero.

<html>
    <head>
    <title>For</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
             for(i=1; i<=20; i++)
             {
              document.write(2+"x"+i+" = "+i*2+"<br/>");
             }
            </script>
        </body>

</html>

Que es lo que hace este codigo,

prmeramente dentro de los parentesis es donde indicamos las condiciones necesarias para que

se realize las peraciones, en primer lugar nos indica que i=1 esto nos dice que se inicializa 

en el numero 1, en la segunda nos dice i<=20, aqui nis dice hasta que numero se repetira

es bucle o la repeticion, y en la tercera de i++ nos indica que cada ves que pase 

nuevamente su valor se incrementa en 1.

Despues mostramos por pantall con un document.write

que es para visualizar lo que queremos motrar,

y en primer valor que es el 2 es el valor fijo que usaremos como tabla de 2,

concatenamos la letra x entre comlillasdobles y encerradas con el signo +

esto es para unir el texto, a continuacion la concatenamos i que se incrementara en 1 hasta 

que llegue al valor indicado, concatenamos el texto =  y hacemos la operacion necesaria

que seria multiplicar i*2 ( 1*2, 2*2, 3*2 etc)

i se incremetara hasta terminar en el valo 20 que indicamos en la condicion,

mientras el valor 2 se mantiene fijo xq justamente es el valor de la tabla que queremos obtener.

El resultado es el siguiente..

2x1 = 2
2x2 = 4
2x3 = 6
2x4 = 8
2x5 = 10
2x6 = 12
2x7 = 14
2x8 = 16
2x9 = 18
2x10 = 20
2x11 = 22
2x12 = 24
2x13 = 26
2x14 = 28
2x15 = 30
2x16 = 32
2x17 = 34
2x18 = 36
2x19 = 38
2x20 = 40

DEMO

Despues podemos combinar el uso de una function con el for

<html>
    <head>
    <title>For</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
           
            function multiplicar(numero)
            {
                 for(i=1; i<=20; i++)
                 {
                  document.write(numero+"x"+i+" = "+i*numero+"<br/>");
                 }
           
            }
           
            multiplicar(5)
            </script>
        </body>

</html>

La operacion es la misma utilizada solo con el for, en esta ocacion la function nos permite utilizar

el valor de la tabla que queramos, a diferencia de la primera era un valor fijo, con esta funcion solo debemos cambiar el valor en donde llamamos a la funcion y obtendremos de resultado la tabla multiplicada con el valor ingresado:

5x1 = 5
5x2 = 10
5x3 = 15
5x4 = 20
5x5 = 25
5x6 = 30
5x7 = 35
5x8 = 40
5x9 = 45
5x10 = 50
5x11 = 55
5x12 = 60
5x13 = 65
5x14 = 70
5x15 = 75
5x16 = 80
5x17 = 85
5x18 = 90
5x19 = 95
5x20 = 100

DEMO

Ahora vamos a hacer uso de una combinacion de

function, for, while y switch

<html>
    <head>
    <title>For</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">
           
            var numero=prompt("Ingrese un numero");
           
            while(numero=="")
            {
             numero=prompt("Ingrese un numero");
            }
           
            function multiplicar(numero)
            {
               
                switch(numero)
                {
                 case numero:
                  for(i=1; i<=20; i++)
                 {
                  document.write(numero+"x"+i+" = "+i*numero+"<br/>");
                 }
                 break;
               
                 default:
                 break;
                }           
           
            }
           
            multiplicar(numero);
   
            </script>
        </body>

</html>

Primero hacemos uso de una variable el cual asignaremos un valor que se ingresara previamente el cual lo indicamos de esta manera:

var numero=prompt("Ingrese un numero");

Esto nos pedira que ingresemos el numero de la tabla que queremos usar,

una ves ingresado usaremos un while

esto nos preguntara

while(numero=="")

mientras la variable numero sea igual a vacion

nos regresara a pedir que ingresemos un valor hasta que ingresemos se repetira,

y si se ingreso el numero esto dejara de lado y dara paso a la siguente etapa,

En este caso usamos un switch que estra combindo con un for,

un switch muestra las opciones segun sea el caso o el numero en esta ocacion,

en los () del switch se ingresa la variable numero que esta guardada en la variable que se ingresa

al comienzo, y por medio de la function la usamos, como el valor ingresado puede ser cualquier numero no sera necesario varios case del switch, ya que este cambiara automaticamente y solo debemos indicar un caso para dicho valor ingresado, el for usado sera el mismo,

Despues fuera de la funcion llamamos a la funcion

multiplicar(numero);

Como dentro del for ya mostramos con  un document.write

solo falta hacer el uso de la variable nombre. 

Pueden ver el ejemplo practico:

DEMO

Javascript Ejemplo de Cambio de Dolar

Javascript Ejemplo de Cambio de Dolar

 Este es un ejemplo básico de javascript el cual se quiere obtener
como resultado el cambio de dolar a pesos argentino.
El codigo es bastante simple pero para los que esten  iniciándose les sera de utilidad.

Se utilizara una function que nos creara el cambio que indiquemos..
Se necesitaran dos valores,
La cantidad de pesos a cambiar y la cantidad que esta cotizando el dolar.

<html>
    <head>
    <title>Cambio de Dolar</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">

             function modeda(d,p)
             {
               valor=(d*p);
               document.write("Son "+valor+" pesos");
             }
           
             modeda(6,45);
            </script>
        </body>

</html>

Los valores ingresados son el 6 que seria el valor del dolar

y 45 seria el valor a calcular. Usamos una funcion (d,p)

d  es el valor del dolar y p es el valor a cambiar.

Dentro de la funcion hacemos la operacion de calculo,

obviamente solo es una multiplicacion de ambos valores, 

se le asigna  a valor el resultado de la operación y despues mostramos dentro de la funcion

el resultado. Esta operacion  como se muestra dentro deberemos solo llamar a la funcion

con el nombre que le dimos  en este caso

modeda(d,p)

y solo queda ingresar los valores que queramos,

la funcion ya definida tomara los valores y nos dara el resultado.

De la misma manera podemos cambiar el codigo y usar un return y guardar

el resultado en la variable valor y despues al llamarlo mostramos el resultado,

quedaria simplemente de esta manera:

<html>
    <head>
    <title>Cambio de Dolar</title>
    </head>
        <body>
            <br/>
            <script type="text/javascript">

             function modeda(d,p)
             {
               valor=(d*p);
             
               return valor;
             
             }
            
             resultado=modeda(6,45);
             document.write("Son "+resultado+" pesos");
            </script>
        </body>

</html>

En si no cambiaria mucho

pero es otra alternativa de hacerlo.

DEMO