Scribd
Cargar
122 vistas69 páginas

10 Apis HTML

Este documento describe las APIs de HTML y JavaScript. Explica que las APIs de HTML estandarizan el desarrollo de aplicaciones web y cubren áreas como el DOM, Canvas, geolocalización y WebSockets. Luego describe que JavaScript se introdujo en 1995 y se utiliza para manipular páginas web de forma interactiva, y que el estándar ECMAScript estableció la compatibilidad. También resume los principales elementos y funcionalidades de JavaScript como números, cadenas, objetos, bucles, condicionales y funciones.

Cargado por

3dcarlos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
122 vistas69 páginas

10 Apis HTML

Este documento describe las APIs de HTML y JavaScript. Explica que las APIs de HTML estandarizan el desarrollo de aplicaciones web y cubren áreas como el DOM, Canvas, geolocalización y WebSockets. Luego describe que JavaScript se introdujo en 1995 y se utiliza para manipular páginas web de forma interactiva, y que el estándar ECMAScript estableció la compatibilidad. También resume los principales elementos y funcionalidades de JavaScript como números, cadenas, objetos, bucles, condicionales y funciones.

Cargado por

3dcarlos
Derechos de autor
© © All Rights Reserved
Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.
Formatos disponibles
Descarga como PDF, TXT o lee en línea desde Scribd
Está en la página 1/ 69

APIs de HTML

Jose Emilio Labra Gayo


Departamento de Informtica
Universidad de Oviedo

JavaScript
Netscape 2 (1995) incorpora Javascript (Brendan Eich)
Manipular pginas Web interactivamente
No viene de Java
Originalmente, LiveScript (cambio de nombre por marketing)

Microsoft desarroll JScript Problemas compatibilidad


Estndar ECMAScript (1997)
Javascript = implementacin de ECMAScript
ECMAScript = lenguaje de scripting basado en objetos
Se ejecuta empotrado en un navegador
No se realizan comprobaciones estticas 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 dbil (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
Nmeros
Cadenas (String)
Booleanos
Objetos
null
undefined

Jose Emilio Labra Gayo, Universidad de Oviedo

Nmeros
Slo hay un tipo numrico (equivaldra a Double)
No hay enteros

Valor especial: NaN (Not a Number)


Resultado de operaciones errneas

Number(x) = convierte x a n
parseInt(x,r) = convierte x a n
Math = objeto predefinido con funciones matemticas
abs, floor,log,max,pow,random,sin, sqrt,

Jose Emilio Labra Gayo, Universidad de Oviedo

Cadenas
No hay tipo carcter
Pueden utilizarse comillas simples o dobles
cadena.length = longitud de cadena
String(x) = convierte x a String
cad1 + cad2 = concatena cad1 y cad2
Mtodos:
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 parmetros
Valor de miembros no definidos de objetos

Jose Emilio Labra Gayo, Universidad de Oviedo

Objetos
Salvo los tipos primitivos, todo son Objetos
Objeto Tabla Hash
new Object() = contenedor vaco, parejas nombre/valor
Los miembros se acceden mediante carcter punto (.)

Jose Emilio Labra Gayo, Universidad de Oviedo

Tipado dbil
El lenguaje no es "sin tipos"

Jose Emilio Labra Gayo, Universidad de Oviedo

La Etiqueta <script>
Sintaxis

<script>
//instrucciones javaScript
</script>

Dnde 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 type="text/javascript" src="fuente.js"></script>

Jose Emilio Labra Gayo, Universidad de Oviedo

Objetos en Javascript
Objetos Predefinidos
String: 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 clculos matemticos
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

Mtodos habituales
String:
length(): longitud del string
replace(): reemplaza un texto por otro
ToUpperCase ():pasa a maysculas

Date:
getTime()
getFullYear()
getDay

Array
sort(): ordena elementos
concat(): concatena dos arrays

Math
Round()
max(), min()
PI

Jose Emilio Labra Gayo, Universidad de Oviedo

Nombres de Variables
Nombres sensibles maysculas/minsculas.
Deben comenzar por una letra o guin bajo. No deben
coincidir con palabras reservadas
Se podran definir como variables:
Nombre
_Opcin15
mes3

Declaracin:
Con la palabra reservada var: var x
Inicializacin:
var x = 42

Jose Emilio Labra Gayo, Universidad de Oviedo

Comentarios
Una lnea:
// comentario de una lnea
Varias lneas:
/*
comentario de varias lneas
*/

Jose Emilio Labra Gayo, Universidad de Oviedo

Bucles
While
Do while

For

For in

Jose Emilio Labra Gayo, Universidad de Oviedo

while (condicion) {
//cdigo
}
do {
//cdigo
} while (condicion);

for (inicializacin; condicin; incremento){


//cdigo
}
for (variable in object) {
//cdigo
}

Sentencias condicionales
if (condicion) {
//cdigo para condicin = true
} else {
//cdigo para condicin = false
}

switch (expresion){
case e1:
//cdigo si expresion == e1
break
case e2:
//cdigo si expresion == e2
break
default:
//cdigo si expresin no es ninguna
}

Jose Emilio Labra Gayo, Universidad de Oviedo

Operadores
Aritmticos: +, -, *, /, %, ++, -Asignacin: =, +=, -=, *=, /=, %=
Comparacin: ==, !=, >, <, >=, <=
Lgicos: &&, ||, !

Jose Emilio Labra Gayo, Universidad de Oviedo

Objetos y propiedades
Acceso a propiedades de un objeto:
nombreObjeto.nombrePropiedad
Las propiedades se definen asignndoles un valor
Es posible definir nuevos objetos de dos formas
diferentes:
Mediante inicializacin de objetos
Mediante una funcin constructora y new

No hay clases
Herencia mediante prototipos

Jose Emilio Labra Gayo, Universidad de Oviedo

Funciones
Sintaxis

function mifuncion(argumento1,argumento2,) {
//Cdigo
}

Se puede usar la palabra reservada return pero no hay


que indicar nada en la declaracin de la funcin
Pueden definirse funciones annimas (Ej. manejadores
de eventos)
var f = function() {
// cdigo
}

Jose Emilio Labra Gayo, Universidad de Oviedo

Libreras Javascript
Modernizr
Detectar soporte de carctersticas en navegadores antiguos
Compatibilidad entre navegadores

JQuery
Facilita la seleccin 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
Geolocalizacin
Web sockets
Offline
History

API (Application Programmer Interface): Conjunto de interfaces, propiedades y mtodos


Definidas en IDL (Interface Definition Language): lenguaje "neutro"
Jose Emilio Labra Gayo, Universidad de Oviedo

Evolucin 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 programacin
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
Recomendacin en 1998
Contiene 3 partes:
DOM Core = Documentos XML y HTML (comn)
Estructura de rbol: Node, Element, Attr, ...
Manipulacin del rbol: appendChild, removeChild, ...

DOM XML = Caractersticas 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 (recomendacin 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
Validacin de documentos
Nuevos tipos de eventos

Jose Emilio Labra Gayo, Universidad de Oviedo

Elementos bsicos de DOM


La base de DOM es un rbol de nodos.
No se especifica cmo es la implementacin
Solo tiene que cumplir una interfaz

Implementaciones en varios lenguajes:


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

Jose Emilio Labra Gayo, Universidad de Oviedo

Estructura jerrquica
En DOM, un documento XML se representa como un
rbol
DOM proporciona mtodos, clases e interfaces para
acceder y manipular el rbol
<html>
<head>
<title>Ejemplo</title>
</head>
<body>
<h1>Cabecera</h1>
<p>Un prrafo</p>
</body>
</html>

Jose Emilio Labra Gayo, Universidad de Oviedo

html
head

body

title

h1

Ejemplo

Cabecera

p
Un prrafo

Elementos

<p>Un prrafo</p>

Element: p

Text: Un prrafo

Jose Emilio Labra Gayo, Universidad de Oviedo

Subelementos
<p>Un prrafo
<b>marcado</b>
</p>

Element: p

Text: Un prrafo

Element: b

Text: marcado
Jose Emilio Labra Gayo, Universidad de Oviedo

Atributos
<p class="right">Un prrafo
<em>enfatizado</em>
</p>

Element: p
Attr: class
Text: Un prrafo

Element: b

Text:right
Text: marcado
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
Mtodos de bsqueda:
documentElement: elemento raz
getElementByID: elemento a partir de un ID
getElementsByTagName: elementos con cierta etiqueta

Mtodos factora (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 dems heredan de Node

Funcionalidad bsica de manipulacin del rbol


Recorrido:
attributes

Attrib1 ...
Attrib2 ...

parentNode
firstChild

item(0)
nextSibling
previousSibling

Jose Emilio Labra Gayo, Universidad de Oviedo

childNodes

lastChild

item(2)
item(1)
nextSibling
previousSibling

parentNode

Nodos del rbol


Campos Genricos
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 nmero de tems

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


procesa(listaNodos[i]);

Jose Emilio Labra Gayo, Universidad de Oviedo

Manipulacin del rbol


appendChild aade 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

document

Jose Emilio Labra Gayo, Universidad de Oviedo

event

navigator

history

Interfaz Document
Algunas propiedades:
body: devuelve el cuerpo del documento
lastModified: Fecha y hora de ltima modificacin
readyState: Estado de carga
title: Ttulo
URL: URL del documento

Algunos mtodos:
close(): Cierra el documento
open(): Abre un documento
write(), writeln(): Escribe contenido en un documento

Jose Emilio Labra Gayo, Universidad de Oviedo

Contexto de navegacin
Entorno en el que se visualizan los documentos
Cada documento contiene:
Objeto WindowProxy con interfaz Window
Objeto Location
Secuencia de documentos histricos con interfaz History

Interfaz Window
Mtodos: 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

Ratn

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 imgenes en 2D
En desarrollo, contexto 3D (basado en WebGL)

API sencilla: 45 mtodos y 21 propiedades

Jose Emilio Labra Gayo, Universidad de Oviedo

Canvas
getContext("2d"): Obtiene contexto 2D de dibujo
El objeto contexto se encarga de realizar los dibujos
<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>

Jose Emilio Labra Gayo, Universidad de Oviedo

API Canvas
Propiedad/Mtodo

Parmetros

fillStyle

Color de relleno
Color, patrn gradiente

strokeStyle

Color de pluma
Color, patrn gradiente

fillRect(x,y,ancho,alto)

Pinta un rectngulo relleno

strokeRect(x,y,ancho,alto)

Pinta un rectngulo

removeRect(x,y,ancho,alto)

Borra un rectngulo

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/Mtodo

Parmetros

beginPath()

Iniciar camino

closePath()

Cerrar camino

moveTo(x,y)

Mover a un punto

lineTo(x,y)

Lnea a un punto

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

Arco

quadraticCurveTo(cpx,cpy,x,y)

Curva cuadrtica

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


rect(x,y,ancho,alto)

Rectngulo

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/Mtodo

Parmetros

save()

Guarda estado actual

restore()

Restaura ltimo estado


guardado

Jose Emilio Labra Gayo, Universidad de Oviedo

Imgenes
Propiedad/Mtodo

Parmetros

drawImage(url)

Dibuja una imagen

Imgenes de datos
createImageData()

Crea una imagen de datos

getImageData()

Obtiene una imagen de datos

putImageData()

Pinta el canvas con una imagen

Jose Emilio Labra Gayo, Universidad de Oviedo

Texto
Propiedad/Mtodo

Parmetros

fillText(texto,x,y)

Escribe un texto

strokeText(texto,x,y)

Rellena un texto

Jose Emilio Labra Gayo, Universidad de Oviedo

Libreras 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

Mtodo de
trabajo
Elementos

Basado en pixels (bitmap)

Basado en formas. Primitivas de


dibujo
Mltiples elementos grficos.
Manipulables mediante DOM

Estilos

Modificado mediante Script

Script y CSS

Modelo de
eventos

Interaccin mediante
coordenadas (x,y)

Interaction mediante objetos


(rect, path)

Rendimiento

Mejor con superficies


pequeas y muchos objetos

Mejor con pocos objetos y


superficies grandes

Un nico elemento HTML

Jose Emilio Labra Gayo, Universidad de Oviedo

Canvas vs SVG
Pantallas
capturadas

Escenas
complejas,
muchos
objetos
Diagramas
interactivos,
Grafos

Juegos 2D

Manipular
vdeos

Imgenes
estticas

Documentos
de alta calidad
Impresin

Anuncios Web

Fuente en ingls: Jatinder Mann


Jose Emilio Labra Gayo, Universidad de Oviedo

Almacenamiento

Jose Emilio Labra Gayo, Universidad de Oviedo

API Almacenamiento
Antes de HTML5 existan diversos mtodos:
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 pgina
Evita sobrecarga de HTTP de las cookies
Ej. Preferencias de usuario

Almacenamiento = pares clave/valor


Mtodo/Propiedad

Descripcin

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 posicin n

removeItem('clave');

Borra un par clave/valor

clear()

Borra todos los pares

Jose Emilio Labra Gayo, Universidad de Oviedo

Almacenamiento de sesin
Se accede mediante window.sessionStorage
Similar a localStorage pero:
Se mantienen los datos mientras el navegador est abierto
Al abrir ventana o pestaa nueva se inicia una sesin 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 aplicacin est online/ofline
window.navigator.online = true si est conectado
Permite cambiar la lgica de la aplicacin si no hay conexin

Cach de la aplicacin
Mediante el atributo manifest se pueden indicar los ficheros a
descargarse en el cliente
La aplicacin seguir teniendo acceso a esos ficheros auque est
offline

Jose Emilio Labra Gayo, Universidad de Oviedo

Aplicaciones offline
Facilita la creacin 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>

hora.js

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

Jose Emilio Labra Gayo, Universidad de Oviedo

hora.manifest

CACHE MANIFEST
hora.html
hora.js

Geolocalizacin

Jose Emilio Labra Gayo, Universidad de Oviedo

Geolocalizacin
Permite acceder a la ubicacin del cliente
El mtodo depende del navegador:
Direccin IP, conexin red inalmbrica, antena, GPS
Importante: no hay garanta de que sea exacta

Acceso:
navigator.geolocation.getCurrentPosition
Mtodo/Propiedad

Descripcin

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
Sincronizacin mediante paso de mensajes

Web sockets: Comunicacin con el servidor


File: Gestin de ficheros
Touch events: Gestin de gestos en dispositivos tctiles
History: Control de la historia de navegacin
...

Jose Emilio Labra Gayo, Universidad de Oviedo

Fin de la Presentacin

Jose Emilio Labra Gayo, Universidad de Oviedo

También podría gustarte