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

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)

Web storage es un API de HTML5 que nos permite guardar datos estructurados en el cliente. Sustituye a las famosas cookies que son enviadas en las cabeceras HTTP. Los datos almacenados en disco solo podrán ser accedidos desde el cliente y no desde el servidor, se busca con esto aumentar la seguridad de la información enviada, además el tamaño de los datos almacenados en disco podrá ser mayor, aproximadamente de 5 Mb.

Web Storage define dos tipos de almacenamiento: sessionStorage y localStorage

sessionStorage

La información manejada mediante este mecanismo podrá ser accedida solo durante la sesión y en caso de tener varias ventanas abiertas la información mostrada en cada una de ellas podrá ser distinta. Los datos se perderán una vez se cierre el navegador.

localStorage

Permite guardar datos que podrán ser accedido una vez cerremos el navegador. La información será la misma en todas las ventanas abiertas dentro de una misma sesión.

Tanto sessionStorage como localStorage pueden hacer uso de los siguientes métodos y atributos:

• setItem (setItem(key, value)): Permite almacenar un valor para una clave dada
• geItem (geItem(key)): Permite recuperar un valor de clave dada
• removeItem (removeItem(key)): Bora una clave y su valor
• clear (clear()): Borra todas las claves almacenadas
• length Este atributo nos permite calcular el número de claves guardadas
• key (key(index)): Permite recuperar una clave pasándole un índice determinado. Mediante un bucle y el uso de este método podremos recuperar todas las claves guardadas en nuestro disco.

  Código JavaScript

  
  for (var i= 0; i < localStorage.length; ++ i){
      claves[i] = localStorage.key(i)
  }
       

Respecto al soporte que ofrecen los navegadores web para esta API lo podéis ver en la siguiente tabla: Fuente: caniuse.com

Hace ya unas semanas mi compañero de fatigas y uno de mis grandes comentaristas del blog XD Alberto, me metió en la cabeza la fricada de representar el movimiento ondulatorio con JavaScript. En un principio pensé que estaría jodidillo el asunto pero como veréis a continuación es bastante sencillo.

Onda vaaaaaaaaaaaaaaaa!:

Para conseguir pintar nuestra onda simplemente nos servimos de la ecuación del movimiento ondulatorio:

y(x, t) = A * cos(wt – kx)

donde:

A =

Amplitud

w =

frecuencia angular

t =

tiempo

k =

Número de onda

x =

Posición sobre el eje x

A continuación os pongo el codiguillo JavaScript que utilizo para pintar la onda por si os sirve de ayuda

var movimiento = "";
var n_posicion = 0;
var j = 0;
var longitud = 36;

/* CONFIGURACION DE LA ONDA */
var caracter = "*"; //caracter con el que se representa la onda
var xo = 0 // valor inicial de la posición de la onda sobre el eje x
var yo = 80; // valor inicial de la posición de la onda sobre el eje y
var v = 400; // velocidad de la onda
var A = 60; // Amplitud
var T = 18; // Periodo
var longitud_onda = 10; // Longitud de onda
/* FIN CONFIGURACION DE LA ONDA */


var w = ( 2 * 3.14 ) / T;
var k = ( 2 * 3.14 ) / longitud_onda;
$("li#pos0").css({ left: yo + "px" });

function movimiento_armonico(){
	$(document).ready(function(){
		movimiento = movimiento + "<li id='pos"+ n_posicion + "'>" + caracter + "</li>";
		$("#onda").html(movimiento);		
		
		for (i=0; i < n_posicion; i++)
		{
			x = xo + i
			t = i;
			y = yo + (A * Math.cos((k * x) - (w * t)))			
	
			$("li#pos" + i).css({ top: y + "px" });
			$("li#pos" + i).css({ left: x + "px" });
		}
		n_posicion++;
		j++;
		if(j == longitud + 1)
			clearInterval(onda);
		});
		$("#onda li:last").hide();	
}

onda = setInterval("movimiento_armonico()", v);