Both sides previous revision
Previous revision
Next revision
|
Previous revision
|
es:web_development:text:javascript [2022/02/09 13:57] mag [Mensaje] |
es:web_development:text:javascript [2024/04/02 05:11] (current) mag [Objetivo] |
===== Objetivo ===== | ===== Objetivo ===== |
En este ejercicio, probará por primera vez Javascript y lo utilizará para crear un juego simple, en el que un usuario debe cambiar las palabras clave de su historia para que sea divertida. | En este ejercicio, probará por primera vez Javascript y lo utilizará para crear un juego simple, en el que un usuario debe cambiar las palabras clave de su historia para que sea divertida. |
| |
| ===== Revision ===== |
| https://jsfiddle.net/maganthro/dugbv806/ |
| |
===== Configuración ===== | ===== Configuración ===== |
</h1> | </h1> |
<p style="text-align:right"> | <p style="text-align:right"> |
Mi amigo Pablo tiene un <em style="color:red; font-weight:700">perro mascota</em> llamado Sam al que le gusta que le rasquen la barriga. Cuando van al parque, <strong>le gusta perseguir una <em>pelota</em>.</strong> Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa. | Mi amigo Pablo tiene un <em style="color:red; font-weight:700">perro de mascota</em> llamado Sam al que le gusta que le rasquen la barriga. Cuando van al parque, <strong>le gusta perseguir una <em>pelota</em>.</strong> Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa. |
</p> | </p> |
<p style="text-indent:50px"> | <p style="text-indent:50px"> |
* El orden no importa, así que comencemos con el sustantivo, que reemplazará a 'pelota' en el texto. | * El orden no importa, así que comencemos con el sustantivo, que reemplazará a 'pelota' en el texto. |
* Agregue la siguiente declaración debajo del tercer comentario. | * Agregue la siguiente declaración debajo del tercer comentario. |
<code>document.getElementsByTagName('span')[1].innerHTML = sustantivo;</code> | <code>document.getElementsByTagName('em')[1].innerHTML = sustantivo;</code> |
* Nuevamente, comenzamos con <html>document</html> para indicar que nos referimos al código HTML (en lugar de una variable u objeto que hemos creado). | * Nuevamente, comenzamos con <html>document</html> para indicar que nos referimos al código HTML (en lugar de una variable u objeto que hemos creado). |
* Necesitamos una forma de referirnos a la palabra 'pelota'. Tenga en cuenta que ya tiene su propia etiqueta <html><em>ball</em></html>. Podemos usar eso. | * Necesitamos una forma de referirnos a la palabra 'pelota'. Tenga en cuenta que ya tiene su propia etiqueta <html><em>pelota</em></html>. Podemos usar eso. |
* <html>document.getElementsByTag()</html> encuentra la lista de elementos con la etiqueta especificada en el orden en que aparecen en el código HTML. | * <html>document.getElementsByTag()</html> encuentra la lista de elementos con la etiqueta especificada en el orden en que aparecen en el código HTML. |
* Claramente, queremos la etiqueta <html><em></html>. | * Claramente, queremos la etiqueta <html><em></html>. |
* Es el segundo <html><em></html>, entonces, ¿por qué hemos escrito ? Como muchos (¿todos?) programas de computadora, Javascript comienza a contar en 0, por lo que la primera aparición es 0 y la segunda es 1. | * Es el segundo <html><em></html>, entonces, ¿por qué hemos escrito '1'? Como muchos programas de computadora, Javascript comienza a contar en 0, por lo que la primera aparición es 0 y la segunda es 1. |
* Queremos reemplazar todo el código HTML dentro de esta etiqueta <html><em></html>, por lo que usamos <html>.innerHTML</html> para seleccionar eso. | * Queremos reemplazar todo el código HTML dentro de esta etiqueta <html><em></html>, por lo que usamos <html>.innerHTML</html> para seleccionar eso. |
* Finalmente, le damos el valor que obtuvimos del usuario en el segundo paso. <html>= noun</html> Tenga en cuenta que <html>noun</html> no está entre comillas porque nounno es texto en sí. Es el nombre de una variable que representa texto. | * Finalmente, le damos el valor que obtuvimos del usuario en el segundo paso. <html>= sustantivo</html> Tenga en cuenta que <html>sustantivo</html> no está entre comillas porque <html>sustantivo</html> no es texto en sí. Es el nombre de una variable que representa texto. |
* Ejecute el código tal como está para verificar que reemplaza 'bola' correctamente. | * Ejecute el código tal como está para verificar que reemplaza 'bola' correctamente. |
* No todas las palabras que queremos reemplazar tienen su propia etiqueta, así que agreguemos <html><span></html> for <html>Sam</html>, <html>barriga</html> y <html>oliendo</html>. | * No todas las palabras que queremos reemplazar tienen su propia etiqueta, así que agreguemos <html><span></html> for <html>perro</html>, <html>Sam</html>, <html>barriga</html> y <html>oliendo</html>. |
<code><p style="text-align:right"> | <code><p style="text-align:right"> |
Mi amigo Pablo tiene un <em style="color:red; font-weight:700">perro mascota</em> llamado <span>Sam</span> al que le gusta que le rasquen la <span>barriga</span> . Cuando van al parque, <strong>le gusta perseguir una <em>pelota</em>.</strong> Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa. | Mi amigo Pablo tiene un <em style="color:red; font-weight:700"><span>perro</span> de mascota</em> llamado <span>Sam</span> al que le gusta que le rasquen la <span>barriga</span> . Cuando van al parque, <strong>le gusta perseguir una <em>pelota</em>.</strong> Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa. |
</p> | </p> |
<p style="text-indent:50px"> | <p style="text-indent:50px"> |
* Recuerde usar los nombres de las variables que eligió si usó nombres diferentes a los que he usado. | * Recuerde usar los nombres de las variables que eligió si usó nombres diferentes a los que he usado. |
| |
===== Cambia Fundo ===== | |
* Ahora tenemos que cambiar el fondo a blanco de nuevo para que el texto pueda ser leído. | |
<code>document.body.style.backgroundColor = "white";</code> | |
| |
===== Código definitivo ===== | ===== Código definitivo ===== |
* El código Javascript final ahora se verá así. | * El código Javascript final ahora se verá así. |
<code>// hacer que el fondo sea negro para ocultar el texto existente | <code>// hacer que el fondo sea negro para ocultar el texto existente |
document.body.style.backgroundColor = "negro"; | document.body.style.backgroundColor = "black"; |
| |
// recopilar información del usuario | // recopilar información del usuario |
animal = prompt("Dame un animal"); | animal = prompt("Dame un animal"); |
nombre = indicador ("Dame un nombre"); | nombre = prompt ("Dame un nombre"); |
bodypart = prompt("Dame una parte del cuerpo"); | parteDelCuerpo = prompt("Dame una parte del cuerpo"); |
sustantivo = indicador ("Dame un sustantivo"); | sustantivo = prompt ("Dame un sustantivo"); |
place = prompt("Dame un lugar"); | lugar = prompt("Dame un lugar"); |
action = prompt("Dame una acción que termine en 'ing'"); | acción = prompt("Dame una acción que termine en 'ando' o 'endo'"); |
| |
// mostrar la entrada en la historia | // mostrar la entrada en la historia |