Differences

This shows you the differences between two versions of the page.

--- es:web_development:text:javascript [2022/02/09 13:52]
ander [Mensaje]
+++ es:web_development:text:javascript [2024/04/02 05:11] (current)
mag [Objetivo]
@@ Line 3: / Line 3: @@
 ===== 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.
+===== Revision =====
+https://jsfiddle.net/maganthro/dugbv806/
 ===== Configuración =====
@@ Line 10: / Line 13: @@
 </h1>
 <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 style="text-indent:50px">
@@ Line 59: / Line 62: @@
   * Usamos <html>prompt()</html> para abrir un cuadro con un mensaje y un cuadro de entrada para el usuario.
   * Escribimos el mensaje que queremos que se muestre dentro de los paréntesis. En este caso, es "Dame un animal". Nuevamente, para mostrar su texto, envolvemos el mensaje entre comillas.
-  * Agreguemos algunas declaraciones más: una para un nombre, una parte del cuerpo, un sustantivo, un lugar y un gerundio (un verbo que termina en 'ndo'). Intente crearlos usted mismo. Puedes llamarlos como quieras.
+  * Agreguemos algunas declaraciones más: una para un nombre, una parte del cuerpo, un sustantivo, un lugar y un gerundio (un verbo que termina en 'ando, endo'). Intente crearlos usted mismo. Puedes llamarlos como quieras.
   * Aquí está mi versión.
 <code>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'");</code>
+acción = prompt("Dame una acción que termine en 'ando' o 'endo'");</code>
 ===== Edición del texto del documento =====
@@ Line 72: / Line 75: @@
   * 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.
-<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).
-  * 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.
   * 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.
-  * 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.
-  * 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">
-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 style="text-indent:50px">
@@ Line 91: / Line 94: @@
 <code>document.getElementsByTagName('span')[0].innerHTML = animal;
 document.getElementsByTagName('span')[1].innerHTML = nombre;
-document.getElementsByTagName('span')[2].innerHTML = bodypart;
+document.getElementsByTagName('span')[2].innerHTML = parteDelCuerpo;
 document.getElementsByTagName('span')[4].innerHTML = acción;
 document.getElementsByTagName('em')[1].innerHTML = sustantivo;
@@ Line 97: / Line 100: @@
   * 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 =====
   * El código Javascript final ahora se verá así.
 <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
 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
 document.getElementsByTagName('span')[0].innerHTML = animal;
 document.getElementsByTagName('span')[1].innerHTML = nombre;
-document.getElementsByTagName('span')[2].innerHTML = bodypart;
+document.getElementsByTagName('span')[2].innerHTML = parteDelCuerpo;
 document.getElementsByTagName('span')[4].innerHTML = acción;
 document.getElementsByTagName('em')[1].innerHTML = sustantivo;

Tech School

User Tools

Site Tools

Differences

Page Tools