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)
Jose Emilio Labra Gayo, Universidad de Oviedo
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,…
Jose Emilio Labra Gayo, Universidad de Oviedo
Generalidades de JavaScript
Elementos de JavaScript:Objetos
Expresiones
Estructuras de control
Funciones
Arrays
Eventos
Jose Emilio Labra Gayo, Universidad de Oviedo
Valores de Javascript
Números
Cadenas (String)
Booleanos
Objetos
null
undefined
Jose Emilio Labra Gayo, Universidad de Oviedo
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,…
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Booleanos
Valores true, false
Jose Emilio Labra Gayo, Universidad de Oviedo
Null
Un valor que no es nada
Jose Emilio Labra Gayo, Universidad de Oviedo
Undefined
Valor por defecto variables y parámetros
Valor de miembros no definidos de objetos
Jose Emilio Labra Gayo, Universidad de Oviedo
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 (.)
Jose Emilio Labra Gayo, Universidad de Oviedo
Tipado débil
El lenguaje no es "sin tipos"
Jose Emilio Labra Gayo, Universidad de Oviedo
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>
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Comentarios
Una línea:
// comentario de una línea
Varias líneas:/* comentario de varias líneas*/
Jose Emilio Labra Gayo, Universidad de Oviedo
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}
Jose Emilio Labra Gayo, Universidad de Oviedo
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 }
Jose Emilio Labra Gayo, Universidad de Oviedo
Operadores
Aritméticos: +, -, *, /, %, ++, --
Asignación: =, +=, -=, *=, /=, %=
Comparación: ==, !=, >, <, >=, <=
Lógicos: &&, ||, !
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
}
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
APIs HTML
Jose Emilio Labra Gayo, Universidad de Oviedo
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"
Jose Emilio Labra Gayo, Universidad de Oviedo
Evolución HTML5 y Aplicaciones Web
Jose Emilio Labra Gayo, Universidad de Oviedo
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…
Jose Emilio Labra Gayo, Universidad de Oviedo
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, ...
Jose Emilio Labra Gayo, Universidad de Oviedo
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.)
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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.
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Elementos
<p>Un párrafo</p>
Element: p
Text: Un párrafo
Jose Emilio Labra Gayo, Universidad de Oviedo
Subelementos
<p>Un párrafo
<b>marcado</b>
</p>
Element: p
Text: Un párrafo
Text: marcado
Element: b
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Principales Interfaces
Node
. . .Element Attr Document CharacterData
CDataSection
NodeList
NamedNodeMap
Jose Emilio Labra Gayo, Universidad de Oviedo
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
...
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
... ... ... ...
Jose Emilio Labra Gayo, Universidad de Oviedo
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]);
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
APIs de HTML
Acceso a HTML
Acceso a CSS
Canvas
History
Websockets
Geoposicionamiento
Almacenamiento local
Aplicaciones offline
Jose Emilio Labra Gayo, Universidad de Oviedo
Diagrama
window
navigatordocument event history
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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()
Jose Emilio Labra Gayo, Universidad de Oviedo
Acceso a Hojas de estilo
Propiedad style permite acceder/modificar CSS
var n = document.getElementById("nota");n.style.border="thick solid red";
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
API Canvas
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Caminos (Paths)
Propiedad/Método Parámetros
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Estado del canvas
Todas las propiedades del contexto son globales
Afectan a operaciones futuras
Mediante save/restore, se pueden aplicar localmente
Propiedad/Método Parámetros
save() Guarda estado actual
restore() Restaura último estado guardado
Jose Emilio Labra Gayo, Universidad de Oviedo
Imágenes
createImageData() Crea una imagen de datos
getImageData() Obtiene una imagen de datos
putImageData() Pinta el canvas con una imagen
Propiedad/Método Parámetros
drawImage(url) Dibuja una imagen
Imágenes de datos
Jose Emilio Labra Gayo, Universidad de Oviedo
Texto
Propiedad/Método Parámetros
fillText(texto,x,y) Escribe un texto
strokeText(texto,x,y) Rellena un texto
Jose Emilio Labra Gayo, Universidad de Oviedo
Librerías Canvas
ProcessingJs (http://processingjs.org/)
Ai2canvas (http://visitmix.com/labs/ai2canvas/)
Exportar Adobe Illustrator a Canvas
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Almacenamiento
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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)
Jose Emilio Labra Gayo, Universidad de Oviedo
Aplicaciones offline
Jose Emilio Labra Gayo, Universidad de Oviedo
Aplicaciones offline
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
Jose Emilio Labra Gayo, Universidad de Oviedo
Aplicaciones 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
Jose Emilio Labra Gayo, Universidad de Oviedo
Geolocalización
Jose Emilio Labra Gayo, Universidad de Oviedo
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
Jose Emilio Labra Gayo, Universidad de Oviedo
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
. . .
Jose Emilio Labra Gayo, Universidad de Oviedo
Fin de la Presentación
Top Related