Simulador (Cuando presiona el botón "ejecutar el programa"
se graban todos los cuadros de texto y se ejecuta el primero de la lista
mostrando en una página el resultado)
Problema:
<!DOCTYPE html>
<html>
<head>
<title>Ejemplo de jQuery</title>
<meta charset="UTF-8">
<link rel="StyleSheet" href="estilos.css" type="text/css">
</head>
<body>
<div id="descripcion1" class="recuadro">
<p>HTML es el lenguaje que se emplea para el desarrollo de páginas de internet.</p>
<p>Este lenguaje está constituido de elementos que el navegador interpreta y las despliega en la
pantalla de acuerdo a su objetivo. Veremos que hay elementos para disponer imágenes sobre una
página, hipervínculos que nos permiten dirigirnos a otra página, listas, tablas para tabular
datos, etc.</b>
</div>
<div id="descripcion2" class="recuadro">
<p>Para poder crear una página HTML se requiere un simple editor de texto (en nuestro caso
emplearemos este sitio) y un navegador de internet (IExplorer, FireFox etc.), emplearemos el
navegador que en este preciso momento está utilizando (recuerde que usted está viendo en este
preciso momento una página HTML con su navegador).</p>
<p>Lo más importante es que en cada concepto desarrolle los ejercicios propuestos y modifique los
que se presentan ya resueltos.</p>
<p>Este curso lo que busca es acercar el lenguaje HTML a una persona que nunca antes trabajó con el
mismo. No pretende mostrar todas los elementos HTML en forma alfabética.</p>
<p>Como veremos, de cada concepto se presenta una parte teórica, en la que se da una explicación
completa, luego se pasa a la sección del ejercicio resuelto donde podemos ver el contenido de la
página HTML y cómo la visualiza el navegador. Por último y tal vez la sección más importante de este
tutorial es donde se propone que usted haga páginas en forma autónoma (donde realmente podrá darse
cuenta si el concepto quedó firme).</p>
</div>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="funciones.js"></script>
</body>
</html>let x = $(document);
x.ready(inicializarEventos);
function inicializarEventos() {
let x = $("#descripcion1");
x.click(ocultarRecuadro);
}
function ocultarRecuadro() {
let x = $("#descripcion1");
x.fadeOut("slow", mostrarRecuadro);
}
function mostrarRecuadro() {
let x = $("#descripcion2");
x.fadeIn("slow");
}.recuadro {
background-color:#ffffcc;
font-family:verdana;
font-size:14px;
border-top-width:1px;
border-right-width:3px;
border-bottom-width:3px;
border-left-width:1px;
border-top-style:dotted;
border-right-style:solid;
border-bottom-style:solid;
border-left-style:dotted;
border-top-color:#ffaa00;
border-right-color:#ff0000;
border-bottom-color:#ff0000;
border-left-color:#ffaa00;
}
#descripcion2 {
display:none;
}