PDF de programación - Páginas WEB Accesibles - JavaScript

Introducción
Core
DOM

Páginas WEB Accesibles

JavaScript

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Computación

Universidad Complutense de Madrid

18 de noviembre de 2008

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

JavaScript, JScript, ECMAScript, DOM

Netscape introdujo JavaScript (1995).

Micro$oft introdujo JScript (1996).

Compromiso entre Netscape y Micro$oft: estandarización
ECMASCript (1997) (JavaScript 1.5)

DOM por el W3C, indica como se accede a los elementos de
un documento HTML o XML. DOM1 (1998), DOM2 (2000),
DOM3 (2004).

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Consideraciones

JavaScript no está disponible en todas las plataformas.

Seguridad: scripts maliciosos.
Se ejecuta en el cliente:

No puede contener secretos para el usuario.
El usuario siempre lo puede controlar.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Referencias

ECMA-262: http://www.ecma-international.org/
publications/standards/Ecma-262.htm
DOM del W3C: http://www.w3.org/DOM/DOMTR
Mozilla developer: https://developer.mozilla.org/

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Incluyendo JavaScript en HTML

En fichero independiente (el recomendado)

< script src = " j a v a S c r i p t / codigo . js " type = " text / j a v a s c r i p t " > </ script >

Dentro de HTML

< script >

[ . . . . . . ]

</ script >

1

1
2
3

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Tipos Básicos I

Las variables no tienen tipo, los valores sí.

Valores

Números: 42, 0x3F, 3.14159, 1E-10, NaN, +Infinity,
-Infinity.
No hay distinción entre reales y enteros.
Booleanos: true y false
Cadenas de caracteres: ’Cadena’ o "cadena"
null.

undefined.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Tipos Básicos II

Arrays
+ concatenación.
Cuidado

var a =[1 , ,67 ,8 ,];
a . length =5;
a [0] //1
a [1] // undefined
a [10]= ’a ’ // l e g a l

Cadenas de caracteres

var s = " hola " ;
s [1]
s . length // 4

// ”o”

Luis Fernando Llana Díaz

Páginas WEB Accesibles

1
2
3
4
5

1
2
3

Introducción
Core
DOM

Tipos Básicos III

Variables

var s = " 3 " , x ;

if ( x == u n d e f i n e d ) {

alert ( " x no tiene valor " );

} else {

alert ( " x = " + x );

}

1
2
3
4
5
6
7

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Operadores I

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

Bits
&, |, ^, ~, >>, <<

Lógicos
&&, ||, !

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

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Operadores II

Cadenas de caracteres
+ concatenación.
Cuidado

" 10 " +3;
" 10 " -3;

// ”103”
// 7

var s = " hola " ;
s [1]
s . length // 4

// ”o”

1
2

1
2
3

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Instrucciones I

if

if ( x %2==0) {

even ();

} else {

odd ();

}

1
2
3
4
5

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Instrucciones II

switch

switch ( f r u i t t y p e ) {

case " Oranges " :

s = " Oranges are $0 .59 a pound . < br > " ;
break ;

case " Apples " :

s = " Apples are $0 .32 a pound . < br > " ;
break ;

case " Bananas " :

s = " Bananas are $0 .48 a pound . < br > " ;
break ;

case " C h e r r i e s " :

s = " C h e r r i e s are $3 .00 a pound . < br > " ;
break ;

case " Mangoes " :
case " Papayas " :

s = " Mangoes and papayas are $2 .79 a pound . < br > " ;
break ;

default :

s = " Sorry , we are out of " + f r u i t t y p e + " . < br > " ;

}

Luis Fernando Llana Díaz

Páginas WEB Accesibles

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

Introducción
Core
DOM

Instrucciones III

Bucles

var n =5 , i =0 , k =0 , l =1;
while (i < n ) {

k += l ;
l += 2;
i ++;

}

var n =200 , i =0 , k =0 , l =1;
do {

k += l ;
l += 2;
i ++;

} while (i < n );

var n =200 , k =0 , l =1;
for ( var i =0; i < n ; i ++) {

k += l ;
l += 2;

}

Luis Fernando Llana Díaz

Páginas WEB Accesibles

1
2
3
4
5
6

1
2
3
4
5
6

1
2
3
4
5

Introducción
Core
DOM

Instrucciones IV

Acceso a los elementos de un objeto

var a = [1 ,7 , ,10 ,25];
a [10]= ’a ’;
s = " " ;
for ( var i in a ) {

s += " : " + i + " : " + a [ i ]+ " \ n " ;

}
alert ( " for in : " + a . length + " \ n " + s );

f u n c t i o n divs () {

var d = d o c u m e n t . g e t E l e m e n t s B y T a g N a m e ( " div " );
var s = " " ;
for ( var i in d ) {

s += i + " : " + d [ i ]+ " :\ n " ;

}
return s ;

}

. . . . . . . . . . . . .
< body onload = " alert ( divs ()) " >
. . . . . . . . . . . . .

Luis Fernando Llana Díaz

Páginas WEB Accesibles

1
2
3
4
5
6
7

1
2
3
4
5
6
7
8

1
2
3

Introducción
Core
DOM

Funciones I

Definición

f u n c t i o n square ( number ) {
return number * number ;

}

1
2
3

Los parámetros se pasan por valor.

Valores primitivos.
Objetos (incluyendo arrays);

Las funciones son variables.

var square = f u n c t i o n ( number ) { return number * number ;} // a l t e r n a t i v a

1

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Funciones II

f u n c t i o n map (f , a ) {

var result = new Array ();
for ( var i = 0; i != a . length ; i ++)

result [ i ] = f ( a [ i ]);

return result ;

}
a = map ( square , a );

Se permite recursión.

f u n c t i o n f a c t o r i a l ( n ) {

if (( n == 0) || ( n == 1))

return 1;

else {

var result = ( n * f a c t o r i a l (n -1) );
return result ;

}

}

1
2
3
4
5
6
7

1
2
3
4
5
6
7
8

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Funciones III

El número de argumentos puede ser variable, en la llamada y
en la definición

f u n c t i o n m y C o n c a t ( s e p a r a t o r ) {

var result = " " ; // i n i t i a l i z e l i s t
// i t e r a t e through arguments
for ( var i = 1; i < a r g u m e n t s . length ; i ++) {

result += a r g u m e n t s [ i ] + s e p a r a t o r ;

}
return result ;

}

// returns ”sage . b a s i l . oregano . pepper . p a r s l e y . ”
m y C o n c a t ( " . " , " sage " , " basil " , " oregano " , " pepper " , " parsley " );

f u n c t i o n next ( n ) {

if ( n == u n d e f i n e d ) {

return 0;

} else {

return n +1

}

}
next () // 0
next (2) // 3

Luis Fernando Llana Díaz

Páginas WEB Accesibles

1
2
3
4
5
6
7
8
9
10
11

1
2
3
4
5
6
7
8
9

Introducción
Core
DOM

Funciones IV

Funciones predefinidias

eval
isFinite
isNaN
parseInt y parseFloat
Number y String

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Objetos predefinidos

Array
Boolean
Date
Function
Math
Number
RegExp
String

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

DOM

Indica como acceder a cada elemento de HTML, y XML en
general (XHTML incluido).
Estandarizado por el W3C. http://www.w3.org/DOM/DOMTR
Clases importantes:

window, es parte del llamado DOM0, especificado por
Netscape en 1995.
Nodos: representan elementos y atributos
Documento: es el nodo que contiene toda la información.
Elementos: es una subclase de nodo que representan los
elementos (de HTML, XML, etc).
Cada elemento de HTML tiene una subclase de elemento que
representa ese elemento concreto.

http://antares.sip.ucm.es/~luis/
accesibilidadWEB08-09/ejemplos/javaScript/dom1.html

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Validación de formularios I

Mal ejemplo

< form action = " index . php " >
<p > < label for = " login " > Login : </ label >
< input type = " text " name = " login " id = " login " / > </ p >
<p > < label for = " pw " > P a s s w o r d : </ label >
< input type = " p a s s w o r d " name = " pw " id = " pw " / > </ p >
<p > < input type = " button " onclick = " c h e c k f o r m () " value = " send " / > </ p >
</ form >

f u n c t i o n c h e c k f o r m () {

var f = d o c u m e n t . forms [0];
var error = ’ ’;
error += f . login . value == ’ ’? ’ nlogin ’ : ’ ’;
error += f . pw . value == ’ ’? ’ n p a s s w o r d ’ : ’ ’;
if ( error != ’ ’)

{

alert ( ’ Por favor ingrese lo s i g u i e n t e : ’+ error );

} else {

f . submit ();

}

}

1
2
3
4
5
6
7

1
2
3
4
5
6
7
8
9
10
11

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Introducción
Core
DOM

Validación de formularios II

Corregido

< form action = " process . php " method = " get " o n s u b m i t = " return c h e c k f o r m ( this ) " >

<p > < label for = " login " > Login : </ label >
< input type = " text " name = " login " id = " login " / > </ p >
<p > < label for = " pw " > P a s s w o r d : </ label >
< input type = " p a s s w o r d " name = " pw " id = " pw " / > </ p >
<p > < input type = " submit " value = " send " / > </ p >

</ form >

f u n c t i o n c h e c k f o r m ( f ) {

var error = ’ ’;
error += f . login . value == ’ ’? ’\ nlogin ’: ’ ’;
error += f . pw . value == ’ ’? ’\ n p a s s w o r d ’: ’ ’;
if ( error != ’ ’) {

alert ( ’ Please enter the f o l l o w i n g : ’+ error );

}
return error == ’ ’;

}

http://antares.sip.ucm.es/~luis/accesibilidadWEB08-09/ejemplos/

javaScript/process.php?login=’’&pw=’’

Luis Fernando Llana Díaz

Páginas WEB Accesibles

1
2
3
4
5
6
7

1
2
3
4
5
6
7
8
9

Introducción
Core
DOM

Abrir ventanas nuevas

Reglas de accesibilidad

No abrir ventanas nuevas si avisar previamente.

Siempre dejar la opción al usuario: nueva ventana, misma
ventana,....

Siempre debe funcionar sin JavaScript.

<p > <a href = " http :// www . ucm . es " onclick = " l i n k _ p o p u p ( this ); return false " > UCM </ a > </ p >

1

var s t r W i n d o w F e a t u r e s =
" menubar = yes , l o c a t i o n = yes , r e s i z a b l e = yes , s c r o l l b a r s = yes , status = yes , width =400 , height =300 " ;

f u n c t i o n l i n k _ p o p u p ( src , f e a t u r e s ) {

if ( f e a t u r e s == u n d e f i n e d ) {

f e a t u r e s = s t r W i n d o w F e a t u r e s ;

}
var t h e W i n d o w =

window . open (