3. Páginas Dinámicas con JS#

En este tema comenzaremos a ver cómo realizar páginas dinámicas sencillas con JS. Aprenderás a:

  1. Usar la programación orientada a objetos en JS

  2. Entender cómo usar la Web API HTML DOM

  3. Desarrollar páginas dinámicas sencillas con JS (sin necesidad de servidor)

Requisitos

Necesitas tener conocimientos básicos del lenguaje JS (El Lenguaje javascript (básico)).

Uso el tutorial de W3Schools y también referencias a MDN Dev Docs . Está en inglés, pero hay traducción a diferentes idiomas (arriba a la derecha en Change language).

Esfuerzo Necesario

El curso está organizado en 8 sesiones de clase. Cada clase (sesión) implica una dedicación de entre 2 y 4 horas.

La dedicación depende del conocimiento previo, motivación y capacidad de aprendizaje del estudiante para esa sesión en concreto.

3.1. Programación Orientada a Objetos#

  1. Paradigma de la programación Orientada a Objetos

    1. Programación Estructurada: datos por un lado y algoritmos por el otro

    2. Programación OO: datos y algoritmos en la misma estructura

  2. Cada lenguaje lo suele implementar con ciertas diferencias

  3. Ideas generales:

    1. Un objeto agrupa la estructura de datos (variables en propiedades)

    2. Y la algoritmia (lo que puedes hacer y cómo lo hace) en métodos

    3. Por eso cada objeto tiene todo lo que necesita para gestionarlo y …

    4. … te da una interfaz para gestionarlo.

  4. En el diseño OO, hay que definir los objetos y cómo se relacionan entre sí (no sigue la lógica de la programación estructurada)

  5. Creamos objetos (instancias)

    1. … según una estructura o plantilla previa (clases) que …

    2. … tiene miembros (propiedades y métodos)

  6. Características principales de la POO:

    1. Herencia. Se pueden relacionar objetos entre sí heredando estructura. Reutilizas código

    2. Encapsulación. Puedes definir una interfaz para relacionarte con el objeto. Separas lo público de lo privado

Actividad T03-A01. Diseña pensando en Objetos

Diseña, o sea modela, pensando en Objetos estos tres escenarios (o te puedes inventar uno):

  1. Una persona

  2. Un vehículo

  3. Una nave espacial

Deberías decidir qué propiedades quieres que tenga y también que acciones puede llevar a cabo. Hazlo de forma visual, en papel suele ser mucho más rápido.

3.2. Objetos en JS (lo básico)#

  1. En JS todo es un objeto -> js_object_definition

  2. Un objeto está compuesto por diferentes miembros:

    1. Propiedades -> js_object_properties

    2. Métodos (acciones) -> js_object_methods

  3. Accedemos a los miembros:

    1. Usando el operador punto

    2. Como arrays: usando corchetes con el nombre como clave

    3. Usamos los valores de las propiedades o ejecutamos las acciones que definen los métodos (con paréntesis).

    4. Usando sentencias de control especiales (js_loop_forin para objetos genéricos y js_loop_forof para objetos iterables)

  4. El objeto this (js_this): es una referencia al objeto en ese contexto

  5. Creación de objetos:

    1. Directamente y de forma literal. Usas llaves y pares clave: valor separado por comas.

    2. Usando constructores -> js_object_constructors

    3. Se suele usar const para declarar y asignar el objeto -> js_const

  6. Los objetos en JS son :

    1. muy dinámicos (puedo añadir/quitar miembros)

    2. mutables (pueden cambiar de contenido y de estructura).

Actividad T03-A02. Programa pensando en Objetos

Desarrolla, en JS, los objetos que modelaste en la sesión anterior.

Si no te sientes muy creativo puedes realizar este ejercicio de MDN (usa como modelo una persona)

3.3. Web API DOM#

https://www.w3schools.com/js/pic_htmltree.gif

  1. Hay multitud de APIs JS (en el navegador y externas) que en realidad declaran interfaces de programación que son objetos (iremos viendo varias).

    1. Encapsulan el comportamiento en una interfaz que puedes usar

    2. Documentan qué puedes hacer (propiedades y métodos)

    3. Y algunas veces precisan de autenticación o funcionalidad extra para acceder a ellas (las externas)

  2. Un navegador moderno (y gráfico) tiene muchas Web APIs definidas. La más habitual el Web API DOM (HTML, SVG o XML)

  3. Al cargar una página:

    1. el navegador genera un objeto (en realidad un árbol de objetos) con todos los elementos del documento HTML -> js_htmldom_document

    2. manipulando ese objeto, manipulas el documento y el usuario ve un documento diferente al que envió

  4. Al modificar el HTML DOM cambias el documento (para ese contexto)

    1. Modifico propiedades de un elemento

    2. Ejecuto métodos de un elemento

Actividad T03-A03. Usar las herramientas de desarrollo para ver el DOM

Usa las herramientas de desarrollo (elements) para ver el DOM de una página web cualquiera y su relación jerárquica con el elemento raíz (Document)

3.4. ¿Qué puedo hacer con el DOM?#

  1. Puedes cambiar el contenido de un elemento (HTMLElement)

  2. Puedes cambiar el estilo de un elemento

  3. Puedes generar acciones que respondan a eventos

  4. Puedes añadir y borrar nodos

  5. ¿Cómo accedo a un elemento? Hay muchas formas -> js_htmldom_elements

    1. Desde algo simple. P.ej un element (un objeto) o con un identificador (vía document.getElementById(«el id»);

    2. Algo más complejo. P.ej todos los elementos (un array de objetos) p de la clase ejemplo (document.querySelectorAll(«p.ejemplo»));

Actividad T03-A04. Usar la consola las herramientas de desarrollo (consola.log) para ver el DOM

  1. ¿Cómo seleccionas todos los elementos de un tipo (por ejemplo los párrafos)?

  2. ¿Cómo seleccionas los elementos que pertenecen a una clase concreta?

  3. ¿Cómo accedo a un elemento de una colección? Es decir, ¿cómo accedo a un párrafo concreto de una colección de elementos párrafo?

  4. ¿Cual es el contenido de un elemento concreto?

  5. ¿Cómo modifico el estilo de un elemento? Añade una regla CSS a un elemento

3.5. Una página dinámica (con JS)#

  1. Existe una relación jerárquica de los nodos del documento XML (que es en lo que se basa)

    https://www.arkaitzgarro.com/javascript/images/cap05/nodos.png

    1. Es un árbol de nodos

    2. De diferentes tipos: Document, Element, Attr, Text, Comment

    3. Que puedes consultar y/o gestionar (añadir / borrar)

  2. Página Dinámica = Páginas Estáticas + Acciones

    1. Página Estática programable a través del Web API DOM

    2. Uso de JS para modificar ese documento HTML usando el Web API HTML DOM

  3. Puede llegar a ser muy complejo, pero una página dinámica sencilla sería:

    1. Modificas el contenido de algún elemento (habitualmente usas la propiedad Element/innerHTML)

    2. Cambias el valor de un atributo (los atributos son propiedades del elemento)

    3. Modificas el estilo de un elemento (js_htmldom_css)

    4. (pro) Añades o Quitas elementos (nodos) -> P.ej vía Node/appendChild o Node/removeChild

Actividad T03-A05. Aplicación Web Sencilla

Sobre una página web, te vale casi cualquiera, y usando la consola JS:

  1. Modifica el título de la página

  2. Muestra el texto del elemento H1

  3. Modifica el contenido de un párrafo (que quieras)

  4. Modifica el contenido de un elemento concreto

  5. Di cuántos enlaces tiene la página

  6. Modifica uno de los enlaces de la página

  7. Cambia una de las imágenes de la página

  8. Cambia el color del texto de un elemento concreto

  9. Añade una regla css a uno de los elementos vía atributo style

  10. Di cuantas palabra hay en un párrafo concreto

3.6. Eventos#

  1. HTML y JS permiten usar programación orientada a eventos

    1. Es diferente a POO pero se basa en conceptos similares

    2. Es lo que hace tan interactivo el uso de aplicaciones cliente web

    3. La complejidad puede ser infinita (y ojo a la compatibidad de navegadores)

  2. Podemos añadir eventos (interacción con el usuario) a elementos HTML -> js_htmldom_events usando atributos específicos

  3. Y a cada evento le asociamos un manejador (event handler) para ejecutar una acción:

    1. Incluyendo el código en el atributo del evento. No tan recomendable pero vale para cosas sencillas.

    2. Asociando funciones JS al atributo. Quizá lo más usado

    3. Asociando funciones JS al evento pero usando el DOM (manejador semántico). El HTML queda limpio y sin atributos de eventos (separas la programación del contenido y del estilo). Es lo ideal.

  4. Hay muchísimos atributos para eventos

    1. El nombre del evento es: on + nombre del evento . Es decir, el evento click se convierte en el atributo onclick

    2. Algunos habituales: onload, onclick, onblur, onfocus … y muchísimos más

    3. Puede llegar a ser una lógica compleja a nivel de interfaz (no nos descentremos del usuario)

  5. Funcionamiento Básico:

    1. Creas un botón (button) o también con un ancla (a)

    2. Creas una función JS que modifique el DOM

    3. Asocias esa función al evento del botón onclick

  6. Puedes desactivar el comportamiento del evento si pones el valor del evento en false (por ejemplo una función que devuelva false)

Actividad T03-A06. Programación con eventos

Hay muchísimas posibilidades para jugar con eventos. La más directa es añadir control de eventos a algunas tareas de la sesión anterior para hacerlo con botones o enlaces en vez de hacerlo con la consola. Es decir, añadirle interactividad con el usuario.

Algunos ejercicios sencillos habituales:

  1. Muestra una alerta o mensaje en consola al pulsar un botón

  2. Cambia una imagen del documento

  3. Cambia el color de texto de un párrafo

  4. Oculta un bloque de texto (o muéstralo)

  5. Cuenta las palabras de un párrafo

3.7. Formularios en JS#

  1. En el DOM se cargan los formularios:

    1. Array de objetos form con los formularios

    2. Array de objetos element de cada formulario (por ejemplo input)

    3. Usas referencia por nombre (input#name) o mejor por identificador id , tanto vía objeto form como objeto document

  2. Obtener (o modificar) el valor de una propiedad de un elento (nodo):

    1. Obtener el elemento (HTMLElement)

    2. Usar la propiedad value

    3. Depende del tipo de elemento que uses. No es lo mismo revisar un checkbox que un select

  3. Los formularios son ideales para gestionar con eventos porque el usuario está interactuando continuamente:

    1. Pone el foco en el elemento (event_onfocus) y

    2. quizá presione el ratón (event_onmousedown) y

    3. hace click (event_onclick) y luego

    4. suelta el ratón (event_onmouseup) y

    5. luego pulsa el teclado (event_onkeypress) y …

    6. … hasta que termine (hay muchos más eventos dom_obj_event)

  4. Validación de formularios:

    1. Ideal para revisar, antes de enviar el formulario, que están todos los valores (o vía el atributo required)

    2. Ideal para el uso de expresiones regulares y hacer validación del valor en los campos (o via el atributo pattern o el uso de elementos específicos)

Actividad T03-A07. Formulario básico Persona

Desarrolla un formulario para el registro de una persona (nombre, apellidos, dni, edad y provincia), que vas a validar usando JS:

  1. El nombre sólo puede llevar caracteres latinos habitules. No se aceptan nombres compuesto (ni espacios ni guiones)

  2. La edad ha de ser un número entero y de máximo 85 años

  3. Solo aceptamos registros de personas que vivan en una provincia gallega

  4. No permitirá enviar hasta que todos los campos son correctos (el botón enviar aparecerá desactivado). El único campo que no es obligatorio es el de los apellidos

  5. (pro) Si hay apellidos, tendrán una longitud máxima de 40 caracteres. Y le mostrarás una ayuda al usuario para decirle cuantos caracteres lleva (al estilo de 10/40 si lleva 10 caracteres)

3.8. Consideraciones Finales#

  1. La referencia son las especificaciones de la Web API HTML DOM :

    1. No es solo el objeto documento (DOM)

    2. Incluye más APIS (veremos Canvas, WebStorage y alguna más)

    3. Nos centramos en la estructura y los elementos pero permite más cosas

    4. Es compleja y completa

  2. La lógica de gestión de eventos es compleja porque un evento puede afectar a diferentes elementos, con relación jerárquica:

    1. Modelo Event Bubbling : mismo evento en varios elementos (lo ordena jerárquicamente en orden inverso, es decir, del más específico al más genérico)

    2. Modelo Event Capturing: inverso al anterior

  3. El DOM usa primero «capturing» y luego «bubbling»:

    https://www.arkaitzgarro.com/javascript/images/cap07/flujo-eventos.png

  4. Puedes controlar los eventos con más precisión usando Listeners -> js_htmldom_eventlistener

    1. Asignas un evento a un elemento

    2. Especificas el modo de gestionar el flujo de eventos (la función que lo gestionará)

    3. Te permite añadir varias veces el mismo evento (por ejemplo hacer doble o triple click)

Actividad T03-A08. Revisar el API

El uso del API puede ser muy complejo. Aquí tienes algunos ejercicios para probar:

  1. Busca (y usa) una propiedad que no conozcas

  2. Busca (y usa) un evento que no conozcas

  3. Cambia el color de un texto al pasar el ratón por encima

  4. Crea un campo donde introduzcas el DNI. Añáde un botón de «Comprobar DNI» que compruebe que es correcto y que la letra es la adecuada (es un algoritmo concreto, no vale sólo comprobar que es una letra)

  5. Quita el botón y hazlo automáticamente. Al llegar al último número te pone la letra automáticamente y no te deja escribir más.

  6. En un campo de texto, a medida que vas escribiendo, pasa las letras a mayúsculas

  7. Crea una función con estadísticas de la página, por ejemplo que diga cuantas imágenes tiene o cuantos enlaces. O por ejemplo el número de párrafos y cuántos caracteres tiene

  8. Crea una función del tipo «sólo leer» que quite las páginas, los enlaces y los estilos de página para dejar el texto listo para leer, sólo con la estructura básica (títulos, párrafos, resaltados, listas y tablas)

  9. Crea un editor online sencillo. Usando un formulario, vas creando un texto párrafo a párrafo. Pero con un máximo de 5 párrafos