01-2023

Desarrollo de Aplicaciones Web

Tema 3 – Introducción a
JavaScript
Michel Maes
Micael Gallego Francisco Gortázar [email protected]
Correo: [email protected] Correo: [email protected]
Óscar Soto
Twitter: @micael_gallego Twitter: @fgortazar
[email protected]
 01-2023

©2023
Micael Gallego, Francisco Gortázar, Michel Maes, Óscar Soto
Algunos derechos reservados
Este documento se distribuye bajo la licencia
“Atribución-CompartirIgual 4.0 Internacional”
de Creative Comons Disponible en
https://creativecommons.org/licenses/by-sa/4.0/deed.es
Tecnologías del cliente
JavaScript

• Introducción
• Características básicas
• HTML interactivo

3
Tecnologías del cliente
JavaScript

• Introducción
 JavaScript
 Librerías JavaScript
 Frameworks de alto nivel
 Referencias
• El lenguaje JavaScript
• HTML Interactivo

4
Introducción
JavaScript

• Las páginas web pueden incorporar

interactividad con el lenguaje JavaScript
• Con JavaScript se puede modificar la página y
ejecutar código cuando se interactúa con ella
(a través del modelo de objetos del documento
DOM)
• También se pueden hacer peticiones al servidor
web en segundo plano y actualizar el
contenido de la web con los resultados (AJAX)
5
Introducción
JavaScript

•Es un lenguaje de programación basado en el

estándar ECMAScript de ECMA (otra
organización diferente al W3C)
•Hay ligeras diferencias en la implementación
de JS de los navegadores, aunque actualmente
todos son bastante compatibles entre sí (en el
pasado no fue así)
http://www.ecma-international.org/
6
Introducción
JavaScript

• Versiones: ES5
– La versión del estándar más utilizada actualmente es
EcmaScript es la 5.1 (2011), aunque generalmente se
la conoce como ES5
– Prácticamente todos los navegadores soportan la
mayoría de las características definidas en el
estándar 5.1
– Será el estudiado salvo que se indique lo contrario
http://kangax.github.io/compat-table/es5/
7
Introducción
JavaScript

• Versiones: ES6 (ES2015)

 En Junio 2015 finalizó el desarrollo de ES6 con una
evolución importante del lenguaje
 A última hora decidieron llamarle oficialmente
ES2015
 Cada vez está más soportada por los navegadores,
aunque hay algunos que todavía no soportan todas
las características
 Existen conversores de código JavaScript ES6 a
ES5
http://kangax.github.io/compat-table/es6/
8
Introducción
JavaScript

• JavaScript no es Java
– Aunque algunos elementos de la sintaxis
recuerden a Java, son lenguajes
completamente diferentes
– El nombre JavaScript se eligió al publicar el
lenguaje en una época en la que Java
estaba en auge y fue principalmente por
marketing (inicialmente se llamó
LiveScript)

9
Introducción
JavaScript
• Características principales de JavaScript
 Scripting: No necesita compilador. Inicialmente era un
lenguaje interpretado, pero actualmente se ejecuta con
máquinas virtuales en los navegadores (mayor
velocidad de ejecución y eficiencia de memoria)
 Tipado dinámico: habitual en los lenguajes de script
 Funcional: Las funciones son elementos de primer
orden
 Orientado a objetos: Basado en prototipos, no en
clases como Java, C++, Ruby…
10
Introducción
JavaScript
• DOM (Document Object Model)
 Librería (API) para manipular el documento HTML
cargado en el navegador
 Permite la gestión de eventos, insertar y eliminar
elementos, cambiar propiedades..
• BOM (Browser Object Model)
 Acceso a otros elementos del browser: historial,
peticiones de red AJAX, etc…
 El BOM incluye al DOM como uno de sus elementos

11
Introducción
JavaScript

• BOM (Browser Object Model) DOM

12
Introducción
Librerías JavaScript
• Existen multitud de bibliotecas
(APIs) JavaScript para el
desarrollo de aplicaciones
• Algunas de las más usadas son:
 jQuery: es un recubrimiento de la API DOM que aporta
facilidad de uso, potencia y compatibilidad entre navegadores.
Se usa para gestionar el interfaz de usuario (la página web) y
para peticiones ajax.
 underscore.js: Librería para trabajar con estructuras de datos
con un enfoque funcional. También permite gestionar plantillas
(templates) para generar HTML partiendo de datos
13
Introducción
Frameworks de alto nivel

• Además de librerías, también existen

frameworks del alto nivel que estructuran una
aplicación de forma completa. Especialmente
en aplicaciones SPA

14
Introducción
Referencias

(2008) (2012)
15
Introducción
Referencias

(2012) (2011) Descarga gratuita

16
Introducción
Referencias

• Tutoriales interactivos on-line

 Codecademy.com
 Codeschool.com
• Blogs
 Introducción a JavaScript:
 http://micaelgallego.github.io/blog/Viaje-por-las-tecnologias-de-front-end2/

 Comparativa de POO en Java y JS:

 http://micaelgallego.github.io/blog/Orientacion-a-Objetos-en-JavaScript-comparado-c
on-Java/
 JavaScript no es orientado a objetos:
 http://micaelgallego.github.io/blog/JavaScript-no-es-orientado-a-objetos/
17
Tecnologías del cliente
JavaScript
• Introducción
• El lenguaje JavaScript
 Características del lenguaje
 Integración con HTML
 Sintaxis básica
 Arrays
 Sentencias de control de flujo
 Funciones
 Excepciones
 Orientación a objetos básica
• HTML Interactivo
18
El lenguaje JavaScript
Características del lenguaje

• Vamos a estudiar las principales

características de JavaScript ES5
• En el siguiente tema se verán también algunas
características de ES6 (ES2015)
• Como Java es un lenguaje muy conocido,
JavaScript se presentará en comparación con
éste

19
El lenguaje JavaScript
Características del lenguaje
• Lenguaje de script (Java es compilado)
 No existe compilador
 El navegador carga el código, lo analiza y lo ejecuta
 El navegador indica tanto errores de sintaxis como
errores de ejecución
• Tipado dinámico (Java tiene tipado estático)
 Al declarar una variable no se indica su tipo
 A lo largo de la ejecución del programa una misma
variable puede tener valores de diferentes tipos

20
El lenguaje JavaScript
Características del lenguaje

• Imperativo y estructurado (como Java)

 Se declaran variables
 Se ejecutan las sentencias en orden
 Dispone de sentencias de control de flujo de
ejecución (if, while, for…)
 La sintaxis imperativa/estructurada es muy
parecida a Java y C

21
El lenguaje JavaScript
Características del lenguaje
• Orientado a objetos
 Todos los valores son objetos (no como en Java, que existen tipos
primitivos)
 Existe recolector de basura para liberar la memoria de los objetos
que no se utilizan (como en Java)
 La orientación a objetos está basada en prototipos (en Java está
basada en clases)
 En tiempo de ejecución se pueden crear objetos, cambiar el valor
de los atributos e invocar a métodos (como en Java)
 En tiempo de ejecución se pueden añadir y borrar atributos y
métodos (en Java no se puede)
22
El lenguaje JavaScript
Características del lenguaje
• Funciones
 Aunque sea orientado a objetos, también permite
declarar funciones independientes (en Java todas las
funciones son métodos de clases)
 Las funciones se pueden declarar en cualquier sitio,
asignarse a variables y pasarse como parámetro
 Existen funciones anónimas (como las expresiones
lambda de Java)
 En JavaScript se puede implementar código siguiendo
el paradigma funcional
23
El lenguaje JavaScript
Integración con HTML
• El código JavaScript se puede incluir directamente en el
documento HTML en etiquetas <script>
• Pero es recomendable que el código JS esté en en ficheros
aparte
• El código será cargado y ejecutado cuando se encuentre en el
documento, antes de continuar procesando el HTML
<html>
<body>
<scrip>alert("Hola");</script>
...
<script src="js/script.js"></script>
...
</body>
</html>
24
El lenguaje JavaScript
Sintaxis básica
● Mostar información desde JavaScript
– Escribiendo en el documento HTML en la
posición del script
document.write('Texto');

– Escribiendo en la consola JavaScript del

navegador
console.log('Texto');

25
El lenguaje JavaScript
Sintaxis básica

• Comentarios (como en Java)

 Una línea y multilínea
• Delimitadores (como en Java)
 De bloque {}
 De sentencia ; (opcionales)
• Palabras reservadas
abstract boolean break byte case catch char class const continue
debugger default delete do double else enum export extends false final
finally float for function goto if implements import in instanceof int
interface long native new null package private protected public return
short static super switch synchronized this throw throws transient true
try typeof var volatile void while with

26
El lenguaje JavaScript
Sintaxis básica
• Variables
 Es un lenguaje dinámico (con tipado dinámico)
 Las variables se tienen que declarar pero no se indica el tipo

//La variable edad tendrá un valor de 34

var edad = 34;
var encontrado = false;

 Las declaraciones se suelen hacer al principio de la función

 La variable tiene como ámbito la función, no el bloque. Al
finalizar el bloque, la variable sigue presente (En Java es por
bloque)
27
El lenguaje JavaScript
Sintaxis básica
• Variables
 Si las variables no no se inicializan tienen el valor
undefined (en vez de cero o null como en Java)
var hola;
console.log("Hola: " + hola);
Hola: undefined

 Si las variables no se declaran (por una equivocación)

 Si se intenta leer su valor salta un error (que finaliza la
ejecución)
 Si se asigna un valor, se crea un nuevo atributo en el
objeto global (no dan error las siguientes lecturas)
28
El lenguaje JavaScript
Sintaxis básica
• Tipos de datos “básicos”
 Son objetos (no existe distinción como en Java entre objetos y tipos
primitivos)
 Number
 Números enteros y reales de cualquier precisión
 String
 Cadenas de caracteres
 Comillas simples o dobles
 Inmutable (como en Java)
 Operador + (como en Java)
 Como no hay tipo caracter, se usa un string de tamaño 1
 Boolean
 true o false (como en Java)
29
El lenguaje JavaScript
Sintaxis básica
• Operadores en expresiones
 Similares a Java
 Aritméticos: + - * / % (la división es siempre real)
 Comparación números: < > <= >=
 Lógicos: && || !
 Comparativo: ?: (Elvis operator)
 Modificación: ++ --
 Asignación: = += -= *= /= %=
 Diferentes a Java. Comparación
 Igual: ===
 Distinto: !==
 En strings se comporta como el equals(…) en Java
 En arrays se comporta como == en Java
30
El lenguaje JavaScript
Arrays
• Los arrays de JavaScript son parecidos a los de Java
 El acceso para lectura o escritura es con [ ]
 Tienen la propiedad length
 Empiezan por cero
 La asignación de una variable con un array a otra
variable, no copia. Ambas variables apuntan al mismo
objeto array
 El operador === compara si son el mismo objeto (no
que tengan el contenido igual)

31
El lenguaje JavaScript
Arrays

• Los arrays de JavaScript son parecidos a los

de Java
 Los arrays de varias dimensiones son arrays de
arrays. Hay que crear de forma explícita los niveles.
 Se recorren de la misma forma
var numbers = [3, 4, 4, 2];

for (var i = 0; i < numbers.length; i++) { 3,4,4,2,

document.write(numbers[i] + ',');
}

32
El lenguaje JavaScript
Arrays
● Pero se diferencian en algunos detalles
– Los arrays literales con [ ] en vez de { } y sin new

var empty = [];

var numbers = ['zero','one','two','three']

– Para crear un array con varias posiciones undefined se usa

var array = new Array(3);

– Cualquier array puede tener valores de diferentes tipos

mezclados (tipado dinámico)

33
El lenguaje JavaScript
Arrays

• Errores de acceso en arrays

 La lectura de un elemento fuera de los límites
devuelve undefined
 En Java sería un ArrayIndexOutOfBoundsException
 La escritura de un elemento fuera de los límites del
array se permite, haciendo más grande el array y
rellenando con valores undefined los huecos

34
El lenguaje JavaScript
Arrays
var numbers = [3, 4, 4, 2];

document.write(numbers[5] + '<br>');

numbers[7] = 4;

document.write(numbers[7] + '<br>');

for (var i = 0; i < numbers.length; i++){

document.write(numbers[i] + ",");
}

undefined
4
3,4,4,2,undefined,undefined,undefined,4,
35
El lenguaje JavaScript
Arrays

• Errores de acceso en arrays

 Si una variable tiene el valor undefined y se intenta
acceder a un elemento como si apuntara a un array,
genera un error “TypeError: Cannot read property
'5’ of undefined”
 En Java sería un NullPointerException

var numbers;

document.write(numbers[5] + '<br>');

36
El lenguaje JavaScript
Arrays

• Modificación del array

 Se pueden establecer elementos en posiciones no
existentes y el array crece dinámicamente.
 El método push añade un elemento al final del array
(como el método add del ArrayList en Java)
 La propiedad length se puede cambiar el tamaño
del array (si se amplía, se rellena con undefined)

37
El lenguaje JavaScript
Arrays

• Modificación del array

 El operador delete borra un elemento dejando el
hueco con valor undefined
delete numbers[2];
 Para borrar y no dejar el hueco se usa el método
splice indicando el índice desde el que hay que
borrar y el número de elementos que borrar
numbers.splice(2, 1);

38
El lenguaje JavaScript
Sentencias de control de flujo
• Bloques de sentencias
 Con llaves { } (como en Java)
 Las variables no desaparecen al terminar en bloque (en
Java si)
• Sentencia if
 Sintaxis como en Java
 No es obligatorio que la expresión devuelva un boolean
 Se considera falso: false, null, undefined, “” (cadena
vacía), 0, NaN

39
El lenguaje JavaScript
Sentencias de control de flujo

var nota = ..;

if(nota < 5){

console.log('Suspenso');
} else {
console.log('Aprobado');
}

var nombre = '';

if(!nombre){
nombre = 'Sin nombre';
}

40
El lenguaje JavaScript
Sentencias de control de flujo

• Sentencias switch, while, do while, for

 Sintaxis y semántica como en Java y C
var animal = 'Jirafa';
switch (animal) {
case 'Vaca': var array = [3,4,5,6,4,5]
case 'Jirafa':
case 'Cerdo':
console.log('Sube al arca'); for(var i=0; i<array.length; i++){
break; console.log(array[i]);
case 'Dinosaurio':
default: }
console.log('No sube');
}

41
El lenguaje JavaScript
Sentencias de control de flujo

• Sentencia return
 Cuando se ejecuta fuerza la terminación de una
función (Como en Java)
 Puede tener un valor asociado que será devuelto
por la función en la que se ejecute
// La función se ejecuta y el valor
// devuelto se asocia a x

var x = myFunction(4, 3);

function myFunction(a, b) {
return a * b;
}
42
El lenguaje JavaScript
Funciones

• JavaScript es un lenguaje funcional en el

sentido de que las funciones son ciudadanos
de primera clase
• Se pueden declarar con nombre
function imprime(param){
console.log(param);
}

imprime(4);
43
El lenguaje JavaScript
Funciones

• Se pueden declarar sin nombre (anónimas) y

asignarse a una variable o usarse como
parámetro

var imprime = function(param){

console.log(param);
}

imprime(4);

44
El lenguaje JavaScript
Funciones

• En JavaScript las funciones son objetos

• Por eso se pueden guardar en variables, pasar
como parámetro
• También tienen métodos y atributos (como
cualquier objeto)

45
El lenguaje JavaScript
Funciones

• Invocación de una función

 Nombre seguido de parámetros:

imprimir(3);
 Si se pasan menos parámetros de los que están en
la cabecera, los que faltan toman el valor undefined
(No hay error)
 Si se pasan más parámetros de los que están en la
cabecera, los que sobran se ignoran (No hay error)

46
El lenguaje JavaScript
Funciones

• Información accesible desde la función

 Parámetros y variables declaradas en la función

var imprimir = function (param){

var numero = 0;
console.log(param+" numero:"+numero);
}

imprimir(4); // Imprime '4 numero:0'

47
El lenguaje JavaScript
Funciones

• Información accesible desde la función

 Variables accesibles en el punto en que se declara la
función (ámbito léxico)

var texto = "Hola";

var print_texto = function (){

console.log(texto);
}

print_texto(); // Imprime 'Hola'

48
El lenguaje JavaScript
Funciones

• Información accesible desde la función

 Cuando se referencia a una variable no sólo se accede a su
valor, se accede a la propia variable en sí
 Si se cambia el valor de la variable, la función podrá leer el
nuevo valor
 En Java, si una expresión lambda o una clase anónima
accede a una variable de fuera de su declaración, esta
variable no puede cambiar de valor (daría error de
compilación si se intenta)

49
El lenguaje JavaScript
Funciones

• Información accesible desde la función

 El conjunto de variables a las que tiene acceso la función se
llama cerradura o cierre (closure)

var texto = 'Hola'

var print_texto = function (){
console.log(texto)
texto = 'Adios'
}
print_texto() // Imprime 'Hola'
print_texto() // Imprime 'Adios'
texto = 'Bye'
print_texto() // Imprime 'Bye'
50
El lenguaje JavaScript
Funciones

• Funciones dentro de funciones

 Se pueden declarar funciones en el cuerpo de otras
funciones

function alertOnClick(domNode) {

domNode.onclick = function(e) {
alert("Alerta");
}
}

51
El lenguaje JavaScript
Excepciones

• Funcionan igual que en Java

• Existe un bloque con try catch finally
• El operador throw eleva la excepción
• A diferencia de Java, se puede lanzar cualquier
objeto como excepción, aunque lo
recomendable es elevar un objeto con
propiedades name y message

52
El lenguaje JavaScript
Excepciones
try {
var error = ...;
if (error) {
throw "An error";
}
return true;

} catch (e) {

alert (e);
return false;

} finally {
//do cleanup, etc here
}
53
El lenguaje JavaScript
Ejercicio 1
• Crear una función que reciba un array como
parámetro y devuelva un array de dos elementos
• El primer elemento apuntará a un array con los
números pares del array que se pasa como parámetro
• El segundo elemento apuntará a un array con los
números impares del array que se pasa como
parámetro
• Para probar la función se implementarán varias
llamadas con diferentes arrays y el resultado se
mostrará en la consola del navegador
54
El lenguaje JavaScript
Ejercicio 2
• Crear una función que reciba
un array bidimensional, le
quite los ceros y ordene las
filas de menor a mayor
longitud
• Para probar la función se
implementarán varias llamadas
con diferentes arrays y el
resultado se mostrará en la
consola del navegador
55
El lenguaje JavaScript
Ejercicio 2

• Para ordenar los arrays por tamaño se puede

usar el algoritmo de la burbuja (bubble sort)
• El algoritmo consiste en comparar cada
elemento del array con el siguiente,
intercambiándolos de posición si están en el
orden equivocado
• El array se recorre hasta que todos los
elementos estén ordenados (un elemento
siempre es menor que el siguiente)
56
El lenguaje JavaScript
Orientación a Objetos

• Hasta ahora hemos visto que JavaScript es un

lenguaje bastante familiar en cuanto a sintaxis y
características:
 Imperativo y estructurado
 Tipado dinámico
 Tres tipos básico: Number, Boolean y String
 Arrays dinámicos
 Recolector de basura
 Funciones
57
El lenguaje JavaScript
Orientación a Objetos
• La orientación a objetos en JavaScript a primera vista parece
similar a la de Java, pero en esencia es muy diferente
• La gran mayoría de los lenguajes de programación
implementan la Orientación a Objetos con clases (Java, C#, C+
+, Python, Ruby…)
• En JavaScript ES5 no existen las clases, existen los prototipos
(en ES6 han añadido las clases a JS)
• En el apartado de orientación a objetos avanzada se
estudiará con detalle esta característica

58
El lenguaje JavaScript
Orientación a Objetos

• Creación de objetos
 En cualquier momento se puede crear un objeto,
definir sus atributos y asignarles valor

var empleado = {
nombre: "Pepe",
salario: 700
}

59
El lenguaje JavaScript
Orientación a Objetos
• Atributos de un objeto
var empleado = {
nombre: "Pepe",
salario: 700
}

console.log("S:"+empleado.salario);

empleado.salario = 800;

empleado.telefono = "663232539";

console.log("T:"+empleado.telefono);

60
El lenguaje JavaScript
Orientación a Objetos

• Métodos en un objeto
 Los objetos pueden tener métodos
 Los métodos son en realidad funciones asignadas a una
propiedad
var empleado = {
nombre: "Pepe",
salario: 700,
toString: function(){
return "N:"+this.nombre+" S:"+this.salario;
}
}
Para acceder a los atributos del
objeto es necesario usar this (en
Java es opcional) 61
El lenguaje JavaScript
Orientación a Objetos

• Métodos en un objeto
 Los métodos se invocan con la notación punto (como en
Java)
//Devuelve 'Nombre:Pepe, Salario:700'
var texto = empleado.toString();

 Se pueden añadir métodos a un objeto en cualquier

momento

empleado.getCategoria = function(){
return this.salario > 800 ? 'Superior':'Normal';
}
62
El lenguaje JavaScript
Orientación a Objetos

• Métodos en un objeto
var empleado = {
nombre: 'Pepe',
salario: 700,
toString: function(){
return 'N:'+this.nombre+' S:'+this.salario;
}
}

//Muestra N:Pepe S:700

console.log(empleado.toString());

empleado.getCategoria = function(){
return this.salario > 800 ? 'Superior':'Normal';
}

console.log('C:'+empleado.getCategoria());
63
El lenguaje JavaScript
Orientación a Objetos

• Como se puede ver, los objetos son muy flexibles

porque no necesitan un molde (una clase)
• Esta forma de trabajar es muy útil cuando sólo hay un
objeto con una estructura determinada (singleton)
• Se usa bastante en JavaScript para crear objetos sin
métodos que guardan información (como los
registros o struts)

64
El lenguaje JavaScript
Orientación a Objetos

• Objetos, null y undefined

 En JavaScript también se puede usar null como un
valor válido para las variables
 Las variables que no están inicializadas tienen el
valor undefined
 Usar una variable sólo si apunta a un objeto

var obj = null; Devuelve true si

if(obj){ obj no es null ni es
obj.doSomething(); undefined
}
65
El lenguaje JavaScript
Orientación a Objetos

• Acceso a las propiedades de un objeto con []

 Además de la notación punto (recomendada), también se
pueden usar los corchetes para acceder a las propiedades de
un objeto (atributos y métodos)
var obj = {
propiedad: 'value',
metodo: function () { return this.propiedad }
}

console.log(obj.propiedad)
console.log(obj['propiedad'])

console.log(obj.metodo())
console.log(obj['metodo']())
66
El lenguaje JavaScript
Orientación a Objetos

• Objetos como estructuras de datos Mapa

 Al poder acceder a las propiedades de un objeto mediante
corchetes, se pueden tratar como un mapa con claves de
tipo String.
var config = {}
config['nombre'] = 'Pepe Pérez';
config['correo'] = '[email protected]';
config['idioma'] = 'ES';

console.log('Nombre: '+config['nombre']; Para consultar las

propiedades de un
for(key in config){
objeto se usa for(in)
console.log(key+': '+config[key]);
}
67
El lenguaje JavaScript
Orientación a Objetos

• Hasta ahora hemos visto los aspectos básicos del

lenguaje de programación JavaScript
• Muchos programas se pueden implementar
únicamente con estos elementos
• Más adelante veremos cómo implementar
programas grandes, estructurando el código de
forma parecida a como se hace en Java con clases
cuyos objetos que colaboran entre sí

68
Tecnologías del cliente
JavaScript

• Introducción
• El lenguaje JavaScript
• HTML Interactivo
 Document Object Model (DOM)
 jQuery

69
JavaScript
HTML Interactivo

• JavaScript se diseñó para dotar de interactividad a

las páginas HTML cargadas en el navegador
• Se puede ejecutar código JavaScript cuando el
usuario interactúa con la página (click, hover, etc…)
• Se puede modificar la página HTML con JavaScript
 Cambio de CSS de un elemento (ocultar, cambio de
color…)
 Cambio del contenido: Texto, imágenes, …
70
HTML Interactivo
Document Object Model (DOM)

• El navegador permite acceder al documento y

al browser
 El Document Object Model (DOM) es una “librería”
para manipular documentos HTML
https://developer.mozilla.org/en-US/docs/Web/API/Document_Object_Model

 El Browser Object Model (BOM) permite manipular

otros elementos del navegador
https://developer.mozilla.org/en-US/docs/Web/API/Window
https://developer.mozilla.org/en-US/docs/Web/API/Navigator
https://developer.mozilla.org/en-US/docs/Web/API/Location
71
HTML Interactivo
Document Object Model (DOM)
• Eventos
 Asociar funciones a elementos del HTML de forma
que serán ejecutadas cuando se interactúe con
dichos elementos

<html>
<body>
<script>
function alerta(){
alert('El botón ha sido pulsado');
}
</script>
<button onclick="alerta();">Botón</button>
</body>
</html>
72
HTML Interactivo
Document Object Model (DOM)
• Eventos
 También se pueden asociar eventos desde el código
JavaScript

document.addEventListener("DOMContentLoaded", function() {
alert('Documento cargado');
});

<html>
<head>
<script src='app.js'></script>
</head>
<body>
…
</body>
</html>
73
HTML Interactivo
Document Object Model (DOM)
• Acceso a los elementos del documento
 En base a alguna de sus características

var image1 = document.getElementById('image1');

var citas = document.getElementsByClassName('cita');

var img2 = document.getElementByName('image2');

var links = document.getElementByTagName('a');

74
HTML Interactivo
Document Object Model (DOM)

• Acceso o modificación del HTML

 Modificar el HTML de un elemento
var element = document.getElementById('txt');
element.innerHTML = '<p>Nuevo texto</p>'

 Cambiar la clase del elemento

document.getElementById('MyElement').className = 'MyClass';

 Añadir una clase a un elemento

document.getElementById('MyElement').className += ' MyClass';

75
HTML Interactivo
Document Object Model (DOM)

• Acceso o modificación del HTML

 Cambiar el estilo de un elemento
var element = document.getElementById('img1');

element.style.borderWidth = width + 'px';

76
HTML Interactivo
Document Object Model (DOM)

• El DOM es un estándar, pero no todos los

navegadores implementaban el estándar de forma
completa
• BOM no es estándar, y cada navegador lo
implementa de formas ligeramente diferentes
• Siempre hay que consultar la documentación y hacer
pruebas con cada navegador

77
HTML Interactivo
jQuery

• jQuery es una librería JavaScript para lidiar

con estos problemas e incompatibilidades
• Además ofrece un interfaz mucho más directo
e intuitivo interactuar con el documento y el
navegador

http://jquery.com
78
HTML Interactivo
jQuery
• Características
– Facilita la manipulación de la página web (DOM)
– Unifica las diferencias que existen en los navegadores
(muy conveniente en la época del Internet Explorer)
– Para seleccionar elementos de la página con jQuery
usamos la misma sintaxis (selectores) en que en CSS
– Trabaja directamente con conjuntos de elementos,
de forma que no es necesario procesar cada elemento
de forma individual (no hay que hacer el for)

79
HTML Interactivo
jQuery
• Cada vez se usa menos
– Los navegadores más populares implementan los
estándares y se comportan de la misma forma
– La librería estándar cada vez es más completa y
potente

http://youmightnotneedjquery.com/

– Los frameworks de alto nivel cada vez se usan más (y

no se necesita jquery)

80
HTML Interactivo
jQuery
• Uso de jQuery
 La librería se puede descargar de su página web para
desarrollo local (http://jquery.com/)
 Cuando se publica una página web que usa la librería, en vez
de servir la librería en el servidor web, es mejor usar una ruta
en una red de distribución de contenido (CDN)
 Si la librería está cacheada en el navegador del cliente no se
descargará de nuevo (reduciendo el tiempo de carga)
http://code.jquery.com

https://developers.google.com/speed/libraries/devguide#jquery

81
HTML Interactivo
jQuery

index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js">
</script>
<script src="app.js"></script>
</head>
<body>
<h1>Title</h1>
<p>Text...</p>
</body>
</html>

82
HTML Interactivo
jQuery
app.js
$(document).ready(function() {
console.log('Document loaded');
})

• $(document).ready(…)
 Ejecuta la función que se pasa como parámetro cuando el
documento HTML se ha cargado y antes de que se
descarguen las imágenes
 Es ideal para ejecutar código de inicialización que asocia
eventos a los elementos de la página si el script se ejecuta
desde el head (antes de que se cargue el HTML)
83
HTML Interactivo
jQuery
app.js
$(document).ready(function() {
$('div.poem-stanza').addClass('highlight');
});

• La función $ está sobrecargada y admite muchos

tipos de parámetros
 Si se le pasa el documento, devuelve un objeto con métodos
que permiten asociar funciones que se ejecutarán ante un
determinado evento de carga (p.e. ready)
 Si se le pasa un String, es un selector CSS que devuelve un
conjunto con los elementos del documento seleccionados
84
HTML Interactivo
jQuery
app.js
$(document).ready(function() {
$('div.poem-stanza').addClass('highlight');
});

• $('div.poem-stanza').addClass('highlight');
• En el conjunto de elementos devueltos se pueden ejecutar
métodos que se ejecutarán sobre todos los elementos del
conjunto:
 addClass(…): Añade una clase CSS a los elementos
 removeClass(…): Elimina una clase CSS a los elementos

85
HTML Interactivo
jQuery
• Se puede escribir una función que se ejecutará cuando
se cargue el documento de forma muy compacta
pasando directamente la función a $

app.js
$(function() {
$('div.poem-stanza').addClass('highlight');
});

86
jQuery
Seleccionar elementos
• Selección de elementos con selectores CSS
 Basados en elementos, clases e ids
$(function() {
$('#selected-plays > li').addClass('horizontal');
})

 Basados en atributos con expresiones regulares

$(function() {
$('img[alt]').addClass('imgstyle');
$('a[href^="mailto:"]').addClass('mailto');
$('a[href$=".pdf"]').addClass('pdflink');
$('a[href^="http"]').addClass('henrylink');
})

87
jQuery
Seleccionar elementos
• Selectores propios de jQuery (no CSS)
 Elementos pares (empezando con 0)
$(function() {
$('tr:even').addClass('alt');
})
 Hijos pares (empezando con 1)

$(function() {
$('tr:nth-child(odd)').addClass('alt');
})

http://api.jquery.com/category/selectors/
88
jQuery
Seleccionar elementos
• Seleccionar elementos con operaciones
 Filtrar los elementos usando funciones (el elemento es this)
$(function() {
$('a').filter(function() {
return this.hostname && this.hostname!=location.hostname;
}).addClass('external');
})

 Navegar por el DOM desde un elemento

$(function() {
$('td:contains(Henry)').next().addClass('highlight');
$('td:contains(Henry)').parent().find('td:eq(1)')
.addClass('highlight').end().find('td:eq(2)')
.addClass('highlight');
});
89
jQuery
Seleccionar elementos
• Acceso a los elementos nativos DOM
 Aunque no suele ser necesario, se puede acceder a los
elementos nativos del árbol DOM con el método get(…)
 Como los objetos devueltos por jQuery pueden tener muchos
nodos del árbol DOM, el método get() permite indicar cuál de
los nodos es (aunque solo haya uno)

varmyTag = $('#my-element').get(0).tagName;

90
jQuery
Eventos
• Los eventos se asocian a los elementos con el método
on
$(function() {
$('#button1').on('click', function() {
$('body').addClass('large');
});
});

$(function() {
$('#button2').on('click', function() {
$(this).addClass('selected');
});
});
this apunta al nodo nativo en el que se ha generado el evento.
$(this) convierte el nodo nativo en objeto jQuery
91
jQuery
Eventos
• Los eventos generados en un
elemento se pueden procesar
en el propio elemento o en
cualquiera de sus elementos
padre
• Cuando se configura un
manejador de eventos, el
evento se ha podido producir
en el propio elemento o en
cualquiera de sus hijos
• Se dice que el evento burbujea
(bubble)
92
jQuery
Eventos
• La función manejadora recibe el objeto event
– this: Objeto en el que se ha configurado el manejador
– event.target: Objeto que origina realmente el evento
– event.stopPropagation(): Evita que se ejecuten
manejadores de los elementos padre. Se detiene el
burbujeo.
– event.preventDefault(): Evita que el browser realice el
comportamiento por defecto para ese evento
$('#panel').on('click', function(event) {
console.log('Generado en:'+ event.target);
});
93
jQuery
Ejercicio 3

• Crea una página con campo de texto y un

botón
• Cada vez que se pulse el botón, se añadirá el
contenido del cuadro de texto a la página (sin
borrar el contenido previo)

94
jQuery
Ejercicio 4
• Se desea implementar una barra de herramientas
para modificar los estilos de un documento

95
jQuery
Ejercicio 4
• Documento de ejemplo (descargar)

96
jQuery
Ejercicio 4

• Barra de herramientas

<div id="switcher" class="switcher">

<h3>Style Switcher</h3>
<button id="switcher-default">
Default
</button>
<button id="switcher-narrow">
Narrow Column
</button>
<button id="switcher-large">
Large Print
</button>
</div>

97
jQuery
Ejercicio 4

• Barra de herramientas
 Botones
 Default: Volver al estilo normal
 Large print: Aplicar el estilo CSS “large” al body (y quitar los
demás)
 Narrow Column: Aplicar el estilo CSS “narrow” al body (y quitar
los demás)
 Opción seleccionada
 La opción seleccionada debería reflejarse mostrando el texto
del botón en negrita (estilo “selected”)

98
jQuery
Ejercicio 4

• Barra de herramientas
 Al cargar el documento, la barra de herramientas
debería aparecer minimizada (usando la clase CSS
“hidden”)
 Al pulsar en ella, debe cambiar de modo
minimizado a normal (y viceversa)

99
jQuery
Ejercicio 4

• Barra de herramientas
 Las teclas también pueden configurar el estilo:
 D: Default
 N: Narrow
 L: Large

100
jQuery
Ejercicio 4
• Utilidades JavaScript / jQuery necesarias
 $(…).is(“button”): Indica si el elemento tiene el
nombre de la etiqueta indicado
 “sss-www”.split('-'): divide el String en un array de
Strings usando el '-'
 $(document).keyup(…): Configura una función
que se ejecutará cuando se pulse una tecla
 String.fromCharCode(event.which): Devuelve la
tecla pulsada como un String

101