Desarollo Web Lección 2 - Texto

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 .

<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>

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 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.

// 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

El // denota un comentario en Javascript. El navegador ignorará todo lo que esté después de // 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. <body style="background-color:black";>
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”.

document.body.style.backgroundColor = "black";

Javascript lee el código HTML como un objeto llamado 'documento'.
En la programación orientada a objetos, un . 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 <body> (y todo lo que contiene) del código html.
.style representa el atributo de style del elemento.
Como estamos modificando el elemento 'background-color', lo agregamos al final del objeto para que la propiedad que queremos modificar sea document.body.style.backgroundColor.
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 -. 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 ="black" de la misma manera en álgebra asignamos un valor a una variable como x = 6
La palabra 'negro' está rodeada por " para decirle a Javascript que es texto.
También observe que la línea termina con un ;. 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.

animal = prompt("Dame un animal");

Esto nuevamente sigue el patrón de álgebra. Aquí estamos asignando la entrada del usuario a una variable llamada animal.
Usamos prompt() 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.

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'");

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.

document.getElementsByTagName('em')[1].innerHTML = sustantivo;

Nuevamente, comenzamos con document 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 pelota. Podemos usar eso.
document.getElementsByTag() encuentra la lista de elementos con la etiqueta especificada en el orden en que aparecen en el código HTML.
Claramente, queremos la etiqueta .
Es el segundo , 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 , por lo que usamos .innerHTML para seleccionar eso.
Finalmente, le damos el valor que obtuvimos del usuario en el segundo paso. = sustantivo Tenga en cuenta que sustantivo no está entre comillas porque sustantivo 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  for perro, Sam, barriga y oliendo.

<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>

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.

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;

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í.

// 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";

Siguiente: Ejercicio

Table of Contents

Desarollo Web Lección 2 - Texto

Javascript

Objetivo

Revision

Configuración

Avance

Comentarios

Notación de Objetos

Mensaje

Edición del texto del documento

Código definitivo