3.- Constructor – Curso de Programación Orientada a Objetos en 10 Minutos #3

Un constructor nos sirve para crear un objeto, es un método especial el cual no regresa un valor y tiene el mismo nombre de la clase; cada que creamos un objeto utilizamos la palabra new seguido del nombre de la clase, en ese momento estamos invocando el constructor; se preguntaran como invocamos el constructor en el capitulo anterior si no lo definimos, pues, existe un constructor por defecto el cual no recibe ningún parámetro y así si no definimos constructor ya existe uno es por eso que podemos invocar un constructor sin parámetros aunque no lo hayamos definido.

Los constructores pueden ser mas de uno en la misma clase, siempre y cuando reciban distintos parámetros.

Pero la duda que sale ahora es: ¿Para que me sirve un constructor?, sencillamente para obligar que en la creación de un objeto se reciban ciertos parámetros necesarios y así evitar que nuestro objeto funcione mal, por ejemplo veamos el código del capítulo anterior donde creamos una galleta:

 

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

Si vemos este código, que pasaría si yo no defino el atributo tiempoDeHorneado y después invoco el método Hornear(), simplemente no tendría una funcionalidad definida ya que mi atributo no valdría nada por lo cual no se hornearía. Para ello cambiemos el código para que obliguemos al programador a enviar ese atributo, de la siguiente manera:

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

        private int tiempoHorneada;

        //constructor
        public Galleta(int tiempoDeHorneado)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
        }

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

En este código vemos que agregue un nuevo método de nombre Galleta y el cual recibe un entero, también utilizo la palabra reservada this, esta palabra nos sirve para indicar que estamos haciendo referencia a la variable de la clase, y si vemos recibimos una variable de mismo nombre, si no utilizamos la palabra this, hacemos referencia a la que recibimos como argumento, y lo que hago es simplemente darle el valor que recibo a mi atributo de la clase Galleta, y así poder utilizarlo dentro de mis métodos.

Nota: Cuando se define un constructor, el constructor por defecto ya no existe y obligamos a utilizar solo los constructores que existen en nuestra clase (ya no podemos utilizar Galleta() sin parámetros ya que definí un constructor con parámetro).

Y a continuación les muestro la forma en cómo utilizaríamos el constructor, y es la siguiente:

 class Program
    {
        static void Main(string[] args)
        {
            Galleta miGalleta = new Galleta(100);
            miGalleta.nombreGalleta = "chocochips";
            miGalleta.cantidadDeAgua = 10;
            miGalleta.cantidadHarina = 10;
            miGalleta.Hornear();

            //linea para poder ver el texto de el metodo hornear
            Console.ReadLine();
        }
    }

Cuando creamos un proyecto tipo consola en Visual Studio, la clase Program se crea por defecto y esta contiene el método Main, el cual es el que se ejecuta cuando corremos el proyecto.

Recuerda que puedes definir muchos más constructores siempre y cuando tengan distintos parámetros ya sea en cantidad de estos o distinto tipo de dato. Por ejemplo podríamos crear un constructor para obligar a que el programador envié el nombre, la cantidad de harina y la cantidad de agua, y ya decida cual utilizar, y para ello nos quedaría nuestra clase Galleta de la siguiente forma:

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

        private int tiempoHorneada;

        //constructor
        public Galleta(int tiempoDeHorneado)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
        }
        //constructor 2
        public Galleta(int tiempoDeHorneado,string nombreGalleta,int cantidadHarina, int cantidadDeAgua)
        {
            this.tiempoDeHorneado = tiempoDeHorneado;
            this.nombreGalleta = nombreGalleta;
            this.cantidadHarina = cantidadHarina;
            this.cantidadDeAgua = cantidadDeAgua;
        }

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

Ir Capítulo Siguiente (4.- Herencia)

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

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

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

Este es el ultimo capitulo del curso básico de javascript, y para festejar que después de 9 capítulos ya somos principiantes con javascript, realizaremos un ejercicio que prometo les servirá en su vida diaria como desarrolladores, vamos a crear objetos HTML desde javascript, y para comprender la creación de objetos dinámicos, crearemos un formulario detalle. Si te preguntas que diablos es un formulario detalle, simplemente imagina cuando vas al súper mercado a comprar productos, y en la caja registradora mientras agregan los productos estos van agregándose a una tabla, pues eso es un formulario Maestro Detalle, pero nos enfocaremos solamente en el Formulario Detalle que prácticamente es lo difícil del asunto.

A continuación esta el ejemplo del formulario con el cual pueden jugar y ejecutarlo para que vean de que se trata:

Ahora vamos a lo divertido, como hacerlo. Para comenzar veamos el código HTML que es el siguiente:

<div id="tutorial">
<div >
<div class="bloque">
<label>Código</label>
<input type="text" id="txtCodigo" value="" />
</div>
<div class="bloque">
<label>Nombre</label>
<input type="text" id="txtNombre" value="" />
</div>
<div class="bloque">
<label>Precio</label>
<input 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>

Tenemos dos partes encerradas en dos divs(<div>), una es la que contiene los input para la captura del detalle y un botón de agregar que ejecuta una función javascript de nombre Agregar(), y tenemos 3 input de tipo text, en los cuales introduciremos valores.

En la segunda parte tenemos una tabla de id tablaProductos, y con unos encabezados relacionados a nuestras cajas de texto, y es fácil intuir que en esta tabla es donde agregaremos las filas de nuestros productos.

Ahora veamos la función Agregar antes mencionada:

function Agrega(){

//obtenemos los valores de nuestra caja de texto
var codigo=document.getElementById("txtCodigo").value;
var nombre=document.getElementById("txtNombre").value;
var precio=document.getElementById("txtPrecio").value;

//creamos un objeto tr que anexaremos a nuestra tabla llamada tableProductos
var TR= document.createElement("tr");

//creamos 4 elementos td en donde iran los datos y uno cuarto donde ira un boton para eliminar
var TD1=document.createElement("td")
var TD2=document.createElement("td")
var TD3=document.createElement("td");
var TD4= document.createElement("td")

//asignamos los valores a nuestros td por medio del atributo innerHTML, el cual tiene el contenido HTML de un Nodo
TD1.innerHTML=codigo;
TD2.innerHTML=nombre;
TD3.innerHTML=precio;

//A continuación asignamos contenido html a nuestro cuarto td
//esta es una forma de crear elementos tambien, dando el codigo html a un Nodo
TD4.innerHTML="&lt;input type='button' value='Eliminar' onclick='Elimina(this)'&gt;"

//Ahora proseguimos a agregar los hijos TD al Padre TR
//Esta es otra manera de crear elementos HTML, por medio de el metodo appendChild
TR.appendChild(TD1);
TR.appendChild(TD2);
TR.appendChild(TD3);
TR.appendChild(TD4);

//Por ultimo asignamos nuestro TR a la tabla con id tablaProductos
document.getElementById("tablaProductos").appendChild(TR)

//limpiamos nuestros inputs para agregar ma datos, y ponemos el foco nuevamente en el input de codigo
document.getElementById("txtCodigo").value=""
document.getElementById("txtNombre").value="";
document.getElementById("txtPrecio").value="";
document.getElementById("txtCodigo").focus();
}

En la función anterior, esta comentada linea por linea a detalle, pero yo resumo breve mente a continuación:

  1. Obtenemos los valores de las cajas de texto y los guardamos en variables.
  2. Después creamos un Nodo tipo TR al cual asignaremos nuevos TD donde estarán nuestros valores.
  3. En seguida creamos 4 TDs, a los tres primeros TDs le asignamos nuestros valores, y al cuarto le asignamos en su atributo innerHTML un botón en código HTML, esta es una manera de crear Elementos HTML; tengamos cuidado y veamos que en el código de nuestro botón invocamos una función en el onclick, la cual tiene nombre Eliminar() (veremos su código más adelante), esta función le enviamos el mismo Nodo botón con la palabra this.
  4. A continuación observamos otra manera la cual es utilizando el método appendChild, con este método agregamos los TDs al TR.
  5. Luego agregamos de la misma manera con el método appendChild el nuevo TR a la tabla de id tablaProductos.
  6. Por último limpiamos las cajas de texto y ponemos el foco con la función focus() de javascript en la primer caja de texto.

Ahora veamos el código de la función Eliminar que invoca el botón que creamos dinámicamente en el código anterior.

function Elimina(NodoBoton){

//recibimos el boton como parametro, obtendremos el tr que lo contiene de la siguiente manera
//Como nuestro boton es hijo de un td, y este td de el tr, debemos invocar dos veces parentNode
//Esto para llegar a tener el TR
var TR= NodoBoton.parentNode.parentNode;

//ahora que ya tenemos el padre TR, podemos eliminarlo de la siguiente manera
//junto a todos sus hijos

document.getElementById("tablaProductos").removeChild(TR);
}

Esta funcion simplemente recibe el botón mismo que la invoco como parámetro, recordemos que enviamos el botón con la palabra this; y ya teniendo este botón por medio de el atributo parentNode obtenemos su padre que es el TD que lo contiene, y nuevamente por el atributo parentNode ahora obtenemos el TR, el padre de los elementos que agregamos dinámicamente, ahora con la función removeChild, mandamos el TR haciendo referencia a la tabla de productos por medio de su id (tablaProductos), y con eso es suficiente para eliminar la fila del producto deseado.

Este es el capítulo final de este pequeño curso básico de javascript, espero le saquen provecho y valga la pena el haberlo hecho.

Ir Capítulo Anterior (9.- Modificación de elementos HTML con Javascript)