feed twitter facebook LinkedIn facebook

Conversación » Conversaciones sobre Programación. Build 2012.01

Los grupos de conversación de Facebook sobre lenguajes de programación en español están lanzados y rodando a la perfección. Me alegra mucho ver que la gente está interactuando e intercambiando preguntas, ideas, cursos, manuales,... Qué es lo que perseguíamos. Espero que siga así durante mucho tiempo.

En breve asignaremos administradores a los grupos, para que se pueda diversificar más la actividad y el control de los grupos.

Pero echemos un vistazo a las últimas conversaciones...

HTML5 en Español
https://www.facebook.com/groups/html5.es/
75 miembros

Además se están manteniendo varios documentos:

Java en Español
https://www.facebook.com/groups/java.es/
90 miembros

Javascript en Español
https://www.facebook.com/groups/javascript.es/
66 miembros

jQuery en Español
https://www.facebook.com/groups/jquery.es/
82 miembros

CSS en Español
https://www.facebook.com/groups/css.es/
60 miembros

PHP en Español
https://www.facebook.com/groups/HypertextPreprocessor.es/
63 miembros

XML en Español
https://www.facebook.com/groups/xml.es/
32 miembros

SVG en Español
https://www.facebook.com/groups/svg.es/
21 miembros

 

JavaScript » Validar el email con JavaScript

enero 9, 2009 por Víctor Cuervo 50 Comentarios Imprimir Imprimir

Muchas aplicaciones pueden precisar de una validación de email, es decir, validar si lo que está introduciendo el usuario es realmente un email. Esta comprobación es susceptible de hacerse en la maquina cliente, evitando así cargar al servidor con la respectiva comprobación y la consiguiente llamada desde la página web.

Nosotros nos valdremos de JavaScript para validar si la cadena introducida por el usuario es un email. Y al trabajar con validaciones con cadenas nos valdremos de las expresiones regulares.

Toda la implementación del ejercicio estará en montar la expresión regular. Para ello debemos de tener en cuenta varias cosas.

En primer lugar La expresion regular delimita su inicio con /^ y su fin con $/. Por lo que una expresión regular tendría la forma:

/^ expr regular $/

El email se compone de tres partes:

nombre usuario + @ + servidor + dominio

Veamos que consideraciones debemos de tener con cada una de esas partes.

Nombre y servidor

  • Debe de empezar por letra o numero. Al menos tiene una letra o número. La letra o número se expresa mediante el carácter \w. Para asegurarnos de que la letra o número aparece al menos una vez utilizaremos el modificador +.
  • Puede contener puntos y guiones además de las letras y números. Esta combinación podrá aparecer, es por ello que utilizaremos el modificador * (cero o varias veces). Insertaremos toda la combinación entre paréntesis.

Su expresión regular, para ambos casos, será la siguiente:

\w+([\.-]?\w+)*

Dominio

  • Irá al final, detrás de un punto. Podrá tener dos (.es, .fr, .it,...) o tres letras (.com, .net, .org,..) o cuatro (.mobi, info,...). Si queremos indicar un número concreto de caracteres lo expresamos con el número entre los operadores { y }
  • Además podemos tener varios dominios seguidos (.com.ar, .com.uk,....) es por ello que deberemos de usar el modificador +. Ya que el dominio podrá aparecer varias veces.

Su expresión regular será comos sigue:

(\.\w{2,3,4})+

La expresión regular final para validar el email con JavaScript sería:

/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/

Para la implementación de validar el email con JavaScript vamos a crear un formulario, el cual llamará a la función validarEmail. Esta función será la que ejecute la expresión regular.

  1.  
  2. function validarEmail(email){...}
  3.  

La expresión regular la ejecutaremos mediante el método test del objeto RegExp. El objeto RegExp, como su nombre bien indica, representa las expresiones regulares.

  1.  
  2. function validarEmail(valor) {
  3. if (/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3,4})+$/.test(valor)){
  4. alert("La dirección de email " + valor + " es correcta.");
  5. } else {
  6. alert("La dirección de email es incorrecta.");
  7. }
  8. }
  9.  

Actualizado 20.junio.09
No se había contemplado la gestión de dominios de 4 letras como .mobi o .info.

JavaScript » Buscar en la lista

febrero 4, 2008 por Víctor Cuervo 8 Comentarios Imprimir Imprimir

La idea de este ejemplo es realizar una búsqueda sobre un listado de datos (presente en una lista de un formulario) partiendo de una entrada que va el usuario tecleando paulatinamente. Por ejemplo si partimos del siguiente listado de deportes

'Atletismo ', 'Aerobic', 'Balonmano', 'Beisbol', 'Badminton', 'Baloncesto', 'Footing', 'Fútbol', 'Gimnasia', 'Voleibol'

Si el usuario teclea una A o a debería de filtrar por todos aquellos deportes que empiecen por dicha letra, quedándonos...

'Atletismo ','Aerobic'

si posteriormente el usuario teclea una E o e, se filtraría por aquellos deportes que empezasen por AE, quedándonos...

'Aerobic'

Continue reading Buscar en la lista...

JavaScript » Ver el código fuente

febrero 2, 2007 por Víctor Cuervo 16 Comentarios Imprimir Imprimir

El objetivo de este ejercicio es el de mostrar el código fuente de una página. Esta claro que siempre lo podremos obtener mediante el menú de nuestro navegador o mediante el botón derecho (si este está disponible). Pero nosotros vamos a hacer que desde nuestra página web podamos mostrar los códigos fuente de otras páginas.

Para poder hacer esto simplemente nos servirá con anteponer la palabra view-source a la URL. Por ejemplo el código de Línea de Código sería:

view-source:http://www.lineadecodigo.com

Nosotros lo que haremos será obtener la URL mediante un campo de texto de un formulario HTML y concatenar con la anterior cadena.

A si que lo primero será el generar el formulario:

  1. URL: <input type="text" name="url" size="50" value="http://"><br>
  2. <input type="button" onClick="verCodigoFuente(this.form.url.value);"
  3. value="Ver código fuente">
  4. </form>

Hemos utilizado el evento JavaScript onClick de un botón para ejecutar el método que hará que veamos el código fuente de la página. En nuestro caso lo hemos llamado verCodigoFuente. Este método recibe el valor del campo URL del formulario.

Ahora veamos la función JavaScript verCodigoFuente(URL). Lo primero que hará esta función es ver si llega algún dato. Esto se realizará mediante un simple if.

  1. if (sURL == "") {
  2. alert("Introduzca alguna URL");
  3. return false;
  4. }

Deberemos de tener cuidado de que el usuario escriba una URL que sea válida. Para ello, al menos vamos a comprobar que la cadena que nos proporcione el usuario empiece por http://. Esto lo haremos mediante expresiones regulares.

En este caso la expresión regular que identifica al protocolo http en su forma http:// sería la siguiente:

protocolo = /^http:\/\/

La expresión regular se validará mediante el método .test(). Veamos como sería:

  1. if (!/^http:\/\//.test(sURL)) {
  2. alert("La URL tiene que empezar con el protocolo http://");
  3. return false;
  4. }

Solo nos quedará invocar a la URL con el "view-source" por delante. Para ello accederemos directamente al objeto window y a su propiedad location.href, la cual representa la barra de navegación.

  1. window.location.href="view-source:" + sURL;

Visualizar el ejemplo | Descargar el código

JavaScript » Validar que el texto introducido es un número

diciembre 11, 2006 por Víctor Cuervo 15 Comentarios Imprimir Imprimir

Validar que el texto introducido en un formulario HTML es realmente un número es, quizas, el código JavaScript más utilizado a lo largo de la red. No en vano, si nos ponemos a pensar en el tipo de validaciones que se hacen dentro de un formulario, estas se limitaran a tamaños de cadenas, validaciones de número o, en los casos más avanzados, en patrones o expresiones regulares.

Y es que la potencia de detección de patrones en JavaScript puede ayudarnos a resolver cualquier validación que queramos hacer en un formulario HTML. Como veremos más adelante en el caso que nos compete.

Para empezar tenemos un formulario HTML simple, en el cual incluiremos un campo de texto mediante una etiqueta <INPUT>.

  1. <FORM id="formularioCantidad">
  2. Cantidad: <INPUT type="text" SIZE=10 id="cantidad">
  3. </FORM>

La idea es que cuando la persona teclee algo sobre este campo y se vaya a otro realicemos la validación sobre si es o no un número.

A si que lo primero que tenemos que hacer es controlar el evento onChange el cual nos indicará que el contenido del campo ha cambiado con respecto al anterior ha cambiado y nos hemos ido a otro elemento de la página. Y asociaremos a este evento la función de validación.

Quedándonos la siguiente línea de código:

  1. <INPUT type="text" SIZE=10 id="cantidad" onChange="validarSiNumero(this.value);">

Como podemos ver, la función está recibiendo como parámetro el valor que haya en el campo del formulario. Si bien, podemos utilizar cualquier otro evento que nos pueda venir bien.
Ahora solo nos quedará codificar la función JavaScript que valide si lo recibido es un número. Como hemos dicho al principio, nos vamos a basar en patrones. Es decir, la idea es validar que los caracteres pasados son números y tendremos que compararlo contra un patrón que signifique eso.

Los patrones en JavaScript son expresiones regulares. Una expresión regular se define de la siguiente forma:

/^ expr regular $/

Es decir, siempre empieza por "/^" y acaba por $/.

Si con una empresión regular queremos validar que un caracter sa un número utilizaremos el rango [0-9], quedándonos la expresión de la siguiente forma:

/^[0-9]$/

Si queremos indicar que van a ser un conjunto de caracteres deberemos de utlizar un operador de cardinalidad. En este caso deberemos de utilizar el * para indicar que serán n caracteres. Ahora, nos quedará de la siguiente forma:

/^([0-9])*$/

Sobre la expresión regular se aplicará el método test, el cual recibe el dato a ser contrastado con la expresión regular. Es por ello que nuestra función de validación de números quedaría de la siguiente forma:

  1. <script>
  2. function validarSiNumero(numero){
  3. if (!/^([0-9])*$/.test(numero))
  4. alert("El valor " + numero + " no es un número");
  5. }
  6. </script>

Ojo, que en la validación estamos indicando que sea diferente a la expresión regular definida. De ahí el simbolo exclamación (!). Que lo que hace es negar lo puesto después.

La función la deberemos de poner en la cabecera de la página para que pueda ser utilizada desde cualquier parte de la página.