2.- Clases y Objetos – Curso de Programación Orientada a Objetos en 10 MINUTOS #2

En la Programación Orientada a Objetos existen dos conceptos que son los principales, los cuales siempre que se hable de este paradigma no se pueden evitar, y hablo de las clases y los objetos.

Una clase se es la entidad en la cual definimos el comportamiento y la definición de un objeto.

Un objeto es una instancia de una clase, es la entidad tangible que contiene los valores y realiza las acciones.

Una clase contiene atributos y métodos con los cuales identificamos a nuestro objeto. El objeto al crearse adquiere todas estas características y funcionalidades y puede hacer uso de ellas.

En palabras más simples, una clase es el molde con el cual creamos un objeto en específico. Por ejemplo:

class MiObjeto(){
    //código aqui
}

Deseamos crear un objeto tipo galleta, sabemos que las galletas tienen una forma, un sabor, un tiempo de horneado, una cantidad de harina, agua y muchas otras cosas. Para crear este objeto necesitaremos de una clase la cual sea el molde de estas galletas que vamos a crear, y para ello recurrimos a crearla con la siguiente sintaxis en c#  (cree un proyecto tipo Aplicación de Consola en Visual Studio):

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

    }

La palabra class nos indica que es una clase, y dentro de esta tenemos atributos(los cuales no son todos los de una galleta  pero nos sirve para entender de que se trata), los atributos son 3 enteros que indican la cantidad de harina, cantidad de agua, y el tiempo de horneado, y también tenemos un atributo tipo cadena que nos indica el nombre de nuestra galleta (chocochips, animalito, emperador).

Nota: la palabra public y private mas adelante las explicare, por ahora no tienen mucha importancia.

Pero una galleta también tiene acciones, por lo menos en su preparación y para ello necesitamos de métodos, ahora la clase le agrego el método hornear() y quedaría de la siguiente forma:

 class Galleta
    {
        public int cantidadHarina;
        public int cantidadDeAgua;
        public int tiempoDeHorneado;
        public string nombreGalleta;

        private int tiempoHorneada;

        public void Hornear()
        {
            for (int i = 0; i < tiempoDeHorneado;i++ )
            {
                tiempoHorneada++;
            }
            System.Console.WriteLine("Horneada la galleta");
        }
    }

Agregue un nuevo atributo (tiempoHorneada) para saber cuánto tiempo lleva horneada y cómo podemos ver hay un método el cual es un ciclo for el cual depende de el atributo tiempoDeHorneado.

Ya tenemos nuestra clase ahora veamos cómo se utiliza para crear un objeto y es de la siguiente manera:


  //creamos el objeto
  Galleta miGalleta = new Galleta();

  //agregamos sus valores a los atributos
  miGalleta.nombreGalleta = "chocochips";
  miGalleta.tiempoDeHorneado = 100;
  miGalleta.cantidadDeAgua = 10;
  miGalleta.cantidadHarina = 10;

  //horneamos la galleta invocando el metodo hornear()
  miGalleta.Hornear();

Como pudimos observar la creación de un objeto simplemente se realiza con el nombre de nuestra clase seguido del nombre que deseamos agregar a nuestra instancia (objeto) y seguido de el símbolo = (igual) y la palabra new mas el nombre de nuestro objeto nuevamente seguido de paréntesis. En el siguiente tema (constructores) veremos que significa la palabra new y por qué se pone el nombre de nuestro objeto seguido de paréntesis para la creación de un objeto.

Ir Capítulo Siguiente (3.- Constructor)

Ir Capítulo Anterior (1.- Introducción a La Programación Orientada a Objetos (POO))

1.- Introducción a la Programación Orientada a Objetos (POO) – Curso de Programación Orientada a Objetos en 10 Minutos #1

La Programación Orientada a Objetos (POO así la abreviaremos) nace por la necesidad de representar el mundo en el que habitamos (junto a sus problemas) por medio de objetos como nosotros los percibimos, con sus propiedades y funcionalidades, de esta forma es más fácil para los programadores organizar su código y tener una manera elegante con la cual realizar los sistemas. Uno de los lemas de este paradigma de programación es: “divide y vencerás”, lo cual nos da a entender que no tenemos que llenar líneas y líneas de códigos con funciones y perder el hilo de lo que estamos haciendo (como solía ser en la programación estructurada), si no que organizamos los objetos del sistema de forma abstracta junto a las acciones que pueden hacer y las iteraciones que tienen con los demás objetos.

Para darnos una idea rápida de que trata este paradigma, imaginemos que deseamos representar un medio de transporte (avión, barco, automóvil), el sentido común del humano rápidamente nos dice que nos sirve para trasladarnos, que se mueve a cierta velocidad, que frena, que tiene pasajeros, ruedas, alas o hélices, y de manera fácil podemos listar todas sus acciones y propiedades, siendo las acciones el moverse y el frenar, siendo las propiedades: el número de pasajeros, el numero de ruedas, numero de hélices etc.

Con la POO representamos rápidamente estos objetos del mundo real por medio de clases que nos sirven de moldes para crear los objetos que tendrán funcionalidad en nuestros sistemas.

Para ello pasemos de la teoría a la práctica y comencemos a entender rápidamente este paradigma y sus ventajas en el siguiente capitulo.

Ir Capítulo Siguiente (2.- Clases y Objetos)

Curso de Programación Orientada a Objetos en 10 Minutos

Este curso, me basare en una descripción del paradigma Orientado a Objetos, general y brevemente, y te prometo que en menos de 10 minutos habrás comprendido lo mas importante de esta forma de programación.

Para el curso utilizo el lenguaje de programación C# .Net, el cual es fácil de comprender (por si nunca lo han utilizado) y solo servirá para explicar el paradigma, no para que aprendan C#.

El curso consta de los siguientes capítulos:

1.- Introducción a la Programación Orientada a Objetos (POO)

2.- Clases y Objetos

3.- Constructor

4.- Herencia

5.- Polimorfismo (Sobrecarga y Sobreescritura)

6.- Abstracción en la Programación

10.- Creación de Elementos HTML con Jquery – Curso Básico de #Jquery #10

En este capitulo (y el ultimo de este curso), veremos cómo crear elementos HTML de forma dinámica y con la ayuda de jquery (podría también ser de interés ver como se realiza esto sin jquery, con javascript puro en otro artículo que hice hace tiempo).

Para crear elementos HTML dinámicamente utilizaremos la función de nombre append() de jquery, esta función agrega contenido HTML o un Nodo Html al final de su contenido, y para el caso contrario (eliminar elementos) utilizaremos la función remove() la cual elimina un elemento del contenido de la pagina.

Para comprender estas funciones veremos cómo hacer un formulario detalle (como cuando vas a la tienda y ves como te agregan los productos  que vas a pagar a una tabla), y la manera que jquery con la ayuda de sus selectores y su catálogo de funciones lo hace demasiado fácil de hacer.

El código es el siguiente:

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

           <style>
			#tutorial .bloque{
				float:left;
				width:110px;
			}
			#tutorial input,#tutorial label{
				font-size:11px;
				width:60px;
			}
			#tablaProductos,#tablaProductos td,#tablaProductos th{
				border:1px solid #333;
				border-collapse:collapse;
			}
			#tableProductos th{
				width:100px;
			}
			</style>
    </head>

    <body>
         <div id="tutorial">
            <div >
                <div class="bloque">
                    <label>Código</label>
                    <input class="texto" type="text" id="txtCodigo" value="" />
                </div>
                <div class="bloque">
                    <label>Nombre</label>
                    <input class="texto" type="text" id="txtNombre" value="" />
                </div>
                  <div class="bloque">
                    <label>Precio</label>
                    <input class="texto" type="text" id="txtPrecio" value="" />
                </div>
                <div class="bloque">
                    <input value="Agregar" type="button" onclick="Agrega()" />
                </div>
                <div style="clear:both"></div>
            </div>

            <div>
                <table style="width:400px;" id="tablaProductos">
                    <tr>
                        <th>Código</th>
                        <th>Nombre</th>
                        <th>Precio</th>
                        <th>X</th>
                    </tr>
                </table>
            </div>
         </div>
    </body>
</html>

Código Jquery

function Agrega(){

	//obtenemos los valores de nuestra caja de texto
	nodoAInsertar="&lt;tr&gt;"; //nodo en el cual obtendremos el codigo html nuevo a insertar en la tabla

	$(".texto").each(function(){ //selector por clase texto y un each para recorrer elementos

		nodoAInsertar+="&lt;td&gt;"; //abrimos td

		nodoAInsertar+=$(this).prop("value"); //obtenemos el valor de la caja de texto

		nodoAInsertar+="&lt;/td&gt;" //cerramos td

		//limpiamos la caja de texto actual
		$(this).val("");
	});

	//agregamos el botpon para eliminar
	nodoAInsertar+="&lt;td&gt;&lt;input type='button' value='Eliminar' onclick='Elimina(this)'&gt;&lt;/td&gt;"
	nodoAInsertar+="&lt;/tr&gt;" //cerramos el tr

	//por ultimo insertamos el nodo tr a la tabla
	$("#tablaProductos").append(nodoAInsertar)

	//ponemos el foco en la caja de texto código
	$("#txtCodigo").focus()
}

function Elimina(NodoBoton){

	//recibimos el botón como parametro y lo transformamos a jquery
	var botonEliminar=$(NodoBoton);

	//obtenemos el padre tr del boton para asi eliminarlo, el primer padre es td, el segundo es tr
	var padreTRBoton=$(botonEliminar).parent().parent();

	padreTRBoton.remove();

	//todo esto puede funcionar con esta misma linea "$(NodBoton).parent().parent().remove();"
}

Código en ejecución

Tenemos tres cajas de texto y un botón, al presionar el botón invocamos la función Agrega() la cual realiza un each sobre los elementos de clase “texto” y les da un formato de celda (<td>) y concatenándolos a una variable de nombre nodoAInsertar, al finalizar el ciclo agregamos un botón, tal como lo haríamos con html, y en este botón agregamos la función Elimina() recibiendo como parámetro el mismo botón. Por último utilizando la función append() de jquery anexamos el nuevo código html a la tabla con el id tablaProductos, y así de sencillo se realiza la creación de elementos HTML de forma dinámica.

Para el caso de eliminar simplemente utilizamos la función remove() de jquery, relacionando al padre tr del botón recibido, y proseguimos a eliminar el tr junto a sus hijos.

Este fue el ultimo capitulo de este curso básico de jquery, después de ver estos 10 temas, ya eres capaz de utilizar jquery sin problemas y espero te sirva para que sea una herramienta que te ayude a realizar tus proyectos de manera rápida y estética.

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

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

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