Diferencia entre revisiones de «Diseño Web/Retos Javascript»
Contenido eliminado Contenido añadido
Sin resumen de edición |
Agregué la traducción de los retos 5 al 8 |
||
Línea 359:
* Necesitas una variable, tal como "es_valido" que tenga valor <code>true</code> o <code>false</code> dependiendo del resultado de la revisión de los datos. Al final de la función puedes devolver esta variable en lugar de los valores true of false tan pronto como encuentres un error.
* Estás mostrando el mensaje de error si hay un error, pero también necesitas esconder el mensaje si todo está bien.
== Reto 5: Asegurándote de que se haya introducido un número ==
Hasta ahora hemos trabajado en cómo checar si un campo está vacío o no. Ahora queremos llevar esto un paso más allá y verificar que lo que se introdujo sea en realidad un número. Imagina que has incluido en el formulario un campo llamado Cantidad, donde el visitante especifique cuántas unidades de un cierto producto quiere comprar. No queremos que introduzca 'Ah' u 'Hola', ¿verdad?
'''Paso 1: Actualizando el formulario'''
Agrega un campo de texto a tu formulario que tenga el nombre "cantidad" y modifica tu función revisaFormulario() de manera que el valor no pueda ser vacío.
'''Paso 2: Revisar que sea un número'''
Javascript tiene una función especial llamada <code>isNaN()</code>, abreviatura de "es un no-número (''is Not a Number'' en inglés)", que puede ser usada para probar si un valor puede ser interpretado como un número. Por ejemplo, isNaN(1.5) devolverá como resultado falso (pues *se trata* de un número), en tanto que isNaN("hola") devolverá verdadero, (pues no es un número).
Tómate unos pocos minutos para experimentar con el [http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_isnan demo de isNaN() de W3Schools] hasta que te sientas a gusto y comprendas lo que hace.
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[Imagen:Nuvola apps important.svg|45px|left]]
'''¿No está al revés?'''
<code>isNaN()</code> es una función única pues parece que se usa al revés. Seguramente tendría más sentido que nos dijera si algo ''es'' un número, ¿no?
Sin embargo, hay una razón para <code>isNan()</code>: es consistente con otro aspecto común de JavaScript. Si intentamos hacer cálculos con algo que no es un número, por ejemplo <code>alert("hola" / 5);</code> tendremos como resultado "NaN" (no es un número).
Cuando JavaScript fue diseñado, <code>isNaN()</code> fue uno de los casos en los que la consistencia ganó sobre la facilidad de uso.
</div>
En tu función revisaFormulario(), justo después de que revisas que el campo cantidad no esté vacío, agrega otra instrucción if de la siguiente manera:
<pre>
// solo necesitas la siguiente linea si no tienes aun
// una varaible para el campo cantidad.
var cantidad = document.getElementById("cantidad");
// Ahora revisa si el valor del campo cantidad no es un numero
if (isNaN(cantidad.value))
{
// si la cantidad no era un numero, entonces queremos que el
// usuario sepa que necesita corregir el error
// Agrega aqui abajo tu codigo:
// Al final, devuelve el valor false de manera que la forma no sea enviada.
return false;
}
</pre>
'''Paso 3: Agregando un campo Código postal'''
Ahora agrega otro campo a tu formulario llamado 'codigopostal'. Actualiza tu funcion revisaFormulario() de manera que:
# el código postal no pueda quedar vacío.
# el código postal deba contener sólo números (ve el paso 2 de este mismo reto).
'''Paso 4: Revisando la longitud del campo código postal'''
Todo lo que pueda tener una longitud en JavaScript tiene una propiedad especial llamada <code>length</code>. Esta propiedad puede usarse para saber cuántos caracteres ha introducido un usuario en un campo. Por ejemplo, el siguiente código obtiene el valor del campo "nombre" del documento y entonces muestra un mensaje de alerta diciéndole al usuario cuántos caracteres fueron introducidos:
<pre>
var nombre = document.getElementById("nombre");
window.alert("La longitud del campo nombre es: " + nombre.length);
</pre>
Tómate unos minutos para ver cómo se usa la propiedad length en este [http://www.w3schools.com/js/tryit.asp?filename=tryjs_lengthvalidate ejemplo de la página W3Schools].
* Modifica el ejemplo de la página W3Schools de manera que el campo pueda tener hasta 8 caracteres.
* Ahora modifica tu función revisaFormulario para que el campo de código postal pueda tener sólo 4 caracteres.
== Tiempo de repasar ==
Hasta ahora te las has arreglado para:
# Verificar si una casilla de selección o un botón de selección múltiple está activada;
# Verificar si un campo de texto está vacío;
# Verificar si el texto introducido es un número usando la función <code>isNaN()</code>;
# Verificar la longitud del texto introducido en un campo (esto es, cuántos caracteres se introdujeron) usando la propiedad length;
# Mejorar la validación de los campos de manera que muestre mensajes de error en la misma página (en lugar de usar la desagradable caja de window.alert()). Esto lo haz hecho escondiendo y mostrando los mensajes de error con el objeto style.
¡Nada mal! Si te parece que necesitas practicar un poco más con estas tareas, intenta agregar algunas de estas características a otro formulario que hayas elaborado antes, como cuando aprendiste (X)HTML. Hacer esto puede ayudarte a encontrar aspectos con los que haz batallado y a ganar más confianza con la sintaxis de JavaScript.
Si usas [http://getfirefox.com Firefox] y no haz probado aún [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug], tómate un tiempo para experimentar con este utilísimo depurador de JavaScript.
== Reto 6: Comenzando a validar direcciones de correo ==
Verificar si un código postal era válido requería revisar que:
# el código introducido fuera un número
# el código tenía exactamente 5 dígitos (aunque esto depende del país)
¿Qué podemos revisar para asegurarnos de que una dirección de correo electrónico sea válidad? Toma un pedazo de papel y ve si puedes resumir dos o tres cosas que las direcciones de correo electrónico deben tener para ser válidas.
'''Paso 1: Agregando un campo Correo'''
Agrega un nuevo campo a tu formulario que se llame 'correo' (asegúrate de ponerle los atributos 'name' e 'id'). ¿Qué tipo de campo es mejor para las direcciones de correo?
'''Paso 2: Asegurándote de que el símbolo '@' esté presente'''
Toda dirección de correo contiene un y sólo un símbolo "arroba" (@). La dirección de correo introducida en el formulario es solamente una secuencia de caracteres, un texto tal como "Hola mundo". Todos los lenguajes de programación se refieren a este grupo de caracteres como una cadena de texto (String).
Algo que es muy útil de Javascript es que toda cadena de texto incluye ya un montón de propiedades y métodos incorporados, que podemos usar. De hecho, ya hemos usado la propiedad <code>length</code> en el Reto 5 para saber cuántos caracteres tenía el código postal.
Tómate unos minutos para leer la sección [http://www.librosweb.es/javascript/capitulo3/funciones_y_propiedades_basicas_de_javascript.html#funciones_utiles_para_cadenas_de_texto "Funciones útiles para cadenas de texto"]. Conforme lo leas, puedes intentar algunos de los ejemplo de la página [http://www.w3schools.com/js/js_obj_string.asp JavaScript String].
Uno de los métodos que deberías haber visto es indexOf(). Podemos usarlo para encontrar en qué parte de nuestra dirección de correo aparece el símbolo "@", si es que aparece. Ten en cuenta que el método indexOf() devuelve un número correspondiente al índice o posición del texto que busca. Si el texto no está en la cade, entonces indexOf() devolverá -1. Por ejemplo:
<pre>
var miCadena = "¡Hola Mundo!";
window.alert("La posición de H es: " + miCadena.indexOf("H")); // la posición será 1
window.alert("La posición de o es: " + miCadena.indexOf("o")); // la posición será 2
window.alert("La posición de un es: " + miCadena.indexOf("un")); // la posición será 7
window.alert("La posición de ! es: " + miCadena.indexOf("!")); // la posición será 11
window.alert("La posición de Z es: " + miCadena.indexOf("Z")); // la posición será -1
</pre>
Si quieres probar este código puedes usar la [http://www.squarefree.com/shell/ Consola Javascript] o el [http://www.w3schools.com/jsref/tryit.asp?filename=tryjsref_indexof ejemplo de indexOf() en W3Schools].
Agrega el siguiente código a tu función revisaFormulario(), luego modifícalo para que funcione.
<pre>
// crea una variable para referirte al campo de correo (ahorra tener que escribir mas despues)
var correo = document.getElementById("correo");
// Primero, crea una variable para recordar la posicion del simbolo "@"
var enPos = correo.value.indexOf("@");
if (enPos == ¿?) // necesitas reemplazar los signos de interrogacion
{
// Entonces no habia un simbolo @ en la direccion de correo.
// Haz saber al usuario que necesita corregir el error.
// Agrega tu codigo aqui abajo:
// Al final devuelve false de manera que el formulario no se envie.
return false;
}
</pre>
'''Paso 2: Asegurándose de que haya algo antes de el @'''
Ahora estamos seguros de que hay un @ dentro de la direccion de correo, pero hay un gran problema: ¿qué pasa si el usuario no ha puesto nada antes del @?
Escribe una instrucción if adicional en la función revisaFormulario() que se asegure de que el @ no esté al principio de la cadena. Recuerda, <code>indexOf()</code> te dará siempre las posiciones empezando desde 0.
'''Paso 3: Asegurándose de que haya un punto (.) después del @'''
Otra parte necesaria en una dirección de correo es el '''nombre del servidor''' (la parte resaltada en una dirección como la siguiente: alguien@'''algunlado.com'''), que siempre está después del @. Para asegurarte de que el usuario introduzca un nombre de servidor, podemos verificar que haya un punto en esa parte del correo.
Un problema adicional es que algunas direcciones de correo incluyen un punto como parte del '''nombre de usuario''' (la parte resaltada en '''juan.perez'''@algunlado.com). No podemos usar <code>indexOf()</code> para buscar el punto, pues bien podría encontrar el primer punto en lugar del segundo.
Javascript nos brinda una manera fácil de para resolver este problema con el método <code>lastIndexOf()</code>, que funciona de la misma manera que <code>indexOf()</code>, excepto que encuentra la '''última''' vez que el texto aparece, en lugar de la primera.
Escribe una instrucción if extra en la función revisaFormulario() que se asegure de que haya un punto después del símbolo @ en el correo. Podías crear variables que almacenen las dos posiciones para hacer el código más legible.
'''Paso 4: Asegurándose de que haya al menos dos caracteres después del punto'''
Con las pruebas de validación actuales el usuario no puede introducir algo sin sentido como "@." o "al.guien@" como su dirección de correo, pero bien podría introducir algo como "alguien@algunlado." ¿Qué es lo que falta al final?
Usamos lastIndexOf() para obtener la posición del último punto. ¿Cómo podrías saber si hay más caracteres después del punto? ¿Qué otra propiedad necesitarías comparar?
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[Imagen:Nuvola apps important.svg|45px|left]]
'''Una referencia del mundo real para pensar este problema'''
Tienes una pieza de listón con una marca a 20cm de uno de sus lados. ¿Qué medida tienes que hacer para calcular cuántos centímetros de listón hay del otro lado de la marca?
</div>
Escribe el código que falta en la función revisaFormulario, de manera que se asegure que hay al menos dos caracterers después del último punto.
'''Avanzado: haciendo todo esto con Expresiones regulares (regex)'''
Como puedes ver, escribir código para validad puede convertirse en algo largo y complicado, aun para algo que ''parece'' tan simple como una dirección de correo. Para validar campos complicados, que requieren tener una cierta forma, existe una técnica mucho más corta y rápida que se llama Expresiones regulares.
Si haz escrito alguna vez "*.*" para encontrar todos los archivos en DOS, o seleccionado "*.doc" en la caja de Tipo de archivo en Windows, entonces ya haz usado una Expresión regular simplificada. Las expresiones regulares son maneras de verificar palabras basadas en un patrón; en el caso "*.doc" estamos buscando algo como ''alguna palabra, seguida por un punto, seguida por "doc"''.
Las expresiones regulares se encuentran en casi todos los lenguajes de programación, y lo que aprendas en Javascript te servirá en otros lenguajes de programación tales como PHP y Perl con solamente unos pequeños ajustes.
[http://mundogeek.net/archivos/2004/07/29/javascript-expresiones-regulares/ Javascript: Expresiones regulares] es un buen punto inicial para familiarizarse con lo básico de Regex (las expresiones regulares).
== Reto 7: Javascript que no estorba ==
Hasta ahora hemos estado mezclando nuestro JavaScript con el código HTML... y este es el modo en el que Javascript se ha hecho durante años porque es simple (así como usar las etiquetas <font> en HTML es un poco más cimple que usar CSS). Pero no es la mejor manera.
Así como separamos nuestro contenido (X)HTML de la presentación en CCS de nuestras páginas web, también vale la pena separar el comportamiento de nuestro Javascript. ¿Por qué? Puedes encontrar un poco más de información al respecto en Wikipedia [http://es.wikipedia.org/wiki/JavaScript_no_obstructivo JavaScript no obstructivo], pero si piensas en cómo separar CSS implica que se puede reusar la misma hoja de estilo muy fácilmente, es lo mismo con Javascript. Separando Javascript de la página, podemos aplicar el mismo código a muchas páginas sin tener (usualmente) que modificar la página misma.
'''Aquí tienes cómo funciona:''' Normalmente conectamos nuestro código Javascript (como la función revisaFormulario) a un elemento de (X)HTML en particular con un atributo como onsubmit:
<pre>
<form method="post" onsubmit="return revisaFormulario()" id="respuestausuario">
...
</form>
</pre>
Y esto hace el trabajo. Ahora lo que queremos es quitar ese código: 'onsubmit="return revisaFormulario()"' por completo. Hazlo, quítalo de la página.
¿Cómo vamos entonces a vincular nuestro formulario con la función revisaFormulario? Bueno, en realidad podemos establecer eventos para los elementos (X)HTML usando también Javascript de la siguiente manera:
<pre>
document.getElementById("respuestausuario").onsubmit = revisaFormulario;
</pre>
Este pedazo de Javascript reemplazará el código 'onsubmit="return revisaFormulario()"' que habíamos incluido en el código (X)HTML hasta ahora. Pero probablemente te surjan dos preguntas:
# ¿Por qué nuestra función revisaFormulario() no tiene aquí los paréntesis?
# ¿Dónde pongo este código?
La respuesta más fácil a la primera pregunta es que "no los lleva" - es algo excepcional ver una función sin los paréntesis (Si sigues con curiosidad, cuando omites los paréntesis lo que está ocurriendo no es un llamada a la función, sino que e trata de un apuntador). Para la segunda pregunta, intentemos ponerla en nuestro programa, al principio del documento, así:
<pre>
<script type="text/javascript">
function revisaFormulario()
{
window.alert("Ejemplo de validación de datos");
// Tu codigo de validacion normal va aqui
}
document.getElementById("respuestausuario").onsubmit = revisaFormulario;
</script>
</pre>
Vuelve a cargar la página en el navegador y ve lo que pasa. En la consola de errores del navegador deberías ver un mensaje de error causado por que no se ha podido encontrar un elemento con el ID de "respuestausuario" - aunque definitivamente debería haber uno (si no lo agregaste, entonces hazlo ahora).
El problema es que nuestro Javascript está en la cabecera del documento (X)HTML y es ''ejecutado antes de que el resto del documento haya sido todavía leído'' (e interpretado) por el navegador.
Así que necesitamos una manera de asegurarnos de que ese segmento de código que acabamos de crear sólo se ejecute hasta después de que el documento haya sido cargado por completo ... ¿alguna idea? Probablemente estás pensando algo como lo que sigue:
<pre>
<body onload="nuestro código podría ir aquí">
</pre>
y tienes razón, hasta un cierto punto. Queremos usar el evento onload, pero no escribirlo en el (X)HTML o estaríamos de regrreso en el punto original. En su lugar colocaremos nuestra nueva línea de Javascript en su propia función:
<pre>
//
// Esta funcion configura todos los eventos usados por mi Javascript
//
function configMisEventos()
{
document.getElementById("respuestausuario").onsubmit = revisaFormulario;
}
</pre>
y entonces relacionaremos esta función con el evento onload empleando una línea especial de código:
<pre>
window.onload = configMisEventos;
</pre>
De manera que nuestro código Javascript se verá al final de esta manera:
<pre>
<script type="text/javascript">
//
// revisaFormulario()
// Verifica todos los campos requeridos del formulario.
//
function revisaFormulario()
{
window.alert("Ejemplos de validacion de datos");
// Tu codigo normal de validacion va aqui
}
//
// Esta funcion configura todos los eventos usados por mi Javascript
//
function configMisEventos()
{
document.getElementById("respuestausuario").onsubmit = revisaFormulario;
// Todos los demas eventos que uses pueden ser agregados de la misma manera aqui.
}
window.onload = configMisEventos;
</script>
</pre>
Inténtalo ahora con tu propio formulario.
El último paso para separar nuestro Javascript es mover el código completo a un archivo aparte, de manera que solamente quede nuestra etiqueta script haciendo referencia al archivode Javascript:
<pre>
<script type="text/javascript" src="mi_archivo_javascript.js">
</pre>
¡Bravo! Ahora ya estás en el camino para aprender Javascript de la manera no obstructiva. Revisa algunos de los Enlaces externos incluidos en el artículo de Wikipedia [http://es.wikipedia.org/wiki/JavaScript_no_obstructivo JavaScript no obstructivo], pues allí puedes encontrar otros aspectos expuestos con mayor claridad que aquí.
== Reto 8: Usando mapas ==
Google proporciona una herramienta que te permite incluir su amplia funcionalidad de mapas en tu propio sitio web - todo lo que necesitas es un poco de Javascript (bueno, para hacer algunas de las cosas más útiles necesitarás aprender un poco más de Javascript, pero eso es algo bueno).
Si quieres usar una alternativa abierta, tal como OpenStreetMap, entonces intenta con esta [http://p2pu.org/webcraft/node/12927/document/26001 guía paso a paso de OpenLayers (en inglés)].
Empieza revisando el [http://code.google.com/apis/maps/documentation/javascript/tutorial.html ejemplo "Hello, World" de Google Maps]. Conforme leas sus ejemplos de Javascript verás que algunas partes lucen familiares (instrucciones if, funciones, eventos, etc), pero otras son nuevas (las variables ue comienzan con google.maps).
# La primera parte de este reto es hacer que el mapa funcione en tu propia página. Necesitarás copiar y pegar el código mostrado, y cambiar la instrucción ''sensor=set_to_true_or_false'' a ''sensor=false'' Entonces ábrelo en tu navegador y/o súbelo a tu servidor web.
# Modifica el código para que muestre un mapa de tu localidad en lugar del mapa de Australia que viene predeterminado (si eres de Australia, entonces ubícalo en una ciudad importante en otro país). Para hacer esto necesitarás encontrar las coordenadas de latitud y longitud. (Puedes intentar con http://geohash.org)
# Modifica tu código [http://code.google.com/apis/maps/documentation/javascript/controls.html configurar los controles del mapa] y/o [http://code.google.com/apis/maps/documentation/javascript/overlays.html#Marker agregar un marcador].
Eso es sólo el principio, pero esperamos que te haya hecho pensar acerca de las posibilidades.
| |||