Armonía | En definitiva...

El script para activar los contenidos embebidos de un documento Web que mi amigo David Muñoz me pidió que publicara por aquí ya tiene página propia.

Pasaos por allí y echad un vistazo, no tiene desperdicio, un script muy útil. ¡Gracias David!

El señor David Muñoz, (no dispone de página web), me ha pedido que suba y publique este pequeño Javascript que ha preparado, y yo, encantado por la petición y por la calidad de lo que ha hecho, lo hago encantado

El script en cuestión sirve para, cito textualmente:

"JS Embedded Content" es una pequeña aplicación Javascript que permite la activación automática de los elementos OBJECT, EMBED y APPLET incrustados en un documento HTML (películas Flash, applets de Java, archivos de video, etc.); de esta manera se evita que estos elementos deban ser activados manualmente por el usuario, porcedimiento necesario para que pueda interactuar con ellos en Internet Explorer 7, algunas actualizaciones de Internet Explorer 6 y en algunas versiones de Opera 9.

Hace ya algún tiempo descubrí una pequeña librería de efectos Javascript de tan sólo 3Kb, lo cual era de agradecer teniendo en cuenta las mastodónticas librerías Javascript a las que estamos acostumbrados, (Dojo, Prototype, etc.). Pero como no soy muy aficionado a las animaciones no le hice a moo.fx el caso que merece.

Pues hace algunos días resulta que Mad4milk, los creadores de moo.fx, sacaron a la luz moo.dom, una de nuevo pequeñísima librería para acceder a los elementos del DOM mediante Javascript usando selectores CSS. Esto, que puede parecer un poco confuso explicado así, es una auténtica maravilla para los interesados en jugar con nuestros documentos.

Imaginad que podemos acceder a los elementos del DOM, por ejemplo los <li> de una lista ordenada que sirve de menú principal de una Web, de la siguiente manera: var elementos = $S("#menuPrincipal li");. Así tendremos en la variable elementos un array de elementos del DOM, donde cada uno de ellos es un <li> del menú principal, para poder jugar con ellos como queramos.

Esto es una maravilla, y en una librería de muy poco tamaño. Pero esto no es todo, además de seleccionar los elementos del DOM con Javascript mediante selectores CSS, también podemos usar las denominadas "acciones". Esto no es más que la posibilidad de añadirles eventos a los elementos seleccionados con la función $S();, (la función base de moo.dom). Con lo cual, si quisieramos añadir un evento onclick a los <li> del menú superior del ejemplo anterior, no tendríamos más que hacer lo siguiente:

$S("#menuPrincipal li").action ({
  onclick: function() {
    this.style.color = "blue";
  }
});

Maravilloso, ¿verdad? Pues dadles las gracias a los chicos de Mad4milk, unos auténticos genios.

Siguiendo con las funciones Javascript, (se nota que estoy liado con DOM Scripting, de Jeremy Keith), hoy le toca el turno a una función muy sencilla, pero que puede facilitarnos una tarea bastante común a la hora de realizar pequeñas cositas mientras jugamos con el DOM.

En ocasiones necesitamos aplicarle estilos a un elemento desde Javascript, pero como todos sabemos la mejor forma de tocar los estilos en un documento Web es mediante CSS, así que lo que deberíamos hacer es jugar con su atributo class, (lo que acabo de decir no es cierto siempre, pero en principio es una buena práctica).

Esto normalmente se haría modificando desde Javascript el className del elemento que queramos cambiar. ¿Pero que ocurre si el elemento ya tenía previamente una clase asignada? Pues si usamos el className la sobreescribiremos, quedandonos unicamente con la nueva clase y perdiendo la anterior.

Para solucionarlo tenemos esta bonita función, que añade una clase al elemento que le especifiquemos, concatenándola si previamente tenía alguna, o creando una nueva si no tenía ninguna.

/* ----------------------------------------------------------------
addClass(element, value)
	
Función para añadir una clase CSS, (atributo className),
teniendo en cuenta si ya tenía previamente una clase o no.
Si es así la concatena, quedando del estilo:
	
class="clase1 clase2"
	
Parámetros:
	- element:  Elemento al que se añadirá la clase.
	- value:    Valor para la nueva clase.

Ejemplos de uso:
	- Añadimos la clase "bar" al elemento con "id" igual
	  a "foo".
		
	  var foo = document.getElementById("foo");
	  addClass(foo, "bar");
---------------------------------------------------------------- */
function addClass(element, value) {
	if (!element.className) {
		element.className = value;
	} else {
		var newClassName = element.className;
		newClassName += " ";
		newClassName += value;
		element.className = newClassName;
	}
}

Una de las funciones más utiles que hay disponibles para trabajar con Javascript: la función dólar $()

Hay varias versiones de esta función, aunque la original se creó para la librería Javascript Prototype. En principio la función $() es una forma corta para usar getElementById(), aunque pronto se vió extendida y mejorada.

Yo personalmente me quedo con la que os pongo a continuación, que además de permitirnos usar de forma corta el getElementById(), nos da la posibilidad de especificar múltiples parámetros para buscar todos los elementos que queramos, devolviendonos un array con todos los objetos encontrados.

/* ----------------------------------------------------------------
$()
	
Función "recolectora de elementos". Normalmente se usa como
sustituto de escritura rápida para document.getElementById().
Se le pueden pasar los parámetros que se quieran, pudiendo
ser estos cadenas u objetos.
	
Ejemplos de uso:
	- Obtenemos el elemento con "id" igual "foobar".
		
	  var foobar = $("foobar");
		
	- Obtenemos en un array los elementos con "id" igual a
	  "foo" y "bar"
		
	  var foobar = $("foo", "bar");
---------------------------------------------------------------- */
function $() {
	var elements = new Array();
	for (var i = 0; i < arguments.length; i++) {
		var element = arguments[i];
		if (typeof element == "string") {
			element = document.getElementById(element);
		}
		if (arguments.length == 1) {
			return element;
		}
		elements.push(element);
	}
	return elements;
}