Modernizr como librería Javascript está orientada a poder conocer el soporte de las capacidades CSS3 y HTML5 cuando nos ejecutemos en un determinado navegador. Pero la potencia de Modernizr no se queda solo ahí, si no que podemos hacer otras cosas como utilizar un polyfill.

Pero, ¿qué es un polyfill? Pues un polyfill es como se denomina a una librería Javascript que nos permite cubrir las capacidades HTML5/CSS3 que los navegadores no soportan. Es decir, completan al navegador para que se pueda ejecutar una página web construida con HTML5/CSS3 sin problemas.

Es decir, el código que creemos será estándar HTML5/CSS3 de tal manera que Modernizr nos ayudará a utilizar solo el polyfill si se necesita debido a las carencias del navegador.

Lo bueno es que Modernizr ya cuenta con una extensa librería de Polyfills.

En nuestro ejemplo, que nos explique como utilizar un Polyfill en Modernizr, vamos a crear una página que tenga un Placeholder y en el caso que no haya soporte del placeholder utilizaremos un plugin de jQuery que nos simule en Placeholder. Ambos artículos ya explicados en Línea de Código.

Para utilizar el polyfill de Modernizr tenemos que conocer el método Modernizr.load. La filosofía de este método es la siguiente:

Modernizr.load({
  test: capacidad-a-validar,
  yep : 'fichero-a-cargar-si-correcto.js',
  nope: 'fichero-a-cargar-si-no-soporte.js',
  complete: 'cosas-a-hacer-siempre.js'
});

Es decir, se testea la capacidad de HTML5/CSS3 que queramos cubrir. Si hay soporte se cargan los ficheros Javascript o CSS3 que haya en la parte del yep. Si no se soporta la propiedad testeada, se cargan los ficheros del nope. Y siempre, pase lo que pase, se carga lo que haya en complete.

Nosotros vamos a testear la propiedad Modernizr.input.placeholder que valida si hay soporte de placeholders. En el caso de que no lo haya cargamos el plugin 'jquery.placeholder.js' y lo inicializamos.

Para inicializar el plugin tendremos que ejecutar la siguiente línea de código:

$("input, textarea").placeholder();

El código del como utilizar un polyfill en Modernizr nos quedaría de la siguiente forma:

Modernizr.load({
        test:Modernizr.input.placeholder,
        nope:['http://lineadecodigo.com/js/jquery/jquery.js','http://lineadecodigo.com/js/jquery/plugins/jquery.placeholder.min.js','placeholder.js']
});

En placeholder.js hemos metido la inicialización del plugin.

Esperamos que se haya entendido el concepto del polyfill en Modernizr y cómo cargarlos. En vuestro caso, ¿qué polyfills estás utilizando?Similar Posts:

• Crear un slider con jQuery
• Modernizr y las capacidades HTML5 y CSS3
• Utilizar Placeholder con jQuery
• PlaceHolder: Marcadores de posición en HTML5
• JSEclipse

Comparar con la fecha del sistema en Javascript nos sirve para saber la diferencia de fechas entre el día de hoy y otra fecha. Esto nos serviría desde casos en los que queramos saber hace cuanto tiempo publique esta entrada en el blog, o cuánto queda para el día de mi cumpleaños o cuánto queda hasta año nuevo.

Realmente lo que estamos haciendo es restar dos fechas en Javascript, la que nos da el usuario contra la fecha del sistema.

Para obtener la fecha del sistema simplemente instanciaremos un objeto Date.

fecha = new Date();

Ahora cogeremos la fecha del usuario. Para ello ya vimos en el ejemplo de cómo convertir una cadena de texto en una fecha los pasos que teníamos que seguir:

var boton = document.getElementById("calcular");
boton.addEventListener("click",function(ev){
 
  dia = document.getElementById("dia").value;
  mes = document.getElementById("mes").value;
  annio = document.getElementById("annio").value;
 
  fecha_texto = annio+"-"+mes+"-"+dia;
 
  ms = Date.parse(fecha_texto);
  fecha2 = new Date(ms);
 
},false);

Ahora toca la resta, para ejecutar la resta convertimos previamente la dos fechas en milisegundos con el método .getTime(). A este valor lo dividimos por los milisegundos que representan un día (1000 ms * 60 segundos * 60 minutos * 24 horas).

Por último realizaremos un redondeo apoyándonos en el método .ceil() del objeto Math de Javascript.

one_day=1000*60*60*24;
diferencia = Math.ceil((fecha.getTime()-fecha2.getTime())/(one_day));
texto = (diferencia>0)?"Hace " + diferencia:"Dentro de " + (diferencia*-1);

Utilizaremos el operador ternario para adecentar nuestra respuesta y diferenciar si la fecha paso (resultado positivo) o todavía no hemos llegado (resultado negativo).
Ya tenemos nuestra comparación con la fecha del sistema en Javascript.Similar Posts:

• Convertir una cadena a fecha en Javascript
• Obtener fecha de modificación de un fichero con Java
• Obtener la fecha en un JSP
• Obtener fecha actual con Java
• Convertir segundos en formato hora con Javascript

En este ejemplo vamos a ver cómo podemos convertir una cadena a una fecha, es decir un elemento Date, en Javascript. A primeras parece que pensar que es algo tan trivial como pasarselo en la inicialización. Pero veremos que tenemos ciertas restricciones.

Y es que en el fondo, sí, podemos escribir la siguiente línea de código:

var fecha = new Date("Sat, 4 Feb 2012");

Pero, ¿qué podemos utilizar como cadena de texto? Lo que podemos utilizar es todo aquello que podamos analizar mediante el método .parse() del objeto Date.

Date.parse(cadena);

Y si miramos qué soporta el método .parse() veremos que el texto que le pasemos tiene que estar en formato RFC822 o ISO 8601. Así el método nos devolverá los milisegundos desde el 1 de enero de 1970.

Si no te apetece leerte que dicen los estándares RFC822 y ISO 8601 te lo resumiremos en que tienen que ser fechas en formato:

dia_semana, dia hora
yyyy-mm-dd

Y formatos similares. Así el 4 de febrero del 2012 podría declararse como:

Sat 4 Feb 2012 12:20:34
2012-02-04

Nosotros, para evitar formateos adicionales vamos a montar la fecha por nuestra cuenta, así que utilizaremos un formulario para pedirle al usuario los datos. El formulario será el siguiente:

 
<form>
<label for="dia">
<input type="text" id="dia" size="2" value="01"></label>/
<label for="mes">
<input type="text" id="mes" size="2" value="02"></label>/
<label for="annio">
<input type="text" id="annio" size="4" value="2012"></label><br/>
<button id="calcular">Calcular Fecha</button>
</form>
 

Y ahora, controlando el evento de pulsar sobre el botón, es decir, utilizando un addEventListener()

var boton = document.getElementById("calcular");
boton.addEventListener("click",function(ev){
  ...
},false);

Vamos a componer nuestra fecha. Obtenemos los valores del formulario y componemos la fecha en formato yyyy-mm-dd

dia = document.getElementById("dia").value;
mes = document.getElementById("mes").value;
annio = document.getElementById("annio").value;
fecha_texto = annio+"-"+mes+"-"+dia;

Lo siguiente será parsearla y crear una fecha (aunque podríamos haber hecho solo lo segundo)

ms = Date.parse(fecha_texto);
fecha = new Date(ms);

Por último volcamos el contenido del Date a un campo y bloqueamos que se lance el evento del botón con .preventDefault() para poder ver el resultado y no enviar el formulario.

document.getElementById("fecha").innerHTML = fecha;
ev.preventDefault();

El código entero del manejador quedaría de la siguiente forma:

var boton = document.getElementById("calcular");
boton.addEventListener("click",function(ev){
 
	dia = document.getElementById("dia").value;
	mes = document.getElementById("mes").value;
	annio = document.getElementById("annio").value;
 
	fecha_texto = annio+"-"+mes+"-"+dia;
 
	ms = Date.parse(fecha_texto);
	fecha = new Date(ms);
 
	document.getElementById("fecha").innerHTML = fecha;
	ev.preventDefault();
 
},false);

Similar Posts:

• Comparar con la fecha del sistema en Javascript
• Activar el corrector ortográfico con HTML5
• Fecha en castellano con VBScript
• Tiempo visualizado del vídeo en HTML5
• Obtener fecha de modificación de un fichero con Java

Ciertos sistemas o propiedades nos pueden dar datos en formato de segundos. Si estamos en ese caso y queramos convertir segundos en formato hora con Javascript deberemos de seguir los siguientes pasos.

Lo primero será guardar en una variable los segundos:

segundos = 1341;

Ahora instanciaremos un objeto de Tipo Date. La inicialización del objeto Date es mediante milisegundos, por lo que necesitaremos multiplicar por 1000 nuestro valor en segundos.

var d=new Date(segundos*1000);

Ahora solo tenemos que acceder a los métodos del objeto Date. Al .getHours(), getMinutes() y getSeconds(). Estos nos dará los valores en formato hora.

var hora = (d.getHours()==0)?23:d.getHours()-1;
var hora = (hora<9)?"0"+hora:hora;
var minuto = (d.getMinutes()<9)?"0"+d.getMinutes():d.getMinutes();
var segundo = (d.getSeconds()<9)?"0"+d.getSeconds():d.getSeconds();

De este código hay que fijarse en dos cosas. La primera es que el valor de la hora retornará una hora más de la que realmente es. Es por ello que hacemos la corrección.

var hora = (d.getHours()==0)?23:d.getHours()-1;

Y lo segundo en lo que debemos de fijarnos es en el uso del operador ternario para poner los minutos, segundos y horas en un formato de dos dígitos. Y es que los valores inferiores al 10 siempre vendrán solos. Es decir, 1, 2, 3, 4,... cuando nosotros queremos poner 01, 02, 03, 04,...

Solo quedará volcar el contenido y añadir los dos puntos:

document.write(hora+":"+minuto+":"+segundo);

Ya hemos visto que con el uso del objeto Date hemos conseguido convertir segundos en formato hora con Javascript.Similar Posts:

• Reloj en JavaScript
• Reloj Javascript en una capa
• Reloj con la hora del servidor
• Tiempo visualizado del vídeo en HTML5
• Obtener fecha de modificación de un fichero con Java

Una cosa básica que tenemos que aprender a empezar con Javascript es el manejo de arrays y por consiguiente saber como inicializar un array en Javascript.

Lo primero será instanciar el array...

var miarray = new Array(4);

Una vez instanciado el array vemos que tenemos varias formas de inicializar un array en Javascript. La primera es indicando los valores del array en la propia instanciación.

var ciudades = new Array("Avila","Salamanca","Zamora","León");

La segunda es asignando los valores a cada una de las posiciones del array.

var ciudades = new Array(4);
ciudades[0] = "Avila";
ciudades[1] = "Salamanca";
ciudades[2] = "Zamora";
ciudades[3] = "León";

En nuestro caso hemos declarado un array de 4 posiciones y a la hora de asignar los valores tenemos que recordar que en Javascript el primero de los elementos es el 0 y el último será el tamaño del array menos 1.

Si pensamos en la optimización de los arrays se puede evitar el uso de la sentencia new. Ya que el Array es un elemento primitivo del lenguaje. En este sentido, la forma más óptima sería la siguiente:

var ciudades = ["Avila","Salamanca","Zamora","León"];

Así crearemos el array en base a un conjunto de cadenas.

Por último recordemos que los arrays de Javascript no están tipados. Es por ello que podemos inicializar un array en Javascript con diferentes tipos de datos: cadenas, enteros, booleanos,... En este caso podríamos tener la siguiente inicialización de un array:

var miarray = new Array("Victor",34,true);

Similar Posts:

• Recorrer un array en VBScript
• Inicializar un array en Java
• Listas de Elementos en jQuery Mobile
• Bucle for-each en Java
• Copiar dos arrays en uno con Java

Modernizr es una librería Javascript que nos va a ayudar con la detección del soporte de capacidades HTML5 y CSS3 de un navegador. Si vamos a utilizar HTML5 o CSS3 en nuestra página web, Modernizr nos va a indicar cuales de los elementos o funcionalidades de estos lenguajes están disponibles en el navegador web que está cargando nuestra página.

Lo primero que tenemos que hacer es ir a la web de Modernizr y descargarnos la librería. Hay que indicar que tenemos una versión para desarrollo y una versión para producción la cual es parametrizable. Para las pruebas puedes utilizar la primera, ya que es la que trae todas las funcionalidades de Modernizr.

Una vez tenemos la librería, tenemos que incluirla en nuestra página, mediante una carga normal de un script:

<script type="text/javascript" src="modernizr.js"></script>

Ahora ya pasamos a preguntar por capacidades HTML5 y CSS3. Por ejemplo, si queremos saber si el navegador tiene soporte para el elemento Canvas pondremos lo siguiente:

if (Modernizr.canvas)
	document.write("SI que existe soporte de canvas<br/>");
else
	document.write("NO existe soporte de canvas<br/>");

Vemos que la variable Modernizr.canvas es la que nos devuelve un true o un false dependiendo de si hay soporte en el navegador o no.

Otra de las variables nos permite conocer si hay soporte del elemento vídeo. En este caso es la variable Modernizr.video. Y el código a utilizar, similar al anterior:

var video = (Modernizr.video)?true:false;
if (video) document.write("Si se soporta el elemento vídeo");
 

Lo mismo pasa con las capacidades de CSS3. Por ejemplo, si queremos saber si el navegador soporta las animaciones de CSS3, podemos preguntar por el atributo Modernizr.cssanimations.

var cssanimations = (Modernizr.cssanimations)?true:false;
if (cssanimations)
  document.write("SI se soporta las animaciones CSS3<br/>");
else
  document.write("NO se soporta animaciones CSS3<br/>");

Así ya tendremos nuestra librería Modernizr cargada y lista para utilizar detectando las capacidades HTML5 y CSS3.Similar Posts:

• Como utilizar un Polyfill con Modernizr
• Iniciar automáticamente un vídeo en HTML5
• Crear un Canvas en HTML5
• Cargar un vídeo de diferentes formatos con HTML5
• Controlar volumen de vídeo HTML5 con un Slider

Ayer veíamos como volcar el contenido de un array en jQuery. Hoy vamos a ver algo más sencillo que es cómo recorrer un array en Javascript. Este es un ejemplo muy sencillo y que te vendrá muy bien si estás aprendiendo a programar en Javascript.

Un array es una lista de elementos, normalmente del mismo tipo, aunque puede ser de múltiples tipos. Dichos elementos pueden ser insertados o eliminados del array. En el caso de Javascript el tamaño del array puede ser dinámico y no tiene porqué ser definido desde el principio.

En nuestro caso vamos a recorrer un array en Javascript para poder listar los elementos que contiene.

Lo primero será definir el array....

// Sigo siendo original y utilizando números
var a=[1,2,3,4,5,6,7,8,9,10];

Para poder recorrer el array vamos a utilizar una bucle iterativo de tipo for. Para poder crear el bucle iterativo for necesitamos poner un límite de las iteracciones a ejecutar. Dicho límite nos lo dará el tamaño del array. El tamaño del array lo podemos obtener mediante la propiedad .length del array.

Así nuestro bucle for quedará de la siguiente forma:

for (x=0;x<a.length;x++){...}

Hemos declarado una variable x, la cual incrementamos uno a uno en cada vuelta del bucle, mientras su valor es menor que el tamaño del array.

El siguiente paso será coger el elemento del array que coincida con la posición determinada por X. Para obtener el elemento utilizamos los corchetes ([]) sobre el array, con la posición como parámetro de los corchetes.

document.write(a[x] + " ");

Ya solo nos queda introducir esto en el bucle para tener todo el código que nos permita recorrer un array en Javascript.

for (x=0;x<a.length;x++){
        document.write(a[x] + " ");
}

Similar Posts:

• Primer numero repetido
• Recorrer un array en PHP
• Calcular media de numeros con Java
• Recorrer un array en VBScript
• Convertir un array en un String con Java

La clase String en Javascript, no trae un método que nos permita dar la vuelta a la cadena. Es decir, lo que conocemos como reverse.

Si bien, mediante las técnicas que hemos aprendido para dar de alta un método online sobre una clase, lo que vamos a hacer es dar de alta el método reverse, directamente sobre la clase String de Javascript.

Además ya sabemos cómo se hace el código para invertir una cadena en Javascript.

Si recordamos como se daba de alta un método online sobre una clase, veremos que tenemos que utilizar la sentencia prototype sobre dicha clase. En este caso como es sobre String utilizaremos:

String.prototype.reverse = function() {...}

Ahora solo tenemos que integrar él código que invierte la cadena como cuerpo de la función. Retornando la cadena invertida.

Quedaría un código similar a:

String.prototype.reverse = function() {
 
	var x = this.length;
	var cadena = "";
	while (x>=0) {
		cadena = cadena + this.charAt(x);
		x--;
	}
	return cadena;
 
};

Ya solo nos quedará instanciar un String e invocar a su nuevo método .reverse().

var x = new String("Hola");
document.write("La cadena " + x + " invertida es " + x.reverse());

Similar Posts:

• Invertir una cadena en Javascript
• Invertir una cadena con reverse en Java
• Palindromos en Java con reverse
• Modificar el contenido de una capa con jQuery
• Modificar el contenido de una capa con Prototype

Vamos a ver como podemos invertir una cadena en Javascript. Para ello crearemos el método invertirCadena(). Este método recibirá la cadena origina y devolverá la cadena invertida.

function invertir(cadena) {...}

Para invertir una cadena lo que vamos a hacer es recorrer carácter a carácter la cadena original y con estos caracteres ir componiendo una nueva cadena. La que será la cadena invertida.

Lo primero que debemos de hacer es saber el tamaño de la cadena. Esto nos lo dará el método .length. Ahora crearemos un método que itere por la cadena tantas veces como el tamaño de la cadena:

var x = cadena.length;
 
while (x>=0) {
  x--;
}

En cada vuelta del bucle y con el método .charAt() iremos componiendo la cadena invertida. Es decir, en la primera iteracción obtenemos el último carácter de la cadena y lo ponemos al principio de la cadena invertida, en la segunda iteracción obtenemos el penúltimo carácter y o ponemos como segundo carácter de la cadena invertida. Así hasta que hayamos recorrido la cadena por completo.

Recuerda que el método .charAt() recibe como parámetro la posición del carácter de la cadena que queremos leer.

Veamos como sería el código:

var x = cadena.length;
var cadenaInvertida = "";
 
while (x>=0) {
  cadenaInvertida = cadenaInvertida + cadena.charAt(x);
  x--;
}

Ya solo nos queda devolver el contenido de cadenaInvertida para tener completo nuestro método que invierte una cadena con Javascript:

function invertir(cadena) {
  var x = cadena.length;
  var cadenaInvertida = "";
 
  while (x>=0) {
    cadenaInvertida = cadenaInvertida + cadena.charAt(x);
    x--;
  }
  return cadenaInvertida;
}

Similar Posts:

• Invertir una cadena con Java
• Listar caracteres de una cadena con Java
• String con reverse en Javascript
• Obtener un carácter de una cadena con Java
• Poner en mayúsculas después de punto

Ayer veíamos que podíamos crear clases con Javascript mediante el método call. El método call nos permitía el invocar a múltiples constructores, reutilizando una estructura de clases coherentes.

Si bien, en Javascript contamos con otro método. El método .apply(). Este método, al fin y al cabo, viene a hacer lo mismo que hace el método .call(). Pero de otra forma.

Si recordamos, teníamos dos clases definidas DatosBasicos y Domicilio.

function datosbasicos(nombre,apellido,edad) {
  this.nombre = nombre;
  this.apellido = apellido;
  this.edad = edad;
}
 
function domicilio(direccion,cp,ciudad){
  this.direccion = direccion;
  this.cp = cp;
  this.ciudad = ciudad;
}

Y queríamos crear una clase Persona instanciando a los constructores de estas dos clases. El método .apply() nos permite hacer esto. Pero a diferencia del método .call(), .apply() recibe como parámetro el valor arguments. La variable arguments incluye todos los atributos de la clase que invoca.

Así, si definimos la clase Persona con .apply() sería de la siguiente forma:

function persona(nombre,apellido,edad,direccion,cp,ciudad){
	datosbasicos.apply(this,arguments);
	domicilio.apply(this,arguments);
}

Esto nos presenta un pequeño inconveniente, ya que deberemos de modificar DatosBásicos y Domicilio para que reciban todos los parámetros:

function datosbasicos(nombre,apellido,edad,direccion,cp,ciudad) {
  this.nombre = nombre;
  this.apellido = apellido;
  this.edad = edad;
}
 
function domicilio(nombre,apellido,edad,direccion,cp,ciudad){
  this.direccion = direccion;
  this.cp = cp;
  this.ciudad = ciudad;
}

Un pequeño inconveniente, pero que nos permite mantener la estructura de clases. Ahora ya solo te queda decidir cuál de los dos métodos en Javascript utilizar. Si .call() o .apply().Similar Posts:

• Creando clases en Javascript con call
• Crear propiedades dinámicas en Javascript
• Sobrescribir el método toString en Javascript
• Crear un objeto en Javascript
• Función con parámetros variables en Javascript