APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose...

APIs de HTML

Jose Emilio Labra Gayo

Departamento de Informática

Universidad de Oviedo

Jose Emilio Labra Gayo, Universidad de Oviedo

JavaScript

Netscape 2 (1995) incorpora Javascript (Brendan Eich)

Manipular páginas Web interactivamente

No viene de Java

Originalmente, LiveScript (cambio de nombre por marketing)

Microsoft desarrolló JScript Problemas compatibilidad

Estándar ECMAScript (1997)

Javascript = implementación de ECMAScript

ECMAScript = lenguaje de scripting basado en objetos

Se ejecuta empotrado en un navegador

No se realizan comprobaciones estáticas de tipos

Sintaxis similar a Java

Herencia basada en prototipos (no en clases)


Javascript

Language de scripting interpretado

Tipado débil (loose typing)

Objetos como contenedores generales

Herencia mediante prototipos

Funciones lambda

Funcionamiento empotrado con objetos predefinidos

Math, String, Date, Window, Document,…


Generalidades de JavaScript

Elementos de JavaScript:Objetos

Expresiones

Estructuras de control

Funciones

Arrays

Eventos


Valores de Javascript

Números

Cadenas (String)

Booleanos

Objetos

null

undefined


Números

Sólo hay un tipo numérico (equivaldría a Double)

No hay enteros

Valor especial: NaN (Not a Number)

Resultado de operaciones erróneas

Number(x) = convierte x a nº

parseInt(x,r) = convierte x a nº

Math = objeto predefinido con funciones matemáticas

abs, floor,log,max,pow,random,sin, sqrt,…


Cadenas

No hay tipo carácter

Pueden utilizarse comillas simples o dobles

cadena.length = longitud de cadena

String(x) = convierte x a String

cad1 + cad2 = concatena cad1 y cad2

Métodos:

charAt, concat, indexOf, lastIndexOf, match,

replace, search, slice, split,

substring, toLowerCase, toUpperCase


Booleanos

Valores true, false


Null

Un valor que no es nada


Undefined

Valor por defecto variables y parámetros

Valor de miembros no definidos de objetos


Objetos

Salvo los tipos primitivos, todo son Objetos

Objeto ≈ Tabla Hashnew Object() = contenedor vacío, parejas nombre/valor

Los miembros se acceden mediante carácter punto (.)


Tipado débil

El lenguaje no es "sin tipos"


La Etiqueta <script>

Sintaxis

¿Dónde se colocan los scripts?En general, dentro de <head> ... </head>

Si genera una salida, dentro de <body> ... </body>

En atributos de algunas etiquetas (eventos)

En un fichero externo

<script>

//instrucciones javaScript

</script>

<script type="text/javascript" src="fuente.js"></script>


Objetos en Javascript

Objetos PredefinidosString: Cada vez que se asigna una cadena de caracteres a

una variable, se crea un objeto de la clase String

Math: Se usa para efectuar cálculos matemáticos

Date: Para el manejo de fechas y horas

Array: almacena un conjunto de valores

Boolean

Objetos del entorno ó API: Browser, Document,…

Objetos definidos por el usuario


Métodos habituales

String:length(): longitud del string

replace(): reemplaza un texto por otro

ToUpperCase ():pasa a mayúsculas

Date:getTime()

getFullYear()

getDay

Arraysort(): ordena elementos

concat(): concatena dos arrays

MathRound()

max(), min()

PI


Nombres de Variables

Nombres sensibles mayúsculas/minúsculas.

Deben comenzar por una letra o guión bajo. No deben coincidir con palabras reservadasSe podrían definir como variables:

Nombre_Opción15mes3

Declaración:Con la palabra reservada “var”: var xInicialización:

var x = 42


Comentarios

Una línea:

// comentario de una línea

Varias líneas:/* comentario de varias líneas*/


Bucles

While

Do … while

For

For in

while (condicion) {//código

}

do {//código

} while (condicion);

for (inicialización; condición; incremento){//código}

for (variable in object) {//código}


Sentencias condicionales

if (condicion) {//código para condición = true

} else {//código para condición = false

}

switch (expresion){case e1: //código si expresion == e1

breakcase e2: //código si expresion == e2

breakdefault: //código si expresión no es ninguna }


Operadores

Aritméticos: +, -, *, /, %, ++, --

Asignación: =, +=, -=, *=, /=, %=

Comparación: ==, !=, >, <, >=, <=

Lógicos: &&, ||, !


Objetos y propiedades

Acceso a propiedades de un objeto:nombreObjeto.nombrePropiedad

Las propiedades se definen asignándoles un valor

Es posible definir nuevos objetos de dos formas diferentes:

Mediante inicialización de objetos

Mediante una función constructora y “new”

No hay clasesHerencia mediante prototipos


Funciones

Sintaxis

Se puede usar la palabra reservada return pero no hay

que indicar nada en la declaración de la función

Pueden definirse funciones anónimas (Ej. manejadores

de eventos)

function mifuncion(argumento1,argumento2,…) {//Código

}

var f = function() {// código

}


Librerías Javascript

Modernizr

Detectar soporte de carácterísticas en navegadores antiguos

Compatibilidad entre navegadores

JQuery

Facilita la selección de elementos

Numerosos plugins


APIs HTML


APIs HTML

W3c define una serie de APIs para la Web

Objetivo: estandarizar desarrollo de Aplicaciones Web

Ejemplos:

Documentos (XML, HTML): DOM 1, 2, 3, 4

Canvas

Geolocalización

Web sockets

Offline

History

…

API (Application Programmer Interface): Conjunto de interfaces, propiedades y métodos

Definidas en IDL (Interface Definition Language): lenguaje "neutro"


Evolución HTML5 y Aplicaciones Web


DOM

DOM = API para acceder y manipular documentos

Independiente de plataforma y lenguaje de programación

Se define mediante IDL (Interfaz Definition Language)

La norma se define en niveles en lugar de versiones:

Niveles 1, 2, 3…


DOM Nivel 1

Recomendación en 1998

Contiene 3 partes:

DOM Core = Documentos XML y HTML (común)

Estructura de árbol: Node, Element, Attr, ...

Manipulación del árbol: appendChild, removeChild, ...

DOM XML = Características de XML

CDATASection, PIs, entityReference, ...

HTML = Funcionalidad especializada para HTML

a.href, form.submit, ...


DOM Nivel 2

Finalizado en 2000 (recomendación en 2003)

Incluye

Espacios de nombres

Hojas de estilos (CSS)

Modelo de eventos

getElementById

Recorridos (vista iterador, filtro, etc.)


DOM Nivel 3

Finalizado en 2004

Incluye

Soporte para XML Base

Cargar y almacenar documentos

XPath

Mezclar varios vocabularios

Validación de documentos

Nuevos tipos de eventos


Elementos básicos de DOM

La base de DOM es un árbol de nodos.

No se especifica cómo es la implementación

Solo tiene que cumplir una interfaz

Implementaciones en varios lenguajes:

ECMAScript, Java, C++, Python, etc.


Estructura jerárquica

En DOM, un documento XML se representa como un

árbol

DOM proporciona métodos, clases e interfaces para

acceder y manipular el árbol

<html>

<head>

<title>Ejemplo</title>

</head>

<body>

<h1>Cabecera</h1>

<p>Un párrafo</p>

</body>

</html>

html

head body

title

Ejemplo

h1 p

Cabecera Un párrafo


Elementos

<p>Un párrafo</p>

Element: p

Text: Un párrafo


Subelementos

<p>Un párrafo

<b>marcado</b>

</p>

Element: p

Text: Un párrafo

Text: marcado

Element: b


Atributos

<p class="right">Un párrafo

<em>enfatizado</em>

</p>

Element: p

Text: Un párrafo

Text: marcado

Element: b

Attr: class

Text:right


Principales Interfaces

Node

. . .Element Attr Document CharacterData

CDataSection

NodeList

NamedNodeMap


Nodo Documento

El nodo documento representa el documento entero

Métodos de búsqueda:

documentElement: elemento raíz

getElementByID: elemento a partir de un ID

getElementsByTagName: elementos con cierta etiqueta

Métodos factoría (para crear nodos)

createElement

createAttribute

createComment

createProcessingInstruction

...


Nodos del árbol

El interfaz Node representa nodos del árbol

Todos los demás heredan de Node

Funcionalidad básica de manipulación del árbol

Recorrido:

nextSibling

previousSibling

nextSibling

previousSibling

parentNode

firstChildparentNode

lastChild

item(0)item(1)

item(2)

childNodes

Attrib1 ...

Attrib2 ...

attributes


Nodos del árbol

Campos Genéricos

nodeName: DOMString

Nombre del nodo (valor de la etiqueta)

nodeValue : DOMString

Valor del nodo (si es un elemento, nulo, si es un atributo, valor)

attributes: NamedNodeMap

Lista de atributos del nodo

Los valores dependen del tipo de nodo:

nodeName nodeValue attributes

Element etiqueta Null NamedNodeMap

Attr nombre valor null

Document #document null null

Text #text contenido

del texto

null

... ... ... ...


Lista de nodos

El interfaz NodeList indica una lista de nodos

Los ítems son accedidos mediante el índice

item(0), item(1), etc.

length indica el número de ítems

for (var i=0; i < listaNodos.length; i++)procesa(listaNodos[i]);


Manipulación del árbol

appendChild añade un hijo

insertBefore inserta un hijo antes que otro

cloneNode devuelve duplicado de nodo actual

Argumento booleano (true = subelementos)

removeChild elimina un hijo

replaceChild substituye un hijo por otro

hasAttributes indica si tiene atributos

hasChildNodes indica si tiene hijos


APIs de HTML

Acceso a HTML

Acceso a CSS

Canvas

History

Websockets

Geoposicionamiento

Almacenamiento local

Aplicaciones offline


Diagrama

window

navigatordocument event history


Interfaz Document

Algunas propiedades:

body: devuelve el cuerpo del documento

lastModified: Fecha y hora de última modificación

readyState: Estado de carga

title: Título

URL: URL del documento

…

Algunos métodos:

close(): Cierra el documento

open(): Abre un documento

write(), writeln(): Escribe contenido en un documento


Contexto de navegación

Entorno en el que se visualizan los documentos

Cada documento contiene:

Objeto WindowProxy con interfaz Window

Objeto Location

Secuencia de documentos históricos con interfaz History

Interfaz Window

Métodos: close(), stop(), focus(), blur()

alert(msg), confirm(msg), prompt(msg), print(), showModalDialog()


Acceso a Hojas de estilo

Propiedad style permite acceder/modificar CSS

var n = document.getElementById("nota");n.style.border="thick solid red";


Eventos HTML

Manejador de eventos: Gestiona los eventos

Crear manejadores de eventos propios

Eventos:

Tipo Eventos

Ratón click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout

Teclado keydown,keypress,keyup

Documento abort, error,load,resize,scroll,unload

Formularios blur,change,focus,reset,select,submit


API Canvas


Canvas

Propuesto originalmente por Apple (2004)

Apple Dashboard Widget

Actualmente funciona en los principales navegadores

Canvas es un área de dibujo dentro de HTML

Es posible interactuar mediante Javascript

Permite visualizar formas e imágenes en 2D

En desarrollo, contexto 3D (basado en WebGL)

API sencilla: 45 métodos y 21 propiedades


Canvas

<html><head><title>Ejemplo</title></head><script type="text/javascript" charset="utf-8">function dibuja_canvas() {var canvas = document.getElementById("idCanvas");var context = canvas.getContext("2d");context.fillRect(50, 25, 150, 100);

}</script><body><canvas id="idCanvas" width="300" height="225"></canvas><h1 onclick="dibuja_canvas()">Dibuja</h1></body></html>

getContext("2d"): Obtiene contexto 2D de dibujo

El objeto contexto se encarga de realizar los dibujos


API Canvas

Propiedad/Método Parámetros

fillStyle Color de rellenoColor, patrón ó gradiente

strokeStyle Color de plumaColor, patrón ó gradiente

fillRect(x,y,ancho,alto) Pinta un rectángulo relleno

strokeRect(x,y,ancho,alto) Pinta un rectángulo

removeRect(x,y,ancho,alto) Borra un rectángulo

arc(x,y,ánguloInicio,ánguloFin,dir) Dibuja un arco

fill() Rellena

stroke() Pinta

globalAlpha Opacidad


Caminos (Paths)


beginPath() Iniciar camino

closePath() Cerrar camino

moveTo(x,y) Mover a un punto

lineTo(x,y) Línea a un punto

arcTo(x1,y1,x2,y2,radio) Arco

quadraticCurveTo(cpx,cpy,x,y) Curva cuadrática

bezierCurveTo(cp1x,cp1y,cp2x,cp2y,x,y) Curva de Bezier

rect(x,y,ancho,alto) Rectángulo

arc(x,y,r,angInicio,angFin,dir) Arco


Estado del canvas

Todas las propiedades del contexto son globales

Afectan a operaciones futuras

Mediante save/restore, se pueden aplicar localmente


save() Guarda estado actual

restore() Restaura último estado guardado


Imágenes

createImageData() Crea una imagen de datos

getImageData() Obtiene una imagen de datos

putImageData() Pinta el canvas con una imagen


drawImage(url) Dibuja una imagen

Imágenes de datos


Texto


fillText(texto,x,y) Escribe un texto

strokeText(texto,x,y) Rellena un texto


Librerías Canvas

ProcessingJs (http://processingjs.org/)

Ai2canvas (http://visitmix.com/labs/ai2canvas/)

Exportar Adobe Illustrator a Canvas


Canvas vs SVG

Canvas SVG

Método de

trabajo

Basado en pixels (bitmap) Basado en formas. Primitivas de

dibujo

Elementos Un único elemento HTML Múltiples elementos gráficos.

Manipulables mediante DOM

Estilos Modificado mediante Script Script y CSS

Modelo de

eventos

Interacción mediante

coordenadas (x,y)

Interaction mediante objetos

(rect, path)

Rendimiento Mejor con superficies

pequeñas y muchos objetos

Mejor con pocos objetos y

superficies grandes


Canvas vs SVG

Pantallascapturadas

Escenascomplejas,

muchosobjetos

Manipularvídeos

Anuncios Web

Diagramasinteractivos,

Grafos

Imágenesestáticas

Documentosde alta calidad

Impresión

Juegos 2D

Fuente en inglés: Jatinder Mann


Almacenamiento


API Almacenamiento

Antes de HTML5 existían diversos métodos:

Cookies, FlashStorage, IE UserData,…

En HTML5

APIs WebStorage

Se accede mediante: window.localStorage, window.sessionStorage

Otros en desarrollo: Web SQL Database, IndexedDB


Almacenamiento local

Se accede mediante window.localStorage

Se mantiene ante recargas de la página

Evita sobrecarga de HTTP de las cookies

Ej. Preferencias de usuario

Almacenamiento = pares clave/valor

Método/Propiedad Descripción

setItem('clave', valor); Inserta/actualiza un par clave/valor

getItem('clave'); Obtiene el valor de una clave

length Nº de items

key(nº) Clave de la posición nº

removeItem('clave'); Borra un par clave/valor

clear() Borra todos los pares


Almacenamiento de sesión

Se accede mediante window.sessionStorage

Similar a localStorage pero:

Se mantienen los datos mientras el navegador está abierto

Al abrir ventana o pestaña nueva se inicia una sesión nueva

Útil para datos sensibles (ej. datos bancarios)



Es posible conocer si una aplicación está online/ofline

window.navigator.online = true si está conectado

Permite cambiar la lógica de la aplicación si no hay conexión

Caché de la aplicación

Mediante el atributo manifest se pueden indicar los ficheros a

descargarse en el cliente

La aplicación seguirá teniendo acceso a esos ficheros auque esté

offline



Facilita la creación de aplicaciones Web que no

dependan de tener acceso a Internet

<!DOCTYPE HTML><html manifest="hora.manifest"><head>

<script src="hora.js"></script></head><body><p>La hora es: <output id="hora"></output></p></body></html>

CACHE MANIFEST

hora.html

hora.js

setTimeout(function () {document.getElementById('hora').value = new Date();

}, 1000);

hora.manifest

hora.js


Geolocalización


Geolocalización

Permite acceder a la ubicación del cliente

El método depende del navegador:

Dirección IP, conexión red inalámbrica, antena, GPS

Importante: no hay garantía de que sea exacta

Acceso: navigator.geolocation.getCurrentPosition

Método/Propiedad Descripción

coords Coordenadas, con las propiedades:latitude, longitude, altitude, accuracy, altitudeAccuracy,heading, speed

timestamp Instante de tiempo


Otras APIs

Drag & drop: Permite arrastrar y soltar elementos

Web workers: Permite hilos de concurrencia

Sincronización mediante paso de mensajes

Web sockets: Comunicación con el servidor

File: Gestión de ficheros

Touch events: Gestión de gestos en dispositivos táctiles

History: Control de la historia de navegación

. . .


Fin de la Presentación

APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose...

Documents

Transcript of APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose...