Sesion Laboratorio 5 Practica 2 1 - jesusgpa/2023-2024-CSAAI GitHub Wiki

Sesión Laboratorio 5: Práctica 2-1

  • Tiempo: 2h
  • Fecha: Jueves 22 de Febrero de 2024
  • Objetivos de la sesión:
    • Enunciado de la práctica 2
    • Toma de contacto con Javascript
    • Probar y entender todos los ejemplos vistos

Contenido

Comprobando elementos en la consola

La consola del navegador nos permite ver el contenido de todos los elementos creados y modificar sus valores.

Vamos a probar el Ejemplo 5 de la sesión S4

Abrimos la consola del navegador (Ctrl-Shift-K) y tecleamos test

Nos indica que el elemento test es un párrafo (tipo p).

Si pasamos el cursor por encima se resalta el párrafo en el navegador y si se pincha sobre él se abre la pestaña de Inspector y tenemos acceso a su estilo.

Desde la consola tenemos acceso a todas las propiedades del párrafo test.

Si escribimos test.innerHTML vemos en la consola el contenido del párrafo.

Si asignamos un valor nuevo a esta propiedad, el párrafo cambiará: test.innerHTML="Párrafo cambiado!!!!"

Utilizando el operador += de Javascript podemos añadir otra cadena: test.innerHTML+="Trozo añadido"

Y por supuesto también podemos cambiar directamente la propiedades del estilo.

Por ejemplo vamos a poner fondo amarillo: test.style.background="yellow"

Usando el depurador del navegador

El navegador incorpora un depurador (Debugger) de Javascript que nos permite ejecutar las instrucciones paso a paso y comprobar qué está sucediendo.

Es una herramienta clave para entender cómo funcionan nuestros programas y sobre todo encontrar los fallos

Para mostrar su uso vamos a usar esta página HTML, que guardamos en el fichero Ej-10.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ejemplo 10</title>
    <script src="Ej-10.js" defer></script>
</head>
<body>
    <p id="test">Haz click en este Párrafo...</p>
</body>
</html>

Y su correspondiente Javascript en el fichero Ej-10.js

console.log("Ejecutando JS...");

//-- Obtener el párrafo
const test = document.getElementById('test');

//-- Función de retrollamada de la pulsación del párrafo
test.onclick = () => {
    console.log("Click!");

    //-- Cambiar el color del fondo...
    //-- Si no tenía color asignado ponemos amarillo
    if (test.style.backgroundColor == "") {
        test.style.backgroundColor = "yellow";
    }
    //-- Si ya tiene color se lo quitamos
    else {
        test.style.backgroundColor = "";
    }

}

Cada vez que pulsemos sobre el párrafo, se cambia el color del fondo.

Se alterna entre blanco y amarillo. En esta animación lo vemos en funcionamiento.

Con el ejemplo anterior cargado, si pinchamos en el nombre del programa en js, en la parte de la derecha o bien en la pestaña Debugger aparece el depurador

En el panel central vemos el código javascript.

Al hacer clicks en los números de línea se establecen puntos de ruptura (Breakpoints).

Son los lugares donde queremos que la ejecución se detenga y entre en modo paso a paso. Ponemos uno en la línea 8

Ahora, cuando se vaya a ejecutar esa línea, el programa se detendrá.

Lo comprobamos haciendo click en el párrafo.

Aparece un mensaje indicando que la ejecución está detenida.

Está en la línea 8.

Esa línea todavía no se ha ejecutado.

Pinchamos en el icono de Step Over en la parte superior del panel derecho.

La instrucción se ejecuta y se marca la siguiente instrucción a ejecutar.

A esta acción de ejecutar una instrucción y pasar a la siguiente se le denomina dar un paso.

Si ahora pinchamos en la pestaña de la consola, veremos que efectivamente se ha impreso el mensaje "Click!".

Volvemos al depurador. Avanzamos un par de pasos, pinchando en STEP OVER dos veces, y el fondo del párrafo se pone amarillo

Para continuar con la ejecución pulsamos el botón triangular situado a la izquierda de step over.

El breakpoint sigue en la línea 8, por lo que cuando se reciba otro evento de click se volverá a detener. Para quitarlo volvemos a pinchar en la línea 8.

En esta animación se muestra el proceso completo:

¡A practicar!

Para practicar con Javascript haz desde cero los ejemplos mostrados en la sesión 4 de teoría.

Guárdalos en ficheros independientes y sitúalos en el directorio P2/S4 de tus prácticas.

Comprueba su funcionamiento y estúdialos.

Súbelos al repositorio.

Comprueba también el ejemplo 10 mostrado en esta sesión y practica con el depurador.

Ejercicios útiles para la práctica 2 ¡BOOM!

Para dar los primeros pasos con la práctica 2, y seguir practicando, haremos juntos en clase los siguientes ejercicios:

Ejercicio 1: Botón

Coloca un botón y haz que se imprima un mensaje en la consola cada vez que se pulse.

Ejercicio 2: Botón y párrafo

Un display, es un dispositivo que utilizamos para visualizar algo.

Coloca un display en tu documento html, vale con añadir un párrafo html <p>Display Boton 1</p>.

Modifica el programa anterior para que se imprima un mensaje en un párrafo HTML.

Ejercicio 3: Botón y dígito 1

Modifica el programa anterior para que se añada un '1' al final del párrafo cada vez que se pulse el botón.

Ejercicio 4: Botón y dígito 2

Coloca otro botón y haz que se añada otro número diferente al pulsarlo (por ejemplo el 2).

Atención recurso: Dale estilo a tus botones

button {
    background: #282A3A;
    color: #FFF;
    border-radius: 5px;
    padding: 10px 20px;
    border: 0;
    cursor: pointer;
    font-family: Fredoka;
    font-size: 18pt;
}

Ejercicios resueltos en clase

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS Botón 1</title>

    <link rel="stylesheet" href="l5-css.css">

    <script src="l51.js" defer></script>
</head>
<body>
    <h1>Display de Botones</h1>
    <p id="disp1">Display botón 1</p>
    <button id="bt1">Botón 1</button>
    <button id="bt2">Botón 2</button>
</body>
</html>
button {
    background: #282A3A;
    color: #FFF;
    border-radius: 5px;
    padding: 10px 20px;
    border: 0;
    cursor: pointer;
    font-family: Fredoka;
    font-size: 18pt;
}
console.log("Ejecutando js...")
//-- Leer el display del botón 1
const dsp1 = document.getElementById('disp1')

//-- Leer el botón identificado como bt1
const btn1 = document.getElementById('bt1')

//-- Leer el botón indentificado como bt2
const btn2 = document.getElementById('bt2')

//-- Configurar el manejador para el evento de
//-- pulsación de botón 1
btn1.onclick = () => {
  //console.log("Click sobre el botón 1 ... ")

  //dsp1.innerHTML = "Click sobre el botón 1 ... "
    dsp1.innerHTML += " 1" 

  //dsp1.style.backgroundColor = "yellow"

    if (dsp1.style.backgroundColor == "") {
        dsp1.style.backgroundColor = "yellow";
    }
    //-- Si ya tiene color se lo quitamos
    else {
        dsp1.style.backgroundColor = "";
    }  

}

btn2.onclick = () => {

   dsp1.innerHTML += " 2"  

   dsp1.style.backgroundColor = "red"
}

Extra 1: Flexbox sticky sidebar responsive

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Sticky Sidebar Responsive</title>

   <!-- Hoja de estilo -->
   <link rel="stylesheet" href="sticky-sidebar-responsive.css">    

</head>
<body>

<header>
    <h1>Responsive Sticky sidebar CSS</h1>
</header>

<main id="content">

    <aside>
        <h2>Sidebar</h2>
    </aside>    

    <article>
        <h2>Article Content</h2>
    </article>

</main>

<footer>
    <h2>Footer</h2>
</footer>

</body>

</html>
* {
  box-sizing: border-box;
}

main {
  max-width: 1000px;
  margin: 80px auto;
  display: flex;
  flex-flow: row wrap;
}

article {
  background-color: rgba(50, 255, 50, 0.3);
  height: 2000px;
  padding: 40px;
  flex: 1 1 70%;
}

aside {
  background-color: rgba(50, 50, 255, 0.3);
  height: 300px;
  padding: 40px;
  flex: 1 1 30%;
  min-width: 300px;
  top: 0;
  position: sticky;
  align-self: flex-start;
}

* {
  font: 400 16px/1.15 Arial;
  margin: 0;
}

header {
  max-width: 1200px;
  margin: 80px auto;
  background-color: rgba(255, 255, 50, 0.3);
  padding: 40px;
}

header h1 {
  font-size: 3rem;
}

footer {
  max-width: 1200px;
  margin: 80px auto;
  padding: 40px;
  height: 900px;
  background-color: rgba(255, 50, 50, 0.3);
}

h2 {
  font-size: 2rem;
}

Flexbox (Flexible Box Layout) es un modelo de diseño en CSS que permite a los elementos dentro de un contenedor distribuirse dinámicamente según el espacio disponible y las reglas de alineación y orden especificadas.

Flexbox se utiliza principalmente para crear diseños de página web más flexibles y adaptables, especialmente en lo que respecta a las disposiciones de elementos en una sola dimensión (fila o columna).

Con Flexbox, puedes especificar cómo se deben distribuir y alinear los elementos dentro de un contenedor, así como controlar el tamaño de los elementos y su orden dentro del diseño.

Esto hace que sea mucho más fácil crear diseños complejos y adaptables sin depender tanto de trucos de diseño complicados o cálculos tediosos.

Contenedor flexible

El contenedor (o flex container) define el contexto para los elementos hijos (o flex items) y puede ser configurado para distribuir los elementos en una fila o columna, controlar el espaciado entre los elementos, y manejar cómo se ajustan y cambian de tamaño los elementos dentro del contenedor.

Distribución de espacio flexible

Flexbox proporciona formas flexibles de distribuir el espacio disponible entre los elementos, permitiendo que se expandan, contraigan o mantengan un tamaño específico según las necesidades del diseño.

Alineación de elementos

Flexbox facilita la alineación de elementos dentro del contenedor en el eje principal (ya sea horizontal o vertical) y en el eje transversal, lo que permite un control preciso sobre la disposición de los elementos dentro del diseño.

Reordenamiento de elementos

Los elementos pueden ser reorganizados fácilmente dentro del contenedor sin necesidad de cambiar el orden en el HTML, lo que proporciona una mayor flexibilidad para adaptarse a diferentes diseños y tamaños de pantalla.

Flexbox es una herramienta de diseño en CSS que simplifica la creación de diseños web flexibles y responsive, permitiendo a los desarrolladores crear interfaces de usuario más dinámicas y atractivas.

Si quieres saber más, aquí tienes una guía completa.

Guía completa Flexbox

Extra 3: Responsive Flexbox Grid

Utilizando la propiedad CSS Flexbox para crear un sistema de rejilla adaptable y flexible.

Flexbox es un modelo de diseño en CSS que permite a los elementos dentro de un contenedor distribuirse dinámicamente según el espacio disponible y las reglas de alineación y orden especificadas.

Al combinar Flexbox con un sistema de rejilla, puedes crear diseños de página web que se ajusten y respondan de manera fluida a diferentes tamaños de pantalla y dispositivos.

Adaptabilidad

Los elementos dentro del grid pueden reorganizarse automáticamente para adaptarse a diferentes tamaños de pantalla, lo que proporciona una experiencia de usuario consistente en dispositivos móviles, tabletas y computadoras de escritorio.

Flexibilidad

Los elementos pueden expandirse o contraerse dinámicamente para aprovechar el espacio disponible, lo que permite diseños más fluidos y atractivos.

Control de alineación y distribución

Flexbox proporciona una gran flexibilidad en la alineación y distribución de elementos dentro del grid, lo que permite un control preciso sobre la apariencia y la disposición del diseño.

Menos código

En comparación con otros métodos de diseño de rejillas, Flexbox tiende a requerir menos código para lograr diseños complejos y adaptables.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Grid</title>

    <link rel="stylesheet" href="responsive-grid.css">
</head>
<body>
    <div class="wrapper">

        <header>
          <h1>Flexbox Demo Series</h1>
          <h2>Responsive Grid</h2>
        </header>
        
        <main>
      
          <p>A responsive grid made with flexbox <em>without</em> media query breakpoints.</p> 
          <p>Each grid item has a minimum width determined by the <code>flex-basis</code> value. </p>
          <p>The <code>flex-wrap: wrap</code> property on the parent wraps grid items when the total width of the items in the row exceeds the width of the parent.</p>
      
              <div class="flex-grid">
                <div class="flex-grid-item">navy</div>
                <div class="flex-grid-item">blue</div>
                <div class="flex-grid-item">aqua</div>
                <div class="flex-grid-item">teal</div>
                <div class="flex-grid-item">olive</div>
                <div class="flex-grid-item">green</div>
                <div class="flex-grid-item">lime</div>
                <div class="flex-grid-item">yellow</div>
                <div class="flex-grid-item">orange</div>
                <div class="flex-grid-item">red</div>
                <div class="flex-grid-item">maroon</div>
                <div class="flex-grid-item">fuschia</div>
                <div class="flex-grid-item">purple</div>
                <div class="flex-grid-item">black</div>
                <div class="flex-grid-item">grey</div>
                <div class="flex-grid-item">silver</div>
                <div class="flex-grid-item blank"></div>
                <div class="flex-grid-item blank"></div>
                <div class="flex-grid-item blank"></div>
                <div class="flex-grid-item blank"></div>
                <div class="flex-grid-item blank"></div>
              </div>
          
        </main>
      </div>    
</body>
</html>
.flex-grid {
  display: flex;
  flex-wrap: wrap;
}

.flex-grid-item {
  height: 80px;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 33.3333%;
  flex-basis: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.blank {
  height: 0;
}

/* colors by clrs.cc*/
.flex-grid-item:nth-child(1) {
  background-color: #001f3f;
  color: white;
}

.flex-grid-item:nth-child(2) {
  background-color: #0074D9;
  color: white;
}

.flex-grid-item:nth-child(3) {
  background-color: #7FDBFF;
}

.flex-grid-item:nth-child(4) {
  background-color: #39CCCC;
}

.flex-grid-item:nth-child(5) {
  background-color: #3D9970;
  color: white;
}

.flex-grid-item:nth-child(6) {
  background-color: #2ECC40;
}

.flex-grid-item:nth-child(7) {
  background-color: #01FF70;
}

.flex-grid-item:nth-child(8) {
  background-color: #FFDC00;
}

.flex-grid-item:nth-child(9) {
  background-color: #FF851B;
}

.flex-grid-item:nth-child(10) {
  background-color: #FF4136;
  color: white;
}

.flex-grid-item:nth-child(11) {
  background-color: #85144b;
  color: white;
}

.flex-grid-item:nth-child(12) {
  background-color: #F012BE;
  color: white;
}

.flex-grid-item:nth-child(13) {
  background-color: #B10DC9;
  color: white;
}

.flex-grid-item:nth-child(14) {
  background-color: #111;
  color: white;
}

.flex-grid-item:nth-child(15) {
  background-color: #aaa;
}

.flex-grid-item:nth-child(16) {
  background-color: #ddd;
}

Ejercicios recomendados

  • Haz los ejemplos de la sesión 4 de teoría en P2/S4
  • Súbelos al repo y compruébalos desde el ordenador y el teléfono móvil
  • Haz el ejemplo 10
  • Haz los ejercicios del 1 al 4 propuestos en la práctica

Conclusiones

Ya sabemos ejecutar nuestros primeros programas en Javascript y cómo mostrar información en la consola.

Sabemos cómo añadir texto y cómo depurar los programas.

Y también hemos aprendido a reaccionar al evento de onclick.

Autor

Jesús Parrado Alameda (jesusgpa)

Creditos

Licencia

Enlaces

⚠️ **GitHub.com Fallback** ⚠️