APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose...
Transcript of APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose...
![Page 1: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/1.jpg)
APIs de HTML
Jose Emilio Labra Gayo
Departamento de Informática
Universidad de Oviedo
![Page 2: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/2.jpg)
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)
![Page 3: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/3.jpg)
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,…
![Page 4: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/4.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Generalidades de JavaScript
Elementos de JavaScript:Objetos
Expresiones
Estructuras de control
Funciones
Arrays
Eventos
![Page 5: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/5.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Valores de Javascript
Números
Cadenas (String)
Booleanos
Objetos
null
undefined
![Page 6: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/6.jpg)
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,…
![Page 7: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/7.jpg)
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
![Page 8: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/8.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Booleanos
Valores true, false
![Page 9: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/9.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Null
Un valor que no es nada
![Page 10: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/10.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Undefined
Valor por defecto variables y parámetros
Valor de miembros no definidos de objetos
![Page 11: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/11.jpg)
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 (.)
![Page 12: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/12.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Tipado débil
El lenguaje no es "sin tipos"
![Page 13: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/13.jpg)
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>
![Page 14: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/14.jpg)
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
![Page 15: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/15.jpg)
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
![Page 16: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/16.jpg)
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
![Page 17: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/17.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Comentarios
Una línea:
// comentario de una línea
Varias líneas:/* comentario de varias líneas*/
![Page 18: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/18.jpg)
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}
![Page 19: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/19.jpg)
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 }
![Page 20: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/20.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Operadores
Aritméticos: +, -, *, /, %, ++, --
Asignación: =, +=, -=, *=, /=, %=
Comparación: ==, !=, >, <, >=, <=
Lógicos: &&, ||, !
![Page 21: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/21.jpg)
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
![Page 22: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/22.jpg)
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
}
![Page 23: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/23.jpg)
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
![Page 24: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/24.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
APIs HTML
![Page 25: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/25.jpg)
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"
![Page 26: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/26.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Evolución HTML5 y Aplicaciones Web
![Page 27: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/27.jpg)
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…
![Page 28: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/28.jpg)
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, ...
![Page 29: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/29.jpg)
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.)
![Page 30: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/30.jpg)
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
![Page 31: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/31.jpg)
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.
![Page 32: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/32.jpg)
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
![Page 33: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/33.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Elementos
<p>Un párrafo</p>
Element: p
Text: Un párrafo
![Page 34: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/34.jpg)
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
![Page 35: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/35.jpg)
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
![Page 36: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/36.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Principales Interfaces
Node
. . .Element Attr Document CharacterData
CDataSection
NodeList
NamedNodeMap
![Page 37: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/37.jpg)
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
...
![Page 38: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/38.jpg)
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
![Page 39: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/39.jpg)
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
... ... ... ...
![Page 40: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/40.jpg)
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]);
![Page 41: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/41.jpg)
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
![Page 42: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/42.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
APIs de HTML
Acceso a HTML
Acceso a CSS
Canvas
History
Websockets
Geoposicionamiento
Almacenamiento local
Aplicaciones offline
![Page 43: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/43.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Diagrama
window
navigatordocument event history
![Page 44: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/44.jpg)
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
![Page 45: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/45.jpg)
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()
![Page 46: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/46.jpg)
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";
![Page 47: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/47.jpg)
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
![Page 48: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/48.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
API Canvas
![Page 49: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/49.jpg)
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
![Page 50: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/50.jpg)
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
![Page 51: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/51.jpg)
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
![Page 52: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/52.jpg)
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
![Page 53: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/53.jpg)
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
![Page 54: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/54.jpg)
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
![Page 55: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/55.jpg)
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
![Page 56: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/56.jpg)
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
![Page 57: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/57.jpg)
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
![Page 58: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/58.jpg)
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
![Page 59: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/59.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Almacenamiento
![Page 60: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/60.jpg)
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
![Page 61: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/61.jpg)
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
![Page 62: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/62.jpg)
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)
![Page 63: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/63.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Aplicaciones offline
![Page 64: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/64.jpg)
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
![Page 65: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/65.jpg)
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
![Page 66: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/66.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Geolocalización
![Page 67: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/67.jpg)
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
![Page 68: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/68.jpg)
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
. . .
![Page 69: APIs de HTMLdi002.edv.uniovi.es/~labra/cursos/presentaciones/10_APIs_HTML.pdf · APIs de HTML Jose Emilio Labra Gayo Departamento de Informática Universidad de Oviedo](https://reader030.fdocument.pub/reader030/viewer/2022040214/5ebcecb6619b9a54f554cbc7/html5/thumbnails/69.jpg)
Jose Emilio Labra Gayo, Universidad de Oviedo
Fin de la Presentación