User Tools

Site Tools


es:web_development:text:javascript

Differences

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

Link to this comparison view

Both sides previous revision Previous revision
Next revision
Previous revision
es:web_development:text:javascript [2022/02/09 13:57]
mag [Código definitivo]
es:web_development:text:javascript [2024/04/02 05:11] (current)
mag [Objetivo]
Line 3: Line 3:
 ===== 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 =====
Line 10: Line 13:
 </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">
Line 72: Line 75:
   * 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">
Line 97: Line 100:
   * 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 'ando' o 'endo'");+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
es/web_development/text/javascript.1644443868.txt.gz · Last modified: 2023/08/16 09:33 (external edit)