JSBin, JSBeautifier y JSFiddle

JSBin es un servicio online que nos permite introducir código HTML, CSS y JavaScript y verificar su funcionamiento. Está pensado para que los desarrolladores puedan trabajar de manera colaborativa.

En http://jsbin.com podemos editar sin dificultades, incluir alguna de las librerías más comunes e incluso, guardar la URL del proyecto y hacerla pública. (Más info.)

JSBeautifier, te organiza y modifica estéticamente tu código Javascript, de modo que este sea más placentero a la vista y siga estándares de formatos de programación.

jsbeautifier.org

JSFiddle, potente herramienta para Javascript y frameworks como JQuery y Prototype.js
Al igual que as anteriores se trata de una herramienta 100% web. Lo que JSFiddle te ofrece es un ambiente de varias ventanas dentro de tu navegador web, en donde en una de ellas puedes escribir HTML, y en otra sentencias de Javascript (como por ejemplo, selectores de JQuery), y después en otra ventana ves el resultado.

Con JSFiddle eliges la versión de la librería que deseas, copias un pedazo de HTML (o utilizas el que te ofrecen por defecto), lo modificas, y escribes tu Javascript para ver si hace lo que esperas que hagas, y listo. Varios minutos se reducen a segundos.

JSFiddle

Patrón Decorator para Javascript

El patrón decorator es un patrón de diseño que permite añadir un comportamiento adicional a un objeto existente dinámicamente.

var JQuery ={
	getNombre:function(){
		return "Pepe"; 
	}
};

//Decorado del objeto con la capacidad de formar un nombre completo
(function($){
        $.test = function(apellido){ 
                      return JQuery.getNombre() + " " + apellido;
        }
})(JQuery);

// Usando la funcionalidad decorada
console.log( JQuery.test("Contreras") );

El resultado obtenido es: «Pepe Contreras»

Patrón Módulo Revelado para Javascript (Revealing Module)

Se trata de uno de los patrones más utilizados y elegantes a la hora de organizar código javascript. Su principal atractivo es que resulta extremadamente útil para conseguir código reusable y, sobre todo, modular.
Consiste en una función que actúa como contenedor para un contexto de ejecución. En su interior, se declaran una serie de variables y funciones que solo son visibles desde dentro del mismo.

if(!es){
     var es = {};
}
if(!es.com){
     es.com = {};
}
if(!es.com.disastercode){
     es.com.disastercode = {};
}


es.com.disastercode.lib = ( function(){
  var prop = 'propiedad';

  var privateMethod = function(){
        return 'método privado';
  }
 
  return {
        publicMethod : f1,
	publicMethod2 : f2
  }
  
  
  function f1(){
        return privateMethod() + prop;
  }
  function f2(){
        return "";
  }
	
})();

var prueba = es.com.disastercode.lib;
console.log(prueba.publicMethod());

El resultado obtenido es: «método privadopropiedad»

Crear un select multiple con checkbox . Utilizando JQuery.

    Green
    Red
    Blue
    Orange
    Purple
    Black
    White

.multiselect {
    width:20em;
    height:15em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#000099;
}

jQuery.fn.multiselect = function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);
            // Highlight pre-selected checkboxes
            if (checkbox.attr("checked"))
                checkbox.parent().addClass("multiselect-on");
 
            // Highlight checkboxes that the user selects
            checkbox.click(function() {
                if (checkbox.attr("checked"))
                    checkbox.parent().addClass("multiselect-on");
                else
                    checkbox.parent().removeClass("multiselect-on");
            });
        });
    });
};

$(".multiselect").multiselect();

Fuente

Juego de diamantes online

Este juego ha sido realizado bajo las tecnologías DHTML, JQUERY y PHP.

Para su realización se ha optado por reutilizar un proyecto ya existente y que estaba basado en un motor de juego realizado en javascript de tipo Open Source.
Para obtener más información consultar, Open Source Diggy:

http://www.mobilegameengines.com/html5/engines/128-diggy

https://github.com/richtaur/diggy

La dirección es http://diamantebomba.disastercode.com.es.

Juego de memorizar parejas Online

Se ha realizado otro juego en HTML 5, JQuery y PHP. El juego es muy similar al anterior del rompecabezas. Consiste en una aplicación web que a partir de una serie de imagenes te genera un panel con 16 casillas que se deben ir abriendo de dos en dos acertando los pares iguales.
Cada pantalla tiene su propio ranking con los mejores tiempos de realización. Además, si quieres, puedes personalizar la pantalla que generan tus fotos y de esta forma p.e. añadir cualquier mensaje de publicidad de forma totalmente gratuito.

La dirección es http://hazparejas.disastercode.com.es.

Elementos y atributos nuevos para formularios con HTML 5

En HTML 5 se han añadido nuevos elementos para emplear en los formularios. Éstos presentan nuevas funcionalidades, A continuación, se muestra un listado con los distintos types que se pueden usar en formularios con HTML 5:

text – Para introducir texto, simplemente.
search – Específico para input en un buscador.
url – Específico para direcciones de página web. Requiere http:// o http: simplemente.
tel – Se supone que para números de teléfono aunque no he conseguido que haga nada.
email – El nombre lo dice.
password – Escribe el contenido en asteriscos.
date – Para introducir un fecha (mes, día y año).
time – Para introducir una hora en formato 24 horas (horas, minutos y segundos).
datetime – Para introducir fecha y hora.
datetime-local – Igual que el anterior pero sin posibilidad de indicar zona horaria, ya que se entiende que es la local.
month – Para indicar el mes de un año.
week – Para indicar una semana de un año.
number – Específico para numeros.
range – Sale una barra para elegir un número entre un rango, el número hay que indicarlo entre un min=»10″ y un max=»12″ (los números son de ejemplo.)
checkbox – Para seleccionar y deseleccionar.
radio button – Para seleccionar, uno obligatorio.
color – Para seleccionar colores.

Nuevos atributos de HTML 5:
– Los elementos de fecha y hora permiten atributos max y min. Para indicar fecha/hora máxima y mínima.
– Required que nos permite indicarle al formulario que ese campo es obligatorio.
– Placeholder permite introducir un texto de ejemplo en el cuadro de texto. De esta forma se da a entender como tiene que ser el formato de lo que se introduce.
– List nos permite asociar una lista a un cuadro de texto. El valor de este atributo list, debe coincidir con el identificador de una lista definida con una etiqueta datalist (esta etiqueta también es nueva en HTML 5. El resultado es un efecto muy parecido a un select pero con las ventajas de un text.
– Autofocus hace que un determinado elemento tome el foco.

Cómo se ve, se pueden validar formularios sin ningún esfuerzo y sin necesidad de javascript. Ya que se encarga de realizar la validación el propio formulario. Incluso se pueden añadir funcionalidades con css en función de si se ha rellenado correctamente o no. Tal que así:

Este codigo modifica los colores de todos los input, que se encuentran dentro de un form cuyo id es «idForm», cuando son válidos o inválidos.

Utilizar tags de HTML 5 en navegadores que no los soportan.

Para que funcionen las tags de html 5 en navegadores que no lo soportan (p.e. internet explorer 8 y anteriores). Basta con añadir el siguiente fragmento de javascript:

< script type="text/javascript">
   document.createElement("nav");
   document.createElement("header");
   document.createElement("footer");
   document.createElement("section");
   document.createElement("article");
   document.createElement("aside");
   document.createElement("hgroup");
< /script>

Además, se debe añadir la siguiente regla en la hoja de estilos.

nav, header, footer, section, article, aside, hgroup{
    display: block;
}

Manejador de eventos con DOM (addEventListener y removeEventListener)

El método addEventListener nos permite incluir un manejador de evento. La sintaxis de addEventListener es la siguiente:

elemento_que_se_escucha.addEventListener('evento', 
                              función_a_lanzar, booleano);

elemento_que_se_escucha – es cualquier elemento presente en un documento al que se quiere asociar el evento.
evento – es el suceso ocurrido sobre el elemento (click, load,…).
función_a_lanzar – es cualquier función definida que queramos que se ejecute cuando ocurra el evento.
booleano – es un valor que define el orden del flujo de eventos. (*NOTA 1)

Si se quiere escuchar un evento sólo una vez y luego elimnaro se debe utilizar el método removeEventListener:

elemento_que_se_escuchaba.removeEventListener('evento', 
                                función_a_anular, booleano);

NOTA 1: Explicación del parámetro booleano del método addEventListener con un ejemplo.
Supongamos que tenemos esto:

< body >
   

      CLICK
   
< /body >

Cuando hacemos clic en el botón no sólo lo estamos haciendo sobre él, sino sobre los elementos que lo contienen en el árbol del DOM, es decir, hemos hecho clic además sobre el elemento body y sobre el elemento div1. Sí sólo hay una función asignada a una escucha para el botón no hay mayor problema, pero si además hay una para el body y otra para el div, ¿cuál es el orden en que se deben lanzar las tres funciones?

Para contestar a esa pregunta existe un modelo de comportamiento, el flujo de eventos (inglés). Según éste, cuando se hace clic sobre un elemento, el evento se propaga en dos fases, una que es la captura —el evento comienza en el nivel superior del documento y recorre los elementos de padres a hijos— y la otra la burbuja —el orden inverso, ascendiendo de hijos a padres—. En un diagrama sería algo así:

Así, el orden por defecto de lanzamiento de las supuestas funciones sería body-div-button.

Una vez visto esto, podemos comprender el tercer parámetro de addEventListener, que lo que hace es permitirnos escoger el orden de propagación:
true: El flujo de eventos es como el representado, y la fase de captura ocurre al lanzarse el evento. El orden de propagación para el ejemplo sería, por tanto, el indicado, body-div-button
false: Permite saltar la fase de captura, y la propagación seguiría sólo la burbuja. Así, el orden sería button-div-body.

NOTA 2: En internet explorer no funciona en las versiones anteriores a la 7 (incluida).

Fuente

Resumen DOM (Document Object Model)

Un documento HTML presenta una estructura de árbol constituido por nodos. Estos nodos pueden pertenecer a uno de los siguientes tipos:
Elemento – Estos nodos representan los elementos del documento (br, input, select, p,…).
Atributo – Los nodos atributos representan las propiedades de los elementos.
Texto – Fragmento de texto del documento HTML.

Para obtener los elementos se pueden usar los siguientes métodos: getElementById, getElementsByTagName y getElementsByClassName. (El primero devuelve el elemento que tiene el id solicitado mientras que los dos últimos devuelven un array de elementos seleccionándolos por el tipo de tag html y de class respectivamente)
Y para trabajar con sus atributos: getAttribute y setAttribute

Por otro lado, se pueden utilizar los siguientes métodos para recorrer esa estructura de árbol:
parentNode – Obtiene el nodo padre del nodo actual.
childNodes – Obtiene los nodos hijos del nodo actual (devuelve un array). Entre sus nodos hijos tiene en cuenta los nodos de texto.
firstChild – Obtiene el primer hijo del nodo actual.
lastChild – Obtiene el último hijo del nodo actual.
previousSibling – Obtiene el hijo del nodo padre anterior al nodo actual.
nextSibling – Obtiene el hijo del nodo padre siguiente al nodo actual.

También se pueden utilizar las siguientes propiedades:
nodeName – El nombre del nodo, que se define dependiendo del tipo de nodo. (Se corresponde con la etiqueta HTML en el caso de un nodo elemento o #text si se trata de un nodo texto).
nodeValue – El valor del nodo, que se define dependiendo del tipo de nodo.
nodeType – Un número que representa el tipo de nodo del que se trata. Un número del 1 al 12 (1 para nodos elemento, 2 para nodos atributos, 3 para nodos texto).

Métodos para crear, eliminar y reemplazar nodos:
createElement – Con éste método del objeto document crearíamos un nuevo elemento con un tag determinado (Pertenece a Document) (var elemento = document.createElement(tag))
createTextNode – Crea un nodo texto. (Pertenece a Document)
cloneNode – Crea un nodo idéntico a otro existente. (var clonedNode = nodo_padre.clone(nodo_hijo))
appendChild – Añade un nodo como hijo de otro. Sirve para incorporar el nuevo nodo al árbol del documento. (nodo_padre.appendChild(nodo_hijo))
insertBefore – Inserta un nodo antes de otro en el árbol del documento. (nodo_padre.insertBefore(nuevo_nodo, viejo_nodo))
removeChild – Elimina un nodo hijo. (nodo_padre.removeChild(nodo_hijo))
replaceChild – Reemplaza un nodo hijo. (nodo_padre.replaceChild(nodo_hijo))

NOTA: Por último, tenemos el método innerHTML que se puede utilizar como alternativa a DOM. Esta función es, sin duda, la más utilizada para actualizar código html de nuestra página. Pero esta función no nos servirá para agregar nuevo código html sin eliminar el anterior. Es decir, si tenemos contenido dentro de un div y aplicamos innerHTML a este div, el contenido previo será eliminado y reemplazado por el nuevo.