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)

8.- La Interfaz Node – Curso Básico de #Javascript #8

La interfaz Node es de la cual todos los Nodos de un documento xml heredan, en este caso cuando utilizamos HTML (XHTML, HTML5) nuestros Nodos son los elementos de la pagina (<a><p><input>), a estos Nodos se le atribuyen ciertas funcionalidades y atributos, los cuales podemos utilizar por medio de javascript, asi que en lo largo de este capitulo cada que hablemos de Nodo estamos hablando de un elemento HTML.

Siendo que estos Nodos heredan de la interfaz Node, podemos aplicar a nuestros elementos de HTML las siguientes funcionalidades (métodos):

MetodoDescripción
appendChild()Agrega un nuevo nodo hijo al final de los nodos hijos del Nodo al que ejecutamos el metodo.
cloneNode()Clona el Nodo
compareDocumentPosition()Compara la colocación de dos nodos en la jerarquía del DOM
getFeature(feature,version)Devuelve un objeto DOM que implementa las APIs especializadas de la función y la versión especificada
getUserData(key)Devuelve el objeto asociado a una tecla en un este nodo. El objeto, primero debe haberse establecido en este nodo llamando setUserData con la misma clave
hasAttributes()Devuelve true si el nodo especificado tiene algún atributo, false en caso contrario
hasChildNodes()Devuelve true si el nodo especificado tiene nodos secundarios, false en caso contrario.
insertBefore()Inserta un Nodo hijo antes del Nodo seleccionado
isDefaultNamespace(URI)Devuelve si el namespaceURI especificado es el valor por defecto
isEqualNode()Comprueba si dos Nodos son iguales
isSameNode()Comprueba si dos Nodos son el mismo Nodo
isSupported()Comprueba si la implementación DOM soporta una función específica y que la función es compatible con el nodo especificado
lookupNamespaceURI()Devuelve el URI de espacio de nombres asociado con el prefijo dado
lookupPrefix()Devuelve el prefijo asociado a un espacio de nombres determinado URI
normalize()Pone todos los nodos de texto debajo de un nodo (incluidos los nodos de atributos) en una forma “normal”, donde sólo la estructura (por ejemplo, elementos, comentarios, instrucciones de procesamiento, secciones CDATA y referencias a entidades) separa los nodos de texto, es decir, no existen nodos de texto adyacentes ni los nodos de texto vacíos
removeChild()Elimina un Nodo hijo en especifico del Nodo en el que utilizamos este método.
replaceChild()Remplaza un nodo Hijo con un nuevo Nodo hijo.
setUserData(key,data,handler)Asocia un objeto a una tecla en un nodo

Cabe mencionar que no todos estos métodos se aplican a todos los elementos, ya que hay elementos que no tienen hijos por ejemplo los tipo <input> o <img> por lo cual ejecutar el método removeChild() a uno de estos elementos es paradójico

Ahora que ya vimos el listado de los métodos que pueden realizarse en javascript a los elementos HTML, veamos una lista de los atributos (propiedades) que podemos obtener o asignarles un valor, y son los siguientes:

AtributoDescripción
attributesContiene los atributos de este Nodo, por ejemplo, tratándose de un input, podriamos utilizar el atributo value o id
baseURIDevuelve el URI de base absoluta de un nodo
childNodesDevuelve un tipo NodeList que contiene todos los Nodos hijos del Nodo con el que se utiliza el atributo
firstChildRegresa el primer Nodo hijo del Nodo con el que se utiliza el atributo
lastChildRegresa el ultimo Nodo hijo del Nodo con el que se utiliza el atributo
localNameDevuelve la parte local del nombre de un nodo
namespaceURIRegresa el namespace (espacio de nombre) URI del Nodo
nextSiblingDevuelve el Nodo inmediato del Nodo al que se utilizo el atributo
nodeNameDevuelve el nombre de un Nodo, dependiendo de su tipo
nodeTypeRegresa el tipo del Nodo
nodeValueEstablece o devuelve el valor de un nodo, dependiendo de su tipo
ownerDocumentDevuelve el elemento raíz (Document Object) para un nodo
parentNodeRegresa el padre del Nodo
prefixEstablece o devuelve el prefijo de espacio de nombres de un nodo
previousSiblingDevuelve el Nodo anterior del Nodo del que utilizamos este atributo
textContentEstablece o devuelve el contenido de texto de un nodo y sus descendientes

Esta lista de atributos cabe recalcar el del nombre attributes que viene siendo los atributos de los elementos HTML, por ejemplo los atributos de un elemento de tipo <img> pueden ser “src”, “style”, “position”, etc.

Para poder seleccionar un Nodo utilizaremos el objeto que vimos el capitulo anterior, el objeto document, veamos un ejemplo:

Código HTML

<img id="imagen" src="https://hdeleon.net/wp-content/uploads/2014/01/cropped-cropped-logo1.jpg" />

<input type="button" value="cambia tamaño" onclick="cambiaTamano()" />

Código Javascript

function cambiaTamano(){
Nodo= document.getElementById("imagen")

//utilizamos el atributo style que a su vez tiene los atributos CSS y asignamos un nuevo width (ancho)
Nodo.style.width="300px";
}

Como podemos ver en el ejemplo utilizamos el objeto document, y uno de sus métodos, getElementById(), con esto, podemos obtener el Nodo deseado en este caso por medio de su Id, y poder utilizar la lista de funcionalidades y atributos anteriormente mostrada, en el código anterior cambiamos el tamaño de una imagen, y si quieren ver como funciona su ejecución den clic aquí.

En este capitulo unimos la funcionalidad de el objeto document, y los Nodos de una pagina web, y los siguientes dos capítulos haremos algo con lo cual se quitaran de todas las dudas (si es que tienen), y podrán ver el potencial de tener estas herramientas a la mano.

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

Ir Capítulo Anterior (7.- El objeto document)