JavaScript (Parte 3 y 4)
Desarrollo de Aplicaciones en Entornos Web
Curso 2021/2022
Contenido
□ Parte I: Introducción a JavaScript
□ Parte II: Expresiones Regulares en JavaScript
□ Parte III: Api Browsers en JS : DOM y BOM
□ Parte IV: Modelo de Eventos
Desarrollo de Aplicaciones Web 2
Parte III: API DOM y BOM
□ JavaScript puede acceder al contenido de una página utilizando un
API denominada DOM (Doument Object Model) e interaccionar con
los navegadores con el API BOM (Browser Object Model).
□ El API DOM ha sido estandarizada por el consorcio W3C.
[Link]
[Link]
Document_Object_Model
□ DOM ofrece varios modos de acceso al contenido de una
página: desde nivel 0 a nivel 3
■ A través del objeto document
■ Mediante un árbol de objetos/nodos
■ Selectores de Nodos
Desarrollo de Aplicaciones Web 3
▪ DOM no es parte de la especificación de
JavaScript, es una API para los navegadores.
□ DOM: representación estructural del documento, permitiendo
modificar su contenido y presentación visual mediante JS.
Desarrollo de Aplicaciones Web 4
DOM - document
□ document representa la página HTML
□ Permite el acceso a toda la información del documento.
Desarrollo de Aplicaciones Web 5
DOM nivel 1 CORE
□ DOM Nivel 1: el navegador crea un árbol de nodos que
representa los elementos de la página HTML
Desarrollo de Aplicaciones Web 6
□ Disponible accediendo a los elementos document o window, para
manipular el documento mismo o sus diferentes partes
<html>
<head>
<script>
// ejecuta esta función cuando se cargue el documento
[Link] = function() {
// crea dinámicamente un par de elementos HTML en una página vacia
var heading = [Link]("h1");
var heading_text = [Link]("el texto que desee");
[Link](heading_text);
[Link](heading);
}
</script>
</head>
<body>
</body>
</html>
Desarrollo de Aplicaciones Web 7
[Link]([Link]);
[Link](document);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
setTimeout(() => {
[Link]([Link]().toString());
}, 2000);
[Link]("<h2>Hola Mundo desde el DOM</h2>");
Desarrollo de Aplicaciones Web 8
Referencias a nodos del documento
□ Obtener referencias a declaraciones por el atributo id.
var logo = [Link](“logo”);
□ Obtener todos los objetos de un tipo de etiqueta:
■ Ejemplo: obtener todos los bloques div
var array = [Link](“div”);
■ También se puede aplicar sobre cualquier nodo del árbol DOM.
□ Obtener referencias a declaraciones por el atributo
name.
var logo = [Link](“un_boton”);
Desarrollo de Aplicaciones Web 9
Nodos, Elementos y Selectores
[Link]([Link]("li"));
[Link]([Link]("card"));
[Link]([Link]("nombre"));
[Link]([Link](“menu"));
[Link]([Link]("#menu"));
[Link]([Link]("a"));
[Link]([Link]("a"));
[Link]("a").forEach((el) => [Link](el));
[Link]([Link](".card"));
[Link]([Link](".card"));
[Link]([Link](".card")[2]);
[Link]([Link]("#menu li"));
[Link]([Link]("#menu li"));
Desarrollo de Aplicaciones Web 10
Atributos y Data-Attributes
[Link]([Link]);
[Link]([Link]("lang"));
[Link]([Link](".link-dom").href);
[Link]([Link](".link-dom").getAttribute("href"));
[Link] = "en";
[Link]("lang", "es-MX");
const linkDOM = [Link](".link-dom");
[Link]("target", "_blank");
[Link]("href", "[Link]
[Link]([Link](“rel"));
[Link]("rel");
Desarrollo de Aplicaciones Web 11
Estilos y Variables CSS
const linkDOM = [Link](".link-dom");
[Link]([Link]);
[Link]([Link]("style"));
[Link]([Link]);
[Link]([Link]);
[Link]("text-decoration", "none");
[Link]("display", "block");
[Link] = "50%";
[Link] = "center";
Desarrollo de Aplicaciones Web 12
Clases CSS
const card = [Link](".card");
[Link]([Link]);
[Link]([Link]);
[Link]([Link]("rotate-45"));
[Link]("rotate-45");
[Link]("rotate-45");
[Link]("rotate-45");
[Link]("rotate-45", "rotate-135");
Desarrollo de Aplicaciones Web 13
Texto y HTML
const whatIsDOM = [Link]("que-es");
let text = '
<p>
El Modelo de Objetos del Documento (<b><i>DOM - Document
Object Model</i></b>) es un API para documentos HTML y XML.
</p>';
[Link] = text;
[Link] = text;
Desarrollo de Aplicaciones Web 14
Recorrido de los nodos
□ Tipos de nodos:
■ Nodos de elementos (etiquetas)
■ Nodos de texto.
■ Raíz: document.
□ Propiedades de los nodos:
■ firstChild, lastChild,
childNodes[],
■ parentNode, nextSibling,
previousSibling
Desarrollo de Aplicaciones Web 15
Recorrido de los nodos (Node)
var objeto_html = [Link];
□ Donde objeto_html es un nodo HTMLElement
var objeto_head = objeto_html.firstChild;
var objeto_body = objeto_html.lastChild;
var objeto_head = objeto_html.childNodes[0];
var objeto_body = objeto_html.childNodes[1];
var objeto_head = [Link];
var objeto_body = [Link];
Desarrollo de Aplicaciones Web 16
Recorrido de los nodos (Element)
const cards = [Link](".cards");
[Link]([Link]);
[Link]([Link][2]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]);
[Link]([Link]("div"));
[Link]([Link][3].closest("section"));
Desarrollo de Aplicaciones Web 17
Tipos de Datos
□ document
■ Raíz del objeto documento en sí mismo.
□ por ejemplo, la propiedad ownerDocument de un elemento
devuelve el documento "document" al cual pertenece
□ element
■ por ejemplo, [Link]()
□ attribute
■ por ejemplo, [Link]()
□ nodeList
■ Por ejemplo, [Link]().
■ Acceso a los items de la nodeList: [Link] (1), lista
[1]
■ [Link](list) + [Link]()
Desarrollo de Aplicaciones Web 18
Ejemplo
var table = [Link]("table");
var tableAttrs = [Link]; // Node/interfaz Element
for (var i = 0; i < [Link]; i++) {
// interfaz HTMLTableElement: atributo border
if(tableAttrs[i].[Link]() == "border")
[Link] = "1";
}
// interfaz HTMLTableElement: atributo summary
[Link] = "nota: borde aumentado";
Desarrollo de Aplicaciones Web 19
querySelector – document element
element = [Link](selectores);
□ Devuelve el primer Element del documento que
coincida con el grupo especificado de selectores.
■ utilizando un recorrido primero en profundidad pre ordenado
de los nodos del documento
■ selectores es una cadena de caracteres que contiene uno o
más selectores CSS separados por coma
var el = [Link](".miClase");
var el = [Link]("[Link]-panel input[name='login']");
□ el primer elemento <input name="login" /> dentro de <div class="user-
panel">.
Desarrollo de Aplicaciones Web 20
querySelectorAll – document element
elements = [Link](selectores);
□ Retorna una NodeList no viva que contiene un
objeto Element para cada elemento que coincida
con al menos uno de los selectores especificados
■ o una NodeList vacía en caso de que no haya
coincidencias
■ SyntaxError: La sintaxis de la cadena de texto
selectors no es válida.
var matches = [Link]('[Link],
[Link]');
Desarrollo de Aplicaciones Web 21
▪ Para convertir una NodeList en un Array:
let nodeList = [Link](selector);
let elements = [Link](nodeList);
▪ NodeList es un tipo de objeto Array, pero NO un
array.
▪ Sin embargo, algunos navegadores web
permiten usar forEach() o for...of.
Desarrollo de Aplicaciones Web 22
Creación de nodos
□ [Link]
□ [Link]
var newDiv = [Link]("div");
var newContent = [Link]("Hola!¿Qué tal?");
[Link](newContent); //añade texto al div creado.
// añade el elemento creado y su contenido al DOM
var currentDiv = [Link]("div1");
[Link](newDiv, currentDiv);
□ [Link]
var nodo = [Link]("div1");
var a = [Link]("miAtributo");
[Link] = "nuevoVal";
[Link](a);
Desarrollo de Aplicaciones Web 23
Manipulación de atributos
□ Los nodos de tipo Element contienen la propiedad
attributes
■ getAttribute(nombre), setAttribute(nombre, valor),
removeAttribute(nombre), hasAttribute(nombre)
<p id="introduccion" style="color: blue">
Párrafo de prueba
</p>
var p = [Link]("introduccion");
var elId = [Link]("id");
[Link]("id", "preintroduccion");
Desarrollo de Aplicaciones Web 24
Ejemplo creación con DOM
const figure = [Link]("figure"),
img = [Link]("img"),
figcaption = [Link]("figcaption"),
figcaptionText = [Link]("Animals"),
cards = [Link](".cards"),
[Link]("src", "[Link]
[Link]("alt", "Animals");
[Link]("card");
[Link](figcaptionText);
[Link](img);
[Link](figcaption);
[Link](figure);
Desarrollo de Aplicaciones Web 25
Modificación (Node)
□ Modificación de los hijos desde el nodo padre:
■ insertBefore(nuevoHijo, nodoHijoReferencia)
■ replaceChild(nuevoHijo, antiguoHijo)
■ appendChild(nuevoHijo) ! añade al final
■ removeChild(hijo)
□ Si el nodo hijo es una referencia a un nodo ya existente,
entonces lo mueve de la posición actual a la nueva
posición.
□ Los atributos de HTML son accesibles mediante
propiedades:
■ Ejemplo: [Link] = “[Link]”;
Desarrollo de Aplicaciones Web 26
Modificando Elementos (old way)
const cards = [Link](".cards"),
newCard = [Link]("figure"),
cloneCards = [Link](true);
[Link] = ‘
<img src="[Link] alt="Any">
<figcaption>Any</figcaption>’;
[Link]("card");
//[Link](newCard, [Link][2]);
//[Link]([Link]);
[Link](newCard, [Link]);
[Link](cloneCards);
Desarrollo de Aplicaciones Web 27
InsertAdjacentHTML (cool way)
□ Parsea el texto pasado como parámetro y lo
inserta dentro del DOM en una posición
específica.
[Link](position, html);
■ position
□ beforebegin: Antes que el propio elemento.
□ afterbegin: Justo dentro del elemento, antes de su primer
elemento hijo.
□ beforeend: Justo dentro del elemento, después de su último
elemento hijo.
□ afterend: Después del propio elemento.
■ html: contenido HTML a insertar.
Desarrollo de Aplicaciones Web 28
var lista;
var boton = [Link]("add");
[Link]("click",function(){
lista = [Link]("lista");
[Link]( "beforeend",
"<li>Elemento</li>");
},false);
Desarrollo de Aplicaciones Web 29
Modificando Elementos (cool way)
/*
.insertAdjacent...
.insertAdjacentElement(position, el)
.insertAdjacentHTML(position, html)
.insertAdjacentText(position, text)
Posiciones:
beforebegin(hermano anterior)
afterbegin(primer hijo)
beforeend(ultimo hijo)
afterend(hermano siguiente)
*/
const cards = [Link](".cards"),
newCard = [Link]("figure");
let contenCard = ‘<img src="[Link] alt="Any">
<figcaption></figcaption>’;
[Link]("card");
[Link]("afterbegin", contenCard);
[Link]("beforeend", newCard);
[Link]("figcaption").insertAdjacentText("afterbegin", "Any"); */
Desarrollo de Aplicaciones Web 30
BOM - Objetos del navegador
□ El código JavaScript puede acceder al contenido de un
navegador utilizando el API denominada BOM (Browser Object
Model).
Desarrollo de Aplicaciones Web 31
BOM - window
□ window ofrece el contexto general del navegador
□ [deprecated] Si una página emplea frames, cada uno
de ellos se almacena en el array frames
[Link][0]; [Link]["nombre del frame"];
□ BOM define cuatro métodos para manipular el tamaño
y la posición de la ventana:
■ moveBy(x, y) basado en incrementos, moveTo(x, y) basado en
posiciones absolutas, resizeBy(x, y), resizeTo(x, y)
■ Navegadores poco permisivos en la modificación de la ventana
Desarrollo de Aplicaciones Web 32
BOM - window
□ Abrir diálogos:
■ [Link](“…”) ó alert(“…”)! aviso
■ [Link](“…”) ó confirm(“…”)! devuelve true o false
□ Abrir diálogos confirmación:
■ [Link](“…”) ó prompt(“…”)
□ Propiedad location:
■ Cambia la página que visualiza la ventana.
■ [Link]()
■ [Link] = [Link]
■ Otras propiedades: host, pathname (contenido después del host), port, protocol,
search (contenido después de ‘?’)
□ Propiedad status: acceso a la barra de estado
□ Propiedad console: acceso a la salida consola.
□ [Link]()
□ [Link]()
Desarrollo de Aplicaciones Web 33
BOM - window
□ Propiedad navigator:
■ Propiedad userAgent: cadena que identifica al navegador.
■ Otras propiedades: browserLanguage/language, cookieEnabled
□ Propiedad history:
■ Historial de navegación de la ventana.
■ Métodos back() y forward() equivalen a los botones “Atrás” y “Adelante”.
■ Método go(number) Ej: [Link](-2) se mueve dos páginas atrás en el
historial
□ Propiedad screen (pantalla):
■ Acceso a las dimensiones de la pantalla.
■ Propiedades: width, height, availWidth, availHeight
[Link](0, 0);
[Link]([Link], [Link]);
Desarrollo de Aplicaciones Web 34
BOM - document
□ document es el único objeto que pertenece tanto a
DOM como a BOM.
□ Propiedades simples:
■ lastModified : Fecha de la última modificación
■ referrer : URL desde la que se accedió
■ title : etiqueta <title>
■ URL : URL de la página actual
□ Algunas propiedades arrays (acceso simple o
asociativo):
■ forms : todos los formularios de la página
■ images : todas las imágenes de la página
■ links : todos los enlaces de la página (<a href>)
Desarrollo de Aplicaciones Web 35
Formularios
□ Acceso:
■ [Link]["nombreFormulario"]
■ Alternativa: [Link]
□ Acceso a los controles de un formulario:
■ Array elements
■ [Link]["nif"]
■ Alternativa: [Link]
□ La acción de los botones de tipo submit y reset puede
ser realizada aplicando métodos del formulario:
■ [Link]()
■ [Link]()
Desarrollo de Aplicaciones Web 36
Formularios - Controles
□ Controles de tipo input:
■ Están disponibles los métodos:
□ focus(): ganar el foco de control
□ blur(): sacar el foco de control
□ select(): si contiene texto, lo marca seleccionado
□ Controles tipo select: (menús y listas)
■ Opciones accesibles a través del array options
■ Propiedad selectedIndex:
□ Almacena el índice de la opción seleccionada.
□ Si su valor es -1, no hay ninguno seleccionado.
Desarrollo de Aplicaciones Web 37
Formularios - Controles
□ Botones de radio:
■ El control es manejado como un array.
■ Propiedad length: número de botones.
□ Todos los atributos de HTML son accesibles como
propiedades:
[Link][“nif”].value;
□ Los atributos vacíos (ejemplo checked) son de tipo
booleano:
[Link][“licencia”].checked = false;
Desarrollo de Aplicaciones Web 38
Acceso a propiedades de estilo
□ Estilos de una etiqueta accesibles mediante propiedad style:
[Link](“intro”).[Link] = “red”;
[Link](“intro”)getAttributte(‘style’)
□ Precaución con nombres de las propiedades de estilo:
■ Guiones ! cambiar a mayúscula. Ej. font-size a fontSize
■ Los valores de TODAS las propiedades son cadenas, incluso las
medidas: ejemplo “1.5”
□ Consultar y cambiar la clase de una etiqueta:
■ Propiedad className/classList.
Desarrollo de Aplicaciones Web 39
Eventos (old way)
□ Eventos:
■ Introducidos en la versión 4 del estándar HTML
■ Ejemplos eventos:
■ Acciones del usuario sobre algún elemento de la página: click, doble
click, modificar un campo, etc.
■ Cambio estado interno de la página: la página está disponible, se
abandona la página web.
□ Los eventos son tratados con funciones (manejadores).
□ Registrar un manejador de evento:
■ Dentro de la etiqueta:
□ <button ... onclick=“manejador()”>
■ Asignando en JS la referencia a la función:
□ [Link] = manejador;
Desarrollo de Aplicaciones Web 40
Eventos (old way)
□ Acción por defecto:
■ Algunos eventos tienen asociada una acción por defecto.
Ejemplo: pulsar el botón submit de un formulario.
■ Es posible controlar si se permite la acción por defecto.
□ <input ... onchange=“return manejador()”>
■ Para anular la acción por defecto el manejador devuelve
false.
□ Establecer en el manejador el nodo que recibe el evento
utilizando this:
■ <input ... onchange=“manejador(this)”>
■ this referencia al nodo. En el manejador el parámetro
se puede utilizar para acceder a las propiedades del
nodo.
Desarrollo de Aplicaciones Web 41
Manejadores de Eventos
□ Utilizar los atributos XHTML para añadir manejadores
"ensucia" el código XHTML
<input id="pinchable" type="button"
value="Pinchame y verás"
onclick="alert('Gracias por pinchar');" />
□ Manejadores separados: el código XHTML es "limpio"
pues no se mezcla con el código JavaScript.
Desarrollo de Aplicaciones Web 42
Manejadores de Eventos
function muestraMensaje() {
alert('Gracias por pinchar');
}
[Link]("clickable").onclick =
muestraMensaje;
<input id="clickable" type="button” value=“Hacer
click" />
□ Asignar identificador único al elemento XHTML mediante el atributo id.
□ Crear una función de JavaScript encargada de manejar el evento.
□ Asignar la función a un evento concreto del elemento XHTML mediante
DOM.
Desarrollo de Aplicaciones Web 43
addEventListener (current way)
□ addEventListener: registra un listener de eventos, como se
especifica en W3C DOM.
■ Permite agregar mas de un listener a un solo evento.
■ Funciona en cualquier elemento del DOM, no únicamente con
elementos de HTML.
■ El objeto puede ser un simple elemento en un archivo, el mismo
documento , una ventana o un XMLHttpRequest.
var el = [Link]("mi_tabla");
[Link]("click", modifyText);
function modifyText(e) {
…
[Link]()
}
Desarrollo de Aplicaciones Web 44
addEventListener
• [Link](): evita que se ejecute la acción por defecto
addEventListener('click',
function(e) {
...
[Link]();
...
}
• Información del evento:
[Link]: quien produjo el evento
[Link]: tipo de Evento. Ej: 'click'
Desarrollo de Aplicaciones Web 45
Tipos de Eventos
[Link]
□ Foco de control y cambios (sólo controles de
formularios):
■ blur: pérdida foco de control
■ focus: gana el foco
■ change: contenido ha cambiado y pérdida del foco
■ select: selección texto.
□ Ratón: sobre cualquier elemento
■ click: clic sobre un elemento
■ dblclick: doble clic
■ mousedown: pulsar el ratón
■ mouseup: liberar pulsación ratón
■ mouseover: entrar puntero zona elemento
■ mouseout: salir con el puntero de la zona del elemento
Desarrollo de Aplicaciones Web 46
Tipos de Eventos
□ Teclado:
■ keypress: pulsación tecla (completa)
■ keydown: tecla pulsada (no liberada)
■ keyup: liberación tecla
■ cut/copy/paste: cortar, copiar/pegar
□ Formularios:
■ submit: pulsación botón envío formulario
■ reset: inicializar/resetear formulario
□ Carga de la página (<body>):
■ load: carga del documento ! documento accesible
■ unload: un documento va a ser descargado, sale de la página
Desarrollo de Aplicaciones Web 47
Flujo de Eventos
□ Flujo de eventos: El orden en el que se ejecutan los eventos
asignados a cada elemento de la página
■ Permite que que varios elementos diferentes puedan responder a un
mismo evento.
□ Modelos de flujo:
■ Event Bubbling: desde el elemento más específico hasta el
elemento menos específico (más común)
■ Event Capturing: desde el elemento menos específico hasta el
elemento más específico (contrario al "event bubbling”).
■ Event DOM: definido en la especificación DOM. Soporta tanto el
bubbling como el capturing.
□ Los dos flujos de eventos recorren todos los objetos DOM desde
document hasta el elemento más específico y viceversa, continuando el
flujo hasta el objeto window.
Desarrollo de Aplicaciones Web 48
Flujos de Eventos
Event Bubbling
Event DOM
Desarrollo de Aplicaciones Web 49
Desarrollo de Aplicaciones Web 50
var el = [Link]("mi_tabla");
[Link]("click", modifyText, false);
□ boolean useCapture :
■ Indica si el evento se propaga/está activado durante la fase
de captura.
■ Por defecto false, NO se aplica fase capturing
■ El evento se propaga a TODOS los elementos durante la
propagación.
■ Para detener la propagación:
[Link]()
Desarrollo de Aplicaciones Web 51
Ejemplo: Mostrar y ocultar bloques
□ Uno de los efectos más útiles en la programación dinámica
HTML es mostrar y ocultar un bloque.
□ Normalmente, se define una función del siguiente modo:
■ Parámetro: “id” del elemento sobre el que actúa.
■ Utiliza la propiedad de estilo “display”.
■ El bloque debe tener establecido explícitamente la propiedad de
estilo display para que funcione la función.
function muestraBloque(id) {
var bloque = [Link](id);
if ([Link] == “none”)
[Link] = “block”;
else [Link] = “none”;
}
Desarrollo de Aplicaciones Web 52
LocalStorage & SessionStorage
□ El objeto Storage nos permite almacenar datos de manera local en el
navegador
□ sin necesidad de realizar alguna conexión a una base de datos
□ localStorage y sessionStorage son propiedades que acceden al objeto
Storage para almacenar datos de manera local
□ localStorage almacena la información de forma indefinida o hasta que se
decida limpiar los datos del navegador
□ sessionStorage almacena información en la sesión web actual
□ Ambas se manejan igual:
[Link](‘clave’, ‘valor’)
let valor = [Link](‘clave’)
[Link](‘clave’)
if ([Link] > 0 )
[Link]()
Desarrollo de Aplicaciones Web 53
Trabajando con JSON en JS
□ JSON: objeto del API para trabajar con contenido en formato JSON
□ disponible en todos los navegadores modernos
□ [Link](): toma un objeto de JavaScript y lo transforma en una cadena
JSON.
□ Trabaja también con objetos Arrays.
□ [Link](): toma una cadena JSON y la transforma en un objeto de JavaScript
const myObj = {
name: 'Skip',
age: 2,
favoriteFood: 'Steak'
};
const myObjStr = [Link](myObj);
[Link](myObjStr);
// "{"name":"Sammy","age":6,"favoriteFood":"Tofu"}"
[Link]([Link](myObjStr));
// Object {name:"Sammy",age:6,favoriteFood:"Tofu"}
Desarrollo de Aplicaciones Web 54
Trabajando con JSON en JS
□ [Link](): puede tomar una función como segundo
argumento que puede transformar los valores de objeto antes de
que se devuelvan
const user = {
name: 'Sammy',
email: 'Sammy@[Link]',
plan: 'Pro'
};
const userStr = [Link](user);
[Link](userStr, (key, value) => {
if (typeof value === 'string') {
return [Link]();
}
return value;
});
Desarrollo de Aplicaciones Web 55
Trabajando con JSON en JS
□ [Link](): puede tomar una función como segundo
argumento para reemplazar
□ se puede usar para filtrar los valores
const user = {
id: 229,
name: 'Sammy',
email: 'Sammy@[Link]'
};
function replacer(key, value) {
[Link](typeof value);
if (key === 'email') {
return undefined;
}
return value;
}
const userStr = [Link](user, replacer);
// "{"id":229,"name":"Sammy"}"
Desarrollo de Aplicaciones Web 56