Tech School

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Desarollo Web Lección 2 - Texto ======
===== Javascript =====
===== 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 =====
  * Nos basaremos en el trabajo que ha realizado hasta ahora, así que si lo necesita, copie el código a continuación en jsfiddle .
<code><h1 style="font-family:arial, sans-serif; color: green; font-size: 1.7em; text-decoration: underline; font-variant:small-caps; text-shadow:2px 2px red;" >
Mi historia
</h1>
<p style="text-align:right">
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">
Los domingos conducen a las <sup>montañas</sup> donde corretea oliendo la hierba y <span style="color:blue;">meneando la cola</span>. Se cansa tanto que duerme todo el camino a casa.
</p></code>

===== Avance =====
  * Vamos a convertir esta historia en un juego. Puede que hayas jugado a esto de niño. Se le pedirá al usuario que proporcione palabras que se ajusten a ciertas categorías, que se colocarán en la historia para hacer algo ridículo. Eche un vistazo al resultado final [[https://jsfiddle.net/maganthro/cen6tj0L/12/|aquí]]. 

===== Comentarios =====
  * Haremos esto usando Javascript, que es un código que se ejecuta en la computadora del usuario.
  * Agregue el siguiente código al panel de Javascript en la parte inferior izquierda de su pantalla jsfiddle.
<code>// hacer que el fondo sea negro para ocultar el texto existente

// recopilar información del usuario

// mostrar la entrada en la historia

// hacer que el fondo sea blanco para mostrar el texto nuevamente</code>
  * El <html>//</html> denota un comentario en Javascript. El navegador ignorará todo lo que esté después de <html>//</html> hasta el final de la línea.
  * Estos comentarios muestran el proceso que seguiremos para nuestro juego.
  * Primero, pondremos la pantalla en negro para ocultar el texto.
  * Luego recopilaremos información del usuario y la colocaremos en la historia.
  * Finalmente, haremos que la pantalla sea blanca para que el usuario pueda leer el texto.

===== Notación de Objetos =====
  * Mira el primer comentario. Queremos agregar código debajo de esto para hacer que el fondo sea negro.
  * Si estuviéramos haciendo esto en HTML directamente, agregaríamos un atributo de estilo a la etiqueta del cuerpo como este. <html><body style="background-color:black";></html>
  * En Javascript, haremos lo mismo modificando ese atributo.
  * Agregue el siguiente texto debajo del primer comentario. Este texto es una instrucción para el navegador, generalmente denominada "declaración".
<code>document.body.style.backgroundColor = "black";</code>
  * Javascript lee el código HTML como un objeto llamado 'documento'.
  * En la programación orientada a objetos, un <html>.</html> se usa a menudo para denotar un subelemento del objeto principal. Javascript usa esta convención, por lo que 'document.body' se refiere a la etiqueta <html><body></html> (y todo lo que contiene) del código html.
  * <html>.style</html> representa el atributo de <html>style</html> del elemento.
  * Como estamos modificando el elemento 'background-color', lo agregamos al final del objeto para que la propiedad que queremos modificar sea <html>document.body.style.backgroundColor</html>.
  * Tenga en cuenta que la convención de nomenclatura de Javascript es diferente de HTML . HTML usa todos los nombres en minúsculas y une las palabras con un <html>-</html>. Javascript ejecuta todas las palabras juntas pero pone en mayúscula la primera letra después de una combinación.
  * Finalmente, queremos asignar el valor 'negro' a esa propiedad de estilo, por lo que usamos <html>="black"</html> de la misma manera en álgebra asignamos un valor a una variable como <html>x = 6</html>
  * La palabra 'negro' está rodeada por <html>"</html> para decirle a Javascript que es texto.
  * También observe que la línea termina con un <html>;</html>. Esto le dice al navegador que la declaración está completa y que el próximo texto que encuentre será una declaración separada.
  * Ejecuta esto para ver que funciona.
  * Cuando esté satisfecho, agreguemos también el código para restaurar el fondo a blanco al final del código. ¿Puedes hacer eso por ti mismo?

===== Mensaje =====
  * Necesitamos una forma de obtener información del usuario. Para mantener esto simple, no queremos usar un formulario en esta etapa. Usaremos un 'mensaje' en su lugar.
  * Agregue la siguiente declaración debajo del segundo comentario.
<code>animal = prompt("Dame un animal");</code>
  * Esto nuevamente sigue el patrón de álgebra. Aquí estamos asignando la entrada del usuario a una variable llamada <html>animal</html>.
  * 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 'ando, endo'). Intente crearlos usted mismo. Puedes llamarlos como quieras.
  * Aquí está mi versión.
<code>animal = prompt("Dame un animal");
nombre = prompt ("Dame un nombre");
parteDelCuerpo = prompt("Dame una parte del cuerpo");
sustantivo = prompt ("Dame un sustantivo");
lugar = prompt("Dame un lugar");
acción = prompt("Dame una acción que termine en 'ando' o 'endo'");</code>

===== Edición del texto del documento =====
  * Ahora necesitamos agregar las palabras proporcionadas por el usuario al texto mismo.
  * 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('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>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 '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>= 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>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"><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">
Los domingos conducen a las <sup>montañas</sup> donde corre <span>oliendo</span> la hierba y <span style="color:blue;">meneando la cola</span>. Se cansa tanto que duerme todo el camino a casa.
</p></code>
  * Ahora vamos a cambiar todas las palabras. El orden de estas declaraciones no importa, pero elijo hacerlo en el orden de las etiquetas en lugar del orden de aparición en el texto.
<code>document.getElementsByTagName('span')[0].innerHTML = animal;
document.getElementsByTagName('span')[1].innerHTML = nombre;
document.getElementsByTagName('span')[2].innerHTML = parteDelCuerpo;
document.getElementsByTagName('span')[4].innerHTML = acción;
document.getElementsByTagName('em')[1].innerHTML = sustantivo;
document.getElementsByTagName('sup')[0].innerHTML = lugar;</code>
  * Recuerde usar los nombres de las variables que eligió si usó nombres diferentes a los que he usado.


===== 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 = "black";

// recopilar información del usuario
animal = prompt("Dame un animal");
nombre = prompt ("Dame un nombre");
parteDelCuerpo = prompt("Dame una parte del cuerpo");
sustantivo = prompt ("Dame un sustantivo");
lugar = prompt("Dame un lugar");
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 = parteDelCuerpo;
document.getElementsByTagName('span')[4].innerHTML = acción;
document.getElementsByTagName('em')[1].innerHTML = sustantivo;
document.getElementsByTagName('sup')[0].innerHTML = lugar;

// hacer que el fondo sea blanco para mostrar el texto nuevamente
document.body.style.backgroundColor = "white";</code>

[[es:web_development:text:exercises|Siguiente: Ejercicio]]
Tech School

User Tools

Site Tools

Page Tools
