ORIDOKI

Función JavaScript para validar el número de telefono.

function isValidPhoneNumber(ph) {
	if (ph == null) {
		return false;
	}
	var stripped = ph.replace(/[\s()+-]|ext\.?/gi, "");
	return ((/\d{10,}/i).test(stripped));
}

Función JavaScript para validar email.

function isValidEmailAddress(emailAddress) {
	var pattern = new RegExp(/^(("[\w-\s]+")|([\w-]+(?:\.[\w-]+)*)|("[\w-\s]+")([\w-]+(?:\.[\w-]+)*))(@((?:[\w-]+\.)*\w[\w-]{0,66})\.([a-z]{2,6}(?:\.[a-z]{2})?)$)|(@\[?((25[0-5]\.|2[0-4][0-9]\.|1[0-9]{2}\.|[0-9]{1,2}\.))((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\.){2}(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[0-9]{1,2})\]?$)/i);
	return pattern.test(emailAddress);
}

Bueno como no podia ser de otra manera, Firefox, IE y Opera se lo montan diferente a la hora de gestionar los bookmarks, por lo que será necesario la siguiente función para poder crear un enlace que nos permita añadir un bookmark en cualquiera de los tres navegadores anteriores.

function CreateBookmarkLink(title, url) {
	if (window.sidebar) { // Mozilla Firefox Bookmark
		window.sidebar.addPanel(title, url,"");
	} else if( window.external ) { // IE Favorite
		window.external.AddFavorite( url, title); }
	else if(window.opera && window.print) { // Opera Hotlist
		return true; }
 }

Dicen que a lo bueno siempre se acostumbra uno y por eso las veces que después de haber utilizado prototype o JQuery siempre he echado en falta el simular la función document.getElementById() por la función $().
Por eso hoy vamos a ver como podemos habilitar este cambio, es una cosa muy simple, que busqué durante bastante tiempo pero que al no encontrarla la hice yo mismo

function $(objID){
	return document.getElementById(objID);
}

Así de simple

Incompatiblidad Internet Explorer con objetos DOM

Hace unos días se me presentó la necesidad de crear inputs de tipo radio en javascript mediante DOM. Como sería normal utilicé el código siguiente:

var o = document.createElement('input');
o.name = 'r1';
o.value = '0':
myParent.appendChild(o);

Todo perfecto hasta que lo testeas para cualquier versión de IE. En Internet Explorer aparecen los inputs, pero no se pueden seleccionar, parece que por DOM no le puedes asignar a este tipo de objetos la propiedad name.
La solución que he adoptado aunque ‘sucia’ es funcional, por lo que hasta que encuentre otra solución me quedo con esta.

var name = 'r1';
var value = '0';
document.getElementById("myParent").innerHTML = "
";

Como siempre nos toca ‘ensuciar’ el nuestro código javascript por culpa de Internet Explorer.

Dock Menú en Javascript y CSS

Hacia tiempo que buscaba algo parecido a esto, pero hasta hoy no había encontrado uno Dock similar al Dock Menú de OS X que me convenciera.

Hay que felicitar el trabajo realizado por los chicos de N.DESIGN STUDIO, que han conseguido una librería sencilla, y con unos acabados fantásticos.

La librería está desarrollada bajo JQuery, y es bastante sencilla de utilizar.

Primero: Descargar los ficheros.
Descargar desde aquí.

Segundo: Insertar el código
Insertamos el código entre las etiquetas head de nuestra página.

Tercero: Configuración.
Tenemos que incluir el siguiente código en cualquier lugar de la etiqueta de nuestra página

Cuarto: Añadir o borrar elementos

Para añadir elementos :

	Home

Abro esta nueva sección para poner aquellos pequeños trozos de código que me han costado más de lo normal, que en el fondo no son difíciles, pero que en un determinado momento son más complicados de desarrollar.

Empezamos con una función javascript para vaciar un desplegable o select.

/**********************
* Vaciar desplegable: recibe el ID del elemento
********/
function emptySelect(objID){
	while($(objID).childNodes[0]){
		$(objID).removeChild($(objID).childNodes[0]);
	}
}

Simplemente va eliminando elementos de un objeto de uno en uno hasta que esta vacio.

· background –> background
· background-attachment –> backgroundAttachment
· background-color –> backgroundColor
· background-image –> backgroundImage
· background-position –> backgroundPosition
· background-repeat –> backgroundRepeat
· border –> border
· border-bottom –> borderBottom
· border-bottom-color –> borderBottomColor
· border-bottom-style –> borderBottomStyle
· border-bottom-width –> borderBottomWidth
· border-color –> borderColor
· border-left –> borderLeft
· border-left-color –> borderLeftColor
· border-left-style –> borderLeftStyle
· border-left-width –> borderLeftWidth
· border-right –> borderRight
· border-right-color –> borderRightColor
· border-right-style –> borderRightStyle
· border-right-width –> borderRightWidth
· border-style –> borderStyle
· border-top –> borderTop
· border-top-color –> borderTopColor
· border-top-style –> borderTopStyle
· border-top-width –> borderTopWidth
· border-width –> borderWidth
· clear –> clear
· clip –> clip
· color –> color
· cursor –> cursor
· display –> display
· filter –> filter
· font –> font
· font-family –> fontFamily
· font-size –> fontSize
· font-variant –> fontVariant
· font-weight –> fontWeight
· height –> height
· left –> left
· letter-spacing –> letterSpacing
· line-height –> lineHeight
· list-style –> listStyle
· list-style-image –> listStyleImage
· list-style-position –> listStylePosition
· list-style-type –> listStyleType
· margin –> margin
· margin-bottom –> marginBottom
· margin-left –> marginLeft
· margin-right –> marginRight
· margin-top –> marginTop
· overflow –> overflow
· padding –> padding
· padding-bottom –> paddingBottom
· padding-left –> paddingLeft
· padding-right –> paddingRight
· padding-top –> paddingTop
· page-break-after –> pageBreakAfter
· page-break-before –> pageBreakBefore
· position –> position
· float –> styleFloat
· text-align –> textAlign
· text-decoration –> textDecoration
· text-decoration: blink –> textDecorationBlink
· text-decoration: line-through –> textDecorationLineThrough
· text-decoration: none –> textDecorationNone
· text-decoration: overline –> textDecorationOverline
· text-decoration: underline –> textDecorationUnderline
· text-indent –> textIndent
· text-transform –> textTransform
· top –> top
· vertical-align –> verticalAlign
· visibility –> visibility
· width –> width
· z-index –> zIndex

Hay ocasiones en las que en una página web tenemos que cargar varias librerías Javascript, otras tantas CSS, montones de imágenes, y algún que otro fichero PDF. En estos casos es normal que la carga del site se ralentice más de lo normal, por este motivo hoy vamos a ver como podemos cachear todo esto en la parte del cliente con Google Gears.

Google Gears es un proyecto open source que permite hacer aplicaciones más potentes, añadiendo nuevas funcionalidades a nuestro navegador.

Hoy simplemente vamos a utilizar una de las muchas características de Google Gears el LocalServer.

Vamos a crear la siguiente estructura de ficheros:
– index.html
– cachthis.js
– test.js
– gears_init.js -> esta la descargamos y la ponemos tal cual en el directorio

index.html

cachthis.js

	{
	"betaProyectoVersion" : 1,
	"version" : "0.1",
	"entries" : [
	{ "url" : "./test.js" }
	]}

test.js

	function sayHello(){
		alert("Hola");
	}

Es un ejemplo muy básico pero a la vez muy ilustrativo, una vez tengamos todos los ficheros instalamos Google Gears, y reiniciamos los navegadores.
Si entramos en la página y pulsamos el botón nos mostrará por pantalla un alert diciendo “Hola”, hasta aquí todo normal. En este momento Gears ya tendrá cacheado el fichero test.js, de modo que si volvemos a entrar en esta página, no lo descargará, sino que lo cargará de su caché.
Como lo comprobamos…. Simple, modificamos el fichero test.js y lo dejamos del siguiente modo.

test.js

	function sayHello(){
		alert("Adiós");
	}

Si volvemos a cargar la página y pulsamos el botón el mensaje que nos aparecerá por pantalla será “Hola” en lugar del que realmente contiene el fichero.

Por último si queremos actualizar las versiones cacheadas que tienen nuestros usuarios, solamente tendremos que cambiar la versión del fichero ‘cachthis.js’ a una superior, y automáticamente se recargará.

SetTimeOut es una función interesante que nos permite hacer una llamada a una función transcurrido un número concreto de segundos. Para utilizar SetTimeOut solo tenemos que escribir una sentencia como esta:

function talk(str){
	alert(str);
}
setTimeout("talk('Hello')", 5000);

Los parámetros de la misma son dos, en primer lugar la función que se debe llamar, y en segundo el número de segundos que debe tardar en llamarla, en este caso llamara la función talk() en cinco segundos.

El problema que hoy queremos presentar, se presenta cuando intentamos utilizar setTimeOut desde dentro de un ‘objeto’ para llamar a uno de los métodos del mismo. De manera que tendríamos un código como este

setTimeout(this.talk('Hello'), 5000);

Esto no funcionará, ya que en javascript no existen clases como tales. Después de buscar y rebuscar por internet encontré este artículo, que me ofrecía la siguiente solución.

	setTimeout(function(thisObj) { thisObj.talk('hola'); }, 5000, this);

Estamos pasando como parámetro opcional de SetTimeOut nuestro objeto para poder interactuar con el dentro de la propia función.

Sinembargo mirando los comentarios nos damos cuenta que esta solución no es valida para Internet Explorer, y nos proponen la siguiente solución:

thisObj = this;
setTimeout(function() { thisObj.talk('Hola'); }, 50);

Espero que os sirva para hacer vuestros pinitos en Javascript.