Mi historia
Mi amigo Pablo tiene un perro de mascota llamado Sam al que le gusta que le rasquen la barriga. Cuando van al parque, le gusta perseguir una pelota. Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa.
Los domingos conducen a las montañas donde corretea oliendo la hierba y meneando la cola. Se cansa tanto que duerme todo el camino a casa.
// 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.
* 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 (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.
Mi amigo Pablo tiene un perro de mascota llamado Sam al que le gusta que le rasquen la barriga . Cuando van al parque, le gusta perseguir una pelota. Se revolca en la tierra, así que Pablo tiene que lavarlo cuando llegan a casa.
Los domingos conducen a las montañas donde corre oliendo la hierba y meneando la cola. Se cansa tanto que duerme todo el camino a casa.
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";
[[es:web_development:text:exercises|Siguiente: Ejercicio]]