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#.
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.
function Agrega(){
//obtenemos los valores de nuestra caja de texto
nodoAInsertar="<tr>"; //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+="<td>"; //abrimos td
nodoAInsertar+=$(this).prop("value"); //obtenemos el valor de la caja de texto
nodoAInsertar+="</td>" //cerramos td
//limpiamos la caja de texto actual
$(this).val("");
});
//agregamos el botpon para eliminar
nodoAInsertar+="<td><input type='button' value='Eliminar' onclick='Elimina(this)'></td>"
nodoAInsertar+="</tr>" //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.
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:
$("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).
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.
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.
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:
$(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.
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.
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.
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:
$("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.
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.
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 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:
