Ahora también distribuidor oficial BQ

Aplicaciones Web (V)

HTML5 CSS3 JSObjetos, propiedades y métodos

Objetos

Los objetos son colecciones de variables agrupadas como un elemento estructurado que llamamos objecto. Las variables de un objeto se denominan propiedades

Una propiedad es un par nombre:valor donde los nombres deben ser todos diferentes en un mismo objeto
Se definen con el literal: { nombre:valor, … }
Por ejemplo: {titulo: ‘Avatar’, director: ‘James Cameron’} crea un objeto con 2 propiedades:
titulo:’Avatar’
director:’James Cameron’

 

Propiedades

El acceso a propiedades utiliza el operador punto obj.propiedad

Por ej. en: var pelicula = {titulo: ‘Avatar’, director: ‘James Cameron’}

 pelicula.titulo   => "Avatar"
 pelicula.director => "James Cameron"
 pelicula.fecha    => undefined      // la propiedad fecha no existe

Aplicar el operador punto sobre undefined o null provoca un Error_de_ejecución y aborta la ejecución del programa

La notación punto solo acepta nombres de propiedades
Con la sintaxis de variables: a, _method, $1, …
No son utilizables: “#43”, “?a=1”, …

 

Notación array

La notación array es equivalente a la notación punto
pelicula[“titulo”] es equivalente a pelicula.titulo
Al acceder a: var pelicula = {titulo: ‘Avatar’, director: ‘James Cameron’}

La notación array permite utilizar strings arbitrarios como nombres
por ejemplo, objeto[“El director”], pelicula[“”] o a[“%43”]
¡OJO! es conveniente utilizar siempre nombres compatibles con notación punto

Nombres (strings) arbitrarios son posibles también en un literal de objeto:
Por ejemplo, {“titulo”: ‘Avatar’, “El director”: ‘James Cameron’}

 

Nombres de propiedades como variables

La notación array permite acceder también a propiedades cuyo nombre esta en una variable en forma de string. Esto no es posible con la notación punto.


var x = {titulo: 'Avatar', director: 'James Cameron'};
x.titulo ;         => 'Avatar'
x['titulo'] ;      => 'Avatar'

var p = 'titulo' ;                // inicializada con string 'titulo'
x[p] ;             => 'Avatar'    // x tiene una propiedad 'titulo' que está en p
x.p ;              => undefined   // el objeto x no tiene la propiedad 'p'


 

Clases y herencia

Todos los objetos de JavaScript pertenecen a la clase Object

Javascript posee más clases predefinidas que derivan de Object
Date, Number, String, Array, Function, …
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Predefined_Core_Objects
Un objeto hereda los métodos y propiedades de su clase.

Un método es una operación (~función) invocable sobre un objeto
Se invoca con la notación punto: objeto.metodo(..params..)

Todas las clases tienen un constructor con el nombre de la clase que permite crear objetos con el operador new
Por ejemplo, new Object() crea un objeto vacío equivalente a {}

Métodos de la clase

Un objeto hereda métodos de su clase, por ejemplo los objetos de la clase Date heredan métodos como
toString(), getDay(), getFullYear(), getHours(), getMinutes(), … (ver ejemplo)
https://developer.mozilla.org/es/docs/Web/JavaScript/Referencia/Objetos_globales/Date

Solo se puede invocar métodos heredados o definidos en un objeto Invocar un método no heredado ni definido en un objeto provoca un Error_de_ejecución

 


var fecha = new Date();
fecha.toString()        => Fri Aug 08 2014 12:34:36 GMT+0200 (CEST)
fecha.getHours()        => 12
fecha.getMinutes()      => 34
fecha.getSeconds()      => 36


 

Definición de un nuevo método de un objeto

Los métodos se pueden definir también directamente en un objeto. El nuevo método solo se define para ese objeto (no es de la clase)

Invocar un método cambia el entorno de ejecución de JavaScript pasando a ser el objeto invocado, que se referencia con this this.titulo referencia la propiedad titulo del objeto pelicula

 


var pelicula = {
    titulo:'Avatar',
    director:'James Cameron',
    resumen:function (){
        return "El director de " + this.titulo + " es " + this.director;
    }
}
pelicula.resumen()     => "El director de Avatar es James Cameron"


 

Algunas Clases predefinidas

Object
Clase raíz, suele usarse el literal: {a:3, b:”que tal”}

Array
Colección indexable, suele usarse el literal: [1, 2, 3]

Date
Hora y fecha extraída del reloj del sistema: new Date()

Function
Encapsula código, suele usarse literal o def.: function (x) {…}

RegExp
Expresiones regulares, suele usarse el literal: /(hola)+$/

Math
Modulo con constantes y funciones matemáticas

Number, String y Boolean
Clases que encapsulan valores de los tipos number, string y boolean como objetos Sus métodos se aplican a los tipos directamente, la conversión a objetos es automática

 

HTML5 CSS3 JS

Objetos: características avanzadas

Propiedades dinámicas

Las propiedades de objetos Pueden crearse Pueden destruirse

Operaciones sobre propiedades

x.c = 4 ¡¡OJO: sentencia compleja!! si la propiedad x.c existe, le asigna 4 si x.c no existe, crea x.c y le asigna 4

delete x.c si existe x.c, la elimina; si no existe, no hace nada

“c” in x si x.c existe, devuelve true, sino devuelve, false

 


var x = { peras:3, fresas:20 };
x.peras = 7;             => { peras:7, fresas:20 }
x.kiwis = 5;             => { peras:7, fresas:20, kiwis:5 }
delete x.fresas;         => { peras:7, kiwis:5 }

 

Objetos anidados: árboles

Los objetos pueden anidarse entre si. Los objetos anidados representan árboles

La notación punto o array puede encadenarse representando un camino en el árbol

Las siguientes expresiones se evalúan así:


var pelicula = {
    titulo: 'Avatar',
    director:{
        nombre:'James',
        apellido: 'Cameron'
    }
};
pelicula.director.nombre         => 'James'
pelicula['director']['nombre']   => 'James'
pelicula['director'].apellido    => 'Cameron'
pelicula.estreno                 => undefined
pelicula.estreno.año             => Error_de_ejecución

 

Usar propiedades dinámicas

Las propiedades dinámicas de JavaScript son muy útiles si se utilizan bien

Un objeto solo debe definir las propiedades que contengan información conocida, añadirá más solo si son necesarias

La información se puede consultar con prop1 && prop1.prop2 para evitar errores de ejecución si las propiedades no existen


// Dado un objeto pel definido con
var pel = {
    titulo: 'Avatar',
    director:'James Cameron'
};
// se puede añadir pel.estreno con
pel.estreno = {
    año: '2009',
    cine: 'Tivoli'
}
// La expresión
pel.estreno && pel.estreno.año
// devuelve pel.estreno o undefined,
// evitando ErrorDeEjecución, si
// pel.estreno no se hubiese creado


 

Referencias a objetos

Las variables que contienen objetos solo contienen la referencia al objeto.

El objeto esta en otro lugar en memoria indicado por la referencia.

Esto produce efectos laterales como ilustra el ejemplo

 


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
x.t = 1;
x.t    => 1 // x accede al mismo
y.t    => 1 // objeto que y
z.t    => undefined

 

Identidad de objetos

Las referencias a objetos afectan a la identidad porque identidad de objetos es identidad de referencias.

Los objetos no se comparan se comparan solo las referencias es poco util si no se redefine

Igualdad (débil) de objetos == y !=
no tiene utilidad tampoco con objetos
no se debe utilizar


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


 

Objeto window o this

El entorno de ejecución de JavaScript es el objeto global window
El objeto global window tiene propiedades con información sobre
objetos predefinidos de JavaScript, el navegador, el documento HTML, … window se referencia también como this en el entorno global

La propiedad document de window se referencia como window.document, this.document o document Documentación: https://developer.mozilla.org/en-US/docs/Web/API/Window

 

Variables globales y el entorno de ejecución

Un programa JavaScript se ejecuta con el objeto window como entorno una asignación a una variable no definida como x = 1;
Crea una nueva propiedad de window de nombre x, porque
x = 1; es equivalente a this.x = 1; y a window.x = 1;

Olvidar definir una variable, es un error muy habitual y al asignar un valor a la variable no definida, JavaScript no da error sino que crea una nueva propiedad de window.

Es un error de diseño de JavaScript y hay que tratar de evitarlo

 

 

HTML5 CSS3 JS

DOM: Document Object Model

DOM: Document Object Model

Objeto DOM: objeto JS asociado al documento HTML visualizado en el navegador
El navegador lo almacena en la propiedad document de window
Que contiene el árbol de objetos DOM de la página HTML
Doc: https://developer.mozilla.org/en/docs/Web/API/Document

Los objetos DOM pueden buscarse por atributos (“id”, “class”, …) de HTML
Por ej., el método document.getElementById(“idx”) devuelve el objeto DOM
asociado al elemento de la página HTML con identificador “idx”  

getElementById (“fecha”) devuelve el objeto DOM de <div id= ” fecha ” ></div>

window tiene además propiedades con el nombre de los identificadores
¡OJO! peligro: un nombre puede coincidir con el de otra propiedad de window Propiedad innerHTML de un objeto DOM Permite extraer/insertar HTML en el elemento del documento

Location, history, screen, …

location: propiedad que contiene el URL a la página en curso
location = “http://crisanformacion.com” // Carga la página en el navegador
location.reload() re-carga la página en curso
propiedades: href (url), protocol, hostname, port, pathname, search (query), …

history: propiedad con la historia de navegación Métodos para navegar por la historia: history.back(), history.forward(), …

screen: dimensiones de la pantalla width, height, availWidth, availHeight: para adaptar apps a pantallas móviles Documentacion: https://developer.mozilla.org/en-US/docs/Web/API/Window Ver ejemplos del 00 al 04

Funciones de selección de elementos

getElementById(“my_id”)
Es el mas sencillo de utilizar porque devuelve el objeto DOM con el identificador buscado o null si no lo encuentra ¡Un identificador solo puede estar en un objeto de una página HTML!

getElementsByName(“my_name”),

getElementsByTagName(“my_tag”),

getElementsByClassName(“my_class”),

querySelectorAll(“CSS selector”), …

Devuelven una matriz de objetos Por ejemplo: getElementsByName(“my_name”)[0] referencia el primer elemento con atributo name=”my_name”

Documentación: https://developer.mozilla.org/en/docs/Web/API/Document

 

 

HTML5 CSS3 JS

Sentencia for/in

for (i in x) {..bloque de instrucciones..} itera en todas las propiedades del objeto x

El nombre de propiedad y su contenido se referencian con “i” y “x[i]”

“i” contiene el nombre de la propiedad en cada iteración

“x[i]” representa el valor de la propiedad “i”

Dentro de la sentencia for debe utilizarse la notación array

 

La sentencia comienza por for

Sigue la condición (i in obj) que debe ir entre paréntesis (…)

Los bloques de más de 1 sentencia deben delimitarse con {…}

Bloques de 1 sentencia pueden omitir {…}, pero mejoran la legibilidad delimitados con {..}

Ver ejemplo: 20-for_in.htm, 21-for_in_bloque.js, 22-screen-props_table.htm

 

Eventos Javascript

Eventos y Manejadores

JavaScript utiliza eventos para interaccionar con el entorno
Hay eventos de muchos tipos: temporizadores, clicks en botón, tocar en pantalla, pulsar tecla, …

Manejador (callback) de evento es una función que se ejecuta al ocurrir el evento

El script inicial debe configurar los manejadores (callbacks) a ejecutar cuando ocurra cada evento que deba ser atendido

 


Eje de                         ↓ Evento A          ↓ Evento B
-----------|||||||||||---------|||||||||||---------|||||||||||----------
tiempos    ↑ Carga de          Manejador A         Manejador B
            página HTML

 

Eventos periódicos con setInterval(…)

JavaScript tiene una función setInterval(…) para programar eventos periódicos

setInterval (manejador, periodo_en_milisegundos)
tiene 2 parámetros
manejador: función que se ejecuta al ocurrir el evento
periodo_en_milisegundos: tiempo entre eventos periódicos

 


Eje de                         ↓ 1s               ↓ 2 s
-----------|||||||||||||-------|||||||||||--------|||||||||||------
tiempos    ↑ setInterval(          manej             manej
            manej, 1000ms)

 

Reloj

Utilizamos la función setInterval(manejador, T) para crear un reloj

Para cada segundo se muestra el valor de reloj del sistema

Ver ejemplo: 25-clock.htm

 

Eventos DOM

Los eventos DOM se asocian a elementos HTML como atributos: ‘onclick‘, ‘ondblclick‘, ‘onload‘, … donde el manejador es el valor asignado al atributo

Ejemplo:
<img src=”img1.png” onclick=” this.src=’img2.png’ “ >
Código del manejador: this.src=’img2.png’ (valor del atributo)
this referencia el objeto DOM asociado al manejador

Tutorial:
https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Event_attributes

 

Eventos en HTML

Definimos 2 manejadores de evento en un elemento <img …>
Atributo onclick= muestra el icono enfadado
Atributo ondblclick= muestra el icono pasivo

this.src referencia atributo src de <img …>
this referencia objeto DOM asociado: <img …>

Ver ejemplo: 26-event.htm

 

Eventos definidos directamente en Javascript

Los manejadores de eventos se pueden definir con objeto.addEventListener(evento, manejador)

También se pueden definir como propiedades
objeto.evento = manejador
objeto: objeto DOM al que se asocia el evento
evento: nombre (onload, onclick, onmouseover, etc. )
manejador: función ejecutada al ocurrir un evento

Ejemplos


 img.addEventListener("onclick", function() {... código ...})
 img.onclick=function() {... código...}


 

Evento como propiedad

Los manejadores de evento se definen ahora en un script separado
El objeto <img …> se identifica desde JavaScript con getElementById(…)
manejador se añade con método: object.addEventListener(event, manejador)
Actualmente se recomienda usar siempre addEventListener(…)

Ver ejemplo: 27-event_listener.htm

Los manejadores de evento se definen también así en un script separado
El objeto <img …> se identifica desde JavaScript con getElementById(…)
Sintaxis de los manejadores: object.event= manejador

Ver ejemplo: 28-event_id.htm

 

Evento onload

El script pasa a la cabecera, se separa del documento HTML
El código se mete en la función inicializar(), que se ejecutará al ocurrir onload
onload ocurre con la página HTML ya cargada y el objeto DOM construido

Ver ejemplo: 29-event_onload.htm

 

Botones y formularios en JavaScript

Entradas y botones

Entrada: un cajetín en pantalla para introducir texto en una aplicación
Se define con <input type=text …>
el atributo value=”texto” representa en texto dentro del cajetín

Botón: elemento gráfico que invita a hacer clic
Se define con <buton type=button …>nombre</button>

Ver ejemplo: 30-button_input.htm

 

Ejemplo Pregunta

Esta WebApp plantea la pregunta
¿Quien descubrió América?
para ilustrar como interaccionar a través de formularios y botones

Escribir la respuesta en el cajetín
y pulsar el botón “consultar” para saber si es correcto

Según sea la respuesta se responde
“Correcto” o “No es correcto”

Ver ejemplo: 31-question.htm

 

Comments are closed.