Selector de etiquetas: algoritmos previos

Algoirtmos para el script

Una vez tenemos la página construída, con los estilos CSS definidos  y hemos comprobado que funciona correctamente le llega al turno a la parte de programa.

El código<javascript será el encargado de transferir las etiquetas entre los bloques asignadas y dispnibles y tambiéns se debe encargar de enviar los datos, como piden las especificaciones

Previo al código vamos a escribir un algoritmo en lenguaje natural, otra forma de preparar los programas, alternativa a los diagramas de flujo.

Proceso inicial

Asignar gestor de eventos al bloque de tags Asignados

Asignar gestor de eventos al bloque de tags Disponibles

Asignar gestor de eventos al botón de enviar

Usuario clicka

Ejecutar gestor del evento

Gestor: Etiquetas disponibles

Este sería el proceso por el que una etiqueta disponible se traslada a la zona de etiquetas asignadas

Si bloque pulsado es etiqueta ->pulsado y seguir

   Leer bloque pulsado -> etiqueta

   Crear bloque div con el texto de etiqueta  en un span -> bloque

   Añadir al bloque un boton span de cierre (x)

   Agregar bloque a la barra tags asignados

Gestor etiuetas asignadas

Es el opuesto al anterior, eliminar etiquetas asignadas pra devolverlas a la zona de etiquetas disponibles.

    Si bloque pulsado  es eliminar -> pulsado

       Leer bloque pulsado -> etiqueta

       Extraer bloque span con texto de etiqueta padre -> bloque

       Agregar bloque a la barra tags disponibles

       Eliminar etiqueta padre del bloque pulsado (en Asignados)

Enviar datos

El envío de datos puede hacerse al menos de dos formas:

  • Mediante un formulario
  • Mediante Fetch (mejor que Ajax)

En la página no hay ningún formulario, pero eso no impide que se pueda usar este método. Es el que vamos a usar: por su sencillez y porque es muy ilustrativo sobre el manejo del DOM con javasscript

Básicametne se trata de crear el elemento form, oculto, y usarlo como si estuviera en la página. Fácil.

Una vez enviado pasará a la página de resultado, donde se mostrarán los tags asignados y enviados.

    [Extraer tags] de la barra de tags asignados -> cadenaTags

    Crear un form

    Asignar a form

          id: "sendtags",

          action: "verdatos.php",

          method: POST

          style: display none

    Crear input

    Asignar a input...

          id :      "tags"

          value:  cadenaTags

    Añadir input al form

    Añadir form al body

    Hacer un submit del form

Extraer Tags

En el proceso de enviar hay un subproceso encargado de leer el texto de las etiquetas existentes en el bloque de etiquetas asignadas

    Leer el argumento (barra de tags) -> Lista_etiquetas

    Recorrer  Lista_etiquetas

        Leer el primer campo (texto) de cada etiqueta

        Guardar en una lista

    Fin de recorrer Lista_etiquetas

    Devolver la lista

 

Comentarios

Los algoritmos en lenguaje natural o en pseudo lenguaje, son muy útiles para escribir programas sin tener que estar pensando en que insturcción, objeto o función deberá usarse.

Se escribe el proceso a realizar de manera esquemática y señalando si hay algún subproceso.

Facillita concentrarse en el problema en si, evitando las distracción de la gramátic ay sintáxis del lenguaje de programación.