Introduccion a JSON – Parte I

Hola, mi cuenta de gmail ha sido vulnerada, por lo que las imágenes no se ven, pero esta entrada ya la he replicado en http://www.notas-programacion.com/2014/10/introduccion-a-json-parte-i/, el contenido de este blog se estará migrando progresivamente allá.

JavaScript Object NotationBreve introducción a esta Tecnología de intercambio de Datos. En esta ocasion quiero escribir unas breves notas acerca de JSON, aunque ya hay mucha teoria por la red con respecto a este tema he decidido dar mi pequeño aporte, ‘mi teoria’. Siempre habia querido saber para que diantres se usa esto del JSON, pero siempre por desidia o pereza no me decidía a investigar, antier me desidi y aquí están los resultados que quiero compartir.

Como dijo Jack El Destripador, vayamos por partes…

¿Que es JSON?

Primero que todo empecemos por definir que es JSON. JSON es la abreviatura/acrónimo de JavaScript Object Notation, como puedes ver en su definicion literal JSON utiliza el código JavaScript como modelo de datos. JSON es una forma de enviar/recibir, vaya intercambiar datos, por lo general entre un cliente y un servidor. XML nacio primero y es otra manera de hacerlo, JSON aparecio despues como otra alternativa a este sistema de envío y recepción de datos.

Pero, ¿Porque utilizar un sistema de intercambio de Datos?. JSON se emplea habitualmente en entornos donde la cantidad de datos que fluyen entre cliente y servidor es de vital importancia. Segun he leido Google y Yahoo lo utilizan a diestra y siniestra en muchos de sus servicios, como los de mensajeria que ya conocemos, Gmail y Yahoo Mail y tambien lo utilizan las redes sociales twitter y facebook.

Obviamente, si intentas utilizar JSON en un entorno donde el flujo de datos es pequeño no notaras la diferencia ¿Ya te imaginas porque esos grandes sitios web lo utilizan?. Tienen millones de usuarios y el tema de intercambio de datos entre sus servidores y los navegadores de los usuarios es criticoo.

La lista de lenguajes que soportan JSON incluye ActionScript, C, C++, C#, ColdFusion, Common Lisp, Delphi, E, Eiffel, Java, JavaScript, ML, Objective-C, Objective CAML, Perl, PHP, Python, Rebol, Ruby, Lua y Visual FoxPro.

En esta serie de ejemplos de JSON solo veremos un poco de JSON con Javascript y PHP, pues necesitaria toda una vida para explicar como se usa en todos los lenguajes mencionados.

Notacion y ejemplos JSON

Voi a dar por hecho que si estas leyendo este tema es porque ya tienes los fundamentos basicos de Javascript. Para empezar vamos repasar un poco sobre como se definen los arrays y objetos literales en JavaScript. Los temas que veremos a continuacion son:

  • Los arreglos literales
  • Los objetos literales
  • Los objetos JSON

Veremos estos temas debido a que utilizaremos esos fundamentos para desarrollar el tema de los Objetos JSON. OJO!: Aqui en el blog solo mostrare el codigo JavaScript, pero si quieres ver el codigo funcionando te dejo un link para que lo pruebes ejecutandose en un documento HTML de mi sitio web. Si entras a ver el ejemplo, recuerda que dependiendo del navegador que uses, por lo general puedes ver el codigo fuente de una pagina web dando click derecho con el raton y elegir la opcion Ver codigo fuente.

Los arreglos literales

La notacion literal es una forma de declaracion de arreglos que se introdujo a partir de JavaScript 1.2. Los arrays literales se definen con la siguiente sintaxis:

var miArray = [ 'item1',2,'item3',true ];

Observa como para declarar un arreglo literal se encierra entre corchetes a sus elementos y se separan por comas. Los elementos de un array literal pueden ser cadenas, numeros (enteros o decimales), valores booleanos, un arreglo literal, el valor null o incluso expresiones.

A continuacion dos ejemplos de este tipo de arreglos:

	<script language="javascript" type="text/javascript">
//EJEMPLO 1
			//Array con items de texto
			var arrayColores = [ 'Azul', 'Verde', 'blanco', 'Rosa' ];			
			//Mostrar los valores
			alert( 'Los colores son: '+arrayColores[0]+', '+arrayColores[1]+', '+arrayColores[2] );

//EJEMPLO 2			
			//Array con items de texto y numeros
			var arrayCompra = [ 'Papas adobadas 30 gr.', 8.50, true, 2, 'Axel Hernandez' ];		
			//Mostrar los valores
			var detalleCompra = 'Detalle de compra:\n';
			detalleCompra += 'Producto: '+arrayCompra[0]+'\n';
			detalleCompra += 'Precio: '+arrayCompra[1]+'\n';
			detalleCompra += 'Tiene descuento: '+arrayCompra[2]+'\n';
			detalleCompra += 'Valor descuento: '+arrayCompra[3]+'\n';
			detalleCompra += 'Empleado que atendio: '+arrayCompra[4]+'\n';
			detalleCompra += 'Importe a pagar: '+(arrayCompra[1]-arrayCompra[3]);
			alert( detalleCompra );					
	</script>

Si deseas ver funcionando el ejemplo anterior da click aqui.

En el codigo anterior hay dos ejemplos; uno en donde se define un array unicamente con elementos de tipo texto (linea 4) y el segundo ejemplo define un array literal con elementos de diferentes tipos de datos (linea 10). Una vez declarado, un arreglo literal se comporta como un arreglo normal, es por eso que para acceder a los elementos se hace por medio de numeros de indice, ej. arrayColores[0] contiene el primer color.

Ahora vamos a ver como se definen los arreglos literales de mas de una dimension, para que esto siga siendo sencillo solo mostrare arreglos con dos y tres dimensiones, a continuacion el ejemplo:

	<script language="javascript" type="text/javascript">
			//Dos dimensiones
			var paises = [["Estados unidos", "México", "Colombia"], "China", "Irak"];
			//Mostrar los valores
			var strPaises = 'Arreglo bidimensional, Los paises son:\n';
			strPaises += 'paises[0][0]: '+paises[0][0]+'\n';		//Estados unidos
			strPaises += 'paises[0][1] '+paises[0][1]+'\n';		//México
			strPaises += 'paises[1]: '+paises[1];		//China
			alert( strPaises );	
			
			
			//Tres dimensiones
			paises = [["Estados unidos", ["Distrito Federal","Veracruz","Queretaro","..."], "Colombia"], "China", "Irak"];
			//Mostrar los valores
			strPaises = 'Arreglo dimension 3, Los paises son:\n';
			strPaises += 'paises[0][0]: '+paises[0][0]+'\n';		//Estados unidos
			strPaises += 'paises[0][1][0]: '+paises[0][1][0]+'\n';		//Distrito Federal
			strPaises += 'paises[0][1][1]: '+paises[0][1][1]+'\n';	//Veracruz
			strPaises += 'paises[0][1]: '+paises[0][2]+'\n';		//Colombia
			strPaises += 'paises[1]: '+paises[1];		//China
			alert( strPaises );		
	</script>

Si deseas ver funcionando el ejemplo anterior da click aqui.

Los objetos literales

Ahora veamos como se definen los objetos literales de javascript, con un ejemplo…

	<script language="javascript" type="text/javascript">
//EJEMPLO 1: Objeto literal con items de texto
			var nomVariableObjeto = {
				'nombre':'Gonzalo',
				'apellido':'Silverio',
				'matricula':"05ab77",
				'carrera':"I.S.C."
			};
			var detalleAlumno = "Datos del alumno:\n"
			detalleAlumno += 'Matricula: '+nomVariableObjeto.matricula+'\n';
			detalleAlumno += 'Nombre: '+nomVariableObjeto.nombre+' '+nomVariableObjeto.apellido+'\n';
			detalleAlumno += 'Carrera: '+nomVariableObjeto.carrera;
			alert(detalleAlumno);

			//Mostrar nuevamente los datos pero por medio de indices
			detalleAlumno = "Datos del alumno:\n"
			detalleAlumno += 'Matricula: '+nomVariableObjeto['matricula']+'\n';
			detalleAlumno += 'Nombre: '+nomVariableObjeto['nombre']+' '+nomVariableObjeto['apellido']+'\n';
			detalleAlumno += 'Carrera: '+nomVariableObjeto['carrera'];
			alert(detalleAlumno);


//EJEMPLO 2: Objeto literal con diferentes tipos de items
			var varObjetoAlumno = {
				'matricula':"05ab77",
				'nombre':'Gonzalo Silverio',
				'materias':['Matematicas discretas','Fisica II','Metodos numericos',
				'becado':true,
				'promedio':8.53
			};
			var strMaterias='';
			var i=0
			for(i=0;i<(varObjetoAlumno.materias.length-1); i++)
				strMaterias += varObjetoAlumno.materias[i]+', ';

			strMaterias += varObjetoAlumno.materias[i];

			detalleAlumno = "Datos del alumno:\n";
			detalleAlumno += 'Matricula: '+varObjetoAlumno.matricula+'\n';
			detalleAlumno += 'Nombre: '+varObjetoAlumno.nombre+'\n';
			detalleAlumno += 'Materias: '+strMaterias+'\n';
			detalleAlumno += 'Esta becado: '+varObjetoAlumno.becado+'\n';
			detalleAlumno += 'Promedio general: '+varObjetoAlumno.promedio;
			alert(detalleAlumno);
	</script>

He creado una pagina que muestra los ejemplos anteriores, si deseas verlo da click aqui.

La sintaxis para crear los objetos literales de Javascript es la siguiente;
var miObjeto = { ‘propiedad1’: valor1, ‘propiedad2’: valor2 }

donde propiedad es el nombre de una propiedad que estamos creando en el nuevo objeto y valor es el valor que estamos asignando a la propiedad. Los valores que pueden asignarse a una propiedad son: un numero (entero o decimal), una cadena de texto, un valor booleano (true o false), null, un array literal o incluso una funcion anonima.

Tambien puedes ver en el ejemplo anterior que para acceder a las propiedades de un objeto lo podemos hacer directamente por medio del nombre ó por medio de indices. Estas son las dos sintaxis:

//Sintaxis 1
	nomVariableObjeto.nombrePropiedad
//Sintaxis 2
	nomVariableObjeto['nombrePropiedad']

Observa como en el EJEMPLO 1 accedemos a las propiedades del objeto por medio de la sintaxis 2. Y en el EJEMPLO 2 por medio la sintaxis 1.

Bien, veamos otro ejemplo mas ya para terminar con el tema de los Objetos literales de Javascript. En el ejemplo que mostrare a continuacion se observa como incluso es posible podemos asignar una funcion anonima a una propiedad del objeto JSON.

<script language="javascript" type="text/javascript">
    //Definimos un pequeño objeto Javascript llamado persona
    //Con una funcion anonima
    var persona = {
      "nombre": "Gonzalo",
      "apellidos": "Silverio Silverio",
      "carrera": "Ingenieria en sistemas",
      "saludar": function(aquien) {
	var mensaje=  "Que tal! ¿Como estás " + aquien + "?\n Yo soy " + this.nombre + " "+this.apellidos+
	" y estudie "+this.carrera+", hasta pronto.\n\nSigue visitandome!";				
        alert(mensaje);
      }
    };
      var miObjeto = eval(persona);
      alert("El nombre es: " + miObjeto.nombre +
    		  "\nEl apellido es: " + miObjeto.apellidos +
    		  "\nLa carrera es: " + miObjeto.carrera);
      miObjeto.saludar('Xavier');
</script>

si deseas ver el ejemplo anterior ejecutandose da click aqui.

Si quisieramos agregar/modificar una propiedad a un objeto que ya existe entonces los hariamos con la siguiente sintaxis:
objeto.nom_propiedad = valor

Donde nom_propiedad es el nombre de una nueva propiedad (o de una propiedad ya existente en el objeto que deseamos modificar) y valor es el nuevo valor que deseamos asignarle.

Ahora que ya sabes como declarar arreglos y objetos literales te resultara mas facil crear los objetos JSON…

Los objetos JSON

Deciamos que JSON es un formato ligero de intercambio de datos. Un documento JSON es un subconjunto de JavaScript, y para esto se basa principalmente en dos estructuras:

  • Una coleccion de pares propiedad:valor (objetos)
  • Los arreglos literales

Como vimos anteriormente los objetos comienzan con { y terminan con } en medio estan los pares propiedad:valor separados por comas. Veamos el diagrama sintactico de un objeto JSON:
Sintaxis de objeto JSON

Donde propiedad es el nombre de una propiedad del objeto JSON y valor pueden ser cadenas, objetos, numeros (enteros o decimales), valores booleanos (true o false), un arreglo literal o el valor null. Observa como es posible anidar objetos dentro de un objeto.

Si te fijas mencione que el valor de una propiedad puede ser un arreglo, debes saber que tambien es posible anidar arreglos dentro de un arreglo. Un arreglo tiene la siguiente sintaxis:
Sintaxis de arreglo JSON
De igual manera valor pueden ser cadenas, objetos, numeros (enteros o decimales), valores booleanos (true o false), un arreglo literal o el valor null. Aqui esta la informacion mas completa (de hecho, de ahi me base para mostrarte los diagramas sintacticos).

Por lo general los documentos JSON son obtenidos del servidor a travez de AJAX, pero nosotros primeramente veremos dos ejemplos donde el documento JSON lo escribiremos directamente en un archivo HTML, lo convertiremos a objeto y desplegaremos sus valores ahi mismo. Posteriormente en otro ejemplo obtendremos un documento JSON desde el servidor a travez de Ajax (con ayuda de JQuery), lo convertiremos a objeto Javascript y mostraremos su contenido al usuario.

Asi poco a poco iremos incrementando la complejidad de los ejemplos hasta intercambiar documentos JSON con datos provenientes de una base de datos (es lo interesante y realmente util).

A continuacion veremos varios ejemplos donde crearemos varios documentos JSON, te recomiendo que los pruebes con esta herramienta online, la cual nos permite comprobar si la sintaxis esta correcta. A mi parecer es una excelente herramienta para probar la sintaxis de JSON, deberias agregarla a tus marcadores (borra el fb).

Ejemplo, creamos un documento JSON, asi:

	{
	 "nombre": "Gonzalo",
	 "apellidos": "Silverio Silverio",
	 "carrera": "Ingenieria en sistemas"
	}

El documento anterior contiene 3 campos y sus respectivos valores. Como puedes ver la sintaxis de un documento JSON difiere de manera muy leve con la sintaxis para definir un objeto literal de Javascript:
{ ‘propiedad1’: valor1, ‘propiedad2’: valor2, … }

Bien, ahora veamos un documento JSON mas elaborado:

 {
		"desarrollador" : "Xavier Landa",
		"depto" : "Sistemas (SI)",
		"email" : "ej_email@dominio.com",
		"genero" : "h",
		"direccion":["Benito Juarez",3,"Lomas de Chapultepec","D.F."],
		"tel" : "123000987",
		"proyectos":[
			{
				"codigo" : 	"xs2012",
				"nombre" : 	"XenixSoft",
				"url"		 : 	"https://gonzasilve.wordpress.com",
				"prioridad" : 1
			},
			{
				"codigo" : 	"msw2012",
				"nombre" :		"Mantenimiento website oficial",
				"url"		 :  "http://shalo.site50.net",
				"prioridad" : 2
			},
			{
				"codigo" : 	"plg2011",
				"nombre" :		"Plugin DB Converter",
				"url"		 :  "http://gonzasilve.260mb.com",
				"prioridad" : 0
			}
		]
	}

El documento anterior incluye varias cosas interesantes; podemos ver que se trata de un solo objeto principal con 7 campos (desarrollador,depto,email,genero,genero,tel,proyectos). El campo direccion es un arreglo con los datos de la direccion de una persona (Nombre de la calle, numero, colonia, ciudad) y el campo proyectos es un arreglo de 3 objetos, en este caso cada objeto (un proyecto) tiene 4 campos. Pero pudiera darse el caso de que algun objeto del arreglo tuviera solo 3, menos o mas campos. Por ejemplo, podria ser que un proyecto no tenga una direccion web. JSON no tiene la limitacion de que el numero de campos en un arreglo de objetos sea el mismo.

¿Ves como puedes crear documentos JSON tan flexibles como los necesites (o como tengas de imaginacion)?

Ahora veamos como se puede convertir un documento JSON en un objeto Javascript, con un ejemplo (con el primer documento JSON para que lo entiendas mas facilmente):

	<script language="javascript" type="text/javascript">
	//Definimos un pequeño documento JSON en una variable
	var cadenaJSON = "{"+
		"'nombre' : 'Gonzalo',"+
		"'apellidos' : 'Silverio Silverio',"+
		"'carrera' : 'Ingenieria en sistemas'"+
	"}";
	//Convertir el documento JSON a Objeto Javascript
	var objCadena = eval('(' + cadenaJSON + ')');
	
	//Mostrar los valores del objeto JSON al usuario
	var str_Nombre = "Nombre: "+objCadena.nombre+"\n";
	var str_Apellidos = "Apellidos: "+objCadena.apellidos+"\n";
	var str_Carrera = "Carrera: "+objCadena.carrera+"\n";
	alert(str_Nombre+str_Apellidos+str_Carrera);
	</script>

si deseas ver el ejemplo anterior ejecutandose da click aqui (no olvides ver el codigo fuente).

Observa como se usa la funcion eval; e colocado “( )” alrededor del documento JSON, esto es muy importante, no lo olvides. Otra cosa interesante del ejemplo es que una vez que el documento JSON es convertido a objeto JSON, éste tiene todas las propiedades de los objetos vistas anteriormente.

Si entraste al ejemplo y tienes dudas sobre las funciones de JQuery que he utilizado, en este caso google es nuestro mejor amigo, explicarte yo me llevaria muucho tiempo.

En resumen, los documentos JSON por lo general se obtienen de un servidor (con AJAX) en forma de cadena, estos documentos tienen la sintaxis JSON vista anteriormente. Despues de que el documento JSON es obtenido del servidor éste es convertido en un objeto Javascript. Para convertirlo usamos la funcion eval() que recibe la cadena (el documento JSON) y la devuelve en forma de objeto Javascript.

Si te quedo la “espinita” sobre como usar el documento JSON mas elaborado que expuse mas arriba, click aqui para ver un ejemplo (no olvides ver el codigo fuente).

Despedida

Bueno, pues llegamos al final de esta parte, en la continuacion (Parte 2) de este mini tutorial de JSON veremos como obtener documentos JSON desde el servidor con ayuda de Ajax y JQuery. Si te gusto o te sirvio esta informacion, o si tienes dudas respecto al tema, te invito a que por favor me dejes un comentario (ademas, me motivas a escribir mas!). Por otra parte si gustas te envio los ejemplos en un .zip, solo deja tu correo.

Hasta pronto.
Saludos cordiales.

Anuncios

JQuery UI: Como usar el control Tab con MySql

JQuery UI Logo

En esta ocasión quiero presentar a la librería JQuery UI y para esto he diseñado un sencillo ejemplo que básicamente despliega dos tablas de MySql; al dar click en una pestaña (tab) se muestra una tabla, al elegir la otra se muestra el contenido de otra segunda tabla.

¿Que es JQuery UI?

En resumen, JQuery UI es un subconjunto del FrameWork JQuery y fue creado para añadir nuevas y complejas funcionalidades a ésta. Este conjunto de nuevas funcionalidades pueden ser plug-ins, widgets, y efectos visuales (arrastrar, FadeIn, FadeOut, etc.), todos diseñados con la misma filosofía que JQuery; fácil de usar y compatible con los navegadores más populares.

Lo que necesitas para realizar este ejemplo

Para la realizacion de este ejemplo necesitas la siguiente lista de herramientas de desarrollo instaladas en tu computadora. Así que si alguna no la tienes, este el momento ideal para hacerlo:

  • PHP 5 (o superior).
  • Un servidor web (ej. IIS o Apache) que tenga soporte para PHP 5.
  • El FrameWork JQuery.
  • JQuery UI.
  • MySql 5 (o superior).
  • Gusto por aprender.

    • Como puedes ver he puesto un enlace a la página de descarga de cada herramienta. El servidor web puede ser el que tú gustes pero cuida que tenga soporte para reconocer y ejecutar código PHP, en mi caso uso el servidor Apache.

Diseñar la Base de datos en MySql

Para el ejemplo voy a suponer que tenemos una lista de productos organizados en categorías. Es por esto que utilizare una tabla de productos y otra tabla de categorías. Los datos que me interesan guardar sobre los productos son:

  • El nombre del producto.
  • Una breve descripción acerca del producto.
  • La fecha en que caduca el producto.
  • El precio al que se compra con el proveedor.
  • El precio al que se vende al público.
  • La categoría en la que se ha clasificado el producto.

    • Los productos estarán organizados en varias categorías, ejemplos de categorías pueden ser; Carnes frías, Perfumería, Abarrotes, Frituras, etc.
      Para que el ejemplo siga siendo muy sencillo y fácil de entender solo he considerado dos categorías y solamente tendré una lista de 3 productos.

Scripts para crear la base de Datos en MySql

A continuación pongo los scripts que debes usar para crear la base de datos del ejemplo, así como algunas inserciones que he realizado en las dos tablas:

/*Crear la base de datos*/
CREATE DATABASE jquerytabs_mysql;
USE jquerytabs_mysql;

/*Crear la tabla Productos*/
CREATE TABLE tbl_productos(id_producto INT NOT NULL AUTO_INCREMENT,
tx_NombreProducto VARCHAR(50),
tx_Descripcion VARCHAR(500),
dt_FechaCaducidad DATETIME DEFAULT NULL,
mn_PrecioCompra DECIMAL(5,2),
mn_PrecioPublico DECIMAL(5,2),
id_Categoria INT,
primary key(id_producto),
foreign key (id_Categoria) references cta_CategoriasProductos(id_CategoriaProducto)  );
  
/*Crear la tabla de Categorias*/
CREATE TABLE cta_CategoriasProductos(id_CategoriaProducto INT NOT NULL AUTO_INCREMENT,
tx_Nombre VARCHAR(50),
tx_Descripcion VARCHAR(500),
primary key(id_CategoriaProducto) );


/*Insertar 3 Productos de ejemplo*/
INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria) 
VALUES('Shampoo Ultra humectante','Shampoo caja/2 pzas marca patito','2013-07-04',245.50,315.00,1);

INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria)
VALUES('Papas refritas','Papas fritas bolsa 150 gr. superpapas','2012-11-22 10:45',3.50,6.50,2);

INSERT INTO tbl_productos (tx_NombreProducto,tx_Descripcion,dt_FechaCaducidad,mn_PrecioCompra,mn_PrecioPublico,id_Categoria)
VALUES('Jabon anti alopecia','Jabon higienico 1 pza 145 gr.','2013-04-16 07:57',8.50,10.50,1);

//Insertar 2 categorias para los productos
INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Perfumeria','Todo tipo de productos de limpieza y productos de tocador');

INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Frituras','Productos de frituras; palomitas, totopos, etc.');

INSERT INTO cta_CategoriasProductos(tx_Nombre,tx_Descripcion) 
VALUES('Abarrotes','Todo tipo de Productos de abarrotes; enlatados, veladoras, refrescos, etc .');

Con ayuda de algun cliente para MySql como Workbench o el PhpMyAdmin ejecuta los scripts anteriores para recrear la base de datos e insertar los datos de ejemplo. En mi caso he utilizado el Workbench.

Diseño de la pagina web

El diseño es muy sencillo y únicamente consiste de un solo documento HTML en el que se insertara el Widget Tab de JQuery, es muy similar al diseño que muestro a continuación:
Esbozo de la GUI del ejemplo.

Cuando el usuario elija la primera Pestaña se mostrara el contenido de la tabla de productos. En la Pestaña dos se mostrara la tabla de categorías. Existen varias formas de decirle a JQuery de donde debe tomar los datos que mostrara en cada Pestaña, tema que por ahora no tocare para no confundirte. En este caso el contenido de cada pestaña será cargado con ayuda de Ajax.

Vista de la estructura de carpetas y archivos del ejemplo

Para que entiendas mejor los archivos de código fuente que mostrare más adelante, a continuación pongo una imagen donde se observa claramente como he organizado en carpetas los archivos de este ejemplo:
Estructura de carpetas del ejemplo JQuery Tabs

Si observas la imagen te darás cuenta que dentro de la carpeta css hay una carpeta llamada cupertino; este es el nombre del tema que me descargue de JQuery UI, es el que más me gusto (azul claro tipo agua).

El código fuente de estos archivos los iré mostrando uno a uno junto con una breve explicación de la función que tiene cada uno. El orden en que los mostrare es el orden en el que teóricamente el navegador los íra cargando.

El código Fuente de los archivos

Para ver el ejemplo funcionando en el navegador debemos escribir la ruta a la carpeta ejemplo5 que a su vez está dentro de la carpeta jquery, la cual (como se observa en la imagen) es la raíz donde está guardado todo el ejemplo, cuando escribimos dicha URL (http://localhost/jquery/ejemplo5/) en el navegador se desplegara el documento HTML index.html. El código de este archivo lo muestro a continuación:
index.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=iso-8859-1" />
    <title>Ejemplo5 con JQuery :: UI Tabs y MySql</title>
	<!--Hoja de estilo-->
	<link rel="StyleSheet" type="text/css" href="../css/cupertino/jquery-ui-1.8.23.custom.css" />
	<link rel="StyleSheet" type="text/css" href="../css/css_ejemplo5.css" />
	
	<!--Archivos de script de JQuery-->
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>
	<script type="text/javascript" src="../js/jquery-ui-1.8.23.custom.min.js"></script>
	<!--Archivo de script del ejemplo-->
	<script type="text/javascript" src="../js/func_ejemplo5.js"></script>

   </head>
   <body>
	 <br/>
	 
		<TABLE WIDTH="95%" BORDER="0">
			<TR>
				<TD >
				<!-- Widget Tab -->
					<div id="fichass">
						<ul>
							<li><a href="ajax/listarProductos.php">Productos</a></li>
							<li><a href="ajax/listarCategorias.php">Categorias</a></li>
						</ul>
					</div>				
				</TD>
			</TR>
		</TABLE>		

   </body>
</html>

Espero que con la imagen de las carpetas que te mostré anteriormente puedas deducir el porqué de las rutas en las etiquetas para importar las hojas de estilo (LINK), y el porqué de las rutas en las etiquetas para importar los archivos de código JavaScript (SCRIPT). Como se observa el archivo está muy, muy corto, a continuación una breve explicación de las líneas más importantes de este archivo:

En la línea 7 y 8 se están importando dos hojas de estilos; el primer archivo .css (jquery-ui-1.8.23.custom.css) corresponde a la hoja de estilos de JQuery UI, el segundo archivo .css (css_ejemplo5.css) corresponde a una hoja que he creado para darle un poco de presentación a las tablas que mostraran el contenido de las tablas de MySql.

En la línea 11 se importa el Framework JQuery.
En la línea 12 se importa la librería JQuery UI.
En la línea 14 se importa un archivo que he creado para inicializar JQuery y el Widget Tab.

En el cuerpo del documento HTML (BODY) se observa cómo he creado una tabla con una sola fila y una sola columna y dentro de dicha columna e insertado el Widget Tab. El objetivo de la tabla es limitar el ancho que ocupa el Widget dentro del documento HTML.

css_ejemplo5.css
Este archivo es una hoja de estilos que he creado para hacer un RESET del CSS del documento HTML y crear unas cuantas clases para dar presentación a las tablas HTML que muestran los datos de las tablas Productos y Categorías (las tablas se crean en los archivos que se cargan con Ajax). Los archivos listarProductos.php y listarCategorias.php son los que hacen uso de las clases que se crean en este archivo.

@CHARSET "UTF-8";
/******* GENERAL RESET *******/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em,
font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody,
 tfoot, thead, tr, th, td {
  border:0pt none;
  font-family:inherit;
  font-size: 100%;
  font-style:inherit;
  font-weight:inherit;
  margin:0pt;
  padding:0pt;
  vertical-align:baseline;
}

.celdaWhite {	background-color: #FFFFFF; }
.celdaGreen {	background-color: #E5FFE9; }

.filaEncabezado  { 
	background-color: #B5B5B5; 
	font-size: 9pt; 
	font-weight: bold; 
	font-family: Verdana, Arial, Helvetica, sans-serif; 
}

td { 
	color: #333333; 
	font-family: 'Comic Sans MS',Verdana, Arial, Helvetica, sans-serif; 
	font-size: 7.5pt; 
	vertical-align:middle;
	padding:3px;
}

En el archivo se observa lo siguiente:
Únicamente he creado 3 clases: celdaWhite, celdaGreen y filaEncabezado.
Asigne estilos para todas las celdas de una tabla HTML (línea 27 a línea 33).

func_ejemplo5.js
Este archivo se encarga de Inicializar el Framework JQuery y de especificar que la capa (DIV) que están dentro del cuerpo del archivo index.php debe convertirse en un Widget Tab:

/*
	Descripcion: 	Inicializacion de JQuery y el Widget Tab.
*/

	var miPagina;
	miPagina=$(document);
	miPagina.ready(inicializarEventos);

	function inicializarEventos()
	{
		var capaFichas = $("#fichass");
		capaFichas.tabs({ collapsible: true });
	}

Si has revisado mis anteriores ejemplos de JQuery te darás cuenta que estoy utilizando la misma sintaxis de siempre para inicializar JQuery. El parámetro collapsible del método tabs() es un valor booleano que indica si el contenido de la pestaña debe ocultarse al dar click en el nombre de la pestaña, en este caso he especificado que sí.

Te explicare un poco que pasa detrás del telón…
Recordemos que el método ready() solo se hace disponible después de que todo el contenido del documento HTML ha sido recibido del servidor, es por eso que dentro de este método he creado un objeto asociado a la capa "fichass" (línea 11) y a través de este objeto le indico a jQuery que a esta capa la convierta en un Widget del tipo Tab (linea 12).

Cuando el método tabs() se ejecuta y detecta que en el parámetro href de los nombres de las pestañas (líneas 26 y 27 de index.html) hay una URL a un archivo, entonces, automáticamente carga el archivo asociado a la primera pestaña a través de Ajax. Léase la documentación del Widget Tab, opción selected aquí.

Si deseáramos que al cargarse el Widget Tab se mostrara por defecto la pestaña 2 entonces deberíamos ejecutar este método con la opción selected: 1. Las fichas se numeran de 0 a n-1, donde n es el numero de pestañas del Widget Tab.

conectar_bd.php
Este archivo se encarga de hacer la conexión al DBMS MySql, o en caso de error, mostrar una descripción del porque no se pudo conectar (función mysql_error de MySql). Este archivo es insertado con la función include de PHP dentro de los archivos listarProductos.php y listarCategorias.php.

<?php
	
$conexio = null;
function conectar_bd() {
	global $conexio;
	//Definir datos de conexion con el servidor MySQL (local)	
	$elUsr = "root";
	$elPw  = "12345";
	$elServer ="localhost";
	$laBd = "jquerytabs_mysql";
	
	//Obtener link de conexion
	$conexio = mysql_connect($elServer, $elUsr , $elPw) or die (mysql_error());
	
	mysql_select_db($laBd, $conexio ) or die (mysql_error());
}
	
?>

Este script PHP en resumen; declara una variable global ($conexio, guardara el link de conexión a la bd) y define una función llamada conectar_bd() la cual al ser invocada hará la conexión a MySql y dejara esa conexión abierta en la variable global anteriormente mencionada.

listarProductos.php
Este archivo es solicitado al servidor a través de Ajax cada vez que se da click en la primera pestaña. Tiene la función de hacer una consulta a la base de datos para obtener los registros de la tabla productos y a través de un ciclo desplegarlos:

<?php
	include("../conectar_bd.php");
	conectar_bd();
	
	//Hacer una consulta de la tabla productos a la base de datos
	$queryProductos = "SELECT tbl_productos.*,cta_CategoriasProductos.tx_Nombre AS categoria 
						FROM tbl_productos
						INNER JOIN cta_CategoriasProductos
						ON tbl_productos.id_Categoria = cta_CategoriasProductos.id_CategoriaProducto;";
	$resProductos = mysql_query($queryProductos);
?>

	<TABLE WIDTH="95%" BORDER="0" >
		<TR class="filaEncabezado">
			<TD width="1%" align="left">ID</TD>
			<TD align="left">NOMBRE</TD>
			<TD align="left">DESCRIPCION</TD>
			<TD align="left">FECHA CADUCIDAD</TD>
			<TD align="left">PRECIO LISTA</TD>
			<TD align="left">PRECIO PUBLICO</TD>
			<TD align="left">CATEGORIA</TD>
		</TR>
<?php	
	$i=0;
	//Ciclo para obtener y desplegar cada registro de la tabla productos
	while( $filaProducto = mysql_fetch_array($resProductos) ) {
		$estilo = ( ($i%2)==0 ) ? "celdaWhite" : "celdaGreen";
?>
		<TR class="<?=$estilo; ?>"  >
			<TD><?=$filaProducto['id_producto']; ?></TD>
			<TD><?=$filaProducto['tx_NombreProducto']; ?></TD>
			<TD><?=$filaProducto['tx_Descripcion']; ?></TD>
			<TD><?=$filaProducto['dt_FechaCaducidad']; ?></TD>
			<TD><?="$".$filaProducto['mn_PrecioCompra']; ?></TD>
			<TD><?="$".$filaProducto['mn_PrecioPublico']; ?></TD>
			<TD><?=$filaProducto['categoria']; ?></TD>
		</TR>
<?php
	$i++;
	}	//Fin de ciclo
?>
	</TABLE>
<?php
	mysql_close($conexio);
?>

Observa como he realizado un match entre la tabla Productos y la tabla de Categorías a través del campo id_Categoria. Este match lo hago para desplegar el nombre de la categoría en vez de su ID; pues al usuario no le interesa el Id, sino el nombre de la categoría en la que se ha clasificado el producto. Si no entiendes muy bien mi consulta de SQL te recomiendo leer acerca de la instrucción INNER JOIN.

En la línea 44 se cierra conexión a la base de datos, misma que se abrió al invocar a la función conectar_bd() en la línea 3.

listarCategorias.php
Este archivo al igual que el archivo listarProductos.php es solicitado al servidor a través de Ajax, pero ahora cuando se da click en la segunda pestaña (Categorias):

<?php
	include("../conectar_bd.php");
	conectar_bd();
	
	//Hacer una consulta de la tabla categorias a la base de datos	
	$queryCategorias = "SELECT * FROM cta_CategoriasProductos; ";
	$resCategorias = mysql_query($queryCategorias);
?>

	<TABLE WIDTH="95%" BORDER="0" >
		<TR class="filaEncabezado">
			<TD width="1%" align="left">ID</TD>
			<TD align="left">NOMBRE</TD>
			<TD align="left">DESCRIPCION</TD>
		</TR>
<?php	
	$i=0;
	//Ciclo para obtener y desplegar cada registro de la tabla categorias
	while( $filaCategoria = mysql_fetch_array($resCategorias) ) {
		$estilo = ( ($i%2)==0 ) ? "celdaWhite" : "celdaGreen";
?>
		<TR class="<?=$estilo; ?>"  >
			<TD><?=$filaCategoria['id_CategoriaProducto']; ?></TD>
			<TD><?=$filaCategoria['tx_Nombre']; ?></TD>
			<TD><?=$filaCategoria['tx_Descripcion']; ?></TD>
		</TR>
<?php
	$i++;
	}	//Fin del ciclo
?>
	</TABLE>
<?php
	mysql_close($conexio);
?>

Como puedes observar en el código, se hace un barrido completo de la tabla Categorías y a través de un ciclo while se mandan al navegador cada uno de los registros.

En la línea 33 se cierra la conexión a la base de datos, misma que se abrió al invocar a la función conectar_bd() en la línea 3.

Screenshots del ejemplo

A continuación muestro pantallazos del ejemplo en el navegador Chrome de Google.
Ficha Productos:
Ejemplo JQuery Tabs en ejecucion; Pestaña productos.
Ficha Categorias;
Ejemplo JQuery Tabs en ejecucion: Pestaña Categorias.

Demo

Si gustas ver el ejemplo en ejecución da Click en este enlace.

 

Eso es todoo, espero que te haya gustado y principalmente que ojalá te sirva. Si deseas el código basta con que dejes tu email y en cuanto vea tu mensaje te hago llegar el ejemplo en un archivo comprimido. Si te gusto el articulo, te invito a que me dejes un comentario, así me motivas a escribir más.

Saludos cordiales.

 
 

Enlaces relacionados:

 
 

JQuery: Asignar un controlador al evento click de un enlace

Sencillo ejemplo que muestra como ejecutar una funcion al hacer click en un enlace con JQuery. El ejemplo basicamente consiste en dos enlaces y dos capas (DIVS), el primer enlace al darle click calcula un numero aleatorio y lo muestra en las dos capas. Cada capa inicialmente tiene una hoja de estilos diferente. El segundo enlace al darle click intercambia las hojas de estilos de cada capa.

A continuacion copio el codigo completo del ejemplo:
index.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=iso-8859-1" />
    <title>.::Ejemplo2 con JQuery::.</title>
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
		var miPaginaWeb = $(document);
		miPaginaWeb.ready(inicializaJQuery);	
		
		function inicializaJQuery() {
			$('#capa1').html("Contenido DIV1");	//Texto por default de capa1
			$('#capa2').html("Contenido DIV2");	//Texto por default de capa2
			
			var miEnlace = $('#enlace');
			//Asignar funcion controladora a evento click del enlace 1
			miEnlace.click(actualizaNumAleatorio);
			
			var miEnlace2 = $('#enlace2');
			//Asignar funcion controladora a evento click del enlace 2
			miEnlace2.click(intercambiaClases);
		}
			
		//Funcion controladora de evento del enlace 1
		function actualizaNumAleatorio() {
		
			var miCapa = $('#capa1');
			var num = Math.random()*100;	//Calcular primer numero
			miCapa.html("Numero aleatorio: "+num);
			
			var miCapa2 = $('#capa2');
			var num = Math.round(Math.random()*100);	//Calcular y redondear segundo numero
			miCapa2.html("Otro aleatorio: "+num);
			
		}
			
		//Funcion controladora de evento click del enlace 2
		function intercambiaClases() {
			var miCapa = $('#capa1');
			var miCapa2 = $('#capa2');
			
			//Obtener el nombre de la clase asignada al Div1
			var claseActual = $('#capa1').attr('class');
			
			if( claseActual=='estilo1' ) {					
				miCapa.removeClass("estilo1");
				miCapa.addClass("estilo2");
				miCapa2.removeClass("estilo2");
				miCapa2.addClass("estilo1");
			}
			else {
				miCapa.removeClass("estilo2");
				miCapa.addClass("estilo1");
				miCapa2.removeClass("estilo1");
				miCapa2.addClass("estilo2");				
			}
			
		}
    </script>
   </head>
  <style type="text/css">
    <!--
    .estilo1 {
		font-size:22px;
		color:#FF8800;
		font-weight:bold;
		text-shadow:1px 1px 1px #8BD4EF;
		}
    .estilo2 {
		font-size:16px;
		color:#9F28D6;
		font-weight:bold;
		text-shadow:1px 1px 1px #CCFF66;
		}
    -->
  </style>
   <body>
		<div class="estilo1" id="capa1">	</div>
		<br/>
		<div  class="estilo2"  id="capa2">	</div>
		
		<br/><br/>
		<a href="#" id="enlace">Generar Numero Aleatorio</a>		
		<br/>
		<a href="#" id="enlace2">Intercambiar estilos (clases)</a>
		
   </body>
</html>

A continuacion una breve explicacion de las partes mas importantes del ejemplo:

En la linea 6 se importa la libreria JQuery que esta un nivel abajo de donde esta el archivo de este ejemplo (por eso los .. del atributo src).

	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

En la linea 09 y 10 se crea un objeto asociado al documento y se le asigna a su evento ready la funcion inicializaJQuery la cual se encarga, en resumen, de asignar a cada enlace una funcion distinta para controlar su evento Click:

		function inicializaJQuery() {
			$('#capa1').html("Contenido DIV1");	//Texto por default de capa1
			$('#capa2').html("Contenido DIV2");	//Texto por default de capa2
			
			var miEnlace = $('#enlace');
			//Asignar funcion controladora a evento click de enlace 1
			miEnlace.click(actualizaNumAleatorio);
			
			var miEnlace2 = $('#enlace2');
			//Asignar funcion controladora a evento click de enlace 2
			miEnlace2.click(intercambiaClases);
		}

En la primera y segunda linea de la funcion que copie anteriormente se crea un objeto asociado a cada capa y se ejecuta inmediatamente su metodo html() para establecer un texto por defecto en cada capa.

A continuacion se crea un objeto asociado al enlace 1 y se le asigna la funcion actualizaNumAleatorio a su evento click. Ahora la funcion actualizaNumAleatorio es el controlador del evento click del enlace 1.

Esta funcion como se observa a continuacion crea primeramente un objeto de la capa1, calcula un numero aleatoriamente y se lo asigna a la capa1 a travez de su metodo html(). Los mismo hace para la capa2 con la unica diferencia de que no redondea el numero:


			//Funcion controladora de evento click del enlace 1
			function actualizaNumAleatorio() {
			
				var miCapa = $('#capa1');
				var num = Math.random()*100;	//Calcular primer numero
				miCapa.html("Numero aleatorio: "+num);
				
				var miCapa2 = $('#capa2');
				var num = Math.round(Math.random()*100);	//Calcular y redondear segundo numero
				miCapa2.html("Otro aleatorio: "+num);
				
			}			

La funcion intercambiaClases es el controlador de evento click del enlace 2. Esta funcion como se observa, crea un objeto por cada capa y a continuacion recupera el nombre del estilo de la capa1. Observe como se recupera el valor de un atributo de un objeto; para esto se utiliza el metodo attr(), la sintaxis es objeto.attr(‘nomAtributo’) en este caso se recupera el atributo ‘class’ del objeto asociado a la capa1. Si el estilo que tiene la capa1 se llama ‘estilo1’ entonces se quita el estilo1 y se asigna la clase estilo2. A la capa2 se le quita el estilo2 y se le asigna el estilo1. Creo que es muy facil de entender, asi que ya no explico mas:

		//Funcion controladora de evento click de enlace2
		function intercambiaClases() {
			var miCapa = $('#capa1');
			var miCapa2 = $('#capa2');
			
			//Obtener el nombre de la clase asignada al Div1
			var claseActual = miCapa.attr('class');
			
			if( claseActual=='estilo1' ) {					
				miCapa.removeClass("estilo1");
				miCapa.addClass("estilo2");
				miCapa2.removeClass("estilo2");
				miCapa2.addClass("estilo1");
			}
			else {
				miCapa.removeClass("estilo2");
				miCapa.addClass("estilo1");
				miCapa2.removeClass("estilo1");
				miCapa2.addClass("estilo2");				
			}
			
		}

Espero que hayas entendido la mayoria del codigo del ejemplo, ¿Sencillo, no?. A continuacion pongo una imagen del ejemplo ejecutandose en Chrome:
Ejecucion de Ejemplo2 de JQuery.

Para ver en funcionamiento el ejemplo da click en el siguiente enlace: index.html

Bueno pues, aqui termina el pequeño ejemplo, y como siempre que escribo algo; espero que ha alguien le sirva. Si gustas dejar un comentario constructivo sera bien recibido.

Saludos cordiales.

Introduccion a JQuery

Breve introduccion a JQuery; que es, donde conseguirlo, etc. JQuery es un Framework de Javascript; es decir, un conjunto de rutinas escritas en javascript listas para usarse y que nos hacen mas facil acceder a los objetos del DOM.

Con este Framework podras realizar tareas cotidianas dentro de tu pagina web sin tener que codificarlas pues ya vienen incluidas por defecto y ademas, ya estan probadas que funcionan de manera exacta y correcta en distintos navegadores. Ademas de las tareas cotidianas podras realizar mucho mas, por ejemplo, podras hacer mas bonitas tus interfaces de usuario y agregarles efectos de animacion. Al enriquecer un sitio web con estos componentes y funcionalidades se podria decir que pasando a la web 2.0.

Por si te da flojera aprender Javascript o no lo usas mucho, cuando realizes los primeros ejemplos de este sitio te daras cuenta que JQuery es muy facil de utilizar y no lo cambiaras por nada, lo usaras en todas las paginas donde necesites usar Javascript.

¿JQuery tiene algun costo?
No, JQuery es gratuito, los puedes usar de manera personal o en tus proyectos comerciales. JQuery tiene licencias MIT License y GPL. Puedes leer mas aqui: http://jquery.org/license/.

¿Donde consigo JQuery?
Lo puedes descargar desde aqui http://jquery.com/. A la fecha actual la version mas reciente es esta: http://code.jquery.com/jquery-1.8.0.min.js (para bajarlo en Firefox; Da click derecho sobre el enlace, y elije la opcion Guardar vinculo como…).

¿Realmente necesito usar un Framework?
Pues, como te explico, mira; si quieres reinventar la rueda y pelearte con los niveles mas bajos de programacion en Javascript o simplemente si lo que estas buscando es aprender Javascript no aprendas JQuery (todavia). Porque presisamente para eso fue creado JQuery; para no tener que implementar las funciones (a manitaa) para realizar las tareas mas basicas del lado cliente.

Y si deseas ahorrar tiempo; sí, si necesitas usar un framework.

¿Que necesito para aprender JQuery?

  1. El Framework en sí.
  2. Conocimientos basicos de Programación Orientada a Objetos (POO).

En resumen el Framework jQuery nos brinda las siguientes ventajas:

  • Escribimos menos codigo y hacemos mas.
  • No tienes que preocuparte por la compatibilidad de tu codigo Javascript en los diferentes navegadores.
  • El manejo de objetos es mucho mas sencillo.
  • Permite agregar efectos de animacion muys vistosos a capas y a componentes de la GUI de manera muy facil.
  • Contiene bastantes capacidades para hacer uso de Ajax.
  • Es extensible; es decir, le puedes agregar plugins para ampliar las capacidades de este Framework.

Animo! despues de que comprendas las grandes ventajas de usar JQuery te daras cuenta que el esfuerzo que invertiste en aprenderlo valio la pena. Sigue leyendo.

Como usar JQuery
A continuacion una imagen de la estructura de carpetas que utilizare para mostrar los ejemplos con JQuery. Para cada ejemplo, como puedes ver, voi a crear una carpeta que contendra todos los archivos relacionados con dicho ejemplo:
Estructura de carpetas de los ejemplos.
Como se observa, he creado una carpeta llamada ejemplo 1 donde he guardado el archivo index.html que pongo a continuacion:

index.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=iso-8859-1" />
    <title>.::Ejemplo1 con JQuery::.</title>
    <script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>	

    <script type="text/javascript">
      $().ready(function() {
		$('#mensaje').html("<strong>Hola Mundo JQuery</strong>");

      });
    </script>
   </head>
   <body>
		<div id="mensaje"></div>
		
   </body>
</html>

El ejemplo es el tipico Hola mundo en una pagina web HTML pero escrito con ayuda de JQuery. A continuacion doy una breve explicacion, pon mucha atencion:

En la linea 06 se esta importando el archivo jquery-1.8.0.min.js el cual contiene el codigo javascript de JQuery. En la linea 09 se coloco el evento Ready() el cual unicamente se activa (ejecuta) despues de que se han recibido completamente todos los archivos (por ejemplo; imagenes, texto, etc) de la pagina web. Como se observa dentro de este metodo he colocado una funcion y la llave de cierre de esta funcion esta en la linea 12, junto con el parentesis de cierre del metodo Ready().

Observa como estoy ejecutando este metodo sobre el objeto $() el cual hace referencia al documento HTML. Es decir, si quitara la funcion que esta dentro del metodo se veria asi $().Ready(). Este metodo es el lugar ideal para colocar todos los controladores de eventos que se requieran, inicializaciones o ejecutar algun otro codigo que quieras. Lo importante es que recuerdes que este metodo unicamente se ejecuta despues de que la pagina esta completamente cargada, es decir, despues de que el DOM esta listo.

Bien, ahora como puedes observar, dentro de la funcion he colocado unicamente una instruccion:

	$('#mensaje').html("<strong>Hola Mundo JQuery</strong>");

Esta linea hace referencia al DIV que he colocado en el cuerpo de la pagina (en el body, linea 16) a travez del ID de éste. Para hacer referencia a cualquier objeto a travez de su ID se escribe un simbolo de dolar y entre parentesis y comillas $(”) el ID precedido de simbolo de gato, #. Asi; $(‘#un_Id’). Una vez que obtengo la referencia al objeto le aplico el metodo html(), el cual permite cambiar el contendido html de un objeto.

Es por esto que al ejecutar el ejemplo se muestra el texto en negrita: “Hola Mundo JQuery”.

Hay varias formas de realizar la inicializacion del documento a travez de jQuery, pero me he encontrado que muchos desarrolladores lo realizan de la manera antes explicada. A continuacion pongo otra forma de inicializar con los comentarios respectivos para que lo entiendas mas facilmente:

index2.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=iso-8859-1" />
    <title>.::Otra forma de inicializar con JQuery::.</title>
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
		//Asigno al metodo Ready un controlador (una funcion que funcionara como tal).
		$().ready(inicializaJQuery);
	
		//Funcion que se ejecutara despues de que toda la pagina HTML haya sido recibida del servidor
		//Esta funcion funcionara como controlador para inicializar el documento HTML
		function inicializaJQuery() {
			var miCapa= $('#mensaje');	//Obtengo una referencia al objeto de la capa
			//Actualizo el contenido html de la capa a travez de la ref. antes obtenida
			miCapa.html("<strong>Hola Mundo JQuery</strong>");
		}
 
    </script>
   </head>
   <body>
		<div id="mensaje">	</div>
		
   </body>
</html>

Para que te quede maas claro a continuacion expongo otra tercera forma de inicializar el documento HTML con Jquery:

index3.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=iso-8859-1" />
    <title>.::Ejemplo1 con JQuery::.</title>
	<script type="text/javascript" src="../js/jquery-1.8.0.min.js"></script>

    <script type="text/javascript">
		//Obtener referencia al objeto del documento HTML
		var miPaginaWeb = $(document);
		
		//Ejecutar el metodo ready sobre el objeto del documento, mandandole un controlador
		//No olvidar que este metodo solo se hace disponible despues de que todo
		//el contenido del documento html ha sido recibido del servidor.
		miPaginaWeb.ready(inicializaJQuery);
		
		//Funcion que servira como controlador para inicializar el documento.
		function inicializaJQuery() {
			var miCapa = $('#mensaje');	//Obtener referencia al DIV del body a travez de su ID
			//Contenido HTML de la capa
			var msgHola = "<strong>Hola Muundo JQuery</strong>";
			
			//Cambiar el HTMl de la capa a travez de la referencia obtenida anteriormente
			miCapa.html(msgHola);
		}
			
    </script>
   </head>
   <body>
		<div id="mensaje">	</div>
		
   </body>
</html>

Si abres cualquiera de los 3 archivos anteriores (index.html, index2.html ó index3.html ) el resultado que veras es el mismo, a continuacion la imagen de la ejecucion de index.html en el navegador Chrome:
Hola mundo en una pagina web al estilo Jquery
Para ver los ejemplos en linea, sigue los siguientes enlaces:
index.html     index2.html     index3.html

Eso es todo. Se aceptan comentarios constructivos. Hasta pronto y gracias x visitar mi blog.

Javascript: Mostrar ventanas de alerta en una pagina web

Como mostrar mensajes de Alerta al usuario dentro de la pagina Web. A veces es necesario mostrar mensajes de aviso al usuario, ya sea para informarle o advertirle algo. El ejemplo motivo de esta entrada en mi blog tiene principalmente los siguientes objetivos:

  • Ilustrar como mostrar mensajes de alerta al usuario.
  • Mostrar el estado de Javascript en en navegador con la etiqueta <noscript></noscript> de HTML.

Bueno, sin mas rodeos a continuacion muestro el archivo html:

ejemplo_3.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>
	<title>Javascript [ejemplo 3] -Mostrar ventanas de alerta</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script language="Javascript" type="text/javascript" src="js_script2.js">
	/*
		Descripcion:			Ejemplo sobre como desplegar un mensaje de alerta y 
								como avisar al usuario en caso de que su navegador no
								soporte javascript; con  la etiqueta <noscript>
		Autor:					Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    			ejemplo_3.html
		Relacionado con:	js_script2.js
	*/
	</script>
</head>
<body bgcolor="#FFFFFF">

<noscript>
	<h2>Para ver esta pagina web se requiere JavaScript.<br>Se aborto la carga de la pagina.</h2>
</noscript>

<br /><br />
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
  
  
</body>
</html>

Todo lo que aparezca dentro de esta etiqueta se mostrara en caso de que el navegador no acepte codigo Javascript. Ya sea porque el navegador no lo soporte o porque tiene desactivada la ejecucion de Javascript. Como se observa, la etiqueta <noscript>, es muy sencilla de utilizar (linea 20 a 22). Sintaxis de la etiqueta <noscript>:

<noscript>
	<!-- Mensaje para el usuario en caso de que su navegador no acepte codigo Javascript -->
</noscript>

A continuacion una imagen con la ejecucion en el navegador Chrome, en este caso se muestra el mensaje de alerta ya que mi navegador Chrome si tiene activada la deteccion de Javascript:
Ejecucion en Chrome de ejemplo3 de Javascript

El contenido del archivo js_script2.js es el siguiente

js_script2.js

	/*
		Descripcion:		muestra un mensaje al usuario avisando que su navegador soporta JavaScript.											
		Autor:			Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    		js_script2.js
		Relacionado con:	ejemplo_2.html
	*/

	alert("Ha accedido a esta pagina web, su navegador soporta JavaScript.");

Como se observa, la sintaxis de la funcion alert() de Javascript tiene la siguiente sintaxis:

<script language="Javascript" type="text/javascript">
	alert("Mensaje de alerta.");
</script>

El mensaje que se despliega en el navegador es algo similar a este:
Alerta de Javascript

Es todo, hasta la proxima.

Javascript: Como usar archivos .js externos en una pagina web

Seguimos con ejemplos muy basicos de Javascript. En esta ocasion quiero mostrar como incluir un archivo externo .js dentro de una pagina HTML. Los archivos .js contienen exclusivamente codigo fuente en lenguaje Javascript.

ejemplo_2.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>
	<title>Javascript [Ejemplo 2] Uso de archivos js externos</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script language="Javascript" type="text/javascript" src="js_script1.js">
	/*
		Descripcion:			Muestra como incluir un archivo externo .js en una pagina web
		Autor:				Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    			ejemplo_2.html
		Relacionado con:	js_scripts1.js
	*/
	</script>
</head>
<body bgcolor="#FFFFFF">
	<h1 id="mensajeHola">

	</h1>
	
<br /><br />
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
  
  
</body>
</html>

Observa como es casi identica a la instruccion para incluir codigo Javascript (linea 07), con la diferencia que se le coloca un tercer parametro, src, el cual permite indicar el archivo de codigo javascript que se desea utilizar. De esta manera separamos la pagina web de su comportamiento. La sintaxis es:

	<script language="Javascript" type="text/javascript" src="js_script1.js">
	/* Algun comentario */
	</script>

<!-- O en una sola linea -->
	<script language="Javascript" type="text/javascript" src="js_script1.js"></script>

A continuacion muestro el archivo Javascript al que hace referencia el archivo ejemplo_2.html anterior…

js_script1.js

	/*
		Descripcion:			Muestra un mensaje en una etiqueta h1 con ayuda de su Id,
						desde una funcion
		Autor:				Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    			js_script1.js
		Relacionado con:    		ejemplo_2.html
	*/

	window.onload =escribirMensaje;
	
	function escribirMensaje()
	{
		document.getElementById("mensajeHola").innerHTML = "&iexcl;Hola Mundo Javascript!.";
	}

A continuacion muestro la imagen de este ejemplo mostrandose en el navegador Chrome:
Ejemplo 2 en el navegador Chrome

Bueno, pues aqui acaba mi ejemplo, eso es todo por ahora. Saludos

Hola Mundo en Javascript

Tipico programa del Hola Mundo. Este es el primero de una serie de ejemplos que quiero publicar sobre Javascript. Poco a poco voi a ir incrementando la complejidad de los scripts hasta tocar el Tema de AJAX y despues Ajax+Base de datos. Son ejemplos muy sencillos, pero que considero muy utiles para comprender los conceptos basicos de la programacion web. Los requisitos que debes cumplir para ver funcionando este ejemplo en tu computadora son:

  • Saber escribir en la computadora.
  • Un navegador web.
  • Un editor de texto.

Supongo que si estas leyendo este articulo es porque ya sabes algo de HTML y quieres dar el siguiente paso en tu aprendizaje sobre programacion de paginas web. JavaScript es un lenguaje de scripting basado en objetos que se inserta en las paginas web y se ejecuta en el lado del cliente.

Para este ejemplo puedes usar cualquier navegador de los mas comunes, como puede ser Mozilla Firefox, Internet Explorer, Google Chrome, Opera, etc. Si usas Windows como minimos estoy casi 100% seguro que tienes instalado Internet Explorer 6 o superior. Si usas alguna distribucion de Linux seguro tienes alguna version de Mozilla Firefox.

El Editor de textos (no confundir con procesador de textos) puede ser cualquiera pero debe permitirte guarda un archivo de texto sin formato (archivo plano), algunos ejemplos de estos editores son: Bloc de notas de Windows, Notepad++ (mi preferido), Ultraedit, etc. usa el que mas te guste. En este editor es donde escribiras y guardaras el codigo fuente que muestro a continuacion:

ejemplo_1.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>
	<title>Mi primer Guion</title>
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	<script language="Javascript" type="text/javascript">
	/*
		Descripcion:			Hola mundo en Javascript
		Autor:						Gonzalo Silverio  gonzasilve@gmail.com
		Archivo:    			ejemplo_1.html
	*/
	</script>
</head>
<body bgcolor="#FFFFFF">
	<h1>
		<script language="JavaScript" type="text/javascript">
			document.write("Hola Mundo Javascript");
		</script>
	</h1>
	
<br /><br />
  <p>
    <a href="http://validator.w3.org/check?uri=referer"><img
      src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  </p>
  
  
</body>
</html>

Como yo uso Notepad++, mi codigo luce asi:
Ejemplo1 de Javascript: HolaMundo
Como ves tiene la sintaxis del codigo resaltada con colores bonitos, esa es la ventaja de este tipo de editores. Asi hasta da gusto programar.

Como se observa, es un ejemplo muy sencillo unicamente para ilustrar como escribir un mensaje en el navegador, pero con Javascript. Aqui lo importante es resaltar como se indica al navegador que debe interpretar el codigo como codigo Javascript. Con las etiquetas:

		<script language="JavaScript" type="text/javascript">
		//codigo javascript
		</script>

Una vez que ya tengas escrito el codigo anterior, lo guardas con la extension .htm ó .html. Abres la ruta de carpetas donde lo guardaste y lo abres con doble click:
Ejemplo 1 en el navegador Chrome
Te debe aparecer algo similar a esto:
Hola Mundo en Javascript en Chrome

Bueno, eso es todo por ahora, espero que te haya servido de Algo, si es asi, escribe algun comentario. ver un comentario me motiva a escribir mas. Saludos.

A %d blogueros les gusta esto: