Javascript Ssii2 PDF

Javascript
Prcticas 2007/08
Pablo A. Haya
Introducci
n
Introduccin
Lenguaje dbilmente tipado interpretado por

parte del cliente.
NO es una variante de Java.
PERO se integran fcilmente.
Usos:
Modificar la presentacin y contenido de un

documento web.
Controlar el navegador.
Interaccionar con el usuario (eventos,
ventanas emergentes)
Controlar el estado del cliente mediante
cookies.
Interaccionar con Java.
Insertar JavaScript en HTML

Utilizando <SCRIPT>
Incluyendo dentro del manejador de un
evento.
javascript:url
Insertar Javascript
<script type=tipo language=version
src=fichero>
<script type="text/javascript">
document.write(Hola Mundo!");
</script>
<script type="text/javascript src=verificacion.js></script>
Insertar Javascript
Incluyendo dentro del manejador de un
evento
<body>
<p onclick="javascript:alert('Hola Mundo!')>Pinchame!</p>
</body>
<
noscript>
<noscript>
Permite introducir contenido alternativo en
aquellos navegadores que no soporten
Javascript, o que estuviera deshabilitado.
<SCRIPT type="text/javascript">
cdigo javascript
</SCRIPT>
<NOSCRIPT>
<p>No se ha podido ejecutar el cdigo javascript</p>
</NOSCRIPT>
Ocultando el c
digo
cdigo
En navegadores que no soportan JS, el
cdigo apareca en la pantalla.
Comentario en HTML:
Solucin:
Soportado por JS
<SCRIPT type="text/javascript">
<! Comentario HTML, oculta el cdigo en navegadores antiguos
function square(i) {
return i * i ;
}
document.write(5 elevado a dos es: ", square(5) ,".");
// fin de cdigo JS -->
</SCRIPT>
Fin de Comentario en HTML:
NO soportado por JS
Comentario en Javascript: NO
interpretado en HTML
Versiones de Javascript
<SCRIPT Language="JavaScript1.3>
</SCRIPT>
jsver
jsver
jsver
jsver
jsver
jsver
=
=
=
=
=
=
"1.3;
"1.4;
"1.5;
"1.6;
"1.7;
"1.8";
</SCRIPT>
</SCRIPT>
</SCRIPT>
</SCRIPT>
</SCRIPT>
<BODY>
<SCRIPT LANGUAGE="JavaScript">
document.write("<B>Tu navegador soporta la versin" + jsver + ".</B>")
</SCRIPT>
</body>
</html>
Consideraciones sint
cticas
sintcticas
Sensible a maysculas y minsculas
Ignora espacios, tabuladores, y retornos de
carros que aparezcan entre tokens.
Punto y coma opcional (si cada sentencia
va en una lnea separada).
Ej. a = 3
b=3
c = 4; d = 5;
Se recomienda siempre ponerlo.
Comentarios: estilo C++.

9
Variables
Se declaran con: var identificador
Se puede inicializar directamente en la
declaracin.
El tipo de la variable est implcito.
mbito local / global
NO es obligatorio declarar una variable para
utilizarla.
JS crea una variable global para todas aquellas variables no
declaradas.
var a;
var b = 5;
a = 15;
c = a + b;
10
Literales
Tipos numricos:
Enteros: [-](1-9)(0-9)*
Octal:[-]0(0-7)*
Hexadecimal: [-]0(x|X)(0-9|a-f|A-F)*
Coma Flotante:
[(+|-)][digits][.digits][(E|e)[(+|-)]digits]
Funciones matemticas:
Math.xxxxx : x= Math.sin(x);
Number.MAX_VALUE: Mayor nmero
representable.
Number.MIN_VALUE: Menor nmero negativo
11
Literales
Cadenas de caracteres:
Soporta tanto comilla simple como dobles
comillas.
'Pedro'
"Pedro
'\' Carcter de Escape:

No existe el tipo char.
Booleano: true | false
null
12
Operadores
Asignacin: =
Comparaciones: ==, !=, <, >, <=, >=
Lgicos: !, &&, ||
Aritmticos: +, -, *, /, %, ++, -- (tanto post. y
pre.)
Bit: &, |, ^, ~, <<, >>, >>>
Condicional: ?:
Otros:
typeof: devuelve el tipo: number, string, boolean,
function. Ej. i = 4; typeof i;
new: crea nuevos objetos.
13
Estructuras de control
(estilo C)
if (expresion)
sentencia
if (expresion)
sentencia
else
sentencia
while (expresion)
sentencia
do
sentencia
while(expresion)
for (inicializacion; condicion; incremento)
sentencia
switch case
break / continue
14
Estructuras de control
for (variable in objecto)
sentencia
Permite iterar por los elementos de un
array:
for (mes in Meses)
document.write(mes + ,);
Por las propiedades de un objeto:

for (prop in unObjecto)
document.write(nombre: "+ prop + "; valor:" +
unObjecto[prop],"<br>");
15
Funciones
Una funcin es un tipo de datos => Se puede pasar como
argumento a otro funcin, se puede almacenar en variables
function nombre(arg1, arg2, , argN) {
cdigo de la funcin
return resultado ;
}
Ej:
function distancia(x1, y1,x2, y2) {
return Math.sqrt((x1-x2)*(x1-x2) + (y1-y2)*(y1-y2));
}
dist = distancia(x1, y1, x2, y2)
16
Funciones
El objeto funcin tiene dos propiedades:
arguments: que contiene un array con los argumentos
pasados a la funcin.
caller: que permite hacer referencia a quin llam a la
funcin.
Slo se definen durante la ejecucin de la funcin.
function f() {
return f.arguments[0] *f.arguments[1];}
Comprobar cuantos argumentos:

f.arguments.length != 3
Argumentos variables:
for(var i = 0;i < max.arguments.length;i++)
Argumentos con nombre + argumentos sin nombre.

Constructor: nmero indefinido de argumentos. El ltimo es
el cuerpo.
var f = new Function("x", "y","return x*y;)
17
Objetos
Un objeto es un tipo de datos que permite
almacenar datos de distinto tipo.
Cada dato se referencia mediante un
nombre denominado propiedad.
Cada par objeto-propiedad tiene asociado
un posible valor.
Se acceden mediante el punto:
window.location = "http://www.eps.uam.es";
18
Objetos
Un objeto se crea con new:
o = new Object();
Se pueden aadir nuevas propiedades a un
objeto. Pero no se pueden eliminar una vez
definidas.
Constructores: definen e inicializan las
propiedades en un objeto.
function Punto(x, y) {
this.x = x;
this.y = y;
}
19
Objetos
Mtodos: Modifican las propiedades del
objeto.
function dist(p) {
return Math.sqrt((this.x-p.x)*(this.x-p.x) + (this.y-p.y)*(this.y-p.y));
}
var p1 = new Punto(4, 3);
var p2 = new Punto (5, 10);
p1.distancia = dist;
d = p1.distancia(p2);
d = p2.distancia(p1);// ERR O R !!!!!
20
Objetos
Solucin:
function dist(p) {
}
function Punto(x, y) {
this.x = x;
this.y = y;
this.distancia = dist;
}
var p1 = new Punto(4, 3);
var p2 = new Punto (5, 10);
Incluir asociacin en el
constructor
21
Objetos
Prototipo del objeto:
Conjunto de variables compartidas por todas las
instancias. Existe un nica copia.
Se pueden definir mtodos como parte del
prototipo del objeto.
Punto.prototype.distancia = function(p) {
}
22
Objetos/Clases
Variables de objeto: accesibles en un solo
objeto.
Variables/Mtodos de instancias: accesible
en todas las instancias.
Variables/Mtodos de clase: accesible
mediante el nombre de la clase.
Punto.distancia = function (p1, p2) {
return Math.sqrt((p1.x-p2.x)*(p1.x-p2.x) + (p1.y-p2.y)*(p1.yp2.y));
}
Punto.distancia(p1,p2)
23
Objetos/Diccionario
Se puede acceder al valor de las
propiedades de un objeto indexndolo
mediante el nombre de la propiedad:
objecto["propiedad"]
Cualquier se puede emplear como un

Diccionario
personas = new Object;
personas.pablo = 33;
personas.manu = 29;
personas.paco = 18;
for (nombre in personas) {
document.write(nombre, tiene ,personas[nombre]);
}
24
M
todos especiales
Mtodos
toString()
Se emplea cuando se precisa convertir el objeto
a una cadena de caracteres.
Se puede sobreescribir.
valueOf()
Se emplea cuando el objeto se necesita
convertir un tipo distinto de objeto o de una
cadena de caracteres. Suele ser un valor
numrico.
25
Arrays
Coleccin de objetos.
Se pueden incializar en la declaracin:
var nombre_array = [valor1, valor2, ..., valorN];
Se indexan numricamente mediante []:

var palo = [oros,copas',espadas',bastos'];
s = El palo es + palo[3];
Arrays dinmicos y sparse:

a = [];
// a = new Object()
a[0] = 1;
a[10000] = Este es el elemento 10,000";//length=10001
26
Arrays
Array = Objeto
a = new Object();
Objeto Array
Propiedad length
a = new Array(); // Array vaco
a = new Array(10); // 10 elementos
a = new Array(1,2,3); // 3 elementos
27
M
todos Array
Mtodos
join([sep]): convierte los elementos de un array en una
cadena de caracteres separados por sep. Por defecto, sep = ,
a = new Array(Pablo,Manu, Paco);
s = a.join(); // s = Pablo,Manu,Paco
s = a.join(:);s = Pablo : Manu : Paco
reverse(): invierte el orden de los elementos.

sort([func]): ordena los elementos del array segn la funcin
de ordenacin func. Por defecto, se ordenan alfabeticamente.
a = new Array(33, 4, 1111, 222);
a.sort();// orden alfabtico: 1111, 222, 33, 4
function nuevoorden(a,b) {
return a-b;
}
a.sort(nuevoorden);// orden numrico: 4, 33, 222, 1111
28
Ejemplo
<HT ML>
<HEAD>
<TITLE>Ejemplo de uso de arrays</TITLE>
</HEAD>
<BO DY>
<H1>Utilizando arrays</H1>
<SC RIPT TYPE="text/javascript"><!-miArray = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
document.write("miArray: "+miArray+"<P>")
document.write("miArray.toString():"+miArray.toString()+"<P>")
document.write("miArray.join(':'):"+miArray.join(':')+"<P>")
document.write("miArray.reverse():"+miArray.reverse()+"<P>")
document.write("miArray.sort:"+miArray.sort())
//--></SCRIPT>
</BODY>
</HT ML>
29
Manejo de cadenas
Concatenacin: +
Mtodos variable tipo String:
Longitud: s.length()
Carcter en posici i-esima: s.charAt(i)
Subcadena: s.substring(principio, fin)
Primera posicin carcter: s.indexOf(carcter)
30
Manejo de cadenas
Propiedades
Descripcin
length
longitud de la cadena de carateres
Mtodos
Descripcin
charAt(i)
Devuelve carcter que se encuentra en la posicin i-esima de la cadena.
fromCharCode(codes)
Crea una cadena a partir de una secuencia de caracteres separados por

comas
indexOf(patron)
Devuelve el ndice a la primera aparicin de la cadena patrn. 1 si la

cadena patrn no est contenida
indexOf(patron,comienzo)
Igual que el mtodo anterior pero empezando la bsqueda a partir de un

ndice dado.
lastIndexOf(patron)
Devuelve el ndice a la ltima aparicin de la cadena patrn. 1 si la cadena

patrn no est contenida
lastIndexOf(patron,comienzo) Igual que el mtodo anterior pero empezando la bsqueda a partir de un

ndice dado.
split(separador)
Devuelve un array que contiene la separacin en subcadenas segn un

carcter separador
substring(comienzo)
Devuelve la subcadena resultante a partir de una posicin dada
substring(comienzo,final)
Devuelve la subcadena que se encuentra acotado entre dos ndices de

comienzo y final
toLowerCase()
Convierte en minsculas todos los caracteres de la cadena
toUpperCase()
Convierte a maysculas la cadena.

31
Ejemplo
<HT ML>
<HEAD> <TITLE>Ejemplo de empleo del objeto String</TITLE> </HEAD>
<BO DY>
<SC RIPT TYPE=text/javascript><!-function displayLine(text) {
document.write(text+"<BR>")
}
s = new String("Esta es una prueba de los mtodos del objeto String.")
displayLine('s = '+s)
displayLine('s.charAt(1) = '+s.charAt(1))
displayLine('s.indexOf("os") = '+s.indexOf("os"))
displayLine('s.lastIndexOf("os") = '+s.lastIndexOf("os"))
displayLine('s.substring(22,32) = '+s.substring(22,32))
displayLine('s.toLowerCase() = '+s.toLowerCase())
displayLine('s.toUpperCase() = '+s.toUpperCase())
split = s.split(" ")
for(i=0;i<split.length; ++i)
displayLine('split['+i+'] ='+split[i])
//-->
</SCRIPT> </BODY> </HT ML>
32
Objeto Math
Propiedades
Descripcin
Constante de Euler
LN2
Logaritmo natural de 2
LN10
Logaritmo natural de 10
LOG2E
Logaritmo en base 2 de e
LOG10E
Logaritmo en base 10 de e
PI
La constante PI
SQRT1_2
Raz cuadrada de
SQRT2
Raz cuadrada de 2
33
Objeto Math
Mtodos
Descripcin
abs(x)
Devuelve el valor absoluto de x
acos(x)
Devuelve el arcocoseno de x en radianes
asin(x)
Devuelve el arcoseno de x en radianes
atan(x)
Devuelve la arcotangente de x en radianes
atan2(x,y)
Devuelve el ngulo de la coordenada polar de (x,y)
ceil(x)
Devuelve el ltimo entero mayor o igual a x
cos(x)
Devuelve el coseno de x en radianes
exp(x)
Devuelve ex
floor(x)
Devuelve el mayor entero que sea menor o igual a x
34
Objeto Math
Mtodos
Descripcin
log(x)
Devuelve el logaritmo de x
max(x,y)
Devuelve el nmero mayor de x e y
min(x,y)
Devuelve el nmero menor de x e y
pow(x,y)
Devuelve xy
random()
Devuelve un nmero aleatorio comprendido entre 0 y 1.
round(x)
Devuelve el entero ms prximo a x
sin(x)
Devuelve el seno de x en radianes
sqrt(x)
Devuelve la raz cuadrada de x
tan(x)
Devuelve la tangente x en radianes
35
Ejemplo
<HT ML>
<HEAD>
<TITLE>Ejemplo de empleo de objeto Math</TITLE>
</HEAD>
<BO DY>
<H1>El objeto Math</H1>
<SC RIPT TYPE="text/javascript">
<!-document.write(Math.PI+"<BR>")
document.write(Math.E+"<BR>")
document.write(Math.ceil(1.234)+"<BR>")
document.write(Math.random()+"<BR>")
document.write(Math.sin(Math.PI/2)+"<BR>")
document.write(Math.min(100,1000)+"<BR>")
//-->
</SCRIPT>
</BODY>
</HT ML>
36
Objeto Date
Mtodos
Descripcin
getDate()
Devuelve el da del mes como un entero comprendido entre 1

y 31
getDay()
Muestra el da de la semana como un entero comprendido
entre 0(domingo) y 6 (sbado)
getHours()
Muestra la hora actual (local) como un entero comprendido
entre 0 y 23
getMilliseconds() Muestra el nmero de millisegundos actual (local) con un
entero comprendido entre 0 y 999.
getMinutes()
Devuelve el nmero de minutos actuales (local) con un
entero comprendido entere 0 y 59.
getMonth()
Muestra el nmero de mes actual (local) comprendido entre
0 y 11.
getSeconds()
Muestra el nmero de segundos actuales (local)
comprendidos entre 0 y 59.
getYear()
Devuelve el ao local. Algunos navegadores lo representan
como el nmero de aos transcurridos desde 1900.
getTime()
Muestra el nmero de milisegundos transcurridos desde el 1
de Enero de 1970 00:00:00
37
Ejemplo Date
<HT ML>
<HEAD> <TITLE>Ejemplo que muestra la fecha y hora del sistema</TITLE></HEA D>
<!-function muestraFecha() {
var d = new Date();
document.write("Fecha completa:"+ Date() + "<BR>");
document.write("Da del mes:"+ d.getDate() + "<BR>");
document.write("Da de la semana:"+ d.getDay() + "<BR>");

document.write("Hora:"+ d.getHours() + "<BR>");
document.write("Minutos:"+ d.getMinutes() + "<BR>");
document.write("Segundos:"+ d.getSeconds() + "<BR>");
document.write("Mes:"+ d.getMonth() + "<BR>");
document.write("Ao:"+ d.getYear() + "<BR>");
document.write("Hora completa:"+ d.getTime() + "<BR>");
}
//-->
</SCRIPT>
<BO DY onload = muestraFecha()></BO D Y></HT ML>
38
HTML DOM
((Document
Document Object Model
)
Model)
Define un mecanismo estndar para
acceder y manipular un documento HTML.
Un pgina se estructura como un rbol de
elementos, atributos y texto.
Define objetos y propiedades para todos los
elementos del documento, ms los mtodos
para accederlos.
39
Objetos predefinidos
40
Objeto document
Propiedades Descripcin
alink
Especifica el color que tendrn los vnculos activos
bgColor
Establece el color de fondo del documento
cookie
Proporciona acceso a las cookies asociadas al documento
lastModified
Identifica la ltima modificacin del documento basndose

en la informacin de la cabecera
Especifica el color por defecto de los enlaces
linkColor
referrer
title
Identifica la URL del documento (si existiera) al que apunta

el vnculo
Proporciona acceso al ttulo del documento
URL
Identifica la URL desde donde se carga el documento
vlink
Especifica el color de los vnculos ya visitados

41
Objeto document
Mtodos
Descripcin
close()
Cierra la salida del documento
open([mimeType,[replace]])
Crea y abre un nuevo documento del tipo MIME

especificado. El argumento replace especifica
que el nuevo documento va a utilizar el historial
del documento original
write(expr1[,...,exprN])
Escribe las expresiones HTML en el documento
writeln(expr1[,...,exprN])
Igual que el anterior pero aadiendo un retorno

de carro tras escribir la ltima expresin.
42
Ejemplo
<HT ML>
<BO DY>
<A HREF="enlace1.htm">a</A>
<A HREF="enlace2.htm">b</A><hr>
<IM G SRC="images/boton1.png"><IMG SRC="images/boton2.png"><hr>
<!-for (i=2;i<100;i*=2){
document.write(i+"<br>");
}
document.write("<H3>Enlaces en el documento</H3>");
for(i=0;i<document.links.length;i++){
document.write(document.links[i],"<br>");
}
document.write("<H3>Imgenes en eldocumento</H3>");
for(i=0;i<document.images.length;i++){
document.write(document.images[i].src,"<br>");
}
//-->
</SCRIPT></BODY>
</HT ML>
43
Objeto window
Propiedades Descripcin
closed
Determina si la ventana se encuentra cerrada
defaultStatus
Muestra el estado predeterminado de la ventana en su parte

inferior
document
Objeto de tipo document que se ha cargado en la ventana
frames
array que contiene los marcos de la pgina
history
Proporciona acceso al objeto History que guarda el histrico de

la pgina
name
Nombre de la ventana
status
Proporciona acceso al estado de la zona activa de la ventana
top
Proporciona acceso a la ventana superior

44
Objeto window
Mtodos
Descripcin
alert(mensaje)
Muestra una ventana con un mensaje de

aviso
close()
Cierra la ventana
confirm(mensaje)
Muestra un mensaje de confirmacin.
open(url, nombre,[,caracteristicas])
Abre una nueva ventana cargando el

documento apuntado por url.
prompt(mensaje[,caracteristicas])
Muestra una ventana donde para que el

usuario escriba un mensaje de texto
setTimeOut(expresin,ms)
Evalua la expresin pasados tantos

milisegundos como se indiquen
45
Ejemplo
<HT ML>
<HEAD>
<TITLE>Ejemplo de cmo abrir otra ventana</TITLE>
</HEAD>
<BO DY>
<A href='javascript:window.open(http://www.eps.uam.es");void(0);' >Abrir una pgina en otra
ventana</A>
<BR>
<A
href='javascript:open("../images/logo_uam_peq.gif","output","width=320,height=240,toolbar=no,men
ubar=no");
void(0);' >Abrir una pgina en otra ventana sin barra de herrramientas</A>
</BODY>
</HT ML>
46
Ejemplo (II)
<HT ML>
<HEAD>
<SCRIPT type= text/javascript">
<!-function salta()
{
window.location="http://www.eps.uam.es";
}
//-->
</SCRIPT>
</HEAD>
<B O DY onload='window.setTimeout("salta()", 2000);'>
<P> Espere un mo mento ...
</BODY>
</HT ML>
47
Objeto navigator
Propiedade Descripcin
s
appCodeName Especifica el nombre en cdigo del navegador

appName
Nombre del navegador
appVersion
Versin del navegador
mimeTypes
Array que contiene todos los tipos MIME que

admite el navegador
Array con todos los plug-ins que tiene instalado
el navegador
Plugins
Mtodos
Descripcin
javaEnabled
Comprueba si el navegador admite java

48
Ejemplo
<HT ML>
<HEAD>
<SC RIPT>
<!-function BrowserName() {
document.write("<CE NTER><H1>"+ window.navigator.appNa me+" "+
window.navigator.appVersion+"</H1></CENTER>");
document.write("<CE NTER><H2>"+ window.navigator.appCodeNa me+"</H2></CENTER>");
}
//-->
</SCRIPT>
<TITLE>No mbre del navegador utilizado</TITLE>
</HEAD>
<BO DY onload = BrowserName()>
</BODY>
</HT ML>
49
Ejemplo DOM
<html>
<head>
<title>Document Object Model</title>
</head>
<body>
<h1>Esto es una prueba</h1>
<p>de funcionamiento de <strong>DOM</strong>
</p>
</body>
</html>
50
Ejemplo DOM
51
Tipos de nodos
Hasta 12 tipos de nodos. Los ms
empleado son:
Tipo
Descripcin
Document
Representa a todo el documento. Nodo raz.
Element
Etiqueta XHTML. nico nodo que puede tener

atributos (Attr)
Attr
Representa un atributo de una etiqueta XHMTL.

Tiene dos propiedades name y value.
Comment
Un comentario incluido dentro de la pgina.
Text
Texto incluido dentro de un etiqueta
52
Interface Node
Propiedade Descripcin
s
parentNode
Nodo padre
childNodes
Lista de nodos hijos
firstChild
Primer hijo
lastChild
ltimo hijo.
previousSibling Anterior nodo hermano

nextSibling
Siguiente nodo hermano
attributes
Mapa con los atributos indexados por nombre.
53
Interace Node
Mtodos
Descripcin
insertBefore(newChild, refChild) Insertar newChild antes de refChild,

siendo este ltimo uno de los hijos del
nodo en cuestin.
replaceChild(newChild,
Reemplaza oldChild por newChild
oldChild)
removeChild(oldChild)
Elimina oldChild.
appendChild(newChild)
boolean hasChildNodes()
Agrega newChild como ltimo hijo del

nodo.
Comprueba si el nodo tiene hijos.
54
Accediendo a los nodos

Mediante los mtodos getElementById()
y getElementsByTagName()
document.getElementById(ID");
document.getElementsByTagName(nombre");
document.getElementById(ID').getElementsByT
agName(nombre");
Mediante las propiedades parentNode,

firstChild, y lastChild.
55
Creaci
n de nodos
Creacin
Crear una etiqueta:
document.createElement(nombre)
var n = document.createElement(strong)
Crear un nodo de tipo text:
document.createTextNode(texto);
var txt =document.createTextNode(Nuevo nodo);
Aadir texto a un nodo:
nodo.appendChild(nodo);
n.appendChild(txt);
document.body.appendChild(n);
56
Interface Element
Mtodos
Descripcin
String getAttribute(name)
setAttribute(name, value)
Obtiene la representacin textual de un

atributo
Cambia el contenido de un atributo.
removeAttribute(name)
Elimina un atributo
Attr getAttributeNode(name)
Obtiene un atributo
setAttributeNode(attr)
Modifica un atributo
NodeList
Obtiene los elementos que tienen un
getElementsByTagName(name) nombre dado
57
Eventos en JS
Se producen cuando el usuario interacciona
con el navegador.
Se puede asociar cdigo JS que responda a
estos eventos.
58
Eventos (I)
Evento
Accin
Elemento
onAbort
El usuario aborta la descarga de

una imagen(por ejemplo eligiendo
otro enlace o pulsando el botn de
Stop)
<img>
onBlur
El usuario quita el foco de atencin

a una ventana o elemento
<body>, <button>, <input>,

<label>, <select>, <textarea>
onChange
El usuario cambia el valor.
<input>, <select>, <textarea>
onClick
El usuario hace click en un

elemento o enlace
Todos
onDblclick
El usuario hace doble click en un

elemento o enlace
Todos
onDragDrop
El usuario coloca un objeto sobre la

ventana, por ejemplo un fichero.
onError
Sea producido un error en el

documento o imagen que se est
cargando.
59
Eventos (II)
Evento
Accin
Elemento
onFocus
El usuario quita el foco de atencin

a una ventana o elemento.
<body>, <button>, <input>,

<label>, <select>, <textarea>
onKeyDown
El usuario presiona una tecla.
Formulario + <body>
onKeyPress
El usuario presiona una tecla y la

mantiene
Formulario + <body>
onKeyUp
El usuario suelta una tecla
Formulario + <body>
onLoad
El usuario carga una pgina en el

navegador
<body>
onMouseDown
El usuario presiona el botn del

ratn
Todos
onMouseMove
El usuario mueve el ratn
<input>, <select>, <textarea>
onMouseOut
El usuario mueve el cursor fuera de

un rea o un enlace.
Todos
60
Eventos (II)
Evento
Accin
Elemento
onMouseOver
El usuario mueve el cursor sobre un

enlace.
Todos
onMouseUp
El usuario suelta el botn del ratn
Todos
onMove
El usuario mueve la ventana
onReset
El usuario inicializa un formulario

pulsando el botn de reset
<form>
onResize
El usuario cambia el tamao de una

ventana
<body>
onSelect
El usuario selecciona un elemento de

texto.
<input>, <select>,
<textarea>
onSubmit
El usuario enva un formulario
<form>
onUnload
El usuario cierra la pgina
<body>
61
Manejadores de eventos
Ej.
<input type="text" size="30"
id="email" onchange="checkE mail()">
<div onclick="handleEvent(event)>Plsame me</div>
<script>
function handleEvent(aEvent){
// Si aEvent es null, signfica que seguimos el modelo de
// eventos de Internet Explorer, de ah window.event.
var myEvent = aEvent ? aEvent : window.event;
}
</script>
62
Ejemplo onMouseOver /
onMouseOut
<HT ML>
<HEAD>
<TITLE>Ejemplo sencillo que cambia la barra de estado</TITLE>
</HEAD>
<B O DY>
<A HREF="http://www.eps.uam.es"
onMouseOver="window.status='Entra y disfruta';return true"
onMouseOut="window.status='';return true">
Pgina principal de la <B>EPS-UA M</B>
</A>
</BODY>
</HT ML>
63
Ejemplo
<HT ML>
<HEAD>
<TITLE>Ejemplo sencillo que intercambia dos imgenes</TITLE>
</HEAD>
<B O DY>
<A HREF="http://www.eps.uam.es"
onMouseOver="boton.src='boton2.png';return true"
onMouseOut="boton.src='boton1.png';return true">
<IMG SRC="boton1.png" BORDE R="0" NA ME="boton">
</A>
</BODY>
</HT ML>
64
Ejemplo onClick
<HT ML>
<BO DY>
<!-function dejame(){
alert("no me toques!");
}
//-->
</SCRIPT>
<FO R M NA M E="Form1">
<INPUT TYPE="button"
NA ME="boton1"
VALUE="no me toques!"
onClick="dejame()">
</FOR M>
</BODY>
</HT ML>
65
Informaci
n Evento
Informacin
Evento
type: devuelve el nombre del evento.
Evento Raton
pageX, pageY
clientX, clientY
screenX, screenY
Evento teclado: (onkeypress)

keyCode
which
// IE
// Netscape/Firefox/Opera
66
Evento teclado
function manejadorTeclado(e) {
var code;
var e = e ? e : window.event;
if(e.keyCode) code = e.keyCode;
else if(e.which) code = e.which;
var c = String.fromCharCode(code);
alert(La tecla pulsada es' + c);
}
67
Evento rat
n
ratn
mousedown/mouseup
which/button
Evento
W3C IE
Botn izq.
Botn del
medio
Botn derch.
function doSomething(e) {
var rightclick;
var e = e ? e :window.event;
if(e.which)
btnIzq = (e.which == 3);
else if(e.button)
btnIzq = (e.button == 2);
alert(Botn Izq:' + btnIzq );//true o false
}
68
Evento Rat
n
Ratn
function manejadorRaton(e) {
var posx = 0; var posy = 0;
var e = e ? e : window.event;
if(e.pageX || e.pageY)
{
posx = e.pageX;
posy = e.pageY;
}
else if(e.clientX || e.clientY)
{
posx = e.clientX + document.body.scrollLeft
+ document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop
+ document.documentElement.scrollTop;
}
// posx y posy contienen la posicin del ratn relativa al documento
}
69
Eventos Temporales
setTimeout("show_date_time();", 1000);
clearTimeout()
70
AJAX
AJAX = Asynchronous JavaScript And XML.
AJAX explot en 2005 gracias a Google.
(Google suggest)
Extensin de Javascript + HTTP
Aplicaciones web interactivas ms cercanas
a las aplicaciones de escritorio.
Compatible con:
Internet Explorer 5.0+, Safari 1.2, Mozilla 1.0 /
Firefox, Opera 8+, and Netscape 7.
71
PruebaAjax.htm
<html>
<body>
<script>
...
</script>
<form name=formulario">
No mbre: <input type="text" name=usuario" />
Hora:
<input type="text" name=hora" />
</form>
</body>
</html>
72
PruebaAjax.htm (2)
<scripttype="text/javascript">
function ajaxFunction() {
var xmlHttp;
try {
xmlHttp=new XMLHttpRequest();// Firefox, Opera 8.0+, Safari
} catch e {
try {
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");//Internet Explorer
} catch e {
try {
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
} catch e {
alert(Tu navegador no soporta AJAX!");
return false;
}
}
}
}
//... continua
73
PruebaAjax.htm (3)
xmlHttp.onreadystatechange=function() {
if(xmlHttp.readyState==4) {
document.formulario.hora.value=xmlHttp.responseText;
}
}
xmlHttp.open("G ET",getTime",true);
xmlHttp.send(null);
}
</script>
<form name=formulario">
No mbre: <input type="text onkeyup="ajaxFunction();" name=usuario" />
Hora: <input type="text" name=hora" />
</form>
</body></html>
74
Estado de la petici
n
peticin
Estado
Descripcin
La peticin no se ha inicializado.
La peticin se ha inicializado.
La peticin se ha enviado.
La peticin est en proceso.
La peticin se ha completado
75
M
s ejemplos
Ms
function state_Change()
{
if(xmlhttp.readyState==4)
{// 4 = "loaded"
if(xmlhttp.status==200)
{// 200 = "OK"
document.getElementById('T1').innerHT ML=xmlhttp.responseText;
}
else
{
alert(Ha habido algn problema en la comunicacin con el servidor:" +
xmlhttp.statusText);
}
}
}
76
Google Web Toolkit

http://code.google.com/webtoolkit/
http://www128.ibm.com/developerworks/web/library/
wa-ie2mozgd/
http://www.quirksmode.org/js/events_prop
erties.html
www.w3school.com
77

Javascript Ssii2 PDF

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Javascript Ssii2 PDF

Cargado por

Copyright:

Formatos disponibles

Javascript

Lenguaje dbilmente tipado interpretado por

PERO se integran fcilmente.

Modificar la presentacin y contenido de un

Insertar JavaScript en HTML

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

Comentarios: estilo C++.

'\' Carcter de Escape:

Por las propiedades de un objeto:

Comprobar cuantos argumentos:

Argumentos con nombre + argumentos sin nombre.

Cualquier se puede emplear como un

var nombre_array = [valor1, valor2, ..., valorN];

Se indexan numricamente mediante []:

Arrays dinmicos y sparse:

reverse(): invierte el orden de los elementos.

longitud de la cadena de carateres

Devuelve carcter que se encuentra en la posicin i-esima de la cadena.

Crea una cadena a partir de una secuencia de caracteres separados por

Devuelve el ndice a la primera aparicin de la cadena patrn. 1 si la

Igual que el mtodo anterior pero empezando la bsqueda a partir de un

Devuelve el ndice a la ltima aparicin de la cadena patrn. 1 si la cadena

lastIndexOf(patron,comienzo) Igual que el mtodo anterior pero empezando la bsqueda a partir de un

Devuelve un array que contiene la separacin en subcadenas segn un

Devuelve la subcadena resultante a partir de una posicin dada

Devuelve la subcadena que se encuentra acotado entre dos ndices de

Convierte en minsculas todos los caracteres de la cadena

Convierte a maysculas la cadena.

Devuelve el valor absoluto de x

Devuelve el arcocoseno de x en radianes

Devuelve el arcoseno de x en radianes

Devuelve la arcotangente de x en radianes

Devuelve el ngulo de la coordenada polar de (x,y)

Devuelve el ltimo entero mayor o igual a x

Devuelve el coseno de x en radianes

Devuelve el mayor entero que sea menor o igual a x

Devuelve el nmero mayor de x e y

Devuelve el nmero menor de x e y

Devuelve un nmero aleatorio comprendido entre 0 y 1.

Devuelve el entero ms prximo a x

Devuelve el seno de x en radianes

Devuelve la raz cuadrada de x

Devuelve la tangente x en radianes

Devuelve el da del mes como un entero comprendido entre 1

Especifica el color que tendrn los vnculos activos

Establece el color de fondo del documento

Proporciona acceso a las cookies asociadas al documento

Identifica la ltima modificacin del documento basndose

Identifica la URL del documento (si existiera) al que apunta

Identifica la URL desde donde se carga el documento

Especifica el color de los vnculos ya visitados

Cierra la salida del documento

Crea y abre un nuevo documento del tipo MIME

Escribe las expresiones HTML en el documento

Igual que el anterior pero aadiendo un retorno

Determina si la ventana se encuentra cerrada

Muestra el estado predeterminado de la ventana en su parte

Objeto de tipo document que se ha cargado en la ventana

array que contiene los marcos de la pgina

Proporciona acceso al objeto History que guarda el histrico de

Proporciona acceso al estado de la zona activa de la ventana

Proporciona acceso a la ventana superior

Muestra una ventana con un mensaje de