5 funciones útiles Javascript

Hoy traigo cinco funciones Javascript que nos pueden ayudar en el día a día.

1 – Re-dirección con Javascript 

La primera función que traigo es muy sencilla, se trata de una función que redirige el navegador a el link pasado como parámetro. También se incluye una segunda función donde se agrega el dominio actual antes del link pasado como parametro, lo cual se puede usar cuando no queremos pasar la ruta completa. Veamos el código:

1
2
3
4
5
6
7
/*El parametro link debe tener el formato siguiente:
  ej: http://www.misitio.com/imagenes/logos/logo.png*/
 
function redirige_limpio(link){
 
        location.href=link;
}
/*El parametro link debe tener el formato siguiente:
  ej: http://www.misitio.com/imagenes/logos/logo.png*/

function redirige_limpio(link){

        location.href=link;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
/*El parametro link debe tener el formato siguiente:
  ej: imagenes/logos/logo.png*/
 
function redirige(link){
 
        var thisDomain = document.domain;
        var base="http://"+thisDomain+"/";
        location.href=base+link;
        /* 
         Ejemplo base + link
         base = http://www.misitio.com/ +
         link = imagenes/logos/logo.png
         Resultado = http://www.misitio.com/imagenes/logos/logo.png
        */
}
/*El parametro link debe tener el formato siguiente:
  ej: imagenes/logos/logo.png*/

function redirige(link){

        var thisDomain = document.domain;
        var base="http://"+thisDomain+"/";
        location.href=base+link;
        /* 
         Ejemplo base + link
         base = http://www.misitio.com/ +
         link = imagenes/logos/logo.png
         Resultado = http://www.misitio.com/imagenes/logos/logo.png
        */
}

Como se puede ver en el código, y especialmente en los comentarios, en la primera función deberemos pasar el link de forma completa, mientras que en la segunda función podemos pasar la ruta interna dentro del sitio, ya que la función agregara la dirección propia del dominio (ej: http://www.ejemplos.com/) inclusive la última barra (/). Cabe destacar que esta última función no sirve para re-direcciones relativas, como por ejemplo ../index.php.

2 – Abrir un link en una ventana emergente

Esta es una función que no recomiendo utilizar a menos que sea necesario, generalmente es utilizada por inescrupulosos que quieren hace un pop-up para vender algo a la gente, lo cual ha causado desconfianza. De todas maneras es una función que nos puede resultar útil cuando no estamos tratando de engañar al usuario, aunque hoy en día es más común utilizar una Div escondida para hacer aparecer formularios o imágenes. El código es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
12
function ventanaEmergente(link, ancho, alto, top, left){
 
  if(left=="medio"){
     var ancho_navegador=(document.body.clientWidth);
     ancho_navegador=ancho_navegador/2;
     var ancho_emergente=ancho/2;
     var left=ancho_navegador-ancho_emergente;
  }
 
  w=window.open(""+link+"","v","fullscreen=no resizable=yes width="+ancho+"px height="+alto+"px top="+top+" left="+left+""); 
 
}
function ventanaEmergente(link, ancho, alto, top, left){

  if(left=="medio"){
     var ancho_navegador=(document.body.clientWidth);
     ancho_navegador=ancho_navegador/2;
     var ancho_emergente=ancho/2;
     var left=ancho_navegador-ancho_emergente;
  }

  w=window.open(""+link+"","v","fullscreen=no resizable=yes width="+ancho+"px height="+alto+"px top="+top+" left="+left+""); 

}

Y se puede llamar de la siguiente manera:

1
ventanaEmergente("http://inspirandolaweb.com",800,600,100,"medio");
ventanaEmergente("http://inspirandolaweb.com",800,600,100,"medio");

Donde el primer parámetro es la url de destino, el siguiente el ancho de la ventana emergente, seguido por el alto de la misma, luego los píxeles hasta la ventana emergente desde la parte superior del monitor, o se la posición vertical, y por último la posición de la ventana emergente desde la izquierda también en píxeles. En este caso en el último parámetro utilizo la palabra medio para que la ventana se centre de manera horizontal, en esta función esto solo se puede hacer con la posición horizontal que acepta tanto “medio” como la posición en píxeles.

3 – Acción al apretar Enter u otra tecla

Muchas veces es necesario y más cómodo que cuando el usuario ingrese sus credenciales pueda presionar Enter para ingresar al sitio sin tener que apretar el botón de Ingresar. Algo que parece bastante insignificante hace que nuestro sitio parezca un poco más pulido. El código es el siguiente:

1
2
3
4
5
6
7
8
function keypress(e){ //Al apretar enter
 
         var Ucode=e.keyCode? e.keyCode : e.charCode
         if (Ucode == 13){
                  //Tu codigo o funcion aqui
                  //Ejemplo: login();
         }
}
function keypress(e){ //Al apretar enter

         var Ucode=e.keyCode? e.keyCode : e.charCode
         if (Ucode == 13){
                  //Tu codigo o funcion aqui
                  //Ejemplo: login();
         }
}

Como se puede ver dentro del If debemos poner el código o función que queramos ejecutar, el número 13 es el código que representa al Enter en Javascript, si queremos que sea otra tecla deberemos remplazarlo por el número correspondiente, en la siguiente página pueden encontrar una lista con los códigos para las diferentes teclas http://www.cambiaresearch.com/articles/15/javascript-char-codes-key-codes , no puedo garantizar que todos funcionen. Para llamar a esta función debemos utilizar en evento onkeypress sobre el elemento que queremos que responda a la tecla, si se trata de un login sería en la contraseña o si se trata de un cuadro de búsqueda seria sobre el mismo, en todo caso el código quedaría más o menos así:

1
<input type='password' name='txtcontrasenia' id='txtcontrasenia'   onkeypress=keypress(event);>
<input type='password' name='txtcontrasenia' id='txtcontrasenia'   onkeypress=keypress(event);>

El parámetro que se le pasa es un evento y no debe cambiarse. Por último aclaro que no yo no realice esta función, sino que la saque de Internet  aunque lamentablemente ya no se de donde, si alguien reconoce su propiedad o la de otra persona por favor háganlo saber en los comentarios.

4 – Recarga de la Página con Js

Otra función sencilla pero útil que nos permite recargar la página cuando lo necesitemos, ideal para cuando el usuario modifico algún dato, el código es el siguiente:

1
2
3
4
function recargaPagina(){
 
         location.reload();
}
function recargaPagina(){

         location.reload();
}

La función no precisa ningún parámetro solo hay que llamarla.

5 – Función que devuelve el Objeto de un elemento por su ID (document.getElemetByID)

Esta función tiene como objetivo simplificar la sintaxis necesaria para obtener ciertas propiedades de los elementos de un sitio, así como asignarles valores. Básicamente devuelve el objeto creado por el código más que conocido document.getElementById(“”). La idea atrás de la función, aparte de simplificar como ya dije, es alivianar nuestra JS, es increíble los KBs que se pueden ahorrar en un documento de 2000 lineas. Otra solución podría ser utilizar la sintaxis de JQuery que también es muy reducida para obtener las propiedades de los elementos. El código de esta simple función es el siguiente:

1
2
3
4
5
6
7
8
9
10
11
function EID(idElemento){ 
 
         //Devuelve un objeto de un elemento por su ID 
         if(document.getElementById(idElemento)){
 
              return document.getElementById(idElemento);
         }else{
 
              return false; 
         } 
}
function EID(idElemento){ 

         //Devuelve un objeto de un elemento por su ID 
         if(document.getElementById(idElemento)){

              return document.getElementById(idElemento);
         }else{

              return false; 
         } 
}

El parámetro a pasar es el ID del elemento, y a cambio obtendremos el objeto del mismo, en caso de que el elemento exista. El nombre de la función puede ser más reducido, si se quiere, para ahorrar más KBs. Cabe destacar que esta función solo devuelve el objeto si le damos el ID del elemento, por lo que no funciona con el nombre (name) a menos que sean iguales. En el ejemplo de abajo se puede ver la diferencia entre la manera tradicional de obtener el valor de un input y la manera utilizando esta función:

1
2
3
var name=EID("txtname").value;
 
var name=document.getElementById("txtname").value;
var name=EID("txtname").value;

var name=document.getElementById("txtname").value;

Eso es todo por ahora, espero que sea de utilidad y cualquier consulta comenten.

Author: gp2

Desarrollador Web, Programador PHP y MySQL, conocedor de HTML5, CSS3 y Javascript. Del culto JQuery, gran coleccionador de funciones ajenas y especialista en hacer código redundante. Últimamente programador Java.

Deja un comentario