Diferencia entre revisiones de «Diseño Web/Retos Javascript»
Contenido eliminado Contenido añadido
Se ha deshecho la revisión 120875 de 119.40.106.146 (disc.) |
|||
Línea 7:
Asegúrate de que estás familiarizado con los objetos window y document en Javascript antes de abordar estos retos.
== Reto 1: Elementos que se esconden ==
Pega el siguiente código en un documento HTML nuevo y cárgalo en el navegador.
<pre>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="es">
<head>
<title>Retos JavaScript</title>
</head>
<body>
<form action="">
<fieldset>
<legend>Suscripciones de correo</legend>
<p id="subscribepara">
<label>
<input type="checkbox" name="subscribe" id="subscribe">
Me gustaría recibir el boletín vía correo-e.
</label>
</p>
<p id="emailpara">
<label>
Email:
<input type="text" name="email" id="email">
</label>
</p>
</fieldset>
</form>
</body>
</html>
</pre>
El objeto de este reto es mostrar el párrafo con el campo para el e-mail cuando la caja de selección (checkbox) esté activada, pero lo dividiremos en tareas más pequeñas.
'''Paso 1: Ocultar el campo de e-mail de forma predeterminada'''
Agrega algún estilo CSS de manera que el párrafo "emailpara" no se muestre cuando la página se cargue por primera vez (usando la propiedad CSS 'display'). Prueba que funcione.
'''Paso 2: Agregar una plantilla de función'''
Crea una nueva función llamada alternaEmail() que muestre una alerta, esto es window.alert("Mi función ha sido llamada");
Agrega un evento de manera que cuando se haga click sobre la caja de selección, la función se active. ''Prueba que funcione''.
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[Archivo:Nuvola apps important.svg|45px|left]]
'''¡Cambié algo y todo dejó de funcionar! (o: Depuración)'''
En HTML y CSS un simple error podría causar que una etiqueta o un color no se muestre, pero generalmente algo aparecerá en la pantalla. Javascript es diferente en que tan pronto como encuentre un error, se detendrá y no dará ninguna pista de por qué.
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 menú, Consola de errores.
* '''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.
* '''Chrome''': click the Page button, Developer, JS Console, then the second button at the bottom left of the window.
* '''IE8''': menú Herramientas, Herramientas de desarrollo, Consola.
Además, podrías emplear herramientas como [https://addons.mozilla.org/en-US/firefox/addon/1843 Firebug] para Firefox, o Dragonfly para Opera.
</div>
'''Paso 3: Muestra los campos de e-mail'''
Ahora reemplazaremos el código <code>alert()</code> de manera que nuestra función haga algo útil. Usando Javascript podemos cambiar el estilo de cualquier elemento de nuestra página usando el objeto ''style''. Todo elemento tiene un objeto ''style'' y podemos tener acceso a él de la siguiente manera:
<pre>
document.getElementById("subscribepara").style.backgroundColor = "blue";
</pre>
De manera breve, la instrucción JavaScript que acabamos de escribir dice:
# Obtén el elemento de mi documento que tiene el ''id'' de "subscribepara",
# Obtén su objeto ''style'',
# y asigna al valor "blue" a la propiedad ''backgroundColor'' de este objeto.
<div style="{{Plantilla:Caja}} background-color:#ffff33">
[[Archivo:Nuvola apps important.svg|45px|left]]
'''Unas palabras sobre los puntos'''
Verás mucho código JavaScript escrito con puntos que separan objetos, funciones y propiedades. Cuando un nombre de función o de variable siga inmediatamente un punto, significa que '''pertenece a''' u '''opera sobre''' el objeto justo antes del punto. Por ejemplo, la función <code>getElementById()</code> pertenece y opera sobre el objeto <code>document</code> (en particular, <code>getElementById()</code> busca a través del documento por un elemento con un atributo ''id'' específico).
Cuando leas líneas como esta, puede ser muy útil leerlo en sentido inverso a partir del último punto, diciendo 'pertenece a' entre cada punto. Por ejemplo:
''El <code>background-color</code> que pertenece al <code>style</code>, que pertence al elemento con el ID <code>subscribepara</code>, que pertenece al <code>document</code>.''
</div>
Intenta copiar y pegar el código de arriba en tu función y ve lo que hace. Fíjate en que los nombre de las propiedades de '''style''' son ligeramente diferentes de las que usamos en CSS (backgroundColor vs. background-color).
Ahora veamos si puedes modificar tu función de manera que muestre el párrafo "emailpara" cuando se ejecute.
'''Paso 4: Haciendo que el campo de e-mail alterne'''
Cuando pruebes tu código verás que puedes hacer click sobre la caja de selección y que el campo de e-mail se muestra, pero cuando desactivas la caja el párrafo no desaparece.
Nuestro reto es agregar una instrucción '''if''' a nuestra función alternaEmail() de manera que verifique si la caja de selección está activa. Si lo está entonces debe mostrar el párrafo "emailpara", de otra manera debe ocultarlo.
Para hacer esto necesitamos saber cómo revisar si una caja de selección está activada... Por suerte para nosotros, el elemento que corresponde a la caja de selección tiene una propiedad llamada 'checked' que puede tener como valor '''true''' o '''false'''. De esta manera podemos usar <code>document.getElementById("id-del-elemento-input").checked</code> para revisar el valor de la caja de selección.
'''Paso 5: Cuando Javascript está desactivado'''
Por el momento si un usuario ve la página con CSS activado, pero Javascript desactivado, nunca verá el campo de e-mail. Quita, entonces el CSS que esconde el campo y reemplázalo con Javascript que esconda el párrafo cuando se active el evento <code>onload</code> de la página.
Puedes echarle un ojo a las instrucciones '''if''' que utilizaste un poco antes para saber cómo puedes completar este reto. Cuando lo tengas funcionando, exclama "JavaScript es super cool" y toma un descanso.
== Reto 2: 'La misma de arriba': direcciones postales ==
| |||