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)

9.- Modificación de elementos HTML con Javascript. – Curso Básico de #Javascript #9

En este capítulo y el siguiente, complementaremos los dos capítulos anteriores (7. El objeto document8.- La interfaz Node), en los cuales analizamos la teoría de dos de las herramientas más utilizadas de javascript que juntas podemos realizar modificaciones dinámicas de nuestra página web.

Para ello vamos realizar una transformación de un elemento input(<input>) por algunos de sus tipos, y esto lo haremos de una manera fácil, y comenzamos por tener el contenido HTML siguiente:

<div>
<select id="comboMagico" onchange="CambiaComponente()">
<option selected="selected" value="TextBox">TextBox</option>
<option value="Button">Button</option>
<option value="CheckBox">CheckBox</option>

</select>
</div>
<div>
<input  type="text" value="Input Magico" id="inputMagico" />
</div>

Tenemos un elemento combobox (<select>) y un elemento input (<input>) los cuales tienen su id para poderlos identificar; el elemento combobox contiene una función que se activa en el evento onchange (como vimos en el capitulo de eventos de este curso) y que se activa cada que cambiamos la opción seleccionada de nuestro combobox.

Lo que haremos a continuación es que al ser cambiada la opción del combobox, nuestro input de la parte de abajo, se transforme en el tipo seleccionado, es decir si seleccionamos la opción Button, nuestro input se transforme en un botón.

Para ello haremos la función que invoca el combobox de nombre CambiaComponente() de la siguiente manera:

function CambiaComponente(){

//utilizando el metodo getElementById de document obtenemos el nodo del combobox
//y con el atributo value obtenemos la opcion seleccionada
opcion=document.getElementById("comboMagico").value

//Hacemos un switch case, dependiendo la opcion seleccionada en el combobox realizamos una transformación.
switch (opcion){

case "TextBox":
document.getElementById("inputMagico").type="text"
break;

case "Button":
document.getElementById("inputMagico").type="button"
break;

case "CheckBox":
document.getElementById("inputMagico").type="checkbox"
break;

}
}

Lo que hacemos con la función es obtener el valor seleccionado por medio del objeto document, la función getElementById y el atributo value, y después analizarla con un switch case para así transformar nuestro input en el valor elegido.

Para ver un ejemplo del código en ejecucion, ahora no pondre un den clic aqui, pueden observarlo abajo y ustedes hacer la prueba moviendo el combobox:

En este capitulo vimos la facilidad de modificar elementos HTML, y transformarlos, esto nos abre miles de posibilidades para realizar acciones dinámicas a nuestras páginas web.

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

Ir Capítulo Anterior (8.- La interfaz Node)

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)

7.- El objeto document – Curso Básico de #Javascript #7

Este capítulo está enfocado a el objeto document, un objeto que nos brinda javascript con el cual podemos hacer referencia a cualquier elemento que contenga nuestra página, poder manipular el elemento, sus atributos y valores, y gracias a esto sacar el potencial de javascript sobre el contenido HTML.

El objeto document hace referencia a todos los elementos de nuestra página web,  es el padre de todos los objetos HTML, y por medio de este podemos hacer referencia a ellos, pero no solo eso, también nos permite agregar nuevos elementos (en el capítulo 10 trata sobre esto). El objeto document se utiliza como un nodo de un grafo (árbol), y es el nodo padre de todos los elementos, funciona como grafo, en el cual podemos desplazar hacia sus hijos una vez seleccionado el padre.

La siguiente lista de métodos y atributos son los que pueden ser utilizados por el objeto document:

Atributo /MétodoDescripción
document.adoptNode(node)Devuelve un nodo adapded de otro documento a este documento.
document.baseURIAtributo que contiene la url de la pagina
document.anchorsObtiene todos los elementos anchors (<a>) de la pagina
document.close()Cierra la ventana actual siempre y cuando esta haya sido abierta por window.open() o document.open()
document.cookieRegresa todas las cookies de la pagina
document.createAttribute()Crea un atributo en el nodo
document.createComment()Crea un comentario en la pagina
document.createDocumentFragment()Crea un fragmento(fragment) de código HTML.
document.createElement()Crea un elemento en la página.
document.createTextNode()Crea un nodo texto.
document.doctypeRegresa la DOCTYPE(Document Type Declaration) asociada al documento
document.documentElementRegresa el mismo document, en si es el contenido de la pagina entero.
document.documentURIAtributo que contiene la ubicación del documento (url de la pagina)
document.domainRegresa el dominio de la pagina
document.formsRegresa una colección que contiene todos los elementos forms de la pagina
document.getElementById()Regresa el nodo de un elemento por su Id
document.getElementsByName()Regresa  todos los elementos por su nombre.
document.getElementsByTagName()Regresa una lista de Nodos que contienen un tag name.
document.headRegresa el nodo head (<head>), del documento
document.imagesRegresa una colección de todas las imagenes de la pagina
document.implementationRegresa la implementación del DOM
document.importNode()Importa un Nodo de otro document. De un iframe por ejemplo.
document.inputEncodingRegresa la codificación del documento, por ejemplo UTF8.
document.lastModifiedRegresa la hora de la última modificación del documento.
document.linksRegresa una colección de todos los links de la pagina.
document.normalize()Remueve Nodos de Texto en blanco, y une los Nodos adyacentes
document.normalizeDocument()Remueve Nodos de Texto en blanco, y une los Nodos adyacentes
document.open()Limpia el documento, para plasmar nuevo contenido HTML
document.readyStateRegresa el Estado de la petición de la pagina
document.referrerDevuelve la dirección URL del documento que ha cargado el documento actual
document.renameNode()Renombra el nodo especifico
document.strictErrorCheckingEstablece o devuelve si la comprobación de errores se hace cumplir o no
document.titleEstablece o devuelve el título del documento
document.URLDevuelve el URL completo del documento
document.write()Escribe expresiones HTML o código JavaScript en un documento
document.writeln()Igual que write (), pero añade un carácter de nueva línea después de cada declaración

Veamos qué es lo que podemos realizar con el objeto document, para ello escribo el siguiente código:

document.title="Nombre del title modificado desde JAVASCRIPT"

De este modo modificamos el titulo de nuestra pagina. Ahora veamos como podemos obtener los elementos de un Tag Name en especifico

Código HTML

<p>parrafo 1</p>
<p>parrafo 2</p>
<p>parrafo 3</p>

Código Javascript

var elementos= document.getElementsByTagName("p");
var cadena="";
for(i=0;i<elementos.length;i++){
	cadena+=elementos[i].innerHTML+","
}

//mostramos el contenido html de los parrafos
alert(cadena)

De esta ultima forma obtenemos los párrafos y su contenido html, y todo a partir del objeto document.

Para ver este código en ejecución den clic aquí.

Ir Capítulo Siguiente (8.- La interfaz Node)

Ir Capítulo Anterior (6.- Eventos)

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

En este capítulo trataremos los eventos en javascript, los cuales por medio de los elementos HTML, podemos invocar y así tener la relación entre los componentes HTML y la funcionalidad de javascript.

Hasta ahora solo hemos visto código javascript sin interacción con los elementos HTML, es momento de ver como se puede ejecutar el código javascript desde un botón, o cuando se carga la pagina, o cuando salimos de ella.

Para comenzar muestro la lista de eventos que pueden ser utilizados por los elementos de HTML y en la misma lista planteo que elementos pueden usar dichos eventos, la lista es la siguiente:

Evento Elementos Acción
onAbortImageEl usuario interrumpe la carga de una imagen
onBlurButton, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, windowEl elemento pierde el foco
onChangeFileUpload, Select, Text, TextareaEl valor de un campo de formulario cambia
onClickTodosSe hace click en un objeto html
onDblClickdocument, LinkSe hace doble click en un objeto html
onDragDropwindowEl usuario arrastra y suelta un objeto en la ventana
onErrorImage, windowLa carga de un documento o imagen produce un error
onFocusButton, Checkbox, FileUpload, Layer, Password, Radio, Reset, Select, Submit, Text, Textarea, windowUna ventana, marco o elemento de formulario recibe el foco
onKeyDowndocument, Image, Link, TextareaEl usuario pulsa una tecla en el elemento
onKeyPressdocument, Image, Link, TextareaEl usuario mantiene pulsada una tecla en el elemento
onKeyUpdocument, Image, Link, TextareaEl usuario libera una tecla en el elemento
onLoaddocument, Image, Link, TextareaEl navegador termina la carga de una ventana
onMouseDownImage, Layer, windowEl usuario pulsa un botón del ratón
onMouseMoveScreenEl usuario mueve el puntero
onMouseOutLayer, LinkEl puntero abandona una área de un elemento
onMouseOverLayer, LinkEl puntero entra en un área de un elemento
onMouseUpButton, document, LinkEl usuario libera un botón del ratón
onMovewindowSe mueve una ventana o un marco
onResetFormEl usuario limpia un formulario
onResizewindowSe cambia el tamaño de una ventana o marco
onSelectText, TextareaSe selecciona el texto del campo texto o área de texto de un formulario
onSubmitFormEl usuario envía un formulario
onUnloadWindowEl usuario abandona una página

Este listado tiene todos los eventos posibles que pueden ejecutarse para activar el código javascript por medio de los elementos html, también contiene los elementos a los que puede aplicarse dicho evento, veamos un ejemplo para ejecutar el evento onclick cuando presionamos un botón, y seria de la siguiente manera:

Código HTML

<input type="button" onclick="holaMundo();" value="hola mundo">

Código Javascript

function holaMundo(){
alert("hola mundo!")
}

De esta manera al presionar en el botón ejecutaríamos la función holaMundo() que escribimos en javascript.

El utilizar eventos nos ayuda a crear la relación entre el código html y el código javascript y poder lograr animaciones, modificaciones dinámicas en el contenido html, validaciones, y cualquier cosa que se nos ocurra para modificar la página en tiempo de ejecución.

Ahora veamos un ultimo ejemplo utilizando el método onload, el cual se activa al cargar un script o una pagina HTML, y de la siguiente forma es como se utiliza:

<!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>Eventos</title>
<script>
function holaMundo(){
alert("hola mundo")
}
</script>
</head>

<body onload="alert('hola amigo')">
<input type="button" onclick="holaMundo()" value="hola mundo" />
</body>
</html>

En el elemento HTML body, el evento onload, ejecuta un mensaje al cargar la pagina.

Para ver el código ejecutándose den clic aquí.

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

Ir Capítulo Anterior (5.- Programación Orientada a Objetos)

5.- Programación Orientada a Objetos (POO) – Curso Básico De #Javascript #5

La programación orientada a objetos, es el paradigma hoy en día mas utilizado en los lenguajes de programación, esto debido a su facilidad de organizar las cosas, y dividir la funcionalidad. Para aquellos que no han escuchado este término, se los explico brevemente (ya que lo explico en un breve curso: curso de Programación Orientada a Objetos en 1o minutos), la programación orientada a objetos (POO) 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 atributos y funcionalidades, por ejemplo un objeto auto, sabemos por sentido común que tiene llantas, tiene volante, tiene ventanas, puertas, a esto le llamamos atributos (variables), los cuales pueden variar de un auto a otro, pero la mayoría de autos deben tener todo esto para ser autos, de igual manera sabemos que un auto camina y frena, y a esto le llamamos funcionalidad la cual se representa por métodos (funciones). Este es un concepto breve y que servirá para el propósito que tenemos en este capítulo, el cual es representar objetos del mundo físico en javascript por medio de la POO(Programación Orientada a Objetos).

Para crear un objeto en javascript necesitamos de lo que en POO, llamamos clase; una clase es el molde para crear el objeto; la clase define que atributos debe tener el objeto  y cuál es su funcionalidad y para ello vamos a ver un ejemplo de cómo representaríamos un Libro en javascript  utilizando la POO, y la clase Libro se hace de la siguiente manera:

//clase Libro
function Libro(nombre,autor){
this.nombre=nombre;
this.autor=autor;
}

Podemos observar que su sintaxis es la misma que la de una función, excepto que dentro tenemos algo nuevo para nosotros, la palabra this, esto indica que dentro de esta función existen dos atributos, los cuales adquieren su valor por los parámetros enviados al invocar la función, estos atributos pueden ser utilizados posteriormente por nuestro objeto creado, pero para facilitar las cosas vamos a un ejemplo de cómo utilizar la clase creada anteriormente, y como acceder a sus datos:

//Objeto LibroTerror creado con la clase Libro
var LibroTerror= new Libro("En las montañas de la locura","Lovecraft");
alert(LibroTerror.nombre);
//esto mostraría en un alert  nombre "En las montañas de la locura"

De esta manera queda claro cómo podemos crear estructuras para plasmar el mundo físico en javascript, pero que pasa con la funcionalidad, también nuestros objetos tienen funcionalidad, para ello vamos a crear una clase biblioteca, a la cual se le agregan libros, y para nuestra ventaja, con un método también podríamos saber que libros hay en la biblioteca(sin estar viendo en todos los libreros de esta, ¡bendita programación!), para ello veamos el siguiente ejemplo:

//clase Biblioteca
function Biblioteca(nombre){
this.nombre=nombre
//atributo arreglo para guardar los libros
this.Libros= new Array();
//metodo que agrega libros a nuestra biblioteca
this.addLibro=function addLibro(libro){
this.Libros.push(libro)
}

//método que muestra todos los libros utilizando un foreach en el arreglo Libros de esta clase
this.muestraTodosLosLibros=function muestraTodosLosLibros(){
var cadenaLibros="";
this.Libros.forEach(function(libro){
cadenaLibros+=libro.nombre+"n";
})
//regresamos los nombres de los libros concatenados
return cadenaLibros;
}
}

Ahora vemos que dentro de una función (que utilizamos como clase), existen otras funciones, estas funciones pueden ser llamadas por el objeto, también en una clase de javascript podemos tener arreglos, y a estos agregarle objetos los cuales nosotros creamos con anterioridad, y si somos cuidadosos, podemos observar que el método muestraTodosLosLibros() utiliza el forEach del capítulo anterior.

Pasemos a la parte divertida, ver como se utiliza la clase Biblioteca, para ello, pondré el código completo, el cual contiene comentarios parte por parte, pueden copiar y pegar en un archivo de texto con extensión html y abrirlo en un navegador, el código es el siguiente:


//clase Libro
function Libro(nombre,autor){
this.nombre=nombre;
this.autor=autor;
}

//clase Biblioteca
function Biblioteca(nombre){
this.nombre=nombre
//atributo arreglo para guardar los libros
this.Libros= new Array();
//metodo que agrega libros a nuestra biblioteca
this.addLibro=function addLibro(libro){
this.Libros.push(libro)
}

//metodo que muestra todos los libros utilizando un foreach en el arreglo Libros de esta clase
this.muestraTodosLosLibros=function muestraTodosLosLibros(){
var cadenaLibros="";
this.Libros.forEach(function(libro){
cadenaLibros+=libro.nombre+"n";
})
//regresamos los nombres de los libros concatenados
return cadenaLibros;
}
}

//creamos libros para nuestra biblioteca
var LibroTerror1= new Libro("En las montañas de la locura","Lovecraft");
var LibroTerror2= new Libro("Llamada del Cthulhu","Lovecraft");
var LibroNegro1= new Libro("El Psicoanalista","John Katzenbach");

//creamos un objeto de tipo Biblioteca
var BibliotecaPublica = new Biblioteca("Biblioteca Publica");

//Agregamos los libros a la biblioteca por medio del metodo addLibro()
BibliotecaPublica.addLibro(LibroTerror1);
BibliotecaPublica.addLibro(LibroTerror2)
BibliotecaPublica.addLibro(LibroNegro1)

//invocamos el metodo muestraTodosLosLibros del objeto Biblioteca
alert(BibliotecaPublica.muestraTodosLosLibros())

Para ver este código en acción den clic aquí.

En este capítulo vimos como crear clases para ser moldes de objetos, también vimos como dentro de nuestras clases podemos agregar atributos simples y complejos (arreglos), otra cosa que resalta es el poder poner funcionalidades a nuestros objetos, y de esta manera organizar nuestro código, de una manera elegante y formal.

Ir Capítulo Siguiente (6.- Eventos)

Ir Capítulo Anterior (4.- Arreglos)

4.- Arreglos – Curso Básico de #Javascript #4

En este capítulo vamos a ver que son y cómo  funcionan los arreglos en javascript.

Un arreglo en los lenguajes de programación es una colección de elementos los cuales se encuentran en memoria. Un ejemplo de arreglo son los números del 1 al 100, imaginemos que queremos guardarlos en una variable, para ello utilizamos un arreglo y en este guardamos todos los elementos.

Los arreglos pueden ser bidimensionales, tridimensionales etc, es decir se puede guardar un arreglo en un mismo arreglo. En javascript gracias a su flexibilidad podemos guardar cualquier cosa, desde enteros, caracteres, cadenas, decimales, objetos o funciones.

Para crear un arreglo en javascript se puede hacer de las siguientes tres maneras:

//Forma clasica, NO RECOMENDADA
var arreglo1= new Array();
arreglo1[0]="sopa";
arreglo[1]="pozole";
arreglo[2]="pastel";

//Forma Moderna
var arreglo2=["sopa","pozole","pastel"]

//Forma Orientada a Objetos
var arreglo3=new Array();
arreglo3.push("sopa");
arreglo3.push("pozole");
arreglo3.push("pastel");

Estas son las 3 formas de crear un arreglo; la primera forma no es recomendada ya que podemos hacer arreglos inconsistentes, los cuales al utilizar por ejemplo el método length (nos regresa el total de elementos de un arreglo, utilizándolo en arreglos), nosotros podemos agregar elementos en posiciones sin secuencia y el método no nos regresaría la longitud del arreglo bien, veamos un ejemplo:

var arreglo1= new Array();
arreglo1[0]="sopa";
arreglo1[1]="pozole";
arreglo1[2]="pastel";
arreglo1[5]="papa";
alert(arreglo1.length)

En este ejemplo si lo ejecutamos el método length nos daría 6, lo cual no es verdad, no es el número de elementos de nuestro arreglo, es por ello que no se recomienda usar esa manera de agregar elementos a los arreglos.

La forma moderna es la más utilizada, siempre y cuando nuestros elementos sean nativos (no funciones o objetos), ya que si no son nativos nuestro código se vuelve robusto e ilegible, para resolverlo podemos usar la forma por el método push(), el cual agrega un elemento al final del arreglo.

Para recorrer un arreglo se puede hacer mediante una estructura de control for por ejemplo:

var arreglo=["sopa","pozole","pastel"]
for(i=0;i<arreglo.length;i++){
  alert(arreglo[i]);
}

Pero de igual forma hay dos maneras mas formales de hacerlo y son las siguientes:

var arreglo=["sopa","pozole","pastel"]
for(var elemento in arreglo){
	alert(arreglo1[elemento])
}

Esta manera que parece un foreach es mas formal pero existe una mejor manera de recorrer un arreglo y es la siguiente:

var arreglo=["sopa","pozole","pastel"]
arreglo.forEach(function(entry) {
			alert(entry);
		});

Esta ultima forma es la mas adecuada, y funciona poniendo el nombre del arreglo e invocando el método forEach de javascript el cual recibe un atributo tipo función (como vimos en el capitulo anterior), en esta función ponemos las instrucciones que deseemos aplicar a el elemento en el cual va el recorrido.

Ir al Capitulo Siguiente (5.- Programación Orientada a Objetos POO ).

Ir al  Capitulo Anterior (3.- Estructuras de Control).

3.- Estructuras de Control – Curso Básico de #Javascript #3

Las estructuras de control en javascript, al igual que la mayoría de lenguajes de programación, sirven para manipular el flujo de ejecución de las instrucciones en un programa.

Las estructuras de control se dividen en dos, las estructuras de selección, y las estructuras iterativas.

Estructuras de selección en javascript

Estructura If [Else]

La estructura if sirve para evaluar una condición y en caso de que esta se cumpla se ejecuta lo que está dentro de esta. Esta estructura puede ir acompañada de su falsedad, es decir en caso de que no se cumpla esta condición se debe hacer lo otro y para esto se utiliza la palabra “else”.

Un ejemplo de su sintaxis es la siguiente:

if(opcion==1){
alert("La opción es 1")
}else if(opcion ==2){
alert("La opción es 2")
}else{
alert("La opción no es ni 1 ni 2")
}

Como podemos observar, su sintaxis es la palabra if seguida de una condición entre paréntesis (), seguido de llaves de abertura y cerradura {} (estos son obligatorios cuando las sentencias del if son más de una línea); en el ejemplo anterior, muestro que la palabra “else” puede tener un nuevo “if”, esto para cuando tenemos que evaluar distintas condiciones. Esto se vuelve tedioso cuando son más de 3 condiciones pero para eso existe la estructura de control switch.

Estructura Switch

La estructura switch sirve al igual que la estructura de control if, para evaluar una condición, y si esta se cumple ejecutar el código interno, con la diferencia que su sintaxis es mas estética y menos enredosa que el tener muchos if anidados. Para ello escribo un ejemplo de switch a continuación:

switch(opcion) {
case 1:
alert("La opción es 1")
break;
case 2:
alert("La opción es 2")
break;
default:
alert("La opción no es ni 1 ni 2")
}

Si miramos el código vemos la sintaxis que es simplemente la palabra switch seguida de la opción o variable a evaluar entre paréntesis, después la llave de abertura y cerradura {} y dentro de esta las distintas opciones a evaluar las cuales se ponen con la palabra case mas el valor que debe equivaler nuestra opción y dos puntos (:) seguido de esto tenemos las sentencias a ejecutar; cada opción contiene un break el cual rompe el switch, si no ponemos el break, seguiría la ejecución evaluando las siguientes opciones, y para finalizar podemos poner opcionalmente una opción default que sería como el else del if, se ejecuta cuando no entra en ninguna opción escrita en los case.

Estructuras iterativas en javascript

Estructura While

La estructura de control while, se utiliza cuando deseamos ejecutar un conjunto de sentencias varias veces, siempre y cuando su condición sea verdadera, un ejemplo de su utilización es el siguiente:

var i=1;
while(i<=10){
alert("va en el número: "+i);
i++;
}

Su sintaxis es la palabra while seguida de una condición a realizarse encerrada dicha condición entre paréntesis, en seguida llaves de apertura y cerradura {} y dentro de estas llaves las sentencias que deseamos ejecutar (las llaves son obligatorias cuando es mas de una sentencia a ejecutar).

Estructura for

La estructura for al igual que la estructura while sirve para repetir un número de veces la ejecución de un grupo de sentencias, pero con la diferencia que tenemos el control de un una variable dentro de su misma sintaxis la cual indica el inicio y final del ciclo (bucle), por ejemplo, en el código anterior de la estructura while usamos una variable de nombre i para realizar el control de las veces que ejecutamos las sentencias, ese mismo código realizado con la estructura for seria de la siguiente manera:

for(i=1<=10;i++){
alert("va en el número: "+i);
}

La sintaxis de la estructura for, comienza por la palabra for, seguido de paréntesis los cuales encierran 3 secciones separadas por punto y coma (;), la primer sección indica la creación de una variable y su valor inicial, la segunda sección indica la condición que debe cumplirse para seguir el ciclo, y la tercer sección indica que hace con la variable de la primer sección, al finalizar la ejecución de las sentencias.

Existen también una estructura de control foreach en javascript, pero esta la veremos mas adelante, en el siguiente capitulo de nombre Arreglos.

Ir al Capitulo Siguiente (4.- Arreglos ).

Ir al  Capitulo Anterior (2.- Variables y Funciones).

2.- Variables y Funciones – Curso Básico de #javascript #2

En este capítulo aprenderemos la forma en que se hacen las variables y las funciones en javascript.

Al igual que en la mayoría de lenguajes de programación, en javascript, podemos hacer uso de variables y funciones, pero con ciertas curiosidades que lo hacen flexible, tan flexible, que podemos guardar una función en una variable; es una de las fuertes ventajas que tenemos con javascript, pero antes vamos a ver que son las variables.

Variables

Las variables está formada por un espacio de memoria y un identificar, en este espacio de memoria podemos guardar información, y para obtener esta información le ponemos un identificador.

Javascript es un lenguaje no tipado, es decir es un lenguaje flexible con los tipos de datos, una variable en javascript puede guardar un numero como un carácter, un objeto o una función sin la necesidad de darle un tipo de dato al iniciar. Esta flexibilidad nos permite programar más rápidamente, pero, no por ello es que sea la forma más formal de hacer las cosas, ya que como podemos hacer cosas rápidamente, podemos hacer cosas mal, esto lo podemos notar al momento de realizar operaciones matemáticas y cosas de modelo de negocio.

Primero vamos a ver su sintaxis viendo el siguiente código:

var variable="";
var variable19891=212121;
var $_1212asas=1.111;
unaVariableSinVarAlinicio=":)"

Una variable en javascript, debe comenzar por un carácter letra (aeiou…abc…) o guion bajo (_) o el símbolo de moneda ($), seguido por estos mismos caracteres o números; una variable no puede tener un numero al inicio, solo los caracteres antes descritos. Una variable en javascript puede tener la palabra var al inicio de esta o no puede tenerla, por estándar es mejor ponerla, aunque no es necesaria. También podemos observar que no en todas las lineas esta el punto y coma al final (;) este no es necesario solo se utiliza por estándar o por estética.

Ahora vamos a ver lo que son las funciones.

Funciones

Una función es un grupo de instrucciones que realizan un proceso. Las funciones pueden recibir datos de entrada, pueden dar datos de salida, o simplemente no regresar ni recibir nada. Veamos tres ejemplos de funcion en javascript:

function nombreFuncion(){

}
function funcionDatosDeEntrada(variable){

}
function $_f1(){
  return 1;
}

Como podemos observar la sintaxis en javascript para nombrar una función es la misma que la de una variable y para crear una función esta inicia por la palabra function seguida de su nombre, paréntesis, y si es que recibe datos de entrada entre estos paréntesis los nombramos (con la sintaxis de variable, ya que son variables), seguido de los paréntesis van llave de abertura y cerradura ({}) y dentro de estas llaves el código de la función; si es que regresa algún dato de salida, dentro de las llaves ({}) la palabra return seguida del valor.

Ejercicio

Ya que vimos la teoría, vamos a comenzar con un pequeño ejercicio en el cual veremos uno de los potenciales de javascript, como guardar funciones en las variables.

Creamos un archivo de nombre funcionEnVariable.html y en el pegamos el siguiente código:

<!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>Funcion en Variable</title>

    	<script>
			//funcion que muestra un mensaje
			function muestraMensaje(funcion){

				alert(funcion());
			}
			//en esta variable guardamos una funcion, asi de simple.
			var variableFuncion=function(){ return "hola mundo";};

                        //ejecutamos la función muestraMensaje enviando la variable que guarda nuestra funcion como parametro
			muestraMensaje(variableFuncion)

        </script>
    </head>

    <body>
    </body>
</html>

Ejecutamos nuestro archivo con el navegador que sea de su agrado, y veremos que se despliegan un mensaje que dice “hola mundo”. Como podemos observar en el código javascript, lo que tenemos es una función llamada muestraMensaje() que recibe un parámetro. En la linea siguiente creamos una variable de nombre variableFuncion pero a esta le asignamos un valor de función anónima (estas funciones se llaman así por que no tienen nombre, y sirven para hacer cosas demasiado dinámicas, un ejemplo son los callbacks de jquery). En la linea siguiente ejecutamos la función muestraMensaje() enviando como parámetro nuestra variable, y ya dentro de esta función utilizamos la función de javascript alert() la cual muestra un mensaje en una ventana de alerta; pero si observamos bien la función anónima se ejecuta hasta dentro la función muestraMensaje(), de esta manera estamos viendo como javascript permite guardar funciones dentro de variables y de igual forma, enviarlas por parámetro a una segunda función y ejecutarse dentro de esta.

Mas adelante veremos mas potencial de javascript respecto a variables y funciones, y una manera simple de comprender la flexibilidad con la que cuenta este lenguaje de programación.

Para ver el código ejecutándose den clic aquí.

Ir al Capitulo Siguiente (3.- Estructuras de Control).

Ir al  Capitulo Anterior (1.- Introducción a Javascript).

1.- Introducción a Javascript – Curso Básico de #Javascript #1

Javascript es un lenguaje de programación interpretado, es decir, que no ocupa compilarse, es un lenguaje que a pesar no ser Orientado a Objetos cien por ciento, es un potente lenguaje con el cual podemos realizar cosas grandiosas en los sistemas o páginas web.

El lenguaje es fácil de utilizar, ya que es débilmente tipado, sus variables no tienen tipo inmediato, por lo cual podemos crear scripts rápidamente.

Una de las ventajas en el aprendizaje de javascript es que no se necesita de instalar compiladores, ni configurar nada, basta con tener un navegador web y un editor de texto y comenzar a codificar.

Para ello podemos utilizar cualquier navegador para verificar las cosas que vamos ir haciendo, y a su vez son libres de tomar cualquier editor para ello, pueden utilizar desde block de notas, aptana, dreamweaver, sublime etc etc. Este no es ningún problema ya que en este curso solo veremos javascript sin ir más allá a un lenguaje de servidor (php, asp, jsp).

Comenzaremos con lo primero, como comienzo a poner código de javascript. Crearemos un archivo de nombre introduccion.html que contendrá el siguiente código:

<!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>introducción</title>

    </head>

    <body>
    </body>
</html>

Ahora para comenzar a introducir código de javascript vamos a poner lo siguiente dentro de la etiqueta <head>:


<script>
alert("Hola mundo")

</script>

Para que nuestro script completo quede así:

<!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>introducción</title>
 
       <script>
        document.writeln("Hola Mundo!")
       </script>
 
    </head>
 
    <body>
    </body>
</html>

Ahora damos doble clic a nuestro archivo que creamos, en caso de que ningún navegador lo abra podemos abrir primero el navegador y después arrastrar el archivo a este, eso será suficiente para ejecutarlo.

Cuando el navegador abre el script, nos mostrara algo parecido a esto:

Lo que en realidad estamos haciendo, es especificarle al navegador mediante las etiquetas <script></script> que lo que este dentro de ellas es código javascript, y lo que hace document.writeln() es escribir el texto en el navegador (después veremos más sobre el objeto document).

Existen otras 2 maneras para ejecutar código javascript, una la veremos más adelante en el capítulo de eventos, pero por ahora veamos la otra manera que es quizá la más utilizada y consiste en hacer un archivo con extensión .js y ahí poner nuestro código javascript, y después hacer referencia a este archivo desde nuestro script.

Para ello creamos un archivo de nombre pato.js en la misma ruta que nuestro archivo antes creado.

En este archivo agregamos el siguiente código:

document.writeln("Hola pato");

A continuación vamos a el archivo introducción.js y agregamos el siguiente código enseguida del anterior (ósea entre las etiquetas <head></head> pero después del anterior código creado):

<script src="pato.js" language="javascript" type="application/javascript"></script>

Y nos debe quedar nuestro archivo introducción.html así:

<!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>introducción</title>
		<script>
        document.writeln("Hola Mundo!")
        </script>
    	<script src="pato.js" language="javascript" type="application/javascript"></script>
    </head>

    <body>
    </body>
</html>

Ejecutamos nuestro archivo introducción.js en el navegador (o arrastramos) y debemos obtener lo siguiente:

hola mundo hola pato

De esta manera utilizando la etiqueta <script> pero especificando mediante su atributo src un archivo de extención js (.js) asignamos todo el código de dicho archivo a nuestro script, de esta manera podemos organizar mejor nuestro código, y no tener todo el código en un archivo. Los otros atributos de la etiqueta <script> (type y language) se utilizan por estándar, ya que al nacer javascript  (por el año de 1995) existían otros lenguajes parecidos y el navegador necesitaba saber cual es el que interpretaría, aunque hoy en día javascript ya tomo dominio total.

Para ver el código en ejecución den clic aquí.

Ir al Capitulo Siguiente (2.- Variables y Funciones).