Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS, TIPOS - Univ. Carlos III

JavaScript:
Tipos, objetos y clases
1
© Juan Quemada, DIT, UPM

Tipos de JavaScript
n number
w Literales de números: 32, 1000, 3.8
n boolean
w Los literales son los valores true y false
n string
w Los literales de string son caracteres delimitados entre comillas o apóstrofes
n "Hola, que tal", 'Hola, que tal',
w Internacionalización con Unicode: 'Γεια σου, ίσως', ' '
n undefined
w undefined: representa un valor no definido todavía
Objeto: agregación estructurada de propiedades y métodos
n Se agrupan en clases: Object, Array, Date, ...
w Objeto null: valor especial que representa objeto nulo
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Values,_variables,_and_literals
Tipos, objetos y valores (ES3 y ES5)
2
pn
mk
v1
p1
vn..
..fk
m1
f1

El operador typeof permite conocer el tipo de un valor
n Devuelve un string con el nombre del tipo
w "number", "string", "boolean", "undefined", "object" y "function"
w Todos los objetos (de cualquier clase) devuelven "object", salvo las funciones
Operador typeof (ES3 y ES5)
typeof 7 => "number"
typeof "hola" => "string"
typeof true => "boolean"
typeof undefined => "undefined"
typeof null => "object"
typeof new Date() => "object"
typeof new Function() => "function"
3

Todos los objetos de JavaScript pertenecen a la clase Object
n Javascript posee otras clases predefinidas que derivan de Object
w Date, Number, String, Array, Function, ….
n https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
n Un objeto hereda los métodos y propiedades de su clase
w Un objeto puede tener además otras propiedades y métodos propios
Métodos y clases de un objeto utilizan la notación punto o array
n Una propiedad se accede como: objeto.propiedad o objeto.["propiedad"]
n Un método se invoca como: objeto.metodo(…) o objeto["metodo"](…)
Todas las clases tienen un constructor con el nombre de la clase
n El constructor permite crear objetos con el operador new
w Pero los literales suelen más eficientes creando objetos, arrays, etc.
n Por ejemplo, new Object() crea un objeto vacío equivalente a {}
4
Clases y herencia

Object
n Clase raíz, suelen crearse con el literal: {a:3, b:"que tal"}
Array
n Colección indexable, suelen crearse con el literal: [1, 2, 3]
Date
n Hora y fecha del reloj del sistema, se crea con constructor: new Date()
Function
n Bloque de código invocado por su nombre, se crea con: function (x) {....}
RegEx
n Expresiones regulares se crean con el literal: /(hola)+$/
Math
n Modulo con constantes (propiedades) y funciones matemáticas (métodos)
Number, String y Boolean
n Clases que encapsulan valores de los tipos number, string y boolean como objetos
w Sus métodos se aplican a los tipos directamente, la conversión a objetos es automática
Más información:
n https://developer.mozilla.org/en-US/docs/Web/JavaScript/A_re-introduction_to_JavaScript
5
Algunas clases predefinidas (ES3 y ES5)

Método: función que se puede invocar sobre un objeto con el operador punto: ".”
Un objeto hereda métodos de su clase, por ejemplo
n los objetos de la clase Date heredan métodos como
w toString(), getDay(), getFullYear(), getHours(), getMinutes(), ….. (ver ejemplo)
n jhttps://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date
n También es posible definir nuevos métodos en un objeto
En un objeto solo se puede invocar métodos heredados o definidos en él
n Invocar un método no heredado ni definido en un objeto
w provoca un error_de_ejecución y aborta el programa
6
Métodos heredados
var fecha = new Date(); // El objeto creado contiene fecha-hora de creación (ejecución)
fecha.toString() => Fri Aug 08 2014 12:34:36 GMT+0200 (CEST)
fecha.toTimeString() => 12:34:36 GMT+0200 (CEST)
fecha.getHours() => 12
fecha.getMinutes() => 34
fecha.getSeconds() => 36

Un método se puede definir asociado a un objeto
n El nuevo método solo pertenecerá a ese objeto (no es de la clase)
Al invocar un método cambia el entorno de ejecución de JavaScript
n El entorno pasa a ser el objeto invocado, que se referencia con this
w En el ej., this.titulo referencia la propiedad titulo del objeto sobre el que se invoca resumen()
n this puede omitirse: en el ejemplo this.titulo es igual a titulo
7
Definición de un método de un objeto
var pelicula = {
titulo:'E.T.',
director:'S. Spielberg',
resumen:function (){
return "El director de " + this.titulo + " es " + this.director;
}
}
pelicula.resumen() => "El director de E.T. es S. Spielberg"
'E.T.'
pelicula
'S. Spielberg'
director
titulo
Function
resumen

JavaScript:
Referencias a objetos
8

Los tipos JavaScript se gestionan por valor o por referencia
n number, boolean o undefined se gestionan por valor
w string se gestiona por referencia, pero es a todos los efectos un valor,
n object se gestiona por referencia
La asignación copia el contenido de la variable
n Copia el valor o el puntero según sea el contenido
La identidad y la igualdad también se ven afectadas
n Comparan el valor o el puntero según sea el contenido
w Salvo con strings donde se comparan los valores (string apuntado) y no los punteros
Valores y referencias
9
true
b
1
n
{….}o
"hola"s

Las variables que contienen objetos
n solo contienen la referencia al objeto
En objeto esta en otro lugar en memoria
n indicado por la referencia
Al asignar una variable se copia el puntero
n si se modifica el objeto de una de ellas
w Se modificarán los objetos de las variables
que contengan el mismo puntero
Los parámetros de funciones tienen el
mismo efecto lateral, cuando son objetos
Efectos laterales
de las referencias
a objetos
var x = {}; // x e y tienen la
var y = x; // misma referencia
var z = {}; // la referencia a z
// es diferente de
// la de x e y
y.t = 1;
x.t => 1 // x accede al mismo
y.t => 1 // objeto que y
z.t => undefined
10
{}
y
x
{}’z y
x {}
1
t

Cuando pasamos objetos como parámetro
n solo se pasa la referencia al objeto
Si varias funciones modifican el mismo objeto
n las modificaciones se verán en todas ellas
Los objetos son un mecanismo muy eficaz
n para comunicar funciones entre sí
Parámetros
por referencia
11
req2
req1 {}
“GET”
method
req2
req1 {}

Las referencias a objetos afectan a la identidad
n porque identidad de objetos
w es identidad de referencias
n los objetos no se comparan
w se comparan solo las referencias
La identidad de objetos no es util si no se redefine
n En los strings si, porque se comparan los valores
Igualdad (debil) de objetos == y !=
n no tiene utilidad tampoco con objetos
w no se debe utilizar
Identidad e igualdad de objetos
var x = {}; // x e y contienen la
var y = x; // misma referencia
var z = {} // la referencia a z
// es diferente de x e y
x === y => true
x === {} => false
x === z => false
12
{}
y
x
{}’z

JavaScript:
Algunos métodos de Array
13

Array hereda métodos de su clase
sort(): devuelve el array ordenado
n y lo guarda en la variable a
reverse(): devuelve el array invertido
n y lo guarda en la variable a
push(e1, .., en)
n añade e1, ..,en al final del array
w devuelve el tamaño del array (a.length)
pop()
n devuelve el último elemento, eliminadolo del array
Métodos de Array
var a = [1, 5, 3];
a.sort() => [1, 3, 5]
a => [1, 3, 5]
a.reverse() => [5, 3, 1]
a => [5, 3, 1]
a.push(false) => 4
a => [5, 3, 1, false]
a.pop() => false
a => [5, 3, 1]
14

join(<separador>):
n devuelve string uniendo elementos
w introduce <separador> entre elementos
w La coma de separador permite
generar CSV
slice(i,j): devuelve una rodaja
n Indice negativo (j) es relativo al final
w índice "-1” es igual a a.length-2
splice(i, j, e1, e2, .., en)
n sustituye j elementos desde i en array
w por e1, e2, ..,en
n Devuelve elementos eliminados
Más métodos
var a = [1, 5, 3, 7];
a.join(',') => '1,5,3,7'
a.slice(1, -1) => [5, 3]
a => [1, 5, 3, 7]
a.splice(1,2,true) => [5, 3]
a => [1, true, 7]
15

Este ejemplo utiliza un array para gestionar citas
n Una cita es una frase de un autor conocido
La aplicación ilustra
n splice(..) para borrar las citas existentes
n push(..) para añadir nuevas citas al fina
Citas
16

17
Citas
La aplicación permite
n Añadir citas al final con
push(..)
n Borrar las citas nuevas
con splice(..)

La función generar_vista() genera dinámicamente el
HTML, que muestra cada cita con su botón de borrar,
utilizando un bucle que lo inserta como el HTML interno
del elemento: <div id=“vista”></div>.
push() se usa en el manejador
del evento para añadir un
elemento al final del array.
borrar(i) elimina el
elemento i de frases
con splice(i,1).
Inicia variables, genera
el HTML de las citas y
programa evento Añadir.
Hacer click en el botón borrar invoca
borrar(i) que elimina la cita i del array.
El array actúa de contenedor de citas. Permite
añadir o borrar citas.
OJO! Los cambios se pierden al salir de la página Web.
18
Citas

JavaScript
Objetos y arrays: ejemplo citas
19

Objetos y arrays permiten definir y gestionar recursos de datos
n De forma que resulten muy sencillos de utilizar en programas, bases de datos, …
Un objeto puede definir la estructura de los datos de un recurso
n Los objetos se suelen construir con el literal de objeto:
w { propiedad_1:valor_1, …….., propiedad_n:valor_n }
n Cada propiedad guarda un valor, igual que una variable
n Por ejemplo, los objetos nos permiten dar el título y el director de películas favoritas
w var et = { titulo: "E.T.", director: "Steven Spielberg" };
w var star_wars_IV = { titulo: "Star Wars", director: "George Lucas" };
w var psicosis = { titulo: "Psicosis", director: "Alfred Hitchcock" };
w var placido = { titulo: "Placido", director: "Luis García Berlanga" };
w …….
Un array define una colección indexable de recursos
n Un array se suele construir con el literal de array:
w [ recurso_1, recurso_2, …, recurso_n ]
n Por ejemplo, podemos agrupar los objetos anteriores en un array de películas favoritas
w var mis_peliculas_favoritas = [ psicosis, et, placido, star_wars_IV, ….. ];
n donde los elementos de este array son las referencias a las variables que contienen los objetos
20
Objetos y Arrays

Frase del día
21
Este ejemplo muestra una cita seleccionada al azar
n Una cita es una frase de un autor conocido
w Cada recarga de la página selecciona una frase diferente

Frase del día
22
El ejemplo muestra al cargar la página
n Una frase de un autor conocido
w Seleccionada al azar
n Cada recarga de la página
selecciona una frase diferente
Las frases se guardan en la galería
n La galería es un array de objetos
w guardados en la variable galería
Cada objeto guarda los elementos
n El nombre del autor (español y original)
n Una frase conocida suya
n El URL absoluto a una foto en Internet
El evento onload muestra la frase
n al invocar la función seleccion()
w que elige una frase al azar y la muestra
junto con el nombre y su foto
n El evento onload ocurre cuando
w y el árbol DOM está ya construido
n Para seleccionar otra frase
w Recargar la página
Índice aleatorio i selecciona una frase de la galería
Base de datos de frases (variable galeria): array de objetos
Visualiza frase,
autor y foto en
página Web
Elementos
HTML donde
visualizar frase,
autor y foto

23
body
n se elimina margin y padding
n fondo gris
#caja
n Posición relativa, permite posicionamiento
absoluto en .textos y #persona
n Caja ocupa todo el ancho
n Altura automática
n fondo negro
#foto
n Altura fija: 427 pixels
n Anchura automática
.textos
n Posición absoluta respecto a la posición
relativa de la caja
n Font grande y en color blanco sobre fondo
negro de la foto
#persona
n Párrafo en itálica, después de .textos
Frase del día:estilo CSS

JavaScript:
Carrusel con citas
24

Carrusel con citas
25
Este ejemplo mostramos un carrusel de citas
n Cada 2 segundos se pasa a la siguiente cita
La botonera inferior muestra la cita que se está mostrando
n Se puede cambiar la cita clicando en la botonera

Carrusel de citas
26

Carrusel de citas
27
La galería se saca a un fichero JS exterior (mismo código) Botonera con HTML se
genera dinámicamente
Mostrar primera cita al comenzar.
Colorear en marrón
el botón de la cita
mostrada
Borrar temporizador anterior, por si el anterior no ha vencido todavía (al hacer click en botonera).
Crear nuevo temporizador que muestre la siguiente cita. El manejado del evento invoca la función select con siguiente i.
El evento de selección de cita es un atributo lleva el índice i a la cita en el array.
Mostrar los 3 componentes de la cita: frase, autor y foto.

JavaScript:
Editar carrusel con citas
28

29
Se añade un desplegable para
n Añadir, modificar o borrar citas
Los cajetines del desplegable
n se rellenan
w con el contenido de los campos del
objeto mostrado
Al abrir el desplegable se para el
carrusel
n En la imagen mostrada
Editar carrusel con citas

Editar carrusel de citas
30
Botón para desplegar
edición (en SVG)
Presentación de la
cita y la botonera del
ejemplo anterior.
Cajetines definidos con bloques con atributo “contentEditable”
Botones de editar, añadir y borrar (en SVG)

Editar el
carrusel
de citas
31

Editar el carrusel de citas
32
Función que genera el selector
de citas con JavaScript.
La variable actual
contiene el índice a
la cita mostrada.
Esta en el ámbito
exterior y puede
ser utilizada en
cualquier función o
manejador.
Borra el selector anterior, porque ahora hay que eliminar el actual y generar un selector nuevo.
Guarda objeto jQuery en una
variable para mayor eficiencia.
Se evitan muchas búsquedas
en árbol DOM.

Inicialización
de la app Web
33
Evento para despliegue de los
cajetines de edición de citas.
Para temporizador
Muestra bloques.
Muestra
elementos
de la cita en
cajetines.
Oculta cajetines
Incluye nueva cita
como último elem.
de galeria. Guarda
índice en actual.
Muestra nuevo elemento (índice: actual).
Regenera la botonera de selectores de
citas para incluir el elemento nuevo.
Evento para crear una nueva cita.
Arrancar con la primera cita (índice: 0).
Generar html del selector
de citas con JavaScript.

Final del tema
Muchas gracias!
34

Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS, TIPOS - Univ. Carlos III

Más contenido relacionado

Destacado (20)

Similar a Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS, TIPOS - Univ. Carlos III (20)

Último (20)

Javascript Módulo 7 - PROFUNDIZACIÓN EN ARRAYS, OBJETOS, PROPIEDADES, MÉTODOS, TIPOS - Univ. Carlos III