A modo de repaso dejo en este post un listado de entradas relaccionadas con el mundillo javaScript.

• Programación orientada a objetos en javaScript
• Manejo de eventos en javaScript
• Manipulación del DOM con javaScript
• Javascript: Algunas funciones interesantes
• Detectar navegador con javaScript
• getAttribute, setAttribute, textContent, innerText y innerHTML
• JavaScript & Ajax

Esta vez voy a intentar explicar como realizaríamos una carga ajax de un archivo xml el cual contiene cierta información que queremos mostrar en nuestra web, para ello realizaré un ejemplo y os iré describiendo detalladamente todos los pasos que voy siguiendo. En nuestro ejemplo tendremos un listado con tres películas, al pinchar sobre cada una de ellas conectaremos con un archivo xml que es donde gurdamos toda la información relativa a las tres pelis, buscaremos la información relativa a la película sobre la que se a clicado y la imprimiremos por pantalla en un formato HTML específico. A continuación os pongo el ejemplo en funcionamiento:

VER EJEMPLO

Paso 1: Añadir los eventos

El primer paso que daremos será asignar el evento correspondiente a cada uno de los enlaces disponibles en el listado, en nuestro caso son tres.

function addLoadEvent(func) {
			var oldonload = window.onload;
			if (typeof window.onload != 'function') {
				window.onload = func;
			}
			else {
				window.onload = function() {
					oldonload();
					func();
				}
			}
		}
function anadeEvento(elemento,evento,funcion) {
		 if(document.addEventListener){
			 elemento.addEventListener(evento, funcion, false);  // Resto navegadores
		 }
		 else{
			 elemento.attachEvent("on"+evento,  funcion ); // IE8-
		 }
	  }

//Asignamos eventos
      addLoadEvent(function() { 

	     var listado_pelicula = document.getElementById("listado-peliculas");
    	 var enlaces_pelicula = listado_pelicula.getElementsByTagName("a");
				 
	     for(var i=0; i<enlaces_pelicula.length; i++)  
		     anadeEvento(enlaces_pelicula[i], "click", function(e){cargadorPeliculas(this.getAttribute("id")); e.preventDefault();});	
         });	

Para evitar el uso de javascript intrusivo hacemos uso de las funciones addLoadEvent y anadeEvento (ya hable de estas funciones en este post)

Una vez se haya cargado la página capturamos los tres enlaces del listado y los recorremos uno por uno pasándolos como parámetro a la función anadeEvento, junto con el evento que deseamos, en este caso el evento click y junto a la función que queremos que se ejecute al hacer clic sobre uno de nuestros enlaces.

Mucho cuidado con llamar a la función que queremos ejecutar directamente, porque no nos funcionará. Por ejemplo:

for(var i=0; i<enlaces_pelicula.length; i++)  
		     anadeEvento(enlaces_pelicula[i], "click", cargadorPeliculas(this.getAttribute("id")));	

getAttribute

Devuelve un atributo determinado relativo a un elemento.
Ejemplo (Nos devolvería el identificador del elemento div):

document.getElementById("div").getAttribute("id");

Con jquery podríamos conseguir lo mismo gracias al método attr().
Ejemplo:

 $("div").attr("id");

setAttribute

Fija un determinado valor en un elemento determinado.
Ejemplo: (Fijaríamos el valor 'mi_id' en el atributo id del elemento/s div)

document.getElementById("div").setAttribute("id", "mi_id");

Podríamos conseguir lo mismo con jquery de la siguiente forma:

$("div").attr("id", "mi_id");

textContent Vs innerText

Estos dos métodos nos permiten conseguir lo mismo, obtener el texto englobado por un elemento en concreto con la diferencia de que cada uno funcionará o no dependiendo del navegador en el que se ejecuten. Así por ejemplo textContent funcionará en Firefox pero no en IE. Por el contrario innerText trabajará correctamente en IE ero no en firefox. Una forma válida de conseguir nuestro propósito con éxito en todos los navegadores sería la siguiente:

var hasInnerText =
(document.getElementsByTagName("body")[0].innerText != undefined) ? true : false;
var elem = document.getElementById('id');
var elem2 = document.getElementById ('id2');

if(!hasInnerText){
    elem.textContent = value;
    elem2.textContent = value;
} else{
    elem.innerText = value;
    elem2.innerText = value;
}

innerHTML

Una forma más sencilla de obtener el texto de un elemento sin tener que recurrir a condicionales con los cuales diferenciar entre navegadores sería mediante el método innerHTML. Mediante este método recuperaremos tanto el texto como el etiquetado HTML englobado por un elemento en concreto.
Ejemplo: (Imaginemos que queremos fijar un texto en un contenedor cuyo id es "mi_id"):

document.getElementById('mi_id').innerHTML = "<p>Nuevo texto insertado en mi_id</p>";

Navegando un poco por la red me he topado con algunas funciones de javaScript bastante interesantes y que considero necesario tenerlas bien a mano por lo que las guardo en este post por si hay que rescatarlas.

toggle()

Ocultará o mostrara elementos dependiendo del estado anterior.

function toggle(obj) {
	var el = document.getElementById(obj);
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}
}

Os dejo un ejemplo sencillo.

El código al completo del ejemplo sería:

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

addLoadEvent(function() { 
					  
	function anadeEvento(elemento,evento,funcion) {
	 if(document.addEventListener){
         elemento.addEventListener(evento, funcion, false);  // Resto navegadores
     }
     else{
         elemento.attachEvent("on"+evento,  funcion ); // IE8-
     }
  }				  
					  
  function toggle(obj) {
      var el = document.getElementById(obj);
	  if ( el.style.display != 'none' ) {
		  el.style.display = 'none';
	  }
	  else {
		  el.style.display = '';
	  }
  }
  
  
  
  var enlace = document.getElementById("enlace_toggle");
  obj = "parrafo1";
  
  anadeEvento(enlace, "click", function(){toggle(obj)})
  
});

A la hora de manipular el DOM tenemos el siguiente listado de expresiones

• document.getElementById(id_elemento);: Permite acceder al primer elemento con id “id_elemento”
• document.getElementsByTagName(elemento): Devuelve una lista de nodos con todos los elementos con el nombre “elemento”.
  En caso de querer hacer referencia a un elemento específico, por ejemplo el primero, podríamos hacer uso de la expresión: document.getElementsByTagName(elemento)[0]
• document.createElement(elemento);: Crea un nuevo elemento en el DOM
• document.createTextNode(“texto”);: Genera un nuevo nodo de texto.
• appendChild: Añade un nodo hijo a un padre concreto. Por ejemplo:
  

  var nuevoEnlace = document.createElement("a");
  var nodoTexto = document.createTextNode("Esto es un enlace");
  nuevoEnlace.appendChild(nodoTexto);

• elementoPadre.insertBefore(nuevoElemento, elementoReferenciado);: Inserta un elemento justo antes de otro que le especifiquemos.
• innerHTML: Permite introducir HTML dentro de una etiqueta.
• parentNode: Selecciona el nodo padre de un nodo en concreto.
• removeChild: Elimina un nodo hijo
• getAttribute(propiedad);: Devuelve el valor de una propiedad que le pasamos por parametro
• ancla.style.display: Devuelve un estilo concreto de un elemento
• document.getElementsByClassName(names);: Retorna un conjunto de elementos los cuales poseen la clase “names”.

getElementsByClassName pertenece a la nueva especificación de HTML5 y tan solo algunos navegadores lo soportan, por ejemplo Internet Explorer en todas sus versiones inferiores a la 9.

Hasta que todos los navegadores soporten getElementsByClassName podremos hacer uso de la siguiente función:

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp('(^|\\s)'+searchClass+'(\\s|$)');
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

Podemos encontrar información mas detallada en la siguiente página: Introducción a la manipulación del DOM mediante Javascript (Maestros del web)

Después de una temporadita haciendo uso de la librería jQuery he olvidado algunos conceptos básicos de javaScript por lo que empezaré una serie de posts tratando alguno de estos conceptos a modo de recordatorio personal, si además le sirve a alguien más pues mejor que mejor.

Como refleja el título del post empezaré abordando el manejo de los eventos. Es importante a la hora de asignar los eventos separar el código js del HTML por motivos de accesibilidad.

<a href="javascript:window.open()">Abrete sésamo</a> <!-- javaScript intrusivo -->

Para evitar tener javaScript intrusivo en nuestra página empezaremos por apoyarnos en la función de Simon Willison addLoadEvent. Esta función nos permitirá cargar varias funciones una vez la página se haya cargado, además funcionará correctamente en el caso de que el evento onload haya sido asignado previamente.

function addLoadEvent(func) {
	var oldonload = window.onload;
	if (typeof window.onload != 'function') {
		window.onload = func;
	}
	else {
		window.onload = function() {
			oldonload();
			func();
		}
	}
}

addLoadEvent(function() { 
   //funcionabilidad
});

Por otro lado haremos uso de dos funciones para añadir y borrar los eventos que queramos: “anadeEvento” y “borrarEvento”. Pasaremos como parámetros de las funciones el elemento al que queremos asignar el evento, el evento y la función que queremos ejecutar.

function anadeEvento(elemento,evento,funcion) {
	 if(document.addEventListener){
         elemento.addEventListener(evento, funcion, false);  // Resto navegadores
     }
     else{
         elemento.attachEvent("on"+evento,  funcion ); // IE8-
     }
  }
  
  function borrarEvento(elemento,evento,funcion) {
	   if(document.removeEventListener){
		   elemento.removeEventListener(evento, funcion, false);  // Resto navegadores
	   }
	   else{
		   elemento.detachEvent("on"+evento,  funcion ); // IE8-
	   }
  }

Como podéis ver en el código hay que realizar funcionabilidades distintas dependiendo del navegador. Para Internet Explorer 8 o inferior hacemos uso del método attachEvent mientras que para el resto de navegadores usamos addEventListener. A la hora de borrar eventos IE hace uso de detachEvent y el resto utiliza removeEventListener

Voy a realizar un ejemplo sencillo a modo de prueba en el que tendremos un botón con el típico alert “hola mundo” y otro botón que será el encargado de anular el evento que hace saltar el mensaje.

hola mundo! borrar

A continuación os dejo el código al completo:

Prototipos

Son muchas las dudas existentes entre distintos desarrolladores sobre si JavaScript es un lenguaje orientado a objetos. Lo que si sabemos con seguridad es que está basado en prototipos. Un prototipo es un objeto abstracto, capaz de contener variables que hacen las veces de propiedades y funciones que actúan como métodos.

[Objeto = Prototípo]{
    [ Propiedad = Variable ]
    [ Método = Funcion ]
}

VER EJEMPLO

Vamos a realizar un carrusel de fotos apoyándonos en las ventajas que nos sirven los prototipos en Javascript. Lo primero que tendremos que hacer es crear un objeto instanciable mediante el objeto Function() y crear el constructor dentro de está función con todas las propiedades y métodos que vamos a necesitar para construir nuestro carrusel de fotos:

//PROTOTIPO CARUSEL
var carrusel = function(){
   this.velocidad = 1000; //velocidad a la que se desplaza el carrusel (ms)
   this.posicion = 0; //posición del carrusel
   this.desplazamiento = 151; //desplazamiento del carrusel
   this.num_elementos = 1; //inicializamos a 1 el número de elementos del carrusel
   this.desplazar = function(movimiento){
	   instancia = this;
	     
	   $(".listado-carrusel").animate({
		  left: movimiento		
		}, instancia.velocidad, function() {
			
			//Controlamos el estado de los botones de navegación
			if(instancia.posicion == instancia.num_elementos - 1)
			  $(".btn_siguiente a").addClass("desactivado");
			if(instancia.posicion == 0)
			  $(".btn_anterior a").addClass("desactivado");  
			  
		});
   }   
}

Como podéis ver al inicio del constructor declaramos todas las propiedades (velocidad, posición, desplazamiento, número de elementos) y el método desplazar. Podríamos declarar todas las propiedades y métodos que quisiéramos consiguiendo así un carrusel mucho más sofisticado aunque por ahora con esto nos servirá para ver como funcionan los prototipos.

Una vez tenemos el constructor tan solo tenemos que llamarlo con el operador new.

var carrusel1 = new carrusel();	//Creamos el objeto carrusel1

Acabamos de crear el objeto “carrusel1″ a partir del objeto instanciable carrusel. A partir de aquí ejecutaremos nuestros eventos y asignaremos los valores a las propiedades de nuestro objeto carrusel1 tal que así:

carrusel1.num_elementos = $(".listado-carrusel li").length; //numero de elementos del carrusel

Cada vez que queramos desplazar el carrusel tan solo habrá que llamar al método desplazar

carrusel1.desplazar(movimiento); //desplazamos carrusel

A partir de aquí y apoyándonos en jQuery el resto es sencillo. A continuación os dejo el ejemplo y el código al completo.

Esta vez escribiré acerca de domsearch.js un plugin de jQuery desarrollado por @julio_ody.

Este plugin nos da la posibilidad de realizar busquedas ya sea en tablas, amplios listados, etc. en tiemo real y sin la necesidad de tener que recargar la página.

A continuación os dejó un ejemplo. Se trata de una tabla con todos los pilotos de formula 1 y sus respectivas escuderías, mediante el buscador podemos localizar rapidamente al piloto, ya sea por su nombre, escudería o ambos.

Si lo que queremos es escalar imágenes según las dimensiones del navegador de nuestros usuarios una buena opción es utilizar el plugin de jquery Maximage desarrollado por Aaron Vanderzwan.

Maximage escala las imágenes deseadas a su máxima anchura acorde con el tamaño del navegador, el ratio de la imagen y otras opciones.

Podéis ver un ejemplo pinchando aquí. Redimensionar vuestro navegador y fijaros en como la imagen irá escalándose automáticamente.

Para empezar a utilizar este útil plugin tan sólo tendréis que descargarlo y hacer la llamada en el <head> de nuestro documento html. No os olvidéis de hacer antes la llamada a jquery

<script src="jquery.pack.js" type="text/javascript"></script>
<script src="jquery.maximage.js" type="text/javascript"></script>

A continuación insertar el siguiente script:

<script>
$(document).ready(function(){
 $('img.className').maxImage({
  isBackground: true
 });
});
</script>

Mediante la opción isBackground: true ajustamos la imagen al navegador. Por último insertaremos la clase utilizada en el script (en nuestro caso className) en la imagen que deseamos maximizar

<img class="className" src="foto.jpg" alt="descripción de la foto" />

Alguna de las opciones configurables del plugin son las siguientes:

Fxcanvas es una implementación del elemento canvas de HTML5 para Internet Explorer. El proyecto esta desarrollado por Google y la librería tiene los siguientes requisitos:

Requisitos

• Flash Player 9+ en Internet Explorer (Algunas versiones a partir de la 10.1 puede que no funcionen correctamente)
• IE 5.5 +. (IE9 no lo soporta por ahora)

Fxcanvas nos permite trabajar solo con gráficos en dos dimensiones.

Uso

Descargar el comprimido en el directorio publico del servidor y pegar las siguientes llamadas js en la sección head de nuestro documento.

<head>
  <script type="text/javascript" src="/public/path/jooscript.js"></script>
  <script type="text/javascript" src="/public/path/fxcanvas.js"></script>
  <!--[if IE]><script type="text/javascript" src="/public/path/flash_backend.js"></script><![endif]-->
  <comment><script type="text/javascript" src="/public/path/canvas_backend.js"></script></comment>
</head>

Manuales de canvas

Si todavía no habéis trasteado demasiado con canvas podéis echar un vistazo a estos tutoriales

• Tutorial de canvas en Mozila.org
• Dev.Opera

Ejemplo

A continuación realizaré un ejemplo muy básico en el que usaremos tanto imagenes como textos. Pongamos por ejemplo que nos piden realizar una gráfica con los resultados de las votaciones del balón de oro.
ver ejemplo
descargar ejemplo (86 Kb)