Diferencia entre revisiones de «Diseño Web/Retos Javascript»
Contenido eliminado Contenido añadido
Cambiadas etiquetas <br> por <br />, de acuerdo al estándar |
m Bot: Ortografía y otros (v0.37); cambios triviales |
||
Línea 57:
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[
'''¡Cambié algo y todo dejó de funcionar! (o: Depuración)'''
Línea 64:
Casi todos los navegadores tienen una ventana que muestra los errores Javascript con pistas para corregirlos, pero estas ventanas están escondidas de manera predeterminada. Aquí tienes cómo encontrarlas:
* '''Firefox''': menú Herramientas
* '''Safari''': menú Desarrollo, Consola de errores. (Tendrás que activar el menú desde el panel Avanzado de las Preferencias)
* '''Opera''': menú Herramientas, Avanzado, Consola de errores.
Línea 83:
# Obtén el elemento de mi documento que tiene el ''id'' de "subscribepara",
# Obtén su objeto ''style'',
# y asigna
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[
'''Unas palabras sobre los puntos'''
Línea 153:
Agrega una función JavaScript a tu página que se llame <code>ponDireccionPostal</code> que simplemente muestre una alerta, esto es: <code>window.alert("Mi función ha sido llamada");</code>
Agrega un evento de manera que cuando la caja de selección sea activada tu
Línea 252:
</pre>
Fíjate en que esta función no está completa, necesitamos encontrar cuál propiedad del botón es la que nos dirá si ha sido activado o no. Consulta [http://www.w3schools.com/jsref/dom_obj_radio.asp W3Schools' HTML DOM Radio Object] y ve si puedes encontrar la propiedad adecuada. Cuando la encuentres reemplaza su nombre en lugar del texto que dice [¿
Prueba el código y ve si hace lo que esperas.
Línea 259:
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[
'''Comentando tu código'''
Línea 333:
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[
'''Reemplazando una función con otra'''
Como habrás notado, el nombre de nuestra nueva función es el mismo que el de la función que escribimos anteriormente. Si lo deseas puedes conservar el código anterior e ir modificando lo que sea diferente en esta nueva función. Pero otra solución sería renombrar la antigua función como revisaFormulario0() y hacer este cambio
</div>
Línea 380:
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[
'''¿No está al revés?'''
Línea 413:
'''Paso 3: Agregando un campo Código postal'''
Ahora agrega otro campo a tu formulario llamado 'codigopostal'. Actualiza tu
# 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).
Línea 434:
== 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
# 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.
Línea 509:
'''Paso 2: Asegurándose de que haya algo antes
Ahora estamos seguros de que hay un @ dentro de la
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.
Línea 536:
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[
'''Una referencia del mundo real para pensar este problema'''
Línea 668:
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''
# 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].
Línea 677:
== Reto 9: Una introducción a YUI - Un calendario ==
[[
Actualmente hay muchas soluciones Javascript que permiten a los usuarios dar click en una opción de calendario en lugar de escribir la fecha directamente. Esta es una forma mucho más certera de obtener esa información del usuario. para esto vamos a conocer las bibliotecas de la Interfaz de Usuario de Yahoo! (YUI).
Línea 819:
{{diseño web}}
[[
| |||