Diferencia entre revisiones de «Diseño Web/Retos Javascript»
Contenido eliminado Contenido añadido
Corregí un error en la redacción del reto 1 |
Agregué la traducción del reto 2 |
||
Línea 117:
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 ==
Agrega el siguiente ''fieldset'' a una forma (la que creaste en el Reto 1 sirve bien) y cárgala en el navegador:
<pre>
<fieldset>
<legend>Información de cobro</legend>
<p>
<label>
Dirección postal:<br>
<textarea name="postaladdress" id="postaladdress"></textarea>
</label>
</p>
<p>
Dirección personal:<br>
<label>
<input type="checkbox" name="homepostalcheck" id="homepostalcheck">
La misma de arriba
</label>
<br>
<textarea name="homeaddress" id="homeaddress"></textarea>
</p>
</fieldset>
</pre>
La meta de este reto es copiar automáticamente la dirección postal a la dirección personal si un usuario activa la opción "La misma de arriba". Además de esto, desactivaremos el campo de la dirección personal cuando se active la caja de selección.
'''Paso 1: Agregar una plantilla de función'''
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 funciónse ejecute y ''prueba que funciona''.
'''Paso 2: Obteniendo la dirección postal'''
Antes de que podamos copiar la dirección, necesitamos saber cómo leerla usando JavaScript. En el reto 1 usamos la propiedad <code>.checked</code> para comprobar si una caja de selección estaba activada; esta propiedad contenía como valor ya sea ''true'' o ''false''. Si escribimos texto dentro de una <code><textarea></code> entonces la propiedad <code>.checked</code> no nos servirá de mucho.
En lugar de esto, usaremos la propiedad <code>.value</code> de <code>textarea</code>. Esta propiedad contiene el texto escrito en ese campo. En tu función <code>ponDireccionPostal()</code>, escribe una línea de código que muestre el contenido del campo ''Dirección postal'' mediante la propiedad <code>.value</code> en una ventana de alert.
'''Paso 3: Poniendo el valor para la dirección personal'''
Ahora que sabemos cómo encontrar el valor de cualquier elemento en nuestro documento, el truco es establecer el valor de la propiedad <code>.value</code> del elemento <code>homeaddress</code> al valor del elemento <code>postaladdress</code>. Para establecer el valor de <code>homeaddress</code> podríamos hacer algo como lo que sigue:
<pre>
document.getElementById("homeaddress").value = "Hola mundo";
</pre>
Pruébalo y ve que funcione. Debería ocurrir que cuando activas la caja de selección, la dirección personal contiene el texto "Hola mundo".
Ahora veamos si puedes modificar la línea de arriba para que en lugar de poner "Hola mundo" en el campo <code>homeaddress</code>, ponga el valor del campo <code>postaladdress</code>.
'''Paso 4: Desactivando el campo de Dirección personal'''
Usa la página de W3Schools sobre el objeto [http://www.w3schools.com/jsref/dom_obj_textarea.asp HTML DOM TextArea] y ve si puedes encontrar una propiedad que te permita desactivar un campo de este tipo.
Intenta modificar esta propiedad para el elemento "homeaddress" en tu función ponDireccionPersonal(). Asegúrate de probarla.
'''Paso 5: Alternando el campo de dirección personal'''
Ahora, cuando pruebes tu forma te darás cuenta de que al desactivar la caja de selección, el campo de dirección personal no se habilita.
Agrega una instrucción ''if'' a tu función ponDireccionPersonal() de manera que cuando la caja de selección no esté activada, el campo de dirección personal se habilite (te podría servir el revisar la solución al Reto 1).
{{diseño web}}
| |||