Ejercicios (sesiones) - Sesiones (1) - Enunciados

Para facilitar la realización de los ejercicios, se proporcionan unas plantillas de los ejercicios Sesiones (1) (Sesiones).

Puede consultar unas posibles soluciones de estos ejercicios. Si lo prefiere, puede descargar unas posibles soluciones completas de estos ejercicios.

Nota:

Comprobación de formularios

Sesiones (1) 01 - Formulario Texto (1)

Escriba un programa de dos páginas que solicite un texto al usuario y lo muestre en las dos páginas.

Enlace a ejemplo

Sesiones (1) 02 - Formulario Texto (2)

Modifique el programa anterior de manera que la segunda página no muestre ningún mensaje, sino que redirija a la primera.

Enlace a ejemplo

Sesiones (1) 03 - Formulario palabra en mayúsculas

Modifique el programa anterior de manera que:

Enlace a ejemplo

Sesiones (1) 04 - Formulario palabra en mayúsculas y palabra en minúsculas

Modifique el programa anterior de manera que haya dos controles:

Enlace a ejemplo

Gráficos

Sesiones (1) 11 - Subir y bajar número

Escriba un programa de dos páginas que muestre un valor numérico y permita subirlo o bajarlo mediante dos botones.

Ayuda
  • El código HTML podría ser el siguiente (con los valores que cambian resaltados):
    <p>
      <button type="submit" name="accion" value="bajar" style="font-size: 4rem">-</button>
      <span style="font-size: 4rem">0</span>
      <button type="submit" name="accion" value="subir" style="font-size: 4rem">+</button>
    </p>
    
Enlace a ejemplo

Sesiones (1) 12 - Mover un punto a derecha e izquierda

Escriba un programa de dos páginas que muestre un punto sobre una línea y permita moverlo a derecha o izquierda mediante dos botones.

Ayuda
  • El código HTML podría ser el siguiente (con los valores que cambian resaltados):
    <th>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
        width="600" height="20" viewBox="-300 0 600 20">
        <line x1="-300" y1="10" x2="300" y2="10" stroke="black" stroke-width="5" />
        <circle cx="0" cy="10" r="8" fill="red" />
      </svg>
    </th>
    
Enlace a ejemplo

Sesiones (1) 13 - Mover un punto en dos dimensiones

Escriba un programa de dos páginas que muestre un punto en un cuadrado y permita moverlo en vertical u horizontal mediante cuatro botones.

Ayuda
  • El código HTML podría ser el siguiente (con los valores que cambian resaltados):
    <td>
      <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
        width="400" height="400" viewBox="-200 -200 400 400" style="border: black 2px solid">
        <circle cx="0" cy="0" r="8" fill="red" />
      </svg>
    </td>
    
Enlace a ejemplo

Sesiones (1) 14 - Votar una opción

Escriba un programa de dos páginas que muestre gráficamente los votos recogidos por dos opciones.

Ayuda
  • El código HTML podría ser el siguiente (con los valores que cambian resaltados):
    
    <tr>
      <td style="vertical-align: top;"><button type="submit" name="accion" value="a" style="font-size: 60px; line-height: 50px; color: hwb(200 0% 0%);">✔</button></td>
      <td>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
          width="30" height="50">
          <line x1="0" y1="25" x2="30" y2="25" stroke="hwb(200 0% 0%)" stroke-width="50" />
        </svg>
      </td>
    </tr>
    <tr>
      <td><button type="submit" name="accion" value="b" style="font-size: 60px; line-height: 50px; color: hwb(35 0% 0%)">✔</button></td>
      <td>
        <svg version="1.1" xmlns="http://www.w3.org/2000/svg"
          width="40" height="50">
          <line x1="0" y1="25" x2="40" y2="25" stroke="hwb(35 0% 0%)" stroke-width="50" />
        </svg>
      </td>
    </tr>
    
Enlace a ejemplo