Tech School

User Tools

Site Tools

Trace: • javascript
es:web_development:text:javascript

Table of Contents

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 <em>pelota</em>. 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 <em>.
  • Es el segundo <em>, 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 <em>, 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 <span> 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

es/web_development/text/javascript.txt · Last modified: 2024/04/02 05:11 by mag

Page Tools

Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
CC Attribution-Share Alike 4.0 International Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki