Para detectar cuando se redimensiona la ventana de nuestro navegador existe el evento resize. Basta con utilizar el selector en el objeto global window y aplicar la función que deseamos realizar cada que se redimensiona:
$(window).resize(function(){
//aqui el codigo que se ejecutara cuando se redimencione la ventana
var alto=$(window).height();
var ancho=$(window).width();
alert("alto: "+alto+" ancho:"+ancho);
})
Para obtener el ancho y alto de nuestro navegador por medio de jquery, lo podemos hacer de la siguiente manera:
var alto=$(window).height(); var ancho=$(window).width()
Algunas veces necesitamos que una caja de texto solo acepte números (puedes ver mi otra entrada: cómo hacer que una caja de texto solo permita letras y espacios con jquery), para hacerlo podemos hacer uso de la siguiente función:
$(".number").keydown(function (e) {
// Permite: backspace, delete, tab, escape, enter and .
if ($.inArray(e.keyCode, [46, 8, 9, 27, 13, 110, 190]) !== -1 ||
// Permite: Ctrl+A
(e.keyCode == 65 && e.ctrlKey === true) ||
// Permite: home, end, left, right
(e.keyCode >= 35 && e.keyCode <= 39)) {
// solo permitir lo que no este dentro de estas condiciones es un return false
return;
}
// Aseguramos que son numeros
if ((e.shiftKey || (e.keyCode < 48 || e.keyCode > 57)) && (e.keyCode < 96 || e.keyCode > 105)) {
e.preventDefault();
}
});
Ayudándome de los selectores de jquery solo basta con poner la clase “number” a mis cajas de texto y con eso ya el usuario no podrá introducir caracteres que no sean números.
<input type="text" class="number">
Para obligar que una caja de texto solo acepte letras y espacios, sin caracteres especiales (¿¡¨*)¨o números, podemos hacerlo así de sencillo:
Código HTML
<input class="letras" type="text" > <input class="letras" type="text" > <input class="letras" type="text" >
Código Javascript/Jquery
$(".letras").keypress(function (key) {
window.console.log(key.charCode)
if ((key.charCode < 97 || key.charCode > 122)//letras mayusculas
&& (key.charCode < 65 || key.charCode > 90) //letras minusculas
&& (key.charCode != 45) //retroceso
&& (key.charCode != 241) //ñ
&& (key.charCode != 209) //Ñ
&& (key.charCode != 32) //espacio
&& (key.charCode != 225) //á
&& (key.charCode != 233) //é
&& (key.charCode != 237) //í
&& (key.charCode != 243) //ó
&& (key.charCode != 250) //ú
&& (key.charCode != 193) //Á
&& (key.charCode != 201) //É
&& (key.charCode != 205) //Í
&& (key.charCode != 211) //Ó
&& (key.charCode != 218) //Ú
)
return false;
});
Utilizamos una clase con la cual relacionamos los elementos y en el evento keypress el cual aplicamos por medio del selector de jquery, agregamos el código restringiendo las teclas que no necesitamos.
Este código también tiene anexados los códigos para las letras con acentos y la ñ.
En algunas ocasiones tenemos la necesidad de ejecutar algún código javascript hasta que este cargado todo el DOM pero también cargadas todas las imágenes, comúnmente utilizamos:
$(document).ready(function(){
//script que se ejecuta cuando se cargo el DOM
});
Pero nos damos cuenta que se ejecuta aunque no se hayan cargado las imágenes y es por el hecho de que el DOM ya está cargado ósea el código que plasma esa imagen (<img>).
Para poder lograr que se ejecute un script terminando de cargar DOM e imágenes basta con utilizar:
$(window).load(function(){
//script que se ejecuta cuando se cargo el DOM y las IMAGENES
})
La función closest de jquery, sirve para seleccionar un padre de un elemento que coincida con el selector dado.
A diferencia de parent() (ver como funciona parent()), esta función nos permite ir hasta el nivel deseado ya sea por una clase, id o el nombre de la etiqueta.
Su funcionalidad es parecida a find() (ver cómo funciona find()) solo que funciona en sentido inverso, yendo a los padres en lugar de a los hijos.
Esta función solo nos seleccionara el primer elemento encontrado con el selector dado.
A continuación muestro un ejemplo de como funciona closest():
Código HTML
<div class="abuelo">
<div>
<input id="hijo1" type="text" value="Soy el hijo 1" />
<input id="hijo2" type="text" value="Soy el hijo 2" />
</div>
</div>
Código Jquery
$(document).ready(function(){
//asi seleccionamos el hijo1
hijo1=$("#hijo1");
//de esta manera podemos seleccionar a padre por medio de closest()
padre=hijo1.closest("div");
//mostramos el contenido html para confirmar que seleccionamos el div padre
alert(padre.html())
//asi seleccionamos al abuelo mediante su clase
abuelo=hijo1.closest(".abuelo")
//mostramos html del abuelo
alert(abuelo.html())
})
Como vimos en un articulo que publique anteriormente (función fibonacci en javascript), la secuencia fibonacci es una curiosidad de la naturaleza y una de las cuales vemos en carreras afines a ingeniería, y en esta entrada compartiré el código fuente de la representación mas conocida de dicha secuencia, el caracol.
Esta figura es la mas conocida cuando buscamos información sobre la secuencia fibonacci, y pueden ver el algoritmo en ejecución dando clic AQUÍ.
El siguiente código de javascript la muestra en un navegador que soporte HTML5 (por la utilización de canvas):
Código HTML
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>fibonacci cuadros</title>
<style>
* { margin:0; padding:0; }
html, body { width:100%; height:100%; }
#miCanvas {
position: absolute;
top: 0px;
left: 0px;
margin: 0px;
border:1px solid #333
}
</style>
</head>
<body>
<canvas id="miCanvas" ></canvas>
</body>
</html>
Código Javascript
/*
Código realizado por: Héctor de León Guevara.
Fecha: 06/04/2014
Figura caracol con secuencia fibonacci
www.hdeleon.net
*/
var context //contexto del canvas global
//variables para el acomodo
var x=700;
var y=300;
var opcion=0 //variable que indica cual es la posicion ue sigue para dibujar el cuadro
var opcionCurva=0; //variable de opcion para la curva
//variables de curva
var x1_curva;
var y1_curva;
var x2_curva;
var y2_curva;
var x3_curva;
var y3_curva;
//inicia el script
window.onload = function() {
//creamos canvas
var canvas = document.getElementById('miCanvas');
context = canvas.getContext('2d');
//agrega event de resize
window.addEventListener('resize', resizeCanvas, false);
//redimensiona canvas al tamaño de ventana
function resizeCanvas() {
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
}
//redimencionamos canvas
resizeCanvas();
//algoritmos fibonacci, se ejecuta 40 veces
fibonacci(40)
};
function fibonacci(n){
var a=0;
var b=1;
var numeroTemporal=a
//plasmaCuadro(x,y,b,b);
for(i=0; i<n;i++){
acomodaCuadro(a,b);
numeroTemporal=a;
a=b;
b=numeroTemporal+b;
acomodaCurva(a,b);
//dibujamos cuadro
plasmaCuadro(x,y,b,b);
plasmaCurva();
}
}
function plasmaCurva(){
//curva
context.moveTo(x1_curva,y1_curva); //mover el cursor de canvas a punto inicial
context.quadraticCurveTo(x2_curva,y2_curva,x3_curva,y3_curva); //punto de cuadricula y punto final
context.strokeStyle = '#555';
context.stroke();
}
function plasmaCuadro(x,y,w,h){
context.beginPath();
context.rect(x, y,w, h);
context.lineWidth = 1;
context.strokeStyle = 'black';
context.stroke();
}
//funcion que permite ir acomodando el cuadro para que figure el espiral
function acomodaCuadro(a,b){
switch(opcion){
//inicio
case 0:
opcion++;
break;
//derecha
case 1:
x+=b;
opcion++;
break;
//abajo
case 2:
x-=a;
y+=b;
opcion++;
break;
//izquierda
case 3:
x-=(parseInt(a)+parseInt(b));
y-=a;
opcion++;
break;
//arriba
case 4:
y-=(parseInt(a)+parseInt(b));
opcion++;
break;
}
if(opcion==5)
opcion=1;
}
function acomodaCurva(a,b){
switch(opcionCurva){
//derecha
case 1:
x1_curva=x;
y1_curva=y;
x2_curva=x+b;
y2_curva=y;
x3_curva=x+b;
y3_curva=y+b;
break;
//abajo
case 2:
x1_curva=x+b;
y1_curva=y;
x2_curva=x+b;
y2_curva=y+b;
x3_curva=x;
y3_curva=y+b;
break;
//izquierda
case 3:
x1_curva=x+b;
y1_curva=y+b;
x2_curva=x;
y2_curva=y+b;
x3_curva=x;
y3_curva=y;
break;
//arriba
case 4:
x1_curva=x;
y1_curva=y+b;
x2_curva=x;
y2_curva=y;
x3_curva=x+b;
y3_curva=y;
break;
}
opcionCurva++;
if(opcionCurva==5)
opcionCurva=1;
}
La secuencia de fibonacci es un algoritmo tipico que vemos todos los ingenieros de computación (o ciencia a fin), mientras estamos cursando nuestra carrera.
Esta Sucesión es muy simple de comprender, simplemente comienza por el número 0 seguido del 1, y a partir de estos se suma cada numero con el anterior y se agrega a la secuencia, y repetimos la operación; un ejemplo es el siguiente:
0,1,1,2,3,5,8,13…..
Lo interesante es que esta función se representa en muchos casos en la naturaleza, desde la perfección de un caracol, hasta en la reproducción de los conejos; gran ejemplo que nos hace pensar que la naturaleza es un gran matemático.
Les adjunto el código de javascript para realizar esta famosa secuencia a continuación:
function fibonacci(n){
var a=0;
var b=1;
for(i=0; i<n;i++){
var numeroTemporal=a;
a=b;
b=numeroTemporal+b;
document.writeln(a+" ");
}
}
Esta función recibe un número, el cual sera la cantidad de elementos que plasmara la función. Si desean ver en acción la función les anexo el código corriendo el cual plasma los primeros 100 números de la secuencia, solo den clic en el botón de abajo:
Una de las cosas que más deseamos en nuestros sitios web, es poder modificar los valores visuales de los elementos DOM (elementos HTML), para crear animación, o efectos que le dan más estética a nuestro sitio, y para ello necesitamos manipular las propiedades de nuestra hoja de estilo, para este tipo de cosas jquery nos ofrece la función (método) de nombre css().
Para poder utilizarla, debemos utilizar el selector sobre el o los elementos que deseamos modificar sus propiedades de estilo, seguido de esta función. Esta función se puede utilizar de distintas formas, y comenzaremos por la forma más simple, obtener un valor en específico de un atributo de estilo, y es de la siguiente manera:
Código HTML
<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" style='width:800px;height:120px' />
Código Jquery
alert($('#imagen').css('width'));
//obtenemos en un alert el width de nuestra imagen
En este ejemplo podemos observar en una ventana alert, el ancho de nuestra imagen, ahora veamos como manipular la imagen con el siguiente código:
Código HTML
<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" style='width:800px;height:120px' /> <input type="button" value="aumentar tamaño imagen" onclick="aumentaTamano();" />
Código Jquery
function aumentaTamano(){
//obtenemos el viejo tamaño de ancho y alto
tamanoWidth=$('#imagen').css('width')
tamanoHeight=$('#imagen').css('height')
//aumentamos el tamaño obtenido mas 10 pixeles
tamanoWidth=parseInt(tamanoWidth)+parseInt(10);
tamanoHeight=parseInt(tamanoHeight)+parseInt(10);
//asignamos el nuevo tamaño
$('#imagen').css('width',tamanoWidth)
$('#imagen').css('height',tamanoHeight)
}
En este código vemos como utilizar la función para asignar un nuevo valor a las propiedades, invocando la función aumentaTamano(), la cual ejecuta al presionar el botón (<input>), otorgamos un nuevo ancho y un nuevo alto y lo asignamos a través de la función css(), recibiendo esta como argumento el nombre de la propiedad de estilo y el nuevo valor, pero aun así hay una manera más fácil de hacerlo; la función css() nos permite mandar varios valores a varias propiedades de estilo, recibiendo los atributos por el formato json; para los que no sepan que es json, simplemente es un formato que se utiliza en los lenguajes de programación para enviarse mensaje entre ellos (como lo venía haciendo el formato xml), jquery aprovecha esta característica, y también puede recibir sus atributos en este formato, facilitando poder enviar todo lo que deseamos modificar en la misma línea, como podemos ver a continuación.
Nota: Por si no conocen la función parseInt() de javascript, esta función convierte el valor de la variable a entero, si yo no utilizo esta función lo que obtendríamos al utilizar el operador “+” seria una concatenación, no una suma.
Código HTML
<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" style='width:800px;height:120px' /> <input type="button" value="disminuye tamaño imagen" onclick="disminuyeTamano();" />
Código Jquery
function disminuyeTamano(){
//obtenemos el viejo tamaño de ancho y alto
tamanoWidth=$('#imagen').css('width')
tamanoHeight=$('#imagen').css('height')
//aumentamos el tamaño obtenido mas 10 pixeles
tamanoWidth=parseInt(tamanoWidth)-parseInt(10);
tamanoHeight=parseInt(tamanoHeight)-parseInt(10);
//aplicamos los dos cambios en la misma linea, utilizando json
$('#imagen').css({'height':tamanoHeight,
'width':tamanoWidth})
}
En lugar de invocar dos veces la función css(), mando los dos atributos en la misma función utilizando json, y dentro de esta funcion se encuentra el formato json “{‘height’:tamanoHeight,’width’:tamanoWidth}”, poniendo las llaves de abertura y cerradora “{}” y dentro de estas los atributos en comillas (o sin ellas, en el caso de los atributos no los valores), seguido de dos puntos “:” que equivalen al igual (=) y separando cada atributo por coma.
Si desean ver este código en ejecución den clic aquí.
Las funciones de jquery o métodos de jquery nos sirven para realizar manipulación de los atributos de los elementos DOM (elementos HTML), animaciones, agregar eventos y muchas otras cosas; en este capítulo nos enfocaremos a las funciones que sirven para modificar los atributos de los elementos DOM.
Para poder utilizar las funciones, basta con utilizar los selectores (que vimos en el capitulo anterior), seguido de un punto y el nombre de la función, por ejemplo:
Código HTML
<input type="text" value="un valor" id="txtTexto" />
Código Jquery
var valorDeCajaDeTexto=$("#txtTexto").val();
alert(valorDeCajaDeTexto)
//Nos mostraría "un valor" en el alert
En el ejemplo anterior utilizamos la función de nombre val(), la cual nos regresa el valor que tiene un elemento DOM en su atributo value. Pero qué pasa cuando no deseamos obtener el atributo value, por ejemplo obtener la liga a la que apunta un elemento link (<a> anchor), para ello utilizamos la función de nombre prop(), la cual se puede utilizar de dos formas, tanto para obtener el valor, como para otorgar el valor, en el ejemplo siguiente vemos como obtener el valor:
Código HTML
<a id="liga" href="www.google.com">ir a una pagina</a>
Código Jquery
alert($("#liga").prop("href"))
//Nos muestra www.google.com en un alert
Y si deseamos utilizar la misma función pero para otorgar un valor es de la siguiente manera:
$("#liga").prop("href","www.hdeleon.net")
//cambia la liga del link a www.hdeleon.net
Ahora vamos a ver una función con la cual podemos obtener el contenido HTML de un elemento, es decir, el contenido que contiene dentro de él (claro que no aplica con elementos input o elementos imágenes (<img>) por el hecho que no tienen elementos HTML dentro), vamos a utilizar la función html(), igual que prop() esta función sirve para obtener y asignar un valor, solo que esta sirve para el contenido HTML, (tal como lo hace innerHTML de javascript); a continuación veamos un ejemplo:
Código HTML
<div id="contenido"> <ul> <li>un elemento</li> <li>un elemento</li> <li>un elemento</li> <li>un elemento</li> <li>un elemento</li> </ul> </div>
Código Jquery
obtenemosHTML=$("#contenido").html();
alert(obtenemosHTML)
//El alert muestra el contenido del div con el id "contenido"
Por último, gracias a los selectores de jquery, podemos realizar una función a varios elementos, supongamos que deseamos poner un value a todos los inputs de nuestra pagina, simplemente lo haríamos de la siguiente manera.
Código HTML
<input type="text" value="un valor" id="txtTexto" /> <input type="text" value="un valor" id="txtTexto2" /> <input type="text" value="un valor" id="txtTexto3" /> <input type="text" value="un valor" id="txtTexto4" />
Código Jquery
$("input").prop("value","valor a todos los input")
En este capítulo vimos algunas de las funciones de jquery para manipular los atributos de los elementos DOM; existen algunas otras funciones que pueden ver en la siguiente liga y sin duda después de leer este capítulo, no tendrán ninguna dificultad en entender su funcionamiento.