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

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

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

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

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

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

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

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

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 );

}

Luis Fernando Llana Díaz

Páginas WEB Accesibles

1
2
3
4
5

1
2
3

1
2
3
4
5
6
7

Operadores I

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

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

Lógicos
&&, ||, !

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

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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

Instrucciones I

if

if ( x %2==0) {

even ();

} else {

odd ();

}

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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

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

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

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

1
2
3
4
5
6

1
2
3
4
5

1
2
3
4
5
6
7

1
2
3
4
5
6
7
8

1
2
3

Funciones I

Definición

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

}

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

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 );

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Funciones II

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

1

1
2
3
4
5
6
7

1
2
3
4
5
6
7
8

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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

Funciones IV

1
2
3
4
5
6
7
8
9
10
11

1
2
3
4
5
6
7
8
9

Funciones predefinidias

eval
isFinite
isNaN
parseInt y parseFloat
Number y String

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Objetos predefinidos

Array
Boolean
Date
Function
Math
Number
RegExp
String

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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

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 ();

}

}

Luis Fernando Llana Díaz

Páginas WEB Accesibles

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
10
11

1
2
3
4
5
6
7

1
2
3
4
5
6
7
8
9

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 " ;

1
2
3
4
5
6
7
8
9
10
11
12

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 ( src . g e t A t t r i b u t e ( ’ href ’) , ’ ’ , f e a t u r e s );

t h e W i n d o w . focus ();
return t h e W i n d o w ;

}

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Ventanas con pestañas I

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Ventanas con pestañas II

JavaScript puro – tabs.1.php
Se carga todo el código, programación JavaScript.

Programación en servidor puro (PHP,...) – tabs.2.php
Se carga sólo lo necesario, cada click es llamada servidor.

Mezclando los dos. – tabs.3.php

Luis Fernando L