9.- La función Animate – Curso Básico de #Jquery #9

La función animate() de jquery nos sirve para crear animaciones, transformando los elementos HTML de nuestro sitio web. Su funcionalidad se basa en: realizar una transformación del elemento recibiendo el estilo final (CSS) que tendrá nuestro objeto, alguna acción (reducir de tamaño, desaparecerlo) y en que tiempo se realizara el efecto.

Algo que vale la pena recordar, es que siendo una función de jquery, esta función tiene un parámetro al final para ejecutar un callback, y así podemos realizar varias animaciones en secuencia.

Para comprender la función muestro el siguiente ejemplo, en el cual línea por línea explico que es lo que realiza:

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>animate</title>
        <script src="../scripts/jquery.js"></script>
    </head>

    <body>
    	<input type="button" value="inicia" onclick="inicia();" />
        <div  style="width:100px; position:relative; height:100px; background:#060;"></div>
        <br />

    </body>
</html>

Código Jquery


$("div")
    .animate({ //seleccionamos el div
            opacity: 0.25, //dismunuye la opacidad del objeto
            left: "+=100", //aumenta la posicion en horizontal del objeto a 100 px
            height: "toggle" //oculta el objeto
        }, 2000 //la animación se realiza en 2 segundos
        ,
        function() { //ejecutamos un callback con función anonima para regresar a la normalidad el objeto
            $("div").animate({ //seleccionamos nuevamente el div
                    opacity: 1, //regresa la opacidad del objeto a normal
                    left: "-=100", //dismunuye la posicion del objeto menos 100 px
                    height: "toggle" //aparece el objeto
                }, 1000 //tiempo de 1 segundo
                , inicia //el callback ejecuta la funcion inica para volver a comenzar todo
            )
        })
}

Ejemplo en ejecución

El código anterior, al presionar el botón inicia, realiza una animación y ejecuta un callback para regresar el div a su estado original.

Utilizando animate() podemos realizar todo tipo de animaciones a nuestros elementos HTML, recomiendo que la utilicen e intenten realizar cosas por si solos en lugar de bajar cosas ya hechas, esto les ayudara a comprender como funcionan los plugins de jquery y les dará facilidad para modificarlos o crear los plugins propios (creación de plugins de jquery, el siguiente curso que estoy por hacer).

Ir al Capitulo Siguiente (10.- Creación de Elementos HTML con Jquery).

Ir al  Capitulo Anterior (8.- Callbacks).

8.- Callbacks – Curso Básico de #Jquery #8

Los callbacks sirven para hacer una pila de funciones, las cuales se ejecutaran en secuencia conforme termine cada una de ellas. Los callbacks son utilizados a menudo para efectos y animaciones de los componentes HTML. Con jquery tenemos la facilidad de utilizarlos, ya que todas las funciones de jquery tienen callback, y este siempre se envía como ultimo parámetro.

Como explique en el artículo de javascript sobre enviar funciones como parámetro, un callback puede ser una función anónima o una función ya existente, y para ello veamos un ejemplo a continuación.

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>callbacks</title>
        <script src="../scripts/jquery.js"></script>
    </head>

    <body>
    	<input type="button" value="inicia" onclick="funcionPrimera();" />
        <div id="div" style="width:100px; height:100px; background:#060;"></div>
    </body>
</html>

Código Jquery

function functionUltima(){	
   alert("hola");
}

function funcionPrimera(){	
   $("#div").fadeOut(1000,function(){ 
     //una función anónima puede servir tambien y se ejecuta como callback		
        $("#div").fadeIn(1000,functionUltima)//funcion ultima ejecuta una funcion existente	
   })
}

Ejemplo en ejecución

En el ejemplo anterior se ejecuta la función fadeOut() la cual desaparece un elemento HTML en un margen de tiempo siendo 1000 igual a 1 segundo, y la función fadeIn() sirve para el caso contrario; utilizo estas funciones para que sea notorio la ejecución de la pila de funciones anidadas.

Lo primero que se realiza se desaparece el div, y terminando de realizar esta acción se dispara la función anónima que procede a aparecerlo, y por último se ejecuta una función existente la cual muestra un alert().

Los callbacks son utilizados comúnmente y su enorme potencial nos permite realizar mucho dinamismo en nuestros sitios web.

Ir al Capitulo Siguiente (9.- La función Animate).

Ir al  Capitulo Anterior (7.- Las funciones Show y Hide).

7.- Las funciones Show y Hide – Curso Básico de #Jquery #7

En jquery existen dos funciones, las cuales utilizaremos continuamente, su nombre son hide() y show(), estas funciones como su nombre lo indica, ocultan y muestran un elemento.

La funcionalidad que se puede realizar, es ilimitada, basta con tener imaginación y podremos realizar cosas bastante estéticas; para utilizarla, seleccionamos el o los elementos que deseamos aplicar la función por medio de un selector y al igual que todas las funciones de jquery continuamos con punto y el nombre de la función, por ejemplo:

$("div").show();

Así de sencillo es su sintaxis, y esta linea ocultaría todos los divs de nuestra pagina; pero para sacarle jugo a estas funciones vamos a realizar algo mas interesante, realizaremos un acordeón, para ello tenemos el siguiente código:

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>show hide</title>
<script src="../scripts/jquery.js"></script>
</head>
<style>
#acordeon{
width:500px;
border:1px solid #777;
}

.titulo{
background:#CCC;
cursor:pointer;
padding:3px;
border-bottom:1px solid #666;
}

.texto{
padding:5px;
}
</style>
<div id="acordeon">
<div >
<div class="titulo">Sección 1</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 2</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 3</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
<div>
<div class="titulo">Sección 4</div>
<div class="texto">as das dasd asdas d asd asd asd asd asd asdas dasd asd asdas das dasd asd asd asd asdas </div>
</div>
</div>

<body>

</body>
</html>

Código Jquery

$(document).ready(function(){
//agregamos evento clic a los titulos

$(".titulo").click(function(){
//obtenemos el objeto jquery que ejecuto el evento
divTitulo=$(this);

//ocultamos todos los div con clase texto
$(".texto").hide();

//mostramos el div correspondiente a la sección
divTitulo.parent().find(".texto").show();
});

//ocultamos todos los divs de clase texto al iniciar
$(".texto").hide();
});

En el código anterior, tenemos un conjunto de divs los cuales tienen una clase llamada sección y una llamada texto, los divs de clase sección realizaran la función que activa la sección del texto del acordeón el cual se encuentra en el div de clase texto.

En el código de jquery, agregamos un evento a los divs de clase sección para cuando den clic en ellos se muestre el div correspondiente y se oculten todos los demás, utilizando la función parent() y find() de jquery (las cuales explico en este articulo), accedemos a el elemento correspondiente a mostrar.

A continuación dejo el ejemplo funcionando, solo den clic a una sección y verán su funcionalidad:

En este capitulo vimos como podemos hacer un uso interesante por medio de las funciones hide() y show() de jquery.

Ir al Capitulo Siguiente (8.- Callbacks).

Ir al  Capitulo Anterior (6.- Eventos).

6.- Eventos – Curso Básico de #Jquery #6

Los eventos nos sirven para que nuestros elementos HTML tengan funcionalidad, ya sea al dar clic sobre ellos, pasar el puntero encima, o cuando escribimos en las cajas de texto, por medio de javascript existen los eventos para darle esa funcionalidad a nuestros objetos, pero con jquery también podemos hacerlo, de una forma más rápida, ya que por medio de los selectores podemos dar la funcionalidad a muchos elementos en pocas líneas de código.

Para ver la funcionalidad de los eventos, veamos el siguiente código.

Código HTML

<select id="combo">
   <option value="1">1</option>
   <option value="2">2</option>
   <option value="3">3</option>
</select>
<input id="boton1"  type="button" value="click boton 1" /><input id="boton2"  type="button" value="click boton 2" />

Código Jquery

$(document).ready(function(){
	$("#combo").change(function(){
		alert($(this).val())
	});

	$("input").click(function(){
		alert("clic al botón: "+$(this).attr("id"))
	})
});

En el anterior código tenemos un combobox y un botón, a los cuales seleccionamos con los selectores de jquery, al primero por medio del evento change (el cual se invoca al cambiar la opción seleccionada en el combobox), le damos una funcionalidad que nos muestre la opción seleccionada en un alert(), y el segundo selector, seleccionamos todos los elementos input (que en este caso son dos botones), y en la misma línea le aplicamos el evento clic, no hay necesidad de hacer la funcionalidad botón por botón, gracias a los selectores nos ahorramos ese trabajo, y por medio de $(this), accedemos al botón presionado y a sus atributos (los cuales podemos acceder por las funciones de jquery).

Nota: Al utilizar la linea $(document) accedemos a el documento, y este tiene la función ready(), la cual recibe una función anónima, utilizando esta linea, hacemos que nuestro código interno en la función anónima se ejecute hasta que ya este cargado los objetos DOM, osea, cuando termine de cargar todos los elementos HTML, esta es una buena practica que debe ser realizada siempre.

Así de sencillo aplicamos los eventos por medio de jquery. Para ver todos los eventos que puede asignar a los elementos HTML pueden ir dando clic a esta liga http://api.jquery.com/category/events.

Por ultimo aqui el código en ejecución:

Ir al Capitulo Siguiente (7.- Las funciones Show y Hide).

Ir al  Capitulo Anterior (5.- La función Each).

5.- La función each – Curso Básico de #Jquery #5

En javascript como en cualquier lenguaje de programación, tenemos estructuras de control, entre las cuales tenemos estructuras iterativas para recorrer colecciones, listas o elementos. En jquery siendo una librería para javascript tenemos su semejanza, de nombre each().

La función each(), sirve para recorrer un conjunto de elementos y a estos aplicarles alguna operación, en jquery el conjunto de elementos son los que seleccionamos con nuestro selector.

La funcionalidad de la función each() la represento en el siguiente ejemplo:

Código HTML

<input type="text" value="1">
<input type="text" value="2">
<input type="text" value="3">
<input type="text" value="4">
<input type="text" value="5">

Código Javascript

$("input").each(function(){
    var value=$(this).attr("value")
    alert(value)
});

Podemos apreciar que se utiliza la función each() como cualquier otra función de jquery, y dentro de sus parámetros recibe una función anónima de javascript, dentro de esta función anónima selecciono el valor de mis input y lo muestro en un alert(), en este mismo bloque de código podemos ver algo que quizá nos resulte nuevo (para algunos), y es esta linea $(this), esto sirve para representar el elemento actual de la iteración, y nos regresa un objeto tipo jquery, es decir, este objeto podemos utilizar las funciones de jquery en el (como yo utilizo la función attr()), y así facilitarnos las operaciones que deseemos realizar en toda la colección seleccionada.

Ir al Capitulo Siguiente (6.- Eventos).

Ir al  Capitulo Anterior (4.- La función Css).

¿Como conectarse a puerto no estándar en SQL Server Management Studio? #1433

Para conectarse a un puerto distinto al que es por defecto (puerto 1433) en el motor de SQL Server, basta con agregar el puerto en el campo de nombre de servidor (server name) de la siguiente manera:

NombreDelServidor, 12121

El nombre del servidor, ya sea dominio, IP, o nombre de instancia (SERVIDORSQLEXPRESS), seguido de coma y puerto. Por si no queda claro ahí va un ejemplo: si nuestro servidor esta en la ip 211.168.1.100 y el puerto por el cual tenemos que conectarnos es el 12345, sería de la siguiente manera:

211.168.1.100,12345

Y los demas datos (Login, Password) van de la misma manera que si fuera una conexión a el puerto normal.

Caracol Fibonacci en javascript. #fibonacci #canvas #javascript

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

Función #Fibonacci en #javascript

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:

¿Cuantos planetas existen en el universo?

Cada que miramos al cielo siempre vemos las estrellas que van apareciendo a través de la noche, algunas son planetas otras un cumulo de estrellas y otras son como nuestro sol, pero siempre nos preguntamos cuantas estrellas habría en el universo, ¿pero por qué no? cuantos planetas habrá, y de estos cuantos con vida.



Existe una ecuación para calcular el número de civilizaciones existentes, pero no me enfocare a esos aspectos, ya que ni matemático soy, y en esa ecuación existen muchos parámetros desconocidos y solo son suposiciones, esa ecuación es la ecuación de Drake .

Bueno ahora vamos a sacar datos curiosos por medio de sentido común, sin un método científico ya que es absurdo hacerlo cuando no tenemos los parámetros enteros, así que solo haré algo de ocio con los datos que conocemos o estamos acercados por medio de la observación que se ha hecho del universo desde hace años.

Se estima que se tienen cien mil millones (100,000,000,000) de galaxias en el universo observable, de esas galaxias existen varias clasificaciones en cuanto a número de estrellas que existen en ellas, que va desde las enanas, con 107 (10,000,000 diez millones), hasta las gigantes, con 1012(1,000,000,000,000 un billón) pero como no tenemos un dato exacto de cuantas hay enanas o gigantes tomaremos el número promedio que seria 109, que sería 1,000,000,000 mil millones de estrellas por galaxia.

Ya tenemos que son 100,000,000,000 cien mil millones de galaxias de las cuales cada galaxia tiene 1,000,000,000 mil millones de estrellas, por lo cual con una multiplicación tendríamos que: 1011 x 109= 1020 cien trillones de estrellas en el universo(100,000,000,000,000,000,000).
Ahora sacaremos los planetas promedio por estrella, para esto no me meteré en mucha problemática; si suponemos que nuestro sistema solar tiene 8 planetas y 5 planetas enanos (los conocidos hasta hoy 24-marzo-2012, Ceres, Plutón, Haumea, Makemake y Eris) tomaremos en cuenta que la mayoría de sistemas extra solares que han sido detectados no sobrepasan el numero de planetas de nuestro sistema planetario, quizá por falta de observación, eso no quiere decir que tengan menor numero, pero hasta el momento es lo que sabemos, tomaremos como referencia la mitad de nuestro sistema planetario para sacar el numero de planetas, por lo cual tendríamos en promedio 5 planetas mas 3 planetas enanos por sistema planetario, entonces tendríamos por unas simples multiplicaciones para sacar los planetas del universo:

1020 x 5 = 5020 quinientos trillones de planetas (500,000,000,000,000,000,000) y

1020 x 3 = 3020 trescientos trillones de planetas enanos (300,000,000,000,000,000,000)

Así que en el universo con los datos que conocemos, aproximadamente hay 3020  + 5020 = 8020 ochocientos trillones de planetas (800,000,000,000,000,000,000)

800 trillones de planetas de los cuales si suponemos que de cada 15 uno tiene vida (quince planetas de nuestro sistema solar y uno solo tiene vida) entonces:

8020 / 15 = 5319 cincuenta y tres trillones de planetas habitables (53,000,000,000,000,000,000)

Aunque no creo que de cada 15 haya uno con vida sino el numero debe ser mucho menor, pero como sea que veamos esa cantidad aun así el numero es enorme, aparte quizá en varios satélites haya vida pero esos no los tome en cuenta ya que el numero crecería radicalmente.

En resumen:

  • En el universo hay 100,000,000,000 cien mil millones de galaxias
  • De las cuales cada galaxia tiene 1,000,000,000 mil millones de estrellas
  • Esto nos da 100,000,000,000,000,000,000 cien trillones de estrellas en el universo
  • De las cuales cada estrella tiene en promedio 8 planetas (5 planetas y 3 enanos)
  • Esto nos da un total de 800,000,000,000,000,000,000 ochocientos trillones de planetas en el universo.
  • De los cuales en el mejor de los casos 53,000,000,000,000,000,000 cincuenta y tres trillones de planetas con vida en el universo

Este ultimo dato es exagerado pero el punto de este articulo no es ser exactos, ademas deberíamos tomar otros factores como de cuanto tiempo dura una civilización o un planeta con vida y cosas así, pero el fin de este articulo es tomar como dato curioso, que a pesar de nuestro planeta que parece enorme, el universo es demasiado grande, que solo cuando uno se pone a ver las cosas detenidamente, se comienza a ver que solo somos un grano de arena en este océano, llamado Universo.

Como detalle ya que estamos con esto de los números y multiplicaciones, la cantidad de planetas que existe aproximadamente en el universo si por cada planeta usamos la medida de un grano de arena (1 milimetro) y ponemos cada grano uno sobre otro formando una edificación, nuestra estructura mediría cerca a el ancho de la Vía Láctea.

4.- La función CSS – Curso Básico de #Jquery #4

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í.

Ir al Capitulo Siguiente (5.- La función Each).

Ir al  Capitulo Anterior (3.- Atributos).