Curso de Javascript: Ejercicio Demostración

portada del curso de Javascript logo de Digital Learning

Ejemplo de ejercicio.

Actividad propuesta


Realizar una página web que simule pestañas que permiten cambiar el contenido mostrado en dicha página como si se tratase de un periódico digital.

Para ello, incluir en la parte superior 4 elementos DIV que harán las funciones de "opciones" del menú (por ejemplo: Portada, Nacional, Internacional y Deportes).

Habrá también 4 elementos DIV, cada uno con contenidos de noticias relativas a Portada (el primero), Nacional (el segundo), Internacional (el tercero) y Deportes (el último); estos DIV estarán ocultos, salvo aquel que en cada momento el usuario haya elegido como "opción" cuyo contenido desea ver (por defecto, se verá la portada).

Cada vez que el usuario pinche en alguno de los DIV que hacen las veces de opciones, se ocultan todos los DIV de contenido y se muestra sólo aquella de la opción seleccionada. Además, la opción seleccionada se muestra con fondo rojo y letras blancas, y las no seleccionadas al revés.

Para realizar este ejercicio, se aconseja definir estilos CSS para contenidos visibles, otro para contenidos ocultos, otro para opciones seleccionadas y otro para opciones no seleccionadas.

(Si no deseas perder tiempo con la definición de la parte puramente Web, copia el siguiente código e implementa la función cambiar que hemos dejado vacía).


<html>
<head>
<style>
.opcion { float: left; margin: 0px;margin-right: 10px; border: 0px white solid; }
.seleccionada { color: white; background-color: red; border: 1px solid red;}
.no-seleccionada { color: red; background-color: white; }
.contenido {position: absolute; top: 28px;left: 10px; width: 800px; height: 400px; }
.oculto { visibility: hidden; border: 0px white solid; }
.visible { visibility: visible;border: 1px red solid;}
</style>

<script>
// La función cambiar oculta TODOS los contenidos y muestra el de la sección indicada
function cambiar( seccion ) {
// Implementar aquí la función que se solicita
// Si lo estima conveniente, puede implementarla sin
// necesidad de pasarle ningún parámetro
</script>
</head>
<body>

<div class="opcion seleccionada" id="oPortada" onclick="cambiar( 'Portada' )">Portada</div>
<div class="opcion no-seleccionada" id="oNacional" onClick="cambiar( 'Nacional' )">Nacional</div>
<div class="opcion no-seleccionada" id="oInternacional" onClick="cambiar( 'Internacional' )">Internacional</div>
<div class="opcion no-seleccionada" id="oDeportes" onClick="cambiar( 'Deportes' )">Deportes</div>

<div class="contenido visible" id="cPortada">Soy la portada</div>
<div class="contenido oculto" id="cNacional">Soy la seccion de Nacional</div>
<div class="contenido oculto" id="cInternacional">Soy la sección de Internacional</div>
<div class="contenido oculto" id="cDeportes">Soy los deportes</div>

</body>
</html>

Metodología de los Ejercicios

¿En qué consisten los ejercicios?

Son actividades en las que el alumno busca soluciones a cuestiones prácticas habituales, relacionadas con el contenido del curso.

Pueden consistir en realizar una tarea y explicar los pasos seguidos; enviar una captura de pantalla con el resultado; elaborar una respuesta razonada sobre una determinada cuestión o caso práctico.

Las respuestas del alumno y las soluciones o comentarios del tutor se intercambian a través de la plataforma online.

¿Qué tipo de ejercicios hay?