clase 07-11-2017
[fecha de publicación: 2017-11-07]
Pop-ups usables en Javascript
Razzari, Manuel
Resumen: Sin entrar en la discusión acerca de si es aconsejable o no el uso de pop-ups, se explica detalladamente cómo lanzar correctamente un pop-up mediante javascript, analizando también las formas incorrectas de hacerlo y los problemas que conllevan.
El problema
Para la mayoría de las personas resulta confuso que, al hacer click en un link o botón, la página responda lanzando una nueva ventana del navegador. Añade otra dimensión a la complejidad de la navegación. Sin embargo, muchas veces nuestro cliente necesita un pop-up, o nosotros mismos decidimos que el visitante de la página podrá manejarlo.
Más allá de las discusiones acerca de usar o no un pop-up, hay un problema que los corrompe sistemáticamente, que los hace perversos, que agrede a usuarios avanzados y principiantes en su navegación, confunde a los buscadores, y genera ruido en el código.
Este problema es que, existiendo varias formas de lanzar un pop-up con código Javascript, las más usadas son las incorrectas.
La forma correcta de lanzar una ventana pop-up con Javascript
El siguiente es el código a utilizar para lanzar un pop-up:
<a href="/index.htm" target="_blank" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>Lanzar correctamente
Simplemente cambiar en
href="/index.htm" el nombre del archivo .htm que se abrirá en la ventana nueva, y cambiar los valores de width y height según el ancho y alto deseados (en pixeles).El problema con las otras formas de lanzar un pop-up
La forma más común de lanzar un pop-up erroneamente es la siguiente:
<a href="#" onClick="window.open('/index.htm','popup','width=300,height=400')">Lanzar mal</a>Lanzar mal
Aquí, el autor utiliza el atributo
href="#" simplemente para obtener el efecto visual de la manito y el subrayado sobre el link. Luego, utiliza el evento onClick sobre ese link para abrir la ventana. Lo probamos en el navegador, y funciona perfectamente.
Sin embargo, veamos los problemas que resultan de este link.
- El 10% de navegantes que va por la vida sin Javascript jamás podrá ver el contenido que se lanza en ese pop-up. Nada ocurrirá al clickear en el link. Ese contenido quedará inaccesible.
- Los buscadores, en su recorrido indexando la Web, no podrán seguir el link y archivar la página.. Si el contenido no puede encontrarse, ¿existe?.
- Es imposible agregar el link a Favoritos (o Marcadores). "Agregar a Favoritos" toma el link desde el
<a href="pagina.htm">.Si en lugar de una dirección web tenemos<a href="#">, resulta que nada se agregará a Favoritos. - Al pasar el mouse sobre el link, no puede verse la dirección de la página a la que nos lleva, solo veremos "#" en la barra de estado.
- El navegante que haga click derecho para "Abrir en ventana nueva", es decir, desee explícitamente lanzar el contenido de ese link en otra ventana, lanzará en su lugar el contenido de la misma página que estaba viendo.
- Peor aún, quien haga Shift + Click en el link para lanzarlo en otra ventana, obtendrá no una sino dos ventanas inútiles.
- Por último, cabe recordar que existe un estándar que indica el simple <a href="..."> como la forma correcta de relacionar un documento con otro en la Web. Esta forma siempre será válida, no dependerá de ninguna tecnología de script.
Y todo puede ser peor... Existe una forma aún más perversa, que consiste en utilizar el pseudo-protocolo
javascript: para utilizar el código directamente desde el href.<a href="javascript:window.open('popups.htm','popup','width=300,height=400');">Lanzar peor</a>Lanzar peor
Intenta hacer click derecho y Abrir en una ventana nueva. Lanzará una ventana en blanco, y de esta, con suerte, el pop-up. Una vergüenza.
Para quienes crean que pueden quedarse tranquilos confiando en que su herramienta visual lo hace bien, lamento decirles que la herramienta más usada para crear sitios web hoy en día también lo hace mal. Habrá que aprender a hacerlo a mano.
El funcionamiento de la forma correcta
<a href="/index.htm" target="popup" onClick="window.open(this.href, this.target, 'width=300,height=400'); return false;">Lanzar correctamente</a>
Vemos aquí el código para hacer correctamente el link que lanza el pop-up. Simplemente, en lugar de definir la dirección del nuevo .htm dentro de la función
window.open, lo que hacemos es indicarle que desde el mismo tag (this) deberá tomar el valor del atributo href.
Con esto logramos conservar el valor semántico del
href, la dirección de la página con que se vincula, y le sumamos, si el cliente dispone de Javascript, el que se abra en un popup. Pero si no dispone de Javascript, si es un navegador sólo-texto, si es un motor de búsqueda, funcionará igual.
Y al ser un link normal, con
href, podrá ser agregado a Favoritos, indexado por buscadores
Finalmente, si el cliente tiene Javascript y el link se lanza como pop-up, el agregado de
return false al final hará que la página inicial no de "saltos" o se cargue de nuevo luego de hacer click.JavaScript Object Matemáticas
El objeto JavaScript matemáticas le permite realizar tareas matemáticas en los números.
Ejemplo
Math.PI; // returns 3.141592653589793
Math.round ()
Math.round (x) devuelve el valor de x redondeado a su número entero más próximo:
Ejemplo
Math.round(4.7); // returns 5Math.round(4.4); // returns 4
Math.pow ()
Math.pow (x, y) devuelve el valor de x a la potencia de y:
Ejemplo
Math.pow(8, 2); // returns 64
Math.sqrt ()
Math.sqrt (x) devuelve la raíz cuadrada de x:
Ejemplo
Math.sqrt(64); // returns 8
Math.abs ()
Math.abs (x) devuelve el valor absoluto (positivo) de x:
Ejemplo
Math.abs(-4.7); // returns 4.7
Math.ceil ()
Math.ceil (x) devuelve el valor de x redondeado hasta a su número entero más próximo:
Ejemplo
Math.ceil(4.4); // returns 5
Math.floor ()
Math.floor (x) devuelve el valor de x redondeado hacia abajo a su número entero más próximo:
Ejemplo
Math.floor(4.7); // returns 4
Math.sin ()
Math.sin (x) devuelve el seno (un valor entre -1 y 1) del ángulo x (dada en radianes).
Si desea utilizar grados en lugar de radianes, usted tiene que convertir grados a radianes:
Ángulo en radianes = Ángulo en grados x PI / 180.
Ejemplo
Math.sin(90 * Math.PI / 180); // returns 1 (the sine of 90 degrees)
Math.cos ()
Math.cos (x) devuelve el coseno (un valor entre -1 y 1) del ángulo x (dada en radianes).
Si desea utilizar grados en lugar de radianes, usted tiene que convertir grados a radianes:
Ángulo en radianes = Ángulo en grados x PI / 180.
Ejemplo
Math.cos(0 * Math.PI / 180); // returns 1 (the cos of 0 degrees)
Math.min () y Math.max ()
Math.min () y Math.max () se pueden utilizar para encontrar el valor más bajo o más alto de una lista de argumentos:
Ejemplo
Math.min(0, 150, 30, 20, -8, -200); // returns -200
Ejemplo
Math.max(0, 150, 30, 20, -8, -200); // returns 150
Math.random ()
Math.random () devuelve un número aleatorio entre 0 (inclusive), y 1 (exclusivo):
Ejemplo
Math.random(); // returns a random number
Usted aprenderá más sobre Math.random () en el siguiente capítulo de este tutorial.
Propiedades matemáticas (Constantes)
JavaScript proporciona 8 constantes matemáticas que se puede acceder con el objeto Math:
Ejemplo
Math.E // returns Euler's numberMath.PI // returns PIMath.SQRT2 // returns the square root of 2Math.SQRT1_2 // returns the square root of 1/2Math.LN2 // returns the natural logarithm of 2Math.LN10 // returns the natural logarithm of 10Math.LOG2E // returns base 2 logarithm of EMath.LOG10E // returns base 10 logarithm of E
matemáticas Constructor
A diferencia de otros objetos globales, el objeto Math no tiene constructor. Métodos y propiedades son estáticos.
Todos los métodos y propiedades (constantes) pueden ser utilizados sin la creación de un objeto Math primero.
Métodos Math Object
| Method | Description |
|---|---|
| abs(x) | Returns the absolute value of x |
| acos(x) | Returns the arccosine of x, in radians |
| asin(x) | Returns the arcsine of x, in radians |
| atan(x) | Returns the arctangent of x as a numeric value between -PI/2 and PI/2 radians |
| atan2(y, x) | Returns the arctangent of the quotient of its arguments |
| ceil(x) | Returns the value of x rounded up to its nearest integer |
| cos(x) | Returns the cosine of x (x is in radians) |
| exp(x) | Returns the value of Ex |
| floor(x) | Returns the value of x rounded down to its nearest integer |
| log(x) | Returns the natural logarithm (base E) of x |
| max(x, y, z, ..., n) | Returns the number with the highest value |
| min(x, y, z, ..., n) | Returns the number with the lowest value |
| pow(x, y) | Returns the value of x to the power of y |
| random() | Returns a random number between 0 and 1 |
| round(x) | Returns the value of x rounded to its nearest integer |
| sin(x) | Returns the sine of x (x is in radians) |
| sqrt(x) | Returns the square root of x |
| tan(x) | Returns the tangent of an angle |
tomado de :
Comentarios
Publicar un comentario