lunes, 16 de diciembre de 2013

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.


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.







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.




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));



domingo, 15 de diciembre de 2013

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.

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.



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.



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



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.



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



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



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:

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.


 

miércoles, 23 de octubre de 2013

Contador de caracteres en un textarea


Contador de caracteres en un textarea


Aqui encontre un codigo que les puede ser de utilidad para los que necesiten hacer un formulario o algo similar.
Se trata de controlar el tamaño del texto que se escribe en un textarea para evitar que los caracteres escritos sobrepasen de los permitidos. El control de los caracteres escritos se hace con Javascript, dinámicamente en el lado del cliente, de modo que cuando el usuario llega a la longitud permitida, no se permite escribir más contenido en el campo textarea. 

<html>
<head>
<script>
contenido_textarea = ""
num_caracteres_permitidos = 10

function valida_longitud(){
   num_caracteres = document.forms[0].cuerpo.value.length

   if (num_caracteres > num_caracteres_permitidos){
      document.forms[0].cuerpo.value = contenido_textarea
   }else{
      contenido_textarea = document.forms[0].cuerpo.value
   }

   if (num_caracteres >= num_caracteres_permitidos){
      document.forms[0].caracteres.style.color="#ff0000";
   }else{
      document.forms[0].caracteres.style.color="#000000";
   }

   cuenta()
}
function cuenta(){
   document.forms[0].caracteres.value=document.forms[0].cuerpo.value.length
}
</script>
</head>

<body>
<form action="#" method="post">
<table>
<tr>
   <td>Texto:</td>
   <td><textarea cols="40" rows="5" name="cuerpo" onKeyDown="valida_longitud()" onKeyUp="valida_longitud()"></textarea></td>
</tr>
<tr>
   <td>Caracteres:<br/>max 10</td>
   <td><input type="text" name=caracteres size=4></td>
</tr>
</table>
</form>

</body>



</html>




No tiene ninguna complicación. Pero hay que prestar atención a los eventos del textarea, que son onKeyDown y onKeyUp, que se desatan cuando el usuario aprieta o suelta teclas del teclado. En ambos eventos se llama a la función javascript valida_longitud(), que se encargará de hacer todo el trabajo.



Los campos que deben de tener en cuenta son:



contenido_textarea = ""
num_caracteres_permitidos = 10



el primero esta vacio, ya que se supone que el contenido al comenzar este asi, el segundo es el numero de caracteres permitidos.


Para ver mejor el ejemplo les dejo una demo






Espero que les sea de utilidad.

Hasta la Proxima.